/* ==========================================================================
   TRIMROSS DEVELOPMENTS
   Design system.

   The idea: a housebuilder's story is told in numbers — homes, years, square
   metres, euro. Most developer sites bury those in adjectives and drown the
   page in brand colour. This one does the opposite. Paper and ink, one
   typeface at extreme scale contrast, hairline rules, and colour used only
   where it carries information.
   ========================================================================== */

:root{
  /* ink & paper ---------------------------------------------------------- */
  --ink:#0F1518;
  --ink-70:#4A5257;
  --ink-45:#7C8388;
  --ink-20:#B9BDC0;
  --paper:#FCFCFA;
  --paper-2:#F4F4F0;
  --rule:#E4E3DE;
  --rule-2:#CFCEC7;

  /* the only colour on the site — and only ever as data ------------------ */
  --d1:#3E8FA8;   /* 1 bed */
  --d2:#C6793F;   /* 2 bed */
  --d3:#4C5B6B;   /* 3 bed */

  /* type ------------------------------------------------------------------ */
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-mega:clamp(44px,8.4vw,140px);
  --t-xl:clamp(34px,5.4vw,82px);
  --t-lg:clamp(26px,3.2vw,46px);
  --t-md:clamp(20px,2.1vw,28px);
  --t-body:clamp(15.5px,1.15vw,18px);
  --t-sm:14px;
  --t-label:11px;

  /* space ----------------------------------------------------------------- */
  --gut:clamp(20px,4.4vw,64px);
  --sect:clamp(60px,7.2vw,124px);
  --max:1440px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:var(--t-body);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- layout ------------------------------------------------------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.sect{padding:var(--sect) 0}
.sect--tight{padding:calc(var(--sect) * .55) 0}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* section marker — the drawing-register cue */
.mark{
  font-size:var(--t-label);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-45);
  display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(28px,4vw,56px);
}
.mark::before{content:attr(data-n);color:var(--ink-20);font-variant-numeric:tabular-nums}
.mark::after{content:"";flex:1;height:1px;background:var(--rule);transform:translateY(-4px)}

/* ---------- type --------------------------------------------------------- */
.mega{font-size:var(--t-mega);font-weight:300;line-height:.92;letter-spacing:-.045em;margin:0}
.h1{font-size:var(--t-xl);font-weight:300;line-height:1.02;letter-spacing:-.038em;margin:0}
.h2{font-size:var(--t-lg);font-weight:300;line-height:1.08;letter-spacing:-.032em;margin:0}
.h3{font-size:var(--t-md);font-weight:400;line-height:1.22;letter-spacing:-.022em;margin:0}
.lede{font-size:clamp(17px,1.5vw,22px);line-height:1.5;font-weight:300;color:var(--ink-70);letter-spacing:-.012em}
.body{max-width:64ch}
.body p{margin:0 0 1.1em}
.body p:last-child{margin-bottom:0}
.small{font-size:var(--t-sm);color:var(--ink-45);line-height:1.6}
.label{font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- header ------------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
/* the blur lives on a pseudo-element — see MOBILE HEADER FIX at the end */
.hdr.is-stuck{border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:clamp(62px,7vw,80px);max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wordmark{font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--ink-45);font-weight:400}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav a{font-size:13.5px;font-weight:400;text-decoration:none;color:var(--ink-70);
  transition:color .2s var(--ease);position:relative;padding:6px 0}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  background:var(--ink);color:var(--paper);text-decoration:none;border:1px solid var(--ink);
  font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:.02em;cursor:pointer;
  transition:.25s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:10px 18px;font-size:12.5px}
.btn--lg{padding:19px 38px;font-size:15px}
.btn__arw{transition:transform .25s var(--ease)}
.btn:hover .btn__arw{transform:translateX(4px)}

.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;
  padding:0;place-items:center}
.burger span{display:block;width:20px;height:1px;background:var(--ink);
  position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;
  background:var(--ink);transition:.3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ---------- hero --------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(40px,6vw,80px);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,21,24,.34) 0%,rgba(15,21,24,.06) 42%,rgba(15,21,24,.66) 100%)}
.hero--light .hero__media::after{background:linear-gradient(180deg,rgba(15,21,24,.1) 0,rgba(15,21,24,.5) 100%)}
.hero__in{position:relative;color:#fff;width:100%}
.hero__in .lede{color:rgba(255,255,255,.82)}
.hero__scroll{position:absolute;left:var(--gut);bottom:clamp(40px,6vw,80px);
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* page hero (interior pages, no image) */
.phero{padding:calc(clamp(62px,7vw,80px) + clamp(44px,5vw,84px)) 0 clamp(34px,4vw,60px);position:relative;isolation:isolate;overflow:hidden}
.phero>.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.22}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(252,252,250,.55) 0,rgba(252,252,250,.86) 62%,var(--paper) 100%)}

/* ---------- full-screen hero ---------------------------------------------
   The title sits in the optical middle of the opening screen rather than
   under the header, with the figures held at the foot. svh, not vh, so mobile
   browser chrome doesn't push the numbers off the bottom of the screen. */
.phero--full{display:flex;flex-direction:column;justify-content:center;
  min-height:100svh;padding-top:clamp(62px,7vw,80px);padding-bottom:clamp(24px,3vw,40px)}

/* .wrap carries margin:0 auto. On the cross axis of a flex column that beats
   align-items:stretch and sizes the element to its content — which collapsed
   .figs from four columns to one and made the hero taller than the screen.
   Width has to be stated explicitly here. */
.phero--full > .wrap{width:100%}

.phero--full .phero__mid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.phero--full .phero__foot{flex:0 0 auto;margin-top:clamp(32px,4vw,56px)}
.h1--mega{font-size:var(--t-mega);letter-spacing:-.045em}

/* Short screens — a laptop in landscape has less height than a phone. Release
   the min-height rather than let the figures collide with the title. */
@media (max-height:720px) and (min-width:900px){
  .phero--full{min-height:0;padding-bottom:clamp(34px,4vw,60px)}
  .h1--mega{font-size:var(--t-xl)}
}

/* ---------- figures / numbers ------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:1px;background:var(--rule)}
.figs>div{background:var(--paper);padding:clamp(22px,3vw,38px) 4px clamp(20px,2.6vw,32px)}
.figs .v{font-size:clamp(30px,3.9vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1;
  display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.figs .k{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
  margin-top:14px;display:block}

/* ---------- feature rows ------------------------------------------------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.feats>div{padding:clamp(26px,3vw,40px) clamp(20px,2vw,34px) clamp(30px,3.4vw,46px);
  border-top:1px solid var(--ink);border-right:1px solid var(--rule)}
.feats>div:last-child{border-right:0}
.feats h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.feats p{margin:0;font-size:15px;color:var(--ink-70);line-height:1.58}
.feats .n{font-size:var(--t-label);color:var(--ink-20);display:block;margin-bottom:20px;
  font-variant-numeric:tabular-nums}

/* ---------- media -------------------------------------------------------- */
.media{position:relative;overflow:hidden;background:var(--paper-2)}
.media img{width:100%;height:100%;object-fit:cover}
.media--wide{aspect-ratio:16/9}
.media--43{aspect-ratio:4/3}
.media--sq{aspect-ratio:1/1}
.cap{font-size:12px;color:var(--ink-45);margin-top:12px;letter-spacing:.02em}

/* ---------- home type cards --------------------------------------------- */
.homes{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:var(--gut) clamp(20px,2.4vw,40px)}
.home{text-decoration:none;display:block}
.home .media{aspect-ratio:4/3;margin-bottom:18px}
.home .media img{transition:transform .7s var(--ease)}
.home:hover .media img{transform:scale(1.035)}
.home__bar{height:2px;width:26px;margin-bottom:14px}
.home h3{font-size:20px;font-weight:400;letter-spacing:-.02em;margin:0 0 6px}
.home .meta{font-size:13px;color:var(--ink-45);margin:0}
.home .go{font-size:13px;margin-top:14px;display:inline-flex;gap:8px;align-items:center;
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;transition:.25s var(--ease)}
.home:hover .go{border-bottom-color:var(--ink)}

/* ---------- spec table --------------------------------------------------- */
.spec{width:100%;border-collapse:collapse}
.spec tr{border-bottom:1px solid var(--rule)}
.spec tr:first-child{border-top:1px solid var(--ink)}
.spec th{text-align:left;font-weight:400;color:var(--ink-45);font-size:14px;
  padding:16px 20px 16px 0;width:44%;vertical-align:top}
.spec td{text-align:right;font-weight:500;font-size:15px;padding:16px 0;vertical-align:top}

/* ---------- list blocks -------------------------------------------------- */
.stack{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.stack>div{background:var(--paper);padding:clamp(24px,3vw,36px) 0}
.stack h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin:0 0 8px}
.stack p{margin:0;color:var(--ink-70);font-size:15.5px;max-width:62ch}

/* ---------- faq ---------------------------------------------------------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:17px;font-weight:400;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:31px;width:11px;height:1px;
  background:var(--ink);transition:.25s var(--ease)}
.faq summary::before{content:"";position:absolute;right:11px;top:26px;width:1px;height:11px;
  background:var(--ink);transition:.25s var(--ease)}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq .ans{padding:0 0 26px;color:var(--ink-70);max-width:64ch;font-size:15.5px}
.faq .ans p{margin:0 0 .9em}.faq .ans p:last-child{margin:0}

/* ---------- forms -------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px)}
.f{display:flex;flex-direction:column;gap:9px}
.f--full{grid-column:1/-1}
.f label{font-size:12.5px;color:var(--ink-45);letter-spacing:.03em}
.f input,.f select,.f textarea{
  font-family:inherit;font-size:16px;color:var(--ink);padding:13px 0;
  border:0;border-bottom:1px solid var(--rule-2);background:transparent;width:100%;
  transition:border-color .25s var(--ease);border-radius:0;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.f textarea{resize:vertical;min-height:84px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-70);line-height:1.55}
.consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* ---------- footer ------------------------------------------------------- */
.ftr{border-top:1px solid var(--ink);padding:clamp(48px,6vw,84px) 0 clamp(28px,3vw,40px);margin-top:var(--sect)}
.ftr a{text-decoration:none;color:var(--ink-70);transition:color .2s var(--ease)}
.ftr a:hover{color:var(--ink)}
.reg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px clamp(20px,3vw,50px)}
.reg h4{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  font-weight:600;margin:0 0 18px}
.reg ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.reg li{font-size:14.5px}
.reg .idx{color:var(--ink-20);font-size:11px;margin-right:9px;font-variant-numeric:tabular-nums}
.ftr__base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  margin-top:clamp(44px,5vw,70px);padding-top:24px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-45)}
.ftr__base a{color:var(--ink-45)}

/* ---------- reveal ------------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- column helpers ---------------------------------------------- */
.c-1-6{grid-column:1/7}.c-1-7{grid-column:1/8}.c-1-8{grid-column:1/9}
.c-1-10{grid-column:1/11}
.c-2-8{grid-column:2/9}.c-3-11{grid-column:3/11}
.c-6-13{grid-column:6/13}.c-7-13{grid-column:7/13}.c-8-13{grid-column:8/13}
.c-1-13{grid-column:1/13}
.c-1-5{grid-column:1/6}.c-6-12{grid-column:6/12}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:28px}
  [class^="c-"],[class*=" c-"]{grid-column:1/-1 !important}
  .form{grid-template-columns:1fr}
  .feats>div{border-right:0}
  .feats>div+div{border-top:1px solid var(--rule)}
  .nav{position:fixed;inset:0;background:var(--paper);flex-direction:column;
    justify-content:center;align-items:flex-start;padding:0 var(--gut);gap:6px;
    transform:translateY(-100%);transition:transform .45s var(--ease);z-index:99}
  body.nav-open .nav{transform:none}
  .nav a{font-size:clamp(28px,7vw,42px);font-weight:300;letter-spacing:-.03em;padding:10px 0}
  .nav .btn{margin-top:26px;font-size:14px}
  .burger{display:grid}
  .hdr__in{position:relative;z-index:101}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   ACTION COLOUR
   One colour, used only where the user is being asked to do something.
   Navy, matched to the Trimross logo.

   >>> --act IS A STAND-IN. Replace with the exact hex sampled from the
   licensed logo artwork. Nothing else needs touching — every CTA on the
   site reads from this one token, and --act-d is only its hover state.
   ========================================================================== */
:root{ --act:#101E38; --act-d:#0A1426; }

.btn--act{background:var(--act);border-color:var(--act);color:#fff}
.btn--act:hover{background:var(--act-d);border-color:var(--act-d);color:#fff}
.mark::before{color:var(--act)}

/* ---------- prompt: tells people the plan is clickable -------------------- */
.prompt{display:inline-flex;align-items:center;gap:13px;font-size:clamp(15px,1.35vw,17.5px);
  font-weight:500;letter-spacing:-.01em;padding-bottom:10px;
  border-bottom:2px solid var(--act);color:var(--ink)}
.prompt .dot{width:10px;height:10px;border-radius:50%;background:var(--act);flex:0 0 auto;
  position:relative}
.prompt .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--act);opacity:.55;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ---------- full-bleed horizontal rail ------------------------------------ */
.rail__track{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;
  scroll-snap-type:x proximity;padding:4px var(--gut) 10px;margin:0 calc(var(--gut) * -1);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail__track::-webkit-scrollbar{display:none}
.rail .home{flex:0 0 clamp(252px,25vw,364px);scroll-snap-align:start}
.rail .home .media{aspect-ratio:3/4;margin-bottom:20px}
.rail .home h3{font-size:23px}
.rail__foot{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-top:26px}
.rail__bar{flex:1;height:1px;background:var(--rule);position:relative}
.rail__bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--act);
  width:26%;transition:left .18s var(--ease)}
.rail__hint{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
  white-space:nowrap}

/* ---------- sticky scroll sequence ---------------------------------------- */
.stik{position:relative}
.stik__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0F1518;
  display:flex;align-items:flex-end}
.stik__bg{position:absolute;inset:0}
.stik__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);transition:opacity 1.1s var(--ease),transform 7s linear}
.stik__bg img.on{opacity:1;transform:scale(1.09)}
.stik__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,21,24,.5) 0,rgba(15,21,24,.2) 40%,rgba(15,21,24,.82) 100%)}
.stik__in{position:relative;z-index:2;width:100%;color:#fff;padding-bottom:clamp(50px,8vw,104px)}
.stik__panels{position:relative;min-height:clamp(170px,24vh,260px)}
.stik__panel{position:absolute;left:0;bottom:0;max-width:22ch;opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stik__panel.on{opacity:1;transform:none}
.stik__panel .n{font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.5);display:block;
  margin-bottom:20px}
.stik__panel h3{font-size:clamp(27px,4vw,54px);font-weight:300;line-height:1.05;
  letter-spacing:-.035em;margin:0 0 16px}
.stik__panel p{margin:0;font-size:clamp(15px,1.3vw,17.5px);line-height:1.55;
  color:rgba(255,255,255,.76);max-width:34ch}
.stik__dots{position:absolute;right:var(--gut);bottom:clamp(50px,8vw,104px);z-index:3;
  display:grid;gap:11px}
.stik__dots i{display:block;width:26px;height:2px;background:rgba(255,255,255,.28);
  transition:background .4s var(--ease)}
.stik__dots i.on{background:#fff}

/* ---------- faded render behind a section --------------------------------- */
.bgfade{position:relative;isolation:isolate;overflow:hidden}
.bgfade>.bgfade__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.2}
.bgfade::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--paper) 0,rgba(252,252,250,.55) 45%,var(--paper) 100%)}

/* ---------- misc character ------------------------------------------------ */
.figs .v{transition:color .3s var(--ease)}
.figs>div:hover .v{color:var(--act)}
.home__bar{transition:width .35s var(--ease)}
.home:hover .home__bar{width:56px}

@media (max-width:900px){
  .stik__dots{display:none}
  .rail .home{flex:0 0 76vw}
}
@media (prefers-reduced-motion:reduce){
  .prompt .dot::after{animation:none}
  .stik__bg img.on{transform:none}
}


/* white on navy — the CTA.
   Uppercase, bold and set on a shallower box than the other buttons, so it
   reads as the one thing on the page you are being asked to do. White on this
   navy is 16.6:1, so it holds up whatever navy the licensed logo turns out
   to be. */
:root{ --act-txt:#FFFFFF; }
.btn--act{
  color:var(--act-txt);
  padding-top:10px;padding-bottom:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.btn--act:hover{color:#fff}
.btn--lg.btn--act{padding-top:13px;padding-bottom:13px;font-size:13.5px}
.btn--sm.btn--act{padding-top:9px;padding-bottom:9px;font-size:11.5px}

/* count-up figures hold their space before they animate */
.figs .v[data-count]{min-width:1ch}

/* The nav CTA is an <a> inside .nav, so `.nav a` (0,1,1) outranks `.btn--act`
   (0,1,0) and swallowed the colour. Beat it on specificity. */
.nav a.btn{color:var(--paper)}
.nav a.btn--act{color:var(--act-txt)}
.nav a.btn--act:hover{color:#fff}
.nav a.btn--act[aria-current]{color:var(--act-txt)}

/* ---------- full-bleed background section --------------------------------- */
.fullbg{position:relative;isolation:isolate;overflow:hidden;background:#0F1518;
  color:#fff;padding:clamp(84px,12vw,180px) 0}
.fullbg>.fullbg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fullbg::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(15,21,24,.66) 0,rgba(15,21,24,.38) 44%,rgba(15,21,24,.76) 100%)}
.fullbg .mark{color:rgba(255,255,255,.62)}
.fullbg .mark::before{color:var(--act-txt)}
.fullbg .mark::after{background:rgba(255,255,255,.24)}
.fullbg .small,.fullbg .lede{color:rgba(255,255,255,.78)}
.fullbg .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.fullbg .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.fullbg .cap{color:rgba(255,255,255,.5)}

/* nav CTA — same uppercase gold treatment, a touch wider so it reads as the
   primary action rather than another nav item. Beats .btn--sm on specificity. */
.nav a.btn--act{font-weight:700;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;padding:10px 28px}
@media (max-width:900px){
  .nav a.btn--act{padding:13px 34px;font-size:13.5px}
}

/* ==========================================================================
   MOBILE HEADER FIX
   .hdr carried backdrop-filter. A backdrop-filter (like transform or filter)
   makes the element a containing block for position:fixed descendants — so
   the fixed mobile nav resolved against the header box rather than the
   viewport, and the CTA inside it rode down the page on scroll.
   Moving the blur onto a pseudo-element keeps the effect and stops .hdr
   creating a containing block.
   ========================================================================== */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(252,252,250,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4)}
body.nav-open{overflow:hidden}

/* Nav collapses at 1000px, not 900 — between the two the wordmark, four links
   and the wider CTA no longer fit on one line. */
@media (max-width:1000px){
  .nav{
    position:fixed;inset:0;background:var(--paper);
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:calc(clamp(62px,7vw,80px) + 28px) var(--gut) 44px;
    gap:4px;transform:translateY(-100%);
    transition:transform .45s var(--ease);z-index:99;overflow-y:auto;
  }
  body.nav-open .nav{transform:none}
  .nav a{font-size:clamp(25px,6.2vw,38px);font-weight:300;letter-spacing:-.03em;padding:9px 0}
  .nav a[aria-current]::after{display:none}
  .nav a.btn,.nav a.btn--act{
    margin-top:30px;padding:18px 42px;font-size:15.5px;font-weight:700;letter-spacing:.04em}
  .burger{display:grid}
  .hdr__in{position:relative;z-index:101}
}