/* Page-level composition: hero, rail, story, proof, page heroes, about, returns, contact. */

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:calc(var(--nav-h) + 2rem) clamp(2.5rem,7vh,5rem);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(11 11 11/.55) 0%,rgb(11 11 11/.30) 38%,rgb(11 11 11/.86) 100%)}
.hero__inner{position:relative;color:#F5F5F5}
/* NOT the accent here. The hero photograph is shot on an ORANGE seamless backdrop, so
   #FD6C07 type on it measured barely legible. Over photography the eyebrow takes the
   max-contrast bone instead; the accent still owns the ink sections below. */
.hero__eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#F5F5F5;margin:0 0 var(--s2);text-shadow:0 1px 12px rgb(11 11 11/.55)}
.hero__h1{position:relative;font-size:var(--fs-hero);line-height:.92;margin:0;
  display:flex;flex-direction:column;letter-spacing:-.03em}
.hero__line{display:block;overflow:hidden}
.hero__strikes{position:absolute;inset:0;pointer-events:none;display:flex;
  justify-content:flex-start;gap:min(9vw,120px);padding-left:8%}
.hero__strikes i{display:block;width:2px;background:#F5F5F5;mix-blend-mode:difference;
  transform:rotate(9deg);transform-origin:top center}
.hero__sub{max-width:46ch;margin:var(--s3) 0 0;color:#E6E6E6;font-size:clamp(1rem,1.4vw,1.2rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.hero__trust{margin:var(--s3) 0 0;font-size:var(--fs-sm);color:var(--grey-400);letter-spacing:.02em}
.hero__scroll{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vh,2rem);
  writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey-400)}
@media(max-width:860px){
  .hero{min-height:86svh}
  .hero__cta .btn{flex:1 1 100%}
  .hero__strikes{padding-left:4%;gap:14vw}
}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding-block:var(--s3);border-block:1px solid var(--border)}
.marquee__t{display:flex;gap:var(--s4);width:max-content;font-family:var(--display);
  font-weight:800;font-size:clamp(1.1rem,2.4vw,2rem);text-transform:uppercase;
  letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
.marquee__t span:nth-child(even){color:var(--flare)}

/* ---------- pinned rail ---------- */
.rail-stage{overflow:hidden}
.rail__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
  padding-block:clamp(1.5rem,4vh,2.5rem)}
.rail__head h2{flex:1 1 auto}
.rail__all{text-decoration:none;font-weight:700;font-size:var(--fs-sm);color:var(--flare);
  letter-spacing:.06em;text-transform:uppercase}
.rail__view{overflow:hidden}
.rail__track{display:flex;gap:28px;padding-inline:clamp(1rem,4vw,3rem);width:max-content}
.rail__item{flex:0 0 auto;text-decoration:none;color:inherit}
@media(min-width:861px){
  .rail-stage{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--nav-h) + clamp(1rem,2vh,1.75rem));
    padding-bottom:clamp(1.5rem,3vh,2.5rem);
    --rail-media-h:clamp(300px,calc(100svh - 300px),760px)}
  .rail__item .card__media{height:var(--rail-media-h);width:auto}
  .rail__item .tile{height:100%;width:auto;aspect-ratio:4/5}
}
@media(max-width:860px){
  /* designed, not degraded: a native snap carousel beats a pin on a phone */
  .rail-stage{padding-block:clamp(2.5rem,7vw,4rem)}
  .rail__view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1*var(--s3));padding-inline:var(--s3)}
  .rail__view::-webkit-scrollbar{display:none}
  .rail__track{width:max-content;gap:var(--s2);padding-inline:0}
  .rail__item{scroll-snap-align:start;width:74vw}
  .rail__dots{display:flex;gap:6px;justify-content:center;margin-top:var(--s3)}
  .rail__dots i{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .2s}
  .rail__dots i.is-on{background:var(--flare)}
}
.rail__dots{display:none}
@media(max-width:860px){.rail__dots{display:flex}}

/* ---------- page heroes ---------- */
.phero{position:relative;padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) clamp(2.5rem,6vw,4.5rem);
  overflow:hidden;isolation:isolate}
.phero--sm{padding-block:calc(var(--nav-h) + clamp(2rem,4vw,3rem)) clamp(2rem,4vw,3rem)}
.phero--tall{min-height:72svh;display:flex;align-items:flex-end}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero--tall::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(11 11 11/.52),rgb(11 11 11/.86))}
.phero__in{position:relative}
.crumb{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s2);display:flex;gap:.5rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--flare)}

/* ---------- story ---------- */
.story{display:grid;gap:var(--s5);align-items:center}
@media(min-width:861px){.story{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.story__img .tile{aspect-ratio:4/5}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:var(--s3);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.quote{margin:0;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s3)}
.quote blockquote{margin:0}
.quote p{font-style:italic;color:var(--fg)}
.quote figcaption{display:flex;flex-direction:column;margin-top:var(--s2)}
.quote__n{font-weight:700}
.quote__l{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- cta band ---------- */
.cta{padding-block:clamp(3rem,7vw,6rem)}
.cta__in{text-align:center;display:grid;justify-items:center;gap:var(--s2)}
.cta__in p{max-width:52ch}

/* ---------- about ---------- */
.prose h2{margin-bottom:var(--s2)}
.prose h2+p,.prose p+h2{margin-top:var(--s3)}
.facts{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.fact{background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3)}
.fact strong{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;letter-spacing:-.02em}
.fact span{color:var(--muted);font-size:var(--fs-sm)}
.membership{background:var(--flare);color:#101010}          /* 6.64:1 — the loudest legal move */
.membership .eyebrow{color:#101010;opacity:.72}
.membership .btn--primary{background:#101010;color:#fff}
.ticks{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:.6rem;max-width:65ch}
.ticks li{padding-left:1.75rem;position:relative}
.ticks li::before{content:'';position:absolute;left:0;top:.55em;width:11px;height:6px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.note{background:var(--raised);border-left:3px solid var(--accent-fill);padding:var(--s2) var(--s3);
  border-radius:var(--r);color:var(--muted);max-width:70ch}
.fineprint{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- contact ---------- */
.contact{display:grid;gap:var(--s5)}
@media(min-width:861px){.contact{grid-template-columns:1.5fr 1fr;gap:var(--s7)}}
.contact__cards{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ccard{display:block;text-decoration:none;background:var(--raised);border:1px solid var(--border);
  border-radius:var(--r);padding:var(--s3);transition:transform .2s,border-color .2s}
.ccard:hover{transform:translateY(-3px);border-color:var(--fg)}
.ccard h2{font-size:1.1rem;margin-bottom:.35rem}
.ccard p{margin:0 0 .5rem;font-weight:600;word-break:break-word}
.ccard span{font-size:var(--fs-sm);color:var(--muted)}
.ccard--wa{background:var(--flare);color:#101010;border-color:var(--flare)}
.ccard--wa span{color:#101010;opacity:.78}