/* ============================================================================
   THE ACCOUNT FILE — Rayane Hammoud
   A single static page. No framework, no build step.
   Colour is her own: azure #229CD7 and navy #082C4D, sampled from her deck.
   The azure is darkened wherever it becomes text, because #229CD7 measures
   2.6:1 on the paper ground and would fail WCAG AA as body copy.
   ========================================================================= */

:root{
  color-scheme: light;

  /* grounds */
  --paper:      #FBF9F5;
  --paper-2:    #F2EFE9;
  --vellum:     #F1EBDD;   /* used ONLY behind words Rayane wrote herself */
  --band:       #082C4D;
  --band-ink:   #E8EEF3;

  /* ink */
  --ink:        #082C4D;
  --ink-2:      #42596B;
  --ink-3:      #6C7F8D;   /* never text — icon strokes and disabled states only */

  /* rules — most of this page is made of these */
  --rule:        rgba(8,44,77,.16);
  --rule-strong: rgba(8,44,77,.32);

  /* azure, split three ways so one identity passes three contrast tests */
  --azure:      #229CD7;   /* her exact deck azure — fills, rules and marks only */
  --azure-band: #45AFE0;   /* azure as TEXT on the navy band — 5.7:1 */
  --azure-ink:  #0064C8;   /* links — 5.7:1 on paper */
  --azure-deep: #0B5E8C;   /* evidence ticks, mono metadata — 7.1:1 on paper */

  /* image mounts */
  --plate:      #F2EDE5;   /* warm sand: reads as a second paper stock under the studio greys */
  --plate-dark: #0D1E30;   /* for the dark-ground assets */
  --plate-edge: rgba(8,44,77,.14);
  --img-filter: none;

  /* the header is theme-invariant — one ground in both themes */
  --chrome:     #0A1622;
  --chrome-ink: #EEF3F6;
  --chrome-ink-2: #93A8B8;
  --chrome-rule: rgba(238,243,246,.18);

  /* geometry */
  --shell: 1200px;
  --gutter: 24px;
  --header-h: 58px;
  --radius: 2px;
}
@media (min-width:1024px){ :root{ --header-h: 66px; } }

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme: dark;
  --paper:#0B1723; --paper-2:#101F2E; --vellum:#15202B;
  --band:#06121E;  --band-ink:#DDE6EC;
  --ink:#DFE8EE;   --ink-2:#97ABBA;  --ink-3:#74899B;
  --rule:rgba(223,232,238,.17); --rule-strong:rgba(223,232,238,.33);
  --azure:#4FB6E8; --azure-ink:#7CC9EF; --azure-deep:#63C0EC; --azure-band:#7ACBF0;
  --plate:#17242F; --plate-dark:#0A1420;
  --plate-edge:rgba(223,232,238,.13);
  --img-filter: brightness(.93) contrast(1.03) saturate(.98);
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0B1723; --paper-2:#101F2E; --vellum:#15202B;
  --band:#06121E;  --band-ink:#DDE6EC;
  --ink:#DFE8EE;   --ink-2:#97ABBA;  --ink-3:#74899B;
  --rule:rgba(223,232,238,.17); --rule-strong:rgba(223,232,238,.33);
  --azure:#4FB6E8; --azure-ink:#7CC9EF; --azure-deep:#63C0EC; --azure-band:#7ACBF0;
  --plate:#17242F; --plate-dark:#0A1420;
  --plate-edge:rgba(223,232,238,.13);
  --img-filter: brightness(.93) contrast(1.03) saturate(.98);
}

/* Metric-matched fallback so the h1 does not reflow when the webfont swaps in. */
@font-face{
  font-family:'Newsreader Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family:'Newsreader','Newsreader Fallback',Georgia,'Times New Roman',serif;
  font-optical-sizing:auto;
  font-size:17px; line-height:1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
@media (min-width:768px){ body{ font-size:18px } }

img{ display:block; max-width:100%; height:auto }
/* The sector filter and the JS-only control bars all rely on the hidden attribute.
   .prow{display:block}, .filters{display:flex} and .reel-bar{display:flex} each beat the
   user-agent's [hidden]{display:none}, so without this the filter silently does nothing and
   the dead control bars show up with JavaScript off. */
[hidden]{ display:none !important }
a{ color:var(--azure-ink); text-underline-offset:.18em; text-decoration-thickness:from-font }
a:hover{ text-decoration-thickness:2px }
p{ margin:0 0 1.05em }
h1,h2,h3,h4{ margin:0; font-weight:500; line-height:1.14; letter-spacing:-.012em }
ul,ol{ margin:0; padding:0 }
li{ list-style:none }
strong{ font-weight:600 }
/* scroll-padding on the scrollport covers anchor jumps AND focus-driven scrolling,
   including focusable elements that carry no id. scroll-margin covered only the latter. */
html{ scroll-padding-top: calc(var(--header-h) + 20px) }

:focus-visible{
  outline:2.5px solid var(--azure-ink);
  outline-offset:3px;
  border-radius:1px;
}
.band :focus-visible, .chrome :focus-visible, .foot :focus-visible{ outline-color:#7CC9EF }

::selection{ background:rgba(34,156,215,.28) }

/* ---------- layout shell ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(20px,5vw,64px) }
.sec{ padding-block: clamp(56px,8vw,112px); border-top:1px solid var(--rule) }
.sec:first-of-type{ border-top:0 }
.sec--alt{ background:var(--paper-2) }

/* the two-column reading grid: text at a 66ch measure, annotation alongside */
.grid{ display:block }
@media (min-width:1024px){
  .grid{ display:grid; grid-template-columns: minmax(0,1fr) 268px; gap:0 48px; align-items:start }
  .grid > .marg{ grid-column:2 }
  .grid > *:not(.marg){ grid-column:1 }
}
.prose{ max-width:66ch }
.marg{ margin-top:20px }
@media (min-width:1024px){ .marg{ margin-top:0 } }

/* ---------- metadata type ---------- */
.mono{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  font-variant-numeric:normal;
}
.kicker{ display:block; color:var(--azure-deep); margin-bottom:14px }
.kicker .num{ color:var(--ink-2) }
h2.h{ font-size:clamp(28px,4.2vw,44px); line-height:1.1; max-width:20ch }
h3.ch{ font-size:clamp(23px,3.1vw,34px); line-height:1.16 }
.lede{ font-size:clamp(18px,2.05vw,21px); line-height:1.5; color:var(--ink-2); max-width:58ch; margin-top:18px }

/* ---------- the evidence tick: "this statement has a source" ---------- */
.tick{ position:relative; padding-left:16px; display:block }
.tick::before{
  content:''; position:absolute; left:0; top:.42em;
  width:3px; height:1.02em; background:var(--azure-deep); border-radius:1px;
}
.band .tick::before{ background:var(--azure) }

/* ---------- the dateline: provenance as a designed object, used 3 times ---------- */
.dateline{
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
  padding:16px 0 16px 22px;
  margin:0 0 28px;
  position:relative;
  color:var(--ink);
  max-width:64ch;
  font-size:.94em;
}
.dateline::before{
  content:''; position:absolute; left:0; top:calc(1em + 5px);
  width:9px; height:9px; background:var(--azure-deep);
}
.band .dateline{ border-color:rgba(232,238,243,.34); color:var(--band-ink) }
.band .dateline::before{ background:var(--azure) }

/* ---------- header ---------- */
.chrome{
  position:sticky; top:0; z-index:60;
  background:var(--chrome); color:var(--chrome-ink);
  border-bottom:1px solid transparent;
  height:var(--header-h);
}
.chrome.is-stuck{ border-bottom-color:var(--chrome-rule) }
.chrome-in{
  height:100%; display:flex; align-items:center; gap:18px;
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(14px,5vw,64px);
}
.wordmark{
  font-size:16px; font-weight:500; color:var(--chrome-ink); text-decoration:none;
  letter-spacing:-.01em; white-space:nowrap; flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
}
.wordmark::before{ content:''; width:3px; height:19px; background:var(--azure); flex:0 0 auto }
.chrome nav{ display:none }
@media (min-width:900px){
  .chrome nav{ display:flex; gap:22px; margin-left:8px }
  .chrome nav a{
    color:var(--chrome-ink-2); text-decoration:none;
    font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:500;
    letter-spacing:.09em; text-transform:uppercase; padding:6px 0; white-space:nowrap;
  }
  .chrome nav a:hover{ color:var(--chrome-ink); text-decoration:underline; text-underline-offset:5px }
}
.chrome-end{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto }
.cvbtn{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:8px 15px;
  background:var(--azure); color:#06121E; text-decoration:none; border:1px solid var(--azure);
  border-radius:var(--radius);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
.cvbtn:hover{ background:#3FB0E4; border-color:#3FB0E4 }
.cvbtn .lg{ display:none }
@media (min-width:560px){ .cvbtn .lg{ display:inline } .cvbtn .sm{ display:none } }
.iconbtn{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:transparent; color:var(--chrome-ink-2);
  border:1px solid var(--chrome-rule); border-radius:var(--radius);
}
.iconbtn:hover{ color:var(--chrome-ink); border-color:var(--chrome-ink-2) }
.iconbtn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }
[data-theme="dark"] .sun, .moon{ display:block }
[data-theme="dark"] .moon, .sun{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sun{ display:block }
  :root:not([data-theme="light"]) .moon{ display:none }
}
:root[data-theme="light"] .moon{ display:block }
:root[data-theme="light"] .sun{ display:none }

.skip{
  position:absolute; left:12px; top:8px; z-index:100;
  transform:translateY(-160%);
  background:var(--azure); color:#06121E; padding:10px 16px; border-radius:var(--radius);
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-decoration:none; font-weight:500;
}
.skip:focus{ transform:translateY(0) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 22px; border-radius:var(--radius);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:1px solid var(--rule-strong); background:transparent; color:var(--ink);
  transition:background-color .13s, border-color .13s, color .13s;
}
.btn:hover{ border-color:var(--ink); background:rgba(8,44,77,.045) }
.btn--pri{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn--pri:hover{ background:#0D3C67; border-color:#0D3C67; color:var(--paper) }
[data-theme="dark"] .btn--pri, :root:not([data-theme="light"]) .btn--pri{ }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn:hover{ background:rgba(223,232,238,.07) }
  :root:not([data-theme="light"]) .btn--pri{ background:var(--azure); color:#06121E; border-color:var(--azure) }
  :root:not([data-theme="light"]) .btn--pri:hover{ background:#6FC4EC; border-color:#6FC4EC; color:#06121E }
}
:root[data-theme="dark"] .btn:hover{ background:rgba(223,232,238,.07) }
:root[data-theme="dark"] .btn--pri{ background:var(--azure); color:#06121E; border-color:var(--azure) }
:root[data-theme="dark"] .btn--pri:hover{ background:#6FC4EC; border-color:#6FC4EC; color:#06121E }

/* ---------- hero ---------- */
.hero{ padding-block: clamp(38px,6vw,74px) clamp(48px,7vw,84px) }
.hero-grid{ display:grid; gap:36px }
@media (min-width:1024px){
  .hero-grid{ grid-template-columns: minmax(0,1fr) 396px; gap:56px; align-items:start }
}
h1{
  font-size:clamp(40px,7.6vw,78px); line-height:1.0; letter-spacing:-.018em;
  margin:0;
}
.hero-line{
  font-size:clamp(18.5px,2.3vw,26px); line-height:1.37; max-width:47ch;
  margin-top:20px; color:var(--ink);
}
.hero-line b{ font-weight:600 }
.hero-sub{
  margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  font-size:14px; color:var(--ink-2); font-family:'IBM Plex Mono',monospace;
  letter-spacing:.03em; font-variant-numeric:normal;
}
.hero-sub .div{ width:1px; height:14px; background:var(--rule-strong) }
.status{
  margin-top:26px; max-width:60ch; font-size:15.5px; line-height:1.58; color:var(--ink-2);
}
.hero-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px }
.hero-fig{ margin:0 }
.hero-cap{ margin-top:14px; font-size:14.5px; line-height:1.5; color:var(--ink-2) }

/* ---------- the plate: how every image is mounted ---------- */
figure{ margin:0 }
.plate{
  background:var(--plate);
  border:1px solid var(--plate-edge);
  border-radius:var(--radius);
  padding:clamp(14px,2.2vw,26px);
}
.plate img{ filter:var(--img-filter) }
.plate.is-dark{ background:var(--plate-dark); border-color:rgba(255,255,255,.09) }
.plate.is-dark img{ filter:none }
.plate--tight{ padding:clamp(10px,1.4vw,16px) }
img[style*="--nw"]{ max-width:min(100%, var(--nw)); aspect-ratio:var(--ar) }
.cap{ margin-top:12px; font-size:14.5px; line-height:1.52; color:var(--ink-2) }
.cap.tick::before{ top:.36em }

/* the shelf: ragged tops, level bottoms, one shared rule */
.shelf{
  display:grid; gap:20px; align-items:end;
  padding-bottom:22px; border-bottom:1px solid var(--rule);
}
@media (min-width:760px){ .shelf--3{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:620px){ .shelf--2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* the reel: height-normalised filmstrip for wildly mixed ratios */
.reelwrap{ position:relative }
.reel{
  display:flex; gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; padding-bottom:6px;
  scrollbar-width:thin;
}
.reel > figure{ scroll-snap-align:start; flex:0 0 auto; max-width:86vw }
.reel img{ height:auto; width:100% }
@media (min-width:760px){
  .reel{ align-items:flex-start }
  .reel > figure{ width:auto; max-width:none }
  .reel img{ height:var(--reel-h,420px); width:auto; max-height:none }
}
.reel-bar{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--rule);
}
.reel-bar .count{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase }
.reel-btn{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--rule-strong); border-radius:var(--radius); color:var(--ink);
}
.reel-btn:hover:not(:disabled){ border-color:var(--ink) }
.reel-btn:disabled{ opacity:.34; cursor:default }
.reel-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* wide artefacts get their own scroller so the body never moves sideways */
.scroll-x{ overflow-x:auto; overscroll-behavior-x:contain }

/* ---------- scale band ---------- */
.band{ background:var(--band); color:var(--band-ink); border:0 }
.band .kicker{ color:var(--azure-band) }
.band .kicker .num{ color:rgba(232,238,243,.72) }   /* --ink-2 is navy; on the navy band it vanishes */
.band h2.h{ color:var(--band-ink) }
.figs{
  display:grid; gap:0; margin-top:38px;
  border-top:1px solid rgba(232,238,243,.2);
}
@media (min-width:640px){ .figs{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .figs{ grid-template-columns:repeat(5,1fr) } }
.fig{ padding:22px 0; border-bottom:1px solid rgba(232,238,243,.2) }
@media (min-width:640px){
  .fig{ padding:24px 26px 24px 0; border-right:1px solid rgba(232,238,243,.2) }
  .fig:nth-child(2n){ border-right:0; padding-right:0; padding-left:26px }
}
@media (min-width:1000px){
  .fig{ border-right:1px solid rgba(232,238,243,.2); padding:26px 22px 26px 0 }
  .fig:nth-child(2n){ border-right:1px solid rgba(232,238,243,.2); padding-left:0 }
  .fig:nth-child(n+2){ padding-left:22px }
  .fig:last-child{ border-right:0 }
}
.fig .v{
  font-size:clamp(38px,5.4vw,58px); line-height:1; font-weight:500; letter-spacing:-.022em;
  color:#fff; display:block;
}
.fig .l{ display:block; margin-top:12px; color:var(--azure-band) }
.fig .n{ display:block; margin-top:8px; font-size:14.5px; line-height:1.45; color:rgba(232,238,243,.74) }

.markets{ margin-top:44px; display:grid; gap:26px }
@media (min-width:820px){ .markets{ grid-template-columns:1fr 1fr; gap:44px } }
.mgroup{ border-top:1px solid rgba(232,238,243,.28); padding-top:16px }
.mgroup > .mono{ color:var(--azure-band); display:block; margin-bottom:14px }
.mrow{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid rgba(232,238,243,.13) }
.mrow:last-child{ border-bottom:0 }
.mrow .c{ flex:0 0 116px; font-weight:500; color:#fff; font-size:16.5px }
.mrow .b{ font-size:14.5px; line-height:1.45; color:rgba(232,238,243,.72) }

/* ---------- client wall ---------- */
.verticals{ display:grid; gap:0; margin-top:34px; border-top:1px solid var(--rule) }
@media (min-width:760px){ .verticals{ grid-template-columns:repeat(2,1fr); column-gap:44px } }
.vrow{ padding:15px 0; border-bottom:1px solid var(--rule) }
.vrow .mono{ color:var(--azure-deep); display:block; margin-bottom:6px }
.vrow p{ margin:0; font-size:16.5px; line-height:1.5 }

/* ---------- range three-up ---------- */
.range3{ display:grid; gap:22px; margin-top:34px; align-items:end;
         padding-bottom:22px; border-bottom:1px solid var(--rule) }
@media (min-width:820px){ .range3{ grid-template-columns:repeat(3,1fr); gap:28px } }
.range3 .cap{ margin-top:14px }
.range3 .cap b{ display:block; font-weight:600; color:var(--ink) }

/* ---------- work index: a programme, not a card grid ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px }
.chip{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; padding:9px 13px; min-height:36px; cursor:pointer;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:var(--radius);
  transition:background-color .12s,border-color .12s,color .12s;
}
.chip:hover{ border-color:var(--rule-strong); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chip[aria-pressed="true"]{ background:var(--azure); border-color:var(--azure); color:#06121E }
}
:root[data-theme="dark"] .chip[aria-pressed="true"]{ background:var(--azure); border-color:var(--azure); color:#06121E }

.programme{ margin-top:26px; border-top:1px solid var(--rule) }
.prow{ display:block; border-bottom:1px solid var(--rule) }
.prow a{
  display:grid; gap:4px 18px; padding:18px 0 18px 20px; position:relative;
  text-decoration:none; color:var(--ink);
}
.prow a::before{
  content:''; position:absolute; left:0; top:18px; bottom:18px; width:2px;
  background:var(--rule-strong); transition:background-color .13s;
}
.prow a:hover::before, .prow a:focus-visible::before{ background:var(--azure-deep) }
@media (min-width:820px){
  .prow a{ grid-template-columns: 42px minmax(0,1fr) 250px; align-items:baseline }
}
.prow .idx{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--ink-2) }
.prow .t{ font-size:19.5px; line-height:1.3; font-weight:500 }
.prow a:hover .t{ text-decoration:underline; text-underline-offset:.2em }
.prow .m{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--azure-deep) }
.prow .o{ font-size:15.5px; line-height:1.46; color:var(--ink-2); grid-column:1/-1 }
@media (min-width:820px){ .prow .o{ grid-column:2/3 } .prow .m{ grid-column:3/4; grid-row:1/2 } }

/* ---------- case studies ---------- */
.case{ padding-block: clamp(52px,7vw,96px); border-top:1px solid var(--rule) }
.case-head{ max-width:64ch }
.case-head .client{ display:block; margin-bottom:12px }
.case-head .client .mono{ color:var(--azure-deep) }
.case-lede{ font-size:clamp(17.5px,1.9vw,20px); line-height:1.5; color:var(--ink-2); margin-top:18px; max-width:60ch }

/* the field ledger — the page's most repeated object */
.ledger{ margin-top:34px; border-top:1px solid var(--rule-strong); max-width:70ch }
.lrow{ display:grid; grid-template-columns:1fr; gap:2px; padding:11px 0; border-bottom:1px solid var(--rule) }
@media (min-width:640px){ .lrow{ grid-template-columns:152px minmax(0,1fr); gap:0 20px; align-items:baseline } }
.lrow dt{ color:var(--azure-deep) }
.lrow dd{ margin:0; font-size:16.5px; line-height:1.45 }

/* the spine: four beats made visible as one structure */
.spine{
  margin-top:40px; padding-left:22px; border-left:2px solid var(--azure-deep);
  max-width:calc(66ch + 22px);
}
.beat{ position:relative; padding-bottom:30px }
.beat:last-child{ padding-bottom:0 }
.beat > .mono{
  display:block; color:var(--azure-deep); margin-bottom:12px; position:relative;
}
.beat > .mono::before{
  content:''; position:absolute; left:-27px; top:.32em; width:11px; height:2px; background:var(--azure-deep);
}
.beat ul li{ position:relative; padding-left:19px; margin-bottom:.72em; line-height:1.55 }
.beat ul li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--ink-3);
}

/* result block */
.result{ background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius);
         padding:clamp(20px,3vw,34px); margin-top:40px }
.result > h4{ font-size:22px; margin-bottom:18px }
.metrics{ display:grid; gap:0; border-top:1px solid var(--rule) }
@media (min-width:560px){ .metrics{ grid-template-columns:repeat(2,1fr); column-gap:32px } }
@media (min-width:900px){ .metrics{ grid-template-columns:repeat(3,1fr) } }
.metric{ padding:16px 0; border-bottom:1px solid var(--rule) }
.metric .v{ font-size:30px; line-height:1.06; font-weight:500; letter-spacing:-.02em; display:block }
.metric .l{ display:block; margin-top:7px; font-size:15.5px; line-height:1.4; color:var(--ink) }
.metric .n{ display:block; margin-top:5px; font-size:13.5px; line-height:1.4; color:var(--ink-2) }
.tier{ margin:26px 0 12px; color:var(--ink-2); display:block }
.metrics--2 .metric .v{ font-size:23px }

/* short cards */
.cards{ display:grid; gap:0; border-top:1px solid var(--rule); margin-top:34px }
.card{ padding-block: clamp(30px,4.5vw,48px); border-bottom:1px solid var(--rule) }
.card-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:8px }
.card-head .mono{ color:var(--azure-deep) }
.card h3{ font-size:clamp(21px,2.6vw,27px); line-height:1.2; max-width:37ch }
.card .lead{ margin-top:14px; max-width:62ch; font-size:16.5px; line-height:1.55 }
.card .did{ margin-top:14px; max-width:62ch; font-size:15.5px; line-height:1.55; color:var(--ink-2) }
.card .media{ margin-top:26px }

/* ---------- writing / voice ---------- */
.voices{ display:grid; gap:34px; margin-top:34px }
@media (min-width:900px){ .voices{ grid-template-columns:repeat(2,1fr); gap:40px 44px } }
.voice .mono{ color:var(--azure-deep); display:block; margin-bottom:10px }
.voice .who{ font-size:15.5px; color:var(--ink-2); margin:0 0 14px }

.quote{
  background:var(--vellum); border:1px solid var(--rule); border-radius:var(--radius);
  padding:clamp(20px,3vw,32px); margin-top:30px;
}
.quote .en{ font-size:17px; line-height:1.55; margin:0 0 18px }
.ar{
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  letter-spacing:0 !important;
  font-size:19px; line-height:2.05; font-weight:400;
  max-width:56ch; text-align:start;
  font-variant-numeric:normal;
}
.ar-lg{ font-size:21px }
.quote .ar{ margin:0 }

/* ---------- how I work ---------- */
.principles{ margin-top:34px; border-top:1px solid var(--rule) }
.principle{ display:grid; gap:6px 28px; padding:20px 0; border-bottom:1px solid var(--rule) }
@media (min-width:760px){ .principle{ grid-template-columns:190px minmax(0,1fr); align-items:baseline } }
.principle .w{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--azure-deep) }
.principle .s{ font-style:italic; font-size:18.5px; line-height:1.5 }
.principle .e{ grid-column:1/-1; font-size:15.5px; line-height:1.55; color:var(--ink-2); margin-top:4px }
@media (min-width:760px){ .principle .e{ grid-column:2/3 } }

.lessons{ margin-top:34px; background:var(--vellum); border:1px solid var(--rule);
          border-radius:var(--radius); padding:clamp(20px,3vw,32px) }
.lessons ul{ display:grid; gap:12px }
.lessons li{ font-style:italic; font-size:18.5px; line-height:1.45; padding-left:22px; position:relative }
.lessons li::before{ content:''; position:absolute; left:0; top:.62em; width:11px; height:1px; background:var(--azure-deep) }

/* ---------- experience ---------- */
.tl{ margin-top:34px; border-top:1px solid var(--rule-strong) }
.job{ display:grid; gap:4px 28px; padding:20px 0; border-bottom:1px solid var(--rule) }
@media (min-width:760px){ .job{ grid-template-columns:186px minmax(0,1fr); align-items:baseline } }
.job .d{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:500; letter-spacing:.06em; color:var(--azure-deep); text-transform:uppercase }
.job .r{ font-size:19.5px; line-height:1.3; font-weight:500 }
.job .b{ grid-column:1/-1; font-size:15.5px; line-height:1.55; color:var(--ink-2); margin-top:6px; max-width:62ch }
@media (min-width:760px){ .job .b{ grid-column:2/3 } }
.job--emp{ background:transparent }
.emp{ padding:22px 0 8px; border-bottom:0 }
.emp .n{ font-size:21px; font-weight:500 }
.emp .m{ font-size:15.5px; color:var(--ink-2); margin-top:5px }

.deets{ display:grid; gap:0; margin-top:38px; border-top:1px solid var(--rule) }
@media (min-width:760px){ .deets{ grid-template-columns:repeat(2,1fr); column-gap:44px } }
.deet{ padding:16px 0; border-bottom:1px solid var(--rule) }
.deet .mono{ color:var(--azure-deep); display:block; margin-bottom:7px }
.deet p{ margin:0; font-size:16.5px; line-height:1.5 }

/* ---------- services ---------- */
.svcs{ display:grid; gap:0; margin-top:34px; border-top:1px solid var(--rule) }
@media (min-width:820px){ .svcs{ grid-template-columns:repeat(2,1fr); column-gap:48px } }
.svc{ padding:20px 0; border-bottom:1px solid var(--rule) }
.svc h3{ font-size:19.5px; line-height:1.3 }
.svc p{ margin:8px 0 0; font-size:15.5px; line-height:1.55; color:var(--ink-2) }

/* ---------- contact ---------- */
.contacts{ margin-top:34px; border-top:1px solid var(--rule-strong); max-width:72ch }
.crow{ display:grid; gap:2px 20px; padding:15px 0; border-bottom:1px solid var(--rule) }
@media (min-width:560px){ .crow{ grid-template-columns:132px minmax(0,1fr); align-items:baseline } }
.crow dt{ color:var(--azure-deep) }
.crow dd{ margin:0; font-size:17px; line-height:1.45; overflow-wrap:anywhere }

/* ---------- copy-anchor chip ---------- */
.anchor{
  display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 11px;
  background:transparent; border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink-2); cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.07em; text-transform:lowercase;
}
.anchor:hover{ border-color:var(--rule-strong); color:var(--ink) }
.anchor svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7 }

/* ---------- lightbox ---------- */
.zoom{
  display:block; margin-top:12px; width:100%; min-height:44px;
  background:transparent; border:1px solid var(--rule-strong); border-radius:var(--radius);
  color:var(--ink); cursor:pointer; padding:11px 14px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
}
.zoom:hover{ border-color:var(--ink) }
dialog.lb{
  border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh;
  width:100%; height:100%; overflow:hidden; color:var(--ink);
}
dialog.lb::backdrop{ background:rgba(6,18,30,.86) }
.lb-in{
  height:100%; display:grid; grid-template-rows:auto minmax(0,1fr);
  padding:14px; gap:12px;
}
.lb-bar{ display:flex; align-items:center; gap:14px; justify-content:space-between }
.lb-bar .t{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.07em;
            text-transform:uppercase; color:#DDE6EC; max-width:70ch }
.lb-close{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid rgba(238,243,246,.34); border-radius:var(--radius); color:#EEF3F6;
}
.lb-close:hover{ border-color:#EEF3F6 }
.lb-close svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round }
.lb-body{ overflow:auto; overscroll-behavior:contain; display:grid; place-items:center }
.lb-body img{ max-width:none; width:1200px; max-height:none }
@media (max-width:1240px){ .lb-body img{ width:1100px } }

/* ---------- footer ---------- */
.foot{ background:var(--band); color:var(--band-ink); padding-block:clamp(44px,6vw,72px) }
.foot a{ color:#8DD3F2 }
.foot-grid{ display:grid; gap:28px }
@media (min-width:760px){ .foot-grid{ grid-template-columns:1.35fr 1fr 1fr; gap:44px } }
.foot .mono{ color:var(--azure-band); display:block; margin-bottom:12px }
.foot p{ font-size:15.5px; line-height:1.55; color:rgba(232,238,243,.8); margin:0 0 .7em; max-width:44ch }
.foot li{ margin-bottom:9px; font-size:15.5px }
.foot-end{ margin-top:38px; padding-top:22px; border-top:1px solid rgba(232,238,243,.2);
           display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
           font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
           text-transform:uppercase; color:rgba(232,238,243,.62) }

/* ---------- animation: rules draw once, nothing else moves ---------- */
@media (prefers-reduced-motion: no-preference){
  .skip{ transition:transform .12s }
  .prow a::before{ transition:background-color .13s, width .13s }
  .prow a:hover::before, .prow a:focus-visible::before{ width:4px }
  .draw{ transform-origin:left; }
  .draw.pre{ transform:scaleX(0) }
  .draw.go{ transform:scaleX(1); transition:transform .42s cubic-bezier(.2,.7,.2,1) }
}

/* ---------- print ---------- */
@media print{
  /* The theme tokens have to be reset here, or printing from dark mode puts
     near-white ink on white paper. The selector list outranks both dark rules. */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]){
    --paper:#fff; --paper-2:#fff; --vellum:#F7F4EE;
    --band:#fff; --band-ink:#000;
    --ink:#000; --ink-2:#333; --ink-3:#555;
    --azure:#00456B; --azure-ink:#00456B; --azure-deep:#00456B; --azure-band:#00456B;
    --rule:#ccc; --rule-strong:#999;
    --plate:#fff; --plate-dark:#fff; --plate-edge:#bbb;
    --chrome:#fff; --chrome-ink:#000;
    --img-filter:none;
  }
  .plate.is-dark{ background:#fff; border-color:#bbb }
  .chrome,.filters,.zoom,.anchor,.reel-bar,.iconbtn,.skip,dialog{ display:none !important }
  body{ background:#fff; color:#000; font-size:10.5pt }
  .sec,.case{ padding-block:18pt; break-inside:avoid }
  .band,.foot{ background:#fff !important; color:#000 !important }
  .band .fig .v,.band h2.h,.mrow .c{ color:#000 !important }
  .band .fig .n,.mrow .b,.foot p{ color:#333 !important }
  .plate{ background:#fff; border-color:#bbb }
  .reel{ overflow:visible; flex-wrap:wrap }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555 }
  a[href^="#"]::after{ content:"" }
}

/* ---------- additions ---------- */
.figrow{ margin-top:40px }

/* the spine drawn as a pseudo-element so it can animate without a border */
.spine{ position:relative; border-left:0 }
.spine::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--azure-deep); transform-origin:top;
}
@media (prefers-reduced-motion: no-preference){
  .spine.pre::before{ transform:scaleY(0) }
  .spine.go::before{ transform:scaleY(1); transition:transform .55s cubic-bezier(.2,.7,.2,1) }
}

/* enlarge control — offered only where the page is too narrow to read the work */
.zoom{ display:none }
@media (max-width:899px){
  .zoom{ display:inline-flex; align-items:center; width:auto; margin-top:12px }
  .plate.is-zoomable{ cursor:zoom-in }
}

/* reel items shrink-wrap to the rendered image, not to its intrinsic width */
@media (min-width:760px){
  .reel > figure{ width:var(--rw,auto) }
}

/* the range three-up compares three unlike things, so normalise by height:
   equal optical weight, ragged widths, level bottoms */
/* The three fixed widths below total 1064px plus gaps. Below a 1200px viewport the
   shell is narrower than that, so the row pushed the whole document sideways —
   285px at 820px wide. The grid rule above handles every width below this. */
@media (min-width:1200px){
  /* All three images render at the same height, so flex-start aligns their tops
     AND their bottoms. flex-end would instead align the captions, which differ in
     length, and push the shortest image up out of the row. */
  .range3{ display:flex; flex-wrap:nowrap; gap:26px; align-items:flex-start }
  .range3 > figure{ flex:0 0 auto; width:var(--rw,auto); min-width:206px }
  .range3 img{ height:182px; width:auto; max-width:none }
  .range3 figcaption{ max-width:100% }
}

/* Intrinsic-sizing guards. A grid or flex track sized `auto` takes its
   max-content size, and a horizontal scroller's max-content size is its whole
   content — which silently stretches the page. Every track that can contain a
   reel is pinned to minmax(0,1fr), and every such child gets min-width:0. */
.cards{ grid-template-columns:minmax(0,1fr) }
.card{ min-width:0 }
.reelwrap{ min-width:0; max-width:100% }
.reel{ max-width:100% }
.shelf, .shelf > *, .range3, .range3 > *{ min-width:0 }
.grid > *{ min-width:0 }
.programme, .prow, .prow a{ min-width:0 }

/* Tap targets. Inline links inside a sentence are exempt from WCAG 2.2 SC 2.5.8,
   but the contact rows and the footer list are standalone actions on a phone —
   a 17px-tall phone number is a miss waiting to happen. Padding, not layout. */
.crow{ padding:9px 0 }
.crow dd a, .foot li a, .foot p a{ display:inline-block; padding-block:6px }
.foot li{ margin-bottom:3px }


/* ==========================================================================
   MULTI-PAGE ADDITIONS
   Everything below arrived when the single page was split into eight.
   ========================================================================== */

/* --- Navigation on a phone -------------------------------------------------
   On one long page a hidden nav was survivable: the reader just scrolled. On
   eight pages it strands anyone who lands on a case study from a shared link.
   Below 900px the header becomes two rows — identity and actions on top, the
   three destinations underneath, scrolling sideways rather than wrapping. No
   hamburger: three labels fit, and a disclosure widget for three links is a
   tap the reader should not have to spend.                                  */
@media (max-width:899px){
  :root{ --header-h:94px }
  .chrome-in{ flex-wrap:wrap; align-content:center; row-gap:2px; padding-block:8px }
  .wordmark{ order:1 }
  .chrome-end{ order:2; margin-left:auto }
  .chrome nav{
    order:3; display:flex; width:100%; gap:18px; margin-left:0;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  .chrome nav::-webkit-scrollbar{ display:none }
  .chrome nav a{
    color:var(--chrome-ink-2); text-decoration:none; white-space:nowrap;
    font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:500;
    letter-spacing:.09em; text-transform:uppercase; padding:4px 0;
  }
}
.chrome nav a[aria-current="page"]{
  color:var(--chrome-ink);
  text-decoration:underline; text-decoration-color:var(--azure);
  text-decoration-thickness:2px; text-underline-offset:5px;
}

/* --- Moving between pages --------------------------------------------------
   One line. Browsers that support it cross-fade between documents, which is
   what stops eight separate files feeling like eight separate websites.
   Everywhere else it is ignored.                                            */
@view-transition{ navigation:auto }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none } }

/* --- Typesetting -----------------------------------------------------------
   Four properties that were never switched on. Headings stop leaving one word
   alone on the last line, body copy stops orphaning, punctuation hangs into
   the margin, and the serif's real ligatures come on.                       */
h1, h2.h, h3.ch, .card h3, .case-open h1, .lede, .cap, figcaption{ text-wrap:balance }
p, .beat li, .lrow dd{ text-wrap:pretty }
body{ hanging-punctuation:first last; font-feature-settings:"liga" 1, "kern" 1 }

/* --- The opening of a case page --------------------------------------------
   A case study now begins a document instead of interrupting one, so it gets
   a real masthead: the number and sector very small, the title very large,
   and one sentence of outcome before any metadata.                          */
.case-open{ padding-block: clamp(40px,6vw,80px) clamp(28px,4vw,44px) }
.case-open h1{
  font-size:clamp(32px,5.4vw,60px); line-height:1.06; letter-spacing:-.016em;
  max-width:19ch; margin-top:4px;
}
.case-open .standfirst{
  margin-top:24px; max-width:54ch;
  font-size:clamp(18px,2.1vw,23px); line-height:1.45; color:var(--ink);
}
.case-open .case-lede{ margin-top:18px }

/* --- Back to the index -----------------------------------------------------
   One link, on every case page, pointing at one place. No previous/next ring:
   a ring means adding a tenth case forces edits to two files nobody had a
   reason to open, and a mis-wired ring fails silently.                      */
.backlink{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:12px 20px;
  border:1px solid var(--rule-strong); border-radius:var(--radius);
  color:var(--ink); text-decoration:none;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
}
.backlink:hover{ border-color:var(--ink); background:rgba(8,44,77,.045) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .backlink:hover{ background:rgba(223,232,238,.07) } }
:root[data-theme="dark"] .backlink:hover{ background:rgba(223,232,238,.07) }
.pagefoot{ padding-block: clamp(40px,6vw,72px); border-top:1px solid var(--rule) }

/* --- The work index page ---------------------------------------------------
   The five short accounts need their own heading so /work/ reads as "the
   index, then five in brief" rather than "the index, plus leftovers".      */
.brief-head{ padding-block: clamp(48px,7vw,88px) 0 }

/* Home teaser rows reuse the index markup, so they inherit .prow untouched. */
.teaser{ margin-top:26px; border-top:1px solid var(--rule) }

/* The markets line that replaced the markets table on the home page. */
.markets-line{
  margin:38px 0 0; max-width:64ch; font-size:17px; line-height:1.6;
  color:rgba(232,238,243,.82);
}
.band .markets-line.tick::before{ background:var(--azure) }

/* A case study now opens its own page, so it does not need the divider that
   separated it from the case above it. */
.case--page{ border-top:0; padding-top:0 }

/* --- Her own capability taxonomy, from slide 3 of the deck ------------------
   Five groups, twenty-five capabilities. Set as ruled rows in the same shape as
   the case-page ledger, so the page has one vocabulary for "label, then values"
   rather than inventing a second. */
.caps{ margin-top:34px; border-top:1px solid var(--rule-strong) }
.cap-row{ display:grid; gap:4px 28px; padding:18px 0; border-bottom:1px solid var(--rule) }
@media (min-width:760px){ .cap-row{ grid-template-columns:170px minmax(0,1fr); align-items:baseline } }
.cap-row .mono{ color:var(--azure-deep); font-size:12px; letter-spacing:.1em }
.cap-row p{ margin:0; font-size:17px; line-height:1.55 }

/* --- Moving between case studies -------------------------------------------
   Linear, not a ring: 01 has no previous and 04 has no next. A wrap-around would
   mean adding a tenth case forces edits to two files nobody had reason to open. */
.casenav{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:28px }
.pagenav{
  flex:1 1 240px; min-width:0; display:block; padding:18px 20px;
  border:1px solid var(--rule); border-radius:var(--radius);
  text-decoration:none; color:var(--ink);
  transition:border-color .13s, background-color .13s;
}
.pagenav:hover{ border-color:var(--ink); background:rgba(8,44,77,.04) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pagenav:hover{ background:rgba(223,232,238,.06) } }
:root[data-theme="dark"] .pagenav:hover{ background:rgba(223,232,238,.06) }
.pagenav .mono{ display:block; color:var(--azure-deep); margin-bottom:6px }
.pagenav .t{ display:block; font-size:19px; line-height:1.3; font-weight:500 }
.pagenav--next{ text-align:right }

/* --- A lead image on each work row -----------------------------------------
   The page called Work showed no work for three screens. One small teaser per
   row fixes that; the full uncropped image is on the case page one click away.
   Deliberately NOT a card grid — the rows still read as a list of results with
   images off, which is what a scanning recruiter needs. */
.lead-img{ display:none }
@media (min-width:820px){
  .prow a{ grid-template-columns:42px 132px minmax(0,1fr) 230px }
  .lead-img{
    display:block; width:132px; height:82px; overflow:hidden;
    background:var(--plate); border:1px solid var(--plate-edge); border-radius:var(--radius);
  }
  .lead-img img{
    width:100%; height:100%; object-fit:cover; object-position:center 42%;
    filter:var(--img-filter);
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .prow a:hover .lead-img img,
  .prow a:focus-visible .lead-img img{ transform:scale(1.04) }
  .prow .o{ grid-column:3/4 }
  .prow .m{ grid-column:4/5; grid-row:1/2 }
}
@media (prefers-reduced-motion: reduce){ .lead-img img{ transition:none } }

/* The row was baseline-aligned when it held only text; with an image in it that
   hangs the picture off the first line of the title. Align to the top instead. */
@media (min-width:820px){
  .prow a{ align-items:start }
  .prow .idx{ padding-top:6px }
  .prow .m{ padding-top:6px }
}

/* The image is 82px tall and the title is one line, so the title was sitting in
   an 82px-tall grid row with the outcome pushed below the gap. Let the image
   span both rows instead. */
@media (min-width:820px){
  .prow .lead-img{ grid-row:1 / span 2 }
  .prow .idx{ grid-row:1 / span 2 }
}

/* --- Work page: let the work take the room ---------------------------------
   The brief was to reduce the text and raise the imagery. Wider air between the
   short accounts, and their media set larger than the metadata above it. */
.cards .card{ padding-block: clamp(44px,6vw,80px) }
.card .media{ margin-top:32px }
@media (min-width:1024px){
  .card .media .plate{ padding:clamp(18px,2.4vw,30px) }
  .card .reel img{ height:var(--reel-h,320px) }
}
/* The four home teaser rows carry a larger image than the index rows. */
@media (min-width:820px){
  #selected .prow a{ grid-template-columns:42px 210px minmax(0,1fr) 200px }
  #selected .lead-img{ width:210px; height:128px }
}

/* The third versatility figure is a portrait crop, so at a shared image height its
   column was half the width of the other two and its caption wrapped to a sliver.
   Slightly shorter images buy the narrow one enough width to read. */
@media (min-width:1200px){
  .range3 img{ height:170px }
  .range3 > figure{ min-width:230px }
}