/* ===========================================================
   Osama Engineering — site stylesheet
   Locked design decision: Petrol palette · Light theme ·
   Cairo (display + Arabic) / Source Sans 3 (Latin body).
   Every measurement uses logical properties so the Arabic
   switch flips the layout without a second stylesheet.
   =========================================================== */

:root{
  /* ---- Petrol, light ---- */
  --p-ground:#FFFFFF;
  --p-surface:#F4F6F4;
  --p-surface-2:#E8EDEA;
  --p-ink:#0E1613;
  --p-ink-2:#44524E;

  /* ink-3 was #67766F, which measured 4.39:1 on --p-surface and so
     failed AA for the helper labels, chart values, assumptions and
     captions that use it. #5C6B64 measures 5.17:1 on --p-surface and
     5.61:1 on --p-ground. */
  --p-ink-3:#5C6B64;

  --p-rule:#DBE2DE;
  --p-rule-2:#C4CFC9;
  /* Decorative hairlines can stay quiet, but a border that is the only
     thing identifying a control has to clear 3:1 — and controls sit on
     --p-surface and --p-surface-2, not on white, so white is the wrong
     thing to measure against. #6F7D76 is 4.31:1 on --p-ground, 3.97:1 on
     --p-surface and 3.64:1 on --p-surface-2. --p-rule-2 was 1.60:1 and is
     now used only for dividers that carry no meaning on their own. */
  --p-rule-strong:#6F7D76;

  --p-accent:#0D5A4E;
  --p-accent-ink:#0A4A40;
  --p-accent-soft:#E2EFEB;
  --p-cta:#BE5410;
  --p-cta-text:#FFFFFF;
  --p-cta-soft:#FAEBE0;
  /* Small warm text on --p-cta-soft measured 4.04:1 with --p-cta, under the
     4.5 AA needs. This is to --p-cta what --p-accent-ink is to --p-accent:
     5.06:1 on --p-cta-soft, 5.90:1 on --p-ground, 5.43:1 on --p-surface.
     --p-cta stays for large numerals, dots, borders and filled buttons. */
  --p-cta-ink:#A5490D;
  --p-focus:#0D5A4E;

  /* ---- Cairo pairing ---- */
  --f-display:"Cairo","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --f-ar:"Cairo",system-ui,sans-serif;
  --f-display-weight:700;
  --f-display-track:-.018em;
  --f-h2-track:-.012em;
  --f-body-size:17px;
  --f-body-leading:1.6;

  --shell:1240px;
  --ease:cubic-bezier(.22,.7,.3,1);
  --mk-ease:var(--ease);          /* the mark's curve is the site's curve */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--p-ground);
  color:var(--p-ink);
  font-family:var(--f-body);
  font-size:var(--f-body-size);
  line-height:var(--f-body-leading);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[dir="rtl"]{font-family:var(--f-ar);}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{font-family:var(--f-ar);}
p{margin:0;}
img,iframe{max-width:100%;}

/* ---- focus: one visible ring everywhere ---- */
:focus-visible{
  outline:2px solid var(--p-focus);
  outline-offset:2px;
  border-radius:4px;
}
.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;
}
.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--p-ink);color:#fff;padding:10px 16px;border-radius:0 0 4px 0;
  font-size:14px;text-decoration:none;
}
.skip:focus{inset-inline-start:0;}

.pad{padding-inline:clamp(18px,4vw,44px);}
.shell{max-width:var(--shell);margin-inline:auto;width:100%;}

.lab{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--p-ink-3);
}
body[dir="rtl"] .lab{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px;}

/* ===========================================================
   NAV
   =========================================================== */
.d-nav-wrap{
  position:sticky;top:0;z-index:70;background:var(--p-ground);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.d-nav-wrap.is-stuck{border-bottom-color:var(--p-rule);}
.d-nav{
  display:flex;align-items:center;gap:20px;
  padding-block:14px;
  transition:padding-block .25s var(--ease);
}
.d-nav-wrap.is-stuck .d-nav{padding-block:9px;}
.d-mark{
  font-family:var(--f-display);font-weight:var(--f-display-weight);
  font-size:15px;letter-spacing:-.02em;white-space:nowrap;
  color:inherit;text-decoration:none;flex:0 0 auto;
  /* NOT a flex container: the wordmark's text runs ("Osama", ".", "engineering")
     would each become an anonymous flex item and the gap would open up around
     the accent dot. The mark is spaced with a margin instead. */
}
.d-mark span{color:var(--p-accent-ink);display:inline-block;}
/* The `.` used to jump on hover. With the mark in the lockup that was two
   things moving on one hover, so the clamp state carries it alone now. */

/* ══════════════ BRAND MARK — clamp geometry, three motion states ══════════════
   Two interlocking brackets holding a node. Structure inherits currentColor,
   the node reads --mk-accent. Mirror-symmetric about the vertical axis, so it
   needs NO RTL flip — do not add one. */
.mk{
  /* --p-accent-ink is the dark petrol (#0A4A40); the terracotta the mark's node
     wants is --p-cta. The handoff's literal fallback (#BE5410) is the giveaway. */
  --mk-accent:var(--p-cta,#BE5410);
  width:1em;height:1em;          /* scales with the font-size of its context */
  flex:0 0 auto;display:block;
  overflow:visible;              /* the clamp state moves 0.8px outside the box */
}
.mk .mk-n{fill:var(--mk-accent);transform-box:fill-box;transform-origin:center;}

/* ── state 1 · assemble — brackets draw in, node lands last. Once per session. */
@keyframes mk-draw{ from{stroke-dashoffset:37} to{stroke-dashoffset:0} }
@keyframes mk-in-t{ from{transform:translateY(-5px);opacity:0} to{transform:none;opacity:1} }
@keyframes mk-in-b{ from{transform:translateY(5px);opacity:0}  to{transform:none;opacity:1} }
@keyframes mk-node-in{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.2);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.mk.is-assemble .mk-t{stroke-dasharray:37;animation:mk-draw .62s var(--mk-ease) both,mk-in-t .62s var(--mk-ease) both;}
.mk.is-assemble .mk-b{stroke-dasharray:37;animation:mk-draw .62s var(--mk-ease) both,mk-in-b .62s var(--mk-ease) both;}
.mk.is-assemble .mk-n{animation:mk-node-in .42s var(--mk-ease) .48s both;}

/* ── state 2 · heartbeat — the ambient idle. Node only. */
@keyframes mk-beat{ 0%,70%,100%{transform:scale(1)} 82%{transform:scale(1.16)} }
.mk.is-beat .mk-n{animation:mk-beat 4s var(--mk-ease) infinite;}

/* ── state 3 · clamp — hover / active. Brackets bite, node answers. */
.mk .mk-t,.mk .mk-b{transition:transform .2s var(--mk-ease);}
a:hover .mk .mk-t,button:hover .mk .mk-t,a:focus-visible .mk .mk-t{transform:translateY(-.8px);}
a:hover .mk .mk-b,button:hover .mk .mk-b,a:focus-visible .mk .mk-b{transform:translateY(.8px);}
a:hover .mk .mk-n,button:hover .mk .mk-n{animation:mk-beat .9s var(--mk-ease);}

/* ── loop variant for loaders: assemble, HELD, repeated.
   These need their own keyframes rather than reusing the one-shot pair above.
   A from/to pair spread over 2.2s makes the mark a slow continuous fade that
   is near-invisible for most of the cycle; the design completes the motion in
   the first ~30% and holds the rest, so the mark reads as solid between
   assemblies. Percentages match the source animation. */
@keyframes mk-loop-draw{ 0%{stroke-dashoffset:37} 26%,100%{stroke-dashoffset:0} }
@keyframes mk-loop-t{ 0%{transform:translateY(-5px);opacity:0} 22%,100%{transform:none;opacity:1} }
@keyframes mk-loop-b{ 0%{transform:translateY(5px);opacity:0}  22%,100%{transform:none;opacity:1} }
@keyframes mk-loop-n{
  0%,14%{transform:scale(0);opacity:0}
  30%{transform:scale(1.2);opacity:1}
  38%,100%{transform:scale(1);opacity:1}
}
.mk.is-loop .mk-t{stroke-dasharray:37;animation:mk-loop-draw 2.2s var(--mk-ease) infinite,mk-loop-t 2.2s var(--mk-ease) infinite;}
.mk.is-loop .mk-b{stroke-dasharray:37;animation:mk-loop-draw 2.2s var(--mk-ease) infinite,mk-loop-b 2.2s var(--mk-ease) infinite;}
.mk.is-loop .mk-n{animation:mk-loop-n 2.2s var(--mk-ease) infinite;}

/* ── per-context sizing. 1em would tie the mark to body copy size; these are
   the sizes the lockup was drawn at. */
.d-mark .mk{
  width:24px;height:24px;color:var(--p-accent);
  display:inline-block;vertical-align:-.36em;margin-inline-end:9px;
}
.d-foot .mk{width:20px;height:20px;color:var(--p-accent);}
.hero-load .mk{width:28px;height:28px;color:var(--p-accent);}
.viz-load .mk{width:24px;height:24px;color:var(--p-accent);opacity:.85;}

@media (prefers-reduced-motion:reduce){
  .mk *{animation:none !important;transition:none !important;transform:none !important;}
  .mk .mk-t,.mk .mk-b{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
}
.d-links{display:flex;gap:16px;flex:1 1 auto;flex-wrap:wrap;font-size:13.5px;color:var(--p-ink-2);}
.d-links a{
  color:inherit;text-decoration:none;position:relative;padding-block:2px;
  transition:color .18s ease;
}
.d-links a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;
  width:100%;height:1px;background:var(--p-accent-ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
body[dir="rtl"] .d-links a::after{transform-origin:right;}
.d-links a:hover,.d-links a.is-active{color:var(--p-accent-ink);}
.d-links a:hover::after,.d-links a.is-active::after{transform:scaleX(1);}
.d-navcta{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.d-lang{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--p-ink-2);
  border:1px solid var(--p-rule-strong);border-radius:4px;padding:5px 9px;
  background:transparent;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.d-lang:hover{border-color:var(--p-accent);color:var(--p-accent-ink);background:var(--p-accent-soft);}
.d-lang:active{background:var(--p-surface-2);}
.d-burger{
  display:none;width:38px;height:34px;border:1px solid var(--p-rule-strong);border-radius:4px;
  background:transparent;cursor:pointer;padding:0;place-items:center;
}
.d-burger i{
  display:block;width:16px;height:1.5px;background:var(--p-ink);position:relative;
  transition:background-color .2s ease;
}
.d-burger i::before,.d-burger i::after{
  content:"";position:absolute;inset-inline-start:0;width:16px;height:1.5px;background:var(--p-ink);
  transition:transform .28s var(--ease);
}
.d-burger i::before{top:-5px;}
.d-burger i::after{top:5px;}
.d-burger[aria-expanded="true"] i{background:transparent;}
.d-burger[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg);}
.d-burger[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg);}

@media (max-width:900px){
  .d-links{
    display:none;position:absolute;inset-inline:0;top:100%;
    flex-direction:column;gap:0;background:var(--p-ground);
    border-block:1px solid var(--p-rule);padding:6px 0;
  }
  .d-links.is-open{display:flex;}
  .d-links a{padding:11px clamp(18px,4vw,44px);font-size:15px;}
  .d-links a::after{display:none;}
  .d-burger{display:grid;}
  .d-navcta .d-btn{display:none;}
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.d-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--f-body);font-size:14px;font-weight:600;line-height:1;
  padding:11px 17px;border-radius:4px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .18s var(--ease);
}
body[dir="rtl"] .d-btn{font-family:var(--f-ar);}
.d-btn:active{transform:translateY(1px);}
.d-btn-cta{background:var(--p-cta);color:var(--p-cta-text);}
.d-btn-cta:hover{background:#A8480C;}
.d-btn-cta:active{background:#8F3D0A;}
.d-btn-ghost{background:var(--p-ground);color:var(--p-ink);border-color:var(--p-rule-strong);}
.d-btn-ghost:hover{border-color:var(--p-accent);color:var(--p-accent-ink);background:var(--p-accent-soft);}
.d-btn-sm{font-size:13px;padding:8px 13px;}
.d-btn .arw{display:inline-block;transition:transform .26s var(--ease);}
body[dir="rtl"] .d-btn .arw{transform:scaleX(-1);}
.d-btn:hover .arw{transform:translateX(3px);}
body[dir="rtl"] .d-btn:hover .arw{transform:scaleX(-1) translateX(3px);}

/* ===========================================================
   HERO — copy on one side, kinetic sculpture on the other
   The sculpture is a transparent WebGL canvas that composites
   straight onto the page ground: no stage tint, no scrim, no
   card, no visible canvas rectangle. It is given a real grid
   column because the component derives its camera distance
   from its container's aspect ratio — framing it properly
   means giving it a box worth framing.
   =========================================================== */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:640px;
  min-height:min(88svh,860px);
  background:var(--p-ground);
}
.hero-grid{
  display:grid;
  /* The copy caps itself at 56ch, so an even split left ~90px of its column
     unused. The sculpture takes that back: it is the element that benefits
     from width, and the headline measure is unchanged either way. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  align-items:center;
  gap:clamp(24px,4vw,64px);
  padding-block:clamp(40px,7vw,84px);
  width:100%;
}
.hero-copy{max-width:56ch;}
.hero-copy h1{
  font-size:clamp(1.95rem,3.9vw,3rem);line-height:1.07;
  letter-spacing:var(--f-display-track);font-weight:var(--f-display-weight);
  margin-block:14px 16px;
}
body[dir="rtl"] .hero-copy h1{letter-spacing:0;line-height:1.34;}
.hero-copy .sub{font-size:1.04rem;color:var(--p-ink-2);max-width:48ch;margin-bottom:26px;}
.hero-copy .acts{display:flex;flex-wrap:wrap;gap:10px;}

/* The stage is a box, not a surface: it has no background of its own.
   Height is set rather than derived so the column is reserved before the
   first frame and nothing shifts when the sculpture reveals. */
.hero-stage{
  position:relative;
  /* Matched to the sculpture's own proportion (~1.2 landscape) rather than
     to the old visual's box, so the frame is filled instead of leaving a
     band of white above and below it. */
  aspect-ratio:1.2;
  max-height:min(64svh,560px);
  opacity:0;
  transition:opacity .85s var(--ease);
}
.hero.is-ready .hero-stage,
.hero.is-failed .hero-stage{opacity:1;}
.hero-stage intelligence-machine{display:block;width:100%;height:100%;}

/* One word per beat, sitting beside the part that is doing the work. Only
   one is ever visible, so they cannot collide. Positions are physical
   (left/right, not inset-inline) because the hero mirrors under RTL but the
   sculpture itself does not — the intake stays on the left either way. */
.hero-tags{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hero-tag{
  position:absolute;white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-accent-ink);
  opacity:0;transform:translateY(3px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.hero-tag.is-out{color:var(--p-cta-ink);}
.hero-tag.is-on{opacity:1;transform:none;}
body[dir="rtl"] .hero-tag{font-family:var(--f-ar);font-weight:600;letter-spacing:0;font-size:13px;text-transform:none;}

/* The sculpture spans 9-95% across but only 16-84% down, so the clear bands
   are the top and bottom strips. Placing the three flow beats along the
   bottom in order also means the word itself travels left -> centre -> right
   as the work moves through the machine. */
.at-in{left:4%;top:88%;}
.at-action{right:4%;top:88%;}
.at-analysis{left:20%;top:3%;}
.at-prediction{right:16%;top:3%;}
.hero-tag.at-core{left:50%;top:88%;transform:translate(-50%,3px);}
.hero-tag.at-core.is-on{transform:translate(-50%,0);}

@media (max-width:1000px){
  .hero-tag{font-size:9.5px;letter-spacing:.09em;}
  body[dir="rtl"] .hero-tag{font-size:11.5px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-tag{transition:none;}
}

/* Watermark, not a spinner. Invisible unless WebGL failed, in which case the
   column resolves to a quiet mark instead of empty space. */
.hero-load{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
.hero.is-failed .hero-load{opacity:1;}
.hero.is-failed .hero-load .mk{
  width:96px;height:96px;opacity:.10;color:var(--p-ink);
}
.hero.is-failed .hero-load .mk *{animation:none !important;stroke-dasharray:none;}


/* Stacked below 1000px: headline and CTA first, sculpture under them, so the
   message stays primary and the call to action stays within thumb reach. */
@media (max-width:1000px){
  .hero{min-height:auto;}
  .hero-grid{
    grid-template-columns:1fr;
    gap:clamp(4px,2vw,16px);
    padding-block:clamp(34px,8vw,56px) clamp(24px,6vw,44px);
  }
  .hero-copy{max-width:none;}
  /* Same proportion as desktop, capped so it stays secondary to the headline
     and the hero does not grow tall. */
  .hero-stage{width:min(100%,460px);max-height:none;margin-inline:auto;}
}
@media (prefers-reduced-motion:reduce){
  .hero-stage{transition:none;}
}

/* ===========================================================
   ZIG-ZAG FEATURE ROWS
   Text and canvas alternate sides on desktop. Below the
   breakpoint every row collapses to one column with the text
   first, regardless of which side it was on.
   =========================================================== */
.zig{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);
  align-items:center;
}
.zig-text,.zig-viz{min-width:0;}
/* The calculator's columns are very unequal — the input card plus its result
   cards run ~889px against a ~481px visual — so align-items:center parked the
   graphic in the middle and left ~200px of dead space above AND below it. Top
   aligning puts the animation level with the first input, which is where the
   eye expects it, and the slack collapses to one place instead of two. */
#calculator{align-items:start;}
#calculator .zig-viz{margin-block:0;position:sticky;top:96px;}
#calculator .viz-cap{padding-top:8px;max-width:52ch;}
.zig-rev .zig-text{order:2;}
.zig-rev .zig-viz{order:1;}
.zig .viz{margin-top:0;}
@media (max-width:1000px){
  .zig{grid-template-columns:1fr;gap:24px;}
  .zig .zig-text{order:1;}
  .zig .zig-viz{order:2;}
}

/* ===========================================================
   SCROLLYTELLING — one pinned canvas, four scrolling steps
   The canvas is seeked to a named scene as each step becomes
   active, so the graphic really does morph through the
   pipeline rather than cross-fading between stills.
   =========================================================== */
.scrolly{
  display:grid;
  grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.scrolly-visual{
  position:sticky;top:15vh;
  align-self:start;
  min-width:0;
}
/* The section title rides inside the pinned column. Previously it scrolled away
   with the page, so by step 02 the reader had four numbered stages and nothing
   naming what they were stages OF. */
.scrolly-head{margin-bottom:clamp(14px,2vw,22px);}
.scrolly-head h2{margin-bottom:0;}
.scrolly-steps{
  display:grid;gap:0;min-width:0;
  /* half a viewport of lead-in and lead-out keeps the first and last
     steps reachable while the canvas is still pinned */
  padding-block:12vh 22vh;
}
.step{
  min-height:62vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(18px,3vh,34px);
  opacity:.4;
  transition:opacity .45s var(--ease);
}
.step.is-active{opacity:1;}
.step-n{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--p-ink-3);margin-bottom:12px;
}
body[dir="rtl"] .step-n{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px;}
.step-n i{
  width:26px;height:1px;background:var(--p-rule-strong);display:block;
  transition:width .45s var(--ease),background-color .45s ease;
}
.step.is-active .step-n{color:var(--p-accent-ink);}
.step.is-active .step-n i{width:46px;background:var(--p-accent);}
.step h3{
  font-size:clamp(1.15rem,2vw,1.45rem);font-weight:var(--f-display-weight);
  line-height:1.25;letter-spacing:var(--f-h2-track);margin-bottom:10px;
}
body[dir="rtl"] .step h3{letter-spacing:0;line-height:1.45;}
.step p{font-size:1rem;color:var(--p-ink-2);max-width:46ch;}

/* progress rail beside the steps */
.scrolly-rail{
  position:sticky;top:15vh;
  display:none;
}

@media (max-width:1000px){
  .scrolly{grid-template-columns:1fr;gap:0;}
  /* Unpinned on small screens. The canvas keeps a shallow pin at the top
     so the state changes stay visible while the steps scroll under it —
     the bundle is a 1MB document, so it cannot be duplicated per step and
     moving the iframe in the DOM would reload it. */
  .scrolly-visual{
    position:sticky;top:56px;z-index:5;
    background:var(--p-ground);
    padding-block:8px;
    box-shadow:0 12px 16px -12px rgba(14,22,19,.18);
  }
  /* The pinned bar has a phone's vertical budget to respect, so the title stays
     and the eyebrow goes — the h2 is what actually supplies the context. */
  .scrolly-head{margin-bottom:8px;}
  .scrolly-head .lab{display:none;}
  .scrolly-head h2{font-size:1.06rem;line-height:1.3;}
  .scrolly-visual .viz-frame{aspect-ratio:16/10;}
  .scrolly-steps{padding-block:6vh 10vh;}
  .step{min-height:auto;padding-block:26px;opacity:1;}
  .step:not(.is-active){opacity:.55;}
}
@media (prefers-reduced-motion: reduce){
  .step,.step:not(.is-active){opacity:1;}
}

/* ===========================================================
   THE NIGHT SHIFT — problem, turn, morning
   One list that changes state, not cards that swap. Every row's
   steps and outcome are laid out at full size from the start and
   held at opacity 0, so the list reserves its final height before
   the first item appears and nothing reflows when the sequence
   plays, replays, or is skipped for reduced motion.
   =========================================================== */
.d-night{padding-block:clamp(52px,8vw,92px) clamp(48px,7vw,84px);}
.d-night-head{max-width:60ch;}
.d-night-head h2{
  font-size:clamp(1.5rem,2.9vw,2.1rem);line-height:1.14;
  letter-spacing:var(--f-h2-track);font-weight:var(--f-display-weight);
  margin-block:10px 14px;
}
body[dir="rtl"] .d-night-head h2{letter-spacing:0;line-height:1.4;}
.d-night-sub{color:var(--p-ink-2);font-size:1.02rem;line-height:1.62;max-width:54ch;}

/* ---- the feed ---- */
.d-feed{
  list-style:none;margin:clamp(30px,4.5vw,46px) 0 0;padding:0;
  display:grid;gap:10px;
  /* Held to a measure rather than run full-bleed: at 1240 the rows were wide
     enough to strand the outcome badge a long way from the task it belongs
     to, and the head above is set to 60ch. */
  max-width:min(100%,1000px);
  border-top:1px solid var(--p-rule);
  padding-top:clamp(18px,2.5vw,26px);
}
.d-item{
  display:grid;
  grid-template-columns:max-content max-content minmax(0,1fr) max-content;
  grid-template-areas:
    "time mark task out"
    ".    .    steps steps";
  align-items:start;
  column-gap:14px;row-gap:7px;
  padding:14px 16px;
  border:1px solid var(--p-rule);border-radius:8px;
  background:var(--p-ground);
  /* entrance: the row arrives from the leading edge, like work landing */
  opacity:0;translate:-18px 0;
  transition:opacity .34s var(--ease),translate .34s var(--ease),
             border-color .4s var(--ease),background-color .4s var(--ease);
}
body[dir="rtl"] .d-item{translate:18px 0;}
.d-item.is-in{opacity:1;translate:0 0;}

/* ---- state mark ---- */
.d-item-mark{
  grid-area:mark;
  width:9px;height:9px;border-radius:50%;margin-top:6px;
  border:1.5px solid var(--p-rule-strong);background:transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.d-item.is-working .d-item-mark{
  border-color:var(--p-accent);background:var(--p-accent);
  animation:d-pulse 1.5s var(--ease) infinite;
}
.d-item.is-done .d-item-mark{border-color:var(--p-accent);background:var(--p-accent);}
.d-item.is-ready .d-item-mark{border-color:var(--p-cta);background:var(--p-cta);}
@keyframes d-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(13,90,78,.34);}
  50%    {box-shadow:0 0 0 5px rgba(13,90,78,0);}
}

.d-item-time{
  grid-area:time;
  font-family:var(--f-mono);font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--p-ink-3);margin-top:3px;min-width:4ch;
}
.d-item-task{
  grid-area:task;
  font-size:.97rem;line-height:1.5;color:var(--p-ink);margin:0;
}
body[dir="rtl"] .d-item-task{font-family:var(--f-ar);line-height:1.72;}
.d-caret{
  display:none;
  width:2px;height:1.05em;
  background:var(--p-accent);
  vertical-align:-.17em;margin-inline-start:2px;
  animation:d-blink .9s steps(1,end) infinite;
}
.d-item.is-typing .d-caret{display:inline-block;}
@keyframes d-blink{0%,50%{opacity:1;} 50.01%,100%{opacity:0;}}

/* ---- the process chain ---- */
.d-steps{
  grid-area:steps;
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;
  opacity:0;transition:opacity .4s var(--ease);
}
.d-item.is-working .d-steps,
.d-item.is-done .d-steps,
.d-item.is-ready .d-steps{opacity:1;}
.d-step{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;
  color:var(--p-accent-ink);
  background:var(--p-accent-soft);border-radius:3px;padding:3px 7px;
  opacity:0;translate:0 3px;
  transition:opacity .26s var(--ease),translate .26s var(--ease);
}
body[dir="rtl"] .d-step{font-family:var(--f-ar);font-size:12px;letter-spacing:0;}
.d-step.is-on{opacity:1;translate:0 0;}
/* Direction-aware connector: the glyph is swapped rather than mirrored, so it
   always points along the reading direction instead of relying on bidi. */
.d-step + .d-step::before{
  content:"→";display:inline-block;
  margin-inline-end:7px;margin-inline-start:-1px;
  color:var(--p-ink-3);font-size:10px;
}
body[dir="rtl"] .d-step + .d-step::before{content:"←";}
.d-item.is-ready .d-step{color:var(--p-cta-ink);background:var(--p-cta-soft);}

/* ---- outcome ---- */
.d-item-out{
  grid-area:out;margin:0;
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;white-space:nowrap;
  color:var(--p-accent-ink);
  opacity:0;transition:opacity .4s var(--ease);
}
body[dir="rtl"] .d-item-out{font-family:var(--f-ar);font-size:13px;}
.d-item.is-done .d-item-out,
.d-item.is-ready .d-item-out{opacity:1;}
.d-out-tick{
  display:inline-grid;place-items:center;
  width:15px;height:15px;border-radius:50%;
  background:var(--p-accent);color:#fff;font-size:9px;line-height:1;
}
.d-item.is-done{border-color:var(--p-rule-2);background:var(--p-surface);}

/* The exception. Warm, and set apart by a leading rule rather than by an
   alarm colour: it is not an error, it is the one thing worth a person. */
.d-item.is-human .d-item-out{color:var(--p-cta-ink);}
.d-item.is-ready{
  border-color:var(--p-cta);
  background:var(--p-cta-soft);
  box-shadow:inset 3px 0 0 0 var(--p-cta);
}
body[dir="rtl"] .d-item.is-ready{box-shadow:inset -3px 0 0 0 var(--p-cta);}

/* ---- the hinge ---- */
.d-night-turn{
  margin:clamp(26px,3.6vw,38px) 0 0;
  max-width:34ch;
  font-family:var(--f-display);
  font-size:clamp(1.18rem,2.1vw,1.5rem);line-height:1.3;
  letter-spacing:var(--f-h2-track);font-weight:var(--f-display-weight);
  color:var(--p-accent-ink);
  padding-inline-start:16px;
  border-inline-start:2px solid var(--p-accent);
  opacity:0;translate:0 10px;
  transition:opacity .7s var(--ease),translate .7s var(--ease);
}
body[dir="rtl"] .d-night-turn{font-family:var(--f-ar);letter-spacing:0;line-height:1.55;}
.d-night-turn.is-in{opacity:1;translate:0 0;}

/* ---- the morning ---- */
.d-morning{
  margin-top:clamp(34px,5vw,56px);
  padding-top:clamp(26px,3.6vw,38px);
  border-top:1px solid var(--p-rule);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
  column-gap:clamp(24px,4vw,56px);row-gap:clamp(20px,3vw,30px);
  opacity:0;translate:0 12px;
  transition:opacity .7s var(--ease),translate .7s var(--ease);
}
.d-morning.is-in{opacity:1;translate:0 0;}
.d-morning-copy h3{
  font-size:clamp(1.24rem,2.3vw,1.62rem);line-height:1.18;
  letter-spacing:var(--f-h2-track);font-weight:var(--f-display-weight);
  margin:0 0 8px;
}
body[dir="rtl"] .d-morning-copy h3{letter-spacing:0;line-height:1.42;}
.d-morning-copy p{margin:0;color:var(--p-ink-2);font-size:1.02rem;line-height:1.6;}

/* The tally. Paired, so 4 and 1 are read against each other rather than
   floating free the way the old lone "4" did. */
.d-tally{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.d-tally-b{
  padding:16px 18px;border-radius:8px;
  border:1px solid var(--p-rule);background:var(--p-surface);
  display:flex;flex-direction:column;gap:4px;
}
.d-tally-b.is-human{border-color:var(--p-cta);background:var(--p-cta-soft);}
.d-tally-n{
  font-family:var(--f-mono);font-size:clamp(2rem,3.6vw,2.7rem);line-height:1;
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--p-accent-ink);
}
.d-tally-b.is-human .d-tally-n{color:var(--p-cta);}
.d-tally-l{font-size:13px;line-height:1.4;color:var(--p-ink-2);}
body[dir="rtl"] .d-tally-l{font-family:var(--f-ar);font-size:14px;}

/* Full measure under both columns, at body size and body ink — this is the
   takeaway, not a footnote. */
.d-morning-note{
  grid-column:1 / -1;margin:0;
  max-width:78ch;
  font-size:1.01rem;line-height:1.62;color:var(--p-ink-2);
  padding-inline-start:16px;
  border-inline-start:2px solid var(--p-rule-2);
}
body[dir="rtl"] .d-morning-note{line-height:1.8;}

/* ---- narrow ---- */
@media (max-width:820px){
  .d-morning{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .d-item{
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-areas:
      "mark time"
      "task task"
      "steps steps"
      "out  out";
    column-gap:10px;row-gap:8px;
    padding:13px 14px;
  }
  .d-item-mark{margin-top:4px;}
  .d-item-time{margin-top:0;}
  .d-item-out{white-space:normal;}
}
/* The pair only stacks when it genuinely cannot fit: 4 beside 1 is the whole
   point of the tally, and stacking them loses the comparison. */
@media (max-width:340px){
  .d-tally{grid-template-columns:1fr;}
}

/* Reduced motion: the finished state, immediately and in full. Nothing is
   withheld, because the sequence was never carrying meaning the text does
   not also carry. */
@media (prefers-reduced-motion:reduce){
  .d-item,.d-steps,.d-step,.d-item-out,.d-night-turn,.d-morning{
    transition:none !important;
  }
  .d-item.is-working .d-item-mark{animation:none;}
  .d-caret{display:none !important;}
}

/* ===========================================================
   TRUST STRIP
   =========================================================== */
/* Lives above .d-foot at the bottom of the page. Only a top rule: the footer
   below supplies its own, and doubling them drew a 2px band. Left-aligned
   rather than space-between — with the second group removed, distributing would
   strand the label against the far edge. */
.d-trust{
  border-top:1px solid var(--p-rule);
  padding-block:18px 16px;
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
}
.d-trust .stack{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.d-trust .lab{flex:0 0 auto;}
.d-trust .plat{
  border:1px solid var(--p-rule-strong);border-radius:3px;padding:4px 9px;
  font-family:var(--f-mono);font-size:11px;color:var(--p-ink-2);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.d-trust .plat:hover{border-color:var(--p-accent);color:var(--p-accent-ink);background:var(--p-ground);}

/* ===========================================================
   SECTIONS
   =========================================================== */
.d-sec{padding-block:clamp(38px,5.5vw,66px);scroll-margin-top:72px;}
.d-sec + .d-sec{border-top:1px solid var(--p-rule);}
.d-sec > h2,.zig-text > h2{
  font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:var(--f-h2-track);
  font-weight:var(--f-display-weight);line-height:1.2;margin-block:9px 22px;max-width:26ch;
}
body[dir="rtl"] .d-sec > h2,body[dir="rtl"] .zig-text > h2{letter-spacing:0;line-height:1.45;}

/* ===========================================================
   OPPORTUNITY GRID
   =========================================================== */
.d-probs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;
  background:var(--p-rule);border:1px solid var(--p-rule);border-radius:5px;overflow:hidden;
}
.d-prob{
  background:var(--p-ground);padding:18px 20px;position:relative;
  transition:background-color .25s ease;
}
.d-prob::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--p-accent);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.d-prob:hover,.d-prob:focus-within{background:var(--p-surface);}
.d-prob:hover::before,.d-prob:focus-within::before{transform:scaleY(1);}
.d-prob p{font-size:.96rem;color:var(--p-ink);margin-bottom:8px;}
.d-prob .link{
  font-size:12.5px;color:var(--p-accent-ink);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.d-prob .link .arw{display:inline-block;transition:transform .26s var(--ease);}
body[dir="rtl"] .d-prob .link .arw{transform:scaleX(-1);}
.d-prob .link:hover{text-decoration:underline;text-underline-offset:3px;}
.d-prob .link:hover .arw{transform:translateX(3px);}
body[dir="rtl"] .d-prob .link:hover .arw{transform:scaleX(-1) translateX(3px);}

/* ===========================================================
   SERVICES
   =========================================================== */
/* Nine cards on a 4-column auto-fit leave one alone on the last row.
   Capped at 3 so the grid resolves 3/3/3. */
/* ── work examples: a centre-locked horizontal carousel ────────────────────
   The rail is full-bleed inside the shell so cards can sit half-off both
   edges; the centred card is the one being read. */
.svc-rail{position:relative;margin-top:clamp(26px,3.5vw,40px);}

/* ── rail affordance ────────────────────────────────────────────────────
   A centre-snapped rail with no scrollbar gives the reader nothing to tell
   them it moves, so it reads as a static card. Two things fix that: real
   arrow controls (also the keyboard path), and a single small nudge the
   first time the rail is seen — the cards drift and settle once, which
   reads as "this moves" without becoming an ambient animation. */
.svc-arrow{
  position:absolute;top:calc(50% + 18px);transform:translateY(-50%);
  z-index:4;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--p-ground);border:1px solid var(--p-rule-2);
  color:var(--p-ink-2);
  box-shadow:0 1px 3px rgba(14,22,19,.05), 0 8px 20px -10px rgba(14,22,19,.22);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s var(--ease);
}
.svc-arrow svg{width:16px;height:16px;}
.svc-arrow:hover{background:var(--p-accent);border-color:var(--p-accent);color:#fff;}
.svc-arrow:active{transform:translateY(-50%) scale(.94);}
.svc-arrow:focus-visible{outline:2px solid var(--p-accent);outline-offset:3px;}
.svc-arrow[disabled]{opacity:.32;pointer-events:none;}
/* physical edges — the glyphs already point the right way per language, and
   the JS maps each button to the correct scroll direction for the dir. */
.svc-prev{inset-inline-start:-4px;}
.svc-next{inset-inline-end:-4px;}
body[dir="rtl"] .svc-prev svg{transform:scaleX(-1);}
body[dir="rtl"] .svc-next svg{transform:scaleX(-1);}
@media (max-width:640px){
  .svc-arrow{width:34px;height:34px;}
  .svc-prev{inset-inline-start:2px;}
  .svc-next{inset-inline-end:2px;}
}

/* The nudge is done by scrolling the rail in JS, not by transforming the
   cards: the cards already carry scale(.9)/scale(1.1) for the centre state,
   and animating transform here would stomp it mid-hint. Scrolling also shows
   the snap behaviour, which is the thing being advertised. */
.d-svcs{
  display:flex;flex-wrap:nowrap;gap:16px;
  overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:50%;
  /* half the rail on each side so the first and last cards can reach centre */
  padding-block:44px 8px;
  padding-inline:calc(50% - (var(--svc-w) / 2));
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.d-svcs::-webkit-scrollbar{display:none;}
.d-svcs > .d-svc{
  --svc-w:296px;
  flex:0 0 var(--svc-w);width:var(--svc-w);
  scroll-snap-align:center;scroll-snap-stop:always;
  transform:scale(.9);opacity:.5;
  transition:transform .38s var(--ease),opacity .38s var(--ease),box-shadow .38s var(--ease),border-color .2s ease;
}
.d-svcs{--svc-w:296px;}
.d-svcs > .d-svc.is-centre{
  transform:scale(1.1);opacity:1;
  box-shadow:0 2px 6px rgba(14,22,19,.06), 0 20px 44px -18px rgba(14,22,19,.28);
  z-index:2;
}
/* the centre indicator — replaces the old category tab row */
.svc-pointer{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.svc-pointer-text{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--p-accent-ink);
  background:var(--p-accent-soft);border:1px solid var(--p-accent);
  border-radius:999px;padding:5px 14px;white-space:nowrap;
}
body[dir="rtl"] .svc-pointer-text{font-family:var(--f-ar);letter-spacing:0;font-size:12px;}
.svc-pointer::after{
  content:"";width:1px;height:14px;background:var(--p-accent);opacity:.55;
}
/* .d-svc:hover sets translateY(-2px), which would replace the carousel's scale
   and make a hovered card snap back to full size out of centre. */
.d-svcs > .d-svc:hover,.d-svcs > .d-svc:focus-within{transform:scale(.9);}
.d-svcs > .d-svc.is-centre:hover,.d-svcs > .d-svc.is-centre:focus-within{transform:scale(1.1);}
@media (max-width:560px){ .d-svcs,.d-svcs > .d-svc{--svc-w:250px;} }
@media (prefers-reduced-motion: reduce){
  .d-svcs{scroll-behavior:auto;}
  .d-svcs > .d-svc{transition:none;}
}
.d-svc{
  border:1px solid var(--p-rule);border-radius:5px;background:var(--p-surface);
  padding:17px 18px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .25s ease,background-color .25s ease,transform .25s var(--ease);
}
.d-svc:hover,.d-svc:focus-within{border-color:var(--p-rule-strong);background:var(--p-ground);transform:translateY(-2px);}
.d-svc.lead{background:var(--p-accent-soft);border-color:var(--p-accent);}
.d-svc.lead:hover{background:var(--p-accent-soft);border-color:var(--p-accent-ink);}
.d-svc h3{font-size:.98rem;font-weight:600;line-height:1.32;letter-spacing:-.008em;}
body[dir="rtl"] .d-svc h3{letter-spacing:0;}
.d-svc p{font-size:.86rem;color:var(--p-ink-2);}
.d-svc .flag{
  align-self:flex-start;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-accent-ink);background:var(--p-ground);
  border:1px solid var(--p-accent);border-radius:3px;padding:2px 6px;
}
body[dir="rtl"] .d-svc .flag{font-family:var(--f-ar);letter-spacing:0;font-size:10.5px;}
.d-svc .chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.d-svc .fam{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-ink-3);border:1px solid var(--p-rule-2);border-radius:3px;padding:2px 6px;white-space:nowrap;
  transition:border-color .2s ease,color .2s ease;
}
body[dir="rtl"] .d-svc .fam{font-family:var(--f-ar);letter-spacing:0;font-size:10px;}
.d-svc:hover .fam{border-color:var(--p-rule-strong);color:var(--p-ink-2);}
.d-startcard{
  border:1px solid var(--p-accent);border-radius:5px;background:var(--p-accent-soft);
  padding:20px 22px;display:grid;gap:9px;justify-items:start;
  position:relative;overflow:hidden;
}
.d-startcard::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;width:3px;
  background:var(--p-cta);opacity:0;transition:opacity .3s ease;
}
.d-startcard:hover::after{opacity:1;}
.d-startcard h3{font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;}
body[dir="rtl"] .d-startcard h3{letter-spacing:0;}
.d-startcard p{font-size:.94rem;color:var(--p-ink-2);max-width:64ch;}
.d-startcard .flag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-accent-ink);background:var(--p-ground);border:1px solid var(--p-accent);
  border-radius:3px;padding:2px 7px;
}
body[dir="rtl"] .d-startcard .flag{font-family:var(--f-ar);letter-spacing:0;font-size:10.5px;}
.d-famlegend{
  display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--p-rule);
}
.d-famlegend .fl{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-ink-2);background:var(--p-surface);border:1px solid var(--p-rule-2);
  border-radius:3px;padding:4px 9px;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
body[dir="rtl"] .d-famlegend .fl{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px;}
.d-famlegend .fl:hover{border-color:var(--p-accent);color:var(--p-accent-ink);background:var(--p-accent-soft);}

/* ===========================================================
   SEGMENTED CONTROL (tabs)
   =========================================================== */
.d-seg{display:flex;gap:2px;background:var(--p-surface-2);border-radius:5px;padding:2px;}
.d-seg button{
  flex:1 1 0;min-width:0;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;
  padding:9px 6px;border:1px solid transparent;border-radius:3px;
  background:transparent;color:var(--p-ink-2);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
body[dir="rtl"] .d-seg button{font-family:var(--f-ar);}
.d-seg button:hover{color:var(--p-ink);background:rgba(255,255,255,.6);}
.d-seg button:active{background:rgba(255,255,255,.9);}
.d-seg button[aria-pressed="true"]{
  background:var(--p-ground);color:var(--p-ink);border-color:var(--p-rule-strong);
}
.d-seg button:focus-visible{outline:2px solid var(--p-focus);outline-offset:2px;}

/* ===========================================================
   BENCHMARK CHART
   =========================================================== */
.d-chartwrap{border:1px solid var(--p-rule);border-radius:5px;background:var(--p-surface);padding:20px;}
.d-chart{display:grid;gap:16px;}
.d-metric{display:grid;gap:7px;}
.d-metric .mh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;}
.d-metric .mh .nm{color:var(--p-ink);font-weight:500;}
.d-metric .mh .vals{
  font-family:var(--f-mono);font-size:11.5px;color:var(--p-ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.d-metric .mh .vals b{color:var(--p-accent-ink);font-weight:600;font-size:12.5px;}
.d-bars{display:grid;gap:4px;}
/* The empty track is the axis of this chart — it has to be legible
   against the panel, not a whisper. --p-surface-2 measured 1.10:1 on
   --p-surface; #D2DAD6 measures 1.35:1 on --p-ground with a 1px
   --p-rule-strong inset keeping the bar's extent unambiguous. */
.d-bar{
  height:10px;border-radius:2px;background:#D2DAD6;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(111,125,118,.42);
}
.d-bar i{display:block;height:100%;width:0;border-radius:2px;transition:width .85s var(--ease);}
.d-bar.before i{background:var(--p-rule-strong);}
.d-bar.after i{background:var(--p-accent);}
.d-chart.is-in .d-bar i{width:var(--w);}
.d-chart.is-in .d-metric:nth-child(2) .d-bar i{transition-delay:.08s;}
.d-chart.is-in .d-metric:nth-child(3) .d-bar i{transition-delay:.16s;}
.d-chart.is-in .d-metric:nth-child(4) .d-bar i{transition-delay:.24s;}
.d-src{
  margin-top:16px;padding-top:13px;border-top:1px solid var(--p-rule);
  font-size:11.5px;color:var(--p-ink-3);display:flex;gap:8px;align-items:flex-start;
}
.d-src .mk{
  font-family:var(--f-mono);font-size:9.5px;border:1px solid var(--p-rule-strong);
  border-radius:3px;padding:1px 5px;flex:0 0 auto;color:var(--p-ink-3);
}
.d-legend{display:flex;gap:16px;font-size:11.5px;color:var(--p-ink-3);margin-bottom:16px;}
.d-legend span{display:flex;align-items:center;gap:6px;}
.d-legend i{width:14px;height:8px;border-radius:2px;display:block;}

/* ===========================================================
   CALCULATOR
   Inside a zig column the calculator always stacks, which puts
   the primary result underneath the inputs rather than beside
   them and gives it the full column width.
   =========================================================== */
.d-calc{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--p-rule);border-radius:5px;overflow:hidden;
}
.d-calc-in{background:var(--p-surface);padding:20px;display:grid;gap:15px;align-content:start;}
.d-field{display:grid;gap:6px;}
.d-field label,.d-field .lab{font-size:12.5px;font-weight:600;color:var(--p-ink);text-transform:none;letter-spacing:0;font-family:inherit;}
body[dir="rtl"] .d-field .lab{font-size:12.5px;}
.d-field input{
  font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums;
  padding:10px 11px;border:1px solid var(--p-rule-strong);border-radius:4px;
  background:var(--p-ground);color:var(--p-ink);width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.d-field input:hover{border-color:var(--p-ink-3);}
.d-field input:focus-visible{
  outline:2px solid var(--p-focus);outline-offset:1px;
  border-color:var(--p-accent);box-shadow:0 0 0 3px var(--p-accent-soft);
}
.d-assump{font-size:11.5px;color:var(--p-ink-3);line-height:1.5;}

.d-calc-out{
  background:var(--p-accent-soft);padding:22px 20px;display:grid;gap:2px;align-content:start;
  border-top:1px solid var(--p-rule-strong);
}
.d-out-lab{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-accent-ink);
}
body[dir="rtl"] .d-out-lab{font-family:var(--f-ar);letter-spacing:0;font-size:11.5px;}
.d-out-n{
  font-family:var(--f-mono);font-size:clamp(2.3rem,5.5vw,3.4rem);font-weight:500;
  letter-spacing:-.03em;color:var(--p-accent-ink);font-variant-numeric:tabular-nums;
  line-height:1.02;margin-top:6px;
}
.d-out-sub{font-size:13.5px;color:var(--p-ink-2);margin-top:8px;font-weight:500;}
.d-outlist{display:grid;gap:0;margin-top:20px;border-top:1px solid var(--p-rule-strong);}
.d-outlist div{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(13,90,78,.14);font-size:12.5px;
}
.d-outlist div:last-child{border-bottom:0;}
.d-outlist .k{color:var(--p-ink-2);min-width:0;}
.d-outlist .v{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--p-ink);
  white-space:nowrap;font-size:12.5px;font-weight:500;transition:color .2s ease;
}
.d-outlist .v.fits{color:var(--p-accent-ink);font-weight:600;}

/* ===========================================================
   FOUNDER
   =========================================================== */
.d-founder{display:grid;grid-template-columns:140px minmax(0,1fr);gap:26px;align-items:start;}
@media (max-width:620px){
  .d-founder{grid-template-columns:1fr;gap:16px;}
  /* the column becomes full width here, which would render the portrait as a
     page-wide square; it stays a portrait instead */
  .d-photo{width:112px;}
}
.d-photo{
  aspect-ratio:1;border-radius:5px;
  background:linear-gradient(150deg,var(--p-accent-soft) 0%,var(--p-surface) 100%);
  border:1px solid var(--p-rule);display:grid;place-items:center;
  font-family:var(--f-display);font-size:2.1rem;font-weight:var(--f-display-weight);
  letter-spacing:-.03em;color:var(--p-accent-ink);line-height:1;user-select:none;
  /* clips the portrait to the corner radius; the gradient stays as the
     backdrop the image loads over */
  overflow:hidden;
}
.d-about-photo{display:block;width:100%;height:100%;object-fit:cover;}
body[dir="rtl"] .d-photo{font-family:var(--f-display);letter-spacing:-.03em;}
.d-founder .nm{font-size:1.05rem;font-weight:600;margin-bottom:3px;}
.d-founder .role{font-size:12.5px;color:var(--p-ink-3);margin-bottom:12px;}
.d-founder p{font-size:.95rem;color:var(--p-ink-2);max-width:56ch;margin-bottom:12px;}
.d-proj{
  border-inline-start:2px solid var(--p-accent);padding-inline-start:14px;
  font-size:.88rem;color:var(--p-ink-2);
}
.d-proj b{color:var(--p-ink);font-weight:600;}

/* ===========================================================
   CLOSING + FOOTER
   =========================================================== */
.d-close{
  background:var(--p-surface);border-top:1px solid var(--p-rule);
  padding-block:clamp(38px,5vw,58px);text-align:center;
}
.d-close h2{font-size:clamp(1.35rem,2.7vw,1.85rem);letter-spacing:var(--f-h2-track);font-weight:var(--f-display-weight);margin-bottom:10px;}
body[dir="rtl"] .d-close h2{letter-spacing:0;}
.d-close p{color:var(--p-ink-2);font-size:.96rem;margin-bottom:20px;max-width:56ch;margin-inline:auto;}
.d-foot{
  border-top:1px solid var(--p-rule);padding-block:16px;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:12px;color:var(--p-ink-3);
}
.d-foot a{color:inherit;text-decoration:none;transition:color .18s ease;}
.d-foot a:hover{color:var(--p-accent-ink);text-decoration:underline;text-underline-offset:3px;}

/* ===========================================================
   EMBEDDED DESIGN ASSETS
   Each bundle is a complete document, so it is framed rather
   than inlined. A frame only takes a src once it is near the
   viewport, and its animation loop is suspended while it is
   scrolled away.
   Aspect ratios are the artwork's own native canvas, so the box
   is reserved at the correct size before anything loads and the
   player scales to fill it exactly.
   =========================================================== */
/* No card wrapper. The artwork sits on the page canvas; only the box is
   reserved, so there is still nothing for layout to shift into. */
.viz{position:relative;}
.viz-frame{position:relative;width:100%;display:block;aspect-ratio:var(--ar,4/3);}
.viz-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity .6s ease;
}
.viz.is-loaded .viz-frame iframe{opacity:1;}
/* Wordless, like the hero veil. A quiet spinner on the page ground, no
   status text for the visitor to read. */
.viz-load{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  background:var(--p-ground);
  transition:opacity .5s ease;
}
.viz-load span:not(.spin){
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
}
.viz.is-loaded .viz-load{opacity:0;pointer-events:none;}
.viz-load .spin{
  width:18px;height:18px;border:1.5px solid var(--p-rule);
  border-top-color:var(--p-rule-strong);border-radius:50%;
  animation:spin 1100ms linear infinite;opacity:.7;
}
@keyframes spin{ to{transform:rotate(360deg);} }
.viz-cap{
  padding:12px 2px 0;max-width:62ch;
  font-size:11.5px;color:var(--p-ink-3);line-height:1.55;
  display:flex;gap:8px;align-items:flex-start;
}
.viz-cap .mk{
  font-family:var(--f-mono);font-size:9.5px;border:1px solid var(--p-rule-strong);
  border-radius:3px;padding:1px 5px;flex:0 0 auto;color:var(--p-ink-3);
}
.viz.ar-flow,.viz.ar-loop{--ar:16/9;}
.viz.ar-bench,.viz.ar-capacity{--ar:4/3;}

/* ===========================================================
   NUMBERS IN RTL
   Arabic runs right-to-left; a Latin-digit run next to an arrow,
   a percent sign or a currency word gets reordered by the bidi
   algorithm unless it is isolated. <bdi> does that natively —
   these rules only add the typography.
   =========================================================== */
bdi,.num{
  font-variant-numeric:tabular-nums;
  unicode-bidi:isolate;
}
.d-metric .mh .vals bdi{font-family:var(--f-mono);}
.d-outlist .v bdi,.d-out-n bdi{font-family:var(--f-mono);}

/* ===========================================================
   CALCULATOR — reactive feedback on the paired canvas
   =========================================================== */
.viz.is-recalc .viz-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:6px;
  box-shadow:inset 0 0 0 2px var(--p-accent);
  opacity:0;
  animation:recalcPulse .9s var(--ease);
}
@keyframes recalcPulse{
  0%{opacity:0;}
  18%{opacity:.5;}
  100%{opacity:0;}
}
.calc-badge{
  position:absolute;z-index:3;
  inset-inline-start:0;bottom:0;
  display:inline-flex;align-items:baseline;gap:8px;
  padding:7px 12px;border-radius:4px;
  background:var(--p-accent);color:#fff;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  box-shadow:0 6px 18px -10px rgba(13,90,78,.7);
  opacity:0;transform:translateY(-4px);
  transition:opacity .35s ease,transform .35s var(--ease);
  pointer-events:none;white-space:nowrap;
}
body[dir="rtl"] .calc-badge{font-family:var(--f-ar);letter-spacing:0;font-size:12px;}
.viz.is-live .calc-badge{opacity:1;transform:none;}
.calc-badge b{font-weight:600;font-size:13px;}
.calc-badge .lbl{opacity:.82;font-size:10px;}
body[dir="rtl"] .calc-badge .lbl{font-size:11px;}
@media (prefers-reduced-motion: reduce){
  .viz.is-recalc .viz-frame::after{animation:none;}
}

/* ===========================================================
   SCROLL REVEAL
   =========================================================== */
[data-reveal]{
  opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal].is-in{opacity:1;transform:none;}

/* The hero reveals on mount rather than on scroll.

   Pacing: the old 80ms step landed the whole block at once, which reads as a
   page-load flicker rather than a sequence. The step is now 520ms — under the
   ~1.5s it takes to actually read each line, so it never feels like waiting,
   but long enough that the eye arrives on each element separately and the
   promise lands before the qualifier. Order is eyebrow → headline → paragraph
   → buttons → the in/processed/out caption on the canvas, which reads last
   because it labels the machine, not the copy. */
#hero [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
#hero.is-hero-in [data-reveal]{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 520ms);
}
.hero-copy .lab{--i:0;}
.hero-copy h1{--i:1;}
.hero-copy .sub{--i:2;}
.hero-copy .acts{--i:3;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],#hero [data-reveal]{opacity:1;transform:none;}
}