/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

/* Xelent MMA store. Sits on scrollcraft.css (tokens + devices). White retail ground, black ink,
   Instrument Sans, 3px corners. Motion is transform, opacity and clip-path only. */
:root {
  --sc-canvas: #ffffff;  --sc-surface: #f1eee8;   /* bone: the brand's second colour, with black and royal */
  --sc-ink: #171717;     --sc-ink-soft: #626364;
  --sc-accent: #1b3fa8;  --sc-accent-ink: #ffffff;
  --sc-font-display: "Instrument Sans", system-ui, sans-serif;
  --sc-font-text: "Instrument Sans", system-ui, sans-serif;
  --sc-shadow-color: 220 10% 20%;
  --sc-maxw: 92rem;  --sc-gutter: clamp(1rem, 2.8vw, 2.5rem);
  --sc-section: clamp(3rem, 5.2vw, 5.5rem);
  --r: 3px;
  --line: #e4e1da;
  --belt-white: #f1f1ee; --belt-blue: #1b3fa8; --belt-purple: #5b2a91; --belt-brown: #6b4226; --belt-black: #141414;
  --red: #d7141a;
  --bar-h: 0px;
}
html { scroll-padding-top: 9rem; }
body { font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { text-decoration: none; }
img { height: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vh:focus { position: fixed; z-index: 99; top: .5rem; left: .5rem; width: auto; height: auto; clip-path: none; background: #fff; padding: .6rem 1rem; }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.up { text-transform: uppercase; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.5rem;
  border: 1.5px solid var(--sc-ink); border-radius: var(--r); background: var(--sc-ink); color: #fff; font-weight: 600; font-size: 1rem;
  cursor: pointer; transition: background-color .18s, color .18s, transform .18s var(--sc-ease-out); }
.btn:hover { background: #fff; color: var(--sc-ink); }
.btn:active { transform: scale(.98); }
.btn--ghost { background: #fff; color: var(--sc-ink); }
.btn--ghost:hover { background: var(--sc-ink); color: #fff; }
.btn--light { background: #fff; color: var(--sc-ink); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; }
.btn--sm { min-height: 2.5rem; padding: .45rem 1.1rem; font-size: .9rem; }
.btn--block { width: 100%; }
.link { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.link:hover { color: var(--sc-accent); }

/* ------------------------------------------------------------------ chrome */
.ann { background: #141414; color: #fff; font-size: .875rem; overflow: hidden; }
.ann__track { display: flex; width: max-content; animation: ann 38s linear infinite; }
.ann__track:hover { animation-play-state: paused; }
.ann__set { display: flex; flex: none; }
.ann__set > * { padding: .55rem 2.25rem; white-space: nowrap; }
.ann__set a { text-decoration: underline; text-underline-offset: .2em; }
.ann__set span::before, .ann__set a::before { content: ""; display: inline-block; width: .42rem; height: .42rem; margin-right: 2.25rem; background: #fff; vertical-align: .12em; transform: translateX(-2.25rem); }
@keyframes ann { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ann__track { animation: none; } }

.hdr { position: sticky; top: 0; z-index: var(--sc-z-chrome); background: #fff; border-bottom: 1px solid var(--line); }
.hdr__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: flex-end; gap: .45rem; }
.brand img { width: clamp(8.5rem, 13vw, 11.5rem); height: auto; }
.brand span { font-weight: 700; font-size: .8rem; letter-spacing: .14em; line-height: 1; padding-bottom: .12em; }
.tools { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.4rem); }
.tool { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .4rem; background: none; border: 0; cursor: pointer; font-size: .95rem; font-weight: 500; }
.tool svg { width: 1.35rem; height: 1.35rem; }
.tool:hover { color: var(--sc-accent); }
.tool b { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px; background: var(--sc-ink); color: #fff; font-size: .72rem; font-weight: 700; }
.tool b[data-n="0"] { display: none; }
.nav { border-top: 1px solid var(--line); }
.nav ul { display: flex; justify-content: center; gap: clamp(1rem, 2.6vw, 2.6rem); }
.nav a { display: block; padding: .85rem 0; color: var(--sc-ink-soft); font-weight: 400; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sc-ink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--sc-ease-out); }
.nav a:hover, .nav a[aria-current] { color: var(--sc-ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a.nav__hot { color: var(--sc-accent); font-weight: 600; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .tool span { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 7rem); overflow: auto; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: .5rem var(--sc-gutter) 1.25rem; }
  .nav a { padding: .9rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
}

/* --------------------------------------------------------------- headings */
.sec { padding-block: var(--sc-section); }
.sec--tight { padding-block: calc(var(--sc-section) * .6); }
.sec--grey { background: var(--sc-surface); }
.sec__head { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); text-align: center; }
.sec__head--left { align-items: flex-start; text-align: left; }
.h { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.h--xl { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.75rem); line-height: .98; letter-spacing: -.03em; font-stretch: 84%; }
.lede { color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }

/* ------------------------------------------------------------ custom hero
   At rest (no script, or reduced motion) this is a headline and four example products side by side.
   home.js adds .ch--live, which pins the stage and lets scroll walk through the four products. */
.ch { position: relative; background: #fff; --hdr: 7.5rem; --ann: 2.45rem; }
.ch__stage { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.ch__copy { display: flex; flex-direction: column; justify-content: center; gap: 1.15rem; align-items: flex-start; padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 3.4vw, 4rem) clamp(2rem, 4vw, 4rem) var(--sc-gutter); }
.ch__eye { display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ch__eye::before { content: ""; width: .6rem; height: .6rem; background: var(--red); }
.ch h1 { font-size: clamp(2.5rem, 1rem + 5.3vw, 5.9rem); font-weight: 700; font-stretch: 80%; line-height: .93; letter-spacing: -.035em; text-transform: uppercase; }
.ch h1 > span { display: block; }
.ch__rot { position: relative; color: var(--sc-accent); }
.ch__rot span { display: block; }
.ch__lede { font-size: 1.12rem; color: var(--sc-ink-soft); max-width: 40ch; text-wrap: pretty; }
.ch__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.ch__nav { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); width: 100%; }
.ch__nav a { position: relative; padding: .35rem 0; font-weight: 600; font-size: .95rem; color: var(--sc-ink-soft); }
.ch__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sc-ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sc-ease-out); }
.ch__nav a:hover, .ch__nav a.is-on { color: var(--sc-ink); }
.ch__nav a.is-on::after { transform: scaleX(1); }
.ch__view { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); min-height: 34rem; }
.ch__step { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--bg); color: var(--fg); padding: 2.5rem 1rem 3rem; }
.ch__word { position: absolute; left: 0; right: 0; top: 4%; text-align: center; font-weight: 700; font-stretch: 75%; font-size: 5.2rem; line-height: .82; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; opacity: .96; }
.ch__word--long { font-size: 3.5rem; }
.ch__prod { position: relative; width: min(78%, 22rem); aspect-ratio: 1; }
.ch__prod img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 24px rgb(0 0 0 / .28)); }
.ch__prod img + img { opacity: 0; }
.ch__chips, .ch__cap { display: none; }
@media (max-width: 860px) {
  .ch__stage { grid-template-columns: 1fr; }
  .ch__copy { padding: 1.5rem var(--sc-gutter) 1.5rem; gap: .9rem; }
  .ch__view { min-height: 0; }
  .ch__step { padding: 1.75rem .5rem 1.5rem; }
  .ch__word { font-size: 12vw; } .ch__word--long { font-size: 8.4vw; }
}

/* live: pinned, one product at a time */
.ch--live { height: calc(100svh - var(--hdr) - var(--ann) + var(--steps) * 78svh); }
.ch--live .ch__stage { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr) - var(--ann)); min-height: 30rem; overflow: hidden; }
.ch--live .ch__rot { height: .93em; overflow: hidden; }
.ch--live .ch__rot span { transform: translateY(calc(var(--at, 0) * -100%)); transition: transform .6s var(--sc-ease-in-out); }
.ch--live .ch__view { display: block; min-height: 0; overflow: hidden; isolation: isolate; }
.ch--live .ch__step { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; background: none; pointer-events: none; }
.ch--live .ch__step.is-on { pointer-events: auto; }
.ch--live .ch__bg { position: absolute; inset: 0; background: var(--bg); will-change: clip-path; overflow: hidden; }
.ch--live .ch__word { top: 5%; font-size: min(14.5vw, 30svh); will-change: transform; }
.ch--live .ch__word--long { font-size: min(10.4vw, 24svh); top: 7%; }
.ch--live .ch__prod { position: absolute; left: 50%; top: 56%; width: auto; height: 74%; margin: 0; transform: translate(-50%, -50%); will-change: transform; }
.ch--live .ch__chips { display: block; position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.ch--live .ch__chips li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: .55rem; max-width: 15rem; padding: .5rem .8rem .5rem .6rem; border-radius: var(--r); background: #fff; color: var(--sc-ink);
  font-size: .9rem; font-weight: 600; line-height: 1.25; box-shadow: 0 10px 28px -8px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .12); transform: translateY(calc((1 - var(--in, 0)) * 14px)); }
.ch--live .ch__chips li::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgb(215 20 26 / .18); }
.ch--live .ch__cap { display: block; position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ch--live .ch__cap a { text-decoration: underline; text-underline-offset: .2em; pointer-events: auto; }
@media (max-width: 860px) {
  .ch--live .ch__stage { grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .ch--live .ch__copy { padding-block: 1.1rem .9rem; gap: .7rem; }
  .ch--live h1 { font-size: clamp(2.1rem, 10.4vw, 3rem); }
  .ch--live .ch__lede { font-size: .98rem; }
  .ch--live .ch__nav, .ch--live .ch__cta .btn--ghost { display: none; }
  .ch--live .ch__word { font-size: 27vw; top: 3%; } .ch--live .ch__word--long { font-size: 19.5vw; top: 4%; }
  .ch--live .ch__prod { top: 55%; height: 70%; }
  .ch--live .ch__chips li { font-size: .78rem; max-width: 9.5rem; padding: .35rem .55rem .35rem .45rem; left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .ch--live .ch__chips li:nth-child(3) { display: none; }
  .ch--live .ch__cap { bottom: .6rem; font-size: .74rem; }
}
@media (max-width: 860px) and (max-height: 700px) { .ch--live .ch__lede { display: none; } }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; background: #fff; border-top: 1px solid var(--line); }
.hero__stage { position: relative; height: clamp(30rem, 78vh, 47rem); overflow: hidden; isolation: isolate; }
.hero__panels { position: absolute; inset: -6% 0; display: grid; grid-template-columns: repeat(5, 1fr); will-change: transform; }
.hero__panels i { display: block; }
.hero__panels i:nth-child(1) { background: var(--belt-white); } .hero__panels i:nth-child(2) { background: var(--belt-blue); }
.hero__panels i:nth-child(3) { background: var(--belt-purple); } .hero__panels i:nth-child(4) { background: var(--belt-brown); }
.hero__panels i:nth-child(5) { background: var(--belt-black); }
.hero__word { position: absolute; z-index: 1; left: 0; right: 0; top: 4%; text-align: center; font-weight: 700; font-stretch: 100%;
  font-size: 23.8vw; line-height: .8; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; will-change: transform;
  background: linear-gradient(90deg, #171717 0 20%, #fff 20% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__row { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.hero__item { position: relative; display: block; color: #fff; }
.hero__item:first-child { color: var(--sc-ink); }
.hero__item img { position: absolute; left: 50%; bottom: 9%; width: 116%; max-width: none; height: auto; transform: translateX(-50%); will-change: transform;
  filter: drop-shadow(0 28px 26px rgb(0 0 0 / .3)); }
.hero__item .g { position: absolute; inset: 0; will-change: transform; transition: transform .5s var(--sc-ease-out); }
.hero__item:hover .g, .hero__item:focus-visible .g { transform: translateY(-2.2%) scale(1.035); }
.hero__item em { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.1rem; text-align: center; font-style: normal; font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.hero__item em::after { content: ""; display: block; width: 1.5rem; height: 2px; margin: .4rem auto 0; background: currentColor; transform: scaleX(0); transition: transform .3s var(--sc-ease-out); }
.hero__item:hover em::after, .hero__item:focus-visible em::after { transform: scaleX(1); }
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.hero__bar p { max-width: 62ch; }
.hero__bar strong { font-weight: 700; text-transform: uppercase; margin-right: .5rem; }
@media (max-width: 860px) {
  .hero__stage { height: auto; overflow: visible; padding-top: 1.25rem; }
  .hero__panels { display: none; }
  .hero__word { position: static; font-size: 22.4vw; background: none; color: var(--sc-ink); line-height: 1; padding-bottom: .04em; }
  .hero__row { position: relative; inset: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 0; }
  .hero__row::-webkit-scrollbar { display: none; }
  .hero__item { flex: none; width: 66vw; height: 84vw; scroll-snap-align: center; overflow: hidden; }
  .hero__item:nth-child(1) { background: var(--belt-white); } .hero__item:nth-child(2) { background: var(--belt-blue); }
  .hero__item:nth-child(3) { background: var(--belt-purple); } .hero__item:nth-child(4) { background: var(--belt-brown); }
  .hero__item:nth-child(5) { background: var(--belt-black); }
  .hero__item img { width: 104%; bottom: 13%; }
  .hero__bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---------------------------------------------------------------- bubbles */
.bubbles { display: flex; justify-content: center; gap: clamp(.9rem, 2.2vw, 2.4rem); overflow-x: auto; scrollbar-width: none; padding: .35rem var(--sc-gutter); }
.bubbles::-webkit-scrollbar { display: none; }
.bubble { flex: none; width: clamp(5.4rem, 8.4vw, 8.2rem); text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.2; }
.bubble span { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: .65rem; background: var(--sc-surface); box-shadow: 0 0 0 1px var(--line); }
.bubble img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sc-ease-out); }
.bubble:hover img { transform: scale(1.08); }
@media (max-width: 1100px) { .bubbles { justify-content: flex-start; } }

/* ----------------------------------------------------------- product card */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.75rem) clamp(.75rem, 1.6vw, 1.75rem); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc { position: relative; display: flex; flex-direction: column; text-align: center; }
.pc__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: #fff; }
.pc__media::before { content: ""; position: absolute; inset: 0; background: var(--sc-surface); opacity: 0; transition: opacity .3s; }
.pc:hover .pc__media::before { opacity: 1; }
.pc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s, transform .7s var(--sc-ease-out); }
.pc__media img + img { opacity: 0; }
.pc:hover .pc__media.has-back img:first-of-type { opacity: 0; }
.pc:hover .pc__media.has-back img + img { opacity: 1; }
.pc:hover .pc__media:not(.has-back) img { transform: scale(1.045); }
.badge { position: absolute; z-index: 2; top: .6rem; left: .6rem; padding: .22rem .6rem; border-radius: var(--r); background: var(--sc-ink); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.4; }
.badge--legal { background: var(--sc-accent); }
.badge--training { background: #fff; color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px var(--sc-ink); }
.badge--drop { background: var(--sc-ink); }
.liners__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.75rem); }
.liner { display: block; text-align: center; }
.liner__fig { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); background: #fff; overflow: hidden; }
.liner__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.liner__in { background: #fff; }
.liner__t { display: block; margin-top: .8rem; }
.liner__t b { display: block; font-weight: 600; font-size: 1.05rem; }
.liner__t small { color: var(--sc-ink-soft); font-size: 1rem; }
@media (max-width: 860px) { .liners__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
  .liners__row::-webkit-scrollbar { display: none; } .liner { flex: none; width: 76vw; scroll-snap-align: center; } }
.own { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.own figure { border-radius: var(--r); overflow: hidden; background: var(--sc-surface); }
.own img { width: 100%; height: auto; }
@media (max-width: 860px) { .own { grid-template-columns: 1fr; } }
.pc__name { margin-top: .9rem; font-size: 1.04rem; font-weight: 600; line-height: 1.25; }
.pc__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc__price { margin-top: .2rem; color: var(--sc-ink-soft); font-weight: 400; }
.sw { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.sw button { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid #c9c9c6; border-radius: var(--r); background: var(--c); cursor: pointer; transition: transform .15s; }
.sw button:hover { transform: scale(1.12); }
.sw button[aria-pressed="true"] { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.sw button::after { content: ""; position: absolute; inset: -.5rem; }
.sw button { position: relative; }

/* ---------------------------------------------------------------- banners */
.ban { position: relative; display: block; color: #fff; background: #141414; overflow: hidden; }
.ban__img { aspect-ratio: 1932 / 760; min-height: 22rem; }
.ban__img img { width: 100%; height: 100%; object-fit: cover; }
.ban__shade { position: absolute; inset: 0; pointer-events: none; }
.ban--lead .ban__shade { background: radial-gradient(120% 130% at 0% 100%, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .38) 34%, transparent 62%); }
.ban--trail .ban__shade { background: radial-gradient(120% 130% at 100% 100%, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .38) 34%, transparent 62%); }
.ban__copy { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.ban--trail .ban__copy { align-items: flex-end; text-align: right; }
.ban__copy p { font-size: 1.1rem; max-width: 34ch; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.ban__copy .h--xl { text-shadow: 0 2px 22px rgb(0 0 0 / .45); }
@media (max-width: 700px) {
  .ban__img { aspect-ratio: 4 / 5; }
  .ban .ban__shade { background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .4) 38%, transparent 62%); }
  .ban--trail .ban__copy { align-items: flex-start; text-align: left; }
}

/* ---------------------------------------------------------------- the rack */
.rack { position: relative; background: var(--sc-surface); padding-block: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem); overflow: hidden; }
.rack__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rack__hint { color: var(--sc-ink-soft); font-size: .95rem; }
.rack__view { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; }
.rack__view::-webkit-scrollbar { display: none; }
.rack__view.is-drag { cursor: grabbing; }
.rack__rail { position: relative; display: flex; gap: clamp(.5rem, 1.5vw, 1.5rem); width: max-content; padding: 2.1rem clamp(2rem, 8vw, 9rem) 3.5rem; }
.rack__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 2.1rem; height: 7px; border-radius: 4px;
  background: linear-gradient(#f7f7f7, #8f9194 45%, #4e5053); box-shadow: 0 6px 10px -3px rgb(0 0 0 / .28); }
.hang { position: relative; flex: none; width: clamp(13rem, 21vw, 19.5rem); transform-origin: 50% 3px; will-change: transform; color: inherit; }
.hang__hook { display: block; width: 3.6rem; height: 3.3rem; margin: 0 auto -1.1rem; position: relative; z-index: 1; color: #55575a; }
.hang__img { position: relative; display: block; aspect-ratio: 1 / 1.06; }
.hang__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; filter: drop-shadow(0 22px 16px rgb(0 0 0 / .2)); pointer-events: none; -webkit-user-drag: none; }
.hang__tag { display: block; margin-top: .5rem; text-align: center; font-weight: 600; line-height: 1.25; }
.hang__tag small { display: block; color: var(--sc-ink-soft); font-weight: 400; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .hang { transform: none !important; } }

/* ------------------------------------------------------------------ split */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.split--flip > :first-child { order: 2; }
.split figure { border-radius: var(--r); overflow: hidden; background: var(--sc-surface); }
.split figure img { width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.split__copy { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.steps { display: grid; gap: .1rem; width: 100%; margin-block: .4rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .25rem 1rem; padding: .95rem 0; border-top: 1px solid var(--line); counter-increment: s; }
.steps li::before { content: counter(s); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.steps li b { font-weight: 700; }
.steps li span { grid-column: 2; color: var(--sc-ink-soft); }
.duo { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(.75rem, 1.6vw, 1.75rem); }
.duo figure { border-radius: var(--r); overflow: hidden; }
.duo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.duo figure:first-child img { aspect-ratio: 16 / 9; }
@media (max-width: 860px) { .split, .duo { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } }

/* ------------------------------------------------------------------ guides */
.guides { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(.75rem, 1.6vw, 1.75rem); }
.guide { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--sc-surface); }
.guide img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sc-ease-out); }
.guide--big img { position: absolute; inset: 0; object-position: 50% 18%; }
.guide:hover img { transform: scale(1.04); }
.guide--big { grid-row: span 2; min-height: 24rem; }
.guide--big .guide__t { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.5rem 1.4rem; color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .78), transparent); }
.guide--row { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; background: #fff; border: 1px solid var(--line); }
.guide--row img { aspect-ratio: 1; }
.guide--row .guide__t { padding: 1rem 1.25rem; }
.guide__t b { display: block; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.guide--big .guide__t b { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.guide__t span { display: block; margin-top: .3rem; opacity: .85; }
@media (max-width: 860px) { .guides { grid-template-columns: 1fr; } .guide--big { min-height: 19rem; } .guide--row { grid-template-columns: 7rem 1fr; } }

/* --------------------------------------------------------- loop + the close */
.loop { text-align: center; }
.loop form { display: flex; gap: .5rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.field { min-height: 3rem; padding: .6rem .9rem; border: 1px solid #b9b9b6; border-radius: var(--r); background: #fff; width: 100%; }
.field:focus { outline: 2px solid var(--sc-ink); outline-offset: 1px; border-color: var(--sc-ink); }
.loop .field { width: min(24rem, 100%); }
.note { color: var(--sc-ink-soft); font-size: .9rem; }
.close { background: #141414; color: #fff; overflow: hidden; }
.close__in { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-block: clamp(3.5rem, 8vw, 8rem); }
.close h2 { font-size: clamp(3rem, 1rem + 10.5vw, 12.5rem); font-weight: 700; font-stretch: 75%; line-height: .82; letter-spacing: -.04em; text-transform: uppercase; }
.close h2 span { display: block; }
.close p { color: #c9c9c6; max-width: 30ch; margin-bottom: 1.2rem; }
@media (max-width: 860px) { .close__in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ footer */
.ftr { background: var(--sc-surface); padding-block: clamp(2.5rem, 5vw, 4.5rem) 2rem; font-size: .97rem; }
.ftr__cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
.ftr h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; margin-bottom: .9rem; }
.ftr li { margin-bottom: .55rem; }
.ftr a { color: var(--sc-ink-soft); }
.ftr a:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .2em; }
.ftr__brand img { width: 10rem; margin-bottom: 1rem; }
.ftr__brand p { color: var(--sc-ink-soft); max-width: 34ch; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--sc-ink-soft); font-size: .88rem; }
@media (max-width: 860px) { .ftr__cols { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }

/* -------------------------------------------------------------- collection */
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; padding-block: 1.25rem .25rem; font-size: .92rem; color: var(--sc-ink-soft); }
.crumbs a:hover { color: var(--sc-ink); text-decoration: underline; }
.crumbs li + li::before { content: "›"; margin-right: .4rem; }
.col-head { text-align: center; padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem); display: grid; gap: .75rem; justify-items: center; }
.col-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: .9rem; margin-bottom: clamp(1.25rem, 2.4vw, 2.25rem); border-block: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { min-height: 2.4rem; padding: .3rem .95rem; border: 1px solid #b9b9b6; border-radius: var(--r); background: #fff; cursor: pointer; font-size: .93rem; }
.chip:hover { border-color: var(--sc-ink); }
.chip--line { border-style: dashed; }
.chip[aria-pressed="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: #fff; }
.col-bar label { display: flex; align-items: center; gap: .6rem; font-size: .93rem; color: var(--sc-ink-soft); }
.col-bar select { min-height: 2.4rem; padding: .3rem 2rem .3rem .7rem; border: 1px solid #b9b9b6; border-radius: var(--r); background: #fff; color: var(--sc-ink); }
.pc[hidden] { display: none; }

/* --------------------------------------------------------------------- pdp */
.pdp { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); padding-block: 1rem var(--sc-section); align-items: start; }
.gal { position: sticky; top: 8.5rem; }
.gal__main { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: #fff; }
.gal__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.gal__main img.is-on { opacity: 1; }
.gal__main img.is-photo { object-fit: cover; }
.gal__nav { position: absolute; z-index: 2; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .85); cursor: pointer; display: grid; place-items: center; }
.gal__nav:hover { background: #fff; box-shadow: var(--sc-e1); }
.gal__nav--p { left: .5rem; } .gal__nav--n { right: .5rem; }
.gal__thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.gal__thumbs button { flex: none; width: 4.6rem; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; cursor: pointer; }
.gal__thumbs button[aria-pressed="true"] { border-color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-ink); }
.gal__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.gal__thumbs img.is-photo { object-fit: cover; }
.info { display: grid; gap: 1.35rem; }
.info h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.info__price { font-size: 1.3rem; margin-top: .4rem; }
.info__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.info__tags .badge { position: static; }
.opt { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt legend { padding: 0; margin-bottom: .55rem; font-weight: 600; }
.opt legend span { font-weight: 400; color: var(--sc-ink-soft); }
.opt__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt__row label { position: relative; cursor: pointer; }
.opt__row input { position: absolute; opacity: 0; inset: 0; }
.opt__row label span { display: grid; place-items: center; min-width: 3.4rem; min-height: 2.75rem; padding: .3rem .9rem; border: 1px solid #b9b9b6; border-radius: var(--r); background: #fff; }
.opt__row label:hover span { border-color: var(--sc-ink); }
.opt__row input:checked + span { border-color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-ink); }
.opt__row input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.opt__row--img label span { width: 4.1rem; height: 4.1rem; padding: 2px; }
.opt__row--img img { width: 100%; height: 100%; object-fit: contain; }
.buy { display: grid; grid-template-columns: auto 1fr; gap: .6rem; }
.qty { display: inline-grid; grid-template-columns: 2.75rem 2.5rem 2.75rem; border: 1px solid #b9b9b6; border-radius: var(--r); }
.qty button { border: 0; background: none; cursor: pointer; font-size: 1.2rem; }
.qty output { display: grid; place-items: center; }
.buy .btn--ghost { grid-column: 1 / -1; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; line-height: 1; }
.acc details[open] summary::after { content: "−"; }
.acc details > div { padding: 0 0 1.2rem; color: var(--sc-ink-soft); display: grid; gap: .7rem; }
.acc ul { display: grid; gap: .35rem; }
.acc ul li::before { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-right: .7rem; background: var(--sc-ink); vertical-align: .16em; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } .gal { position: static; } }

/* ------------------------------------------------------------ plain pages */
.page-head { padding-block: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 2vw, 2rem); display: grid; gap: 1rem; }
.prose { display: grid; gap: 1.1rem; max-width: 68ch; }
.prose h2 { font-size: 1.35rem; font-weight: 700; text-transform: uppercase; margin-top: 1.2rem; }
.prose p, .prose li { color: #3c3d3e; text-wrap: pretty; }
.prose ul { display: grid; gap: .45rem; }
.prose ul li { padding-left: 1.1rem; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: .38rem; height: .38rem; background: var(--sc-ink); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.tbl { width: 100%; border-collapse: collapse; min-width: 34rem; }
.tbl th, .tbl td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--sc-surface); font-weight: 700; text-transform: uppercase; font-size: .88rem; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.form .full { grid-column: 1 / -1; }
.form textarea.field { min-height: 7rem; resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.checks label { display: inline-flex; grid-template-columns: none; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .3rem .9rem; border: 1px solid #b9b9b6; border-radius: var(--r); font-weight: 500; cursor: pointer; }
.checks label:has(input:checked) { border-color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-ink); }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- drawer + search */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.is-on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(27rem, 100vw); background: #fff; display: flex; flex-direction: column; transform: translateX(102%); transition: transform .42s var(--sc-ease-drawer); visibility: hidden; }
.drawer.is-on { transform: none; visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; }
.x { width: 2.75rem; height: 2.75rem; border: 0; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1; }
.drawer__body { flex: 1; overflow: auto; padding: .5rem 1.25rem; }
.drawer__foot { padding: 1.1rem 1.25rem 1.4rem; border-top: 1px solid var(--line); display: grid; gap: .7rem; }
.sum { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; }
.line { display: grid; grid-template-columns: 5rem 1fr auto; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.line img { width: 5rem; aspect-ratio: 1; object-fit: contain; background: var(--sc-surface); border-radius: var(--r); }
.line b { display: block; font-weight: 600; line-height: 1.25; }
.line small { display: block; color: var(--sc-ink-soft); font-size: .88rem; }
.line .qty { grid-template-columns: 2.1rem 1.9rem 2.1rem; margin-top: .45rem; min-height: 2.1rem; }
.line__rm { background: none; border: 0; padding: 0; margin-top: .3rem; color: var(--sc-ink-soft); text-decoration: underline; font-size: .85rem; cursor: pointer; }
.empty { padding: 2.5rem 0; text-align: center; color: var(--sc-ink-soft); display: grid; gap: 1rem; justify-items: center; }
.search { position: fixed; z-index: 90; left: 0; right: 0; top: 0; background: #fff; transform: translateY(-102%); transition: transform .42s var(--sc-ease-drawer); visibility: hidden; max-height: 100dvh; overflow: auto; }
.search.is-on { transform: none; visibility: visible; }
.search__bar { display: flex; gap: .5rem; align-items: center; padding-block: 1.1rem; }
.search__bar .field { font-size: 1.15rem; }
.search__res { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; padding-bottom: 1.75rem; }
.search__res a { display: block; text-align: center; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.search__res img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--sc-surface); border-radius: var(--r); margin-bottom: .5rem; }
.search__res small { display: block; color: var(--sc-ink-soft); font-weight: 400; }
.toast { position: fixed; z-index: 95; left: 50%; bottom: 1.25rem; transform: translate(-50%, 160%); padding: .8rem 1.2rem; border-radius: var(--r); background: var(--sc-ink); color: #fff; transition: transform .4s var(--sc-ease-out); }
.toast.is-on { transform: translate(-50%, 0); }

noscript style, .nojs [data-sc-in], .nojs [data-sc-stagger] > * { opacity: 1; transform: none; }

/* ------------------------------------------------------------- gi builder */
.gb-head { padding-block: clamp(1.25rem, 3vw, 2.5rem) 1.25rem; display: grid; gap: .8rem; }
.gb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.gb-stagewrap { position: sticky; top: 8.5rem; }
.gb-stagebox { position: relative; background: radial-gradient(90% 70% at 50% 45%, #fff 0%, #eeeeec 100%); border-radius: var(--r); display: grid; place-items: center; }
.gb-canvaswrap { position: relative; width: min(100%, calc((100vh - 15rem) * 0.8)); aspect-ratio: 4 / 5; margin: 0 auto; }
.gb-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.gb-zonemap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: none; }
.gb-z { cursor: pointer; outline: none; }
.gb-z polygon { fill: rgba(255, 255, 255, .06); stroke: #fff; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .85)); transition: fill .15s; }
.gb-z circle { fill: #171717; stroke: #fff; stroke-width: 2; }
.gb-z text { fill: #fff; font: 700 22px "Instrument Sans", system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.gb-z:hover polygon, .gb-z:focus-visible polygon, .gb-z.is-active polygon { fill: rgba(47, 111, 237, .22); stroke: #2f6fed; stroke-dasharray: none; filter: none; }
.gb-z.is-on polygon { stroke-opacity: 0; fill: transparent; filter: none; }
.gb-z.is-on:hover polygon, .gb-z.is-on.is-active polygon { stroke-opacity: 1; stroke: #2f6fed; stroke-dasharray: 5 4; }
.gb-zonemap.is-hidden .gb-z:not(.is-on):not(.is-active) { opacity: 0; pointer-events: none; }
.gb-pop { position: absolute; z-index: 3; width: min(300px, 94%); background: #fff; border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .2); padding: .75rem .8rem .85rem; display: grid; gap: .55rem; }
.gb-pop[hidden] { display: none; }
.gb-pop__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.gb-pop__head b { display: flex; align-items: center; gap: .45rem; }
.gb-pop__x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; width: 2.2rem; height: 2.2rem; }
.gb-pop__row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.gb-pop__text { display: grid; grid-template-columns: 1fr 2.5rem auto; gap: .35rem; }
.gb-pop__text input[type=color] { width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid #b9b9b6; border-radius: var(--r); }
.gb-pop__cur { display: flex; gap: .6rem; align-items: center; font-size: .9rem; word-break: break-all; }
.gb-pop__cur img { width: 3rem; height: 3rem; object-fit: contain; flex: none; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/12px 12px; }
.gb-pop__tip { margin: 0; font-size: .8rem; color: var(--sc-ink-soft); }
.gb-toggle { display: flex; gap: .45rem; align-items: center; font-size: .88rem; margin-top: .55rem; cursor: pointer; }
.gb-zgroup > b { display: block; margin: .7rem 0 .4rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.gb-zchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.gb-zchip { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; min-height: 44px; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; text-align: left; font-size: .86rem; line-height: 1.2; }
.gb-zchip:hover { border-color: #8c8e91; }
.gb-zchip[aria-pressed="true"] { border-color: #2f6fed; box-shadow: 0 0 0 1px #2f6fed; }
.gb-zchip img { width: 1.9rem; height: 1.9rem; object-fit: contain; }
.gb-zchip__n { display: inline-grid; place-items: center; min-width: 1.65rem; height: 1.65rem; padding: 0 .3rem; border-radius: 999px; background: #171717; color: #fff; font-size: .76rem; font-weight: 700; }
.gb-zchip.is-on .gb-zchip__n { background: #2f6fed; }
.gb-zchip__add { color: var(--sc-ink-soft); font-weight: 700; font-size: 1.1rem; }
.gb-views { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-top: .6rem; }
.gb-view { padding: .3rem .2rem .35rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font-size: .8rem; font-weight: 600; }
.gb-view canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; }
.gb-view[aria-pressed="true"] { border-color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-ink); }
.gb-panel { display: grid; gap: .9rem; }
.gb-sec { border: 1px solid var(--line); border-radius: var(--r); padding: .2rem 1rem .9rem; background: #fff; }
.gb-sec summary { padding: .8rem 0; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.gb-sec summary small { font-weight: 400; text-transform: none; color: var(--sc-ink-soft); margin-left: .4rem; }
.gb-row { padding: .55rem 0; border-top: 1px solid var(--line); }
.gb-row__head { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: .4rem; }
.gb-row__head small { color: var(--sc-ink-soft); }
.gb-sws { display: flex; flex-wrap: wrap; gap: .35rem; }
.gb-sw { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid #c9c9c6; background: var(--c); cursor: pointer; padding: 0; }
.gb-sw[aria-pressed="true"] { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.gb-custom { position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px dashed #8c8e91; display: grid; place-items: center; cursor: pointer; font-weight: 700; }
.gb-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gb-prints { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .7rem 0; }
.gb-print { padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #fff; }
.gb-print img { width: 100%; height: 100%; object-fit: cover; }
.gb-print[aria-pressed="true"] { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.gb-upload { cursor: pointer; }
.gb-range, .gb-field { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; margin-top: .6rem; }
.gb-range input { width: 100%; accent-color: var(--sc-ink); }
.gb-empty { color: var(--sc-ink-soft); font-size: .92rem; }
.gb-check { padding: .9rem 1rem; border-radius: var(--r); display: grid; gap: .2rem; font-size: .95rem; }
.gb-check.is-ok { background: #e7f1ea; } .gb-check.is-open { background: #f6f1e4; }
.gb-actions { display: grid; gap: .5rem; justify-items: center; }
@media (max-width: 900px) { .gb { grid-template-columns: 1fr; } .gb-stagewrap { position: static; } .gb-canvaswrap { width: min(100%, 62vh); } .gb-views { grid-template-columns: repeat(6, 1fr); gap: .3rem; } .gb-view { font-size: .68rem; padding: .15rem .1rem .2rem; } }
.gb-pop .link { background: none; border: 0; padding: .4rem .2rem; text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 900px) {
  .gb-pop { position: static; width: auto; margin: .6rem 0 0; box-shadow: 0 0 0 1px var(--line); }
}

/* ------------------------------------------------------------ brand refresh (2026-09-29 audit) */
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: .9rem; }
.eyebrow--light { color: rgb(255 255 255 / .75); }
/* hero */
.bh { position: relative; background: var(--sc-surface); overflow: hidden; }
.bh__img img { display: block; width: 100%; height: min(calc(100svh - 9.5rem), 56.25vw); min-height: 30rem; object-fit: cover; object-position: 62% 50%; }
.bh__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; pointer-events: none; }
.bh__copy > * { pointer-events: auto; }
.bh h1 { font-size: clamp(2.8rem, 1rem + 5.6vw, 6.4rem); line-height: .9; letter-spacing: -.035em; font-stretch: 78%; font-weight: 700; text-transform: uppercase; max-width: 9ch; }
.bh__lede { max-width: 34ch; margin-top: 1.2rem; font-size: 1.08rem; color: #3f3f40; }
.bh__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.bh__tag { position: absolute; right: var(--sc-gutter); bottom: 1.4rem; display: flex; gap: .8rem; align-items: center; padding: .55rem .9rem; background: rgb(255 255 255 / .85); backdrop-filter: blur(6px); border-radius: var(--r); font-size: .88rem; font-weight: 600; }
.bh__tag span { color: var(--sc-ink-soft); }
@media (max-width: 700px) {
  .bh { display: flex; flex-direction: column-reverse; }
  .bh__img img { height: auto; min-height: 0; aspect-ratio: 4 / 5; object-position: 50% 78%; }
  .bh__copy { position: static; padding-top: 1.5rem; padding-bottom: 1.4rem; }
  .bh h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .bh__lede { font-size: 1rem; max-width: 30ch; }
  .bh__tag { position: static; margin-top: 1.1rem; background: #fff; }
}
/* assurance strip */
.assure-bar { border-bottom: 1px solid var(--line); background: #fff; }
.assure-bar ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.assure-bar li { padding: 1.15rem 1.2rem 1.15rem 0; display: grid; gap: .15rem; }
.assure-bar li + li { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.assure-bar b { font-size: .95rem; }
.assure-bar span { font-size: .86rem; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .assure-bar ul { grid-template-columns: 1fr 1fr; } .assure-bar li:nth-child(3) { padding-left: 0; border-left: 0; } .assure-bar li:nth-child(n+3) { border-top: 1px solid var(--line); } }
/* families */
.fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.5rem); }
.fam { display: grid; background: var(--sc-surface); border-radius: var(--r); overflow: hidden; }
.fam__img { display: block; aspect-ratio: 1; }
.fam__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.fam:hover .fam__img img { transform: scale(1.04); }
.fam__t { display: grid; gap: .3rem; padding: 0 1.3rem 1.4rem; }
.fam__t b { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); font-stretch: 80%; text-transform: uppercase; letter-spacing: -.02em; }
.fam__t span { color: var(--sc-ink-soft); font-size: .95rem; }
@media (max-width: 860px) { .fams { grid-template-columns: 1fr; } .fam { grid-template-columns: 40% 1fr; align-items: center; } .fam__t { padding: 1rem; } }
/* signature specs */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; margin: 1.4rem 0 1.8rem; }
.specs li { display: grid; gap: .1rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.specs b { font-size: 1.5rem; font-stretch: 80%; letter-spacing: -.02em; }
.specs span { color: var(--sc-ink-soft); font-size: .92rem; }
/* gi builder feature */
.gbf { background: #141414; color: #fff; padding-block: var(--sc-section); }
.gbf__in { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.gbf__copy p:not(.eyebrow) { color: #c9c9c6; margin: 1rem 0 1.5rem; max-width: 40ch; }
.gbf__views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.gbf__views img { width: 100%; background: #efece6; border-radius: var(--r); }
@media (max-width: 860px) { .gbf__in { grid-template-columns: 1fr; } }
/* drops */
.drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.5rem); }
.drop { display: grid; gap: .35rem; }
.drop__img { display: block; aspect-ratio: 1; background: var(--sc-surface); border-radius: var(--r); overflow: hidden; margin-bottom: .6rem; }
.drop__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.drop:hover .drop__img img { transform: scale(1.04); }
.drop__n { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.drop b { font-size: 1.35rem; text-transform: uppercase; font-stretch: 82%; }
.drop > span:last-child { color: var(--sc-ink-soft); font-size: .95rem; }
@media (max-width: 700px) { .drops { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); } .drop { flex: 0 0 78%; scroll-snap-align: start; } }
/* facts */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.8rem 0 2rem; }
.facts div { display: grid; gap: .3rem; padding-top: .9rem; border-top: 2px solid var(--sc-ink); }
.facts b { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); font-stretch: 78%; letter-spacing: -.03em; line-height: 1; }
.facts span { color: var(--sc-ink-soft); font-size: .92rem; max-width: 22ch; }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } }
/* academy perks */
.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.perks div { display: grid; gap: .4rem; border-top: 2px solid var(--sc-ink); padding-top: .9rem; }
.perks b { font-size: 1.15rem; }
.perks span { color: var(--sc-ink-soft); }
@media (max-width: 860px) { .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .perks { grid-template-columns: 1fr; } }
/* bag: how ordering works */
.order-steps { counter-reset: o; display: grid; gap: .7rem; margin: 1rem 0 1.2rem; }
.order-steps li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .1rem .7rem; counter-increment: o; }
.order-steps li::before { content: counter(o); grid-row: span 2; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sc-ink); color: #fff; font-size: .8rem; font-weight: 700; }
.order-steps span { color: var(--sc-ink-soft); font-size: .92rem; }
/* product page */
.assure { display: grid; gap: .35rem; margin: .2rem 0 1.2rem; font-size: .92rem; color: var(--sc-ink-soft); }
.assure li { display: flex; gap: .55rem; align-items: center; }
.assure li::before { content: ""; width: .9rem; height: .5rem; border-left: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent); transform: rotate(-45deg) translateY(-2px); flex: none; }
.info__drop { font-size: .9rem; padding: .7rem .9rem; background: var(--sc-surface); border-radius: var(--r); }
.buybar { display: none; }
@media (max-width: 860px) {
  .buybar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem var(--sc-gutter) calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgb(0 0 0 / .06); }
  .buybar span { display: grid; font-size: .9rem; line-height: 1.25; }
  .buybar .btn { min-height: 2.8rem; padding-inline: 1.3rem; }
  body:has(.buybar) .ftr { padding-bottom: 5rem; }
}
/* footer */
.ftr__line { font-weight: 700; color: var(--sc-ink) !important; margin: .8rem 0 .3rem; }
.ftr__brand .btn { margin-top: 1rem; }
.ftr__base a { color: var(--sc-ink-soft); margin-left: 1rem; }
.ftr__base a:hover { color: var(--sc-ink); }
@media (max-width: 860px) { .ftr__base a { margin: 0 1rem 0 0; } }
/* collection filters: one scrolling row on phones instead of a wall of chips */
@media (max-width: 700px) {
  .col-bar { flex-direction: column; align-items: stretch; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
.ftr .btn, .ftr .btn:visited { color: #fff; }
.ftr .btn:hover { color: var(--sc-ink); }
/* grid and flex children may shrink below their content, so a scrolling strip never widens the page */
.pdp > * { min-width: 0; }
@media (max-width: 700px) { .col-bar > * { min-width: 0; max-width: 100%; } .chips { width: auto; } .col-bar label { align-self: flex-start; } }
.bag-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .bag-grid { grid-template-columns: 1fr; } }