/* Our Story - owner order V08 (2026-10-15, staging only). Loaded only on /our-story/ (editorial-page.php).
   Official colours only: Malva Ceniza #A08A9B, Arcilla Rosa #CDB6AE, Perla Mate #F4F1EC, Oscuro Tecnico #2B2A28
   (text tints derived from Oscuro / Malva for WCAG AA, as on the approved Home V02). Playfair Display + Jost.
   Every rule is scoped to .kos so the header (Logo C), footer (F2 V07) and other pages are not affected. */

.kaitlany-editorial--our-story { background: #F4F1EC; }
.kos { color: #2B2A28; font-family: "Kaitlany Jost", "Jost", Arial, sans-serif; overflow-x: clip; }
.kos-shell { width: min(100% - clamp(32px, 7vw, 112px), 1200px); margin-inline: auto; }
.kos-section { padding-block: clamp(64px, 8vw, 116px); }
.kos-eyebrow { margin: 0 0 16px; color: #6b5663; font-size: 13px; font-weight: 600; letter-spacing: 2.2px; line-height: 1.35; text-transform: uppercase; }
.kos h1, .kos h2, .kos h3 { font-family: "Kaitlany Playfair Display", "Playfair Display", Georgia, serif; font-weight: 400; color: #2B2A28; }
.kos h1 { max-width: 12ch; margin: 0 0 28px; font-size: clamp(46px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -.035em; }
.kos h2 { margin: 0 0 26px; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.028em; }
.kos h3 { margin: 0 0 10px; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -.01em; }
.kos p { margin: 0 0 1.05em; color: #4d4648; font-size: 17px; line-height: 1.75; }
.kos p:last-child { margin-bottom: 0; }
.kos-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Photographs: existing catalogue photographs shown as they are (cropped by the frame only, never recoloured). */
.kos-photo { margin: 0; overflow: hidden; border-radius: 2px; background: #e9e1db; }
.kos-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 01 Hero */
.kos-hero { padding-block: clamp(48px, 6.5vw, 96px) clamp(56px, 7vw, 104px); background: linear-gradient(180deg, #F4F1EC 0%, #F4F1EC 70%, rgba(205,182,174,.22) 100%); border-bottom: 1px solid rgba(160,138,155,.28); }
.kos-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 92px); align-items: center; }
.kos-hero__copy > p:not(.kos-eyebrow) { max-width: 520px; font-size: 18px; }
.kos-photo--hero { aspect-ratio: 4 / 3; }
.kos-photo__img--hero { object-position: 50% 60%; }

/* 02 Why we began / 05 The little details: text + photograph, alternating sides */
.kos-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.kos-split--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.kos-split--text { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.kos-split__copy { max-width: 600px; }
.kos-photo--portrait { aspect-ratio: 4 / 5; }
.kos-details { background: #fbfaf8; border-block: 1px solid rgba(160,138,155,.2); }
.kos-photo--detail { aspect-ratio: 5 / 4; }
.kos-photo__img--detail { object-position: 50% 58%; }

/* 03 The name */
.kos-name { padding-block: clamp(56px, 7vw, 104px); }
.kos-name__panel { max-width: 860px; padding: clamp(40px, 6vw, 76px) clamp(22px, 6vw, 80px); text-align: center; border: 1px solid #CDB6AE; background: rgba(255,255,255,.42); }
/* V08.1: official vertical KAI-011 (square 2048 canvas; visible artwork 89.75% x 63.58% of the box, starting 14% from the top).
   Untouched SVG, proportions kept by a square box + object-fit; negative margins only trim the transparent canvas.
   1440-681 px: box 290 -> artwork about 260 x 184 px. */
.kos-name__logo { display: block; width: 290px; height: 290px; max-width: none; margin: -18px auto -30px; object-fit: contain; object-position: center; filter: none; transform: none; }
.kos-name__text { max-width: 580px; margin-inline: auto; }
.kos-name__text p:nth-child(3) { color: #2B2A28; font-family: "Kaitlany Playfair Display", "Playfair Display", Georgia, serif; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.45; }

/* 04 The creative process: four steps, text-only until real process photographs are approved */
.kos-process { background: #fbfaf8; border-block: 1px solid rgba(160,138,155,.2); }
.kos-process__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.kos-process__intro h2 { margin-bottom: 0; }
.kos-process__lead { max-width: 600px; }
.kos-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(160,138,155,.45); }
.kos-step { padding: 30px clamp(18px, 2vw, 30px) 6px; border-left: 1px solid rgba(160,138,155,.3); }
.kos-step:first-child { padding-left: 0; border-left: 0; }
.kos-step__num { display: block; margin-bottom: 18px; color: #8a7484; font: 400 clamp(34px, 3vw, 44px)/1 "Kaitlany Playfair Display", "Playfair Display", Georgia, serif; }
.kos-step p { font-size: 16px; line-height: 1.7; }

/* 06 What guides us: exactly three principles */
.kos-values__heading { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.kos-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(160,138,155,.45); }
.kos-value { padding: 32px clamp(20px, 3vw, 44px) 4px; border-left: 1px solid rgba(160,138,155,.3); }
.kos-value:first-child { padding-left: 0; border-left: 0; }
.kos-value__num { display: block; margin-bottom: 16px; color: #6b5663; font-size: 13px; font-weight: 600; letter-spacing: 2px; }
.kos-value p { font-size: 16px; line-height: 1.7; }

/* 07 The next chapter */
.kos-next { background: linear-gradient(180deg, rgba(205,182,174,.18) 0%, rgba(205,182,174,.38) 100%); border-top: 1px solid rgba(160,138,155,.28); }
.kos-next__inner { max-width: 760px; text-align: center; }
.kos-next__inner p:not(.kos-eyebrow) { max-width: 640px; margin-inline: auto; }
.kos-next__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
/* Same approved Home V02 button, one step darker in the same Malva family so white 15 px text reaches WCAG AA (>= 5.3:1). */
.kos-next__actions .khp-button--primary { background: linear-gradient(180deg, #7a6474, #66525f); border-color: #66525f; }

@media (max-width: 1024px) {
  .kos-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kos-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kos-step:nth-child(3) { padding-left: 0; border-left: 0; }
  .kos-step:nth-child(n+3) { border-top: 1px solid rgba(160,138,155,.3); margin-top: 22px; }
}

@media (max-width: 900px) {
  .kos-hero__grid, .kos-split, .kos-split--reverse, .kos-process__intro { grid-template-columns: minmax(0, 1fr); }
  .kos h1 { max-width: none; }
  .kos-photo--hero { aspect-ratio: 3 / 2; }
  .kos-split__copy, .kos-process__lead { max-width: 640px; }
  .kos-photo--portrait { aspect-ratio: 4 / 3; max-width: 640px; }
  .kos-photo--detail { aspect-ratio: 3 / 2; max-width: 640px; }
  .kos-split--reverse .kos-photo { order: 2; } /* text first on narrow screens, photograph after it */
  .kos-values__grid { grid-template-columns: minmax(0, 1fr); }
  .kos-value { padding: 26px 0 22px; border-left: 0; border-top: 1px solid rgba(160,138,155,.3); }
  .kos-value:first-child { border-top: 0; }
}

@media (max-width: 680px) {
  .kos-shell { width: calc(100% - 40px); }
  .kos-section { padding-block: 56px; }
  .kos-hero { padding-block: 36px 48px; }
  .kos h1 { font-size: clamp(38px, 10.5vw, 48px); margin-bottom: 20px; }
  .kos h2 { font-size: clamp(30px, 8.4vw, 38px); margin-bottom: 20px; }
  .kos p, .kos-hero__copy > p:not(.kos-eyebrow) { font-size: 16px; line-height: 1.7; }
  .kos-steps { grid-template-columns: minmax(0, 1fr); }
  .kos-step, .kos-step:nth-child(3) { padding: 24px 0 18px; border-left: 0; margin-top: 0; border-top: 1px solid rgba(160,138,155,.3); }
  .kos-step:first-child { border-top: 0; }
  .kos-step__num { margin-bottom: 10px; font-size: 32px; }
  .kos-name__panel { padding: 36px 20px; }
  .kos-name__logo { width: 223px; height: 223px; margin: -14px auto -24px; } /* artwork about 200 x 142 px: above the 180 px brand minimum, fits 320 px */
  .kos-next__actions { flex-direction: column; align-items: stretch; }
  .kos-next__actions .khp-button { width: 100%; }
}

@media (max-width: 360px) {
  .kos-shell { width: calc(100% - 32px); }
  .kos h1 { font-size: 36px; }
  .kos h2 { font-size: 29px; }
}