/* Design system: "Superlative" style reference (DESIGN.md)
   Industrial monograph · monochrome · strictly achromatic, no accent colour · no shadows · rectangular geometry (client preferences) */
:root{
  --color-pulp-cream:#f6f4f2;
  --color-graphite-veil:#e4e3e2;
  --color-mid-ash:#8c8c8c;
  --color-ink-black:#141414;
  --color-charcoal-press:#232323;
  --color-vapor:#ffffff;
  --color-null:#000000;

  /* labels use regular-width Inter caps instead of a condensed face (client preference); display/body → Inter */
  --font-cond:'Inter','Helvetica Neue',ui-sans-serif,system-ui,sans-serif;
  --font-light:'Inter','Helvetica Neue',ui-sans-serif,system-ui,sans-serif;

  --text-caption:12px;
  --tracking:.08em;
  --text-sub:clamp(18px,1.75vw,25px);
  /* sized against both width and height so the hero always fits one screen */
  --text-display:clamp(28px,min(6vw,7.4vh),90px);

  --gutter:clamp(16px,2.1vw,30px);
  --gap:15px;
  --radius-buttons:0;
  --radius-badges:0;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-ink-black);color:var(--color-vapor);font:400 15px/1.5 var(--font-light);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}

/* ---------- type primitives ---------- */
.label{font:400 var(--text-caption)/1 var(--font-cond);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--color-mid-ash);margin:0}
.label--white{color:var(--color-vapor)}
.label em{font-style:normal;opacity:.6;margin-left:6px}

.display{font:300 var(--text-display)/1 var(--font-light);letter-spacing:var(--tracking);text-transform:uppercase;margin:0;text-wrap:balance}
.display--md{font-size:clamp(28px,3.4vw,48px)}
.sub{font:300 var(--text-sub)/1.2 var(--font-light);margin:0;max-width:28ch}
.sub--muted{color:var(--color-mid-ash)}

.badge{display:inline-flex;align-items:center;font:400 var(--text-caption)/1 var(--font-cond);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--color-vapor);border:1px solid var(--color-vapor);border-radius:var(--radius-badges);padding:8px 11px 7px}
.badge--sm{font-size:11px;padding:4px 8px 3px;margin-left:10px}

.btn{display:inline-flex;align-items:center;gap:10px;font:400 var(--text-caption)/1 var(--font-cond);letter-spacing:var(--tracking);text-transform:uppercase;text-decoration:none;
  color:var(--color-vapor);background:transparent;border:1px solid var(--color-vapor);border-radius:var(--radius-buttons);padding:11px 19px;cursor:pointer;outline:1px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.btn--lg{padding:15px 24px}
.btn:hover{outline-color:var(--color-vapor)} /* border reads as 2px, no fill change */
.btn:focus-visible{outline:1px solid var(--color-vapor);outline-offset:3px}
.btn[disabled]{opacity:.5;cursor:progress}

/* ---------- background film ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--color-ink-black)}
.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.bg__video.is-ready{opacity:1}
/* legibility scrim for light footage: darker at the bottom (headline + copy) and a little at the top (logo) */
.bg__tint{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.45) 42%,rgba(10,10,10,.12) 72%,rgba(10,10,10,.38) 100%)}

/* ---------- one-screen hero ---------- */
.hero{position:relative;z-index:1;height:100svh;min-height:520px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:var(--gutter)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:var(--gap)}
.logo{display:block;height:clamp(21.3px,2.13vw,29.3px);width:auto;max-width:100%}

.hero__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(20px,3.2vh,40px);align-items:end}
.hero__head{grid-column:1 / span 8;display:grid;gap:clamp(15px,2.4vh,30px)}
.hero__meta{display:flex;align-items:center}
.hero__title{max-width:14ch}
.hero__h1{font:inherit;letter-spacing:inherit;margin:0}
/* CTA set in the headline itself, one blank line below it */
.cta{position:relative;display:inline-block;margin-top:1em;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.hero__title .cta{display:block;width:max-content;white-space:nowrap}
/* underline drawn as a line so it stays under the split letters */
.cta::after{content:"";position:absolute;left:0;right:.08em;bottom:-.1em;height:max(1px,.035em);background:currentColor}
/* hover: each letter rolls up and is replaced by its copy from below, staggered left → right */
.cta .ch{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.cta .ch>span{display:block;transition:transform .6s var(--ease);transition-delay:calc(var(--i) * 22ms)}
.cta .ch>span::after{content:attr(data-c);position:absolute;left:0;top:100%}
.cta:hover .ch>span,.cta:focus-visible .ch>span{transform:translateY(-100%)}
.cta:focus-visible{outline:1px solid var(--color-vapor);outline-offset:6px}

.hero__copy{grid-column:9 / -1;font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);max-width:44ch}
.hero__copy p{margin:0 0 .8em}
.hero__copy p:last-child{margin:0}
.hero__copy .hl{color:var(--color-vapor)}


/* ---------- popup ---------- */
.modal{width:min(760px,calc(100vw - 2 * var(--gutter)));max-height:calc(100svh - 2 * var(--gutter));padding:0;margin:auto;overflow:auto;overscroll-behavior:contain;
  color:var(--color-vapor);border:1px solid rgba(255,255,255,.22);border-radius:0;
  /* frosted glass: the dimmed film shows through, blurred */
  background:rgba(18,18,18,.42);backdrop-filter:blur(28px) saturate(1.15);-webkit-backdrop-filter:blur(28px) saturate(1.15)}
.modal::backdrop{background:rgba(8,8,8,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal[open]{animation:modalIn .5s var(--ease)}
.modal[open]::backdrop{animation:fadeIn .4s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px)}}
@keyframes fadeIn{from{opacity:0}}

.modal__bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:var(--gap);padding:15px 30px;background:transparent;border-bottom:1px solid rgba(255,255,255,.16)}
.close{background:none;border:0;padding:4px 0;cursor:pointer}
.close:hover{text-decoration:underline;text-underline-offset:3px}
.close:focus-visible{outline:1px solid var(--color-vapor);outline-offset:3px}
.modal__body{padding:clamp(24px,3.4vw,45px) 30px 30px;display:grid;gap:30px}
.modal__head{display:grid;gap:15px}

/* ---------- form ---------- */
.form{display:grid;gap:24px 20px;grid-template-columns:1fr 1fr}
.field{display:grid;gap:11px;margin:0;padding:0;border:0;min-width:0;align-content:start}
.field--wide,.form__foot,.form__status{grid-column:1 / -1}
legend.label{padding:0;margin-bottom:11px}

input[type=text],input[type=email],input[type=tel],select{
  width:100%;min-width:0;height:48px;padding:0 15px;font:400 16px/1 var(--font-light);color:var(--color-vapor);
  background:transparent;border:1px solid rgba(255,255,255,.32);border-radius:0;outline:none;transition:border-color .15s}
input::placeholder{color:rgba(255,255,255,.3)}
input:hover,select:hover{border-color:rgba(255,255,255,.6)}
input:focus,select:focus{border-color:var(--color-vapor)}
.field.is-invalid input{border-color:var(--color-vapor);border-style:dashed}
.field__error{font:400 13px/1.3 var(--font-light);color:var(--color-vapor)}
.field__error:empty{display:none}

select{appearance:none;cursor:pointer;padding-right:34px;font-family:var(--font-cond);font-size:var(--text-caption);letter-spacing:var(--tracking);text-transform:uppercase;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-vapor) 50%),linear-gradient(135deg,var(--color-vapor) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat}
select option{background:var(--color-charcoal-press);color:var(--color-vapor)}
.combo{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;font:400 var(--text-caption)/1 var(--font-cond);letter-spacing:var(--tracking);text-transform:uppercase;
  color:var(--color-vapor);background:rgba(10,10,10,.45);border:1px solid rgba(255,255,255,.4);border-radius:0;padding:11px 15px 10px;transition:color .15s,background .15s,border-color .15s}
.seg label:hover span{border-color:var(--color-vapor)}
.seg input:checked+span{color:var(--color-ink-black);background:var(--color-vapor);border-color:var(--color-vapor)}
.seg input:focus-visible+span{outline:1px solid var(--color-vapor);outline-offset:3px}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.form__foot{display:flex;align-items:center;gap:15px 30px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.form__status{margin:0;color:var(--color-vapor)}
.form__status:empty{display:none}

.done{display:grid;gap:20px;justify-items:start}

/* ---------- entrance ---------- */
.nav,.hero__head,.hero__copy{opacity:0;transform:translateY(14px);animation:rise 1.1s var(--ease) forwards}
.hero__head{animation-delay:.15s}.hero__copy{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero__head{grid-column:1 / span 7}
  .hero__copy{grid-column:8 / -1;font-size:13px}
}
@media (max-width:800px){
  :root{--tracking:.06em;--text-display:clamp(26px,8.2vw,56px)}
  .hero{height:auto;min-height:100svh}
  .hero__body{grid-template-columns:1fr;row-gap:18px}
  .hero__head,.hero__copy{grid-column:1 / -1}
  .hero__head{gap:14px}
  .hero__copy{font-size:13px;line-height:1.42;max-width:none}
  .hero__copy p{margin-bottom:.6em}
  .bg__tint{background:linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.6) 55%,rgba(10,10,10,.2) 80%,rgba(10,10,10,.45) 100%)}

  /* popup becomes a full-screen sheet */
  .modal{width:100%;max-width:none;height:100%;max-height:none;border:0}
  .modal__bar{padding:15px var(--gutter);background:rgba(18,18,18,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .modal__body{padding:24px var(--gutter) 30px}
  .form{grid-template-columns:1fr;gap:20px}
}
/* short phones: drop the courtesy line so everything stays on one screen */
@media (max-width:800px) and (max-height:760px){
  .hero__copy p:first-child{display:none}
}
@media (max-width:420px){
  .combo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .nav,.hero__head,.hero__copy{opacity:1;transform:none}
}