/* ==========================================================================
   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 ------------------------------------------------------------ */
  --void:      #070a09;   /* forest-black, not pure black                   */
  --void-2:    #0a0f0d;
  --charcoal:  #101614;
  --ash:       #1a201d;
  --ash-2:     #262e2a;
  --bone:      #eae5d9;   /* warm off-white, never #fff                     */
  --bone-dim:  #a9a99b;
  --bone-mute: #767a6e;
  --forest:    #163324;
  --moss:      #8aa47e;
  --sage:      #9fb492;
  --aurora:    #6fdca0;   /* accent, calmed down                            */
  --amber:     #e0a05c;   /* root light                                      */
  --ember:     #e8c58a;

  /* 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;

  --line:      rgba(234,229,217,.11);
  --line-soft: rgba(234,229,217,.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: 460vh;
  --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 */
#scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(180deg,
    rgba(5,9,10,.97) 0%,
    rgba(5,9,10,.95) 46%,
    rgba(5,9,10,.86) 66%,
    rgba(5,9,10,.55) 82%,
    rgba(5,9,10,.14) 93%,
    rgba(5,9,10,0)   100%);
}

/* vignette + film grain */
#atmos{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(125% 100% at 50% 48%, transparent 54%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply;
}
#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; }

.sec{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding-block: clamp(6rem, 13vh, 12rem);
  padding-inline: var(--gutter);
}
.sec--tight{ padding-block: clamp(4rem, 8vh, 7rem); }

.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(3rem,8vh,6.5rem);
  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 --------------------------------------------------------------- */
.work-grid{
  display:grid; grid-template-columns:1fr;
  gap: clamp(1.2rem,2.4vw,2rem);
}
@media (min-width: 760px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
.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(234,229,217,.085);
  background:
    linear-gradient(157deg,
      rgba(236,238,228,.058) 0%,
      rgba(236,238,228,.020) 38%,
      rgba(8,12,11,.055) 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(0,0,0,.14),
    0 22px 50px -38px rgba(0,0,0,.85);
  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:
    linear-gradient(157deg,
      rgba(10,16,14,.36) 0%,
      rgba(10,16,14,.26) 45%,
      rgba(6,10,9,.34) 100%);
  border-color: rgba(234,229,217,.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:
    linear-gradient(157deg,
      rgba(44,29,16,.30) 0%,
      rgba(16,17,14,.30) 46%,
      rgba(8,10,10,.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(0,0,0,.2),
    0 26px 60px -40px rgba(0,0,0,.9),
    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.
   ========================================================================== */
.caps{
  display:grid; gap: clamp(1rem,1.8vw,1.5rem);
  grid-template-columns:1fr;
}
@media (min-width: 700px){ .caps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1200px){
  .caps{ grid-template-columns:repeat(4,1fr); }
  /* five disciplines: the last runs double-width so the second row reads
     as a deliberate pair rather than an orphan */
  .cap:last-child{ grid-column: span 2; }
}
.cap{
  display:flex; flex-direction:column; gap:1rem;
  padding: clamp(1.4rem,2.2vw,1.9rem);
}
.cap .head{ display:flex; flex-direction:column; gap:.6rem; }
.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
   ========================================================================== */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
  gap: clamp(1rem,2vw,1.6rem);
}
.stat{ padding: clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,2.4vw,2rem) clamp(1.5rem,2.6vw,2rem); }
.stat .n{
  margin:0; font-family:var(--display); font-weight:400;
  font-size: clamp(3.4rem,7vw,6.2rem); line-height:.88; letter-spacing:.004em;
  font-variant-numeric: tabular-nums; display:flex; align-items:baseline;
  color:var(--bone);
}
.stat .n .suf{ font-size:.36em; 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 blockquote{ padding: clamp(1.6rem,3vw,2.6rem); max-width:44ch; }
.proof cite{ color:var(--bone-mute); }

/* ==========================================================================
   Partnership — one panel, four groupings, no tier ladder
   ========================================================================== */
.partner{ padding: clamp(1.6rem,3.4vw,3rem); }
.partner-grid{
  display:grid; grid-template-columns:1fr;
  gap: clamp(1.6rem,3vw,3rem);
}
@media (min-width: 680px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1080px){ .partner-grid{ grid-template-columns:repeat(4,1fr); } }
.pk{
  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);
}
.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
   ========================================================================== */
.case .under{ margin-top:1rem; padding: clamp(1.1rem,2vw,1.5rem); }
.case .under p{ margin:0; color:var(--bone-dim); font-size:var(--fs-sm); }

/* ==========================================================================
   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; } }