/* Section components. Materials (hero, category rows) from direction B, the sourcing sequence
   (rail, drawings, stage explorer) from direction C, the commercial-focus plate from direction A.
   All bound to the tokens in base.css. */

:root{ --overlap:240px }
@media (max-width:767.98px){ :root{ --overlap:190px } }

/* ---------- Home hero: large type on navy, two material crops stepping down onto the page ---------- */
.hero{padding:var(--s7) 0 0}
.hero h1{font-size:var(--fs-display); line-height:1.02; letter-spacing:-.032em; max-width:23ch}
.hero h1 .ln{display:block}
.hero-lower{display:grid; grid-template-columns:minmax(0, 4.6fr) minmax(0, 7.4fr); gap:var(--s8); margin-top:var(--s7)}
.hero-copy{display:flex; flex-direction:column; gap:var(--s5); padding-bottom:var(--s7)}
.hero .sub{font-size:var(--fs-lead); line-height:1.55; max-width:34ch}
.swatches{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-self:start; margin-bottom:calc(-1 * var(--overlap))}
.swatch{display:block; text-decoration:none; color:var(--navy)}
.swatch:nth-child(2){margin-top:var(--s8)}
.frame{position:relative; display:block; aspect-ratio:4 / 5; overflow:hidden; background:var(--navy)}
.frame img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.curtain{position:absolute; inset:0; background:var(--navy-deep); transform:scaleY(0); transform-origin:top center; pointer-events:none}
.intro .hero .curtain{transform:scaleY(1)}
.swatch-label{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:52px; padding:var(--s3) 0; border-bottom:1px solid var(--border); font:600 1.125rem/1.3 var(--font)}
.swatch-label .i{color:var(--teal-ink); transition:transform .25s var(--ease)}
.swatch:hover img{transform:scale(1.035)}
.swatch:hover .swatch-label .i{transform:translateX(4px)}
/* The link spans navy and white, so its focus ring is drawn on the label, which is always on white. */
.hero .swatch:focus-visible{outline:none}
.hero .swatch:focus-visible .swatch-label{outline:2px solid var(--teal-ink); outline-offset:4px}
/* The disclosure for the two crops lives in the next section, so it always sits on white just
   below the stepped-down images, whatever the width. */
.hero-cap{font-size:14px; line-height:1.55; color:var(--ink-2); max-width:70ch}
@media (max-width:1099.98px){
  .hero-lower{grid-template-columns:1fr; gap:var(--s6)}
  .hero-copy{padding-bottom:0}
  .swatches{max-width:640px}
}
@media (max-width:767.98px){
  .hero{padding-top:var(--s6)}
  .hero h1{font-size:2.25rem; line-height:1.06}
  .hero h1 .ln{display:inline}
  .swatches{gap:var(--s3)}
  .swatch:nth-child(2){margin-top:var(--s6)}
  .swatch-label{font-size:1rem; min-height:48px}
}

/* ---------- The sourcing sequence: five drawings on one teal rail ---------- */
.sequence{padding:var(--sec) 0}
.hero + .sequence{padding-top:var(--s7)}
.seq-top{max-width:46rem}
.hero + .sequence .seq-top{display:grid; grid-template-columns:minmax(0, 4.6fr) minmax(0, 7.4fr); gap:var(--s8); max-width:none}
.hero + .sequence .seq-head{grid-column:1; grid-row:1}
.hero + .sequence .hero-cap{grid-column:2; grid-row:1; padding-top:calc(var(--overlap) - var(--s7) + var(--s3))}
.hero + .sequence .seq-head .lead{max-width:34ch}
@media (max-width:1099.98px){
  .hero + .sequence{padding-top:calc(var(--overlap) + var(--s3))}
  .hero + .sequence .seq-top{display:block}
  .hero + .sequence .hero-cap{padding-top:0; margin-bottom:var(--s7)}
  .hero + .sequence .seq-head .lead{max-width:52ch}
}

.dw{overflow:visible; fill:none; stroke:var(--navy); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.dw .sheet{fill:var(--surface)}
.dw .tint{fill:var(--surface-2)}
.dw .heavy{stroke-width:3}
.dw .faint{stroke:var(--muted)}
.dw .acc{stroke:var(--teal)}
.dw .acc-ink{stroke:var(--teal-ink)}
.dw .fold{stroke:var(--teal-ink); stroke-dasharray:4 3}
.dw .dim{stroke:var(--ink-2); stroke-width:1}
.dw text{fill:var(--ink-2); stroke:none; font:600 11px/1 var(--mono)}
.dw .fill-teal{fill:var(--teal); stroke:none}
.dw .fill-navy{fill:var(--navy); stroke:none}
.dw .fill-muted{fill:var(--muted); stroke:none}
.dw .p-grow-x{transform-origin:left center}
.dw .p-grow-y{transform-origin:center top}
.dw .p-pop{transform-origin:center}
.dw g, .dw path, .dw rect{transform-box:fill-box}
.st-art .dw text{display:none}

.seq{position:relative; list-style:none; margin:var(--s7) 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--s5)}
.st-link{position:relative; display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit}
.st-art{display:block}
.st-art .dw{width:100%; max-width:236px; height:auto}
/* Each stage carries its own rail segment, so the line stays aligned at any width. */
.st-rail{display:flex; align-items:center; margin:var(--s4) calc(-1 * var(--s5)) 0 0}
.st-node{position:relative; z-index:1; flex:none; display:block; width:13px; height:13px; border-radius:50%; background:var(--surface); border:2px solid var(--teal)}
.st-seg{flex:1; height:2px; background:var(--teal); transform-origin:left center}
.st:last-child .st-rail{margin-right:0}
.st:last-child .st-seg{position:relative}
.st:last-child .st-seg::after{content:""; position:absolute; right:0; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--teal)}
.st-link:hover .st-node, .st-link:focus-visible .st-node{background:var(--teal)}
.st-name{margin-top:var(--s4); font:600 1.125rem/1.3 var(--font); color:var(--navy)}
.st-tag{margin-top:2px; font:600 14px/1.3 var(--font); color:var(--teal-ink)}
.st-desc{margin-top:var(--s1); font-size:15px; line-height:1.5; color:var(--ink-2); max-width:26ch}
.st-link:hover .st-name{text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:5px}
.scope-note{margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--border); font-size:14px; color:var(--ink-2); max-width:62ch}
.seq.two{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:760px}
.seq.two .st-desc{max-width:34ch}
/* Only the first two of five stages: the line runs on, dashed, instead of ending. */
.seq.two .st:last-child .st-seg{height:0; background:none; border-top:2px dashed var(--teal)}
.seq.two .st:last-child .st-seg::after{display:none}
@media (max-width:1099.98px){
  .seq{gap:var(--s4)}
  .st-rail{margin-right:calc(-1 * var(--s4))}
  .st-desc{font-size:14px}
}
@media (max-width:899.98px){
  .seq, .seq.two{grid-template-columns:1fr; gap:0}
  .seq::before{content:""; position:absolute; left:6px; top:24px; bottom:24px; width:2px; margin-left:-1px; background:var(--teal)}
  .st-seg{display:none}
  .st-rail{display:block; grid-column:1; grid-row:1 / span 3; margin:0; align-self:center}
  .st-link{display:grid; grid-template-columns:13px 112px minmax(0, 1fr); grid-template-rows:auto auto auto; column-gap:var(--s4); align-items:center; padding:var(--s3) 0}
  .st-art{grid-column:2; grid-row:1 / span 3}
  .st-art .dw{width:112px; height:84px}
  .st-name{grid-column:3; grid-row:1; margin:0; align-self:end}
  .st-tag{grid-column:3; grid-row:2}
  .st-desc{grid-column:3; grid-row:3; align-self:start; max-width:none}
}

/* ---------- Stage explorer (APG tabs, automatic activation) ---------- */
.explorer{padding:var(--sec) 0; background:var(--surface-2)}
.ex{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:var(--s8); margin-top:var(--s7)}
.ex-tabs{position:relative; display:flex; flex-direction:column; border-left:2px solid var(--border); align-self:start}
.ex-tab{display:grid; grid-template-columns:40px 1fr; align-items:center; min-height:64px; padding:0 var(--s4) 0 var(--s5); background:none; border:0; border-radius:0; text-align:left; font:600 1.0625rem/1.3 var(--font); color:var(--ink-2); cursor:pointer}
.ex-tab .t-no{font:600 14px/1 var(--mono); color:var(--ink-2)}
.ex-tab:hover{color:var(--navy)}
.ex-tab[aria-selected="true"]{color:var(--navy)}
.ex-tab[aria-selected="true"] .t-no{color:var(--teal-ink)}
.ex-ind{position:absolute; left:-2px; top:0; width:2px; height:64px; background:var(--teal); pointer-events:none}
.ex-panel{display:grid; gap:var(--s5)}
.ex-panel + .ex-panel{margin-top:var(--s8)}
.js .ex-panel + .ex-panel{margin-top:0}
.ex-photo img{width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border:1px solid var(--border); background:var(--surface)}
.ex-photo figcaption{margin-top:var(--s2); font-size:14px; line-height:1.5; color:var(--ink-2)}
.ex-body{display:grid; grid-template-columns:minmax(0, 180px) minmax(0, 1fr); gap:var(--s6); align-items:start}
.ex-art{background:var(--surface); border:1px solid var(--border); padding:var(--s3); aspect-ratio:4 / 3; display:grid; place-items:center}
.ex-art .dw{width:100%; height:auto; stroke-width:1.2}
.ex-art .dw .heavy{stroke-width:2.2}
.ex-art .dw text{font-size:9px}
.ex-text{display:flex; flex-direction:column; gap:var(--s3)}
.ex-tag{font:600 14px/1.3 var(--font); color:var(--teal-ink)}
.ex-text h3{font-size:1.625rem; letter-spacing:-.015em; line-height:1.2}
.ex-text dl{margin-top:var(--s2); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s4) var(--s6)}
.ex-text dt{font:600 14px/1.4 var(--font); color:var(--ink-2)}
.ex-text dd{margin-top:var(--s1)}
html:not(.js) .ex-tabs{display:none}
html:not(.js) .ex{grid-template-columns:1fr}
@media (max-width:1099.98px){
  .ex{grid-template-columns:1fr; gap:var(--s6)}
  .ex-tabs{flex-direction:row; flex-wrap:wrap; border-left:0; border-bottom:2px solid var(--border)}
  .ex-tab{grid-template-columns:auto auto; gap:8px; min-height:48px; padding:0 var(--s5) 0 0}
  .ex-ind{display:none}
  .ex-tab[aria-selected="true"]{text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:8px}
}
@media (max-width:699.98px){
  .ex-tabs{flex-direction:column; flex-wrap:nowrap; border-bottom:0; border-top:1px solid var(--border)}
  .ex-tab{grid-template-columns:32px 1fr; justify-items:start; min-height:48px; padding:0; border-bottom:1px solid var(--border); text-underline-offset:6px}
  .ex-body, .ex-text dl{grid-template-columns:1fr}
  .ex-art{max-width:240px}
}

/* ---------- Commercial focus plate (Natural Earth, Equal Earth projection) ---------- */
.focus{padding:var(--sec) 0; border-top:1px solid var(--border)}
.focus-grid{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); grid-template-areas:"head plate" "key plate" "note plate"; grid-template-rows:auto auto 1fr; gap:0 var(--s8)}
.focus-head{grid-area:head}
.plate-fig{grid-area:plate; margin:0}
.plate{position:relative}
.map{position:relative; aspect-ratio:1000 / 780; background:var(--surface-2); border:1px solid var(--border)}
.map svg{position:absolute; inset:0; width:100%; height:100%; overflow:hidden}
.grat{fill:none; stroke:oklch(90% .014 240); stroke-width:.8px; vector-effect:non-scaling-stroke}
.land{fill:var(--surface); stroke:var(--border); stroke-width:.8px; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.source{fill:var(--teal); stroke:var(--surface); stroke-width:.8px; vector-effect:non-scaling-stroke}
.uae{fill:var(--navy)}
.office-ring{fill:var(--surface); stroke:var(--navy); stroke-width:1.4px; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center}
.office-mark{fill:var(--navy)}
.arc{fill:none; stroke:var(--teal-ink); stroke-width:2px; vector-effect:non-scaling-stroke; stroke-linecap:round}
.lbl{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, -50%); white-space:nowrap; pointer-events:none}
.lbl > span{display:block; padding:3px 8px 4px; background:var(--surface); border:1px solid var(--border); color:var(--navy); font:600 15px/1.25 var(--font); transition:opacity .2s var(--ease)}
.lbl small{display:block; font:500 14px/1.3 var(--font); color:var(--ink-2)}
.lbl-office{transform:translate(14px, -50%)}
.grat-lab{position:absolute; inset:0; pointer-events:none; font:400 14px/1 var(--mono); color:var(--ink-2)}
.grat-lab span{position:absolute; white-space:nowrap}
.grat-lab .la{left:0; top:var(--y); transform:translate(calc(-100% - 10px), -50%)}
.grat-lab .lo{top:100%; left:var(--x); transform:translate(-50%, 9px)}
.plate-src{margin-top:38px; font-size:14px; color:var(--ink-2)}
.legend{grid-area:key; margin-top:var(--s7)}
.legend-title{font:600 15px/1.3 var(--font); color:var(--navy); padding-bottom:var(--s2); border-bottom:1px solid var(--navy)}
.legend ul{list-style:none; margin:0; padding:0}
.key{display:grid; grid-template-columns:30px 1fr; align-items:start; gap:12px; min-height:48px; padding:10px 0; width:100%; background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; text-align:left; font:600 15px/1.35 var(--font); color:var(--navy); cursor:pointer}
.key small{display:block; font-size:14px; font-weight:400; color:var(--ink-2)}
.key:hover .sw, .key[aria-pressed="true"] .sw{outline:2px solid var(--teal-ink); outline-offset:2px}
.key:hover small, .key[aria-pressed="true"] small{color:var(--fg)}
.sw{width:30px; height:20px; margin-top:1px}
.map-note{grid-area:note; align-self:end; margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--border); font-size:14px; line-height:1.6; color:var(--ink-2)}
.layer > *, .lbl > span{transition:opacity .2s var(--ease)}
.plate[data-focus] .layer > *{opacity:.16}
.plate[data-focus="source"] .layer[data-layer="source"] > *,
.plate[data-focus="market"] .layer[data-layer="market"] > *,
.plate[data-focus="office"] .layer[data-layer="office"] > *,
.plate[data-focus="route"] .layer[data-layer="route"] > *{opacity:1}
.plate[data-focus] .lbl > span{opacity:.25}
.plate[data-focus="source"] .lbl[data-layer="source"] > span,
.plate[data-focus="market"] .lbl[data-layer="market"] > span,
.plate[data-focus="office"] .lbl[data-layer="office"] > span{opacity:1}
@media (max-width:1099.98px){
  .focus-grid{grid-template-columns:1fr; grid-template-areas:"head" "plate" "key" "note"; grid-template-rows:auto}
  .plate-fig{margin:var(--s6) 0 0 44px}
  .legend{margin-top:var(--s6)}
}
@media (max-width:699.98px){
  .plate-fig{margin:var(--s5) 0 0}
  .grat-lab{display:none}
  .plate-src{margin-top:var(--s3)}
  .lbl > span{font-size:14px; padding:2px 6px 3px}
  .lbl-end{transform:translate(calc(-100% + 18px), -50%)}
  .lbl-office{transform:translate(calc(-100% + 10px), 14px)}
}

/* ---------- Category rows: image-led, alternating sides ---------- */
.rows{padding:var(--sec) 0}
.row{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:var(--s8); align-items:start}
.row + .row{margin-top:var(--s9); padding-top:var(--s9); border-top:1px solid var(--border)}
.row.flip{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr)}
.row.flip .media{order:2}
.media{margin:0}
.media .frame{aspect-ratio:3 / 2}
.media figcaption{margin-top:var(--s2); font-size:14px; line-height:1.5; color:var(--ink-2)}
.frame .clip{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s var(--ease)}
.frame .clip.on{opacity:1}
.row-text{display:flex; flex-direction:column; gap:var(--s4)}
.row-text h2{font-size:clamp(1.625rem, 1.35rem + 1vw, 2.125rem)}
.tagline{font-size:var(--fs-lead); color:var(--navy)}
.scope{margin-top:var(--s2); border-top:2px solid var(--navy)}
.scope > div{padding:var(--s4) 0; border-bottom:1px solid var(--border)}
.scope dt{font:600 14px/1.4 var(--font); color:var(--ink-2)}
.scope dd{margin-top:var(--s1); max-width:52ch}
.scope .limit dd{color:var(--ink-2)}
@media (max-width:899.98px){
  .row, .row.flip{grid-template-columns:1fr; gap:var(--s5)}
  .row.flip .media{order:0}
  .row + .row{margin-top:var(--s8); padding-top:var(--s8)}
}

/* ---------- Corporate register ---------- */
.register{margin-top:var(--s6); border-top:2px solid var(--navy)}
.register > div{display:grid; grid-template-columns:minmax(0, 16rem) minmax(0, 1fr); gap:var(--s5); padding:var(--s4) 0; border-bottom:1px solid var(--border)}
.register dt{font:600 15px/1.5 var(--font); color:var(--ink-2)}
.register dd{color:var(--navy); font-weight:500}
@media (max-width:699.98px){ .register > div{grid-template-columns:1fr; gap:var(--s1)} }
.record-note{margin-top:var(--s5); max-width:68ch}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:var(--s8); align-items:start}
.brief-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.copy-status{display:flex; align-items:center; gap:var(--s2); min-height:28px; margin-top:var(--s3); font-size:15px; font-weight:600}
.copy-status:empty{display:none}
/* State is carried by the icon and the words, not by a new colour (brand contract: no hues outside the palette). */
.copy-status.ok{color:var(--teal-ink)}
.copy-status.err{color:var(--navy)}
.copy-status .i{width:18px; height:18px}
.template{display:block; width:100%; min-height:300px; margin-top:var(--s4); padding:var(--s4); border:1px solid var(--border); border-radius:0; background:var(--surface-2); color:var(--fg); font:400 14px/1.6 var(--mono); resize:vertical}
.contact-card{padding:var(--s6); background:var(--surface-2); border-top:2px solid var(--navy)}
.contact-card h2{font-size:1.375rem}
.contact-card dl{margin-top:var(--s4)}
.contact-card dl > div{padding:var(--s3) 0; border-bottom:1px solid var(--border)}
.contact-card dt{font:600 14px/1.4 var(--font); color:var(--ink-2)}
.contact-card dd{margin-top:var(--s1)}
.contact-card a{color:var(--teal-ink); font-weight:600; text-underline-offset:3px}
@media (max-width:899.98px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- How we work: responsibilities ---------- */
.resp-text{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s7); margin-top:var(--s6); padding-top:var(--s5); border-top:2px solid var(--navy)}
.resp-text p{max-width:52ch}
@media (max-width:767.98px){ .resp-text{grid-template-columns:1fr} }

/* ---------- Page list (404) ---------- */
.page-list{list-style:none; margin:0; padding:0; border-top:2px solid var(--navy); max-width:40rem}
.page-list li{border-bottom:1px solid var(--border)}
.page-list .text-link{display:flex; justify-content:space-between; min-height:56px}

/* ---------- Credits ---------- */
.credit-list{margin:var(--s3) 0 0; padding-left:1.1em}
.credit-list li + li{margin-top:var(--s2)}
.credits{margin-top:var(--s6); border-top:2px solid var(--navy)}
.credits > div{display:grid; grid-template-columns:minmax(0, 14rem) minmax(0, 1fr); gap:var(--s5); padding:var(--s5) 0; border-bottom:1px solid var(--border)}
.credits dt{font-weight:600; color:var(--navy)}
.credits dd p + p{margin-top:var(--s2)}
.credits a{color:var(--teal-ink); overflow-wrap:anywhere}
@media (max-width:699.98px){ .credits > div{grid-template-columns:1fr; gap:var(--s2)} }

/* ---------- Print and capture: every animated element in its finished state ---------- */
@media print{
  .curtain{transform:scaleY(0) !important}
  .st-node, .st-art, .dw .p-sheet, .dw .p-drop, .dw .p-fade, .dw .p-pop, .row-text > *, .swatch-label, .hero h1 .ln{opacity:1 !important; transform:none !important}
  .st-seg, .dw .p-grow-x, .dw .p-grow-y{transform:none !important}
  .arc{stroke-dashoffset:0 !important}
  .layer, .land, .lbl{opacity:1 !important}
  .ex-panel[hidden]{display:grid !important}
  .ex-tabs{display:none !important}
}