@charset "UTF-8";
/* ==========================================================================
   PREMIER RENDER & PLASTER — Design System
   Dark / cinematic. Crown red on ink. Lime-plaster editorial.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* surface */
  --ink:        #0a0a0b;
  --ink-1:      #0e0e10;
  --ink-2:      #131316;
  --ink-3:      #1a1a1e;
  --ink-4:      #232329;

  /* brand */
  --crown:      #ed1f24;
  --crown-lit:  #ff3a3f;
  --crown-deep: #8f1216;

  /* content */
  --bone:       #f2efe9;
  --bone-2:     rgba(242,239,233,.72);
  --bone-3:     rgba(242,239,233,.52);
  --bone-4:     rgba(242,239,233,.34);
  --line:       rgba(242,239,233,.10);
  --line-2:     rgba(242,239,233,.16);

  /* type — bold neo-grotesk display over a geometric sans for body/UI */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-w: 700;          /* headline weight */
  --display-track: -.038em;  /* tracking for large display sizes */

  /* rhythm */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1600px;
  --section: clamp(88px, 11vw, 190px);
  --radius: 2px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --dur: .8s;

  --header-h: 88px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,.42vw + 14px,17.5px);
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,h5{ margin:0; font-weight:300; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--crown); color:#fff; }

:focus-visible{ outline:1px solid var(--crown); outline-offset:4px; }

/* film grain — gives the dark palette depth instead of flat black */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(-4%,2%)}
  30%{transform:translate(2%,-4%)}40%{transform:translate(-2%,3%)}50%{transform:translate(-4%,2%)}
  60%{transform:translate(3%,0)}70%{transform:translate(0,3%)}80%{transform:translate(-3%,0)}90%{transform:translate(2%,2%)}
}
@media (prefers-reduced-motion:reduce){ body::after{ animation:none; } }

/* ---------------------------------------------------------------- layout */
/* Let the measure grow on large monitors instead of leaving 500px of dead
   margin either side. Capped so line length stays readable. */
@media (min-width:1800px){ :root{ --maxw:1760px; } }
@media (min-width:2200px){ :root{ --maxw:1920px; --gutter:96px; } }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:1140px; }
.wrap--tight{ max-width:840px; }
.section{ padding-block:var(--section); position:relative; }
.section--flush-top{ padding-top:0; }
.section--tint{ background:var(--ink-1); }
.section--deep{ background:#070708; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.grid{ display:grid; gap:clamp(28px,3.4vw,64px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-12{ grid-template-columns:repeat(12,1fr); }
@media (max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } .g-12{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } .g-12{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- type */
.eyebrow{
  display:inline-flex; align-items:center; gap:.8em;
  font-size:clamp(10px,.62vw,11.5px); font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone-3); margin:0 0 clamp(20px,2.4vw,34px);
}
.eyebrow::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--crown); flex:none;
  box-shadow:0 0 12px rgba(237,31,36,.85);
}
.eyebrow--plain::before{ display:none; }

.d1,.d2,.d3,.d4{ font-family:var(--display); font-weight:var(--display-w);
  letter-spacing:var(--display-track); line-height:.98; }
/* Caps are set generously so display type keeps growing on 2560px+ monitors
   instead of stalling at the 1600px container width and reading small.
   Tracking loosens as size drops — tight negative tracking hurts small text. */
.d1{ font-size:clamp(3.4rem,8.4vw,10.6rem); line-height:.86; letter-spacing:-.042em; }
.d2{ font-size:clamp(2.4rem,5.2vw,6.4rem); line-height:.94; letter-spacing:-.038em; }
.d3{ font-size:clamp(1.9rem,3.2vw,3.9rem); line-height:1.02; letter-spacing:-.032em; }
.d4{ font-size:clamp(1.45rem,2vw,2.4rem); line-height:1.14; letter-spacing:-.024em; }

.d1 em,.d2 em,.d3 em{ font-style:normal; font-weight:400; color:var(--bone-2); }

.lede{
  font-size:clamp(1.05rem,1.35vw,1.45rem); line-height:1.62; font-weight:300;
  color:var(--bone-2); letter-spacing:.002em;
}
.body-copy p + p{ margin-top:1.35em; }
.body-copy{ color:var(--bone-3); max-width:66ch; }
.muted{ color:var(--bone-4); }
.tnum{ font-variant-numeric:tabular-nums; }

.label{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bone-4); font-weight:400;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  --bg:transparent; --fg:var(--bone); --bd:var(--line-2);
  position:relative; display:inline-flex; align-items:center; gap:.9em;
  padding:1.15em 2.1em; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:12px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  border-radius:var(--radius); overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--crown);
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.btn:hover{ color:#fff; border-color:var(--crown); }
.btn:hover::before{ transform:translateY(0); }
.btn__arrow{ transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn--solid{ --bg:var(--crown); --fg:#fff; --bd:var(--crown); }
.btn--solid::before{ background:#fff; }
.btn--solid:hover{ color:var(--ink); border-color:#fff; }
.btn--ghost{ padding-inline:0; border:0; }
.btn--ghost::before{ display:none; }
.btn--sm{ padding:.9em 1.6em; font-size:11px; }

/* underline link */
.ulink{
  position:relative; display:inline-block; padding-bottom:.25em;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-2);
  transition:color .4s var(--ease);
}
.ulink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--crown); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.ulink:hover{ color:var(--bone); }
.ulink:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------------------------------------------------------------- preloader */
.preload{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s;
}
.preload__inner{ text-align:center; }
.preload__mark{ width:78px; margin:0 auto 22px; opacity:0; animation:pl-in .9s var(--ease) .1s forwards; }
.preload__bar{ width:170px; height:1px; background:var(--line-2); margin:0 auto; overflow:hidden; }
.preload__bar i{ display:block; height:100%; width:100%; background:var(--crown); transform:scaleX(0); transform-origin:left; animation:pl-bar 1.15s var(--ease-io) .15s forwards; }
.preload__word{ margin-top:20px; font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--bone-4); opacity:0; animation:pl-in .8s var(--ease) .35s forwards; }
@keyframes pl-in{ to{ opacity:1; } }
@keyframes pl-bar{ to{ transform:scaleX(1); } }
.preload.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------------------------------------------------------------- header */
.header{
  position:fixed; inset:0 0 auto; z-index:900; height:var(--header-h);
  /* stretch, not center — the inner bar has to be full header height so the
     mega-menu hover target can reach the bottom edge. Children are re-centred
     by .header__inner's own align-items. */
  display:flex; align-items:stretch;
  transition:height .5s var(--ease), background-color .5s var(--ease),
             transform .55s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,6,7,.72), rgba(6,6,7,0));
  opacity:1; transition:opacity .5s var(--ease);
}
.header.is-stuck{
  height:70px; background:rgba(10,10,11,.82); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line);
}
.header.is-stuck::before{ opacity:0; }
.header.is-hidden{ transform:translateY(-104%); }
.header__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__mark{ width:38px; height:auto; transition:transform .6s var(--ease); }
.brand:hover .brand__mark{ transform:translateY(-2px) scale(1.04); }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-size:15px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; }
.brand__sub{ font-size:8.5px; font-weight:300; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-4); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,38px); }
.nav__link{
  position:relative; font-size:12px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--bone-2); padding-block:6px; transition:color .4s var(--ease);
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--crown);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--bone); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__caret{ width:8px; transition:transform .4s var(--ease); opacity:.6; }
.has-mega:hover .nav__caret{ transform:rotate(180deg); }

.header__cta{ display:flex; align-items:center; gap:20px; flex:none; }
/* Click-to-call reads as a plain caption unless it looks like a control, so it
   wears the same button shape as "Get a quote" — outlined rather than filled,
   so the quote button stays the primary action. */
.header__phone{ --bd:var(--line); --fg:var(--bone-2);
  letter-spacing:.12em; white-space:nowrap; gap:.7em; font-variant-numeric:tabular-nums; }
.header__phone .btn__phone{ flex:none; opacity:.8; transition:opacity .4s var(--ease); }
.header__phone:hover .btn__phone{ opacity:1; }

/* mega menu
   The hover target must fill the FULL header height, not just the height of the
   link text. Otherwise there is a dead strip between the bottom of the words and
   the top of the panel, and moving the mouse down closes the menu before you can
   reach it. position stays static so the panel still spans the whole viewport
   width against the fixed header. */
.has-mega{ position:static; align-self:stretch; display:flex; align-items:center; }
.nav{ align-self:stretch; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(12,12,14,.97); backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  pointer-events:none;
}
/* invisible bridge over the closed-state transform offset, so a fast diagonal
   sweep from the link into the panel never crosses un-hovered pixels */
.mega::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.has-mega:hover .mega,.has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.mega__inner{ max-width:var(--maxw); margin-inline:auto; padding:clamp(30px,3.4vw,52px) var(--gutter);
  display:grid; grid-template-columns:1fr 2.1fr; gap:clamp(30px,4vw,72px); }
.mega__aside .d4{ margin-bottom:14px; }
.mega__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px 26px; }
.mega__item{
  display:flex; align-items:baseline; gap:12px; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line); transition:padding-left .45s var(--ease), background-color .45s var(--ease);
}
.mega__item:hover{ padding-left:12px; background:rgba(237,31,36,.05); }
.mega__num{ font-size:10px; letter-spacing:.14em; color:var(--crown); flex:none; }
.mega__name{ font-size:13.5px; letter-spacing:.05em; color:var(--bone-2); transition:color .4s var(--ease); }
.mega__item:hover .mega__name{ color:var(--bone); }

/* burger + mobile drawer */
.burger{ display:none; width:38px; height:38px; position:relative; flex:none; }
.burger span{ position:absolute; left:8px; right:8px; height:1px; background:var(--bone);
  transition:transform .5s var(--ease), opacity .3s; }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:22px; }
.burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:880; background:var(--ink);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  overflow-y:auto; display:flex; flex-direction:column; gap:26px;
  clip-path:inset(0 0 100% 0); transition:clip-path .75s var(--ease);
}
.drawer.is-open{ clip-path:inset(0 0 0 0); }
.drawer__link{ font-family:var(--display); font-weight:700; letter-spacing:-.034em;
  font-size:clamp(1.9rem,7.5vw,2.7rem); line-height:1.1;
  color:var(--bone-2); display:block; }
.drawer__link:hover{ color:var(--bone); }
.drawer__group{ border-top:1px solid var(--line); padding-top:22px; }
.drawer__sub{ display:grid; gap:2px; margin-top:14px; }
.drawer__sub a{ font-size:14px; letter-spacing:.06em; color:var(--bone-3); padding:9px 0;
  border-bottom:1px solid var(--line); display:flex; gap:10px; }
.drawer__sub a span{ color:var(--crown); font-size:10px; }
.drawer__foot{ margin-top:auto; padding-top:28px; border-top:1px solid var(--line);
  display:grid; gap:8px; font-size:13px; color:var(--bone-3); }

@media (max-width:1120px){
  .nav,.header__phone{ display:none; }
  .burger{ display:block; }
}
@media (max-width:700px){
  .header__cta .btn{ display:none; }   /* replaced by the sticky action bar below */
}

/* ---------------------------------------------------- mobile action bar */
.actionbar{ display:none; }
@media (max-width:700px){
  .actionbar{
    position:fixed; left:0; right:0; bottom:0; z-index:870;
    display:grid; grid-template-columns:1fr 1fr;
    background:rgba(10,10,11,.94); backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(0); transition:transform .5s var(--ease);
  }
  body.is-locked .actionbar{ transform:translateY(110%); }
  .actionbar a{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:17px 10px; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  }
  .actionbar a + a{ background:var(--crown); color:#fff; }
  .actionbar svg{ width:13px; height:13px; flex:none; }
  .footer{ padding-bottom:64px; }
  .hero{ padding-bottom:calc(clamp(48px,7vw,104px) + 62px); }
}

/* ---------------------------------------------------------------- hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,7vw,104px); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,.hero__media video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); animation:kb 22s var(--ease) forwards;
}
@keyframes kb{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,8,9,.96) 0%, rgba(8,8,9,.55) 38%, rgba(8,8,9,.30) 62%, rgba(8,8,9,.66) 100%),
    radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,.62) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__title{ margin:0 0 clamp(22px,2.6vw,34px); }
/* overflow:hidden drives the line-mask reveal — the padding/margin pair gives
   descenders (g, y, p) room inside that box without changing the layout. */
.hero__line{ display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em; }
.hero__line > span{ display:block; transform:translateY(115%); }
.is-ready .hero__line > span{ animation:line-up 1.25s var(--ease) forwards; }
.is-ready .hero__line:nth-child(2) > span{ animation-delay:.12s; }
@keyframes line-up{ to{ transform:translateY(0); } }
.hero__sub{ max-width:60ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,3.4vw,46px); }
.hero__meta{
  margin-top:clamp(42px,5vw,74px); padding-top:26px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,64px); align-items:center;
}
.hero__meta span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-4); }
.hero__meta b{ color:var(--bone-2); font-weight:400; }
.scroll-cue{
  position:absolute; right:var(--gutter); bottom:clamp(48px,7vw,104px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-4);
}
.scroll-cue span{ writing-mode:vertical-rl; }
.scroll-cue i{ display:block; width:1px; height:64px; background:linear-gradient(var(--crown),transparent);
  transform-origin:top; animation:cue 2.6s var(--ease-io) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 30%{opacity:1} 60%,100%{transform:scaleY(1);opacity:0} }
@media (prefers-reduced-motion:reduce){ .scroll-cue i{ animation:none; } }
@media (max-width:1100px){ .scroll-cue{ display:none; } }

/* page hero (interior) */
.phero{ position:relative; min-height:clamp(56vh,62vh,720px); display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 40px); padding-bottom:clamp(40px,5vw,76px); overflow:hidden; }
.phero__media{ position:absolute; inset:0; }
.phero__media img,.phero__media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:kb 20s var(--ease) forwards; }
/* A hero loop is already moving — don't also Ken Burns it. */
.phero__media video{ transform:none; animation:none; }
.phero__scrim{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,9,.97) 6%, rgba(8,8,9,.55) 48%, rgba(8,8,9,.72) 100%); }
.phero__inner{ position:relative; z-index:2; width:100%; }
.phero__tag{ max-width:52ch; margin-top:20px; }
.phero__h1{ font-size:clamp(2.6rem,5.8vw,5.8rem); }
.phero__place{
  display:block; margin-top:.35em; font-family:var(--sans); font-weight:300;
  font-size:clamp(11px,.86vw,13px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--bone-4);
}
.phero__place::before{
  content:""; display:inline-block; width:26px; height:1px; background:var(--crown);
  vertical-align:middle; margin-right:14px;
}

/* breadcrumbs */
.crumbs{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone-4); margin-bottom:22px; }
.crumbs a:hover{ color:var(--crown-lit); }
.crumbs i{ width:14px; height:1px; background:var(--line-2); display:block; }

/* ---------------------------------------------------------------- reveal */
/* Content is visible by default. Only when JS is running (html.js) do we hide it
   for the reveal — so a JS failure or a no-script browser never blanks a section. */
.js [data-reveal]{ opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal="mask"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease); transition-delay:calc(var(--i,0) * 90ms); }
.js [data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); }
.js [data-reveal="left"]{ transform:translateX(-26px); }
.js [data-reveal="left"].is-in{ transform:none; }
.line-grow{ height:1px; background:var(--line-2); }
.js .line-grow{ transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease); }
.js .line-grow.is-in{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal="mask"],.js .line-grow{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  .hero__media img,.hero__media video,
  .phero__media img,.phero__media video{ animation:none; transform:none; }
  .hero__line > span{ transform:none!important; animation:none!important; }
}

/* ---------------------------------------------------------------- media */
.media{ position:relative; overflow:hidden; background:var(--ink-2); }
.media img,.media video{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease); }
.media--r43{ aspect-ratio:4/3; } .media--r11{ aspect-ratio:1/1; }
.media--r169{ aspect-ratio:16/9; } .media--r34{ aspect-ratio:3/4; }
.media--r23{ aspect-ratio:2/3; } .media--r219{ aspect-ratio:21/9; }
.media__cap{ position:absolute; left:0; bottom:0; right:0; padding:18px 20px;
  background:linear-gradient(transparent,rgba(6,6,7,.9)); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }
.zoom-in:hover .media img,.zoom-in:hover .media video{ transform:scale(1.055); }

.parallax{ will-change:transform; }

/* Statement column: a text block sitting beside/over full-bleed media.
   NOTE: never size these in `ch` on the wrapper — ch resolves against the
   wrapper's own (body) font-size, not the display heading inside it, which
   collapses the column to ~160px. Size the wrapper in px/vw, and use ch only
   on the individual heading and paragraph elements. */
.statement{ max-width:min(780px, 46vw); }
@media (max-width:900px){ .statement{ max-width:none; } }

/* full-bleed film strip */
.filmstrip{ position:relative; height:clamp(60vh,78vh,900px); overflow:hidden; }
/* 132% tall with 16% of headroom above, so the parallax (±7%) can never
   expose a black band at the top or bottom of the section. */
.filmstrip img,.filmstrip video{ width:100%; height:132%; object-fit:cover;
  position:absolute; top:-16%; left:0; }
.filmstrip__scrim{ position:absolute; inset:0; background:linear-gradient(to right, rgba(6,6,7,.88), rgba(6,6,7,.25) 60%, rgba(6,6,7,.55)); }
.filmstrip__body{ position:absolute; inset:0; display:flex; align-items:center; }

/* ---------------------------------------------------------------- finishes rail */
.rail__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  flex-wrap:wrap; margin-bottom:clamp(34px,4vw,58px); }
.rail{
  display:flex; gap:clamp(16px,1.6vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:var(--gutter); scroll-padding-inline-start:var(--gutter);
  padding-bottom:8px; cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail.is-dragging a{ pointer-events:none; }
.rail__item{ flex:0 0 clamp(260px,25vw,392px); scroll-snap-align:start; position:relative; }
.rail__media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ink-2); }
.rail__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease), filter 1.2s var(--ease); filter:grayscale(.2) brightness(.94); }
.rail__item:hover .rail__media img{ transform:scale(1.06); filter:grayscale(0) brightness(1); }
.rail__num{ position:absolute; top:16px; left:18px; z-index:2; font-size:10.5px; letter-spacing:.2em; color:var(--bone-2); }
.rail__num b{ color:var(--crown); font-weight:400; }
.rail__veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,7,.92) 2%, rgba(6,6,7,.05) 55%); }
.rail__body{ position:absolute; left:0; right:0; bottom:0; padding:22px 20px; z-index:2; }
.rail__title{ font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.4rem,1.8vw,1.85rem); line-height:1.06; }
.rail__tag{ font-size:12.5px; color:var(--bone-3); margin-top:8px; max-width:34ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .7s var(--ease), opacity .6s var(--ease); }
.rail__item:hover .rail__tag{ max-height:80px; opacity:1; }
.rail__go{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--crown-lit); }
.rail__ctrl{ display:flex; gap:10px; }
.rail__btn{ width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; transition:background-color .45s var(--ease), border-color .45s var(--ease); }
.rail__btn:hover{ background:var(--crown); border-color:var(--crown); }
.rail__btn[disabled]{ opacity:.28; pointer-events:none; }
.rail__progress{ height:1px; background:var(--line); margin-top:26px; position:relative; }
.rail__progress i{ position:absolute; inset:0 auto 0 0; background:var(--crown); width:22%; transition:transform .2s linear; }

/* ---------------------------------------------------------------- stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.stat{ background:var(--ink); padding:clamp(26px,3vw,42px) clamp(18px,2vw,30px); }
.stat__n{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,4.4vw,4.4rem);
  line-height:1; letter-spacing:-.05em; }
.stat__n sup{ font-size:.42em; vertical-align:super; color:var(--crown); letter-spacing:0; }
.stat__l{ margin-top:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-4); }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------------------------------------------------------------- pillar list */
.pillar{ padding:clamp(26px,3vw,40px) 0; border-top:1px solid var(--line); display:grid;
  grid-template-columns:56px minmax(0,.82fr) minmax(0,1.05fr); gap:clamp(16px,2.6vw,44px);
  align-items:start; transition:background-color .5s var(--ease); }
.pillar:last-child{ border-bottom:1px solid var(--line); }
.pillar__n{ font-size:10.5px; letter-spacing:.2em; color:var(--crown); padding-top:.55em; }
.pillar__t{ font-family:var(--display); font-weight:700; letter-spacing:-.032em;
  font-size:clamp(1.5rem,2.2vw,2.15rem); line-height:1.06; }
.pillar__d{ color:var(--bone-3); font-size:.96em; }
@media (max-width:820px){ .pillar{ grid-template-columns:38px 1fr; } .pillar__d{ grid-column:2; } }

/* ------------------------------------------------------------- interviews */
/* Cards take the shape of the footage (aspect-ratio is set inline from the
   poster frame), so vertical phone clips are never letterboxed or cropped. */
.ivs{
  display:grid; gap:clamp(20px,2.4vw,38px);
  grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start;
}
@media (max-width:1080px){ .ivs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .ivs{ grid-template-columns:1fr; } }

.iv{ margin:0; }
/* Vertical footage keeps a portrait card, but capped at 3:4 — a full 9:16 card
   is three times the height of its landscape neighbours and wrecks the row. The
   crop favours the upper third, which is where the face is. */
.iv--tall .iv__media{ aspect-ratio:3/4!important; }
.iv--tall .iv__v{ object-position:center 32%; }
.iv__media{
  position:relative; overflow:hidden; background:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--radius);
}
.iv__v{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.iv__media::after{                       /* keeps the play mark legible on a pale frame */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,8,9,.55), rgba(8,8,9,0) 55%);
  transition:opacity .5s var(--ease);
}
.iv.is-live .iv__media::after{ opacity:0; }

.iv__play{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:transparent; cursor:pointer; padding:0;
  display:grid; place-items:center;
}
.iv.is-live .iv__play{ display:none; }
.iv__tri{
  width:clamp(54px,4.6vw,70px); height:clamp(54px,4.6vw,70px); border-radius:50%;
  background:rgba(10,10,11,.52); border:1px solid rgba(242,239,233,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:grid; place-items:center;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.iv__tri::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:13px solid var(--bone);
  border-top:8.5px solid transparent; border-bottom:8.5px solid transparent;
  transition:border-left-color .45s var(--ease);
}
.iv__play:hover .iv__tri,.iv__play:focus-visible .iv__tri{
  background:var(--crown); border-color:var(--crown); transform:scale(1.06);
}
.iv__play:hover .iv__tri::before{ border-left-color:#fff; }

.iv__meta{ padding:18px 2px 0; }
.iv__who{
  margin:0; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--crown); font-weight:400;
}
.iv__who i{ color:var(--bone-4); font-style:normal; margin:0 .35em; }
.iv__t{
  margin:9px 0 0; font-family:var(--display); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(1.15rem,1.5vw,1.5rem); line-height:1.1;
}
.iv__d{ margin:9px 0 0; color:var(--bone-3); font-size:.92em; max-width:36ch; }

/* ---------------------------------------------------------------- process */
.proc{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,90px); align-items:start; }
.proc__sticky{ position:sticky; top:calc(var(--header-h) + 40px); }
.proc__step{ padding:clamp(24px,3vw,40px) 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.4vw,36px); align-items:start; }
.proc__step:last-child{ border-bottom:1px solid var(--line); }
.proc__n{ width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; font-size:12px; color:var(--bone-3); flex:none;
  transition:border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease); }
.proc__step.is-in .proc__n{ border-color:rgba(237,31,36,.65); color:var(--crown-lit);
  background:rgba(237,31,36,.08); }
.proc__t{ font-family:var(--display); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(1.35rem,1.9vw,1.8rem); line-height:1.12; margin-bottom:.5em; }
.proc__d{ color:var(--bone-3); font-size:.96em; max-width:56ch; }
@media (max-width:900px){ .proc{ grid-template-columns:1fr; } .proc__sticky{ position:static; } }

/* ---------------------------------------------------------------- facts table */
.facts{ border-top:1px solid var(--line); }
.fact{ display:grid; grid-template-columns:.7fr 1.3fr; gap:20px; padding:16px 0;
  border-bottom:1px solid var(--line); align-items:baseline; }
.fact dt{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-4); }
.fact dd{ margin:0; color:var(--bone-2); font-size:.97em; }
@media (max-width:560px){ .fact{ grid-template-columns:1fr; gap:5px; } }

/* ---------------------------------------------------------------- benefit / tile grid */
.tile{ padding:clamp(24px,2.6vw,36px); border:1px solid var(--line); background:var(--ink-1);
  transition:border-color .55s var(--ease), background-color .55s var(--ease), transform .55s var(--ease); height:100%; }
.tile:hover{ border-color:var(--line-2); background:var(--ink-2); transform:translateY(-3px); }
.tile__n{ font-size:10.5px; letter-spacing:.2em; color:var(--crown); }
.tile__t{ font-family:var(--display); font-weight:700; letter-spacing:-.026em;
  font-size:clamp(1.28rem,1.55vw,1.6rem); line-height:1.12; margin:14px 0 10px; }
.tile__d{ color:var(--bone-3); font-size:.94em; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ padding:.62em 1.15em; border:1px solid var(--line); border-radius:100px;
  font-size:11.5px; letter-spacing:.11em; color:var(--bone-3);
  transition:border-color .45s var(--ease), color .45s var(--ease), background-color .45s var(--ease); }
.chip:hover{ border-color:var(--crown); color:var(--bone); background:rgba(237,31,36,.07); }

.speclist li{ position:relative; padding:14px 0 14px 30px; border-bottom:1px solid var(--line);
  color:var(--bone-3); font-size:.95em; }
.speclist li::before{ content:""; position:absolute; left:0; top:1.42em; width:14px; height:1px; background:var(--crown); }

/* ---------------------------------------------------------------- gallery */
/* 12-column editorial grid on an explicit row rhythm. Items span columns AND rows,
   so mixed portrait/landscape tiles always pack without leaving holes. */
.gal{ display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(58px,5.2vw,88px); gap:clamp(10px,1.1vw,18px); }
.gal__i{ position:relative; overflow:hidden; background:var(--ink-2); cursor:pointer; }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease), filter .9s var(--ease); filter:brightness(.96); }
.gal__i:hover img{ transform:scale(1.05); filter:brightness(1.02); }
.gal__i::after{ content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .5s var(--ease); pointer-events:none; }
.gal__i:hover::after{ border-color:rgba(237,31,36,.55); }
/* The caption sits on whatever photograph happens to be underneath it, and a
   pale sky is as likely as a dark wall. The scrim has to be tall enough and
   solid enough to carry small red type on the brightest frame in the set —
   a short transparent-to-dark fade was leaving the finish name unreadable. */
.gal__meta{ position:absolute; left:0; right:0; bottom:0; padding:70px 18px 16px; z-index:2;
  background:linear-gradient(to top, rgba(6,6,7,.96) 0%, rgba(6,6,7,.88) 34%,
                             rgba(6,6,7,.62) 62%, rgba(6,6,7,0) 100%);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.gal__i:hover .gal__meta{ opacity:1; transform:none; }
.gal__meta b{ display:block; font-weight:400; font-size:13.5px; letter-spacing:.04em;
  color:var(--bone); text-shadow:0 1px 10px rgba(0,0,0,.55); }
.gal__meta span{ display:block; margin-bottom:5px; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:#ff5f63; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.gal__meta span:empty{ display:none; }
.sp3{ grid-column:span 3; } .sp4{ grid-column:span 4; } .sp5{ grid-column:span 5; }
.sp6{ grid-column:span 6; } .sp7{ grid-column:span 7; } .sp8{ grid-column:span 8; }
.sp12{ grid-column:span 12; }
.rs4{ grid-row:span 4; } .rs5{ grid-row:span 5; } .rs6{ grid-row:span 6; }
.rs7{ grid-row:span 7; } .rs8{ grid-row:span 8; }

/* uniform variant — used where filtering can hide arbitrary tiles */
.gal--even{ grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; }
.gal--even .gal__i{ grid-column:auto!important; grid-row:auto!important; aspect-ratio:4/3; }

@media (max-width:980px){
  .gal{ grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(52px,6.4vw,76px); }
  .sp3,.sp4,.sp5{ grid-column:span 3; }
  .sp6,.sp7,.sp8,.sp12{ grid-column:span 6; }
  .gal--even{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .gal{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .gal__i{ grid-column:1/-1!important; grid-row:auto!important; aspect-ratio:4/3; }
  .gal--even{ grid-template-columns:1fr; }
}
.gal__i.is-hidden{ display:none; }

.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(26px,3vw,44px); }
.filter{ padding:.66em 1.25em; border:1px solid var(--line); border-radius:100px; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bone-3);
  transition:all .45s var(--ease); }
.filter:hover{ border-color:var(--line-2); color:var(--bone); }
.filter.is-active{ background:var(--crown); border-color:var(--crown); color:#fff; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:9500; background:rgba(6,6,7,.97); display:grid;
  place-items:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lb.is-open{ opacity:1; visibility:visible; }
.lb__fig{ max-width:min(1400px,92vw); max-height:84vh; }
.lb__fig img{ max-height:84vh; width:auto; margin-inline:auto; object-fit:contain; }
.lb__cap{ margin-top:16px; text-align:center; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3); }
.lb__x{ position:absolute; top:22px; right:26px; width:46px; height:46px; border:1px solid var(--line-2);
  border-radius:50%; display:grid; place-items:center; transition:background-color .4s, border-color .4s; }
.lb__x:hover{ background:var(--crown); border-color:var(--crown); }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center;
  transition:background-color .4s, border-color .4s; }
.lb__nav:hover{ background:var(--crown); border-color:var(--crown); }
.lb__nav--prev{ left:clamp(12px,3vw,40px); } .lb__nav--next{ right:clamp(12px,3vw,40px); }
.lb__count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.24em; color:var(--bone-4); }

/* ---------------------------------------------------------------- testimonials */
.quotes{ position:relative; }
.quote{ display:none; }
.quote.is-active{ display:block; animation:q-in .8s var(--ease); }
@keyframes q-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.quote__stars{ display:flex; gap:5px; margin-bottom:clamp(22px,2.4vw,32px); }
.quote__stars svg{ width:14px; fill:var(--crown); }
/* Testimonials run long, and a grotesk at display size gets heavy fast —
   smaller and lighter than a headline, but still the loudest voice on the row. */
.quote__text{ font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1.85vw,1.85rem);
  line-height:1.34; letter-spacing:-.02em; color:var(--bone); max-width:min(100%,24em); }
.quote__by{ margin-top:clamp(24px,2.6vw,36px); display:flex; align-items:center; gap:14px; }
.quote__by b{ font-weight:400; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; }
.quote__by span{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-4); }
.quote__by i{ width:26px; height:1px; background:var(--crown); display:block; }
.quotes__ctrl{ display:flex; align-items:center; gap:18px; margin-top:clamp(30px,3.4vw,48px); }
.quotes__dots{ display:flex; gap:8px; flex-wrap:wrap; }
.qdot{ width:26px; height:2px; background:var(--line-2); transition:background-color .45s var(--ease); }
.qdot.is-active{ background:var(--crown); }

.qcard{ padding:clamp(24px,2.6vw,36px); border:1px solid var(--line); background:var(--ink-1); height:100%; }
.qcard__stars{ display:flex; gap:4px; margin-bottom:18px; }
.qcard__stars svg{ width:12px; fill:var(--crown); }
.qcard__t{ color:var(--bone-2); font-size:.97em; }
.qcard__by{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.qcard__by b{ display:block; font-weight:400; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.qcard__by span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-4); }

/* ---------------------------------------------------------------- marquee */
.marq{ overflow:hidden; border-block:1px solid var(--line); padding-block:clamp(18px,2vw,28px); }
.marq__track{ display:flex; gap:clamp(30px,4vw,64px); width:max-content; animation:marq 42s linear infinite; }
.marq:hover .marq__track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq__i{ display:inline-flex; align-items:center; gap:clamp(30px,4vw,64px);
  font-family:var(--display); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.55vw,1.55rem); color:var(--bone-3); white-space:nowrap; }
.marq__i::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--crown); flex:none; }
@media (prefers-reduced-motion:reduce){ .marq__track{ animation:none; } }

/* ---------------------------------------------------------------- accordion */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__item:first-child{ border-top:1px solid var(--line); }
.acc__btn{ width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding:clamp(22px,2.4vw,32px) 0; text-align:left; }
.acc__q{ font-family:var(--display); font-weight:600; letter-spacing:-.024em;
  font-size:clamp(1.15rem,1.65vw,1.55rem); line-height:1.22; color:var(--bone-2);
  transition:color .45s var(--ease); }
.acc__btn:hover .acc__q,.acc__item.is-open .acc__q{ color:var(--bone); }
.acc__ico{ position:relative; width:15px; height:15px; flex:none; margin-top:.42em; }
.acc__ico::before,.acc__ico::after{ content:""; position:absolute; background:var(--crown);
  transition:transform .5s var(--ease), opacity .4s; }
.acc__ico::before{ inset:7px 0 auto; height:1px; }
.acc__ico::after{ inset:0 7px auto; width:1px; height:15px; }
.acc__item.is-open .acc__ico::after{ transform:scaleY(0); opacity:0; }
.acc__panel{ max-height:0; overflow:hidden; transition:max-height .7s var(--ease); }
.acc__inner{ padding-bottom:clamp(24px,2.6vw,34px); color:var(--bone-3); max-width:72ch; font-size:.96em; }

/* ---------------------------------------------------------------- form */
.form{ display:grid; gap:clamp(18px,2vw,26px); }
.field{ position:relative; }
.field label{ display:block; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-4); margin-bottom:11px; }
.field label .req{ color:var(--crown); }
.field input,.field select,.field textarea{
  width:100%; padding:15px 2px; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  color:var(--bone); font-family:var(--sans); font-size:16px; font-weight:300; letter-spacing:.01em;
  border-radius:0; transition:border-color .45s var(--ease); -webkit-appearance:none; appearance:none;
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.65; }
.field select{ cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ed1f24' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; }
.field select option{ background:var(--ink-2); color:var(--bone); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(242,239,233,.22); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--crown); }
.field.is-error input,.field.is-error select,.field.is-error textarea{ border-bottom-color:var(--crown); }
.field__err{ display:none; margin-top:8px; font-size:11px; letter-spacing:.12em; color:var(--crown-lit); }
.field.is-error .field__err{ display:block; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,26px); }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:11.5px; color:var(--bone-4); letter-spacing:.04em; }
.form__ok{ display:none; padding:clamp(26px,3vw,40px); border:1px solid rgba(237,31,36,.4); background:rgba(237,31,36,.05); }
.form.is-sent .form__ok{ display:block; }
.form.is-sent .form__body{ display:none; }
.hp{ position:absolute; left:-9999px; opacity:0; }

.contactcard{ border:1px solid var(--line); background:var(--ink-1); padding:clamp(26px,3vw,42px); }
.contactcard dl{ margin:0; }
.contactcard .fact dd a:hover{ color:var(--crown-lit); }
.licence-badge{ display:inline-flex; align-items:center; gap:10px; padding:.7em 1.2em;
  border:1px solid rgba(237,31,36,.4); border-radius:100px; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-2); background:rgba(237,31,36,.06); }
.licence-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--crown); }

/* ---------------------------------------------------------------- cta band */
.cta{ position:relative; overflow:hidden; }
.cta__media{ position:absolute; inset:0; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta__scrim{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(8,8,9,.95) 25%, rgba(8,8,9,.62) 75%); }
.cta__inner{ position:relative; z-index:2; padding-block:clamp(70px,9vw,150px); }

/* ---------------------------------------------------------------- next/prev */
.pagenav{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.pagenav__a{ padding:clamp(30px,3.6vw,58px) clamp(20px,3vw,44px); position:relative;
  transition:background-color .55s var(--ease); }
.pagenav__a:first-child{ border-right:1px solid var(--line); }
.pagenav__a:hover{ background:var(--ink-2); }
.pagenav__a--next{ text-align:right; }
.pagenav__l{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--crown); }
.pagenav__t{ font-family:var(--display); font-weight:700; letter-spacing:-.034em;
  font-size:clamp(1.4rem,2.4vw,2.3rem); line-height:1.06; margin-top:12px; }
@media (max-width:640px){ .pagenav{ grid-template-columns:1fr; } .pagenav__a:first-child{ border-right:0; border-bottom:1px solid var(--line); } }

/* ---------------------------------------------------------------- footer */
.footer{ background:#070708; border-top:1px solid var(--line); padding-top:clamp(56px,6.5vw,104px); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:clamp(30px,4vw,64px);
  padding-bottom:clamp(44px,5vw,76px); }
@media (max-width:980px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } }
.footer__brand .brand{ margin-bottom:22px; }
.footer h4{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-4); margin-bottom:20px; }
.footer__links li{ margin-bottom:11px; }
.footer__links a{ font-size:13.5px; color:var(--bone-3); transition:color .4s var(--ease), padding-left .4s var(--ease); display:inline-block; }
.footer__links a:hover{ color:var(--bone); padding-left:6px; }
.footer__contact a{ color:var(--bone-2); }
.footer__contact a:hover{ color:var(--crown-lit); }
.footer__socials{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.footer__socials a{ width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; font-size:10px; letter-spacing:.06em; color:var(--bone-3);
  transition:border-color .45s var(--ease), color .45s var(--ease), background-color .45s var(--ease); }
.footer__socials a:hover{ border-color:var(--crown); background:var(--crown); color:#fff; }
.footer__areas{ padding-block:clamp(28px,3vw,44px); border-top:1px solid var(--line); }
.footer__areas p{ font-size:12px; color:var(--bone-4); line-height:2; letter-spacing:.04em; }
.footer__bar{ border-top:1px solid var(--line); padding-block:26px; display:flex; flex-wrap:wrap;
  gap:16px 30px; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.13em; color:var(--bone-4); text-transform:uppercase; }
.footer__bar a:hover{ color:var(--bone-2); }
.footer__legal{ display:flex; flex-wrap:wrap; gap:16px 24px; }

/* ---------------------------------------------------------------- cursor */
.cursor{ position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--crown); z-index:9997; pointer-events:none; mix-blend-mode:normal;
  transform:translate3d(-50%,-50%,0); transition:width .45s var(--ease), height .45s var(--ease),
  background-color .45s var(--ease), opacity .3s; opacity:0; }
.cursor.is-on{ opacity:1; }
/* Same problem as the caption: this floats over the photograph. A 16% red wash
   left the word invisible on a bright frame, so the disc carries its own dark
   backing and the label is set in white over it. */
.cursor.is-lg{ width:74px; height:74px; background:rgba(10,10,11,.58);
  border:1px solid rgba(237,31,36,.85); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px); box-shadow:0 6px 26px rgba(0,0,0,.35); }
.cursor__t{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  opacity:0; transition:opacity .3s; display:grid; place-items:center; width:100%; height:100%;
  text-shadow:0 1px 6px rgba(0,0,0,.8); }
.cursor.is-lg .cursor__t{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ------------------------------------------------- branded page transition
   One panel travels upward across the whole navigation: it wipes UP to cover
   the outgoing page, and on the incoming page it keeps going and wipes off
   the top. The crown rides in the middle of it.
   Default state is fully collapsed, so with no JS the veil never appears. */
.veil{
  position:fixed; inset:0; z-index:9600; background:var(--ink);
  display:grid; place-items:center; pointer-events:none;
  clip-path:inset(100% 0 0 0);
}
.veil__inner{ display:grid; justify-items:center; }
.veil__mark{
  width:clamp(52px,5.4vw,80px); height:auto; opacity:0;
  transform:translateY(14px) scale(.88);
  transition:opacity .32s var(--ease), transform .44s var(--ease);
}
.veil__line{
  width:clamp(78px,8vw,116px); height:1px; margin-top:20px; background:var(--line-2);
  position:relative; overflow:hidden; opacity:0; transition:opacity .4s var(--ease);
}
.veil__line::after{
  content:""; position:absolute; inset:0; background:var(--crown);
  transform:scaleX(0); transform-origin:left;
}

/* leaving — panel wipes up over the current page */
.veil.is-leaving{ clip-path:inset(0 0 0 0); transition:clip-path .44s var(--ease-io); }
.veil.is-leaving .veil__mark{ opacity:1; transform:none; transition-delay:.10s; }
.veil.is-leaving .veil__line{ opacity:1; transition-delay:.10s; }
.veil.is-leaving .veil__line::after{ animation:veil-line .4s var(--ease) .12s forwards; }
@keyframes veil-line{ to{ transform:scaleX(1); } }

/* arriving — panel is already covering, then continues up and off.
   NOTE the selector: `html.nav-in .veil` (0,2,1) out-specifies a bare
   `.veil.is-entering` (0,2,0), which would pin the panel open. The exit rule
   has to carry nav-in too, or it silently loses and the panel cuts instead
   of animating. */
html.nav-in .veil{ clip-path:inset(0 0 0 0); }
html.nav-in .veil .veil__mark{ opacity:1; transform:none; transition:none; }
html.nav-in .veil .veil__line{ opacity:1; transition:none; }
html.nav-in .veil .veil__line::after{ transform:scaleX(1); }

html.nav-in .veil.is-entering,
.veil.is-entering{ clip-path:inset(0 0 100% 0); transition:clip-path .58s var(--ease-io); }
html.nav-in .veil.is-entering .veil__mark,
.veil.is-entering .veil__mark{ opacity:0; transform:translateY(-14px) scale(.94);
  transition:opacity .3s var(--ease), transform .42s var(--ease); }
html.nav-in .veil.is-entering .veil__line,
.veil.is-entering .veil__line{ opacity:0; transition:opacity .26s var(--ease); }

/* the preloader only runs on a first visit — see the head script */
html.no-preload .preload{ display:none; }

@media (prefers-reduced-motion:reduce){
  .veil,.veil.is-leaving,.veil.is-entering{ display:none!important; }
}

/* utility */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; top:-60px; left:var(--gutter); z-index:10001; padding:12px 20px;
  background:var(--crown); color:#fff; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:top .3s; }
.skip:focus{ top:12px; }
.mt-s{ margin-top:clamp(18px,2vw,28px); } .mt-m{ margin-top:clamp(28px,3.4vw,52px); }
.mt-l{ margin-top:clamp(42px,5vw,78px); }
.stack-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.text-r{ text-align:right; }
@media (max-width:640px){ .text-r{ text-align:left; } }