/** Shopify CDN: Minification failed

Line 2086:13 Expected identifier but found whitespace
Line 2086:14 Unexpected "var("

**/
/* ============================================================
   ALVARA HOME - design system + section styles
   Ported from the approved prototype (2026-07-31).
   Scoped notes: nav/menu/cart/drawer styles removed (Horizon owns
   those); everything else is the prototype system verbatim.
   ============================================================ */
/* ============================================================
   ALVARA HOMEPAGE  ·  DESIGN SYSTEM
   Material: dark bark + raw honey gold + cream paper
   ============================================================ */

:root {
  /* Ground */
  --bg:        #0B0906;
  --bg-2:      #100C07;
  --bg-3:      #17110A;
  --bg-card:   #14100A;
  --bg-deep:   #070502;

  /* Ink on dark */
  --ink:       #F5EEE1;
  --ink-mute:  #B7AD98;
  --ink-faint: #7A7161;

  /* Honey metal */
  --gold:      #C8860A;
  --gold-hi:   #E8A830;
  --gold-lo:   #8C5D06;
  --gold-lite: #FFE6B2;
  --gold-soft: #C9A84C;
  --rule:      rgba(200,134,10,.18);
  --rule-2:    rgba(200,134,10,.34);

  /* Cream paper */
  --paper:     #FDF5E4;
  --paper-2:   #FFFDF6;
  --p-ink:     #201809;
  --p-body:    #4C4230;
  --p-mute:    #6B5E45;
  --p-rule:    #E5D8BA;
  --p-gold:    #93620A;  /* 4.88:1 on --paper; #9A6708 measured 4.48:1, under AA */

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Fluid scale */
  --t-display: clamp(3.1rem, 1.4rem + 6.4vw, 6.4rem);
  --t-h2:      clamp(2.15rem, 1.25rem + 3.4vw, 3.7rem);
  --t-h3:      clamp(1.28rem, 1.05rem + .75vw, 1.6rem);
  --t-lead:    clamp(1.02rem, .95rem + .42vw, 1.22rem);
  --t-body:    clamp(.94rem, .9rem + .22vw, 1.03rem);

  /* Rhythm */
  --sec:       clamp(72px, 8.2vw, 132px);
  --gut:       clamp(22px, 3.6vw, 48px);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 34px;

  /* Motion */
  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(200,134,10,0.06)'/%3E%3C/svg%3E");
  --hex-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(154,103,8,0.09)'/%3E%3C/svg%3E");
}
/* Explicit display values (e.g. .dw-sum {display:flex}
) outrank the UA
   [hidden] {display:none}
, so enforce it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(section, .band)[id] { scroll-margin-top: 92px; }
/* Focus discipline */
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 3px; }
.cream :focus-visible { outline-color: var(--p-gold); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); position: relative; }
@media (min-width: 1800px) {
.wrap { max-width: 1440px; }
}
/* ---------- Typography primitives ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .26em; color: var(--gold-hi); display: flex; align-items: center; gap: 9px;
}
.cream .eyebrow { color: var(--p-gold); }
.h-serif {
  font-family: var(--serif); font-weight: 350; letter-spacing: -0.018em; line-height: 1.05;
  font-variation-settings: 'SOFT' 18, 'WONK' 0, 'opsz' 120;
  text-wrap: balance;
}
.h-serif em { font-style: italic; color: var(--gold-hi); font-weight: 300; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120; }
.cream .h-serif em { color: var(--p-gold); }
.sec-head { max-width: 740px; margin-bottom: clamp(40px, 5vw, 66px); }
.sec-head h2 { font-size: var(--t-h2); margin-top: 20px; }
.sec-head p { font-size: var(--t-lead); color: var(--ink-mute); margin-top: 20px; max-width: 56ch; font-weight: 300; text-wrap: pretty; }
.cream .sec-head p { color: var(--p-mute); }
@media (min-width: 1080px) {
.sec-head.split { max-width: none; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 64px; align-items: end; }
.sec-head.split .eyebrow { grid-column: 1 / -1; }
.sec-head.split h2 { margin-top: 0; }
.sec-head.split p { margin: 0 0 6px; }
}
section { padding: var(--sec) 0; position: relative; }
/* ---------- Reveal choreography ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.stagger > .reveal:nth-child(2) { transition-delay: .09s; }
.stagger > .reveal:nth-child(3) { transition-delay: .18s; }
.stagger > .reveal:nth-child(4) { transition-delay: .27s; }
.stagger > .reveal:nth-child(5) { transition-delay: .36s; }
/* ---------- Glyphs ---------- */
.ic { display: inline-block; width: .8em; height: .8em; background-color: currentColor; vertical-align: -.04em; flex: none; }
.ic-hex { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-star { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.stars { display: inline-block; height: 14px; width: 84px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") left center/16.8px 14px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") left center/16.8px 14px repeat-x; }
/* ---------- Buttons: gold as metal ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border: none; cursor: pointer; font-family: var(--sans); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.btn-gold {
  font-weight: 600; font-size: 16px; color: #17110A;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo));
  padding: 17px 34px; border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,236,190,.6), inset 0 -1px 0 rgba(0,0,0,.22), 0 2px 14px rgba(200,134,10,.16);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,236,190,.6), 0 12px 34px rgba(232,168,48,.3); }
.btn-gold:active { transform: translateY(0); }
.btn-gold::after, .satc-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-170%) skewX(-12deg); transition: transform .7s var(--ease); pointer-events: none;
}
.btn-gold:hover::after, .satc-cta:hover::after { transform: translateX(300%) skewX(-12deg); }
.btn-ghost {
  font-weight: 500; font-size: 15px; color: var(--gold-hi); padding: 15px 4px; text-decoration: none;
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) no-repeat 0 100% / 100% 1px;
  transition: background-size .35s var(--ease), color .25s; display: inline-block;
}
.btn-ghost:hover { background-size: 0 1px; }
.cream .btn-ghost { color: var(--p-gold); background-image: linear-gradient(var(--p-gold), var(--p-gold)); }
.btn-outline {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hi); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 15px 26px;
  text-decoration: none; background: rgba(200,134,10,.04);
}
.btn-outline:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(200,134,10,.09); }
/* ---------- Honey scroll rail ---------- */
.rail { position: fixed; left: 0; top: 0; height: 100vh; width: 3px; z-index: 88; background: rgba(200,134,10,.08); pointer-events: none; }
.rail i { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--gold-lite), var(--gold-hi) 30%, var(--gold)); box-shadow: 0 0 14px rgba(232,168,48,.5); }
@media (max-width: 860px) {
.rail { display: none; }
}
/* ---------- Announce ---------- */
.announce {
  position: relative; z-index: 92;
  background: linear-gradient(90deg, var(--bg-3), #271C09 50%, var(--bg-3));
  border-bottom: 1px solid var(--rule); text-align: center; padding: 10px 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-mute);
}
.announce button {
  background: none; border: none; cursor: pointer; color: var(--gold-hi); font: inherit; font-weight: 500;
  border-bottom: 1px solid var(--rule-2); padding: 0 0 2px; transition: border-color .25s;
}
.announce button:hover { border-color: var(--gold-hi); }
/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 130; background: rgba(11,9,6,.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--rule); transition: background .3s, border-color .3s; }

@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.14); } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ---------- HERO ---------- */
.hero { position: relative; min-height: min(calc(100svh - 110px), 1000px); display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: sepia(.18) saturate(.82) brightness(.54) contrast(1.04); z-index: 0; }
.hero-veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(11,9,6,.95) 0%, rgba(11,9,6,.8) 34%, rgba(11,9,6,.28) 64%, rgba(11,9,6,.55) 100%),
  linear-gradient(180deg, rgba(11,9,6,.82), transparent 26%, transparent 66%, rgba(11,9,6,.98)); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 2; background-image: var(--hex); opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 58% 70% at 66% 50%, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 70% at 66% 50%, #000 26%, transparent 78%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  radial-gradient(ellipse 58% 50% at 68% 50%, rgba(200,134,10,.17), transparent 66%),
  radial-gradient(ellipse 40% 56% at 70% 52%, rgba(8,6,3,.5), transparent 72%); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 40px; align-items: center; width: 100%; padding: 48px 0 66px; position: relative; z-index: 3; }
@media (max-width: 940px) {
.hero-grid { grid-template-columns: 1fr; padding: 36px 0 60px; }
.hero { min-height: 0; }
}
.hero h1 { font-size: var(--t-display); margin: 24px 0 26px; max-width: 11ch; }
.hero-deck { font-size: clamp(1.02rem, .94rem + .5vw, 1.19rem); font-weight: 300; color: var(--ink-mute); max-width: 50ch; margin-bottom: 34px; text-wrap: pretty; }
.hero-deck strong { color: var(--ink); font-weight: 500; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.hero-proof { display: flex; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.hero-proof b { color: var(--gold-hi); font-weight: 500; }
.hero-jar { position: relative; display: flex; justify-content: center; }
.hero-halo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-halo svg { width: min(660px, 98%); height: auto; animation: haloPulse 8s ease-in-out infinite; }
.jar-wrap { position: relative; }
/* The product PNG ships on an opaque dark plate. This radial mask feathers
   that plate into the page so the jar reads as a floating object. */
.jar-mask {
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
}
.jar-img { filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg); }
.hero-jar img { width: min(470px, 82%); position: relative; z-index: 2; filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 50px 60px rgba(0,0,0,.68));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.jar-shadow { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 46%; height: 26px; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); filter: blur(7px); z-index: 1; pointer-events: none; }
@media (min-width: 1800px) {
.hero-jar img { width: min(520px, 84%); }
}


@keyframes jarFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@keyframes haloPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }

@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@keyframes drawHex { to { stroke-dashoffset: 0; } }

@keyframes jarIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.hero .eyebrow { animation: riseIn .8s var(--ease-out) both; }
.hero h1 { animation: riseIn .9s var(--ease-out) .1s both; }
.hero-deck { animation: riseIn .9s var(--ease-out) .22s both; }
.hero-ctas { animation: riseIn .9s var(--ease-out) .34s both; }
.hero-proof { animation: riseIn .9s var(--ease-out) .46s both; }
.hero-halo polygon { stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: drawHex 1.9s ease-out .3s forwards; }
.hero-halo circle { stroke-dasharray: 950; stroke-dashoffset: 950; animation: drawHex 2.1s ease-out .7s forwards; }
.hero-jar img { animation: jarIn 1s .4s both, jarFloat 9s 1.5s ease-in-out infinite; }
/* Pollen drift */
.pollen { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pollen i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,214,140,.55); box-shadow: 0 0 8px rgba(232,168,48,.6); animation: drift linear infinite; }

@keyframes drift { 0% { transform: translate3d(0,110%,0) scale(.6); opacity: 0; } 12% { opacity: .8; } 88% { opacity: .5; } 100% { transform: translate3d(28px,-14%,0) scale(1); opacity: 0; } }
/* ---------- Trust bar ---------- */
/* Bottom edge dissolves into the overture's darkness so the drop
   reads as a held breath. */
.trustbar { border-top: 1px solid var(--rule); background: var(--bg-2); position: relative; z-index: 4; }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-cell { padding: 26px 16px; text-align: center; border-left: 1px solid var(--rule); }
.trust-cell:first-child { border-left: none; }
.trust-cell .t-big { font-family: var(--serif); font-size: clamp(18px, 2vw, 23px); color: var(--gold-hi); font-weight: 400; }
.trust-cell .t-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }
@media (max-width: 880px) {
.trust-row { grid-template-columns: repeat(2, 1fr); }
.trust-cell:nth-child(3) { border-left: none; }
.trust-cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--bg-deep); padding: 15px 0; position: relative; z-index: 4; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: slide 46s linear infinite; }
.marquee span { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); padding: 0 30px; white-space: nowrap; display: flex; align-items: center; gap: 30px; }
.marquee span i { color: var(--gold); }

@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* ============================================================
   SECTIONS
   ============================================================ */

/* Cream paper sheets layered over the dark field */
.cream { background: var(--paper); color: var(--p-ink); border-radius: var(--r-xl); margin-top: -34px; margin-bottom: -34px; position: relative; z-index: 3; }
.cream::before { content: ''; position: absolute; inset: 0; background-image: var(--hex-p); opacity: .5; border-radius: inherit; pointer-events: none; }
.cream > .wrap { position: relative; z-index: 1; }
.cream p { color: var(--p-body); }
.big-hex { position: absolute; width: 430px; height: 430px; pointer-events: none; }
.big-hex svg { width: 100%; height: 100%; }
/* ---------- Overture: the hum ----------
   Emotional detonation directly below the fold. Scroll-scrubbed:
   the reader paces the bell line themselves. All draw amounts are
   pathLength fractions (never pixels); the scrub runs on a
   persistent rAF loop that is NEVER gated behind scroll events. */
.overture { --stag: 110ms; position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--bg) 0, #070502 16%, #070502 100%);
  padding: 15vh 0 9vh; padding: 15svh 0 9svh; }
.overture::before { content: ''; position: absolute; inset: 0; opacity: .04; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.ov-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ov-thread path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-opacity: .32; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
/* Mycelial hierarchy: depth reads through stroke weight, so the
   network stays atmospheric behind the type. */
.ov-thread .ov-b1 { stroke-width: 1.3; stroke-opacity: .32; }
.ov-thread .ov-b2 { stroke-width: 1; stroke-opacity: .2; }
.ov-tip { fill: var(--gold-lite); opacity: 0; }
.overture.ov-live #ovThreadMain, .overture.ov-live #ovThreadTail { stroke-dashoffset: 1; }
.ov-col { position: relative; z-index: 2; max-width: 62rem; }
.ov-eyebrow { display: flex; flex-direction: column; align-items: center; gap: 14px; letter-spacing: .34em; color: var(--ink-mute); }
.ov-rule { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, transparent, rgba(200,134,10,.5)); }
.ov-line1 { font-family: var(--serif); font-weight: 350; font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 110; color: var(--ink);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.2rem); line-height: 1.14; margin: 9vh auto 0; margin-top: 9svh; max-width: 20ch; text-wrap: balance; }
.ov-line2 { font-family: var(--serif); font-weight: 350; color: var(--ink);
  font-size: clamp(2.5rem, 1.3rem + 5vw, 5.7rem); line-height: 1.08; margin: 13vh auto 0; margin-top: 13svh; max-width: 14ch; }
.wline .w { display: inline-block; opacity: 0; transform: translateY(.6em); filter: blur(6px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
  transition-delay: calc(var(--i) * var(--stag)); }
.wline.in .w { opacity: 1; transform: none; filter: blur(0); }
.ov-gold { font-style: italic; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 38%, var(--gold-lite) 50%, var(--gold-hi) 62%, var(--gold) 100%);
  background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.wline.in .ov-gold { animation: ovSheen 1.4s ease-in-out 2.1s 1 both; }

@keyframes ovSheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.ov-silence { height: 24vh; height: 24svh; }
.ov-bell { font-family: var(--serif); font-weight: 350; color: var(--ink); white-space: nowrap;
  font-size: clamp(3rem, 1.2rem + 9.4vw, 8.4rem); line-height: 1.02; letter-spacing: .005em; margin: 0 auto; position: relative; }
.overture.ov-live .ov-bell { opacity: 0; will-change: opacity, transform; }
.ov-you { position: relative; display: inline-block; }
.ov-you em { font-style: italic; position: relative; z-index: 2;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 45%, var(--gold-lite) 80%, var(--gold-hi) 100%);
  background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-you.rung em { animation: ovSheen 1.6s ease-in-out .1s 1 both; }
.ov-hex { position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em; transform: translate(-50%, -54%); z-index: 1; }
.ov-hex polygon { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-opacity: .35; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.overture.ov-live .ov-hex polygon { stroke-dashoffset: 1; }
.ov-exhale { margin: 12vh auto 0; margin-top: 12svh; font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem); color: var(--ink-mute); max-width: 34ch; line-height: 1.5; text-wrap: balance; }
.ov-exhale b { font-style: normal; font-weight: 400; color: var(--gold-hi); }
.ov-meet { display: inline-block; margin-top: 5vh; margin-top: 5svh; font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-hi); text-decoration: none; padding-bottom: 6px;
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) no-repeat 50% 100% / 28px 1px; transition: background-size .35s var(--ease); }
.ov-meet:hover { background-size: 100% 1px; }
@media (max-width: 640px) {
.overture { --stag: 80ms; padding: 11svh 0 8svh; }
.ov-line1 { margin-top: 7svh; }
.ov-line2 { margin-top: 10svh; }
.ov-silence { height: 15svh; }
.ov-exhale { margin-top: 9svh; }
/* Small screens keep the secondaries, drop the fine filaments */
  .ov-b2, .ov-tip { display: none; }
}
/* ---------- The Jar Ledger: AEO answer as artifact ----------
   The key-facts block, kept verbatim in the DOM for answer engines
   (speakable selectors .aeo-answer / .aeo-facts preserved), dressed
   as an heirloom apothecary label lit from within the dark. */
.ledger { background: linear-gradient(180deg, #070502, var(--bg)); padding: 0 0 clamp(70px, 8vw, 110px); }
.ov-drop { width: 1px; height: 44px; margin: 0 auto 26px; background: linear-gradient(180deg, rgba(200,134,10,.4), transparent); }
/* Meet the jar: the thread lands on the jar itself, standing in the
   dark above its ledger card. */
.ledger-jar { position: relative; width: min(250px, 58vw); margin: 0 auto 34px; }
.ledger-jar::before { content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(200,134,10,.15), transparent 64%); pointer-events: none; }
.ledger-jar img { position: relative; z-index: 1;
  filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 34px 44px rgba(0,0,0,.62));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.ledger-card { position: relative; max-width: 660px; margin: 0 auto; background: var(--paper); color: var(--p-ink); border-radius: 6px;
  padding: clamp(34px, 5vw, 54px) clamp(24px, 4.5vw, 50px); text-align: center;
  box-shadow: 0 0 90px rgba(232,168,48,.09), 0 34px 80px rgba(0,0,0,.5); }
.ledger-card::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(154,103,8,.38); border-radius: 3px; pointer-events: none; }
.ledger-card::after { content: ''; position: absolute; right: 18px; bottom: 14px; width: 120px; height: 120px; opacity: .05; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='%23201809' stroke-width='.7'/%3E%3C/svg%3E") center/contain no-repeat; }
.ledger-mark { width: 30px; height: 30px; margin: 0 auto 14px; color: var(--gold); display: block; }
.ledger-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--p-gold); margin-bottom: 18px; }
.ledger .aeo-answer h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.2rem); letter-spacing: -.015em; color: var(--p-ink); margin-bottom: 14px; }
.ledger .aeo-answer p { font-size: 15px; color: var(--p-body); line-height: 1.72; max-width: 52ch; margin: 0 auto 10px; text-wrap: pretty; }
.ledger .aeo-answer strong { color: var(--p-ink); font-weight: 600; }
.ledger-dl { margin: 26px 0 0; text-align: left; }
.ledger-dl .lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 2px;
  border-bottom: 1px dotted rgba(11,9,6,.28); opacity: 0; transition: opacity .7s var(--ease-out); transition-delay: calc(var(--i) * 80ms + .25s); }
.ledger-card.in .lrow { opacity: 1; }
.ledger-dl dt { font-family: var(--serif); font-weight: 500; font-size: 15.5px; color: var(--p-ink); }
.ledger-dl dd { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--p-mute); text-align: right; }
.ledger-stars { width: 62px; height: 10px; background-color: var(--gold); vertical-align: -1px; margin-right: 6px;
  -webkit-mask-size: 12.4px 10px !important; mask-size: 12.4px 10px !important; }
.ledger-cta { margin-top: 28px; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ledger-ghost { color: var(--p-gold); background-image: linear-gradient(var(--p-gold), var(--p-gold)); font-size: 14px; }
@media (max-width: 480px) {
.ledger-dl .lrow { flex-direction: column; gap: 3px; align-items: flex-start; }
.ledger-dl dd { text-align: left; }
}
/* ---------- The Root Map ----------
   Six scattered complaints draw themselves down six mycelial threads
   into one glowing root hexagon: the diagnosis completes itself in
   front of the reader at reading pace. Scroll-scrubbed on desktop
   (sticky pin), timed draw-on-enter on mobile and small screens.
   All strokes are pathLength=1 fractions with non-scaling widths. */
.rootmap { background: #070502; position: relative; }
.rm-wrap { position: relative; }
.rootmap.rm-pinmode .rm-wrap { height: 205vh; height: 205svh; }
.rootmap.rm-pinmode .rm-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rm-pin { padding: 0; }
.rm-eyebrow { position: absolute; top: clamp(26px, 5svh, 54px); left: var(--gut); z-index: 3; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rm-pin.p-eye .rm-eyebrow { opacity: 1; transform: none; }
.rm-field { position: absolute; inset: 0; }
/* Clear the sticky nav: the constellation starts below it, so the
   top row of complaint labels is never hidden. */
.rootmap.rm-pinmode .rm-field { top: 84px; }
.rm-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rm-svg path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.rm-svg .rm-glow { stroke: var(--gold); stroke-width: 6; stroke-opacity: .14; }
.rm-svg .rm-core { stroke: var(--gold-hi); stroke-width: 1.5; stroke-opacity: .85; transition: stroke .25s, stroke-width .25s; }
.rm-svg .rm-core.hot { stroke: var(--gold-lite); stroke-width: 2.2; }
.rm-node { position: absolute; transform: translate(-50%, -100%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .0; cursor: default; padding: 10px; }
.rm-node i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; }
.rm-node.hot { color: var(--gold-lite); }
.rm-node.hot i { background: var(--gold-lite); border-color: var(--gold-lite); }
.rm-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-lite); box-shadow: 0 0 10px rgba(232,168,48,.8); transform: translate(-50%,-50%) scale(0); opacity: 0; z-index: 2; pointer-events: none; }
.rm-mote.go { animation: moteFlash .38s ease-out both; }

@keyframes moteFlash { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 45% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(.4); opacity: 0; } }
.rm-root { position: absolute; left: 34%; top: 66%; width: 46px; height: 52px; transform: translate(-50%,-50%); z-index: 2; }
.rm-root svg { width: 100%; height: 100%; overflow: visible; }
.rm-root polygon { fill: none; stroke: var(--gold-hi); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.rm-halo { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,168,48,.3), rgba(200,134,10,.1) 45%, transparent 70%); opacity: 0; }
.rm-root.pulse { animation: rootPulse .45s var(--ease) 1; }

@keyframes rootPulse { 50% { transform: translate(-50%,-50%) scale(1.06); } }
.rm-copy { position: absolute; left: 46%; right: 5%; top: 40%; z-index: 3; }
.rm-h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.3rem); max-width: 17ch; }
.rm-h2 .w { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(7px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
.rm-pin.p-s1 .rm-s1 .w { opacity: 1; transform: none; filter: blur(0); }
.rm-s2 { display: inline-block; font-style: italic; opacity: 0; transform: translateY(.4em); filter: blur(7px); transition: opacity .9s var(--ease-out) .1s, transform .9s var(--ease-out) .1s, filter .9s var(--ease-out) .1s;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 38%, var(--gold-lite) 50%, var(--gold-hi) 62%, var(--gold) 100%);
  background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-pin.p-s2 .rm-s2 { opacity: 1; transform: none; filter: blur(0); animation: ovSheen 1.3s ease-in-out 1.1s 1 both; }
.rm-flow { margin-top: 22px; font-size: 14.5px; color: var(--ink-mute); font-weight: 300; max-width: 44ch; opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rm-pin.p-fl .rm-flow { opacity: 1; transform: none; }
.rm-couplet { margin-top: 16px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1rem + 1.1vw, 26px); color: var(--gold-hi); line-height: 1.36; max-width: 30ch; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rm-pin.p-cp .rm-couplet { opacity: 1; transform: none; }
.rm-ctaP { margin-top: 26px; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rm-pin.p-cta .rm-ctaP { opacity: 1; transform: none; }
.rm-cta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi);
  background: rgba(200,134,10,.05); border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 15px 26px; cursor: pointer; transition: background .25s, border-color .25s, transform .22s var(--ease); }
.rm-cta:hover { background: rgba(200,134,10,.13); border-color: var(--gold); transform: translateY(-2px); }
/* Dawn seam: the darkness warms just before the paper arrives */
.rm-dawn { position: absolute; left: 50%; bottom: -12%; width: 130%; height: 44%; transform: translateX(-50%); pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(253,244,228,.14), rgba(232,168,48,.07) 45%, transparent 72%); opacity: 0; }
/* Flow mode (small screens / no pin): constellation block, then copy */
.rootmap.rm-flowmode .rm-pin { position: relative; height: auto; padding: 70px 0 40px; }
.rootmap.rm-flowmode .rm-eyebrow { position: static; margin: 0 0 26px; padding: 0 var(--gut); }
.rootmap.rm-flowmode .rm-field { position: relative; inset: auto; height: min(118vw, 560px); }
.rootmap.rm-flowmode .rm-copy { position: static; padding: 34px var(--gut) 0; }
.rootmap.rm-flowmode .rm-dawn { display: none; }
.rootmap.rm-flowmode .rm-pin.in .rm-eyebrow, .rootmap.rm-flowmode .rm-pin.in .rm-node { opacity: 1; transform: translate(-50%,-100%); }
.rootmap.rm-flowmode .rm-pin.in .rm-eyebrow { transform: none; }
.rootmap.rm-flowmode .rm-node { transition: opacity .8s var(--ease-out); transition-delay: calc(var(--ni) * 120ms); }
.rootmap.rm-flowmode .rm-pin.in .rm-svg path { animation: rmDash 1.5s var(--ease-out) forwards; animation-delay: calc(var(--pi) * .16s + .4s); }
.rootmap.rm-flowmode .rm-pin.in .rm-root polygon { animation: rmDash .9s var(--ease-out) 2s forwards; }
.rootmap.rm-flowmode .rm-pin.in .rm-halo { animation: haloOn 1s ease-out 2.5s forwards; }
.rootmap.rm-flowmode .rm-pin.in .rm-h2 .w, .rootmap.rm-flowmode .rm-pin.in .rm-s2 { opacity: 1; transform: none; filter: blur(0); }
.rootmap.rm-flowmode .rm-pin.in .rm-flow, .rootmap.rm-flowmode .rm-pin.in .rm-couplet, .rootmap.rm-flowmode .rm-pin.in .rm-ctaP { opacity: 1; transform: none; }

@keyframes rmDash { to { stroke-dashoffset: 0; } }

@keyframes haloOn { to { opacity: 1; } }
/* ---------- Coherence: four stations on the spine ----------
   The light from the root map crosses onto paper and becomes ink:
   a drawn spine runs down the sheet's center gutter, the four claim
   cards dock onto it as stations, and a fine bridge line joins the
   word Reishi in cards 01 and 04: Symbiotic Stacking drawn, not
   claimed. Station fractions are computed at runtime from layout, never hardcoded. */
.sp-wrap { position: relative; }
.sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.sp-svg path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.sp-spine { stroke: var(--p-gold); stroke-width: 1.5; stroke-opacity: .55; }
.sp-bridge { stroke: var(--p-gold); stroke-width: 1.2; stroke-opacity: .7; stroke-dasharray: 1; }
.sp-bridge.go { transition: stroke-dashoffset 1.25s var(--ease); stroke-dashoffset: 0 !important; }
.sp-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) clamp(56px, 7vw, 96px) minmax(0,1fr); z-index: 2; }
.sp-colL, .sp-colR { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.sp-colL { grid-column: 1; }
.sp-colR { grid-column: 3; padding-top: clamp(120px, 16vw, 210px); }
.coh-card { background: var(--paper-2); border: 1px solid var(--p-rule); border-radius: var(--r-md); padding: 34px 32px; position: relative;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .8s var(--ease-out); }
.coh-card.st-on { opacity: 1; transform: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 14px 34px rgba(34,26,14,.1); }
/* Station branch: a short ink line from the spine to the card edge */
.coh-card::before { content: ''; position: absolute; top: 46px; width: clamp(28px, 3.5vw, 48px); height: 1.5px; background: var(--p-gold); opacity: .55;
  transform: scaleX(0); transition: transform .5s var(--ease) .15s; }
.sp-colL .coh-card::before { right: calc(clamp(28px, 3.5vw, 48px) * -1); transform-origin: right center; }
.sp-colR .coh-card::before { left: calc(clamp(28px, 3.5vw, 48px) * -1); transform-origin: left center; }
.coh-card.st-on::before { transform: scaleX(1); }
/* Compound cross-highlight: hover or tap any compound and every
   occurrence lights across all four cards */
.cmp { cursor: pointer; border-bottom: 1px dotted transparent; transition: color .22s, border-color .22s, background .22s; padding: 1px 2px; margin: -1px -2px; border-radius: 3px; }
.cmp.hotc { color: var(--p-gold); background: rgba(200,134,10,.1); border-bottom-color: var(--p-gold); }
/* Reishi bridge lighting: underline sheen fired the frame the bridge completes */
.rei { position: relative; }
.rei::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: linear-gradient(90deg, var(--p-gold), var(--gold-hi), var(--p-gold)); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); }
.rei.lit::after { transform: scaleX(1); }
.sp-caption { display: table; margin: 30px auto 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-gold); background: var(--paper); border: 1px dotted rgba(154,103,8,.45); border-radius: 99px; padding: 8px 16px;
  opacity: 0; transition: opacity .7s var(--ease-out) .5s; }
.sp-caption.on { opacity: 1; }
/* Gold-leaf seal: the spine terminus stamps the sheet closed */
.sp-seal { display: flex; justify-content: center; margin-top: 40px; }
.sp-seal svg { width: 44px; height: 50px; filter: drop-shadow(0 2px 6px rgba(154,103,8,.3)); }
@media (max-width: 880px) {
.sp-grid { grid-template-columns: 1fr; padding-left: 34px; }
.sp-svg { left: 0; }
.sp-colL, .sp-colR { grid-column: 1; padding-top: 0; gap: 28px; }
.sp-colR { margin-top: 28px; }
.coh-card::before { display: none; }
.sp-caption { position: static; transform: none; display: inline-block; margin: 22px 0 0 0; white-space: normal; }
}
.coh-num { width: 40px; height: 45px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--p-gold); margin-bottom: 16px;
  background: rgba(200,134,10,.09);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.coh-card h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-h3); margin-bottom: 12px; color: var(--p-ink); }
.coh-card p { font-size: 15px; line-height: 1.72; }
.coh-card .ing { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--p-rule); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--p-gold); text-transform: uppercase; }
.fda-note { margin-top: 32px; font-size: 12px; color: var(--p-mute); border-top: 1px solid var(--p-rule); padding-top: 18px; }
/* ---------- Ingredients ---------- */
.ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 60px); align-items: center; }
@media (max-width: 920px) {
.ing-grid { grid-template-columns: 1fr; }
}
.ing-photo { border-radius: 300px 300px var(--r-md) var(--r-md); overflow: hidden; position: relative; aspect-ratio: 4/5; box-shadow: 0 30px 60px rgba(34,26,14,.2); }
.ing-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.97); }
.ing-photo::after { content: ''; position: absolute; inset: 0; background: rgba(200,134,10,.08); mix-blend-mode: multiply; }
.ing-row { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--p-rule); align-items: baseline; }
.ing-row .nm { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--p-ink); transition: color .25s; }
.ing-row:hover .nm { color: var(--p-gold); }
.ing-row .role { font-size: 14px; color: var(--p-body); }
.ing-row .role i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--p-mute); letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 2px; }
@media (max-width: 480px) {
.ing-row { grid-template-columns: 1fr; gap: 3px; }
}
.ing-more-d summary { cursor: pointer; list-style: none; padding: 18px 0 0; }
.ing-more-d summary::-webkit-details-marker { display: none; }
.ing-more { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold); display: flex; align-items: center; gap: 9px; }
.ing-more-d[open] summary .ing-more .pm { transform: rotate(45deg); }
.ing-more .pm { transition: transform .25s; display: inline-block; }
.ing-note { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); }
/* ---------- The Ritual ---------- */
.ritual { background: var(--bg); }
.ritual::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .45; pointer-events: none; }
.ritual .wrap { position: relative; z-index: 1; }
.rit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
@media (max-width: 880px) {
.rit-grid { grid-template-columns: 1fr; }
}
.rit-grid::before { content: ''; position: absolute; top: 34px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-2) 15%, var(--rule-2) 85%, transparent); }
@media (max-width: 880px) {
.rit-grid::before { display: none; }
}
.rit-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 30px 28px 32px; position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .35s; }
.rit-card:hover { transform: translateY(-4px); border-color: var(--rule-2); }
.rit-step { width: 46px; height: 52px; display: grid; place-items: center; font-family: var(--mono); font-size: 15px; color: var(--gold-hi); background: linear-gradient(160deg, rgba(200,134,10,.24), rgba(200,134,10,.07)); margin-bottom: 20px; position: relative; z-index: 2;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.rit-card h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); margin-bottom: 10px; }
.rit-card p { font-size: 14.5px; color: var(--ink-mute); font-weight: 300; }
.rit-card p b { color: var(--gold-hi); font-weight: 500; }
/* Full-width rule (Jason, 2026-07-31): a line of copy below
   full-width elements is never clamped to a narrow column. */
.rit-note { margin-top: 30px; font-size: 14px; color: var(--ink-mute); font-weight: 300; }
.rit-note b { color: var(--ink); font-weight: 500; }
/* ---------- BUY ---------- */
.buy { background: var(--bg-2); overflow: hidden; }
.buy::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .6; }
.buy::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 28% 50%, rgba(200,134,10,.13), transparent 62%); pointer-events: none; }
.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; position: relative; z-index: 2; }
@media (max-width: 980px) {
.buy-grid { grid-template-columns: 1fr; gap: 40px; }
}
.buy-left img { width: min(420px, 84%); margin: 0 auto; filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 40px 50px rgba(0,0,0,.62));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 36px; }
@media (max-width: 620px) {
.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 8px; }
}
.stat-strip .v { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); color: var(--gold-hi); text-align: center; font-weight: 400; }
.stat-strip .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; line-height: 1.55; text-align: center; }
.buybox { background: var(--paper); color: var(--p-ink); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); box-shadow: 0 44px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(232,168,48,.24); position: relative; overflow: hidden; }
.buybox::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 5px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 30%, var(--gold-lite) 50%, var(--gold-hi) 70%, var(--gold-lo)); }
.buybox::after { content: ''; position: absolute; right: -30px; bottom: -36px; width: 190px; height: 190px; opacity: .07; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l9 5.25v10.5l-9 5.25-9-5.25V6.75z' fill='none' stroke='%23201809' stroke-width='.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.buybox > * { position: relative; z-index: 1; }
.bb-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--p-gold); margin-bottom: 10px; }
.buybox h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -.01em; }
.buybox .tm { font-size: .42em; vertical-align: .7em; letter-spacing: 0; }
.bb-stars { display: flex; align-items: center; gap: 10px; margin: 12px 0 22px; font-size: 14px; color: var(--p-mute); flex-wrap: wrap; }
.bb-stars .st { color: var(--p-gold); display: flex; }
.bb-stars b { color: var(--p-ink); }
.bb-stars a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--p-rule); }
.bb-stars a:hover { color: var(--p-gold); }
.opt { display: block; border: 1.5px solid var(--p-rule); border-radius: var(--r-md); padding: 17px 20px; margin-bottom: 11px; cursor: pointer; transition: border-color .22s, background .22s, box-shadow .22s; position: relative; }
.opt:hover { border-color: rgba(200,134,10,.5); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .o-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.opt .o-name { font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 11px; }
.opt .o-name::before { content: ''; display: inline-block; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--p-rule); transition: box-shadow .25s; flex: none; }
.opt.sel { border-color: var(--gold); background: var(--paper-2); box-shadow: 0 4px 18px rgba(200,134,10,.13); }
.opt.sel .o-name::before { box-shadow: inset 0 0 0 5.5px var(--gold); }
.opt .o-price { font-family: var(--serif); font-size: 24px; font-weight: 500; white-space: nowrap; }
.opt .o-price .cur { font-size: .58em; vertical-align: .42em; }
.opt .o-price small { font-family: var(--sans); font-size: 13px; color: var(--p-mute); font-weight: 400; }
.opt .o-sub { font-size: 13px; color: var(--p-mute); margin-top: 5px; padding-left: 28px; }
.opt .o-badge { position: absolute; top: -10px; right: 16px; background: var(--gold); color: #17110A; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; }
.bb-cta { display: flex; width: 100%; text-align: center; font-weight: 600; font-size: 17px; color: #17110A; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo)); padding: 19px; border-radius: var(--r-sm); margin-top: 20px; box-shadow: inset 0 1px 0 rgba(255,236,190,.6); }
.bb-fine { display: flex; justify-content: center; gap: 20px; margin-top: 15px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); flex-wrap: wrap; }
.bb-fine span { display: flex; align-items: center; gap: 6px; }
.bb-fine a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--p-rule); }
.bb-fine a:hover { color: var(--p-gold); }
.bb-unlock { margin-top: 18px; border: 1px dashed rgba(200,134,10,.5); background: rgba(232,168,48,.08); border-radius: var(--r-sm); padding: 14px 16px; font-size: 13.5px; color: var(--p-body); }
.bb-unlock b { color: var(--p-gold); font-weight: 600; }
.bb-unlock button { background: none; border: none; padding: 0; cursor: pointer; color: var(--p-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bb-unlock .fine { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); margin-top: 7px; }
.bb-vets { margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.bb-vets a { color: var(--p-gold); text-decoration: none; border-bottom: 1px solid var(--p-rule); }
.bb-pay { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; opacity: .55; flex-wrap: wrap; }
.bb-pay span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); border: 1px solid var(--p-rule); border-radius: 4px; padding: 4px 8px; }
/* ---------- Reviews ---------- */
.rev-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--p-rule); }
.rev-score { font-family: var(--serif); font-size: 46px; color: var(--p-ink); line-height: 1; font-weight: 400; }
.rev-meta .st { color: var(--p-gold); display: flex; }
.rev-meta small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-mute); display: block; margin-top: 6px; }
.rev-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.rev-actions a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold); text-decoration: none; border: 1px solid var(--p-rule); border-radius: var(--r-sm); padding: 12px 18px; transition: border-color .25s, transform .25s; }
.rev-actions a:hover { border-color: var(--p-gold); transform: translateY(-2px); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) {
.rev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.rev-grid { grid-template-columns: 1fr; }
}
.rev-card { background: var(--paper-2); border: 1px solid var(--p-rule); border-radius: var(--r-md); padding: 28px 26px; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.rev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(34,26,14,.12); }
.rev-card .st { color: var(--p-gold); margin-bottom: 13px; display: flex; }
.rev-card h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin-bottom: 10px; color: var(--p-ink); }
.rev-card p { font-size: 14.5px; line-height: 1.72; flex: 1; }
.rev-card .who { margin-top: 17px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--p-mute); display: flex; align-items: center; gap: 8px; }
.rev-card .who .vf { color: var(--p-gold); }
.rev-typ { margin-top: 26px; font-size: 12px; color: var(--p-mute); }
/* ---------- HUM manifesto ---------- */
.hum { background: var(--bg-deep) url('/cdn/shop/files/brand-story-bg.webp?v=1785341608&width=1400') center/cover no-repeat; }
.hum::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,6,.95), rgba(11,9,6,.74) 50%, rgba(11,9,6,.95)); }
.hum .wrap { position: relative; z-index: 2; }
.hum-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (max-width: 920px) {
.hum-grid { grid-template-columns: 1fr; gap: 46px; }
}
.hum-lockup { text-align: center; }
.hum-lockup img { width: min(320px, 78%); margin: 0 auto 20px; }
.hum-lockup p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--ink-mute); }
.hum-lockup p b { color: var(--gold-hi); font-weight: 500; }
.hum-copy p { font-size: clamp(15px, .9rem + .3vw, 16.5px); font-weight: 300; color: var(--ink-mute); margin-bottom: 22px; line-height: 1.82; max-width: 58ch; }
.hum-copy p strong { font-family: var(--serif); font-weight: 400; font-size: 1.16em; color: var(--gold-hi); }
/* ---------- Video wall ---------- */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) {
.vid-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.vid-grid { grid-template-columns: 1fr; }
}
.vid-card { position: relative; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--bg-card); cursor: pointer; text-align: left; padding: 0; width: 100%; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; display: block; }
.vid-card:hover { transform: translateY(-4px); border-color: var(--rule-2); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.vid-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) saturate(.88) brightness(.86); transition: transform .7s var(--ease), filter .4s; }
.vid-card:hover .vid-thumb img { transform: scale(1.05); filter: sepia(.1) saturate(1) brightness(.95); }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; }
.vid-play i { width: 56px; height: 56px; border-radius: 50%; background: rgba(11,9,6,.72); backdrop-filter: blur(6px); border: 1px solid rgba(232,168,48,.5); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.vid-play i::after { content: ''; width: 0; height: 0; border-left: 13px solid var(--gold-hi); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.vid-card:hover .vid-play i { transform: scale(1.1); background: rgba(232,168,48,.2); }
.vid-body { padding: 20px 22px 22px; }
.vid-body h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.32; color: var(--ink); }
.vid-body span { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.vid-foot { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* ---------- Devotion ---------- */
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) {
.dev-grid { grid-template-columns: 1fr; }
}
.dev-card { position: relative; border-radius: var(--r-md); overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; text-decoration: none; }
.dev-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.95); }
.dev-card:hover img { transform: scale(1.05); }
.dev-card .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,6,.08) 28%, rgba(11,9,6,.94)); }
.dev-card .dc-body { position: relative; z-index: 2; padding: 34px; }
.dev-card .dc-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.dev-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 30px); margin: 10px 0; }
.dev-card p { font-size: 14.5px; color: var(--ink-mute); max-width: 46ch; }
.dev-card .more { display: inline-block; margin-top: 15px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
/* ---------- Full-bleed bands ---------- */
.band { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; padding: 0; }
.band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.95); }
.band .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,9,6,.94) 18%, rgba(11,9,6,.3)); }
.band.alt .veil { background: linear-gradient(270deg, rgba(11,9,6,.94) 18%, rgba(11,9,6,.3)); }
.band .wrap { position: relative; z-index: 2; padding-top: clamp(80px,9vw,120px); padding-bottom: clamp(80px,9vw,120px); }
.band h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); max-width: 14ch; margin-top: 18px; }
.band p { margin-top: 18px; max-width: 48ch; color: var(--ink-mute); font-weight: 300; font-size: var(--t-lead); }
.band .more { display: inline-block; margin-top: 24px; }
.band.alt .band-copy { margin-left: auto; text-align: right; max-width: 580px; }
.band.alt .band-copy p, .band.alt .band-copy h2 { margin-left: auto; }
.band.alt .band-copy .eyebrow { justify-content: flex-end; }
@media (max-width: 780px) {
.band.alt .band-copy { margin-left: 0; text-align: left; max-width: none; }
.band.alt .band-copy p, .band.alt .band-copy h2 { margin-left: 0; }
.band.alt .band-copy .eyebrow { justify-content: flex-start; }
}
/* ============================================================
   EVENTS · PARTNERS · HIVE · FAQ · FOOTER · CART
   ============================================================ */

/* ---------- Events ---------- */
.ev-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 48px; }
.ev-head .sec-head { margin-bottom: 0; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) {
.event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.event-grid { grid-template-columns: 1fr; }
}
.event-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.event-card:hover { transform: translateY(-4px); border-color: var(--rule-2); box-shadow: 0 18px 44px rgba(0,0,0,.42); }
.ev-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.ev-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.84) contrast(1.04) brightness(.94); transition: transform .8s var(--ease); }
.event-card:hover .ev-img img { transform: scale(1.05); }
.ev-badge { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; background: rgba(11,9,6,.78); backdrop-filter: blur(6px); border: 1px solid var(--rule); color: var(--ink-mute); }
.ev-badge.live { color: var(--gold-hi); border-color: rgba(232,168,48,.45); }
.ev-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ev-date { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); }
.ev-venue { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 6px 0 10px; }
.ev-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin-bottom: 8px; }
.ev-body p { font-size: 14px; color: var(--ink-mute); flex: 1; font-weight: 300; }
.ev-body .more { display: inline-block; margin-top: 15px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); border-bottom: 1px solid var(--rule); padding-bottom: 3px; width: fit-content; }
/* ---------- Affiliate band ---------- */
.affil { background: linear-gradient(140deg, var(--bg-3), var(--bg-deep) 62%); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.affil::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .7; pointer-events: none; }
.affil::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 70% at 78% 50%, rgba(200,134,10,.15), transparent 66%); pointer-events: none; }
.affil .wrap { position: relative; z-index: 2; }
.affil-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(34px,4.5vw,70px); align-items: center; }
@media (max-width: 940px) {
.affil-grid { grid-template-columns: 1fr; }
}
.affil h2 { font-size: var(--t-h2); margin-top: 18px; max-width: 15ch; }
.affil p { margin-top: 18px; color: var(--ink-mute); font-weight: 300; font-size: var(--t-lead); max-width: 50ch; }
.affil-terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 520px) {
.affil-terms { grid-template-columns: 1fr; }
}
.affil-term { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 22px 22px; background: rgba(20,16,10,.55); }
.affil-term .v { font-family: var(--serif); font-size: 27px; color: var(--gold-hi); font-weight: 400; }
.affil-term .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }
/* ---------- Partner ladder ---------- */
.pt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1120px) {
.pt-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.pt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
.pt-grid { grid-template-columns: 1fr; }
}
.pt-card { border: 1px solid var(--p-rule); border-radius: var(--r-md); padding: 26px 22px 28px; background: var(--paper-2); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pt-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold-lo)); opacity: 0; transition: opacity .3s; }
.pt-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(34,26,14,.14); }
.pt-card:hover::before { opacity: 1; }
.pt-k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--p-gold); }
.pt-card h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 10px 0 8px; color: var(--p-ink); }
.pt-rate { font-family: var(--serif); font-size: 22px; color: var(--p-gold); margin-bottom: 8px; font-weight: 500; }
.pt-card p { font-size: 13.5px; color: var(--p-body); flex: 1; line-height: 1.65; }
.pt-cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.pt-cta .btn-dark { font-weight: 600; font-size: 15px; color: var(--paper); background: var(--p-ink); padding: 16px 30px; border-radius: var(--r-sm); text-decoration: none; transition: transform .22s, background .22s; display: inline-flex; align-items: center; }
.pt-cta .btn-dark:hover { transform: translateY(-2px); background: #3A2C13; }
.pt-cta .btn-line { font-weight: 600; font-size: 15px; color: var(--p-ink); border: 1px solid var(--p-rule); padding: 16px 30px; border-radius: var(--r-sm); text-decoration: none; transition: transform .22s, border-color .22s; display: inline-flex; align-items: center; }
.pt-cta .btn-line:hover { transform: translateY(-2px); border-color: var(--p-gold); }
/* ---------- Join the Hive ---------- */
.hive { background: var(--bg); }
.hive::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .7; pointer-events: none; }
.hive::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 66% at 50% 45%, rgba(200,134,10,.13), transparent 64%); pointer-events: none; }
.hive .wrap { position: relative; z-index: 2; }
.hive-box { max-width: 780px; margin: 0 auto; text-align: center; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(34px, 4.5vw, 58px); background: linear-gradient(170deg, rgba(23,17,10,.9), rgba(11,9,6,.9)); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.hive-box .eyebrow { justify-content: center; }
.hive-box h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin: 18px 0 16px; }
.hive-box > p { color: var(--ink-mute); font-weight: 300; max-width: 52ch; margin: 0 auto 12px; font-size: var(--t-lead); }
.hive-perks { display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: center; margin: 24px 0 28px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.hive-perks span { display: flex; align-items: center; gap: 7px; }
.hive-perks i.ic { color: var(--gold); }
.hive-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto; flex-wrap: wrap; }
.hive-form input { flex: 1 1 240px; background: rgba(11,9,6,.7); border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 16px 18px; outline: none; transition: border-color .25s; }
.hive-form input:focus { border-color: var(--gold-hi); }
.hive-form input::placeholder { color: var(--ink-faint); }
.hive-form button { flex: 0 0 auto; }
.hive-fine { margin-top: 16px; font-size: 11.5px; color: var(--ink-faint); max-width: 54ch; margin-left: auto; margin-right: auto; }
.hive-fine a { color: var(--ink-mute); }
.form-ok { display: none; margin-top: 18px; font-size: 14.5px; color: var(--gold-hi); font-weight: 500; }
.form-ok.on { display: block; animation: riseIn .5s var(--ease-out) both; }
/* ---------- FAQ ---------- */
#faq .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
#faq .sec-head .eyebrow { justify-content: center; }
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--p-rule); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 0; font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1rem + .35vw, 19px); color: var(--p-ink); transition: color .25s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--p-gold); }
.faq-item summary .pm { font-family: var(--mono); color: var(--p-gold); font-size: 18px; flex-shrink: 0; transition: transform .28s var(--ease); }
.faq-item[open] summary .pm { transform: rotate(45deg); }
.faq-item .fa-body { padding: 0 0 24px; font-size: 15px; color: var(--p-body); line-height: 1.78; }
.faq-item .fa-body a { color: var(--p-gold); }
.faq-foot { max-width: 840px; margin: 34px auto 0; text-align: center; font-size: 14px; color: var(--p-mute); }
.faq-foot a { color: var(--p-gold); }
/* ---------- Final CTA ---------- */
.final { background: var(--bg); text-align: center; padding: clamp(96px,10vw,150px) 0 clamp(84px,9vw,130px); }
.final::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 42%, #000 28%, transparent 80%);
  mask-image: radial-gradient(ellipse 50% 70% at 50% 42%, #000 28%, transparent 80%); }
.final::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 65% at 50% 45%, rgba(200,134,10,.15), transparent 64%); pointer-events: none; }
.final .wrap { position: relative; z-index: 2; }
.final .jar-wrap { width: 220px; margin: 0 auto 32px; }
.final img.jar { filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg) drop-shadow(0 30px 40px rgba(0,0,0,.6));
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 48%, #000 50%, transparent 76%); }
.final h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); max-width: 16ch; margin: 0 auto 18px; }
.final p { color: var(--ink-mute); max-width: 50ch; margin: 0 auto 34px; font-weight: 300; font-size: var(--t-lead); }
.final .final-fine { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 22px; }
/* ---------- Footer ---------- */
footer { background: var(--bg-deep); border-top: 1px solid var(--rule); padding: 72px 0 40px; position: relative; overflow: hidden; }
footer::before { content: 'ALVARA'; position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font-family: var(--serif); font-weight: 300; font-size: clamp(110px, 17vw, 250px); letter-spacing: .06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(200,134,10,.09); pointer-events: none; white-space: nowrap; }
footer .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
@media (max-width: 880px) {
.foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
.foot-grid { grid-template-columns: 1fr; }
}
.foot-grid h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; font-weight: 400; }
.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid a { color: var(--ink-mute); text-decoration: none; font-size: 14px; transition: color .2s; }
.foot-grid a:hover { color: var(--gold-hi); }
.foot-brand img { height: 22px; margin-bottom: 16px; }
.foot-brand p { font-size: 13.5px; color: var(--ink-faint); max-width: 34ch; font-weight: 300; }
.foot-contact { margin-top: 15px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); line-height: 2; }
.foot-contact a { text-decoration: none; }
.foot-social { margin-top: 16px; display: flex; gap: 12px; }
.foot-social a { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 8px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.frule { border: none; border-top: 1px solid var(--rule); margin: 0 0 24px; }
.fda { font-size: 11.5px; color: var(--ink-faint); line-height: 1.7; }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); }
.legal a { color: var(--ink-faint); text-decoration: none; margin-right: 16px; }
.legal a:hover { color: var(--gold-hi); }
/* ---------- Sticky ATC ---------- */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: rgba(11,9,6,.94); backdrop-filter: blur(16px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform .38s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.sticky-atc.show { transform: translateY(0); }
.satc-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; }
.satc-row img { height: 50px; width: auto; filter: sepia(.2) saturate(1.06) brightness(.97) hue-rotate(-8deg); border-radius: 4px; }
.satc-name { font-family: var(--serif); font-size: 17px; }
.satc-name small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.satc-spacer { flex: 1; }
.satc-price { font-family: var(--serif); font-size: 20px; color: var(--gold-hi); white-space: nowrap; }
.satc-price small { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); }
.satc-cta { position: relative; overflow: hidden; font-weight: 600; font-size: 14.5px; color: #17110A; background: linear-gradient(135deg, var(--gold-hi), var(--gold)); padding: 14px 26px; border-radius: var(--r-sm); border: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,236,190,.55); }
@media (max-width: 720px) {
.satc-name { display: none; }
.satc-row img { height: 40px; }
.satc-price { font-size: 16px; }
}
/* ============================================================
   CART DRAWER
   ============================================================ */
.scrim { position: fixed; inset: 0; z-index: 190; background: rgba(4,3,2,.68); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.scrim.on { opacity: 1; visibility: visible; }
/* ---------- Modal (opt-in) ---------- */
.modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.modal.on { opacity: 1; visibility: visible; }
.modal-card { position: relative; width: min(540px, 100%); max-height: 90vh; overflow-y: auto; background: var(--paper); color: var(--p-ink); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 46px); box-shadow: 0 50px 110px rgba(0,0,0,.6); transform: translateY(18px) scale(.98); transition: transform .38s var(--ease-out); }
.modal.on .modal-card { transform: none; }
.modal-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 5px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 30%, var(--gold-lite) 50%, var(--gold-hi) 70%, var(--gold-lo)); }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--p-rule); border-radius: var(--r-sm); width: 34px; height: 34px; cursor: pointer; color: var(--p-mute); display: grid; place-items: center; font-size: 16px; transition: border-color .25s, color .25s; }
.modal-close:hover { border-color: var(--p-gold); color: var(--p-gold); }
.modal-card .eyebrow { color: var(--p-gold); }
.modal-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); margin: 14px 0 12px; letter-spacing: -.01em; }
.modal-card > p { font-size: 15px; color: var(--p-body); max-width: 46ch; }
.modal-form { display: flex; gap: 9px; margin-top: 22px; flex-wrap: wrap; }
.modal-form input { flex: 1 1 220px; background: var(--paper-2); border: 1.5px solid var(--p-rule); border-radius: var(--r-sm); color: var(--p-ink); font-family: var(--sans); font-size: 15px; padding: 16px 18px; outline: none; transition: border-color .25s; }
.modal-form input:focus { border-color: var(--gold); }
.modal-form button { flex: 0 0 auto; }
.modal-fine { margin-top: 15px; font-size: 11.5px; color: var(--p-mute); }
.modal-fine a { color: var(--p-gold); }
.modal-reveal { display: none; margin-top: 22px; border: 1px dashed rgba(200,134,10,.55); background: rgba(232,168,48,.1); border-radius: var(--r-md); padding: 20px; text-align: center; }
.modal-reveal.on { display: block; animation: riseIn .5s var(--ease-out) both; }
.modal-reveal .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-mute); }
.modal-reveal .code { font-family: var(--mono); font-size: 24px; letter-spacing: .2em; color: var(--p-gold); margin: 9px 0 4px; font-weight: 500; }
.modal-reveal .note { font-size: 12.5px; color: var(--p-mute); }
.modal-reveal .copy { margin-top: 14px; background: var(--p-ink); color: var(--paper); border: none; border-radius: var(--r-sm); padding: 12px 24px; cursor: pointer; font-weight: 600; font-size: 14px; }
/* ---------- Video lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s; }
.lightbox.on { opacity: 1; visibility: visible; }
.lb-frame { width: min(1000px, 100%); aspect-ratio: 16/9; background: #000; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.lb-frame iframe { width: 100%; height: 100%; border: 0; }
.lb-close { position: absolute; top: 20px; right: 20px; background: rgba(11,9,6,.8); border: 1px solid var(--rule); border-radius: var(--r-sm); width: 40px; height: 40px; cursor: pointer; color: var(--ink); display: grid; place-items: center; font-size: 18px; }
.lb-close:hover { color: var(--gold-hi); border-color: var(--gold); }
/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%); z-index: 220; background: var(--bg-card); border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 14px 22px; font-size: 14px; color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: transform .4s var(--ease-out); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px); }
.toast.on { transform: translate(-50%, 0); }
.toast i.ic { color: var(--gold-hi); }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero .eyebrow, .hero h1, .hero-deck, .hero-ctas, .hero-proof, .hero-jar img { animation: none; opacity: 1; transform: none; }
  .hero-halo polygon, .hero-halo circle { stroke-dashoffset: 0; }
  .pollen, .marquee-track { display: none; }
  .drawer, .modal-card { transition: none; }
  /* Overture: everything rests in its final state */
  .wline .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ov-bell, .overture.ov-live .ov-bell { opacity: 1 !important; transform: none !important; letter-spacing: .005em !important; }
  .overture.ov-live #ovThreadMain, .overture.ov-live #ovThreadTail, .overture.ov-live .ov-hex polygon { stroke-dashoffset: 0 !important; }
  .ov-thread path { stroke-opacity: .22; stroke-dashoffset: 0 !important; }
  .ov-tip { opacity: .45 !important; }
  .ledger-dl .lrow { opacity: 1 !important; }
  /* Root map + spine: fully drawn, fully legible, no pin */
  .rootmap.rm-pinmode .rm-wrap { height: auto !important; }
  .rootmap.rm-pinmode .rm-pin { position: relative !important; height: auto !important; min-height: 100vh; }
  .rm-svg path, .rm-root polygon, .sp-svg path { stroke-dashoffset: 0 !important; animation: none !important; }
  .rm-node, .rm-eyebrow, .rm-h2 .w, .rm-s2, .rm-flow, .rm-couplet, .rm-ctaP { opacity: 1 !important; transform: none !important; filter: none !important; }
  .rm-node { transform: translate(-50%,-100%) !important; }
  .rm-halo { opacity: 1 !important; }
  .rm-mote { display: none; }
  .coh-card { opacity: 1 !important; transform: none !important; }
  .coh-card::before { transform: scaleX(1) !important; }
  .sp-caption { opacity: 1 !important; }
  .rei::after { transform: scaleX(1) !important; }
}
@media print {
.sticky-atc, .scrim, .modal, .rail, .announce, .lightbox { display: none !important; }
}
/* Cream sheets that host multiple sections */
  .cream.sheet { padding: 0; }
.cream .wrap { position: relative; z-index: 1; }
.cream.sheet > section + section { border-top: 1px solid var(--p-rule); }


/* ---------- Shopify commerce glue (draft build) ---------- */
.bb-form-hidden { display: none; }
.alvara-locked { overflow: hidden; }
.bb-form .add-to-cart-text { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.bb-form .bb-cta { width: 100%; display: flex; justify-content: center; }
.bb-form add-to-cart-component { display: block; }

/* ---------- Theme-context color roots ----------
   The prototype set color/font on <body>; inside Horizon each ALVARA
   dark section carries its own root so theme schemes never bleed in. */
.hero, .trustbar, .marquee, .overture, .ledger, .rootmap, .ritual, .buy,
.hum, .band, .affil, .hive, .final, .sticky-atc, .announce, footer.alvara-footer,
.alvara-dark {
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.hero h1, .hero .h-serif { color: var(--ink); }
.h-serif em { font-style: italic; }
.cream, .cream .h-serif, .ledger-card { color: var(--p-ink); }
.ledger-card { font-family: var(--sans); }
/* Horizon resets that fight the prototype look */
.hero h1 { margin: 24px 0 26px; }
.shopify-section { margin: 0; }

/* ============================================================
   MOBILE / RESPONSIVE POLISH LAYER (2026-08-01)
   Loaded last so it wins the cascade over both Horizon base
   styles and the ported prototype rules.
   ============================================================ */

/* 1. Media that must fill its box: Horizon's img{height:auto}
   collapses absolutely-positioned cover images. */
.hero-bg, .band img.bg, .dev-card > img, .ev-img img, .vid-thumb img,
.ing-photo img { height: 100% !important; width: 100% !important; object-fit: cover; }

/* 2. Composite wrappers must never zero the .wrap side padding:
   shorthand padding on the grid killed the inline padding. */
.wrap.hero-grid { padding: 48px 22px 66px !important; }
@media (min-width: 720px) { .wrap.hero-grid { padding: 48px 48px 66px !important; } }
@media (max-width: 940px) { .wrap.hero-grid { padding: 36px 22px 60px !important; } }
.wrap.satc-row { padding: 11px 22px !important; }
@media (min-width: 720px) { .wrap.satc-row { padding: 11px 48px !important; } }

/* 3. Word-split lines: the Liquid loop emits spans without
   whitespace; restore true inter-word rhythm. */
.wline .w, .rm-h2 .w { margin-right: .27em; }
.wline .w:last-child, .rm-h2 .w:last-child { margin-right: 0; }

/* 4. Touch targets: comfortable thumbs on every small link. */
.ov-meet, .bb-vets a, .announce button, .ledger-ghost, .btn-ghost,
.rev-actions a, .ev-body .more, .dev-card .more, .bb-stars a,
.faq-foot a, .hive-fine a { padding-top: 10px; padding-bottom: 10px; display: inline-block; }
.announce button { padding-top: 6px; padding-bottom: 6px; }
.bb-fine a, .legal a { padding: 8px 2px; display: inline-block; }

/* 5. Small-screen rhythm and scale */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(44px, 12.5vw, 56px); }
  .trust-cell { padding: 18px 10px; }
  .trust-cell .t-sub { font-size: 9px; letter-spacing: .1em; }
  .buybox { padding: 26px 18px 30px; }
  .opt { padding: 15px 14px; }
  .opt .o-price { font-size: 21px; }
  .ledger-card { padding: 30px 20px; }
  .sec-head h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .rit-card, .coh-card { padding: 26px 22px; }
  .event-card .ev-body { padding: 18px 18px 20px; }
  .pt-card { padding: 22px 18px 24px; }
  .affil-term { padding: 18px 16px; }
  .hive-box { padding: 30px 20px; }
  .faq-item summary { padding: 19px 0; }
  .final h2 { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .marquee span { font-size: 10px; letter-spacing: .2em; }
  .satc-cta { padding: 12px 18px; font-size: 13.5px; }
  .rm-copy { padding: 30px 22px 0; }
  .rm-couplet { font-size: 19px; }
  .vid-body h3 { font-size: 16px; }
  .sp-caption { font-size: 9px; letter-spacing: .1em; }
}

/* 6. Tablet: keep the root map pinned only where it breathes */
@media (max-width: 880px) and (min-width: 760px) {
  .rm-copy { left: 42%; right: 4%; top: 44%; }
  .rm-h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
}

/* 7. Safe-area insets for notched phones */
.sticky-atc { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.wrap { padding-left: max(22px, env(safe-area-inset-left));
        padding-right: max(22px, env(safe-area-inset-right)); }
@media (min-width: 720px) {
  .wrap { padding-left: max(48px, env(safe-area-inset-left));
          padding-right: max(48px, env(safe-area-inset-right)); }
}

/* 8. Overture proportions on phones: tighter silence, fuller bell */
@media (max-width: 640px) {
  .ov-line1 { font-size: clamp(1.7rem, 7.6vw, 2rem); max-width: 16ch; }
  .ov-line2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .ov-bell { font-size: clamp(2.6rem, 13.5vw, 3.4rem); }
  .ov-exhale { font-size: 1.1rem; max-width: 30ch; }
}

/* 9. Horizon wraps every section in padding: 72px 0; ALVARA sections
   carry their own rhythm, so the wrapper contributes nothing. The
   homepage body also grounds dark so no seam can ever flash white. */
#MainContent .shopify-section[class*="section-alvara"] { padding: 0 !important; margin: 0 !important; }
body:has([class*="section-alvara"]) { background: #0B0906; }

/* 10. Buy options: Horizon styles label as flex, which splits the
   plan description into a clipped side column. Restore the stacked
   prototype layout at every width. */
.buybox .opt { display: block !important; }
.buybox .opt .o-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 14px; }
.buybox .opt .o-sub { display: block !important; margin-top: 6px; padding-left: 28px; }
@media (max-width: 640px) { .buybox .opt .o-sub { padding-left: 0; } }

/* 11. Footer logo at natural aspect: fixed height, never stretched */
.foot-brand img { height: 26px !important; width: auto !important; max-width: none !important; }

/* 12. Sections without a wrapper class ground themselves: dark bg,
   cream ink (headings were inheriting Horizon's dark scheme text). */
#events, #devotion, #field-guide { background: var(--bg); color: var(--ink); }
#events .h-serif, #devotion .h-serif, #field-guide .h-serif { color: var(--ink); }
/* ===== PDP LAYER ===== */
/* ===== alvara-pdp-hero ===== */
/* ==========================================================================
   ALVARA PDP Hero + Path Chooser  (prefix .pdh-)
   Two variants of one section: .pdh--hero and .pdh--chooser
   ========================================================================== */

.pdh{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  padding:clamp(24px,5vw,60px) 0 clamp(36px,6vw,76px);
  overflow:hidden;
  isolation:isolate;
}
.pdh--chooser{
  background:var(--bg-2);
  padding-block:clamp(48px,8vw,104px);
  border-top:1px solid var(--rule);
}

/* faint hex field, masked so it never competes with the product */
.pdh-field{
  position:absolute;
  inset:0;
  background-image:var(--hex);
  opacity:.16;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.35) 55%,transparent 85%);
}
.pdh .wrap{position:relative;z-index:1}

/* ---------- HERO GRID ---------------------------------------------------- */

.pdh-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,5vw,48px);
  align-items:center;
}
@media (min-width:980px){
  .pdh-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:clamp(36px,5vw,76px);
  }
}
@media (min-width:1280px){
  .pdh-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:88px}
}

/* ---------- MEDIA: jar, halo, glow, contact shadow ----------------------- */

.pdh-media{
  position:relative;
  display:grid;
  place-items:center;
  min-height:min(84vw,520px);
  padding:clamp(12px,3vw,28px) 0 clamp(18px,4vw,34px);
}
.pdh-glow{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  width:min(104%,620px);
  aspect-ratio:1;
  background:
    radial-gradient(closest-side,rgba(232,168,48,.22),rgba(232,168,48,.07) 52%,transparent 74%),
    radial-gradient(closest-side,rgba(200,134,10,.16),transparent 62%);
  filter:blur(6px);
  pointer-events:none;
}
.pdh-halo{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:min(96%,560px);
  aspect-ratio:1;
  overflow:visible;
  pointer-events:none;
}
.pdh-hex-out{opacity:.85}
.pdh-hex-dash{opacity:.55;transform-origin:50% 50%}
.pdh-hex-in{opacity:.9;transform-origin:50% 50%}

.pdh-jar{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  width:100%;
}
.pdh-jar-img{
  display:block;
  width:min(66%,380px);
  height:auto;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(232,168,48,.14));
  will-change:transform;
}
@media (min-width:980px){.pdh-jar-img{width:min(60%,420px)}}

/* contact shadow / ground pool */
.pdh-contact{
  position:absolute;
  z-index:2;
  bottom:clamp(14px,4vw,30px);
  left:50%;
  transform:translateX(-50%);
  width:min(46%,260px);
  height:clamp(16px,3.6vw,30px);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 46%,transparent 72%),
    radial-gradient(ellipse at center,rgba(200,134,10,.20) 0%,transparent 68%);
  filter:blur(7px);
  pointer-events:none;
}

@media (prefers-reduced-motion:no-preference){
  .pdh-jar-img{animation:pdh-float 8s ease-in-out infinite}
  .pdh-contact{animation:pdh-pool 8s ease-in-out infinite}
  .pdh-hex-dash{animation:pdh-spin 120s linear infinite}
  .pdh-hex-in{animation:pdh-breathe 9s ease-in-out infinite}
  @keyframes pdh-float{0%,100%{transform:translateY(-7px)}50%{transform:translateY(8px)}}
  @keyframes pdh-pool{0%,100%{transform:translateX(-50%) scaleX(.94);opacity:.78}50%{transform:translateX(-50%) scaleX(1.04);opacity:1}}
  @keyframes pdh-spin{to{transform:rotate(360deg)}}
  @keyframes pdh-breathe{0%,100%{transform:scale(.985);opacity:.7}50%{transform:scale(1.015);opacity:1}}
}

/* ---------- BUY COLUMN --------------------------------------------------- */

.pdh-buy{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.pdh-buy .eyebrow{margin:0 0 10px}

.pdh-h1{
  margin:0;
  font-size:clamp(2.6rem,9vw,4.6rem);
  line-height:.98;
  letter-spacing:-.015em;
}
@media (min-width:980px){.pdh-h1{font-size:clamp(3.4rem,4.6vw,5.1rem)}}
.pdh-tm{
  font-family:var(--sans);
  font-size:.26em;
  font-weight:500;
  vertical-align:super;
  margin-left:.12em;
  color:var(--gold-hi);
  letter-spacing:.04em;
}

.pdh-rating{
  display:flex;
  align-items:center;
  gap:9px;
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.pdh-rating .stars{color:var(--gold-hi);letter-spacing:.14em;font-size:.9rem;line-height:1}
.pdh-rating-v{color:var(--ink)}
.pdh-rating-l{
  color:var(--ink-mute);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.pdh-rating-l:hover{color:var(--gold-hi);border-color:var(--gold)}

.pdh-body{margin-top:clamp(14px,2.4vw,20px);max-width:56ch}
.pdh-body p{margin:0;font-size:var(--t-body);line-height:1.62;color:var(--ink-mute)}
.pdh-body p+p{margin-top:.7em}

/* stat chips */
.pdh-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  margin-top:clamp(18px,3vw,24px);
}
.pdh-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:clamp(12px,2vw,16px) clamp(13px,2vw,18px);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008));
}
.pdh-stat-k{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.pdh-stat-n{
  font-family:var(--serif);
  font-size:clamp(1.9rem,5.6vw,2.5rem);
  line-height:1.05;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pdh-stat-c{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.35;
  color:var(--ink-mute);
}

.pdh-paths-eyebrow{margin:clamp(22px,3.4vw,30px) 0 0}

/* ---------- CHOOSER VARIANT HEAD ---------------------------------------- */

.pdh-choose-head{
  text-align:center;
  max-width:62ch;
  margin:0 auto clamp(26px,4vw,42px);
}
.pdh-choose-head .eyebrow{justify-content:center;display:inline-flex;align-items:center}
.pdh-h2{
  margin:.35em 0 0;
  font-size:var(--t-h2);
  line-height:1.04;
  letter-spacing:-.01em;
}
.pdh-intro{
  margin:clamp(14px,2.2vw,20px) auto 0;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--ink);
  max-width:44ch;
}
.pdh-shipnote{
  margin:12px auto 0;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--gold-lite);
  max-width:48ch;
}
.pdh-choose-body{max-width:1120px;margin:0 auto}

/* ---------- PATH SELECTOR ------------------------------------------------ */

.pdh-paths{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:100%;
  margin-top:clamp(14px,2.4vw,18px);
}
@media (min-width:880px){
  .pdh--chooser .pdh-paths{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(14px,1.6vw,20px);
    align-items:stretch;
  }
}

.pdh-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(14px,2.4vw,20px);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,.010));
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    border-color .38s var(--ease),
    background .38s var(--ease),
    box-shadow .38s var(--ease),
    transform .38s var(--ease);
}
.pdh--chooser .pdh-card{padding:clamp(18px,2.4vw,24px)}
@media (hover:hover){
  .pdh-card:hover{border-color:rgba(200,134,10,.45);transform:translateY(-2px)}
}
.pdh-card.sel,
.pdh-card:has(.pdh-radio:checked){
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(200,134,10,.15),rgba(200,134,10,.045));
  box-shadow:0 0 0 1px rgba(200,134,10,.34),0 22px 48px -30px rgba(232,168,48,.62);
}
.pdh-card:has(.pdh-radio:focus-visible){outline:2px solid var(--gold-hi);outline-offset:3px}

.pdh-radio{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

.pdh-card-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.pdh-dot{
  width:18px;height:18px;
  border-radius:50%;
  border:1px solid rgba(200,134,10,.5);
  background:rgba(255,255,255,.03);
  position:relative;
  flex:none;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.pdh-dot::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--gold-hi);
  transform:scale(0);
  opacity:0;
  transition:transform .3s var(--ease-out),opacity .3s var(--ease);
}
.pdh-card.sel .pdh-dot,
.pdh-card:has(.pdh-radio:checked) .pdh-dot{border-color:var(--gold-hi);background:rgba(232,168,48,.10)}
.pdh-card.sel .pdh-dot::after,
.pdh-card:has(.pdh-radio:checked) .pdh-dot::after{transform:scale(1);opacity:1}

.pdh-card-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.pdh-card-t{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.2;
}
.pdh-badge{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  color:var(--bg-deep);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  white-space:nowrap;
}
.pdh-badge--ship{
  color:var(--gold-lite);
  background:transparent;
  border:1px solid rgba(200,134,10,.5);
}

.pdh-card-price{display:flex;align-items:baseline;gap:7px;justify-self:end;white-space:nowrap}
.pdh-price{
  font-family:var(--serif);
  font-size:clamp(1.5rem,4.6vw,1.85rem);
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pdh-card.sel .pdh-price,
.pdh-card:has(.pdh-radio:checked) .pdh-price{color:var(--gold-lite)}
.pdh-per{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--ink-mute);
}
.pdh-was{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-faint,var(--ink-mute));
  text-decoration-color:rgba(200,134,10,.7);
  opacity:.8;
}

.pdh-meta,
.pdh-note{
  font-family:var(--sans);
  font-size:.8rem;
  line-height:1.45;
  color:var(--ink-mute);
  display:block;
}
.pdh-note{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.045em;
  color:var(--ink-faint,var(--ink-mute));
  opacity:.92;
}

/* perks */
.pdh-perks{display:flex;flex-direction:column;gap:6px}
.pdh-perk{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.42;
  color:var(--ink-mute);
}
.pdh-perk .ic-hex{flex:none;color:var(--gold);margin-top:.35em;font-size:.62em;opacity:.9}
.pdh-card.sel .pdh-perk,
.pdh-card:has(.pdh-radio:checked) .pdh-perk{color:var(--ink)}

/* hero variant: perks reveal only on the selected path to protect the fold */
.pdh--hero .pdh-perkwrap{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s var(--ease-out),opacity .3s var(--ease);
}
.pdh--hero .pdh-perkwrap>.pdh-perks{overflow:hidden;min-height:0}
.pdh--hero .pdh-card.sel .pdh-perkwrap,
.pdh--hero .pdh-card:has(.pdh-radio:checked) .pdh-perkwrap{grid-template-rows:1fr;opacity:1;padding-top:2px}
.pdh--chooser .pdh-perkwrap{display:block;margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .pdh--hero .pdh-perkwrap{transition:none}
}

.pdh-highlight{
  display:block;
  margin-top:2px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  border:1px dashed rgba(200,134,10,.42);
  background:rgba(200,134,10,.07);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-lite);
  text-align:center;
}

.pdh-selected{
  position:absolute;
  top:10px;right:12px;
  font-family:var(--mono);
  font-size:.54rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-hi);
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .3s var(--ease),transform .3s var(--ease-out);
  pointer-events:none;
}
.pdh-card.sel .pdh-selected,
.pdh-card:has(.pdh-radio:checked) .pdh-selected{opacity:1;transform:none}
@media (max-width:479px){.pdh-selected{display:none}}

/* hidden add-to-cart forms */
.pdh-forms,
.pdh-forms[hidden]{display:none !important}

/* ---------- CTA + ASSURANCES -------------------------------------------- */

.pdh-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:58px;
  margin-top:clamp(14px,2.4vw,18px);
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:clamp(.78rem,2.6vw,.86rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}
.pdh--chooser .pdh-cta{max-width:520px;margin-left:auto;margin-right:auto;display:flex}
.pdh-cta-arrow{transition:transform .35s var(--ease-out);font-size:1.1em;line-height:1}
@media (hover:hover){.pdh-cta:hover .pdh-cta-arrow{transform:translateX(4px)}}

.pdh-assure{margin-top:14px;width:100%;text-align:center}
.pdh--hero .pdh-assure{text-align:left}
.pdh-trust,
.pdh-ship{
  margin:0;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--ink-mute);
}
.pdh-ship{margin-top:5px;color:var(--ink-faint,var(--ink-mute));opacity:.9}

.pdh-diet{
  list-style:none;
  margin:clamp(14px,2.4vw,18px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
}
.pdh--chooser .pdh-diet{justify-content:center}
.pdh-diet-chip{
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.02);
  white-space:nowrap;
}

/* ---------- FINE TUNING BY WIDTH ---------------------------------------- */

@media (max-width:479px){
  .pdh-card-top{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .pdh-card-price{grid-column:2;justify-self:start}
  .pdh-stats{grid-template-columns:1fr}
  .pdh-cta{min-height:56px;letter-spacing:.12em}
}
@media (min-width:768px) and (max-width:979px){
  .pdh-media{min-height:min(58vw,460px)}
  .pdh-jar-img{width:min(46%,340px)}
  .pdh-buy{max-width:660px}
  .pdh-stats{max-width:560px}
}
@media (min-width:1440px){
  .pdh-h1{font-size:5.4rem}
  .pdh-jar-img{width:min(58%,440px)}
}


/* ===== alvara-pdp-usebar ===== */
.pub { background: var(--bg-2); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(48px, 6vw, 84px) 0; }
.pub-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 880px) { .pub-grid { grid-template-columns: 1fr; } }
.pub-h { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem); margin-top: 16px; font-weight: 350; line-height: 1.3; max-width: 24ch; }
.pub-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pub-duo { grid-template-columns: 1fr; } }
.pub-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 26px 24px; transition: transform .35s var(--ease), border-color .35s; }
.pub-card:hover { transform: translateY(-3px); border-color: var(--rule-2); }
.pub-glyph { width: 34px; height: 34px; color: var(--gold-hi); margin-bottom: 14px; }
.pub-card h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); font-weight: 400; margin-bottom: 10px; }
.pub-card p { font-size: 14px; color: var(--ink-mute); font-weight: 300; line-height: 1.7; }
.pub-coa { margin-top: 28px; font-size: 11.5px; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 16px; }


/* ===== alvara-pdp-breathe ===== */
/* ALVARA PDP — Breathe invocation (prefix: pbr-) */

.pbr-sec {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(72px, 12vw, 160px) 0;
  overflow: hidden;
}

.pbr-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(28px, 5vw, 48px);
}

.pbr-eyebrow {
  margin: 0;
}

/* Large invitation lines (word-reveal) */
.pbr-line1,
.pbr-line2 {
  margin: 0;
  font-size: var(--t-h2, clamp(28px, 5vw, 52px));
  line-height: 1.2;
  font-weight: 350;
  color: var(--ink);
  max-width: 18ch;
}

.pbr-line1 {
  max-width: 14ch;
}

/* Four questions, staggered, italic serif */
.pbr-questions {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 22px);
  max-width: 46ch;
}

.pbr-question {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* Transition couplet */
.pbr-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pbr-transition .pbr-line2 {
  font-size: var(--t-lead, clamp(20px, 3.4vw, 30px));
  max-width: 20ch;
}

/* Closing */
.pbr-closing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.pbr-closing-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.8vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}

.pbr-closing-gold {
  color: var(--gold-hi);
}

@media (max-width: 480px) {
  .pbr-questions {
    max-width: 32ch;
  }
  .pbr-line1,
  .pbr-transition .pbr-line2 {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pbr-sec * {
    animation: none !important;
    transition: none !important;
  }
}


/* ===== alvara-pdp-ingredients (live-design dark explorer) ===== */
.pin { background: var(--bg); color: var(--ink); padding: clamp(72px, 9vw, 130px) 0; position: relative; overflow: hidden; }
.pin::before { content: ''; position: absolute; inset: 0; background-image: var(--hex); opacity: .8; pointer-events: none; }
.pin .wrap { position: relative; z-index: 1; }
.pin-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); }
.pin-eyebrow { justify-content: center; }
.pin-title { font-size: var(--t-h2); margin: 16px 0 14px; }
.pin-deck { color: var(--ink-mute); font-weight: 300; font-size: var(--t-lead); }
.pin-deck-accent { color: var(--gold-hi); font-size: 15px; margin-top: 6px; }
.pin-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(30px, 4vw, 46px); }
.pin-filter { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  background: rgba(20, 16, 10, .5); border: 1px solid var(--rule); border-radius: 4px; padding: 12px 20px; cursor: pointer;
  transition: color .25s, border-color .25s, background .25s; }
.pin-filter:hover { color: var(--gold-hi); border-color: var(--rule-2); }
.pin-filter.is-on { color: var(--gold-hi); border-color: var(--gold); background: rgba(200, 134, 10, .1); }
.pin-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 980px) { .pin-body { grid-template-columns: 1fr; } .pin-media { display: none; } }
.pin-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 700px) { .pin-list { grid-template-columns: 1fr; } }
.pin-row { background: rgba(18, 14, 9, .6); border: 1px solid var(--rule); border-radius: 8px; transition: border-color .3s, background .3s; }
.pin-row:hover { border-color: var(--rule-2); }
.pin-row.is-open { border-color: rgba(232, 168, 48, .55); background: rgba(24, 18, 10, .8); }
.pin-row-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: none;
  padding: 14px 16px; cursor: pointer; color: inherit; }
.pin-thumb { flex: none; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; background: #0a0805; }
.pin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pin-row-id { flex: 1; min-width: 0; }
.pin-cat { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pin-name { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin-top: 3px; }
.pin-benefit { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 12.5px; color: var(--gold-soft); margin-top: 2px; }
.pin-toggle { flex: none; width: 22px; height: 22px; position: relative; opacity: .7; }
.pin-toggle::before, .pin-toggle::after { content: ''; position: absolute; background: var(--gold-hi); transition: transform .3s var(--ease); }
.pin-toggle::before { left: 3px; right: 3px; top: 10px; height: 1.5px; }
.pin-toggle::after { top: 3px; bottom: 3px; left: 10px; width: 1.5px; }
.pin-row.is-open .pin-toggle::after { transform: scaleY(0); }
.pin-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.pin-row.is-open .pin-detail { grid-template-rows: 1fr; }
.pin-detail-inner { overflow: hidden; min-height: 0; margin: 0 16px; color: var(--ink-mute); font-weight: 300; font-size: 15px; line-height: 1.7; }
.pin-row.is-open .pin-detail-inner { border-top: 1px solid var(--rule); padding-top: 14px; padding-bottom: 18px; }
.pin-media { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.pin-media-jar, .pin-media-ing { border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); background: #0a0805; }
.pin-media-jar img { width: 100%; height: auto; display: block; }
.pin-media-ing img { width: 100%; height: auto; display: block; transition: opacity .35s var(--ease); }
.pin-media-ing.is-swapping img { opacity: 0; }
.pin-hint { text-align: center; margin-top: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pin-diet { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; margin: 16px 0 0; padding: 0; }
.pin-diet li { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
  border: 1px solid var(--rule); border-radius: 99px; padding: 7px 14px; }
.pin-row.pin-hide { display: none; }

/* ===== alvara-pdp-ritualcard ===== */
.prc-sec{
  background: var(--bg);
  color: var(--ink);
  padding: clamp(64px, 9vw, 128px) 0;
  overflow: hidden;
}

.prc-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

.prc-media{
  display: flex;
  justify-content: center;
}

.prc-card-frame{
  position: relative;
  max-width: 340px;
  width: 72%;
  transform: rotate(-4deg);
  border-radius: var(--r-md);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.65),
    0 0 0 1px var(--rule),
    0 0 40px -6px rgba(200,134,10,.25);
  transition: transform .6s var(--ease-out);
}

.prc-card-frame::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(232,168,48,.35);
  pointer-events: none;
}

.prc-card-frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

@media (prefers-reduced-motion: no-preference){
  .prc-card-frame{
    animation: prc-float 7s ease-in-out infinite;
  }
}

@keyframes prc-float{
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-2.5deg) translateY(-10px); }
}

.prc-copy{
  text-align: left;
  max-width: 46ch;
  margin: 0 auto;
}

.prc-eyebrow{
  margin-bottom: 18px;
}

.prc-h2{
  font-size: var(--t-h2);
  line-height: 1.08;
  margin: 0 0 20px;
}

.prc-body{
  font-family: var(--sans);
  font-size: var(--t-lead);
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 0 0 32px;
}

.prc-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 13px;
}

.prc-arrow{
  display: inline-block;
  transition: transform .3s var(--ease-out);
}

.prc-link:hover .prc-arrow{
  transform: translateX(4px);
}

@media (min-width: 768px){
  .prc-wrap{
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(48px, 7vw, 96px);
  }
  .prc-media{
    justify-content: flex-start;
  }
  .prc-card-frame{
    width: 100%;
    max-width: 420px;
  }
  .prc-copy{
    margin: 0;
  }
}

@media (min-width: 1024px){
  .prc-sec{
    padding: clamp(88px, 8vw, 140px) 0;
  }
}

@media (min-width: 1440px){
  .prc-wrap{
    grid-template-columns: minmax(320px, 460px) 1fr;
  }
}


/* ===== alvara-pdp-science ===== */
.psc {
  background: var(--paper, #FDF5E4);
  color: var(--p-ink, #201809);
  padding: clamp(56px, 9vw, 120px) 0;
}

.psc-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

.psc-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.psc-eyebrow {
  justify-content: center;
}

.psc-h2 {
  margin-top: 10px;
}

.psc-pull {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.3;
  color: var(--p-gold, #93620A);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.psc-pull em {
  font-style: italic;
}

.psc-intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--t-lead, 19px);
  line-height: 1.6;
  color: var(--p-body, #4C4230);
}

.psc-intro p {
  margin: 0;
}

.psc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.psc-card {
  position: relative;
  background: var(--paper-2, #FFFDF6);
  border: 1px solid var(--p-rule, #E5D8BA);
  border-radius: var(--r-lg, 22px);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.psc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--p-gold, #93620A);
  color: var(--p-gold, #93620A);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.psc-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-gold, #93620A);
  margin: 0;
}

.psc-card-h3 {
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.25;
  margin: 0;
  color: var(--p-ink, #201809);
}

.psc-body {
  font-family: var(--sans);
  font-size: var(--t-body, 16px);
  line-height: 1.65;
  color: var(--p-body, #4C4230);
}

.psc-body p {
  margin: 0;
}

.psc-closing {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.4;
  color: var(--p-ink, #201809);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.psc-closing em {
  font-style: italic;
}

.psc-fda {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .psc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .psc-card {
    padding: 36px 30px 32px;
  }
}

@media (min-width: 1024px) {
  .psc-wrap {
    gap: 52px;
  }

  .psc-card {
    padding: 40px 32px 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .psc-card {
    transition: none;
  }
}

  background: var(--bg, #0B0906);
  color: var(--ink, #F5EEE1);
}

  background: var(--bg-card, #14100A);
  border-color: var(--rule, rgba(200,134,10,.18));
}

  color: var(--ink, #F5EEE1);
}

  color: var(--ink-mute, #B7AD98);
}

  color: var(--gold-hi, #E8A830);
}


/* ===== alvara-pdp-convergence ===== */
.pcv-sec {
  position: relative;
  padding: clamp(64px, 10vw, 128px) 0;
  overflow: hidden;
}

.pcv-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}

.pcv-h {
  margin-top: 10px;
}

.pcv-intro {
  margin-top: 18px;
  color: var(--ink-mute);
}

.pcv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.pcv-col {
  position: relative;
  text-align: center;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pcv-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
}

.pcv-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Draw-on-scroll: line art starts fully hidden, reveals along its own path length */
.pcv-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  .pcv-col--solar .pcv-draw,
  .pcv-col--lunar .pcv-draw {
    transition: stroke-dashoffset 1.3s var(--ease-out, ease-out);
  }

  .pcv-col--solar.reveal.in .pcv-draw.pcv-ray {
    transition-delay: .5s;
  }

  .pcv-col--solar.reveal.in .pcv-draw:not(.pcv-ray),
  .pcv-col--lunar.reveal.in .pcv-draw {
    transition-delay: .1s;
  }

  .pcv-col.reveal.in .pcv-draw {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcv-draw {
    stroke-dashoffset: 0;
  }
}

.pcv-thread {
  position: relative;
  width: 1px;
  height: 76px;
  margin-bottom: 20px;
  background: linear-gradient(
    to bottom,
    var(--gold-hi) 0%,
    var(--rule) 50%,
    var(--gold-hi) 100%
  );
  opacity: .6;
}

.pcv-symbol {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
}

.pcv-eyebrow {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}

.pcv-title {
  font-size: var(--t-h3, 1.6rem);
  margin-bottom: 14px;
}

.pcv-body {
  color: var(--ink-mute);
  max-width: 34ch;
  margin: 0 auto;
}

.pcv-col--union .pcv-body {
  max-width: 40ch;
}

.pcv-quote {
  margin: 22px auto 0;
  max-width: 38ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gold-lite);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.pcv-quote p {
  margin: 0;
}

/* Tablet: three-up */
@media (min-width: 768px) {
  .pcv-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }

  .pcv-col--union {
    padding-top: 0;
  }
}

@media (min-width: 1024px) {
  .pcv-grid {
    gap: 56px;
  }

  .pcv-body {
    max-width: 30ch;
  }

  .pcv-col--union .pcv-body {
    max-width: 34ch;
  }
}

@media (min-width: 1440px) {
  .pcv-grid {
    max-width: 1280px;
    gap: 72px;
  }
}


/* ===== alvara-pdp-infusion ===== */
.pif-section {
  padding: clamp(56px, 9vw, 112px) 0;
  overflow: hidden;
}

.pif-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
}

.pif-head {
  max-width: 46ch;
}

.pif-heading {
  margin-top: 0.4em;
}

.pif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .pif-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.pif-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.pif-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 134, 10, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .pif-card:hover {
    transform: none;
  }
}

.pif-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.pif-glyph svg {
  width: 100%;
  height: 100%;
}

.pif-card-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.pif-card-body {
  font-family: var(--sans);
  font-size: var(--t-body, 1rem);
  line-height: 1.6;
  color: var(--ink-mute);
}

.pif-card-body p {
  margin: 0;
}

.pif-credit {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint, var(--ink-mute));
  text-align: center;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin: 0;
}

@media (min-width: 1024px) {
  .pif-card {
    padding: 32px 28px;
  }
}

@media (min-width: 1440px) {
  .pif-wrap {
    max-width: 1320px;
    margin-inline: auto;
  }
}


/* ===== alvara-pdp-ty ===== */
.pty-sec {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 9vw, 120px) 0;
  overflow: hidden;
}

.pty-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}

.pty-frame-col {
  display: flex;
  justify-content: center;
}

.pty-frame {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pty-hex-bg {
  position: absolute;
  inset: -14%;
  background-image: var(--hex);
  background-size: 42px 48px;
  opacity: 0.14;
  border-radius: 50%;
  pointer-events: none;
}

.pty-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(232, 168, 48, 0.35), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.pty-ring {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px var(--rule), 0 0 40px rgba(200, 134, 10, 0.25);
  pointer-events: none;
}

.pty-portrait {
  position: relative;
  width: 88%;
  height: 88%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold-hi);
  background: var(--bg-2);
  display: block;
}

.pty-copy-col {
  text-align: center;
}

.pty-eyebrow {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pty-heading {
  margin: 14px 0 20px;
  font-size: var(--t-h2);
  line-height: 1.08;
}

.pty-body {
  max-width: 62ch;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.pty-body p {
  font-size: var(--t-body);
  color: var(--ink-mute);
  line-height: 1.65;
  margin: 0;
}

.pty-cta {
  margin-top: 28px;
  display: inline-flex;
}

@media (min-width: 768px) {
  .pty-wrap {
    grid-template-columns: minmax(260px, 380px) 1fr;
    text-align: left;
  }

  .pty-copy-col {
    text-align: left;
  }

  .pty-eyebrow {
    justify-content: flex-start;
  }

  .pty-body {
    margin: 0;
  }

  .pty-frame {
    width: min(380px, 100%);
  }
}

@media (min-width: 1024px) {
  .pty-wrap {
    grid-template-columns: 420px 1fr;
    gap: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pty-glow,
  .pty-hex-bg {
    transition: none;
  }
}


/* ===== alvara-pdp-stewardship ===== */
.pst-section {
  background: var(--paper);
  color: var(--p-ink);
  padding: clamp(56px, 8vw, 108px) 0;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}

.pst-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

/* Header */
.pst-head {
  max-width: 720px;
}

.pst-heading {
  margin-top: 10px;
  color: var(--p-ink);
}

.pst-intro {
  margin-top: 18px;
  color: var(--p-body);
  font-size: var(--t-lead, 1.15rem);
  line-height: 1.6;
}

.pst-intro p + p {
  margin-top: 14px;
}

/* Coming soon banner */
.pst-coming-soon {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--paper-2);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 32px);
}

.pst-cs-media {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
}

.pst-cs-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pst-cs-label {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  color: var(--p-gold);
  font-size: 0.8rem;
  margin: 0 0 6px;
}

.pst-cs-kicker {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-mute, var(--p-body));
  font-size: 0.72rem;
  margin: 0 0 10px;
}

.pst-cs-heading {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--p-ink);
  margin: 0 0 12px;
}

.pst-cs-copy,
.pst-cs-reassurance {
  color: var(--p-body);
  line-height: 1.6;
  font-size: 0.98rem;
}

.pst-cs-reassurance {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--p-rule);
}

/* Stat cards */
.pst-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pst-card {
  background: var(--paper-2);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
}

.pst-card-category {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--p-gold);
  margin: 0 0 14px;
}

.pst-card-number {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--p-ink);
  margin: 0;
}

.pst-card-stat-desc {
  margin: 10px 0 18px;
  color: var(--p-body);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pst-card-product {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 1.15rem;
  color: var(--p-ink);
  margin: 0 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--p-rule);
}

.pst-card-body {
  color: var(--p-body);
  font-size: 0.92rem;
  line-height: 1.6;
  flex-grow: 1;
}

.pst-card-partner {
  margin-top: 16px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--p-mute, var(--p-body));
}

/* Close */
.pst-close {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pst-cta {
  display: inline-block;
}

.pst-close-line {
  color: var(--p-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .pst-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pst-coming-soon {
    grid-template-columns: 96px 1fr;
    gap: 16px;
  }
}

@media (max-width: 599px) {
  .pst-coming-soon {
    grid-template-columns: 1fr;
  }

  .pst-cs-media {
    max-width: 160px;
    margin: 0 auto;
  }

  .pst-cs-body {
    text-align: left;
  }

  .pst-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pst-card,
  .pst-coming-soon {
    transition: none;
  }
}


/* ===== alvara-pdp-validation ===== */
.pvl-sec {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

.pvl-wrap { position: relative; z-index: 1; }

.pvl-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }

.pvl-h2 { margin-top: 10px; }

.pvl-intro {
  max-width: 780px;
  margin-bottom: clamp(40px, 6vw, 64px);
  display: grid;
  gap: 16px;
}

.pvl-lead {
  font: var(--t-lead);
  color: var(--ink);
}

.pvl-body {
  font: var(--t-body);
  color: var(--ink-mute);
}

.pvl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(56px, 8vw, 92px);
}

.pvl-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s var(--ease, ease), transform 0.3s var(--ease-out, ease);
}

.pvl-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.pvl-num {
  font: var(--t-h3, 600 24px/1 var(--serif));
  font-family: var(--serif);
  color: var(--gold);
  opacity: 0.85;
  font-size: 28px;
  line-height: 1;
}

.pvl-card-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.pvl-card-body {
  font: var(--t-body);
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0;
}

.pvl-scientist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
}

.pvl-scientist-media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pvl-scientist-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pvl-scientist-copy { display: flex; flex-direction: column; gap: 14px; }

.pvl-scientist-name { margin: 2px 0 4px; }

.pvl-link { align-self: flex-start; margin-top: 6px; }

.pvl-chips { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }

.pvl-chips-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.pvl-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pvl-chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  background: transparent;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .pvl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .pvl-grid { grid-template-columns: repeat(3, 1fr); }
  .pvl-scientist { grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
}

@media (min-width: 1440px) {
  .pvl-scientist { padding: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .pvl-card { transition: none; }
  .pvl-card:hover { transform: none; }
}


/* ===== alvara-pdp-amplify ===== */
.pam-sec{
  background: var(--bg);
  color: var(--ink);
  padding: clamp(64px, 8vw, 120px) 0;
}

.pam-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.pam-h{
  margin-top: 12px;
}

.pam-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px){
  .pam-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.pam-card{
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out);
}

@media (hover: hover){
  .pam-card:hover{
    transform: translateY(-4px);
    border-color: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce){
  .pam-card{ transition: none; }
  .pam-card:hover{ transform: none; }
}

.pam-tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  margin: 0;
}

.pam-card-h{
  font-family: var(--serif);
  font-size: var(--t-h3, clamp(22px, 2.4vw, 30px));
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.pam-body{
  font-family: var(--sans);
  font-size: var(--t-body, 16px);
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
  flex-grow: 1;
}

.pam-body p{
  margin: 0;
}

.pam-cta{
  margin-top: 8px;
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (min-width: 768px){
  .pam-cta{
    width: auto;
  }
}

.pam-cta-disabled{
  opacity: .55;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 389px){
  .pam-card{
    padding: 26px 20px;
  }
}


/* ===== PDP fold-fit: the primary CTA must sit above the fold on
   every common desktop viewport. Perks flow as a two-column grid,
   and constrained heights compress the type scale. ===== */
.pdh--hero .pdh-perks { flex-flow: row wrap; gap: 6px 14px; }
.pdh--hero .pdh-perk { flex: 0 0 calc(50% - 14px); font-size: 12.5px; }

@media (min-width: 990px) and (max-height: 1200px) {
  .pdh--hero { padding-block: clamp(20px, 3vh, 44px); }
  .pdh--hero h1, .pdh--hero .pdh-title { font-size: clamp(2.6rem, 4.6vw, 4rem); margin-block: 10px 6px; }
  .pdh--hero .pdh-positioning, .pdh--hero .pdh-deck, .pdh--hero .pdh-sub {
    font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; margin-block: 10px 14px; }
  .pdh--hero .pdh-stats, .pdh--hero .pdh-stat-row { gap: 10px; margin-block: 10px; }
  .pdh--hero .pdh-stat, .pdh--hero [class*="pdh-stat"] > div { padding: 10px 16px; }
  .pdh--hero .pdh-stat b, .pdh--hero .pdh-stat .pdh-stat-n { font-size: 1.6rem; }
  .pdh--hero .pdh-card { padding: 12px 16px; }
  .pdh--hero .pdh-meta { font-size: 12px; margin-top: 2px; }
  .pdh--hero .pdh-cta { margin-top: 12px; padding-block: 15px; }
  .pdh--hero .pdh-assure { margin-top: 8px; }
  .pdh--hero .pdh-assure p { font-size: 10.5px; line-height: 1.5; margin: 2px 0; }
  .pdh--hero .pdh-diet { margin-top: 8px; gap: 6px; }
}
@media (min-width: 990px) and (max-height: 940px) {
  .pdh--hero h1, .pdh--hero .pdh-title { font-size: clamp(2.2rem, 3.8vw, 3.1rem); }
  .pdh--hero .pdh-positioning, .pdh--hero .pdh-deck, .pdh--hero .pdh-sub { -webkit-line-clamp: 2; }
  .pdh--hero .pdh-perk { font-size: 11.5px; }
  .pdh--hero .pdh-eyebrow, .pdh--hero .eyebrow { font-size: 10px; }
}

/* ===== review cards: uniform height, long bodies clamp ===== */
.rev-grid { align-items: stretch; }
.rev-card { height: 100%; }
.rev-card p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== fold-fit v2 (real selectors) ===== */
@media (min-width: 990px) and (max-height: 1200px) {
  .pdh--hero .pdh-body { font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-block: 10px 12px; }
  .pdh--hero .pdh-stats { margin-block: 8px 10px; }
  .pdh--hero .pdh-stats > * { padding: 8px 14px !important; }
  .pdh--hero .pdh-h1 { margin-block: 8px 4px; }
  .pdh--hero .pdh-card { padding: 10px 14px !important; }
  .pdh--hero .pdh-card .pdh-meta { display: none; }
  .pdh--hero .pdh-card.sel .pdh-meta { display: block; font-size: 11.5px; }
  .pdh--hero .pdh-paths { margin-top: 10px !important; gap: 8px !important; }
  .pdh--hero .pdh-paths-eyebrow { margin-bottom: 4px !important; }
}
@media (min-width: 990px) and (max-height: 950px) {
  .pdh--hero .pdh-body { -webkit-line-clamp: 2; }
  .pdh--hero .pdh-paths-eyebrow { display: none; }
  .pdh--hero .pdh-cta { margin-top: 8px; }
  .pdh--hero .pdh-perk { font-size: 11px; }
  .pdh--hero .pdh-assure p { font-size: 10px; margin: 1px 0; }
  .pdh--hero .pdh-diet { display: none; }
}

/* ===== hex texture: one notch more present ===== */
.cream::before { opacity: .8; }
.hive::before, .final::before { opacity: .85; }

/* ============================================================
   DESIGN-DIRECTOR ELEVATION LAYER (2026-08-01)
   Surface hierarchy, lit hero set, fold economy, cream edges,
   legible affordances, unified hover vocabulary.
   ============================================================ */

/* 1. Surface tiers: data chips flatten (tier 1), commerce card
   is the only tier-3 surface in its section. */
.pdh--hero .pdh-stat { border: 0; background: none; box-shadow: none; }
.pdh--hero .pdh-stats { grid-template-columns: auto auto; justify-content: start;
  gap: clamp(22px, 3vw, 36px); border-block: 1px solid var(--rule); padding: 13px 0; }
.pdh--hero .pdh-stat + .pdh-stat { border-left: 1px solid var(--rule); padding-left: clamp(20px, 2.6vw, 32px); }
.pdh-card.sel {
  border-color: rgba(200,134,10,.42) !important;
  background: linear-gradient(180deg, rgba(200,134,10,.13), rgba(200,134,10,.032)) !important;
  box-shadow: 0 0 0 1px rgba(200,134,10,.20), 0 30px 64px -34px rgba(232,168,48,.58) !important; }
.pdh-selected { display: none !important; }

/* 2. The hero as a lit set: bigger jar, real light source, ground */
@media (min-width: 980px) { .pdh-jar-img { width: min(76%, 505px); } }
.pdh-hex-out, .pdh-hex-in { filter: drop-shadow(0 0 10px rgba(232,168,48,.30)); }
.pdh-hex-out { opacity: 1; }
.pdh-glow { background:
  radial-gradient(closest-side, rgba(232,168,48,.30), rgba(232,168,48,.09) 52%, transparent 74%),
  radial-gradient(closest-side, rgba(255,230,178,.12), transparent 62%); }
.pdh-media { position: relative; z-index: 0; }
.pdh-media::after { content: ''; position: absolute; inset: -8% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 44% at 50% 38%, rgba(232,168,48,.14), transparent 70%),
              radial-gradient(130% 74% at 50% 116%, rgba(0,0,0,.9), transparent 60%); }

/* 4. Cream: real object edges, one primary review action */
.rev-card, .cream .faq-item {
  border-color: #E7D8B4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 32px -24px rgba(63,48,20,.42); }
.rev-actions a:last-child { background: rgba(154,103,8,.08); border-color: var(--p-gold); }

/* 6. Micro-typography: legible faint layer, steadier numerals */
:root { --ink-faint: #8F856F; }
.bb-pay { opacity: 1; }
.bb-pay span { color: var(--p-mute); }
.stat-strip .k, .ev-badge, .pdh-badge { font-size: 10.5px; }
.pdh-card-price, .stat-strip .v, .affil-term .v { font-variant-numeric: tabular-nums lining-nums; }

/* 7. Explorer affordances: chips and disclosures read as controls */
.pin-filter { border-color: rgba(200,134,10,.30); }
.pin-filter:hover { color: var(--gold-lite); background: rgba(200,134,10,.07); }
.pin-filter.is-on {
  background: linear-gradient(180deg, rgba(200,134,10,.20), rgba(200,134,10,.05));
  color: var(--gold-lite); box-shadow: 0 0 0 1px rgba(200,134,10,.28); }
.pin-toggle { width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%;
  transition: transform .35s var(--ease-out), border-color .25s, background .25s; }
.pin-toggle::before { left: 7px; right: 7px; top: 12px; }
.pin-toggle::after { top: 7px; bottom: 7px; left: 12px; }
.pin-row:hover .pin-toggle { border-color: var(--gold); background: rgba(200,134,10,.08); }
.pin-row.is-open .pin-toggle { transform: rotate(45deg); background: rgba(200,134,10,.14); }
.pin-row.is-open .pin-toggle::after { transform: none; }

/* 8. One hover vocabulary + entrance stagger everywhere */
@media (hover: hover) {
  .pin-row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(0,0,0,.9); }
  .pin-row { transition: transform .4s var(--ease-out), border-color .3s, background .3s, box-shadow .4s var(--ease-out); }
  .pdh-card { position: relative; overflow: hidden; }
  .pdh-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s var(--ease);
    background: radial-gradient(240px 130px at 50% -12%, rgba(232,168,48,.18), transparent 72%); }
  .pdh-card:hover::before { opacity: 1; }
}
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) { .reveal { transition-delay: 0ms !important; } }

/* Short desktop viewports: the CTA owns the fold, chrome yields */
@media (min-width: 990px) and (max-height: 820px) {
  .pdh--hero { padding-block: 10px 24px; }
  .pdh--hero .pdh-h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-block: 6px 2px; }
  .pdh--hero .pdh-stats { display: none; }
  .pdh--hero .pdh-body { -webkit-line-clamp: 2; margin-block: 8px 8px; }
  .pdh--hero .pdh-paths-eyebrow { display: none; }
  .pdh--hero .pdh-card { padding: 8px 12px !important; }
  .pdh--hero .pdh-perk { font-size: 10.5px; }
  .pdh--hero .pdh-cta { margin-top: 8px; padding-block: 13px; }
  .pdh--hero .pdh-assure .pdh-ship { display: none; }
}

/* ===== The fold never waits for scroll: hero variant contents
   enter on load with a quick staggered rise; the observer-driven
   .reveal path stays for everything below the fold. ===== */
.pdh--hero .reveal { opacity: 1; transform: none; animation: riseIn .7s var(--ease-out) both; }
.pdh--hero .reveal:nth-child(2) { animation-delay: .07s; }
.pdh--hero .reveal:nth-child(3) { animation-delay: .14s; }
.pdh--hero .reveal:nth-child(4) { animation-delay: .21s; }
.pdh--hero .reveal:nth-child(5) { animation-delay: .28s; }
.pdh--hero .reveal:nth-child(6) { animation-delay: .35s; }
.pdh--hero .reveal:nth-child(7) { animation-delay: .42s; }
.pdh--hero .pdh-cta.reveal { animation-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  .pdh--hero .reveal { animation: none; opacity: 1 !important; transform: none !important; }
}

/* ===== Hive email field: light ground, dark entry (Jason 8/1) ===== */
.hive-form input {
  background: var(--paper);
  color: var(--p-ink);
  border: 1px solid rgba(200,134,10,.45);
}
.hive-form input::placeholder { color: var(--p-mute); }
.hive-form input:focus { border-color: var(--gold-hi); background: var(--paper-2); }

/* ===== Live-page carryovers: forest ground on BREATHE, emoji glyphs ===== */
.pbr-sec { background-size: cover; background-position: center 30%; position: relative; }
.pbr-veil { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(7,5,2,.3), rgba(7,5,2,.84) 26%, rgba(7,5,2,.88) 74%, rgba(7,5,2,.3)),
              linear-gradient(180deg, rgba(7,5,2,.55), rgba(7,5,2,.3) 22%, rgba(7,5,2,.35) 78%, rgba(7,5,2,.8)); }
.pbr-sec > *:not(.pbr-veil) { position: relative; z-index: 1; }
.pcv-emoji { font-size: 44px; line-height: 1; margin-bottom: 16px; }
.pif-emoji { font-size: 36px; line-height: 1; display: inline-block; }
.pub-emoji { font-size: 32px; line-height: 1; display: block; margin-bottom: 14px; }


/* ================= NINE PAGES LAYER (generated) ================= */

/* ===== alvara-pvx-hero ===== */
/* ==========================================================================
   alvara-pvx-hero  |  VitalityX Experience, section 1 of 7
   Full bleed cinematic hero. Load-time motion only, no scroll reveals.
   Every class is prefixed pvx-. Global utilities reused: .wrap .eyebrow
   .h-serif .btn-ghost .ic .ic-hex
   ========================================================================== */

/* the Shopify wrapper is a <section>, so the global section rhythm has to be
   cancelled or the hero stops being full bleed */
.shopify-section.section-alvara-pvx-hero,
.section-alvara-pvx-hero {
  padding: 0;
}

.pvx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  min-height: 640px;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100dvh);
  min-height: max(560px, 100svh);
}

/* ---------- photograph ---------------------------------------------------- */

.pvx-hero .pvx-hero__media {
  position: absolute;
  top: -14%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.pvx-hero .pvx-hero__frame {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  transform-origin: 54% 42%;
  transition: transform 2400ms var(--ease-out);
  will-change: transform;
}

.pvx-hero.is-ready .pvx-hero__frame { transform: scale(1); }

.pvx-hero.is-drifting .pvx-hero__frame {
  transition: none;
  animation: pvx-drift 12s var(--ease) infinite alternate;
}

@keyframes pvx-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.035) translate3d(-0.9%, -0.8%, 0); }
}

.pvx-hero .pvx-hero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- two stop veil, gold wash, honeycomb, base fade ----------------- */

.pvx-hero .pvx-hero__veil,
.pvx-hero .pvx-hero__wash,
.pvx-hero .pvx-hero__hex {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.pvx-hero .pvx-hero__veil {
  opacity: var(--pvx-veil, .65);
  background: linear-gradient(
    180deg,
    rgba(7, 5, 2, .92) 0%,
    rgba(7, 5, 2, .42) 24%,
    rgba(7, 5, 2, .34) 44%,
    rgba(7, 5, 2, .78) 78%,
    rgba(7, 5, 2, .96) 100%
  );
}

.pvx-hero .pvx-hero__wash {
  background:
    radial-gradient(116% 84% at 12% 86%, rgba(200, 134, 10, .22) 0%, rgba(200, 134, 10, .07) 40%, rgba(200, 134, 10, 0) 66%),
    linear-gradient(96deg, rgba(11, 9, 6, .80) 0%, rgba(11, 9, 6, .44) 46%, rgba(11, 9, 6, .02) 84%);
}

.pvx-hero .pvx-hero__hex {
  background-image: var(--hex);
  background-repeat: repeat;
  opacity: .8;
  mix-blend-mode: screen;
}

.pvx-hero .pvx-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(90px, 15vh, 220px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 5, 2, 0) 0%, rgba(7, 5, 2, .78) 62%, var(--bg-deep) 100%);
}

/* ---------- content ------------------------------------------------------- */

.pvx-hero .pvx-hero__inner {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: end;
  /* .wrap carries margin: 0 auto, which would shrink a grid item to its
     max-content width, so the full width has to be asked for explicitly */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* the top value is only a floor: the block is bottom aligned inside the
     1fr row, so tall viewports open the photograph up above the headline */
  padding-top: clamp(112px, 8vh + 6vw, 240px);
  padding-bottom: clamp(22px, 3.6vh, 56px);
}

.pvx-hero .pvx-hero__eyebrow {
  margin: 0 0 clamp(16px, 2.2vh, 28px);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity .82s var(--ease-out) 0ms,
    transform .82s var(--ease-out) 0ms;
}

.pvx-hero.is-ready .pvx-hero__eyebrow {
  opacity: 1;
  transform: none;
}

.pvx-hero .pvx-hero__h1 {
  /* flex column so the negative line margins cannot collapse into each other
     and the three lines keep exactly the leading they are set */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  max-width: min(100%, 24ch);
  font-size: min(var(--t-display), 10.2vw);
  line-height: .97;
  letter-spacing: -.018em;
  text-shadow: 0 2px 34px rgba(5, 3, 1, .45);
}

.pvx-hero .pvx-hero__line {
  display: block;
  /* padding widens the clip box past the glyph overflow, the matching negative
     margin keeps the visual line rhythm untouched */
  padding: .18em .14em .24em 0;
  margin: -.18em -.14em -.24em 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-out);
  transition-delay: var(--pvx-d, 0ms);
}

.pvx-hero.is-ready .pvx-hero__line { clip-path: inset(0 0 0 0); }

.pvx-hero .pvx-hero__lineIn {
  display: block;
  opacity: 0;
  transform: translate3d(0, .34em, 0);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: var(--pvx-d, 0ms);
  will-change: transform;
}

.pvx-hero.is-ready .pvx-hero__lineIn {
  opacity: 1;
  transform: none;
}

.pvx-hero .pvx-hero__lead {
  margin: clamp(20px, 2.8vh, 34px) 0 0;
  max-width: 54ch;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: var(--t-lead);
  line-height: 1.62;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .95s var(--ease-out) 620ms,
    transform .95s var(--ease-out) 620ms;
}

.pvx-hero .pvx-hero__lead > :first-child { margin-top: 0; }
.pvx-hero .pvx-hero__lead > :last-child { margin-bottom: 0; }

.pvx-hero.is-ready .pvx-hero__lead {
  opacity: 1;
  transform: none;
}

.pvx-hero .pvx-hero__ctaRow {
  margin: clamp(26px, 3.4vh, 44px) 0 0;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .95s var(--ease-out) 620ms,
    transform .95s var(--ease-out) 620ms;
}

.pvx-hero.is-ready .pvx-hero__ctaRow {
  opacity: 1;
  transform: none;
}

.pvx-hero .pvx-hero__cta:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ---------- scroll cue ---------------------------------------------------- */

.pvx-hero .pvx-hero__cueRail {
  position: relative;
  z-index: 2;
  grid-row: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: clamp(16px, 2.8vh, 38px);
  opacity: 0;
  transition: opacity .9s var(--ease-out) 900ms;
}

.pvx-hero.is-ready .pvx-hero__cueRail { opacity: 1; }

.pvx-hero .pvx-hero__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}

.pvx-hero .pvx-hero__cueLabel {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pvx-hero .pvx-hero__cueLine {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(38px, 6vh, 66px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(200, 134, 10, .34), rgba(200, 134, 10, 0));
}

.pvx-hero .pvx-hero__cueLine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 44%;
  background: linear-gradient(180deg, rgba(232, 168, 48, 0), var(--gold-hi));
  animation: pvx-cue 1.8s var(--ease) infinite;
}

@keyframes pvx-cue {
  0%   { transform: translate3d(0, -110%, 0); opacity: 0; }
  16%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translate3d(0, 240%, 0); opacity: 0; }
}

/* ---------- viewport tuning ----------------------------------------------- */

@media (min-width: 900px) {
  .pvx-hero .pvx-hero__cueRail { justify-content: flex-end; }
  .pvx-hero .pvx-hero__lead { max-width: 46ch; }
}

/* tall viewports: lift the composition off the base rule */
@media (min-height: 1000px) {
  .pvx-hero .pvx-hero__inner { padding-bottom: clamp(56px, 7vh, 120px); }
}

/* short viewports, laptops and landscape phones: hold the whole composition
   on one screen by trading display size and rhythm, not content */
@media (min-width: 700px) and (max-height: 820px) {
  .pvx-hero .pvx-hero__inner { padding-top: clamp(96px, 13vh, 156px); }
  .pvx-hero .pvx-hero__h1 { font-size: min(var(--t-display), 10.2vw, 12.2vh); }
  .pvx-hero .pvx-hero__lead {
    font-size: var(--t-body);
    margin-top: clamp(16px, 2.2vh, 26px);
  }
  .pvx-hero .pvx-hero__ctaRow { margin-top: clamp(20px, 2.8vh, 32px); }
}

/* very short viewports: float the cue instead of letting it take flow space */
@media (max-height: 700px) {
  .pvx-hero .pvx-hero__cueRail {
    position: absolute;
    grid-row: 1;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    padding-bottom: 14px;
    pointer-events: none;
  }
}

/* ---------- reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pvx-hero .pvx-hero__eyebrow,
  .pvx-hero .pvx-hero__lead,
  .pvx-hero .pvx-hero__ctaRow,
  .pvx-hero .pvx-hero__cueRail,
  .pvx-hero .pvx-hero__lineIn {
    transition: opacity 1ms linear !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }

  .pvx-hero .pvx-hero__line {
    transition: none !important;
    clip-path: none !important;
  }

  .pvx-hero .pvx-hero__media,
  .pvx-hero .pvx-hero__frame {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  .pvx-hero .pvx-hero__media { top: 0; }

  .pvx-hero .pvx-hero__cueLine::after {
    animation: none !important;
    top: auto;
    bottom: 0;
    opacity: 1;
    transform: none;
  }
}

/* ===== alvara-pvx-program ===== */
/* ==========================================================================
   VitalityX Program  (alvara-pvx-program)
   Deep ground. Split editorial with a sticky heading column, closing into a
   three-up stat band divided by gold hairlines.
   ========================================================================== */

.pvx-sec{
  position:relative;
  isolation:isolate;
  background:var(--bg-deep);
  border-top:1px solid var(--rule);
  padding:var(--sec) 0 calc(var(--sec) * .9);
}

/* honeycomb ground plus a single soft gold wash falling from the seam above */
.pvx-sec::before,
.pvx-sec::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.pvx-sec::before{
  background-image:var(--hex);
  background-repeat:repeat;
  opacity:.34;
}
.pvx-sec::after{
  background:radial-gradient(120% 62% at 50% -10%, rgba(200,134,10,.09), rgba(200,134,10,0) 62%);
}

/* --------------------------------------------------------- editorial split */

.pvx-program-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,4.4vw,54px);
  align-items:start;
}

.pvx-headcol{
  position:relative;
  min-width:0;
}

.pvx-headcol .pvx-headcol-inner{
  --pvx-p:0;
  margin-bottom:0;
  max-width:100%;
}

.pvx-headcol .pvx-program-h{
  margin:0;
  font-size:var(--t-h2);
  overflow-wrap:break-word;
  /* scroll scrubbed settle, driven from JS through --pvx-p */
  letter-spacing:calc(.006em - (var(--pvx-p, 0) * .018em));
  opacity:calc(1 - (var(--pvx-p, 0) * .2));
  will-change:letter-spacing, opacity;
}

.pvx-h-l{display:block}

.pvx-prose{
  min-width:0;
  max-width:64ch;
}

.pvx-lede{
  position:relative;
  padding-top:clamp(18px,2.2vw,28px);
}
.pvx-lede::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:56px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(200,134,10,0));
}
.pvx-lede p{
  margin:0;
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(1.28rem,1.02rem + 1.1vw,1.9rem);
  line-height:1.3;
  letter-spacing:-.005em;
  color:var(--ink);
}
.pvx-lede p + p{margin-top:.6em}

.pvx-program-body{margin-top:clamp(22px,2.7vw,36px)}
.pvx-program-body p{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.78;
  color:var(--ink-mute);
}
.pvx-program-body p + p{margin-top:1em}
.pvx-body-2 p{color:var(--ink)}

@media (min-width:1080px){
  .pvx-program-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);
    gap:clamp(56px,6.4vw,112px);
  }
  .pvx-headcol .pvx-headcol-inner{
    position:sticky;
    top:calc(var(--sec) / 2);
  }
}

/* ---------------------------------------------------------------- stat band */

.pvx-stats{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:clamp(56px,7vw,104px) 0 0;
  padding:0;
  list-style:none;
}

/* the band opens on a hairline that draws left to right */
.pvx-stats::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--rule);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--ease-out);
}
.pvx-stats:has(.pvx-stat.in)::before{transform:scaleX(1)}
@supports not selector(:has(*)){
  .pvx-stats::before{transform:scaleX(1)}
}

.pvx-stat{
  position:relative;
  min-width:0;
  padding:clamp(26px,5.4vw,34px) 0;
}
.pvx-stat:first-child{padding-top:clamp(30px,6vw,42px)}
.pvx-stat:last-child{padding-bottom:0}

/* dividing hairline: horizontal between stacked rows, vertical once three up */
.pvx-stat-rule{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--rule);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s var(--ease-out) .06s;
}
.pvx-stat.in .pvx-stat-rule{transform:scaleX(1)}
.pvx-stat:first-child .pvx-stat-rule{display:none}

.pvx-stat-val{
  margin:0;
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(3.4rem,2rem + 5vw,6rem);
  line-height:.9;
  letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--gold-hi);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .pvx-stat-val{
    background-image:linear-gradient(176deg, var(--gold-lite) 0%, var(--gold-hi) 32%, var(--gold) 68%, var(--gold-lo) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
.pvx-stat-num{display:inline-block}

.pvx-stat-label{
  margin:clamp(12px,1.4vw,18px) 0 0;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

@media (min-width:720px){
  .pvx-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pvx-stat{padding:clamp(30px,3.4vw,46px) clamp(20px,2.6vw,40px)}
  .pvx-stat:first-child{padding:clamp(30px,3.4vw,46px) clamp(20px,2.6vw,40px);padding-left:0}
  .pvx-stat:last-child{padding-bottom:clamp(30px,3.4vw,46px);padding-right:0}
  .pvx-stat-rule{
    top:0;
    bottom:0;
    left:0;
    right:auto;
    width:1px;
    height:auto;
    transform:scaleY(0);
    transform-origin:center top;
  }
  .pvx-stat.in .pvx-stat-rule{transform:scaleY(1)}
}

/* ------------------------------------------------------------ reduced motion
   Hairlines render at full length immediately, the heading never scrubs, and
   the counters are handed their final value by the section script. */
@media (prefers-reduced-motion: reduce){
  .pvx-headcol .pvx-headcol-inner{--pvx-p:0}
  .pvx-headcol .pvx-program-h{will-change:auto}
  .pvx-stats::before,
  .pvx-stat-rule{transition:none}
  .pvx-stats::before{transform:scaleX(1)}
  .pvx-stat-rule{transform:none}
}


/* ===== alvara-pvx-index ===== */
/* ============================================================
   ALVARA / VitalityX Experience
   Section 3: services index (prefix: pvx-)
   Cream formulary ledger. Nine hairline separated anchor rows.
   ============================================================ */

.pvx-index {
  position: relative;
}

/* The .cream utility supplies the paper ground, rounded corners,
   hex texture and the negative top/bottom overlap. Nothing here
   redefines it, we only sit inside it. */
.pvx-index .pvx-panel {
  position: relative;
}

.pvx-index .pvx-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(2px, 1.4vw, 20px);
}

/* ---------- Head ---------- */

.pvx-index .pvx-index-head {
  margin-bottom: clamp(30px, 4.2vw, 56px);
}

.pvx-index .pvx-index-head .eyebrow {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
}

.pvx-index .pvx-index-h {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--p-ink);
  text-wrap: balance;
}

/* ---------- The ledger ---------- */

.pvx-index .pvx-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--p-rule);
}

.pvx-index .pvx-item {
  margin: 0;
  padding: 0;
}

.pvx-index .pvx-row {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  color: var(--p-ink);
  /* No border-radius here on purpose: a radius would curve the 1px rule
     up at both ends and desync it from the straight wipe overlay. */
  border-bottom: 1px solid var(--p-rule);
  transition: border-bottom-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* The hairline wipe. Sits exactly over the row rule and sweeps
   in from the left on hover and on keyboard focus. */
.pvx-index .pvx-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--p-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease);
  pointer-events: none;
}

.pvx-index .pvx-row:focus-visible {
  outline: 2px solid var(--p-gold);
  outline-offset: 4px;
}

/* Three tracks: mono numeral, Fraunces title, gold chevron.
   Translated as one unit so the row rule stays put beneath it. */
.pvx-index .pvx-row-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.6vw, 36px);
  min-height: 56px;
  padding-block: clamp(13px, 1.8vw, 21px);
  transition: transform .45s var(--ease);
}

.pvx-index .pvx-index-num {
  font-family: var(--mono);
  font-size: clamp(.68rem, .63rem + .16vw, .78rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .22em;
  line-height: 1;
  color: var(--p-mute);
  min-width: 2.9em;
  transition: color .3s var(--ease);
}

.pvx-index .pvx-index-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.16rem, .98rem + .95vw, 1.95rem);
  line-height: 1.16;
  letter-spacing: -0.006em;
  color: var(--p-ink);
  text-wrap: pretty;
}

.pvx-index .pvx-chev {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--p-gold);
  opacity: .42;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}

.pvx-index .pvx-chev svg {
  display: block;
  width: clamp(15px, 1.3vw, 19px);
  height: auto;
}

/* ---------- Interaction ---------- */

/* Keyboard focus, always active. */
.pvx-index .pvx-row:focus-visible::after {
  transform: scaleX(1);
}

.pvx-index .pvx-row:focus-visible .pvx-row-in {
  transform: translateX(10px);
}

.pvx-index .pvx-row:focus-visible .pvx-index-num {
  color: var(--p-gold);
}

.pvx-index .pvx-row:focus-visible .pvx-chev {
  opacity: 1;
  transform: translateX(6px);
}

/* Pointer hover, only where hover is real, so touch devices
   never get stuck in a hovered state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .pvx-index .pvx-row:hover::after {
    transform: scaleX(1);
  }

  .pvx-index .pvx-row:hover .pvx-row-in {
    transform: translateX(10px);
  }

  .pvx-index .pvx-row:hover .pvx-index-num {
    color: var(--p-gold);
  }

  .pvx-index .pvx-row:hover .pvx-chev {
    opacity: 1;
    transform: translateX(6px);
  }
}

/* ---------- Reveal cascade ----------
   The global .stagger only defines delays for children 2 through 5,
   so all nine rows ladder from an index custom property instead. */
.pvx-index .pvx-index-list .pvx-item.reveal {
  transition-delay: calc(var(--pvx-i, 0) * 45ms);
}

/* ---------- Anchor landing ---------- */

/* Keep an anchored jump clear of a sticky header. */
[id^="pvx-mod-"] {
  scroll-margin-top: clamp(84px, 10vh, 132px);
}

@media (prefers-reduced-motion: no-preference) {
  :root:has(.pvx-index) {
    scroll-behavior: smooth;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .pvx-index .pvx-row-in {
    gap: 16px;
  }

  .pvx-index .pvx-index-num {
    min-width: 2.5em;
    letter-spacing: .18em;
  }
}

@media (max-width: 400px) {
  .pvx-index .pvx-row-in {
    gap: 13px;
  }

  .pvx-index .pvx-index-num {
    min-width: 2.3em;
    letter-spacing: .14em;
    align-self: center;
  }
}

/* ---------- Reduced motion ----------
   Colour changes stay. The 10px slide, the chevron slide and the
   hairline wipe are dropped, the rule simply turns gold instead. */
@media (prefers-reduced-motion: reduce) {
  .pvx-index .pvx-index-list .pvx-item.reveal {
    transition-delay: 0s;
  }

  .pvx-index .pvx-row-in {
    transition: none;
  }

  .pvx-index .pvx-row:hover .pvx-row-in,
  .pvx-index .pvx-row:focus-visible .pvx-row-in {
    transform: none;
  }

  .pvx-index .pvx-row::after {
    display: none;
  }

  .pvx-index .pvx-row:hover,
  .pvx-index .pvx-row:focus-visible {
    border-bottom-color: var(--p-gold);
  }

  .pvx-index .pvx-chev {
    transition: opacity .01s linear;
  }

  .pvx-index .pvx-row:hover .pvx-chev,
  .pvx-index .pvx-row:focus-visible .pvx-chev {
    transform: none;
  }
}

/* ---------- Forced colours ---------- */

@media (forced-colors: active) {
  .pvx-index .pvx-row {
    border-bottom-color: CanvasText;
  }

  .pvx-index .pvx-chev {
    opacity: 1;
  }
}

/* ===== alvara-pvx-modalities ===== */
/* ============================================================
   alvara-pvx-modalities  |  VitalityX Experience, section 4
   Dark ground. Asymmetric mosaic of nine modality cards.

   Layout note: the mosaic runs on a wrapping flex row rather than
   grid auto flow dense. With five tall (one third) and four wide
   (two thirds) cards in this exact document order, a three column
   dense grid cannot tile without leaving holes, so the mosaic is
   built from flex wrapping plus flex grow: every line fills
   completely, document order is preserved, and the final keystone
   card lands alone on its line and grows to full width.
   Desktop rhythm: T|W, T|W, T|T, W|T, keystone.
   ============================================================ */

.pvx-mod {
  --pvx-hex-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath fill='%23000' d='M9 0l7.794 4.5v9L9 20 1.206 13.5v-9z'/%3E%3C/svg%3E");
  position: relative;
  overflow: clip;
  padding: calc(var(--sec) + clamp(18px, 4vw, 54px)) 0 var(--sec);
  background: var(--bg);
  color: var(--ink);
}

.pvx-mod::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hex);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

.pvx-mod::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1440px, 130%);
  height: clamp(300px, 46vw, 720px);
  transform: translateX(-50%);
  background: radial-gradient(58% 68% at 50% 0%, rgba(200, 134, 10, .11), rgba(200, 134, 10, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.pvx-wrap { position: relative; z-index: 1; }

/* ---------- section head ---------- */

.pvx-modalities-head { align-items: end; }
.pvx-h2 { margin: .32em 0 0; font-size: var(--t-h2); }
.pvx-head__rail { display: none; }

@media (min-width: 1080px) {
  .pvx-head__rail {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: .75rem;
    color: var(--gold);
  }
  .pvx-rail-line {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(200, 134, 10, 0), var(--rule-2), rgba(200, 134, 10, 0));
  }
  .pvx-head__rail .ic {
    flex: 0 0 auto;
    width: 12px;
    height: 13px;
    opacity: .9;
  }
}

/* ---------- mosaic ---------- */

.pvx-modalities-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(16px, 2.1vw, 30px);
  margin-top: clamp(30px, 4.2vw, 62px);
}

.pvx-modalities-grid .pvx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: clamp(80px, 12vh, 150px);
  transition:
    opacity .85s var(--ease-out) var(--d, 0ms),
    transform .85s var(--ease-out) var(--d, 0ms),
    translate .5s var(--ease),
    border-color .5s var(--ease),
    box-shadow .5s var(--ease);
}

@media (min-width: 720px) {
  .pvx-modalities-grid .pvx-card { flex: 1 1 46%; }
}

@media (min-width: 1180px) {
  .pvx-modalities-grid .pvx-card--tall { flex: 1 1 30%; }
  .pvx-modalities-grid .pvx-card--wide { flex: 1.9 1 62%; }
  /* breaks the first two lines out of identical proportions */
  .pvx-modalities-grid .pvx-card--tall:nth-child(3) { flex-basis: 25%; }
}

/* ---------- media ---------- */

.pvx-media {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(170px, 21vw, 250px);
  overflow: hidden;
  background: var(--bg-deep);
}

.pvx-card--tall .pvx-media { aspect-ratio: 4 / 5; }
.pvx-card--wide .pvx-media { aspect-ratio: 16 / 10; }

@media (min-width: 720px) {
  .pvx-card--tall .pvx-media { aspect-ratio: 1 / 1; }
  .pvx-card--wide .pvx-media { aspect-ratio: 3 / 2; }
}

@media (min-width: 1180px) {
  /* keeps a half width tall card from turning into a giant square */
  .pvx-card--tall .pvx-media { max-height: clamp(360px, 34vw, 500px); }
  .pvx-card--wide .pvx-media { aspect-ratio: 16 / 9; }
}

.pvx-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 5, 2, .46), rgba(7, 5, 2, 0) 34%, rgba(7, 5, 2, 0) 64%, rgba(7, 5, 2, .40));
  pointer-events: none;
}

.pvx-shift {
  position: absolute;
  inset: -2.4% 0;
  will-change: translate;
}

.pvx-shift img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1.5s var(--ease-out) var(--d, 0ms);
}

.pvx-card.in .pvx-shift img { transform: scale(1); }

.pvx-modalities-num {
  position: absolute;
  z-index: 3;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  padding: .4rem .62rem .32rem;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .18em;
  color: var(--gold-lite);
  background: rgba(7, 5, 2, .74);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

/* ---------- card body ---------- */

.pvx-modalities-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(20px, 2.1vw, 32px);
}

.pvx-eyebrow {
  margin: 0;
  transition: letter-spacing .5s var(--ease), color .5s var(--ease);
}

.pvx-modalities-title {
  margin: 0;
  font-size: var(--t-h3);
  color: var(--ink);
  overflow-wrap: break-word;
}

.pvx-copy {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--ink-mute);
}

.pvx-copy p { margin: 0; }
.pvx-copy p + p { margin-top: .7em; }

.pvx-modalities-list {
  list-style: none;
  margin: 0;
  padding: 1.05rem 0 0;
  display: grid;
  align-content: start;
  gap: .52rem;
  border-top: 1px solid var(--rule);
}

.pvx-modalities-list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--sans);
  font-size: clamp(.84rem, .8rem + .18vw, .94rem);
  line-height: 1.5;
  color: var(--ink-faint);
  overflow-wrap: break-word;
}

.pvx-modalities-list li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .42em;
  width: .6rem;
  height: .68rem;
  background-color: var(--gold);
  -webkit-mask: var(--pvx-hex-bullet) center / contain no-repeat;
  mask: var(--pvx-hex-bullet) center / contain no-repeat;
  opacity: .92;
}

/* wide cards: explanation beside inclusions */
@media (min-width: 1180px) {
  .pvx-card--wide .pvx-modalities-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    column-gap: clamp(24px, 2.6vw, 44px);
    row-gap: .9rem;
    align-content: start;
    align-items: stretch;
  }
  .pvx-card--wide .pvx-eyebrow,
  .pvx-card--wide .pvx-modalities-title { grid-column: 1 / -1; }
  .pvx-card--wide .pvx-modalities-list {
    padding: 0 0 0 clamp(20px, 2vw, 34px);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}

/* ---------- partner mark variant ---------- */

.pvx-card--mark .pvx-media {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: clamp(180px, 19vw, 258px);
  max-height: clamp(280px, 36vw, 480px);
  display: grid;
  place-items: center;
  padding: clamp(26px, 3.4vw, 54px);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom: 1px solid var(--rule);
}

.pvx-card--mark .pvx-media::after {
  inset: clamp(13px, 1.5vw, 20px);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  background: none;
}

.pvx-card--mark .pvx-shift {
  position: relative;
  inset: auto;
  width: min(375px, 100%);
}

.pvx-card--mark .pvx-shift img {
  height: auto;
  object-fit: contain;
  transform: none;
}

/* ---------- product variant ---------- */

.pvx-card--product .pvx-media {
  aspect-ratio: 4 / 3;
  max-height: clamp(300px, 42vw, 520px);
  background:
    radial-gradient(66% 58% at 50% 46%, rgba(200, 134, 10, .16), rgba(0, 0, 0, 0) 72%),
    var(--bg-deep);
}

.pvx-card--product .pvx-media::after { background: none; }

.pvx-card--product .pvx-shift {
  inset: 0;
  padding: clamp(22px, 3vw, 46px);
}

.pvx-card--product .pvx-shift img {
  object-fit: contain;
  transform: scale(1.04);
}

.pvx-card--product.in .pvx-shift img { transform: scale(1); }

/* ---------- keystone ---------- */

.pvx-card--keystone { border-color: var(--rule-2); }

.pvx-card--keystone::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(200, 134, 10, .18);
  border-radius: calc(var(--r-lg) - 7px);
  pointer-events: none;
  z-index: 4;
}

@media (min-width: 1180px) {
  .pvx-modalities-grid .pvx-card--keystone { flex-direction: row; }
  .pvx-card--keystone .pvx-media {
    flex: 0 0 clamp(280px, 29%, 420px);
    aspect-ratio: auto;
    max-height: none;
    min-height: clamp(400px, 32vw, 520px);
    border-right: 1px solid var(--rule);
    border-bottom: 0;
  }
  .pvx-card--keystone .pvx-modalities-body { align-content: center; }
}

/* ---------- hover ---------- */

@media (hover: hover) and (pointer: fine) {
  .pvx-modalities-grid .pvx-card:hover {
    translate: 0 -4px;
    border-color: var(--rule-2);
    box-shadow: 0 24px 54px -32px rgba(0, 0, 0, .92);
  }
  .pvx-card:hover .pvx-eyebrow {
    letter-spacing: .3em;
    color: var(--gold-hi);
  }
  .pvx-card:hover .pvx-shift img {
    transform: scale(1.03);
    transition-delay: 0ms;
  }
  .pvx-card--mark:hover .pvx-shift img,
  .pvx-card--product:hover .pvx-shift img { transform: scale(1.02); }
}

/* ---------- index anchor landing ---------- */

@keyframes pvx-target {
  0%   { border-color: var(--rule);    box-shadow: 0 0 0 0 rgba(232, 168, 48, 0); }
  18%  { border-color: var(--gold-hi); box-shadow: 0 0 0 1px rgba(232, 168, 48, .5), 0 0 48px -14px rgba(232, 168, 48, .55); }
  70%  { border-color: var(--gold-hi); box-shadow: 0 0 0 1px rgba(232, 168, 48, .28), 0 0 40px -18px rgba(232, 168, 48, .3); }
  100% { border-color: var(--rule);    box-shadow: 0 0 0 0 rgba(232, 168, 48, 0); }
}

.pvx-modalities-grid .pvx-card:target { animation: pvx-target 1.2s var(--ease) 1; }

.pvx-modalities-grid .pvx-card:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

/* ---------- scroll linked breathing ---------- */

@keyframes pvx-drift {
  from { translate: 0 -1.5%; }
  to   { translate: 0 1.5%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pvx-card--photo .pvx-shift {
      animation: pvx-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .pvx-shift {
    animation: none !important;
    translate: none !important;
  }
  .pvx-shift img,
  .pvx-card:hover .pvx-shift img {
    transform: none !important;
    transition: none;
  }
  .pvx-modalities-grid .pvx-card { transition: opacity .5s linear var(--d, 0ms); }
  .pvx-modalities-grid .pvx-card:hover { translate: none; }
  .pvx-modalities-grid .pvx-card:target {
    animation: none;
    border-color: var(--gold-hi);
  }
  .pvx-eyebrow { transition: color .3s linear; }
  .pvx-card:hover .pvx-eyebrow { letter-spacing: .26em; }
}

/* ===== alvara-pvx-foundation ===== */
/* ============================================================
   alvara-pvx-foundation  /  VitalityX Foundation
   Image ground. Three negations, the approach prose, quote monolith.
   ============================================================ */
.pvx-foundation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--ink);
  padding-top: clamp(92px, 10.6vw, 172px);
  padding-bottom: calc(clamp(92px, 10.6vw, 172px) + 36px);
}

/* ---------- ground: photograph, veil, honeycomb ---------- */
.pvx-fnd-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pvx-fnd-par {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  transform: translate3d(0, var(--pvx-par, 0px), 0);
}
.pvx-fnd-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.pvx-fnd-veil {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(118% 82% at 50% 44%, rgba(7,5,2,.34) 0%, rgba(7,5,2,.66) 54%, rgba(7,5,2,.88) 100%),
    linear-gradient(180deg, rgba(7,5,2,.96) 0%, rgba(7,5,2,.72) 18%, rgba(7,5,2,.70) 62%, rgba(7,5,2,.97) 100%);
}
.pvx-fnd-tex { position: absolute; inset: 0; pointer-events: none; background-image: var(--hex); opacity: .5; }

.pvx-fnd-wrap { position: relative; z-index: 1; text-align: center; }

/* ---------- heading ---------- */
.pvx-fnd-head { max-width: 860px; margin: 0 auto; }
.pvx-foundation .pvx-fnd-eyebrow { justify-content: center; }
.pvx-fnd-h { font-size: var(--t-h2); margin: 20px 0 0; }
.pvx-fnd-line { display: block; }

/* ---------- the three negations ---------- */
.pvx-fnd-negs {
  list-style: none;
  margin: clamp(44px, 5.4vw, 76px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pvx-fnd-neg {
  position: relative;
  padding: clamp(22px, 2.7vw, 34px) clamp(6px, 2vw, 26px);
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.16rem, 1rem + .72vw, 1.58rem);
  line-height: 1.26;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.pvx-fnd-neg:first-child { border-top: 0; }

/* the gold hairline strikes through the sentence, drawing left to right,
   after the sentence itself has settled. box-decoration-break keeps it
   correct when a sentence wraps to a second line. */
.pvx-fnd-neg-txt {
  display: inline;
  background-image: linear-gradient(var(--gold-hi), var(--gold-hi));
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% 1.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .6s var(--ease);
  transition-delay: calc(var(--pvx-d, 0ms) + .4s);
}
.pvx-fnd-neg.in .pvx-fnd-neg-txt { background-size: 100% 1.5px; }
.pvx-foundation .pvx-fnd-negs .pvx-fnd-neg.reveal { transition-delay: var(--pvx-d, 0ms); }

@media (min-width: 900px) {
  .pvx-fnd-negs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pvx-fnd-neg { border-top: 0; border-left: 1px solid var(--rule); }
  .pvx-fnd-neg:first-child { border-left: 0; }
}

/* ---------- approach prose ---------- */
.pvx-fnd-prose {
  position: relative;
  max-width: 66ch;
  margin: clamp(46px, 5.6vw, 78px) auto 0;
}
.pvx-fnd-prose::before {
  content: '';
  position: absolute;
  inset: -16% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(72% 72% at 50% 50%, rgba(7,5,2,.64) 0%, rgba(7,5,2,.36) 58%, rgba(7,5,2,0) 100%);
}
.pvx-fnd-p {
  font-size: var(--t-lead);
  line-height: 1.62;
  font-weight: 300;
  color: var(--ink);
  text-wrap: pretty;
}
.pvx-fnd-p p { margin: 0; }
.pvx-fnd-p + .pvx-fnd-p { margin-top: 1.15em; }
.pvx-fnd-p--sub { color: rgba(245,238,225,.86); }

/* ---------- the quote monolith ---------- */
.pvx-fnd-fig {
  margin: 0;
  padding-block: var(--sec);
}
.pvx-fnd-stage {
  position: relative;
  max-width: min(1120px, 100%);
  margin: 0 auto;
}
.pvx-fnd-mark {
  position: absolute;
  z-index: 0;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(9rem, 34vw, 24rem);
  line-height: .7;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 1.5s var(--ease-out) .3s;
}
.pvx-fnd-stage.in .pvx-fnd-mark { opacity: .14; }
.pvx-fnd-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 350;
  font-style: italic;
  font-size: var(--t-h2);
  line-height: 1.16;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
}
.pvx-fnd-quote p { margin: 0; }
.pvx-fnd-cite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(30px, 3.6vw, 48px);
}
.pvx-fnd-cite::before {
  content: '';
  flex: none;
  width: clamp(28px, 5vw, 58px);
  height: 1px;
  background: var(--rule-2);
}
.pvx-fnd-cite cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-lite);
}

/* the blockquote is the payoff: it resolves out of blur and scale */
.pvx-foundation .pvx-fnd-stage.reveal {
  opacity: 0;
  transform: scale(.965);
  filter: blur(12px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
}
.pvx-foundation .pvx-fnd-stage.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (max-width: 620px) {
  .pvx-fnd-fig { padding-block: clamp(56px, 14vw, 96px); }
  .pvx-fnd-quote { line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .pvx-fnd-par { transform: none; }
  .pvx-fnd-neg-txt { background-size: 100% 1.5px; transition: none; }
  .pvx-foundation .pvx-fnd-negs .pvx-fnd-neg.reveal { transition-delay: 0s; }
  .pvx-foundation .pvx-fnd-stage.reveal { transform: none; filter: none; transition: opacity .45s linear; }
  .pvx-foundation .pvx-fnd-stage.reveal.in { transform: none; filter: none; }
  .pvx-fnd-mark { transition: none; }
}

/* ===== alvara-pvx-guides ===== */
/* ============================================================
   ALVARA / VitalityX Experience
   Section 6: the guides (prefix: pvx-)
   Cream portrait diptych. Offset circular portrait beside a
   biography column, credentials stamped in as a chip row.
   ============================================================ */

.pvx-guides {
  position: relative;
  padding-block: var(--sec);
  overflow-x: clip;
}

/* ---------- Section head ---------- */

.pvx-guides .pvx-guides-head {
  margin-bottom: clamp(38px, 5vw, 72px);
}

/* The global sheet mutes .cream .sec-head p, which would swallow the
   gold eyebrow sitting inside the head. Restore it. */
.pvx-guides .pvx-guides-head .eyebrow {
  color: var(--p-gold);
  margin: 0;
}

.pvx-guides .pvx-guides-title {
  margin: 18px 0 0;
  font-size: var(--t-h2);
}

.pvx-guides .pvx-guides-title .pvx-line {
  display: block;
}

/* ---------- Rows ---------- */

.pvx-guides-rows {
  display: flex;
  flex-direction: column;
}

.pvx-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4.4vw, 44px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 68px);
}

.pvx-guide:first-child {
  padding-top: 0;
}

.pvx-guide:last-child {
  padding-bottom: 0;
}

.pvx-guide + .pvx-guide {
  border-top: 1px solid var(--p-rule);
}

/* ---------- Portrait ---------- */

.pvx-guide-portrait {
  position: relative;
  width: 100%;
  max-width: clamp(196px, 56vw, 300px);
  justify-self: center;
}

.pvx-portrait-inner {
  position: relative;
  aspect-ratio: 1 / 1;
  transform: translate3d(0, var(--pvx-par, 0px), 0);
}

.pvx-portrait-glow {
  position: absolute;
  inset: -17%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%,
      rgba(200, 134, 10, .30) 0%,
      rgba(200, 134, 10, .12) 46%,
      rgba(200, 134, 10, 0) 72%);
  transform: scale(.85);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity 1s var(--ease-out);
  pointer-events: none;
}

.pvx-guide-portrait.in .pvx-portrait-glow {
  transform: scale(1);
  opacity: 1;
}

/* Both portraits are lit against a near black ground, so the plate is
   built as a paper mount holding a dark medallion: cream mat, gold
   hairline at the portrait edge, hairline rule at the paper edge. */
.pvx-portrait-frame {
  position: relative;
  border-radius: 50%;
  padding: clamp(5px, .55vw, 8px);
  border: 1px solid var(--p-rule);
  background: var(--paper-2);
  box-shadow: 0 26px 58px -30px rgba(32, 24, 9, .42);
}

.pvx-portrait-frame::after {
  content: "";
  position: absolute;
  inset: clamp(5px, .55vw, 8px);
  border-radius: 50%;
  border: 1px solid rgba(200, 134, 10, .30);
  pointer-events: none;
}

.pvx-portrait-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg-deep);
}

/* ---------- Biography column ---------- */

.pvx-guide-body {
  transform: translate3d(0, calc(var(--pvx-par, 0px) * -0.34), 0);
}

.pvx-guides .pvx-guide-role {
  margin: 0;
}

.pvx-guides .pvx-guide-name {
  margin: 12px 0 0;
  font-size: clamp(1.7rem, 1.18rem + 1.75vw, 2.6rem);
  color: var(--p-ink);
}

.pvx-guide-bio {
  margin-top: clamp(15px, 1.7vw, 21px);
  max-width: 56ch;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.74;
}

.pvx-guides .pvx-guide-bio p {
  margin: 0;
  color: var(--p-body);
}

.pvx-guides .pvx-guide-bio p + p {
  margin-top: 14px;
}

.pvx-guide-bio a {
  color: var(--p-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Credential chips ---------- */

/* One shared grid, not natural pill widths: every chip in a row must
   take the identical width and height so the row reads as one stamped
   unit. Single column on small screens, a matched two-column plate
   from 680px up. */
.pvx-creds {
  list-style: none;
  margin: clamp(21px, 2.5vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-width: 640px;
}

@media (min-width: 680px) {
  .pvx-creds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pvx-cred {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--p-rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--p-mute);
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.pvx-cred .ic {
  width: 9px;
  height: 9px;
  color: var(--p-gold);
}

/* ---------- Reveal cascade ----------
   The global sheet carries both a bare .reveal:nth-child() ladder
   and a .stagger ladder, so these selectors are weighted above both
   to let each row run its own order: portrait, role, name, bio,
   then the chips stamping in last.
   ------------------------------------------------------------ */

.pvx-guides .pvx-guides-head .pvx-rv,
.pvx-guides .pvx-guide.stagger .pvx-rv {
  transition-delay: var(--pvx-d, 0s);
}

/* ---------- Desktop diptych ---------- */

@media (min-width: 900px) {
  .pvx-guide {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(38px, 5.4vw, 88px);
  }

  .pvx-guide-portrait {
    max-width: clamp(240px, 26vw, 380px);
  }

  .pvx-guide:nth-child(odd) .pvx-guide-portrait {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .pvx-guide:nth-child(odd) .pvx-guide-body {
    grid-column: 2;
    grid-row: 1;
  }

  /* Mirror the track sizes too, so the biography always owns the wide
     column no matter which side the portrait sits on. */
  .pvx-guide:nth-child(even) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }

  .pvx-guide:nth-child(even) .pvx-guide-portrait {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .pvx-guide:nth-child(even) .pvx-guide-body {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Break the column edge, capped well inside the gutter. */
@media (min-width: 1080px) {
  .pvx-guide:nth-child(odd) .pvx-guide-portrait {
    margin-inline-start: calc(-1 * clamp(0px, 1.6vw, 26px));
  }

  .pvx-guide:nth-child(even) .pvx-guide-portrait {
    margin-inline-end: calc(-1 * clamp(0px, 1.6vw, 26px));
  }
}

@media (min-width: 1600px) {
  .pvx-guide {
    gap: clamp(84px, 6vw, 124px);
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 520px) {
  .pvx-cred {
    padding: 7px 12px;
  }
}

/* ---------- Reduced motion ----------
   The global sheet already zeroes reveal delays. Here we only stop
   the glow scale and the counter-parallax; the script never sets
   --pvx-par under this preference, so the fallback holds at 0.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pvx-portrait-inner,
  .pvx-guide-body {
    transform: none;
  }

  .pvx-portrait-glow,
  .pvx-guide-portrait.in .pvx-portrait-glow {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ===== alvara-pvx-call ===== */
/* ============================================================
   VitalityX Experience, section 7: alvara-pvx-call
   Centered monolith on the darkest ground. Closes the page.
   ============================================================ */

.pvx-call {
  position: relative;
  overflow: hidden;
  padding: var(--sec) 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-align: center;
}

/* Honeycomb ground, pooled toward the centre so the edges stay quiet */
.pvx-call::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hex);
  opacity: .62;
  -webkit-mask-image: radial-gradient(ellipse 64% 80% at 50% 44%, #000 22%, transparent 82%);
  mask-image: radial-gradient(ellipse 64% 80% at 50% 44%, #000 22%, transparent 82%);
  pointer-events: none;
}

/* A single breath of warmth behind the monolith */
.pvx-call::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 56% 62% at 50% 44%, rgba(200, 134, 10, .11), transparent 66%);
  pointer-events: none;
}

.pvx-call > .wrap {
  z-index: 1;
}

/* ---------- The hex glyph behind the heading ---------- */
.pvx-call__glyph {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 0;
  width: clamp(260px, 42vw, 520px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.9);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out), transform 1.5s var(--ease-out);
  pointer-events: none;
}

.pvx-call__glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pvx-call.pvx-lit .pvx-call__glyph {
  opacity: .06;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Monolith ---------- */
.pvx-call__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 100ms cascade, scoped so it does not touch the global stagger rhythm */
.pvx-call .pvx-call__inner > .reveal:nth-child(1) { transition-delay: 0s; }
.pvx-call .pvx-call__inner > .reveal:nth-child(2) { transition-delay: .1s; }
.pvx-call .pvx-call__inner > .reveal:nth-child(3) { transition-delay: .2s; }
.pvx-call .pvx-call__inner > .reveal:nth-child(4) { transition-delay: .3s; }
.pvx-call .pvx-call__inner > .reveal:nth-child(5) { transition-delay: .4s; }

.pvx-call__eyebrow {
  justify-content: center;
  margin: 0;
  text-align: center;
}

.pvx-call__h {
  margin: 20px 0 0;
  font-size: var(--t-h2);
  max-width: 18ch;
}

.pvx-call__line {
  display: block;
}

.pvx-call__body {
  margin-top: clamp(18px, 2vw, 24px);
  max-width: 56ch;
  color: var(--ink-mute);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.62;
  text-wrap: pretty;
}

.pvx-call__body p { margin: 0; }
.pvx-call__body p + p { margin-top: .9em; }

/* ---------- Button ---------- */
.pvx-call__cta {
  margin-top: clamp(32px, 3.6vw, 46px);
  max-width: 100%;
}

.pvx-call__btn {
  line-height: 1.3;
  text-align: center;
  letter-spacing: .02em;
  max-width: 100%;
}

/* One shine sweep on entry, then the button's own hover sweep takes over */
@keyframes pvx-call-sweep {
  from { transform: translateX(-170%) skewX(-12deg); }
  to   { transform: translateX(300%) skewX(-12deg); }
}

.pvx-call__btn.pvx-call-swept::after {
  animation: pvx-call-sweep .95s var(--ease) 1;
}

/* ---------- Contact rail ---------- */
.pvx-call__rail {
  position: relative;
  margin: clamp(30px, 3.4vw, 42px) 0 0;
  padding-top: clamp(24px, 2.8vw, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--ink-mute);
}

.pvx-call__rail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(72px, 12vw, 132px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-2), transparent);
}

.pvx-call__link {
  color: var(--ink-mute);
  text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) no-repeat 50% 100% / 0 1px;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}

.pvx-call__link:hover,
.pvx-call__link:focus-visible {
  color: var(--gold-hi);
  background-size: 100% 1px;
}

.pvx-call__link:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 5px;
}

.pvx-call__sep {
  color: var(--ink-faint);
}

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .pvx-call__btn {
    width: 100%;
    max-width: 360px;
    padding: 16px 22px;
    font-size: 14.5px;
  }

  .pvx-call__cta {
    width: 100%;
  }

  .pvx-call__rail {
    font-size: 12px;
    letter-spacing: .08em;
  }
}

/* Below this the rail no longer fits on one line, so it stacks and drops the separator */
@media (max-width: 384px) {
  .pvx-call__rail {
    flex-direction: column;
    gap: 10px;
  }

  .pvx-call__sep {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pvx-call .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pvx-call__glyph,
  .pvx-call.pvx-lit .pvx-call__glyph {
    opacity: .06;
    transform: translate(-50%, -50%);
    transition: none;
  }

  .pvx-call__btn.pvx-call-swept::after {
    animation: none;
  }
}

/* ===== alvara-psa-hero ===== */
/* =========================================================================
   ALVARA Sanctuary, section 01: cinematic hero            prefix: psa-hero
   ========================================================================= */

.psa-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--ink);
  min-height: 620px;
  min-height: max(560px, min(calc(100vh - 110px), 1000px));
  min-height: max(560px, min(calc(100svh - 110px), 1000px));
  padding-top: clamp(44px, 7vh, 92px);
  padding-bottom: clamp(32px, 4.8vh, 64px);
}

/* ---------- media -------------------------------------------------------- */

.psa-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.6s var(--ease-out);
}

.psa-hero--in .psa-hero__media { clip-path: inset(0 0 0 0); }

.psa-hero__frame {
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}

.psa-hero--in .psa-hero__frame { transform: scale(1); }
.psa-hero--settled .psa-hero__frame { will-change: auto; }

.psa-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  filter: sepia(.18) saturate(.86) brightness(.62) contrast(1.04);
  animation: psa-hero-drift 24s ease-in-out 1.9s infinite alternate;
  animation-play-state: paused;
}

.psa-hero--in .psa-hero__img { animation-play-state: running; }

@keyframes psa-hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

.psa-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7, 5, 2, .68) 0%,
      rgba(7, 5, 2, .18) 24%,
      rgba(7, 5, 2, .42) 56%,
      rgba(7, 5, 2, .88) 84%,
      var(--bg-deep) 100%),
    linear-gradient(96deg,
      rgba(7, 5, 2, .78) 0%,
      rgba(7, 5, 2, .38) 44%,
      rgba(7, 5, 2, 0) 80%);
}

.psa-hero__tex {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--hex);
  background-repeat: repeat;
  opacity: .4;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 74% 42%, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 66% at 74% 42%, #000 22%, transparent 78%);
}

/* ---------- type shell --------------------------------------------------- */

.psa-hero .psa-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* mono locator rail */
.psa-hero__rail {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  padding-bottom: clamp(22px, 3.2vw, 38px);
}

.psa-hero .psa-hero__loc { margin: 0; }

@media (min-width: 480px) {
  .psa-hero .psa-hero__loc { white-space: nowrap; }
}

.psa-hero__rail-line {
  flex: 1 1 auto;
  height: 1px;
  min-width: 0;
  background: linear-gradient(90deg, var(--rule-2), rgba(200, 134, 10, 0));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out) .48s;
}

.psa-hero--in .psa-hero__rail-line { transform: scaleX(1); }

.psa-hero__grid {
  display: grid;
  align-items: end;
  gap: clamp(30px, 5vw, 52px);
}

.psa-hero__col { min-width: 0; }

/* ---------- heading ------------------------------------------------------ */

.psa-hero .psa-hero__title {
  margin: 0;
  display: block;
}

.psa-hero .psa-hero__kicker {
  display: block;
  font-family: var(--mono);
  font-size: clamp(11px, .38vw + .58rem, 13px);
  font-style: normal;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.psa-hero .psa-hero__word {
  display: block;
  font-size: var(--t-display);
  line-height: .93;
  letter-spacing: -.012em;
}

.psa-hero .psa-hero__lead {
  margin-top: clamp(20px, 2.6vw, 32px);
  max-width: 54ch;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: var(--t-lead);
  line-height: 1.62;
}

.psa-hero__lead p { margin: 0; }
.psa-hero__lead p + p { margin-top: .72em; }
.psa-hero__lead a { color: var(--gold-hi); }

/* ---------- counted statistic -------------------------------------------- */

.psa-hero__stat { min-width: 0; }

.psa-hero__num {
  display: block;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.9rem, 1.4rem + 3.6vw, 5rem);
  line-height: .88;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold-hi);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .psa-hero__num {
    background: linear-gradient(180deg, var(--gold-lite) 0%, var(--gold-hi) 44%, var(--gold-lo) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.psa-hero__stat-rule {
  display: block;
  width: min(100%, 260px);
  height: 1px;
  margin: clamp(15px, 1.9vw, 22px) 0;
  background: linear-gradient(90deg, var(--gold), rgba(200, 134, 10, .04));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out) .76s;
}

.psa-hero--in .psa-hero__stat-rule { transform: scaleX(1); }

.psa-hero__stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 22ch;
}

/* ---------- scroll cue --------------------------------------------------- */

.psa-hero__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(26px, 3.6vw, 46px);
}

.psa-hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-faint);
  transition: color .35s var(--ease);
}

.psa-hero__cue-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.psa-hero__cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  overflow: hidden;
  background: var(--rule);
}

.psa-hero__cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(232, 168, 48, 0), var(--gold-hi));
  animation: psa-hero-cue 2s var(--ease) infinite;
}

@keyframes psa-hero-cue {
  0%   { transform: translateY(-14px); opacity: 0; }
  28%  { opacity: 1; }
  100% { transform: translateY(38px); opacity: 0; }
}

.psa-hero__cue:hover,
.psa-hero__cue:focus-visible { color: var(--gold-hi); }
.psa-hero__cue:hover .psa-hero__cue-line,
.psa-hero__cue:focus-visible .psa-hero__cue-line { background: var(--rule-2); }

.psa-hero__cue:focus-visible {
  outline: 1px solid var(--gold-hi);
  outline-offset: 6px;
}

.psa-hero__anchor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 110px;
}

.psa-hero__anchor:focus { outline: none; }

/* ---------- load entrance ------------------------------------------------ */

.psa-hero__rise {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: var(--psa-d, 0ms);
}

.psa-hero--in .psa-hero__rise {
  opacity: 1;
  transform: none;
}

/* Failsafe: if the entrance class never arrives (script blocked or an upstream
   error in the shared asset), the fold resolves to its final state at 4s. */
.psa-hero__media { animation: psa-hero-safe-clip 1ms linear 4s forwards; }
.psa-hero__frame { animation: psa-hero-safe-scale 1ms linear 4s forwards; }
.psa-hero__rise  { animation: psa-hero-safe-rise 1ms linear 4s forwards; }
.psa-hero__rail-line,
.psa-hero__stat-rule { animation: psa-hero-safe-draw 1ms linear 4s forwards; }

@keyframes psa-hero-safe-clip  { to { clip-path: inset(0 0 0 0); } }
@keyframes psa-hero-safe-scale { to { transform: scale(1); } }
@keyframes psa-hero-safe-rise  { to { opacity: 1; transform: none; } }
@keyframes psa-hero-safe-draw  { to { transform: scaleX(1); } }

/* ---------- breakpoints -------------------------------------------------- */

@media (min-width: 700px) {
  .psa-hero__cue-line { height: 46px; }
  @keyframes psa-hero-cue {
    0%   { transform: translateY(-16px); opacity: 0; }
    28%  { opacity: 1; }
    100% { transform: translateY(46px); opacity: 0; }
  }
}

@media (min-width: 1000px) {
  .psa-hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(42px, 6vw, 96px);
  }

  .psa-hero__stat {
    text-align: right;
    min-width: clamp(210px, 20vw, 300px);
  }

  .psa-hero__stat-rule {
    width: 100%;
    margin-left: auto;
    transform-origin: 100% 50%;
    background: linear-gradient(270deg, var(--gold), rgba(200, 134, 10, .04));
  }

  .psa-hero__stat-label {
    margin-left: auto;
    max-width: 26ch;
  }

  .psa-hero__foot { margin-top: clamp(34px, 3.4vw, 54px); }
}

@media (min-width: 1600px) {
  .psa-hero__lead { max-width: 58ch; }
}

/* ---------- motion preferences ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .psa-hero__media,
  .psa-hero--in .psa-hero__media {
    clip-path: none;
    transition: none;
    animation: none;
  }

  .psa-hero__frame,
  .psa-hero--in .psa-hero__frame {
    transform: none;
    transition: none;
    animation: none;
  }

  .psa-hero__img { animation: none; }

  .psa-hero__rise {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .psa-hero__rail-line,
  .psa-hero__stat-rule {
    transform: none;
    transition: none;
    animation: none;
  }

  .psa-hero__cue-line::after {
    animation: none;
    transform: translateY(12px);
    opacity: 1;
  }
}

/* ---------- no-script safety net ----------------------------------------- */

@media (scripting: none) {
  .psa-hero__media { clip-path: none; }
  .psa-hero__frame { transform: none; }
  .psa-hero__rise { opacity: 1; transform: none; }
  .psa-hero__rail-line,
  .psa-hero__stat-rule { transform: none; }
}

/* ===== alvara-psa-one-land ===== */
/* ============================================================
   SANCTUARY  ·  02  ONE LAND   (psa-ol)
   Dark split editorial: sticky heading column, block column with
   two paragraphs and an inset steward card, full-bleed panorama
   plate beneath with a clamped scroll scrub.
   ============================================================ */
.psa-ol {
  position: relative;
  padding: var(--sec) 0 clamp(34px, 4vw, 58px);
  background:
    radial-gradient(118% 76% at 86% 2%, rgba(200,134,10,.10), rgba(200,134,10,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg) 100%);
  color: var(--ink);
}
.psa-ol::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,134,10,0) 0%, var(--rule-2) 24%, var(--rule-2) 76%, rgba(200,134,10,0) 100%);
  pointer-events: none;
}
.psa-ol-wrap { padding-bottom: clamp(46px, 5.6vw, 88px); }

/* ---------- Split ---------- */
.psa-ol-split {
  display: grid;
  gap: clamp(30px, 4.4vw, 54px);
  align-items: start;
}
@media (min-width: 1080px) {
  .psa-ol-split {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(52px, 6vw, 112px);
  }
  .psa-ol-headcol {
    position: sticky;
    top: clamp(88px, 13vh, 148px);
    align-self: start;
  }
}
.psa-ol-head { margin-bottom: 0; }
/* the eyebrow is a <p>, so it has to out-rank .sec-head p */
.psa-ol-head .psa-ol-eyebrow {
  font-size: 11px;
  font-weight: 400;
  color: var(--gold-hi);
  margin: 0;
  max-width: none;
  line-height: 1.4;
}
.psa-ol-h2 em { display: block; }
.psa-ol-mark {
  display: block;
  position: relative;
  margin-top: clamp(22px, 2.6vw, 34px);
  width: min(160px, 46%);
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(200,134,10,.04) 100%);
}
.psa-ol-mark::after {
  content: '';
  position: absolute;
  left: 0; top: -2.5px;
  width: 6px; height: 6px;
  background: var(--gold-hi);
  transform: rotate(45deg);
  opacity: .9;
}

/* ---------- Prose column ---------- */
.psa-ol-para {
  color: var(--ink-mute);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.76;
  text-wrap: pretty;
  max-width: 62ch;
}
.psa-ol-para p { margin: 0; }
.psa-ol-para p + p { margin-top: .9em; }
.psa-ol-para + .psa-ol-para { margin-top: clamp(18px, 2vw, 26px); }
.psa-ol-bodycol > .psa-ol-para:first-child { color: var(--ink); }
.psa-ol-para em { font-style: italic; color: var(--gold-soft); }
.psa-ol-para strong { font-weight: 500; color: var(--ink); }

/* ---------- Steward card ---------- */
.psa-ol-steward {
  position: relative;
  overflow: hidden;
  margin-top: clamp(30px, 3.6vw, 48px);
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 32px) clamp(24px, 2.8vw, 34px) clamp(24px, 3vw, 40px);
  background: linear-gradient(150deg, var(--bg-3) 0%, var(--bg-card) 58%, var(--bg-deep) 100%);
  border: 1px solid var(--rule);
  border-left: 0;
  border-radius: 3px var(--r-lg) var(--r-lg) 3px;
  box-shadow: 0 28px 66px -44px rgba(0,0,0,.92);
  max-width: 62ch;
}
.psa-ol-steward::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hex);
  opacity: .8;
  pointer-events: none;
}
/* left hairline, draws top to bottom on entry */
.psa-ol-steward::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 46%, var(--gold-lo) 100%);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.05s var(--ease-out) .22s;
  pointer-events: none;
}
.psa-ol-steward.in::after { transform: scaleY(1); }
.psa-ol-steward.reveal { transform: translate3d(32px, 14px, 0); }
.psa-ol-steward.reveal.in { transform: translate3d(0, 0, 0); }

.psa-ol-steward-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 20px);
  flex-wrap: wrap;
}
.psa-ol-portrait {
  display: block;
  flex: 0 0 auto;
  width: clamp(58px, 6.2vw, 76px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--rule-2);
  box-shadow: 0 0 0 5px rgba(200,134,10,.055), 0 12px 26px -14px rgba(0,0,0,.9);
  background: var(--bg-deep);
}
.psa-ol-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.14) saturate(.9) contrast(1.03);
}
.psa-ol-ident { display: block; min-width: 0; }
.psa-ol-name {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.psa-ol-role {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--gold-soft);
}
.psa-ol-steward-body {
  position: relative;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.74;
  text-wrap: pretty;
}
.psa-ol-steward-body p { margin: 0; }
.psa-ol-steward-body p + p { margin-top: .85em; }

/* ---------- Panorama plate ---------- */
.psa-ol-plate {
  position: relative;
  margin: 0;
  width: 100%;
}
.psa-ol-plate.reveal { transform: translate3d(0, 0, 0); }
.psa-ol-plate-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 78vh;
  overflow: hidden;
  background: var(--bg-deep);
  clip-path: inset(0 0 0 0);
}
@media (min-width: 720px)  { .psa-ol-plate-frame { aspect-ratio: 16 / 7; } }
@media (min-width: 1280px) { .psa-ol-plate-frame { aspect-ratio: 21 / 8; } }
.psa-ol-plate.reveal .psa-ol-plate-frame {
  clip-path: inset(19% 0 0 0);
  transition: clip-path 1.25s var(--ease-out) .05s;
}
.psa-ol-plate.reveal.in .psa-ol-plate-frame { clip-path: inset(0 0 0 0); }
.psa-ol-plate-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(11,9,6,.62) 0%, rgba(11,9,6,0) 24%, rgba(11,9,6,0) 58%, rgba(11,9,6,.86) 100%),
    radial-gradient(120% 78% at 50% 50%, rgba(11,9,6,0) 46%, rgba(11,9,6,.42) 100%);
  pointer-events: none;
}
.psa-ol-plate-img {
  position: absolute;
  left: 0; top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  filter: sepia(.16) saturate(.9) contrast(1.05) brightness(.95);
  transform: translate3d(0, calc((var(--psa-ol-p, .5) - .5) * -8%), 0);
  will-change: transform;
}

/* ---------- Plate caption rail ---------- */
.psa-ol-plate-rail {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(13px, 1.4vw, 18px) var(--gut) 0;
  max-width: 1280px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (min-width: 1800px) { .psa-ol-plate-rail { max-width: 1440px; } }
.psa-ol-cap {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.psa-ol-cap .ic { color: var(--gold); }
.psa-ol-cap-line {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: linear-gradient(90deg, var(--rule) 0%, rgba(200,134,10,.04) 100%);
}
@media (max-width: 560px) {
  .psa-ol-plate-rail {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 7px;
    font-size: 9.5px;
    letter-spacing: .18em;
  }
  .psa-ol-cap { white-space: normal; }
  .psa-ol-cap-line { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .psa-ol-plate.reveal .psa-ol-plate-frame,
  .psa-ol-plate.reveal.in .psa-ol-plate-frame {
    clip-path: inset(0 0 0 0);
    transition: none;
  }
  .psa-ol-plate-img {
    transform: none !important;
    top: 0;
    height: 100%;
    will-change: auto;
  }
  .psa-ol-steward.reveal,
  .psa-ol-steward.reveal.in { transform: none !important; }
  .psa-ol-steward::after { transform: scaleY(1); transition: none; }
}


/* ===== alvara-psa-bridge ===== */
/* ==========================================================================
   Sanctuary, section 3: alvara-psa-bridge
   Quote monolith on a forest ground. Three manifesto lines stitched by drawn
   gold threads, resolving on a single gold line.
   ========================================================================== */

.psa-bridge{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg-deep);
  color:var(--ink);
  padding-block:calc(var(--sec) + 10px) calc(var(--sec) + 34px);
}

/* ---- ground -------------------------------------------------------------- */

.psa-bridge__ground{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.psa-bridge__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 46%;
  opacity:.62;
  filter:saturate(.86) contrast(1.04);
  transform:scale(calc(1.06 - (.06 * var(--psa-p, 0))));
  transform-origin:50% 50%;
  will-change:transform;
}

.psa-bridge__scrim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 86% at 50% 42%,
      rgb(7 5 2 / calc(var(--psa-scrim, .78) - .18)) 0%,
      rgb(7 5 2 / var(--psa-scrim, .78)) 48%,
      rgb(7 5 2 / calc(var(--psa-scrim, .78) + .16)) 100%),
    linear-gradient(180deg,
      var(--bg) 0%,
      rgb(11 9 6 / 0) 20%,
      rgb(11 9 6 / 0) 76%,
      var(--bg) 100%);
}

.psa-bridge__texture{
  position:absolute;
  inset:0;
  background-image:var(--hex);
  background-size:56px auto;
  opacity:.13;
  mix-blend-mode:soft-light;
}

/* ---- column -------------------------------------------------------------- */

.psa-bridge__wrap{
  position:relative;
  z-index:1;
}

.psa-bridge__col{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}

.psa-bridge__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.62em;
  margin:0 0 clamp(36px,5.2vw,64px);
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
}

.psa-bridge__eyebrow .ic{
  width:11px;
  height:11px;
  flex:none;
}

/* ---- manifesto lines ----------------------------------------------------- */

.psa-bridge__stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.psa-line{
  width:100%;
}

.psa-line__body{
  margin-inline:auto;
  max-width:var(--psa-measure, 22ch);
  color:var(--ink);
  text-wrap:balance;
}

.psa-line__body p{
  margin:0;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

.psa-line__body p + p{
  margin-top:.42em;
}

.psa-line__body em{
  font-style:italic;
  color:var(--gold-hi);
}

.psa-line__body a{
  color:var(--gold-hi);
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:1px;
}

.psa-line__body a:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:3px;
  border-radius:2px;
}

.psa-line--display .psa-line__body{
  --psa-measure:21ch;
  font-size:clamp(1.55rem, 1.02rem + 2.5vw, 3.05rem);
  line-height:1.14;
  letter-spacing:-.012em;
}

.psa-line--quiet .psa-line__body{
  --psa-measure:36ch;
  font-size:clamp(1.2rem, 1.02rem + .82vw, 1.66rem);
  line-height:1.36;
  letter-spacing:-.004em;
}

/* ---- threads ------------------------------------------------------------- */

.psa-thread{
  position:relative;
  width:24px;
  height:clamp(54px, 6.6vw, 104px);
  margin:clamp(16px,2.2vw,26px) 0;
  flex:none;
}

.psa-thread__svg{
  display:block;
  width:24px;
  height:100%;
  overflow:visible;
}

.psa-thread__stop-a{stop-color:var(--gold-lo); stop-opacity:0;}
.psa-thread__stop-b{stop-color:var(--gold); stop-opacity:.7;}
.psa-thread__stop-c{stop-color:var(--gold-hi); stop-opacity:1;}

.psa-thread__path{
  filter:drop-shadow(0 0 7px rgb(200 134 10 / .3));
}

.psa-thread__node{
  position:absolute;
  left:50%;
  bottom:-3px;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:1px;
  background:var(--gold-hi);
  box-shadow:0 0 11px rgb(232 168 48 / .5);
  transform:rotate(45deg);
}

/* ---- seal and closer ----------------------------------------------------- */

.psa-bridge__seal{
  display:block;
  margin:clamp(30px,4.4vw,52px) 0 clamp(18px,2.6vw,28px);
  color:var(--gold);
  opacity:.55;
  line-height:0;
}

.psa-bridge__seal .ic{
  width:13px;
  height:13px;
}

.psa-bridge__closer{
  margin:0;
  max-width:18ch;
  font-size:var(--t-h2);
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--gold-lite);
}

.psa-bridge__closer em{
  font-style:italic;
  color:var(--gold-hi);
}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .psa-bridge__closer em{
    background-image:linear-gradient(178deg, var(--gold-lite) 0%, var(--gold-hi) 44%, var(--gold) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

/* ---- motion, armed by script -------------------------------------------- */

.psa-bridge.psa-bridge-armed .psa-line{
  opacity:0;
  transform:translate3d(0,14px,0);
  clip-path:inset(-8% 100% -8% 0);
  will-change:clip-path,transform,opacity;
  transition:
    opacity .52s var(--ease-out) var(--psa-d, 0ms),
    transform .64s var(--ease-out) var(--psa-d, 0ms),
    clip-path .64s var(--ease-out) var(--psa-d, 0ms);
}

.psa-bridge.psa-bridge-armed.psa-in .psa-line{
  opacity:1;
  transform:translate3d(0,0,0);
  clip-path:inset(-8% -8% -8% 0);
}

.psa-bridge.psa-bridge-armed .psa-thread__path{
  stroke-dasharray:var(--psa-len, 200);
  stroke-dashoffset:var(--psa-len, 200);
  transition:stroke-dashoffset .62s var(--ease) var(--psa-d, 0ms);
}

.psa-bridge.psa-bridge-armed.psa-in .psa-thread__path{
  stroke-dashoffset:0;
}

.psa-bridge.psa-bridge-armed .psa-thread__node{
  opacity:0;
  transform:rotate(45deg) scale(.3);
  transition:
    opacity .38s var(--ease-out) calc(var(--psa-d, 0ms) + 500ms),
    transform .48s var(--ease-out) calc(var(--psa-d, 0ms) + 500ms);
}

.psa-bridge.psa-bridge-armed.psa-in .psa-thread__node{
  opacity:1;
  transform:rotate(45deg) scale(1);
}

.psa-bridge.psa-bridge-armed .psa-bridge__seal{
  opacity:0;
  transform:translate3d(0,8px,0) scale(.7);
  transition:
    opacity .5s var(--ease-out) var(--psa-d, 0ms),
    transform .6s var(--ease-out) var(--psa-d, 0ms);
}

.psa-bridge.psa-bridge-armed.psa-in .psa-bridge__seal{
  opacity:.55;
  transform:translate3d(0,0,0) scale(1);
}

.psa-bridge.psa-bridge-armed .psa-bridge__closer{
  opacity:0;
  transform:translate3d(0,14px,0);
  letter-spacing:.06em;
  transition:
    opacity .7s var(--ease-out) var(--psa-d, 0ms),
    transform .7s var(--ease-out) var(--psa-d, 0ms),
    letter-spacing .7s var(--ease-out) var(--psa-d, 0ms);
}

.psa-bridge.psa-bridge-armed.psa-in .psa-bridge__closer{
  opacity:1;
  transform:translate3d(0,0,0);
  letter-spacing:-.012em;
}

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width:640px){
  .psa-bridge__photo{opacity:.55;}
  .psa-line--display .psa-line__body{--psa-measure:19ch;}
  .psa-line--quiet .psa-line__body{--psa-measure:30ch;}
  .psa-bridge__closer{max-width:14ch;}
}

@media (min-width:1600px){
  .psa-bridge__col{max-width:980px;}
}

/* ---- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  .psa-bridge__photo{
    transform:none;
  }

  .psa-bridge.psa-bridge-armed .psa-line,
  .psa-bridge.psa-bridge-armed.psa-in .psa-line{
    transform:none;
    clip-path:none;
    transition:opacity .4s linear var(--psa-d, 0ms);
  }

  .psa-bridge.psa-bridge-armed .psa-thread__path,
  .psa-bridge.psa-bridge-armed.psa-in .psa-thread__path{
    stroke-dasharray:none;
    stroke-dashoffset:0;
    transition:none;
  }

  .psa-bridge.psa-bridge-armed .psa-thread__node,
  .psa-bridge.psa-bridge-armed.psa-in .psa-thread__node{
    opacity:1;
    transform:rotate(45deg) scale(1);
    transition:none;
  }

  .psa-bridge.psa-bridge-armed .psa-bridge__seal,
  .psa-bridge.psa-bridge-armed.psa-in .psa-bridge__seal{
    transform:none;
    transition:opacity .4s linear var(--psa-d, 0ms);
  }

  .psa-bridge.psa-bridge-armed .psa-bridge__closer,
  .psa-bridge.psa-bridge-armed.psa-in .psa-bridge__closer{
    transform:none;
    letter-spacing:-.012em;
    transition:opacity .4s linear var(--psa-d, 0ms);
  }
}

/* ===== alvara-psa-council ===== */
/* ============================================================
   ALVARA Sanctuary  ·  Land Stewardship Council
   Cream ledger panel. All classes prefixed psa-cn-
   Relies on the global system: .cream .wrap .eyebrow .h-serif
   .ic .ic-hex .reveal .stagger
   ============================================================ */

/* The schema wrapper is a <section>, so the global section rule would pad it
   a second time and knock the paper sheet off its neighbours. Zero it and let
   the inner .cream sheet own the rhythm. */
.section-alvara-psa-council {
  padding: 0;
  margin: 0;
}

.psa-cn-sec {
  isolation: isolate;
}

/* ---------- Oak band plate, flush across the top of the sheet ---------- */

.psa-cn-plate {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--sec) * -1);
  margin-bottom: clamp(42px, 5.6vw, 78px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  aspect-ratio: 2.4 / 1;
  background: var(--bg-3);
}

/* The plate settles as a pure fade so it never uncovers the sheet corner.
   translateZ(0) also keeps Safari clipping the scrubbed image to the
   rounded top corners. */
.psa-cn-plate.reveal,
.psa-cn-plate.reveal.in { transform: translateZ(0); }

@media (min-width: 700px) {
  .psa-cn-plate { aspect-ratio: 3.4 / 1; }
}

@media (min-width: 1080px) {
  .psa-cn-plate { aspect-ratio: 5 / 1; }
}

.psa-cn-plate-img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center 58%;
  transform: translate3d(0, calc((var(--psa-p, .5) - .5) * -6%), 0);
  will-change: transform;
}

.psa-cn-plate-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(11, 9, 6, .34) 0%,
      rgba(11, 9, 6, .06) 30%,
      rgba(11, 9, 6, 0) 52%,
      rgba(253, 245, 228, .34) 84%,
      rgba(253, 245, 228, .92) 100%),
    linear-gradient(90deg,
      rgba(11, 9, 6, .22) 0%,
      rgba(11, 9, 6, 0) 22%,
      rgba(11, 9, 6, 0) 78%,
      rgba(11, 9, 6, .22) 100%);
}

.psa-cn-plate::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(154, 103, 8, 0) 0%,
    rgba(154, 103, 8, .28) 14%,
    rgba(154, 103, 8, .72) 50%,
    rgba(154, 103, 8, .28) 86%,
    rgba(154, 103, 8, 0) 100%);
}

/* ---------- Prose column beside the diagram ---------- */

.psa-cn-grid {
  display: grid;
  gap: clamp(40px, 5.2vw, 66px);
  align-items: start;
}

@media (min-width: 1000px) {
  .psa-cn-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
    gap: clamp(52px, 5.6vw, 96px);
  }
}

.psa-cn-prose > * + * { margin-top: 22px; }

.psa-cn-eyebrow { margin: 0; }

.psa-cn-h {
  font-size: var(--t-h2);
  color: var(--p-ink);
  margin: 20px 0 0;
  max-width: 15ch;
}

.psa-cn-h::after {
  content: '';
  display: block;
  width: 62px;
  height: 1px;
  margin-top: clamp(22px, 2.6vw, 30px);
  background: linear-gradient(90deg, var(--p-gold), rgba(154, 103, 8, .08));
}

.psa-cn-p {
  max-width: 58ch;
}

.psa-cn-prose .psa-cn-p p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.74;
  color: var(--p-body);
  font-weight: 300;
  text-wrap: pretty;
}

.psa-cn-prose .psa-cn-p--lead p {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--p-ink);
}

.psa-cn-prose .psa-cn-p em { color: var(--p-gold); font-style: italic; }

/* ---------- Seven cell honeycomb, an abstract mark for the seats ---------- */

.psa-cn-comb { min-width: 0; }

.psa-cn-comb-card {
  position: relative;
  border: 1px solid var(--p-rule);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--paper-2) 0%, rgba(253, 245, 228, .28) 100%);
  padding: clamp(24px, 3vw, 34px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 20px 46px -34px rgba(32, 24, 9, .55);
}

.psa-cn-comb-card::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(154, 103, 8, .13);
  border-radius: calc(var(--r-lg) - 6px);
  pointer-events: none;
}

.psa-cn-comb-card .psa-cn-comb-label {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--p-gold);
  display: flex;
  align-items: center;
  gap: 12px;
}

.psa-cn-comb-card .psa-cn-comb-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--p-rule);
}

.psa-cn-comb-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 336px;
  margin: clamp(26px, 3.4vw, 38px) auto clamp(22px, 2.8vw, 30px);
}

.psa-cn-comb-field {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 288.68;
}

.psa-cn-cell {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 33.3333%;
  height: 40%;
  display: block;
}

.psa-cn-cell svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.psa-cn-cell-stroke {
  fill: none;
  stroke: var(--p-gold);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-opacity: .62;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .82s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.psa-cn-cell-fill {
  fill: var(--gold);
  fill-opacity: 0;
  transition: fill-opacity .62s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 360ms);
}

.psa-cn-comb.psa-cn-live .psa-cn-cell-stroke { stroke-dashoffset: 0; }
.psa-cn-comb.psa-cn-live .psa-cn-cell-fill { fill-opacity: .14; }

.psa-cn-comb-card .psa-cn-comb-note {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: clamp(18px, 2.2vw, 22px);
  border-top: 1px solid var(--p-rule);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.62;
  letter-spacing: .01em;
  color: var(--p-mute);
  text-align: center;
}

/* ---------- Letterpress pull quote ---------- */

.psa-cn-quote {
  position: relative;
  max-width: 60ch;
  margin: clamp(58px, 7.2vw, 100px) auto 0;
  padding: clamp(36px, 4.4vw, 58px) 0 0;
  border-top: 1px solid var(--p-rule);
  text-align: center;
}

.psa-cn-qmark {
  display: block;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(58px, 7vw, 100px);
  line-height: .52;
  color: var(--p-gold);
  opacity: 0;
  transform: scale(.6) rotate(-7deg);
  transform-origin: 50% 76%;
  transition:
    transform .95s var(--ease-out) .16s,
    opacity .6s var(--ease-out) .16s;
}

.psa-cn-quote.in .psa-cn-qmark {
  opacity: .82;
  transform: scale(1) rotate(0deg);
}

.psa-cn-quote-body {
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: 0;
  border: 0;
}

.psa-cn-quote .psa-cn-quote-body p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 110;
  font-size: clamp(1.22rem, 1rem + 1.05vw, 1.9rem);
  line-height: 1.44;
  letter-spacing: -.012em;
  color: var(--p-ink);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .9),
    0 -1px 0 rgba(32, 24, 9, .055);
}

.psa-cn-quote-src {
  margin-top: clamp(22px, 2.8vw, 30px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--p-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Three numbered principle cards ---------- */

.psa-cn-principles {
  list-style: none;
  margin: clamp(54px, 6.6vw, 92px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
}

@media (min-width: 760px) {
  .psa-cn-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.psa-cn-principle {
  min-width: 0;
  display: flex;
}

.psa-cn-principle-in {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(28px, 3.1vw, 36px) clamp(22px, 2.4vw, 30px) clamp(30px, 3.3vw, 38px);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 253, 246, .94), rgba(253, 245, 228, .16));
  overflow: hidden;
  transition:
    box-shadow .45s var(--ease),
    border-color .45s var(--ease),
    background-color .45s var(--ease);
}

.psa-cn-principle-in::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--p-gold), rgba(154, 103, 8, .1));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--ease-out) .2s;
}

.psa-cn-principle.in .psa-cn-principle-in::before { transform: scaleX(1); }

.psa-cn-principle-in:hover {
  border-color: rgba(154, 103, 8, .34);
  box-shadow: 0 24px 46px -34px rgba(32, 24, 9, .5);
}

.psa-cn-num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--p-gold);
  margin-bottom: clamp(16px, 2vw, 20px);
}

.psa-cn-principle-h {
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: -.014em;
  color: var(--p-ink);
  margin: 0 0 14px;
  max-width: 18ch;
}

.psa-cn-principle .psa-cn-principle-body p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 300;
  color: var(--p-body);
  text-wrap: pretty;
}

/* ---------- Small screens ---------- */

@media (max-width: 999px) {
  .psa-cn-comb-stage { max-width: 300px; }
  .psa-cn-h { max-width: 18ch; }
}

@media (max-width: 480px) {
  .psa-cn-comb-stage { max-width: 236px; }
  .psa-cn-quote { text-align: left; }
  .psa-cn-quote .psa-cn-quote-body p { text-wrap: pretty; }
  .psa-cn-qmark { text-align: left; transform-origin: 0 76%; }
}

/* ---------- Motion and no script fallbacks ---------- */

@media (scripting: none) {
  .psa-cn-cell-stroke { stroke-dashoffset: 0; transition: none; }
  .psa-cn-cell-fill { fill-opacity: .14; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .psa-cn-cell-stroke {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .psa-cn-cell-fill {
    fill-opacity: .14 !important;
    transition: none !important;
  }
  .psa-cn-plate-img {
    transform: none !important;
    will-change: auto;
  }
  .psa-cn-qmark {
    opacity: .82 !important;
    transform: none !important;
    transition: none !important;
  }
  .psa-cn-principle-in::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .psa-cn-principle-in { transition: none !important; }
}


/* ===== alvara-psa-land-ladder ===== */
/* ==========================================================================
   Sanctuary Land Ladder  ::  alvara-psa-land-ladder
   Dark ground. Offset image ladder hung on a growing gold spine.
   ========================================================================== */

.psa-ladder {
  --psa-node-col: 44px;
  --psa-axis: calc(var(--psa-node-col) / 2);
  --psa-ar: 4 / 3;
  --psa-t-chapter: clamp(1.8rem, 1.41rem + 1.65vw, 2.9rem);
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  padding: calc(var(--sec) * 1.04) 0 var(--sec);
}

.psa-ladder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hex);
  opacity: .05;
  pointer-events: none;
}

.psa-ladder::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(1180px, 130vw);
  height: min(760px, 74vh);
  transform: translateX(-50%);
  background:
    radial-gradient(58% 62% at 50% 0%, rgba(200, 134, 10, .10), rgba(200, 134, 10, 0) 72%);
  pointer-events: none;
}

.psa-landladder-wrap {
  position: relative;
  z-index: 1;
}

/* ---------- optional section head ---------------------------------------- */

.psa-head {
  margin-bottom: clamp(44px, 5.4vw, 82px);
}

.psa-head-h {
  font-size: var(--t-h2);
  margin: .34em 0 0;
  letter-spacing: -.012em;
}

.psa-head-intro {
  margin-top: clamp(14px, 1.8vw, 22px);
  color: var(--ink-mute);
  font-size: var(--t-lead);
  line-height: 1.66;
  max-width: 62ch;
}

.psa-head-intro p { margin: 0 0 .8em; }
.psa-head-intro p:last-child { margin-bottom: 0; }

/* ---------- the rail and its spine ---------------------------------------- */

.psa-rail {
  position: relative;
}

.psa-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--psa-axis);
  width: 1px;
  margin-left: -.5px;
  z-index: 0;
  pointer-events: none;
}

.psa-spine-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(200, 134, 10, 0) 0%,
    var(--rule) 5%,
    var(--rule) 95%,
    rgba(200, 134, 10, 0) 100%
  );
}

.psa-spine-fill {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  background: linear-gradient(
    180deg,
    var(--gold-lo) 0%,
    var(--gold) 26%,
    var(--gold-hi) 62%,
    var(--gold) 100%
  );
  box-shadow: 0 0 12px rgba(232, 168, 48, .30);
}

.psa-spine-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 16px 4px rgba(232, 168, 48, .42);
  opacity: 0;
}

/* JS on: the spine grows with scroll progress. JS off: it renders complete. */
.psa-ladder.is-js .psa-spine-fill { transform: scaleY(var(--psa-p, 0)); }
.psa-ladder.is-js .psa-spine-head {
  top: calc(var(--psa-p, 0) * 100%);
  opacity: 1;
}

/* ---------- rows ---------------------------------------------------------- */

.psa-rows {
  display: grid;
  gap: clamp(64px, 9vw, 148px);
}

.psa-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--psa-node-col) minmax(0, 1fr);
  column-gap: clamp(12px, 3vw, 20px);
  row-gap: clamp(20px, 3.6vw, 30px);
  align-items: start;
}

/* ---------- spine node and chapter index ---------------------------------- */

.psa-mark {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: clamp(4px, 1.2vw, 12px);
}

.psa-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
}

.psa-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow .7s var(--ease-out), background .7s var(--ease-out);
}

.psa-node svg {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  overflow: visible;
}

.psa-node polygon {
  fill: var(--gold-hi);
  stroke: var(--gold-hi);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill .8s var(--ease-out), stroke .8s var(--ease-out);
}

.psa-ladder.is-js .psa-node polygon {
  fill: transparent;
  stroke: var(--ink-faint);
}

.psa-ladder.is-js .psa-row.is-lit .psa-node polygon {
  fill: var(--gold-hi);
  stroke: var(--gold-hi);
}

.psa-ladder.is-js .psa-row.is-lit .psa-node::before {
  box-shadow: 0 0 0 1px var(--rule-2), 0 0 20px 3px rgba(232, 168, 48, .20);
}

.psa-num {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .22em;
  color: var(--ink-faint);
  transition: color .8s var(--ease-out);
}

.psa-ladder.is-js .psa-row.is-lit .psa-num { color: var(--gold-soft); }

/* ---------- figure -------------------------------------------------------- */

.psa-fig {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
}

.psa-fig-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--psa-ar);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: 0 34px 74px -44px rgba(0, 0, 0, .95);
}

.psa-fig-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rule);
  background: linear-gradient(180deg, rgba(11, 9, 6, 0) 52%, rgba(7, 5, 2, .46) 100%);
  pointer-events: none;
}

.psa-fig-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: -7%;
  bottom: -7%;
  display: block;
  transform: translate3d(0, var(--psa-img-y, 0px), 0);
  will-change: transform;
}

.psa-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 1.2s var(--ease-out);
}

.psa-ladder.is-js .psa-fig img { filter: saturate(.92); }
.psa-ladder.is-js .psa-row.is-lit .psa-fig img { filter: saturate(1); }

/* ---------- copy ---------------------------------------------------------- */

.psa-copy {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.psa-copy-inner {
  max-width: 33rem;
  transform: translate3d(0, var(--psa-txt-y, 0px), 0);
  will-change: transform;
}

.psa-landladder-rule {
  display: block;
  width: min(120px, 34%);
  height: 1px;
  margin-bottom: clamp(16px, 2vw, 24px);
  background: linear-gradient(90deg, var(--rule-2), rgba(200, 134, 10, 0));
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out);
}

.psa-ladder.is-js .psa-landladder-rule { transform: scaleX(0); }
.psa-ladder.is-js .psa-row.is-lit .psa-landladder-rule { transform: scaleX(1); }

.psa-landladder-eyebrow {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
}

.psa-landladder-h {
  font-size: var(--psa-t-chapter);
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  letter-spacing: -.014em;
  text-wrap: balance;
}

.psa-landladder-h em { display: block; }

.psa-landladder-body {
  color: var(--ink-mute);
  font-size: var(--t-body);
  line-height: 1.74;
}

.psa-landladder-body p { margin: 0 0 1.05em; }
.psa-landladder-body p:last-child { margin-bottom: 0; }

/* ---------- capability chips ---------------------------------------------- */

.psa-chips {
  list-style: none;
  margin: clamp(26px, 3.2vw, 40px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.psa-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 15px 9px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200, 134, 10, .07), rgba(200, 134, 10, .02));
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: .055em;
  color: var(--gold-lite);
}

.psa-chip::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);
}

.psa-ladder.is-js .psa-chip {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity .55s var(--ease-out) calc(var(--ci, 0) * 60ms),
    transform .55s var(--ease-out) calc(var(--ci, 0) * 60ms);
}

.psa-ladder.is-js .psa-row.is-chips .psa-chip {
  opacity: 1;
  transform: none;
}

/* ---------- below the ladder breakpoint the plate bleeds off the right ----- */

@media (max-width: 1023px) {
  .psa-fig-frame {
    margin-right: calc(var(--gut) * -1);
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
}

/* ---------- small screens ------------------------------------------------- */

@media (max-width: 479px) {
  .psa-ladder { --psa-node-col: 34px; }
  .psa-node { width: 28px; height: 28px; }
  .psa-node svg { width: 13px; height: 13px; }
  .psa-chip { font-size: 11px; padding: 8px 13px 8px 11px; }
}

/* ---------- desktop ladder ------------------------------------------------ */

@media (min-width: 1024px) {
  .psa-ladder {
    --psa-axis: 50%;
    --psa-ar: 5 / 4;
  }

  .psa-row {
    grid-template-columns: minmax(0, 1fr) clamp(44px, 4.4vw, 78px) minmax(0, 1fr);
    column-gap: clamp(18px, 2.6vw, 36px);
    align-items: center;
  }

  .psa-mark {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    margin-top: 0;
  }

  .psa-fig { grid-column: 1; grid-row: 1; }
  .psa-copy { grid-column: 3; grid-row: 1; }

  .psa-row--b .psa-fig { grid-column: 3; }
  .psa-row--b .psa-copy { grid-column: 1; }
}

@media (min-width: 1440px) {
  .psa-rows { gap: clamp(120px, 8vw, 172px); }
}

/* ---------- reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .psa-ladder.is-js .psa-spine-fill { transform: none; }
  .psa-ladder.is-js .psa-spine-head { display: none; }

  .psa-fig-inner,
  .psa-copy-inner {
    transform: none !important;
    will-change: auto;
  }

  .psa-ladder.is-js .psa-landladder-rule { transform: none; }

  .psa-ladder.is-js .psa-chip {
    transform: none;
    transition: opacity .4s linear;
    transition-delay: 0s;
  }

  .psa-ladder.is-js .psa-row.is-chips .psa-chip { transform: none; }

  .psa-fig img,
  .psa-node polygon,
  .psa-node::before,
  .psa-num { transition-duration: .01ms; }
}

/* ===== alvara-psa-regenerative ===== */
/* ==========================================================================
   ALVARA Sanctuary  ·  alvara-psa-regenerative
   Full bleed scrub frame, drawn gold horizon, paper quote card on photograph.
   Every selector prefixed psa-
   ========================================================================== */

.psa-regen{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(620px, 94vh, 1040px);
  padding-block:clamp(96px, 11vw, 180px) clamp(112px, 13vw, 210px);
  background:var(--bg-deep);
  color:var(--ink);
}

/* ---------- photographic ground ---------- */

.psa-regenerative-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.psa-regenerative-bg-img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 56%;
  transform:scale(var(--psa-scale, 1));
  transform-origin:50% 50%;
}

.psa-regen.psa-regenerative-armed .psa-regenerative-bg-img{
  will-change:transform;
}

/* directional --bg-deep scrim: heaviest at the top left under the type column,
   opening out to the lower right where the paper card sits */
.psa-regenerative-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(78% 62% at 74% 26%, rgba(232,168,48,.15) 0%, rgba(232,168,48,0) 68%),
    linear-gradient(104deg, rgba(7,5,2,.95) 0%, rgba(7,5,2,.88) 24%, rgba(7,5,2,.62) 48%, rgba(7,5,2,.26) 74%, rgba(7,5,2,.12) 100%),
    radial-gradient(120% 92% at 14% 20%, rgba(7,5,2,.60) 0%, rgba(7,5,2,0) 64%),
    linear-gradient(to bottom, rgba(11,9,6,.94) 0%, rgba(11,9,6,0) 17%, rgba(7,5,2,0) 74%, rgba(7,5,2,.90) 100%);
}

.psa-tex{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:var(--hex);
  opacity:.09;
  mix-blend-mode:soft-light;
}

/* ---------- layout ---------- */

.psa-regenerative-wrap{
  position:relative;
  z-index:3;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:clamp(46px, 7vw, 78px);
}

.psa-regenerative-col{
  max-width:620px;
}

@media (min-width:1000px){
  .psa-regenerative-wrap{
    grid-template-columns:minmax(0,620px) minmax(0,1fr);
    column-gap:clamp(40px, 5vw, 96px);
    align-items:start;
    min-height:min(64vh, 620px);
  }
  .psa-regenerative-col{
    grid-column:1;
    grid-row:1;
    align-self:start;
  }
  .psa-card{
    grid-column:2;
    grid-row:1;
    align-self:end;
    justify-self:end;
    margin-top:clamp(120px, 15vw, 240px);
  }
}

/* ---------- type ---------- */

.psa-regenerative-eyebrow{
  margin:0 0 clamp(18px, 2vw, 26px);
}

.psa-regenerative-h{
  position:relative;
  margin:0 0 clamp(24px, 2.6vw, 36px);
  font-size:var(--t-h2);
  text-wrap:balance;
}

.psa-regenerative-h em{
  display:block;
}

/* the horizon: a 1px gold rule that runs past both edges of the frame and
   passes behind the heading. Clipped by the section, never overflows the page. */
.psa-horizon{
  position:absolute;
  z-index:-1;
  top:50%;
  left:calc(-1 * var(--gut));
  width:100vw;
  height:1px;
  transform-origin:0 50%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(200,134,10,0) 0%,
    var(--gold) 4%,
    var(--gold-hi) 20%,
    var(--gold) 46%,
    rgba(200,134,10,.34) 82%,
    rgba(200,134,10,0) 100%);
}

/* Above the container max width the rule would otherwise start at the grid edge.
   These two steps push its origin back out to the viewport edge so the horizon
   always bleeds, matching the global .wrap max widths (1280px, 1440px above 1800px). */
@media (min-width:1281px) and (max-width:1799px){
  .psa-horizon{
    left:calc((-1 * var(--gut)) - ((100vw - 1280px) / 2));
  }
}

@media (min-width:1800px){
  .psa-horizon{
    left:calc((-1 * var(--gut)) - ((100vw - 1440px) / 2));
  }
}

.psa-regen.psa-regenerative-armed .psa-horizon{
  transform:scaleX(0);
  opacity:0;
}

.psa-regen.psa-regenerative-armed.psa-horizon-in .psa-horizon{
  transform:scaleX(1);
  opacity:1;
  transition:transform 1.5s var(--ease-out), opacity .45s linear;
}

.psa-regenerative-body{
  max-width:57ch;
}

.psa-regenerative-body p{
  margin:0;
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--ink-mute);
}

.psa-regenerative-body + .psa-regenerative-body{
  margin-top:clamp(20px, 2.2vw, 30px);
}

.psa-body--close{
  position:relative;
  padding-left:clamp(16px, 1.6vw, 22px);
}

.psa-body--close::before{
  content:"";
  position:absolute;
  left:0;
  top:.44em;
  bottom:.34em;
  width:1px;
  background:linear-gradient(180deg, var(--gold-hi) 0%, rgba(200,134,10,.10) 100%);
}

.psa-body--close p{
  color:var(--ink);
  font-weight:500;
}

/* ---------- paper quote card ---------- */

.psa-card{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:520px;
  margin:0 0 0 auto;
  padding:clamp(28px, 3.2vw, 42px) clamp(26px, 3vw, 40px) clamp(30px, 3.4vw, 44px);
  border:1px solid var(--p-rule);
  border-radius:var(--r-lg);
  background:var(--paper);
  color:var(--p-ink);
  box-shadow:
    0 34px 70px -26px rgba(0,0,0,.86),
    0 8px 20px -12px rgba(0,0,0,.50),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.psa-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background-image:var(--hex-p);
  opacity:.45;
  pointer-events:none;
}

.psa-card-mark{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(16px, 1.8vw, 22px);
  color:var(--p-gold);
}

.psa-card-mark .ic{
  flex:none;
  width:13px;
  height:13px;
}

.psa-card-mark::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, var(--p-rule) 0%, rgba(229,216,186,0) 100%);
}

.psa-quote{
  margin:0;
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(1.28rem, 1.0rem + 1.05vw, 1.86rem);
  line-height:1.26;
  letter-spacing:-.012em;
  color:var(--p-ink);
  text-wrap:balance;
}

/* Armed states are added by JS, so with no scripting the section reads complete.
   The hidden state carries no transition, so arming after first paint cannot
   animate backwards. Only the arrival is animated. */
.psa-regen.psa-regenerative-armed .psa-card{
  opacity:0;
  transform:translateY(28px);
  transition:none;
  box-shadow:
    0 12px 26px -20px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.40) inset;
}

.psa-regen.psa-regenerative-armed.psa-quote-in .psa-card{
  opacity:1;
  transform:translateY(-6px);
  transition:
    transform .95s var(--ease-out),
    opacity .8s var(--ease-out),
    box-shadow .95s var(--ease-out);
  box-shadow:
    0 34px 70px -26px rgba(0,0,0,.86),
    0 8px 20px -12px rgba(0,0,0,.50),
    0 1px 0 rgba(255,255,255,.55) inset;
}

/* ---------- small screens ---------- */

@media (max-width:999px){
  .psa-regen{
    min-height:0;
    padding-block:clamp(80px, 15vw, 128px) clamp(88px, 16vw, 140px);
  }
}

@media (max-width:479px){
  .psa-regenerative-scrim{
    background:
      linear-gradient(180deg, rgba(11,9,6,.93) 0%, rgba(7,5,2,.78) 32%, rgba(7,5,2,.88) 100%),
      radial-gradient(92% 60% at 70% 16%, rgba(232,168,48,.14) 0%, rgba(232,168,48,0) 70%);
  }
}

/* ---------- reduced motion: static ground, rule pre drawn, card fades in place ---------- */

@media (prefers-reduced-motion: reduce){
  .psa-regenerative-bg-img,
  .psa-regen.psa-regenerative-armed .psa-regenerative-bg-img{
    transform:none;
    will-change:auto;
  }
  .psa-regen .psa-horizon,
  .psa-regen.psa-regenerative-armed .psa-horizon,
  .psa-regen.psa-regenerative-armed.psa-horizon-in .psa-horizon{
    transform:scaleX(1);
    opacity:1;
    transition:none;
  }
  .psa-regen.psa-regenerative-armed .psa-card{
    transform:none;
  }
  .psa-regen.psa-regenerative-armed.psa-quote-in .psa-card{
    transform:none;
    transition:opacity .5s linear;
  }
}

/* ===== alvara-psa-foundation ===== */
/* ==========================================================================
   ALVARA Sanctuary / 07 / Home of the ALVARA Foundation
   handle: alvara-psa-foundation   prefix: psa-
   Ground: deep. Two tall portal cards in a near black gallery, each with a
   drawn gold hex seal, under a centered institutional head.
   ========================================================================== */

.psa-fdn{
  position:relative;
  isolation:isolate;
  padding-block:var(--sec);
  background-color:var(--bg-deep);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}

/* ---------- ground: hex texture plus a single honey bloom off the top ---- */
.psa-fdn__ground{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.psa-fdn__ground::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hex);
  opacity:.055;
}
.psa-fdn__ground::after{
  content:"";
  position:absolute;
  left:50%;
  top:-10%;
  width:min(1240px,132%);
  height:64%;
  transform:translateX(-50%);
  background:radial-gradient(58% 62% at 50% 0%,rgba(200,134,10,.14),rgba(200,134,10,0) 70%);
}

.psa-fdn__inner{position:relative;z-index:1}

/* ---------- institutional head ------------------------------------------ */
.psa-fdn .psa-fdn__head{
  max-width:min(720px,100%);
  margin-inline:auto;
  margin-bottom:clamp(40px,5vw,66px);
  text-align:center;
}
.psa-fdn .psa-fdn__head .eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
}
.psa-fdn .psa-fdn__head .eyebrow .ic{margin:0}
.psa-fdn .psa-fdn__head .psa-fdn__h{
  margin:.4em 0 0;
  font-size:var(--t-h2);
  color:var(--ink);
}
.psa-fdn .psa-fdn__intro{margin-top:clamp(14px,1.6vw,20px)}
.psa-fdn .psa-fdn__intro p{
  margin:0;
  color:var(--ink-mute);
  font-size:var(--t-lead);
  line-height:1.66;
}
.psa-fdn .psa-fdn__intro p + p{margin-top:.7em}

/* ---------- gallery ------------------------------------------------------ */
.psa-fdn__gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(22px,2.8vw,38px);
}

/* ---------- portal card -------------------------------------------------- */
.psa-portal{position:relative;display:flex}

.psa-portal__card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .55s var(--ease-out),
             border-color .55s var(--ease-out),
             box-shadow .55s var(--ease-out);
}

.psa-portal__media{
  position:relative;
  height:clamp(300px,32vw,468px);
  background-color:var(--bg-3);
  overflow:hidden;
}
.psa-portal__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.06);
  filter:saturate(.7);
  transition:transform .9s var(--ease-out),filter .9s var(--ease-out);
}
.psa-portal.in .psa-portal__img{transform:scale(1);filter:saturate(1)}

.psa-portal__scrim{
  position:absolute;
  inset:auto 0 0 0;
  height:58%;
  background:linear-gradient(180deg,rgba(7,5,2,0) 0%,rgba(7,5,2,.55) 52%,var(--bg-card) 100%);
  pointer-events:none;
}

/* ---------- body --------------------------------------------------------- */
.psa-portal__body{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:clamp(58px,6vw,72px) clamp(20px,2.4vw,32px) clamp(26px,3vw,36px);
}

.psa-portal__title{
  margin:0;
  font-size:var(--t-h3);
  line-height:1.16;
  color:var(--ink);
}
.psa-portal__copy{margin-top:clamp(12px,1.4vw,18px)}
.psa-portal__copy p{
  margin:0;
  color:var(--ink-mute);
  font-size:var(--t-body);
  line-height:1.7;
}
.psa-portal__copy p + p{margin-top:.75em}

/* ---------- gold hex seal, straddles the image seam ---------------------- */
.psa-portal__seal{
  position:absolute;
  top:-34px;
  left:clamp(18px,2.4vw,30px);
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  z-index:2;
  color:var(--gold-hi);
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(7,5,2,.94) 38%,rgba(7,5,2,.66) 58%,rgba(7,5,2,0) 76%);
}
.psa-portal__seal-svg{
  display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
.psa-portal__seal-draw{
  transition:stroke-dashoffset 1200ms var(--ease-out);
}
.psa-portal__seal-core{
  fill:var(--gold);
  opacity:0;
  transform:scale(.55);
  transform-box:fill-box;
  transform-origin:50% 50%;
  transition:opacity .7s var(--ease-out) .55s,transform .7s var(--ease-out) .55s;
}
.psa-portal.psa-is-sealed .psa-portal__seal-core{opacity:.92;transform:scale(1)}

/* ---------- program link, underline sweeps left to right ----------------- */
.psa-portal .psa-portal__link{
  position:relative;
  z-index:3;
  align-self:flex-start;
  margin-top:auto;
  padding-top:clamp(20px,2.2vw,26px);
  padding-bottom:7px;
  font-family:var(--mono);
  font-size:.7rem;
  line-height:1;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-hi);
  text-decoration:none;
  border:0;
  background-image:linear-gradient(var(--gold-hi),var(--gold-hi)),
                   linear-gradient(rgba(200,134,10,.32),rgba(200,134,10,.32));
  background-repeat:no-repeat,no-repeat;
  background-position:0 100%,0 100%;
  background-size:0% 1px,100% 1px;
  transition:background-size .6s var(--ease-out),color .35s var(--ease);
}
.psa-portal .psa-portal__link::before,
.psa-portal .psa-portal__link::after{content:none}

/* whole card is a target, the visible link stays above it */
.psa-portal__cover{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:var(--r-lg);
}

@media (hover:hover) and (pointer:fine){
  .psa-portal:hover .psa-portal__card{
    transform:translateY(-4px);
    border-color:var(--rule-2);
    box-shadow:0 30px 64px -34px rgba(0,0,0,.92);
  }
  .psa-portal:hover .psa-portal__link{background-size:100% 1px,100% 1px}
}
.psa-portal:focus-within .psa-portal__card{
  transform:translateY(-4px);
  border-color:var(--rule-2);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.92);
}
.psa-portal:focus-within .psa-portal__link{background-size:100% 1px,100% 1px}

/* label with no link yet: no sweep, no pointer */
.psa-portal .psa-portal__link--static{cursor:default;color:var(--gold-soft)}
.psa-portal:hover .psa-portal__link--static,
.psa-portal:focus-within .psa-portal__link--static{background-size:0% 1px,100% 1px}

.psa-portal .psa-portal__link:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:5px;
}

/* ---------- section call to action --------------------------------------- */
.psa-fdn__cta{
  position:relative;
  margin-top:clamp(44px,5.2vw,72px);
  text-align:center;
}
.psa-fdn__cta::before{
  content:"";
  display:block;
  width:clamp(56px,7vw,96px);
  height:1px;
  margin:0 auto clamp(26px,3vw,38px);
  background:linear-gradient(90deg,rgba(200,134,10,0),var(--gold),rgba(200,134,10,0));
}
.psa-fdn__cta-btn{position:relative}
.psa-fdn__cta-btn--static{cursor:default}
.psa-fdn__cta-btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}

.psa-fdn__sweep{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.psa-fdn__sweep::after{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  left:-48%;
  width:36%;
  transform:skewX(-16deg);
  background:linear-gradient(100deg,rgba(255,230,178,0) 0%,rgba(255,253,246,.5) 50%,rgba(255,230,178,0) 100%);
  opacity:0;
}
.psa-fdn__cta-text{position:relative;z-index:2}
.psa-fdn__cta.in .psa-fdn__sweep::after{
  animation:psa-fdn-sweep 1150ms var(--ease-out) 280ms 1 both;
}

@keyframes psa-fdn-sweep{
  0%{left:-48%;opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{left:114%;opacity:0}
}

/* ---------- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .psa-portal__img{
    transform:none;
    filter:none;
    transition:none;
  }
  .psa-portal.in .psa-portal__img{transform:none;filter:none}
  .psa-portal__card,
  .psa-portal .psa-portal__link,
  .psa-portal__seal-draw,
  .psa-portal__seal-core{transition:none}
  .psa-portal:hover .psa-portal__card,
  .psa-portal:focus-within .psa-portal__card{transform:none}
  .psa-fdn__cta.in .psa-fdn__sweep::after{animation:none;opacity:0}
}

/* ===== alvara-psa-support ===== */
/* ==========================================================================
   ALVARA Sanctuary, section 8: Support the Sanctuary
   Centered dusk invitation over a full bleed photograph. Prefix: psa-
   ========================================================================== */

.psa-sec{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  display:flex;
  align-items:center;
  background:var(--bg-deep);
  padding-block:calc(var(--sec) * 1.12) calc(var(--sec) * 1.24);
  min-height:clamp(520px, 80vh, 900px);
  --psa-y:0%;
  --psa-focus:55%;
}

/* ---------- full bleed ground ---------- */

.psa-support-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.psa-support-bg-img{
  position:absolute;
  left:0;
  top:-6%;
  width:100%;
  height:112%;
  max-width:none;
  object-fit:cover;
  object-position:50% var(--psa-focus);
  transform:translate3d(0, var(--psa-y), 0);
  will-change:transform;
}

/* centered radial scrim so the column keeps AA contrast at every viewport,
   plus a top and bottom blend into the page ground for a seamless join */
.psa-support-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(118% 92% at 50% 52%,
      rgba(7,5,2,.90) 0%,
      rgba(7,5,2,.82) 30%,
      rgba(7,5,2,.62) 56%,
      rgba(7,5,2,.40) 78%,
      rgba(7,5,2,.30) 100%),
    linear-gradient(180deg,
      rgba(11,9,6,1) 0%,
      rgba(11,9,6,.34) 16%,
      rgba(11,9,6,.22) 50%,
      rgba(11,9,6,.52) 84%,
      rgba(11,9,6,1) 100%);
}

/* ---------- column ---------- */

.psa-support-wrap{
  position:relative;
  z-index:2;
  width:100%;
}

.psa-support-col{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}

/* ---------- hairline rule that draws out from the centre ---------- */

.psa-rule-wrap{
  width:min(258px, 62%);
  margin:0 auto clamp(20px, 2.4vw, 34px);
}

.psa-support-rule{
  display:block;
  height:1px;
  border-radius:1px;
  transform:scaleX(0);
  transform-origin:50% 50%;
  transition:transform 1.05s var(--ease-out) .08s;
  background:linear-gradient(90deg,
    rgba(200,134,10,0) 0%,
    var(--gold-lo) 16%,
    var(--gold) 34%,
    var(--gold-hi) 50%,
    var(--gold) 66%,
    var(--gold-lo) 84%,
    rgba(200,134,10,0) 100%);
}

.psa-rule-wrap.in .psa-support-rule{ transform:scaleX(1); }

/* ---------- type ---------- */

.psa-support-eyebrow{
  margin:0;
  justify-content:center;
  text-align:center;
}

.psa-support-h{
  margin:clamp(16px, 1.8vw, 26px) 0 0;
  font-size:clamp(2.15rem, 1.15rem + 4.6vw, 4.9rem);
  color:var(--ink);
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(7,5,2,.62);
}

.psa-support-h em{
  display:block;
}

.psa-support-body{
  margin-inline:auto;
  text-wrap:pretty;
  text-shadow:0 1px 22px rgba(7,5,2,.62);
}

.psa-support-body p{ margin:0; }
.psa-support-body p + p{ margin-top:.85em; }

.psa-lead{
  max-width:640px;
  margin-top:clamp(24px, 2.8vw, 38px);
  font-family:var(--sans);
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--ink);
}

.psa-sub{
  max-width:690px;
  margin-top:clamp(16px, 1.8vw, 24px);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.72;
  color:var(--ink-mute);
}

/* ---------- the single call to action ---------- */

.psa-cta-wrap{
  margin-top:clamp(34px, 4.2vw, 56px);
}

.psa-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.psa-cta-label{
  position:relative;
  z-index:4;
}

.psa-cta-sweep{
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transform:translateX(-112%);
  background:linear-gradient(104deg,
    rgba(255,230,178,0) 32%,
    rgba(255,246,224,.58) 50%,
    rgba(255,230,178,0) 68%);
}

.psa-cta.psa-fire .psa-cta-sweep{
  animation:psa-sweep 900ms var(--ease-out) 1;
}

@keyframes psa-sweep{
  0%{ opacity:0; transform:translateX(-112%); }
  14%{ opacity:1; }
  86%{ opacity:1; }
  100%{ opacity:0; transform:translateX(112%); }
}

.psa-cta:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:4px;
}

/* ---------- unhurried cascade (six children, the global scale stops at five) --- */

.psa-sec .psa-support-col.stagger > .reveal:nth-child(1){ transition-delay:0s; }
.psa-sec .psa-support-col.stagger > .reveal:nth-child(2){ transition-delay:.09s; }
.psa-sec .psa-support-col.stagger > .reveal:nth-child(3){ transition-delay:.18s; }
.psa-sec .psa-support-col.stagger > .reveal:nth-child(4){ transition-delay:.30s; }
.psa-sec .psa-support-col.stagger > .reveal:nth-child(5){ transition-delay:.40s; }
.psa-sec .psa-support-col.stagger > .reveal:nth-child(6){ transition-delay:.52s; }

/* ---------- responsive ---------- */

@media (max-width: 599px){
  .psa-sec{
    min-height:clamp(480px, 76vh, 720px);
    padding-block:calc(var(--sec) * .96) calc(var(--sec) * 1.06);
  }
  .psa-support-scrim{
    background:
      radial-gradient(150% 86% at 50% 54%,
        rgba(7,5,2,.92) 0%,
        rgba(7,5,2,.86) 34%,
        rgba(7,5,2,.66) 64%,
        rgba(7,5,2,.44) 100%),
      linear-gradient(180deg,
        rgba(11,9,6,1) 0%,
        rgba(11,9,6,.42) 14%,
        rgba(11,9,6,.30) 50%,
        rgba(11,9,6,.60) 86%,
        rgba(11,9,6,1) 100%);
  }
  .psa-support-h em{ display:inline; }
  .psa-cta{ width:100%; max-width:340px; }
}

@media (min-width: 1800px){
  .psa-support-col{ max-width:820px; }
  .psa-lead{ max-width:700px; }
  .psa-sub{ max-width:760px; }
}

/* ---------- reduced motion: no drift, no sweep, rule pre drawn, single fade ---- */

@media (prefers-reduced-motion: reduce){
  .psa-support-bg-img{
    transform:none !important;
    will-change:auto;
  }
  .psa-support-rule{
    transform:scaleX(1);
    transition:none;
  }
  .psa-cta-sweep{ display:none; }
  .psa-sec .reveal{
    transform:none !important;
    transition:opacity .35s linear !important;
  }
  .psa-sec .psa-support-col.stagger > .reveal{ transition-delay:0s !important; }
}

/* ================= END NINE PAGES LAYER ================= */

/* ======================================================================
   RITUAL PAGE 2026-08-03
   /pages/ritual rebuilt as a designed sequence. Prefix rtl- because .rit- is
   already taken in this file by an unrelated three-up grid.

   The organising device is the copy's own promise, "for as long as you want
   the thread unbroken", so the practice steps hang off a literal gold thread
   that runs unbroken down the page. The step markers sit on it inside
   hexagons, masked so the line does not run through the numerals.

   Palette follows the existing system: dark grounds use --ink / --gold, and
   the first-light section reuses the theme's own .cream sheet so it picks up
   the paper palette and honeycomb automatically, and so the adaptive nav
   correctly flips to its dark pill over it.
   ====================================================================== */

.rtl { display: block; }

/* ---------------- hero ---------------- */
.rtl-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78svh, 780px);
  padding: clamp(120px, 16vh, 220px) 0 clamp(54px, 7vh, 96px);
  overflow: hidden;
  background: var(--bg-deep);
}

.rtl-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  filter: sepia(.12) saturate(1.04) brightness(.62) contrast(1.04);
}

.rtl-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='rgba(200,134,10,0.11)'/%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, rgba(11, 9, 6, .82) 0%, rgba(11, 9, 6, .34) 42%, rgba(11, 9, 6, .94) 100%);
  background-size: 98px 175px, auto;
}

.rtl-hero-in { position: relative; z-index: 2; }

.rtl-eyebrow { margin-bottom: 20px; }

.rtl-h {
  margin: 0 0 22px;
  font-size: clamp(44px, 7.4vw, 108px);
  line-height: .98;
  letter-spacing: -.022em;
  color: var(--ink);
}

.rtl-h-line { display: block; }
.rtl-h em { color: var(--gold); font-style: italic; }

.rtl-lede {
  max-width: 46ch;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  color: var(--ink);
  opacity: .92;
}

.rtl-hero-note {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  max-width: 52ch;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
}

.rtl-hero-note .ic-hex { flex: none; margin-top: .55em; color: var(--gold); opacity: .7; }

/* ---------------- the practice, bound by the thread ---------------- */
.rtl-practice {
  background: var(--bg-2);
  padding: clamp(64px, 9vw, 128px) 0 clamp(72px, 10vw, 140px);
}

.rtl-rail {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  align-items: center;
  column-gap: 14px;
  margin-bottom: clamp(38px, 4vw, 62px);
}

.rtl-rail-stub,
.rtl-rail-line { display: block; height: 1px; background: var(--rule-2); }
.rtl-rail-stub { background: var(--gold); }

.rtl-legend {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft, var(--gold));
}

.rtl-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 74ch;
}

/* the unbroken thread */
.rtl-steps::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 14px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--gold) 6%,
    var(--rule-2) 58%,
    transparent 100%);
}

.rtl-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: clamp(22px, 2.4vw, 38px);
  padding: 0 0 clamp(34px, 4vw, 56px);
}

.rtl-step:last-child { padding-bottom: 0; }

.rtl-step-mark {
  position: relative;
  width: 44px;
  height: 50px;
  color: var(--gold);
  /* mask the thread behind the hexagon so the numeral stays legible */
  background: radial-gradient(circle at 50% 50%, var(--bg-2) 58%, transparent 74%);
}

.rtl-step-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.rtl-step-mark b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--gold-hi);
}

.rtl-step-t {
  margin: 6px 0 10px;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.16;
  color: var(--ink);
}

.rtl-step-body p {
  margin: 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-mute);
}

/* ---------------- taken at first light (paper) ---------------- */
.rtl-light { padding: clamp(72px, 10vw, 144px) 0; }

.rtl-light-in { max-width: 78ch; }

.rtl-light-h {
  margin: 14px 0 20px;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -.018em;
}

.rtl-light-body {
  max-width: 60ch;
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.72;
}

.rtl-quote {
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 2px solid var(--p-gold);
}

.rtl-quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.26;
  color: var(--p-ink);
}

/* ---------------- four vitality agreements ---------------- */
.rtl-agree {
  position: relative;
  background: var(--bg-deep);
  padding: clamp(72px, 10vw, 144px) 0;
  overflow: hidden;
}

.rtl-agree::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hex);
  background-size: 84px 150px;
  opacity: .85;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}

.rtl-agree > .wrap { position: relative; z-index: 1; }

.rtl-agree-head { max-width: 66ch; margin-bottom: clamp(40px, 5vw, 72px); }

.rtl-agree-h {
  margin: 14px 0 18px;
  font-size: clamp(32px, 4.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
}

.rtl-agree-intro {
  max-width: 56ch;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.7;
  color: var(--ink-mute);
}

.rtl-agree-count {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold-hi);
  opacity: .8;
}

.rtl-agrees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 860px) {
  .rtl-agrees { grid-template-columns: 1fr 1fr; }
}

.rtl-agreement {
  position: relative;
  background: var(--bg-deep);
  padding: clamp(28px, 3.2vw, 46px) clamp(24px, 2.8vw, 44px);
}

.rtl-agreement-n {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--gold);
  opacity: .62;
}

.rtl-agreement-t {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.rtl-agreement p {
  margin: 0;
  max-width: 46ch;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
  color: var(--ink);
}

/* ---------------- the ritual card ---------------- */
.rtl-card-sec {
  background: var(--bg-3);
  padding: clamp(72px, 10vw, 140px) 0;
}

.rtl-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 84px);
}

@media (min-width: 940px) {
  .rtl-card-grid { grid-template-columns: .92fr 1.08fr; align-items: start; }
}

.rtl-card-h {
  margin: 14px 0 20px;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink);
}

.rtl-card-body {
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-mute);
}

.rtl-card-included {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .82;
}

.rtl-passages { display: grid; gap: clamp(26px, 3vw, 44px); }

.rtl-passage {
  position: relative;
  margin: 0;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 2.8vw, 40px);
  background: rgba(11, 9, 6, .42);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.rtl-passage-mark { display: block; margin-bottom: 14px; color: var(--gold); opacity: .8; }

.rtl-passage p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.52;
  color: var(--ink);
}

/* ---------------- begin ---------------- */
.rtl-begin {
  position: relative;
  background: var(--bg-deep);
  padding: clamp(78px, 11vw, 150px) 0 clamp(78px, 11vw, 150px);
  overflow: hidden;
  text-align: center;
}

.rtl-begin-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58vw, 520px);
  transform: translate(-50%, -50%);
  color: var(--gold-hi);
  opacity: .07;
  pointer-events: none;
}

.rtl-begin-glyph svg { width: 100%; height: auto; display: block; }

.rtl-begin-in { position: relative; z-index: 1; }

.rtl-begin .eyebrow { justify-content: center; }

.rtl-begin-h {
  margin: 14px auto 18px;
  max-width: 24ch;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
}

.rtl-begin-body {
  max-width: 48ch;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-mute);
}

.rtl-begin-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: clamp(30px, 3.4vw, 48px);
}

.rtl-cta { min-height: 52px; padding: 0 34px; font-size: 15px; }

.rtl-cta-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition: border-color 200ms linear, color 200ms linear;
}

.rtl-cta-ghost:hover,
.rtl-cta-ghost:focus-visible { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }

/* ---------------- disclaimer ---------------- */
.rtl-fine {
  background: var(--bg-deep);
  padding: 0 0 clamp(48px, 6vw, 88px);
}

.rtl-fine p {
  max-width: 84ch;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-mute);
  opacity: .82;
}

/* ---------------- mobile ---------------- */
@media (max-width: 640px) {
  .rtl-hero { min-height: auto; padding-top: clamp(104px, 22vh, 160px); }
  .rtl-step { grid-template-columns: 36px 1fr; column-gap: 18px; }
  .rtl-step-mark { width: 36px; height: 41px; }
  .rtl-steps::before { left: 17px; }
}

/* ======================================================================
   RITUAL PAGE POLISH 2026-08-03
   Second block for this page on purpose: retyping the 400 line base block to
   fold these in would risk transcription errors for no benefit. Read this
   together with RITUAL PAGE 2026-08-03 above.

   SPECIFICITY NOTE that matters for every animation here. The base
   .reveal.in { transform: none } rule is (0,2,0). Any override written as
   .rtl-x.reveal is also (0,2,0) and, appearing later in the file, would beat
   it and freeze the element in its start state forever. So every start state
   below is paired with an explicit .rtl-x.reveal.in at (0,3,0).
   ====================================================================== */

/* ---------------- first light: a drawn sunrise ---------------- */

/* restack so the honeycomb sits over the sun and the copy over both */
.rtl-light { position: relative; overflow: hidden; }
.rtl-light::before { z-index: 1; }
.rtl-light > .rtl-light-in { position: relative; z-index: 2; }

.rtl-sun {
  position: absolute;
  right: -6%;
  bottom: -14%;
  width: min(760px, 82%);
  aspect-ratio: 2 / 1;
  z-index: 0;
  color: var(--p-gold);
  pointer-events: none;
}

.rtl-sun-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 92% at 50% 100%,
    rgba(232, 168, 48, .38) 0%,
    rgba(232, 168, 48, .18) 32%,
    rgba(232, 168, 48, .06) 56%,
    transparent 76%);
}

.rtl-sun-disc {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(300px, 40%);
  aspect-ratio: 1;
  margin-left: min(-150px, -20%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 248, 231, .96) 0%,
    rgba(242, 196, 104, .74) 40%,
    rgba(200, 134, 10, .28) 66%,
    transparent 78%);
}

.rtl-sun-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .42;
}

.rtl-sun-rays path { stroke-opacity: .5; }

.rtl-sun-horizon {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(147, 98, 10, .30) 20%,
    rgba(147, 98, 10, .30) 80%,
    transparent);
}

/* the sun rises, slower than anything else on the page */
.rtl-sun.reveal {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 1.7s var(--ease-out), transform 2s var(--ease-out);
}
.rtl-sun.reveal.in { opacity: 1; transform: none; }

.rtl-sun.reveal .rtl-sun-rays {
  transform: scale(.72);
  transform-origin: 50% 100%;
  transition: transform 2.4s var(--ease-out) .2s;
}
.rtl-sun.reveal.in .rtl-sun-rays { transform: none; }

@media (max-width: 760px) {
  .rtl-sun { right: -22%; bottom: -18%; width: 128%; }
  .rtl-light-body, .rtl-light-h { position: relative; }
}

/* ---------------- the thread, drawn on reveal ---------------- */

/* the static pseudo-element thread is replaced by the animated span */
.rtl-steps::before { display: none; }

.rtl-thread {
  position: absolute;
  left: 21px;
  top: 14px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--gold) 6%,
    var(--rule-2) 58%,
    transparent 100%);
}

.rtl-thread.reveal {
  opacity: 1;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.8s var(--ease-out) .08s;
}
.rtl-thread.reveal.in { transform: scaleY(1); }

@media (max-width: 640px) {
  .rtl-thread { left: 17px; }
}

/* a soft bloom behind each marker as its step lands */
.rtl-step-mark::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 168, 48, .22), transparent 68%);
  opacity: 0;
  transition: opacity 1s var(--ease-out) .25s;
  pointer-events: none;
}
.rtl-step.reveal.in .rtl-step-mark::after { opacity: 1; }

/* ---------------- display typography: let Fraunces be Fraunces ----------------
   The variable font is loaded with the SOFT (0..100) and WONK (0..1) axes. The
   theme pins WONK 0 everywhere. At display sizes WONK 1 is the whole reason to
   use this typeface, so it is switched on for the page's large cuts only. */
.rtl-h {
  font-variation-settings: 'SOFT' 14, 'WONK' 1, 'opsz' 120;
}

.rtl-light-h,
.rtl-agree-h,
.rtl-card-h,
.rtl-begin-h {
  font-variation-settings: 'SOFT' 18, 'WONK' 1, 'opsz' 72;
}

.rtl-quote p {
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 48;
}

.rtl-agreement p {
  font-variation-settings: 'SOFT' 24, 'WONK' 0, 'opsz' 24;
}

/* ---------------- hero: drift and seam ---------------- */
@keyframes rtl-drift {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.rtl-hero-bg {
  animation: rtl-drift 24s var(--ease-out) both;
  will-change: transform;
}

.rtl-hero-seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 210px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-2));
}

/* ---------------- agreements: hairline draws in on hover ---------------- */
.rtl-agreement { transition: background-color .45s linear; }

.rtl-agreement::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-hi), rgba(200, 134, 10, .1) 72%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}

.rtl-agreement:hover { background: var(--bg-2); }
.rtl-agreement:hover::after,
.rtl-agreement:focus-within::after { transform: scaleX(1); }

/* ---------------- passages: warm corner light ---------------- */
.rtl-passage { overflow: hidden; }

.rtl-passage::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(200, 134, 10, .16), transparent 66%);
  pointer-events: none;
}

.rtl-passage > * { position: relative; }

/* ---------------- begin: the glyph turns, the ground warms ---------------- */
.rtl-begin::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(940px, 118%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 134, 10, .11), transparent 62%);
  pointer-events: none;
}

@keyframes rtl-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.rtl-begin-glyph { animation: rtl-turn 200s linear infinite; }

/* ---------------- page-level grace notes ---------------- */
.rtl ::selection { background: rgba(200, 134, 10, .28); color: var(--ink); }
.rtl-light ::selection { background: rgba(147, 98, 10, .22); color: var(--p-ink); }

.rtl a:focus-visible,
.rtl button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* ---------------- reduced motion: hold everything still ---------------- */
@media (prefers-reduced-motion: reduce) {
  .rtl-hero-bg { animation: none; }
  .rtl-begin-glyph { animation: none; }
  .rtl-sun.reveal,
  .rtl-sun.reveal.in { opacity: 1; transform: none; transition: none; }
  .rtl-sun.reveal .rtl-sun-rays,
  .rtl-sun.reveal.in .rtl-sun-rays { transform: none; transition: none; }
  .rtl-thread.reveal,
  .rtl-thread.reveal.in { transform: scaleY(1); transition: none; }
  .rtl-step-mark::after { opacity: 1; transition: none; }
  .rtl-agreement::after { transition: none; }
}

/* ============================================================
   Front Line Vitality (flv-) + Military Discount (mil-)
   Added 2026-08-04. Self-contained layer for /pages/front-line
   and /pages/military-discount; reuses .wrap .eyebrow .h-serif
   .reveal .stagger .btn-gold primitives and the page tokens.
   ============================================================ */

/* ---------- FLV hero ---------- */
.flv-hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: var(--bg-deep); }
.flv-hero__media { position: absolute; inset: 0; }
.flv-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.flv-hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,5,2,.94) 0%, rgba(7,5,2,.58) 52%, rgba(7,5,2,.28) 100%),
  linear-gradient(0deg, var(--bg) 2%, transparent 38%); }
.flv-hero__inner { position: relative; z-index: 1; padding: calc(var(--sec) * .9) 0; width: 100%; }
.flv-hero__col { max-width: 660px; }
.flv-hero__title { font-size: var(--t-display); line-height: .96; margin: 0 0 28px; }
.flv-hero__lead { font-size: var(--t-lead); line-height: 1.65; color: var(--ink); max-width: 34rem; margin: 0 0 18px; }
.flv-hero__sub { font-size: var(--t-lead); line-height: 1.65; color: var(--ink-mute); max-width: 34rem; margin: 0; }

/* ---------- FLV founder quote (paper band) ---------- */
.flv-quote { background: var(--paper); color: var(--p-ink); position: relative; }
.flv-quote::before { content: ''; position: absolute; inset: 0; background-image: var(--hex-p); opacity: .5; pointer-events: none; }
.flv-q-wrap { max-width: 900px; text-align: center; padding: calc(var(--sec) * .5) var(--gut); }
.flv-q-text { margin: 0 0 22px; }
.flv-q-text p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem); line-height: 1.45; color: var(--p-ink); margin: 0; }
.flv-q-name { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--p-gold); margin: 0 0 6px; }
.flv-q-role { font-size: .78rem; letter-spacing: .06em; color: var(--p-mute); margin: 0; }

/* ---------- FLV initiative panel ---------- */
.flv-init { position: relative; padding: var(--sec) 0 calc(var(--sec) * .55); }
.flv-init__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .6; }
.flv-in-wrap { max-width: 1080px; }
.flv-in-eyebrowrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 44px; }
.flv-in-eyebrowrow .eyebrow { margin: 0; }
.flv-in-rule { width: 64px; height: 1px; background: var(--rule); }
.flv-in-panel { position: relative; border: 1px solid var(--rule); background: rgba(200,134,10,.04); padding: clamp(44px, 6vw, 64px) clamp(28px, 5vw, 64px); text-align: center; }
.flv-in-diamond { position: absolute; top: 0; left: 50%; width: 10px; height: 10px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.flv-in-heading { font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.15rem); line-height: 1.3; margin: 0 0 20px; }
.flv-in-body { color: var(--ink-mute); font-size: var(--t-lead); line-height: 1.7; max-width: 52ch; margin: 0 auto; }

/* ---------- FLV discount banner ---------- */
.flv-banner { padding: 0 0 var(--sec); }
.flv-bn-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid rgba(200,134,10,.4); background: linear-gradient(135deg, rgba(200,134,10,.10) 0%, rgba(200,134,10,.03) 100%); padding: 26px 34px; }
.flv-bn-icon { flex-shrink: 0; width: 50px; height: 50px; display: grid; place-items: center; color: var(--gold-hi); background: rgba(200,134,10,.15); border: 1px solid rgba(200,134,10,.4); }
.flv-bn-copy { flex: 1 1 auto; }
.flv-bn-heading { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem); line-height: 1.35; color: var(--ink); margin: 0 0 4px; }
.flv-bn-gold { color: var(--gold-hi); }
.flv-bn-body { color: var(--ink-mute); font-size: .92rem; margin: 0; }
.flv-bn-cta { flex-shrink: 0; white-space: nowrap; }

/* ---------- FLV leadership ---------- */
.flv-leader { background: var(--bg-deep); padding: var(--sec) 0; }
.flv-ld-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.flv-ld-frame { position: relative; max-width: 420px; margin: 0 auto; }
.flv-ld-img { display: block; width: 100%; aspect-ratio: 6 / 7; object-fit: cover; object-position: top center; border-radius: 56px 0 56px 0; filter: brightness(.95) contrast(1.05); }
.flv-ld-frame-line { position: absolute; inset: 0; border: 1px solid rgba(200,134,10,.3); border-radius: 56px 0 56px 0; transform: translate(10px, 10px); pointer-events: none; }
.flv-ld-h { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); margin: 18px 0 6px; }
.flv-ld-role { color: var(--gold-hi); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 26px; }
.flv-ld-body { color: var(--ink-mute); line-height: 1.75; margin: 0 0 18px; }
.flv-ld-body--dim { color: var(--ink-faint); }
.flv-ld-note { font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.7; color: var(--ink-mute); margin: 8px 0 0; }

/* ---------- FLV challenges ---------- */
.flv-challenges { position: relative; background: var(--bg-deep); padding: var(--sec) 0; overflow: hidden; }
.flv-ch-hex { position: absolute; inset: 0; background-image: var(--hex); opacity: .5; pointer-events: none; }
.flv-ch-head { position: relative; margin-bottom: 46px; }
.flv-ch-h { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); margin: 18px 0 22px; }
.flv-ch-intro { color: var(--ink-mute); line-height: 1.75; max-width: 62ch; margin: 0; }
.flv-ch-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flv-ch-card { border: 1px solid rgba(245,238,225,.09); padding: 26px; transition: border-color .3s var(--ease); }
.flv-ch-card:hover { border-color: rgba(200,134,10,.3); }
.flv-ch-card-t { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: var(--gold-hi); margin: 0 0 12px; }
.flv-ch-card-b { color: var(--ink-faint); font-size: .92rem; line-height: 1.7; margin: 0; }

/* ---------- FLV work ---------- */
.flv-work { padding: var(--sec) 0; }
.flv-wk-head { margin-bottom: 46px; }
.flv-wk-h { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); margin: 18px 0 0; }
.flv-wk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.flv-wk-card { border: 1px solid var(--rule); background: rgba(200,134,10,.03); padding: 34px; transition: border-color .3s var(--ease); }
.flv-wk-card:hover { border-color: rgba(200,134,10,.4); }
.flv-wk-card-t { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: 0 0 14px; }
.flv-wk-card-b { color: var(--ink-mute); line-height: 1.75; margin: 0; }

/* ---------- FLV council ---------- */
.flv-council { position: relative; background: var(--bg); padding: var(--sec) 0; overflow: hidden; }
.flv-cn-hex { position: absolute; inset: 0; background-image: var(--hex); opacity: .5; pointer-events: none; }
.flv-cn-wrap { position: relative; }
.flv-cn-head { text-align: center; margin-bottom: 56px; }
.flv-cn-eyebrowrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 26px; }
.flv-cn-eyebrowrow .eyebrow { margin: 0; }
.flv-cn-rule { width: 64px; height: 1px; background: var(--rule); }
.flv-cn-h { font-size: var(--t-display); line-height: .95; margin: 0 0 24px; }
.flv-cn-intro { color: var(--ink-mute); font-size: var(--t-lead); line-height: 1.7; max-width: 56ch; margin: 0 auto; }
.flv-cn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; }
.flv-cn-card { border: 1px solid var(--rule); background: rgba(200,134,10,.03); padding: 30px; }
.flv-cn-card-rule { display: block; width: 32px; height: 1px; background: var(--gold); margin-bottom: 20px; }
.flv-cn-card-t { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; color: var(--gold-hi); margin: 0 0 12px; }
.flv-cn-card-b { color: var(--ink-mute); font-size: .92rem; line-height: 1.7; margin: 0; }
.flv-cn-quote { max-width: 780px; margin: 0 auto 56px; border-left: 4px solid var(--gold); background: rgba(200,134,10,.06); padding: 30px 34px; }
.flv-cn-quote-t p { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem); line-height: 1.6; color: var(--ink); margin: 0 0 20px; }
.flv-cn-quote-rule { display: block; width: 32px; height: 1px; background: var(--gold); margin-bottom: 14px; }
.flv-cn-quote-name { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold-hi); margin: 0 0 4px; }
.flv-cn-quote-role { font-size: .78rem; color: var(--ink-faint); margin: 0; }
.flv-cn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(200,134,10,.15); border: 1px solid rgba(200,134,10,.15); }
.flv-cn-stat { background: var(--bg); padding: 24px 18px; text-align: center; }
.flv-cn-stat-v { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--ink); margin: 0 0 6px; }
.flv-cn-stat-l { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); margin: 0; }

/* ---------- FLV closing ---------- */
.flv-closing { position: relative; padding: var(--sec) 0; overflow: hidden; }
.flv-cl-hex { position: absolute; inset: 0; background-image: var(--hex); opacity: .5; pointer-events: none; }
.flv-cl-wrap { position: relative; max-width: 880px; text-align: center; }
.flv-cl-eyebrowrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 30px; }
.flv-cl-eyebrowrow .eyebrow { margin: 0; }
.flv-cl-rule { width: 48px; height: 1px; background: var(--rule); }
.flv-cl-h { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); margin: 0 0 26px; }
.flv-cl-body { color: var(--ink-mute); line-height: 1.75; max-width: 54ch; margin: 0 auto 16px; }
.flv-cl-body--dim { color: var(--ink-faint); }
.flv-cl-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.flv-cl-prompt { color: var(--ink-faint); font-size: .92rem; margin: 0; }
.flv-cl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border: 1px solid var(--gold); color: var(--gold-hi); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .3s var(--ease), color .3s var(--ease); }
.flv-cl-btn:hover { background: var(--gold); color: #151008; }

/* ---------- Military discount hero ---------- */
.mil-hero { position: relative; min-height: 62vh; display: flex; align-items: center; overflow: hidden; background: var(--bg-deep); }
.mil-hero__media { position: absolute; inset: 0; }
.mil-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mil-hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7,5,2,.95) 0%, rgba(7,5,2,.72) 55%, rgba(7,5,2,.4) 100%),
  linear-gradient(0deg, var(--bg) 4%, transparent 42%); }
.mil-hero__inner { position: relative; z-index: 1; padding: calc(var(--sec) * .8) 0; width: 100%; }
.mil-hero__title { font-size: var(--t-display); line-height: .96; margin: 18px 0 22px; max-width: 12ch; }
.mil-hero__sub { font-size: var(--t-lead); color: var(--ink-mute); max-width: 30rem; margin: 0; }

/* ---------- Military discount intro ---------- */
.mil-intro { background: var(--bg-deep); padding: var(--sec) 0; }
.mil-intro__wrap { max-width: 780px; text-align: center; }
.mil-intro__spine { display: block; width: 1px; height: 48px; margin: 0 auto; background: linear-gradient(180deg, transparent, rgba(200,134,10,.5), transparent); }
.mil-intro__head { margin: 40px 0 34px; }
.mil-intro__h { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin: 18px 0 0; }
.mil-intro__prose { max-width: 620px; margin: 0 auto 44px; }
.mil-intro__p { color: var(--ink-mute); font-size: var(--t-lead); line-height: 1.75; margin: 0 0 20px; }
.mil-intro__thanks { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink); margin: 0; }
.mil-gold { color: var(--gold-hi); font-weight: 600; }
.mil-link { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 4px; transition: color .3s var(--ease); }
.mil-link:hover { color: var(--gold-lite); }
.mil-offer { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: 460px; margin: 0 auto 44px; padding: 28px 32px; border: 1px solid rgba(200,134,10,.4); background: rgba(200,134,10,.06); text-align: left; }
.mil-offer__badge { flex-shrink: 0; width: 64px; height: 64px; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--gold-hi); background: rgba(200,134,10,.15); border: 1px solid rgba(200,134,10,.3); }
.mil-offer__label { font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-hi); margin: 0 0 6px; }
.mil-offer__line { color: var(--ink); font-size: .92rem; line-height: 1.5; margin: 0; }

/* ---------- Military discount steps ---------- */
.mil-steps { padding: var(--sec) 0; }
.mil-steps__head { text-align: center; margin-bottom: 50px; }
.mil-steps__h { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin: 18px 0 0; }
.mil-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 52px; }
.mil-step { position: relative; padding: 30px 28px; border: 1px solid rgba(200,134,10,.2); background: rgba(200,134,10,.025); overflow: hidden; }
.mil-step__topline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,134,10,.4), transparent); }
.mil-step__num { font-family: var(--serif); font-size: 3rem; line-height: 1; color: rgba(200,134,10,.4); margin: 0 0 16px; }
.mil-step__t { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); margin: 0 0 12px; }
.mil-step__b { color: var(--ink-mute); font-size: .92rem; line-height: 1.7; margin: 0; }
.mil-idme { text-align: center; }
.mil-idme__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 34px; background: #1B4F9B; color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: opacity .25s var(--ease); }
.mil-idme__btn:hover { opacity: .9; }
.mil-idme__note { color: var(--ink-faint); font-size: .8rem; margin: 14px 0 0; }

/* ---------- Military discount form ---------- */
.mil-form-sec { background: var(--bg-deep); padding: var(--sec) 0; }
.mil-form-sec__wrap { max-width: 660px; }
.mil-form-sec__head { text-align: center; margin-bottom: 44px; }
.mil-form-sec__h { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); margin: 18px 0 14px; }
.mil-form-sec__sub { color: var(--ink-mute); font-size: .95rem; margin: 0; }
.mil-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mil-field { margin-bottom: 20px; }
.mil-field__label { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.mil-field__input { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid rgba(245,238,225,.15); padding: 13px 16px; color: var(--ink); font-family: var(--sans); font-size: .92rem; transition: border-color .3s var(--ease); }
.mil-field__input:focus { outline: none; border-color: rgba(200,134,10,.6); }
.mil-field__select { appearance: none; -webkit-appearance: none; background: var(--bg); cursor: pointer; }
.mil-field__err { color: #F87171; font-size: .78rem; margin: 8px 0 0; }
.mil-confirm { border: 1px solid rgba(200,134,10,.2); background: rgba(200,134,10,.03); padding: 20px; margin-bottom: 24px; }
.mil-confirm__label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; color: var(--ink-mute); font-size: .9rem; line-height: 1.6; }
.mil-confirm__box { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--gold); }
.mil-form__err { color: #F87171; font-size: .85rem; margin: 0 0 16px; }
.mil-form__submit { width: 100%; justify-content: center; }
.mil-form__submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Military discount success ---------- */
.mil-success { text-align: center; padding: 40px 0; }
.mil-success__icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 26px; color: var(--gold-hi); background: rgba(200,134,10,.12); border: 1px solid rgba(200,134,10,.3); }
.mil-success__h { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); margin: 0 0 18px; }
.mil-success__p { color: var(--ink-mute); line-height: 1.7; max-width: 42ch; margin: 0 auto 30px; }
.mil-success__p span { color: var(--ink); }

/* ---------- Military discount FLV cross panel ---------- */
.mil-cross { padding: var(--sec) 0; }
.mil-cross__panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 44px; border: 1px solid rgba(200,134,10,.25); background: rgba(200,134,10,.04); overflow: hidden; }
.mil-cross__topline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,134,10,.4), transparent); }
.mil-cross__hex { position: absolute; inset: 0; background-image: var(--hex); opacity: .6; pointer-events: none; }
.mil-cross__copy { position: relative; z-index: 1; max-width: 480px; }
.mil-cross__h { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 14px 0 12px; }
.mil-cross__b { color: var(--ink-mute); font-size: .95rem; line-height: 1.7; margin: 0; }
.mil-cross__cta { position: relative; z-index: 1; flex-shrink: 0; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .flv-ld-grid { grid-template-columns: 1fr; }
  .flv-ld-frame { max-width: 340px; }
  .flv-ch-grid { grid-template-columns: repeat(2, 1fr); }
  .flv-cn-grid { grid-template-columns: 1fr; }
  .flv-cn-stats { grid-template-columns: repeat(2, 1fr); }
  .mil-steps__grid { grid-template-columns: 1fr; }
  .mil-cross__panel { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  .flv-hero { min-height: 78vh; }
  .mil-hero { min-height: 54vh; }
  .flv-ch-grid { grid-template-columns: 1fr; }
  .flv-wk-grid { grid-template-columns: 1fr; }
  .flv-bn-row { flex-direction: column; align-items: flex-start; }
  .mil-form__row { grid-template-columns: 1fr; }
  .mil-offer { flex-direction: column; text-align: center; }
}

/* ============================================================
   QA fixes 2026-08-04 (flv-/mil-):
   1. The theme's base heading color is dark; headings on these
      dark pages need explicit ink. Ems still render gold via
      .h-serif em.
   2. Small-text bumps per the sitewide legibility directive:
      nothing under 12.5px, dim body copy moved off --ink-faint.
   ============================================================ */

.flv-hero__title,
.flv-in-heading,
.flv-ld-h,
.flv-ch-h,
.flv-wk-h,
.flv-cn-h,
.flv-cl-h,
.mil-hero__title,
.mil-intro__h,
.mil-steps__h,
.mil-form-sec__h,
.mil-success__h,
.mil-cross__h { color: var(--ink); }

.flv-ch-card-b { color: var(--ink-mute); }

.flv-q-role { font-size: .82rem; }
.flv-cn-quote-role { font-size: .82rem; }
.flv-cn-stat-l { font-size: .78rem; letter-spacing: .22em; }
.flv-cl-prompt { font-size: .95rem; color: var(--ink-mute); }
.mil-offer__label { font-size: .78rem; }
.mil-field__label { font-size: .78rem; color: var(--ink-mute); }
.mil-idme__note { font-size: .85rem; color: var(--ink-mute); }
.mil-form-sec__sub { color: var(--ink-mute); }

/* QA fix round 2: contain the .btn-gold ::after shine bar within
   the button on flv/mil pages (house wrappers normally clip it). */
.section-alvara-flv-intro .btn-gold,
.section-alvara-military-discount .btn-gold {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

/* QA fix round 3: hero inners must not zero out the .wrap gutter
   (padding shorthand overrode the horizontal padding). */
.flv-hero__inner,
.mil-hero__inner {
  padding-left: var(--gut);
  padding-right: var(--gut);
}

/* ============================================================
   ALVARA Sanctuary  ·  Founding partners
   Added 2026-08-26 for Jared's Sanctuary Page Web Update Brief (2.5).
   Sits flush beneath the Council ledger so the two cream sheets read as one
   paper charter spread. The pairing is hard-coded because the Council section
   only ever appears on the Sanctuary page, immediately above this one.
   All classes prefixed psa-pt-
   ============================================================ */

.section-alvara-psa-partners {
  padding: 0;
  margin: 0;
}

.section-alvara-psa-council > .cream {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: clamp(52px, 5.6vw, 84px);
}

.section-alvara-psa-partners > .cream {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 0;
}

.psa-pt-wrap {
  position: relative;
  padding-top: clamp(46px, 5vw, 74px);
}

.psa-pt-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(154, 103, 8, .05), rgba(154, 103, 8, .3) 32%, rgba(154, 103, 8, .05));
}

.psa-pt-head {
  text-align: left;
  max-width: 62ch;
}

.psa-pt-eyebrow { margin: 0; }

.psa-pt-h {
  font-size: var(--t-h2);
  color: var(--p-ink);
  margin: 20px 0 0;
  max-width: 18ch;
}

.psa-pt-intro {
  margin-top: clamp(18px, 2vw, 24px);
  max-width: 58ch;
}

.psa-pt-intro p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 300;
  color: var(--p-body);
  text-wrap: pretty;
}

.psa-pt-cards {
  list-style: none;
  margin: clamp(40px, 4.6vw, 62px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
}

@media (min-width: 760px) {
  .psa-pt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.psa-pt-card {
  min-width: 0;
  display: flex;
}

.psa-pt-card-in {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.1vw, 38px) clamp(22px, 2.4vw, 32px) clamp(30px, 3.3vw, 40px);
  border: 1px solid var(--p-rule);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 253, 246, .94), rgba(253, 245, 228, .16));
  overflow: hidden;
  transition:
    box-shadow .45s var(--ease),
    border-color .45s var(--ease);
}

.psa-pt-card-in::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--p-gold), rgba(154, 103, 8, .1));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--ease-out) .2s;
}

.psa-pt-card.in .psa-pt-card-in::before { transform: scaleX(1); }

.psa-pt-card-in:hover {
  border-color: rgba(154, 103, 8, .34);
  box-shadow: 0 24px 46px -34px rgba(32, 24, 9, .5);
}

.psa-pt-mark {
  display: flex;
  align-items: center;
  min-height: 46px;
  margin-bottom: clamp(20px, 2.4vw, 26px);
}

.psa-pt-logo {
  display: block;
  width: auto;
  max-width: min(220px, 72%);
  max-height: 46px;
  height: auto;
  object-fit: contain;
  object-position: 0 50%;
}

.psa-pt-glyph {
  display: inline-flex;
  align-items: center;
  color: var(--p-gold);
  font-size: 15px;
}

.psa-pt-card-h {
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: -.014em;
  color: var(--p-ink);
  margin: 0;
  max-width: 20ch;
}

.psa-pt-desc {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--p-gold);
}

.psa-pt-body {
  margin-top: clamp(16px, 1.9vw, 22px);
}

.psa-pt-body p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 300;
  color: var(--p-body);
  text-wrap: pretty;
}

.psa-pt-link {
  position: relative;
  align-self: flex-start;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-gold);
  text-decoration: none;
}

.psa-pt-link-rule {
  display: block;
  height: 1px;
  margin-top: 7px;
  background: currentColor;
  opacity: .38;
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: opacity .45s var(--ease);
}

.psa-pt-link:hover .psa-pt-link-rule { opacity: 1; }

@media (max-width: 599px) {
  .psa-pt-h { max-width: 100%; }
}

/* ---------- Support: Invest · Donate · Partner labels (brief 2.12) ---------- */

.psa-support-ways {
  list-style: none;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}

.psa-support-way {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-hi);
  text-shadow: 0 1px 18px rgba(7, 5, 2, .7);
}

.psa-support-way + .psa-support-way::before {
  content: '·';
  position: absolute;
  left: calc(clamp(14px, 1.8vw, 22px) / -2);
  transform: translateX(-50%);
  opacity: .55;
  letter-spacing: 0;
}

.psa-sec .psa-support-col.stagger > .reveal:nth-child(7) { transition-delay: .62s; }