/* =====================================================================
   NOWILL.CO — ROOTWORK (blend, direction 5/5)
   ENGINE  = "One Unbroken Flight": the whole page is ONE blob-preloaded,
             scroll-scrubbed film — here the camera pushes DOWNWARD.
   SKIN    = Grounded's warm world; WORLD = a continuous descent beneath
             the surface through living earth (glowing roots → bedrock).
   ===================================================================== */

:root{
  /* --- dark-earth base --- */
  --void:      #0a0805;   /* deepest soil / near-black */
  --bark:      #120d08;   /* base bg */
  --soil:      #1c150d;   /* raised strata */
  --loam:      #281d11;   /* panels */
  --stone:     #35291b;   /* borders / lines */

  /* --- bioluminescent glow (this world's signature) --- */
  --amber:     #f5b544;   /* ember-amber glow (primary highlight) */
  --amber-hot: #ff8a3d;   /* hot ember (hovers) */
  --bio:       #6fd39a;   /* bioluminescent teal-green (root glow) */
  --bio-deep:  #2f7d5b;   /* deep moss glow */
  --myco:      #cfe8d6;   /* pale mycelium thread */

  /* --- text --- */
  --parch:     #ece2cf;   /* warm parchment, primary text */
  --haze:      #b0a184;   /* muted secondary */
  --dim:       #7c6f57;   /* faint / eyebrow on dark */

  --maxw: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --serif: 'Fraunces', Georgia, serif;
  --mono:  'Spline Sans Mono', ui-monospace, monospace;
  --sans:  'Inter', -apple-system, 'Helvetica Neue', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--void); }
body{
  margin:0;
  background:var(--void);
  color:var(--parch);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
em{ font-style:italic; }
img{ display:block; max-width:100%; }

/* deep radial base so the whole page sits in warm underground gloom */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(245,181,68,.06), transparent 55%),
    radial-gradient(120% 90% at 50% 120%, rgba(47,125,91,.10), transparent 55%),
    var(--void);
}

/* =================== LOADER =================== */
.loader{
  position:fixed; inset:0; z-index:120;
  background:radial-gradient(80% 60% at 50% 42%, #16100a, var(--void) 75%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease);
}
.loader.done{ opacity:0; pointer-events:none; }
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader__root{
  stroke-dasharray:520; stroke-dashoffset:520;
  animation:rootDraw 1.8s var(--ease) .15s forwards;
  filter:drop-shadow(0 0 8px rgba(111,211,154,.4));
}
.loader__seed{
  opacity:0; transform-origin:center;
  animation:seedLight .7s ease 1.5s forwards;
  filter:drop-shadow(0 0 10px rgba(245,181,68,.9));
}
@keyframes rootDraw{ to{ stroke-dashoffset:0; } }
@keyframes seedLight{ 0%{opacity:0; r:3;} 100%{opacity:1;} }
.loader__meta{ display:flex; align-items:baseline; gap:14px; }
.loader__word{ font-family:var(--mono); font-size:12px; letter-spacing:.5em; color:var(--haze); }
.loader__count{ font-family:var(--mono); font-size:12px; color:var(--amber); }
.loader__count i{ font-style:normal; }

/* =================== THE CINEMA STAGE — the descent film =================== */
.stage{ position:fixed; inset:0; z-index:1; background:var(--void); }
.stage video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; will-change:opacity;
}

/* =================== GLUE LAYERS =================== */
/* dark-earth grade + amber-top / moss-bottom two-tone */
.grade{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(245,181,68,.14), transparent 52%),
    radial-gradient(120% 90% at 50% 112%, rgba(47,125,91,.16), transparent 55%),
    linear-gradient(180deg, rgba(10,8,5,.32), transparent 20%, transparent 74%, rgba(10,8,5,.5));
}
/* subsurface fog — soft drifting haze that thickens as you descend (JS moves --fog) */
.fog{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(207,232,214,.05), transparent 60%),
    radial-gradient(70% 46% at 80% 70%, rgba(245,181,68,.05), transparent 62%);
  mix-blend-mode:screen;
}
#roots{ position:fixed; inset:0; z-index:4; pointer-events:none; opacity:.9; }
#motes{ position:fixed; inset:0; z-index:5; pointer-events:none; }
#grain{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:.5; mix-blend-mode:overlay; }
.vignette{
  position:fixed; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(120% 118% at 50% 46%, transparent 52%, rgba(6,4,2,.7) 100%);
}

/* =================== COPY OVERLAYS (pixel-locked per beat) =================== */
.copy{ position:fixed; inset:0; z-index:12; pointer-events:none; }
.beat{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 8vw; opacity:0;
  will-change:opacity, transform;
}
.beat--center{ align-items:center; text-align:center; }
.beat--right{ align-items:flex-end; text-align:right; }

.beat .eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--bio); margin-bottom:22px;
  text-shadow:0 1px 6px rgba(6,4,2,.9), 0 2px 22px rgba(6,4,2,.9);
}
.beat h2{
  margin:0; font-family:var(--serif); font-weight:330; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(40px, 5.6vw, 94px);
  max-width:16ch; text-wrap:balance; color:var(--parch);
  text-shadow:0 3px 40px rgba(6,4,2,.8);
}
.beat--center h2, .beat--right h2{ max-width:20ch; }
.beat h2 em{
  font-style:italic;
  background:linear-gradient(120deg, var(--amber), var(--bio) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.beat p{
  margin:24px 0 0; max-width:46ch;
  font-size:clamp(15px, 1.2vw, 19px); line-height:1.62; color:#d9cbb0;
  text-shadow:0 1px 6px rgba(6,4,2,.92), 0 2px 26px rgba(6,4,2,.9);
}

/* =================== CTA =================== */
.cta{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 34px; border-radius:999px;
  border:1px solid rgba(245,181,68,.42);
  color:var(--parch); background:rgba(24,16,9,.4);
  backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-decoration:none;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.cta:hover{ background:rgba(245,181,68,.16); border-color:var(--amber); box-shadow:0 0 26px rgba(245,181,68,.35); color:var(--amber); }

/* =================== CHROME (header, rail, hint, depth gauge) =================== */
.head{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(18px,8vw,64px);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--parch); }
.brand svg{ flex:none; }
.brand__word{ font-family:var(--mono); font-size:12px; letter-spacing:.34em; }

.depth{ display:flex; align-items:center; gap:10px; }
.depth__label{ font-family:var(--mono); font-size:9px; letter-spacing:.34em; color:var(--dim); }
.depth__bar{ position:relative; width:80px; height:2px; background:var(--stone); border-radius:2px; overflow:hidden; }
.depth__bar i{
  position:absolute; inset:0 100% 0 0; display:block;
  background:linear-gradient(90deg, var(--bio-deep), var(--bio), var(--amber));
  box-shadow:0 0 8px rgba(111,211,154,.7);
}
.depth__num{ font-family:var(--mono); font-size:10px; color:var(--haze); min-width:44px; text-align:right; }

.rail{
  position:fixed; top:50%; right:26px; transform:translateY(-50%);
  width:1px; height:32vh; z-index:40; background:rgba(124,111,87,.3);
}
.rail__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--bio), var(--amber));
  box-shadow:0 0 12px rgba(245,181,68,.7);
}
.railpct{
  position:fixed; top:calc(50% + 18vh); right:18px; z-index:40;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--dim);
}
.hint{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:40;
  font-family:var(--mono); font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--haze);
  animation:hint 2.6s ease-in-out infinite; transition:opacity .6s var(--ease);
}
.hint.gone{ opacity:0 !important; animation:none; }
@keyframes hint{
  0%,100%{ opacity:.28; transform:translateX(-50%) translateY(0); }
  50%{ opacity:.9; transform:translateX(-50%) translateY(7px); }
}

/* =================== GROUND FLOOR (post-film) =================== */
.post{
  position:relative; z-index:10;
  background:linear-gradient(180deg, rgba(10,8,5,0) 0, var(--bark) 14vh);
  padding-top:18vh;
}
.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--bio);
  margin-bottom:20px; display:block;
}
.post h2{
  margin:0; font-family:var(--serif); font-weight:330; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(32px, 4.4vw, 66px); text-wrap:balance; color:var(--parch);
}
.post h2 em{
  font-style:italic;
  background:linear-gradient(120deg, var(--amber), var(--bio) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* --- 5 · the root system --- */
.services{ position:relative; padding:12vh clamp(20px,6vw,90px) 14vh; background:var(--bark); overflow:hidden; }
.services__atmos{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 30% at 16% 8%, rgba(47,125,91,.16), transparent 60%),
    radial-gradient(50% 34% at 86% 62%, rgba(245,181,68,.10), transparent 60%);
}
.services__head{ position:relative; z-index:2; max-width:60ch; margin:0 auto 7vh; }
.services__head p{ color:var(--haze); font-size:clamp(15px,1.15vw,18px); line-height:1.62; margin:20px 0 0; }
.services__run{
  position:relative; z-index:2; list-style:none; margin:0 auto; padding:0; max-width:var(--maxw);
}
/* the descending root spine */
.services__run::before{
  content:''; position:absolute; top:0; bottom:0; left:32px; width:2px;
  background:linear-gradient(180deg, transparent, var(--bio-deep) 6%, var(--bio-deep) 94%, transparent);
  opacity:.55;
}
.svc{
  position:relative; display:flex; gap:clamp(22px,4vw,54px);
  padding:clamp(28px,4.4vw,50px) 0 clamp(28px,4.4vw,50px) 74px;
  border-bottom:1px solid rgba(53,41,27,.55);
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.svc.in{ opacity:1; transform:none; }
.svc:last-child{ border-bottom:none; }
.svc__node{
  position:absolute; left:24px; top:calc(clamp(28px,4.4vw,50px) + .55em);
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--bio), var(--bio-deep) 60%, #123 100%);
  box-shadow:0 0 0 1px var(--stone), 0 0 16px rgba(111,211,154,.55);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.svc:hover .svc__node{ box-shadow:0 0 0 1px var(--amber), 0 0 26px rgba(245,181,68,.8); transform:scale(1.18); }
.svc.anchor .svc__node{
  background:radial-gradient(circle at 40% 35%, var(--amber), var(--amber-hot) 65%, #4a2b0c 100%);
  box-shadow:0 0 0 1px var(--amber), 0 0 26px rgba(245,181,68,.75);
}
.svc__no{ font-family:var(--mono); font-size:12px; color:var(--dim); padding-top:.4em; min-width:2ch; }
.svc__body h3{ margin:0 0 8px; font-family:var(--serif); font-weight:400; font-size:clamp(20px,2vw,30px); color:var(--parch); }
.svc__body p{ margin:0; color:var(--haze); font-size:15px; line-height:1.58; max-width:60ch; }
.svc__body p em{ color:var(--myco); font-style:normal; }

/* --- 6 · why / bedrock --- */
.why{ position:relative; padding:12vh clamp(20px,6vw,90px); background:linear-gradient(180deg, var(--bark), var(--soil)); }
.why__head{ max-width:var(--maxw); margin:0 auto 6vh; }
.why__grid{
  list-style:none; margin:0 auto; padding:0; max-width:var(--maxw);
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  background:var(--stone); border:1px solid var(--stone); border-radius:14px; overflow:hidden;
}
.why__grid li{ background:var(--bark); padding:clamp(26px,3.4vw,42px); display:flex; flex-direction:column; gap:12px; }
.why__k{ font-family:var(--serif); font-size:clamp(18px,1.7vw,24px); color:var(--amber); font-weight:400; }
.why__v{ color:var(--haze); font-size:15px; line-height:1.6; }
.why__v em{ color:var(--myco); font-style:normal; }

/* --- 7 · process --- */
.process{ padding:12vh clamp(20px,6vw,90px); background:var(--soil); }
.process__head{ max-width:var(--maxw); margin:0 auto 6vh; }
.process__run{
  list-style:none; margin:0 auto; padding:0; max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
}
.pstep{ position:relative; padding-top:26px; border-top:1px solid var(--stone); }
.pstep__num{ font-family:var(--mono); font-size:12px; color:var(--bio); letter-spacing:.2em; }
.pstep h3{ margin:14px 0 10px; font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.9vw,27px); color:var(--parch); }
.pstep p{ margin:0; color:var(--haze); font-size:15px; line-height:1.62; }

/* --- 8 · contact / the core --- */
.contact{ position:relative; padding:18vh clamp(20px,6vw,90px); text-align:center; background:linear-gradient(180deg, var(--soil), var(--void)); overflow:hidden; }
.contact__glow{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:80vw; height:80vw; max-width:900px; max-height:900px; pointer-events:none;
  background:radial-gradient(circle, rgba(245,181,68,.2), rgba(47,125,91,.08) 42%, transparent 68%);
  filter:blur(10px);
}
.contact__inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.contact h2{ font-family:var(--serif); font-weight:330; line-height:1.02; font-size:clamp(38px,6vw,84px); letter-spacing:-.02em; color:var(--parch); margin:0; }
.contact h2 em{ font-style:italic; background:linear-gradient(120deg, var(--amber), var(--bio) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.contact p{ color:var(--haze); max-width:48ch; margin:24px auto 0; font-size:clamp(15px,1.15vw,18px); line-height:1.62; }
.cta--big{ margin-top:40px; font-size:18px; letter-spacing:.04em; }
.contact__note{ font-size:13px !important; color:var(--dim) !important; margin-top:22px !important; }

/* --- footer --- */
.footer{ background:var(--void); padding:8vh clamp(20px,6vw,90px) 6vh; border-top:1px solid var(--stone); }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 2fr; gap:clamp(30px,5vw,80px); }
.footer__brand{ display:flex; flex-direction:column; gap:14px; }
.footer__mark{ opacity:.9; }
.footer__word{ font-family:var(--mono); font-size:13px; letter-spacing:.3em; color:var(--parch); }
.footer__tag{ color:var(--haze); font-size:14px; line-height:1.6; max-width:38ch; margin:0; }
.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__h{ font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:14px; }
.footer__col a{ display:block; color:var(--haze); text-decoration:none; font-size:14px; padding:5px 0; transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--amber); }
.footer__line{ display:block; color:var(--dim); font-size:13px; padding-top:8px; }
.footer__bottom{ max-width:var(--maxw); margin:6vh auto 0; padding-top:4vh; border-top:1px solid var(--stone); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--dim); font-size:12px; }
.footer__seal{ font-family:var(--mono); letter-spacing:.06em; }

/* =================== RESPONSIVE =================== */
@media (max-width:900px){
  .why__grid{ grid-template-columns:1fr; }
  .process__run{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__nav{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .beat{ padding:0 7vw; }
  .beat h2{ font-size:clamp(32px, 9vw, 46px); }
  .beat p{ font-size:15px; }
  .rail, .railpct{ display:none; }
  .depth{ display:none; }
  .svc{ padding-left:58px; gap:0; flex-wrap:wrap; }
  .svc__node{ left:14px; }
  .services__run::before{ left:22px; }
  .svc__no{ width:100%; padding-bottom:6px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion:reduce){
  .hint{ animation:none; }
  .loader__root, .loader__seed{ animation:none; stroke-dashoffset:0; opacity:1; }
  .svc{ opacity:1; transform:none; transition:none; }
}