/* =========================================================
   Panther City Porsche Club — styles
   Palette: asphalt / bone / panther amber. Single dark world.
   ========================================================= */
:root{
  --ink:#0b0b0c;
  --ink-2:#131315;
  --ink-3:#1c1c1f;
  --bone:#e9e1cf;
  --bone-2:#cfc6b1;
  --smoke:#8a857a;
  --amber:#e0a32e;
  --amber-2:#f2c15c;
  --red:#c8102e;
  --line:rgba(233,225,207,.13);
  --line-strong:rgba(233,225,207,.28);

  --f-display:"Big Shoulders Display","Bebas Neue","Oswald",Impact,sans-serif;
  --f-serif:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --f-body:"Archivo","Barlow","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(1.25rem,4vw,4rem);
  --max:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
.hidden,[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- type ---------- */
.h-display{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.6rem,6vw,6rem);
  line-height:.92;
  letter-spacing:-.005em;
  text-transform:uppercase;
  text-wrap:balance;
}
.h-display em,.serif em{font-style:italic;font-weight:400}
.serif{font-family:var(--f-serif);font-weight:400}
.serif em{color:var(--amber-2)}
.lede{font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.5;color:var(--bone);max-width:34em}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-body);font-stretch:75%;font-weight:500;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2);
}
.eyebrow__dot{width:.5em;height:.5em;background:var(--amber);transform:rotate(45deg);flex:none}
.section{padding:clamp(5rem,10vw,9rem) var(--gutter)}
.section__head{max-width:var(--max);margin:0 auto clamp(3rem,6vw,5rem)}
.section__head .h-display{max-width:14em;margin-top:1rem}

/* split text wrappers (JS) */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;will-change:transform}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.7rem;
  font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .3s var(--ease),background .3s,color .3s;
  isolation:isolate;white-space:nowrap;
}
.btn>span{position:relative;z-index:1}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber::after{content:"";position:absolute;inset:0;background:var(--bone);transform:translateX(-101%);transition:transform .45s var(--ease)}
.btn--amber:hover::after{transform:translateX(0)}
.btn--ghost{color:var(--bone);background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost::after{content:"";position:absolute;inset:0;background:var(--bone);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn--ghost:hover{color:var(--ink)}
.btn--ghost:hover::after{transform:translateY(0)}
.btn--lg{padding:1.15rem 2.2rem;font-size:.85rem}
.btn--block{width:100%}
/* clip-path clips an offset outline — draw the focus ring inside instead */
.btn:focus-visible,.cartbtn:focus-visible,.mini:focus-visible,.size:focus-visible,.tab:focus-visible{outline-offset:-4px}
.btn--amber:focus-visible,.mini--ok:focus-visible,.mini--amber:focus-visible{outline-color:var(--ink)}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.2rem;
  padding:var(--gutter);
}
.loader__seal{position:relative;width:min(38vmin,220px);aspect-ratio:1}
.loader__seal .seal{position:absolute;inset:0;width:100%;height:100%}
.loader__mark{position:absolute;inset:26%;color:var(--bone)}
.loader__row{display:flex;justify-content:space-between;width:min(38vmin,220px);align-items:baseline}
.loader__label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);font-stretch:75%}
.loader__count{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}
.loader__count small{font-size:.9rem;margin-left:.15em;color:var(--smoke);font-family:var(--f-body)}
.loader__bar{width:min(38vmin,220px);height:1px;background:var(--line)}
.loader__bar i{display:block;height:100%;width:0;background:var(--amber)}
.loader.is-done{pointer-events:none}

/* seal */
.seal{color:var(--bone);overflow:visible}
.seal__text{font-family:var(--f-body);font-weight:600;font-stretch:75%;font-size:7.4px;letter-spacing:.9px;fill:currentColor;text-transform:uppercase}
.seal--spin{animation:spin 28s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- cursor / grain / tach ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;mix-blend-mode:difference}
.cursor__dot{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff}
.cursor__ring{
  position:absolute;width:38px;height:38px;margin:-19px;border-radius:50%;border:1px solid #fff;
  display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s;
}
.cursor__label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-hover .cursor__ring{width:64px;height:64px;margin:-32px}
.cursor.has-label .cursor__ring{width:84px;height:84px;margin:-42px;background:#fff;border-color:#fff}
.cursor.has-label .cursor__label{opacity:1;mix-blend-mode:difference}
.cursor.has-label .cursor__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.grain{
  position:fixed;inset:-100%;z-index:80;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  animation:grain .7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(-1%,4%)}
}

.tach{
  position:fixed;left:var(--gutter);bottom:1.5rem;z-index:60;width:88px;color:var(--bone);
  pointer-events:none;opacity:0;transition:opacity .5s;
}
.tach.is-on{opacity:.9}
.tach svg{width:100%;display:block}
.tach__read{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--f-display);font-weight:800;font-size:1.05rem;line-height:1;font-variant-numeric:tabular-nums}
.tach__read span{display:block;font-family:var(--f-body);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);margin-top:.15rem}
@media (max-width:900px){.tach{display:none}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.1rem var(--gutter);
  transition:background .4s,backdrop-filter .4s,padding .4s;
}
.nav.is-scrolled{background:linear-gradient(180deg,rgba(11,11,12,.92),rgba(11,11,12,.6) 70%,transparent);padding:.8rem var(--gutter)}
.nav__brand{display:flex;align-items:center;gap:.75rem}
.nav__mark{width:34px;height:34px;color:var(--bone)}
.nav__name{display:flex;flex-direction:column;line-height:1;font-family:var(--f-display);text-transform:uppercase}
.nav__name b{font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.nav__name i{font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.2em;color:var(--smoke)}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{
  position:relative;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;font-stretch:75%;color:var(--bone-2);
  padding:.4rem 0;transition:color .3s;
}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__burger{display:none;width:44px;height:44px;position:relative;z-index:2}
.nav__burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--bone);transition:transform .4s var(--ease),top .4s var(--ease)}
.nav__burger i:first-child{top:17px}.nav__burger i:last-child{top:25px}
.nav__burger[aria-expanded="true"] i:first-child{top:21px;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:900px){
  .nav__links,.nav>.btn{display:none}
  .nav__burger{display:block}
}

.menu{
  position:fixed;inset:0;z-index:65;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu>a{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,12vw,5.5rem);line-height:1;text-transform:uppercase;display:flex;align-items:baseline;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.menu>a small{font-family:var(--f-body);font-size:.7rem;letter-spacing:.2em;color:var(--amber)}
.menu__foot{margin-top:auto;display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);flex-wrap:wrap;gap:1rem}
.menu__foot a{color:var(--bone-2)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:8rem var(--gutter) 2rem;overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.08);will-change:transform;filter:saturate(.85) contrast(1.05)}
.hero__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.15) 35%,rgba(11,11,12,.55) 70%,var(--ink) 100%),
    linear-gradient(90deg,rgba(11,11,12,.7) 0%,transparent 60%);
}
.hero__streaks{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.75}
.hero__seal{
  position:absolute;right:-8vmin;top:12vh;width:min(58vmin,520px);height:auto;z-index:-1;
  color:var(--bone);opacity:.5;
}
.hero__body{position:relative;max-width:var(--max);width:100%;margin:0 auto}
.hero__eyebrow{margin-bottom:1.6rem}
.hero__title{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(4.2rem,14.5vw,15.5rem);line-height:.84;letter-spacing:-.01em;
  margin-left:-.03em;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .word{display:inline-block;will-change:transform}
.line--outline{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
@supports not (-webkit-text-stroke:1px #000){.line--outline{color:var(--bone-2)}}
.hero__sub{font-size:clamp(1.4rem,2.4vw,2.3rem);line-height:1.2;margin:1.8rem 0 2.2rem;max-width:26em;color:var(--bone-2)}
.hero__sub em{color:var(--amber-2)}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero__foot{
  position:relative;max-width:var(--max);width:100%;margin:4rem auto 0;
  display:flex;align-items:flex-end;gap:clamp(1.5rem,4vw,4rem);border-top:1px solid var(--line);padding-top:1.4rem;
}
.hero__stat{display:flex;flex-direction:column;line-height:1}
.hero__stat b{font-family:var(--f-display);font-weight:800;font-size:1.8rem;letter-spacing:.02em}
.hero__stat span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-top:.4rem;font-stretch:75%}
.hero__scroll{margin-left:auto;display:flex;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.hero__scroll i{display:block;width:44px;height:1px;background:var(--bone-2);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--amber);transform:translateX(-100%);animation:slide 1.8s var(--ease-io) infinite}
@keyframes slide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:640px){
  .hero{padding-top:6rem}
  .hero__foot{flex-wrap:wrap;gap:1.4rem 2rem}
  .hero__scroll{display:none}
  .hero__seal{top:auto;bottom:38%;right:-30vmin;opacity:.3}
}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink);padding:1.1rem 0}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee__track span{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.4vw,3.2rem);text-transform:uppercase;line-height:1;
  white-space:nowrap;padding-right:.6em;color:var(--bone-2);
}
.marquee__track i{font-style:normal;color:var(--amber);font-size:.55em;vertical-align:.25em;padding:0 .35em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- club ---------- */
.club__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.club__copy>*+*{margin-top:1.4rem}
.club__copy .h-display{margin-top:1.2rem;font-size:clamp(2.4rem,4.6vw,4.6rem)}
.club__copy p:not(.eyebrow):not(.lede){color:var(--bone-2);max-width:36em}
.club__facts{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.4rem!important;padding-top:1.6rem;border-top:1px solid var(--line)}
.club__facts li{display:flex;flex-direction:column;line-height:1}
.club__facts b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,3.5vw,3.4rem);font-variant-numeric:tabular-nums}
.club__facts li>span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-top:.5rem;font-stretch:75%}
.club__media{position:relative;aspect-ratio:1/1.05}
.frame{position:absolute;overflow:hidden;background:var(--ink-3)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);will-change:transform;filter:saturate(.9)}
.frame--a{inset:0 12% 12% 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.frame--b{right:0;bottom:0;width:48%;aspect-ratio:4/5;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.club__badge{position:absolute;left:-6%;bottom:6%;width:clamp(120px,15vw,190px);aspect-ratio:1;color:var(--bone)}
.club__badge .seal{position:absolute;inset:0;width:100%;height:100%;background:var(--ink);border-radius:50%}
.club__mark{position:absolute;inset:27%;color:var(--bone)}
@media (max-width:900px){
  .club__grid{grid-template-columns:1fr}
  .club__media{aspect-ratio:4/4.4;margin-top:1rem}
  .club__badge{left:auto;right:-2%;bottom:auto;top:-8%}
}

/* ---------- drives ---------- */
.drives{position:relative}
.drives__list{max-width:var(--max);margin:0 auto;border-top:1px solid var(--line)}
.drive a{
  display:grid;grid-template-columns:minmax(120px,.35fr) 1fr auto;grid-template-areas:"idx name arrow" "idx meta arrow";
  align-items:center;column-gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.3rem,2.6vw,2.2rem) 0;border-bottom:1px solid var(--line);position:relative;
}
.drive a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.drive a:hover::before{transform:scaleX(1)}
.drive__idx{grid-area:idx;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);font-stretch:75%;font-weight:500;align-self:start;padding-top:.6em}
.drive__name{
  grid-area:name;font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,6.5vw,6.2rem);line-height:.95;transition:transform .6s var(--ease),color .4s;
}
.drive__name em{text-transform:none;font-size:1.02em;color:var(--amber-2)}
.drive__meta{grid-area:meta;color:var(--bone-2);font-size:.95rem;margin-top:.6rem;transition:transform .6s var(--ease)}
.drive__arrow{grid-area:arrow;font-size:2.2rem;line-height:1;color:var(--amber);opacity:0;transform:translateX(-20px) rotate(-45deg);transition:transform .5s var(--ease),opacity .4s}
.drive a:hover .drive__name,.drive a:hover .drive__meta{transform:translateX(1.2vw)}
.drive a:hover .drive__arrow{opacity:1;transform:translateX(0) rotate(-45deg)}
.drive--feature .drive__idx{color:var(--amber)}
.drives__float{
  position:fixed;left:0;top:0;z-index:50;width:clamp(200px,22vw,340px);aspect-ratio:4/3;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.9);overflow:hidden;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
}
.drives__float img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .drive a{grid-template-columns:1fr auto;grid-template-areas:"idx arrow" "name arrow" "meta arrow"}
  .drive__idx{padding-top:0;margin-bottom:.4rem}
  .drives__float{display:none}
}

/* ---------- garage ---------- */
.garage{position:relative;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.garage__pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:5rem 0 3rem}
.garage__head{display:flex;align-items:flex-end;gap:2rem;padding:0 var(--gutter);margin-bottom:2.2rem;max-width:none}
.garage__head .h-display{margin-top:.8rem;font-size:clamp(2.6rem,5.5vw,5.4rem)}
.garage__head>div{display:flex;flex-direction:column}
.garage__head .eyebrow{align-self:flex-start}
.garage__hint{margin-left:auto;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);display:flex;gap:.6rem;align-items:center}
.garage__hint i{font-style:normal;color:var(--amber);animation:nudge 1.6s var(--ease-io) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
.garage__track{display:flex;gap:clamp(1rem,2vw,2rem);padding:0 var(--gutter);width:max-content;will-change:transform}
.car{position:relative;width:min(38vw,560px);aspect-ratio:3/2;overflow:hidden;background:var(--ink-3);flex:none}
.car--tall{width:min(24vw,340px);aspect-ratio:4/5}
.car img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85)}
.car:hover img{transform:scale(1.08);filter:saturate(1)}
.car figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;display:flex;justify-content:space-between;align-items:baseline;
  background:linear-gradient(180deg,transparent,rgba(11,11,12,.85));
}
.car figcaption b{font-family:var(--f-display);font-weight:800;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em}
.car figcaption span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.car--end{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.6rem;padding:2rem;background:transparent;box-shadow:inset 0 0 0 1px var(--line);width:min(30vw,420px)}
.car--end p{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.05}
@media (max-width:900px){
  .garage__pin{height:auto;padding:5rem 0 4rem}
  .garage__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;-webkit-overflow-scrolling:touch}
  .garage__track::-webkit-scrollbar{height:0}
  .car{width:78vw;scroll-snap-align:start}
  .car--tall{width:60vw}
  .car--end{width:70vw}
}

/* ---------- merch teaser ---------- */
.drop{border-top:1px solid var(--line)}
.drop__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.drop__copy .h-display{margin-top:1.2rem;font-size:clamp(2.4rem,4.6vw,4.6rem)}
.drop__copy>*+*{margin-top:1.4rem}
.drop__cta{display:flex;gap:.8rem;flex-wrap:wrap}
.drop__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.dropcard{
  position:relative;aspect-ratio:3/4.2;background:var(--ink-3);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;overflow:hidden;isolation:isolate;
}
.dropcard img{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(7px) saturate(.5) brightness(.55);transform:scale(1.02);transition:filter .7s var(--ease);z-index:0}
.dropcard:hover img{filter:blur(2px) saturate(.7) brightness(.7)}
.dropcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.05),rgba(11,11,12,.85));z-index:1;pointer-events:none}
.dropcard b{position:relative;z-index:2;font-family:var(--f-display);font-weight:800;font-size:1.3rem;text-transform:uppercase;line-height:1}
.dropcard__lock{position:absolute;z-index:2;top:.9rem;left:.9rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1.2;color:var(--ink);background:var(--amber);padding:.35rem .6rem;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.dropcard:nth-child(2){transform:translateY(1.6rem)}
@media (max-width:900px){.drop__grid{grid-template-columns:1fr}.dropcard:nth-child(2){transform:none}}

/* membership gate card (home) */
.gatecard{gap:1rem}
.gatecard__mark{width:44px;color:var(--bone)}
.gatecard__text{color:var(--bone-2);font-size:.95rem}
.gatecard__list{display:flex;flex-direction:column;gap:.6rem;margin:.2rem 0 .6rem}
.gatecard__list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--bone)}
.gatecard__list i{flex:none;width:.5rem;height:.5rem;margin-top:.5rem;background:var(--amber);transform:rotate(45deg)}
.gatecard .btn--ghost{margin-top:-.3rem}

/* ---------- creed ---------- */
.creed{display:grid;place-items:center;position:relative;overflow:hidden}
.creed__plaque{
  position:relative;max-width:900px;width:100%;padding:clamp(2rem,5vw,4.5rem);
  border:1px solid var(--line-strong);background:linear-gradient(160deg,var(--ink-2),var(--ink));
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
}
.creed__plaque::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);pointer-events:none;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.creed__lines{margin-top:2rem;counter-reset:creed}
.creed__line{
  position:relative;padding:1.2rem 0 1.2rem 3.2rem;border-top:1px solid var(--line);
  font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.45;color:var(--bone);
}
.creed__line::before{
  counter-increment:creed;content:counter(creed,upper-roman);
  position:absolute;left:0;top:1.35rem;font-family:var(--f-display);font-weight:800;font-size:1.1rem;color:var(--amber);letter-spacing:.05em;
}
.creed__line--last{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.15;padding-left:0;padding-top:2rem;border-top-color:var(--line-strong)}
.creed__line--last::before{content:none}
.creed__mark{position:absolute;right:-6%;bottom:-8%;width:clamp(160px,26vw,320px);color:var(--bone);opacity:.05;pointer-events:none}

/* ---------- membership / join ---------- */
.join{background:var(--ink-2);border-top:1px solid var(--line)}
.join__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr .9fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.join__copy .h-display{margin-top:1.2rem;font-size:clamp(2.2rem,4.4vw,4.4rem);max-width:13em}
.steps{margin-top:2.6rem;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:3.2rem 1fr;gap:1.2rem;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.step__n{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--amber)}
.step h3{font-family:var(--f-display);font-weight:800;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.step p{margin-top:.5rem;color:var(--bone-2);max-width:32em}
.form{
  position:sticky;top:6rem;padding:clamp(1.5rem,3vw,2.5rem);background:var(--ink);border:1px solid var(--line-strong);
  display:flex;flex-direction:column;gap:1.1rem;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.form__title{font-family:var(--f-display);font-weight:800;font-size:2.2rem;text-transform:uppercase;line-height:1}
.field{display:flex;flex-direction:column;gap:.4rem}
.field span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);font-stretch:75%;font-weight:500}
.field input,.field textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--bone);font:inherit;font-size:1rem;padding:.85rem 1rem;
  transition:border-color .3s,box-shadow .3s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(138,133,122,.6)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,163,46,.15)}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form__alt{font-size:.85rem;color:var(--smoke);text-align:center}
.form__alt a{color:var(--bone-2);border-bottom:1px solid var(--line-strong)}
.form__ok{color:var(--amber-2);text-align:center;padding:.6rem 0}
@media (max-width:900px){
  .join__grid{grid-template-columns:1fr}
  .form{position:static}
}
@media (max-width:480px){.field__row{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{position:relative;padding:clamp(3rem,6vw,5rem) var(--gutter) 2rem;border-top:1px solid var(--line);overflow:hidden}
.foot__word{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(9rem,36vw,34rem);line-height:.8;letter-spacing:-.02em;text-align:center;
  color:transparent;-webkit-text-stroke:1px var(--line-strong);user-select:none;margin:0 -.05em -.14em;
}
.foot__grid{
  max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:2rem;
  padding:3rem 0;border-top:1px solid var(--line);
}
.foot__brand{display:flex;gap:1rem;align-items:flex-start;color:var(--bone-2);font-size:.9rem;line-height:1.5}
.foot__brand b{color:var(--bone);font-family:var(--f-display);font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em}
.foot__mark{width:44px;flex:none;color:var(--bone)}
.foot__col{display:flex;flex-direction:column;gap:.5rem}
.foot__col h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:.4rem;font-weight:500}
.foot__col a:not(.btn){color:var(--bone-2);font-size:.92rem;transition:color .3s}
.foot__col a:not(.btn):hover{color:var(--amber-2)}
.foot__col .btn{align-self:flex-start;margin-top:.6rem}
.foot__quote{font-size:1.5rem;line-height:1.2;color:var(--bone)}
.foot__legal{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--smoke);line-height:1.5}
.foot__legal a{color:var(--bone-2);border-bottom:1px solid var(--line-strong)}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ---------- motion prefs ---------- */
@media (prefers-reduced-motion:reduce){
  .seal--spin,.marquee__track,.grain,.hero__scroll i::after,.garage__hint i{animation:none!important}
  .hero__img{transform:none}
  *{transition-duration:.01ms!important}
}