:root{
  /* hex fallbacks first: old browsers that can't parse oklch() still get the
     full warm palette instead of unstyled black-on-white */
  --ink:#1F1813;
  --ink-deep:#16110D;
  --ink-raise:#2C241D;
  --ink-card:#3A3128;
  --paper:#F4EFEA;
  --paper-raise:#F8F4EF;
  --paper-sunk:#EAE3DA;
  --ember:#E2A33C;
  --ember-deep:#9A5F1F;
  --smoke:#6F645A;
  --smoke-2:#AC9E8D;
  --paper-dim:#D3C8BC;
  --ink-soft:#584A3D;
  --line:rgba(31,24,19,.12);
  --line-soft:rgba(31,24,19,.07);
  --line-dark:rgba(244,239,234,.14);
  --maxw:1280px;
  --ar:"IBM Plex Sans Arabic",sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-smooth-out:var(--ease-out);

  /* motion scale: UI feedback first, then the editorial tier where the motion is
     the reading pace (a section arriving, a line rising, the mark assembling) */
  --dur-stagger:40ms;
  --dur-micro:80ms;
  --dur-quick:150ms;
  --dur-fast:160ms;
  --dur-medium:350ms;
  --dur-slow:400ms;
  --dur-very-slow:500ms;
  --dur-reveal:700ms;
  --dur-drift:900ms;
  --dur-settle:1150ms;

  /* the logo's one unit: a rounded block 44.88 x 30.57 in the mark's own
     viewBox, corners 8.78 x 9.17. Every unit drawn on the site keeps this ratio. */
  --unit-r:.2;
}
@supports (color:oklch(0.5 0.1 60)){
  :root{
    --ink:oklch(0.19 0.016 58);
    --ink-deep:oklch(0.155 0.015 55);
    --ink-raise:oklch(0.235 0.016 60);
    --ink-card:oklch(0.29 0.018 58);
    --paper:oklch(0.94 0.008 82);
    --paper-raise:oklch(0.955 0.009 85);
    --paper-sunk:oklch(0.915 0.011 80);
    --ember:oklch(0.75 0.125 70);
    --ember-deep:oklch(0.52 0.125 56);
    --smoke:oklch(0.52 0.02 65);
    --smoke-2:oklch(0.70 0.022 76);
    --paper-dim:oklch(0.82 0.014 80);
    --ink-soft:oklch(0.42 0.022 58);
    --line:oklch(0.19 0.016 58 / .12);
    --line-soft:oklch(0.19 0.016 58 / .07);
    --line-dark:oklch(0.94 0.008 82 / .14);
  }
}

/* lite mode (set by site.js on weak hardware or data-saver): full content,
   no decorative motion */
html.lite .reveal{transition:none!important;opacity:1!important;transform:none!important}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:var(--ar);
  background:var(--paper);
  color:var(--ink);
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:fixed;top:12px;inset-inline-end:12px;z-index:400;background:var(--ink);color:var(--paper);padding:11px 20px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;transform:translateY(-180%);transition:transform var(--dur-fast) var(--ease-out)}
.skip:focus{transform:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);position:relative;z-index:2}
section{position:relative;z-index:2}
.sec,.footer{content-visibility:auto;contain-intrinsic-size:auto 1000px}

::selection{background:var(--ink);color:var(--paper)}
/* a scrollbar in the house colours, thin, on desktop */
@media(hover:hover) and (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:oklch(0.19 0.016 58 / .35) var(--paper)}
}

/* ---------- nav: ink on paper, a solid band once the page moves ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;view-transition-name:site-nav;transition:background var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.nav.tuck:not(:focus-within){transform:translateY(-102%)}
.nav.tuck:has(.nav-links.open){transform:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.brand .mark{width:38px;height:38px;flex:none;--mark-bg:var(--ink);--mark-fg:var(--paper)}
@property --mark-bg{syntax:"<color>";inherits:true;initial-value:#362A22}
@property --mark-fg{syntax:"<color>";inherits:true;initial-value:#F4EFEA}
.brand .name{display:flex;flex-direction:column;justify-content:center;line-height:1.2;min-height:38px}
.brand .name b{font-weight:600;font-size:17.5px;color:var(--ink)}
.brand .name span{font-size:12.5px;color:var(--smoke);font-weight:400}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{position:relative;text-decoration:none;color:var(--ink);font-size:15px;font-weight:400;padding-block:6px}
/* the underline draws from the reading side */
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-medium) var(--ease-out)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{background:var(--ink);color:var(--paper)!important;border-radius:10px;padding:9px 20px!important;font-weight:600!important;transition:background var(--dur-fast) ease,transform var(--dur-quick) var(--ease-out)}
.nav-cta:hover{background:var(--ink-deep)}
.nav-cta:active{transform:scale(.97)}
.nav.solid{background:oklch(0.94 0.008 82 / .96);border-bottom-color:var(--line)}
.nav-toggle{display:none}

/* ---------- buttons and links ---------- */
.actions{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
/* buttons take the logo unit's shape: a block with soft corners, not a pill.
   On hover a second fill slides in from the reading side. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:15px 28px;font-family:var(--ar);font-size:16px;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;border:0;transition:transform var(--dur-quick) var(--ease-out),color var(--dur-fast) ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-medium) var(--ease-out)}
.btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.btn:hover::before{transform:scaleX(1)}}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark::before{background:var(--ink-card)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light::before{background:var(--paper-dim)}
/* the quiet second action: text with a line under it that fills on hover */
.link{position:relative;display:inline-block;color:inherit;font-weight:600;text-decoration:none;padding-block:4px;width:fit-content}
.link::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;opacity:.35;transition:opacity var(--dur-fast) ease}
.link::before{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-medium) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.link:hover::before{transform:scaleX(1)}}
/* touch screens: text links get a finger-sized hit area (about 48px, per Apple
   and Material guidance) while the underline keeps the same gap under the words */
@media(pointer:coarse){
  .link{padding-block:10px}
  .link::after,.link::before{bottom:6px}
}
p a,li a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- type: four sizes, one family, hierarchy from size ---------- */
.display{font-weight:300;font-size:clamp(44px,7.4vw,118px);line-height:1.16;letter-spacing:normal;text-wrap:balance}
h2.title{font-weight:300;font-size:clamp(32px,4.4vw,62px);line-height:1.24;letter-spacing:normal;text-wrap:balance;max-width:18em}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:30em;text-wrap:pretty}
.lead-2{font-size:clamp(17px,1.45vw,19px);color:var(--ink-soft);max-width:32em;text-wrap:pretty}
.cap{font-size:14px;color:var(--smoke)}

/* ---------- section shell: the rhythm varies on purpose ---------- */
.sec{padding:clamp(88px,11vw,156px) 0}
.sec.tight{padding:clamp(64px,8vw,112px) 0}
/* phones: 88px on both sides of a seam left 176px of empty paper between two
   sections, more than a screen's worth of scrolling past nothing */
@media(max-width:560px){.sec{padding:72px 0}.sec.tight{padding:56px 0}}
.ink{background:var(--ink);color:var(--paper)}
.ink .title,.ink h3{color:var(--paper)}
.ink .lead-2,.ink .lead{color:var(--smoke-2)}
.ink-deep{background:var(--ink-deep);color:var(--paper)}
.ink-deep .title,.ink-deep h3{color:var(--paper)}
.ink-deep .lead-2{color:var(--smoke-2)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.head-row .lead-2{max-width:26em}

/* two tones in one heading: the claim in ink, the reason right after it, muted.
   One element instead of a heading with a paragraph under it. */
.mute{color:oklch(0.19 0.016 58 / .46)}
.ink .mute,.ink-deep .mute,.footer .mute{color:oklch(0.94 0.008 82 / .5)}
.room .mute{color:oklch(0.155 0.015 55 / .58)}

/* framed bands: ink, ember and photographs sit as inset panels with a gutter
   of paper around them, so the page reads as a set of plates, not stripes */
.panel{margin:clamp(8px,1vw,14px);border-radius:clamp(18px,2.2vw,30px);overflow:hidden}

/* ---------- the unit: the logo's block, used as a small working part ---------- */
.unit{display:inline-block;width:13px;aspect-ratio:44.88 / 30.57;border-radius:3px;background:currentColor;flex:none}

/* ---------- the ember room: one full-field ember moment per page ---------- */
.room{background:var(--ember);color:var(--ink-deep)}
.room .title{color:var(--ink-deep)}
.room .lead-2{color:oklch(0.155 0.015 55 / .82)}
.room .cap{color:oklch(0.155 0.015 55 / .72)}

/* ---------- the offer (the section keeps its historical class name) ---------- */
.waitlist .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,120px);align-items:center}
.waitlist .title{max-width:14em}
.waitlist .lead-2{margin-top:18px}
.waitlist .actions{margin-top:34px}
.waitlist .cap{margin-top:16px}
.emblem{position:relative;justify-self:center;width:clamp(180px,22vw,280px);margin:0;text-align:center}
.emb-plate{display:block;width:100%;height:auto}
.emb-plate .glyph{--mark-bg:var(--ink-deep);--mark-fg:var(--paper)}
.emb-name{margin-top:16px;font-size:15px;font-weight:600}
@media(max-width:900px){.waitlist .wrap{grid-template-columns:1fr;gap:44px}.emblem{justify-self:start;width:clamp(150px,40vw,210px)}}

/* ---------- about ---------- */
.about .grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(36px,7vw,110px);align-items:end}
.about .statement{font-weight:300;font-size:clamp(30px,3.8vw,54px);line-height:1.32;letter-spacing:normal;text-wrap:balance}
.about .body{color:var(--ink-soft);font-size:17.5px;max-width:30em}
.about .body p+p{margin-top:16px}
.about .body .link{margin-top:22px;color:var(--ink)}
@media(max-width:900px){.about .grid{grid-template-columns:1fr;gap:24px}}

/* ---------- values: set like dictionary entries, the name large, its
   meaning beside it, one per line ---------- */
.vlist{display:flex;flex-direction:column}
.vrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px clamp(24px,5vw,80px);align-items:baseline;padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--line-dark)}
.vrow:last-child{border-bottom:1px solid var(--line-dark)}
.vrow h3{font-weight:300;font-size:clamp(26px,3vw,42px);line-height:1.25}
.vrow p{color:var(--smoke-2);font-size:clamp(16px,1.35vw,18px);max-width:30em}
@media(max-width:760px){.vrow{grid-template-columns:1fr}}

/* ---------- products list rows ---------- */
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 30px;align-items:center;padding:clamp(28px,3.4vw,40px) 0;border-top:1px solid var(--line);color:inherit}
.products .list .prow:last-child{border-bottom:1px solid var(--line)}
.prow .name{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.prow .name h2,.prow .name h3{font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:normal}
.badge{display:inline-flex;align-items:center;font-size:13.5px;color:var(--smoke);font-weight:400;border:1px solid var(--line);border-radius:8px;padding:2px 11px;line-height:1.7;white-space:nowrap}
.badge.live{color:var(--ink);border-color:oklch(0.19 0.016 58 / .3)}
.prow .desc{color:var(--ink-soft);font-size:16.5px}

/* ---------- contact block ---------- */
.contact .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(36px,5vw,64px);align-items:end}
.contact .title{margin-bottom:16px}
.mail{font-family:var(--mono);font-size:clamp(20px,2.8vw,38px);color:var(--ink);text-decoration:none;display:inline-block;position:relative;padding-bottom:6px;direction:ltr}
.mail::before{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line)}
.mail::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.mail:hover::after{transform:scaleX(1)}}
.contact .where{font-size:14px;color:var(--smoke);margin-top:18px}
.contact .link{margin-top:20px}
@media(max-width:900px){.contact .grid{grid-template-columns:1fr;gap:30px;align-items:start}}

/* ---------- footer: the last plate ---------- */
.footer{background:var(--ink-deep);color:var(--paper);margin:clamp(8px,1vw,14px);border-radius:clamp(18px,2.2vw,30px);padding:clamp(64px,8vw,112px) 0 0;position:relative;overflow:hidden}
/* the close opens with a way to write */
.f-talk{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px clamp(40px,6vw,96px);align-items:end;padding-bottom:clamp(52px,6vw,88px);margin-bottom:clamp(44px,5vw,68px);border-bottom:1px solid var(--line-dark)}
.f-say{font-weight:300;font-size:clamp(30px,4vw,58px);line-height:1.25;color:var(--paper);text-wrap:balance;max-width:14em}
.f-reach{justify-self:start}
.f-mail{color:var(--paper);font-size:clamp(20px,2.4vw,34px)}
.f-mail::before{background:var(--line-dark)}
.f-mail::after{background:var(--paper)}
.f-alt{display:flex;gap:26px;margin-top:22px;color:var(--paper-dim);font-size:15px}
@media(max-width:900px){.f-talk{grid-template-columns:1fr;gap:28px}}
.f-top{display:grid;grid-template-columns:1.25fr 2fr;gap:clamp(40px,6vw,80px);padding-bottom:clamp(36px,4vw,52px);border-bottom:1px solid var(--line-dark)}
.footer .brand{margin-bottom:18px}
.footer .brand .mark{width:44px;height:44px;--mark-bg:var(--ink-raise);--mark-fg:var(--paper)}
.footer .brand .name b{color:var(--paper)}
.footer .brand .name span{color:var(--smoke-2)}
.f-line{color:var(--smoke-2);font-size:15px;max-width:30ch;line-height:1.8}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.f-col .f-h{font-size:13px;color:var(--smoke-2);font-weight:400;margin-bottom:16px}
.f-col a{display:block;color:var(--paper-dim);font-size:15px;text-decoration:none;padding-block:3px;margin-bottom:7px;width:fit-content;position:relative;transition:color var(--dur-fast) ease}
.f-col a::after{content:"";position:absolute;inset-inline:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-medium) var(--ease-out)}
.f-col a:hover{color:var(--paper)}
@media(hover:hover) and (pointer:fine){.f-col a:hover::after{transform:scaleX(1)}}
/* the fine print closes the page, under the map */
.f-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:22px clamp(32px,6vw,90px);flex-wrap:wrap;padding:clamp(26px,3vw,38px) 0 clamp(30px,3.6vw,48px)}
.f-rec{min-width:0}
.f-rec-n{font-size:13.5px;font-weight:600;color:var(--paper-dim);line-height:1.5}
.f-rec-m{display:flex;flex-wrap:wrap;gap:2px clamp(14px,1.6vw,22px);margin-top:6px;font-size:12.5px;color:var(--smoke-2);line-height:1.7}
.f-fine{display:flex;align-items:flex-end;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.f-fine .f-rec-m{margin-top:0}
.f-cr{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--paper-dim)}
.f-rec-m a{color:var(--smoke-2);text-decoration:none;padding-block:4px;margin-block:-4px;transition:color var(--dur-fast) ease}
.f-rec-m a:hover{color:var(--paper)}
/* touch screens: finger-sized footer links, same rows */
@media(pointer:coarse){.f-col a{padding-block:9px;margin-bottom:0}.f-rec-m a{display:inline-block;padding-block:12px;margin-block:-12px}}
/* back to the top: the unit rises a step on hover */
.f-up{display:inline-flex;align-items:center;gap:10px;color:var(--paper-dim);font-size:13.5px;text-decoration:none;padding:8px 14px;border:1px solid var(--line-dark);border-radius:10px;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.f-up .unit{width:12px;transition:transform var(--dur-medium) var(--ease-out)}
.f-up:hover{color:var(--paper);border-color:oklch(0.94 0.008 82 / .36)}
@media(hover:hover) and (pointer:fine){.f-up:hover .unit{transform:translateY(-4px)}}
/* the closing map: the world in dots, the Arab countries lit, Riyadh named */
/* the map sits in a tile, the ink twin of the cream tiles the screens sit in */
.f-map{position:relative;margin:clamp(36px,4.4vw,56px) 0 0;padding:clamp(22px,3vw,40px) clamp(16px,3vw,40px) clamp(16px,2vw,24px);background:var(--ink);border-radius:clamp(16px,1.8vw,24px);pointer-events:none;user-select:none}
.f-map canvas{display:block;width:100%;height:clamp(240px,32vw,470px)}
/* the tile's head: the tagline the map shows */
.f-map-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 32px;flex-wrap:wrap;margin-bottom:clamp(18px,2.6vw,34px);padding-inline:clamp(0px,1vw,8px)}
.f-sign{font-weight:300;font-size:clamp(26px,3vw,44px);line-height:1.2;color:var(--paper)}
.f-geo{position:relative;pointer-events:auto}
/* Riyadh's label, at the end of the hairline the map draws to it (site.js sets
   --lx/--ly); it shows once the line arrives, and only where the tile is wide */
.f-pin{position:absolute;left:var(--lx,50%);top:calc(var(--ly,50%) + 8px);transform:translate(-50%,4px);font-size:14.5px;font-weight:600;color:var(--paper);white-space:nowrap;opacity:0;transition:opacity var(--dur-slow) ease,transform var(--dur-slow) var(--ease-out)}
.f-geo.pinned .f-pin{opacity:1;transform:translate(-50%,0)}
@media(min-width:761px){.f-cap-n{display:none}}
@media(max-width:760px){.f-pin{display:none}}
.f-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:clamp(14px,1.6vw,20px)}
.f-cap-n{font-size:14.5px;font-weight:600;color:var(--paper)}
.f-now{font-size:13px;color:var(--smoke-2)}
.f-now:empty{display:none}
@media(max-width:760px){.f-map{padding:18px 12px 14px}.f-map canvas{height:auto;aspect-ratio:2.3}.f-cap,.f-map-h{padding-inline:8px}}
@media(scripting:none){.f-map{display:none}}
@media(max-width:700px){.f-bottom{display:block}.f-fine{margin-top:22px;justify-content:space-between}}
@media(max-width:760px){.f-top{grid-template-columns:1fr;gap:36px}.f-cols{grid-template-columns:1fr 1fr}}
/* two columns hold down to small phones, so the footer never becomes a single
   three-screen list; the third column spans both */
@media(max-width:760px){.f-cols{gap:26px 20px}.f-cols .f-col:last-child{grid-column:1 / -1}.f-cols .f-col:last-child a{display:inline-block;margin-inline-end:24px}}
@media(max-width:330px){.f-cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.f-up .unit{transition:none}}

/* ---------- process (/studio): four fields that widen as the product takes
   shape. The widening is the argument; the counter is built from the unit. ---------- */
.bld{--ramp:15;display:flex;flex-direction:column;gap:clamp(10px,1.3vw,14px)}
.bld-r{width:calc(100% - (3 - var(--i,0)) * var(--ramp) * 1%);background:var(--paper-sunk);border-radius:clamp(12px,1.4vw,18px);padding:clamp(22px,2.4vw,32px) clamp(20px,2.6vw,36px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.8vw,44px);align-items:center}
.bld-t h3{font-weight:600;font-size:clamp(20px,1.9vw,25px);line-height:1.25;margin-bottom:6px}
.bld-t p{color:var(--ink-soft);font-size:16px;line-height:1.65;max-width:34em}
/* phones: the counter sits above the words, as the step counters do on /family */
@media(max-width:560px){.bld-r{grid-template-columns:1fr;gap:14px;align-items:start}.bld-r .steps-u{justify-self:start}}
@media(max-width:1100px){.bld{--ramp:9}}
/* phones keep a small ramp so the fields still widen as the stages add up */
@media(max-width:900px){.bld{--ramp:5}}

/* the stage counter: n units stepping down like the mark, one per stage */
.steps-u{display:grid;grid-template-columns:repeat(4,22px);grid-auto-rows:15px;gap:0;direction:ltr;color:var(--ink);width:fit-content}
.steps-u i{display:block;border-radius:4.4px / 4.5px;background:currentColor}
.steps-u i:nth-child(1){grid-area:1/4}
.steps-u i:nth-child(2){grid-area:2/3}
.steps-u i:nth-child(3){grid-area:3/2}
.steps-u i:nth-child(4){grid-area:4/1}
.steps-u i.off{background:var(--line)}
/* on reveal, each lit unit drops in, one after another */
:where(html.js) .reveal .steps-u i:not(.off){transform:translateY(-10px);opacity:0;transition:transform var(--dur-very-slow) var(--ease-out),opacity var(--dur-very-slow) ease;transition-delay:calc(var(--u,0) * 90ms + 200ms)}
:where(html.js) .reveal.in .steps-u i:not(.off){transform:none;opacity:1}

/* ---------- the drawn phone ---------- */
.device{justify-self:center;width:clamp(240px,24vw,292px);aspect-ratio:9 / 18.5;background:var(--ink-deep);border-radius:42px;padding:10px;position:relative;box-shadow:0 40px 70px -46px oklch(0.19 0.016 58 / .55)}
.device .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:86px;height:20px;background:var(--ink-deep);border-radius:0 0 14px 14px;z-index:2}
.device .screen{height:100%;border-radius:32px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;font-size:11px}
.ap-sb{display:flex;justify-content:space-between;align-items:center;padding:10px 17px 3px;color:var(--ink)}
.ap-time{font-size:11px;font-weight:600;letter-spacing:.02em}
.ap-stat{display:flex;align-items:flex-end;gap:1.5px}
.ap-stat b{width:3px;background:var(--ink);border-radius:1px;display:block}
.ap-stat b:nth-child(1){height:4px}.ap-stat b:nth-child(2){height:6px}.ap-stat b:nth-child(3){height:8px}.ap-stat b:nth-child(4){height:10px;opacity:.3}
.ap-stat em{width:18px;height:9px;border:1.2px solid var(--ink);border-radius:2.5px;margin-inline-start:5px;position:relative;display:block}
.ap-stat em::after{content:"";position:absolute;inset:1.5px;width:65%;background:var(--ink);border-radius:1px}
.ap-top{display:flex;justify-content:space-between;align-items:center;padding:12px 17px 15px}
.ap-g{font-size:11px;color:var(--smoke)}
.ap-fam{font-size:17px;font-weight:600;color:var(--ink);margin-top:2px}
.ap-me{width:32px;height:32px;border-radius:50%;background:var(--ember);color:var(--ink-deep);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.ap-occ{margin:0 15px;background:var(--ink);border-radius:16px;padding:15px 16px;color:var(--paper)}
.ap-tag{font-size:11px;color:var(--ember)}
.ap-occ-t{font-size:16px;font-weight:600;margin-top:7px;color:var(--paper)}
.ap-occ-m{font-size:10.5px;color:var(--smoke-2);margin-top:4px}
.ap-att{display:flex;align-items:center;margin-top:13px}
.ap-att span{width:23px;height:23px;border-radius:50%;background:var(--ink-card);border:1.5px solid var(--ink);margin-inline-start:-7px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--paper-dim);font-weight:600}
.ap-att span:first-child{margin-inline-start:0}
.ap-att b{font-size:10px;color:var(--smoke-2);font-weight:600;margin-inline-start:7px}
.ap-sh{display:flex;justify-content:space-between;align-items:baseline;padding:18px 17px 11px;color:var(--ink)}
.ap-sh>span:first-child{font-size:13px;font-weight:600}
.ap-all{font-size:11px;color:var(--ember-deep);font-weight:600}
.ap-row{display:flex;gap:0;padding:0 12px}
.ap-row .av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex:none;color:var(--ink-deep);box-shadow:0 0 0 2px var(--paper);transform:translateY(var(--shift,0px)) scale(var(--scale-active,1));transition:transform var(--dur-medium) var(--ease-out)}
.ap-row .av+.av{margin-inline-start:-12px}
.av1{background:oklch(0.84 0.07 70)}.av2{background:oklch(0.82 0.055 40)}.av3{background:oklch(0.86 0.05 95)}.av4{background:oklch(0.80 0.045 112)}.av5{background:oklch(0.85 0.065 55)}
.ap-row .ava{background:none;border:1.5px dashed var(--line);color:var(--smoke);font-weight:300;font-size:20px}
.ap-tabs{display:flex;justify-content:space-around;margin-top:auto;padding:12px 6px 15px;border-top:1px solid var(--line);background:var(--paper-raise);font-size:11px;color:var(--smoke-2)}
.ap-tabs .on{color:var(--ember-deep);font-weight:600}
.ap-tabs [data-go]{cursor:pointer;padding:2px 4px;transition:color var(--dur-fast) ease}
.ap-tabs [data-go]:hover{color:var(--ink)}
.ap-ann{margin:18px 15px 0;border:1px solid var(--line);border-radius:14px;padding:12px 15px 6px}
.ap-ann-h{display:flex;justify-content:space-between;align-items:center;color:var(--ink);margin-bottom:6px}
.ap-ann-h>span:first-child{font-size:13px;font-weight:600}
.ap-paid{font-size:9.5px;color:var(--ember-deep);background:oklch(0.585 0.115 62 / .14);padding:2px 8px;border-radius:100px;font-weight:600}
.ap-ann-r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:10.5px;color:var(--ink)}
.ap-ann-r span:last-child{color:var(--smoke);font-size:10px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.ap-row .av{transition:none;transform:none}}

/* the four screens: one shows, the tab bar and the buttons beside the phone
   swap them (site.js). Without scripting the first simply stays. */
.scrs{position:relative;flex:1;min-height:0}
.scr{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 0s 220ms}
.scr.on{opacity:1;visibility:visible;transition-delay:0s}
.ph-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 16px 10px;color:var(--ink)}
.ph-h b{font-size:17px;font-weight:600}
.ph-h span{font-size:10.5px;color:var(--smoke)}
.ph-s{display:block;font-size:10px;color:var(--smoke);line-height:1.5}
.ph-seg{display:flex;gap:6px;padding:0 14px 10px}
.ph-seg span{border:1px solid var(--line);border-radius:100px;padding:2px 10px;font-size:10.5px;color:var(--ink-soft)}
.ph-seg span.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ph-card{margin:0 14px 8px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--paper-raise);color:var(--ink)}
.ph-card b{display:block;font-size:13px;font-weight:600;line-height:1.45}
.ph-k{display:block;font-size:10px;color:var(--smoke);margin-bottom:2px}
.ph-card.ink{background:var(--ink);border-color:transparent;color:var(--paper);text-align:center;padding:12px}
.ph-card.ink .ph-k{color:var(--ember)}
.ph-card.ink .ph-s{color:var(--smoke-2)}
.ph-v{display:block;font-size:10px;color:var(--paper-dim);margin-bottom:3px}
.ph-ev{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.ph-date{width:44px;border-radius:9px;background:var(--ember);color:var(--ink-deep);text-align:center;padding:5px 0;line-height:1.2}
.ph-date b{font-size:15px}
.ph-date span{display:block;font-size:8.5px}
.ph-rsvp{display:flex;gap:6px;margin:9px 0 6px}
.ph-rsvp span{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:4px 0;font-size:10px;color:var(--ink-soft)}
.ph-rsvp span.on{border-color:var(--ember-deep);color:var(--ember-deep);font-weight:600}
/* the drawn app answers a tap the way the real one does */
[data-rsvp] span,.dash-row .ok,.dash-row .no{cursor:pointer;transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.rc{display:inline-block;font-weight:600}
.rc.bump{animation:rcBump 320ms var(--ease-out)}
@keyframes rcBump{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
.dash-row.gone{animation:rowOut 260ms var(--ease-out) forwards}
@keyframes rowOut{to{opacity:0;transform:translateX(-14px)}}
@media(prefers-reduced-motion:reduce){.rc.bump,.dash-row.gone{animation-duration:1ms}}
.ph-srch{display:flex;align-items:center;gap:7px;margin:0 14px 4px;border:1px solid var(--line);border-radius:100px;padding:6px 12px;font-size:10.5px;color:var(--smoke)}
.ph-srch svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.scr .lin{width:calc(100% - 16px);margin:6px auto 0}
.ph-id{margin:2px 14px 10px;background:var(--paper-raise);border:1px solid var(--line);border-radius:16px;padding:14px;color:var(--ink)}
.ph-id-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.ph-id .av{width:36px;height:36px;border-radius:50%;background:var(--ember);color:var(--ink-deep);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.ph-id .qr{width:66px;height:66px}
.ph-id-n{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.ph-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.ph-chips span{font-size:9.5px;border:1px solid var(--line);border-radius:100px;padding:1px 8px;color:var(--ink-soft)}
.ph-chips span.on{background:var(--ember);border-color:var(--ember);color:var(--ink-deep);font-weight:600}
.ph-acts{display:flex;border-top:1px solid var(--line);margin-top:12px;padding-top:9px}
.ph-acts span{flex:1;text-align:center;font-size:10px;color:var(--ink-soft)}
.ph-kin{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 14px 12px;border:1px dashed var(--line);border-radius:12px;padding:8px 12px;font-size:11px;color:var(--ink-soft)}
.ph-kin b{color:var(--ember-deep);font-weight:600}
.ph-prog{display:grid;grid-template-columns:1fr auto;gap:6px;margin:0 14px;font-size:10.5px;color:var(--smoke)}
.ph-prog b{color:var(--ink);font-weight:600}
.ph-prog i{grid-column:1/-1;height:5px;border-radius:100px;background:var(--line);overflow:hidden}
.ph-prog i::after{content:"";display:block;height:100%;width:63%;background:var(--ember);border-radius:100px}
@media(prefers-reduced-motion:reduce){.scr{transition:none;transform:none}}

/* drawn app pieces shared by the phone and /family */
.lin{width:min(100%,420px);height:auto;display:block;overflow:visible}
.lin .edge{fill:none;stroke:var(--smoke);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.66}
.lin .node rect{fill:var(--paper-raise);stroke:oklch(0.19 0.016 58 / .3);stroke-width:1}
.lin .node text{font-family:var(--ar);font-size:11.5px;fill:var(--ink);font-weight:600}
.lin .node .sub{font-size:8.5px;fill:var(--smoke);font-weight:400}
.lin .me rect{fill:var(--ember);stroke:none}
.lin .me text{fill:var(--ink-deep);font-weight:600}
.lin .me .sub{fill:var(--ink-deep);opacity:.75}
.qr{display:block;flex:none}
.qr path,.qr rect{fill:var(--ink)}

/* ---------- the stage: the phone, and one button per screen beside it ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,8vw,130px);align-items:center}
.stage .device{width:clamp(250px,23vw,296px)}
.stage-fig{margin:0}
.stage .ptile{width:clamp(300px,40vw,560px)}
.fig-cap{font-size:13.5px;color:var(--smoke);margin-top:12px;max-width:34em}
.ink .fig-cap{color:var(--smoke-2)}
.fig-cap a{white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-color:oklch(0.19 0.016 58 / .28);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-fast) ease}
.fig-cap a:hover{text-decoration-color:var(--ink)}
.dash-fig{margin:0}
.ptile{position:relative;display:flex;justify-content:center;align-items:flex-start;background:var(--paper-sunk);border-radius:clamp(20px,2.4vw,32px);overflow:hidden;padding:clamp(40px,4.4vw,64px) clamp(24px,5vw,80px)}
/* the whole phone shows, frame and tab bar included; the old bottom crop sliced the tabs */
.ptile .device{box-shadow:0 30px 60px -40px oklch(0.19 0.016 58 / .6)}
.stage .name{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.stage .name h2,.stage .name h3{font-weight:300;font-size:clamp(34px,4.4vw,62px);line-height:1.15;letter-spacing:normal}
.stage .desc{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-soft);max-width:26em;margin-top:16px;text-wrap:pretty}
.picks{margin:clamp(28px,3.4vw,42px) 0 clamp(20px,2.4vw,28px);max-width:30em;border-bottom:1px solid var(--line)}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;width:100%;text-align:start;background:none;border:0;border-top:1px solid var(--line);padding:16px 0;font:inherit;color:var(--smoke);cursor:pointer;transition:color var(--dur-fast) ease}
/* the marker is the logo's own unit */
.pick::before{content:"";width:14px;aspect-ratio:44.88 / 30.57;border-radius:3px;background:var(--line);align-self:center;transition:background var(--dur-fast) ease,transform var(--dur-medium) var(--ease-out)}
.pick b{font-weight:600;font-size:clamp(17px,1.5vw,19px);line-height:1.4}
.pick .cap{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-medium) var(--ease-out)}
.pick .cap>span{min-height:0;overflow:hidden;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.pick:hover{color:var(--ink)}
.pick.on{color:var(--ink);cursor:default}
.pick.on::before{background:var(--ink);transform:translateX(-3px)}
.pick.on .cap{grid-template-rows:1fr}
html:not(.js) .pick{color:var(--ink);cursor:default}
html:not(.js) .pick .cap{grid-template-rows:1fr}
.stage .endorse{font-size:14.5px;color:var(--smoke);text-wrap:pretty}
.stage .link,.stage .btn{margin-top:18px}
.stage + .list{margin-top:clamp(64px,8vw,110px)}
@media(max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr);gap:0}
  .stage-copy{display:contents}
  .stage .name{order:1}
  .stage .desc{order:2}
  .stage .stage-fig{order:3;margin-top:36px}
  .stage .ptile{width:auto}
  .stage .device{width:clamp(230px,64vw,280px)}
  .picks{order:4}
  .stage .endorse{order:5}
  .stage .link,.stage .btn{order:6;justify-self:start}
}
@media(prefers-reduced-motion:reduce){.pick .cap,.pick::before{transition:none}}
.pick-now{display:none}
@media(max-width:760px){
  .stage .picks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border:0;margin:14px 0 0}
  .pick{grid-template-columns:1fr;justify-items:center;text-align:center;border:1px solid var(--line);border-radius:10px;padding:10px 2px}
  .pick::before{display:none}
  .pick b{font-size:14.5px}
  .pick .cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pick.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .stage .pick-now{display:block;order:4;min-height:3.4em;margin-top:12px;font-size:15.5px;color:var(--ink-soft);line-height:1.7}
  .stage .endorse{order:5}
  .device[data-phone]{touch-action:pan-y}
}

/* ---------- the council dashboard, drawn ---------- */
.dash{background:var(--paper);color:var(--ink);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:120px 1fr;font-size:10.5px;line-height:1.5;border:1px solid var(--line-dark);min-height:260px;box-shadow:0 40px 80px -50px oklch(0.155 0.015 55 / .9)}
.dash-side{background:var(--ink-raise);color:var(--paper-dim);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.dash-side .lg{font-weight:600;color:var(--paper);font-size:11px;margin-bottom:8px;padding:0 6px}
.dash-side span{padding:5px 8px;border-radius:7px;display:flex;justify-content:space-between;align-items:center;font-size:10px}
.dash-side span.on{background:oklch(0.75 0.125 70 / .16);color:var(--ember);font-weight:600}
.dash-side .num{font-size:9px;background:var(--ember);color:var(--ink-deep);border-radius:100px;padding:0 5px;font-weight:600;font-family:var(--mono)}
.dash-main{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.dash-main .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dash-main .hd b{font-size:12px;font-weight:600}
.dash-main .tabs{display:flex;gap:6px}
.dash-main .tabs span{border:1px solid var(--line);border-radius:100px;padding:2px 8px;font-size:9.5px;color:var(--ink-soft)}
.dash-main .tabs span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dash-alert{background:oklch(0.585 0.115 62 / .10);border:1px solid oklch(0.585 0.115 62 / .25);border-radius:9px;padding:7px 10px;color:var(--ember-deep);font-size:10px}
.dash-row{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;background:var(--paper-raise)}
.dash-row b{font-weight:600;font-size:11px}
.dash-row .st{font-size:9.5px;color:var(--smoke)}
.dash-row .tp{font-size:9.5px;border:1px solid var(--line);border-radius:100px;padding:1px 7px;color:var(--ink-soft);justify-self:end;white-space:nowrap}
.dash-row .acts{display:flex;gap:6px;grid-column:1/-1;margin-top:2px}
.dash-row .ok,.dash-row .no{font-size:9.5px;border-radius:7px;padding:3px 9px}
.dash-row .ok{background:var(--ink);color:var(--paper)}
.dash-row .no{border:1px solid var(--line);color:var(--ink-soft)}
@media(max-width:820px){.dash{grid-template-columns:1fr;min-height:0}.dash-side{flex-direction:row;flex-wrap:wrap;gap:4px}.dash-side .lg{width:100%;margin-bottom:4px}}

/* ---------- motion ----------
   Two reveal families.
   1) Above the fold (.enter and the headline lines): CSS animations that start at
      first paint and never pass through opacity 0, so the LCP text paints at once.
   2) Below the fold (.reveal): fade and rise, hidden only while html.js is set by
      the inline head script, revealed by site.js adding .in. If site.js never runs
      the head script drops html.js after 4s and everything shows. Reveals sit on
      headlines and figures, not on every paragraph. */
.enter{animation:enterRise var(--dur-reveal) var(--ease-out) calc(var(--i,0) * 70ms) both}
@keyframes enterRise{from{transform:translateY(22px)}to{transform:none}}
:where(html.js) .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-drift) var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
:where(html.js) .reveal.in{opacity:1;transform:none}

/* headlines rise line by line out of a mask (hero and page heads) */
.display .line,.phead h1 .line,.phero h1 .line{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.display .li,.phead h1 .li,.phero h1 .li{display:inline-block;animation:lineRise var(--dur-drift) var(--ease-out) calc(var(--i,0) * 110ms + 60ms) both}
@keyframes lineRise{from{transform:translateY(110%)}to{transform:none}}

/* section titles: site.js wraps plain-text h2.title words in masks and each word
   rises on reveal (the title itself only fades, never double motion) */
.title.tsplit{transform:none}
.title .tw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.16em;margin-block:-.16em}
.title .twi{display:inline-block;transform:translateY(118%);transition:transform var(--dur-drift) var(--ease-out);transition-delay:calc(var(--wi,0) * 55ms + var(--i,0) * 60ms)}
.title.in .twi{transform:none}

/* cross-page transitions: the new page wipes in from the reading side over the
   old one. The nav is its own layer, so it holds still while the page changes. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:none;opacity:1}
  ::view-transition-new(root){animation:vtWipe var(--dur-drift) var(--ease-out) both}
  ::view-transition-group(site-nav){animation:none}
  ::view-transition-old(site-nav),::view-transition-new(site-nav){animation:none}
  @keyframes vtWipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
}

/* line art: site.js writes each stroke's dash; the offset draws to 0 on reveal */
.draw{transition:stroke-dashoffset var(--dur-drift) var(--ease-out);transition-delay:calc(var(--d,0) * 90ms + var(--s,0) * 150ms)}
.in .draw{stroke-dashoffset:0}
.fade{opacity:0;transition:opacity var(--dur-very-slow) ease;transition-delay:calc(var(--d,0) * 90ms + var(--s,0) * 150ms + 300ms)}
.in .fade{opacity:1}

/* the phone floats up a touch as it scrolls in, on the view timeline */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ptile .device,.chap-fig>*{animation:devFloat linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes devFloat{from{translate:0 48px}to{translate:0 0}}
  }
}

/* ---------- responsive: nav ---------- */
@media(max-width:900px){
  /* phones and tablets: the menu is a full screen of paper in the site's own
     type, not a dropdown. Large light links on hairline rows rise in one after
     another; the page under it stops scrolling; «حدّثونا» closes it as a button */
  .nav-links{position:fixed;inset:74px 0 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:12px clamp(20px,4vw,48px) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--dur-medium) var(--ease-out),opacity var(--dur-fast) ease,visibility var(--dur-fast)}
  .nav-links.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  html:has(.nav-links.open){overflow:hidden}
  .nav-links a:not(.nav-cta){display:flex;align-items:center;justify-content:space-between;font-size:clamp(30px,8.4vw,42px);font-weight:300;line-height:1.3;padding-block:18px;border-bottom:1px solid var(--line)}
  /* the current page carries one ink unit at the end of its row */
  .nav-links a:not(.nav-cta)::after,.nav-links a.active::after{position:static;inset:auto;width:18px;height:auto;aspect-ratio:44.88 / 30.57;border-radius:4px;background:var(--ink);transform:scale(0);transition:none}
  .nav-links a.active::after{transform:none}
  .nav-cta{margin-top:auto;text-align:center;font-size:17px;padding:16px 20px!important}
  .nav-links a:nth-last-child(2){margin-bottom:28px}
  .nav-links.open > *{animation:menuIn var(--dur-slow) var(--ease-out) both}
  .nav-links.open > :nth-child(2){animation-delay:60ms}
  .nav-links.open > :nth-child(3){animation-delay:120ms}
  .nav-links.open > :nth-child(4){animation-delay:180ms}
  @keyframes menuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;width:44px;height:44px}
  .nav-toggle span{width:24px;height:2px;background:var(--ink);transform-origin:center;transition:transform var(--dur-medium) var(--ease-out),opacity var(--dur-fast) ease}
  .nav:has(.nav-links.open){background:var(--paper);border-bottom-color:var(--line)}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav-links.open > *{animation:none}
  :where(html.js) .reveal{transform:none;transition:opacity var(--dur-slow) ease}
  .enter{animation:none}
  .nav.tuck{transform:none}
  .display .li,.phead h1 .li,.phero h1 .li{animation:none}
  .title .twi{transform:none;transition:none}
  .draw{transition:none;stroke-dashoffset:0}
  .fade{transition:none;opacity:1}
  :where(html.js) .reveal .steps-u i:not(.off){transform:none;opacity:1;transition:none}
  .btn::before,.link::before{transition:none}
}

/* ============================================================
   Interior pages
   ============================================================ */

/* page head: paper, a big light headline, one line under it */
.phead{position:relative;padding:clamp(140px,21vh,210px) 0 clamp(56px,7vw,96px);border-bottom:1px solid var(--line)}
/* phones: less empty paper above a page title, the nav already takes the top */
@media(max-width:560px){.phead{padding:118px 0 44px}}
.phead h1{font-weight:300;font-size:clamp(42px,6.4vw,96px);line-height:1.16;letter-spacing:normal;text-wrap:balance;max-width:12em}
.phead .sub{font-size:clamp(17px,1.6vw,21px);color:var(--ink-soft);max-width:30em;margin-top:22px;text-wrap:pretty}
@media (prefers-reduced-motion:no-preference){
  .phead .sub{animation:pheadIn var(--dur-drift) var(--ease-out) 260ms both}
}
@keyframes pheadIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* photographs: shown as taken, full bleed, a slow parallax and one plain caption */
.interlude{position:relative;overflow:hidden;height:clamp(320px,62vh,640px);background:var(--ink-deep)}
.interlude picture{display:block;position:absolute;inset:0;z-index:0}
.interlude img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:center 58%}
.interlude::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 55%,oklch(0.155 0.015 55 / .55))}
.interlude .wrap{position:absolute;inset-inline:0;bottom:clamp(22px,3vw,36px);z-index:2}
.interlude .int-note{display:block;font-size:clamp(15px,1.4vw,17px);color:var(--paper);max-width:30em}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .interlude img{animation:intPar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes intPar{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
  }
}

/* onward band at the foot of interior pages */
.cta{padding:clamp(72px,9vw,124px) 0;border-top:1px solid var(--line)}
/* a plate already closes the section above; a rule under it reads as a stray line */
.panel + .cta{border-top-color:transparent}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px 44px;flex-wrap:wrap}
.cta h2{font-weight:300;font-size:clamp(28px,3.4vw,46px);line-height:1.25;letter-spacing:normal;text-wrap:balance;max-width:16em}

/* long-form prose (privacy) */
.legal{max-width:640px}
.legal h2{font-weight:600;font-size:clamp(19px,2vw,23px);margin:clamp(34px,4vw,48px) 0 12px;line-height:1.4}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-soft);font-size:16.5px;margin-bottom:14px;line-height:1.85}
.legal ul{margin:0 0 16px;padding-inline-start:22px}
.legal li{color:var(--ink-soft);font-size:16.5px;margin-bottom:8px;line-height:1.8}
.legal .updated{font-size:13px;color:var(--smoke);margin-top:clamp(40px,5vw,60px);padding-top:20px;border-top:1px solid var(--line)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}