/* THE HEADLAND — journey cut styling.
   Brand: BRAND-the-headland.md. Bone ground / sea ink / one teal accent.
   Light body = The Build (bone stage). Dark body = The Crown (ink stage). */

:root{
  --bone:#F2EDE1; --near-white:#FBF9F4; --ink:#12242C; --teal:#004251; --sand:#D7B690;
  --serif:'Gilda Display',Georgia,'Times New Roman',serif;
  --grot:'Jost','Avenir Next','Century Gothic',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--grot);font-weight:300;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  background:var(--bone);color:var(--ink);
}
body.dark{background:var(--ink);color:var(--near-white)}
a{color:inherit;text-decoration:none}

/* ---- fixed chrome ---- */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:18px clamp(18px,4vw,40px);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  pointer-events:auto;
}
/* legible over moving film, in the brand's own device: type sits on a ground */
body.light .chrome{background:linear-gradient(rgba(242,237,225,.96) 55%,rgba(242,237,225,0))}
body.dark  .chrome{background:linear-gradient(rgba(18,36,44,.96) 55%,rgba(18,36,44,0))}
.chrome-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.chrome-nav a{opacity:.66;transition:opacity .3s,border-color .3s;padding:4px 0;border-bottom:1px solid transparent}
.chrome-nav a:hover{opacity:1}
.chrome-nav a[aria-current="page"]{opacity:1;border-bottom-color:currentColor}
.chrome-nav a:focus-visible{outline:1px solid currentColor;outline-offset:4px;opacity:1}
.chrome-cta{opacity:1 !important;border:1px solid currentColor;padding:9px 18px !important;border-bottom-color:currentColor !important}
body.light .chrome-cta:hover{background:var(--teal);border-color:var(--teal);color:var(--near-white)}
body.dark  .chrome-cta:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.chrome a,.chrome span{pointer-events:auto}
.wordmark{font-family:var(--serif);font-size:17px;letter-spacing:.3em}
.chrome-mid{opacity:.72}
.chrome-right{opacity:.72;transition:opacity .3s}
.chrome-right:hover{opacity:1}
body.light .chrome{color:var(--ink)}
body.dark .chrome{color:var(--near-white)}

/* ---- scene rail (engine-filled) ---- */
.scrub-rail{
  position:fixed;right:clamp(14px,3vw,32px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:14px;align-items:flex-end;
}
.scrub-rail button{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--grot);font-weight:400;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 0 4px 22px;position:relative;
  color:currentColor;opacity:.64;transition:opacity .35s;
}
.scrub-rail button::before{
  content:"";position:absolute;left:0;top:50%;width:14px;height:1px;
  background:currentColor;opacity:.6;transition:width .35s;
}
.scrub-rail button:hover{opacity:.8}
.scrub-rail button[aria-current="true"]{opacity:1}
.scrub-rail button[aria-current="true"]::before{width:22px}
.scrub-rail button:focus-visible{outline:1px solid var(--teal);outline-offset:3px;opacity:1}
body.dark .scrub-rail button[aria-current="true"]{color:var(--near-white)}

/* ---- the scrub stage ---- */
.cinematic{height:600vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#frame-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.grade{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 clamp(80px,14vw,220px) rgba(18,36,44,.28);
}
body.dark .grade{box-shadow:inset 0 0 clamp(80px,14vw,220px) rgba(0,0,0,.5)}

/* ---- overlay copy (engine drives .reveal-line via data-in/data-out) ---- */
.overlay{
  position:absolute;left:clamp(20px,6vw,90px);bottom:clamp(90px,13vh,150px);
  right:clamp(20px,6vw,90px);z-index:20;pointer-events:none;
  display:grid;
}
.line{
  grid-area:1/1;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,4vw,58px);line-height:1.12;letter-spacing:.005em;
  max-width:16ch;text-wrap:balance;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.line.is-in{opacity:1;transform:none}
body.light .line{color:var(--ink);text-shadow:0 1px 30px rgba(242,237,225,.55)}
body.dark .line{color:var(--near-white);text-shadow:0 1px 30px rgba(0,0,0,.45)}

/* ---- view proof: architectural annotation, never a dashboard ---- */
.proof{
  position:absolute;left:clamp(20px,6vw,90px);bottom:clamp(44px,7vh,74px);z-index:22;
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.hud-lab,.hud-metric{
  opacity:.72;padding-left:26px;position:relative;
}
.hud-lab::before,.hud-metric::before{
  content:"";position:absolute;left:0;top:.55em;width:16px;height:1px;background:currentColor;opacity:.7;
}
body.light .proof{color:var(--teal)}
body.dark .proof{color:var(--sand)}
.hud-metric[hidden]{display:none}

/* ---- progress + hint ---- */
.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.14;z-index:24}
.progress-fill{height:100%;width:0;background:currentColor;opacity:.9}
body.light .progress-fill{background:var(--teal)}
body.dark .progress-fill{background:var(--sand)}
.scroll-hint{
  position:absolute;right:clamp(20px,6vw,90px);bottom:clamp(44px,7vh,74px);z-index:22;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;
  transition:opacity .4s;
}
.scroll-hint.hide{opacity:0}

/* ---- outro ---- */
.outro{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,10vw,140px) clamp(20px,6vw,90px) clamp(80px,10vw,130px);
}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;margin-bottom:22px}
.outro h1,
.outro h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,4vw,52px);line-height:1.12;max-width:22ch;text-wrap:balance;
}
.lede{margin-top:22px;max-width:52ch;opacity:.66;font-size:16px;line-height:1.6}
.acts{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.next{margin-top:clamp(36px,5vw,56px);display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:currentColor;border:1px solid currentColor}
body.light .next{background:rgba(18,36,44,.16);border-color:rgba(18,36,44,.16)}
body.dark  .next{background:rgba(251,249,244,.16);border-color:rgba(251,249,244,.16)}
.next-card{display:flex;flex-direction:column;gap:8px;padding:26px 24px 30px;transition:background .3s}
body.light .next-card{background:var(--bone)} body.dark .next-card{background:var(--ink)}
body.light .next-card:hover{background:#EDE7D8} body.dark .next-card:hover{background:#1A2E37}
.nc-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.nc-t{font-family:var(--serif);font-size:22px;line-height:1.15}
.nc-d{font-size:14px;line-height:1.5;opacity:.66;max-width:32ch}
body.light .nc-k{color:var(--teal);opacity:1} body.dark .nc-k{color:var(--sand);opacity:1}
.cta{
  display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 32px;border:1px solid currentColor;
  transition:background .35s,color .35s,border-color .35s;
}
body.light .cta:hover{background:var(--teal);border-color:var(--teal);color:var(--near-white)}
body.dark .cta:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}

/* ---- footer ---- */
.demo-footer{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:26px clamp(20px,6vw,90px) 40px;
  border-top:1px solid currentColor;
  font-size:11.5px;letter-spacing:.05em;opacity:.68;line-height:1.6;
}
.demo-footer{border-color:rgba(18,36,44,.16)}
body.dark .demo-footer{border-color:rgba(251,249,244,.16)}
.demo-footer a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){
  .chrome{gap:12px;padding:14px 18px}
  .chrome-nav{gap:12px;font-size:11px}
  .chrome-cta{padding:7px 14px !important}
}
@media (max-width:620px){
  .chrome-nav a:not(.chrome-cta){display:none}
  .scrub-rail{display:none}
  .line{font-size:clamp(22px,7vw,34px);max-width:none}
  .proof{font-size:10px;letter-spacing:.16em;gap:12px}
  .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .line{transition:none}
}

/* ---- fact sheet downloads ---- */
.downloads{padding:0 clamp(20px,6vw,90px) clamp(80px,10vw,130px)}
.downloads h1,
.downloads h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.12}
.downloads .eyebrow{margin-bottom:18px}
.dl-grid{margin-top:clamp(28px,4vw,44px);display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid rgba(18,36,44,.16);background:rgba(18,36,44,.16)}
body.dark .dl-grid{border-color:rgba(251,249,244,.16);background:rgba(251,249,244,.16)}
.dl{display:flex;flex-direction:column;gap:8px;padding:22px 22px 28px;transition:background .3s}
body.light .dl{background:var(--bone)} body.dark .dl{background:var(--ink)}
body.light .dl:hover{background:#EDE7D8} body.dark .dl:hover{background:#1A2E37}
.dl-thumb{display:block;margin-bottom:14px;overflow:hidden;
  border:1px solid rgba(18,36,44,.14);background:#e6ddcb}
body.dark .dl-thumb{border-color:rgba(251,249,244,.18);background:#1f3540}
.dl-thumb img{display:block;width:100%;height:auto;transition:transform .4s ease}
.dl:hover .dl-thumb img{transform:scale(1.02)}
.dl-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
body.light .dl-k{color:var(--teal)} body.dark .dl-k{color:var(--sand)}
.dl-t{font-family:var(--serif);font-size:21px;line-height:1.15}
.dl-d{font-size:14px;line-height:1.5;opacity:.66;max-width:32ch}