/* ============================================================
   JOKLOVEN GOLF — pages.css
   Home sections, equipment grid, PDP, story, contact
   ============================================================ */

/* ---------- image helpers ---------- */
.tile__txt,.editorial__txt,.mm__card__txt,.jcard__media{display:block}
.tile__txt .k,.tile__txt .t,.tile__txt .s,
.editorial__txt .k,.editorial__txt .t,.editorial__txt .d,
.mm__card__txt .t,.mm__card__txt .s,
.jcard__txt .k,.jcard__txt .t,.jcard__txt .d,.jcard__txt .m{display:block}
.img-cover{width:100%;height:100%;object-fit:cover}
.ratio{position:relative;overflow:hidden}
.ratio::before{content:"";display:block;padding-top:var(--arp,75%)}
.ratio>*{position:absolute;inset:0}

/* ---------- HOME / hero ---------- */
.hero{position:relative;min-height:min(92vh,940px);display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transform-origin:center;animation:heroPan 22s var(--ease) both}
@keyframes heroPan{from{transform:scale(1.12)}to{transform:scale(1.0)}}
.hero__veil{position:absolute;inset:0;background:radial-gradient(90% 70% at 16% 82%,rgba(10,11,12,.5),rgba(10,11,12,0) 62%),linear-gradient(180deg,rgba(10,11,12,.46) 0%,rgba(10,11,12,.08) 32%,rgba(10,11,12,.18) 56%,rgba(10,11,12,.82) 100%)}
.hero__content{position:relative;z-index:2;color:#fff;padding-bottom:clamp(48px,7vh,92px);width:100%}
.hero__content .display-xl{max-width:14ch}
.hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hero__sub{max-width:44ch;font-size:clamp(15px,1.25vw,18px);color:rgba(255,255,255,.82);margin-top:22px}
.hero__ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero__meta{display:flex;gap:12px;flex-direction:column;align-items:flex-end;text-align:right;color:rgba(255,255,255,.78);font-family:var(--font-display);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.hero__sig{width:132px;opacity:.9;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.hero__scroll{position:absolute;left:var(--pad-x);bottom:26px;z-index:2;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);font-family:var(--font-display);font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.hero__scroll .line{width:54px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero__scroll .line::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scrollHint 2.4s var(--ease) infinite}
@keyframes scrollHint{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
@media (max-width:760px){
  .hero{min-height:86vh}
  .hero__meta{display:none}
}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:15px 0;border-top:1px solid rgba(255,255,255,.08)}
.ticker__track{display:flex;gap:0;width:max-content;animation:ticker 44s linear infinite}
.ticker.reveal-done .ticker__track{animation-play-state:running}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker__group{display:flex;flex-shrink:0}
.ticker__item{
  display:inline-flex;align-items:center;gap:14px;padding:0 30px;
  font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);white-space:nowrap;
}
.ticker__item img{width:13px;height:13px}
.ticker__item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);margin-left:16px}

/* ---------- intro (positioning) ---------- */
.intro__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,90px);align-items:start}
.intro__col{display:flex;flex-direction:column;min-width:0;grid-column:1;grid-row:1}
.intro__media{margin:clamp(26px,3.4vw,44px) 0 0;position:relative;border-radius:16px;overflow:hidden;background:var(--bone);grid-column:1;grid-row:2}
.intro__copy{grid-column:2;grid-row:1 / span 2;min-width:0}
.intro__media img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 46%}
.intro__media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(14,15,17,.07);border-radius:inherit}
.intro__media figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,rgba(10,11,12,0),rgba(10,11,12,.62));border-radius:0 0 16px 16px}
.intro__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:40px}
.intro__fact{background:#fff;padding:22px 24px}
.intro__fact .n{font-family:var(--font-display);font-size:clamp(32px,2.6vw,42px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.intro__fact .l{font-size:12.5px;color:var(--gray);margin-top:2px}
@media (max-width:980px){
  .intro__grid{display:flex;flex-direction:column;gap:0}
  .intro__col{order:2;grid-column:auto;grid-row:auto}
  .intro__media{order:1;grid-column:auto;grid-row:auto;margin:0 0 clamp(22px,5vw,32px);border-radius:14px}
  .intro__media img{aspect-ratio:4/3}
  .intro__copy{order:3;grid-column:auto;grid-row:auto;margin-top:clamp(18px,4vw,26px)}
}

/* ---------- category tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px)}
.tile{position:relative;border-radius:18px;overflow:hidden;background:var(--ink);color:#fff;min-height:520px;display:flex;align-items:flex-end;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);z-index:-2}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,12,0) 36%,rgba(10,11,12,.42) 62%,rgba(10,11,12,.82) 100%);z-index:-1}
.tile:hover img{transform:scale(1.055)}
.tile__txt{padding:clamp(20px,2vw,30px);padding-bottom:clamp(28px,2.8vw,42px);width:100%}
.tile__txt .k{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.tile__txt .t{font-family:var(--font-display);font-size:clamp(20px,1.7vw,26px);font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-top:8px}
.tile__txt .s{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:4px}
.tile__go{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.tile__go .arr{transition:transform .35s var(--ease)}
.tile:hover .tile__go .arr{transform:translateX(6px)}
@media (max-width:980px){.tiles{grid-template-columns:1fr}.tile{min-height:420px}}

/* ---------- feature split (product highlight) ---------- */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,80px);align-items:center}
.feature__media{background:var(--bone);border-radius:18px;padding:clamp(18px,3vw,44px);position:relative}
.feature__stage{position:relative;aspect-ratio:5/4.6;overflow:hidden;border-radius:10px;background:#fff}
.feature__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s var(--ease)}
.feature__stage img.swap{opacity:0}
.feature__thumbs{display:flex;gap:12px;margin-top:18px;justify-content:center}
.feature__thumb{width:64px;height:64px;border-radius:10px;border:1.5px solid var(--line);background:#fff;padding:5px;transition:.3s var(--ease)}
.feature__thumb img{width:100%;height:100%;object-fit:contain}
.feature__thumb.is-on{border-color:var(--ink)}
.feature__thumb:hover{border-color:var(--gray-2)}
.feature__body .display-m{max-width:12ch}
.feature__list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.feature__list li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--gray)}
.feature__list li svg{width:15px;height:15px;flex:none;margin-top:4px}
.spec-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.spec-chips span{
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--gray);background:#fff;
}
.feature__ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
@media (max-width:980px){.feature{grid-template-columns:1fr}}

/* ---------- HOME / split hero (JK26-03, 2026-10-24) ---------- */
.hero--split{display:block;min-height:min(88vh,900px);background:var(--ink)}
.hero--split .hero__body{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;min-height:min(88vh,900px)}
.hero--split .hero__copy{position:relative;z-index:2;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vw,90px) clamp(24px,4.4vw,72px) clamp(64px,7vw,104px) var(--pad-x);order:1}
.hero--split .hero__copy .display-xl{max-width:11ch;font-size:clamp(48px,6.4vw,120px);line-height:.96}
.hero--split .hero__sub{margin-top:24px;max-width:38ch;color:rgba(255,255,255,.78)}
.hero--split .hero__ctas{margin-top:clamp(26px,3vw,40px)}
.hero--split .hero__shot{position:relative;order:2;overflow:hidden;background:#0B0C0E}
.hero--split .hero__shot img{width:100%;height:100%;object-fit:cover;object-position:center 18%;animation:heroPan 24s var(--ease) both}
.hero--split .hero__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,17,.55) 0%,rgba(14,15,17,.06) 26%,rgba(14,15,17,0) 60%);pointer-events:none}
.hero--split .hero__tag{position:absolute;z-index:2;left:clamp(18px,2.4vw,34px);bottom:clamp(20px,2.6vw,38px);display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;background:rgba(14,15,17,.5);backdrop-filter:blur(8px);color:#fff;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero--split .hero__tag .dot{width:6px;height:6px;border-radius:50%;background:var(--star-rose)}
.hero--split .hero__kv{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,46px);margin-top:auto;padding-top:clamp(34px,4.4vw,64px)}
.hero--split .hero__kv .n{display:block;font-family:var(--font-display);font-size:clamp(17px,1.5vw,22px);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hero--split .hero__kv .l{display:block;margin-top:5px;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero--split .hero__scroll{left:var(--pad-x)}

@media (max-width:980px){
  .hero--split .hero__body{grid-template-columns:1fr;min-height:0}
  .hero--split .hero__copy{padding:clamp(30px,7vw,52px) var(--pad-x) clamp(36px,7vw,56px);order:2}
  .hero--split .hero__copy .display-xl{max-width:12ch;font-size:clamp(40px,10vw,64px)}
  .hero--split .hero__shot{order:1;min-height:clamp(300px,64vw,470px);max-height:70vh}
  .hero--split .hero__shot img{object-position:center 24%}
  .hero--split .hero__shot::after{background:linear-gradient(180deg,rgba(14,15,17,0) 46%,rgba(14,15,17,.5) 100%)}
  .hero--split .hero__kv{padding-top:clamp(26px,6vw,40px)}
  .hero--split .hero__scroll{display:none}
}

/* ---------- dark craft band ---------- */
.craft{position:relative;overflow:hidden;border-radius:20px;background:var(--ink);color:#fff;display:grid;grid-template-columns:1.05fr 1fr;min-height:560px}
.craft__body{padding:clamp(30px,4.4vw,72px);display:flex;flex-direction:column;justify-content:center}
.craft__media{position:relative;min-height:320px}
.craft__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
/* 2026-10-29: the craft panel now carries a warm daylight portrait; keep it at
   full strength and hold the glove（not the sleeve）in frame at every width. */
.craft__media--portrait img{opacity:1;object-position:50% 46%}
.craft__steps{margin-top:34px;display:flex;flex-direction:column}
.craft__step{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.craft__step .n{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--star-rose)}
.craft__step .t{font-family:var(--font-display);font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.02em}
.craft__step .d{font-size:14px;color:rgba(255,255,255,.72);margin-top:4px}
@media (max-width:980px){.craft{grid-template-columns:1fr}.craft__media{order:-1;min-height:380px}
  /* square frame below 980px: the near-square photo then needs no cropping, so the glove stays whole */
  .craft__media--portrait{aspect-ratio:1/1;min-height:0}
  .craft__media--portrait img{object-position:50% 50%}}

/* ---------- six stars ---------- */
.stars-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,22px);margin-top:clamp(34px,4vw,56px)}
.star-item{text-align:center;padding:clamp(18px,2vw,30px) 10px;border-radius:14px;border:1px solid transparent;transition:.4s var(--ease)}
.star-item:hover{border-color:var(--line);background:#fff;transform:translateY(-4px)}
.star-item img,.star-item svg{width:clamp(34px,3.4vw,54px);height:auto;margin:0 auto;
  filter:drop-shadow(0 1px 2px rgba(14,15,17,.16))}
.star-item .t{font-family:var(--font-display);font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-top:18px}
.star-item .d{font-size:12.5px;color:var(--gray);margin-top:6px;line-height:1.5}
@media (max-width:1080px){.stars-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.stars-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- film band ---------- */
.film{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(28px,5vw,90px);align-items:center}
.film__player{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:3/4;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.film__player video{width:100%;height:100%;object-fit:cover;cursor:pointer}
.film__poster{position:absolute;inset:0;cursor:pointer}
.film__poster img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.film__poster:hover img{transform:scale(1.03)}
.film__playbtn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  transition:.35s var(--ease);
}
.film__playbtn:hover{transform:translate(-50%,-50%) scale(1.06)}
.film__playbtn svg{width:26px;height:26px;fill:var(--ink);margin-left:4px}
.film__ctl{position:absolute;right:14px;bottom:30px;display:flex;gap:8px;opacity:0;transition:opacity .35s var(--ease)}
.film__player.is-playing .film__ctl{opacity:1}
.film__ctl button{
  width:42px;height:42px;border-radius:50%;background:rgba(14,15,17,.62);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.film__ctl button:hover{background:var(--red)}
.film__ctl svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film__meta{margin-top:18px;display:flex;gap:18px;align-items:center;color:rgba(255,255,255,.66);font-family:var(--font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:980px){.film{grid-template-columns:1fr}.film__player{max-width:420px}}

/* ---------- editorial 2-up ---------- */
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,28px)}
.editorial__item{position:relative;border-radius:18px;overflow:hidden;min-height:600px;display:flex;align-items:flex-end;color:#fff}
.editorial__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.editorial__item:hover img{transform:scale(1.045)}
.editorial__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(10,11,12,.78))}
.editorial__txt{position:relative;padding:clamp(24px,3vw,42px);z-index:1}
.editorial__txt .k{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.editorial__txt .t{font-family:var(--font-display);font-size:clamp(22px,2vw,32px);font-weight:800;text-transform:uppercase;margin-top:10px;letter-spacing:.005em}
.editorial__txt .d{font-size:14px;color:rgba(255,255,255,.82);margin-top:8px;max-width:44ch}
@media (max-width:900px){.editorial{grid-template-columns:1fr}.editorial__item{min-height:440px}}

/* ---------- journal ---------- */
.journal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(30px,3.6vw,54px)}
.jcard{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.45s var(--ease);display:flex;flex-direction:column}
.jcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px -40px rgba(14,15,17,.4)}
.jcard__media{overflow:hidden;aspect-ratio:4/3}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.05)}
.jcard__txt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.jcard__txt .k{font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red-ink)}
.jcard__txt .t{font-family:var(--font-display);font-size:19px;font-weight:800;line-height:1.22}
.jcard__txt .d{font-size:13.5px;color:var(--gray);flex:1}
.jcard__txt .m{font-size:12px;color:var(--gray);font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.journal-grid{grid-template-columns:1fr}}

/* ---------- newsletter ---------- */
.newsletter{background:var(--ink);color:#fff;border-radius:20px;overflow:hidden;position:relative}
.newsletter__in{padding:clamp(34px,5vw,76px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,4vw,70px);align-items:center;position:relative;z-index:1}
.newsletter__form{display:flex;gap:12px;flex-wrap:wrap}
.newsletter__form .input{flex:1;min-width:220px;border-bottom-color:rgba(255,255,255,.3);color:#fff}
.newsletter__form .input::placeholder{color:rgba(255,255,255,.4)}
.newsletter__form .input:focus{border-color:#fff}
.newsletter__note{font-size:12px;color:rgba(255,255,255,.45);margin-top:14px}
.newsletter__ok{display:none;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;letter-spacing:.06em}
.newsletter__ok.show{display:flex}
.newsletter__stars{position:absolute;right:-40px;top:-36px;width:360px;display:flex;flex-wrap:wrap;gap:16px 20px;opacity:.45;z-index:0;transform:rotate(-12deg)}
.newsletter__stars img{width:58px;height:58px}
@media (max-width:900px){.newsletter__in{grid-template-columns:1fr}}

/* ---------- shared page hero ---------- */
.page-hero{background:var(--ink);color:#fff;padding:clamp(52px,7vw,110px) 0 clamp(40px,5vw,72px);position:relative;overflow:hidden}
.page-hero--bone{background:var(--bone);color:var(--ink)}
.page-hero__k{display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.55);font-family:var(--font-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.page-hero--bone .page-hero__k{color:var(--gray)}
.page-hero h1{margin-top:18px}
.page-hero__sub{max-width:52ch;margin-top:20px;color:rgba(255,255,255,.72);font-size:clamp(15px,1.2vw,17.5px)}
.page-hero--bone .page-hero__sub{color:var(--gray)}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.page-hero--bone .crumbs{color:var(--gray)}
.page-hero--bone .crumbs a:hover{color:var(--ink)}

/* ---------- equipment ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;color:var(--gray);
  transition:.3s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filters__count{margin-left:auto;font-family:var(--font-display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(26px,3vw,44px)}
.product-card{display:flex;flex-direction:column;gap:0;border-radius:18px;overflow:hidden;background:var(--bone);position:relative;transition:.45s var(--ease)}
.product-card:hover{transform:translateY(-5px);box-shadow:0 34px 70px -46px rgba(14,15,17,.5)}
.product-card__media{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,#fff, #F7F6F3);overflow:hidden}
.product-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .5s var(--ease)}
.product-card__media img.alt{opacity:0}
.product-card:hover .product-card__media img.main{opacity:0}
.product-card:hover .product-card__media img.alt{opacity:1;transform:scale(1.03)}
.product-card__badges{position:absolute;left:14px;top:14px;display:flex;gap:8px;z-index:2}
.badge{
  font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:var(--ink);color:#fff;
}
.badge--red{background:var(--red-ink)}
.badge--light{background:#fff;color:var(--ink);border:1px solid rgba(14,15,17,.08)}
.product-card__txt{padding:20px 22px 24px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card__txt .k{font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.product-card__txt .t{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:.01em}
.product-card__txt .d{font-size:14px;color:var(--gray)}
.product-card__txt .bot{margin-top:14px;display:flex;align-items:center;justify-content:space-between}
.product-card__txt .bot .link-arrow{font-size:11.5px;border-bottom-width:1px;padding-bottom:2px}
.product-card__txt .bot .tagline{font-size:12px;color:var(--gray);font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.product-card--wide{grid-column:span 3;display:grid;grid-template-columns:1.12fr 1fr;align-items:stretch}
.product-card--wide .product-card__media{aspect-ratio:auto;min-height:340px}
/* the wide card's imagery is on pure white, so its frame must be white too */
.product-card--wide .product-card__media{background:#fff}
.product-card--wide .product-card__txt{border-top:0;border-left:1px solid var(--line);border-radius:0 18px 18px 0;padding:clamp(28px,3.2vw,48px);justify-content:center;gap:10px}
.product-card--wide .product-card__txt .t{font-size:clamp(22px,2vw,30px)}
/* the leading Nilan card uses a 1600x920 product shot: keep its true ratio so the cuffs are never clipped */
.product-grid--equipment .product-card--wide .product-card__media{aspect-ratio:1600/920;min-height:0}
@media (max-width:1000px){.product-grid{grid-template-columns:1fr 1fr}.product-card--wide{grid-column:span 2;display:flex;flex-direction:column}.product-card--wide .product-card__media{aspect-ratio:1/1;min-height:0}.product-card--wide .product-card__txt{border-top:0;border-left:0;border-radius:0 0 18px 18px;padding:20px 22px 24px}}
@media (max-width:640px){.product-grid{grid-template-columns:1fr}.product-card--wide{grid-column:span 1}}

/* ---------- PDP ---------- */
.pdp{padding:clamp(40px,4.6vw,78px) 0 var(--sect-y)}
.pdp__grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(26px,4.4vw,84px);align-items:start}
.gallery{position:sticky;top:calc(var(--nav-h-s) + 26px)}
.gallery__main{position:relative;border-radius:18px;overflow:hidden;background:var(--bone);aspect-ratio:1/1}
.gallery__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(14px,2.4vw,40px);transition:opacity .4s var(--ease)}
.gallery__main img.is-out{opacity:0}
.gallery__nav{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:16px 16px 28px;pointer-events:none}
.gallery__nav button{
  pointer-events:auto;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -14px rgba(0,0,0,.4);transition:.3s var(--ease);
}
.gallery__nav button:hover{background:var(--ink)}
.gallery__nav button:hover svg{stroke:#fff}
.gallery__nav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gallery__count{position:absolute;top:16px;right:18px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gray);background:rgba(255,255,255,.9);padding:7px 12px;border-radius:999px}
.gallery__thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.gallery__thumb{width:calc((100% - 60px)/6);flex:none}
.gallery__thumb{border:1.5px solid var(--line);border-radius:12px;background:#fff;aspect-ratio:1/1;overflow:hidden;padding:8px;transition:.3s var(--ease)}
.gallery__thumb img{width:100%;height:100%;object-fit:contain}
.gallery__thumb.is-on{border-color:var(--ink)}
.gallery__thumb:hover{border-color:var(--gray-2)}
.pdp__info .k{display:flex;gap:14px;align-items:center;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red-ink)}
.pdp__info h1{margin-top:16px}
.pdp__info .sub{margin-top:12px;font-size:16.5px;color:var(--gray)}
.pdp__info .copy{margin-top:22px;font-size:15.5px;color:var(--gray)}
.pdp__price{margin-top:22px;font-family:var(--font-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-2)}
.pdp__points{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.pdp__points li{display:flex;gap:13px;font-size:15px;align-items:flex-start}
.pdp__points svg{width:15px;height:15px;flex:none;margin-top:4px}
.pdp__ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.pdp__note{margin-top:16px;font-size:12.5px;color:var(--gray)}
.spec-table{margin-top:34px;border-top:1px solid var(--line)}
.spec-table__row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec-table__row dt{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);padding-top:3px}
.spec-table__row dd{margin:0;color:var(--ink)}
@media (max-width:980px){.pdp__grid{grid-template-columns:1fr}.gallery{position:static}}

/* PDP sections */
.pdp-band{padding:calc(var(--sect-y) * .8) 0 0}
.colorway__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(26px,3vw,44px)}
.colorway__row figure{border-radius:14px;overflow:hidden;background:var(--bone)}
.colorway__row img{width:100%;aspect-ratio:1/1;object-fit:cover}
.colorway__row figcaption{padding:14px 18px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(30px,3.6vw,54px)}
.callout .n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--red-ink)}
.callout .t{font-family:var(--font-display);font-size:19px;font-weight:800;text-transform:uppercase;margin-top:12px;letter-spacing:.01em}
.callout .d{font-size:14px;color:var(--gray);margin-top:8px}
.callout .bar{height:2px;background:var(--line);margin-bottom:20px;position:relative;overflow:hidden}
.callout .bar::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.callout.is-in .bar::after{transform:scaleX(1)}
@media (max-width:900px){.colorway__row{grid-template-columns:1fr 1fr}.callouts{grid-template-columns:1fr}}

/* ---------- story ---------- */
.story-hero{position:relative;min-height:min(78vh,780px);display:flex;align-items:flex-end;background:var(--ink);color:#fff;overflow:hidden}
.story-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.story-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 14% 82%,rgba(10,11,12,.5),rgba(10,11,12,0) 60%),linear-gradient(180deg,rgba(10,11,12,.2),rgba(10,11,12,.78))}
.story-hero .wrap{position:relative;z-index:1;padding-bottom:clamp(44px,6vh,84px);width:100%}
.story-cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4.4vw,84px)}
.story-cols .lead{color:var(--ink)}
.story-cols p + p{margin-top:18px}
.pullquote{margin:64px 0 0;padding:clamp(26px,3vw,46px);border-left:3px solid var(--red);background:var(--bone);border-radius:0 14px 14px 0}
.pullquote .q{font-family:var(--font-display);font-size:clamp(20px,2.2vw,30px);font-weight:800;line-height:1.24;letter-spacing:-.01em}
.pullquote .a{font-family:var(--font-display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin-top:14px}
.process{counter-reset:step;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(30px,4vw,56px)}
.process__item{border-top:2px solid var(--ink);padding-top:18px}
.process__item::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--red-ink)}
.process__item .t{font-family:var(--font-display);font-size:17px;font-weight:800;text-transform:uppercase;margin-top:10px}
.process__item .d{font-size:13.5px;color:var(--gray);margin-top:8px}
.process--craft{margin-top:clamp(38px,5vw,72px)}
.process--craft .process__item{display:flex;flex-direction:column;padding-top:13px}
.process--craft .process__item::before{margin-bottom:12px}
.process__media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--ink);box-shadow:0 10px 28px rgba(14,15,17,.10)}
.process__media::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.process__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.process--craft .process__item:hover .process__media img{transform:scale(1.025);filter:grayscale(1) contrast(1.08)}
.process--craft .process__item .t{margin-top:16px}
.process--craft .process__item .d{font-size:13px}
@media (max-width:1000px){.story-cols{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.process{grid-template-columns:1fr}}
.portraits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.portraits figure{border-radius:16px;overflow:hidden;background:var(--bone)}
.portraits img{width:100%;aspect-ratio:4/4.4;object-fit:cover;transition:transform 1s var(--ease)}
.portraits figure:hover img{transform:scale(1.045)}
.portraits figcaption{padding:16px 20px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
@media (max-width:800px){.portraits{grid-template-columns:1fr 1fr}}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.values__item{background:#fff;padding:clamp(22px,2.4vw,34px)}
.values__item svg{width:22px;height:22px;margin-bottom:18px}
.values__item .t{font-family:var(--font-display);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.values__item .d{font-size:13.5px;color:var(--gray);margin-top:8px}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,100px);align-items:start}
.contact-aside{display:flex;flex-direction:column;gap:34px}
.contact-card{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,32px)}
.contact-card h4{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.contact-card p{font-size:14.5px;color:var(--gray);margin-top:10px}
.contact-card a.mail{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;color:var(--ink);border-bottom:1.5px solid var(--ink);transition:.3s var(--ease)}
.contact-card a.mail:hover{color:var(--red);border-color:var(--red)}
.contact-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.contact-list li{display:flex;gap:12px;font-size:14px;color:var(--gray)}
.contact-list strong{color:var(--ink);font-weight:600;min-width:74px;display:inline-block}
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;text-align:left;font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.01em}
.faq__q .chev{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.faq__q .chev svg{width:12px;height:12px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.faq__item.is-open .faq__q .chev{background:var(--ink);border-color:var(--ink);transform:rotate(180deg)}
.faq__item.is-open .faq__q .chev svg{stroke:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq__a p{padding:0 2px 22px;font-size:14.5px;color:var(--gray);max-width:70ch}
@media (max-width:940px){.contact-grid{grid-template-columns:1fr}}

/* ---------- cta banner ---------- */
.cta-banner{position:relative;border-radius:18px;overflow:hidden;background:var(--ink);color:#fff;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center}
.cta-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.cta-banner__in{position:relative;z-index:1;padding:clamp(30px,4vw,60px)}
.cta-banner .display-m{max-width:22ch;margin-inline:auto}
.cta-banner .btn{margin-top:26px}

/* ============================================================
   design v2 refinements (2026-10-06) — motion, ticker mask, details
   ============================================================ */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__content .display-xl{animation:riseIn 1.05s var(--ease) .08s both}
.hero__sub{animation:riseIn .95s var(--ease) .2s both}
.hero__ctas{animation:riseIn .95s var(--ease) .3s both}
.hero__meta{animation:riseIn .95s var(--ease) .38s both}
.hero__scroll{animation:riseIn .9s var(--ease) .5s both}
.page-hero h1{animation:riseIn .9s var(--ease) .05s both}
.page-hero__sub{animation:riseIn .9s var(--ease) .16s both}
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker:hover .ticker__track{animation-play-state:paused}
.star-item img,.star-item svg{transition:transform .55s var(--ease)}
.star-item:hover img,.star-item:hover svg{transform:translateY(-3px) rotate(-8deg)}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 50% 28%,rgba(10,11,12,.22),rgba(10,11,12,.64));z-index:0}
.cta-banner .cta-banner__in{position:relative;z-index:1}

/* design v2.1 refinements (2026-10-06) */
.product-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(14,15,17,.06);z-index:1}
.product-card__media::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,0) 52%,rgba(14,15,17,.05));z-index:1}
.product-card__txt .bot .tagline:first-child:last-child{margin-left:auto}
.page-hero--bone{padding-bottom:clamp(34px,4.2vw,58px)}

/* design v2.2 (2026-10-06) */
.lead,.copy,.product-card__txt .d,.jcard__txt .d,.faq__a p{text-wrap:pretty}
.product-card__media::after{box-shadow:inset 0 0 0 1px rgba(14,15,17,.09)}

/* hero headline legibility over light imagery (20261006e) */
.hero__content .display-xl{text-shadow:0 2px 30px rgba(10,11,12,.42),0 1px 3px rgba(10,11,12,.30)}
.hero__meta{text-shadow:0 1px 12px rgba(10,11,12,.35)}
.hero__sub{text-shadow:0 1px 14px rgba(10,11,12,.35)}

/* Nilan product film (2026-10-23) */
.nilan-film{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(28px,5vw,84px);align-items:center}
.nilan-film .display-m{max-width:14ch}
.nilan-film .lead{color:var(--gray)}
@media (max-width:980px){.nilan-film{grid-template-columns:1fr}.nilan-film .film__player{max-width:400px}}

/* product films (2026-10-24) */
.product-film{padding-top:0}
.product-film__row{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(28px,5vw,84px);align-items:center}
.product-film__row .display-m{max-width:15ch}
.product-film__row .lead{color:var(--gray)}
.product-film + .product-film{padding-top:clamp(30px,4vw,64px)}
.filmchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,30px)}
.filmchip{display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;transition:.3s var(--ease)}
.filmchip .n{font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--gray-2)}
.filmchip .l{font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.filmchip:hover{border-color:var(--ink)}
.filmchip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filmchip.is-on .n{color:rgba(255,255,255,.7)}
.film__stage{position:relative;margin-top:clamp(20px,2.6vw,34px);max-width:420px}
.film__player[hidden]{display:none}
@media (max-width:980px){.product-film__row{grid-template-columns:1fr}.product-film__row .film__player{max-width:400px}}

.filmchapters{display:grid;grid-template-columns:minmax(240px,320px) minmax(300px,420px);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(20px,2.4vw,30px)}
.filmchapters__side{display:flex;flex-direction:column;gap:18px}
.filmchapters__side .filmchips{flex-direction:column;margin-top:0}
.filmchapters__side .filmchip{width:100%;justify-content:flex-start}
.filmchapters__note{font-size:13.5px;color:var(--gray);margin:0;text-wrap:pretty}
.filmchapters__stage .film__stage{margin-top:0}
@media (max-width:980px){.filmchapters{grid-template-columns:1fr}}

/* PDP hero video (2026-10-24) */
.gallery__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease);z-index:1}
.gallery__main.is-video-slide{cursor:pointer}
.gallery__video.is-out{opacity:0;pointer-events:none}
.gallery__main img{z-index:2}
.gallery__main img.is-out{opacity:0;pointer-events:none}
.gallery__sound{position:absolute;right:16px;bottom:76px;z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(14,15,17,.62);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:.3s var(--ease)}
.gallery__sound:hover{background:var(--red)}
.gallery__sound svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gallery__sound.is-off{opacity:0;pointer-events:none}
.gallery__play{position:absolute;right:64px;bottom:76px;z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(14,15,17,.62);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:.3s var(--ease)}
.gallery__play:hover{background:var(--red)}
.gallery__play svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.gallery__play .i-play{display:none}
.gallery__play.is-paused .i-pause{display:none}
.gallery__play.is-paused .i-play{display:block}
.gallery__play.is-off{opacity:0;pointer-events:none}
.gallery__thumb--video{position:relative}
.gallery__thumb--video img{object-fit:cover}
.gallery__thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(14,15,17,.22)}
.gallery__thumb-play svg{width:16px;height:16px;fill:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.gallery__thumb--video::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(14,15,17,.06);pointer-events:none}
@media (max-width:560px){.gallery__thumbs{gap:8px}.gallery__thumb{width:calc((100% - 24px)/4)}}

/* ---------- video progress (gallery + film players) ---------- */
.video-progress{
  position:absolute;left:0;right:0;bottom:0;height:24px;z-index:8;
  opacity:0;pointer-events:none;cursor:pointer;touch-action:none;
  transition:opacity .22s var(--ease);
}
.video-progress.is-visible{opacity:1;pointer-events:auto}
.video-progress::before{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:4px;border-radius:999px;
  background:rgba(14,15,17,.42);box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.video-progress__buffer,.video-progress__fill{
  position:absolute;left:0;bottom:8px;height:4px;width:0;border-radius:999px;
  transition:width .12s linear,height .2s var(--ease),bottom .2s var(--ease);
}
.video-progress__buffer{background:rgba(255,255,255,.4)}
.video-progress__fill{background:var(--red)}
.video-progress__fill::after{
  content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;
  background:#fff;transform:translateY(-50%);box-shadow:0 0 0 2px var(--red);
}
.video-progress__time{
  position:absolute;left:50%;bottom:23px;transform:translateX(-50%);
  padding:4px 8px;border-radius:999px;background:rgba(14,15,17,.82);color:#fff;
  font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.08em;
  line-height:1;white-space:nowrap;pointer-events:none;opacity:0;
  backdrop-filter:blur(5px);transition:opacity .15s var(--ease);
}
.video-progress:hover::before,.video-progress:focus-visible::before,
.video-progress:hover .video-progress__buffer,.video-progress:hover .video-progress__fill,
.video-progress:focus-visible .video-progress__buffer,.video-progress:focus-visible .video-progress__fill{
  height:6px;bottom:7px;
}
.video-progress:hover .video-progress__time,.video-progress:focus-visible .video-progress__time,
.video-progress.is-scrubbing .video-progress__time{opacity:1}
.video-progress.is-scrubbing{cursor:grabbing}
.video-progress.is-scrubbing .video-progress__buffer,.video-progress.is-scrubbing .video-progress__fill{transition:none}
.video-progress.is-scrubbing .video-progress__fill::after{width:13px;height:13px;right:-6px}
.video-progress:focus-visible{outline:2px solid #fff;outline-offset:-3px;border-radius:4px}
.gallery__main>.video-progress{left:16px;right:16px;bottom:0;height:24px}
.film__player>.video-progress{bottom:0;height:24px}
@media (max-width:560px){
  .gallery__main>.video-progress{left:12px;right:12px;bottom:0}
}
/* ---------- HOME: full-bleed hero, Titleist-style (2026-10-24) ---------- */
.hero--full{position:relative;min-height:clamp(560px,76vh,820px);background:#0B2E4E;overflow:hidden;display:block}
.hero--full .hero__body{position:relative;min-height:clamp(560px,76vh,820px);display:block}
.hero--full .hero__body::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#071F36 0%,#0B2E4E 26%,#12456A 48%,#2C6485 70%,#5E8090 88%,#7C6A5B 100%)}
.hero--full .hero__copy{position:relative;z-index:3;max-width:min(720px,52vw);padding:clamp(44px,7vw,110px) 0 clamp(40px,6vw,90px) var(--pad-x);color:#fff}
.hero--full .hero__copy .display-xl{max-width:11ch;font-size:clamp(46px,6.2vw,116px);line-height:.94}
.hero--full .hero__sub{margin-top:22px;max-width:40ch;color:rgba(255,255,255,.86);text-shadow:0 1px 12px rgba(6,20,34,.35)}
.hero--full .hero__ctas{margin-top:clamp(24px,3vw,38px)}
.hero--full .hero__shot{position:absolute;top:0;right:0;bottom:0;width:min(58vw,1000px);z-index:2;pointer-events:none}
.hero--full .hero__shot picture{display:block;height:100%}
.hero--full .hero__shot img{width:100%;height:100%;object-fit:cover;object-position:center 12%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 9%,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 9%,#000 22%,#000 100%)}
.hero--full .hero__tag{position:absolute;z-index:3;right:clamp(18px,3vw,44px);bottom:clamp(20px,3vw,40px);display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;background:rgba(10,14,18,.5);backdrop-filter:blur(8px);color:#fff;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero--full .hero__tag .dot{width:6px;height:6px;border-radius:50%;background:var(--star-rose)}
.hero--full .hero__foot{position:relative;z-index:4;background:rgba(9,26,40,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12)}
.hero--full .hero__foot-in{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,74px);padding:20px var(--pad-x) 22px;max-width:var(--wrap);margin-inline:auto;color:#fff}
.hero--full .hero__foot .n{display:block;font-family:var(--font-display);font-size:clamp(15px,1.3vw,19px);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hero--full .hero__foot .l{display:block;margin-top:4px;font-family:var(--font-display);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media (max-width:980px){
  .hero--full{min-height:0}
  .hero--full .hero__body{min-height:0;display:flex;flex-direction:column}
  .hero--full .hero__copy{max-width:none;padding:clamp(30px,7vw,48px) var(--pad-x) clamp(24px,5vw,34px);order:2}
  .hero--full .hero__copy .display-xl{font-size:clamp(38px,10vw,60px)}
  .hero--full .hero__shot{position:relative;width:100%;height:clamp(300px,78vw,480px);order:1;pointer-events:auto;overflow:hidden}
  .hero--full .hero__tag{right:auto;left:16px;bottom:14px;font-size:9.5px;padding:8px 12px}
  .hero--full .hero__ctas{gap:10px}
  .hero--full .hero__ctas .btn{flex:1 1 auto;min-width:min(100%,150px);padding-inline:18px;white-space:nowrap}
  .hero--full .hero__shot img{object-position:center 18%;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .hero--full .hero__body::before{background:linear-gradient(180deg,#071F36 0%,#12456A 40%,#2C6485 66%,#5E8090 100%)}
  .hero--full .hero__foot-in{padding:16px 0 18px;gap:22px}
}

/* ---------- HOME: shop by category ---------- */
.catbar{padding-top:clamp(30px,4vw,58px)}
.catbar__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}
.catbar__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.catcard{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--bone);aspect-ratio:1/1.12}
.catcard__media{position:absolute;inset:0}
.catcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.catcard:hover .catcard__media img{transform:scale(1.05)}
.catcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,12,0) 42%,rgba(10,11,12,.72) 100%)}
.catcard__t{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.catcard__c{position:absolute;z-index:2;right:16px;top:14px;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);font-family:var(--font-display);font-size:10.5px;font-weight:800;letter-spacing:.08em;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:980px){.catbar__grid{grid-template-columns:repeat(2,1fr)}
  .catbar__grid .catcard:nth-child(3){grid-column:1/-1;aspect-ratio:2/1}}

/* ---------- HOME: the line (4-up product grid) ---------- */
.linegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,26px)}
.lcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.45s var(--ease)}
.lcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -42px rgba(14,15,17,.45);border-color:var(--gray-2)}
.lcard__media{position:relative;display:block;aspect-ratio:1/1.05;background:var(--bone);overflow:hidden}
.lcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform .9s var(--ease)}
.lcard__media img.alt{opacity:0}
.lcard:hover .lcard__media img.alt{opacity:1}
.lcard:hover .lcard__media img{transform:scale(1.03)}
.lcard__txt{display:flex;flex-direction:column;gap:7px;padding:18px 18px 20px}
.lcard__k{font-family:var(--font-display);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-2)}
.lcard__t{font-family:var(--font-display);font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.lcard__d{font-size:12.5px;line-height:1.5;color:var(--gray)}
.lcard__p{font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2);margin-top:2px}
.lcard__p span{opacity:.5}
@media (max-width:1080px){.linegrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.linegrid{grid-template-columns:1fr}}

/* ---------- HOME: continuous full-bleed cover (2026-10-25) ---------- */
.hero--cover{position:relative;min-height:clamp(520px,74vh,760px);background:#0E2A44;overflow:hidden;display:flex;align-items:flex-end}
.hero--cover .hero__media{position:absolute;inset:0}
.hero--cover .hero__media picture{display:block;height:100%}
.hero--cover .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero--cover .hero__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,36,.58) 0%,rgba(4,20,36,.34) 24%,rgba(4,20,36,.10) 42%,rgba(4,20,36,0) 54%),linear-gradient(180deg,rgba(4,20,36,.12) 0%,rgba(4,20,36,0) 36%,rgba(4,20,36,.06) 74%,rgba(4,20,36,.34) 100%)}
.hero--cover{flex-direction:column;justify-content:flex-end}
.hero--cover .hero__content{position:relative;z-index:2;color:#fff;width:100%;padding-bottom:clamp(40px,5vh,64px);max-width:none}
.hero--cover .hero__inner{max-width:min(560px,42vw)}
.hero--cover .hero__eyebrow{display:block;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:clamp(16px,2.2vw,26px)}
.hero--cover .hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(42px,4.9vw,74px);line-height:1.03;letter-spacing:-.03em;margin:0;max-width:none;text-shadow:0 2px 40px rgba(4,16,28,.45)}
.hero--cover .hero__lead{margin-top:clamp(14px,1.8vw,22px);max-width:30ch;font-size:clamp(13.5px,0.98vw,15.5px);line-height:1.58;color:rgba(255,255,255,.86);text-shadow:0 1px 16px rgba(4,16,28,.45)}
.hero--cover .hero__actions .btn{min-width:0}
.hero--cover .hero__actions{display:flex;flex-wrap:nowrap;gap:12px;margin-top:clamp(24px,2.6vw,36px)}
.hero--cover .hero__actions .btn{flex:0 0 auto;padding-inline:clamp(20px,2vw,30px);white-space:nowrap}
.hero--cover .hero__scroll{position:absolute;left:var(--pad-x);bottom:18px;z-index:2;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.62);font-family:var(--font-display);font-size:9px;letter-spacing:.26em;text-transform:uppercase}
.hero--cover .hero__scroll .line{width:46px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero--cover + .ticker{margin-top:0}
.hero--cover .hero__content{padding-bottom:clamp(56px,6.4vh,76px)}
@media (max-width:980px){
  .hero--cover{min-height:0;align-items:stretch;flex-direction:column}
  .hero--cover .hero__media{position:relative;height:clamp(300px,46vh,460px);inset:auto}
  .hero--cover .hero__media img{object-position:center 20%}
  .hero--cover .hero__veil{display:none}
  .hero--cover .hero__content{max-width:none;background:#0E2A44;padding:clamp(22px,5vw,32px) var(--pad-x) clamp(28px,6vw,40px);color:#fff}
  .hero--cover .hero__inner{max-width:none}
  .hero--cover .hero__actions{flex-wrap:wrap}
  .hero--cover .hero__title{font-size:clamp(34px,9.4vw,52px);max-width:none;line-height:1.08}
  .hero--cover .hero__lead{color:rgba(255,255,255,.82)}
  .hero--cover .hero__actions .btn{flex:1 1 auto;min-width:min(100%,150px)}
  .hero--cover .hero__scroll{display:none}
  .hero--cover .hero__brandline{display:none}
}

/* ============================================================
   NILAN — personalised page styling (2026-10-27)
   Soft blush ground, ribbon details, six-colour accents.
   ============================================================ */
.page-nilan{background:var(--paper)}
.page-nilan .page-hero--bone{background:transparent;border-bottom:0}
.page-nilan .crumbs a,.page-nilan .crumbs span{color:var(--gray)}

/* hero card: blush plate, soft shadow, rounded like a lookbook */
.pdp--nilan{padding-top:clamp(10px,2vw,26px)}
.pdp--nilan .pdp__grid{gap:clamp(28px,4vw,64px)}
.pdp--nilan .gallery__main{background:var(--bone);border-radius:18px;box-shadow:none}
.pdp--nilan .gallery__thumbs{margin-top:16px}
.pdp--nilan .gallery__thumb{border-radius:12px;border-color:var(--line)}
.pdp--nilan .gallery__thumb.is-on{border-color:var(--ink)}
.pdp--nilan .gallery__count{background:rgba(255,255,255,.94);color:var(--ink)}
.pdp--nilan .gallery__sound{background:rgba(14,15,17,.62)}

/* info column */
.pdp--nilan .pdp__info .k{color:var(--red-ink);letter-spacing:.22em}
.pdp--nilan .pdp__info .display-m{color:var(--ink)}
.pdp--nilan .pdp__info .sub{color:var(--gray)}
.pdp--nilan .pdp__info .copy{color:var(--gray)}
.pdp--nilan .pdp__points li{color:var(--ink)}
.pdp--nilan .pdp__points li svg circle{fill:var(--red)}
.pdp--nilan .pdp__note{color:var(--gray-2)}
.pdp--nilan .spec-table__row{border-color:var(--line)}
.pdp--nilan .spec-table dt{color:var(--gray-2)}
.pdp--nilan .spec-table dd{color:var(--ink)}
.pdp--nilan .btn--solid{background:var(--ink)}
.pdp--nilan .btn--solid:hover{background:var(--red)}
.pdp--nilan .btn--outline{border-color:var(--ink);color:var(--ink)}
.pdp--nilan .btn--outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* shared type for the new sections */
.nilan-eyebrow{display:inline-block;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--red-ink)}
.nilan-title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.1vw,44px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.nilan-lead{max-width:56ch;margin-top:16px;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.7;color:var(--gray)}
.nilan-head{text-align:center}
.nilan-head .nilan-lead{margin-inline:auto}

/* six colours */
.nilan-colours{padding-top:clamp(30px,5vw,64px)}
.nilan-stars{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,3.4vw,48px);max-width:1080px;margin-inline:auto}
.nilan-star{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(16px,2vw,24px) 10px;background:var(--bone);border:1px solid var(--line);border-radius:16px;transition:.4s var(--ease)}
.nilan-star:hover{transform:translateY(-4px);box-shadow:0 24px 44px -34px rgba(14,15,17,.28);background:#fff}
.nilan-star img{width:clamp(22px,2.2vw,30px);height:auto}
.nilan-star .n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink);margin-top:4px}
.nilan-star .w{font-size:11.5px;color:var(--gray-2);letter-spacing:.02em}
@media (max-width:820px){.nilan-stars{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.nilan-stars{grid-template-columns:repeat(2,1fr)}}

/* details split */
.nilan-details{padding-top:clamp(24px,4vw,52px)}
.nilan-details__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4.4vw,72px);align-items:center}
.nilan-details__media{position:relative;border-radius:18px;overflow:hidden;background:var(--bone);box-shadow:none}
.nilan-details__media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.3}
.nilan-tag{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink)}
.nilan-list{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.nilan-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.nilan-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:#F0A7B9}
.nilan-list li:nth-child(2)::before{background:#E8C86A}
.nilan-list li:nth-child(3)::before{background:#A9D3DE}
.nilan-list li:nth-child(4)::before{background:#C9A8D8}
.nilan-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}
.btn--nilan{background:var(--ink);color:#fff}
.btn--nilan:hover{background:var(--red);color:#fff}
@media (max-width:900px){.nilan-details__grid{grid-template-columns:1fr}}

/* closing quote */
.nilan-quote{position:relative;padding:clamp(52px,7vw,104px) 0;text-align:center;background:var(--bone)}
.nilan-quote .wrap{position:relative}
.nilan-quote__ribbon{display:block;width:46px;height:2px;margin:0 auto clamp(18px,2.4vw,28px);background:var(--red)}
.nilan-quote__t{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.2vw,42px);line-height:1.32;letter-spacing:.02em;color:var(--ink);max-width:22ch;margin-inline:auto;text-wrap:pretty}
.nilan-quote__s{margin-top:16px;font-size:14.5px;color:var(--gray)}

/* soften the shared related-products block on this page */
.page-nilan .journal__head .eyebrow{color:var(--red-ink)}
.page-nilan .product-card__txt .k{color:var(--red-ink)}

/* five slides in one thumb row on small screens (2026-10-29) */
@media (max-width:560px){.pdp--nilan .gallery__thumbs{gap:8px}.pdp--nilan .gallery__thumb{width:calc((100% - 32px)/5);padding:6px}}

/* numeric size run in the home fact panel (2026-10-29) */

/* ============================================================
   2026-10-30 · 审查改造 B：字体阶级 / 影像画框 / 霓澜骨架
   ============================================================ */

/* ---------- 1. 中文标题改用宋体（display 层），正文仍用黑体 ---------- */
html[data-lang="zh"]{
  --font-display:"Archivo","Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
}
html[data-lang="zh-Hant"]{
  --font-display:"Archivo","PingFang TC","Songti TC","Noto Serif TC",PMingLiU,serif;
}
html[data-lang="ja"]{
  --font-display:"Archivo","Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
html[data-lang="ko"]{
  --font-display:"Archivo","Nanum Myeongjo","Noto Serif KR","Malgun Gothic",serif;
}

/* 中文 display 级降到 600，字距 +0.02em，行高 1.34 —— 从「海报字」转向「品牌字」 */
html[data-lang="zh"] .display-xl,
html[data-lang="zh"] .display-l,
html[data-lang="zh"] .display-m,
html[data-lang="zh"] .display-s,
html[data-lang="zh"] .hero__title,
html[data-lang="zh-Hant"] .display-xl,
html[data-lang="zh-Hant"] .display-l,
html[data-lang="zh-Hant"] .display-m,
html[data-lang="zh-Hant"] .display-s,
html[data-lang="zh-Hant"] .hero__title,
html[data-lang="ja"] .display-xl,
html[data-lang="ja"] .display-l,
html[data-lang="ja"] .display-m,
html[data-lang="ja"] .display-s,
html[data-lang="ja"] .hero__title,
html[data-lang="ko"] .display-xl,
html[data-lang="ko"] .display-l,
html[data-lang="ko"] .display-m,
html[data-lang="ko"] .display-s,
html[data-lang="ko"] .hero__title{
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.34;
  text-transform:none;
}
/* Hero manifesto: two-line editorial lockup, not a poster block */
html[data-lang="zh"] .hero--cover .hero__title,
html[data-lang="zh-Hant"] .hero--cover .hero__title,
html[data-lang="ja"] .hero--cover .hero__title,
html[data-lang="ko"] .hero--cover .hero__title{
  font-weight:600;
  letter-spacing:.075em;
  line-height:1.1;
}
/* 小一级标题（卡片 / 区块）用同一族但更紧一档，避免整页都像标题 */
html[data-lang="zh"] .lcard__t,
html[data-lang="zh"] .jcard__txt .t,
html[data-lang="zh"] .product-card__txt .t,
html[data-lang="zh-Hant"] .lcard__t,
html[data-lang="zh-Hant"] .jcard__txt .t,
html[data-lang="zh-Hant"] .product-card__txt .t{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.45;
}

/* ---------- 2. 画廊画框：4:5 统一（视频只裁 6%，照片不出现白边） ---------- */
.gallery__main{aspect-ratio:4/5}
.gallery__main img{object-fit:cover;padding:0}
.gallery__video{object-fit:cover}
@media (max-width:1000px){
  .pdp__grid{grid-template-columns:1fr}
  .gallery{position:static}
  .gallery__main{aspect-ratio:1/1;max-height:none}
}
@media (max-width:560px){
  .gallery__main{aspect-ratio:4/5}
}

/* 缩略图为 5/7/8 张时也要排满一行，不留孤行 */
.gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:12px}
.gallery__thumb{width:auto}
@media (max-width:560px){.gallery__thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}

/* ---------- 3. 霓澜页：骨架回骨白，粉色只留 accent ---------- */
.page-nilan{background:var(--paper)}
.page-nilan .page-hero--bone{background:transparent}
.page-nilan .crumbs a,.page-nilan .crumbs span{color:var(--gray)}
.pdp--nilan .gallery__main{background:var(--bone);border-radius:18px;box-shadow:none}
.pdp--nilan .gallery__thumb{border-color:var(--line)}
.pdp--nilan .gallery__thumb.is-on{border-color:var(--ink)}
.pdp--nilan .gallery__count{background:rgba(255,255,255,.94);color:var(--ink)}
.pdp--nilan .gallery__sound{background:rgba(14,15,17,.62)}
.pdp--nilan .pdp__info .k{color:var(--red-ink)}
.pdp--nilan .pdp__info .display-m{color:var(--ink)}
.pdp--nilan .pdp__info .sub{color:var(--gray)}
.pdp--nilan .pdp__info .copy{color:var(--gray)}
.pdp--nilan .pdp__points li{color:var(--ink)}
.pdp--nilan .pdp__points li svg circle{fill:var(--red)}
.pdp--nilan .pdp__note{color:var(--gray-2)}
.pdp--nilan .spec-table__row{border-color:var(--line)}
.pdp--nilan .spec-table dt{color:var(--gray-2)}
.pdp--nilan .spec-table dd{color:var(--ink)}
.pdp--nilan .btn--solid{background:var(--ink)}
.pdp--nilan .btn--solid:hover{background:var(--red)}
.pdp--nilan .btn--outline{border-color:var(--ink);color:var(--ink)}
.pdp--nilan .btn--outline:hover{background:var(--ink);color:#fff}
.page-nilan .journal__head .eyebrow{color:var(--red-ink)}
.page-nilan .product-card__txt .k{color:var(--red-ink)}
.page-nilan .size-card{border-color:var(--line);background:#fff}
.page-nilan .size-card__k{color:var(--red-ink)}
.page-nilan .size-table thead th{border-bottom-color:var(--line)}
/* 保留一处粉色记忆点：星星说明区与语录带 */
.page-nilan .star-item{background:var(--bone)}

/* ---------- 4. 手机端：图片与文字块之间的硬接缝 ---------- */
@media (max-width:980px){
  .hero--cover .hero__media::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
    background:linear-gradient(180deg,rgba(14,42,68,0) 0%,rgba(14,42,68,.55) 62%,#0E2A44 100%);
    pointer-events:none;
  }
  .hero--cover .hero__content{background:#0E2A44;padding-top:clamp(26px,6vw,40px)}
}

/* ---------- 5. 装备页：6 列栅格，末行两张等宽收尾（1 通栏 + 3 + 2） ---------- */
@media (min-width:1001px){
  .product-grid--equipment{grid-template-columns:repeat(6,minmax(0,1fr))}
  .product-grid--equipment > .product-card{grid-column:span 2}
  .product-grid--equipment > .product-card--wide{grid-column:span 6}
  .product-grid--equipment > .product-card:nth-child(5),
  .product-grid--equipment > .product-card:nth-child(6){grid-column:span 3}
  .product-grid--equipment > .product-card:nth-child(5) .product-card__media,
  .product-grid--equipment > .product-card:nth-child(6) .product-card__media{aspect-ratio:16/9}
  .product-grid--equipment > .product-card--wide .product-card__media{aspect-ratio:1600/920}
}
@media (min-width:641px) and (max-width:1000px){
  .product-grid--equipment > .product-card:last-child{grid-column:span 2}
  .product-grid--equipment > .product-card:last-child .product-card__media{aspect-ratio:16/9}
}

/* 品类页：标题与筛选之间不留双份空 */
.page-hero--bone + .section{padding-top:clamp(26px,3.2vw,48px)}

/* ---------- 6. 装备页首屏：先给一张品类图，别让标题悬空 ---------- */
.page-hero--equipment{position:relative;padding:clamp(28px,3.2vw,54px) 0 0}
.page-hero--equipment .wrap{padding-bottom:clamp(18px,2.2vw,30px)}
.page-hero--equipment::after{content:none}
.page-hero--equipment + .section{padding-top:clamp(16px,2vw,26px)}

/* ---------- 7. 红色小字对比度：4.05 → 5.54 ---------- */
.eyebrow{color:var(--red-ink)}
.jcard__txt .k{color:var(--red-ink)}
.tagline,.filters__count{color:var(--gray-2)}

.intro__fact .n{font-variant-numeric:tabular-nums}
.intro__fact .n.is-range{font-size:clamp(24px,2vw,34px);white-space:nowrap;overflow:hidden;text-overflow:clip}
@media (max-width:420px){.intro__fact .n{font-size:clamp(24px,7vw,30px)}.intro__fact .n.is-range{font-size:clamp(15px,4vw,19px);letter-spacing:-.03em}}
html[data-lang="ja"] .intro__fact .n.is-range,html[data-lang="ko"] .intro__fact .n.is-range{font-family:var(--font-body);font-weight:800}
html[data-lang="ja"] .intro__fact .l,html[data-lang="ko"] .intro__fact .l{word-break:keep-all}
/* the numeric run is a fixed string: let the two columns shrink instead of
   pushing the grid wider than the viewport (Japanese labels are longest) */
.intro__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.intro__fact{min-width:0}
.intro__fact .l{overflow-wrap:anywhere}

/* ============================================================
   SIZE GUIDE (2026-10-29) — numeric charts for women / men
   ============================================================ */
.size-guide{padding-top:clamp(34px,4.4vw,64px)}
.size-guide__lead{max-width:46ch;margin:0;font-size:14.5px;line-height:1.7;color:var(--gray);text-wrap:pretty}
.size-guide__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);margin-top:clamp(26px,3.2vw,44px)}
.size-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:clamp(22px,2.6vw,34px)}
.size-card__head{display:flex;flex-direction:column;gap:6px}
.size-card__k{font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--red-ink)}
.size-card__t{margin:0;font-family:var(--font-display);font-size:clamp(19px,1.6vw,23px);font-weight:800;letter-spacing:-.01em}
.size-card__n{font-family:var(--font-display);font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.03em;color:var(--gray-2);font-variant-numeric:tabular-nums}
.size-card__n{margin:2px 0 0}
.size-table{width:100%;border-collapse:collapse;margin-top:clamp(18px,2vw,26px);font-variant-numeric:tabular-nums}
.size-table th,.size-table td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.size-table thead th{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);border-bottom-color:var(--ink)}
.size-table tbody th{font-family:var(--font-display);font-size:13.5px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.size-table td{color:var(--ink)}
.size-table tbody tr:last-child th,.size-table tbody tr:last-child td{border-bottom:0}
.size-guide__notes{margin-top:clamp(20px,2.4vw,30px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(20px,3vw,40px)}
.size-guide__notes p{margin:0;font-size:13px;line-height:1.7;color:var(--gray);text-wrap:pretty}
.size-guide__notes p::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:2px}
@media (max-width:900px){.size-guide__grid{grid-template-columns:1fr}.size-guide__notes{grid-template-columns:1fr}}
@media (max-width:560px){.size-card{padding:20px 18px;border-radius:14px}.size-table th,.size-table td{padding:10px 0;font-size:13.5px}}

/* Nilan page: keep the size guide in the blush palette */
.page-nilan .size-card{border-color:var(--line);background:#fff}
.page-nilan .size-card__k{color:var(--red-ink)}
.page-nilan .size-table thead th{border-bottom-color:var(--line)}

/* ============================================================
   BRAND LINE (2026-10-29) — 掌间优雅，挥杆自如。
   A quiet statement band directly under the home hero.
   ============================================================ */
.brandline{background:var(--ink);color:#fff;padding:clamp(30px,4.2vw,58px) 0;position:relative;overflow:hidden}
.brandline::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1240px,88%);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.brandline__in{display:flex;align-items:baseline;justify-content:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;text-align:center}
.brandline__t{font-family:var(--font-display);font-weight:800;font-size:clamp(21px,2.6vw,36px);line-height:1.25;letter-spacing:.04em;margin:0;color:#fff}
.brandline__s{font-family:var(--font-display);font-weight:600;font-size:clamp(12px,1.05vw,15px);line-height:1.5;letter-spacing:.2em;text-transform:uppercase;margin:0;color:rgba(255,255,255,.72)}
.brandline__in::before{content:"";flex:0 0 clamp(18px,3vw,44px);height:1px;background:var(--red);align-self:center;order:-1}
@media (max-width:760px){
  .brandline__in{flex-direction:column;align-items:center;gap:10px}
  .brandline__in::before{flex:0 0 1px;width:34px;height:1px;order:0;margin-bottom:4px}
  .brandline__s{letter-spacing:.14em;font-size:11.5px;max-width:32ch}
}

/* ---------- 8. 法务页 / 404 ---------- */
.legal{max-width:860px}
.legal__row{padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line)}
.legal__row:first-child{padding-top:0}
.legal__h{font-family:var(--font-display);font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.005em;margin:0 0 8px}
.legal__p{font-size:14.5px;line-height:1.75;color:var(--gray);margin:0;max-width:64ch}
html[data-lang="zh"] .legal__h,html[data-lang="zh-Hant"] .legal__h{font-family:var(--font-body);font-weight:700;letter-spacing:.01em}

/* ============================================================
   2026-10-30 修复：缩略图行数 / 触控目标
   ============================================================ */
/* 霓澜页 5 张：旧规则用 flex 百分比宽度算，进 grid 后会按「单个网格单元」的
   100% 再减 32px，缩略图被压成 14px。改为按张数显式声明列数。 */
.gallery__thumbs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.gallery__thumbs > .gallery__thumb{width:auto;min-width:0}
.gallery__thumbs--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gallery__thumbs--8{grid-template-columns:repeat(8,minmax(0,1fr))}
.pdp--nilan .gallery__thumb{width:auto}
.pdp--nilan .gallery__thumbs--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){
  .gallery__thumbs,.gallery__thumbs--8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gallery__thumbs--5,.pdp--nilan .gallery__thumbs--5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:560px){
  .gallery__thumbs,.gallery__thumbs--8{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .gallery__thumbs--5,.pdp--nilan .gallery__thumbs--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .gallery__thumb{padding:5px}
}
/* 移动端可点元素 ≥24px（面包屑 / 文字箭头 / 页脚法务） */
.crumbs a{min-height:24px;display:inline-flex;align-items:center;padding-block:2px}
.link-arrow{min-height:24px}
@media (max-width:900px){
  .footer__legal a{min-height:24px;display:inline-flex;align-items:center}
  .footer__locale button{min-height:28px}
  .nav__logo{min-height:44px}
}
/* 8 张缩略图（霍桑行者）：桌面一行排满，不再留孤行 */
.gallery__thumbs--8{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (max-width:1000px){
  .gallery__thumbs--8{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .gallery__thumbs--8{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================
   2026-10-30 · 首页减法 ①：品牌口号条并入首屏
   原来 hero / 品牌横带 / ticker 是三条相邻深色带；ticker 已删，
   这条改为首屏内部的收口条，页面从「三块深色」变成「一块深色 + 一条尾注」。
   ============================================================ */
.hero--cover .hero__brandline{
  position:relative;z-index:3;width:100%;
  padding:clamp(20px,2.4vw,32px) 0;
  background:linear-gradient(180deg,rgba(6,26,44,.34) 0%,rgba(6,24,40,.62) 100%);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-top:1px solid rgba(255,255,255,.14);
}
.hero--cover .hero__brandline .brandline__in{gap:clamp(12px,1.8vw,24px)}
.hero--cover .hero__brandline .brandline__t{font-size:clamp(17px,1.9vw,26px)}
.hero--cover .hero__brandline .brandline__s{font-size:clamp(10px,.82vw,12px);letter-spacing:.18em}
/* 收口条顶替了「继续下滑」的视觉暗示，去掉那枚小指示，避免压在新横带上 */
.hero--cover .hero__scroll{display:none}
@media (max-width:980px){
  .hero--cover .hero__brandline{background:linear-gradient(180deg,rgba(6,24,40,.5) 0%,rgba(6,24,40,.72) 100%)}
  .hero--cover .hero__brandline .brandline__in{flex-direction:column;align-items:center;gap:8px}
  .hero--cover .hero__brandline .brandline__t{font-size:18px;line-height:1.35}
  .hero--cover .hero__brandline .brandline__s{font-size:9.5px;letter-spacing:.1em;line-height:1.6;max-width:34ch;text-align:center;white-space:normal}
  .hero--cover .hero__content{padding-bottom:clamp(24px,5vw,32px)}
}
/* 中文语录已按语义显式断行（词典里带 <br>），这里禁止浏览器再在词内断行 */
html[data-lang="zh"] .nilan-quote__t,
html[data-lang="zh-Hant"] .nilan-quote__t,
html[data-lang="ja"] .nilan-quote__t{word-break:keep-all;overflow-wrap:normal;text-wrap:initial;line-break:strict}
/* 6 张缩略图（猎鹰人：1 影片 + 5 图）：桌面一行排满，不留空列 */
.gallery__thumbs--6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1000px){
  .gallery__thumbs--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .gallery__thumbs--6{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
/* ============================================================
   2026-10-30 · 手机 / 折叠屏适配
   背景：折叠屏展开后是「宽而矮」的近方形视口（673×841、741×854、
   700×830 …），宽高比 0.80–0.88，比 iPhone 的 0.46 宽近一倍。
   只按宽度写断点会把它当成平板，但交互层仍是手机（汉堡菜单、单列）。
   这里补的是「宽而矮」这类视口的行为。
   ============================================================ */

/* ---------- 1. 首屏：整块装进一屏（图自动吃掉剩余高度） ---------- */
/* 折叠屏展开是 673x841：宽度够放两栏，但操作仍是手机。之前两个毛病叠在一起：
   ① 图只按 vw 定高 → 673x244（2.76:1），竖图被横裁，脸和手套都没了；
   ② 改成按比例定高后 → 图 521 + 文案 408 + 口号条 117 + 导航 77 = 1123，
      比视口高 282，口号条整条掉出首屏。
   最终解法不再猜高度，而是让首屏自己就是一屏：
   容器高度 = 视口高 - 导航高，内部用 flex 让图片吃掉剩余空间。 */
@media (max-width:980px){
  .hero--cover{
    display:flex;flex-direction:column;
    min-height:0;
    --navbox:77px;                 /* 与 .nav__in 实际高度一致（含 44px 图标按钮） */
    height:calc(100svh - var(--navbox));
    height:calc(100dvh - var(--navbox));
    max-height:920px;
  }
  .hero--cover .hero__media{
    position:relative;inset:auto;order:-1;
    flex:1 1 auto;min-height:150px;height:auto;max-height:none;
    aspect-ratio:auto;
  }
  .hero--cover .hero__media img{height:100%;width:100%;object-position:50% 24%}
  .hero--cover .hero__content{flex:0 0 auto;padding-top:clamp(18px,4vw,30px);padding-bottom:clamp(16px,3.4vw,26px)}
  .hero--cover .hero__brandline{flex:0 0 auto}
}
/* 竖屏窄机：取景偏上，保住脸 */
@media (max-width:420px){
  .hero--cover .hero__media img{object-position:50% 20%}
  /* 320–344px（折叠外屏最窄档）原来两个按钮各自整行、高 65px，显得笨重；
     改成等宽两列一行，文字自动缩一档，仍保证 44px 触控高度。 */
  .hero--cover .hero__actions{flex-wrap:nowrap;gap:10px}
  .hero--cover .hero__actions .btn{flex:1 1 0;min-width:0;padding-inline:10px;
    font-size:12.5px;letter-spacing:.04em;white-space:nowrap;height:52px}
}
/* 展开态 / 小平板：横向取景，脸偏中上 */
@media (min-width:561px) and (max-width:980px){
  .hero--cover .hero__media img{object-position:50% 30%}
  .hero--cover .hero__title{font-size:clamp(36px,6.6vw,56px)}
  .hero--cover .hero__lead{max-width:40ch}
}
/* 矮视口（横屏手机 / 分屏）：标题与留白同时收紧 */
@media (max-height:560px) and (max-width:1000px){
  .hero--cover{height:auto;max-height:none}
  .hero--cover .hero__media{flex:0 0 auto;height:min(46svh,240px)}
  .hero--cover .hero__content{padding-top:12px;padding-bottom:12px}
  .hero--cover .hero__brandline{padding:10px 0 12px}
  .hero--cover .hero__title{font-size:clamp(28px,6vw,40px)}
  .hero--cover .hero__lead{margin-top:10px;font-size:13px}
  .hero--cover .hero__actions{margin-top:14px}
}
/* 极矮视口：干脆让首屏自然流式，别硬塞 */
@media (max-height:430px) and (max-width:1000px){
  .hero--cover{height:auto}
  .hero--cover .hero__media{height:200px}
}


/* ---------- 2. 详情页：展开态用「左图右文」两栏，别再单列拉满 ---------- */
/* 673px 下单列时画廊 619x619，一张图吃掉近乎整屏，用户要滑很久才看到
   标题与规格。折叠屏展开后宽度够放两栏，这里恢复双栏并限制画廊宽度。 */
@media (min-width:600px) and (max-width:1000px){
  .pdp__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(20px,3.2vw,40px);
    align-items:start;
  }
  .gallery{position:static}
  .gallery__main{
    aspect-ratio:4/5;
    max-width:100%;
    max-height:min(62vh,560px);
    max-height:min(62dvh,560px);
  }
  .gallery__main img{object-fit:cover;padding:0}
  .gallery__thumbs{max-width:100%}
  .pdp__info h1{font-size:clamp(28px,3.4vw,40px);line-height:1.16}
  .pdp__info .display-m{font-size:clamp(26px,3.2vw,38px)}
  .pdp__info .lead,.pdp__info .copy{font-size:14.5px}
  .spec-table dt{font-size:11px}
  .spec-table dd{font-size:13.5px}
}
@media (max-width:599px){
  .gallery__main{max-height:none}
}

/* ---------- 3. 展开态：把多出来的宽度用掉，画面不要「大一号的手机」 ---------- */
/* 546–1000px：产品网格 2 列（原来 673px 下是 2 列但卡太大，这里只限制单卡宽度） */
@media (min-width:600px) and (max-width:1000px){
  .product-grid{align-items:start}
  .product-card__media{max-height:420px}
  /* 装备页通栏卡在展开态改成「左图右文」，避免一张图吃掉整屏 */
  .product-grid--equipment .product-card--wide{
    display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
  }
  .product-grid--equipment .product-card--wide .product-card__media{
    aspect-ratio:4/3;min-height:0;max-height:none;
  }
  .product-grid--equipment .product-card--wide .product-card__txt{
    border-top:0;border-left:1px solid var(--line);border-radius:0 18px 18px 0;
    padding:clamp(20px,3vw,32px);justify-content:center;
  }
}

/* ---------- 4. 分类卡 / 产品线：展开态 2 列时不要出现孤行 ---------- */
@media (min-width:561px) and (max-width:980px){
  .catbar__grid .catcard:nth-child(3){grid-column:1/-1;aspect-ratio:2.2/1}
}

/* ---------- 5. 折叠屏的「铰链安全区」 ---------- */
/* 展开态左右各有一条几毫米的铰链/折痕，贴边文字容易被折进去。
   用 env(safe-area-inset-*) 兜住，浏览器不支持时自动为 0。 */
@media (max-width:1000px){
  .wrap{padding-left:max(var(--pad-x),env(safe-area-inset-left));
        padding-right:max(var(--pad-x),env(safe-area-inset-right))}
  .nav__in{padding-left:max(var(--pad-x),env(safe-area-inset-left));
           padding-right:max(var(--pad-x),env(safe-area-inset-right))}
}