/* ===================================================================
   Treadwell — "AERO" design system
   Futuristic dark canvas · gradient light · glassmorphism · 3D panels
   (page structure & content unchanged — this is a full visual redesign)
   =================================================================== */
:root{
  --bg:#08060f;
  --bg-2:#0d0b1c;
  --paper:#0e0c1e;
  --paper-raised:#151230;
  --ink:#f3f1ff;
  --ink-soft:#a49dcb;
  --line:rgba(255,255,255,.10);
  --card-bg:rgba(255,255,255,.045);
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.11);
  --glass-brd:rgba(255,255,255,.14);
  --denim:#8b5cff;        /* primary neon violet */
  --denim-deep:#b79bff;
  --copper:#25d7ee;       /* cyan — prices / links / accents */
  --copper-soft:#7ef0fb;
  --thread:#ffc24b;       /* review stars */
  --tag-bg:#f3f1ff;
  --tag-fg:#0e0c1e;
  --focus:#8b5cff;
  --grad-1:linear-gradient(135deg,#8b5cff 0%,#25d7ee 100%);
  --grad-2:linear-gradient(120deg,#ff5cf0 0%,#8b5cff 48%,#25d7ee 100%);
  --grad-a:linear-gradient(140deg, rgba(139,92,255,.42), rgba(37,215,238,.26));
  --grad-b:linear-gradient(140deg, rgba(255,92,240,.34), rgba(139,92,255,.28));
  --grad-c:linear-gradient(140deg, rgba(37,215,238,.34), rgba(139,92,255,.34));
  --shadow-sm:0 2px 10px rgba(0,0,0,.45), 0 22px 55px -26px rgba(139,92,255,.40);
  --shadow-md:0 10px 34px rgba(0,0,0,.55), 0 46px 96px -34px rgba(139,92,255,.55);
  --glow:0;
  --glow-rgb:139,92,255;
}

*{box-sizing:border-box;}
html{color-scheme:dark;}
html,body{margin:0; padding:0;}
body{
  background:
    radial-gradient(58vw 52vh at 8% -12%, rgba(139,92,255,.34), transparent 60%),
    radial-gradient(50vw 44vh at 108% 4%, rgba(37,215,238,.22), transparent 56%),
    radial-gradient(64vw 56vh at 50% 118%, rgba(255,92,240,.16), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.006em;
}
/* faint tech grid overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 78%);
}
body > *{position:relative; z-index:1;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  text-wrap:balance; margin:0; letter-spacing:-0.02em; line-height:1.06; font-weight:600;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px;}
img{max-width:100%; display:block;}

.grad-text{background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ---- page transition ---- */
@media (prefers-reduced-motion: no-preference){
  body{animation:pageIn .45s ease both;}
  @keyframes pageIn{from{opacity:0;} to{opacity:1;}}
  body.pt-out{opacity:0; transition:opacity .22s ease; animation:none;}
  .reveal{opacity:0; transform:translateY(24px) scale(.985); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
  .reveal.in-view{opacity:1; transform:none;}
}

/* ---- legacy topbar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px clamp(18px,4vw,48px); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.topbar strong{color:var(--copper);}

/* ---- announcement bar ---- */
.announce{
  overflow:hidden; background:rgba(255,255,255,.04); color:var(--ink-soft);
  border-bottom:1px solid var(--line); padding:8px 0;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.announce-track{display:flex; width:max-content; animation:marquee 40s linear infinite; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.04em;}
.announce-track > span{white-space:nowrap; padding:0 24px; display:inline-flex; align-items:center;}
.announce-track > span::after{content:"◆"; margin-left:24px; color:var(--denim); opacity:.7; font-size:8px;}
.announce:hover .announce-track{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){ .announce-track{animation:none; justify-content:center; width:100%;} .announce-track > span:nth-child(n+2){display:none;} .announce-track > span::after{display:none;} }

/* ---- nav ---- */
header.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(18px,4vw,48px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:rgba(9,7,18,.62);
  -webkit-backdrop-filter:saturate(1.5) blur(18px); backdrop-filter:saturate(1.5) blur(18px);
}
.brand{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:23px; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:2px; text-decoration:none;
}
.brand span{
  background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;
}
nav.links{display:flex; gap:26px; font-size:14px; font-weight:500; white-space:nowrap;}
nav.links a{text-decoration:none; color:var(--ink-soft); padding:4px 0; position:relative; transition:color .18s ease;}
nav.links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--grad-1); border-radius:2px; transition:right .25s ease;}
nav.links a:hover{color:var(--ink);}
nav.links a:hover::after, nav.links a.active::after{right:0;}
nav.links a.active{color:var(--ink); font-weight:600;}

.nav-actions{display:flex; gap:16px; align-items:center; font-size:13.5px; font-weight:500;}
.nav-actions .na{text-decoration:none; position:relative; color:var(--ink-soft); display:inline-flex; align-items:center; gap:7px; transition:color .18s ease;}
.nav-actions .na:hover{color:var(--ink);}
.nav-actions .na.active{color:var(--ink); font-weight:600;}
.nav-actions .na svg{width:18px; height:18px; display:none;}
.nav-actions .badge{
  position:absolute; top:-9px; right:-14px;
  background:var(--grad-1); color:#0a0713;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
  min-width:16px; height:16px; padding:0 2px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 14px -2px rgba(139,92,255,.8);
}
.na-search{
  width:36px; height:36px; flex:none; border:1px solid var(--glass-brd); border-radius:999px;
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  justify-content:center; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.na-search:hover{border-color:var(--denim); box-shadow:0 0 18px -4px rgba(139,92,255,.7);}
.na-search svg{display:block!important; width:16px; height:16px;}
.na-search .badge{display:none;}

@media (max-width:820px){
  .nav-actions{display:flex!important; gap:4px;}
  .nav-actions .na .na-txt{display:none;}
  .nav-actions .na:not(.na-search) svg{display:block;}
  .nav-actions .na:not(.na-search){width:40px; height:40px; justify-content:center; border-radius:999px;}
  .nav-actions .na:not(.na-search):hover{background:var(--glass);}
  .nav-actions .badge{top:3px; right:3px;}
}

.searchbar{border-bottom:1px solid var(--line); background:rgba(9,7,18,.85); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); overflow:hidden; max-height:0; transition:max-height .28s ease;}
.searchbar.open{max-height:96px;}
.searchbar form{display:flex; gap:10px; align-items:center; padding:14px clamp(18px,4vw,48px);}
.searchbar input{flex:1; min-width:0; border:1px solid var(--glass-brd); border-radius:11px; background:var(--glass); color:var(--ink); font-family:inherit; font-size:14px; padding:12px 14px;}
.searchbar input::placeholder{color:var(--ink-soft);}
.searchbar input:focus{outline:none; border-color:var(--denim); box-shadow:0 0 0 3px rgba(139,92,255,.22);}

/* ---- breadcrumb ---- */
.crumb{padding:16px clamp(18px,4vw,48px) 0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); letter-spacing:.02em;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--copper);}

/* ---- buttons ---- */
.btn{
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:0;
  padding:13px 26px; border-radius:12px;
  border:none; background:var(--grad-1); color:#0a0713;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 34px -10px rgba(139,92,255,.7);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 46px -10px rgba(139,92,255,.9); filter:brightness(1.08) saturate(1.1);}
.btn:active{transform:translateY(0);}
.btn.ghost{
  background:var(--glass); color:var(--ink); border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:none;
}
.btn.ghost:hover{border-color:var(--denim); box-shadow:0 0 22px -6px rgba(139,92,255,.6); filter:none;}
.btn.block{width:100%; justify-content:center;}
.btn.sm{padding:10px 18px; font-size:13px; border-radius:10px;}

.rivet{position:absolute; width:14px; height:14px; border-radius:50%; background:var(--grad-1);}

/* ---- filter bar ---- */
.filterbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:18px clamp(18px,4vw,48px);
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);
}
.filterbar .label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft); margin-right:2px;}
.chip{
  font-family:inherit; font-size:13px; font-weight:500; padding:8px 15px;
  border:1px solid var(--glass-brd); border-radius:999px; background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--ink-soft); cursor:pointer; text-decoration:none;
  transition:color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .2s ease;
}
.chip:hover{color:var(--ink); border-color:var(--denim); transform:translateY(-1px);}
.chip.active{background:var(--grad-1); color:#0a0713; border-color:transparent; box-shadow:0 0 22px -6px rgba(139,92,255,.7);}
.filterbar .count{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}

/* ---- product grid + card ---- */
main{padding:clamp(24px,4vw,56px); perspective:1600px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:32px 24px;}
.card{
  background:var(--card-bg); border:1px solid var(--glass-brd); border-radius:20px; display:flex; flex-direction:column;
  text-decoration:none; color:var(--ink); overflow:hidden;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover{transform:translateY(-10px) rotateX(4deg); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.18); border-color:rgba(139,92,255,.5);}
.card-media{
  position:relative; aspect-ratio:4/5; background:var(--grad-a);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(8,6,15,.35)); pointer-events:none;}
.card-media svg{width:58%; height:58%; transition:transform .4s ease; color:var(--ink);}
.card:hover .card-media svg{transform:scale(1.06) rotate(-2deg);}
.tag{
  position:absolute; top:12px; left:12px; background:var(--tag-bg); color:var(--tag-fg);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:5px 9px; border-radius:8px; z-index:3;
}
.wish{
  position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:999px; z-index:3;
  background:rgba(9,7,18,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid var(--glass-brd); color:var(--ink);
  transition:transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.wish:hover{transform:scale(1.12); color:var(--copper); box-shadow:0 0 16px -3px rgba(37,215,238,.7);}
.wish.saved{color:#ff5cf0;}
.card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1;}
.card-body .cat{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--copper);}
.card-body h3{font-size:16px; font-weight:600; line-height:1.25; letter-spacing:-0.015em;}
.fits{font-size:12.5px; color:var(--ink-soft);}
.price-row{display:flex; align-items:baseline; gap:10px; margin-top:auto; padding-top:8px;}
.price-now{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;}
.price-was{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); text-decoration:line-through;}
.swatches{display:flex; gap:6px; margin-top:2px;}
.swatch{width:16px; height:16px; border-radius:50%; border:1px solid var(--glass-brd);}

/* ---- section headings ---- */
.section-head, .sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:0 clamp(18px,4vw,56px); margin:72px 0 26px;
}
.section-head h2, .sec-head h2{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(28px,4vw,44px); letter-spacing:-0.03em;
}
.sec-head .lede{font-size:14px; color:var(--ink-soft); margin-top:6px; font-family:'Inter',sans-serif; letter-spacing:0;}
.section-head a, .sec-head a{font-size:13.5px; font-weight:600; text-decoration:none; color:var(--copper); white-space:nowrap;}
.section-head a:hover, .sec-head a:hover{text-shadow:0 0 14px rgba(37,215,238,.8);}

.load-more-wrap{display:flex; justify-content:center; padding:44px 0 6px;}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(139,92,255,.06), rgba(9,7,18,.4)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
.footer-grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:32px; padding:56px clamp(18px,4vw,56px) 30px;}
.footer-grid .fbrand{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.02em; margin-bottom:12px; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;}
.footer-grid .flede{font-size:13.5px; color:var(--ink-soft); max-width:34ch; line-height:1.6;}
.footer-col h5{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--copper); margin:0 0 14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:13.5px; text-decoration:none; color:var(--ink-soft); transition:color .18s ease;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{border-top:1px solid var(--line); padding:18px clamp(18px,4vw,56px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}

@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:820px){ nav.links{display:none;} }

/* ---- mobile nav ---- */
.nav-toggle{display:none; width:42px; height:42px; padding:10px; margin:-8px -6px -8px 2px; background:none; border:none; cursor:pointer; flex-direction:column; justify-content:center; gap:5px;}
.nav-toggle span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{position:sticky; top:0; z-index:19; background:rgba(9,7,18,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:8px clamp(18px,4vw,48px) 18px;}
.mobile-menu .mm-links{display:flex; flex-direction:column; gap:2px;}
.mobile-menu .mm-links a{text-decoration:none; font-weight:500; font-size:16px; padding:14px 4px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
.mobile-menu .mm-links a.active{color:var(--copper); font-weight:600;}
body.menu-open{overflow:hidden;}

@media (max-width:820px){
  .nav-toggle{display:flex;}
  header.nav{padding:13px clamp(14px,4vw,22px); gap:8px;}
  .brand{font-size:20px;}
}
@media (min-width:821px){ .mobile-menu{display:none;} }

/* ---- general mobile polish ---- */
@media (max-width:640px){
  .topbar{flex-direction:column; gap:4px; align-items:flex-start; font-size:10.5px; padding:10px 16px;}
  .hero-cta{width:100%;}
  .hero-cta .btn{flex:1; justify-content:center; padding:13px 16px;}
  main{padding:20px 16px;}
  .grid{grid-template-columns:repeat(2,1fr); gap:18px 12px;}
  .card-body{padding:12px 12px 14px; gap:6px;}
  .card-body h3{font-size:14px;}
  .fits, .card-body .cat{font-size:11px;}
  .price-now{font-size:15px;}
  .section-head, .sec-head{margin:46px 0 20px;}
  .section-head h2, .sec-head h2{font-size:clamp(24px,7vw,32px);}
  .filterbar{padding:14px 16px; gap:8px;}
  .filterbar .count{width:100%; margin:4px 0 0;}
  .crumb{padding:12px 16px 0;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:22px; padding:40px 16px 24px;}
  .footer-bottom{padding:16px; flex-direction:column; gap:6px;}
  .pdp{gap:24px; padding:16px;}
  .cart-wrap{padding:16px;}
  .line-item{grid-template-columns:72px 1fr; gap:12px;}
  .li-price{grid-column:2; text-align:left; margin-top:2px;}
  .contact-layout{padding:16px;}
  .about-hero{padding:36px 16px 32px;}
  .founder{padding:32px 16px;}
}
@media (max-width:340px){ .grid{grid-template-columns:1fr;} }

/* ===== home sections ===== */

/* ---- marquee: neon gradient band ---- */
.marquee{overflow:hidden; background:var(--grad-2); color:#0a0713; padding:16px 0; margin:10px 0; box-shadow:0 0 60px -10px rgba(139,92,255,.6);}
.marquee-track{display:flex; width:max-content; animation:marquee 32s linear infinite; will-change:transform;}
.marquee-track > span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:-0.01em; white-space:nowrap; padding:0 20px; display:inline-flex; align-items:center; gap:20px;}
.marquee-track > span::after{content:"◇"; opacity:.55; font-size:12px;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---- category (legacy) ---- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 clamp(18px,4vw,56px);}
.cat-card{position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:18px; text-decoration:none; color:#fff; display:flex; align-items:flex-end; padding:18px; background:var(--grad-c); border:1px solid var(--glass-brd);}
.cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.cat-card::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,6,15,.85) 0%, rgba(8,6,15,.14) 55%, rgba(8,6,15,0) 100%);}
.cat-card:hover img{transform:scale(1.05);}
.cat-card span{position:relative; z-index:1; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; color:#fff;}
.cat-card .arrow{position:relative; z-index:1; margin-left:auto; font-family:'IBM Plex Mono',monospace; color:var(--copper-soft);}
@media (max-width:820px){ .cat-grid{grid-template-columns:1fr 1fr;} }

/* ---- reel ---- */
.reel-row{display:flex; gap:16px; overflow-x:auto; padding:2px clamp(18px,4vw,56px) 12px; scroll-snap-type:x mandatory; scrollbar-width:none;}
.reel-row::-webkit-scrollbar{display:none;}
.reel-item{position:relative; flex:0 0 clamp(210px,42vw,288px); aspect-ratio:1; overflow:hidden; border-radius:18px; scroll-snap-align:start; text-decoration:none; border:1px solid var(--glass-brd); box-shadow:var(--shadow-sm);}
.reel-item img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.reel-item:hover img{transform:scale(1.06);}
.reel-item::after{content:""; position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(0deg, rgba(8,6,15,.86) 0%, rgba(8,6,15,0) 100%);}
.reel-item .rtag{position:absolute; left:14px; right:14px; bottom:12px; z-index:1; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#fff; font-weight:600;}

/* ---- trust banner ---- */
.trust-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 clamp(18px,4vw,56px);}
.trust-cell{
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:22px 20px; display:flex; gap:13px; align-items:flex-start;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.trust-cell svg{width:22px; height:22px; flex:none; color:var(--copper);}
.trust-cell h4{font-size:13.5px; margin:0 0 4px; font-weight:600;}
.trust-cell p{margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
@media (max-width:820px){ .trust-row{grid-template-columns:1fr 1fr;} }
@media (max-width:460px){ .trust-row{grid-template-columns:1fr;} }

/* ---- series cards ---- */
.series-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 clamp(18px,4vw,56px);}
.series-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:20px; border:1px solid var(--glass-brd);
  background:var(--card-bg); text-decoration:none; color:var(--ink);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.series-card:hover{transform:translateY(-8px) rotateX(4deg); box-shadow:var(--shadow-md); border-color:rgba(139,92,255,.5);}
.series-card img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .45s ease;}
.series-card:hover img{transform:scale(1.05);}
.series-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px;}
.series-label{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; letter-spacing:-0.02em; color:var(--ink);}
.series-count{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--copper);}
@media (max-width:820px){ .series-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .series-grid{gap:12px;} .series-label{font-size:15px;} }

/* ---- featured tiles ---- */
.tile{aspect-ratio:4/5; border-radius:18px; border:1px solid var(--glass-brd);}
.tile::before{background:linear-gradient(0deg, rgba(8,6,15,.82) 0%, rgba(8,6,15,.12) 55%, rgba(8,6,15,0) 100%);}
.tile .tile-label{text-shadow:0 2px 14px rgba(0,0,0,.6);}
@media (max-width:820px){ .tile{aspect-ratio:3/4;} }

/* ---- site-wide motion ---- */
@media (prefers-reduced-motion: no-preference){
  .crumb a, .footer-col a, .sec-head a, nav.links a{transition:color .18s ease;}
  .stat-tile, .process-card{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;}
  .stat-tile:hover, .process-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
  .tl-row{transition:padding-left .2s ease;}
  .tl-row:hover{padding-left:8px;}
  .accordion summary{transition:color .18s ease;}
  .accordion summary:hover{color:var(--copper);}
  .reel-item img, .cat-card img{will-change:transform;}
}

/* ---- scroll bloom on key elements ---- */
@media (prefers-reduced-motion: no-preference){
  h1, .sec-head h2, .section-head h2, .price-now, .brand span, .tm-card .stars, .chip.active{
    filter:drop-shadow(0 0 calc(var(--glow) * 12px) rgba(var(--glow-rgb), calc(var(--glow) * .55)));
  }
}

/* ---- testimonial marquee ---- */
.tm{overflow:hidden; padding:8px 0;}
.tm-track{display:flex; gap:18px; width:max-content; animation:marquee 50s linear infinite;}
.tm:hover .tm-track{animation-play-state:paused;}
.tm-card{
  flex:0 0 340px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:24px;
  display:flex; flex-direction:column; gap:12px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.tm-card .stars{color:var(--thread); font-size:13px; letter-spacing:2px;}
.tm-card p{margin:0; font-size:14px; line-height:1.6; color:var(--ink);}
.tm-card .who{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--copper); letter-spacing:.02em; margin-top:auto;}
@media (max-width:480px){ .tm-card{flex-basis:280px;} }
@media (prefers-reduced-motion: reduce){ .marquee-track, .tm-track{animation:none;} }

/* ---- content-page shared components ---- */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:0 clamp(18px,4vw,56px);}
.stat-tile{background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:24px 22px; text-align:left; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
.stat-tile .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,4vw,42px); line-height:1; letter-spacing:-0.03em; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-tile .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:10px;}

.timeline{display:flex; flex-direction:column; gap:0; margin:0 clamp(18px,4vw,56px);}
.tl-row{display:grid; grid-template-columns:100px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line);}
.tl-row .yr{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--copper); font-weight:600;}
.tl-row h4{font-size:18px; margin-bottom:6px; font-weight:600;}
.tl-row p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:60ch;}

.accordion{border-top:1px solid var(--line); margin:0 clamp(18px,4vw,56px);}
.accordion details{border-bottom:1px solid var(--line); padding:18px 2px;}
.accordion summary{font-weight:600; cursor:pointer; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:'Space Grotesk',sans-serif;}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:"+"; font-family:'IBM Plex Mono',monospace; color:var(--copper); font-size:18px; flex:none;}
.accordion details[open] summary::after{content:"–";}
.accordion p{margin:12px 0 0; font-size:14px; color:var(--ink-soft); line-height:1.65; max-width:64ch;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
.field input, .field textarea, .field select{
  border:1px solid var(--glass-brd); border-radius:11px; background:var(--glass); color:var(--ink);
  padding:12px 14px; font-family:inherit; font-size:14px; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-soft);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--denim); box-shadow:0 0 0 3px rgba(139,92,255,.22); outline:none;}
.field select option{background:var(--paper-raised); color:var(--ink);}
.field textarea{resize:vertical; min-height:120px;}

.empty-state{padding:90px clamp(18px,4vw,48px); text-align:center;}
.empty-state .icon{font-size:44px; margin-bottom:14px;}
.empty-state h1{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,4vw,38px);}
.empty-state p{color:var(--ink-soft); margin:10px 0 24px;}

@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} .tl-row{grid-template-columns:1fr;} }

/* ---- photography in media slots ---- */
.card-media img.shot, .li-media img.shot, .fp-media img.shot, .founder-media img.shot,
.main-media img.shot, .thumb img.shot, .post-hero img.shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0;
}
.card-media, .li-media, .fp-media, .founder-media, .main-media, .thumb, .post-hero{position:relative; overflow:hidden;}
.card-media img.shot{transition:transform .5s ease;}
.card:hover .card-media img.shot{transform:scale(1.05);}
.card-media .tag, .card-media .wish, .main-media .tag{z-index:3;}
.post-hero{aspect-ratio:21/8;}
.tile img.shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .4s ease;}
.tile::before{z-index:1;}
.tile .tile-label, .tile .tile-count{z-index:2;}
.tile:hover img.shot{transform:scale(1.05);}

/* ---- new-arrival tag ---- */
.tag.new{background:var(--grad-2); color:#0a0713;}

/* ---- blog cards (legacy) ---- */
.blog-card .card-media{aspect-ratio:16/10;}
.blog-card .card-body .date{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); letter-spacing:.04em;}
.blog-card .excerpt{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0;}
.blog-card .readmore{margin-top:auto; padding-top:6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--copper); font-weight:600;}

/* ---- featured collection tiles ---- */
.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0 clamp(18px,4vw,56px);}
.tile{
  position:relative; aspect-ratio:3/4; overflow:hidden; text-decoration:none; color:#fff;
  display:flex; align-items:flex-end; padding:24px; background:var(--grad-c); transition:transform .3s ease;
}
.tile:hover{transform:translateY(-6px);}
.tile::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,6,15,.6) 0%, rgba(8,6,15,0) 55%);}
.tile .tile-label{position:relative; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:23px; letter-spacing:-0.02em;}
.tile .tile-count{position:relative; font-family:'IBM Plex Mono',monospace; font-size:11px; opacity:.85; margin-top:4px;}
.tile.wide{grid-column:span 2;}
@media (max-width:820px){ .tile-grid{grid-template-columns:1fr 1fr;} .tile.wide{grid-column:span 2;} }
@media (max-width:560px){ .tile-grid{grid-template-columns:1fr;} .tile.wide{grid-column:span 1;} }

/* ================= CONSOLIDATED MOBILE PASS ================= */
html,body{overflow-x:clip;}
img,video,svg{max-width:100%;}
[hidden]{display:none!important;}

@media (max-width:768px){
  header.nav{padding:12px clamp(14px,4vw,22px);}
  .crumb{padding:12px clamp(14px,4vw,22px) 0; font-size:11.5px;}
  .listing-head{padding:24px clamp(14px,4vw,22px) 14px;}
  .listing-head h1{font-size:clamp(34px,10vw,54px); line-height:1;}
  .listing-head p{font-size:14px;}
  main{padding:20px clamp(14px,4vw,22px);}
  .sec-head, .section-head{padding:0 clamp(14px,4vw,22px);}
  .filterbar{padding:14px clamp(14px,4vw,22px);}
  .section-lede, .about-hero, .contact-head, .post-head, .wl-head, .post-body, .accordion, .stat-row, .timeline, .process-grid, .fcollections, .aplus, .pdp-tabs, .trust-row, .series-grid, .reel-row, .tile-grid{
    padding-left:clamp(14px,4vw,22px); padding-right:clamp(14px,4vw,22px);
  }
  .stat-row, .timeline, .accordion{margin-left:0; margin-right:0;}
}

@media (max-width:600px){
  .announce{padding:7px 0;}
  .announce-track{font-size:11px;}
  .announce-track > span{padding:0 16px;}
  .announce-track > span::after{margin-left:16px;}

  .sec-head, .section-head{flex-wrap:wrap; gap:4px 12px; margin:48px 0 20px;}
  .sec-head h2, .section-head h2{font-size:clamp(24px,7.5vw,30px);}
  .sec-head .lede{font-size:13px;}
  .picks-head{margin:46px 0 16px;}
  .why{margin-top:46px;}

  .grid{grid-template-columns:repeat(2,1fr); gap:16px 12px;}
  .card{border-radius:16px;}
  .card-body{padding:12px 12px 14px; gap:5px;}
  .card-body h3{font-size:13.5px; line-height:1.3;}
  .card-body .cat, .fits{font-size:10.5px;}
  .price-now{font-size:14px;} .price-was{font-size:11.5px;}
  .swatches .swatch{width:14px; height:14px;}

  .why-grid{grid-template-columns:1fr 1fr;}
  .why-item{padding:18px 14px;}
  .why-item .why-n{font-size:12px;}
  .why-item h4{font-size:13.5px; margin:8px 0 5px;}
  .why-item p{font-size:12px;}

  .trust-row{grid-template-columns:1fr 1fr;}
  .trust-cell{padding:18px 14px; gap:10px;}
  .trust-cell h4{font-size:13px;}
  .trust-cell p{font-size:11.5px;}

  .tm-card{flex-basis:264px; padding:20px;}
  .tm-card p{font-size:13px;}

  .footer-grid{grid-template-columns:1fr 1fr; gap:20px 18px; padding:36px clamp(14px,4vw,22px) 24px;}
  .footer-grid .fbrand{font-size:19px;}
  .footer-bottom{padding:16px clamp(14px,4vw,22px); flex-direction:column; gap:6px; align-items:flex-start;}

  .chip, .fit-tab{padding:9px 14px; font-size:12px;}
  .btn{padding:13px 20px;}
  .btn.sm{padding:11px 16px;}

  .stat-tile{padding:20px 16px;}
  .stat-tile .num{font-size:clamp(26px,8vw,34px);}
  .tl-row{padding:20px 0; gap:6px;}
  .process-card{padding:22px 16px;}
  .about-hero h1{font-size:clamp(38px,12vw,56px);}
  .contact-head h1, .post-head h1{font-size:clamp(32px,10vw,48px);}
  .accordion summary{font-size:14.5px;}
  .accordion p{font-size:13px;}
  .form-grid{grid-template-columns:1fr; gap:14px;}
  .info-card{padding:20px;}

  .featured-post{grid-template-columns:1fr; margin:24px clamp(14px,4vw,22px) 0;}
  .featured-post .fp-media{min-height:0; aspect-ratio:16/10;}
  .featured-post .fp-body{padding:22px;}
}

@media (max-width:340px){ .grid, .why-grid, .trust-row, .footer-grid{grid-template-columns:1fr;} }

/* ===================================================================
   OVERRIDES for per-page inline <style> blocks (loaded after this file,
   so these need higher specificity / !important to reskin them)
   =================================================================== */

/* listing headers → gradient headline */
.listing-head h1, .about-hero h1, .contact-head h1, .wl-head h1{
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.listing-head .eyebrow, .about-hero .eyebrow, .contact-head .eyebrow, .section-lede .eyebrow{ color:var(--copper)!important; }
.listing-head .eyebrow::before, .about-hero .eyebrow::before{ background:var(--grad-1)!important; }

/* featured editorial rows → glass */
.fcol{ background:var(--card-bg)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); }
.fcol:hover{ border-color:rgba(139,92,255,.5)!important; box-shadow:var(--shadow-md)!important; }
.fc-kicker{ color:var(--copper)!important; }
.fc-body h2{ font-family:'Space Grotesk',sans-serif; }
.fc-go{ color:var(--copper)!important; }

/* PDP */
.pi-title{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pg-stage{ background:var(--card-bg)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-md); }
.pg-badge{ background:var(--grad-1)!important; color:#0a0713!important; }
.pi-price b{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent!important; }
.pi-save{ background:var(--grad-2)!important; color:#0a0713!important; }
.pi-size{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; color:var(--ink)!important; border-radius:10px!important; }
.pi-size.active{ background:var(--grad-1)!important; border-color:transparent!important; color:#0a0713!important; }
.pi-size.out{ opacity:.35!important; }
.pi-qty{ border:1px solid var(--glass-brd)!important; background:var(--glass); border-radius:10px!important; }
.pi-sizeguide, .pt-t.active{ color:var(--copper)!important; }
.pt-t.active{ border-color:var(--copper)!important; }
.pi-trust, .ap-strip{ background:transparent!important; border:none!important; gap:12px!important; }
.pit, .ap-strip .apc{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; border-radius:14px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.pit svg{ color:var(--copper)!important; }
.ap-row{ border:1px solid var(--glass-brd)!important; background:var(--card-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.ap-text{ background:transparent!important; }
.ap-text .ap-k, .ap-strip .apc .n{ color:var(--copper)!important; }
.ap-strip .apc .n{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent!important; }
.rel-card{ background:var(--card-bg)!important; border:1px solid var(--glass-brd)!important; }
.rel-card:hover{ border-color:rgba(139,92,255,.5)!important; }
.rel-card .rc-price{ color:var(--copper)!important; }
.sg-box{ background:rgba(14,12,30,.96)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.sg-box th{ background:var(--glass)!important; }
.pt-p th{ background:var(--glass)!important; }
.pt-p table, .pt-p th, .pt-p td, .sg-box table, .sg-box th, .sg-box td{ border-color:var(--glass-brd)!important; }

/* cart */
.summary{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--shadow-md); }
.li-media{ background:var(--card-bg)!important; border:1px solid var(--glass-brd); }
.li-price .now{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent!important; }
.li-info .remove, .promo-remove{ color:var(--ink-soft)!important; }
.qty{ border:1px solid var(--glass-brd)!important; background:var(--glass); }
.promo input{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; color:var(--ink)!important; }
.co-confirm .ic{ background:var(--grad-1)!important; box-shadow:0 0 40px -6px rgba(139,92,255,.7); }
.co-confirm .oid{ color:var(--copper)!important; }

/* account */
.acc-head h1, #dash-hello{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.acc-head .eyebrow{ color:var(--copper)!important; }
.acc-head .eyebrow::before{ background:var(--grad-1)!important; }
.auth-card, .order, .addr, .stat-cards a{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.auth-tabs{ background:var(--glass)!important; border:1px solid var(--glass-brd); }
.auth-tab.active{ background:var(--grad-1)!important; color:#0a0713!important; }
.dash-nav button.active{ background:var(--grad-1)!important; color:#0a0713!important; }
.dash-nav button:hover{ background:var(--glass)!important; color:var(--ink)!important; }
.stat-cards .n{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent!important; }
.order-status{ background:var(--glass)!important; color:var(--copper)!important; border:1px solid var(--glass-brd); }
.order-id, .save-ok{ color:var(--copper)!important; }
.empty{ border:1px dashed var(--glass-brd)!important; }

/* about */
.process-grid{ background:transparent!important; border:none!important; gap:14px!important; }
.process-card{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; border-radius:18px!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.process-card .n{ color:var(--copper)!important; }
.founder-media{ border:1px solid var(--glass-brd); }
.founder blockquote{ font-family:'Space Grotesk',sans-serif; }

/* contact */
.info-card{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.info-card a{ color:var(--copper)!important; }
[data-status]{ color:var(--copper)!important; }

/* home: picks + why + gender + fit-tabs (defined inline in index.html) */
.picks-head .eyebrow, .why-head .eyebrow{ color:var(--copper)!important; }
.pcard{ background:var(--card-bg)!important; border:1px solid var(--glass-brd)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-sm); }
.pcard:hover{ border-color:rgba(139,92,255,.5)!important; box-shadow:var(--shadow-md)!important; }
.pcard-media{ background:var(--grad-b)!important; }
.pprice b{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent!important; }
.ptag{ background:var(--tag-bg)!important; color:var(--tag-fg)!important; }
.ptag.new{ background:var(--grad-2)!important; color:#0a0713!important; }
.fit-tab{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; color:var(--ink-soft)!important; }
.fit-tab.active{ background:var(--grad-1)!important; border-color:transparent!important; color:#0a0713!important; }
.picks-arrow{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; color:var(--ink)!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.why-grid{ background:transparent!important; border:none!important; gap:16px!important; }
.why-item{ background:var(--glass)!important; border:1px solid var(--glass-brd)!important; border-radius:18px!important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.why-item .why-n{ color:var(--copper)!important; }
.gender-card{ border:1px solid var(--glass-brd); }
.gender-card .gc-go{ color:var(--copper)!important; }

/* ===================================================================
   GSAP ANIMATION LAYER  (custom cursor · page wipe · line reveals)
   Paired with gsap-enhance.js
   =================================================================== */

/* --- page transition: branded cover panel -----------------------------
   The panel is baked into every page's HTML, so the FIRST paint of every
   page is already the panel (dark + "TREAD·WELL" mark). It then slides
   up and away with a pure-CSS animation — no JS, no rAF, so the browser's
   navigation gap is just "panel held on screen", which reads as one
   continuous cover → reveal instead of a stall.
   Leaving a page: JS slides the same panel back down to cover, then
   navigates (see gsap-enhance.js).                                       */
.page-cover{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(70vw 60vh at 50% 42%, rgba(139,92,255,.22), transparent 72%),
    var(--bg-2);
  transform:translateY(0); will-change:transform;
  pointer-events:none;
  animation:pc-reveal .72s cubic-bezier(.76,0,.24,1) .12s both;
}
.page-cover__mark{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(20px,3.4vw,34px); letter-spacing:.02em;
  background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pc-mark .5s ease .1s both;
}
@keyframes pc-reveal{
  0%,18%{ transform:translateY(0); }
  100%  { transform:translateY(-101%); }
}
@keyframes pc-mark{
  0%  { opacity:0; transform:translateY(8px); }
  55% { opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-6px); }
}
/* JS adds this when leaving — panel comes back up from below to cover */
.page-cover.is-leaving{
  animation:none;
  transform:translateY(101%);
  transition:transform .4s cubic-bezier(.5,0,.7,0);
}
.page-cover.is-leaving.is-covered{ transform:translateY(0); }
.page-cover.is-leaving .page-cover__mark{ animation:none; opacity:0; transition:opacity .2s ease .12s; }
.page-cover.is-leaving.is-covered .page-cover__mark{ opacity:1; }
.page-cover.is-done{ display:none; }

/* legacy body fade-in / .pt-out fade-out are replaced by the panel */
body{ animation:none !important; }
body.pt-out{ opacity:1 !important; transition:none !important; }

@media (prefers-reduced-motion: reduce){
  .page-cover{ animation-duration:1ms; animation-delay:0s; }
  .page-cover.is-leaving{ transition-duration:1ms; }
}

/* --- custom cursor --- */
#tw-cursor{
  position:fixed; left:0; top:0; z-index:2147482000; pointer-events:none;
  mix-blend-mode:difference; opacity:0; transition:opacity .3s ease;
  will-change:transform;
}
#tw-cursor.is-visible{ opacity:1; }
#tw-cursor .tw-cursor__ring{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid #fff;
  transition:width .4s cubic-bezier(.52,.02,0,.99), height .4s cubic-bezier(.52,.02,0,.99),
             background-color .3s ease, border-color .3s ease;
}
#tw-cursor.is-active .tw-cursor__ring{
  width:9px; height:9px; background:#fff; border-color:transparent;
}
#tw-cursor.is-down .tw-cursor__ring{ transform:scale(.8); }
@media (hover: hover) and (pointer: fine){
  .gsap-ready{ cursor:none; }
  .gsap-ready a, .gsap-ready button, .gsap-ready summary,
  .gsap-ready input, .gsap-ready .card, .gsap-ready .pcard{ cursor:none; }
}

/* --- SplitText line mask --- */
.tw-line{ overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.gsap-ready .hero-inner h1,
.gsap-ready .sec-head h2,
.gsap-ready .listing-head h1,
.gsap-ready .picks-head h2,
.gsap-ready .why-head h2{ visibility:hidden; }
.gsap-ready .hero-inner h1[data-split],
.gsap-ready .sec-head h2[data-split],
.gsap-ready .listing-head h1[data-split],
.gsap-ready .picks-head h2[data-split],
.gsap-ready .why-head h2[data-split]{ visibility:visible; }
.gsap-ready.no-split .hero-inner h1,
.gsap-ready.no-split .sec-head h2,
.gsap-ready.no-split .listing-head h1,
.gsap-ready.no-split .picks-head h2,
.gsap-ready.no-split .why-head h2{ visibility:visible !important; }

/* scroll rise-in — IntersectionObserver toggles .tw-in (see gsap-enhance.js).
   The CSS-only .reveal from the base sheet is superseded by this. */
.gsap-ready .reveal{ opacity:1; transform:none; transition:none; }
.gsap-ready .tw-rise{
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .66s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.gsap-ready .tw-rise.tw-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .gsap-ready .tw-rise{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* --- nav hide/show --- */
header.nav{ transition:transform .55s cubic-bezier(0,.22,.25,.99), background .3s ease, border-color .3s ease; }
header.nav.nav--hide{ transform:translateY(-100%); }

@media (prefers-reduced-motion: reduce){
  #tw-cursor{ display:none !important; }
  .gsap-ready [style*="visibility"]{ visibility:visible !important; }
}