/* == tokens.css == */
/* ============ TOKENS ============
   The first 14 custom properties are ported verbatim from the shipped
   2026-07 site — they are proven in light + dark and users may have the
   theme toggle persisted. New tokens extend, never replace. */
:root {
  --paper:    #F1F2EF;
  --card:     #FBFBF8;
  --ink:      #17272E;
  --muted:    #566068;
  --line:     rgba(11,57,84,.12);
  --navy:     #0B3954;
  --navy-deep:#062431;
  --gold:     #B9862B;
  --gold-lt:  #E4BE6A;
  --sage:     #47624F;
  --shadow:   0 18px 44px -22px rgba(6,36,49,.45);
  --shadow-sm:0 6px 18px -10px rgba(6,36,49,.35);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* extended palette (2026-08 rebuild) */
  --ivory:     #FBF9F3;
  --blue:      #5E7E96;   /* dusty blue */
  --blue-soft: #8FA6B8;
  --clay:      #B0664C;   /* limited accent: errors, rare editorial marks */
  --teal:      #2E5D5A;

  /* Metal lives entirely in metallic.css as the --m-* ramp. The old flat
     --metal-* tokens were deleted 2026-08-02: two systems were shipping at
     once and the filter chips still rendered the old brass. */

  /* text-safe accent variants (WCAG-checked in check-a11y.js) */
  --gold-text:  #84631E;  /* small text on paper/card, >=4.5:1 */
  --gold-large: #A17722;  /* large/bold display accents, >=3:1 */
  --clay-text:  #94502F;  /* error text, >=4.5:1 */

  /* motion + geometry */
  --rise: -2px;
  --ease-spring: cubic-bezier(.2,1.1,.35,1);
  --ease-out: cubic-bezier(.22,.8,.35,1);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0D1A22;
    --card:     #15272F;
    --ink:      #E7ECEA;
    --muted:    #9BAEAE;
    --line:     rgba(255,255,255,.11);
    --navy:     #0B3954;
    --navy-deep:#04202C;
    --gold:     #DBB35B;
    --gold-lt:  #EBCE86;
    --sage:     #7FA089;
    --shadow:   0 20px 50px -24px rgba(0,0,0,.7);
    --shadow-sm:0 8px 20px -12px rgba(0,0,0,.6);
    --ivory:    #101E27;
    --blue:     #7E9AB0;
    --blue-soft:#5E7E96;
    --clay:     #C9846B;
    --teal:     #6FA09A;
    --gold-text:  #DBB35B;
    --gold-large: #DBB35B;
    --clay-text:  #C9846B;
  }
}
:root[data-theme="light"] {
  --paper:#F1F2EF; --card:#FBFBF8; --ink:#17272E; --muted:#566068; --line:rgba(11,57,84,.12);
  --navy-deep:#062431; --gold:#B9862B; --gold-lt:#E4BE6A; --sage:#47624F;
  --shadow:0 18px 44px -22px rgba(6,36,49,.45); --shadow-sm:0 6px 18px -10px rgba(6,36,49,.35);
  --ivory:#FBF9F3; --blue:#5E7E96; --blue-soft:#8FA6B8; --clay:#B0664C; --teal:#2E5D5A;
  --gold-text:#84631E; --gold-large:#A17722; --clay-text:#94502F;
}
:root[data-theme="dark"] {
  --paper:#0D1A22; --card:#15272F; --ink:#E7ECEA; --muted:#9BAEAE; --line:rgba(255,255,255,.11);
  --navy-deep:#04202C; --gold:#DBB35B; --gold-lt:#EBCE86; --sage:#7FA089;
  --shadow:0 20px 50px -24px rgba(0,0,0,.7); --shadow-sm:0 8px 20px -12px rgba(0,0,0,.6);
  --ivory:#101E27; --blue:#7E9AB0; --blue-soft:#5E7E96; --clay:#C9846B; --teal:#6FA09A;
  --gold-text:#DBB35B; --gold-large:#DBB35B; --clay-text:#C9846B;
}

/* == base.css == */
/* ============ BASE ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(185,134,43,.06), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(11,57,84,.05), transparent 50%);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; }
h4, h5 { margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0; padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 26px; }
.wrap-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 26px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold);
  color: #23180a; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.block { padding: clamp(3rem, 6.5vw, 5.25rem) 0; }
.block-head { max-width: 640px; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.block-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.015em; line-height: 1.12; margin-top: 10px; }
.block-head .sub { color: var(--muted); margin-top: 12px; font-size: 1.02rem; }

/* Buttons (non-metallic). The metallic recipe lives in metallic.css. */
.btn {
  font-family: var(--sans); font-size: .92rem; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  transition: transform .16s var(--ease-spring), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
/* Ghost: structural hairline + a real surface, so it sits ON the page rather
   than being a hole in it. Depth comes from shadow, not a heavier border. */
.btn-ghost {
  border: 0; color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(6,36,49,.06),
    0 6px 14px -10px rgba(6,36,49,.24);
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), color .2s;
}
.btn-ghost:hover {
  transform: translateY(-2px); color: var(--gold-text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 4px rgba(6,36,49,.08),
    0 14px 24px -12px rgba(6,36,49,.3);
}
.btn-ghost:active { transform: translateY(0) scale(.978); transition-duration: .09s; }
@media (prefers-reduced-motion: reduce) {
  .btn-ghost:hover, .btn-ghost:active { transform: none; }
}
.btn-quiet { color: var(--muted); background: transparent; padding: 12px 10px; }
.btn-quiet:hover { color: var(--ink); }

/* Reduced motion: global kill switch. Decorative animation opts in via
   (prefers-reduced-motion: no-preference) blocks; this catches the rest. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* == components.css == */
/* ============ ANNOUNCEMENT BAR ============ */
.announce { background: var(--navy-deep); color: #E7ECEA; }
.announce-in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; font-size: .86rem; }
.announce a { color: var(--gold-lt); font-weight: 600; }
.announce-x {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  background: transparent; border: 0; color: #E7ECEA; cursor: pointer; border-radius: 6px; opacity: .75;
}
.announce-x:hover { opacity: 1; }

/* ============ NAV ============ */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 14px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .glyph {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: linear-gradient(155deg, #16577a, var(--navy) 55%, var(--navy-deep));
  position: relative; box-shadow: var(--shadow-sm);
}
.brand .glyph::before, .brand .glyph::after {
  content: ""; position: absolute; top: 8px; height: 18px; width: 9px; background: #FBFBF8; border-radius: 2px;
}
.brand .glyph::before { left: 7px; transform: perspective(40px) rotateY(14deg); transform-origin: right; }
.brand .glyph::after { right: 7px; transform: perspective(40px) rotateY(-14deg); transform-origin: left; }
.brand .spine { position: absolute; left: 50%; top: 7px; width: 2px; height: 20px; background: var(--gold-lt); transform: translateX(-50%); z-index: 2; }
.brand .name { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.brand .name b { color: var(--gold); font-weight: 600; }

nav.links { display: flex; align-items: center; gap: 18px; }
nav.links > a:not(.btn-metal):not(.icon-toggle) {
  text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--muted); transition: color .18s;
  padding: 4px 2px;
}
nav.links > a:not(.btn-metal):not(.icon-toggle):hover { color: var(--ink); }
nav.links > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }

/* Collections disclosure */
.nav-drop { position: relative; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--muted); padding: 4px 2px;
  transition: color .18s;
}
.nav-drop > button:hover, .nav-drop > button[aria-expanded="true"] { color: var(--ink); }
.nav-drop > button svg { transition: transform .18s; }
.nav-drop > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 8px; margin: 0; list-style: none; z-index: 60;
}
.nav-drop-menu[hidden] { display: none; }
.nav-drop-menu a {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  font-size: .92rem; font-weight: 500; color: var(--ink);
}
.nav-drop-menu a:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--ink); }

.icon-toggle {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); flex: none;
  background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center;
  font-size: 1rem; text-decoration: none; transition: border-color .18s, color .18s; position: relative;
}
.icon-toggle:hover { border-color: var(--gold); color: var(--gold); }
.saved-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--gold); color: #23180a; font-size: .66rem; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px;
}
.nav-shop { padding: 10px 20px; }
.menu-btn { display: none; }
.m-panel { display: none; }
@media (max-width: 980px) {
  nav.links > a:not(.icon-toggle):not(.btn-metal), .nav-drop { display: none; }
  nav.links .nav-shop { display: none; }
  nav.links { gap: 10px; }
  .menu-btn {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px;
    border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  }
  .m-panel { display: none; border-top: 1px solid var(--line); padding: 10px 0 16px; }
  .m-panel.open { display: block; }
  .m-panel a {
    display: block; padding: 12px 4px; text-decoration: none; color: var(--ink);
    font-size: 1.02rem; font-weight: 500; border-bottom: 1px solid var(--line);
  }
  .m-panel a:last-child { border-bottom: 0; }
  .m-panel .m-sub { padding-left: 18px; font-size: .95rem; color: var(--muted); }
}
@media (max-width: 460px) {
  /* The icon cluster overflows a 375px viewport; search and saved live in
     the menu panel too, so their header icons yield. Theme stays (button,
     not anchor — untouched by this selector). */
  .nav-in { gap: 8px; }
  nav.links { gap: 8px; }
  nav.links a.nav-tool { display: none; }
}

/* ============ HERO PLANNER (ported disorder→order animation) ============ */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600;
  color: var(--sage); border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent);
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 22px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: var(--gold-large); }
.hero .support { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--gold-large); margin-top: 16px; }
.hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); margin-top: 14px; max-width: 32em; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.assure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding: 0; list-style: none; }
.assure li { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted); }
.assure svg { color: var(--gold); flex: none; }

.stage { position: relative; }
.stage { perspective: 1600px; }
.planner {
  background: var(--card); border-radius: var(--r-lg);
  border: 0; overflow: hidden; position: relative; z-index: 3;
  transform: rotateX(1.2deg) rotateY(-1.4deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent),
    0 2px 4px rgba(6,36,49,.08),
    0 12px 24px -10px rgba(6,36,49,.20),
    0 44px 70px -30px rgba(6,36,49,.38);
}
@media (prefers-reduced-motion: reduce) { .planner { transform: none; } }
.planner-top {
  background: linear-gradient(150deg, #16577a, var(--navy) 60%, var(--navy-deep));
  color: #F3F4F1; padding: 18px 22px 20px; position: relative;
}
.planner-top .k { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); }
.planner-top .t { font-family: var(--serif); font-size: 1.32rem; margin-top: 3px; }
.planner-top::after { content: ""; position: absolute; left: 22px; bottom: 12px; width: 46px; height: 3px; background: var(--gold-lt); border-radius: 2px; }
.planner-body { padding: 12px 22px 22px; }
.row { display: flex; align-items: center; gap: 13px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.box {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  border: 2px solid var(--gold); background: var(--gold); position: relative;
}
.box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #FBFBF8; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); transform-origin: center;
}
.row .label { font-size: .98rem; color: var(--ink); }
.row .seq { margin-left: auto; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip {
  position: absolute; font-size: .8rem; font-weight: 600; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px; box-shadow: var(--shadow-sm); z-index: 1; white-space: nowrap;
}
.c1 { top: -18px; left: -14px; }
.c2 { top: 34px; right: -26px; }
.c3 { bottom: 24px; left: -30px; }
.c4 { bottom: -16px; right: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .row { opacity: 0; transform: translateY(10px); animation: riseIn .5s ease forwards; }
  .row:nth-child(1) { animation-delay: .35s } .row:nth-child(2) { animation-delay: .62s }
  .row:nth-child(3) { animation-delay: .89s } .row:nth-child(4) { animation-delay: 1.16s }
  .row:nth-child(5) { animation-delay: 1.43s }
  .box::after { transform: rotate(42deg) scale(0); animation: tick .32s cubic-bezier(.2,1.3,.4,1) forwards; }
  .row:nth-child(1) .box::after { animation-delay: .55s } .row:nth-child(2) .box::after { animation-delay: .82s }
  .row:nth-child(3) .box::after { animation-delay: 1.09s } .row:nth-child(4) .box::after { animation-delay: 1.36s }
  .row:nth-child(5) .box::after { animation-delay: 1.63s }
  .box { background: transparent; transition: background .3s; }
  .row:nth-child(1) .box { animation: fill 0s linear .55s forwards } .row:nth-child(2) .box { animation: fill 0s linear .82s forwards }
  .row:nth-child(3) .box { animation: fill 0s linear 1.09s forwards } .row:nth-child(4) .box { animation: fill 0s linear 1.36s forwards }
  .row:nth-child(5) .box { animation: fill 0s linear 1.63s forwards }
  .chip { animation: chipOut .8s ease forwards; }
  .c1 { animation-delay: 1.5s } .c2 { animation-delay: 1.7s } .c3 { animation-delay: 1.9s } .c4 { animation-delay: 2.05s }
}
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes tick { to { transform: rotate(42deg) scale(1); } }
@keyframes fill { to { background: var(--gold); } }
@keyframes chipOut { to { opacity: 0; transform: translateY(-8px) scale(.96); } }

/* ============ VALUE STRIP ============ */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 55%, transparent); }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: clamp(2rem, 4vw, 3rem) 0; }
@media (max-width: 760px) { .strip-grid { grid-template-columns: 1fr; gap: 22px; } }
.val { display: flex; gap: 14px; align-items: flex-start; }
.val .vi { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.val h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; }
.val p { font-size: .92rem; color: var(--muted); margin-top: 3px; }

/* ============ PRODUCT CARD ============
   Elevation is built from four stacked shadows rather than one: a hairline
   contact edge, a tight contact shadow, a mid diffusion, and a wide ambient.
   One shadow reads as a sticker; four read as an object resting on paper. */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  perspective: 1400px; /* enables the hover tilt on children */
}
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.pcard {
  display: flex; flex-direction: column; background: var(--card);
  border: 0; border-radius: var(--r-lg); overflow: hidden;
  position: relative; transform-style: preserve-3d;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent),
    0 1px 2px rgba(6,36,49,.06),
    0 6px 12px -6px rgba(6,36,49,.12),
    0 18px 32px -20px rgba(6,36,49,.22);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.pcard:hover {
  transform: translateY(-7px) rotateX(1.6deg) scale(1.012);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
    0 2px 4px rgba(6,36,49,.08),
    0 14px 26px -10px rgba(6,36,49,.20),
    0 38px 60px -28px rgba(6,36,49,.34);
}
.pcard:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),
    0 14px 26px -10px rgba(6,36,49,.2),
    0 38px 60px -28px rgba(6,36,49,.3);
}
/* The cover well: a lit navy recess, not a flat block. */
.pcard-media {
  position: relative; aspect-ratio: 560 / 396; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(168deg, #17597C 0%, var(--navy) 52%, var(--navy-deep) 100%);
}
/* Page-stack: two sheets behind the cover so it reads as a real booklet. */
.pcard-media::before,
.pcard-media::after {
  content: ""; position: absolute; left: 50%; top: 8%;
  width: 62%; height: 92%; border-radius: 3px 5px 0 0; background: #E9E6DC;
  transform: translateX(-50%) translateZ(-1px);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.55);
}
.pcard-media::before { transform: translateX(calc(-50% + 7px)) rotate(1.4deg); opacity: .5; }
.pcard-media::after  { transform: translateX(calc(-50% + 3.5px)) rotate(.7deg); opacity: .75; background: #F4F2EA; }
.pcard-media img {
  position: relative; z-index: 2;
  display: block; width: 62%; margin: 8% auto 0;
  border-radius: 3px 5px 0 0;
  outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px;
  box-shadow:
    -1px 0 0 rgba(0,0,0,.06),          /* spine edge */
    0 2px 4px rgba(0,0,0,.28),
    0 12px 26px -10px rgba(0,0,0,.55),
    0 26px 44px -22px rgba(0,0,0,.6);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.pcard:hover .pcard-media img { transform: translateY(-4px) scale(1.022); }
:root[data-theme="dark"] .pcard-media img,
html[data-area="dev"] .pcard-media img { outline-color: rgba(255,255,255,.12); }
.pcard-save {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 0; color: var(--muted); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.24);
  transition: color .2s, box-shadow .2s, transform .3s cubic-bezier(.22,1,.36,1);
}
/* 44x44 touch target without growing the visible chip */
.pcard-save::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
.pcard-save:hover { color: var(--gold-lt); transform: scale(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.3); }
.pcard-save:active { transform: scale(.96); }
.pcard-save[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.pcard-save[aria-pressed="true"] svg { fill: currentColor; }
.pcard-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.pcard h3, .pcard h2 { font-size: 1.14rem; line-height: 1.25; text-wrap: balance; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard .desc { font-size: .9rem; color: var(--muted); flex: 1; text-wrap: pretty; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; }
.spec {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  border-radius: 999px; padding: 4px 11px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  font-variant-numeric: tabular-nums;
}
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pcard-actions { position: relative; z-index: 2; display: flex; gap: 10px; align-items: center; }

/* ============ PRICE ============ */
.price {
  font-family: var(--serif); font-weight: 600; font-size: 1.22rem; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.price .was { font-family: var(--sans); font-size: .84rem; font-weight: 500; color: var(--muted); text-decoration: line-through; }
.price .note { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--sage); }

/* ============ COLLECTION CARD ============ */
.ccard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 218px; padding: 22px; border-radius: var(--r-lg); overflow: hidden;
  color: #F3F4F1; text-decoration: none; border: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-rim) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 4px rgba(6,36,49,.14),
    0 14px 26px -12px rgba(6,36,49,.3);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.ccard:hover {
  transform: translateY(-6px) scale(1.014);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-break) 75%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 4px 8px rgba(6,36,49,.16),
    0 30px 50px -20px rgba(6,36,49,.46);
}
.ccard:hover .cn { transform: translateX(4px); }
.ccard .cn { transition: transform .42s cubic-bezier(.22,1,.36,1); }
/* Specular sheen sweeping the card face on hover — light passing over glass. */
.ccard::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(255,255,255,.16) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.ccard:hover::after { transform: translateX(120%); }
.ccard::before { content: ""; position: absolute; inset: 0; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .ccard:hover { transform: none; }
  .ccard::after { display: none; }
}
.ccard.navy::before { background: linear-gradient(150deg, #16577a, var(--navy) 55%, var(--navy-deep)); }
.ccard.teal::before { background: linear-gradient(150deg, #3B7470, var(--teal) 55%, #17403D); }
.ccard.green::before { background: linear-gradient(150deg, #2E7A4F, #0a5c36 60%, #06371F); }
.ccard.gold::before { background: linear-gradient(150deg, #C69A45, #9C7322 60%, #5F4512); }
.ccard > * { position: relative; }
.ccard .ck { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); font-weight: 700; }
.ccard.gold .ck { color: #F6EAC9; }
.ccard h3 { font-size: 1.35rem; }
.ccard p { font-size: .88rem; opacity: .85; }
.ccard .cn { font-size: .78rem; font-weight: 600; opacity: .9; margin-top: 4px; }

/* ============ FAQ ============ */
.faq-list { display: grid; gap: 10px; max-width: 760px; }
details.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px;
}
details.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-weight: 600; font-size: .98rem; padding: 16px 0;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; font-family: var(--sans); font-size: 1.2rem; color: var(--gold); flex: none;
  transition: transform .18s;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-a { padding: 0 0 16px; color: var(--muted); font-size: .94rem; max-width: 62ch; }

/* ============ FORMS ============ */
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 600; }
.field input[type="email"], .field input[type="text"], .field input[type="search"] {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
}
.field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: transparent; }
.field .err { font-size: .84rem; color: var(--clay-text); font-weight: 600; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ============ STATES ============ */
.state {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: clamp(2rem, 5vw, 3.4rem) 20px; border: 1px dashed var(--line); border-radius: var(--r-lg);
  color: var(--muted);
}
.state .state-icon { color: var(--gold); }
.state h1, .state h2, .state h3 { font-family: var(--sans); font-size: 1.04rem; color: var(--ink); margin: 0; }
.state p { font-size: .92rem; max-width: 42ch; }
.state.error .state-icon { color: var(--clay); }

.skeleton { border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 14%, transparent); position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--card) 60%, transparent) 50%, transparent 70%);
    transform: translateX(-100%); animation: shimmer 1.4s ease infinite;
  }
  @keyframes shimmer { to { transform: translateX(100%); } }
}

/* ============ STICKY PURCHASE BAR (product pages) ============ */
.buybar {
  position: sticky; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 10px 0;
}
.buybar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.buybar .bb-title { font-weight: 600; font-size: .95rem; }
.buybar .bb-meta { font-size: .8rem; color: var(--muted); }
.buybar .bb-actions { display: flex; align-items: center; gap: 14px; }
@media (max-width: 640px) { .buybar .bb-title-wrap { display: none; } }

/* ============ FOOTER ============ */
.site-foot { border-top: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 5rem); background: color-mix(in srgb, var(--card) 40%, transparent); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; padding: clamp(2.4rem, 5vw, 3.6rem) 0 2rem; }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .foot-blurb { font-size: .9rem; color: var(--muted); margin-top: 14px; max-width: 30ch; }
.foot-standard { margin-top: 12px; font-size: .88rem; }
.foot-standard a { color: var(--gold-text); font-weight: 600; text-decoration: none; }
.foot-col h3 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-col a { text-decoration: none; font-size: .9rem; color: var(--ink); opacity: .85; }
.foot-col a:hover { opacity: 1; color: var(--gold); }
.site-foot .legal { border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 26px; }
.site-foot .legal p { font-size: .8rem; color: var(--muted); max-width: 90ch; }
.site-foot .legal a { color: var(--muted); }
.foot-copy { margin-top: 10px; }

/* ============ SCROLL REVEAL ============
   Soft, slow and slightly 3D: content rises from a little further away rather
   than sliding flatly. Long duration + quint ease is what makes motion read as
   expensive; anything under ~500ms feels like a webpage, not a product. */
/* Every hidden state below is scoped to html.js — only JS can undo opacity:0,
   so without JS these rules must never apply or the content is lost. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.985);
    transition:
      opacity .75s cubic-bezier(.22,1,.36,1),
      transform .75s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
  }
  .js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
  /* Staggered children — an entrance reads as choreography, not a jump. */
  .js .stagger > * {
    opacity: 0; transform: translate3d(0, 20px, 0);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .js .stagger.is-visible > * { opacity: 1; transform: none; }
  .js .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .js .stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
  .js .stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
  .js .stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
  .js .stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
  .js .stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

  /* Cinematic media settle: starts slightly over-scaled and eases to rest. */
  .js .media-settle img { transform: scale(1.08); transition: transform 1.5s cubic-bezier(.22,1,.36,1); }
  .js .media-settle.is-visible img { transform: scale(1); }
}

/* ============ RELATED STRIP ============ */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

/* == metallic.css == */
/* ============ METALLIC CONTROLS ============================================
   Brushed champagne / titanium. Applied ONLY to: primary CTAs, selected tabs,
   search submit, preview controls, key interactive cards, trust badges.

   Anatomy of a real metal edge, from outside in — each layer is one of the
   box-shadow entries below, and together they ARE the "lining":
     1. dark outer rim        the machined edge, separates it from the page
     2. bright inner hairline light catching the bevel (this is what reads as
                              metal; a single flat border never will)
     3. top specular highlight strong light source above
     4. bottom inner shade    the surface curving away from that light
     5. contact + ambient shadow  physical weight on the page

   The face is a 5-stop gradient with a deliberate hard-ish break at 50%:
   metal reflects the sky above and the ground below, so the value jumps at
   the horizon rather than fading smoothly. A smooth fade reads as plastic.
   Over that sits a 1px brushed texture and a cursor-tracked specular sweep. */

/* Champagne, not brass. Saturation stays low (these are near-neutral warms)
   because polished metal reflects its surroundings — a heavily saturated face
   reads as coloured plastic. The brand gold stays in the ink and the rim. */
:root {
  --m-top:    #FCF8EE;  /* extreme top edge, near-white catch */
  --m-upper:  #EFE4CB;  /* sky reflection */
  --m-break:  #DCCAA1;  /* horizon */
  --m-lower:  #C4AC79;  /* ground reflection */
  --m-bottom: #E2D3AF;  /* bounce light off the surface below */
  --m-rim:    #7A6132;  /* machined outer edge */
  --m-lining: rgba(255,255,255,.78); /* the bright inner hairline */
  --m-ink:    #2A1F0C;
}
:root[data-theme="dark"], html[data-area="dev"] {
  --m-top:    #EADCBB;
  --m-upper:  #D3BE8D;
  --m-break:  #AF9760;
  --m-lower:  #9C8654;  /* lightened from #8E784A: ink hit only 4.36:1 there */
  --m-bottom: #C2AD7C;
  --m-rim:    #4C3D1C;
  --m-lining: rgba(255,255,255,.46);
  --m-ink:    #1A1205;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-top: #EADCBB; --m-upper: #D3BE8D; --m-break: #AF9760;
    --m-lower: #8E784A; --m-bottom: #C2AD7C; --m-rim: #4C3D1C;
    --m-lining: rgba(255,255,255,.46); --m-ink: #1A1205;
  }
}

.btn-metal {
  --sx: 50%;
  position: relative;
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 650;
  letter-spacing: .003em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 12px;
  border: 0;
  color: var(--m-ink);
  /* Engraving: a light edge under the glyphs, as if struck into the surface. */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background:
    /* 1. cursor-tracked specular sweep */
    linear-gradient(100deg,
      transparent calc(var(--sx) - 22%),
      rgba(255,255,255,.30) calc(var(--sx) - 6%),
      rgba(255,255,255,.52) var(--sx),
      rgba(255,255,255,.30) calc(var(--sx) + 6%),
      transparent calc(var(--sx) + 22%)) no-repeat,
    /* 2. brushed anisotropy — 1px vertical hairlines */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 1px,
      rgba(0,0,0,.022) 1px 2px,
      transparent 2px 4px),
    /* 3. the face, with its horizon break */
    linear-gradient(178deg,
      var(--m-top) 0%,
      var(--m-upper) 26%,
      var(--m-break) 49%,
      var(--m-lower) 51%,
      var(--m-bottom) 100%);
  box-shadow:
    0 0 0 1px var(--m-rim),                       /* outer rim */
    inset 0 0 0 1px var(--m-lining),              /* the lining */
    inset 0 1.5px 0 rgba(255,255,255,.85),        /* top specular */
    inset 0 -1.5px 1px rgba(78,54,10,.55),        /* bottom shade */
    inset 2px 0 2px -2px rgba(255,255,255,.5),    /* left bevel */
    inset -2px 0 2px -2px rgba(255,255,255,.5),   /* right bevel */
    0 1px 1px rgba(24,16,2,.18),                  /* contact */
    0 3px 6px -2px rgba(24,16,2,.20),
    0 10px 20px -8px rgba(24,16,2,.28);           /* ambient */
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    filter .2s ease;
  will-change: transform;
}
.btn-metal:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 0 0 1px var(--m-rim),
    inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(78,54,10,.5),
    inset 2px 0 2px -2px rgba(255,255,255,.6),
    inset -2px 0 2px -2px rgba(255,255,255,.6),
    0 2px 2px rgba(24,16,2,.16),
    0 8px 14px -4px rgba(24,16,2,.22),
    0 20px 34px -12px rgba(24,16,2,.34);
}
/* Pressed: the piece seats into the page — highlight collapses, light inverts
   to an inner shadow, and it scales just under 1 so the eye reads travel. */
.btn-metal:active,
.btn-metal.is-pressed {
  transform: translateY(0) scale(.978);
  filter: brightness(.97);
  transition-duration: .09s;
  box-shadow:
    0 0 0 1px var(--m-rim),
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 3px 6px rgba(70,48,8,.42),
    inset 0 -1px 0 rgba(255,255,255,.34),
    0 1px 1px rgba(24,16,2,.2);
}
.btn-metal:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
:root[data-theme="dark"] .btn-metal:focus-visible,
html[data-area="dev"] .btn-metal:focus-visible { outline-color: #F0DCAC; }

.btn-metal[disabled],
.btn-metal[aria-disabled="true"] {
  filter: grayscale(.85) brightness(.99);
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow:
    0 0 0 1px rgba(110,83,32,.4),
    inset 0 0 0 1px rgba(255,255,255,.4),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-metal.is-loading { color: transparent; pointer-events: none; }
.btn-metal.is-loading::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--m-ink);
  border-top-color: transparent;
  animation: metal-spin .7s linear infinite;
}
@keyframes metal-spin { to { transform: rotate(360deg); } }

/* Small metal control (preview zoom / full screen / search submit) — the
   radius steps down with the padding so nesting stays concentric. */
.btn-metal.pv-btn,
.btn-metal.btn-metal-sm {
  padding: 9px 16px;
  font-size: .84rem;
  border-radius: 9px;
}

/* ---- Selected tab / active filter chip: the same metal, seated rather than
   raised. These share one rule so a chip can never drift from a button. ---- */
.tab-metal[aria-selected="true"],
.tab-metal[aria-pressed="true"],
.filter-chip[aria-current],
.filter-chip[aria-pressed="true"] {
  color: var(--m-ink);
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px),
    linear-gradient(178deg, var(--m-top) 0%, var(--m-upper) 30%,
      var(--m-break) 49%, var(--m-lower) 51%, var(--m-bottom) 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 1px var(--m-rim),
    inset 0 0 0 1px var(--m-lining),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(78,54,10,.4);
}

/* ---- Metal hairline for panels that earn it (no face gradient). Used by the
   quiz, trust panel and lead-magnet panel so all three read as one family. -- */
.metal-rim,
.quiz,
.trust-panel,
.lead-panel {
  border: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-rim) 62%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(24,16,2,.08),
    0 14px 30px -18px rgba(24,16,2,.28);
}

/* ---- Trust badge: ivory face, metal edge, so it reads as a struck token --- */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 999px;
  border: 0;
  background:
    linear-gradient(178deg,
      color-mix(in srgb, var(--ivory) 96%, #fff) 0%,
      var(--ivory) 52%,
      color-mix(in srgb, var(--ivory) 88%, var(--m-break)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-rim) 55%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(24,16,2,.1),
    0 6px 14px -8px rgba(24,16,2,.22);
}
.trust-badge svg { color: var(--m-lower); flex: none; }
:root[data-theme="dark"] .trust-badge,
html[data-area="dev"] .trust-badge { color: var(--ink); }
:root[data-theme="dark"] .trust-badge svg,
html[data-area="dev"] .trust-badge svg { color: var(--m-top); }

/* Reduced motion: keep every state legible, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .btn-metal { transition: none; will-change: auto; }
  .btn-metal:hover, .btn-metal:active, .btn-metal.is-pressed { transform: none; }
}

/* == pages.css == */
/* ============ PAGE-SPECIFIC LAYOUTS ============ */

.block-tint { background: color-mix(in srgb, var(--card) 55%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-link { margin-top: 26px; font-size: .95rem; }
.more-link a:not(.btn):not(.btn-metal) { color: var(--gold-text); font-weight: 600; text-decoration: none; }

/* Trust badge row (homepage strip) */
.badge-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 18px 26px; }

/* Collection card grid */
.ccard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .ccard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ccard-grid { grid-template-columns: 1fr; } }

/* Look-inside teaser */
.inside-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .inside-teaser { grid-template-columns: 1fr; } }
/* Decorative (aria-hidden). overflow:hidden guarantees the rotated cards can
   never push the page wider than the viewport at any breakpoint — WCAG 1.4.10
   reflow was failing by 6px at 320px before this. */
.teaser-fan { position: relative; height: 340px; overflow: hidden; }
.teaser-fan img {
  position: absolute; width: 200px; height: 283px; object-fit: cover; object-position: top;
  border-radius: 6px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: #fff;
}
.teaser-fan img:nth-child(1) { left: 4%; top: 30px; transform: rotate(-5deg); }
.teaser-fan img:nth-child(2) { left: 32%; top: 0; z-index: 2; }
.teaser-fan img:nth-child(3) { left: 60%; top: 36px; transform: rotate(5deg); }
@media (max-width: 560px) {
  .teaser-fan { height: 260px; }
  .teaser-fan img { width: 150px; height: 212px; }
  .teaser-fan img:nth-child(1) { left: 2%; }
  .teaser-fan img:nth-child(2) { left: 25%; }
  .teaser-fan img:nth-child(3) { left: 50%; }
}
@media (max-width: 420px) {
  .teaser-fan { height: 205px; }
  .teaser-fan img { width: 116px; height: 164px; }
  .teaser-fan img:nth-child(1) { left: 0; top: 22px; }
  .teaser-fan img:nth-child(2) { left: 26%; }
  .teaser-fan img:nth-child(3) { left: 52%; top: 26px; }
}

/* How it works + scroll progress line */
.hiw { position: relative; padding-left: 34px; }
.hiw-line { position: absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hiw-line-fill { display: block; width: 100%; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: top; }
@media (prefers-reduced-motion: reduce) { .hiw-line-fill { transform: scaleY(1) !important; } }
.hiw-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.hiw-steps li { position: relative; max-width: 46em; }
.hiw-n {
  position: absolute; left: -34px; top: 2px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--gold); color: #23180a; font-size: .78rem; font-weight: 700;
  display: grid; place-items: center;
}
.hiw-steps h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; }
.hiw-steps p { color: var(--muted); font-size: .95rem; margin-top: 4px; }

/* CalmKit Standard band */
.standard-band { background: linear-gradient(150deg, #16577a, var(--navy) 55%, var(--navy-deep)); color: #F3F4F1; }
.standard-band .eyebrow { color: var(--gold-lt); }
.standard-band .block-head .sub { color: rgba(243,244,241,.75); }
.standard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .standard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .standard-grid { grid-template-columns: 1fr; } }
.std-point {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 18px;
}
.std-point h3 { font-family: var(--sans); font-size: .98rem; font-weight: 700; display: flex; gap: 9px; align-items: flex-start; }
.std-point h3 svg { color: var(--gold-lt); flex: none; margin-top: 3px; }
.std-point p { font-size: .87rem; color: rgba(243,244,241,.75); margin-top: 8px; }
.standard-band .btn-ghost { border-color: rgba(255,255,255,.3); color: #F3F4F1; }
.standard-band .btn-ghost:hover { border-color: var(--gold-lt); color: var(--gold-lt); }

/* Quiz */
.quiz { background: var(--card); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem); }
.quiz h3 { font-size: 1.35rem; }
.quiz-q { font-weight: 600; margin-top: 16px; }
.quiz-links { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.quiz-links a, .quiz-opt {
  display: block; width: 100%; text-align: left; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; font-size: .95rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: border-color .18s, background .18s, transform .16s var(--ease-spring);
}
.quiz-links a:hover, .quiz-opt:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.quiz-result { margin-top: 18px; }
.quiz-back { margin-top: 14px; }

/* Reassurance */
.reassure-band { text-align: center; }
.reassure-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.reassure-body { color: var(--muted); font-size: 1.05rem; margin-top: 14px; }

/* Final CTA */
.final-cta .dev-crosslink { margin-top: 34px; font-size: .88rem; color: var(--muted); }
.final-cta .dev-crosslink a { color: var(--gold-text); font-weight: 600; text-decoration: none; }

/* ============ CATALOG / COLLECTION PAGES ============ */
.page-head { padding: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.02em; }
.page-head .sub { color: var(--muted); margin-top: 12px; max-width: 46em; font-size: 1.04rem; }
.breadcrumbs { font-size: .82rem; color: var(--muted); padding-top: 18px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current] { color: var(--ink); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.filter-chip {
  font-size: .84rem; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  background: transparent; transition: color .18s, border-color .18s;
}
.filter-chip:hover { color: var(--ink); border-color: var(--gold); }
/* Active state (metal face + lining) is defined once in metallic.css. */
.filter-chip[aria-current], .filter-chip[aria-pressed="true"] { border-color: transparent; }

/* Compare bar */
.compare-bar {
  position: sticky; bottom: 0; z-index: 40; display: none;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 10px 0;
}
.compare-bar.active { display: block; }
.compare-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pcard-compare { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); position: relative; z-index: 2; }
.compare-table-wrap { overflow-x: auto; margin-top: 20px; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top; }
.compare-table th { font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Journey presentation (single-product collections) */
.journey { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 30px; }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; } }

/* ============ PRODUCT PAGE ============ */
.prod-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); padding: clamp(2rem, 4.5vw, 3.4rem) 0; align-items: start; }
@media (max-width: 900px) { .prod-hero { grid-template-columns: 1fr; } }
.prod-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; }
.prod-title-sub { color: var(--muted); margin-top: 10px; font-size: 1.02rem; }
.prod-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: .86rem; color: var(--muted); align-items: center; }
.review-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sage); }
.prod-buy { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.prod-delivery { font-size: .84rem; color: var(--muted); margin-top: 12px; }
.prod-section { padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; border-top: 1px solid var(--line); }
.prod-section h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 16px; }
.prod-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 800px) { .prod-cols { grid-template-columns: 1fr; } }
.inc-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.inc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.inc-list svg { color: var(--gold); flex: none; margin-top: 4px; }
.chapter-map { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: chap; }
.chapter-map li { display: flex; gap: 14px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.chapter-map li:last-child { border-bottom: 0; }
.chap-n { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: .8rem; }
.who-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.who-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.who-list svg { flex: none; margin-top: 4px; }
.who-for svg { color: var(--sage); }
.limits ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 12px; }
.limits li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.limits li::before { content: "—"; color: var(--clay); font-weight: 700; flex: none; }
.limit-note { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.limit-line { margin-top: 12px; font-size: .9rem; color: var(--sage); }
.src-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.src-list li { font-size: .82rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.src-fallback { color: var(--muted); font-size: .92rem; }
.trust-panel { background: var(--card); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.trust-panel h2 { display: flex; align-items: center; gap: 10px; }
.trust-panel .tp-line { font-size: .92rem; color: var(--muted); margin-top: 10px; }
.trust-panel .tp-line em { color: var(--sage); font-style: normal; font-weight: 600; }

/* ============ VIEWER ============ */
.viewer { display: grid; gap: 14px; }
.pv-stage-wrap { margin: 0; }
.pv-stage { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); max-width: 560px; }
.pv-stage img { display: block; width: 100%; height: auto; }
.pv-stage.zoomed { overflow: auto; max-height: 76vh; }
.pv-stage.zoomed img { width: 175%; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .pv-stage img { transition: opacity .2s ease, transform .2s ease; }
  .pv-stage img.switching { opacity: 0; transform: translateY(6px); }
}
.pv-note { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.pv-rail { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-thumb {
  padding: 3px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: border-color .18s, transform .16s var(--ease-spring);
}
.pv-thumb img { display: block; border-radius: 5px; background: #fff; }
.pv-thumb:hover { transform: translateY(var(--rise)); }
.pv-controls { display: flex; gap: 10px; }
.pv-btn { padding: 9px 16px; font-size: .84rem; }
.pv-dialog { border: 0; border-radius: var(--r-lg); padding: 22px; background: var(--card); color: var(--ink); max-width: min(92vw, 720px); box-shadow: var(--shadow); }
.pv-dialog::backdrop { background: rgba(4, 18, 26, .72); backdrop-filter: blur(3px); }
.pv-dialog img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.pv-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.pv-dialog-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; font-variant-numeric: tabular-nums; }

/* ============ LEAD MAGNET ============ */
.lead-panel {
  background: var(--card);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem);
}
.lead-panel h2 { font-size: 1.45rem; margin-top: 6px; }
.lead-panel .sub { color: var(--muted); font-size: .96rem; }
.lead-note { color: var(--muted); font-size: .84rem; margin-top: 12px; }

/* ============ CONTENT / LEGAL PAGES ============ */
.legal-prose { display: grid; gap: 10px; }
.legal-prose h2 { font-size: 1.25rem; margin-top: 1.4rem; }
.legal-prose p, .legal-prose li { color: var(--muted); font-size: .96rem; }
.legal-prose ul { display: grid; gap: 8px; margin-top: 6px; }
.legal-prose a { color: var(--gold-text); }
.legal-date { font-size: .82rem !important; margin-top: 1.6rem; }
.std-quote {
  margin: 14px 0 0; padding: 18px 22px; border-left: 3px solid var(--gold);
  background: var(--card); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif); font-style: italic; font-size: 1.06rem;
}
.li-buy { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ============ STYLEGUIDE ============ */
.sg-section { margin-top: 2.6rem; }
.sg-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sg-swatch { width: 130px; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; background: var(--card); }
.sg-swatch .sw { height: 64px; }
.sg-swatch .sw-name { font-size: .74rem; font-weight: 600; padding: 8px 10px; }

/* == labs.css == */
/* ============ DEV / LABS AREA — "Physical Digital" dark treatment ============
   Scoped under html[data-area="dev"]. The consumer store never gets this. */
html[data-area="dev"] body {
  background: #070C10;
  color: #E4E9EC;
  background-image:
    radial-gradient(110% 80% at 85% -10%, rgba(94,126,150,.14), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(185,134,43,.08), transparent 50%);
}
/* The dev/labs area is deliberately dark in BOTH themes — the theme toggle
   must not flip it to light tokens (:root[data-theme] would otherwise win
   the specificity race), so the same values are pinned for every state. */
html[data-area="dev"],
:root[data-theme="light"][data-area="dev"],
:root[data-theme="dark"][data-area="dev"] {
  --paper: #070C10;
  --card: #121A21;
  --ink: #E4E9EC;
  --muted: #91A0AB;
  --line: rgba(255,255,255,.1);
  --shadow: 0 20px 50px -24px rgba(0,0,0,.8);
  --shadow-sm: 0 8px 20px -12px rgba(0,0,0,.7);
  --gold: #DBB35B;
  --gold-lt: #EBCE86;
  --sage: #7FA089;
}
html[data-area="dev"] header.nav {
  background: rgba(7,12,16,.72);
}

/* Liquid-glass CTA: frosted void-black over blur, brushed-metal rim. */
html[data-area="dev"] .btn-glass {
  font-family: var(--sans); font-size: .92rem; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px; text-decoration: none;
  color: #F2E9D8;
  background:
    linear-gradient(105deg,
      transparent calc(var(--sx, 50%) - 16%),
      rgba(255,255,255,.14) var(--sx, 50%),
      transparent calc(var(--sx, 50%) + 16%)) no-repeat,
    rgba(5,8,11,.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--m-rim);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 8px 22px -10px rgba(0,0,0,.8);
  transition: transform .16s var(--ease-spring), box-shadow .2s ease;
  will-change: transform;
}
html[data-area="dev"] .btn-glass:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 16px 30px -12px rgba(0,0,0,.85);
}
html[data-area="dev"] .btn-glass:active { transform: scale(.97); }
html[data-area="dev"] .btn-glass:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

/* Magnetic pull applied by sheen.js only inside this area (pointer: fine,
   no reduced motion). The transform is set inline; this just eases release. */
html[data-area="dev"] .magnetic { transition: transform .35s cubic-bezier(.16,1.4,.3,1); will-change: transform; }

/* Custom cursor ring (dev/labs only; default cursor is NEVER hidden —
   the ring trails it as an accent, so accessibility is unaffected). */
html[data-area="dev"] .cursor-ring {
  position: fixed; left: 0; top: 0; width: 30px; height: 30px; border-radius: 999px;
  border: 1.5px solid rgba(228,190,106,.65); pointer-events: none; z-index: 200;
  transform: translate(-100px, -100px);
  transition: width .2s, height .2s, border-color .2s;
}
html[data-area="dev"] .cursor-ring.is-hovering { width: 44px; height: 44px; border-color: rgba(242,228,198,.9); }

/* Kinetic type reveal: headings slide up from behind a baseline mask. */
@media (prefers-reduced-motion: no-preference) {
  html[data-area="dev"] .kinetic { overflow: hidden; }
  html[data-area="dev"] .kinetic > span { display: inline-block; transform: translateY(110%); transition: transform .7s var(--ease-out); }
  html[data-area="dev"] .kinetic.is-visible > span { transform: none; }
  /* Slow-ease media scaling on scroll entry (110% → 100%). */
  html[data-area="dev"] .media-scale { overflow: hidden; border-radius: var(--r-lg); }
  html[data-area="dev"] .media-scale img { transform: scale(1.1); transition: transform 1.2s var(--ease-out); }
  html[data-area="dev"] .media-scale.is-visible img { transform: scale(1); }
}

/* Dev book cards */
html[data-area="dev"] .pcard { background: var(--card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-area="dev"] .pcard-media { background: #04070A; }