/* ==========================================================================
   Mother Nature Agency — Marketing, Naturally.
   Design system: single committed visual world (deep space → forest).
   Palette, type and grid tokens all declared on :root.
   ========================================================================== */

:root{
  /* --- colour ------------------------------------------------------------ */
  /* No pure black anywhere. The ground tones are layered forest-charcoal:
     each step up is a little greener and a little lighter, so depth reads
     as atmosphere rather than as a flat backdrop. */
  --void:      #0b1210;   /* deepest forest-charcoal                        */
  --void-2:    #101816;
  --charcoal:  #151e1b;
  --ash:       #1f2a26;
  --ash-2:     #2b3832;
  /* warm ivory, never #fff — the page is lit by sun and ember, not by a lamp */
  --bone:      #efe9db;
  --bone-dim:  #b6b3a3;
  --bone-mute: #888b7c;
  --forest:    #163324;
  --moss:      #8aa47e;
  --sage:      #9fb492;
  --aurora:    #6fdca0;   /* accent, calmed down                            */
  --amber:     #e0a05c;   /* root light                                      */
  --ember:     #e8c58a;

  /* --- environment ------------------------------------------------------- */
  /* how far down the descent the reader is: 0 = canopy, 1 = root network.
     Driven by JS. Glass, atmosphere and type all read it, so the whole
     interface is lit by wherever you are standing in the forest. */
  --depth: 0;
  /* how strongly the root signals are firing right now (0-1), set by JS —
     the glass picks this up so the interface feels lit by the environment */
  --root-glow: 0;

  /* light sources the glass samples from its surroundings */
  --sky-light:   150, 196, 214;   /* daylight through the gaps             */
  --leaf-light:  122, 168, 118;   /* green bounce off the canopy           */
  --sun-light:   255, 226, 168;   /* direct sun                            */
  --root-light:  255, 172,  92;   /* ember from the root network           */

  --line:      rgba(239,233,219,.11);
  --line-soft: rgba(239,233,219,.06);

  /* --- type -------------------------------------------------------------- */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* the small letterspaced-caps voice; kept under the old token name so
     every existing rule picks it up */
  --mono:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-xl:  clamp(3.1rem, 11.2vw, 11rem);
  --fs-l:   clamp(2.5rem, 7.4vw, 6.75rem);
  --fs-m:   clamp(1.85rem, 4.4vw, 3.9rem);
  --fs-s:   clamp(1.3rem, 2.1vw, 1.85rem);
  --fs-body:clamp(1rem, .42vw + .92rem, 1.16rem);
  --fs-sm:  .9rem;
  --fs-lab: .69rem;

  /* --- layout ------------------------------------------------------------ */
  --gutter: clamp(22px, 5vw, 92px);
  --rail:   clamp(0px, 9vw, 150px);
  --maxw:   1560px;
  --cinema: 380vh;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.02,.2,1);

  color-scheme: dark;
}

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

html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
}
html,body{ margin:0; }

body{
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection{ background: var(--aurora); color: var(--void); }

a{ color:inherit; text-decoration:none; }
img,svg,canvas{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; }

:focus-visible{
  outline: 2px solid var(--aurora);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--aurora); color:var(--void);
  padding:.7rem 1.1rem; font-family:var(--mono); font-size:var(--fs-lab);
  text-transform:uppercase; letter-spacing:.14em;
  transition: top .2s var(--ease);
}
.skip:focus{ top: calc(16px + env(safe-area-inset-top, 0px)); }

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

/* ==========================================================================
   Stage: the persistent WebGL world + atmospheric overlays
   ========================================================================== */

#stage{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 8%,  #0a1420 0%, #05080c 42%, #03050a 100%);
}
#gl{ width:100%; height:100%; display:block; }

/* fallback sky when WebGL is unavailable */
.no-webgl #stage{
  background:
    radial-gradient(60% 40% at 74% 18%, rgba(88,227,155,.10), transparent 60%),
    radial-gradient(90% 60% at 20% 0%,  rgba(70,120,160,.13), transparent 62%),
    radial-gradient(120% 90% at 50% 120%, #10251b 0%, #071110 38%, #04060a 100%);
}
.no-webgl #gl{ display:none; }
.no-webgl .cue{ display:none; }

/* scrim: opaque behind the editorial content, clear along the bottom edge so
   the forest canopy stays visible under every section */
/* The scrim is air, not ink: forest-charcoal that warms toward soil as the
   reader descends, and always opens out along the bottom edge so the
   environment carries on past the copy. */
#scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(180deg,
    rgba(11,18,16,.96) 0%,
    rgba(11,18,16,.93) 46%,
    rgba(11,18,16,.82) 66%,
    rgba(12,17,15,.50) 82%,
    rgba(12,17,15,.12) 93%,
    rgba(12,17,15,0)   100%);
}
/* underground the air itself takes on the soil, very slightly */
#scrim::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(28,19,12, calc(var(--depth) * .34)) 0%,
    rgba(24,16,10, calc(var(--depth) * .22)) 58%,
    transparent 88%);
}

/* vignette + film grain */
#atmos{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    /* sun through the gaps, high and to the left — fades as you descend */
    radial-gradient(70% 50% at 26% 2%,
      rgba(255,232,182, calc(.07 * (1 - var(--depth)))) 0%, transparent 62%),
    /* ember rising from below once underground */
    radial-gradient(90% 46% at 50% 102%,
      rgba(255,158,74, calc(var(--depth) * (.05 + var(--root-glow) * .09))) 0%,
      transparent 68%),
    radial-gradient(125% 100% at 50% 48%, transparent 54%, rgba(7,11,10,.44) 100%);
}
#grain{
  position:fixed; inset:-120px; z-index:3; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      16%{transform:translate(-14px,7px)}
  33%{transform:translate(9px,-12px)} 50%{transform:translate(-7px,-9px)}
  66%{transform:translate(12px,6px)}  83%{transform:translate(-11px,11px)}
  100%{transform:translate(0,0)}
}

/* ==========================================================================
   Cursor
   ========================================================================== */
#cursor,#cursorDot{
  position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  border-radius:50%; opacity:0;
  transition: opacity .3s var(--ease);
}
#cursor{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(238,241,234,.5);
  transition: width .35s var(--ease), height .35s var(--ease),
              margin .35s var(--ease), border-color .35s var(--ease),
              background-color .35s var(--ease), opacity .3s var(--ease);
}
#cursorDot{
  width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--bone);
}
body.cursor-on #cursor,body.cursor-on #cursorDot{ opacity:1; }
body.cursor-grow #cursor{
  width:88px; height:88px; margin:-44px 0 0 -44px;
  background: rgba(88,227,155,.12); border-color: rgba(88,227,155,.55);
}
@media (hover:none),(pointer:coarse){ #cursor,#cursorDot{ display:none; } }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
#head{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: calc(1.15rem + env(safe-area-inset-top,0px)) var(--gutter) 1.15rem;
  display:flex; align-items:center; gap:2rem;
  transition: background-color .5s var(--ease), border-color .5s var(--ease),
              backdrop-filter .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
#head.docked{
  background: rgba(6,10,11,.58);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-soft);
  padding-block: .85rem;
}
.wordmark{
  display:flex; align-items:center; gap:.7rem; flex:0 0 auto;
}
.wordmark .logo{
  height:clamp(17px,2.1vw,23px); width:auto; display:block;
  transition:opacity .4s var(--ease);
}
.wordmark:hover .logo{ opacity:.78; }
.wordmark .mark{
  width:11px; height:11px; border-radius:50%;
  background: radial-gradient(circle at 32% 30%, #b6ffd9 0%, var(--aurora) 38%, #0d3d28 100%);
  box-shadow: 0 0 14px rgba(88,227,155,.55);
  align-self:center;
  animation: pulseMark 5.5s var(--ease) infinite;
}
@keyframes pulseMark{ 0%,100%{ box-shadow:0 0 12px rgba(88,227,155,.45);} 50%{ box-shadow:0 0 22px rgba(88,227,155,.85);} }

#nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2vw,2.2rem); position:relative; }
#nav .nlink{
  font-family:var(--mono); font-size:var(--fs-lab); text-transform:uppercase;
  letter-spacing:.16em; color:var(--bone-dim); padding:.35rem 0;
  transition:color .3s var(--ease); position:relative;
}
#nav .nlink:hover,#nav .nlink.active{ color:var(--bone); }
#navdot{
  position:absolute; bottom:-2px; left:0; width:0; height:1px;
  background:var(--aurora); box-shadow:0 0 10px rgba(88,227,155,.8);
  transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s;
  opacity:0;
}
@media (max-width: 860px){ #nav .nlink{ display:none; } }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:var(--fs-lab); text-transform:uppercase;
  letter-spacing:.14em; padding:.72rem 1.25rem;
  border:1px solid var(--line); border-radius:999px;
  color:var(--bone); overflow:hidden; will-change:transform;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: var(--aurora); transform: scale(.2); opacity:0;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}
.btn>*{ position:relative; z-index:1; }
.btn:hover{ color:var(--void); border-color:var(--aurora); }
.btn:hover::before{ transform:scale(1); opacity:1; }
.btn .arrow{ transition: transform .45s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

#progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:101;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--forest),var(--aurora));
  box-shadow:0 0 12px rgba(88,227,155,.6);
}

/* section rail indicator */
#rail{
  position:fixed; right:calc(var(--gutter) * .5); top:50%; transform:translateY(-50%);
  z-index:99; display:flex; flex-direction:column; gap:.85rem;
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease);
}
#rail.on{ opacity:1; pointer-events:auto; }
#rail a{ display:flex; align-items:center; gap:.6rem; justify-content:flex-end; }
#rail .rdot{
  width:6px; height:6px; border-radius:50%; background:rgba(238,241,234,.22);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
#rail .rlbl{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute);
  opacity:0; transform:translateX(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
#rail a:hover .rlbl{ opacity:1; transform:none; }
#rail a.active .rdot{ background:var(--aurora); transform:scale(1.55); }
#rail a.active .rlbl{ opacity:1; transform:none; color:var(--bone-dim); }
@media (max-width: 980px){ #rail{ display:none; } }

/* ==========================================================================
   Cinematic prologue
   ========================================================================== */
#cinema{ position:relative; z-index:4; height:var(--cinema); }
.pin{
  position:sticky; top:0; height:100svh; min-height:560px;
  display:grid; place-items:center;
  padding:0 var(--gutter);
}
.beat{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:0 var(--gutter); text-align:center;
  opacity:0; pointer-events:none; will-change:opacity,transform;
}
.beat.live{ pointer-events:auto; }

/* beat 1 — the brand in deep space */
.hero-mark{
  font-family:var(--display); font-weight:700;
  font-size: clamp(2.1rem, 7.6vw, 7.2rem);
  line-height:.94; letter-spacing:-.045em; text-wrap:balance;
  margin:0;
}
.hero-mark .ln{
  display:block; overflow:hidden;
  padding-bottom:.32em; margin-bottom:-.32em;
}
.hero-mark .ln span{ display:block; }
.hero-mark .thin{ color:var(--bone-dim); font-weight:400; }
.hero-sub{
  margin:1.9rem auto 0; max-width:34ch;
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-dim); line-height:2;
}
.cue{
  position:absolute; left:50%; bottom:clamp(28px,6vh,64px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bone-mute); z-index:6;
  transition:opacity .6s var(--ease);
}
.cue .track{
  width:1px; height:56px; background:linear-gradient(var(--line),transparent);
  position:relative; overflow:hidden;
}
.cue .track::after{
  content:""; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:var(--aurora); animation: cueRun 2.4s var(--ease-io) infinite;
}
@keyframes cueRun{ 0%{top:-42%;opacity:0} 22%{opacity:1} 100%{top:104%;opacity:0} }

/* beat 2 — the brand moment over Earth */
.moment{ max-width: min(1100px, 92vw); }
.moment h2{
  font-family:var(--display); font-weight:700;
  font-size:var(--fs-xl); line-height:.86; letter-spacing:-.05em;
  margin:0; text-wrap:balance;
}
.moment h2 em{ font-style:normal; color:var(--aurora); }
.moment .pillars{
  margin:2.4rem 0 0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.55rem clamp(.9rem,2.4vw,2.4rem);
  font-family:var(--mono); font-size:clamp(.66rem,1.05vw,.82rem);
  letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim);
}
.moment .pillars li{ list-style:none; }
.moment .pillars li::after{ content:"·"; margin-left:clamp(.9rem,2.4vw,2.4rem); color:var(--bone-mute); }
.moment .pillars li:last-child::after{ content:""; margin:0; }
.moment p{
  margin:1.7rem auto 0; max-width:46ch;
  color:var(--bone-dim); font-size:clamp(1rem,1.3vw,1.28rem); line-height:1.6;
}

/* beat 3 — descent line */
.descent{ max-width:min(900px,92vw); }
.descent p{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-m); line-height:1.08; letter-spacing:-.035em; margin:0;
  color:var(--bone);
}
.descent .chain{
  margin-top:2rem; display:flex; justify-content:center; flex-wrap:wrap;
  gap:.5rem clamp(.7rem,2vw,1.6rem);
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone-mute);
}
.descent .chain span.on{ color:var(--aurora); }

/* ==========================================================================
   Editorial shell
   ========================================================================== */
#site{ position:relative; z-index:5; }

/* One idea should own the viewport it arrives in. Sections breathe far
   harder than a conventional page: the environment needs room to be seen
   between them, and the descent needs distance to actually travel. */
.sec{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding-block: clamp(9rem, 26vh, 20rem);
  padding-inline: var(--gutter);
}
.sec--tight{ padding-block: clamp(5rem, 11vh, 9rem); }

.shead{
  display:grid; grid-template-columns: var(--rail) minmax(0,1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items:start;
  padding-top:1.5rem; margin-bottom: clamp(4.5rem,13vh,10rem);
  background: linear-gradient(90deg, var(--line-soft), transparent 62%) top left / 100% 1px no-repeat;
}
.lab{
  font-family:var(--mono); font-size:var(--fs-lab); font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; color:var(--bone-mute);
  display:flex; align-items:center; gap:.55rem;
}
.lab::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--aurora); box-shadow:0 0 8px rgba(88,227,155,.7);
  flex:0 0 auto;
}
.shead h2{
  font-family:var(--display); font-weight:600;
  font-size:var(--fs-m); line-height:1.14; letter-spacing:-.04em;
  margin:0; max-width:20ch; text-wrap:balance;
}
.shead .note{
  grid-column:2; margin:1.1rem 0 0; max-width:52ch;
  color:var(--bone-dim); font-size:var(--fs-body);
}
@media (max-width: 760px){
  .shead{ grid-template-columns:1fr; gap:.9rem; }
  .shead .note{ grid-column:1; }
}

/* --- manifesto marquee -------------------------------------------------- */
#manifesto{ padding-block: clamp(5rem,11vh,9rem); }
.lede{
  display:grid; grid-template-columns: var(--rail) minmax(0,1fr);
  gap: clamp(1rem,3vw,3rem);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.lede p{
  grid-column:2; margin:0;
  font-family:var(--display); font-weight:400;
  font-size: clamp(1.5rem, 3.1vw, 2.9rem); line-height:1.16;
  letter-spacing:-.03em; max-width:24ch; text-wrap:balance;
}
.lede p b{ font-weight:600; color:var(--bone); }
.lede p .dim{ color:var(--bone-mute); font-weight:400; }
@media (max-width:760px){ .lede{grid-template-columns:1fr} .lede p{grid-column:1} }

.marquee{
  position:relative; overflow:hidden; margin-top:clamp(3rem,7vh,6rem);
  border-block:1px solid var(--line-soft); padding-block:1.35rem;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee .run{ display:flex; width:max-content; will-change:transform; }
.marquee .run span{
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone-mute); padding-inline:1.6rem;
  white-space:nowrap;
}
.marquee .run span i{ font-style:normal; color:var(--aurora); margin-right:1.6rem; }

/* --- work --------------------------------------------------------------- */
/* An editorial gallery, not a card grid: the pictures are the section.
   Plates run at different widths and offsets down the page so the eye
   travels, and the writing rides as a restrained glass caption instead of
   a block underneath every image. */
.work-grid{
  display:grid; grid-template-columns:1fr;
  gap: clamp(3.5rem,10vh,9rem);
}
@media (min-width: 880px){
  .work-grid{ grid-template-columns:repeat(12,1fr); }
  /* full-bleed opener */
  .case:nth-child(1){ grid-column: 1 / span 12; }
  /* a tall pair, offset from each other */
  .case:nth-child(2){ grid-column: 1 / span 6;  }
  .case:nth-child(3){ grid-column: 8 / span 5; align-self:end; }
  /* closing wide plate, inset */
  .case:nth-child(4){ grid-column: 3 / span 10; }
  .case:nth-child(1) .frame{ aspect-ratio: 21 / 9; }
  .case:nth-child(2) .frame{ aspect-ratio: 4 / 5;  }
  .case:nth-child(3) .frame{ aspect-ratio: 3 / 4;  }
  .case:nth-child(4) .frame{ aspect-ratio: 16 / 9; }
}
.case{ position:relative; display:flex; flex-direction:column; }

.frame{
  position:relative; overflow:hidden; border-radius:12px;
  aspect-ratio: 16 / 10; max-width:100%;
  background: var(--ash);
  transition: transform .9s var(--ease);
}
.frame .art{ position:absolute; inset:-7%; will-change:transform; }
.frame .art img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03);
  filter: saturate(.80) contrast(1.06) brightness(.80);
  transition: transform 1.3s var(--ease), filter 1s var(--ease);
}
.case:hover .frame .art img{
  transform:scale(1.09);
  filter: saturate(1.0) contrast(1.02) brightness(.93);
}
.frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(4,7,6,.78));
}
.frame .shade{
  position:absolute; inset:0; z-index:2; background:var(--void);
  transform-origin: 50% 100%;
}
.case .meta{
  position:absolute; left:clamp(14px,2vw,26px); right:clamp(14px,2vw,26px);
  bottom:clamp(14px,2vw,22px); z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
}
.case .meta .k{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(238,241,234,.62);
}
.case h3{
  margin:.35rem 0 0; font-family:var(--display); font-weight:600;
  font-size: clamp(1.25rem,2.2vw,2rem); letter-spacing:-.035em; line-height:1.18;
}
.case .result{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--aurora); white-space:nowrap; text-align:right;
}
.case .under{
  margin:.95rem 0 0; color:var(--bone-dim); font-size:var(--fs-sm); max-width:46ch;
}


/* --- services ----------------------------------------------------------- */
.svc{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.svc article{
  background: rgba(8,13,13,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-direction:column; gap:.85rem; min-height:230px;
  transition: background-color .55s var(--ease);
}
.svc article:hover{ background: rgba(17,32,26,.72); }
.svc h3{
  margin:0; font-family:var(--display); font-weight:600;
  font-size: clamp(1.1rem,1.6vw,1.4rem); letter-spacing:-.025em;
}
.svc p{ margin:0; color:var(--bone-dim); font-size:var(--fs-sm); }
.svc ul{ margin:auto 0 0; padding:0; list-style:none; display:grid; gap:.3rem; }
.svc li{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bone-mute);
  display:flex; gap:.55rem; align-items:baseline;
}
.svc li::before{ content:"↳"; color:var(--moss); }

/* --- results ------------------------------------------------------------ */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap: clamp(1.6rem,4vw,3.4rem);
}
.stat .n{
  font-family:var(--display); font-weight:600;
  font-size: clamp(3rem,6.6vw,6rem); line-height:.9; letter-spacing:-.05em;
  font-variant-numeric: tabular-nums; display:flex; align-items:baseline;
}
.stat .n .suf{ font-size:.42em; letter-spacing:-.02em; color:var(--aurora); margin-left:.12em; }
.stat .d{
  margin:.9rem 0 0; padding-top:.9rem; border-top:1px solid var(--line-soft);
  color:var(--bone-dim); font-size:var(--fs-sm); max-width:28ch;
}
.proof{
  margin-top: clamp(3rem,7vh,5.5rem);
  display:grid; grid-template-columns: var(--rail) minmax(0,1fr);
  gap: clamp(1rem,3vw,3rem);
}
.proof blockquote{
  grid-column:2; margin:0; max-width:32ch;
  font-family:var(--display); font-weight:400;
  font-size: clamp(1.4rem,2.7vw,2.4rem); line-height:1.18; letter-spacing:-.03em;
}
.proof cite{
  display:block; margin-top:1.4rem; font-style:normal;
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-mute);
}
@media (max-width:760px){ .proof{grid-template-columns:1fr} .proof blockquote{grid-column:1} }

/* --- about -------------------------------------------------------------- */
.about{
  display:grid; grid-template-columns: var(--rail) minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(1.4rem,3.4vw,4rem);
}
.about .body p{ margin:0 0 1.2rem; max-width:52ch; color:var(--bone-dim); }
.about .body p:first-child{
  color:var(--bone); font-family:var(--display); font-weight:400;
  font-size: clamp(1.25rem,2.1vw,1.85rem); line-height:1.24; letter-spacing:-.028em;
  max-width:26ch;
}
.about .facts{ display:grid; gap:0; align-content:start; }
.about .facts div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
}
.about .facts dt{ color:var(--bone-mute); margin:0; }
.about .facts dd{ color:var(--bone); margin:0; text-align:right; }
@media (max-width:1000px){
  .about{ grid-template-columns: var(--rail) minmax(0,1fr); }
  .about .facts{ grid-column:2; margin-top:1rem; }
}
@media (max-width:760px){
  .about{ grid-template-columns:1fr; }
  .about .facts{ grid-column:1; }
}

/* --- contact ------------------------------------------------------------ */
#contact{
  min-height: 100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block: clamp(7rem,16vh,14rem);
}
.cta-h{
  font-family:var(--display); font-weight:700;
  font-size:var(--fs-l); line-height:.9; letter-spacing:-.05em;
  margin:0; max-width:14ch; text-wrap:balance;
}
.cta-h .ghost{ -webkit-text-stroke:1px rgba(238,241,234,.42); color:transparent; }
.cta-row{
  margin-top: clamp(2.5rem,6vh,4.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem 2.6rem;
}
.big-cta{
  position:relative; display:inline-flex; align-items:center; gap:1.1rem;
  font-family:var(--mono); font-size:clamp(.72rem,1.15vw,.86rem);
  letter-spacing:.2em; text-transform:uppercase;
  padding: clamp(1.05rem,2vw,1.4rem) clamp(1.6rem,3vw,2.5rem);
  border:1px solid var(--aurora); border-radius:999px; color:var(--aurora);
  overflow:hidden; will-change:transform;
  transition: color .45s var(--ease);
}
.big-cta::before{
  content:""; position:absolute; inset:0; background:var(--aurora);
  transform: translateY(101%); transition: transform .6s var(--ease-io);
}
.big-cta>*{ position:relative; z-index:1; }
.big-cta:hover{ color:var(--void); }
.big-cta:hover::before{ transform:none; }
.cta-alt{
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
  display:grid; gap:.45rem;
}
.cta-alt a{ color:var(--bone); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .4s var(--ease); }
.cta-alt a:hover{ border-bottom-color:var(--aurora); }

/* --- footer ------------------------------------------------------------- */
#foot{
  position:relative; z-index:5;
  max-width:var(--maxw); margin-inline:auto;
  padding: 2rem var(--gutter) calc(2.4rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute);
}
#foot nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
#foot a:hover{ color:var(--bone); }
#foot .grow{ margin-left:auto; color:var(--moss); }

/* ==========================================================================
   Reveal primitives — visible by default; JS arms them, so a failed script
   never leaves the page blank.
   ========================================================================== */
.js .r-up{ opacity:0; transform: translateY(34px); }
.js .r-up.seen{ opacity:1; transform:none;
  transition: opacity 1.15s var(--ease), transform 1.3s cubic-bezier(.16,.84,.3,1); }
.js .r-line .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.34em; margin-bottom:-.34em;
}
.js .r-line .w > span{ display:inline-block; transform: translateY(105%); }
.js .r-line.seen .w > span{ transform:none; transition: transform .95s var(--ease); }
.js .r-mask .shade{ transform: scaleY(1); }
.js .r-mask.seen .shade{ transform: scaleY(0); transition: transform 1.15s var(--ease-io); }
.js .r-rule{ transform:scaleX(0); transform-origin:0 50%; }
.js .r-rule.seen{ transform:none; transition: transform 1.1s var(--ease); }

@media (prefers-reduced-motion: reduce){
  :root{ --cinema: 150vh; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .r-up,.js .r-line .w>span,.js .r-mask .shade{ opacity:1 !important; transform:none !important; }
  .js .r-mask .shade{ display:none; }
  .cue{ display:none; }
  #grain{ animation:none; }
}

/* ==========================================================================
   Static prologue — when motion is reduced, or WebGL is unavailable.
   The three cinematic beats become ordinary stacked editorial blocks.
   ========================================================================== */
.no-webgl #cinema,.rm #cinema{ height:auto; }
.no-webgl .pin,.rm .pin{
  position:static; height:auto; min-height:0; display:block;
  padding-block: clamp(7rem,15vh,12rem) clamp(2rem,6vh,5rem);
}
.no-webgl .beat,.rm .beat{
  position:static; display:block; opacity:1 !important; transform:none !important;
  pointer-events:auto; padding-block: clamp(2.5rem,7vh,5.5rem); inset:auto;
}
.no-webgl #scrim,.rm #scrim{ opacity:1; }
.no-webgl .cue,.rm .cue{ display:none; }
.rm #rail{ opacity:1; }


/* ==========================================================================
   Additions: hero eyebrow, pricing plans
   ========================================================================== */
.hero-eyebrow{
  margin:0 0 1.5rem; font-family:var(--mono); font-size:var(--fs-lab);
  letter-spacing:.32em; text-transform:uppercase; color:var(--moss);
}


.proof blockquote::before{ content:"\201C"; }
.proof blockquote::after{ content:"\201D"; }

/* the pine backdrop is a photograph now — let a little more of it through */
#scrim{
  background: linear-gradient(180deg,
    rgba(7,11,10,.88) 0%,
    rgba(7,11,10,.84) 48%,
    rgba(7,11,10,.74) 70%,
    rgba(7,11,10,.58) 84%,
    rgba(7,11,10,.34) 94%,
    rgba(7,11,10,.16) 100%);
}

/* ==========================================================================
   Plans without public pricing
   ========================================================================== */
.plan .pitch{
  margin:.15rem 0 .2rem; color:var(--bone-dim); font-size:var(--fs-sm); max-width:32ch;
}
.plan-ask{
  margin-top:1.3rem; align-self:flex-start;
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.plan-ask:hover{ border-bottom-color:var(--aurora); color:var(--aurora); }
.plan-ask span{ display:inline-block; transition:transform .4s var(--ease); }
.plan-ask:hover span{ transform:translateX(4px); }
.plan ul{ margin-top:1.2rem; }

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.enquiry{
  margin-top: clamp(3rem,7vh,5rem);
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.enquiry-lab{
  grid-column:1/-1; margin:0; padding:1.1rem clamp(1.1rem,2.2vw,1.6rem);
  background:rgba(7,12,12,.80);
}
.field{
  background:rgba(7,12,12,.80); padding:1.05rem clamp(1.1rem,2.2vw,1.6rem) 1.15rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:background-color .4s var(--ease);
}
.field:focus-within{ background:rgba(18,34,27,.78); }
.field--wide{ grid-column:1/-1; }
.field--submit{
  grid-column:1/-1; flex-direction:row; align-items:center;
  flex-wrap:wrap; gap:1rem 1.4rem;
}
.field label{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute);
}
.field label span{ color:var(--ash-2); margin-left:.4rem; }
.field input,.field textarea{
  font:inherit; font-size:1rem; color:var(--bone);
  background:none; border:0; border-bottom:1px solid var(--line);
  padding:.35rem 0; width:100%; border-radius:0;
  transition:border-color .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:3.2em; }
.field input:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--aurora);
}
.field input:invalid:not(:placeholder-shown){ border-bottom-color:#c4745f; }
.btn--solid{ border-color:var(--aurora); color:var(--aurora); }
.btn--solid:hover{ color:var(--void); }
.enquiry-note{
  margin:0; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--moss);
}

/* ==========================================================================
   Inner pages (blog, post, referral) — no WebGL, same world
   ========================================================================== */
body.inner{
  background:
    radial-gradient(90% 60% at 78% -10%, rgba(88,227,155,.07), transparent 62%),
    radial-gradient(80% 50% at 8% 4%, rgba(60,96,110,.10), transparent 60%),
    linear-gradient(180deg, #05080a 0%, #070d0c 55%, #091310 100%);
  background-attachment:fixed;
}
body.inner #head{ position:sticky; top:env(safe-area-inset-top,0px); }
.page{
  max-width:var(--maxw); margin-inline:auto;
  padding: clamp(7rem,15vh,11rem) var(--gutter) clamp(4rem,9vh,7rem);
}
.page-head{
  display:grid; grid-template-columns: var(--rail) minmax(0,1fr);
  gap: clamp(1rem,3vw,3rem);
  border-top:1px solid var(--line-soft); padding-top:1.5rem;
}
.page-head h1{
  grid-column:2; margin:0;
  font-family:var(--display); font-weight:600;
  font-size: var(--fs-m); line-height:1.14; letter-spacing:-.04em;
  max-width:20ch; text-wrap:balance;
}
.page-head .sub{
  grid-column:2; margin:1.1rem 0 0; max-width:52ch; color:var(--bone-dim);
}
@media (max-width:760px){
  .page-head{ grid-template-columns:1fr; gap:.9rem; }
  .page-head h1,.page-head .sub{ grid-column:1; }
}
.prose{
  max-width:66ch; margin: clamp(2.5rem,6vh,4rem) 0 0 auto;
  width:min(100%, 66ch);
}
.prose h2{
  font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size: clamp(1.25rem,2vw,1.6rem); line-height:1.16;
  margin: 2.6rem 0 .7rem;
}
.prose h2:first-child{ margin-top:0; }
.prose h2 em{
  font-style:normal; color:var(--moss); font-family:var(--mono);
  font-size:.62em; letter-spacing:.14em; margin-right:.7rem;
}
.prose p{ margin:0 0 1.15rem; color:var(--bone-dim); }
.prose p.lead{
  color:var(--bone); font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.5;
  margin-bottom:2rem;
}
.post-meta{
  grid-column:2; margin:1rem 0 0;
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-mute);
}
.postlist{ list-style:none; margin: clamp(2rem,5vh,3.5rem) 0 0; padding:0; display:grid; }
.postlist li{ border-top:1px solid var(--line-soft); }
.postlist a{
  display:grid; grid-template-columns: var(--rail) minmax(0,1fr) auto;
  gap: clamp(1rem,3vw,3rem); align-items:baseline;
  padding: clamp(1.5rem,3.5vh,2.4rem) 0;
  transition:opacity .4s var(--ease);
}
.postlist a:hover{ opacity:.72; }
.postlist .date{
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.14em;
  color:var(--bone-mute); text-transform:uppercase;
}
.postlist h2{
  margin:0; font-family:var(--display); font-weight:600;
  font-size: clamp(1.3rem,2.6vw,2.1rem); letter-spacing:-.035em; line-height:1.18;
}
.postlist .go{ font-family:var(--mono); font-size:.9rem; color:var(--moss); }
@media (max-width:760px){
  .postlist a{ grid-template-columns:1fr; gap:.5rem; }
  .postlist .go{ display:none; }
}

/* FAQ */
.faq{ margin: clamp(3rem,7vh,5rem) 0 0; display:grid; }
.faq details{
  border-top:1px solid var(--line-soft);
}
.faq details:last-of-type{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  font-family:var(--display); font-weight:500; letter-spacing:-.02em;
  font-size: clamp(1.02rem,1.5vw,1.2rem);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--aurora); }
.faq summary::after{
  content:"+"; font-family:var(--mono); color:var(--moss); flex:0 0 auto;
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0 0 1.35rem; color:var(--bone-dim); max-width:60ch; }

.backlink{
  display:inline-flex; gap:.6rem; align-items:center;
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute);
  margin-bottom:2rem; transition:color .3s var(--ease);
}
.backlink:hover{ color:var(--bone); }

/* GoHighLevel embed, framed like the native form so it does not read as pasted in */
.ghl-embed{
  margin-top: clamp(3rem,7vh,5rem);
  border:1px solid var(--line-soft);
  background: rgba(8,13,13,.62);
  padding: clamp(.6rem,1.4vw,1rem);
  min-height:220px;
}
.ghl-embed iframe{ width:100%; border:0; display:block; }

/* form success state */
.enquiry-done{
  margin-top: clamp(3rem,7vh,5rem);
  border:1px solid rgba(88,227,155,.34);
  background: rgba(20,42,33,.6);
  padding: clamp(1.4rem,3vw,2.2rem);
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.14em;
  text-transform:uppercase; color:var(--aurora);
}

/* ==========================================================================
   Type retune for the serif display face.
   Cormorant is light and high-contrast: it wants positive tracking, more
   weight at small sizes, and a shadow when it sits over the canopy.
   ========================================================================== */
.hero-mark,
.moment h2,
.cta-h,
.descent p,
.shead h2,
.cap h3,
.postlist h2,
.page-head h1,
.prose h2,
.lede p,
.about .body p:first-child,
.proof blockquote,
.stat .n,
.plan .price,
.svc h3,
.case h3,
.faq summary{
  font-weight: 400;
  letter-spacing: .012em;
}

.hero-mark{ font-weight:300; letter-spacing:.055em; line-height:1.16; }
.hero-mark .thin{ font-weight:300; }
.moment h2{ font-weight:300; letter-spacing:.03em; line-height:1.12; padding-bottom:.1em; }
.moment h2 em{ font-weight:400; }
.cta-h{ font-weight:300; letter-spacing:.03em; line-height:1.14; padding-bottom:.1em; }
.descent p{ font-weight:300; letter-spacing:.03em; line-height:1.24; }
.cap h3{ font-weight:400; letter-spacing:.015em; }
.stat .n{ font-weight:400; letter-spacing:.005em; }

/* the serif is lighter than the grotesque was — give it a little more size */
.hero-mark{ font-size: clamp(2.5rem, 8.6vw, 8.2rem); }
.moment h2{ font-size: clamp(3.4rem, 12vw, 12rem); }
.cta-h{ font-size: clamp(2.9rem, 8.4vw, 7.6rem); }

/* small caps voice, now sans rather than mono */
.lab,.hero-sub,.hero-eyebrow,.cue,#nav .nlink,.btn,.big-cta,.cta-alt,
.marquee .run span,.cap .tags li,.svc li,.plan .tier,.plan-ask,.plan-foot,
.about .facts div,.case .k,.case .result,.proof cite,.post-meta,
.postlist .date,.field label,.enquiry-note,.enquiry-done,#foot,#rail .rlbl{
  font-weight: 500;
}
.cap h3 .sub{ font-family: var(--body); font-weight:400; letter-spacing:-.005em; }

/* legibility where type sits over the lit canopy */
.beat .hero-mark,.beat .hero-sub,.beat .hero-eyebrow,
.moment h2,.moment p,.moment .pillars,.descent p,.descent .chain{
  text-shadow: 0 2px 26px rgba(4,10,8,.72), 0 1px 5px rgba(4,10,8,.55);
}


/* The page climbs back into the canopy at the end, so the closing CTA and
   footer sit over a lit sky — give them the same protection as the beats. */
#contact .lab,#contact .cta-h,#contact .cta-alt,#contact .big-cta,
#foot,#foot a,#foot .grow{
  text-shadow: 0 2px 24px rgba(4,10,8,.78), 0 1px 4px rgba(4,10,8,.6);
}
#contact .big-cta{
  background: rgba(4,10,8,.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ==========================================================================
   LIQUID GLASS
   Translucent surfaces that belong inside the forest rather than sitting on
   top of it. Headlines stay free of containers; only information sits in
   glass, so the hierarchy reads environment → headline → floating panel.
   ========================================================================== */
.glass{
  position: relative;
  isolation: isolate;
  border-radius: 15px 15px 17px 16px;          /* organic, not a pill */
  border: 1px solid rgba(239,233,219,.085);
  /* The stack, back to front: sky bounce on the upper-left, sun warmth,
     leaf-green from the canopy, ember seeping up from the roots, then the
     body of the glass. The first three fade out as you descend; the ember
     fades in. The surface is never one flat translucency. */
  background:
    radial-gradient(135% 105% at 26% -8%,
      rgba(var(--sky-light), calc(.085 * (1 - var(--depth)))) 0%,
      transparent 58%),
    radial-gradient(120% 120% at 88% -4%,
      rgba(var(--sun-light), calc(.055 * (1 - var(--depth)))) 0%,
      transparent 52%),
    radial-gradient(150% 130% at 12% 104%,
      rgba(var(--leaf-light), calc(.05 * (1 - var(--depth)))) 0%,
      transparent 60%),
    /* root light refracting up into the pane from underneath */
    radial-gradient(170% 95% at 50% 122%,
      rgba(var(--root-light),
        calc(var(--depth) * (.05 + var(--root-glow) * .26))) 0%,
      transparent 62%),
    linear-gradient(157deg,
      rgba(236,238,228,.052) 0%,
      rgba(236,238,228,.018) 38%,
      rgba(8,12,11,.05) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  box-shadow:
    inset 0 1px 0 rgba(240,244,232,.13),
    inset 0 -1px 0 rgba(6,10,9,.14),
    0 22px 50px -38px rgba(4,7,6,.8);
  transition: transform .6s var(--ease), border-color .6s var(--ease),
              backdrop-filter .6s var(--ease), background-color .6s var(--ease);
}
/* light reflected along the upper edge */
.glass::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  left:9%; right:9%; top:0; height:1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(245,248,238,.34) 32%,
    rgba(245,248,238,.34) 68%,
    transparent);
}
/* refraction that follows the pointer */
.glass::before{
  content:""; position:absolute; z-index:1; inset:-1px; pointer-events:none;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
    rgba(240,246,232,.085), rgba(240,246,232,.028) 38%, transparent 66%);
  opacity:0; transition: opacity .55s var(--ease);
}
.glass:hover::before,.glass:focus-within::before{ opacity:1; }
.glass:hover{
  transform: translateY(-2px);
  border-color: rgba(234,229,217,.15);
  -webkit-backdrop-filter: blur(20px) saturate(126%);
  backdrop-filter: blur(20px) saturate(126%);
}
.glass > *{ position:relative; z-index:3; }

/* Over the lit canopy the glass darkens instead of whitening, so it never
   turns into a frosted slab against bright foliage. */
.glass--shade{
  background:
    radial-gradient(135% 105% at 26% -8%,
      rgba(var(--sky-light), calc(.10 * (1 - var(--depth)))) 0%,
      transparent 56%),
    radial-gradient(150% 130% at 14% 106%,
      rgba(var(--leaf-light), calc(.07 * (1 - var(--depth)))) 0%,
      transparent 58%),
    radial-gradient(170% 95% at 50% 122%,
      rgba(var(--root-light),
        calc(var(--depth) * (.05 + var(--root-glow) * .24))) 0%,
      transparent 60%),
    linear-gradient(157deg,
      rgba(12,19,17,.36) 0%,
      rgba(12,19,17,.26) 45%,
      rgba(8,13,11,.34) 100%);
  border-color: rgba(239,233,219,.10);
}

/* Underground: deep smoked glass that catches the root light. --root-glow is
   driven by the same clock as the signals in the scene. */
.glass--deep{
  background:
    /* ember refracting up through the pane — the brighter the signal
       passing behind it, the deeper the light reaches into the glass */
    radial-gradient(180% 100% at 50% 124%,
      rgba(var(--root-light), calc(.07 + var(--root-glow) * .30)) 0%,
      rgba(var(--root-light), calc(.02 + var(--root-glow) * .10)) 34%,
      transparent 66%),
    radial-gradient(90% 70% at 18% 108%,
      rgba(255,150,70, calc(var(--root-glow) * .16)) 0%, transparent 60%),
    radial-gradient(90% 70% at 82% 112%,
      rgba(255,150,70, calc(var(--root-glow) * .12)) 0%, transparent 58%),
    linear-gradient(157deg,
      rgba(46,32,19,.30) 0%,
      rgba(20,22,19,.30) 46%,
      rgba(11,14,13,.38) 100%);
  border-color: rgba(224,160,92,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,214,164,.16),
    inset 0 -1px 0 rgba(5,8,7,.2),
    0 26px 60px -40px rgba(4,7,6,.88),
    0 0 calc(30px + var(--root-glow) * 46px) calc(var(--root-glow) * -14px)
      rgba(224,150,70, calc(.05 + var(--root-glow) * .16));
}
.glass--deep::after{
  background: linear-gradient(90deg,
    transparent,
    rgba(255,198,136, calc(.22 + var(--root-glow) * .4)) 34%,
    rgba(255,198,136, calc(.22 + var(--root-glow) * .4)) 66%,
    transparent);
}
.glass--deep::before{
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%),
    rgba(255,186,116,.12), rgba(255,186,116,.04) 40%, transparent 68%);
}

@media (prefers-reduced-motion: reduce){
  .glass,.glass:hover{ transform:none; }
  .glass::before{ display:none; }
}
/* backdrop-filter is the whole effect; without it, lean on opacity */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{ background: rgba(10,15,13,.82); }
  .glass--deep{ background: rgba(20,15,10,.84); }
}

/* ==========================================================================
   Capabilities — headline floats free, information rides in glass, and the
   panels alternate across the scroll so they pass you as you descend.
   ========================================================================== */
/* The five arrive one at a time. Each is a quiet numbered line until it
   reaches the reading band, then it takes the floor: the title lifts, the
   glass panel materialises beside it, and the one before it recedes. The
   collapsed rows stay short, so the section gains presence without
   costing five extra screens of scrolling. */
.caps{
  display:flex; flex-direction:column;
  gap: clamp(1.1rem, 2.4vh, 2rem);
  border-top:1px solid var(--line-soft);
}
.cap{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(1.15rem, 2.4vh, 2rem) 0;
  border-bottom:1px solid var(--line-soft);
  transition: opacity .8s var(--ease);
  opacity:.42;
}
.cap.is-active{ opacity:1; }
/* never let keyboard focus land on something dimmed */
.cap:focus-within{ opacity:1; }
.cap:focus-within .detail{ opacity:1; transform:none; }
@media (min-width: 900px){
  .cap{ grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); align-items:start; }
}
.cap .head{
  display:flex; flex-direction:column; gap:.5rem;
  transition: transform .9s var(--ease);
}
.cap.is-active .head{ transform: translateY(0); }
/* the detail panel is what actually reveals */
.cap .detail{
  opacity:0; transform: translateY(16px) scale(.988);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.cap.is-active .detail{ opacity:1; transform:none; }
.cap.is-active h3{ color:var(--bone); }
.cap h3{ color:var(--bone-dim); transition: color .8s var(--ease); }
/* the marker fills in as its discipline takes the floor */
.cap .idx{ position:relative; padding-left:1.7rem; }
.cap .idx::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:.95rem; height:1px; background:var(--bone-mute);
  transition: width .9s var(--ease), background-color .9s var(--ease);
}
.cap.is-active .idx::before{ width:1.25rem; background:var(--aurora); }
@media (prefers-reduced-motion: reduce){
  .cap,.cap .detail{ opacity:1; transform:none; }
}
.cap .idx{
  margin:0; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.24em; color:var(--bone-mute);
}
.cap h3{
  margin:0; font-family:var(--display); font-weight:400;
  font-size: clamp(1.9rem,2.5vw,2.5rem); line-height:1.16; letter-spacing:.012em;
}
.cap .sub{ margin:0; font-family:var(--body); font-size:.95rem; color:var(--sage); }
.cap .detail{ display:flex; flex-direction:column; gap:.7rem; }
.cap .detail p{ margin:0; color:var(--bone-dim); font-size:var(--fs-sm); }
.cap .detail p.lead{ color:var(--bone); font-size:1rem; }
.cap .tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin:auto 0 0; padding:0; list-style:none; }
.cap .tags li{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-mute); border:1px solid var(--line); border-radius:999px; padding:.3rem .62rem;
}

/* ==========================================================================
   Results — four number modules, nothing competing with the figures
   ========================================================================== */
/* This section happens underground. The figures are not cards in a row —
   they hang at different distances in the soil, connected by the same
   root system running behind them, and the further back a number sits
   the more the earth washes it out. */
#results{ position:relative; }
.stats{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
  gap: clamp(1.4rem,3vw,2.6rem);
  align-items:start;
}
/* the root run that threads the figures together */
.stats::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:4%; right:4%; top:38%; height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(224,150,70, calc(.16 + var(--root-glow) * .34)) 12%,
    rgba(224,150,70, calc(.07 + var(--root-glow) * .20)) 50%,
    rgba(224,150,70, calc(.16 + var(--root-glow) * .34)) 88%,
    transparent);
  filter: blur(.4px);
}
@media (max-width: 720px){ .stats::before{ display:none; } }

/* no pane: the figures hang in the soil itself */
.stat{
  position:relative; z-index:1;
  padding: clamp(1.4rem,3vw,2.2rem) 0 clamp(1.3rem,2.6vw,1.8rem);
}
/* depth: alternate figures sit further back in the soil */
.stat:nth-child(2){ transform: translateY(clamp(1.2rem,3.4vh,3rem)) scale(.955); opacity:.88; }
.stat:nth-child(3){ transform: translateY(clamp(.4rem,1.2vh,1.1rem)) scale(.985); opacity:.95; }
.stat:nth-child(4){ transform: translateY(clamp(1.8rem,4.6vh,4rem)) scale(.93);  opacity:.82; }
@media (max-width: 720px){
  .stat:nth-child(n){ transform:none; opacity:1; }
}
/* The run passes behind the figures themselves — that is the connection.
   No extra tick marks; they only read as debris at this scale. */

.stat .n{
  margin:0; font-family:var(--display); font-weight:400;
  font-size: clamp(4.2rem,9.4vw,8.6rem); line-height:.84; letter-spacing:.004em;
  font-variant-numeric: tabular-nums; display:flex; align-items:baseline;
  /* translucent: the soil shows through the figure itself, and the ember
     behind it bleeds into the strokes when a signal passes */
  color: rgba(239,233,219,.74);
  text-shadow:
    0 0 calc(26px + var(--root-glow) * 40px)
      rgba(224,150,70, calc(.07 + var(--root-glow) * .17)),
    0 1px 0 rgba(7,11,10,.5);
}
/* the further back a figure sits, the more soil there is in front of it */
.stat:nth-child(2) .n{ color: rgba(239,233,219,.60); }
.stat:nth-child(4) .n{ color: rgba(239,233,219,.52); }
.stat .n .suf{ font-size:.34em; letter-spacing:.02em; color:var(--amber); margin-left:.14em; }
.stat .d{
  margin:1.1rem 0 0; padding:0; border:0;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--bone-mute); max-width:18ch;
}
.proof{ margin-top: clamp(3.5rem,9vh,7rem); }
.proof blockquote{ padding: clamp(1.8rem,3.4vw,3rem); max-width:46ch; }
.proof cite{ color:var(--bone-mute); }

/* ==========================================================================
   Partnership — one panel, four groupings, no tier ladder
   ========================================================================== */
.partner{ padding: clamp(1.8rem,3.8vw,3.4rem); }
/* Four parts of one growth system, not four products. They share a single
   pane, and a living run of root light crosses behind all of them so the
   connection is visible rather than asserted. */
.partner-grid{
  position:relative;
  display:grid; grid-template-columns:1fr;
  gap: clamp(1.9rem,3.4vw,3.2rem);
}
@media (min-width: 680px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1080px){ .partner-grid{ grid-template-columns:repeat(4,1fr); } }

/* the connective run — a clear band above the four, never through them */
@media (min-width: 1080px){
  .partner-grid{ padding-top: 2.4rem; }
  .partner-grid::before{
    content:""; position:absolute; z-index:0; pointer-events:none;
    left:2%; right:2%; top:.7rem; height:1px;
    background:linear-gradient(90deg,
      transparent,
      rgba(159,180,146,.30) 10%,
      rgba(224,150,70, calc(.14 + var(--root-glow) * .32)) 50%,
      rgba(159,180,146,.30) 90%,
      transparent);
  }
}
.partner-grid > *{ position:relative; z-index:1; }
/* each part taps the shared run at the same point */
.pk{
  position:relative;
  margin:0 0 .9rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage);
}
/* each part taps the shared run at the same height — and a hairline
   drops from the run down into its own column */
.pk::before{
  content:""; position:absolute; left:0; top:-1.7rem;
  width:7px; height:7px; border-radius:50%;
  background:var(--void-2);
  border:1px solid rgba(159,180,146,.55);
  box-shadow:0 0 calc(5px + var(--root-glow) * 14px)
             rgba(224,150,70, calc(.22 + var(--root-glow) * .45));
}
.pk::after{
  content:""; position:absolute; left:3px; top:-1.2rem; width:1px; height:1.2rem;
  background:linear-gradient(180deg,
    rgba(159,180,146,.36), rgba(224,150,70, calc(.10 + var(--root-glow) * .22)));
}
@media (max-width: 1079px){ .pk::before,.pk::after{ display:none; } }
.partner-grid ul{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.partner-grid li{ color:var(--bone-dim); font-size:var(--fs-sm); }
.partner-foot{
  margin: clamp(2rem,4vh,3rem) 0 0; padding-top:1.3rem;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
  font-family:var(--mono); font-size:var(--fs-lab); letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-mute);
}
.plan-ask{
  margin-left:auto; font-family:var(--mono); font-size:var(--fs-lab);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.plan-ask:hover{ border-bottom-color:var(--amber); color:var(--amber); }
.plan-ask span{ display:inline-block; transition:transform .4s var(--ease); }
.plan-ask:hover span{ transform:translateX(4px); }

/* ==========================================================================
   Work — description panels sit under the image as glass
   ========================================================================== */
/* The caption is a narrow pane that overlaps the lower edge of the plate,
   so the writing belongs to the picture instead of being stacked beneath
   it. Kept deliberately small — the image carries the section. */
/* The caption carries the whole credit — kicker, title, note, result — as
   one restrained pane overlapping the foot of the plate. Nothing is
   printed over the photograph itself, so the image stays an image. */
.case .under{
  position:relative;
  display:flex; flex-direction:column; gap:.5rem;
  margin: calc(clamp(2rem,4.5vw,4rem) * -1) 0 0 0;
  margin-inline-start: clamp(1rem, 3vw, 3.4rem);
  width: min(44ch, 84%);
  padding: clamp(1.25rem,2.1vw,1.8rem) clamp(1.35rem,2.3vw,1.9rem);
}
@media (min-width: 880px){
  /* alternate which edge the caption hangs from, so the run of plates
     does not read as a template */
  .case:nth-child(even) .under{
    margin-inline-start:auto; margin-inline-end: clamp(1rem,3vw,3.4rem);
  }
}
@media (max-width: 879px){
  .case .under{ width:auto; margin-inline:0; margin-top:-1.6rem; }
}
.case .under p{ margin:0; color:var(--bone-dim); font-size:var(--fs-sm); }
.case .under .k{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-mute);
}
.case .under h3{
  margin:0; font-family:var(--display); font-weight:600;
  font-size: clamp(1.45rem,2.4vw,2.15rem); letter-spacing:-.032em; line-height:1.16;
  color:var(--bone);
}
.case .under .result{
  margin-top:.35rem; padding-top:.7rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--aurora);
}
/* without the overlay the plate no longer needs its heavy foot gradient */
.frame::after{
  background:linear-gradient(180deg,
    rgba(7,11,10,.10) 0%, transparent 34%, rgba(5,9,8,.42) 100%);
}

/* ==========================================================================
   Forms as a single glass surface rather than a grid of boxes
   ========================================================================== */
.enquiry{
  margin-top: clamp(3rem,7vh,5rem);
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  padding: clamp(.6rem,1.4vw,1.1rem);
  border:1px solid rgba(224,160,92,.13);
  background:
    linear-gradient(157deg, rgba(44,29,16,.30), rgba(16,17,14,.30) 46%, rgba(8,10,10,.38));
}
.enquiry-lab{
  grid-column:1/-1; margin:0; padding:.9rem 1rem 1.1rem; background:none;
}
.field{
  background:none; padding:.9rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.5rem;
  border-radius:10px;
  transition:background-color .45s var(--ease);
}
.field:focus-within{ background: rgba(224,160,92,.07); }
.field--submit{ background:none; }
.field input,.field textarea{ border-bottom-color: rgba(234,229,217,.16); }
.field input:focus,.field textarea:focus{ border-bottom-color: var(--amber); }
.enquiry-done{
  border-color: rgba(224,160,92,.3);
  background: rgba(30,22,12,.6);
  color: var(--amber);
}
.btn--solid{ border-color: var(--amber); color: var(--amber); }
.btn--solid::before{ background: var(--amber); }

/* navigation glass once it docks */
#head.docked{
  background: linear-gradient(180deg, rgba(9,13,12,.62), rgba(9,13,12,.34));
  border-bottom-color: rgba(234,229,217,.07);
}

/* Client portal — quiet, for existing clients rather than prospects */
.portal-link{
  font-family:var(--mono); font-size:var(--fs-lab); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute);
  padding:.35rem 0; white-space:nowrap;
  transition:color .3s var(--ease);
}
.portal-link:hover{ color:var(--sage); }
@media (max-width: 1000px){ #nav .portal-link{ display:none; } }