:root {
  --cream: #f2ece3;
  --cream-deep: #e7ddd0;
  --sand: #d8cabb;
  --ink: #17181a;
  --ink-soft: #55565a;
  --rose: #b98a6d;
  --line: rgba(23, 24, 26, 0.12);
  --nav-h: 68px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(1240px, 92vw); margin: 0 auto; }
em.accent { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- announcement + nav ---------- */
.announce {
  background: var(--ink);
  color: #f6f2ec;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 9px 16px;
}

/* scrolling ticker variant */
.announce.ticker {
  padding: 0;
  overflow: hidden;
  position: relative;
  --tick-speed: 34s;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.announce.ticker .tick-track {
  display: flex;
  width: max-content;
  animation: tick var(--tick-speed) linear infinite;
}
.announce.ticker:hover .tick-track { animation-play-state: paused; }
.announce.ticker .tick-run {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.announce.ticker .tick-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  white-space: nowrap;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.announce.ticker .tick-item::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rose);
  margin-left: 18px;
}
.announce.ticker .tick-item b {
  font-weight: 600;
  color: var(--rose);
  letter-spacing: 0.06em;
}
@keyframes tick {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce.ticker .tick-track { animation: none; }
}

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Opaque, not translucent: at 0.86 alpha the display headlines and the
     full-bleed photos underneath ghosted straight through the bar. */
  background: #f2ece3;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(23, 24, 26, 0.05);
}
.nav.on-dark {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.nav .wrap { display: flex; align-items: center; gap: 32px; width: min(1400px, 94vw); }

.brand {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand span { color: var(--rose); }

.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links > li { position: relative; list-style: none; display: flex; align-items: center; }
.nav-links button, .nav-links > li > a {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}
.nav-links .caret { font-size: 9px; opacity: 0.6; transition: transform 0.2s; }
.nav-links li.open .caret { transform: rotate(180deg); }
.nav ul { margin: 0; padding: 0; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.18s;
}
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: #33353a; }
.btn-ghost { border-color: currentColor; background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-sm { padding: 11px 20px; font-size: 13px; min-height: 44px; }

/* shop mega menu — brief p2: only one product for now */
.megamenu {
  position: absolute; top: calc(100% + 14px); left: -24px;
  width: 340px; padding: 18px; border-radius: 18px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: 0.2s;
}
/* bridges the gap under the Shop button so the pointer never leaves the menu */
.megamenu::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-links li.open .megamenu { opacity: 1; visibility: visible; transform: none; }
.megamenu-item { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; }
.megamenu-item:hover { background: var(--cream-deep); }
.megamenu-item img { width: 74px; height: 74px; object-fit: contain; }
.megamenu-item h4 { margin: 0 0 3px; font-size: 15px; }
.megamenu-item p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.megamenu-note { margin: 12px 4px 2px; font-size: 11.5px; color: var(--ink-soft); }

/* ---------- hero: blue sky + drifting clouds (brief p1) ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  background: linear-gradient(180deg, #1f6fb8 0%, #59a7dd 46%, #b9dcf1 100%);
}
.sky, .clouds {
  position: absolute; inset: 0;
  will-change: transform;
}
.sky { background-image: var(--sky-img); background-size: cover; background-position: center; }
/* The drifting haze is generated instead of being a second copy of the sky
   photo. Repeating a photograph puts a hard seam at every tile edge, and a
   hero-width layer sliding -50% drags its own trailing edge across the sky —
   both showed up as vertical lines. The layer is now double width so it always
   covers the hero, and each blob fades to zero well inside its tile so the
   repeat is genuinely seamless. */
.clouds {
  inset: 0 auto 0 0;
  width: 200%;
  background-repeat: repeat;
  background-size: 50% 100%;
  background-image:
    radial-gradient(26% 34% at 22% 32%, rgba(255,255,255,.42), rgba(255,255,255,0) 68%),
    radial-gradient(22% 28% at 50% 66%, rgba(255,255,255,.30), rgba(255,255,255,0) 70%),
    radial-gradient(24% 30% at 76% 28%, rgba(255,255,255,.34), rgba(255,255,255,0) 68%);
  opacity: 0.5;
  filter: blur(8px);
  animation: drift 90s linear infinite;
}
.clouds.slow {
  background-position: 17% 40%;
  opacity: 0.28;
  animation-duration: 160s;
  animation-direction: reverse;
  filter: blur(16px);
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .clouds { animation: none; } }

.hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 50, 0.34), rgba(10, 30, 50, 0.06) 45%, rgba(10, 30, 50, 0.3)); }

.hero-inner {
  position: relative; z-index: 2; text-align: center; color: #fff;
  padding: 28px 0 64px;
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(44px, 7.6vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-shadow: 0 4px 40px rgba(0, 20, 40, 0.3);
}
.hero .sub {
  margin: 14px auto 24px;
  font-size: clamp(15px, 1.7vw, 19px);
  max-width: 620px;
  opacity: 0.95;
}
.hero-ring-wrap {
  position: relative; margin: 20px auto 0;
  width: min(440px, 66vw); max-height: 40svh;
  display: flex; justify-content: center;
}
.hero-ring {
  width: 100%; height: auto; max-height: 36svh; object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 22, 46, 0.34));
  animation: float 8s ease-in-out infinite;
}

/* separate ground shadow — stays put and breathes inversely, so the ring reads as levitating */
.hero-ring-shadow {
  position: absolute; left: 50%; bottom: -26px; translate: -50% 0;
  width: 62%; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 20, 44, 0.42), rgba(0, 20, 44, 0) 70%);
  filter: blur(6px);
  animation: float-shadow 8s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-14px); } }
@keyframes float-shadow {
  0%, 100% { opacity: 0.85; transform: scaleX(1); }
  50% { opacity: 0.45; transform: scaleX(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ring, .hero-ring-shadow, .clouds { animation: none; }
}

.hero-tag {
  position: absolute; bottom: 26px; left: 0; right: 0; z-index: 2;
  text-align: center; color: rgba(255, 255, 255, 0.82);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}

/* ---------- generic sections ---------- */
section { position: relative; }
.pad { padding: clamp(72px, 10vw, 148px) 0; }
/* specs and charging share a background, so their two pads read as one hole */
#specs { padding-bottom: 0; }
.eyebrow {
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 18px;
}
h2.display {
  margin: 0 0 20px;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 600;
}
.lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 54ch; margin: 0 0 28px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.split.rev > *:first-child { order: 2; }
.media { border-radius: 22px; overflow: hidden; background: var(--cream-deep); }
.media img { width: 100%; height: 100%; object-fit: cover; }

.band-dark { background: #121316; color: #efe9e1; }
.band-dark .lead, .band-dark .eyebrow { color: #a8a49d; }
.band-cream { background: var(--cream-deep); }

/* ---------- color picker (brief p5: exactly two finishes) ---------- */
.picker { text-align: center; }
.picker-stage {
  position: relative; margin: 0 auto; width: min(680px, 88vw); aspect-ratio: 5 / 4;
  border-radius: 28px; background: #efe7dc; overflow: hidden;
}
.picker-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 0.5s, transform 0.5s;
}
.picker-stage img.active { opacity: 1; transform: none; }
.swatches {
  display: inline-flex; gap: 10px; align-items: center;
  margin-top: 26px; padding: 9px; border-radius: 999px;
  background: rgba(23, 24, 26, 0.06); backdrop-filter: blur(8px);
}
.swatch {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; outline: 0; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: 0.2s;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.06); }
.swatch.rose { background: linear-gradient(145deg, #e8bfa6, #b9805f); }
.swatch.white { background: linear-gradient(145deg, #f7f7f9, #b6bac0); }
.picker-name { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.picker-price { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

/* ---------- feature grid (brief p3 scroll order) ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card {
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--cream-deep); min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.card.tall { min-height: 520px; }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .card-body { position: relative; padding: 30px; }
.card.on-photo .card-body { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); }
.card.on-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6));
}
.card.on-photo .card-body { z-index: 2; }
.card h3 { margin: 0 0 8px; font-size: clamp(21px, 2.4vw, 30px); letter-spacing: -0.02em; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: 0.86; max-width: 42ch; }

/* ---------- app section (brief p6 + p8 real screenshots) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 44px; }
.tab {
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: inherit; transition: 0.18s;
}
.band-dark .tab { border-color: rgba(255, 255, 255, 0.18); }
.tab[aria-selected="true"] { background: #fff; color: #17181a; border-color: #fff; }

/* iPhone body: titanium-rail bezel, dynamic island and side buttons */
.phone {
  position: relative; border-radius: 13.5%/6.6%; padding: 2.6%;
  background: linear-gradient(155deg, #55585e, #1b1c1f 26%, #131417 66%, #4a4d53);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 11.4%/5.6%; background: #000; }
.phone::before {
  content: ''; position: absolute; z-index: 3; top: 3.4%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 2.6%; min-height: 11px; border-radius: 999px;
  background: #05060a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* right-hand power button, drawn just off the bezel edge */
.phone::after {
  content: ''; position: absolute; top: 24%; right: -2px; width: 3px; height: 11%;
  border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #6a6d73, #303338);
}

.app-stage { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(30px, 6vw, 88px); align-items: center; }
.app-visual { position: relative; }

/* ---------- app accordion (expanding panels, per Ian's video reference) ---------- */
.app-acc { display: flex; gap: 10px; height: 648px; }
.acc-panel {
  position: relative; flex: 0 1 clamp(44px, 4.4vw, 62px); min-width: clamp(44px, 4.4vw, 62px); overflow: hidden;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: #121316; cursor: pointer;
  transition: flex-grow 0.72s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.acc-panel.is-open { flex-grow: 1; cursor: default; }
.acc-bg {
  position: absolute; inset: -12%; background-size: cover; background-position: center 22%;
  filter: blur(14px) saturate(0.65) brightness(0.36); transform: scale(1.1);
  transition: filter 0.72s ease;
}
.acc-panel.is-open .acc-bg { filter: blur(30px) saturate(0.9) brightness(0.3); }
.acc-panel:not(.is-open):hover .acc-bg { filter: blur(14px) saturate(0.8) brightness(0.5); }
.acc-label {
  position: absolute; z-index: 3; left: clamp(14px, 1.5vw, 24px); bottom: 26px; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; color: #fff;
  white-space: nowrap; transition: opacity 0.35s ease;
}
.acc-panel.is-open .acc-label { opacity: 0; }
.acc-inner {
  position: relative; z-index: 2; height: 100%; box-sizing: border-box;
  /* the open panel can only ever be as wide as the wrap minus the closed rail,
     so cap the locked layout width to that instead of a fixed px or it clips */
  min-width: min(620px, calc(92vw - 500px)); padding: 40px clamp(28px, 3vw, 46px);
  display: grid; grid-template-columns: clamp(168px, 17vw, 236px) minmax(0, 1fr);
  gap: clamp(26px, 3.2vw, 46px); align-items: center;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.acc-panel.is-open .acc-inner { opacity: 1; transform: none; pointer-events: auto; }
.acc-inner .app-points { gap: 8px; margin-top: 18px; }
.acc-inner .app-copy h3 { font-size: clamp(24px, 2.6vw, 34px); }
.acc-inner .lead { font-size: 15px; }
.acc-inner .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.acc-inner .metric { padding: 12px 13px; }
.acc-inner .metric b { font-size: 17px; white-space: nowrap; }

.app-step { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #a8a49d; }
.app-copy h3 { margin: 0 0 14px; font-size: clamp(26px, 3.6vw, 46px); letter-spacing: -0.03em; }
.app-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.app-points li { position: relative; padding-left: 22px; font-size: 14.5px; color: #cfcbc4; }
.app-points li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
}

/* one-shot blur→focus resolve on tab swap; #appTabs sits outside .app-stage so
   the menu bar never re-renders and stays clickable throughout */
.app-visual, .app-copy { transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease; }
.app-stage.swapping .app-visual,
.app-stage.swapping .app-copy { opacity: 0; filter: blur(5px); transform: translateY(10px); transition-duration: 0.18s; }
.app-copy { transition-delay: 0.06s; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.metric { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 16px 18px; }
.metric b { display: block; font-size: 24px; letter-spacing: -0.02em; }
.metric span { font-size: 12px; color: #a8a49d; }

/* lifestyle photo row under the app tabs — brief p6 */
.life-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.life { border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 4 / 5; }
.life img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.life:hover img { transform: scale(1.05); }
.life figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
  color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.life::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.6)); }

/* ---------- generations strip (brief p4: young + older hands) ---------- */
.gen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gen { border-radius: 20px; overflow: hidden; background: #101114; aspect-ratio: 4 / 5; }
.gen img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- specs ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.spec { background: var(--cream); padding: 28px 24px; }
.spec b { display: block; font-size: 26px; letter-spacing: -0.02em; margin-bottom: 6px; }
.spec span { font-size: 13px; color: var(--ink-soft); }
.spec-download {
  margin-top: 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--cream-deep);
}
.spec-download h3 { margin: 0 0 5px; font-size: 19px; letter-spacing: -0.02em; }
.spec-download p { margin: 0; font-size: 13.5px; color: var(--ink-soft); max-width: 52ch; }

/* Specs and charging share one uninterrupted cream band, so two full section
   pads between them read as a hole rather than a break. */
#specs { padding-bottom: clamp(24px, 3vw, 44px); }
#charging { padding-top: clamp(24px, 3vw, 44px); }

/* ---------- branded spec sheet, opened in place instead of shipping the raw factory PDF ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(12, 12, 14, 0.62); backdrop-filter: blur(6px);
  padding: clamp(14px, 4vw, 44px); overflow-y: auto;
}
.sheet-overlay.open { display: block; }
.sheet {
  position: relative; max-width: 940px; margin: 0 auto; background: var(--cream);
  border-radius: 24px; overflow: hidden; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.45);
}
.sheet-close {
  position: absolute; top: 18px; right: 18px; z-index: 4; width: 40px; height: 40px;
  border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  background: rgba(255, 255, 255, 0.92); color: #17181a; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.sheet-head {
  position: relative; padding: clamp(34px, 5vw, 56px); color: #fff;
  background: #17181a; display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: 32px; align-items: center;
}
.sheet-head img { width: 100%; border-radius: 18px; }
.sheet-head h2 { margin: 8px 0 10px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; }
.sheet-head p { margin: 0; font-size: 14.5px; color: #cfcbc4; max-width: 46ch; }
.sheet-body { padding: clamp(28px, 4vw, 52px); }
.sheet-body h3 {
  margin: 34px 0 14px; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sheet-body h3:first-child { margin-top: 0; }
.sheet-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sheet-rows div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; background: var(--cream); padding: 13px 20px; font-size: 14px; }
.sheet-rows dt, .sheet-rows b { color: var(--ink-soft); font-weight: 500; }
.sheet-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.sheet-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--cream-deep); }
.sheet-foot {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-soft);
}
@media print {
  body > *:not(.sheet-overlay) { display: none !important; }
  .sheet-overlay { position: static; display: block; background: none; padding: 0; backdrop-filter: none; }
  .sheet { box-shadow: none; border-radius: 0; }
  .sheet-close { display: none; }
}

/* ---------- footer ---------- */
footer { background: #101114; color: #cfcac2; padding: 70px 0 44px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
footer h5 { margin: 0 0 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #8b8780; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a:hover { color: #fff; }
.foot-bottom { margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: #8b8780; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

.pad, .hero { scroll-margin-top: 80px; }

/* ---------- mobile nav ---------- */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; margin: 4px auto;
  background: currentColor; transition: 0.25s;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* tablet: keep two columns, just give the phone more room */
@media (max-width: 900px) {
  .phone { max-width: 340px; margin: 0 auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  /* below 900px the open panel is too narrow to hold two columns, so the
     accordion turns on its side: closed panels become labelled rows */
  .app-acc { flex-direction: column; height: auto; }
  .acc-panel { flex: 0 0 66px; min-width: 0; min-height: 66px; }
  .acc-panel.is-open { flex: 0 0 auto; }
  .acc-label { writing-mode: horizontal-tb; transform: none; left: 24px; bottom: 22px; }
  .acc-inner {
    min-width: 0; grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; height: auto;
    justify-items: center; text-align: center;
  }
  .acc-inner .phone { max-width: 210px; }
  .acc-inner .app-points { text-align: left; }
  .sheet-head { grid-template-columns: 1fr; }
  .sheet-head img { max-width: 200px; }
}

@media (max-width: 700px) {
  .split, .feat-grid, .app-stage, .gen-grid { grid-template-columns: 1fr; }
  .split.rev > *:first-child { order: 0; }
  .life-row { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .phone { max-width: 300px; }
  .app-visual { max-width: 300px; margin: 0 auto 34px; }

  .sheet-rows div { grid-template-columns: 1fr; gap: 3px; }
  .sheet-gallery { grid-template-columns: repeat(2, 1fr); }

  .nav-toggle { display: block; }
  /* Anchored to the nav's own bottom edge rather than a fixed 68px: the
     announce ticker sits above the nav at the top of the page, so a hard-coded
     offset made the panel overlap the bar it drops out of. */
  .nav .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 22px 22px; margin: 0;
    background: var(--cream); color: var(--ink);
    border-bottom: 1px solid rgba(23, 24, 26, 0.08);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: 0.25s;
  }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links > li { border-top: 1px solid rgba(23, 24, 26, 0.08); display: block; }
  .nav-links > li > a, .nav-links a, .nav-links button {
    display: block; width: 100%; text-align: left;
    padding: 15px 0; font-size: 16px; color: var(--ink);
  }
  .megamenu {
    position: static; width: auto; padding: 0; border: 0; box-shadow: none;
    border-radius: 0; background: none; transform: none;
    display: none;
  }
  .megamenu::before { display: none; }
  .nav-links li.open .megamenu { display: block; opacity: 1; visibility: visible; }
  .nav-links .megamenu-item { display: flex; padding: 4px 0 16px; }
  .megamenu-item img { width: 56px; height: 56px; }
  .megamenu-note { margin: 0 0 14px; }
  .hero { min-height: clamp(620px, 84svh, 860px); }
  .tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .tab { min-height: 44px; font-size: 14px; }
  footer ul a { display: inline-block; padding: 6px 0; }
}

/* =========================================================================
   CINEMATIC SCROLL MODULES
   Adapted from cinematic-site-components:
     · zoom-parallax  →  .zoomx   (index.html, hero → story interlude)
     · text-mask      →  .sheen   (index.html, gilded headline wipe)
     · sticky-cards   →  .stack-* (shop.html #health)
   Everything below degrades to a static, readable layout when JS/GSAP is
   absent: `motion-on` is only set on <html> by main.js once GSAP is live and
   the visitor has not asked for reduced motion.
   ========================================================================= */

/* ---------- 1. zoom parallax interlude ---------- */
.zoomx {
  position: relative;
  background: #0b0c0e;
  color: #efe9e1;
  isolation: isolate;
}
.zoomx-sticky {
  position: relative;
  min-height: 78svh;
  padding: clamp(80px, 12vw, 140px) 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.zoomx-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform;
}
.zoomx-glow {
  background:
    radial-gradient(ellipse 62% 54% at 50% 46%, rgba(185, 138, 109, 0.30), rgba(11, 12, 14, 0) 68%),
    radial-gradient(ellipse 90% 70% at 50% 108%, rgba(120, 96, 82, 0.22), rgba(11, 12, 14, 0) 70%);
}
.zoomx-word {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(96px, 27vw, 420px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(242, 236, 227, 0.055);
  user-select: none;
  white-space: nowrap;
}
/* static fallback: keep the ring in the upper band so the caption never sits on it */
.zoomx-ring { inset: 4% 0 46% 0; }
.motion-on .zoomx-ring { inset: 0; }
.zoomx-ring img {
  width: var(--zoom-ring-w, min(300px, 38vmin));
  height: auto;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.62));
}
/* scrim so the caption always sits on ink, never on the product */
.zoomx-sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(11, 12, 14, 0) 0%, rgba(11, 12, 14, 0.82) 46%, rgba(11, 12, 14, 0.97) 100%);
  z-index: 3;
  pointer-events: none;
}
.zoomx-copy {
  position: relative;
  z-index: 4;
  text-align: center;
  width: min(52ch, 88vw);
  margin: 0 auto;
  align-self: end;
  padding-bottom: 2vh;
}
.zoomx-copy .eyebrow { color: #9a938a; }
.zoomx-copy .display { margin-bottom: 14px; }
.zoomx-copy .lead { color: #a8a49d; margin: 0 auto; max-width: 44ch; }

.motion-on .zoomx { height: 320vh; --zoom-ring-w: min(380px, 46vmin); }
.motion-on .zoomx-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  padding: 0;
}
/* centered with auto margins, not translate: GSAP owns transform here and
   clears the independent translate/rotate/scale properties when it does */
.motion-on .zoomx-copy {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: clamp(48px, 11vh, 120px);
  align-self: auto;
  padding-bottom: 0;
}

/* ---------- 2. gilded headline wipe (text mask) ---------- */
.sheen { position: relative; }
.sheen-base { display: block; }
.sheen-fill {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  /* burnished rose gold — every stop stays >= 3:1 on the cream band (AA large) */
  background-image: linear-gradient(104deg, #5b3719 0%, #83552f 22%, #a0714b 44%, #7d5030 66%, #5b3719 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  clip-path: inset(0 100% 0 0);
}

/* ---------- 3. sticky card stack ---------- */
.stack-grid { width: min(880px, 100%); margin: 0 auto; }
.stack-card { margin-bottom: clamp(24px, 3vw, 40px); }
.stack-card:last-child { margin-bottom: 0; }

.motion-on .stack-grid { padding-bottom: 18vh; }
.motion-on .stack-card {
  position: sticky;
  will-change: transform;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}
.motion-on .stack-card:nth-of-type(1) { top: calc(var(--nav-h) + 44px); z-index: 1; }
.motion-on .stack-card:nth-of-type(2) { top: calc(var(--nav-h) + 72px); z-index: 2; }
.motion-on .stack-card:nth-of-type(3) { top: calc(var(--nav-h) + 100px); z-index: 3; }

/* ---------- mobile: same choreography, shorter track ---------- */
@media (max-width: 700px) {
  .motion-on .zoomx { height: 230vh; }
  .motion-on .zoomx-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; }
  .motion-on .zoomx-copy { opacity: 0; position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 7vh; align-self: auto; padding-bottom: 0; }
  .motion-on .zoomx-ring { inset: 0; }
  .zoomx-word { font-size: clamp(80px, 34vw, 200px); }
  .zoomx { --zoom-ring-w: min(260px, 58vw); }
  .motion-on .zoomx { --zoom-ring-w: min(300px, 62vw); }
  .motion-on .stack-grid { padding-bottom: 10vh; }
  .motion-on .stack-card:nth-of-type(1) { top: calc(var(--nav-h) + 16px); }
  .motion-on .stack-card:nth-of-type(2) { top: calc(var(--nav-h) + 34px); }
  .motion-on .stack-card:nth-of-type(3) { top: calc(var(--nav-h) + 52px); }
  .motion-on .stack-card { box-shadow: 0 22px 46px rgba(0, 0, 0, 0.46); }
}

@media (prefers-reduced-motion: reduce) {
  .zoomx { height: auto; }
  .zoomx-sticky { position: relative; top: auto; height: auto; }
  .zoomx-ring { inset: 4% 0 46% 0; }
  .zoomx-word { display: none; }
  .zoomx-copy { opacity: 1; position: relative; left: auto; bottom: auto; translate: none; }
  .sheen-fill { display: none; }
  .stack-card { position: static; }
}

/* =========================================================================
   PRODUCT DETAIL PAGE + CART DRAWER
   ========================================================================= */
.pdp-wrap { padding: clamp(30px, 5vw, 60px) 0 clamp(40px, 6vw, 80px); }
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }

/* ---------- gallery ---------- */
.pdp-gallery { min-width: 0; position: sticky; top: calc(var(--nav-h) + 20px); }
.pdp-stage {
  background: var(--cream-deep); border-radius: 22px; overflow: hidden;
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 12px; }
.pdp-thumb {
  padding: 0; border: 1px solid var(--line); background: var(--cream-deep);
  border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb.is-active { border-color: var(--ink); }

/* ---------- buy box ---------- */
.pdp-title { font-size: clamp(32px, 4vw, 46px); letter-spacing: -0.03em; margin: 6px 0 14px; line-height: 1.05; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-amount { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; }
.pdp-was { font-size: 15px; color: var(--ink-soft); text-decoration: line-through; }
.pdp-save { font-size: 12px; font-weight: 600; color: #1d6b45; background: #dff0e5; padding: 4px 9px; border-radius: 999px; }
.pdp-blurb { color: var(--ink-soft); line-height: 1.65; margin: 16px 0 8px; max-width: 46ch; }

.pdp-field { padding: 22px 0; border-top: 1px solid var(--line); }
.pdp-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 13.5px; }
.pdp-label span { color: var(--ink-soft); }
.pdp-label b { font-weight: 600; }
.pdp-label a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.pdp-note { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; }
.pdp-err { font-size: 12.5px; color: #b3261e; margin: 10px 0 0; }

.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  min-width: 48px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: transparent;
  font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.opt:hover { border-color: var(--ink); }
.opt.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.opt-swatch { width: 44px; min-width: 44px; border-radius: 50%; }
.opt-swatch.rose { background: linear-gradient(140deg, #e3b49c, #b3775c); }
.opt-swatch.white { background: linear-gradient(140deg, #f7f7f9, #b6bac0); }
.opt-swatch.is-active { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--ink); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.qty button { width: 46px; height: 46px; border: 0; background: transparent; font: inherit; font-size: 19px; cursor: pointer; }
.qty button:hover { background: var(--cream-deep); }
.qty span { min-width: 42px; text-align: center; font-size: 15px; font-weight: 600; }

.btn-block { display: block; width: 100%; text-align: center; margin-top: 8px; }
.pdp-stock { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }
.pdp-trust { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.pdp-trust li { font-size: 13.5px; color: var(--ink-soft); padding-left: 22px; position: relative; }
.pdp-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--rose); font-weight: 700; }

/* ---------- accordion ---------- */
.acc { margin-top: 26px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; padding: 16px 0; font-size: 14.5px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 19px; font-weight: 400; color: var(--ink-soft); }
.acc details[open] summary::after { content: "−"; }
.acc-body { padding: 0 0 18px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; }
.acc-body p { margin: 0 0 10px; }
.acc-note { font-size: 12.5px; margin-top: 12px; }
.ship-table { width: 100%; border-collapse: collapse; }
.ship-table td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ship-table tr:last-child td { border-bottom: 0; }
.ship-table b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.ship-table span { font-size: 12.5px; }
.ship-price { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); }

/* ---------- detail strip ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.detail { margin: 0; }
.detail img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: var(--cream-deep); }
.detail figcaption { padding: 16px 2px 0; }
.detail figcaption b { display: block; font-size: 15px; margin-bottom: 5px; }
.detail figcaption span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- cart button ---------- */
.cart-btn {
  border: 1px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 16px; min-height: 44px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.cart-count {
  background: var(--rose); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 19px; height: 19px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

/* ---------- drawer ---------- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(15, 16, 18, 0.45); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 100vw); background: var(--cream);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.16);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.drawer-close { border: 0; background: transparent; font-size: 27px; line-height: 1; cursor: pointer; width: 44px; height: 44px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-empty { color: var(--ink-soft); font-size: 14px; text-align: center; padding: 40px 0; }
.cart-item { display: grid; grid-template-columns: 68px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 68px; height: 68px; object-fit: cover; border-radius: 12px; background: var(--cream-deep); }
.cart-item h4 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.cart-item p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.cart-item .cart-remove { border: 0; background: transparent; font-size: 12px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 4px 0 0; }
.cart-item-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.drawer-foot { padding: 18px 24px 24px; border-top: 1px solid var(--line); }
.drawer-line { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 9px; }
.drawer-line.muted { color: var(--ink-soft); }
.drawer-line.total { font-size: 16px; padding-top: 10px; margin-bottom: 16px; border-top: 1px solid var(--line); }
.drawer-note { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }

/* ---------- pdp responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .detail-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
  .pdp-thumbs { display: flex; grid-template-columns: none; gap: 8px; width: 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumb { flex: 0 0 62px; scroll-snap-align: start; }
  .pdp-stage { touch-action: pan-y; }
  .pdp-stage { aspect-ratio: 1; }
  .cart-btn { padding: 9px 13px; font-size: 12.5px; }
}

/* ---------- cart line items ---------- */
.cart-count { background: var(--line); color: var(--ink-soft); }
.cart-count.has { background: var(--rose); color: #fff; }
.cart-item-info { display: flex; flex-direction: column; gap: 4px; }
.cart-item-info b { font-size: 14px; font-weight: 600; }
.cart-item-info > span { font-size: 12.5px; color: var(--ink-soft); }
.cart-item-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; border: 1px solid var(--line); border-radius: 999px; width: max-content; }
.cart-item-qty button { width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink); border-radius: 999px; }
.cart-item-qty button:hover { background: var(--cream-deep); }
.cart-item-qty span { min-width: 20px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-item-right b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cart-item-remove { border: 0; background: transparent; font-size: 12px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 0; }

/* ---------- full-bleed campaign band ---------- */
.camp-band {
  position: relative; min-height: clamp(420px, 62vh, 660px);
  background: var(--camp-img) center / cover no-repeat #101114;
  display: flex; align-items: flex-end; padding-bottom: clamp(30px, 5vh, 56px);
}
.camp-band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.78) 26%, rgba(10,11,13,0.42) 52%, rgba(10,11,13,0.1) 76%, rgba(10,11,13,0) 92%);
}
.camp-copy { position: relative; z-index: 1; color: var(--cream); max-width: 42ch; }
.camp-copy .eyebrow { color: rgba(242,236,227,0.6); }
.camp-copy .display { color: var(--cream); margin: 0; font-size: clamp(30px, 4vw, 54px); }
.camp-copy .lead { color: rgba(242,236,227,0.82); }
@media (max-width: 700px) {
  .camp-band { min-height: 400px; }
  /* the band loses ~40% of its height here, so the copy sits where the desktop
     scrim is still half transparent -- pull the dark stops up to match */
  .camp-band::after {
    background: linear-gradient(0deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.9) 42%, rgba(10,11,13,0.68) 66%, rgba(10,11,13,0.28) 86%, rgba(10,11,13,0) 100%);
  }
}

/* ---------- 360° turntable ---------- */
.turn-sec { background: var(--ink); color: var(--cream); }
.turn-sec .display { color: var(--cream); }
.turn-sec .eyebrow { color: rgba(242, 236, 227, 0.55); }
.turn-sec .lead { color: #a8a49d; }
.turn-head { text-align: center; max-width: 46ch; margin: 0 auto 26px; }
.turn {
  position: relative;
  width: min(560px, 88vw);
  aspect-ratio: 1;
  margin: 0 auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  border-radius: 50%;
}
.turn.grabbing { cursor: grabbing; }
.turn:focus-visible { box-shadow: 0 0 0 2px var(--rose); }
.turn::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 138, 109, 0.22), transparent 68%);
}
.turn-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.turn-hint {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(242, 236, 227, 0.08);
  border: 1px solid rgba(242, 236, 227, 0.16);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242, 236, 227, 0.82);
  backdrop-filter: blur(6px);
  transition: opacity 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}
.turn-hint.gone { opacity: 0; }
.turn-hint::before { content: '↔'; font-size: 15px; color: var(--rose); }
@media (max-width: 700px) {
  .turn { width: min(400px, 84vw); }
  .turn-hint { font-size: 11px; padding: 8px 14px; }
}

/* ---------- mobile sticky buy bar (PDP) ---------- */
.buybar { display: none; }
@media (max-width: 700px) {
  .buybar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(242, 236, 227, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform 0.28s ease;
  }
  .buybar.show { transform: none; }
  .buybar-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .buybar-info b { font-size: 15px; }
  .buybar-info span { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .btn { margin-left: auto; flex: 0 0 auto; padding: 13px 24px; min-height: 46px; }
  body.has-buybar footer { padding-bottom: 78px; }
  .drawer { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ============ two-generations touch section ============
   Fingertip positions were measured off the source frames: the young hand's
   tip sits at 70.3% / 54.5% of its own square, the older hand's at 31.2% /
   48.3%. Anchoring the layers 28.1% apart puts both tips on the same point,
   and translating each img by its own tip-Y keeps them aligned at any stage
   height. Percentages here are load-bearing — re-measure before changing. */
.touch {
  background: #000;
  height: 250vh;
  position: relative;
}
.touch-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 34px);
  /* the nav is fixed and translucent — centre the pane in the space below it */
  padding-top: var(--nav-h);
}
.touch-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 54ch;
  padding: 0 22px;
  color: var(--cream);
}
.touch-copy .display { font-size: clamp(30px, 4.6vw, 58px); }
.touch-copy .lead { color: #a9a49c; }

/* `isolation` + an explicit black backdrop keeps the screen blend deterministic
   no matter which ancestors happen to create a stacking context. */
.touch-stage {
  position: relative;
  /* full-bleed so the forearms crop at the screen edge and read as entering
     frame, rather than stopping dead in the middle of the canvas. */
  width: 100vw;
  aspect-ratio: 3 / 1;
  flex: 0 0 auto;
  background: #000;
  isolation: isolate;
}
/* the blend has to sit on the wrapper: GSAP transforms the wrapper, and a
   transformed element would isolate a blended child from the other hand. */
.touch-hand {
  position: absolute;
  top: 50%;
  width: 71.9%;
  mix-blend-mode: screen;
}
.th-l { left: 0; }
.th-r { left: 28.1%; }
.touch-hand img {
  display: block;
  width: 100%;
  height: auto;
}
.th-l img { transform: translateY(-54.5%); }
.th-r img { transform: translateY(-48.3%); }

/* the spark sits exactly on the shared fingertip point */
.touch-spark {
  position: absolute;
  left: 50.5%;
  top: 50%;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(233, 199, 176, 0.5), rgba(185, 138, 109, 0.22) 38%, transparent 68%);
}

@media (max-width: 700px) {
  .touch { height: 220vh; }
  /* wider than the viewport on purpose: the forearms crop at the screen edges
     so the hands themselves stay large enough to read. */
  .touch-stage { width: 162vw; aspect-ratio: 1.75 / 1; }
  .touch-spark { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
}
@media (prefers-reduced-motion: reduce) {
  .touch { height: auto; }
  .touch-sticky { position: static; height: auto; padding: 96px 0; }
}

/* ---------- ring measurement chart ---------- */
/* ---------- illustrated "how to measure" cards ---------- */
/* auto-fit rather than a fixed 3 columns: these cards sit both in the narrow PDP
   accordion and in the full-width shop section, so they reflow off their own width */
.size-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin: 16px 0 22px; }
.size-method { margin: 0; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.42); }
.size-method svg {
  display: block; width: 100%; height: auto; margin-bottom: 12px;
  fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round;
}
.size-method svg .mark { stroke: var(--rose); }
.size-method svg .faint { stroke-width: 1.7; opacity: 0.4; }
.size-method figcaption { font-size: 12.5px; line-height: 1.6; }
.size-method figcaption b:first-child { display: block; margin-bottom: 4px; color: var(--ink); font-size: 12px; letter-spacing: 0.02em; }

/* Methods and table sit side by side: stacked full-width they each stop short of
   the wrap and leave a ragged column of dead cream down the right. */
.sizing-body {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.sizing-body .size-methods.lg { grid-template-columns: 1fr; gap: 14px; max-width: none; margin: 0; }
.sizing-body .size-method { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: center; padding: 20px 24px; }
.sizing-body .size-method svg { width: 96px; margin: 0; }
.sizing-body .size-table.wide { max-width: none; width: 100%; }
@media (max-width: 900px) {
  .sizing-body { grid-template-columns: 1fr; gap: 30px; }
  .sizing-body .size-method { grid-template-columns: 72px 1fr; gap: 16px; }
  .sizing-body .size-method svg { width: 72px; }
}

/* the shop section is full width, so the same cards can breathe */
.size-methods.lg { gap: 20px; max-width: 940px; margin: 26px 0 34px; }
.size-methods.lg .size-method { padding: 24px 24px 26px; border-radius: 20px; }
.size-methods.lg .size-method svg { margin-bottom: 18px; stroke-width: 2.8; }
.size-methods.lg figcaption { font-size: 14px; }
.size-methods.lg figcaption b:first-child { font-size: 12.5px; margin-bottom: 6px; }

.size-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.size-table th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0 0 10px; border-bottom: 1px solid var(--line);
}
.size-table td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.size-table tbody tr:last-child td { border-bottom: 0; }
.size-table td:first-child { font-weight: 600; color: var(--ink); }
.size-table th + th, .size-table td + td { text-align: right; }
/* the shop page has room for a card treatment; the PDP accordion does not */
/* separate borders, not collapse: the collapsing model discards padding on the
   table box itself, which left the text flush against the card edge */
.size-table.wide {
  border-collapse: separate; border-spacing: 0;
  max-width: 620px; font-size: 15px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 18px; padding: 8px 26px;
}
.size-note { font-size: 13px; color: var(--ink-soft); margin-top: 16px; max-width: 60ch; }
.fine { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }

.camp-lead { max-width: 46ch; margin-top: 14px; }

@media (max-width: 700px) {
  .size-table.wide { padding: 4px 18px; font-size: 14px; }
  .size-methods.lg { gap: 14px; margin: 20px 0 26px; }
  .size-methods.lg .size-method { padding: 18px 18px 20px; }
  .size-methods.lg .size-method svg { margin-bottom: 14px; }
  .size-methods.lg figcaption { font-size: 13.5px; }
}

/* ============ checkout ============ */
#checkout { padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 90px)); }

.co-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
/* a display value on the class outranks the UA rule for [hidden] */
.co-grid[hidden] { display: none; }

.co-block { border: 0; padding: 0; margin: 0 0 38px; }
.co-block legend {
  padding: 0; margin-bottom: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.co-row { display: grid; gap: 18px; margin-bottom: 18px; }
.co-row.two { grid-template-columns: 1fr 1fr; }
.co-row.three { grid-template-columns: 0.8fr 1.2fr 1.2fr; }
.co-row:last-child { margin-bottom: 0; }

.co-field { display: block; min-width: 0; }
.co-field > span {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.co-field > span i { font-style: normal; font-weight: 400; color: var(--ink-soft); }

.co-field input,
.co-field select,
.co-field textarea {
  width: 100%; padding: 14px 16px;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.co-field textarea { resize: vertical; min-height: 88px; }
.co-field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 40px;
}
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus {
  outline: 0; border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(185, 138, 109, 0.16);
}
.co-field.invalid input,
.co-field.invalid select { border-color: #b4483c; }

.co-err { display: none; font-style: normal; font-size: 12.5px; color: #b4483c; margin-top: 6px; }
.co-field.invalid .co-err { display: block; }

#placeOrder[disabled] { opacity: 0.4; cursor: not-allowed; }

.co-legal { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 16px 0 0; max-width: 56ch; }
.co-formerr {
  margin: 16px 0 0; padding: 13px 16px; border-radius: 12px;
  background: rgba(180, 72, 60, 0.09); color: #8f3529; font-size: 13.5px;
}

.co-summary {
  position: sticky; top: calc(var(--nav-h) + 22px);
  background: var(--cream-deep); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 26px 24px;
}
.co-summary h3 {
  margin: 0 0 20px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.co-item { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.co-item img { width: 62px; height: 62px; object-fit: cover; border-radius: 12px; flex: none; }
.co-item-info { flex: 1; min-width: 0; }
.co-item-info b { display: block; font-size: 14px; font-weight: 600; }
.co-item-info span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.co-item-price { font-size: 14px; font-weight: 600; white-space: nowrap; }

.co-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; padding: 7px 0; }
.co-line.muted { color: var(--ink-soft); }
.co-line.total {
  margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 17px; font-weight: 600;
}
.co-empty { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 18px; }
.co-empty a { text-decoration: underline; text-underline-offset: 3px; }

.co-done { max-width: 60ch; padding: clamp(20px, 4vw, 48px) 0; }
.co-done .lead { margin-bottom: 32px; }

@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 620px) {
  .co-row.two, .co-row.three { grid-template-columns: 1fr; }
}