/* Braymere Ltd — site styles */

:root{
  /* ground — taken from the Braymere letterhead */
  --ivory:#F7F5F1;
  --ivory-2:#F1EEE8;
  --stone:#E4E0D8;
  --paper:#FFFFFF;

  /* ink — letterhead charcoal */
  --ink:#1F262B;
  --ink-2:#2D3134;
  --muted:#646B70;
  --muted-2:#888F94;
  --line:rgba(31,38,43,.15);
  --line-soft:rgba(31,38,43,.085);

  /* slate — the dark brand surface */
  --slate:#1F262B;
  --slate-2:#252C31;
  --slate-3:#2D3134;
  --on-slate:#ECEDEE;
  --on-slate-muted:#A7AFB4;
  --slate-line:rgba(236,237,238,.17);
  --slate-line-soft:rgba(236,237,238,.09);

  /* gold — letterhead B08D3C */
  --gold:#A07C2E;
  --gold-2:#B08D3C;
  --gold-3:#C9A85F;
  /* Gold as a TEXT colour on ivory/paper. The letterhead gold is a fill
     colour: at 12-13px uppercase it only reaches ~2.9:1 on ivory, which is
     thin. This is the same hue carried down to a readable weight. */
  --gold-ink:#85671F;
  --gold-soft:rgba(176,141,60,.14);

  /* glass */
  --glass-light:rgba(247,245,241,.80);
  --glass-dark:rgba(31,38,43,.62);
  --glass-blur:saturate(140%) blur(18px);

  --max:1360px;
  --gutter:clamp(20px,5vw,72px);
  --sp:clamp(76px,10vw,168px);
  --sp-sm:clamp(48px,6vw,100px);
  --r:4px;
  --r-lg:10px;
  --r-xl:18px;

  --font:"Inter","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Didot","Bodoni 72","Bodoni MT","Playfair Display","Hoefler Text","Big Caslon",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--font);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
/* .btn is inline-flex, which would otherwise beat the [hidden] default */
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--gold-2);color:#fff}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:2px}

/* ---------------- type ---------------- */

h1,h2{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.004em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.8vw,4.9rem)}
h2{font-size:clamp(1.95rem,3.7vw,3.3rem);line-height:1.08}
h3{margin:0;font-family:var(--font);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.012em;line-height:1.24;text-wrap:balance}
h4{margin:0;font-size:1.02rem;font-weight:500;letter-spacing:-.006em;line-height:1.32}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.kicker{
  display:block;margin:0 0 20px;
  font-size:.69rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--gold-ink);
}
.lead{font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.5;color:var(--ink-2);letter-spacing:-.008em;font-weight:350}
.prose{color:var(--muted);max-width:62ch;font-size:1.03rem;line-height:1.68}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-2);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--gold-ink)}
.measure{max-width:22ch}
.measure-lg{max-width:34ch}

/* dark surfaces */
.dark{background:var(--slate);color:var(--on-slate)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
.dark .lead{color:#D8DED4}
.dark .prose{color:var(--on-slate-muted)}
.dark .prose strong{color:var(--paper)}
.dark .kicker,.glass-dark .kicker,.cta .kicker{color:var(--gold-3)}
.dark .prose a{color:var(--paper);text-decoration-color:var(--gold-3)}

.tone{background:var(--ivory-2)}
.tone-stone{background:var(--stone)}

/* ---------------- layout ---------------- */

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:940px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp)}
.section-sm{padding-block:var(--sp-sm)}
.pt0{padding-top:0}

.grid-split{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:940px){
  .grid-split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(48px,7vw,128px);align-items:start}
  .grid-split.is-end{align-items:end}
}
.stack>*+*{margin-top:24px}
.stack-lg>*+*{margin-top:clamp(30px,4vw,52px)}

/* ---------------- buttons ---------------- */

.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 27px;border:1px solid var(--ink);border-radius:999px;
  background:transparent;color:var(--ink);
  font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.btn svg{width:14px;height:14px;flex:none;transition:transform .4s var(--ease)}
.btn:hover{background:var(--ink);color:var(--ivory)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--slate);border-color:var(--slate);color:var(--paper)}
.btn--solid:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.btn--gold{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.btn--gold:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
/* Buttons on a dark surface.
   The list must name EVERY dark container, not just `.dark`: a ghost button
   inherits charcoal-on-transparent otherwise and disappears into the panel.
   `.glass-dark` (hero card, band panels) and `.cta` are dark but are not
   `.dark`, which is what made the hero's second action invisible. */
.dark .btn,.glass-dark .btn,.cta .btn{
  border-color:rgba(255,255,255,.46);color:var(--paper);
  background:rgba(255,255,255,.06);
}
.dark .btn:hover,.glass-dark .btn:hover,.cta .btn:hover,
.dark .btn:focus-visible,.glass-dark .btn:focus-visible,.cta .btn:focus-visible{
  background:var(--paper);color:var(--slate);border-color:var(--paper);
}
.dark .btn--solid,.glass-dark .btn--solid,.cta .btn--solid{
  background:var(--gold-2);border-color:var(--gold-2);color:#fff;
}
.dark .btn--solid:hover,.glass-dark .btn--solid:hover,.cta .btn--solid:hover,
.dark .btn--solid:focus-visible,.glass-dark .btn--solid:focus-visible,.cta .btn--solid:focus-visible{
  background:var(--paper);border-color:var(--paper);color:var(--slate);
}

.tlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--ink);padding-bottom:7px;border-bottom:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tlink svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.tlink:hover{color:var(--gold-ink);border-color:var(--gold-ink)}
.tlink:hover svg{transform:translateX(4px)}
.dark .tlink,.glass-dark .tlink,.cta .tlink{color:var(--paper);border-color:rgba(255,255,255,.34)}
.dark .tlink:hover,.glass-dark .tlink:hover,.cta .tlink:hover{color:var(--gold-3);border-color:var(--gold-3)}

/* ---------------- glass ---------------- */

.glass{
  background:var(--glass-light);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 44px rgba(31,38,43,.13);
}
/* Opaque values come first and are the fallback: legibility must never
   depend on backdrop-filter compositing, which some browsers skip. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass{background:var(--glass-light);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  .glass-dark{background:var(--glass-dark);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
  /* The mega panel sits over the hero photograph and carries a list of
     links. It only gets a hint of translucency: if the browser skips the
     backdrop-filter — which headless and low-power compositing both do — the
     panel is all that stands between the hero's display type and the menu. */
  .mega.glass{background:rgba(247,243,236,.96)}
}
.glass-dark{
  background:rgba(31,38,43,.84);
  border:1px solid rgba(237,237,228,.18);
  color:var(--on-slate);
}
.glass-dark h1,.glass-dark h2,.glass-dark h3{color:var(--paper)}

/* ---------------- header ---------------- */

.hdr{position:fixed;inset:0 0 auto;z-index:90;transition:transform .45s var(--ease)}
/* a soft scrim so the reversed logo and nav stay legible over bright sky */
.hdr::before{
  content:"";position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(26,32,37,.62),rgba(26,32,37,.22) 55%,rgba(26,32,37,0));
  opacity:1;transition:opacity .5s var(--ease);
}
.hdr.is-solid::before,.hdr.is-open::before{opacity:0}
body.no-hero .hdr::before{opacity:0}
.hdr__bar{
  position:relative;z-index:2;
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
/* Opaque first, frosted only where the blur is actually composited. The
   header sits over photography and over the hero card; at .82 with the blur
   dropped, the card's own type reads straight through the wordmark. */
.hdr.is-solid .hdr__bar,.hdr.is-open .hdr__bar{
  background:rgba(247,243,236,.985);
  border-bottom-color:var(--line-soft);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .hdr.is-solid .hdr__bar,.hdr.is-open .hdr__bar{
    background:rgba(247,243,236,.93);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  }
}
.hdr__in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
  height:84px;display:flex;align-items:center;gap:22px;
  transition:height .45s var(--ease);
}
.hdr.is-compact .hdr__in{height:68px}
@media(min-width:1000px){
  .hdr__in{height:112px}
  .hdr.is-compact .hdr__in{height:80px}
}

/* `is-solid` paints the header; `is-compact` shrinks it. They are SEPARATE
   because opening a mega panel makes the header solid, and if that also
   resized it the nav would move out from under a stationary cursor —
   mouseleave, close, header grows back, mouseenter, open — a menu that
   pulsates as long as the pointer rests on it. Only scrolling may change the
   header's geometry; hovering may only change its colour. */
/* The logo is the full three-row lockup, so it needs real height to be read:
   the strapline is a thirteenth of it. The header therefore opens tall over
   the hero and draws itself in as you scroll, rather than holding one
   compromise height that is too short for the logo and too tall for a bar. */
.brand{
  --logo-h:52px;
  position:relative;display:block;flex:none;margin-right:auto;
  width:calc(var(--logo-h) * 4.1667);height:var(--logo-h);
  text-decoration:none;color:var(--ink);
  transition:width .45s var(--ease),height .45s var(--ease);
}
.hdr.is-compact .brand{--logo-h:40px}
@media(min-width:1000px){
  .brand{--logo-h:72px}
  .hdr.is-compact .brand{--logo-h:48px}
}
.brand img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:left center;
  transition:opacity .45s var(--ease);
}
.brand .on-dark{opacity:0}

.brandfull{display:block;text-decoration:none}
.brandfull img{width:min(320px,78vw);height:auto}

/* header over photography (top of hero, before scroll) */
.hdr:not(.is-solid):not(.is-open) .brand{color:var(--paper)}
.hdr:not(.is-solid):not(.is-open) .brand .on-light{opacity:0}
.hdr:not(.is-solid):not(.is-open) .brand .on-dark{opacity:1}
.hdr:not(.is-solid):not(.is-open) .nav>li>a,
.hdr:not(.is-solid):not(.is-open) .nav>li>button{color:rgba(255,255,255,.9)}
.hdr:not(.is-solid):not(.is-open) .burger span{background:var(--paper)}
.hdr:not(.is-solid):not(.is-open) .hdr__cta{border-color:rgba(255,255,255,.5);color:var(--paper)}
.hdr:not(.is-solid):not(.is-open) .hdr__cta:hover{background:var(--paper);color:var(--slate);border-color:var(--paper)}
body.no-hero .hdr .brand,body.no-hero .hdr .nav>li>a{color:var(--ink)}

.nav{display:none;list-style:none;margin:0;padding:0}
@media(min-width:1000px){.nav{display:flex;align-items:center;gap:6px}}
.nav>li{position:static}
.nav>li>a,.nav>li>button{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 15px;background:none;border:0;cursor:pointer;text-decoration:none;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--ink-2);border-radius:999px;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.is-open>button,.nav>li>a[aria-current]{color:var(--gold-2)}
.nav .chev{width:9px;height:9px;transition:transform .35s var(--ease);opacity:.7}
.nav>li.is-open .chev{transform:rotate(180deg)}

.hdr__cta{display:none}
@media(min-width:1180px){.hdr__cta{display:inline-flex;padding:12px 22px;font-size:.72rem}}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;padding:0 11px;margin-right:-11px;background:none;border:0;cursor:pointer}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;height:1.6px;background:var(--ink);transition:transform .4s var(--ease),width .4s var(--ease),opacity .25s}
.burger span:nth-child(1){width:24px}
.burger span:nth-child(2){width:17px}
.hdr.is-open .burger span:nth-child(1){transform:translateY(3.8px) rotate(45deg)}
.hdr.is-open .burger span:nth-child(2){width:24px;transform:translateY(-3.8px) rotate(-45deg)}

/* ---------------- mega menu ---------------- */
/* Positioned against .hdr (the nearest positioned ancestor) so the panel
   spans the full width of the header rather than the width of its trigger. */
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:1;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  /* pointer-events is switched off immediately on close: `visibility` only
     flips at the END of its transition, so without this a closing panel stays
     hit-testable and re-opens itself under a resting cursor. */
  pointer-events:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  border-bottom:1px solid var(--line-soft);
  background:rgba(247,243,236,.97);
  box-shadow:0 26px 60px rgba(31,38,43,.18);
}
.mega.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega__in{
  max-width:var(--max);margin-inline:auto;padding:clamp(26px,3vw,44px) var(--gutter) clamp(30px,3.4vw,48px);
  display:grid;gap:clamp(26px,3vw,54px);
}
@media(min-width:1000px){.mega__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)}}

.mega__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega__list a{
  display:block;text-decoration:none;padding:11px 14px;border-radius:var(--r);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.mega__list a:hover{background:rgba(27,30,26,.05);transform:translateX(3px)}
.mega__list .t{display:block;font-size:1rem;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.mega__list a:hover .t{color:var(--gold-ink)}
.mega__list .d{display:block;font-size:.85rem;color:var(--muted);line-height:1.45;margin-top:3px}

.mega__cards{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(2,1fr)}
@media(min-width:1200px){.mega__cards{grid-template-columns:repeat(3,1fr)}}
.mega__card{display:block;text-decoration:none;border-radius:var(--r-lg);overflow:hidden;position:relative;background:var(--stone)}
.mega__card .im{aspect-ratio:4/3;overflow:hidden}
.mega__card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.mega__card:hover img{transform:scale(1.06)}
.mega__card .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  background:linear-gradient(to top,rgba(31,38,43,.88),rgba(31,38,43,0));
  color:#fff;
}
.mega__card .cap b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:400;letter-spacing:-.01em}
.mega__card .cap span{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:4px}

.mega__foot{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line-soft);
}
.mega__foot p{margin:0;font-size:.93rem;color:var(--muted);max-width:52ch}

/* ---------------- mobile nav ---------------- */

.mobnav{position:fixed;inset:74px 0 0;z-index:85;display:none;overflow-y:auto;overscroll-behavior:contain}
.hdr.is-open~.mobnav,.mobnav.is-open{display:block}
@media(min-width:1000px){.mobnav{display:none!important}}
.mobnav__in{
  min-height:100%;background:var(--ivory);
  padding:8px var(--gutter) 40px;
  animation:mobIn .45s var(--ease-out) both;
}
@keyframes mobIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobnav__grp{border-bottom:1px solid var(--line-soft)}
.mobnav__top{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 0;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;
  font-family:var(--display);font-size:1.42rem;letter-spacing:-.01em;color:var(--ink);
}
.mobnav__top .n{font-family:var(--font);font-size:.64rem;letter-spacing:.18em;color:var(--muted-2)}
.mobnav__top .chev{width:12px;height:12px;color:var(--gold-2);transition:transform .35s var(--ease)}
.mobnav__grp.is-open .chev{transform:rotate(180deg)}
.mobnav__panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.mobnav__grp.is-open .mobnav__panel{max-height:1400px}
.mobnav__panel-in{padding:2px 0 22px}
.mobnav__cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.mobnav__cards a{display:block;text-decoration:none;border-radius:var(--r);overflow:hidden;position:relative;background:var(--stone)}
.mobnav__cards .im{aspect-ratio:4/3}
.mobnav__cards img{width:100%;height:100%;object-fit:cover}
.mobnav__cards .cap{position:absolute;inset:auto 0 0;padding:22px 10px 9px;background:linear-gradient(to top,rgba(31,38,43,.9),transparent);color:#fff;font-size:.78rem;line-height:1.3}
.mobnav__links{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.mobnav__links a{display:block;padding:11px 0;text-decoration:none;font-size:1rem;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.mobnav__links a:last-child{border-bottom:0}
.mobnav .btn{margin-top:26px;width:100%;justify-content:center}

/* persistent enquiry action */
.stickycta{
  position:fixed;right:max(16px,3vw);bottom:max(16px,3vw);z-index:70;
  display:none;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  text-decoration:none;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--paper);background:rgba(31,38,43,.86);border:1px solid rgba(237,237,228,.2);
  box-shadow:0 10px 34px rgba(31,38,43,.28);
  transform:translateY(14px);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .35s;
}
@supports (backdrop-filter:blur(1px)){.stickycta{background:rgba(31,38,43,.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}}
.stickycta.is-in{opacity:1;transform:none;pointer-events:auto}
.stickycta:hover{background:var(--gold-2);border-color:var(--gold-2)}
.stickycta svg{width:13px;height:13px}
@media(min-width:760px){.stickycta{display:inline-flex}}

/* ---------------- hero ---------------- */

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--slate)}
.hero__media{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 9s linear}
.hero__slide.is-active img{transform:scale(1)}
.hero__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(26,32,37,.60) 0%,rgba(26,32,37,.18) 34%,rgba(26,32,37,0) 62%),
    linear-gradient(to bottom,rgba(26,32,37,.34) 0%,rgba(26,32,37,0) 26%);
}
.hero__in{position:relative;width:100%;max-width:var(--max);margin-inline:auto;padding:120px var(--gutter) clamp(104px,12vh,132px)}
.hero__card{
  max-width:min(660px,100%);padding:clamp(28px,3vw,44px);border-radius:var(--r-xl);
  color:var(--paper);
}
.hero__card .kicker{color:var(--gold-3)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.6rem);color:var(--paper)}
.hero h1 .ln{display:block}
.hero h1 .ln+.ln{color:#D5DCD2}
.hero__text{margin-top:22px;max-width:46ch;color:#DDE3D9;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.58}
.hero__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}

.hero__anim>*{opacity:0;transform:translateY(16px)}
.hero__anim.is-in>*{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.hero__anim.is-in>*:nth-child(1){transition-delay:.05s}
.hero__anim.is-in>*:nth-child(2){transition-delay:.14s}
.hero__anim.is-in>*:nth-child(3){transition-delay:.23s}
.hero__anim.is-in>*:nth-child(4){transition-delay:.32s}

.hero__bar{position:absolute;left:0;right:0;bottom:0;z-index:2}
.hero__bar-in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--gutter) clamp(18px,2.4vw,30px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
}
.hero__meta{color:var(--paper);min-width:0}
.hero__meta b{display:block;font-family:var(--display);font-size:clamp(.98rem,1.3vw,1.16rem);font-weight:400;letter-spacing:-.008em}
.hero__meta span{display:block;font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:4px}
.hero__meta.is-swap b,.hero__meta.is-swap span{animation:metaIn .7s var(--ease-out) both}
@keyframes metaIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.sctrl{display:flex;align-items:center;gap:4px;padding:7px 9px;border-radius:999px;flex:none}
.sctrl__dot{width:30px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.sctrl__dot i{display:block;width:20px;height:2px;background:rgba(255,255,255,.34);border-radius:2px;transition:background .35s,width .35s var(--ease)}
.sctrl__dot[aria-current="true"] i{background:var(--gold-3);width:30px}
.sctrl__dot:hover i{background:rgba(255,255,255,.8)}
.sctrl__btn{
  width:34px;height:34px;margin-left:5px;border:1px solid rgba(255,255,255,.32);border-radius:50%;
  background:none;color:#fff;cursor:pointer;display:grid;place-items:center;flex:none;
  transition:background .3s,border-color .3s;
}
.sctrl__btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.sctrl__btn svg{width:11px;height:11px;fill:currentColor}
.sctrl__btn .ico-play{display:none}
.sctrl__btn[aria-pressed="true"] .ico-play{display:block}
.sctrl__btn[aria-pressed="true"] .ico-pause{display:none}

/* page head */
.phead{padding-top:calc(84px + clamp(44px,6vw,86px));padding-bottom:clamp(30px,4vw,52px)}
@media(min-width:1000px){.phead{padding-top:calc(112px + clamp(52px,6vw,96px))}}
.phead h1{max-width:16ch}
.phead .lead{margin-top:22px;max-width:56ch}
.crumb{font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 20px}
.crumb a{text-decoration:none;color:var(--muted-2)}
.crumb a:hover{color:var(--gold-ink)}
.crumb i{font-style:normal;margin:0 9px;opacity:.55}

/* ---------------- full-bleed photographic band ---------------- */

.band{position:relative;overflow:hidden}
.band__media{position:relative;height:clamp(420px,72vh,760px)}
.band__media img{width:100%;height:100%;object-fit:cover}
.band--tall .band__media{height:clamp(520px,88vh,900px)}
.band__wash{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,32,37,.55),rgba(26,32,37,.06) 55%,rgba(26,32,37,.22))}
.band__in{position:absolute;inset:auto 0 0;padding-bottom:clamp(28px,4vw,56px)}
.band__panel{
  max-width:min(560px,100%);padding:clamp(24px,2.6vw,38px);border-radius:var(--r-xl);color:var(--paper);
}
.band__panel h2{font-size:clamp(1.7rem,3vw,2.7rem);color:var(--paper)}
.band__panel p{margin-top:14px;color:#D8DED4;font-size:1rem;line-height:1.6}
.band__panel .btn{margin-top:24px}
.band__caption{
  position:absolute;right:var(--gutter);bottom:clamp(28px,4vw,56px);
  display:none;max-width:300px;padding:13px 17px;border-radius:var(--r);
  font-size:.8rem;line-height:1.45;color:var(--paper);
}
@media(min-width:1100px){.band__caption{display:block}}

/* ---------------- editorial split ---------------- */

.ed{display:grid;gap:clamp(26px,3.4vw,56px);align-items:center}
@media(min-width:900px){
  .ed{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px)}
  .ed--wide{grid-template-columns:1.25fr .75fr}
  .ed--narrow{grid-template-columns:.75fr 1.25fr}
  .ed--flip .ed__media{order:2}
}
.ed__media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--stone)}
.ed__media img{width:100%;height:100%;object-fit:cover}
.ed__media.r-4-5{aspect-ratio:4/5}
.ed__media.r-3-2{aspect-ratio:3/2}
.ed__media.r-1-1{aspect-ratio:1/1}
.ed__cap{
  position:absolute;left:14px;right:14px;bottom:14px;padding:11px 15px;border-radius:var(--r);
  font-size:.79rem;line-height:1.42;color:var(--paper);
}
.ed__body h2{margin-bottom:20px}
.ed__body .kicker{margin-bottom:18px}
.ed__body .btn,.ed__body .tlink{margin-top:26px}

/* stacked overlap composition */
.duo{display:grid;gap:16px}
@media(min-width:760px){
  .duo{grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);align-items:end}
  .duo>*:first-child{margin-bottom:clamp(24px,5vw,64px)}
}

/* ---------------- project cards ---------------- */

.pgrid{display:grid;gap:clamp(18px,2.4vw,30px)}
@media(min-width:820px){
  .pgrid{grid-template-columns:1fr 1fr}
  .pgrid--feature>*:first-child{grid-column:1/-1}
  .pgrid--feature>*:nth-child(even):last-child{grid-column:1/-1}
}
.pcard{position:relative;display:block;text-decoration:none;color:inherit;border-radius:var(--r-lg);overflow:hidden;background:var(--stone)}
.pcard__im{position:relative;aspect-ratio:4/3;overflow:hidden}
@media(min-width:820px){
  .pgrid--feature>*:first-child .pcard__im,
  .pgrid--feature>*:nth-child(even):last-child .pcard__im{aspect-ratio:21/9}
}
.pcard__im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard:hover .pcard__im img{transform:scale(1.05)}
.pcard__im::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,32,37,.82) 0%,rgba(26,32,37,.22) 44%,rgba(26,32,37,0) 74%)}
.pcard__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,32px);color:#fff}
.pcard__loc{display:block;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3);margin:0 0 9px}
.pcard__name{display:block;font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.012em;line-height:1.1;margin:0}
.pcard__meta{display:block;margin:9px 0 0;font-size:.87rem;color:rgba(255,255,255,.82);line-height:1.4}
.pcard__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.pcard__go svg{width:12px;height:12px}
.pcard:hover .pcard__go,.pcard:focus-visible .pcard__go{opacity:1;transform:none}
@media(hover:none){.pcard__go{opacity:1;transform:none}}

/* ---------------- horizontal project rail ---------------- */

.rail{position:relative}
.rail__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(268px,78vw);
  gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail__track::-webkit-scrollbar{display:none}
@media(min-width:760px){.rail__track{grid-auto-columns:minmax(340px,42vw)}}
@media(min-width:1200px){.rail__track{grid-auto-columns:minmax(400px,32vw)}}
.rail__track>*{scroll-snap-align:start}
.rail__nav{display:flex;gap:8px;margin-top:26px}
.rail__btn{
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  transition:background .3s,border-color .3s,color .3s,opacity .3s;
}
.rail__btn:hover:not(:disabled){background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.rail__btn:disabled{opacity:.3;cursor:default}
.rail__btn svg{width:15px;height:15px}
.dark .rail__btn{border-color:var(--slate-line);color:var(--paper)}
.dark .rail__btn:hover:not(:disabled){background:var(--paper);color:var(--slate)}

/* ---------------- service list ---------------- */

.svc{display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:780px){.svc{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc__item{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.svc__item:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(27,30,26,.1);border-color:var(--line)}
.dark .svc__item{background:rgba(255,255,255,.03);border-color:var(--slate-line-soft)}
.dark .svc__item:hover{border-color:var(--slate-line);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.svc__im{aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.svc__im img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.svc__item:hover .svc__im img{transform:scale(1.05)}
.svc__b{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:11px;flex:1}
.svc__b h3{font-size:1.24rem;line-height:1.2}
.svc__b p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.55}
.dark .svc__b p{color:var(--on-slate-muted)}
.svc__b .go{
  margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);
}
.svc__b .go svg{width:12px;height:12px;transition:transform .35s var(--ease)}
.svc__item:hover .go svg{transform:translateX(4px)}

/* ---------------- reasons / stats ---------------- */

.reasons{display:grid;gap:1px;background:var(--slate-line-soft);border:1px solid var(--slate-line-soft);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:680px){.reasons{grid-template-columns:1fr 1fr}}
.reason{background:var(--slate);padding:clamp(26px,3vw,40px)}
.reason h3{font-size:1.16rem;margin-bottom:11px;color:var(--paper)}
.reason p{margin:0;font-size:.94rem;color:var(--on-slate-muted);line-height:1.6}

/* stages */
.stages{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:700px){.stages{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.stages{grid-template-columns:repeat(3,1fr)}}
.stage{background:var(--paper);padding:clamp(26px,3vw,38px)}
.stage__n{font-size:.7rem;letter-spacing:.18em;color:var(--gold-ink);font-weight:600;margin:0 0 16px}
.stage h3{font-size:1.12rem;margin-bottom:11px}
.stage p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.58}
.tone .stages,.tone .stage{background:var(--ivory-2)}
.tone .stage{background:var(--paper)}

/* facts */
.facts{margin:0;border-top:1px solid var(--line)}
.facts div{display:flex;gap:20px;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.facts dt{flex:none;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding-top:3px}
.facts dd{margin:0;text-align:right;font-size:.97rem;color:var(--ink)}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:13px;color:var(--muted);font-size:.98rem;line-height:1.5}
.ticks li::before{content:"";flex:none;width:6px;height:6px;margin-top:.6em;border-radius:50%;background:var(--gold-2)}
.dark .ticks li{color:var(--on-slate-muted)}
@media(min-width:620px){.ticks--two{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,44px)}}

/* ---------------- experience ---------------- */

.figs{display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
@media(min-width:620px){.figs{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{background:var(--ivory);padding:clamp(28px,3.4vw,46px) clamp(22px,2.4vw,34px)}
.tone .fig{background:var(--ivory-2)}
.fig__n{
  margin:0 0 14px;font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,5.4vw,4.4rem);line-height:.94;letter-spacing:-.02em;color:var(--ink);
}
.fig__n span{
  display:block;margin-top:11px;font-family:var(--font);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);
}
.fig__l{margin:0;color:var(--muted);font-size:.95rem;line-height:1.52;max-width:30ch}

/* The figures are one person's, not the company's. The line that says so is
   part of the component, never a detached footnote. */
.attrib{
  margin:clamp(26px,3vw,40px) 0 0;max-width:74ch;
  color:var(--muted-2);font-size:.87rem;line-height:1.6;
  padding-left:18px;border-left:2px solid var(--gold-soft);
}
.dark .attrib{color:var(--on-slate-muted)}

.tline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl{display:grid;gap:6px clamp(26px,4vw,64px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line-soft)}
.tl:last-child{border-bottom:1px solid var(--line-soft)}
@media(min-width:760px){.tl{grid-template-columns:minmax(0,.3fr) minmax(0,1fr);align-items:start}}
.tl__y{
  margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.15rem);
  line-height:1.1;color:var(--gold-ink);letter-spacing:-.01em;
}
.tl__b h3{margin-bottom:10px}
.tl__b p{margin:0;color:var(--muted);font-size:1rem;line-height:1.62;max-width:62ch}

.expstrip{
  display:grid;gap:clamp(28px,4vw,60px);
  padding:clamp(34px,4vw,60px);border-radius:var(--r-xl);
  background:var(--ivory-2);border:1px solid var(--line-soft);
}
@media(min-width:900px){.expstrip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.expstrip .kicker{margin-bottom:16px}
.expstrip h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.expstrip .prose{margin-top:18px;font-size:.99rem}
.expstrip .tlink{margin-top:26px}
.expstrip .figs{border:0;background:transparent;gap:clamp(20px,2.4vw,32px);grid-template-columns:1fr}
@media(min-width:520px){.expstrip .figs{grid-template-columns:repeat(3,1fr)}}
.expstrip .fig{background:transparent;padding:0}
.expstrip .fig__n{font-size:clamp(2.2rem,3.4vw,3rem);margin-bottom:10px}
.expstrip .ticks{gap:14px}
@media(min-width:520px){.expstrip .ticks{grid-template-columns:1fr 1fr;column-gap:28px}}

/* ---------------- gallery ---------------- */

.gal{display:grid;gap:clamp(12px,1.5vw,20px)}
@media(min-width:720px){.gal{grid-template-columns:repeat(6,1fr)}}
.gal__item{
  display:block;width:100%;padding:0;border:0;cursor:zoom-in;position:relative;overflow:hidden;
  border-radius:var(--r-lg);background:var(--stone);aspect-ratio:3/2;grid-column:span 6;
}
@media(min-width:720px){
  .gal__item{grid-column:span 3}
  .gal__item.w-full{grid-column:span 6;aspect-ratio:21/9}
  .gal__item.w-two{grid-column:span 2;aspect-ratio:4/5}
  .gal__item.w-four{grid-column:span 4;aspect-ratio:3/2}
}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal__item:hover img{transform:scale(1.045)}
.gal__cap{
  position:absolute;left:10px;right:10px;bottom:10px;padding:10px 14px;border-radius:var(--r);
  font-size:.79rem;line-height:1.4;color:var(--paper);text-align:left;
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.gal__item:hover .gal__cap,.gal__item:focus-visible .gal__cap{opacity:1;transform:none}
@media(hover:none){.gal__cap{opacity:1;transform:none}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:130;display:none;background:rgba(18,23,27,.96);padding:clamp(14px,3vw,44px)}
.lb.is-open{display:grid;grid-template-rows:1fr auto}
.lb__stage{position:relative;min-height:0;overflow:hidden}
.lb__stage img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:3px}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;flex-wrap:wrap}
.lb__cap{margin:0;font-size:.87rem;color:#C7D0C6;max-width:62ch;line-height:1.5}
.lb__nav{display:flex;gap:8px;flex:none;align-items:center}
.lb__btn{width:46px;height:46px;border:1px solid rgba(255,255,255,.24);background:none;border-radius:50%;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s}
.lb__btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.lb__btn svg{width:15px;height:15px}
.lb__close{position:absolute;top:0;right:0;z-index:3;background:rgba(18,23,27,.6)}
.lb__count{font-size:.73rem;letter-spacing:.13em;color:rgba(255,255,255,.6);padding:0 8px;flex:none}

/* ---------------- enquiry flow ---------------- */

.eq{border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line-soft);overflow:hidden;box-shadow:0 16px 50px rgba(27,30,26,.07)}
.eq__head{padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,38px);border-bottom:1px solid var(--line-soft)}
.eq__prog{display:flex;gap:6px;margin-bottom:16px}
.eq__prog i{flex:1;height:3px;border-radius:3px;background:var(--line);transition:background .45s var(--ease)}
.eq__prog i.on{background:var(--gold-2)}
.eq__head .kicker{margin-bottom:10px}
.eq__head h2{font-size:clamp(1.3rem,2vw,1.7rem);font-family:var(--font);font-weight:500;letter-spacing:-.012em;line-height:1.24}
.eq__head p{margin:9px 0 0;font-size:.92rem;color:var(--muted)}
.eq__body{padding:clamp(22px,2.8vw,38px)}
.eq__step{display:none}
.eq__step.is-active{display:block;animation:stepIn .45s var(--ease-out) both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eq__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(18px,2.2vw,26px) clamp(22px,2.8vw,38px);
  border-top:1px solid var(--line-soft);background:var(--ivory-2);
}
.eq__foot .note{margin:0;font-size:.82rem;color:var(--muted-2);max-width:44ch}

.choices{display:grid;gap:10px}
@media(min-width:560px){.choices{grid-template-columns:1fr 1fr}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  font-size:.97rem;cursor:pointer;background:var(--ivory);
  transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease);
}
.choice span:hover{border-color:var(--gold-2);transform:translateY(-2px)}
.choice input:checked+span{border-color:var(--gold-2);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-2)}
.choice input:focus-visible+span{outline:2px solid var(--gold-2);outline-offset:2px}

.field{display:grid;gap:8px;margin-bottom:20px}
.field>label,.flabel{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.req{color:var(--gold-ink)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;background:var(--ivory);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);font-family:inherit;font-size:1rem;line-height:1.5;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6A5E' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-2);background:var(--paper);outline:none;box-shadow:0 0 0 3px var(--gold-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field.has-error input,.field.has-error select,.field.has-error textarea,.field.has-error .choice span{border-color:#B4593F}
.err{margin:0;font-size:.82rem;color:#A8503A}
.field:not(.has-error) .err{display:none}
.row2{display:grid;gap:20px}
@media(min-width:600px){.row2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* attachments — drawings, a survey, photographs of the house */
.fhint{margin:0;font-size:.87rem;color:var(--muted);line-height:1.55;letter-spacing:0}
.drop{position:relative;margin-top:4px}
/* The input keeps its own focus ring rather than being display:none, so the
   control is reachable and visible by keyboard as well as by pointer. */
.drop__input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.drop__face{
  display:flex;align-items:center;justify-content:center;gap:13px;
  padding:26px 20px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--ivory);
  color:var(--muted);font-size:.93rem;letter-spacing:0;text-transform:none;font-weight:400;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.drop__face svg{width:22px;height:22px;flex:none;color:var(--gold-ink)}
.drop__face b{color:var(--ink);font-weight:600}
.drop:hover .drop__face,.drop.is-over .drop__face{border-color:var(--gold-2);background:var(--paper)}
.drop__input:focus-visible+.drop__face{border-color:var(--gold-2);border-style:solid;box-shadow:0 0 0 3px var(--gold-soft)}
.drop.has-files .drop__face{padding:18px 20px}
.field.has-error .drop__face{border-color:#B4593F}

.files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.files:empty{display:none}
.file{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px 11px 15px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--paper);
}
.file__n{
  flex:1;min-width:0;font-size:.92rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file__s{flex:none;font-size:.78rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.file__x{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.file__x svg{width:14px;height:14px}
.file__x:hover{background:var(--stone);color:var(--ink)}
.consent{display:flex;gap:12px;align-items:flex-start}
.consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--gold-2)}
.consent label{font-size:.89rem;color:var(--muted);line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400}

.alert{padding:16px 18px;border-radius:var(--r);font-size:.93rem;line-height:1.55;margin-bottom:22px;border:1px solid var(--line)}
.alert--warn{border-color:rgba(180,120,60,.45);background:rgba(200,150,80,.12);color:#7A5220}
.alert--ok{border-color:rgba(70,120,80,.4);background:rgba(90,150,100,.12);color:#2E5A38}
.alert[hidden]{display:none}

.deets{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.deets li{padding:19px 0;border-bottom:1px solid var(--line-soft)}
.deets .k{margin:0 0 7px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.deets .v{margin:0;font-size:1.04rem;color:var(--ink)}
.deets .v a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.deets .v a:hover{color:var(--gold-ink);border-color:var(--gold-ink)}
.deets .tbc{color:var(--muted-2);font-style:italic;font-size:.95rem}

/* ---------------- cta ---------------- */

.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--slate);color:var(--on-slate)}
.cta__im{position:absolute;inset:0}
.cta__im img{width:100%;height:100%;object-fit:cover;opacity:.34}
.cta__im::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(31,38,43,.95) 12%,rgba(31,38,43,.6) 68%,rgba(31,38,43,.35) 100%)}
.cta__in{position:relative;padding:clamp(38px,5.4vw,84px);max-width:760px}
.cta h2{color:var(--paper)}
.cta .prose{margin-top:18px;color:#C6CFC4}
.cta__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- footer ---------------- */

.ftr{background:var(--slate);color:var(--on-slate-muted)}
.ftr__top{padding-block:clamp(52px,6vw,88px);display:grid;gap:clamp(34px,4vw,56px)}
@media(min-width:880px){.ftr__top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.ftr .brandfull{display:block;margin-bottom:4px}
/* Footer column labels. They are h2 rather than h4 — the footer is its own
   landmark, and an h4 after a page's h2 skips a level for a screen reader. */
.ftr h2{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,237,228,.5);margin-bottom:18px;font-weight:600;font-family:var(--font);line-height:1.4}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr a{text-decoration:none;color:var(--on-slate-muted);font-size:.93rem;transition:color .25s}
.ftr a:hover{color:var(--paper)}
.ftr__blurb{max-width:36ch;font-size:.93rem;line-height:1.62;margin-top:18px}
.ftr__bot{border-top:1px solid var(--slate-line-soft);padding-block:24px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:.79rem;color:rgba(237,237,228,.45)}
.ftr__bot a{font-size:.79rem;color:rgba(237,237,228,.45)}

/* ---------------- 404 ---------------- */
.nf{min-height:74svh;display:flex;align-items:center;padding-top:120px}
.nf__code{font-family:var(--display);font-size:clamp(4.5rem,15vw,11rem);line-height:.86;color:var(--stone);margin:0 0 -.05em}

/* ---------------- reveal ---------------- */

[data-rev]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-rev].is-in{opacity:1;transform:none}
[data-rev-group]>*{opacity:0;transform:translateY(24px)}
[data-rev-group].is-in>*{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-rev-group].is-in>*:nth-child(1){transition-delay:0s}
[data-rev-group].is-in>*:nth-child(2){transition-delay:.09s}
[data-rev-group].is-in>*:nth-child(3){transition-delay:.18s}
[data-rev-group].is-in>*:nth-child(4){transition-delay:.27s}
[data-rev-group].is-in>*:nth-child(5){transition-delay:.36s}
[data-rev-group].is-in>*:nth-child(6){transition-delay:.45s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-rev],[data-rev-group]>*,.hero__anim>*{opacity:1!important;transform:none!important}
  .hero__slide img{transform:none}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--slate);color:var(--paper);padding:13px 20px;border-radius:0 0 var(--r) 0;font-size:.85rem;text-decoration:none}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* review build only */
.rvw-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(31,38,43,.93);border-top:1px solid var(--slate-line-soft);
  padding:9px var(--gutter);font-size:.73rem;letter-spacing:.04em;color:rgba(237,237,228,.62);
  display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;
}
@supports (backdrop-filter:blur(1px)){.rvw-bar{background:rgba(31,38,43,.82);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}}
.rvw-bar b{color:rgba(237,237,228,.9);font-weight:600}
body.rvw{padding-bottom:42px}
body.rvw .stickycta{bottom:max(58px,calc(3vw + 42px))}
.page{display:none}
.page.is-active{display:block}