/* ============================================================
   Vylux Studio storefront

   DESIGN BRIEF (locked before any markup was written)
   1. Audience + job: founders and brand managers of emerging canned and
      bottled drinks brands. In 90 seconds they must see the work, believe the
      price is fixed, and start a brief without asking anyone for a call.
   2. Style direction: cold cinematic void. Inherited from the films, not
      invented for the site. The page is the same darkness the can hangs in.
   3. Palette posture: dark-first, single field (#0B1620 void) plus frost ink.
      NO chromatic accent in the chrome. Every colour on this page comes from
      inside a film frame, because the client's brand supplies the colour, not
      ours. This is the anti-template doctrine executed literally.
   4. Type pairing: Geist (display and body, 200 to 500) with Geist Mono for
      figures, timings and labels. The wordmark is set the way the films set
      theirs: thin, wide-tracked, frost.
   5. Signature moment: the hero film running full bleed with the copy sitting
      in the empty void the footage already leaves on the left.
   6. Motion posture: calm. One choreographed hero entrance, selective scroll
      reveals, nothing that loops for decoration.

   Shape lock: radius 0 everywhere.
   Accent lock: frost (#F2F5F7) is the only interactive accent.
   ============================================================ */

:root{
  /* field */
  --void:        #0B1620;
  --void-deep:   #070E15;
  --surface:     #0F1B26;

  /* ink */
  --frost:       #F2F5F7;
  --steel:       #D6DEE3;
  --muted:       #8C9BA8;

  /* structure */
  --line:        rgba(214,222,227,.13);
  --line-strong: rgba(214,222,227,.26);

  /* type scale, fluid */
  --t-hero:  clamp(2.4rem, 1.4rem + 3.7vw, 4.75rem);
  --t-h2:    clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  --t-h3:    clamp(1.05rem, .98rem + .32vw, 1.25rem);
  --t-lede:  clamp(1.02rem, .98rem + .34vw, 1.25rem);
  --t-body:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --t-mono:  .8125rem;

  /* rhythm, spacious */
  --sp-section: clamp(5rem, 3rem + 7vw, 10.5rem);
  --gutter:     clamp(1.25rem, .6rem + 2.6vw, 4rem);
  --maxw:       1240px;

  /* motion */
  --dur-fast: 160ms;
  --dur-med:  300ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--steel);
  font-family:"Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- typography primitives ---------- */

h1,h2,h3{ margin:0; font-weight:300; letter-spacing:-.02em; line-height:1.08; color:var(--frost); text-wrap:balance; }

.h2{ font-size:var(--t-h2); }
.h2--wide{ max-width:18ch; }

.lede{
  margin:1.6rem 0 0;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--steel);
  max-width:52ch;
  text-wrap:pretty;
}
.lede--wide{ max-width:60ch; }

p{ text-wrap:pretty; }

.fineprint{
  margin:3rem 0 0;
  font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:var(--t-mono);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--muted);
  max-width:64ch;
}
.fineprint--wide{ max-width:70ch; }

.mark{
  font-family:"Geist", sans-serif;
  font-weight:300;
  font-size:.82rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--frost);
  text-decoration:none;
  white-space:nowrap;
}

/* ---------- links, buttons ---------- */

a{ color:var(--frost); }

:focus-visible{
  outline:1px solid var(--frost);
  outline-offset:3px;
}

.skip{
  position:fixed; top:0; left:0; z-index:200;
  padding:.75rem 1rem;
  background:var(--frost); color:var(--void);
  font-size:.85rem; text-decoration:none;
  transform:translateY(-120%);
  transition:transform var(--dur-fast) var(--ease-out);
}
.skip:focus{ transform:translateY(0); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  padding:.85rem 1.6rem;
  font-family:"Geist", sans-serif;
  font-size:.9rem; font-weight:400;
  letter-spacing:.02em;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn--solid{ background:var(--frost); color:var(--void); }
.btn--solid:hover{ background:#fff; }
.btn--ghost{ background:transparent; color:var(--frost); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--frost); background:rgba(242,245,247,.06); }
.btn:active{ transform:translateY(1px); }
.btn--lg{ min-height:56px; padding:1rem 2.2rem; font-size:.95rem; }

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

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(11,22,32,.78);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.is-stuck{ background:rgba(11,22,32,.96); }
}
.nav__in{
  height:68px;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:2rem;
}
.nav__links{ margin-left:auto; display:flex; gap:2rem; }
.nav__links a{
  font-size:.88rem; font-weight:300; color:var(--steel); text-decoration:none;
  padding-block:.25rem;
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover{ color:var(--frost); border-bottom-color:var(--frost); }
.nav__cta{ min-height:40px; padding:.5rem 1.2rem; font-size:.85rem; }

@media (max-width: 880px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
}

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

.hero{
  position:relative;
  min-height:100dvh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero__stage{ position:absolute; inset:0; background:var(--void); }
.hero__film{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.hero__film.is-on{ opacity:1; }

/* Two scrims: one from the left so the copy always clears the footage, one
   from the bottom so the page dissolves into the same void the film sits in. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(97deg, rgba(7,14,21,.97) 0%, rgba(7,14,21,.93) 26%, rgba(7,14,21,.74) 44%, rgba(7,14,21,.28) 62%, rgba(7,14,21,0) 80%),
    linear-gradient(to top, var(--void) 0%, rgba(11,22,32,.62) 24%, rgba(11,22,32,0) 58%);
}

.hero__copy{
  position:relative;
  width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gutter) clamp(4rem, 2rem + 7vh, 7rem);
}
.hero__h1{
  font-size:var(--t-hero);
  font-weight:200;
  letter-spacing:-.03em;
  line-height:1.02;
  max-width:13ch;
}
.hero__h1 .ln{ display:block; }
.hero__h1 .ln--sub{ color:var(--muted); }

.hero__p{
  margin:1.75rem 0 0;
  max-width:44ch;
  font-size:var(--t-lede);
  color:var(--steel);
}
.hero__cta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.85rem; }

.sound{
  position:absolute; z-index:3;
  right:var(--gutter);
  bottom:clamp(4rem, 2rem + 7vh, 7rem);
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:44px; padding:.55rem 1rem;
  background:rgba(7,14,21,.5);
  border:1px solid var(--line-strong);
  color:var(--steel);
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sound:hover{ color:var(--frost); border-color:var(--frost); }
.sound__bars{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.sound__bars i{ width:2px; height:4px; background:currentColor; }
.sound__bars i:nth-child(2){ height:11px; }
.sound__bars i:nth-child(3){ height:7px; }
.sound[aria-pressed="true"] .sound__bars i{ animation:pulse 1.1s var(--ease-out) infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2){ animation-delay:.18s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3){ animation-delay:.36s; }
@keyframes pulse{ from{ transform:scaleY(.55); } to{ transform:scaleY(1); } }

@media (max-width: 720px){
  .hero{ min-height:94dvh; }
  .sound{ bottom:1.75rem; }
  .hero__copy{ padding-bottom:6.5rem; }
}

/* ---------- section frame ---------- */

section:not(.hero){ padding-block:var(--sp-section); }

/* ---------- the pack ---------- */

.pack{ border-top:1px solid var(--line); }
.pack__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items:start;
}
@media (max-width: 900px){
  .pack__grid{ grid-template-columns:1fr; }
}

.price{
  margin:2.75rem 0 0;
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
}
.price__fig{
  font-variant-numeric:tabular-nums;
  font-weight:200;
  font-size:clamp(2.6rem, 1.6rem + 3.4vw, 4.25rem);
  letter-spacing:-.03em;
  line-height:1;
  color:var(--frost);
}
.price__unit{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}

.spec{ list-style:none; margin:2.5rem 0 3rem; padding:0; }
.spec li{
  display:grid;
  grid-template-columns:minmax(7.5rem, 9rem) 1fr;
  gap:1.5rem;
  padding-block:.95rem;
  border-bottom:1px solid var(--line);
}
.spec li:first-child{ border-top:1px solid var(--line); }
.spec__k{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  padding-top:.18em;
}
.spec__v{ color:var(--steel); }
@media (max-width: 520px){
  .spec li{ grid-template-columns:1fr; gap:.3rem; }
}

.pack__proof{ display:grid; grid-template-columns:1fr; gap:1.75rem; }
.tile{ margin:0; }
.tile__film{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--void-deep);
  border:1px solid var(--line);
}
.tile figcaption{
  margin-top:.85rem;
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.note{
  margin:.25rem 0 0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
  max-width:46ch;
}


/* ---------- single films ---------- */

.films{ border-top:1px solid var(--line); }

.rate{ list-style:none; margin:3.5rem 0 0; padding:0; }
.rate__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.5rem 2rem;
  padding-block:1.8rem;
  border-bottom:1px solid var(--line);
  transition:border-color var(--dur-med) var(--ease-out);
}
.rate__row:first-child{ border-top:1px solid var(--line-strong); }
.rate__row:hover{ border-bottom-color:var(--line-strong); }
.rate__name{
  font-size:clamp(1.1rem, 1rem + .55vw, 1.5rem);
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--frost);
}
.rate__meta{
  grid-column:1; grid-row:2;
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.04em;
  color:var(--muted);
}
.rate__fig{
  grid-column:2; grid-row:1 / span 2;
  align-self:center;
  justify-self:end;
  font-variant-numeric:tabular-nums;
  font-weight:200;
  font-size:clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  letter-spacing:-.02em;
  color:var(--frost);
}
@media (max-width: 700px){
  .rate__row{ gap:.35rem 1.25rem; padding-block:1.4rem; }
}

/* ---------- how we work ---------- */

.work{ border-top:1px solid var(--line); background:var(--void-deep); }

.stages{
  list-style:none;
  margin:4rem 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line-strong);
}
.stages li{
  padding:2rem 1.5rem 0 0;
  border-left:1px solid var(--line);
  padding-left:1.5rem;
}
.stages li:first-child{ border-left:0; padding-left:0; }
.stages h3{
  font-size:var(--t-h3);
  letter-spacing:-.01em;
  margin-bottom:.9rem;
}
.stages p{ margin:0; font-size:.94rem; line-height:1.65; color:var(--muted); }

@media (max-width: 1000px){
  .stages{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stages li{ padding:2rem 1.5rem 2rem 1.5rem; border-left:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stages li:nth-child(odd){ border-left:0; padding-left:0; }
}
@media (max-width: 620px){
  .stages{ grid-template-columns:1fr; }
  .stages li{ padding:1.75rem 0; border-left:0; padding-left:0; }
}

/* ---------- terms ---------- */

.terms{ border-top:1px solid var(--line); }
.terms__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1.5rem, .5rem + 2.5vw, 3rem);
}
@media (max-width: 900px){ .terms__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .terms__grid{ grid-template-columns:1fr; } }

.term h3{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.term__fig{
  margin:1rem 0 .9rem;
  font-family:"Geist Mono", monospace;
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--frost);
}
.term p:last-child{ margin:0; font-size:.94rem; line-height:1.65; color:var(--muted); }

/* The guarantee sits on the same radial-falloff void the film lockups use. */
.guarantee{
  margin-top:clamp(4rem, 2rem + 5vw, 7rem);
  padding:clamp(2.75rem, 1.5rem + 3.4vw, 4.75rem) clamp(1.5rem, .5rem + 3vw, 4rem);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(214,222,227,.085) 0%, rgba(214,222,227,.02) 42%, rgba(11,22,32,0) 72%),
    var(--void-deep);
  text-align:center;
}
.guarantee__lead{
  margin:0 0 1.5rem;
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.guarantee__body{
  margin:0 auto;
  max-width:26ch;
  font-size:clamp(1.5rem, 1.05rem + 1.8vw, 2.6rem);
  font-weight:200;
  line-height:1.24;
  letter-spacing:-.02em;
  color:var(--frost);
  text-wrap:balance;
}

/* ---------- guarantee fineprint ---------- */

.guarantee__fine{
  margin:1.75rem auto 0;
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.04em;
  color:var(--muted);
}

/* ---------- theater: the full film, with sound, on request ---------- */

.theater{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 4rem);
  background:rgba(7,14,21,.96);
}
.theater[hidden]{ display:none; }
.theater video{
  width:100%; max-width:1280px; max-height:85vh;
  background:#000;
  outline:none;
}
.theater__close{
  position:absolute; top:clamp(1rem, 3vw, 2rem); right:clamp(1rem, 3vw, 2rem);
  padding:.6rem 1.2rem;
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
  background:none;
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theater__close:hover{ color:var(--frost); border-color:var(--frost); }

/* ---------- faq ---------- */

.faq{ border-top:1px solid var(--line); }
.faq__list{ margin-top:3rem; max-width:960px; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  padding:1.4rem 0;
  cursor:pointer;
  list-style:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  font-size:clamp(1.05rem, .95rem + .45vw, 1.3rem);
  font-weight:300;
  color:var(--steel);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  font-family:"Geist Mono", monospace;
  font-weight:300;
  color:var(--muted);
  flex:none;
}
.faq__item[open] summary::after{ content:"\2212"; }
.faq__item summary:hover{ color:var(--frost); }
.faq__item p{
  margin:0 0 1.6rem;
  max-width:68ch;
  font-size:.97rem;
  line-height:1.7;
  color:var(--muted);
}

/* ---------- the brief form ---------- */

.brief{ border-top:1px solid var(--line); background:var(--void-deep); }
.form{ max-width:960px; }

.form{ margin-top:3.5rem; }
.form__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2rem clamp(1.5rem,.5rem + 2vw,2.5rem);
}
.f{ grid-column:1 / -1; display:flex; flex-direction:column; gap:.55rem; }
.f--half{ grid-column:span 1; }
@media (max-width: 680px){
  .form__grid{ grid-template-columns:1fr; }
  .f--half{ grid-column:1 / -1; }
}

label{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel);
}
.req{ color:var(--muted); }

input, select, textarea{
  width:100%;
  min-height:52px;
  padding:.85rem 1rem;
  background:var(--surface);
  border:1px solid var(--line-strong);
  color:var(--frost);
  font-family:inherit;
  font-size:1rem;
  font-weight:300;
  line-height:1.5;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
textarea{ resize:vertical; min-height:120px; }
select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--steel) 50%),
                   linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.75rem;
}
input:hover, select:hover, textarea:hover{ border-color:rgba(214,222,227,.42); }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--frost);
  background:#12202C;
}
input::placeholder, textarea::placeholder{ color:var(--muted); }

/* Error state carries its meaning in the words, not in a colour, so the
   single-accent lock holds and the message still reads without colour vision. */
.err{
  margin:0;
  display:flex; align-items:baseline; gap:.5rem;
  font-size:.85rem;
  line-height:1.5;
  color:var(--frost);
}
.err::before{
  content:"Required";
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.f.is-invalid input, .f.is-invalid select{ border-color:var(--frost); }

.help{
  margin:0;
  font-size:.85rem;
  line-height:1.6;
  color:var(--muted);
  max-width:56ch;
}

.need{
  margin-top:3.5rem;
  padding:2rem clamp(1.25rem,.5rem + 2vw,2.5rem);
  border:1px solid var(--line);
  background:var(--void);
}
.need h3{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.25rem;
}
.need ul{ margin:0; padding:0; list-style:none; display:grid; gap:1rem; }
.need li{
  padding-left:1.5rem;
  position:relative;
  font-size:.94rem; line-height:1.65; color:var(--steel);
}
.need li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--line-strong);
}

.form__send{ margin-top:3rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.help--send{ max-width:44ch; }

/* ---------- one month, laid out ---------- */

.month{ border-top:1px solid var(--line); }
.month__row{
  margin-top:3rem;
  display:flex;
  align-items:flex-end;
  gap:1.25rem;
  flex-wrap:wrap;
}
.month__row .tile img{
  height:clamp(140px, 17.5vw, 248px);
  width:auto;
  max-width:100%;
  display:block;
}
.note--wide{ margin-top:3rem; max-width:60ch; }

/* ---------- fidelity pair ---------- */

.fidelity{ border-top:1px solid var(--line); }
.fidelity__pair{
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.75rem;
}
.fidelity__pair img{ width:100%; display:block; }
@media (max-width: 720px){ .fidelity__pair{ grid-template-columns:1fr; } }

/* ---------- the stills sheet ---------- */

.gate{ margin:4.5rem 0 0; }
.gate__strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}
.gate__strip img{ width:100%; display:block; }
.gate figcaption{
  margin-top:1.1rem;
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  color:var(--muted);
  max-width:60ch;
}
@media (max-width: 620px){ .gate__strip{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------- founding + footer ---------- */

.founding{ border-top:1px solid var(--line); }
.founding__body{
  margin:0;
  max-width:34ch;
  font-size:clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-weight:200;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--frost);
}

.foot{ border-top:1px solid var(--line); padding-block:3rem 4rem; }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2.5rem; }
.mark--foot{ font-size:.75rem; }
.foot__mail{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  color:var(--steel);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.foot__mail:hover{ color:var(--frost); border-bottom-color:var(--frost); }
.foot__line{
  margin-left:auto;
  font-size:.85rem;
  color:var(--muted);
}
@media (max-width: 680px){ .foot__line{ margin-left:0; flex-basis:100%; } }
.foot__legal{
  font-family:"Geist Mono", monospace;
  font-size:var(--t-mono);
  color:var(--muted);
  text-decoration:none;
}
.foot__legal:hover{ color:var(--frost); }

/* ---------- motion: one entrance, selective reveals ---------- */

@media (prefers-reduced-motion: no-preference){
  .hero__copy > *{
    animation:rise var(--dur-slow) var(--ease-out) both;
  }
  .hero__h1{ animation-delay:.08s; }
  .hero__p{ animation-delay:.20s; }
  .hero__cta{ animation-delay:.32s; }
  .sound{ animation:fade var(--dur-slow) var(--ease-out) .5s both; }

  .h2, .lede, .price, .guarantee__lead, .guarantee__body, .founding__body{
    animation:rise 1ms linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 16%;
  }
  @supports not (animation-timeline: view()){
    .h2, .lede, .price, .guarantee__lead, .guarantee__body, .founding__body{ animation:none; }
  }
}

@keyframes rise{ from{ opacity:0; transform:translateY(22px); } }
@keyframes fade{ from{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}