/* =========================================================
   SILTERA — Design System v2
   Cinematic luxury, Montserrat-led, parallax-driven
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Palette — navy + silver core, champagne + rose as 5% accents */
  --navy-deep:   #060D24;
  --navy:        #0A1535;
  --navy-2:      #131F44;
  --navy-3:      #1E2C58;
  --navy-glow:   #2A3D78;
  --silver:      #D8DCE5;
  --silver-2:    #9BA3B5;
  --silver-3:    #6C7488;
  --champagne:   #D4B888;
  --champagne-2: #B8985F;
  --rose:        #E091B7;
  --rose-deep:   #C26A92;
  --ivory:       #F4F1EC;
  --white:       #FFFFFF;

  /* Type — Montserrat-led for modern luxury, Pinyon Script for romantic accent */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Pinyon Script', 'Brush Script MT', cursive;

  /* Scale */
  --container: 1320px;
  --gutter:    32px;
  --nav-h:     94px;

  /* Motion */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .25s;
  --dur:      .45s;
  --dur-slow: .8s;

  /* Z */
  --z-nav: 50;
  --z-modal: 100;

  /* Borders */
  --line-gold:   1px solid rgba(212, 184, 136, .25);
  --line-silver: 1px solid rgba(216, 220, 229, .12);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ivory);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--champagne); color: var(--navy); }

/* ---------- UTILITIES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.script {
  font-family: var(--font-script);
  color: var(--rose);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.center { text-align: center; }

/* Section primitives */
section { position: relative; padding: 160px 0; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 32px;
}
.section-eyebrow::before,
.center .section-eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--champagne);
}
.center .section-eyebrow { margin-inline: auto; }

/* Section titles — Montserrat thin + bold mix */
.section-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.section-title strong { font-weight: 700; }
/* Script word — colleague's proven settings: small, tight line-height, inline */
.section-title .script {
  font-size: 1.15em;
  line-height: .7;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 .04em;
}

.section-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--silver);
  font-weight: 300;
  max-width: 620px;
  margin-inline: auto;
}
/* In left-aligned columns, anchor to the left instead of centering the box */
.italian-content .section-intro,
.perf-top .section-intro { margin-inline: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 38px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.btn-primary {
  background: var(--champagne);
  color: var(--navy);
  border: 1px solid var(--champagne);
}
.btn-primary:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--ivory);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(224, 145, 183, .25);
}
.btn-primary::after { content: "→"; font-size: 16px; transition: transform var(--dur) var(--ease); }
.btn-primary:hover::after { transform: translateX(6px); }

.btn-ghost {
  background: rgba(10, 21, 53, .25);
  color: var(--ivory);
  border: 1px solid rgba(216, 220, 229, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--champagne);
  color: var(--champagne);
  background: rgba(212, 184, 136, .08);
}

/* Reveal base state */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .24s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .36s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .48s; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: linear-gradient(180deg, rgba(6, 13, 36, .55) 0%, rgba(6, 13, 36, 0) 100%);
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.nav.is-scrolled {
  background: rgba(6, 13, 36, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: var(--line-gold);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1600px;
  margin-inline: auto;
  padding: 22px 48px;
  transition: padding var(--dur) var(--ease);
}
.nav.is-scrolled .nav-inner { padding: 16px 48px; }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; transition: height var(--dur) var(--ease); }
.nav.is-scrolled .nav-logo img { height: 36px; }

.nav-links {
  display: flex;
  gap: 44px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--silver);
  transition: color var(--dur-fast) var(--ease);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--champagne); }
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-cta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  border: 1px solid var(--champagne);
  padding: 12px 24px;
  color: var(--champagne);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--champagne); color: var(--navy); }

.nav-menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
  color: var(--ivory);
}
.nav-menu-toggle span {
  display: block;
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: currentColor;
  transition: all var(--dur) var(--ease);
}
.nav-menu-toggle span:nth-child(1) { top: 11px; }
.nav-menu-toggle span:nth-child(2) { top: 16px; }
.nav-menu-toggle span:nth-child(3) { top: 21px; }
.nav-menu-toggle.is-open span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.nav-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-menu-toggle.is-open span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 800px;
  width: 100%;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero-bg {
  position: absolute;
  inset: 0 -4% -4% -4%;
  z-index: 0;
  background-size: cover;
  background-position: center 40%;
  /* anchor the Ken Burns zoom to the top so the model's head stays
     visible throughout the animation instead of being pushed off-screen */
  transform-origin: center top;
  will-change: transform;
  transform: scale(1);
  animation: heroKenBurns 22s var(--ease-out) forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(6, 13, 36, .88) 0%, rgba(6, 13, 36, .55) 38%, rgba(6, 13, 36, .15) 68%, rgba(6, 13, 36, 0) 100%),
    linear-gradient(180deg, rgba(6, 13, 36, .25) 0%, rgba(6, 13, 36, 0) 30%, rgba(6, 13, 36, .55) 100%);
}
/* Frame starts BELOW the nav so it never overlaps logo/links */
.hero-frame {
  position: absolute;
  top: calc(var(--nav-h) + 16px);
  left: 40px;
  right: 40px;
  bottom: 40px;
  border: var(--line-gold);
  z-index: 2;
  pointer-events: none;
}
.hero-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid var(--champagne);
  z-index: 3;
  pointer-events: none;
}
.hero-corner.tl { top: calc(var(--nav-h) + 16px); left: 40px; border-right: none; border-bottom: none; }
.hero-corner.tr { top: calc(var(--nav-h) + 16px); right: 40px; border-left: none; border-bottom: none; }
.hero-corner.bl { bottom: 40px; left: 40px; border-right: none; border-top: none; }
.hero-corner.br { bottom: 40px; right: 40px; border-left: none; border-top: none; }

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 100%;
  padding: calc(var(--nav-h) + 56px) 96px 140px;
}
.hero-text { max-width: 760px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 1.2s var(--ease-out) .3s forwards;
}
.hero-eyebrow::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--champagne);
}

/* Hero h1 — Montserrat extralight 200 + bold mix */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 96px);
  font-weight: 200;
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-bottom: 36px;
  text-shadow: 0 4px 32px rgba(0, 0, 0, .35);
}
.hero h1 .word {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: heroFadeUp 1.2s var(--ease-out) forwards;
}
.hero h1 .word:nth-child(1) { animation-delay: .5s; }
.hero h1 .word:nth-child(2) { animation-delay: .75s; }
.hero h1 .word:nth-child(3) { animation-delay: 1s; }
.hero h1 strong { font-weight: 700; }
.hero h1 .word.script-word {
  font-family: var(--font-script);
  color: var(--rose);
  text-transform: none;
  font-size: 1.08em;
  line-height: .9;
  letter-spacing: 0;
  font-weight: 400;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .45);
  padding: .05em 0 .1em;
}
@keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }

.hero-sub {
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--ivory);
  max-width: 520px;
  margin-bottom: 40px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 1.2s var(--ease-out) 1.3s forwards;
}
.hero-ctas {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 1.2s var(--ease-out) 1.55s forwards;
}

/* Hero meta — tucked into corners with safer offsets */
.hero-meta {
  position: absolute;
  bottom: 64px;
  right: 96px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: heroFadeUp 1.2s var(--ease-out) 1.8s forwards;
  text-align: right;
}
.hero-meta-item {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--silver);
}
.hero-meta-item strong {
  display: block;
  color: var(--champagne);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.hero-scroll {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.hero-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--champagne) 0%, transparent 100%);
  animation: scrollBob 2.2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50% { transform: scaleY(.6); transform-origin: top; }
}

/* ---------- TRUST STRIP — original flat design + per-number radial glow ---------- */
.trust {
  background: var(--navy-2);
  padding: 56px 0;
  border-block: var(--line-gold);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.trust-item {
  position: relative;
  text-align: center;
  padding: 12px 24px;
  border-right: 1px solid rgba(212, 184, 136, .18);
}
/* Soft golden radial glow behind each number (the bit you liked) */
.trust-item::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 140px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(212, 184, 136, .12) 0%, rgba(212, 184, 136, .04) 90%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
.trust-item:last-child { border-right: none; }
.trust-item > * { position: relative; z-index: 1; }
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--champagne);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.trust-item span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--silver);
}

/* ---------- RANGE — Pinned product reveals ---------- */
.range {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-2) 100%);
  padding-bottom: 80px;
}
.range-intro {
  text-align: center;
  padding-bottom: 80px;
}

.product-reveal {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 100px 0;
}
.product-reveal:nth-child(even) { direction: rtl; }
.product-reveal:nth-child(even) > * { direction: ltr; }

/* Default product-visual — for opaque hero-style images */
.product-visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(212, 184, 136, .25);
  background: var(--navy-3);
}
.product-visual::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(244, 241, 236, .15);
  z-index: 2;
  pointer-events: none;
}
.product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  margin-top: 5%;
}

/* Transparent-product variant — radial glow backdrop with contained product */
.product-visual.is-transparent {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212, 184, 136, .22) 0%, rgba(212, 184, 136, .08) 30%, transparent 70%),
    radial-gradient(ellipse 90% 100% at 50% 50%, var(--navy-3) 0%, var(--navy-2) 50%, var(--navy-deep) 100%);
  border-color: rgba(212, 184, 136, .35);
}
.product-visual.is-transparent::before {
  /* Inner frame still present */
  border-color: rgba(212, 184, 136, .2);
}
/*.product-visual.is-transparent::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 24px;
  background: radial-gradient(ellipse, rgba(212, 184, 136, .35) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 1;
}*/
.product-visual.is-transparent img {
  object-fit: contain;
  /* First number = top/bottom breathing room. Bigger % = smaller product
     (more margin), which also keeps the scroll-zoom from clipping the top. */
  padding: 15% 13%;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5));
}

/* Crew Socks ONLY — shrink and center the product image without touching the
   leggings (Product 1) or contouring socks (Product 2). Targets the
   `product-reveal--crew` modifier class on Product 3's <article>.
   The padding above still applies; this rule only narrows the image and
   centers it. The GSAP parallax (transform) keeps working unchanged.
   Tune: lower the % to shrink further (e.g. 70%), raise to grow (e.g. 90%). */
.product-reveal--crew .product-visual.is-transparent img {
  width: 80%;
  display: block;
  margin: auto;
}

/* Pinkish glow variant for socks specifically */
.product-visual.is-transparent.glow-rose {
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(224, 145, 183, .25) 0%, rgba(212, 184, 136, .1) 30%, transparent 70%),
    radial-gradient(ellipse 90% 100% at 50% 50%, var(--navy-3) 0%, var(--navy-2) 50%, var(--navy-deep) 100%);
}
.product-visual.is-transparent.glow-rose::after {
  background: radial-gradient(ellipse, rgba(224, 145, 183, .4) 0%, transparent 70%);
}

.product-visual-tag {
  position: absolute;
  top: 32px;
  left: 32px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--champagne);
  background: rgba(6, 13, 36, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 16px;
  border: 1px solid rgba(212, 184, 136, .35);
  z-index: 3;
}
.product-visual-index {
  position: absolute;
  bottom: 32px;
  right: 32px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--ivory);
  z-index: 3;
  letter-spacing: .04em;
}
.product-visual-index small {
  font-size: .5em;
  color: var(--silver-2);
  letter-spacing: .3em;
}

.product-copy { padding-inline: 16px; }
.product-copy .tagline {
  font-family: var(--font-script);
  color: var(--rose);
  font-size: 36px;
  line-height: 1;
  margin-bottom: 18px;
}
.product-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 200;
  line-height: 1.05;
  color: var(--ivory);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 28px;
}
.product-copy h3 strong { font-weight: 700; }
.product-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--silver);
  margin-bottom: 32px;
  max-width: 480px;
}
.product-features {
  list-style: none;
  margin-bottom: 40px;
  border-top: var(--line-silver);
}
.product-features li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: var(--line-silver);
  font-size: 13px;
  color: var(--silver);
  font-weight: 400;
  letter-spacing: .04em;
}
.product-features li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: var(--champagne);
  border-radius: 50%;
  flex-shrink: 0;
}
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--champagne);
  transition: gap var(--dur) var(--ease);
}
.product-cta:hover { gap: 24px; color: var(--rose); border-color: var(--rose); }
.product-cta::after { content: "→"; font-size: 16px; }

/* ---------- ITALIAN MASTERY ---------- */
.italian {
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-deep) 100%);
}
.italian-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: start;
}
.italian .section-title { font-size: clamp(30px, 4vw, 56px); }
.italian .italian-content { padding-top: 8px; }
.italian-visual {
  position: relative;
  aspect-ratio: 4/5;
  border: var(--line-gold);
  overflow: hidden;
  background: var(--navy-3);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.italian-visual:hover { transform: scale(1.01); }
.italian-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease);
}
.italian-visual:hover img { transform: scale(1.04); }
.italian-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 13, 36, .15) 0%, rgba(6, 13, 36, .7) 100%);
  z-index: 1;
}
.italian-visual::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(244, 241, 236, .18);
  z-index: 2;
  pointer-events: none;
}

/* Play button overlay */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid var(--champagne);
  background: rgba(6, 13, 36, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
  transition: all var(--dur) var(--ease);
}
.video-play::before {
  content: "";
  width: 0; height: 0;
  border-left: 18px solid currentColor;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 6px;
}
.video-play::after {
  /* Pulsing ring */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--champagne);
  opacity: .6;
  animation: playPulse 2.6s ease-out infinite;
}
@keyframes playPulse {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.italian-visual:hover .video-play {
  background: var(--champagne);
  color: var(--navy);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 20px 60px rgba(212, 184, 136, .35);
}

.italian-visual-caption {
  position: absolute;
  bottom: 48px;
  left: 48px;
  right: 48px;
  z-index: 3;
  text-align: center;
  color: var(--ivory);
  pointer-events: none;
}
.italian-visual-caption div {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
}
.italian-visual-caption strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.italian-bullets {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border-top: var(--line-silver);
}
.bullet {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: var(--line-silver);
}
.bullet-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  color: var(--champagne);
  line-height: 1.2;
  letter-spacing: .04em;
}
.bullet h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.bullet p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--silver);
  max-width: 460px;
}

/* ---------- VIDEO MODAL ---------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(6, 13, 36, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease);
}
.video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16/9;
  background: var(--navy-deep);
  border: var(--line-gold);
  transform: scale(.94);
  transition: transform var(--dur) var(--ease);
}
.video-modal.is-open .video-modal-inner { transform: scale(1); }
.video-modal-inner iframe { width: 100%; height: 100%; border: none; display: block; }
.video-modal-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  color: var(--ivory);
  font-size: 28px;
  line-height: 1;
  transition: color var(--dur) var(--ease);
}
.video-modal-close:hover { color: var(--champagne); }
.video-modal-close::before { content: "×"; }

/* ---------- PILLARS — atmospheric depth sample ---------- */
.pillars {
  position: relative;
  overflow: hidden;
  /* Subtle gradient bleed at the bottom — fades into Material's navy (next section).
     Top stays navy-deep to flow cleanly from Italian's navy-deep bottom. */
  background:
    linear-gradient(180deg,
      var(--navy-deep) 0%,
      var(--navy-deep) 88%,
      var(--navy) 100%);
}

/* Ambient atmosphere — three layers in one pseudo-element:
   (a) soft champagne "stage light" radial bloom above the title
   (b) faint vertical warp threads — gold textile suggestion
   (c) faint horizontal weft threads — silver textile suggestion */
.pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* (a) Top-center stage light */
    radial-gradient(ellipse 70% 45% at 50% 8%,
      rgba(212, 184, 136, .07) 0%,
      rgba(212, 184, 136, .02) 35%,
      transparent 65%),
    /* (b) Vertical warp threads — wide spacing, very low opacity */
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 119px,
      rgba(212, 184, 136, .022) 120px,
      transparent 121px),
    /* (c) Horizontal weft threads — even fainter */
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 13px,
      rgba(216, 220, 229, .012) 14px,
      transparent 15px);
  pointer-events: none;
}

/* Secondary ambient — faint side-light glow from the right edge,
   suggesting an off-screen warm light source */
.pillars::after {
  content: "";
  position: absolute;
  top: 30%;
  right: 0;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse 70% 60% at 100% 50%,
    rgba(224, 145, 183, .025) 0%,
    transparent 60%);
  pointer-events: none;
}

/* Container sits above the atmosphere */
.pillars > .container { position: relative; z-index: 1; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 88px;
  position: relative;
  z-index: 1;
}
.pillar {
  padding: 48px 32px 40px;
  background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy-2) 100%);
  border: 1px solid rgba(212, 184, 136, .15);
  position: relative;
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}
.pillar::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pillar:hover {
  transform: translateY(-8px);
  border-color: var(--champagne);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}
.pillar:hover::before { opacity: 1; }
/* Pillar icons are now <img> SVGs (champagne baked into the files).
   width/height is the on-screen size — change both to resize the icon. */
.pillar-icon { display: block; width: 75px; height: 75px; margin: 0 auto 32px; object-fit: contain; }
.pillar h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.3;
}
.pillar p { font-size: 14px; line-height: 1.7; color: var(--silver); }

/* ---------- MATERIAL — Four Elements ---------- */
.material { background: var(--navy); position: relative; overflow: hidden; }
.material::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1600px; height: 1600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 184, 136, .05), transparent 55%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.material-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 88px;
  position: relative;
  z-index: 1;
}
.atom {
  position: relative;
  padding: 56px 28px 40px;
  border: 1px solid rgba(216, 220, 229, .12);
  background: rgba(19, 31, 68, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  text-align: center;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  transition: all var(--dur) var(--ease);
}
.atom:hover {
  border-color: var(--champagne);
  transform: translateY(-10px);
  background: rgba(30, 44, 88, .5);
}
.atom-bg { position: absolute; inset: 0; z-index: 0; opacity: .55; transition: opacity var(--dur-slow) var(--ease); pointer-events: none; }
.atom:hover .atom-bg { opacity: .95; }

.atom-pt .atom-bg { background: radial-gradient(circle at 50% 30%, rgba(212, 184, 136, .42) 0%, rgba(156, 129, 84, .12) 40%, transparent 70%); }
.atom-pt .atom-bg::before, .atom-pt .atom-bg::after {
  content: ""; position: absolute; top: 30%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%);
}
.atom-pt .atom-bg::before { width: 260px; height: 260px; border: 1px solid rgba(212, 184, 136, .32); animation: orbit 30s linear infinite; }
.atom-pt .atom-bg::after { width: 320px; height: 320px; border: 1px dashed rgba(212, 184, 136, .2); animation: orbit 50s linear infinite reverse; }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.atom-si .atom-bg { background: radial-gradient(circle at 50% 30%, rgba(244, 241, 236, .25) 0%, rgba(224, 145, 183, .08) 40%, transparent 70%); }
.atom-si .atom-bg::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(244, 241, 236, .04) 3px, rgba(244, 241, 236, .04) 5px);
}

.atom-tz .atom-bg { background: radial-gradient(circle at 50% 30%, rgba(123, 157, 184, .4) 0%, rgba(74, 111, 140, .18) 40%, transparent 70%); }
.atom-tz .atom-bg::before, .atom-tz .atom-bg::after {
  content: ""; position: absolute; top: 30%; left: 50%; width: 140px; height: 140px; border-radius: 50%;
  border: 2px solid rgba(123, 157, 184, .4); transform: translate(-50%, -50%);
  animation: pulseWave 3.2s ease-out infinite;
}
.atom-tz .atom-bg::after { animation-delay: 1.1s; border-color: rgba(123, 157, 184, .22); }
@keyframes pulseWave {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.atom-to .atom-bg { background: radial-gradient(circle at 50% 30%, rgba(155, 107, 148, .35) 0%, rgba(91, 52, 107, .15) 40%, transparent 70%); }
.atom-to .atom-bg::before {
  content: ""; position: absolute; top: 30%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--champagne); transform: translate(-50%, -50%);
  box-shadow:
    -70px -22px 0 -2px rgba(212, 184, 136, .55),
    55px 32px 0 -1px rgba(212, 184, 136, .45),
    -30px 56px 0 -2px rgba(212, 184, 136, .55),
    78px -12px 0 -1px rgba(212, 184, 136, .35),
    -90px 32px 0 -2px rgba(212, 184, 136, .45),
    25px -45px 0 -2px rgba(212, 184, 136, .4);
  animation: floatParticles 4.5s ease-in-out infinite;
}
@keyframes floatParticles {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-14px); }
}

.atom-symbol {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid var(--champagne);
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--champagne);
  background: rgba(6, 13, 36, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all var(--dur) var(--ease);
  letter-spacing: .02em;
}
.atom:hover .atom-symbol {
  background: var(--champagne);
  color: var(--navy);
  box-shadow: 0 0 50px rgba(212, 184, 136, .45);
  transform: scale(1.04);
}
.atom-content { position: relative; z-index: 2; }
.atom-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 14px;
}
.atom h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.atom p { font-size: 13px; line-height: 1.7; color: var(--silver); }

/* ---------- PERFORMANCE — Upgraded with markers, baseline, shine ---------- */
.perf { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); }
.perf-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 88px;
}
.perf-visual {
  position: relative;
  aspect-ratio: 4/5;
  border: var(--line-gold);
  overflow: hidden;
  background: var(--navy-3);
}
.perf-visual img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.perf-visual::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(244, 241, 236, .2); pointer-events: none; }
.perf-visual-tag {
  position: absolute;
  bottom: 32px;
  left: 32px;
  background: rgba(6, 13, 36, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 22px;
  border: 1px solid rgba(212, 184, 136, .4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--champagne);
  z-index: 2;
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(212, 184, 136, .2);
  border: 1px solid rgba(212, 184, 136, .2);
}
.big-stat {
  background: var(--navy-deep);
  padding: 56px 24px 48px;
  text-align: center;
  transition: background var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.big-stat::before {
  /* Shine pass */
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(212, 184, 136, .12) 50%, transparent 100%);
  transition: left .8s var(--ease-out);
}
.big-stat:hover { background: var(--navy-3); }
.big-stat:hover::before { left: 140%; }
.big-stat-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 200;
  line-height: 1;
  color: var(--rose);
  margin-bottom: 12px;
  letter-spacing: -.02em;
  position: relative;
  z-index: 1;
}
.big-stat-num small { font-size: .42em; color: var(--champagne); font-weight: 300; }
.big-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.big-stat p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--silver);
  max-width: 220px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Comparison — upgraded: scale markers, baseline line, +22 indicator, shine */
.comparison {
  margin: 56px auto 0;
  padding: 64px 56px 56px;
  border: var(--line-gold);
  background: linear-gradient(180deg, rgba(244, 241, 236, .03) 0%, rgba(244, 241, 236, .01) 100%);
  max-width: 920px;
  position: relative;
  overflow: hidden;
}
.comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 16px;
}
.comparison-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
}
.comparison-unit {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--silver-2);
}

.comparison-chart {
  position: relative;
  height: 320px;
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Scale on the left */
.comparison-scale {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  position: relative;
  padding-block: 0;
}
.scale-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--silver-3);
  text-align: right;
  line-height: 1;
}
.scale-mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 100%;
  width: 12px; height: 1px;
  background: rgba(216, 220, 229, .25);
}

/* Bars */
.bar-col {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: flex-end;
}
.bar-track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Baseline at 100% — 100/160 of chart height */
.bar-track::before {
  content: "100%";
  position: absolute;
  bottom: calc(100% * 100 / 160);
  left: -84px;
  width: calc(100% + 84px);
  border-top: 1px dashed rgba(212, 184, 136, .35);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--champagne-2);
  padding: 2px 0 0;
  text-align: left;
  pointer-events: none;
}
.bar-col:not(:first-of-type) .bar-track::before { content: ""; left: 0; width: 100%; }

.bar-fill {
  width: 100%;
  max-width: 120px;
  position: relative;
  background: linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 100%);
  transition: height 1.6s var(--ease-out);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 40px rgba(224, 145, 183, .25);
}
.bar-col.is-comparison .bar-fill {
  background: linear-gradient(180deg, var(--silver-2) 0%, var(--navy-3) 100%);
  box-shadow: 0 0 30px rgba(155, 163, 181, .15);
}
.bar-fill::before {
  /* Shine sweep on bar */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .25) 50%, transparent 100%);
  background-size: 100% 200%;
  background-position: 0 100%;
  animation: barShine 3s ease-in-out infinite;
}
@keyframes barShine {
  0%, 100% { background-position: 0 100%; opacity: 0; }
  50% { background-position: 0 0; opacity: 1; }
}
.bar-fill::after {
  /* Pulse dot at top */
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ivory);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .15);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
  50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}
.bar-col.is-comparison .bar-fill::after { background: var(--silver); box-shadow: 0 0 0 4px rgba(216, 220, 229, .15); }

.bar-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 200;
  color: var(--ivory);
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 0;
}
.bar-num strong { font-weight: 600; }
.bar-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
  margin-top: 20px;
}
.bar-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: .12em;
  margin-bottom: 6px;
}

/* +22 points difference badge floating above */
.comparison-delta {
  position: absolute;
  top: 12px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(212, 184, 136, .08);
  border: 1px solid rgba(212, 184, 136, .35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne);
  white-space: nowrap;
}
.comparison-delta strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--ivory);
  letter-spacing: 0;
}

/* ---------- CLOSING CTA ---------- */
.closing {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-deep);
  padding: 120px 0;
}
.closing-bg {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  background-size: cover;
  background-position: center 13%;
  will-change: transform;
}
.closing-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 13, 36, .7) 0%, rgba(6, 13, 36, .4) 50%, rgba(6, 13, 36, .9) 100%);
}
.closing-frame {
  position: absolute;
  inset: 40px;
  border: var(--line-gold);
  z-index: 2;
  pointer-events: none;
}
.closing-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 880px;
  padding-inline: 32px;
}
.closing h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.8vw, 80px);
  font-weight: 200;
  line-height: .95;
  color: var(--ivory);
  letter-spacing: -.015em;
  margin-bottom: 32px;
  text-transform: uppercase;
}
.closing h2 strong { font-weight: 700; }
.closing h2 .script {
  font-size: 1.15em;
  line-height: .7;
  text-transform: none;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 .04em;
}
.closing-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--silver);
  max-width: 560px;
  margin: 0 auto 44px;
  font-weight: 300;
}

/* ---------- FOOTER ---------- */
.footer {
  background: #04081A;
  border-top: var(--line-gold);
  padding: 96px 0 32px;
  color: var(--silver-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 72px;
  margin-bottom: 80px;
}
.footer-logo { margin-bottom: 28px; }
.footer-logo img { height: 56px; width: auto; }
.footer-tag { font-size: 14px; line-height: 1.75; color: var(--silver); max-width: 320px; font-weight: 300; }
.footer h5 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 28px;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 14px; }
.footer ul a { font-size: 14px; font-weight: 300; color: var(--silver-2); transition: color var(--dur) var(--ease); }
.footer ul a:hover { color: var(--ivory); }
.footer-bottom {
  border-top: var(--line-silver);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--silver-3);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .hero-content { padding: var(--nav-h) 56px 160px; }
  .hero-meta { right: 56px; }
  .nav-inner, .nav.is-scrolled .nav-inner { padding: 18px 32px; }
  .italian-grid { gap: 60px; }
  section { padding: 120px 0; }
  .comparison-chart { grid-template-columns: 50px 1fr 1fr; }
}

@media (max-width: 960px) {
  :root { --gutter: 24px; --nav-h: 78px; }
  .nav-links { display: none; }
  .nav-menu-toggle { display: block; }
  .nav-inner, .nav.is-scrolled .nav-inner { padding: 14px 24px; }
  .nav-logo img, .nav.is-scrolled .nav-logo img { height: 38px; }

  .hero { height: auto; min-height: 100vh; }
  .hero-content { padding: 120px 24px 160px; align-items: flex-end; }
  .hero-meta, .hero-scroll { display: none; }
  .hero-frame { top: calc(var(--nav-h) + 12px); left: 24px; right: 24px; bottom: 24px; }
  .hero-corner.tl { top: calc(var(--nav-h) + 12px); left: 24px; }
  .hero-corner.tr { top: calc(var(--nav-h) + 12px); right: 24px; }
  .hero-corner.bl { bottom: 24px; left: 24px; }
  .hero-corner.br { bottom: 24px; right: 24px; }

  .product-reveal { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding: 60px 0; }
  .product-reveal:nth-child(even) { direction: ltr; }

  .italian-grid { grid-template-columns: 1fr; gap: 56px; }
  .perf-top { grid-template-columns: 1fr; gap: 56px; }
  .perf-grid, .pillars-grid, .material-grid, .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(2) { border-right: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  section { padding: 96px 0; }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 13, 36, .35) 0%, rgba(6, 13, 36, .85) 100%);
  }
  .comparison { padding: 48px 32px; }
  .comparison-chart { grid-template-columns: 44px 1fr 1fr; gap: 16px; height: 280px; }
  .comparison-delta { position: static; margin-bottom: 24px; }
  .video-play { width: 84px; height: 84px; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 48px; }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .btn { justify-content: center; }

  .pillars-grid, .material-grid, .trust-grid, .perf-grid { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(212, 184, 136, .18); padding: 20px 0; }
  .trust-item:last-child { border-bottom: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; }

  section { padding: 72px 0; }
  .video-modal { padding: 24px; }
  .video-modal-close { top: -40px; }
}

/* ---------- MOBILE NAV PANEL ---------- */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--navy-deep);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.nav-mobile.is-open { opacity: 1; pointer-events: auto; }
.nav-mobile a {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color var(--dur) var(--ease);
}
.nav-mobile a:hover { color: var(--champagne); }

/* =========================================================
   PRODUCT PAGES — shared modules
   Hero, breadcrumb, zones explorer, compression chart,
   specs, FAQ, cross-sell, final CTA
   ========================================================= */

/* ---------- BREADCRUMB ---------- */
.crumb {
  padding: 36px 0 0;
  margin-top: var(--nav-h);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--silver-3);
}
.crumb a {
  color: var(--silver-2);
  transition: color var(--dur) var(--ease);
}
.crumb a:hover { color: var(--champagne); }
.crumb-sep {
  color: var(--champagne);
  margin: 0 14px;
  opacity: .6;
}
.crumb-current { color: var(--ivory); }

/* ---------- PRODUCT HERO ---------- */
.p-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  /* top padding clears the 94px fixed nav with ~106px breathing room so the
     eyebrow sits clearly below the nav, not visually crowded by it */
  padding: 125px 0 125px;
  overflow: hidden;
  background: var(--navy-deep);
}
.p-hero-bg {
  position: absolute;
  inset: 0 -4% -4% -4%;
  z-index: 0;
  background-size: cover;
  /* negative vertical shift pulls the image upward so the model's head
     sits closer to the gold top border. Tune this value (e.g. -5%, -15%) */
  background-position: center 35%;
  /* anchor the Ken Burns zoom to the top so the model's head stays
     visible throughout the animation instead of being pushed off-screen */
  transform-origin: center top;
  will-change: transform;
  transform: scale(1.04);
  animation: heroKenBurns 20s var(--ease-out) forwards;
}
.p-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(6, 13, 36, .9) 0%, rgba(6, 13, 36, .55) 38%, rgba(6, 13, 36, .18) 70%, rgba(6, 13, 36, 0) 100%),
    linear-gradient(180deg, rgba(6, 13, 36, .25) 0%, transparent 30%, rgba(6, 13, 36, .55) 100%);
}
.p-hero-frame {
  position: absolute;
  /* top inset is raised below the 94px fixed nav so the gold top border
     line clears the navigation instead of being hidden behind it */
  top: 85px;
  left: 32px;
  right: 32px;
  bottom: 32px;
  border: var(--line-gold);
  z-index: 2;
  pointer-events: none;
}
.p-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-inline: 80px;
}
.p-hero-text { max-width: 700px; }
.p-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 28px;
}
.p-hero-eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--champagne);
}
.p-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-bottom: 24px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .4);
}
.p-hero h1 strong { font-weight: 700; }
.p-hero h1 .script {
  font-family: var(--font-script);
  color: var(--rose);
  font-size: 1.15em;
  line-height: .7;
  text-transform: none;
  display: inline-block;
  vertical-align: baseline;
  font-weight: 400;
  margin: 0 .04em;
}
.p-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ivory);
  max-width: 560px;
  margin-bottom: 36px;
  font-weight: 300;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* In-hero meta stats row */
.p-meta {
  display: flex;
  gap: 48px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.p-meta-item {
  font-family: var(--font-display);
  color: var(--ivory);
}
.p-meta-item strong {
  display: block;
  font-size: 30px;
  font-weight: 300;
  color: var(--champagne);
  margin-bottom: 6px;
  letter-spacing: .02em;
  line-height: 1;
}
.p-meta-item span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--silver);
}

.p-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- SPLIT-LAYOUT PRODUCT HERO (sock pages) ---------- */
.p-hero.is-split {
  background:
    radial-gradient(ellipse 70% 55% at 72% 50%, rgba(212, 184, 136, .14) 0%, transparent 65%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 50%, var(--navy) 100%);
  min-height: 640px;
}
.p-hero.is-split.glow-rose {
  background:
    radial-gradient(ellipse 70% 55% at 72% 50%, rgba(224, 145, 183, .18) 0%, rgba(212, 184, 136, .06) 30%, transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 50%, var(--navy) 100%);
}
.p-hero.is-split .p-hero-bg { display: none; }
.p-hero.is-split .p-hero-overlay { display: none; }
.p-hero.is-split .p-hero-content {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.p-hero-product {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 480px;
  max-width: 384px;          /* keeps the 4/5 box from stretching across the grid column */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  justify-self: center;
}
.p-hero-product img {
  max-height: 95%;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .5));
  position: relative;
  z-index: 1;
}
.crew-socks-only img {
  max-height: 70%;
}
.p-hero-product::before {
  content: "";
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 56%;
  height: 28px;
  background: radial-gradient(ellipse, rgba(212, 184, 136, .4) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 0;
}
.p-hero.is-split.glow-rose .p-hero-product::before {
  background: radial-gradient(ellipse, rgba(224, 145, 183, .5) 0%, transparent 70%);
}

/* ---------- INTERACTIVE ZONES EXPLORER (pants signature) ---------- */
.zones-section { background: var(--navy-2); }
.zones-intro { margin-bottom: 64px; max-width: 720px; }
.zones-intro.center { margin-inline: auto; text-align: center; }
.zones-intro.center .section-eyebrow,
.zones-intro.center .section-intro { margin-inline: auto; }
.zones-intro.center .section-eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--champagne);
}
.zones-explorer {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.zones-visual {
  position: sticky;
  top: 120px;
  aspect-ratio: 3/4;
  border: 1px solid rgba(212, 184, 136, .35);
  overflow: hidden;
  background: var(--navy-3);
}
.zones-visual-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Spotlight mask — keeps active zone bright, dims the rest */
.zones-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%),
    transparent 0%, transparent 14%, rgba(6, 13, 36, .25) 35%, rgba(6, 13, 36, .65) 100%);
  z-index: 2;
  transition: background var(--dur-slow) var(--ease);
  pointer-events: none;
}
/* Pulsing target ring at the active zone */
.zones-visual::after {
  content: "";
  position: absolute;
  left: var(--hx, 50%);
  top: var(--hy, 50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--champagne);
  box-shadow: 0 0 24px rgba(212, 184, 136, .5), inset 0 0 24px rgba(212, 184, 136, .25);
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: zonePulse 2.2s ease-in-out infinite;
  pointer-events: none;
  transition: left .65s var(--ease-out), top .65s var(--ease-out);
}
@keyframes zonePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(212, 184, 136, .5), inset 0 0 24px rgba(212, 184, 136, .25); transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 0 40px rgba(212, 184, 136, .35), inset 0 0 30px rgba(212, 184, 136, .15); transform: translate(-50%, -50%) scale(1.12); }
}
.zones-visual-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(6, 13, 36, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 26px;
  border: 1px solid rgba(212, 184, 136, .35);
  z-index: 4;
}
.zone-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 8px;
}
.zone-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 10px;
}
.zone-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--silver);
  font-weight: 300;
}

.zones-list { display: flex; flex-direction: column; gap: 10px; }
.zone-tab {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 22px 26px;
  background: rgba(244, 241, 236, .025);
  border: 1px solid rgba(216, 220, 229, .15);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-align: left;
  width: 100%;
  font-family: var(--font-body);
  color: inherit;
}
.zone-tab:hover {
  border-color: rgba(212, 184, 136, .55);
  background: rgba(244, 241, 236, .05);
}
.zone-tab.is-active {
  border-color: var(--champagne);
  background: rgba(212, 184, 136, .08);
  box-shadow: inset 4px 0 0 var(--champagne);
}
.zone-tab-num {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(212, 184, 136, .45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  color: var(--champagne);
  transition: all var(--dur) var(--ease);
}
.zone-tab.is-active .zone-tab-num {
  background: var(--champagne);
  color: var(--navy);
  font-weight: 700;
}
.zone-tab h5 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 6px;
}
.zone-tab p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--silver);
  font-weight: 300;
}

/* ---------- COMPRESSION CHART ---------- */
.compression {
  margin-top: 72px;
  padding: 56px;
  background: rgba(244, 241, 236, .025);
  border: var(--line-gold);
}
.compression-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 40px;
}
.compression-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 32px;
  align-items: stretch;
}
.compression-spine {
  display: flex;
  flex-direction: column;
}
.compression-spine-bar {
  flex: 1;
  width: 44px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(224, 145, 183, .35) 0%, var(--rose) 50%, var(--rose-deep) 100%);
  border: 1px solid rgba(212, 184, 136, .35);
  border-radius: 22px;
}
.compression-zones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}
.comp-zone {
  display: grid;
  grid-template-columns: 160px 1fr 90px;
  gap: 20px;
  align-items: center;
  padding: 22px 12px;
  border-left: 3px solid;
  flex: 1;
}
.comp-zone:nth-child(1) { border-color: rgba(224, 145, 183, .55); }
.comp-zone:nth-child(2) { border-color: var(--rose); }
.comp-zone:nth-child(3) { border-color: var(--rose-deep); }
.comp-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivory);
}
.comp-name span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--silver);
  margin-top: 4px;
}
.comp-bar {
  height: 8px;
  background: rgba(244, 241, 236, .08);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.comp-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--rose) 0%, var(--rose-deep) 100%);
  width: 0;
  transition: width 1.4s var(--ease-out);
}
.comp-zone.is-visible:nth-child(1) .comp-bar-fill { width: 55%; }
.comp-zone.is-visible:nth-child(2) .comp-bar-fill { width: 85%; }
.comp-zone.is-visible:nth-child(3) .comp-bar-fill { width: 95%; }
.comp-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--champagne);
  text-align: right;
  letter-spacing: .02em;
}

/* ---------- BENEFIT GRID (sock pages) ---------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(212, 184, 136, .2);
  border: 1px solid rgba(212, 184, 136, .2);
  margin-top: 72px;
}
.benefit-card {
  background: var(--navy-2);
  padding: 48px 28px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* `all` (not just `background`) so the hover inner glow added in the v3b
     block below eases in smoothly instead of snapping. */
  transition: all var(--dur) var(--ease);
}
.benefit-card:hover { background: var(--navy-3); }
.benefit-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  color: var(--champagne);
}
.benefit-card h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
}
.benefit-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--silver);
}

/* ---------- ALL-DAY RHYTHM (crew socks signature) — sun arc + staged reveals ---------- */
.rhythm { background: var(--navy-2); position: relative; overflow: hidden; }
.rhythm-timeline {
  position: relative;
  margin-top: 80px;
  padding: 30px 0 40px; /* tight padding — sun is visible immediately when section enters view */
  overflow: visible; /* let the sun's halo extend above the horizon; the sky clip-path handles horizontal edges */
}

/* Sky — absolute container whose bottom edge is set by JS to align with the horizon line.
   The sun lives inside; anything that crosses below the bottom is clipped. */
.rhythm-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;            /* JS computes this */
  overflow: visible;
  /* Clip ONLY at the horizon (bottom edge) so the half-sun rise/set effect is kept,
     while leaving generous headroom above (top -240px) so the enlarged halo is never
     cut at noon. Left/right stay at 0 to keep the warm sky tint within the timeline width.
     To give the halo more/less room at the top, change the first value (-240px). */
  clip-path: inset(-240px 0 0 0);
  pointer-events: none;
  z-index: 1;
}

/* Subtle warm sky tint that fades in when section is active */
.rhythm-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 100%, rgba(212, 184, 136, .08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.rhythm-timeline.is-active .rhythm-sky::before { opacity: 1; }

/* The sun — outlined ring with soft halo, position controlled by GSAP */
.rhythm-sun {
  position: absolute;
  width: 52px;
  height: 52px;
  left: 12.5%;
  top: 100%;
  transform: translate(-50%, -50%);
  will-change: left, top, transform;
}
.rhythm-sun svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rhythm-sun-halo { animation: sunPulse 4s ease-in-out infinite; transform-origin: center; }
@keyframes sunPulse {
  0%, 100% { opacity: .7; transform: scale(1.5); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Grid — sits above sky so labels, line, and content draw on top */
.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 56px auto;
  column-gap: 32px;
  position: relative;
  z-index: 2;
}

/* Row 1: time labels */
.rhythm-time {
  grid-row: 1;
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 20px;
  position: relative;
  z-index: 3; /* labels render in front of the sun if it overlaps */
}

/* Row 2: horizon line spans all columns. No dots — the sun is the only traveler. */
.rhythm-line {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  justify-self: stretch;
  height: 1px;
  margin-inline: 8%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 184, 136, .35) 10%,
    var(--champagne) 50%,
    rgba(212, 184, 136, .35) 90%,
    transparent 100%);
  position: relative;
}

/* Row 3: content — each column reveals as the sun arrives */
.rhythm-content {
  grid-row: 3;
  text-align: center;
  padding: 32px 12px 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rhythm-content[data-stage="1"] { opacity: 1; transform: translateY(0); }  /* first column visible by default */
.rhythm-content.is-revealed { opacity: 1; transform: translateY(0); }

.rhythm-content h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
}
.rhythm-content p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--silver);
  font-weight: 300;
}
.rhythm-yarn {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rose);
  border: 1px solid rgba(224, 145, 183, .35);
  background: rgba(224, 145, 183, .05);
}

/* ---------- SPECS GRID ---------- */
.specs { background: var(--navy); }
.specs-intro { text-align: center; margin-bottom: 64px; }
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(212, 184, 136, .18);
  border: 1px solid rgba(212, 184, 136, .18);
}
.spec-row {
  background: var(--navy-2);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
  transition: background var(--dur) var(--ease);
}
.spec-row:hover { background: var(--navy-3); }
.spec-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--champagne);
  padding-top: 4px;
}
.spec-value {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ivory);
  font-weight: 300;
}
.spec-value em {
  font-style: normal;
  color: var(--silver-2);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); }
.faq-intro { text-align: center; margin-bottom: 64px; }
.faq-list {
  max-width: 920px;
  margin-inline: auto;
  border-top: var(--line-silver);
}
.faq-item {
  border-bottom: 1px solid rgba(212, 184, 136, .2);
}
.faq-item summary {
  padding: 28px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--champagne);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--champagne); }
.faq-item p {
  padding: 0 0 32px 48px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--silver);
  font-weight: 300;
}

/* ---------- CROSS-SELL ---------- */
.cross-sell { background: var(--navy-deep); padding: 120px 0; }
.cross-sell-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 200;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 64px;
}
.cross-sell-title .script {
  font-size: 1.2em;
  line-height: .7;
  vertical-align: baseline;
  display: inline-block;
}
.cross-sell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cross-card {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid rgba(212, 184, 136, .25);
  transition: all var(--dur) var(--ease);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212, 184, 136, .18) 0%, transparent 70%),
    var(--navy-3);
}
.cross-card:hover {
  border-color: var(--champagne);
  transform: translateY(-6px);
}
.cross-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px 10% 40px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4));
  transition: transform var(--dur-slow) var(--ease);
}
.cross-card:hover img { transform: scale(1.04); }
.cross-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 32px;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 13, 36, .9) 60%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
}
.cross-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ivory);
}
.cross-card span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
}
.cross-card span::after { content: " →"; }

/* ---------- FINAL CTA ---------- */
.final-cta {
  background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy) 100%);
  text-align: center;
  padding: 140px 0;
  position: relative;
}
.final-cta::before, .final-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}
.final-cta::before { top: 0; }
.final-cta::after { bottom: 0; }
.launch-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 24px;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ivory);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.final-cta h2 strong { font-weight: 700; }
.final-cta h2 .script {
  font-size: 1.2em;
  line-height: .7;
  vertical-align: baseline;
  display: inline-block;
  margin: 0 .04em;
}
.final-cta p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--silver);
  max-width: 580px;
  margin: 0 auto 44px;
  font-weight: 300;
}

/* ---------- PRODUCT PAGE RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .zones-explorer { grid-template-columns: 1fr; gap: 40px; }
  .zones-visual { position: relative; top: 0; max-width: 480px; margin: 0 auto; }
  .p-hero-content { padding-inline: 48px; }
  .p-hero.is-split .p-hero-content { grid-template-columns: 1fr; gap: 40px; }
  .p-hero-product { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 960px) {
  .p-hero { min-height: auto; padding: 80px 0 80px; }
  .p-hero-content { padding-inline: 32px; }
  .p-hero-frame { top: 24px; left: 24px; right: 24px; bottom: 24px; }
  .benefit-grid, .specs-grid, .rhythm-grid { grid-template-columns: 1fr 1fr; }
  .rhythm-grid { grid-template-rows: auto; }
  .rhythm-line, .rhythm-sun, .rhythm-sky { display: none; }
  .rhythm-timeline { padding: 40px 0; }
  .rhythm-time { grid-row: auto; margin-bottom: 12px; }
  .rhythm-content { grid-row: auto; padding-top: 0; padding-bottom: 32px; opacity: 1; transform: none; }
  .compression-grid { grid-template-columns: 1fr; }
  .compression-spine { display: none; }
  .comp-zone { grid-template-columns: 120px 1fr 72px; gap: 14px; padding: 16px 8px; }
  .spec-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 28px; }
  .cross-sell-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .p-hero { padding: 64px 0; }
  .p-hero-content { padding-inline: 24px; }
  .p-meta { gap: 28px; }
  .p-ctas { flex-direction: column; align-items: stretch; }
  .benefit-grid, .specs-grid, .rhythm-grid { grid-template-columns: 1fr; }
  .compression { padding: 32px 24px; }
  .comp-zone { grid-template-columns: 1fr 80px; gap: 8px; }
  .comp-zone .comp-bar { grid-column: 1 / -1; order: 3; }
  .zone-tab { padding: 16px 18px; gap: 14px; }
  .faq-item summary { font-size: 13px; gap: 16px; }
  .faq-item p { padding: 0 0 24px 40px; font-size: 13px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-bg, .closing-bg { animation: none; transform: none; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* =========================================================
   SILTERA — v3 Atmosphere & Frosted-Glass Layer  (2026-05-21)
   Additive enhancement. Two goals, on the existing dark palette:
     1. Soften the flat navy sections with gentle gradient
        atmosphere + a whisper of woven texture, for depth.
     2. Give the content boxes a premium, semi-translucent
        frosted-glass / matte-blur finish.
   This entire block can be deleted to fully revert.
   ========================================================= */

/* ---- Frosted-glass tokens (tuned for the dark navy base) ---- */
:root {
  --glass-fill:       linear-gradient(155deg,
                        rgba(216, 220, 229, .075) 0%,
                        rgba(216, 220, 229, .025) 55%,
                        rgba(212, 184, 136, .04) 100%);
  --glass-fill-hover: linear-gradient(155deg,
                        rgba(216, 220, 229, .12) 0%,
                        rgba(216, 220, 229, .045) 55%,
                        rgba(212, 184, 136, .07) 100%);
  --glass-border:     1px solid rgba(216, 220, 229, .16);
  --glass-blur:       blur(16px) saturate(125%);
  --glass-edge:       inset 0 1px 0 rgba(255, 255, 255, .09);
  --glass-shadow:     0 24px 50px rgba(0, 0, 0, .30);
}

/* ---- TRUST STRIP — soft warm sheen so the band has depth ----
   Trust-only colors. Change just these two values to retint this band;
   --navy / --navy-2 stay untouched, so the rest of the site is unaffected. */
.trust {
  --trust-top:    #000000;
  --trust-bottom: #080416;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 230% at 50% 50%, rgba(10, 29, 93, .78) 0%, transparent 74%),
    linear-gradient(180deg, var(--trust-top) 0%, var(--trust-bottom) 100%);
}
.trust::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 160% at 50% 50%, rgba(212, 184, 136, .14) 0%, transparent 72%);
}
.trust > .container { position: relative; z-index: 1; }

/* ---- PILLARS — gently lift the existing stage-light + add a soft counter-bloom ---- */
.pillars::before {
  background:
    radial-gradient(ellipse 58% 46% at 50% 7%,
      rgba(212, 184, 136, .17) 0%,
      rgba(212, 184, 136, .05) 44%,
      transparent 74%),
    repeating-linear-gradient(90deg,
      transparent 0, transparent 119px,
      rgba(212, 184, 136, .03) 120px, transparent 121px);
}
.pillars::after {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 46% 50% at 90% 42%, rgba(224, 145, 183, .12) 0%, transparent 60%);
}

/* ---- PILLAR CARDS — premium frosted glass (the bloom now reads through them) ---- */
.pillar {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
.pillar:hover {
  /* Keep the base border dim on hover — the moving rim-light (.pillar::after)
     is the highlight now, so the whole frame no longer lights up.
     The fill no longer hard-swaps gradients (which can't transition and so
     snapped); instead a soft inner glow fades in via box-shadow, which the
     existing `transition: all` eases smoothly. */
  border-color: rgba(216, 220, 229, .16);
  box-shadow:
    var(--glass-edge),
    0 34px 66px rgba(0, 0, 0, .42),
    0 0 40px rgba(212, 184, 136, .06),
    inset 0 0 64px rgba(216, 220, 229, .06);
}

/* ---- MATERIAL — soft corner blooms + faint weave behind the elements ---- */
.material {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 52%, var(--navy) 100%);
}
.material::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 46% at 16% 58%, rgba(212, 184, 136, .15) 0%, transparent 60%),
    radial-gradient(ellipse 54% 48% at 86% 48%, rgba(224, 145, 183, .12) 0%, transparent 62%);
}
.material > .container { position: relative; z-index: 1; }

/* ---- MATERIAL — fabric-texture top banner (scoped to the three 4-in-1 sections
   that carry the `material--fabric` class). The PNG fades to near-transparent
   over its lower quarter, so it blends into the section's navy. It's painted on
   its own ::before layer (independent of the section's `background`, so the socks
   section's inline navy-deep still shows through the fade), top-anchored and
   full-width, behind the content (z-index:0 < .container's z-index:1). The soft
   warm/rose blooms are suppressed here so the texture is the clean hero and the
   fade lands on solid navy, as intended.
   The url() is relative to THIS file: css/ -> ../assets/images/.
   To tune: change background-size (e.g. 110% auto = larger) or background-position.
   To revert: delete this block + the `material--fabric` class on the 3 sections. ---- */
.material--fabric::before {
  content: "";
  position: absolute;
  inset: 0;
  /* IMPORTANT: .material::before already exists as a decorative 1600px circle
     glow (see the base rule near line 1049). This rule shares that same
     pseudo-element, so we MUST neutralize the circle's geometry here, or the
     texture gets squeezed into an off-corner circle. */
  width: auto;
  height: auto;
  border-radius: 0;
  transform: none;
  z-index: 0;
  pointer-events: none;
  background: url('../assets/images/bg-fabric-texture.png') top center / 100% auto no-repeat;
  opacity: 0.5;
}
.material--fabric::after { display: none; } /* drop the warm/rose blooms here */

/* ---- MATERIAL CARDS (atoms) — align to the glass system ---- */
.atom {
  background: linear-gradient(160deg, rgba(30, 44, 88, .42) 0%, rgba(19, 31, 68, .30) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: var(--glass-border);
  box-shadow: var(--glass-edge), 0 20px 44px rgba(0, 0, 0, .26);
}
.atom:hover {
  background: linear-gradient(160deg, rgba(42, 61, 120, .5) 0%, rgba(30, 44, 88, .4) 100%);
}

/* ---- PERFORMANCE — atmosphere behind the stats ---- */
.perf {
  position: relative;
  overflow: hidden;
}
.perf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 48% at 84% 40%, rgba(212, 184, 136, .14) 0%, transparent 60%),
    radial-gradient(ellipse 56% 50% at 16% 62%, rgba(224, 145, 183, .12) 0%, transparent 62%),
    repeating-linear-gradient(90deg,
      transparent 0, transparent 119px,
      rgba(212, 184, 136, .022) 120px, transparent 121px);
}
.perf > .container { position: relative; z-index: 1; }

/* ---- STAT BOXES — frosted matte panels (kept fairly opaque so the gold matrix stays crisp) ---- */
.big-stat {
  background: linear-gradient(160deg, rgba(34, 50, 100, .62) 0%, rgba(19, 31, 68, .56) 100%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.big-stat:hover {
  background: linear-gradient(160deg, rgba(46, 66, 128, .72) 0%, rgba(30, 44, 88, .64) 100%);
}

/* ---- COMPARISON PANEL — frosted finish ---- */
.comparison {
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  background: linear-gradient(160deg, rgba(216, 220, 229, .06) 0%, rgba(216, 220, 229, .015) 100%);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}

/* ---- PRODUCT-PAGE ATMOSPHERE — same warm/rose blooms on the product sections.
   z-index:-1 keeps the bloom above the section fill but behind all content,
   so no overflow:hidden is needed (preserves the sticky zones visual). ---- */
.zones-section,
.specs,
.faq,
.cross-sell {
  position: relative;
  z-index: 0;
}
.zones-section::before,
.specs::before,
.faq::before,
.cross-sell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Each product section gets a different bloom placement, kept clear of the
   top/bottom edges so the seam between sections stays on the base navy. */
.zones-section::before { background: radial-gradient(ellipse 50% 48% at 88% 38%, rgba(212, 184, 136, .13) 0%, transparent 60%); }
.specs::before        { background: radial-gradient(ellipse 52% 50% at 12% 58%, rgba(224, 145, 183, .12) 0%, transparent 62%); }
.faq::before          { background: radial-gradient(ellipse 56% 46% at 60% 66%, rgba(212, 184, 136, .12) 0%, transparent 60%); }
.cross-sell::before   { background: radial-gradient(ellipse 54% 50% at 30% 36%, rgba(224, 145, 183, .12) 0%, transparent 62%); }

/* ---- PRODUCT HERO — contain the banner image inside the gold frame
   (matching the framed look of the sock pages) and clip the Ken Burns
   zoom to the frame. The navy margin + gold line now separate the photo
   from the breadcrumb, which also resolves the earlier cut-off seam.
   Split/sock heroes have no .p-hero-media, so they're unaffected. ---- */
/* The margin around the frame is the .p-hero background. It was navy-deep,
   darker than the breadcrumb/body navy above it, so it read as a dark shade
   hugging the frame. Match it to the page navy so the margin blends in. */
.p-hero { background: var(--navy); }
.p-hero-media {
  position: absolute;
  /* top matches .p-hero-frame's top (85px) so the photo aligns with the gold
     border instead of sticking out above it; sides + bottom stay at 32px */
  inset: 85px 32px 32px 32px;
  z-index: 0;
  overflow: hidden;
}
.p-hero-media .p-hero-bg { inset: 0; }
.p-hero-media .p-hero-overlay { inset: 0; }
/* Light left-only gradient for headline legibility — no top/bottom/edge
   darkening, so there's no shadow hugging the gold frame. The headings
   carry their own text-shadow, so this can stay subtle. */
.p-hero-overlay {
  background: linear-gradient(100deg,
    rgba(6, 13, 36, .70) 0%,
    rgba(6, 13, 36, .40) 32%,
    rgba(6, 13, 36, .12) 58%,
    rgba(6, 13, 36, 0) 80%);
}

/* =========================================================
   SILTERA — v3b Cursor-reactive gold rim-light (micro-interaction)
   A soft gold highlight on the box border whose bright point follows the
   cursor. --gx/--gy are updated by main.js (smoothed), the glow is masked
   to the 1px edge only (no fill wash), and it fades in on hover. Applied to
   the homepage pillar cards and the product cross-sell boxes.
   Remove this block + the matching main.js block to revert.
   ========================================================= */
.pillar,
.cross-card,
.benefit-card {
  --gx: 50%;
  --gy: 50%;
}
.pillar::after,
.cross-card::after,
.benefit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* rim thickness */
  /* The px radius controls reach/sensitivity: bigger = the glow reaches the
     border from further in (the cursor no longer has to hug the edge) and
     reads wider; smaller = a tighter point. The stops keep it brightest at
     the cursor and fading outward, so it stays directional, not a full wash. */
  background: radial-gradient(280px circle at var(--gx) var(--gy),
    rgba(212, 184, 136, 2) 0%,
    rgba(212, 184, 136, 1) 24%,
    rgba(212, 184, 136, 0) 62%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  z-index: 4;
}
.pillar:hover::after,
.cross-card:hover::after,
.benefit-card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pillar::after, .cross-card::after, .benefit-card::after { display: none; }
}

/* ---- Benefit cards (sock pages): match the homepage pillars' hover inner
   glow. These sit in a tight 1px gold-hairline grid, so we keep the soft
   inset gold/silver glow + a faint gold halo (same intensity as the pillars)
   but skip the pillars' heavy outer lift shadow — it would darken the seams
   between the edge-to-edge cards. The base background lift to --navy-3 (set
   earlier) stays, and the rim-light ::after above tracks the cursor with the
   exact same settings as the pillars. ---- */
.benefit-card:hover {
  box-shadow:
    0 0 40px rgba(212, 184, 136, .06),
    inset 0 0 64px rgba(216, 220, 229, .06);
}

/* ---- Product boxes: move the hover "enlarge" onto the CTA label ----
   The whole card stays clickable, but instead of the entire box lifting and
   zooming its image (which made it unclear what the button was), the
   "For circulation →" label now grows and its arrow nudges on hover.
   The gold rim-light still tracks the cursor around the border. */
.cross-card:hover { transform: none; border-color: rgba(212, 184, 136, .25); }
.cross-card:hover img { transform: none; }
/* Drop the pillar's gold top-line on hover so only the moving rim-light shows. */
.pillar:hover::before { opacity: 0; }
.cross-card .cross-card-body span {
  display: inline-block;
  transform-origin: right center;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cross-card .cross-card-body span::after {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.cross-card:hover .cross-card-body span { transform: scale(1.09); color: var(--ivory); }
.cross-card:hover .cross-card-body span::after { transform: translateX(5px); }