/* ==========================================================================
   GrittGear — Exaggerated Minimalism
   Oversized type, extreme whitespace, black/white + one accent.
   ========================================================================== */

:root{
  --ink:        #0A0A0A;
  --ink-soft:   #52525B;
  --paper:      #FFFFFF;
  --paper-2:    #F4F4F5;
  --rule:       #E4E4E7;

  --night:      #0A0A0A;
  --night-2:    #141417;
  --night-fg:   #FFFFFF;
  --night-soft: #A1A1AA;
  --night-rule: rgba(255,255,255,.16);

  --accent:     #2563EB;
  --accent-hi:  #1D4ED8;
  --accent-lo:  #A9C3FC;
  --on-accent:  #FFFFFF;
  --life:       #F0B429;

  --ff: "Rubik", system-ui, sans-serif;
  --ff-body: "Assistant", system-ui, sans-serif;

  /* Extreme spacing, per the style spec */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:40px; --s7:64px; --s8:104px; --s9:160px;

  --wrap:1320px;
  --head:72px;
  --ease:cubic-bezier(.16,.84,.3,1);
  --tshadow:0 2px 4px rgba(0,0,0,.6), 0 8px 40px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;overflow-x:clip;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* height:auto matters. Every <img> here carries width/height attributes to
   reserve space and avoid layout shift, but those attributes also supply a used
   height. Where CSS sets only width, both dimensions end up definite, any
   aspect-ratio is ignored, and object-fit:cover silently crops the difference —
   which is what was slicing the sides off the collection photos. */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
p{margin:0;}
button{font-family:inherit;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
section[id]{scroll-margin-top:calc(var(--head) + 8px);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{
  position:absolute;top:-70px;inset-inline-end:var(--s6);z-index:500;
  background:var(--accent);color:#fff;padding:14px 22px;font-weight:700;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:0;}

/* ---------- The oversized type system ---------- */
.display{
  font-family:var(--ff);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:.88;
  text-wrap:balance;
  margin:0;
}
.d-giant{font-size:clamp(56px, 13vw, 190px);}
.d-huge {font-size:clamp(44px, 8.5vw, 128px);}
.d-big  {font-size:clamp(34px, 5.4vw, 78px);}
.d-mid  {font-size:clamp(26px, 3.2vw, 46px);}

.kicker{
  font-family:var(--ff);font-weight:700;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}
.on-night .kicker{color:var(--accent-lo);}
/* Over live photography the blue accent is unreadable, so the hero label
   gets a near-white tint instead. Measured, not guessed. */
.hero .kicker{color:#E4EBFF;}
.lede{font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:var(--ink-soft);max-width:56ch;}
.on-night .lede{color:var(--night-soft);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 var(--s6);
  font-family:var(--ff);font-size:15px;font-weight:700;letter-spacing:.02em;
  border:2px solid transparent;border-radius:0;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .1s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn-fill{background:var(--accent);color:var(--on-accent);}
.btn-fill:hover{background:var(--accent-hi);}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-line:hover{background:var(--ink);color:var(--paper);}
.btn-onnight{background:rgba(10,10,10,.42);color:#fff;border-color:rgba(255,255,255,.6);}
.btn-onnight:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* ---------- Header ---------- */
.head{
  position:sticky;top:0;z-index:100;height:var(--head);
  background:rgba(10,10,10,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--night-rule);
}
.head-in{display:flex;align-items:center;gap:var(--s6);height:var(--head);}
.mark{display:flex;align-items:center;flex-shrink:0;}
.mark img{width:38px;height:38px;}
.nav{display:flex;align-items:center;gap:var(--s6);flex:1;}
.nav a{
  position:relative;font-family:var(--ff);font-weight:600;font-size:14px;
  letter-spacing:.02em;color:var(--night-soft);padding:6px 0;
  transition:color .15s var(--ease);
}
.nav a:hover,.nav a.on{color:#fff;}
.nav a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease);
}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);}
/* Header call to action: sharp, inverts on hover, arrow nudges forward */
.nav-cta{
  margin-inline-start:auto;
  min-height:44px;padding:0 var(--s5);
  font-size:13px;letter-spacing:.06em;gap:7px;
  border:2px solid var(--accent);
  box-shadow:0 6px 20px -8px rgba(37,99,235,.75);
}
/* .nav a sets a grey link colour and an underline bar; both must be
   beaten here or the filled button renders grey-on-blue. */
.nav a.nav-cta{color:#fff;}
.nav a.nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none;}
.nav a.nav-cta::after{display:none;}
.nav-cta svg{width:13px;height:13px;transition:transform .25s var(--ease);}
.nav-cta:hover svg{transform:translateX(-4px);}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 10px;}
.burger span{display:block;height:2px;background:#fff;}

/* ==========================================================================
   Hero — the photo roulette IS the product showcase
   ========================================================================== */
.hero{position:relative;min-height:calc(100svh - var(--head));background:var(--night);overflow:hidden;}
.hero-stack{position:absolute;inset:0;z-index:0;}
.shot{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.1s var(--ease);
}
.shot.on{opacity:1;}
.shot img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 7s linear;
}
.shot.on img{transform:scale(1.14);}

/* --- Brand slide: the wordmark is painted on the shutter, so it must survive
   the crop. Two things were eating it: object-fit:cover trims the sides, and
   the Ken Burns push trims another ~7% per side on top. Any zoom at all
   re-crops, and a slow pull-back can't work either — the move would outlast the
   5.2s slide dwell, so the wordmark would never actually arrive. This slide
   therefore holds at scale 1 and anchors to the left, where the copy column
   isn't. Its motion comes from the light sweep instead, which cannot clip. --- */
.shot.brand img{
  object-position:0% 50%;
  transform:none;
  transition:none;
}
.shot.brand.on img{transform:none;}
/* Same threshold as the <picture> source. The portrait file carries the
   wordmark at the top, so it anchors to the top rather than the middle. */
@media (max-aspect-ratio:5/6){
  .shot.brand img{object-position:0% 0%;}
}

/* Light sweep — a work light passing over the shutter. Sits above the photo but
   below the veil and the copy, and moves nothing, so it can never re-crop the
   wordmark. Only runs while the brand slide is showing. */
.shot .sweep{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,
    transparent 38%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.05) 54%, transparent 62%);
  transform:translateX(-125%);
}
.shot.brand.on .sweep{animation:sweep 7.5s cubic-bezier(.45,0,.5,1) 1s infinite;}
@keyframes sweep{
  0%{transform:translateX(-125%);}
  45%,100%{transform:translateX(125%);}
}

/* ---------- Premium: three concrete specs ---------- */
.prem-specs{
  list-style:none;margin:var(--s8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);
  border-top:1px solid var(--night-rule);padding-top:var(--s7);
}
.prem-specs b{
  display:block;font-family:var(--ff);font-weight:900;
  font-size:clamp(30px,3.4vw,50px);letter-spacing:-.03em;line-height:1;
  color:var(--accent-lo);
}
.prem-specs h3{font-family:var(--ff);font-size:19px;font-weight:700;margin:var(--s4) 0 var(--s3);color:#fff;}
.prem-specs p{color:var(--night-soft);font-size:16px;line-height:1.6;}
@media (max-width:900px){ .prem-specs{grid-template-columns:1fr;gap:var(--s6);} }

/* ---------- Insole feature ---------- */
.insole{padding:var(--s9) 0;background:var(--paper-2);}
.insole-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;}
.insole-facts{
  list-style:none;margin:var(--s7) 0 0;padding:0;
  display:grid;gap:var(--s5);
}
.insole-facts li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:baseline;
  padding-top:var(--s4);border-top:1px solid var(--rule);
}
.insole-facts b{
  font-family:var(--ff);font-weight:800;font-size:16px;color:var(--ink);
  white-space:nowrap;
}
.insole-facts span{color:var(--ink-soft);font-size:15px;line-height:1.6;}
/* Two shots that cross-fade, so the second angle is a reward for looking
   rather than another tile competing for space. */
.insole-media{position:relative;margin:0;}
.insole-media img{
  width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper-2);
  transition:opacity .6s var(--ease);
}
.insole-media .insole-alt{position:absolute;inset:0;height:100%;opacity:0;}
@media (hover:hover) and (pointer:fine){
  .insole-media:hover .insole-alt{opacity:1;}
}
@media (prefers-reduced-motion:reduce){ .insole-media .insole-alt{display:none;} }
body.still .insole-media .insole-alt{display:none;}
@media (max-width:1000px){
  .insole-grid{grid-template-columns:1fr;gap:var(--s7);}
  .insole-media{order:-1;}
}

/* ---------- Name ticker under the hero ---------- */
.ticker{
  background:var(--night);overflow:hidden;
  border-bottom:1px solid var(--night-rule);
  padding:clamp(14px,1.8vw,24px) 0;
}
/* Latin model names, so the run reads left-to-right inside the RTL page. */
.ticker-track{display:flex;width:max-content;direction:ltr;animation:tick 34s linear infinite;}
.ticker-run{display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px);}
.ticker-run b{
  font-family:var(--ff);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,50px);letter-spacing:-.005em;line-height:1;
  color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.44);
}
.ticker-run i{width:9px;height:9px;flex:none;background:var(--accent);transform:rotate(45deg);}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/* text-stroke is unsupported in a few engines and would render invisible text. */
@supports not (-webkit-text-stroke:1px red){
  .ticker-run b{color:rgba(255,255,255,.44);}
}
body.hi .ticker-run b{color:#fff;-webkit-text-stroke:0;}

.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(6,6,8,.62) 0%, rgba(6,6,8,.30) 34%, rgba(6,6,8,.86) 100%),
    linear-gradient(to left, rgba(6,6,8,.70) 0%, rgba(6,6,8,.06) 62%);
}
/* The brand slide keeps the painted wordmark in the top band, so that band is
   lifted. The copy side stays as dark as before — the second gradient below is
   unchanged, and it is what the headline and kicker sit on. */
.hero:has(.shot.brand.on) .hero-veil{
  background:
    linear-gradient(to bottom, rgba(6,6,8,.30) 0%, rgba(6,6,8,.26) 34%, rgba(6,6,8,.86) 100%),
    linear-gradient(to left, rgba(6,6,8,.70) 0%, rgba(6,6,8,.06) 62%);
}
.hero-in{
  position:relative;z-index:2;
  min-height:calc(100svh - var(--head));
  display:grid;grid-template-rows:1fr auto;
  padding-top:var(--s8);padding-bottom:var(--s6);
  color:#fff;text-shadow:var(--tshadow);
}
.hero-copy{align-self:center;max-width:20ch;}
.hero-copy .kicker{display:block;margin-bottom:var(--s5);}
.hero-name{
  display:block;color:#fff;
  min-height:.9em;
}
.hero-sub{margin-top:var(--s5);font-size:clamp(17px,1.6vw,21px);color:#E8E8EC;max-width:46ch;}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6);}
.hero-cta .btn{text-shadow:none;}

/* Roulette controls — keyboard equivalent + pause, per the carousel rules */
.roulette{
  display:flex;align-items:center;gap:var(--s4);
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.22);
}
.ticks{display:flex;gap:6px;flex:1;}
.tick{
  position:relative;height:3px;flex:1;max-width:64px;
  background:rgba(255,255,255,.28);border:0;padding:0;cursor:pointer;
  transition:background .2s var(--ease);
}
.tick:hover{background:rgba(255,255,255,.55);}
.tick[aria-current="true"]{background:var(--accent);}
.tick::after{content:"";position:absolute;inset:-12px -3px;}
.r-btn{
  width:44px;height:44px;flex-shrink:0;
  background:rgba(10,10,10,.4);border:1px solid rgba(255,255,255,.4);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.r-btn:hover{background:#fff;color:var(--ink);border-color:#fff;}
.r-btn svg{width:18px;height:18px;}

/* ==========================================================================
   Statement band
   ========================================================================== */
.statement{background:var(--paper);padding:var(--s8) 0;}
.statement .display{max-width:16ch;}
.statement-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:end;}
.statement-grid .lede{padding-bottom:.4em;}
.big-figure{
  font-family:var(--ff);font-weight:900;letter-spacing:-.06em;line-height:.8;
  font-size:clamp(120px,20vw,300px);color:var(--accent);
}
.figure-note{font-family:var(--ff);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:var(--s4);}

/* ==========================================================================
   The range — editorial rows, not a card grid
   ========================================================================== */
.range{background:var(--paper);padding:0 0 var(--s9);}
.range-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s7);}

.model{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:var(--s7);
  padding:var(--s8) 0;border-top:1px solid var(--rule);
  position:relative;
}
.model:nth-child(even) .model-media{order:2;}
.model-media{position:relative;}
.model-media img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper);}
.model-body{min-width:0;}
.model-name{
  font-family:var(--ff);font-weight:900;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(44px,7vw,104px);
  margin:0 0 var(--s4);
}
.model-line{font-size:clamp(18px,1.8vw,24px);color:var(--ink-soft);max-width:40ch;}
.model-meta{display:flex;gap:var(--s5);flex-wrap:wrap;margin:var(--s6) 0;}
.meta{border-top:2px solid var(--ink);padding-top:var(--s2);min-width:120px;}
.meta dt{font-family:var(--ff);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.meta dd{margin:2px 0 0;font-family:var(--ff);font-weight:700;font-size:17px;}
.model-link{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--ff);font-weight:700;font-size:15px;color:var(--ink);
  border-bottom:2px solid var(--accent);
  transition:gap .2s var(--ease),color .2s var(--ease);
}
.model-link:hover{gap:18px;color:var(--accent);}
.model[hidden]{display:none;}

.chip-row{display:flex;gap:var(--s3);flex-wrap:wrap;}
.chip{
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--ff);font-weight:700;font-size:13px;letter-spacing:.04em;
  padding:11px 22px;min-height:44px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.chip:hover{background:var(--paper-2);}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

.badge{
  display:inline-block;font-family:var(--ff);font-weight:700;
  font-size:12px;letter-spacing:.08em;padding:6px 12px;
}
.badge-s3{background:var(--accent);color:#fff;}
.badge-life{background:var(--life);color:#2B1D05;}

/* ==========================================================================
   Night sections
   ========================================================================== */
.night{background:var(--night);color:var(--night-fg);padding:var(--s9) 0;}
.night-2{background:var(--night-2);}
.rule-list{border-top:1px solid var(--night-rule);margin-top:var(--s7);}
.rule-row{
  display:grid;grid-template-columns:auto 1fr 2fr;gap:var(--s6);
  padding:var(--s6) 0;border-bottom:1px solid var(--night-rule);
  align-items:baseline;
}
.rule-row b{font-family:var(--ff);font-weight:900;font-size:15px;color:var(--accent-lo);letter-spacing:.06em;}
.rule-row h3{font-family:var(--ff);font-weight:800;font-size:clamp(19px,2vw,26px);margin:0;letter-spacing:-.02em;}
.rule-row p{color:var(--night-soft);font-size:16px;}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);}
.phone-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--night-rule);
  transition:padding-inline-start .2s var(--ease);
}
.phone-row:hover{padding-inline-start:var(--s3);}
.phone-row b{font-family:var(--ff);font-weight:800;font-size:20px;}
.phone-row span{font-family:var(--ff);font-weight:700;font-size:clamp(20px,2.4vw,30px);color:var(--accent-lo);direction:ltr;letter-spacing:-.02em;}

form{display:grid;gap:var(--s4);}
.field{display:grid;gap:8px;}
.field label{font-family:var(--ff);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--night-soft);}
.field input,.field textarea{
  width:100%;padding:15px 0;background:transparent;color:#fff;
  border:0;border-bottom:2px solid var(--night-rule);border-radius:0;
  font-family:var(--ff-body);font-size:17px;resize:vertical;
  transition:border-color .16s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#71717A;}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent-lo);}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}
.note{font-family:var(--ff);font-weight:700;font-size:15px;color:var(--accent-lo);min-height:22px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--night);color:var(--night-soft);padding:var(--s8) 0 var(--s6);border-top:1px solid var(--night-rule);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s7);margin-bottom:var(--s7);}
.foot img{width:46px;height:46px;margin-bottom:var(--s4);}
.foot h4{font-family:var(--ff);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 var(--s4);}
.foot-links{display:grid;gap:var(--s3);}
.foot-links a{font-size:16px;transition:color .15s var(--ease);}
.foot-links a:hover{color:#fff;}
.foot-bottom{border-top:1px solid var(--night-rule);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:14px;}

/* ==========================================================================
   Product + guide pages
   ========================================================================== */
.page-top{background:var(--night);color:#fff;padding:calc(var(--head) + var(--s8)) 0 var(--s8);}
.detail{padding:var(--s8) 0 var(--s9);}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--ff);font-weight:700;font-size:14px;color:var(--ink-soft);transition:gap .2s var(--ease),color .2s var(--ease);}
.back:hover{gap:16px;color:var(--accent);}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start;margin-top:var(--s6);}
.detail-media{position:relative;background:var(--paper-2);aspect-ratio:1;overflow:hidden;}
.detail-media img{width:100%;height:100%;object-fit:cover;transition:opacity .2s var(--ease);}
.detail-media img.fade{opacity:0;}
.detail-media .badge{position:absolute;top:var(--s5);inset-inline-start:var(--s5);}
.swatches{display:flex;gap:var(--s3);margin-top:var(--s3);}
.swatch{width:54px;height:54px;background:var(--c);border:2px solid var(--rule);cursor:pointer;padding:0;transition:transform .15s var(--ease),border-color .15s var(--ease);}
.swatch:hover{transform:translateY(-3px);}
.swatch[aria-pressed="true"]{border-color:var(--accent);}
.spec-list{border-top:2px solid var(--ink);margin-top:var(--s6);}
.spec-list li{padding:var(--s4) 0;border-bottom:1px solid var(--rule);font-size:16px;}
.related{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5);}
.rel-card img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper);transition:opacity .2s var(--ease);}
.rel-card:hover img{opacity:.82;}
.rel-card b{display:block;font-family:var(--ff);font-weight:800;font-size:19px;margin-top:var(--s3);}

.table-wrap{overflow-x:auto;border-top:2px solid var(--ink);}
table{width:100%;border-collapse:collapse;min-width:700px;}
th,td{padding:var(--s5) var(--s4);text-align:start;font-size:16px;border-bottom:1px solid var(--rule);}
thead th{font-family:var(--ff);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
tbody th{font-family:var(--ff);font-weight:800;font-size:20px;}
tbody tr:hover{background:var(--paper-2);}
td a,th a{color:inherit;}

/* ==========================================================================
   Floating controls + accessibility
   ========================================================================== */
.bar{position:fixed;top:0;inset-inline:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:right;z-index:300;transition:transform .1s linear;}
.fabs{position:fixed;z-index:150;bottom:var(--s5);inset-inline-end:var(--s5);display:flex;flex-direction:column;gap:var(--s3);}
.fab{width:54px;height:54px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);transition:filter .15s var(--ease),opacity .25s var(--ease),transform .25s var(--ease);}
.fab:hover{filter:brightness(1.12);}
.fab svg{width:25px;height:25px;}
.fab-wa{background:#25D366;}
.fab-a11y{background:var(--accent);}
.fab-top{background:var(--ink);opacity:0;pointer-events:none;transform:translateY(10px);}
.fab-top.show{opacity:1;pointer-events:auto;transform:none;}

.a11y{position:fixed;z-index:160;bottom:calc(var(--s5) + 62px);inset-inline-end:var(--s5);width:256px;background:var(--night);border:1px solid var(--night-rule);padding:var(--s4);display:grid;gap:var(--s2);box-shadow:0 26px 60px -18px rgba(0,0,0,.65);}
.a11y[hidden]{display:none;}
.a11y h4{font-family:var(--ff);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 var(--s2);}
.a11y button{background:rgba(255,255,255,.06);border:1px solid var(--night-rule);color:#fff;padding:12px var(--s4);font-family:var(--ff);font-weight:600;font-size:15px;text-align:start;cursor:pointer;min-height:44px;transition:background .15s var(--ease);}
.a11y button:hover{background:rgba(255,255,255,.14);}
.a11y button.reset{color:var(--accent-lo);border-color:var(--accent-lo);}

body.big-1{font-size:19px;}
body.big-2{font-size:21px;}
body.links a{text-decoration:underline !important;text-underline-offset:4px;}
body.still *{animation:none !important;transition:none !important;}
body.still .rise{opacity:1 !important;transform:none !important;}
body.hi{
  --paper:#000;--paper-2:#0A0A0A;--rule:#FFF;--ink:#FFF;--ink-soft:#F0F0F0;
  --night:#000;--night-2:#000;--night-fg:#FFF;--night-soft:#F0F0F0;--night-rule:#FFF;
  --accent:#FFD60A;--accent-hi:#E6C009;--accent-lo:#FFD60A;--on-accent:#000;--life:#FFD60A;
  background:#000;color:#fff;
}
body.hi .badge-s3,body.hi .btn-fill,body.hi .chip[aria-pressed="true"]{color:#000 !important;}
body.hi .hero-veil{background:rgba(0,0,0,.84) !important;}

/* ---------- Reveal ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rise.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .model{grid-template-columns:1fr;gap:var(--s6);}
  .model:nth-child(even) .model-media{order:0;}
  .contact-split,.detail-grid{grid-template-columns:1fr;gap:var(--s7);}
  .related{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .rule-row{grid-template-columns:auto 1fr;}
  .rule-row p{grid-column:2;}
  .statement-grid{grid-template-columns:1fr;align-items:start;}
}
@media (max-width:860px){
  .nav{display:none;position:absolute;top:var(--head);inset-inline:0;flex-direction:column;align-items:flex-start;gap:var(--s4);background:var(--night);border-bottom:1px solid var(--night-rule);padding:var(--s5) var(--s6) var(--s6);}
  .head.open .nav{display:flex;}
  .head.open .nav-cta{margin:var(--s2) 0 0;}
  .burger{display:flex;margin-inline-start:auto;}
}
@media (max-width:620px){
  :root{--s9:96px;--s8:64px;--s7:44px;--s6:24px;}
  .related{grid-template-columns:repeat(2,1fr);}
  .field-2{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .hero-copy{max-width:100%;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .rise{opacity:1;transform:none;}
  .shot img{transform:none !important;}
}


/* ---------- Premium pair + badge ---------- */
/* On the light range rows, so it uses the full-strength accent.
   The soft tint is for dark panels only. */
.badge-prem{
  background:transparent;color:var(--accent);
  border:1px solid var(--accent);
}
.on-night .badge-prem{color:var(--accent-lo);border-color:var(--accent-lo);}
.premium-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
  margin-top:var(--s8);
}
.premium-pair > a{display:block;}
.premium-pair img{
  width:100%;aspect-ratio:1;object-fit:cover;
  background:var(--night-2);border:1px solid var(--night-rule);
  transition:transform .5s var(--ease),border-color .25s var(--ease);
}
.premium-pair > a:hover img{transform:scale(1.02);border-color:rgba(255,255,255,.5);}
.pp-cap{
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s4);margin-top:var(--s4);
  border-top:2px solid #fff;
}
.pp-cap b{
  font-family:var(--ff);font-weight:900;
  font-size:clamp(24px,3vw,40px);letter-spacing:-.03em;color:#fff;
}
.pp-cap span{font-size:15px;color:var(--night-soft);}
@media (max-width:760px){
  .premium-pair{grid-template-columns:1fr;gap:var(--s6);}
}

/* ---------- Macro detail grid ---------- */
.detail-grid-4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
  margin-top:var(--s8);
}
.detail-grid-4 figure{margin:0;}
.detail-grid-4 img{
  width:100%;aspect-ratio:555/768;object-fit:cover;
  background:var(--night-2);border:1px solid var(--night-rule);
  transition:border-color .25s var(--ease);
}
.detail-grid-4 figure:hover img{border-color:rgba(255,255,255,.45);}
.detail-grid-4 figcaption{
  padding-top:var(--s4);margin-top:var(--s4);
  border-top:2px solid var(--accent);
}
.detail-grid-4 figcaption b{
  display:block;font-family:var(--ff);font-weight:800;
  font-size:19px;letter-spacing:-.01em;color:#fff;
}
.detail-grid-4 figcaption span{
  display:block;margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--night-soft);
}
@media (max-width:1000px){ .detail-grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .detail-grid-4{grid-template-columns:1fr;gap:var(--s6);} }

/* ---------- Full-bleed photo band ---------- */
.bleed-photo{
  margin:0;
  background:var(--night);
  overflow:hidden;
}
.bleed-photo img{
  width:100%;
  height:clamp(280px, 46vw, 620px);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ---------- Product gallery thumbnails ---------- */
.thumbs{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2);
  margin-top:var(--s3);
}
.thumb{
  padding:0;border:2px solid var(--rule);background:var(--paper-2);
  cursor:pointer;overflow:hidden;line-height:0;
  transition:border-color .18s var(--ease);
}
.thumb img{width:100%;aspect-ratio:1;object-fit:contain;}
.thumb:hover{border-color:var(--ink-soft);}
.thumb[aria-pressed="true"]{border-color:var(--accent);}
.swatch-label{
  margin-top:var(--s6);font-family:var(--ff);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.swatch-label b{color:var(--ink);}
body.hi .thumb[aria-pressed="true"]{border-color:var(--accent);}
@media (max-width:560px){ .thumbs{grid-template-columns:repeat(3,1fr);} }

/* ---------- Model row: linger on the photo to reveal the sole ----------
   Deliberately not instant. Brushing past the photo on the way down the page
   should not flip it. The hint tag comes up straight away as the invitation,
   the sole only crossfades in once the pointer has settled for a moment.
   Leaving is the reverse: no delay, so the shoe snaps back immediately. */
.model-media{position:relative;overflow:hidden;}
.model-media > img{transition:opacity .5s var(--ease), transform .7s var(--ease);}
.model-media .alt-shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:inherit;opacity:0;
  transition:opacity .3s var(--ease) 0s;
}
.shot-hint{
  position:absolute;bottom:var(--s4);inset-inline-start:var(--s4);
  font-family:var(--ff);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
  background:var(--ink);color:#fff;padding:7px 13px;
  opacity:0;transform:translateY(6px);
  transition:opacity .2s var(--ease) 0s, transform .2s var(--ease) 0s;
  pointer-events:none;
}
/* hover only where a real pointer exists, so touch never gets stuck mid-swap.
   Scoped to the photo itself, not the whole row — hovering the copy column
   should leave the shoe alone. */
@media (hover:hover) and (pointer:fine){
  .model-media:hover .alt-shot{
    opacity:1;
    transition:opacity .75s var(--ease) .55s;
  }
  .model-media:hover .shot-hint{
    opacity:1;transform:translateY(0);
    transition:opacity .3s var(--ease) .1s, transform .3s var(--ease) .1s;
  }
}
@media (prefers-reduced-motion:reduce){
  .model-media .alt-shot{display:none;}
  .shot-hint{display:none;}
}
body.still .model-media .alt-shot{display:none;}
body.still .shot-hint{display:none;}

/* The global rules above already kill these, but the ticker parks mid-loop and
   the sweep parks off-frame, so both are pinned explicitly. */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none !important;transform:none !important;}
  .shot .sweep{display:none;}
}
body.still .ticker-track{animation:none !important;transform:none !important;}
body.still .shot .sweep{display:none;}

/* ---------- Clickable model photo ---------- */
/* Redundant click target for the row's existing "לדגם המלא" link. Not tabbable
   and hidden from assistive tech so the same destination isn't offered twice. */
.model-shot{display:block;cursor:pointer;}
.model-shot:focus{outline:none;}

/* ---------- First-order discount dialog ---------- */
.offer{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:var(--s5);}
.offer[hidden]{display:none;}
.offer-back{position:absolute;inset:0;background:rgba(6,6,8,.72);opacity:0;transition:opacity .26s var(--ease);}
.offer.in .offer-back{opacity:1;}
.offer-card{
  position:relative;width:min(520px,100%);
  background:var(--paper);color:var(--ink);
  padding:var(--s7) var(--s6) var(--s6);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.offer.in .offer-card{opacity:1;transform:none;}
.offer-x{
  position:absolute;top:8px;inset-inline-end:8px;
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--ink-soft);
}
.offer-x:hover{color:var(--ink);}
.offer-x svg{width:20px;height:20px;}
.offer-card h2{margin:var(--s4) 0 var(--s4);}
.offer-card p{color:var(--ink-soft);}
.offer-form{display:grid;gap:var(--s3);margin-top:var(--s5);}
.offer-form input[type="email"]{
  width:100%;min-height:56px;padding:0 var(--s4);
  font-family:inherit;font-size:16px;      /* 16px stops iOS zooming on focus */
  background:var(--paper-2);color:var(--ink);
  border:2px solid var(--rule);border-radius:0;
}
.offer-form input[type="email"]:focus{outline:none;border-color:var(--accent);}
.offer-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.offer-err{color:#B91C1C;font-size:14px;}
.offer-fine{margin-top:var(--s4);font-size:13px;color:var(--ink-soft);}
.offer-done{text-align:center;}
.offer-done h2{letter-spacing:.04em;color:var(--accent);}
.offer-done .btn{margin-top:var(--s5);}
body.hi .offer-card{border:3px solid var(--ink);}
@media (prefers-reduced-motion:reduce){
  .offer-back,.offer-card{transition:none;}
  .offer-card{opacity:1;transform:none;}
}
body.still .offer-back,body.still .offer-card{transition:none;}
@media (max-width:560px){
  .offer{align-items:end;padding:0;}
  .offer-card{width:100%;padding:var(--s6) var(--s5) var(--s5);}
}