/* ============================================================
   kg.css — KGDESIGN® cinematic experience
   Brand tokens carried over from the studio site:
   void #0A0C0E · ink #F2F4F3 · accent oklch(0.91 0.20 122) ≈ #C8F24F
   Archivo 400/700 (display + body) + Playfair Display italic (accent) · JetBrains Mono (utility)
   ============================================================ */
:root{
  --void:#0A0C0E; --ink:#F2F4F3; --accent:#C8F24F; --steel:#7C8CA0;
  --accent-lift:#D8FF6B; --accent-ink:#0A0C0E;
  --mute:rgba(242,244,243,.52); --line:rgba(242,244,243,.14);
  --card:#141719; --card-hover:#1B1F23; --card-line:rgba(242,244,243,.09);
  --ink-rgb:242,244,243; --void-rgb:10,12,14; --accent-fill:#C8F24F;
  /* one accent per discipline, in services list order */
  --s1:#C8F24F; --s2:#3DDCA6; --s3:#F26B2B; --s4:#A87BF5; --s5:#4CC9F0; --s6:#F2C14E;
  --sans:Archivo,Helvetica,ui-sans-serif,system-ui,sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --e:cubic-bezier(.22,.61,.16,1);
  --bar:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x must be `clip`, not `hidden`: `hidden` makes the body a
   scroll container, which breaks position:sticky and puts the acts
   and page sections in the wrong place. `clip` suppresses sideways
   overflow without creating a scrollport. */
body{background:var(--void);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
::selection{background:var(--accent-fill);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip{position:fixed;left:-999px;top:10px;z-index:60;background:var(--ink);color:var(--void);padding:11px 16px;border-radius:4px;font-family:var(--mono);font-size:11px}
.skip:focus{left:10px}

/* ── stage ─────────────────────────────────────────────── */
#stage{position:fixed;inset:0;z-index:0}
#gl{display:block;width:100%;height:100%}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(125% 92% at 50% 44%,transparent 42%,rgba(10,12,14,.5) 76%,rgba(10,12,14,.92) 100%)}
#grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.045;animation:gr 7s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>")}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
#stage{transition:opacity .25s linear}

/* ── leader lines ──────────────────────────────────────────
   One hairline from the lit spec row to the part it names, drawn
   by ui.js drawCallout(). Above #story (3) so it crosses the copy,
   below the document sections (5) so they cover it. */
#callouts{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#callouts polyline{fill:none;stroke:rgba(242,244,243,.55);stroke-width:1;stroke-linejoin:round}
#callouts circle{fill:var(--accent)}
#callouts .lead{transition:stroke-dashoffset .4s var(--e)}
body.reduced #callouts{display:none}

/* ── header ────────────────────────────────────────────────
   Scoped to the direct child of body — page sections have their
   own <header> elements and must not be pinned to the viewport. */
body>header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:clamp(16px,2.2vw,28px) clamp(16px,3vw,42px);pointer-events:none}
body>header>*{pointer-events:auto}
.brand{display:flex;align-items:baseline;font-weight:700;letter-spacing:.04em;font-size:15px}
.brand sup{font-size:9px;position:relative;top:-6px;color:var(--accent);margin-left:1px}
.hgroup{display:flex;align-items:center;gap:8px}
.pill{border:1px solid var(--line);border-radius:999px;padding:9px 15px;color:var(--mute);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  transition:color .35s var(--e),border-color .35s var(--e),background .35s var(--e)}
.pill:hover,.pill:focus-visible{color:var(--ink);border-color:rgba(242,244,243,.5);background:rgba(242,244,243,.05)}
.pill.accent{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink);font-weight:500}
.pill.accent:hover,.pill.accent:focus-visible{background:var(--accent-lift);border-color:var(--accent-lift);color:var(--accent-ink)}

/* two horizontal lines → X */
#menuBtn{width:46px;height:38px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;
  border:1px solid var(--line);border-radius:999px;padding:0 12px;transition:border-color .35s var(--e),background .35s var(--e)}
#menuBtn span{display:block;height:1.5px;background:var(--ink);transition:transform .45s var(--e),width .45s var(--e),opacity .3s}
#menuBtn span:nth-child(1){width:20px}
#menuBtn span:nth-child(2){width:13px}
#menuBtn:hover{border-color:rgba(242,244,243,.5);background:rgba(242,244,243,.05)}
#menuBtn:hover span:nth-child(2){width:20px}
#menuBtn.open span:nth-child(1){width:20px;transform:translateY(4.25px) rotate(45deg)}
#menuBtn.open span:nth-child(2){width:20px;transform:translateY(-4.25px) rotate(-45deg)}

/* ── menu ──────────────────────────────────────────────── */
#menu{position:fixed;inset:0;z-index:28;background:rgba(7,9,11,.95);backdrop-filter:blur(24px);
  display:grid;grid-template-rows:auto 1fr auto;padding:clamp(16px,3vw,42px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s}
/* visibility is transitioned on close (so the fade-out is visible) but must
   flip instantly on open, or focus() lands on a still-hidden dialog */
#menu.open{opacity:1;visibility:visible;transition:opacity .5s var(--e),visibility 0s}
#menu .top{display:flex;justify-content:space-between;align-items:center;color:var(--mute)}
#menu nav{display:flex;flex-direction:column;justify-content:center;gap:2px;max-width:1200px;width:100%;margin:0 auto}
.mlink{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(12px,2vw,28px);
  padding:clamp(8px,1.4vh,18px) 0;border-bottom:1px solid rgba(242,244,243,.08)}
.mlink .num{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.16em}
.mlink .txt{font-size:clamp(2rem,7vw,5rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  transition:transform .45s var(--e),color .45s var(--e)}
.mlink:hover .txt,.mlink:focus-visible .txt{transform:translateX(14px);color:var(--accent)}
.mlink .meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.mlink .file{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:rgba(242,244,243,.35)}
.mjump{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:color .3s,border-color .3s}
.mjump:hover{color:var(--ink);border-color:rgba(242,244,243,.45)}
#menu .foot{display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--mute);align-items:center}
#menu .foot b{color:var(--ink);font-weight:500}

/* ── bottom progress bar ───────────────────────────────── */
#progress{position:fixed;left:0;right:0;bottom:0;z-index:26;height:var(--bar);
  display:flex;align-items:center;gap:14px;padding:0 clamp(14px,3vw,34px);
  background:linear-gradient(0deg,rgba(10,12,14,.92),rgba(10,12,14,0));
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.pnum{color:var(--accent);font-weight:500}
.plabel{color:var(--ink);min-width:74px}
.pmid{position:relative;flex:1;height:14px;display:flex;align-items:center}
.ptrack{display:flex;width:100%;gap:3px;align-items:center}
.pseg{position:relative;height:14px;display:flex;align-items:center;padding:0;flex-basis:0}
.pseg i{display:block;width:100%;height:1px;background:rgba(242,244,243,.16);transition:height .4s var(--e),background .4s var(--e)}
.pseg.done i{background:rgba(242,244,243,.34)}
.pseg.on i{height:3px;background:var(--accent)}
.pseg:hover i{background:var(--ink)}
.pfill{position:absolute;left:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(200,242,79,0),var(--accent));
  transform:translateY(-50%);pointer-events:none;opacity:.55}
.pstep{color:var(--mute);min-width:190px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── build log ─────────────────────────────────────────── */

/* ── acts and chapters ─────────────────────────────────────
   The film runs inside `.act` blocks, each of which pins a
   viewport-sized stage for the length of its own scroll. Real
   page sections (`.doc`) sit between them in normal flow and
   scroll straight over the canvas.                            */
#story{position:relative;z-index:3}   /* above the vignette + grain at 2 */
.act{position:relative;z-index:1}
.act .pin{position:sticky;top:0;height:100vh;overflow:hidden;pointer-events:none}
.chapter{position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(66px,9vw,120px) clamp(22px,7vw,104px) calc(var(--bar) + 24px);opacity:0;will-change:opacity,transform}
.chapter .inner{max-width:min(660px,86vw);text-align:center;position:relative}
/* The film runs bright behind the copy. A scrim would read as a black
   panel sitting over the frame, so legibility comes from the type's own
   shadow instead — it hugs the letterforms and leaves no visible edge. */
.chapter .inner{
  text-shadow:0 1px 2px rgba(6,8,10,.95),0 2px 14px rgba(6,8,10,.9),0 0 34px rgba(6,8,10,.75)}
body.reduced .chapter .inner{text-shadow:none}
.chapter.left .inner{text-align:left;justify-self:start;max-width:min(560px,84vw)}
.chapter.right .inner{text-align:right;justify-self:end;max-width:min(540px,84vw)}
.chapter.low{align-items:end;padding-bottom:calc(var(--bar) + 40px)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:14px}
.eyebrow b{color:var(--accent);font-weight:400}
h1{font-size:clamp(2.7rem,10vw,7.4rem);font-weight:700;letter-spacing:-.05em;line-height:.9;margin-bottom:18px}
/* the accent word: one serif italic against the grotesk, nothing else */
.ital{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent);letter-spacing:-.015em;padding-right:.06em}
h2{font-size:clamp(1.6rem,4.2vw,3.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin-bottom:13px}
.chapter p{font-size:clamp(.9rem,1.25vw,1.04rem);color:var(--mute);max-width:46ch;margin-inline:auto}
.chapter.left p{margin-inline:0}.chapter.right p{margin-left:auto}
.cue{position:absolute;left:50%;bottom:calc(var(--bar) + 16px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.cue i{width:1px;height:36px;background:linear-gradient(180deg,transparent,var(--accent));animation:drop 2.4s var(--e) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* spec list — chapters 04 Assembly, 05 Structure, 06 Interface, 07 Life */
.spec{display:grid;gap:0;text-align:left;margin-top:10px}
.spec div{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:7px 0;border-top:1px solid rgba(242,244,243,.1);align-items:baseline}
.spec span{font-family:var(--mono);font-size:9.5px;color:var(--accent);letter-spacing:.12em}
.spec b{font-weight:500;font-size:.95rem;letter-spacing:-.01em}
.spec em{font-style:normal;color:var(--mute);font-size:.82rem;display:block;margin-top:1px}

/* ── rows light from the beat table ───────────────────────────
   ui.js applyRows() reads film time against KG.BEATS and sets .on
   on the row whose beat just passed, .done on the rows behind it.
   Scrubbing backwards takes them off again, in order, because the
   classes are a pure function of t. */
.spec div{opacity:.30;transform:translate3d(-8px,0,0);transition:opacity .45s var(--e),transform .45s var(--e),border-top-color .45s var(--e)}
.spec div.done{opacity:.62;transform:none}
.spec div.on{opacity:1;transform:none;border-top-color:rgba(200,242,79,.45)}
.spec div.on span{color:var(--accent)}
.spec div.on b{color:var(--ink)}
.chapter.right .spec div{transform:translate3d(8px,0,0)}
.chapter.right .spec div.on,.chapter.right .spec div.done{transform:none}

body.reduced .spec div,body.reduced .chapter.right .spec div{opacity:1;transform:none}

/* ══ chapter 07 · Life ═════════════════════════════════════════
   The last chapter of the film gathers everything the earlier ones
   added, so its block settles as a unit on top of the shared step
   reveal above. --o is the chapter's fade, so the settle tracks the
   copy coming and going. */
@property --o{syntax:"<number>";initial-value:1;inherits:true}

[data-chapter="life"] .inner{
  max-width:min(520px,88vw);text-align:left;
  transform:translate3d(0,calc((1 - var(--o)) * 12px),0) scale(calc(.985 + var(--o) * .015));
  transform-origin:50% 100%;
}
[data-chapter="life"] .eyebrow{margin-bottom:9px}
[data-chapter="life"] h2{font-size:clamp(1.25rem,2.4vw,1.85rem);margin-bottom:14px}
[data-chapter="life"] .spec{margin-top:0}

body.reduced [data-chapter="life"] .inner{transform:none}

/* ══ document sections ═════════════════════════════════════
   Services, about and contact are real pages, not textures on
   a mockup. They scroll normally and cover the canvas.        */
.doc{position:relative;z-index:5;background:var(--void);
  padding:clamp(80px,11vw,170px) 0 clamp(80px,11vw,150px);
  border-top:1px solid rgba(var(--ink-rgb),.09)}
.doc .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.dochead{max-width:64ch;margin-bottom:clamp(38px,5vw,68px)}
.dochead h2{font-size:clamp(2rem,5.6vw,4.1rem);line-height:1.0;margin:6px 0 20px}
.dochead p{font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--mute);max-width:56ch}
/* sections and their children rise as they enter the viewport */
.rise{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.rise.in{opacity:1;transform:none}

/* ── services · the orbit ──────────────────────────────────
   A disc of copy on the left, six pills on the right, and an arc
   between them carrying one node per discipline. Each pill owns a
   colour (--sv): its number, its heading, its node and the duration
   in the open state. Hovering (or focusing) a pill opens it; the
   arc geometry is measured by pages.js orbit() so the nodes always
   sit level with their pill. The disc and the pills keep their own
   dark palette in the light theme — the arc takes the section's. */
.orbit{position:relative;display:grid;grid-template-columns:minmax(300px,520px) 1fr;
  column-gap:clamp(64px,10vw,160px);align-items:center}
.orbsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.orbsvg .arc,.orbsvg .lead{fill:none;stroke:rgba(var(--ink-rgb),.3);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.orbsvg .end{fill:rgba(var(--ink-rgb),.38)}
.orbsvg .node{fill:var(--sv);stroke:var(--void);stroke-width:2.5}
/* the beam: a short bright dash in the pill's colour that runs along the
   line from the pill to the node, over and over while it is open */
.orbsvg .beam{fill:none;stroke:var(--sv);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.22 1;stroke-dashoffset:.22;
  opacity:0;filter:drop-shadow(0 0 5px var(--sv))}
.orbsvg .on .beam{opacity:1;animation:beam .8s linear infinite}
@keyframes beam{from{stroke-dashoffset:.22}to{stroke-dashoffset:-1}}
body.reduced .orbsvg .beam{display:none}
.orbsvg .halo{fill:var(--sv);opacity:0;transition:opacity .45s var(--e)}
.orbsvg .on .halo{opacity:.3}

/* the disc: a double bevel, lit from the top-left */
.orbdisc{--ink:#F2F4F3;--ink-rgb:242,244,243;--mute:rgba(242,244,243,.62);--accent:#C8F24F;color:var(--ink);
  position:relative;aspect-ratio:1;width:100%;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(30px,4.4vw,54px);
  background:radial-gradient(120% 120% at 30% 22%,#22272C 0%,#15181B 48%,#0C0E11 100%);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05),
    inset 0 2px 0 rgba(255,255,255,.07),inset 0 -20px 44px rgba(0,0,0,.5)}
.orbdisc::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -14px 30px rgba(0,0,0,.4),0 1px 0 rgba(0,0,0,.7)}
.orbdisc>*{position:relative}
.orbdisc .eyebrow{margin-bottom:10px}
.orbdisc h2{font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.05;letter-spacing:-.035em;margin:0 0 14px}
.orbdisc hr{width:54px;height:1px;border:0;background:var(--accent);margin:0 auto 14px}
.orbdisc p{font-size:clamp(.8rem,.98vw,.9rem);color:var(--mute);max-width:30ch;line-height:1.5}
.orbdisc .cta{margin-top:22px}

/* the pills */
#services .wrap{max-width:1360px}
.acc{display:grid;gap:clamp(14px,2vw,22px)}
.accrow{--sv:var(--accent);--ink:#F2F4F3;--ink-rgb:242,244,243;--mute:rgba(242,244,243,.6);color:var(--ink);
  --s1:#C8F24F;--s2:#3DDCA6;--s3:#F26B2B;--s4:#A87BF5;--s5:#4CC9F0;--s6:#F2C14E;
  position:relative;border-radius:44px;
  background:linear-gradient(180deg,#1C2025 0%,#111417 100%);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .5s var(--e),transform .5s var(--e)}
.accrow:nth-child(1){--sv:var(--s1)}
.accrow:nth-child(2){--sv:var(--s2)}
.accrow:nth-child(3){--sv:var(--s3)}
.accrow:nth-child(4){--sv:var(--s4)}
.accrow:nth-child(5){--sv:var(--s5)}
.accrow:nth-child(6){--sv:var(--s6)}
.accrow:hover,.accrow.open{transform:translateX(6px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.1)}
.acchead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,24px);
  width:100%;text-align:left;padding:10px clamp(22px,2.6vw,32px) 10px 10px;border-radius:inherit}
/* the recessed number well */
.accn{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  font-size:1.2rem;font-weight:700;letter-spacing:-.04em;color:var(--sv);
  background:radial-gradient(90% 90% at 35% 25%,#0F1215 0%,#08090B 100%);
  box-shadow:inset 5px 6px 12px rgba(0,0,0,.8),inset -3px -3px 8px rgba(255,255,255,.04),0 1px 0 rgba(255,255,255,.06);
  transition:text-shadow .5s var(--e)}
.accrow:hover .accn,.accrow.open .accn{text-shadow:0 0 18px var(--sv)}
.acctext{min-width:0}
.acctitle{display:block;font-size:clamp(.82rem,1.05vw,.98rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sv);line-height:1.2}
.accblurb{display:block;font-size:.84rem;color:var(--mute);line-height:1.45;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s var(--e)}
/* the summary is the pill's second line — duration, price, the first
   deliverables, the link — hidden under its fixed height until the pill
   grows into the room kept below it */
.accquick{display:flex;align-items:baseline;gap:12px;height:36px;box-sizing:border-box;
  margin:-4px 0 0;padding:0 clamp(22px,2.6vw,32px) 0 calc(70px + clamp(14px,2vw,24px));
  font-size:.82rem;line-height:1.45;color:var(--mute);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--e),transform .4s var(--e)}
/* the middle truncates; the link is a fixed tail and always shows */
.accquick .txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.accquick .go{flex:none}
.accquick b{color:var(--sv);font-weight:600}
.accquick i{font-style:normal;opacity:.45;margin:0 7px}
.accquick .go{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid rgba(var(--ink-rgb),.3);padding-bottom:2px}
.accquick:hover .go{color:var(--sv);border-color:var(--sv)}
/* With a pointer the pills sit on a fixed pitch with room between them:
   the open one grows 80 → 116px into that room, well short of the next
   pill, and nothing else moves. The arc is drawn against the pill heads,
   so the dots stay put too. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  body:not(.reduced) .acc{gap:72px;grid-auto-rows:80px}   /* fixed tracks: a grown pill overflows into the gap */
  body:not(.reduced) .accrow{height:80px;overflow:hidden;transition:height .45s var(--e),box-shadow .5s var(--e),transform .5s var(--e)}
  body:not(.reduced) .accrow.open{height:116px}
  .accrow.open .accquick{opacity:1;transform:none;pointer-events:auto;transition-delay:.08s}
  body:not(.reduced) .accbody{display:none}
}
/* the pills fan out along the arc: 01 and 06 nearest the disc, 03 and 04 furthest out */
@media (min-width:901px){
  .accrow{--step:clamp(32px,6vw,100px)}
  .accrow:nth-child(2),.accrow:nth-child(5){margin-left:calc(var(--step) * .72)}
  .accrow:nth-child(3),.accrow:nth-child(4){margin-left:var(--step)}
}
.accchev{width:11px;height:11px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .45s var(--e),border-color .45s var(--e)}
.accrow:hover .accchev,.accrow.open .accchev{transform:rotate(225deg) translate(-2px,-2px);border-color:var(--sv)}
/* The full details only open in the flow where there is no pointer to
   hover with (phones) or motion is reduced; with a pointer the summary
   line above stands in. grid-template-rows animates the reveal. */
.accbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e)}
.accrow.open .accbody{grid-template-rows:1fr}
.accbody>.accinner{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s var(--e)}
.accrow.open .accbody>.accinner{opacity:1}
.accinner{margin:0 12px 12px calc(70px + clamp(14px,2vw,24px));padding:0 4px}
/* every deliverable as a chip, wrapping; then the duration and the price; then the link */
.accitems{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.accitems li{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.62);border:1px solid rgba(var(--ink-rgb),.16);border-radius:999px;padding:5px 11px}
.accmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:10px 0 6px}
.accmeta span:nth-of-type(n+2){margin-left:10px}
.accmeta span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.accmeta b{font-weight:600;color:var(--sv);font-size:.92rem;white-space:nowrap}

/* ── about ─────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);
  margin:0 0 clamp(48px,6vw,80px);border-top:1px solid rgba(var(--ink-rgb),.14);padding-top:26px}
.stats div{text-align:left}
.stats b{display:block;font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:700;color:var(--accent);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);display:block;margin-top:8px}
.phases{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,34px);padding-top:34px}
.phaseline{position:absolute;top:0;left:0;right:0;height:1px;background:rgba(var(--ink-rgb),.14)}
.phaseline i{display:block;height:100%;width:0;background:var(--accent-fill);transition:width 1.4s var(--e)}
.phase{position:relative;text-align:left}
.phase::before{content:"";position:absolute;top:-38px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--void);border:1px solid var(--accent)}
.phase span{font-family:var(--mono);font-size:9.5px;color:var(--accent);letter-spacing:.16em}
.phase b{display:block;font-weight:500;font-size:1.06rem;margin:6px 0 6px;letter-spacing:-.02em}
.phase p{font-size:.86rem;color:var(--mute);line-height:1.55}

/* ── contact ───────────────────────────────────────────── */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
#enquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full,.formfoot{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid rgba(var(--ink-rgb),.22);padding:10px 2px;font:inherit;font-size:.98rem;
  border-radius:0;transition:border-color .4s var(--e)}
.field textarea{resize:vertical;min-height:96px}
.field select{cursor:pointer}
.field select option{background:var(--card);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--accent)}
.field.err input,.field.err select,.field.err textarea{border-bottom-color:#FF6B5A}
.formfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.formfoot .cta{margin-top:0}
.formnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.formnote.ok{color:var(--accent)}
.lines{display:flex;flex-direction:column;gap:6px;margin:16px 0 4px;text-align:left}
.lines a{font-size:1.1rem;font-weight:500;pointer-events:auto;border-bottom:1px solid rgba(200,242,79,.5);align-self:flex-start}
.lines a:hover{color:var(--accent)}
.lines .k{font-family:var(--mono);font-size:9px;color:var(--mute);letter-spacing:.16em;margin-right:8px}
.socials{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.socials a{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;pointer-events:auto}
.socials a:hover{color:var(--ink);border-color:rgba(var(--ink-rgb),.4)}
.cta{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--accent-fill);background:var(--accent-fill);border-radius:999px;
  padding:15px 26px;color:var(--accent-ink);font-weight:500;margin-top:18px;transition:background .45s var(--e),transform .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e)}
.cta:hover,.cta:focus-visible{background:var(--accent-lift);border-color:var(--accent-lift);transform:translateY(-2px);box-shadow:0 12px 34px -14px rgba(200,242,79,.6)}
.note{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--ink-rgb),.38);margin-top:16px}

/* work readout */
#workmeta{text-align:left}
#projIdx{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent)}
#projName{font-size:clamp(1.4rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.03em;margin:6px 0 2px}
#projKind{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
#projLink{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:3px;pointer-events:auto}

/* ── loader ─────────────────────────────────────────────────
   A silver ring with a white-hot comet running round it, shedding
   sparks behind, and the percentage in the centre in the accent.
   ui.js boot() draws the ring on the canvas and runs the count. */
#loader{position:fixed;inset:0;z-index:50;background:var(--void);display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(20px,4vw,48px);transition:opacity .9s var(--e)}
#loader .r{display:flex;justify-content:space-between;color:var(--mute)}
#loader .ring{position:relative;width:min(64vw,320px);aspect-ratio:1;align-self:center;display:grid;place-items:center;
  transition:transform .9s var(--e),opacity .9s var(--e)}
#loader .orb{position:absolute;inset:0;width:100%;height:100%}
#loader .pct{position:relative;display:flex;align-items:baseline;gap:2px;color:var(--accent);
  font-weight:700;font-size:clamp(40px,9vw,62px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(200,242,79,.35)}
#loader .pct i{font-style:normal;font-family:var(--mono);font-size:clamp(11px,2vw,14px);letter-spacing:.06em;opacity:.8}
#loader.done{opacity:0;pointer-events:none}
#loader.done .ring{transform:scale(1.08);opacity:0}

/* ── reduced motion / reading mode ───────────────────────
   The acts collapse from pinned film stages into plain stacked
   text; the document sections already read correctly.         */
body.reduced .cue,body.reduced #grain,body.reduced #progress{display:none}
body.reduced #stage{display:none}
body.reduced #story{max-width:1080px;margin:0 auto;padding-top:88px}
body.reduced .act{height:auto!important}
body.reduced .act .pin{position:static;height:auto;overflow:visible;pointer-events:auto}
body.reduced .chapter{position:relative;inset:auto;opacity:1!important;transform:none!important;place-items:start;
  padding:clamp(38px,7vw,84px) clamp(20px,6vw,56px)}
body.reduced .chapter .inner,body.reduced .chapter.left .inner,body.reduced .chapter.right .inner{
  text-align:left;justify-self:start;max-width:70ch}
body.reduced .chapter p{margin-inline:0}
body.reduced .doc{border-top:0}
body.reduced .rise{opacity:1;transform:none}
body.reduced .accbody{grid-template-rows:1fr}
body.reduced .accquick{display:none}
body.reduced .accbody>.accinner{opacity:1}
body.reduced .accrow:hover{transform:none}

@media (prefers-reduced-motion: reduce){
  .rise{transition:none}
  .accbody{transition:none}
}

@media (max-width:900px){
  .process{grid-template-columns:repeat(2,1fr)}
  .pstep{display:none}
  .plabel{min-width:0}
  .chapter.left .inner,.chapter.right .inner{justify-self:center;text-align:center;max-width:88vw}
  .chapter.left p,.chapter.right p{margin-inline:auto}
  #workmeta,.spec,.lines,.stats div{text-align:left}
  .mlink{grid-template-columns:auto 1fr}
  .mlink .meta{display:none}
  .kg-sm{display:none}
  /* services: the disc becomes a rounded card on top, the arc goes, the pills stack */
  .orbit{grid-template-columns:1fr;row-gap:28px}
  .orbsvg{display:none}
  .orbdisc{aspect-ratio:auto;border-radius:40px;padding:32px 26px}
  .orbdisc::before{inset:10px;border-radius:32px}
  .accrow{border-radius:36px}
  .accrow:hover,.accrow.open{transform:none}
  .acchead{padding:8px 18px 8px 8px;gap:12px}
  .accn{width:56px;height:56px;font-size:1.1rem}
  .accblurb{font-size:.8rem}
  .accquick{display:none}
  .accinner{margin:0 12px 12px 18px}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .phases{grid-template-columns:1fr;gap:26px;padding-top:26px}
  .phase::before{display:none}
  .phaseline{display:none}
  .contactgrid{grid-template-columns:1fr}
  #enquiry{grid-template-columns:1fr}
}


/* ══ light theme ═══════════════════════════════════════════
   Scoped to the document sections, the real pages and the footer.
   The film is a lit 3D scene and stays dark; on index.html the
   header flips only while a document section is under it
   (body.over-doc, tracked by shell.js). The menu and the loader are
   dark overlays in both themes. The accent used for *text* darkens
   so it clears contrast on the light ground; fills keep the bright
   lime through --accent-fill.                                    */
html.light .doc,html.light body.page,html.light .sitefoot,html.light body.over-doc>header,html.light body.over-doc #progress{
  --void:#F2F4F3;--ink:#0A0C0E;--ink-rgb:10,12,14;--void-rgb:242,244,243;
  --mute:rgba(10,12,14,.6);--line:rgba(10,12,14,.18);
  --card:#FFFFFF;--card-hover:#F7F8F7;--card-line:rgba(10,12,14,.1);
  --accent:#5C8A00;--steel:#4C5A6A;
  --s1:#5C8A00;--s2:#0E8A63;--s3:#C24A12;--s4:#6A3FD0;--s5:#0A7FA6;--s6:#A07400;
  color:var(--ink)}
html.light body.page{background:var(--void)}
html.light #menu,html.light #loader{--void:#0A0C0E;--ink:#F2F4F3;--ink-rgb:242,244,243;--void-rgb:10,12,14;
  --mute:rgba(242,244,243,.52);--line:rgba(242,244,243,.14);--accent:#C8F24F;color:var(--ink)}
html.light body.over-doc #progress{background:linear-gradient(0deg,rgba(242,244,243,.94),rgba(242,244,243,0))}
html.light body.over-doc .pseg i{background:rgba(10,12,14,.18)}
html.light body.over-doc .pseg.done i{background:rgba(10,12,14,.38)}
html.light body.over-doc .pseg.on i{background:var(--accent-fill)}
html.light body.over-doc #menuBtn span{background:var(--ink)}
html.light .doc{border-top-color:rgba(10,12,14,.1)}
/* the section's own text in the light theme; the disc and pills re-pin dark above */
html.light .orbsvg .node{stroke:#F2F4F3}

/* ── theme toggle ───────────────────────────────────────────
   A pill with a glass lens for a knob. The knob is taller than the
   pill and overhangs it; it carries the moon in the dark theme and
   the sun in the light one, and the label sits on the other side. */
.theme{position:relative;width:84px;height:30px;border-radius:999px;border:1px solid var(--line);
  background:rgba(var(--ink-rgb),.05);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);display:block;padding:0;
  transition:background .5s var(--e),border-color .5s var(--e)}
.theme:hover{border-color:rgba(var(--ink-rgb),.4)}
.theme:focus-visible{outline-offset:6px}
.theme .tl{position:absolute;inset:0;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);line-height:28px}
.theme .tl span{position:absolute;top:0;transition:opacity .35s var(--e),transform .5s var(--e)}
.theme .tl .d{left:12px}
.theme .tl .l{right:12px;opacity:0;transform:translateX(6px)}
.theme[aria-checked="true"] .tl .d{opacity:0;transform:translateX(-6px)}
.theme[aria-checked="true"] .tl .l{opacity:1;transform:none}
.theme .knob{position:absolute;left:-4px;top:-5px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.36),rgba(255,255,255,.08) 55%,rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -6px 10px rgba(0,0,0,.16),0 8px 20px -6px rgba(0,0,0,.55);
  transform:translateX(54px);transition:transform .55s cubic-bezier(.34,1.3,.4,1),border-color .5s var(--e),background .5s var(--e)}
.theme[aria-checked="true"] .knob{transform:translateX(0)}
.theme .knob svg{position:absolute;width:15px;height:15px;transition:opacity .3s var(--e),transform .55s var(--e)}
.theme .knob .moon{fill:var(--ink)}
.theme .knob .sun{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:0;transform:rotate(-90deg) scale(.5)}
.theme[aria-checked="true"] .knob .sun{opacity:1;transform:none}
.theme[aria-checked="true"] .knob .moon{opacity:0;transform:rotate(90deg) scale(.5)}
/* on a light header the lens needs an edge to read against the ground */
html.light body.page .theme .knob,html.light body.over-doc>header .theme .knob{
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.55) 55%,rgba(255,255,255,.8));
  border-color:rgba(10,12,14,.18);box-shadow:inset 0 1px 0 #fff,inset 0 -6px 10px rgba(0,0,0,.06),0 8px 20px -8px rgba(0,0,0,.35)}