/* ==========================================================================
   MAXIMUS.BIO — base: fonts, tokens, reset, type presets, primitives.
   Breakpoints (desktop-first, like Framer): ≥1200 desktop · 810–1199.98 tablet · ≤809.98 phone.
   Page layouts of Home/About/Shop switch at 1440 instead — those live in pages/*.css.
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------------
   Nohemi: one family per cut, exactly as Framer names them, so weights are never synthesized.
   Each has a metric-matched Arial fallback (Framer's own overrides) → no layout shift on swap. */
@font-face { font-family: "Nohemi Light"; src: url(/fonts/nohemi-light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Nohemi Regular"; src: url(/fonts/nohemi-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nohemi Medium"; src: url(/fonts/nohemi-medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Nohemi Semi Bold"; src: url(/fonts/nohemi-semibold.woff) format("woff"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: "Nohemi Light Placeholder"; src: local("Arial"); ascent-override: 69.51%; descent-override: 17.80%; line-gap-override: 7.05%; size-adjust: 106.46%; }
@font-face { font-family: "Nohemi Regular Placeholder"; src: local("Arial"); ascent-override: 68.56%; descent-override: 17.56%; line-gap-override: 6.95%; size-adjust: 107.94%; }
@font-face { font-family: "Nohemi Medium Placeholder"; src: local("Arial"); ascent-override: 67.94%; descent-override: 17.40%; line-gap-override: 6.89%; size-adjust: 108.92%; }
@font-face { font-family: "Nohemi Semi Bold Placeholder"; src: local("Arial"); ascent-override: 67.33%; descent-override: 17.24%; line-gap-override: 6.82%; size-adjust: 109.90%; }
@font-face { font-family: "Inter Placeholder"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0%; size-adjust: 107.89%; }
@font-face { font-family: "Inter Display Placeholder"; src: local("Arial"); ascent-override: 98.56%; descent-override: 24.54%; line-gap-override: 0%; size-adjust: 98.29%; }

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* colour */
  --ink: #121212;
  --ink-2: #49505d;
  /* The single brand accent. Spent only on state and detail (≈5–8% of the page): section-pill dots, focus rings,
     selection, active filter, selected size, open accordions, hover rules and arrows, footer/legal ticks. Never on
     body copy or large surfaces. --accent-soft = an ≈8% tint of it on white (hover / selection washes);
     --accent-line = a hairline-strength tint for borders on glass. */
  --accent: #4d1dfa;
  --accent-soft: #f1edff;
  --accent-line: rgba(77, 29, 250, .18);
  /* Violet pass (2026-10-13): the accent now also carries the primary action (solid violet buttons), the ticker strip,
     section pills (violet wash), hover underlines / rules and the open menu — ≈10–15% of the page, still never body
     copy. Roles: --accent-deep = pressed/hover state of a violet fill (white on it 9.0:1; white on --accent 7.3:1);
     --accent-bright = violet on near-black (#121212 menu): 5.7:1, AA for text and focus rings; --accent-tint = the
     faintest hover surface (≈4%); --accent-rule = a hairline you can actually see on white (≈35%). */
  --accent-deep: #3a0fe0;
  --accent-bright: #9479ff;
  --accent-tint: #f7f5ff;
  --accent-rule: rgba(77, 29, 250, .35);
  --accent-field: #8a6cfb; /* resting edge of a form field: 3.7:1 on white, 3.5:1 on --fill (WCAG 1.4.11 non-text) */
  --fill: #f8f9fc;
  --fill-hover: #f1f3f9;
  --card: #f2f5fa;
  --glass-border: #eaedf6;
  --line: rgba(90, 98, 113, .5);
  --ink-3: #6f7582;  /* placeholders and quiet meta text: 4.6:1 on white (--line is 2.6:1, too faint for text) */
  --white: #fff;
  --danger: #c4162a;      /* form errors only: 5.9:1 on white */
  --danger-soft: #fdeef0;
  --reveal-off: #8a8a8a; /* unrevealed scroll-reveal words: 3.4:1 on white (large text), was #d4d4d4 at 1.48:1 */

  /* type families */
  --font-nohemi-300: "Nohemi Light", "Nohemi Light Placeholder", sans-serif;
  --font-nohemi-400: "Nohemi Regular", "Nohemi Regular Placeholder", sans-serif;
  --font-nohemi-500: "Nohemi Medium", "Nohemi Medium Placeholder", sans-serif;
  --font-nohemi-600: "Nohemi Semi Bold", "Nohemi Semi Bold Placeholder", sans-serif;
  --font-inter: "Inter", "Inter Placeholder", sans-serif;            /* pair with font-variation-settings "opsz" 14 */
  --font-inter-display: "Inter", "Inter Display Placeholder", sans-serif; /* pair with "opsz" 32 */
  --ff-nohemi: "blwf", "cv03", "cv04", "cv09", "cv11";

  /* layout */
  --max: 1520px;
  --gutter: 39px;
  --main-top: 154px; /* 182 − the removed 28px ticker (14 Oct 2026): same gap under the 64px header */
  --section-gap: 160px;
  --inner-bottom: 56px;

  /* motion */
  --ease-out: cubic-bezier(.35, 0, 0, 1);      /* appear, FAQ accordion */
  --ease-btn: cubic-bezier(.44, 0, .56, 1);    /* buttons, rows, pills, cards */
  --ease-menu: cubic-bezier(.68, 0, .05, .99); /* header ↔ menu */
  /* Framer spring {duration .4, bounce .2}: nav roll, burger, social icons */
  --ease-spring: linear(0, 0.011 3.6%, 0.101 7.1%, 0.221 10.5%, 0.324 13.1%, 0.428 15.7%, 0.527 18.3%, 0.625 21.2%, 0.704 23.6%, 0.772 26.4%, 0.829 29%, 0.876 31.7%, 0.914 34.3%, 0.944 36.9%, 0.967 39.5%, 0.984 42.1%, 0.997 45%, 1.006 47.6%, 1.013 52.1%, 1.015 57.4%, 1.013 63.3%, 1.01 69.3%, 1.006 75.2%, 1.004 81.2%, 1.002 87.1%, 1);
  --dur-spring: 420ms;
  /* spring {duration .6, bounce 0}: category / menu card hover */
  --ease-card: linear(0, 0.0492, 0.1573, 0.2849, 0.4111, 0.5253, 0.6236, 0.7054, 0.7718, 0.8247, 0.8663, 0.8987, 0.9236, 0.9427, 0.9571, 0.9681, 0.9763, 0.9824, 0.987, 0.9904, 0.993, 0.9948, 0.9962, 0.9972, 1);
  --dur-card: 549ms;
  /* spring k500 c60: search backdrop, carousel arrows */
  --ease-backdrop: linear(0, 0.1093, 0.2857, 0.4449, 0.5731, 0.6729, 0.7496, 0.8084, 0.8534, 0.8879, 0.9142, 0.9344, 0.9498, 0.9616, 0.9706, 0.9775, 0.9828, 0.9869, 0.9899, 0.9923, 0.9941, 0.9955, 0.9966, 0.9974, 1);
  /* spring k600 c40: search box */
  --ease-modal: linear(0, 0.0469, 0.156, 0.2916, 0.4309, 0.5603, 0.6729, 0.7661, 0.8401, 0.8966, 0.9381, 0.9674, 0.9872, 0.9997, 1.007, 1.0106, 1.0117, 1.0114, 1.0102, 1.0087, 1.007, 1.0055, 1.0041, 1.003, 1);

  /* shared image recipes (mirror data/images.js) */
  --cutout-shadow: drop-shadow(0 16px 14px rgba(28, 38, 72, .13)) drop-shadow(0 3px 4px rgba(28, 38, 72, .08));
  --cutout-shadow-small: drop-shadow(0 8px 8px rgba(28, 38, 72, .14));
}

@media (max-width: 1199.98px) {
  :root { --main-top: 138px; --section-gap: 100px; --inner-bottom: 45px; }
}
@media (max-width: 809.98px) {
  :root { --gutter: 20px; --inner-bottom: 35px; }
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--white);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* the page scrollbar is part of the design too: a violet-grey thumb on white (same width, no layout shift);
     it turns near-black with the open menu (components.css) */
  scrollbar-color: #8f7df0 var(--white); /* thumb 3.3:1 on white */
}
body {
  min-height: 100vh;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-nohemi-400);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: inherit; }
h1, h2 { text-wrap: balance; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, textarea { caret-color: var(--accent); }
::selection { background: var(--accent); color: var(--white); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 36px; z-index: 20; padding: 10px 16px; border-radius: 100px;
  background: var(--ink); color: var(--white); font-family: var(--font-nohemi-500); font-size: 14px;
  transform: translateY(-200%); transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Layout helpers ------------------------------------------------
   .main        page content (z 2, under the fixed chrome); padding-top = --main-top
   .page-inner  1520-capped column with gutters and the section stack gap */
.main { position: relative; z-index: 2; padding-top: var(--main-top); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.page-inner {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 0 var(--gutter) var(--inner-bottom);
  display: flex; flex-direction: column; gap: var(--section-gap);
}

/* ---------- Type presets (Framer text styles) ------------------------------
   Sizes switch at 1200 / 810 for every preset; .t-label grows to 14px at ≥1600. */
.t-display { font-family: var(--font-nohemi-600); font-size: 63px; line-height: 1.1; letter-spacing: -.04em; }
.t-h-xl { font-family: var(--font-nohemi-500); font-size: 47px; line-height: 1.1; letter-spacing: -.04em; }
.t-h-l { font-family: var(--font-nohemi-500); font-size: 39px; line-height: 1.1; letter-spacing: -.04em; }
.t-h-m { font-family: var(--font-inter-display); font-variation-settings: "opsz" 32; font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.t-h-s { font-family: var(--font-nohemi-400); font-feature-settings: var(--ff-nohemi); font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.t-title-m { font-family: var(--font-nohemi-500); font-feature-settings: var(--ff-nohemi); font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.t-title-s { font-family: var(--font-nohemi-500); font-feature-settings: var(--ff-nohemi); font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.t-body-l { font-family: var(--font-nohemi-400); font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--ink-2); }
.t-body-m { font-family: var(--font-nohemi-400); font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.t-label { font-family: var(--font-nohemi-500); font-size: 12px; line-height: 1.6; letter-spacing: .04em; }
.t-footer-link { font-family: var(--font-nohemi-600); font-size: 14px; line-height: 1; letter-spacing: 0; }
.t-caption { font-family: var(--font-inter-display); font-variation-settings: "opsz" 32; font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: 0; }
.t-nav { font-family: var(--font-nohemi-400); font-size: 20px; line-height: 1.2; letter-spacing: 0; }
.t-menu-label { font-family: var(--font-nohemi-400); font-size: 12px; line-height: 1.3; letter-spacing: 0; text-transform: uppercase; }
.t-badge { font-family: var(--font-nohemi-400); font-size: 12px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.t-price { font-family: var(--font-nohemi-500); font-size: 20px; line-height: 32px; letter-spacing: .04em; }
.t-qty { font-family: var(--font-inter-display); font-variation-settings: "opsz" 32; font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: 0; }
/* Scroll-reveal paragraph: switches family at the PAGE breakpoint (1440), not 1200. */
.t-reveal { font-family: var(--font-nohemi-500); font-size: 48px; line-height: 1.1; letter-spacing: -.04em; }
.t-reveal--47 { font-size: 47px; }
.balance { text-wrap: balance; }

@media (min-width: 1600px) {
  .t-label { font-size: 14px; }
}
@media (max-width: 1439.98px) {
  .t-reveal, .t-reveal--47 { font-family: var(--font-inter); font-variation-settings: "opsz" 14; font-weight: 600; font-size: 36px; letter-spacing: -.06em; }
}
@media (max-width: 1199.98px) {
  .t-display { font-size: 50px; }
  .t-h-xl { font-size: 37px; }
  .t-h-l { font-size: 30px; }
  .t-h-m { font-size: 28px; }
  .t-h-s { font-size: 20px; }
  .t-title-m { font-size: 18px; }
  .t-title-s { font-size: 16px; }
}
@media (max-width: 809.98px) {
  .t-display { font-size: 43px; }
  .t-h-xl { font-size: 30px; }
  .t-h-m { font-size: 22px; }
  .t-h-s { font-size: 23px; }
  .t-body-l { font-size: 18px; }
  .t-reveal, .t-reveal--47 { font-size: 28px; }
}

/* ---------- Pill ----------------------------------------------------------
   .pill            #F8F9FC, 3px 12px, r100, label preset; .pill__dot 7×7
   .pill--white     CTA eyebrow          .pill--dark   active category (light text/dot)
   .pill--outline   transparent + 1px white border, white text (bento tags)
   .pill--tab       shop filter tab: 6px 15px, body-m label, hover/active = dark (0.6s) */
.pill {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 3px 12px; border-radius: 100px; background: var(--fill); color: var(--ink);
  overflow: hidden; white-space: nowrap; position: relative;
}
.pill__dot { width: 7px; height: 7px; border-radius: 30px; background: var(--accent); flex: none; } /* the section-pill dot carries the accent */
/* Section pills (light pill + dot: section heads, page eyebrows, the PDP category) sit on a violet wash, so every
   section opens on the accent. Dotless light pills (row badges, size pills, tags) keep the neutral fill. */
.pill:has(> .pill__dot):not(.pill--white, .pill--dark, .pill--outline, .pill--tab) { background: var(--accent-soft); }
.pill--white { background: var(--white); }
.pill--dark { background: var(--ink); color: var(--fill); }
.pill--dark .pill__dot { background: currentColor; }
.pill--outline { background: transparent; color: var(--white); }
.pill--outline::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--white); border-radius: inherit; pointer-events: none; }
.pill--tab {
  padding: 6px 15px; font-family: var(--font-nohemi-400); font-size: 16px; line-height: 1.3; letter-spacing: 0;
  transition: background-color .6s var(--ease-btn), color .6s var(--ease-btn);
}
/* Active filter = the accent (white on #4D1DFA, 7.3:1); hover on the others is only a violet wash, so the one solid
   violet pill always names the current filter. */
.pill--tab.is-active, .pill--tab[aria-current="page"] { background: var(--accent); color: var(--white); }
@media (hover: hover) {
  a.pill--tab:not(.is-active, [aria-current="page"]):hover { background: var(--accent-soft); color: var(--ink); }
}

/* ---------- Buttons -------------------------------------------------------
   .btn.btn--dark     solid #121212 pill, white label + →        hover: padding 32 → 40
   .btn.btn--outline  1px #49505D border, #49505D label + →      hover: fills #121212, white, padding 32 → 40
   300×50 by default; .btn--full = 100% wide; .btn--compact = Framer "Mobile" (6px 24px, 15px label, no hover). */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 300px; max-width: 100%; height: 50px; padding: 12px 32px; border-radius: 100px;
  font-family: var(--font-nohemi-400); font-size: 16px; line-height: 1.3; letter-spacing: 0; white-space: nowrap;
  cursor: pointer; isolation: isolate;
  transition: padding .4s var(--ease-btn), background-color .4s var(--ease-btn), color .4s var(--ease-btn);
}
.btn::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--btn-border, currentColor); border-radius: inherit;
  pointer-events: none; transition: border-color .4s var(--ease-btn);
}
.btn__icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.btn__icon svg { width: 26px; height: 26px; transform: rotate(45deg); }
/* Primary = solid violet (white label 7.3:1). Hover: one shade deeper with a soft violet drop shadow under it, plus
   the existing 32 → 40 padding stretch; pressed settles back. */
.btn--dark {
  background: var(--accent); color: var(--white); --btn-border: var(--accent);
  box-shadow: 0 10px 22px -14px rgba(77, 29, 250, 0);
  transition: padding .4s var(--ease-btn), background-color .4s var(--ease-btn), color .4s var(--ease-btn), box-shadow .4s var(--ease-btn);
}
.btn--outline { background: transparent; color: var(--ink-2); --btn-border: var(--ink-2); }
.btn--full { width: 100%; }
.btn--compact { height: auto; padding: 6px 24px; font-size: 15px; }
.btn--compact .btn__icon, .btn--compact .btn__icon svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .btn:not(.btn--compact):hover { padding-inline: 40px; }
  .btn--dark:hover { background: var(--accent-deep); --btn-border: var(--accent-deep); box-shadow: 0 12px 24px -12px rgba(77, 29, 250, .55); }
  .btn--outline:hover { color: var(--accent); --btn-border: var(--accent); }
  .btn--outline:not(.btn--compact):hover { background: var(--accent); color: var(--white); --btn-border: var(--accent); }
}
.btn--dark:active { background: var(--accent-deep); box-shadow: none; }

/* ---------- "More about ↗" link with dot + dash indicator -------------------
   hover: gap 16 → 24, ↗ rotates to →, dash grows to the full width. 0.4s --ease-btn */
.lmore { display: inline-flex; flex-direction: column; gap: 12px; color: var(--ink); cursor: pointer; }
.lmore__top { display: flex; align-items: center; gap: 16px; height: 30px; transition: gap .4s var(--ease-btn); }
.lmore__label { color: var(--ink); white-space: nowrap; }
.lmore__icon { width: 30px; height: 30px; flex: none; transition: transform .4s var(--ease-btn), color .4s var(--ease-btn); }
.lmore:is(:hover, :focus-visible) .lmore__icon { color: var(--accent); }
.lmore__ind { display: flex; align-items: center; gap: 3px; height: 3px; width: 100%; }
.lmore__dot { width: 3px; height: 3px; border-radius: 30px; background: var(--accent); flex: none; }
.lmore__dash { width: 25px; height: 3px; border-radius: 30px; background: currentColor; flex: none; transition: width .4s var(--ease-btn), background-color .4s var(--ease-btn); }
@media (hover: hover) {
  .lmore:hover .lmore__top { gap: 24px; }
  .lmore:hover .lmore__icon { transform: rotate(45deg); }
  .lmore:hover .lmore__dash { width: calc(100% - 6px); background-color: var(--accent); }
}
.lmore:focus-visible .lmore__dash { width: calc(100% - 6px); background-color: var(--accent); }

/* ---------- Section head (pill → title → text, gap 18) ----------------------
   .shead (left) / .shead--center; max-width 320 (.shead--narrow → 280 on phone; .shead--wide → none) */
.shead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; max-width: 320px; }
.shead__titles { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.shead__title, .shead__text { text-wrap: balance; }
.shead--center { align-items: center; text-align: center; }
.shead--wide { max-width: none; }
@media (max-width: 809.98px) {
  .shead--narrow { max-width: 280px; }
}

/* ---------- Floating cutout images --------------------------------------- */
.cutout { display: block; object-fit: contain; filter: var(--cutout-shadow); user-select: none; -webkit-user-drag: none; }
.cutout--small { filter: var(--cutout-shadow-small); }
.cutout--flat { filter: none; }
/* Renders are composited on pure white: multiply makes the white take the colour behind it exactly (no box edge). */
.cutout--multiply { mix-blend-mode: multiply; }

/* ---------- Turntable (spin hook, public/js/lib/spin.js) -------------------
   .spin = a self-contained blend group: its own background (= the card colour, --spin-bg) under .spin__media, which
   is multiplied onto it as ONE layer. Inside .spin__media the video simply covers the still (normal compositing) —
   multiplying them separately would print both labels at once. Ancestors' transforms/opacity (stacking contexts)
   can never leave a white box. Size the .spin box (width + aspect-ratio); the media fills it. */
.spin {
  position: relative; isolation: isolate; background: var(--spin-bg, var(--fill)); user-select: none; -webkit-user-select: none;
  /* the 2px outset keeps the backdrop opaque under the media's anti-aliased edge pixels (a fractional-px box would
     otherwise let the render's white through there as a hairline frame) */
  box-shadow: 0 0 0 2px var(--spin-bg, var(--fill));
}
.spin__media { position: absolute; inset: 0; mix-blend-mode: multiply; }
.spin__media > img { width: 100%; height: 100%; mix-blend-mode: normal; }
.spin__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0;
}

/* ---------- Icons --------------------------------------------------------- */
.icon { display: block; flex: none; }