/* ==========================================================================
   CLIENT SITE STARTER — base stylesheet
   Replace the tokens in :root with the client's brand system before writing
   any page content. Everything below reads from these variables — change
   them once here rather than hunting hex codes through the file.
   ========================================================================== */
:root{
  /* --- BRAND TOKENS: replace per client --- */
  --ink:#0B0D12;        /* primary dark surface / text-on-light */
  --surface:#12151C;    /* raised dark surface (cards on --ink) */
  --accent:#C9A961;     /* primary accent — buttons, links, eyebrows */
  --accent-light:#E9D3A0;
  --accent-deep:#8C6D2F; /* accent on light backgrounds — must pass 4.5:1 */
  --paper:#F5F3EF;      /* light section background */
  --muted:#9AA0AC;      /* secondary text on dark */
  --white:#FFFFFF;
  --body-copy:#3A3F4B;  /* body text on light */

  /* --- TYPE: replace with the client's chosen fonts --- */
  --display:'Libre Franklin',-apple-system,sans-serif;
  --sans:'Inter',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ink);color:var(--muted);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 40px}

/* type */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
h1,.h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:clamp(40px,6vw,76px);line-height:1.04;color:var(--white)}
h2,.h2{font-family:var(--display);font-weight:800;letter-spacing:-.01em;font-size:clamp(30px,4vw,48px);line-height:1.08;color:var(--white)}
h3,.h3{font-family:var(--display);font-weight:600;font-size:21px;color:var(--white)}
.thin{font-weight:300;color:var(--accent)}
.light .thin{color:var(--accent-deep)}
.lede{font-size:19px;font-weight:300;color:var(--muted);max-width:62ch}
p{max-width:68ch}

/* light sections */
.light{background:var(--paper);color:var(--body-copy)}
.light h1,.light h2,.light h3{color:var(--ink)}
.light .lede{color:#5A6070}
.light .eyebrow{color:var(--accent-deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:.03em;padding:16px 34px;border-radius:999px;background:var(--accent);color:var(--ink);transition:background .2s,transform .2s;cursor:pointer;border:0}
.btn:hover{background:var(--accent-light)}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn.ghost:hover{background:rgba(201,169,97,.12)}
.light .btn.ghost{color:var(--accent-deep);border-color:var(--accent-deep)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* header */
header{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s,box-shadow .4s;padding:22px 0}
header:before{content:"";position:absolute;inset:0 0 -60px;background:linear-gradient(to bottom,rgba(11,13,18,.78),rgba(11,13,18,.35) 65%,transparent);pointer-events:none;transition:opacity .4s}
header.scrolled:before{opacity:0}
header .wrap{position:relative}
header.scrolled{background:rgba(11,13,18,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(201,169,97,.18);padding:14px 0}
.nav-row{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{font-family:var(--display);font-weight:800;font-size:24px;color:var(--accent)}
.logo .name{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--white);text-transform:uppercase}
nav.primary{display:flex;align-items:center;gap:34px}
nav.primary>a{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);letter-spacing:.02em;position:relative}
nav.primary>a:after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--accent);transition:width .3s var(--ease)}
nav.primary>a:hover:after{width:100%}
nav.primary>a:hover{color:var(--white)}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-cta .btn{padding:12px 26px;font-size:14px}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;z-index:210}
.burger span{display:block;width:24px;height:2px;background:var(--white);margin:5px auto;transition:.3s}
.mobile-menu{position:fixed;inset:0;background:var(--ink);z-index:200;display:flex;flex-direction:column;justify-content:center;padding:40px;gap:8px;opacity:0;visibility:hidden;transition:opacity .35s;overflow-y:auto}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--display);font-weight:800;font-size:28px;color:var(--white);padding:8px 0}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 22s var(--ease) forwards}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,18,.94) 0%,rgba(11,13,18,.45) 45%,rgba(11,13,18,.25) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:96px;padding-top:180px;width:100%}
.hero .lede{margin-top:26px}
.hero-ctas{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap}

.page-hero{position:relative;min-height:56svh;display:flex;align-items:flex-end;overflow:hidden}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,18,.95),rgba(11,13,18,.35))}
.page-hero .wrap{position:relative;z-index:2;padding-bottom:72px;padding-top:170px;width:100%}

/* sections */
section{padding:110px 0;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.keyline{width:64px;height:2px;background:var(--accent);margin-bottom:26px;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .2s}
.in-view .keyline{transform:none}

/* reveals */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg{animation:none}
  html{scroll-behavior:auto}
}

/* cta band */
.cta-band{background:var(--surface);border-top:1px solid rgba(201,169,97,.25);text-align:center;padding:120px 0}
.cta-band h2{max-width:20ch;margin:0 auto 20px}
.cta-band .lede{margin:0 auto 40px}

/* footer */
footer{background:var(--ink);border-top:1px solid rgba(201,169,97,.2);padding:80px 0 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;margin-bottom:64px}
.foot-grid h4{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.foot-grid a{display:block;padding:5px 0;color:var(--muted);transition:color .2s}
.foot-grid a:hover{color:var(--accent-light)}
.foot-base{border-top:1px solid rgba(255,255,255,.08);padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#6A7080}
.built-by a{color:var(--accent);border-bottom:1px solid rgba(201,169,97,.4)}

/* responsive */
@media (max-width:1200px){
  nav.primary,.nav-cta .btn{display:none}
  .burger{display:block}
}
@media (max-width:640px){
  .wrap,.wrap-narrow{padding:0 22px}
  section{padding:72px 0}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .foot-base{flex-direction:column;gap:10px}
  .hero .wrap,.page-hero .wrap{padding-top:140px}
  .btn{padding:15px 28px}
}
@media (min-width:1680px){
  .wrap{max-width:1520px}
  body{font-size:17px}
}