/* ==========================================================================
   TIDAL  |  stephenarthur.org
   Tokens mirror the active DESIGN.md. Radius rule: pill / 20px / 10px only.
   The brand signal is the sea gradient, never a flat accent field.
   ========================================================================== */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/wp-content/uploads/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/wp-content/uploads/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/wp-content/uploads/fonts/instrument-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/wp-content/uploads/fonts/instrument-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --bg:#061A21; --surface:#0C242D; --raised:#123441;
  --ink:#EAF4F4; --ink-soft:#B9CFD4; --muted:#7E9AA1;
  --line:#17323C; --line-soft:#102831;
  --sea-blue:#2BA6D8; --sea-green:#22C9A0; --accent:#2BA6D8; --accent-deep:#17708F;
  --on-accent:#04131A; --error:#FF8A7A;
  --grad:linear-gradient(135deg,#2BA6D8 0%,#22C9A0 100%);
  --grad-bright:linear-gradient(135deg,#4FBEE8 0%,#3ADDB6 100%);

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;

  --t-display:clamp(2.5rem,5.6vw,4.5rem);
  --t-h2:clamp(2rem,4.2vw,3.5rem);
  --t-h3:clamp(1.3125rem,1.9vw,1.75rem);
  --t-lead:clamp(1.0625rem,1.4vw,1.3125rem);
  --t-body:1.0625rem; --t-small:0.9375rem; --t-label:0.6875rem;

  --r-pill:999px; --r-panel:20px; --r-input:10px;
  --gap:clamp(24px,3.6vw,72px); --pad:clamp(20px,4.5vw,56px);
  --section:clamp(96px,12vw,176px); --shell:1280px; --header-h:78px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* overflow-x uses clip, not hidden: hidden turns the body into a scroll
   container and that breaks the sticky pin on the Blender reel. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);background:var(--bg);overflow-x:clip;}
body.sa-page{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;}
body.sa-page.is-locked{overflow:hidden;}
.sa-page h1,.sa-page h2,.sa-page h3,.sa-page h4{font-family:var(--font-display);font-weight:600;margin:0;
  letter-spacing:-0.035em;line-height:0.98;font-optical-sizing:auto;}
.sa-page p,.sa-page figure,.sa-page dl,.sa-page dd,.sa-page blockquote{margin:0;}
.sa-page ul,.sa-page ol{margin:0;padding:0;list-style:none;}
.sa-page img,.sa-page svg{display:block;max-width:100%;}
.sa-page :where(a){color:inherit;text-decoration:none;}
.sa-page :where(button,input,select,textarea){font:inherit;color:inherit;}
.sa-page :focus-visible{outline:2px solid var(--sea-green);outline-offset:3px;border-radius:4px;}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad);}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:var(--pad);top:-72px;z-index:600;background:var(--grad);color:var(--on-accent);
  padding:14px 24px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:600;transition:top .2s var(--ease);}
.skip:focus{top:14px;}

/* --- Atmosphere ---------------------------------------------------------- */
body.sa-page::after{content:'';position:fixed;inset:0;z-index:500;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
.bloom{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(43,166,216,.20) 0%,rgba(34,201,160,.09) 45%,transparent 72%);}
.dots{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:radial-gradient(rgba(234,244,244,.10) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);}

/* --- Type helpers -------------------------------------------------------- */
.label{font-family:var(--font-display);font-size:var(--t-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);line-height:1.2;}
.lead{font-size:var(--t-lead);line-height:1.58;color:var(--ink-soft);max-width:56ch;}
.prose{color:var(--ink-soft);max-width:64ch;}
.prose p + p{margin-top:1.2em;}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
.w__in{display:inline-block;}

/* --- Entrance animations -------------------------------------------------
   The resting state below is the finished, visible state. The hidden start
   state only exists under html.js-rv, which the head script adds and removes
   again if the reveal engine never boots. Nothing can be stranded invisible.
   Direction comes from the attribute value: up (default), down, left, right.
   ------------------------------------------------------------------------- */
[data-reveal]{--rv-y:26px;--rv-x:0px;}
[data-reveal='down']{--rv-y:-26px;--rv-x:0px;}
[data-reveal='left']{--rv-y:0px;--rv-x:-38px;}
[data-reveal='right']{--rv-y:0px;--rv-x:38px;}
.js-rv [data-reveal]{opacity:0;transform:translate3d(var(--rv-x),var(--rv-y),0);
  transition:opacity .75s var(--ease) var(--rv-d,0s),transform .9s var(--ease) var(--rv-d,0s);}
.js-rv [data-reveal].is-in{opacity:1;transform:translate3d(0,0,0);}
/* Masked word reveal for the display headline. */
.js-rv [data-rv-words] .w__in{transform:translateY(106%);
  transition:transform 1.05s var(--ease) var(--rv-d,0s);}
.js-rv [data-rv-words].is-in .w__in{transform:translateY(0);}

/* --- Gradient hairline --------------------------------------------------- */
.gedge{position:relative;}
.gedge::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:3;}
.gedge:hover::before,.gedge:focus-within::before{opacity:1;}

/* --- Buttons ------------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 30px;border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;
  overflow:hidden;isolation:isolate;font-family:var(--font-display);font-weight:600;font-size:.9375rem;
  letter-spacing:-0.01em;white-space:nowrap;transition:color .3s var(--ease),border-color .3s var(--ease);}
.btn > *{position:relative;z-index:2;}
.btn::after{content:'';position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform .5s var(--ease);border-radius:inherit;}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0);}
.btn__arw{display:inline-block;transition:transform .4s var(--ease);}
.btn:hover .btn__arw{transform:translateX(5px);}
.btn--primary{background:var(--grad);color:var(--on-accent);}
.btn--primary::after{background:var(--grad-bright);}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--outline::after{background:var(--ink);}
.btn--outline:hover,.btn--outline:focus-visible{color:var(--bg);border-color:var(--ink);}
.btn--sm{min-height:46px;padding:0 22px;font-size:.875rem;}
.btn[disabled]{opacity:.5;cursor:progress;}

.tlink{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:600;
  font-family:var(--font-display);font-size:.9375rem;color:var(--sea-green);}
.tlink::before{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);}
.tlink:hover::before{transform:scaleX(1);transform-origin:left;}
.tlink:hover .btn__arw{transform:translateX(4px);}

.tag{display:inline-flex;align-items:center;padding:7px 15px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:.8125rem;color:var(--muted);background:var(--surface);}
.pill{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:.8125rem;color:var(--ink-soft);background:var(--surface);}

/* --- Header -------------------------------------------------------------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);}
.hdr[data-stuck='true']{background:rgba(6,26,33,.94);border-bottom-color:var(--line);}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);height:var(--header-h);}
.mark{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;
  font-size:1.0625rem;letter-spacing:-0.03em;}
.mark img{width:32px;height:32px;border-radius:8px;}
.nav{display:flex;align-items:center;gap:34px;}
.nav a{position:relative;font-size:.9375rem;color:var(--ink-soft);transition:color .3s var(--ease);}
.nav a::before{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--grad);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);}
.nav a:hover{color:var(--ink);}
.nav a:hover::before{transform:scaleX(1);transform-origin:left;}
.hdr__end{display:flex;align-items:center;gap:12px;}
.iconlink{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-soft);
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.iconlink:hover{color:var(--sea-green);border-color:var(--sea-green);}
.iconlink svg{width:18px;height:18px;fill:currentColor;}
.burger{display:none;width:46px;height:46px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-pill);align-items:center;justify-content:center;cursor:pointer;}
.burger span{display:block;width:17px;height:1px;background:var(--ink);position:relative;transition:background-color .2s;}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:1px;
  background:var(--ink);transition:transform .35s var(--ease);}
.burger span::before{top:-5px;} .burger span::after{top:5px;}
.burger[aria-expanded='true'] span{background:transparent;}
.burger[aria-expanded='true'] span::before{transform:translateY(5px) rotate(45deg);}
.burger[aria-expanded='true'] span::after{transform:translateY(-5px) rotate(-45deg);}
.mnav{display:none;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mnav[data-open='true']{display:block;}
.mnav a:not(.btn){display:block;padding:20px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:-0.03em;}
.mnav .btn{width:100%;margin:26px 0 34px;}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;padding-block:calc(var(--header-h) + clamp(30px,4.6vw,64px)) clamp(48px,5.4vw,78px);overflow:hidden;}
.hero .bloom{width:min(820px,94vw);height:min(820px,94vw);top:-28%;right:-16%;}
.hero__grid{position:relative;z-index:2;align-items:center;}
.hero__body{grid-column:span 7;}
.hero h1{font-size:var(--t-display);letter-spacing:-0.042em;line-height:0.98;max-width:20ch;}
.hero .lead{margin-top:clamp(20px,2.4vw,30px);max-width:52ch;}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(28px,3.2vw,42px);}
.hero__fig{grid-column:9 / span 4;}

/* --- Portrait -----------------------------------------------------------
   No halo. The cut-out stands free on a diffuse sea bloom with tide lines
   running out past the figure on both sides. Ground shows through around it.
   ---------------------------------------------------------------------- */
.figure{position:relative;}
/* Positioned with insets, not a centring transform: the parallax layer writes
   to transform and would overwrite a translate(-50%,-50%) set here. */
.figure__glow{position:absolute;left:-9%;top:-12%;width:126%;height:104%;
  z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 46% 44%,rgba(43,166,216,.30) 0%,rgba(34,201,160,.14) 44%,rgba(6,26,33,0) 72%);
  filter:blur(10px);}
/* Ripples run wider than the figure so their ends read on both sides rather
   than disappearing behind the arms. Scoped to .sa-page so it outranks
   `.sa-page svg{max-width:100%}`, which otherwise clamps away the overhang. */
.sa-page .figure__tide{position:absolute;left:-20%;bottom:1%;width:140%;max-width:none;
  z-index:1;pointer-events:none;}
.figure__cut{position:relative;z-index:2;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,rgba(0,0,0,.4) 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 84%,rgba(0,0,0,.4) 95%,transparent 100%);}
/* Clear of the figure, in the gutter beside it, not sitting on an arm. */
.figure__tag{position:absolute;z-index:4;left:-15%;bottom:7%;}

/* --- Marquee ------------------------------------------------------------- */
.mq{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:24px;}
.mq__track{display:flex;width:max-content;animation:mq 44s linear infinite;}
.mq__group{display:flex;align-items:center;gap:44px;padding-right:44px;}
.mq__item{font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,1.5vw,1.25rem);
  letter-spacing:-0.02em;color:var(--ink-soft);white-space:nowrap;}
.mq__sep{flex:none;font-size:.7rem;color:var(--sea-green);}
@keyframes mq{to{transform:translateX(-50%);}}

/* --- Scroll scenery ------------------------------------------------------
   Line art that fills the empty bands between sections. The resting state is
   fully drawn, so with JavaScript off or reduced motion on these are static
   decoration rather than blank space. The motion layer sets the dash offset
   and then scrubs it back to zero as the band crosses the viewport.
   ---------------------------------------------------------------------- */
/* Stacking, carefully.
   z-index:-1 here is a trap: no ancestor up to <html> creates a stacking
   context, so the scenes land in the root context and paint at step 2, while
   body's opaque background paints at step 3 and buries them completely.
   Threads sit in empty bands, so plain z-index:0 is safe for them. The gutter
   pieces sit beside heading text, so .sec__head is given its own stacking
   context below and they go negative inside that, which puts them behind the
   heading but still above the page background. */
.scene{position:absolute;pointer-events:none;}
.scene--thread{z-index:0;}
.scene--gutter{z-index:-1;}
.scene svg{width:100%;height:auto;display:block;overflow:visible;}
.scene__line{fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* The guide the gradient line draws along. --line at .6 was about 1.15:1 on the
   ground, so the thread read as missing until it had drawn. */
.scene__ghost{fill:none;stroke-linecap:round;stroke:#1f4757;opacity:.85;}
.scene__dot{fill:var(--sea-green);}
.scene__halo{fill:var(--sea-green);opacity:.16;}
/* Hidden until the motion layer has measured the path, otherwise the node
   sits at 0,0 in the corner for a frame. */
.scene__node{opacity:0;}
html:not(.js-rv) .scene__node,.scene__node.is-live{opacity:1;}

/* The empty band between two sections is exactly 2x --section tall, so the
   thread is sized from --section rather than a fixed pixel height. At 1.6 the
   360 tall viewBox renders at 1.8x --section, which leaves an even 0.1x margin
   top and bottom at every viewport. Fixed pixels overlapped the headings as
   soon as --section clamped down. */
.scene--thread{left:50%;width:calc(var(--section) * 1.6);}
/* Side is set explicitly per placement, never with nth-of-type: the scenes
   share their parent with ordinary divs, so type counting picks the wrong ones. */
.scene--left{margin-left:calc(var(--section) * -1.9);}
.scene--mid{margin-left:calc(var(--section) * -0.8);}
.scene--right{margin-left:calc(var(--section) * 0.15);}

.scene--gap-top{top:calc(var(--section) * -0.9);}
.scene--gap-bottom{bottom:calc(var(--section) * -0.9);}
/* The one tight band, inside the section's own top padding. */
.scene--gap-inset{top:6px;}

.scene--form{top:50%;left:100%;margin-left:44px;transform:translateY(-50%);
  width:min(300px,24vw);opacity:.9;}

@media (max-width:1280px){.scene--form{display:none;}}
@media (max-width:900px){
  /* Narrow enough that anything off centre would sit under the copy. */
  .scene--thread{width:calc(var(--section) * 1.15);}
  .scene--left,.scene--mid,.scene--right{margin-left:calc(var(--section) * -0.575);}
  .scene--gap-top{top:calc(var(--section) * -0.65);}
  .scene--gap-bottom{bottom:calc(var(--section) * -0.65);}
}

/* --- Sections ------------------------------------------------------------ */
.sec{position:relative;padding-block:var(--section);}
/* z-index makes this a stacking context, which is what lets .scene--gutter
   sit behind the heading text without falling behind the page background. */
.sec__head{position:relative;z-index:1;margin-bottom:clamp(48px,5.6vw,84px);max-width:64ch;}
.sec__head h2{font-size:var(--t-h2);}
.sec__head .label + h2{margin-top:18px;}
.sec__head .lead{margin-top:22px;}

/* --- Browser frame -------------------------------------------------------
   Client screenshots sit in a window mockup rather than bare on the ground,
   so the work reads as a shipped product and the domain is legible.
   ---------------------------------------------------------------------- */
.frame{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--line);background:var(--raised);}
.frame__bar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--raised);
  border-bottom:1px solid var(--line);}
.frame__dots{display:flex;gap:6px;flex:none;}
/* Mixed down from --muted rather than --line, which is all but invisible on the
   raised chrome bar, and kept on palette rather than a hand picked grey. */
.frame__dots i{display:block;width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--muted) 42%,transparent);}
.frame__dots i + i{background:color-mix(in srgb,var(--muted) 26%,transparent);}
.frame__url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:5px 13px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:.75rem;letter-spacing:.01em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frame__url svg{flex:none;width:11px;height:11px;stroke:var(--sea-green);fill:none;stroke-width:1.9;}
.frame__shot{position:relative;overflow:hidden;background:var(--surface);}
.frame__shot img{width:100%;height:auto;display:block;}

/* --- Project splits ------------------------------------------------------ */
.proj{margin-top:clamp(64px,7vw,112px);}
.proj:first-of-type{margin-top:0;}
.proj__grid{align-items:center;}
.proj__media{grid-column:span 7;}
.proj__body{grid-column:9 / span 4;}
.proj--flip .proj__media{grid-column:6 / span 7;order:2;}
.proj--flip .proj__body{grid-column:1 / span 4;order:1;}
.proj__no{font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:.1em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.proj__body h3{font-size:var(--t-h3);margin-top:12px;}
.proj__body .label{margin-top:10px;display:block;}
.proj__body p{margin-top:16px;color:var(--ink-soft);font-size:var(--t-small);}
.proj__tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.proj__body .tlink{margin-top:24px;}

/* --- Full bleed feature (Engineering Council) ---------------------------- */
.feat{position:relative;margin-top:clamp(72px,8vw,128px);}
.feat__media{position:relative;}
.feat__media .frame__shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,33,0) 34%,rgba(6,26,33,.72) 74%,rgba(6,26,33,.95) 100%);}
.feat__panel{position:relative;z-index:3;margin:-14% 0 0 0;width:min(620px,100%);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(28px,3.4vw,46px);}
.feat__panel h3{font-size:var(--t-h3);margin-top:12px;}
.feat__panel p{margin-top:16px;color:var(--ink-soft);font-size:var(--t-small);}
.feat__rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line);}
.feat__rail dt{font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
.feat__rail dd{margin-top:7px;font-size:var(--t-small);color:var(--ink);}
.feat__panel .tlink{margin-top:26px;}

/* --- Archive ------------------------------------------------------------- */
.arch{margin-top:clamp(72px,8vw,120px);border-top:1px solid var(--line);}
.arch__row{display:grid;grid-template-columns:52px minmax(0,1.05fr) minmax(0,1.25fr) 150px;gap:var(--gap);
  align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line-soft);
  transition:background-color .4s var(--ease),padding-inline .4s var(--ease);}
a.arch__row:hover{background:var(--surface);padding-inline:22px;}
.arch__no{font-family:var(--font-display);font-weight:600;font-size:.875rem;color:var(--muted);transition:color .3s var(--ease);}
a.arch__row:hover .arch__no{color:var(--sea-green);}
.arch__row h3{font-size:1.1875rem;letter-spacing:-0.025em;transition:color .3s var(--ease);}
a.arch__row:hover h3{color:var(--sea-green);}
.arch__row .label{margin-top:8px;display:block;}
.arch__scope,.arch__meta{font-size:var(--t-small);color:var(--muted);}
.arch__meta{text-align:right;}

/* --- Services bento ------------------------------------------------------ */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,1.6vw,22px);}
.bcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(26px,2.8vw,40px);overflow:hidden;}
/* Card width is chosen per service in the admin, so the bento stays balanced
   however many are published. */
.bcard--wide{grid-column:span 7;}
.bcard--narrow{grid-column:span 5;}
.bcard--full{grid-column:span 12;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--gap);align-items:center;}
.bcard__glyph{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(43,166,216,.12);border:1px solid var(--line);margin-bottom:22px;}
.bcard__glyph svg{width:21px;height:21px;stroke:var(--sea-green);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.bcard h3{font-size:var(--t-h3);}
.bcard p{margin-top:14px;color:var(--ink-soft);font-size:var(--t-small);max-width:52ch;}
.bcard__kit{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.bcard__orb{position:absolute;width:230px;height:230px;right:-70px;top:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,201,160,.16),transparent 68%);pointer-events:none;}

/* --- Estimator band ------------------------------------------------------ */
.est{position:relative;overflow:hidden;border-radius:var(--r-panel);border:1px solid var(--line);
  background:var(--surface);padding:clamp(32px,4.4vw,64px);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:center;}
.est .bloom{width:520px;height:520px;left:-12%;top:-60%;}
.est__body{position:relative;z-index:2;}
.est__body h2{font-size:clamp(1.75rem,3.2vw,2.75rem);}
.est__body p{margin-top:18px;color:var(--ink-soft);max-width:48ch;}
.est__side{position:relative;z-index:2;justify-self:end;text-align:right;}

/* --- Blender reel: horizontal on vertical scroll -------------------------
   Resting state is a normal horizontal scroller, so the reel works with
   JavaScript off and on small screens. When the pin engages, the stage
   sticks and the track is driven by page scroll.
   ---------------------------------------------------------------------- */
.hreel{position:relative;}
.hreel__stage{position:relative;overflow-x:auto;overflow-y:hidden;padding-block:4px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.hreel__track{display:flex;width:max-content;gap:clamp(16px,1.9vw,28px);padding-inline:var(--pad);}
.hreel__slide{flex:0 0 auto;width:clamp(250px,30vw,400px);scroll-snap-align:center;}
.hreel__frame{position:relative;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);aspect-ratio:4/5;}
/* Holds either an uploaded render or the generated placeholder plate. */
.hreel__frame svg,.hreel__frame img{width:100%;height:100%;display:block;object-fit:cover;}
/* Stacked and left aligned. Spread apart across a wide slide, the label drifts
   away from its own title and reads as though it belongs to the next one. */
.hreel__cap{margin-top:16px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.hreel__cap h3{font-size:1.0625rem;letter-spacing:-0.02em;}

/* Pinned: the stage sticks to the viewport and page scroll drives the track. */
.hreel.is-pinned .hreel__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  overflow:hidden;padding-block:0;scroll-snap-type:none;}
.hreel.is-pinned .hreel__track{will-change:transform;}

/* --- About --------------------------------------------------------------- */
.about__prose{grid-column:span 7;}
.about__side{grid-column:9 / span 4;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(26px,3vw,38px);}
.panel dl > div{padding:15px 0;border-bottom:1px solid var(--line-soft);}
.panel dl > div:first-child{padding-top:0;}
.panel dl > div:last-child{border-bottom:0;padding-bottom:0;}
.panel dt{font-family:var(--font-display);font-size:var(--t-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
.panel dd{margin-top:8px;font-size:var(--t-small);color:var(--ink-soft);}
.kit{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.about__off{margin-top:clamp(48px,5vw,72px);padding-top:clamp(32px,3.4vw,44px);border-top:1px solid var(--line);}
.about__off h3{font-size:var(--t-h3);}
.about__off p{margin-top:16px;color:var(--ink-soft);max-width:66ch;}

/* --- Contact ------------------------------------------------------------- */
.contact{position:relative;padding-block:var(--section);overflow:hidden;}
.contact .bloom{width:min(680px,88vw);height:min(680px,88vw);top:-22%;left:-18%;}
.contact__grid{position:relative;z-index:2;}
.contact__intro{grid-column:span 5;}
.contact__intro h2{font-size:var(--t-h2);}
.contact__intro p{margin-top:22px;color:var(--ink-soft);max-width:38ch;}
.contact__details{margin-top:clamp(32px,3.8vw,50px);}
.contact__details > div{padding:16px 0;border-top:1px solid var(--line);}
.contact__details a,.contact__details span.v{display:inline-block;margin-top:7px;font-size:var(--t-small);color:var(--ink);}
.contact__details a{transition:color .3s var(--ease);}
.contact__details a:hover{color:var(--sea-green);}
.contact__panel{grid-column:7 / span 6;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:clamp(28px,3.4vw,44px);}

.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;}
.field{display:block;} .field--full{grid-column:1 / -1;}
.field > .label{display:block;margin-bottom:9px;}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-input);padding:14px 16px;font-family:var(--font-body);font-size:1rem;
  line-height:1.5;color:var(--ink);transition:border-color .3s var(--ease);}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sea-blue);outline:none;}
.field textarea{resize:vertical;min-height:128px;}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E9AA1' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;}
.field select option{background:var(--surface);color:var(--ink);}
.field[data-invalid='true'] input,.field[data-invalid='true'] textarea{border-color:var(--error);}
.field__err{display:block;margin-top:8px;font-size:.8125rem;color:var(--error);}
.fform__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px;}
.fform__note{font-size:.8125rem;color:var(--muted);max-width:34ch;}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.notice{border:1px solid var(--sea-green);border-radius:var(--r-panel);padding:30px;}
.notice h3{font-size:var(--t-h3);}
.notice p{margin-top:14px;color:var(--ink-soft);max-width:44ch;}
.notice--err{border-color:var(--error);}
.notice + form{margin-top:28px;}

/* --- Footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:44px 52px;}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 36px;}
.foot p,.foot a{font-size:var(--t-small);color:var(--muted);}
.foot a{transition:color .3s var(--ease);}
.foot a:hover{color:var(--sea-green);}
.foot__set{display:flex;flex-wrap:wrap;align-items:center;gap:24px;}

/* --- Estimator modal -----------------------------------------------------
   The step fieldsets carry no border: the browser default was drawing a box
   around every question. The panel keeps the one hairline the design system
   gives every panel, plus a soft sea bloom so it lifts off the dimmed page.
   The scrollbar belongs to the panel: invisible at rest, appearing only while
   the pointer is over it or it is actually moving.
   ---------------------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:700;display:none;align-items:center;justify-content:center;padding:var(--pad);}
.modal[data-open='true']{display:flex;}
.modal__scrim{position:absolute;inset:0;background:rgba(3,12,16,.86);}
.modal__panel{position:relative;z-index:2;width:min(760px,100%);max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(26px,3.4vw,44px);scrollbar-gutter:stable;
  box-shadow:0 44px 130px -50px rgba(43,166,216,.30);}
.modal__panel{scrollbar-width:thin;scrollbar-color:transparent transparent;}
.modal__panel::-webkit-scrollbar{width:11px;}
.modal__panel::-webkit-scrollbar-track{background:transparent;}
.modal__panel::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:var(--r-pill);
  background-color:transparent;background-clip:content-box;}
.modal__panel:hover,.modal__panel.is-scrolling{scrollbar-color:rgba(185,207,212,.30) transparent;}
.modal__panel:hover::-webkit-scrollbar-thumb,
.modal__panel.is-scrolling::-webkit-scrollbar-thumb{background-color:rgba(185,207,212,.30);}
.modal__panel:hover::-webkit-scrollbar-thumb:hover,
.modal__panel.is-scrolling::-webkit-scrollbar-thumb:hover{background-color:rgba(185,207,212,.5);}
.modal__top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
.modal__top h2{font-size:clamp(1.5rem,2.6vw,2rem);}
.modal__top p{margin-top:12px;color:var(--muted);font-size:var(--t-small);max-width:46ch;}
.modal__x{flex:none;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:border-color .3s var(--ease),color .3s var(--ease);}
.modal__x:hover{border-color:var(--error);color:var(--error);}
.modal__x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;}
.prog{display:flex;gap:6px;margin:26px 0 30px;}
.prog span{height:3px;flex:1;border-radius:2px;background:var(--line);transition:background .4s var(--ease);}
.prog span[data-on='true']{background:var(--grad);}
/* Each step is a fieldset. Reset the UA border, padding and min-width, or the
   browser draws a box around every question. */
.step{display:none;border:0;margin:0;padding:0;min-inline-size:0;}
.step[data-on='true']{display:block;}
.step > h3{font-size:1.25rem;letter-spacing:-0.025em;}
.step > p.hint{margin-top:10px;color:var(--muted);font-size:.875rem;}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:22px;}
.opt{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-input);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.opt:hover{border-color:var(--sea-blue);}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt__box{flex:none;width:19px;height:19px;border:1px solid var(--muted);border-radius:5px;margin-top:2px;
  display:grid;place-items:center;transition:border-color .25s,background .25s;}
.opt input[type='radio'] + .opt__box{border-radius:50%;}
.opt__box::after{content:'';width:9px;height:9px;border-radius:2px;background:var(--grad);transform:scale(0);
  transition:transform .25s var(--ease);}
.opt input[type='radio'] + .opt__box::after{border-radius:50%;}
.opt input:checked + .opt__box{border-color:var(--sea-green);}
.opt input:checked + .opt__box::after{transform:scale(1);}
.opt input:focus-visible + .opt__box{outline:2px solid var(--sea-green);outline-offset:2px;}
.opt__txt strong{display:block;font-family:var(--font-display);font-weight:600;font-size:.9375rem;letter-spacing:-0.015em;}
.opt__txt em{display:block;margin-top:4px;font-style:normal;font-size:.8125rem;color:var(--muted);}
.opt:has(input:checked){border-color:var(--sea-green);background:var(--raised);}
/* --muted drops to 4.41:1 on the raised ground, so lift it when selected. */
.opt:has(input:checked) .opt__txt em{color:var(--ink-soft);}
.modal__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--line);}
.modal__nav{display:flex;gap:12px;}
.cur{display:inline-flex;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);}
.cur button{padding:8px 16px;border:0;background:transparent;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;color:var(--muted);transition:color .3s;}
.cur button[aria-pressed='true']{background:var(--grad);color:var(--on-accent);}
.res{text-align:center;padding:8px 0 0;}
.res__amt{font-family:var(--font-display);font-weight:700;font-size:clamp(2.25rem,5.4vw,3.5rem);
  letter-spacing:-0.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.res__cap{margin-top:14px;color:var(--muted);font-size:.875rem;}
.res__break{margin-top:26px;text-align:left;border-top:1px solid var(--line);}
.res__break div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--line-soft);font-size:.875rem;}
.res__break span:first-child{color:var(--ink-soft);}
.res__break span:last-child{color:var(--ink);white-space:nowrap;}
.res__maint{margin-top:20px;padding:16px 18px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-input);font-size:.875rem;color:var(--ink-soft);}
.res__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px;}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .arch__row{grid-template-columns:44px minmax(0,1fr) minmax(0,1.2fr);}
  .arch__meta{grid-column:2 / -1;text-align:left;}
  .bcard--wide,.bcard--narrow{grid-column:span 12;}
  .est{grid-template-columns:1fr;}
  .est__side{justify-self:start;text-align:left;}
}
@media (max-width:900px){
  :root{--header-h:66px;}
  .nav{display:none;} .burger{display:flex;} .hdr__end .btn{display:none;}
  .hero__body,.hero__fig,.proj__media,.proj__body,
  .about__prose,.about__side,.contact__intro,.contact__panel{grid-column:1 / -1;}
  .proj--flip .proj__media,.proj--flip .proj__body{grid-column:1 / -1;order:0;}
  .hero__fig{max-width:400px;margin:48px auto 0;}
  .hero h1{max-width:18ch;}
  .feat__panel{margin-top:-40px;width:100%;}
  .feat__rail{grid-template-columns:1fr;gap:0;}
  .feat__rail > div{padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .bcard--full{grid-template-columns:1fr;}
  .arch__row{grid-template-columns:38px minmax(0,1fr);row-gap:10px;}
  .arch__scope,.arch__meta{grid-column:2 / -1;}
  .contact__panel{margin-top:48px;}
  /* Reveals travel a shorter distance and never sideways on small screens. */
  [data-reveal],[data-reveal='left'],[data-reveal='right'],[data-reveal='down']{--rv-y:18px;--rv-x:0px;}
}
@media (max-width:600px){
  .fgrid{grid-template-columns:1fr;}
  .hero__cta .btn{width:100%;}
  .foot__in{flex-direction:column;align-items:flex-start;}
  .opts{grid-template-columns:1fr;}
  .modal__foot{flex-direction:column-reverse;align-items:stretch;}
  .modal__nav{width:100%;}
  .modal__nav .btn{flex:1;}
  .feat__rail{grid-template-columns:1fr;}
}

/* --- Reduced motion: a complete, still page ------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .mq__track{animation:none;transform:none;}
  .mq{overflow-x:auto;}
  .js-rv [data-reveal]{opacity:1;transform:none;}
  .js-rv [data-rv-words] .w__in{transform:none;}
  /* Scenery stays, fully drawn and still. */
  .scene__line{stroke-dashoffset:0 !important;}
  .scene__node{opacity:1;}
  .sa-page *,.sa-page *::before,.sa-page *::after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}