/* ============================================================
   Nowill — THE PATH (blend b1)
   ENGINE  = "One Unbroken Flight" (nowill-flight-film): the whole
             page is ONE scroll-scrubbed film; copy beats ride on top.
   SKIN    = Grounded's warm world (nowill-landing-organic): golden
             hour, bark/soil/moss/clay/amber/parch, Fraunces + Inter,
             film-grain, warm fog. Motes are warm embers, not teal.
   WORLD   = The woodland walk, dawn -> golden hour, each service a
             clearing. Copy carried over from mockups-grounded/g1-path.
   ============================================================ */
:root {
  /* --- Grounded earthy palette (honored) --- */
  --bark:   #171310;   /* deepest near-black brown, base */
  --bark2:  #1f1a13;
  --soil:   #2a2118;   /* surfaces / cards */
  --soil2:  #352a1e;
  --moss:   #5d6b46;
  --moss-d: #3a4530;
  --clay:   #c06a3d;   /* terracotta — primary accent */
  --ember:  #d8744a;
  --amber:  #e0a85a;   /* golden light glow */
  --amber-l:#f0c884;
  --parch:  #ece2cd;   /* primary text on dark */
  --haze:   #b9a98c;   /* muted secondary text */
  --line:   rgba(236, 226, 205, 0.14);

  --font-disp: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bark); }
body {
  margin: 0;
  background: var(--bark);
  color: var(--parch);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- loader: the mark draws itself, then the film begins ---- */
.loader {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(120% 120% at 50% 40%, #241c14 0%, var(--bark) 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s ease;
}
.loader.done { opacity: 0; pointer-events: none; }
.loader__path {
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: draw 1.5s cubic-bezier(0.6, 0, 0.2, 1) 0.2s forwards;
}
.loader__dot { opacity: 0; animation: dot 0.5s ease 1.55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot  { to { opacity: 1; } }

/* ---- the cinema stage (the one film) ---- */
.stage { position: fixed; inset: 0; z-index: 1; background: var(--bark); }
.stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  will-change: opacity;
}

/* ---- glue layers: warm grade, motes, grain, vignette ---- */
.grade {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(240, 200, 132, 0.12), transparent 46%),
    radial-gradient(130% 100% at 50% 116%, rgba(192, 106, 61, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(23, 19, 16, 0.32), transparent 20%, transparent 74%, rgba(23, 19, 16, 0.42));
}
#motes { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#grain { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; }
.vignette {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(118% 118% at 50% 46%, transparent 55%, rgba(15, 11, 8, 0.6) 100%);
}

/* ---- copy overlays (one per beat) ---- */
.copy { position: fixed; inset: 0; z-index: 10; 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;
}
/* directional legibility scrim — darkens only the side the copy sits on,
   so bright golden frames never wash out the text */
.beat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(15, 11, 8, 0.62) 0%, rgba(15, 11, 8, 0.34) 34%, transparent 62%);
}
.beat--center { align-items: center; text-align: center; }
.beat--center::before {
  background: radial-gradient(120% 80% at 50% 55%, rgba(15, 11, 8, 0.5) 0%, rgba(15, 11, 8, 0.2) 46%, transparent 72%);
}
.beat--right  { align-items: flex-end; text-align: right; }
.beat--right::before {
  background: linear-gradient(260deg, rgba(15, 11, 8, 0.62) 0%, rgba(15, 11, 8, 0.34) 34%, transparent 62%);
}

.beat .eyebrow {
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--amber-l); margin-bottom: 20px;
  text-shadow: 0 1px 6px rgba(15, 11, 8, 0.9), 0 2px 22px rgba(15, 11, 8, 0.9);
}
.beat h2 {
  margin: 0; font-family: var(--font-disp);
  font-weight: 340; font-optical-sizing: auto;
  letter-spacing: -0.015em; line-height: 1.04;
  font-size: clamp(38px, 5.4vw, 92px);
  max-width: 15ch; text-wrap: balance;
  color: var(--parch);
  text-shadow: 0 2px 30px rgba(15, 11, 8, 0.72), 0 1px 3px rgba(15, 11, 8, 0.6);
}
.beat h2 em { font-style: italic; color: var(--amber-l); }
.beat--center h2, .beat--right h2 { max-width: 20ch; }
.beat p {
  margin: 22px 0 0; max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 19px); line-height: 1.62;
  color: #e6d8bf;
  text-shadow: 0 1px 6px rgba(15, 11, 8, 0.92), 0 2px 26px rgba(15, 11, 8, 0.9);
}
.cta {
  pointer-events: auto;
  margin-top: 38px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 34px;
  border-radius: 999px;
  color: var(--bark);
  background: linear-gradient(135deg, var(--amber-l), var(--clay));
  box-shadow: 0 10px 30px rgba(192, 106, 61, 0.35);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.4s var(--ease, ease), box-shadow 0.4s ease, filter 0.4s ease;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 40px rgba(216, 116, 74, 0.5); }

/* ---- chrome ---- */
.brand {
  position: fixed; top: 26px; left: 8vw; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-disp);
  font-size: 15px; letter-spacing: 0.16em;
  color: var(--parch);
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(15, 11, 8, 0.7);
}
.brand svg { flex: none; }
.rail {
  position: fixed; top: 50%; right: 26px; transform: translateY(-50%);
  width: 2px; height: 34vh; z-index: 20;
  background: rgba(236, 226, 205, 0.18); border-radius: 2px;
}
.rail__fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--amber-l), var(--clay));
  box-shadow: 0 0 12px rgba(224, 168, 90, 0.7);
  border-radius: 2px;
}
.railpct {
  position: fixed; top: calc(50% + 19vh); right: 16px; z-index: 20;
  font-size: 10px; letter-spacing: 0.2em; color: var(--haze);
}
.hint {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 20;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--amber-l);
  animation: hint 2.6s ease-in-out infinite;
  transition: opacity 0.6s ease;
  text-shadow: 0 1px 8px rgba(15, 11, 8, 0.8);
}
.hint.gone { opacity: 0 !important; animation: none; }
@keyframes hint {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.9; transform: translateX(-50%) translateY(6px); }
}

/* ---- after the film: the ground floor ---- */
.post {
  position: relative; z-index: 8;
  background: linear-gradient(180deg, rgba(23, 19, 16, 0) 0, var(--bark) 16vh);
  padding-top: 18vh;
}
.post .eyebrow {
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 20px;
}
.post h2 {
  margin: 0; font-family: var(--font-disp); font-weight: 340;
  letter-spacing: -0.015em; line-height: 1.08;
  font-size: clamp(32px, 4.2vw, 66px); text-wrap: balance;
  color: var(--parch);
}
.post h2 em { font-style: italic; color: var(--amber); }
.post > section { padding: 12vh 8vw; }

.services__head { max-width: 60ch; margin-bottom: 8vh; }
.services__head p { color: var(--haze); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.62; margin: 20px 0 0; }
.services__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.svc {
  position: relative; overflow: hidden; border-radius: 14px;
  grid-column: span 3; height: 38vh; min-height: 280px;
  border: 1px solid var(--line);
  background: var(--soil);
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: calc(var(--i) * 60ms);
}
.svc--wide { grid-column: span 6; height: 46vh; min-height: 340px; }
.svc.in { opacity: 1; transform: none; }
.svc__plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.svc:hover .svc__plate { transform: scale(1.11); }
.svc__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 19, 16, 0.06) 28%, rgba(23, 19, 16, 0.86) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(23, 19, 16, 0.5), transparent 55%);
}
.svc__copy { position: absolute; left: 28px; right: 28px; bottom: 26px; }
.svc__copy span { font-size: 11px; letter-spacing: 0.3em; color: var(--amber-l); }
.svc__copy h3 {
  margin: 11px 0 8px; font-family: var(--font-disp);
  font-size: clamp(21px, 1.9vw, 30px); font-weight: 380; letter-spacing: 0;
  color: var(--parch);
  text-shadow: 0 1px 14px rgba(15, 11, 8, 0.8);
}
.svc__copy p {
  margin: 0; font-size: 14px; line-height: 1.55; color: #d8c9ac; max-width: 54ch;
  text-shadow: 0 1px 10px rgba(15, 11, 8, 0.9);
}
.svc__copy em { font-style: italic; color: var(--amber-l); }

/* ---- why / process strip ---- */
.why { border-top: 1px solid var(--line); }
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 7vh;
}
.why__item h3 {
  margin: 0 0 10px; font-family: var(--font-disp); font-weight: 360;
  font-size: clamp(19px, 1.6vw, 25px); color: var(--parch);
}
.why__item p { margin: 0; color: var(--haze); font-size: 15px; line-height: 1.62; max-width: 44ch; }
.why__item .mk { font-size: 11px; letter-spacing: 0.3em; color: var(--clay); text-transform: uppercase; display: block; margin-bottom: 14px; }

.contact { text-align: center; padding: 17vh 8vw !important; border-top: 1px solid var(--line); }
.contact p { color: var(--haze); max-width: 48ch; margin: 22px auto 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.62; }
.contact .cta { margin-top: 40px; }
.contact__slogan { margin-top: 42px !important; font-family: var(--font-disp); font-style: italic; color: var(--amber); font-size: clamp(16px, 1.4vw, 21px); }

.footer {
  border-top: 1px solid var(--line);
  padding: 7vh 8vw 9vh;
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  justify-content: space-between;
}
.footer__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-disp); font-size: 15px; letter-spacing: 0.12em; }
.footer__line { color: var(--haze); font-size: 13px; letter-spacing: 0.02em; }
.footer__meta { color: #8a7960; font-size: 12px; }

@media (max-width: 720px) {
  .beat { padding: 0 7vw; }
  .beat h2 { font-size: clamp(30px, 9vw, 46px); }
  .beat p { font-size: 15px; }
  .rail, .railpct { display: none; }
  .brand { left: 6vw; font-size: 13px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .services__grid { grid-template-columns: repeat(6, 1fr); }
  .svc, .svc--wide { grid-column: span 6; height: 34vh; min-height: 240px; }
  .svc__copy { left: 22px; right: 22px; bottom: 20px; }
  .why__grid { grid-template-columns: 1fr; gap: 30px; }
  .post > section { padding: 11vh 7vw; }
}

/* ---- reduced motion: one warm parked hero frame, then static readable copy ---- */
@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; display: none; }
  /* the film becomes a single hero plate at the top; grade/vignette/grain
     only dress that first viewport, then the copy flows on solid bark below */
  body.reduced .stage { position: absolute; top: 0; left: 0; right: 0; height: 100vh; }
  body.reduced .grade,
  body.reduced .vignette,
  body.reduced #grain,
  body.reduced #motes { position: absolute; top: 0; height: 100vh; }
  body.reduced .copy { position: static; }
  body.reduced .beat {
    position: static; opacity: 1 !important; transform: none !important;
    min-height: auto; padding: 7vh 8vw;
  }
  body.reduced .beat::before { display: none; }
  /* first beat sits over the parked hero frame; the rest read on bark */
  body.reduced .beat:first-child { min-height: 100vh; justify-content: flex-end; padding-bottom: 12vh; }
  body.reduced .beat:not(:first-child) { background: var(--bark); }
  body.reduced .beat:not(:first-child) h2,
  body.reduced .beat:not(:first-child) p { text-shadow: none; }
  body.reduced .rail, body.reduced .railpct { display: none; }
}