/* ============================================================
   PERL — Printed Esthetics  |  ATELIER  ·  Round 1 (research-applied)
   Warm light editorial luxury. Bone / ink / champagne.
   Rounded everywhere · horizontal VSL · editorial composition
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bone:#1b1712;
  --bone-2:#221d16;
  --bone-3:#2a241b;
  --paper:#15110c;
  --ink:#f2ede2;
  --ink-90:#e9e2d4;
  --ink-2:#c7bda9;
  --ink-3:#93876f;
  --line:rgba(242,237,226,.16);
  --line-soft:rgba(242,237,226,.08);

  /* gold: champagne/antique primary, true gold reserved for tiny pops */
  --gold:#c9a227;          /* champagne — default accent */
  --gold-deep:#9a7b1c;     /* antique — hairlines/small text on bone */
  --gold-soft:#d8b65a;
  --gold-pop:#ffd700;      /* brand gold — rare pops only */
  --gold-grad:linear-gradient(135deg,#e7cf86,#c9a227 55%,#9a7b1c);

  --f-disp:"Fraunces","Times New Roman",serif;
  --f-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,sans-serif;

  /* fluid type (clamp) */
  --t-eyebrow:clamp(.74rem,.7rem + .12vw,.84rem);
  --t-body:clamp(1.02rem,.98rem + .2vw,1.18rem);
  --t-lead:clamp(1.2rem,1.05rem + .55vw,1.55rem);
  --t-h3:clamp(1.4rem,1.15rem + 1vw,2rem);
  --t-h2:clamp(2.2rem,1.6rem + 2.6vw,4rem);
  --t-h1:clamp(2.2rem,1.2rem + 4.2vw,5rem);
  --t-mega:clamp(2.8rem,1.8rem + 4.6vw,6rem);

  /* rounded-corner system (4px grid, nothing at 0) */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:36px; --r-2xl:52px; --r-max:999px;

  --maxw:1320px;
  --gutter:clamp(1.4rem,6vw,7rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);background:var(--bone);color:var(--ink);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-optical-sizing:auto;
  font-feature-settings:"liga" 1,"calt" 1,"kern" 1;font-variant-numeric:oldstyle-nums proportional-nums;
  text-rendering:optimizeLegibility}
html{hanging-punctuation:first allow-end last}
h1,h2,h3,.eyebrow,figcaption{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
p{max-width:68ch}
.price,.offer__big,.offer__anchor,.compare__row,.hero__meta b,.d-amt{font-variant-numeric:lining-nums tabular-nums}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(201,162,39,.22);color:var(--ink)}

/* grain on the whole page */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.wrap--narrow{max-width:1040px}
.section-pad{padding-block:clamp(5.5rem,13vh,11rem)}
.alt{background:var(--bone-2)}

.eyebrow{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  font-variant-caps:all-small-caps;font-feature-settings:"smcp" 1;display:inline-flex;align-items:center;gap:1em}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--ink-3);opacity:.5}
.eyebrow.solo::before{display:none}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:40px;height:1px;background:var(--ink-3);opacity:.5}
.offer .eyebrow{color:var(--gold-soft)}

h1,h2,h3{font-weight:400;line-height:1.03;letter-spacing:-.018em}
.display{font-family:var(--f-disp);font-weight:300;font-style:normal;font-variation-settings:"opsz" 80,"WONK" .3}
.italic-accent{font-style:normal;font-weight:300;color:var(--gold-soft)}
.lead{font-size:var(--t-lead);color:var(--ink-2);font-weight:300;line-height:1.5;max-width:46ch}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.tm{font-size:.46em;vertical-align:.85em;color:var(--gold-deep);font-weight:600;font-family:var(--f-sans)}
.gold-rule{height:1px;width:100%;background:linear-gradient(90deg,var(--gold-deep),transparent);border:0}

/* masked line reveal wrapper */
.reveal-line{display:block;overflow:hidden;padding-block:.04em}
.reveal-line>span{display:block;will-change:transform}

/* ---------- BUTTONS (all pill / rounded) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.15em 2.2em;border-radius:var(--r-max);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;overflow:hidden;transition:color .55s var(--ease),background .55s var(--ease),border-color .55s var(--ease),transform .3s var(--ease);will-change:transform}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink::after{content:"";position:absolute;inset:0;z-index:0;background:var(--gold-grad);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn-ink:hover{color:var(--ink)} .btn-ink:hover::after{transform:translateY(0)}
.btn-ink>*{position:relative;z-index:1}
.btn-line{border:1px solid var(--line);color:var(--ink);background:rgba(251,250,246,.4);backdrop-filter:blur(4px)}
.btn-line:hover{border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.link-gold{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:.4em;border-bottom:1px solid var(--gold-deep);color:var(--ink)}
.link-gold .arrow,.btn .arrow{transition:transform .4s var(--ease)}
.link-gold:hover .arrow,.btn:hover .arrow{transform:translateX(5px)}

/* ---------- NAV ---------- */
#pnav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gutter);transition:.5s var(--ease)}
#pnav.scrolled{background:rgba(244,241,234,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft);padding-block:.85rem}
#pnav__logo{font-family:var(--f-disp);font-weight:400;font-size:1.85rem;letter-spacing:.03em;font-variation-settings:"opsz" 72,"WONK" .2}
#pnav__r{display:flex;align-items:center;gap:1.8rem}
#pnav__loc{font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
#pnav__home{font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color .3s var(--ease)}
#pnav__home:hover,#pnav__home:focus-visible{color:var(--gold-deep)}
#pnav .btn{padding:.85em 1.6em}
#pnav__cta-short{display:none} /* desktop default: show full label; narrow screens flip below */

/* progress line */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:transparent;z-index:1001}
.progress__bar{height:100%;width:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(201,162,39,.6)}

/* ---------- HERO (16:9 VSL centerpiece) ---------- */
.hero{padding-top:clamp(7rem,14vh,10rem);padding-bottom:clamp(3rem,6vh,5rem);position:relative;overflow:hidden}
.hero__head{max-width:none}
.hero__eyebrow{margin-bottom:1.8rem}
.hero h1{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h1);line-height:1;letter-spacing:-.038em;
  font-variation-settings:"opsz" 144,"WONK" .35}
.hero h1 .reveal-line>span{white-space:nowrap}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
.hero h1 .vweight{font-variation-settings:"opsz" 144,"wght" var(--hw,360),"WONK" .3}
.hero__sub{margin-top:1.1rem;max-width:50ch}
.hero__vsl{margin-top:clamp(3rem,7vh,5rem)}
.vframe{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:#000;
  box-shadow:0 50px 120px -50px rgba(22,19,13,.45);aspect-ratio:16/9}
.vframe video,.vframe>img{width:100%;height:100%;object-fit:cover}
.vframe__play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(120deg,rgba(22,19,13,.25),transparent 55%)}
.play-btn{width:clamp(70px,8vw,104px);aspect-ratio:1;border-radius:var(--r-max);background:rgba(251,250,246,.86);backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--ink);transition:.45s var(--ease)}
.play-btn:hover{transform:scale(1.07);background:var(--gold-pop)}
.vframe__tag{position:absolute;top:1.2rem;left:1.4rem;background:rgba(251,250,246,.9);padding:.4rem .9rem;border-radius:var(--r-max);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);z-index:2}
.vframe__cap{position:absolute;left:1.6rem;bottom:1.4rem;color:var(--bone);font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;z-index:2;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero__actions{margin-top:1.4rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.hero__meta{margin-top:2.6rem;display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;align-items:flex-start;
  border-top:1px solid var(--line-soft);padding-top:1.6rem}
.hero__meta div b{display:block;font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);font-variation-settings:"opsz" 72}
.hero__meta div span{color:var(--ink-3);font-size:var(--t-eyebrow);letter-spacing:.04em}

/* ---------- SECTION HEADER ---------- */
.s-head{max-width:60ch}
.s-head h2{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h2);margin-top:1.4rem;line-height:1.02;font-variation-settings:"opsz" 110,"WONK" .3}
.s-head .lead{margin-top:1.6rem}
.s-head.center{margin-inline:auto;text-align:center}
.s-head.center .lead{margin-inline:auto}

/* ---------- ENEMY (asymmetric) ---------- */
.enemy__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.enemy__big{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h2);line-height:1.08;max-width:16ch;font-variation-settings:"opsz" 120,"WONK" .3}
.enemy__big .u{position:relative;white-space:nowrap}
.enemy__big .u::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:2px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.enemy__big .u.struck::after{transform:scaleX(1)}
.enemy__list{margin-top:2.4rem;display:grid;gap:0}
.enemy__list div{padding:1.3rem 0;border-top:1px solid var(--line);display:flex;gap:1.2rem;align-items:baseline}
.enemy__list .k{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);flex:none;min-width:5ch;font-variation-settings:"opsz" 60}
.enemy__list .l{color:var(--ink-3)}
.enemy__photo{border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:4/5;position:relative}
.enemy__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.02)}
.enemy__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(22,19,13,.28))}
@media(max-width:860px){.enemy__grid{grid-template-columns:1fr}.enemy__photo{order:-1;aspect-ratio:16/10}}

/* ---------- REVEAL (editorial) ---------- */
.reveal-hero{font-family:var(--f-disp);font-weight:300;font-size:var(--t-mega);line-height:.98;letter-spacing:-.025em;
  font-variation-settings:"opsz" 144,"WONK" .35;max-width:14ch}
.reveal-img{margin-top:clamp(2rem,5vh,4rem);border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:21/9;position:relative;isolation:isolate}
.reveal-img img{width:100%;height:100%;object-fit:cover}
/* auto-crossfading smile gallery */
.reveal-slides img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.reveal-slides img.is-active{opacity:1}
@media (prefers-reduced-motion: reduce){ .reveal-slides img{transition:none} }
.reveal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vh,4rem)}
.diff{padding-top:1.6rem;border-top:1px solid var(--line)}
.diff .n{font-family:var(--f-disp);font-weight:300;font-size:var(--t-eyebrow);color:var(--gold-deep);letter-spacing:.1em}
.diff h3{font-size:var(--t-h3);font-family:var(--f-disp);font-weight:300;margin-block:.7rem .5rem;font-variation-settings:"opsz" 50}
.diff p{color:var(--ink-2)}
.reveal-line2{max-width:40ch;margin-top:1.6rem;color:var(--ink-2);font-size:var(--t-lead);font-weight:300}
@media(max-width:760px){.reveal-row{grid-template-columns:1fr;gap:0}.diff{padding-block:1.4rem}}

/* ---------- BEFORE / AFTER (scroll clip reveal) ---------- */
.ba__stage{position:relative;margin:2.2rem auto 0;overflow:hidden;border-radius:var(--r-2xl);border:1px solid var(--line);
  width:100%;max-width:720px;aspect-ratio:4/3;max-height:58vh;background:var(--bone-3);box-shadow:0 50px 110px -55px rgba(22,19,13,.4)}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 100%)}            /* revealed by scroll */
.ba__line{position:absolute;top:0;bottom:0;width:2px;background:var(--bone);box-shadow:0 0 22px rgba(255,255,255,.6);left:0;z-index:3;opacity:0}
.ba__label{position:absolute;top:1.3rem;padding:.45em 1.1em;border-radius:var(--r-max);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(251,250,246,.85);backdrop-filter:blur(8px);z-index:4;color:var(--ink)}
.ba__label.b{left:1.3rem}.ba__label.a{right:1.3rem;color:var(--gold-deep)}
.ba__cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.6rem;gap:1rem;flex-wrap:wrap}
.ba__cap .who{font-family:var(--f-disp);font-style:normal;font-weight:300;font-size:var(--t-lead)}
.ba__cap .meta{color:var(--ink-3);font-size:var(--t-eyebrow);letter-spacing:.04em}
.ba__row{display:flex;justify-content:center;gap:clamp(.7rem,1.4vw,1.1rem);margin-top:1.7rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.ba__row figure{position:relative;flex:none;width:clamp(132px,15vw,176px);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;border:1px solid var(--line-soft);cursor:pointer}
.ba__row img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ba__row figure:hover img{transform:scale(1.05)}
.ba__row figcaption{position:absolute;left:1rem;bottom:1rem;color:var(--bone);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.ba__row figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(22,19,13,.45))}

/* ---------- OFFER (dark inversion) ---------- */
.offer{background:var(--ink);color:var(--bone);border-radius:var(--r-2xl) var(--r-2xl) 0 0;box-shadow:0 -40px 80px -30px rgba(22,19,13,.2)}
#doctor{background:var(--bone-3)}
.auth__quote{font-size:var(--t-h2)!important}
.offer .eyebrow{color:var(--gold-soft)}.offer .eyebrow::before{background:var(--gold-soft)}
.offer h2{font-family:var(--f-disp);font-weight:300;color:var(--bone);font-size:var(--t-h2);font-variation-settings:"opsz" 110,"WONK" .3}
.offer__wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5.5rem);align-items:center;margin-top:3rem}
.compare{border:1px solid rgba(244,241,234,.16);border-radius:var(--r-xl);overflow:hidden;background:rgba(244,241,234,.03)}
.compare__row{display:grid;grid-template-columns:1.3fr .9fr 1.2fr;align-items:center;padding:1.1rem 1.4rem;border-bottom:1px solid rgba(244,241,234,.1);font-size:var(--t-eyebrow)}
.compare__row:last-child{border-bottom:0}
.compare__row.head{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bone)}
.compare__row .por{color:rgba(244,241,234,.5)}
.compare__row .perl{color:var(--gold-soft);font-weight:600;padding-left:1.1rem;margin-left:-.3rem;
  border-left:1px solid rgba(216,182,90,.25);background:linear-gradient(rgba(216,182,90,.07),rgba(216,182,90,.07))}
.compare__row.head .perl{border-top:2px solid var(--gold-soft)}
.compare__row span:first-child{color:rgba(244,241,234,.8)}
.offer__price{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-block:1.4rem}
.offer__anchor{font-family:var(--f-disp);font-size:var(--t-h3);color:rgba(244,241,234,.4);text-decoration:line-through}
.offer__big{font-family:var(--f-disp);font-weight:300;font-size:var(--t-mega);line-height:1;font-variation-settings:"opsz" 144}
.offer__mo{color:var(--gold-soft);font-size:var(--t-lead);font-family:var(--f-disp);font-style:normal}
.offer__stack{list-style:none;display:grid;gap:0;margin-block:1.4rem}
.offer__stack li{display:flex;gap:1rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid rgba(244,241,234,.1);color:var(--bone)}
.offer__stack li::before{content:"";width:6px;height:6px;flex:none;margin-top:.75em;border-radius:var(--r-max);background:rgba(244,241,234,.55)}
.offer__fin{color:rgba(244,241,234,.6);font-size:var(--t-eyebrow);margin-block:1.4rem 2rem}
.offer__fin b{color:var(--bone)}
@media(max-width:860px){.offer__wrap{grid-template-columns:1fr}}

/* ---------- PROCESS (horizontal pin) ---------- */
.process__pin{padding-block:clamp(2rem,5vh,4rem) clamp(4rem,9vh,7rem)}
.process__track{display:flex;gap:clamp(1.2rem,3vw,2.4rem);width:max-content;padding-block:3rem;align-items:stretch}
.step{width:clamp(290px,40vw,440px);flex:none;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:2.6rem;min-height:380px;display:flex;flex-direction:column;position:relative}
.step__n{font-family:var(--f-disp);font-weight:200;font-size:clamp(5rem,9vw,9rem);line-height:.8;color:var(--gold);
  font-variation-settings:"opsz" 144,"wght" 200;margin-bottom:auto;opacity:.9}
.step h3{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);margin-bottom:.7rem;font-variation-settings:"opsz" 50}
.step p{color:var(--ink-2)}
.step__time{margin-top:1.6rem;font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
@media(max-width:760px){.process__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}.step{scroll-snap-align:start}}

/* ---------- AUTHORITY (edge-bleed portrait) ---------- */
.auth__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.auth__photo{position:relative;min-height:560px;border-radius:0 var(--r-2xl) var(--r-2xl) 0;overflow:hidden}
.auth__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}
.auth__body{padding:clamp(2rem,5vw,4.5rem) 0 clamp(2rem,5vw,4.5rem) clamp(2rem,5vw,4.5rem)}
.auth__quote{font-family:var(--f-disp);font-weight:300;font-style:normal;font-size:var(--t-h3);line-height:1.18;margin-block:1.4rem;font-variation-settings:"opsz" 60}
.auth__sig{height:64px;margin-top:2rem;filter:brightness(0);opacity:.82}
.auth__name{font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:.7rem}
@media(max-width:860px){.auth__grid{grid-template-columns:1fr}.auth__photo{min-height:60vh;border-radius:var(--r-2xl)}.auth__body{padding:2.5rem 0 0}}

/* ---------- FAQ (two-column) ---------- */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq__anchor{position:sticky;top:7rem}
.faq__anchor h2{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h2);line-height:1;font-variation-settings:"opsz" 120,"WONK" .3}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.8rem 0;font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);font-variation-settings:"opsz" 40}
.faq__q .pm{flex:none;width:30px;height:30px;position:relative}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--ink-3);transition:.4s var(--ease)}
.faq__q .pm::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
.faq__q .pm::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.faq__item.open .pm::after{transform:translateX(-50%) scaleY(0)}
.faq__a{overflow:hidden;height:0;transition:height .45s var(--ease)}
.faq__a p{color:var(--ink-2);padding-bottom:1.8rem;max-width:60ch}
@media(max-width:860px){.faq__grid{grid-template-columns:1fr}.faq__anchor{position:static}}

/* ---------- SOCIAL PROOF (marquee + cards, no stars) ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.8rem;margin-top:3rem;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:3.5rem;width:max-content;will-change:transform}
.marquee__track span{font-family:var(--f-disp);font-weight:300;font-style:normal;font-size:var(--t-h3);white-space:nowrap;color:var(--ink-2);font-variation-settings:"opsz" 50}
.marquee__track span::after{content:"·";margin-left:3.5rem;color:var(--ink-3);opacity:.4;font-style:normal}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:3rem}
.tcard{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:2.4rem;display:flex;flex-direction:column;gap:1.4rem}
.tcard p{font-family:var(--f-disp);font-weight:300;font-size:var(--t-lead);line-height:1.35;font-variation-settings:"opsz" 40}
.tcard .who{margin-top:auto;font-size:var(--t-eyebrow);color:var(--ink-3);letter-spacing:.04em}
.tcard.video{padding:0;overflow:hidden;position:relative;min-height:340px;grid-row:span 1}
.tcard.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard.video .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 45%,rgba(22,19,13,.5))}
.tcard.video .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;color:var(--bone);font-size:var(--t-eyebrow);letter-spacing:.1em;text-transform:uppercase;z-index:2}
.tcard.warm{background:var(--ink);color:var(--bone)}.tcard.warm p{color:var(--bone)}.tcard.warm .who{color:rgba(244,241,234,.6)}
@media(max-width:860px){.proof__grid{grid-template-columns:1fr}}

/* ---------- CONVERSION (split) ---------- */
.convert__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;align-items:stretch;border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.convert__aside{position:relative;min-height:100%;padding:clamp(2rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:flex-end;color:var(--bone);overflow:hidden}
.convert__aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.convert__aside::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(22,19,13,.2),rgba(22,19,13,.82));z-index:1}
.convert__aside>*{position:relative;z-index:2}
.convert__aside h2{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h2);line-height:1.02;margin-bottom:1.2rem;font-variation-settings:"opsz" 90}
.convert__aside ul{list-style:none;display:grid;gap:.9rem;margin-top:1rem}
.convert__aside li{display:flex;gap:.8rem;font-size:var(--t-body);color:rgba(244,241,234,.9)}
.convert__aside li::before{content:"";width:16px;height:16px;flex:none;margin-top:.3em;background:var(--gold-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center/13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center/13px no-repeat}
.form-pane{padding:clamp(1.8rem,4vw,3rem)}
.form__progress{display:flex;gap:.5rem;margin-bottom:2.2rem}
.form__progress span{height:3px;flex:1;background:var(--line);border-radius:var(--r-max);overflow:hidden}
.form__progress span::after{content:"";display:block;height:100%;width:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.form__progress span.done::after{transform:scaleX(1)}
.fstep{display:none}.fstep.active{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fstep h3{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);margin-bottom:.4rem;font-variation-settings:"opsz" 40}
.fstep p.sub{color:var(--ink-3);margin-bottom:1.6rem;font-size:var(--t-eyebrow)}
.opt{display:block;width:100%;text-align:left;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.7rem;transition:.3s var(--ease);color:var(--ink)}
.opt:hover,.opt.sel{border-color:var(--gold-deep);background:rgba(201,162,39,.07)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:var(--t-eyebrow);color:var(--ink-3);margin-bottom:.5rem;letter-spacing:.06em;text-transform:uppercase}
.field .hint{color:var(--ink-3);font-size:.74rem;margin-top:.4rem;text-transform:none;letter-spacing:0}
.field input{width:100%;padding:1rem 1.1rem;background:var(--bone);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-size:var(--t-body);font-family:inherit}
.field input:focus{outline:none;border-color:var(--gold-deep)}
.field textarea{width:100%;padding:1rem 1.1rem;background:var(--bone);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-size:var(--t-body);font-family:inherit}
.field textarea:focus{outline:none;border-color:var(--gold-deep)}
.form__nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:1rem}
.form__back{font-size:var(--t-eyebrow);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.deposit-box{border:1px solid var(--gold-deep);border-radius:var(--r-md);padding:1.4rem;background:rgba(201,162,39,.08);margin-block:1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.deposit-box .d-amt{font-family:var(--f-disp);font-size:var(--t-h3);color:var(--ink);font-variation-settings:"opsz" 50}
.trust-micro{display:flex;align-items:center;gap:.5em;justify-content:center;margin-top:1.2rem;font-size:.76rem;color:var(--ink-3);letter-spacing:.03em}
@media(max-width:860px){.convert__grid{grid-template-columns:1fr}.convert__aside{min-height:46vh}}

/* ---------- FINAL CLOSE ---------- */
.close{position:relative;text-align:center;background:var(--ink);color:var(--bone);overflow:hidden}
.close__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.24) saturate(.6);z-index:0}
.close::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent,rgba(8,7,5,.6));z-index:1}
.close .wrap{padding-block:clamp(6rem,16vh,12rem);position:relative;z-index:2}
.close__scarcity{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1.3em;border:1px solid rgba(244,241,234,.2);border-radius:var(--r-max);
  font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.75);margin-bottom:2.4rem}
.dot{width:7px;height:7px;border-radius:var(--r-max);background:var(--gold-pop);box-shadow:0 0 0 4px rgba(255,215,0,.22);animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,215,0,0)}}
.close__big{font-family:var(--f-disp);font-weight:300;font-size:var(--t-mega);line-height:1.02;max-width:16ch;margin-inline:auto;color:var(--bone);font-variation-settings:"opsz" 144,"WONK" .35}
.close__big em{font-style:normal;color:var(--gold-soft)}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink);color:rgba(244,241,234,.7);padding-block:3.5rem}
.foot__row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.foot__logo{font-family:var(--f-disp);font-size:1.6rem;color:var(--bone);font-variation-settings:"opsz" 40}
.foot__links{display:flex;gap:1.8rem;font-size:var(--t-eyebrow);letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap}
.foot__fine{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(244,241,234,.12);font-size:.74rem;color:rgba(244,241,234,.4);max-width:96ch;line-height:1.8}

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:900;display:none}
.sticky-cta .btn{width:100%}

/* ---------- VSL MODAL ---------- */
.vsl-modal{position:fixed;inset:0;z-index:2000;background:rgba(22,19,13,.88);backdrop-filter:blur(10px);display:none;place-items:center;padding:var(--gutter)}
.vsl-modal.open{display:grid;animation:fade .4s var(--ease)}
.vsl-frame{width:min(1080px,100%);position:relative}
.vsl-frame video{width:100%;border-radius:var(--r-lg);border:1px solid rgba(244,241,234,.2);background:#000;aspect-ratio:16/9;object-fit:cover}
.vsl-note{text-align:center;margin-top:1rem;font-size:var(--t-eyebrow);color:rgba(244,241,234,.5);letter-spacing:.14em;text-transform:uppercase}
.vsl-close{position:absolute;top:-3rem;right:0;font-size:2.2rem;line-height:1;color:var(--bone)}

/* ---------- REVEAL HOOKS ---------- */
[data-reveal]{opacity:0;transform:translateY(24px)}
.reveal-in{opacity:1!important;transform:none!important;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .hero h1{font-size:clamp(2.6rem,9vw,4rem)}
  .reveal-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  #pnav__loc{display:none}
  .hero__actions .btn,.hero__actions .link-gold{width:100%;justify-content:center}
  .sticky-cta{display:block}
  .proof__grid{grid-template-columns:1fr}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .marquee__track{transform:none!important}
}

/* unified editorial photo grade */
.reveal-img img,.ba__img,.ba__row img,.enemy__photo img,.auth__photo img,.convert__aside img,.tcard.video img,.vframe video,.vframe>img{
  filter:contrast(1.03) saturate(.9) brightness(1.02)}
.enemy__photo img{filter:grayscale(.5) contrast(1.04) brightness(1.0)}

/* padding tiers */
.section-pad--xl{padding-block:clamp(7rem,18vh,14rem)}
.section-pad--sm{padding-block:clamp(4rem,9vh,7rem)}

/* luster cursor (desktop, distinctive) */
.luster{position:fixed;top:0;left:0;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:60;
  transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(circle,rgba(216,182,90,.5),rgba(216,182,90,.12) 40%,transparent 68%);transition:opacity .5s ease}
@media(hover:none){.luster{display:none}}

/* sticky CTA scroll behavior */
.sticky-cta{transform:translateY(140%);transition:transform .5s var(--ease)}
.sticky-cta.show{transform:translateY(0)}

/* mobile refinements (R3) */
@media(max-width:540px){
  .compare__row{grid-template-columns:1fr 1fr;row-gap:.2rem}
  .compare__row span:first-child{grid-column:1/-1;color:var(--gold-soft);font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding-bottom:.2rem}
  .compare__row.head span:first-child{display:none}
  .form__nav{flex-direction:column-reverse;gap:.7rem}
  .form__nav .btn{width:100%}
  .form__back{padding:.85rem 1rem;min-height:44px;border:1px solid var(--line);border-radius:var(--r-max);text-align:center}
  .reveal-img{aspect-ratio:16/9}
}
@media(max-width:480px){
  .vframe{aspect-ratio:4/3}
  .convert__aside{min-height:200px!important}
  .hero h1 .reveal-line>span{white-space:normal}
}
.vsl-close{min-width:48px;min-height:48px;display:grid;place-items:center}

/* squircle where supported */
@supports(corner-shape:squircle){
  .vframe,.tcard,.step,.enemy__photo,.reveal-img,.ba__stage,.compare,.convert__grid,.deposit-box,.field input,.opt{corner-shape:squircle}
}

/* ============================================================
   CLIENT REVISIONS (section-by-section notes)
   ============================================================ */

/* HERO — big, centered landing style */
.hero--center{text-align:center;padding-top:clamp(8rem,16vh,11rem)}
.hero--center .hero__head{max-width:none;margin-inline:auto}
.hero--center .hero h1{font-size:clamp(2.6rem,1.6rem + 5vw,6.4rem);line-height:1;letter-spacing:-.03em}
.hero--center .hero__sub{margin:1.5rem auto 0;max-width:50ch;font-size:var(--t-lead)}
.hero--center .hero__actions{justify-content:center}
.hero--center .hero__vsl{max-width:1080px;margin-inline:auto}
@media(max-width:600px){.hero--center .hero h1 .reveal-line>span{white-space:normal}}

/* ENEMY — two-column pros / cons */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.8rem);margin-top:clamp(2.5rem,5vh,4rem)}
.vs__col{border:1px solid var(--line);border-radius:var(--r-2xl);padding:clamp(1.8rem,3.4vw,3rem)}
.vs__col--good{background:var(--paper);border-color:rgba(154,123,28,.45);box-shadow:0 30px 70px -50px rgba(22,19,13,.4)}
.vs__col h3{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);margin-bottom:1.6rem;font-variation-settings:"opsz" 60}
.vs__col--bad h3{color:var(--ink-3)}
.vs__col ul{list-style:none;display:grid;gap:1rem}
.vs__col li{position:relative;padding-left:2rem;color:var(--ink-2);font-size:var(--t-body)}
.vs__col li::before{position:absolute;left:0;top:.05em;font-weight:700}
.vs__col--bad li{color:var(--ink-3)}
.vs__col--bad li::before{content:"\00d7";color:var(--ink-3);font-size:1.2em}
.vs__col--good li{color:var(--ink)}
.vs__col--good li::before{content:"\2713";color:var(--gold-deep)}
@media(max-width:720px){.vs{grid-template-columns:1fr}}

/* REVEAL — text left, image right + static diffs */
.reveal-top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.reveal-copy h2{margin-bottom:1.4rem}
.reveal-copy .reveal-hero{font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem)}
.reveal-copy p{color:var(--ink-2);max-width:48ch;margin-top:1rem;font-size:var(--t-lead);font-weight:300}
.reveal-top .reveal-img{margin-top:0;aspect-ratio:4/5}
@media(max-width:820px){.reveal-top{grid-template-columns:1fr}.reveal-top .reveal-img{aspect-ratio:16/10}}

/* PROCESS — static 4-up, no motion */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem);margin-top:clamp(2.5rem,5vh,4rem)}
.steps-grid .step{width:auto;min-height:0;flex:initial}
@media(max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps-grid{grid-template-columns:1fr}}

/* OFFER — pricing card */
.price-card{display:grid;grid-template-columns:1.1fr .9fr;margin:clamp(2.5rem,5vh,4rem) auto 0;max-width:1020px;
  border:1px solid rgba(244,241,234,.18);border-radius:var(--r-2xl);overflow:hidden}
.price-main{padding:clamp(2rem,4vw,3.6rem);display:flex;flex-direction:column;align-items:flex-start}
.price-label{font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);font-variant-caps:all-small-caps}
.price-amt{font-family:var(--f-disp);font-weight:300;font-size:var(--t-mega);line-height:1;color:var(--bone);margin:.6rem 0 1rem;font-variation-settings:"opsz" 144;font-variant-numeric:lining-nums tabular-nums}
.price-mo{color:var(--gold-soft);font-family:var(--f-disp);font-style:normal;font-size:var(--t-lead)}
.price-compare{color:rgba(244,241,234,.5);font-size:var(--t-eyebrow);margin-top:.8rem}
.price-main .btn{margin-top:2rem}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone::after{content:"";position:absolute;inset:0;z-index:0;background:var(--gold-grad);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn-bone:hover::after{transform:translateY(0)}.btn-bone>*{position:relative;z-index:1}
.price-incl{background:rgba(244,241,234,.04);padding:clamp(2rem,4vw,3.6rem);border-left:1px solid rgba(244,241,234,.12)}
.price-incl__h{font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.6);display:block;margin-bottom:1.4rem}
.price-incl ul{list-style:none;display:grid;gap:.9rem}
.price-incl li{display:flex;gap:.8rem;color:var(--bone)}
.price-incl li::before{content:"";width:7px;height:7px;flex:none;margin-top:.55em;border-radius:var(--r-max);background:var(--gold-soft)}
@media(max-width:760px){.price-card{grid-template-columns:1fr}.price-incl{border-left:0;border-top:1px solid rgba(244,241,234,.12)}}

/* AUTHORITY — heading + centered portrait */
.auth__h{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h2);line-height:1.04;margin-block:.6rem 1rem;font-variation-settings:"opsz" 110,"WONK" .3}
.auth__photo img{object-position:50% 18%}

/* BEFORE/AFTER — drag handle, hint, smaller catalog */
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bone);z-index:5;cursor:ew-resize;
  transform:translateX(-50%);box-shadow:0 0 22px rgba(0,0,0,.35)}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:var(--r-max);
  background:var(--bone);border:1px solid var(--gold-deep);display:grid;place-items:center;color:var(--ink);box-shadow:0 12px 34px -10px rgba(22,19,13,.5)}
.ba__hint{text-align:center;color:var(--ink-3);font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;margin-top:1.3rem}
.ba__row{justify-content:center;flex-wrap:wrap}
.ba__row .ba__case{flex:none;width:clamp(110px,12vw,150px);aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-soft);padding:0;background:none;cursor:pointer;position:relative;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.ba__row .ba__case img{width:100%;height:100%;object-fit:cover}
.ba__row .ba__case:hover{transform:translateY(-3px)}
.ba__row .ba__case.active{border-color:var(--gold-deep);box-shadow:0 0 0 2px rgba(154,123,28,.35)}

/* FORM — consistent height (no resize jump) */
.fstep{min-height:340px}
@media(max-width:480px){.fstep{min-height:300px}}

/* ============================================================
   TYPE SYSTEM v2 — masculine modern (Archivo) + feminine modern (Fraunces)
   ============================================================ */
:root{ --f-masc:"Archivo","Source Sans 3",sans-serif; }

/* masculine display (wide, architectural) — for structural words */
.masc{font-family:var(--f-masc);font-weight:700;font-variation-settings:"wdth" 125,"wght" 720;
  text-transform:uppercase;letter-spacing:.005em}
/* feminine accent (Fraunces italic) */
.fem{font-family:var(--f-disp);font-style:italic;font-weight:300;font-variation-settings:"opsz" 144,"WONK" .35}

/* HERO — big, wide, fills the frame */
.hero--center{padding-top:clamp(6.5rem,11vh,8.5rem)}
.hero--center .hero h1{font-size:clamp(3rem,1.6rem + 7vw,8.6rem);line-height:.92;letter-spacing:-.02em;max-width:none}
.hero--center .hero h1 .reveal-line>span{white-space:nowrap}
.hero--center .hero h1 .fem{font-size:1.04em;letter-spacing:-.01em;text-transform:none}
.hero--center .hero__head{max-width:none;width:100%}
@media(max-width:640px){
  .hero--center .hero h1{font-size:clamp(2.4rem,7vw,3.4rem)}
  .hero--center .hero h1 .reveal-line>span{white-space:normal}
}

/* SECTION HEADERS — masculine structural word + feminine accent */
.s-head h2,.reveal-copy .reveal-hero,.offer h2,.faq__anchor h2,.convert__aside h2,.auth__h{
  font-family:var(--f-masc);font-weight:600;font-variation-settings:"wdth" 105,"wght" 600;
  letter-spacing:-.012em;line-height:1.04}
.display,.italic-accent{font-family:var(--f-disp)!important;font-weight:300!important}
/* keep the emotional statement lines feminine (Fraunces) for contrast */
.enemy__big,.close__big,.auth__quote,.tcard p,.marquee__track span,.ba__cap .who{font-family:var(--f-disp)}

/* ============================================================
   TYPE SYSTEM v3 — client brand fonts only: Oswald + Source Sans 3
   Oswald = display/headlines (heavier). Source Sans = workhorse.
   ============================================================ */
:root{ --f-disp:"Oswald","Source Sans 3",sans-serif; --f-masc:"Oswald",sans-serif; }

/* pull sub-level text back to the clean workhorse sans */
.faq__q,.vs__col h3,.step h3,.diff h3,.diff .n,.tcard p,.tcard .who,.marquee__track span,
.ba__cap .who,.ba__cap .meta,.convert__aside li,.price-incl,.auth__name,figcaption,.lead,.hero__sub{
  font-family:var(--f-sans)!important}

/* HERO — Oswald, big weight contrast, wide uppercase masculine + light feminine */
.hero h1{font-variation-settings:normal}
.hero--center .hero h1 .masc{font-family:var(--f-disp);font-weight:700;font-variation-settings:normal;
  text-transform:uppercase;letter-spacing:.014em}
.hero--center .hero h1 .fem{font-family:var(--f-disp);font-weight:300;font-style:normal;font-variation-settings:normal;
  text-transform:none;letter-spacing:.012em;font-size:1em}

/* SECTION HEADERS — Oswald, more weight; accent words lighter for contrast */
.s-head h2,.reveal-copy .reveal-hero,.offer h2,.faq__anchor h2,.convert__aside h2,.auth__h{
  font-family:var(--f-disp);font-weight:600;font-variation-settings:normal;letter-spacing:.008em;line-height:1.06}
.display,.italic-accent{font-family:var(--f-disp)!important;font-weight:300!important;font-style:normal!important;
  font-variation-settings:normal!important;letter-spacing:.01em}

/* big statement lines — Oswald, medium weight, sentence case */
.enemy__big{font-family:var(--f-disp);font-weight:400;font-variation-settings:normal;line-height:1.14;letter-spacing:.006em}
.close__big{font-family:var(--f-disp);font-weight:500;font-variation-settings:normal;letter-spacing:.008em}
.close__big em{font-style:normal;font-weight:300}
.auth__quote{font-family:var(--f-disp);font-weight:400;font-style:normal;font-variation-settings:normal;line-height:1.18;letter-spacing:.006em}

/* sub-headings — clean sans, semibold */
.vs__col h3,.step h3,.diff h3{font-weight:600;font-variation-settings:normal}
.vs__col h3{text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-lead)}
.faq__q{font-weight:400;font-size:var(--t-h3)}

/* numbers — Oswald */
.step__n{font-family:var(--f-disp);font-weight:300;font-variation-settings:normal}
.price-amt{font-family:var(--f-disp);font-weight:600;font-variation-settings:normal;letter-spacing:.01em}
.hero__meta b{font-family:var(--f-disp);font-variation-settings:normal}

/* nav logo — Oswald */
#pnav__logo{font-family:var(--f-disp);font-weight:600;font-variation-settings:normal;letter-spacing:.06em}

/* tighten masked-reveal padding so Oswald caps aren't clipped */
.reveal-line{padding-block:.08em}

/* ============================================================
   REVISION v4 — palette (black/white, not sterile), gradients,
   redesigned vs + steps, hero 2-line, bio
   ============================================================ */
:root{
  --bone:#f5f4f2; --bone-2:#eae9e6; --bone-3:#e0dfdb; --paper:#fcfcfb;
  --ink:#141312; --ink-2:#444240; --ink-3:#7c7a77;
  --line:rgba(20,19,18,.14); --line-soft:rgba(20,19,18,.08);
}
/* dynamic gradient backgrounds (not flat) */
body{background:radial-gradient(150% 100% at 50% 0%, #f8f8f6 0%, #f1f0ed 55%, #e8e7e3 100%);background-attachment:fixed}
.section-pad.alt{background:linear-gradient(180deg,#edece9 0%,#e3e2de 100%)}
#doctor{background:linear-gradient(180deg,#e9e8e4,#dededa)}
.offer{background:radial-gradient(130% 110% at 50% 0%, #211f1d 0%, #100f0e 70%)}
.close{background:#100f0e}
.grain-soft{}

/* HERO — 2 lines, ~video width */
.hero--center .hero__head{max-width:1080px;margin-inline:auto}
.hero--center .hero h1{font-size:clamp(2.4rem,1rem + 6.6vw,7.2rem);line-height:.96;letter-spacing:.012em}
.hero--center .hero h1 .masc{white-space:nowrap}
@media(max-width:600px){.hero--center .hero h1{font-size:clamp(2.2rem,9vw,3.2rem)}.hero--center .hero h1 .masc{white-space:normal}}

/* ENEMY — richer, dark PERL column vs light Old Way */
.vs{align-items:stretch;margin-top:clamp(2.5rem,5vh,4rem)}
.vs__col{position:relative;border-radius:var(--r-2xl);padding:clamp(2rem,3.4vw,3.2rem);overflow:hidden;display:flex;flex-direction:column}
.vs__col--bad{background:linear-gradient(180deg,#ecebe8,#e2e1dd);border:1px solid var(--line)}
.vs__col--good{background:linear-gradient(165deg,#201f1c 0%,#100f0e 100%);color:var(--bone);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.55);border:1px solid rgba(216,182,90,.25)}
.vs__col--good::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 100% 0%,rgba(216,182,90,.16),transparent 60%);pointer-events:none}
.vs__col>*{position:relative}
.vs__tag{display:inline-block;font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:.45em 1.1em;border-radius:var(--r-max);border:1px solid var(--line);color:var(--ink-3);margin-bottom:1.4rem}
.vs__tag--gold{background:linear-gradient(135deg,#f4e7bf,#e3c97f);color:#1a1505;border-color:transparent}
.vs__col h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.8rem,1rem + 2vw,2.8rem);text-transform:none!important;letter-spacing:.01em;margin-bottom:1.6rem}
.vs__col--good h3{color:var(--bone)}
.vs__col--bad h3{color:var(--ink)}
.vs__col ul{list-style:none;display:grid;gap:0;margin-top:auto}
.vs__col li{position:relative;padding:1rem 0 1rem 2.6rem;border-top:1px solid var(--line-soft);font-size:var(--t-body)}
.vs__col--good li{border-color:rgba(244,241,234,.12)}
.vs__col li:first-child{border-top:0}
.vs__col li::before{position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;font-weight:700}
.vs__col--bad li{color:var(--ink-3)}
.vs__col--bad li::before{content:"\00d7";background:rgba(20,19,18,.07);color:var(--ink-3)}
.vs__col--good li{color:var(--bone)}
.vs__col--good li::before{content:"\2713";background:#ead08a;color:#241a05}

/* PROCESS — higher-end cards, number NOT overlapping title */
.steps-grid{align-items:stretch}
.steps-grid .step{display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,#fdfdfc,#f4f3f0);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.8rem,2.6vw,2.6rem);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.steps-grid .step:hover{transform:translateY(-5px);box-shadow:0 36px 70px -45px rgba(20,19,18,.4)}
.steps-grid .step__n{position:static;font-family:var(--f-disp);font-weight:300;font-size:clamp(2.4rem,3vw,3.4rem);
  line-height:1;color:var(--gold-deep);margin:0 0 1.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line);display:block;width:100%}
.steps-grid .step h3{font-family:var(--f-disp);font-weight:600;font-size:var(--t-h3);margin-bottom:.6rem;text-transform:none}
.steps-grid .step p{color:var(--ink-2)}
.steps-grid .step__time{margin-top:auto;padding-top:1.2rem;color:var(--gold-deep)}

/* AUTHORITY heading sizing */
.auth__h{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.04;text-transform:none}

/* ============================================================
   REVISION v5 — hero: creative headline, layered warm background,
   video fully visible on first paint (not cut off)
   ============================================================ */

/* tighten the stack so the headline + video both land above the fold */
.hero--center{padding-top:clamp(5.5rem,9vh,7.5rem);padding-bottom:clamp(2rem,4vh,3rem)}
.hero--center .hero__head{margin-bottom:0}
.hero__sub{margin-top:1rem}
.hero__vsl{margin-top:clamp(1.4rem,3.4vh,2.6rem);
  width:min(100%, calc(46vh * 16 / 9));margin-inline:auto}
.hero__actions{margin-top:1.3rem;justify-content:center}

/* layered "mesh" background — warm gold glows instead of one flat tone */
.hero--center{overflow:hidden}
.hero--center > .wrap{position:relative;z-index:1}
.hero--center::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 44% at 15% 18%, rgba(201,162,39,.14), transparent 62%),
    radial-gradient(46% 40% at 88% 12%, rgba(216,182,90,.17), transparent 64%),
    radial-gradient(72% 56% at 50% 118%, rgba(20,19,18,.06), transparent 60%);}
.hero--center::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:42vw;height:42vw;max-width:600px;max-height:600px;right:-7vw;top:-10vw;border-radius:50%;
  background:radial-gradient(circle, rgba(216,182,90,.22), transparent 70%);filter:blur(34px)}

/* creative headline — thin top line, heavy bottom line, gold accent word */
.hero--center .hero h1 .masc.l1{font-weight:300;letter-spacing:.06em}
.hero--center .hero h1 .masc.l2{font-weight:700}
.hero h1 .hl-gold{font-style:normal;font-weight:700;
  background:linear-gradient(102deg,#e7cf86,#c9a227 50%,#9a7b1c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ============================================================
   REVISION v6 — black & white palette (gold accents preserved)
   ============================================================ */
:root{
  --bone:#ffffff; --bone-2:#f3f3f3; --bone-3:#e7e7e7; --paper:#ffffff;
  --ink:#0c0c0c; --ink-2:#3a3a3a; --ink-3:#767676;
  --line:rgba(0,0,0,.14); --line-soft:rgba(0,0,0,.07);
}

/* base + section backgrounds → neutral */
body{background:radial-gradient(150% 100% at 50% 0%, #ffffff 0%, #fbfbfb 55%, #f4f4f4 100%);background-attachment:fixed}
.section-pad.alt{background:linear-gradient(180deg,#f4f4f4 0%,#ececec 100%)}
#doctor{background:linear-gradient(180deg,#f0f0f0,#e6e6e6)}
.offer{background:radial-gradient(130% 110% at 50% 0%, #1c1c1c 0%, #000 70%)}
.close{background:#000}
#pnav.scrolled{background:rgba(255,255,255,.82)}
.btn-line{background:rgba(255,255,255,.5)}

/* compare columns */
.vs__col--bad{background:linear-gradient(180deg,#f3f3f3,#e9e9e9);border:1px solid var(--line)}
.vs__col--good{background:linear-gradient(165deg,#1a1a1a 0%,#000 100%);color:var(--bone);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.55);border:1px solid rgba(216,182,90,.25)}

/* process cards */
.steps-grid .step{background:linear-gradient(180deg,#ffffff,#f5f5f5)}

/* off-black instead of pure #000 — reads richer, less flat */
.offer{background:radial-gradient(130% 110% at 50% 0%, #181818 0%, #0a0a0a 70%)}
.close{background:#0a0a0a}
.vs__col--good{background:linear-gradient(165deg,#191919 0%,#0a0a0a 100%)}

/* pressed state on all buttons — physical click feedback */
.btn:active{transform:translateY(1px) scale(.99)}
.opt:active{transform:scale(.99)}

/* accessibility: skip-to-content link, hidden until focused */
.skip-link{position:fixed;top:-60px;left:1rem;z-index:2000;background:var(--ink);color:var(--bone);
  padding:.7rem 1.2rem;border-radius:var(--r-sm);font-size:var(--t-eyebrow);letter-spacing:.1em;
  text-transform:uppercase;transition:top .25s var(--ease)}
.skip-link:focus{top:1rem;outline:2px solid var(--gold-deep);outline-offset:2px}

/* ============================================================
   HERO — "The Printed Jewel" (dark, scroll-scrubbed canvas)
   ============================================================ */
.hero--noir{
  --hg:#c9a227;            /* champagne accent */
  --hg-pop:#ffd700;        /* true gold pop */
  position:relative; isolation:isolate;
  min-height:100svh; min-height:100vh;
  background:#0a0a0a; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  text-align:center;
  padding:clamp(5.5rem,9vh,8rem) var(--gutter) clamp(2rem,5vh,3.4rem);
}
.hero__canvas,.hero__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hero__canvas{ z-index:0; }
.hero__poster{ z-index:1; transition:opacity .7s var(--ease); }
.hero__poster.is-hidden{ opacity:0; }
/* legibility scrims — above media, below text */
.hero--noir::before,.hero--noir::after{
  content:""; position:absolute; left:0; right:0; z-index:2; pointer-events:none;
}
.hero--noir::before{ top:0; height:46%;
  background:linear-gradient(to bottom, rgba(10,10,10,.88) 0%, rgba(10,10,10,.42) 42%, rgba(10,10,10,0) 100%); }
.hero--noir::after{ bottom:0; height:42%;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.45) 46%, rgba(10,10,10,0) 100%); }
.hero__top,.hero__bottom{ position:relative; z-index:3; }
.hero__top{ will-change:transform,opacity; }

/* headline */
.hero__h1{ margin:0 0 1.1rem; line-height:.95; letter-spacing:.005em; }
.hero__h1 .line{ display:block; overflow:hidden; padding:.02em 0; }
.hero__h1 .line>span{ display:block; }
.hero__h1 .masc{
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(2.7rem,1.3rem + 5.6vw,6.2rem); color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero__h1 .lt{
  font-family:"Oswald",sans-serif; font-weight:300; text-transform:uppercase;
  font-size:clamp(2.2rem,1.1rem + 4.6vw,5.2rem); color:#fff; letter-spacing:.012em;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.gold-foil{
  background:linear-gradient(100deg,#9a7b1c 0%,#d8b65a 16%,#fff3c8 30%,#ffd700 42%,#e7cf86 60%,#c9a227 82%,#9a7b1c 100%);
  background-size:240% 100%; background-position:120% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__sub{
  font-family:"Source Sans 3",sans-serif; font-weight:400;
  font-size:var(--t-lead); line-height:1.5; color:rgba(255,255,255,.82);
  max-width:46ch; margin:0 auto; text-wrap:balance;
}
.hero__sub .tm{ font-size:.5em; vertical-align:super; color:var(--hg); }

/* bottom row */
.hero__bottom{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.hero--noir .hero__cta .btn-ink{
  background:linear-gradient(135deg,#e7cf86,#c9a227 58%,#9a7b1c);
  color:#0a0a0a; border:none; box-shadow:0 10px 30px -12px rgba(201,162,39,.6);
}
.hero--noir .hero__cta .btn-ink .arrow{ color:#0a0a0a; }
.hero__cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:.55rem;
  font-family:"Source Sans 3",sans-serif; font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.hero__cue-line{ width:1px; height:34px; background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent); }

/* preload bar */
.hero__load{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background:rgba(255,255,255,.06); transition:opacity .5s ease; }
.hero__load.is-hidden{ opacity:0; }
.hero__load-bar{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--hg),var(--hg-pop)); transition:transform .2s linear; }

/* no-JS / reduced-motion safety: everything visible by default */
.hero--noir.hero--shown .hero__sub,
.hero--noir.hero--shown .hero__cta,
.hero--noir.hero--shown .hero__cue{ opacity:1; transform:none; }

/* nav legibility while over the light reel (top, before scroll) */
#pnav:not(.scrolled){ color:var(--ink); }
#pnav:not(.scrolled) #pnav__logo{ color:var(--ink); }
#pnav:not(.scrolled) #pnav__logo .tm{ color:var(--gold-deep); }
#pnav:not(.scrolled) #pnav__loc{ color:rgba(0,0,0,.55); }
#pnav:not(.scrolled) #pnav__home{ color:rgba(0,0,0,.62); }
#pnav:not(.scrolled) #pnav__home:hover,#pnav:not(.scrolled) #pnav__home:focus-visible{ color:var(--gold-deep); }

@media (max-width:760px){
  .hero__h1{ margin-bottom:.9rem; }
  .hero__sub{ font-size:1.04rem; max-width:34ch; }
}
@media (prefers-reduced-motion: reduce){
  .hero__poster{ transition:none; }
}

/* ============================================================
   REEL — "The Spin" (full-bleed scroll-scrubbed canvas video)
   ============================================================ */
.reel{
  position:relative; isolation:isolate;
  width:100%; height:100svh; min-height:100svh;
  background:#cdccc9; overflow:hidden;          /* full-bleed animation, no header band */
}
/* canvas + poster fill the entire viewport (no header offset) */
.reel__canvas,.reel__poster{ position:absolute; top:0; left:0; width:100%; height:100svh; }
.reel__canvas{ display:block; z-index:0; background:#cdccc9; }
.reel__poster{ object-fit:cover; object-position:center; z-index:1; transition:opacity .45s var(--ease); }
.reel__poster.is-hidden{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .reel__poster{ transition:none; } }

.reel__cta{
  position:absolute; z-index:4; left:0; right:0; bottom:clamp(2.6rem,8vh,5.5rem);
  display:flex; justify-content:center; pointer-events:none;
}
.btn-reel{
  pointer-events:auto; display:inline-flex; align-items:center; gap:.7rem;
  background:var(--ink); color:#fff; text-decoration:none;
  font-family:"Source Sans 3",sans-serif; font-weight:600; font-size:clamp(.95rem,.9rem + .4vw,1.15rem);
  letter-spacing:.04em; padding:1.05em 2.3em; border-radius:var(--r-max);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.5); transition:transform .35s var(--ease), background .35s;
}
.btn-reel .arrow{ transition:transform .4s var(--ease); }
/* PERL story cards — dark luxury plates that crossfade beside the parked arch */
.reel__side{ position:absolute; z-index:4; left:clamp(2.5rem,8vw,9rem); top:0; bottom:0;
  width:min(45vw,560px); pointer-events:none; }
.reel__cards{ position:absolute; inset:0; }

.perlcard{
  position:absolute; top:50%; left:0; right:0; transform:translateY(calc(-50% + var(--rise,0px)));
  opacity:0; will-change:opacity,transform;
  isolation:isolate; overflow:hidden; color:var(--bone);
  padding:clamp(1.6rem,2.4vw,2.8rem) clamp(1.6rem,2.5vw,3rem) clamp(1.7rem,2.5vw,2.9rem);
  border-radius:var(--r-md);
  background:linear-gradient(168deg,rgba(30,34,40,.92) 0%,rgba(21,24,28,.94) 58%,rgba(26,29,34,.93) 100%);
  box-shadow:0 2px 6px -2px rgba(10,12,16,.5), 0 26px 54px -22px rgba(8,10,14,.62), 0 48px 110px -40px rgba(8,10,14,.55), 0 1px 0 rgba(255,255,255,.08) inset;
}
/* inset gold hairline frame — quiet luxury detail */
.perlcard::before{
  content:""; position:absolute; inset:9px; z-index:1; pointer-events:none;
  border:1px solid rgba(233,207,126,.30); border-radius:calc(var(--r-md) - 5px);
}
.perlcard__sheen{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 82% at 0% 0%, rgba(233,207,126,.16), transparent 58%);
}
.perlcard > *:not(.perlcard__sheen){ position:relative; z-index:2; }

.perlcard__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-disp); font-weight:300; text-transform:uppercase; white-space:nowrap;
  letter-spacing:.24em; font-size:clamp(.6rem,.55rem + .15vw,.72rem); color:var(--gold-soft);
}
.perlcard__n{ font-weight:600; letter-spacing:.05em; color:#e9cf7e; font-feature-settings:"tnum"; }
.perlcard__title{
  margin:.55rem 0 0; font-family:var(--f-disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem); line-height:.9; letter-spacing:.03em; color:var(--bone);
}
.perlcard__tm{ font-size:.3em; vertical-align:.9em; color:#e9cf7e; font-weight:600; margin-left:.04em; }
.perlcard__body{
  margin:1rem 0 0; max-width:40ch; font-family:var(--f-sans);
  font-size:clamp(.96rem,.9rem + .25vw,1.1rem); line-height:1.55; color:rgba(255,255,255,.74);
}
.perlcard__list{ list-style:none; margin:1.15rem 0 0; padding:0; }
.perlcard__list li{
  position:relative; padding:.62rem 0 .62rem 1.7rem; font-family:var(--f-sans);
  font-size:clamp(.9rem,.85rem + .18vw,1.02rem); line-height:1.4; color:rgba(255,255,255,.82);
  border-top:1px solid rgba(255,255,255,.1);
}
.perlcard__list li:first-child{ border-top:0; }
/* gold tick — single glyph, not a colored accent bar */
.perlcard__list li::before{
  content:""; position:absolute; left:.05rem; top:1.15em; width:.7rem; height:.4rem;
  border-left:2px solid #e9cf7e; border-bottom:2px solid #e9cf7e;
  transform:rotate(-45deg); transform-origin:center;
}

.reel--fallback{ height:auto; min-height:100svh; }
.reel--fallback .reel__cards{ position:static; }
.reel--fallback .perlcard{ position:static; opacity:1; transform:none; margin-bottom:1.2rem; }

@media (max-width:760px){
  .reel__side{ left:clamp(1rem,5vw,2rem); right:clamp(1rem,5vw,2rem); width:auto; top:auto; bottom:0; height:60svh; }
  .perlcard{ top:auto; bottom:clamp(1.5rem,6vh,3rem); transform:translateY(var(--rise,0px));
    padding:1.4rem 1.5rem 1.5rem; border-radius:var(--r-sm); }
  .perlcard::before{ inset:7px; }
  .perlcard__body{ max-width:none; }
}
@media (max-width:760px){
  .reel__cta{ bottom:clamp(2rem,7vh,3.5rem); }
  .btn-reel{ padding:1em 1.8em; font-size:1rem; }
}

/* ============================================================
   PERL vs Porcelain — comparison ledger (gold spine + cost bars)
   ============================================================ */
.cmp{ background:var(--paper); padding:clamp(4rem,10vh,8rem) 0; overflow:hidden; }
.cmp .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.cmp__intro{ max-width:64ch; margin:0 auto clamp(2.6rem,5vw,4.2rem); text-align:center; }
.cmp__eyebrow{ display:inline-block; font-family:var(--f-disp); font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; font-size:var(--t-eyebrow); color:var(--gold-deep); margin-bottom:1.1rem; }
.cmp__h{ margin:0; font-family:var(--f-disp); font-weight:700; text-transform:uppercase; line-height:1.04;
  letter-spacing:.01em; font-size:var(--t-h2); color:var(--ink); }
.cmp__lead{ margin:1.25rem auto 0; max-width:56ch; font-family:var(--f-sans); font-size:var(--t-lead);
  line-height:1.55; color:var(--ink-2); }

.cmp__ledger{ position:relative; max-width:940px; margin:0 auto; }
.cmp__head{ display:grid; grid-template-columns:1fr minmax(118px,148px) 1fr; align-items:end;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.cmp__col{ display:flex; flex-direction:column; }
.cmp__col--perl{ align-items:flex-end; text-align:right; }
.cmp__col--porc{ align-items:flex-start; text-align:left; }
.cmp__col b{ font-family:var(--f-disp); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  line-height:1; font-size:clamp(1.4rem,1rem + 1.7vw,2.2rem); color:var(--ink); }
.cmp__col--porc b{ color:var(--ink-3); }
.cmp__col i{ margin-top:.4rem; font-family:var(--f-sans); font-style:normal; text-transform:uppercase;
  letter-spacing:.04em; font-size:.74rem; color:var(--ink-3); }
.cmp__col--perl i{ color:var(--gold-deep); }

.cmp__rows{ position:relative; }
/* the gold spine — draws downward when the section enters (motion graphic) */
.cmp__rows::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; z-index:0;
  transform:translateX(-50%) scaleY(0); transform-origin:top center;
  background:linear-gradient(180deg,var(--gold-deep),var(--gold) 50%,var(--gold-deep));
  transition:transform 1.1s var(--ease-expo) .1s; }
.cmp.is-in .cmp__rows::before{ transform:translateX(-50%) scaleY(1); }

.cmp__row{ display:grid; grid-template-columns:1fr minmax(118px,148px) 1fr; align-items:center;
  padding:clamp(.9rem,1.9vw,1.5rem) 0; border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(15px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.cmp.is-in .cmp__row{ opacity:1; transform:none; transition-delay:calc(.22s + var(--i) * .09s); }

.cmp__perl{ display:flex; align-items:center; justify-content:flex-end; gap:.6rem; text-align:right;
  font-family:var(--f-sans); font-weight:600; line-height:1.25;
  font-size:clamp(.98rem,.9rem + .4vw,1.18rem); color:var(--ink); }
.cmp__porc{ display:flex; align-items:center; justify-content:flex-start; gap:.6rem; text-align:left;
  font-family:var(--f-sans); line-height:1.25; font-size:clamp(.92rem,.88rem + .3vw,1.08rem); color:var(--ink-3); }
.cmp__porc::before{ content:""; flex:none; width:.85rem; height:2px; background:var(--ink-3); opacity:.45; }

.cmp__dim{ justify-self:center; text-align:center; white-space:nowrap; position:relative; z-index:1;
  font-family:var(--f-disp); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.66rem; color:var(--ink-2); background:var(--paper);
  padding:.42rem .7rem; border:1px solid rgba(154,123,28,.42); border-radius:var(--r-max); }

.tick{ flex:none; width:1.3rem; height:1.3rem; }
.tick path{ fill:none; stroke:var(--gold-deep); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; transition:stroke-dashoffset .55s var(--ease); }
.cmp.is-in .cmp__row .tick path{ stroke-dashoffset:0; transition-delay:calc(.42s + var(--i) * .09s); }

/* cost motion graphic */
.cmp__cost{ max-width:720px; margin:clamp(2.8rem,5vw,4.4rem) auto 0;
  opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.cmp__cost.is-in{ opacity:1; transform:none; }
.cmp__cost-h{ margin-bottom:1.5rem; text-align:center; font-family:var(--f-disp); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; font-size:var(--t-eyebrow); color:var(--gold-deep); }
.cmp__bar{ display:grid; grid-template-columns:6rem 1fr auto; align-items:center; gap:1rem; margin:.85rem 0; }
.cmp__bar-name{ font-family:var(--f-disp); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:.98rem; color:var(--ink); }
.cmp__bar--porc .cmp__bar-name{ color:var(--ink-3); }
.cmp__bar-track{ height:15px; border-radius:var(--r-max); background:var(--bone-2); overflow:hidden; }
.cmp__bar-fill{ display:block; height:100%; width:0; border-radius:var(--r-max); transition:width 1.15s var(--ease-expo); }
.cmp__bar--perl .cmp__bar-fill{ background:linear-gradient(90deg,var(--gold-soft),var(--gold)); }
.cmp__bar--porc .cmp__bar-fill{ background:var(--ink-3); }
.cmp__cost.is-in .cmp__bar--perl .cmp__bar-fill{ width:var(--w); transition-delay:.4s; }
.cmp__cost.is-in .cmp__bar--porc .cmp__bar-fill{ width:var(--w); transition-delay:.55s; }
.cmp__bar-val{ font-family:var(--f-disp); font-weight:600; font-size:clamp(1rem,.9rem + .4vw,1.18rem);
  color:var(--ink); font-feature-settings:"tnum"; white-space:nowrap; }
.cmp__bar--porc .cmp__bar-val{ color:var(--ink-3); }
.cmp__cost-note{ margin:1.5rem auto 0; max-width:48ch; text-align:center; font-family:var(--f-sans);
  font-size:1rem; line-height:1.55; color:var(--ink-2); }

@media (max-width:760px){
  .cmp__head{ display:none; }
  .cmp__rows::before{ display:none; }
  .cmp__row{ grid-template-columns:1fr; gap:.3rem; padding:1.05rem 0; }
  .cmp__dim{ justify-self:start; order:-1; margin-bottom:.35rem; }
  .cmp__perl{ justify-content:flex-start; text-align:left; }
  .cmp__porc{ text-align:left; }
  .cmp__bar{ grid-template-columns:4.6rem 1fr auto; gap:.65rem; }
  .cmp__bar-val{ font-size:.92rem; }
}
@media (prefers-reduced-motion: reduce){
  .cmp__row,.cmp__bar-fill,.tick path,.cmp__rows::before{ transition:none; }
  .cmp__row{ opacity:1; transform:none; }
  .cmp__rows::before{ transform:translateX(-50%) scaleY(1); }
  .tick path{ stroke-dashoffset:0; }
  .cmp__cost{ opacity:1; transform:none; }
  .cmp__cost.is-in .cmp__bar-fill{ width:var(--w); }
}

/* ============================================================
   VSL — click-to-play film (rounded corners)
   ============================================================ */
.vsl-sec{ background:var(--paper); padding:clamp(3.5rem,8vw,7rem) 0; }
.vsl-player{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:clamp(18px,2.4vw,32px); overflow:hidden; background:#000;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.45);
}
.vsl-player__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vsl-player__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:clamp(64px,7vw,88px); height:clamp(64px,7vw,88px); border-radius:50%; border:none; cursor:pointer;
  color:#0c0c0c; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 44px -12px rgba(0,0,0,.55); transition:transform .3s var(--ease), background .3s;
}
.vsl-player__play:hover{ transform:translate(-50%,-50%) scale(1.06); background:#fff; }
.vsl-player__play svg{ margin-left:4px; }
.vsl-player__tag{
  position:absolute; left:1.1rem; bottom:1rem; z-index:2; color:#fff;
  font-family:"Source Sans 3",sans-serif; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(0,0,0,.42); padding:.42rem .82rem; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vsl-player.is-playing .vsl-player__play,
.vsl-player.is-playing .vsl-player__tag{ opacity:0; pointer-events:none; transition:opacity .3s ease; }

/* ============================================================
   VSL split (copy left, video right)
   ============================================================ */
.vsl-split{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.vsl-copy__h{ font-family:"Oswald",sans-serif; text-transform:uppercase; line-height:1.02; margin:0 0 1.3rem; }
.vsl-copy__h .hv{ display:block; font-weight:700; font-size:clamp(2rem,1rem + 2.6vw,3.6rem); color:var(--ink); letter-spacing:.005em; }
.vsl-copy__h .lt{ display:block; font-weight:300; font-size:clamp(1.55rem,1rem + 2vw,2.8rem); color:var(--ink-2); letter-spacing:.01em; }
.vsl-copy__sub{ font-family:"Source Sans 3",sans-serif; font-size:var(--t-lead); line-height:1.55; color:var(--ink-2); max-width:46ch; margin:0; }
.vsl-copy__by{ display:flex; align-items:center; gap:.7rem; margin:1.7rem 0 0; font-family:"Source Sans 3",sans-serif; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.vsl-copy__tick{ width:26px; height:2px; background:var(--gold-deep); flex:none; }
@media (max-width:860px){ .vsl-split{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.6rem); } }

/* centered VSL — cinematic deep backdrop, one-line headline, film front and center */
.vsl-sec--center{ position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(140% 100% at 18% -10%, rgba(190,190,190,.13), transparent 52%),
    radial-gradient(120% 95% at 88% 8%, rgba(150,150,150,.11), transparent 55%),
    linear-gradient(168deg, #1a1a1a 0%, #121212 46%, #0c0c0c 100%); }
/* slow golden projector glow drifting behind the film (motion design) */
.vsl-sec--center::before{ content:""; position:absolute; inset:-25% -10% 0; z-index:0; pointer-events:none;
  background:radial-gradient(52% 46% at 50% 34%, rgba(210,210,210,.15), rgba(165,165,165,.06) 44%, transparent 66%);
  animation:vslGlow 13s cubic-bezier(.16,1,.3,1) infinite alternate; }
/* fine grain so it never reads as a flat block */
.vsl-sec--center::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.vsl-sec--center .wrap{ position:relative; z-index:2; text-align:center; }
@keyframes vslGlow{ from{ transform:translate3d(-2%,0,0) scale(1); opacity:.7; } to{ transform:translate3d(2%,-3%,0) scale(1.08); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .vsl-sec--center::before{ animation:none; } }

.vsl-head{
  margin:0 auto clamp(2rem,4vw,3.2rem);
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  line-height:1.06; letter-spacing:.01em; color:var(--bone);
  font-size:clamp(1.4rem,.9rem + 2.4vw,3rem); white-space:nowrap;
}
.vsl-sec--center .vsl-player{ max-width:min(940px,100%); margin-inline:auto;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.82), 0 0 0 1px rgba(232,238,250,.18), 0 0 70px -28px rgba(150,172,214,.32); }
/* muted-preview "tap for sound" pill with a soft pulsing gold dot */
.vsl-mute-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold-soft);
  margin-right:.5rem; vertical-align:middle; box-shadow:0 0 0 0 rgba(216,182,90,.6); animation:vslPulse 2s ease-out infinite; }
@keyframes vslPulse{ 0%{ box-shadow:0 0 0 0 rgba(216,182,90,.55); } 70%{ box-shadow:0 0 0 7px rgba(216,182,90,0); } 100%{ box-shadow:0 0 0 0 rgba(216,182,90,0); } }
@media (prefers-reduced-motion: reduce){ .vsl-mute-dot{ animation:none; } }

@media (max-width:880px){
  .vsl-head{ white-space:normal; font-size:clamp(1.55rem,1rem + 4.6vw,2.3rem); max-width:18ch; }
}

/* ============================================================
   PROCESS — warm timeline: dark numbered nodes on a drawing gold line
   ============================================================ */
.proc{ position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(168deg,#faf6ee 0%,#f1e9d9 56%,#e9dfcb 100%); }
.proc__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 55% at 90% -8%, rgba(201,162,39,.16), transparent 60%); }
.proc__bg::after{ content:""; position:absolute; inset:0; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"); }
.proc .wrap{ position:relative; z-index:1; }

.proc__track{ list-style:none; margin:clamp(2.8rem,5.5vh,4.4rem) 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.1rem,2.2vw,2rem); }
/* gold connector line drawing across the node centers */
.proc__track::before{ content:""; position:absolute; top:34px; left:12.5%; right:12.5%; height:2px; z-index:0;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep)); border-radius:2px;
  transform:scaleX(0); transform-origin:left center; transition:transform 1.2s var(--ease-expo) .15s; }
.proc.is-in .proc__track::before{ transform:scaleX(1); }

.pstep{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.2rem; opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.proc.is-in .pstep{ opacity:1; transform:none; transition-delay:calc(.25s + var(--i) * .13s); }
.pstep__node{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:#23262b; color:#e7cf86; border:1px solid rgba(231,207,134,.55);
  font-family:var(--f-disp); font-weight:600; font-size:1.5rem; letter-spacing:.02em; font-feature-settings:"tnum";
  box-shadow:0 16px 34px -14px rgba(28,30,36,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.pstep__card h3{ font-family:var(--f-disp); font-weight:600; font-size:var(--t-h3); color:var(--ink); margin:0 0 .6rem; text-transform:none; }
.pstep__card p{ font-family:var(--f-sans); color:var(--ink-2); line-height:1.55; margin:0 auto; max-width:32ch; }
.pstep__time{ display:inline-block; margin-top:1.35rem; font-family:var(--f-disp); text-transform:uppercase;
  letter-spacing:.16em; font-size:.68rem; color:var(--gold-deep);
  padding:.42rem .85rem; border:1px solid rgba(154,123,28,.42); border-radius:var(--r-max); }

@media (max-width:900px){
  .proc__track{ grid-template-columns:repeat(2,1fr); gap:clamp(1.8rem,5vw,2.6rem); }
  .proc__track::before{ display:none; }
}
@media (max-width:520px){ .proc__track{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .pstep{ opacity:1; transform:none; }
  .proc__track::before{ transform:scaleX(1); }
}

/* ============================================================
   OFFER — investment panel on a warm-espresso aura (not flat black)
   ============================================================ */
.offer{ position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(135% 118% at 50% -12%, #1b1e23 0%, #14161a 52%, #0d0f12 100%); }
.offer__aura{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.offer__aura::before{ content:""; position:absolute; inset:-12%;
  background:radial-gradient(44% 40% at 50% 28%, rgba(201,162,39,.24), rgba(201,162,39,.06) 46%, transparent 68%);
  animation:offerAura 12s ease-in-out infinite alternate; }
.offer__aura::after{ content:""; position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='o'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23o)' opacity='.5'/%3E%3C/svg%3E"); }
@keyframes offerAura{ from{ transform:translateY(0) scale(1); opacity:.82; } to{ transform:translateY(-2%) scale(1.06); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .offer__aura::before{ animation:none; } }
.offer .wrap{ position:relative; z-index:1; }

.offer-card{ position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:1.12fr .88fr; max-width:1040px; margin:clamp(2.5rem,5vh,4rem) auto 0;
  border-radius:var(--r-2xl); border:1px solid rgba(201,162,39,.28);
  background:linear-gradient(162deg, rgba(42,34,20,.55), rgba(14,11,8,.72));
  box-shadow:0 60px 130px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.offer-card__sheen{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(78% 64% at 12% 0%, rgba(201,162,39,.17), transparent 55%); }
.offer-card__main{ position:relative; z-index:1; padding:clamp(2.2rem,4vw,3.7rem); display:flex; flex-direction:column; align-items:flex-start; }
.offer-kicker{ font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--gold-soft); }
.offer-anchor{ margin-top:1.5rem; font-family:var(--f-sans); font-size:.95rem; color:rgba(244,241,234,.55); }
.offer-anchor s{ text-decoration-color:var(--gold); text-decoration-thickness:1.5px; }
.offer-price{ display:flex; align-items:flex-start; gap:.04em; margin:.4rem 0 1.15rem; line-height:1;
  font-family:var(--f-disp); font-weight:600; letter-spacing:.005em; color:var(--bone);
  font-size:clamp(3.6rem,2rem + 6vw,6rem); font-variant-numeric:tabular-nums; }
.offer-price__cur{ font-size:.46em; font-weight:300; color:var(--gold-soft); margin-top:.22em; }
.offer-save{ display:inline-block; margin-top:.15rem; font-family:var(--f-disp); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.7rem; color:#19130a; padding:.46rem .9rem; border-radius:var(--r-max);
  background:linear-gradient(90deg,var(--gold-soft),var(--gold)); box-shadow:0 8px 22px -10px rgba(201,162,39,.6); }
.offer-fin{ margin:1.45rem 0 0; font-family:var(--f-disp); font-style:italic; font-size:var(--t-lead); color:var(--gold-soft); }
.offer-fin strong{ font-style:normal; font-weight:600; color:var(--bone); }
.offer-cta{ margin-top:1.85rem; }
.offer-deposit{ display:flex; align-items:center; gap:.55rem; margin:1.3rem 0 0; font-size:.85rem; color:rgba(244,241,234,.62); }
.offer-deposit__tick{ flex:none; width:1rem; height:1rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b65a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }
.offer-card__incl{ position:relative; z-index:1; padding:clamp(2.2rem,4vw,3.7rem);
  background:rgba(0,0,0,.26); border-left:1px solid rgba(201,162,39,.2); }
.offer-incl__h{ display:block; font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.18em;
  font-size:.7rem; color:rgba(244,241,234,.6); margin-bottom:1.5rem; }
.offer-incl__list{ list-style:none; margin:0; padding:0; display:grid; gap:1.05rem; }
.offer-incl__list li{ position:relative; padding-left:1.9rem; color:var(--bone); font-family:var(--f-sans);
  font-size:.98rem; line-height:1.4; }
.offer-incl__list li::before{ content:""; position:absolute; left:0; top:.12em; width:1.15rem; height:1.15rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b65a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width:760px){
  .offer-card{ grid-template-columns:1fr; }
  .offer-card__incl{ border-left:0; border-top:1px solid rgba(201,162,39,.2); }
}

/* ============================================================
   SOCIAL — phone TikTok mockup + branded follow buttons
   ============================================================ */
.social{ position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(120% 92% at 50% -5%, #181410 0%, #0d0b08 58%, #080706 100%); }
.social__aura{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(38% 36% at 26% 28%, rgba(201,162,39,.18), transparent 62%),
             radial-gradient(34% 32% at 78% 72%, rgba(110,86,196,.12), transparent 62%); }
.social .wrap{ position:relative; z-index:1; }
.social__head{ text-align:center; max-width:60ch; margin:0 auto clamp(2.6rem,5vw,4.2rem); }
.social__head .eyebrow{ color:var(--gold-soft); }
.social__head h2{ margin:0; font-family:var(--f-disp); font-weight:300; color:var(--bone); font-size:var(--t-h2); }
.social__head p{ margin:1rem auto 0; max-width:48ch; color:rgba(244,241,234,.62); font-size:var(--t-lead); line-height:1.5; }

.social__stage{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(2rem,6vw,5.5rem); align-items:center; max-width:940px; margin:0 auto; }

.phone{ position:relative; justify-self:center; }
.phone__glow{ position:absolute; inset:-14% -20%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(201,162,39,.3), transparent 72%); }
.phone__frame{ position:relative; z-index:1; width:clamp(250px,27vw,300px); aspect-ratio:9/19.3;
  background:#0a0a0a; border-radius:46px; padding:11px;
  box-shadow:0 60px 120px -34px rgba(0,0,0,.85), 0 0 0 2px #161616, 0 0 0 6px #232323, inset 0 0 0 1px rgba(255,255,255,.05);
  animation:phoneFloat 6s ease-in-out infinite alternate; }
@keyframes phoneFloat{ from{ transform:translateY(4px); } to{ transform:translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .phone__frame{ animation:none; } }
.phone__island{ position:absolute; top:21px; left:50%; transform:translateX(-50%); width:84px; height:25px; background:#000; border-radius:14px; z-index:6; }
.phone__screen{ position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#000; }
.phone__track{ position:absolute; inset:0; display:flex; flex-direction:column; background:#000; transition:transform .6s cubic-bezier(.7,0,.2,1); will-change:transform; }
/* over-fill the screen a touch so no edge of the bezel/backing peeks at top or bottom */
.phone__vid{ flex:none; width:100%; height:100%; object-fit:cover; transform:scale(1.06); }

.tt{ position:absolute; inset:0; z-index:4; pointer-events:none; color:#fff; font-family:var(--f-sans);
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 16% 62%, rgba(0,0,0,.55) 100%); }
.tt__top{ position:absolute; top:46px; left:0; right:0; display:flex; justify-content:center; gap:1.1rem; font-weight:600; font-size:.82rem; }
.tt__tab{ color:rgba(255,255,255,.6); }
.tt__tab.is-on{ color:#fff; position:relative; }
.tt__tab.is-on::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:18px; height:2px; background:#fff; border-radius:2px; }
.tt__rail{ position:absolute; right:9px; bottom:78px; display:flex; flex-direction:column; align-items:center; gap:1.05rem; }
.tt__avatar{ position:relative; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-disp); font-weight:700; color:#0c0c0c; font-size:1.05rem;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border:2px solid #fff; margin-bottom:.3rem; }
.tt__plus{ position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:17px; height:17px; border-radius:50%;
  background:#fe2c55; color:#fff; font-size:12px; line-height:15px; display:grid; place-items:center; border:1px solid #0a0a0a; }
.tt__act{ display:flex; flex-direction:column; align-items:center; gap:.18rem; }
.tt__act svg{ width:30px; height:30px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.tt__act b{ font-size:.66rem; font-weight:600; }
.tt__meta{ position:absolute; left:14px; right:64px; bottom:30px; display:flex; flex-direction:column; gap:.4rem; }
.tt__user{ font-family:var(--f-disp); font-weight:600; font-size:.92rem; }
.tt__cap{ margin:0; font-size:.78rem; line-height:1.35; color:rgba(255,255,255,.92); }
.tt__music{ display:flex; align-items:center; gap:.4rem; font-size:.68rem; color:rgba(255,255,255,.85); }
.tt__music svg{ width:13px; height:13px; }
.tt__dots{ position:absolute; right:9px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:5px; }
.tt__dots span{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35); transition:.3s; }
.tt__dots span.is-on{ background:#fff; height:14px; border-radius:3px; }

.social__links-h{ display:block; font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.2em; font-size:var(--t-eyebrow); color:var(--gold-soft); margin-bottom:1.3rem; }
.splat-grid{ display:grid; gap:.85rem; }
.splat{ display:flex; align-items:center; gap:1rem; padding:.95rem 1.1rem; border-radius:var(--r-lg); text-decoration:none;
  color:var(--bone); background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  transition:transform .35s var(--ease), background .35s, border-color .35s; }
.splat:hover{ transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.splat__ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; }
.splat__ic svg{ width:24px; height:24px; }
.splat__body{ display:flex; flex-direction:column; line-height:1.2; }
.splat__body b{ font-family:var(--f-disp); font-weight:600; font-size:1.05rem; }
.splat__body i{ font-style:normal; font-size:.82rem; color:rgba(244,241,234,.55); }
.splat__cta{ margin-left:auto; font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  color:#0c0c0c; background:var(--bone); padding:.45rem .9rem; border-radius:var(--r-max); transition:background .35s, color .35s; }
.splat:hover .splat__cta{ background:var(--gold); }
.splat--tiktok .splat__ic{ background:#000; border:1px solid rgba(255,255,255,.18); }
.splat--ig .splat__ic{ background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7); }
.splat--fb .splat__ic{ background:#1877f2; }
.splat--li .splat__ic{ background:#0a66c2; }

@media (max-width:820px){
  .social__stage{ grid-template-columns:1fr; justify-items:center; gap:clamp(2.2rem,7vw,3rem); }
  .social__links{ width:min(420px,100%); }
}

/* ============================================================
   Kinetic section title — #why "Two ways to change your smile."
   (masked word-rise + blur-sharpen, hand-drawn smile arc + sparkle)
   ============================================================ */
.ktitle .kw{ display:inline-flex; overflow:hidden; vertical-align:top; padding:.07em .03em .22em; margin:-.07em -.03em -.22em; }
.ktitle .kw__i{ display:inline-block; will-change:transform,filter,opacity; }
.kaccent{ position:relative; display:inline-block; }
.kaccent .kw__i{ font-style:italic; }
.ksmile{ position:absolute; left:1%; bottom:-.34em; width:98%; height:.62em; overflow:visible; pointer-events:none; }
.ksmile path{ fill:none; stroke:var(--gold-deep); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.ksparkle{ position:absolute; right:-.55em; top:-.18em; width:.5em; height:.5em; pointer-events:none; transform-origin:center; }
.ksparkle path{ fill:var(--gold); }

/* ============================================================
   "What are PERL veneers?" editorial explainer
   ============================================================ */
.px{ background:var(--bone); padding:clamp(4.5rem,9vw,8.5rem) 0; }
.px__intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,4rem); align-items:start; margin-bottom:clamp(3rem,6vw,5rem); }
.px__lead{ padding-top:.4rem; }
.px__h{ font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(2.4rem,1.4rem + 3.4vw,4.6rem); line-height:.96; letter-spacing:.005em; color:var(--ink); margin:0; }
.px__brand{ color:var(--gold-deep); }
.px__lead{ font-family:"Source Sans 3",sans-serif; font-size:var(--t-lead); line-height:1.5; color:var(--ink-2); margin:0; max-width:52ch; }
.px__stage{ display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(1.6rem,3.5vw,3.2rem); align-items:start; }
.px__perl,.px__porc{ margin:0; }
.px__art{ overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper); }
.px__art img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.px__perl .px__art{ border-color:rgba(201,162,39,.4); box-shadow:0 44px 90px -54px rgba(154,123,28,.5); }
.px__porc .px__art{ }
.px__porc .px__art img{ filter:saturate(.7); }
.px__perl figcaption,.px__porc figcaption{ margin-top:1.2rem; max-width:42ch; }
.px__cap-k{ display:block; font-family:"Source Sans 3",sans-serif; font-weight:700; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.5rem; }
.px__cap-k--mut{ color:var(--ink-3); }
.px__perl figcaption span,.px__porc figcaption span{ font-family:"Source Sans 3",sans-serif;
  font-size:1.02rem; line-height:1.5; color:var(--ink-2); }
.px__porc figcaption span{ color:var(--ink-3); }
.px__steps{ list-style:none; margin:clamp(3rem,6vw,5rem) 0 0; padding:clamp(2rem,4vw,3rem) 0 0;
  border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem); }
.px__steps li{ display:grid; grid-template-columns:auto 1fr; column-gap:1.1rem; row-gap:.3rem; align-items:baseline; }
.px__num{ grid-row:1 / span 2; font-family:"Oswald",sans-serif; font-weight:700; font-size:clamp(2rem,1rem + 2vw,3rem);
  color:var(--gold-deep); line-height:.9; }
.px__steps h4{ font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; font-size:1.15rem;
  letter-spacing:.04em; color:var(--ink); margin:0; }
.px__steps p{ font-family:"Source Sans 3",sans-serif; font-size:.97rem; line-height:1.45; color:var(--ink-2); margin:0; max-width:30ch; }
@media (max-width:820px){
  .px__intro{ grid-template-columns:1fr; gap:1.2rem; align-items:start; }
  .px__stage{ grid-template-columns:1fr; gap:1.6rem; }
  .px__steps{ grid-template-columns:1fr; gap:1.6rem; }
}


/* ============================================================
   7-AGENT REDESIGN PASS (appended overrides)
   ============================================================ */

/* ===== task 1 (appended) ===== */


/* ===== TASK 1: premium hero CTA (section#reel .btn-reel) ===== */
#reel .reel__cta{ perspective:900px; }
#reel .btn-reel{
  position:relative; isolation:isolate; overflow:hidden;
  background:#16181c; color:var(--bone);
  font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase;
  letter-spacing:.13em; padding:1.15em 2.55em; gap:.85rem;
  border:1px solid transparent;
  box-shadow:0 1px 0 0 rgba(255,255,255,.06) inset,
             0 0 0 1px rgba(216,182,90,.0),
             0 22px 50px -18px rgba(0,0,0,.62),
             0 8px 20px -12px rgba(0,0,0,.5);
  transition:box-shadow .5s var(--ease), color .45s var(--ease), border-color .55s var(--ease);
  will-change:transform;
}
/* champagne hairline ring — gold on COOLED charcoal so it reads gold, not brown */
#reel .btn-reel::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(216,182,90,.0) 0%, rgba(216,182,90,.55) 38%, rgba(247,228,170,.85) 50%, rgba(216,182,90,.55) 62%, rgba(216,182,90,.0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.45; transition:opacity .5s var(--ease);
}
#reel .btn-reel:hover::before, #reel .btn-reel:focus-visible::before{ opacity:1; }
/* light + champagne sheen sweep driven by --sheen (0 -> 1) via JS */
#reel .btn-reel::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-60%; width:55%; z-index:1;
  pointer-events:none; transform:translateX(calc(var(--sheen,0) * 320%)) skewX(-18deg);
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 30%, rgba(247,228,170,.42) 50%, rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%);
  opacity:calc(.25 + var(--sheen,0) * .75); mix-blend-mode:screen;
}
#reel .btn-reel > *{ position:relative; z-index:2; }
#reel .btn-reel:hover, #reel .btn-reel:focus-visible{
  color:#fff; border-color:rgba(216,182,90,.0);
  box-shadow:0 1px 0 0 rgba(255,255,255,.10) inset,
             0 0 0 1px rgba(216,182,90,.28),
             0 30px 64px -18px rgba(0,0,0,.66),
             0 0 34px -6px rgba(216,182,90,.34);
}
#reel .btn-reel__arrow{ display:inline-block; font-family:"Source Sans 3",sans-serif; font-weight:600; will-change:transform; }
#reel .btn-reel:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
#reel .btn-reel:active{ box-shadow:0 1px 0 0 rgba(255,255,255,.06) inset, 0 14px 30px -16px rgba(0,0,0,.6); }
@media (hover:none){
  #reel .btn-reel::before{ opacity:.6; }
}
@media (prefers-reduced-motion: reduce){
  #reel .btn-reel{ transition:box-shadow .3s ease, color .3s ease; }
  #reel .btn-reel::after{ transition:none; }
}


/* ===== task 2 (appended) ===== */

/* ===== TASK 2 — perlcard frosted cool-charcoal redesign (no brown) ===== */
#reel .perlcard{
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
  border:1px solid rgba(255,255,255,.10);
}
/* brighter champagne accents on the cool charcoal surface */
#reel .perlcard__eyebrow{ color:#e9cf7e; }
#reel .perlcard__title{ color:#f6f3ec; }
#reel .perlcard__body{ color:rgba(244,241,234,.80); }
#reel .perlcard__list li{ color:rgba(244,241,234,.88); border-top-color:rgba(255,255,255,.12); }
/* soft champagne edge glow ring that becomes crisp when the card is live */
#reel .perlcard::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  box-shadow:0 0 0 1px rgba(233,207,126,.0) inset, 0 0 36px -10px rgba(233,207,126,.0);
  transition:box-shadow .7s var(--ease,cubic-bezier(.22,1,.36,1));
}
#reel .perlcard.is-live::after{
  box-shadow:0 0 0 1px rgba(233,207,126,.16) inset, 0 0 42px -8px rgba(233,207,126,.22);
}
/* hairline inset frame draws in on active */
#reel .perlcard::before{
  opacity:.55;
  transform:scale(.992);
  transform-origin:center;
  transition:opacity .8s var(--ease,cubic-bezier(.22,1,.36,1)), transform .9s var(--ease-expo,cubic-bezier(.16,1,.3,1));
}
#reel .perlcard.is-live::before{ opacity:1; transform:scale(1); }
/* sheen sweep: a soft champagne band that glides across once on activate */
#reel .perlcard__sheen::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:46%;
  pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(233,207,126,.14) 48%, rgba(255,255,255,.05) 60%, transparent);
  transform:translateX(-160%) skewX(-12deg);
  opacity:0;
}
#reel .perlcard.is-live .perlcard__sheen::after{
  animation:perlcardSheen 1.5s var(--ease-expo,cubic-bezier(.16,1,.3,1)) .12s 1 both;
}
@keyframes perlcardSheen{
  0%{ transform:translateX(-160%) skewX(-12deg); opacity:0; }
  18%{ opacity:1; }
  100%{ transform:translateX(330%) skewX(-12deg); opacity:0; }
}
/* inner content settle — only the inner wrappers move, never the card itself */
#reel .perlcard__eyebrow,
#reel .perlcard__title,
#reel .perlcard__body,
#reel .perlcard__list{
  will-change:transform;
  transform:translateY(10px);
  transition:transform .9s var(--ease-expo,cubic-bezier(.16,1,.3,1));
}
#reel .perlcard__title{ transition-delay:.05s; }
#reel .perlcard__body{ transition-delay:.10s; }
#reel .perlcard__list{ transition-delay:.15s; }
#reel .perlcard.is-live .perlcard__eyebrow,
#reel .perlcard.is-live .perlcard__title,
#reel .perlcard.is-live .perlcard__body,
#reel .perlcard.is-live .perlcard__list{ transform:translateY(0); }
@media (max-width:760px){
  #reel .perlcard{ -webkit-backdrop-filter:blur(10px) saturate(115%); backdrop-filter:blur(10px) saturate(115%); }
}
@media (prefers-reduced-motion: reduce){
  #reel .perlcard::before{ opacity:1; transform:none; transition:none; }
  #reel .perlcard::after{ transition:none; }
  #reel .perlcard.is-live .perlcard__sheen::after{ animation:none; }
  #reel .perlcard__eyebrow,
  #reel .perlcard__title,
  #reel .perlcard__body,
  #reel .perlcard__list{ transform:none; transition:none; }
}


/* ===== task 3 (appended) ===== */
/* ===== #film cool-charcoal backdrop motion (scoped) ===== */
.vsl-sec--center .film-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.vsl-sec--center .film-fx__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; mix-blend-mode:screen; will-change:transform,opacity; transform:translateZ(0); }
.vsl-sec--center .film-fx__blob--a{ width:62vw; height:62vw; left:-14vw; top:-22vw;
  background:radial-gradient(circle at 50% 50%, rgba(150,176,224,.34), rgba(120,148,200,.10) 46%, transparent 70%);
  animation:filmBlobA 22s cubic-bezier(.16,1,.3,1) infinite alternate; }
.vsl-sec--center .film-fx__blob--b{ width:54vw; height:54vw; right:-16vw; bottom:-24vw;
  background:radial-gradient(circle at 50% 50%, rgba(196,208,230,.26), rgba(140,160,196,.08) 48%, transparent 72%);
  animation:filmBlobB 28s cubic-bezier(.16,1,.3,1) infinite alternate; }
.vsl-sec--center .film-fx__sheen{ position:absolute; top:-40%; left:-30%; width:60%; height:180%;
  background:linear-gradient(100deg, transparent 0%, rgba(224,232,248,.10) 46%, rgba(238,244,255,.18) 50%, rgba(224,232,248,.10) 54%, transparent 100%);
  mix-blend-mode:screen; filter:blur(8px); transform:translate3d(0,0,0) rotate(8deg); will-change:transform,opacity; opacity:.0;
  animation:filmSheen 17s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes filmBlobA{ 0%{ transform:translate3d(-3%,-2%,0) scale(1); } 100%{ transform:translate3d(6%,4%,0) scale(1.12); } }
@keyframes filmBlobB{ 0%{ transform:translate3d(3%,2%,0) scale(1.06); } 100%{ transform:translate3d(-5%,-4%,0) scale(.96); } }
@keyframes filmSheen{ 0%{ transform:translate3d(0,0,0) rotate(8deg); opacity:0; } 18%{ opacity:.85; } 50%{ transform:translate3d(260%,0,0) rotate(8deg); opacity:.85; } 70%{ opacity:0; } 100%{ transform:translate3d(260%,0,0) rotate(8deg); opacity:0; } }
@media (max-width:880px){ .vsl-sec--center .film-fx__blob{ filter:blur(48px); } }
@media (prefers-reduced-motion: reduce){
  .vsl-sec--center .film-fx__blob,
  .vsl-sec--center .film-fx__sheen{ animation:none; }
  .vsl-sec--center .film-fx__sheen{ opacity:0; }
}


/* ===== task 4 (appended) ===== */

/* ===== TASK 4 — section#what redesign (scoped) ===== */
#what{position:relative}
#what .wrap{position:relative}

/* descender fix: grow the mask box downward so 'g' isn't clipped; keep flow via negative margin */
#what .reveal-hero .reveal-line{padding-bottom:.18em;margin-bottom:-.18em;padding-block:.04em .18em}
#what .reveal-hero{max-width:16ch;line-height:1.02}

/* refined two-column rhythm */
#what .reveal-top{gap:clamp(2.2rem,5.2vw,5rem);align-items:center}
#what .reveal-copy{position:relative;padding-left:clamp(0px,1.4vw,1.4rem)}
#what .reveal-copy::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 55%,transparent 100%);opacity:.5;transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease-expo) .15s,opacity .8s var(--ease)}
#what .reveal-copy.accent-in::before{transform:scaleY(1);opacity:.6}
@media(max-width:820px){#what .reveal-copy{padding-left:0}#what .reveal-copy::before{display:none}}

/* premium portrait framing — grounds the crossfade slideshow as a luxury object */
#what .reveal-top .reveal-img{position:relative;background:transparent;padding:0;border-radius:var(--r-2xl);overflow:hidden}
#what .reveal-top .reveal-img img{border-radius:var(--r-2xl);box-shadow:none}
/* soft contact shadow grounding it to the page */
#what .reveal-top .reveal-img::before{content:"";position:absolute;left:6%;right:6%;bottom:-22px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,19,13,.18),transparent 80%);filter:blur(3px);z-index:-1;opacity:.7;pointer-events:none}
/* inset champagne hairline frame (gold on light bone — never brown) + a top sweep accent */
#what .reveal-top .reveal-img::after{content:none}
/* thin gold hairline that draws across the top of the frame on reveal */
#what .reveal-figframe{display:none !important}
#what .reveal-top .reveal-img.frame-in .reveal-figframe{display:none !important}

/* scroll motion accent: frame scale-settle + lift */
@media(prefers-reduced-motion:no-preference){
  #what .reveal-top .reveal-img{will-change:transform}
}

/* difference cards — refined, ready to stagger */
#what .reveal-row{margin-top:clamp(3rem,6vh,5rem);gap:clamp(1.75rem,4vw,3.5rem)}
#what .diff{position:relative;padding-top:1.8rem}
#what .diff .n{display:inline-block;color:var(--gold-deep);font-variation-settings:"opsz" 50}
#what .diff::before{content:"";position:absolute;top:-1px;left:0;width:46px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-expo) .1s}
#what .diff.diff-in::before{transform:scaleX(1)}
@media(max-width:760px){#what .reveal-row{margin-top:clamp(2rem,5vh,3rem)}#what .diff{padding-top:1.4rem}}


/* ===== task 5 (appended) ===== */

/* ===== TASK 5 — Drag-to-compare (#results) elevated background + shadows ===== */
#results{position:relative;isolation:isolate;overflow:hidden}
/* layered depth background — cool light-editorial, NO brown, NO gold-on-dark */
#results > .results__bg{position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;will-change:transform;
  background:
    radial-gradient(120% 78% at 50% -8%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(70% 60% at 84% 14%, rgba(238,240,244,.7) 0%, rgba(238,240,244,0) 60%),
    radial-gradient(80% 70% at 12% 96%, rgba(232,231,228,.85) 0%, rgba(232,231,228,0) 62%),
    linear-gradient(180deg, #f3f3f1 0%, #eceae6 52%, #e6e5e1 100%);}
/* faint cool top sheen for premium gloss */
#results > .results__bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(245,247,250,.55) 0%, rgba(245,247,250,0) 34%);}
/* barely-there paper grain */
#results > .results__grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
/* top + bottom hairlines to frame the surface */
#results::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(22,19,13,.1) 22%, rgba(22,19,13,.1) 78%, transparent);}
#results::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(22,19,13,.07) 22%, rgba(22,19,13,.07) 78%, transparent);}
/* keep content above the depth layers */
#results > .wrap{position:relative;z-index:2}

/* ----- elevated stage: layered drop shadow lifts it off the page ----- */
#results .ba__stage{position:relative;will-change:transform;
  box-shadow:
    0 1px 2px rgba(22,19,13,.06),
    0 8px 18px -8px rgba(22,19,13,.18),
    0 34px 60px -28px rgba(22,19,13,.32),
    0 70px 120px -60px rgba(22,19,13,.4);}
/* bright champagne-gold hairline glow UNDER the stage (gold on light, never dark) */
#results .ba__stage > .ba__glow{position:absolute;left:6%;right:6%;bottom:-14px;height:34px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(216,182,90,.5) 0%, rgba(216,182,90,0) 72%);
  filter:blur(7px);opacity:.85;}

/* ----- elevated thumbnail cards: 4-level elevation scale + refined hover ----- */
#results .ba__row .ba__case{will-change:transform;
  box-shadow:
    0 1px 2px rgba(22,19,13,.05),
    0 6px 14px -8px rgba(22,19,13,.2),
    0 18px 34px -18px rgba(22,19,13,.26);
  transition:border-color .55s var(--ease-expo), transform .55s var(--ease-expo), box-shadow .9s var(--ease-expo);}
#results .ba__row .ba__case:hover{transform:translateY(-6px) scale(1.015);
  box-shadow:
    0 2px 4px rgba(22,19,13,.06),
    0 12px 26px -12px rgba(22,19,13,.24),
    0 30px 56px -22px rgba(22,19,13,.34);}
#results .ba__row .ba__case.active{box-shadow:
    0 0 0 2px rgba(201,162,39,.55),
    0 10px 22px -10px rgba(22,19,13,.24),
    0 26px 50px -22px rgba(22,19,13,.32);}
#results .ba__row .ba__case.active{border-color:var(--gold)}

@media (prefers-reduced-motion: reduce){
  #results > .results__bg, #results > .results__grain{transform:none !important}
  #results .ba__stage, #results .ba__row .ba__case{transition:none}
}


/* ===== task 6 (appended) ===== */
/* ===== TASK 6 :: OFFER REDESIGN (cooler charcoal, no brown) ===== */
#offer{ --of-surface-1:#181b20; --of-surface-2:#101216; --of-surface-3:#0c0e11; --of-champagne:#f0d98a; --of-gold:#d8b65a; --of-border:rgba(240,217,138,.34); --of-border-soft:rgba(240,217,138,.16); }
/* keep the section background cool even where later theme rules try to warm it */
#offer.offer{ background:radial-gradient(135% 118% at 50% -12%, var(--of-surface-1) 0%, var(--of-surface-2) 54%, var(--of-surface-3) 100%) !important; }
#offer .eyebrow{ color:var(--of-champagne); }
#offer .eyebrow::before{ background:var(--of-champagne); }

/* ---- moving ambient background (transform/opacity only) ---- */
#offer .offer__aura{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#offer .offer__aura::before{ content:""; position:absolute; inset:-28%; will-change:transform,opacity;
  background:radial-gradient(42% 38% at 50% 30%, rgba(240,217,138,.20), rgba(216,182,90,.05) 48%, transparent 70%);
  animation:offerBloom 16s ease-in-out infinite alternate; }
#offer .offer__aura::after{ content:""; position:absolute; inset:-30%; will-change:transform; opacity:.5;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(173,200,224,.10) 70deg, transparent 150deg, rgba(240,217,138,.10) 250deg, transparent 330deg);
  mix-blend-mode:screen; animation:offerOrbit 34s linear infinite; }
#offer .offer__aura .offer__grain{ content:""; position:absolute; inset:0; opacity:.38; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='o'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23o)' opacity='.5'/%3E%3C/svg%3E"); }
@keyframes offerBloom{ 0%{ transform:translate3d(-3%, 2%, 0) scale(1); opacity:.7; } 100%{ transform:translate3d(4%, -3%, 0) scale(1.12); opacity:1; } }
@keyframes offerOrbit{ from{ transform:rotate(0deg) scale(1.05); } to{ transform:rotate(360deg) scale(1.05); } }

/* ---- card surface: cool charcoal, brighter champagne edge ---- */
#offer .offer-card{ position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:1.12fr .88fr; max-width:1040px; margin:clamp(2.5rem,5vh,4rem) auto 0;
  border-radius:var(--r-2xl); border:1px solid var(--of-border);
  background:linear-gradient(165deg, rgba(31,35,41,.82), rgba(13,15,18,.9));
  box-shadow:0 60px 130px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); }
#offer .offer-card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(165deg, rgba(240,217,138,.12), transparent 38%); opacity:.9; }
#offer .offer-card__sheen{ position:absolute; top:-60%; left:-40%; width:55%; height:220%; z-index:2; pointer-events:none;
  transform:translateX(0) rotate(18deg); opacity:0; will-change:transform,opacity;
  background:linear-gradient(90deg, transparent, rgba(255,247,222,.0) 20%, rgba(255,247,222,.5) 50%, rgba(255,247,222,.0) 80%, transparent);
  mix-blend-mode:screen; }
#offer .offer-card.sheen-go .offer-card__sheen{ animation:offerSheen 1.5s var(--ease-expo) .35s 1; }
#offer .offer-card:hover .offer-card__sheen{ animation:offerSheen 1.15s var(--ease-expo) 1; }
@keyframes offerSheen{ 0%{ transform:translateX(0) rotate(18deg); opacity:0; } 12%{ opacity:.9; } 100%{ transform:translateX(360%) rotate(18deg); opacity:0; } }

#offer .offer-card__main{ position:relative; z-index:1; }
#offer .offer-kicker{ color:var(--of-champagne); }
#offer .offer-anchor{ color:rgba(244,241,234,.6); }
#offer .offer-anchor s{ text-decoration-color:var(--of-champagne); text-decoration-thickness:1.5px; }
#offer .offer-price{ color:var(--bone); font-variant-numeric:tabular-nums lining-nums; }
#offer .offer-price__cur{ color:var(--of-champagne); }
#offer .offer-price__num{ font-variant-numeric:tabular-nums lining-nums; }
#offer .offer-save{ color:#16130a;
  background:linear-gradient(90deg, #f5e6a8, var(--of-champagne)); box-shadow:0 10px 26px -12px rgba(240,217,138,.55); }
#offer .offer-fin{ color:var(--of-champagne); }
#offer .offer-fin strong{ color:var(--bone); }
#offer .offer-deposit{ color:rgba(244,241,234,.66); }
#offer .offer-card__incl{ position:relative; z-index:1; background:rgba(8,9,11,.4); border-left:1px solid var(--of-border-soft); }
#offer .offer-incl__h{ color:rgba(244,241,234,.64); }
#offer .offer-incl__list li{ color:var(--bone); }
#offer .offer-incl__list li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d98a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }
#offer .offer-deposit__tick{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d98a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width:760px){
  #offer .offer-card__incl{ border-left:0; border-top:1px solid var(--of-border-soft); }
}

/* GSAP-staggered children start hidden ONLY when JS will animate (motion-safe) */
#offer .offer-card.js-stagger .of-stagger{ opacity:0; transform:translateY(18px); }

@media (prefers-reduced-motion: reduce){
  #offer .offer__aura::before, #offer .offer__aura::after{ animation:none; }
  #offer .offer-card__sheen{ display:none; }
  #offer .offer-card.js-stagger .of-stagger{ opacity:1; transform:none; }
}


/* ===== task 7 (appended) ===== */

/* ===== TASK 7: #process motion redesign (scoped to .proc) ===== */
.proc__track{ perspective:1400px; }
/* numeral on the cooler-charcoal node reads as bright champagne, not brown */
.proc .pstep__node{ position:relative; z-index:2; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); will-change:transform; }
/* champagne glow ring that pulses behind each node */
.proc .pstep__node::after{ content:""; position:absolute; inset:-7px; border-radius:50%; pointer-events:none; z-index:-1;
  border:1.5px solid rgba(201,162,39,.55); opacity:0; transform:scale(.7); }

/* card depth + tilt prep */
.proc .pstep__card{ transform-style:preserve-3d; transition:transform .55s var(--ease), box-shadow .55s var(--ease); will-change:transform; border-radius:var(--r-md); padding:1.4rem 1.1rem 1.55rem; }
.proc .pstep__card h3, .proc .pstep__card p, .proc .pstep__time{ transform:translateZ(28px); }

/* hover micro-interactions (pointer-driven tilt is layered on by JS) */
.proc .pstep:hover .pstep__node{ transform:scale(1.07); border-color:rgba(231,207,134,.85);
  box-shadow:0 20px 40px -14px rgba(28,30,36,.7), 0 0 0 1px rgba(231,207,134,.35), 0 0 26px -6px rgba(201,162,39,.5); }
.proc .pstep:hover .pstep__card{ box-shadow:0 26px 60px -26px rgba(28,30,36,.4), 0 4px 16px -8px rgba(154,123,28,.25); }
.proc .pstep:hover .pstep__time{ color:var(--gold); border-color:rgba(201,162,39,.7); }
.proc .pstep__time{ transition:color .45s var(--ease), border-color .45s var(--ease); }

/* JS-built SVG connector overlay (sits where the ::before line was) */
.proc__conn{ position:absolute; top:34px; left:12.5%; right:12.5%; height:24px; z-index:0; pointer-events:none;
  overflow:visible; }
.proc__conn svg{ width:100%; height:100%; overflow:visible; display:block; }
.proc__conn .proc__connBase{ fill:none; stroke:rgba(154,123,28,.22); stroke-width:2; }
.proc__conn .proc__connDraw{ fill:none; stroke-width:2.4; stroke-linecap:round; }
.proc__conn .proc__dot{ filter:drop-shadow(0 0 7px rgba(201,162,39,.85)); opacity:0; }

/* when JS owns the motion, neutralise the CSS reveal so it never doubles */
.proc--js .proc__track::before{ display:none; }
.proc--js .pstep{ opacity:1; }
.proc--js.is-in .pstep{ transition-delay:0s; }

@media (max-width:900px){
  .proc__conn{ display:none; }
  .proc .pstep__card{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .proc .pstep__node::after{ display:none; }
  .proc__conn .proc__connDraw{ stroke-dashoffset:0 !important; }
  .proc__conn .proc__dot{ opacity:0 !important; }
  .proc .pstep__card{ transform:none !important; }
  .proc .pstep__node{ transform:none !important; }
}



/* ============================================================
   7-AGENT REDESIGN PASS (appended overrides)
   ============================================================ */

/* ===== task 1 (appended) ===== */
/* ===== task 1 (appended) — #film FULL desaturation to neutral grayscale (zero blue) ===== */
.vsl-sec--center .film-fx__blob--a{
  background:radial-gradient(circle at 50% 50%, rgba(196,196,196,.30), rgba(150,150,150,.10) 46%, transparent 70%); }
.vsl-sec--center .film-fx__blob--b{
  background:radial-gradient(circle at 50% 50%, rgba(214,214,214,.24), rgba(160,160,160,.08) 48%, transparent 72%); }
.vsl-sec--center .film-fx__sheen{
  background:linear-gradient(100deg, transparent 0%, rgba(232,232,232,.10) 46%, rgba(244,244,244,.17) 50%, rgba(232,232,232,.10) 54%, transparent 100%); }
@media (prefers-reduced-motion: reduce){
  .vsl-sec--center .film-fx__blob,
  .vsl-sec--center .film-fx__sheen{ animation:none; }
  .vsl-sec--center .film-fx__sheen{ opacity:0; }
}


/* ===== task 2 (appended) ===== */

/* ===== task 2 (appended) ===== portrait: no inner lines/frame, curved corners + soft layered 3D drop shadow ===== */
#what .reveal-top .reveal-img{position:relative;background:transparent;padding:0;border:0;border-radius:var(--r-2xl);overflow:hidden;box-shadow:0 2px 4px rgba(22,19,13,.07),0 10px 22px -6px rgba(22,19,13,.13),0 26px 50px -18px rgba(22,19,13,.20),0 56px 96px -36px rgba(22,19,13,.26);transition:box-shadow .9s var(--ease),transform .9s var(--ease)}
#what .reveal-top .reveal-img img{border-radius:var(--r-2xl);box-shadow:none;border:0}
/* kill every inner hairline/frame the prior pass added */
#what .reveal-top .reveal-img::after,#what .reveal-top .reveal-img.frame-in::after{content:none !important;border:0 !important;box-shadow:none !important}
#what .reveal-figframe{display:none !important}
/* the subtle 3D lift: deeper layered shadow + a few-px rise once it enters view */
@media(prefers-reduced-motion:no-preference){
  #what .reveal-top .reveal-img{will-change:transform,box-shadow}
  #what .reveal-top .reveal-img.lifted{transform:translateY(-8px);box-shadow:0 3px 5px rgba(22,19,13,.08),0 14px 26px -6px rgba(22,19,13,.15),0 34px 60px -22px rgba(22,19,13,.23),0 70px 116px -40px rgba(22,19,13,.30)}
}
@media(max-width:820px){#what .reveal-top .reveal-img::before{display:none}#what .reveal-top .reveal-img.lifted{transform:translateY(-4px)}}


/* ===== task 3 (appended) ===== */
/* ===== TASK 3 (corrected) - #results two-column drag + 6 INDIVIDUAL separated equal thumbnail cards (3x2), slow smooth pulse ===== */
/* keep the prior 2-column layout: drag stage LEFT, thumbnail picker RIGHT */
#results .ba__layout{display:block}
#results .ba__picker{margin-top:1.4rem}
@media (min-width:861px){
  #results .ba__layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);align-items:start;gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.2rem}
  #results .ba__layout > .ba__stage{margin:0;height:100%;min-height:clamp(360px,46vw,560px)}
  /* NO enclosing frame: the 6 thumbnails are individual cards on the page, like the original bottom row */
  #results .ba__picker{margin-top:0;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:flex;flex-direction:column;height:100%}
  #results .ba__picker > .ba__hint{margin:0 0 1.15rem;text-align:left}
  /* clean 3-col x 2-row grid of separated equal cards; generous consistent gaps so blocks never touch (ui-ux-pro-max: never pack touch targets tight) */
  #results .ba__picker > #baRow.ba__row{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:clamp(1rem,1.7vw,1.5rem);margin-top:0;overflow:visible;padding-bottom:0;align-content:start;justify-items:stretch}
  /* ONE height authority = aspect-ratio (Issue 6): each case is its own equal rounded card */
  #results .ba__picker > #baRow.ba__row .ba__case{width:auto;margin:0;aspect-ratio:4/5;border-radius:var(--r-md)}
  @supports(corner-shape:squircle){#results .ba__picker > #baRow.ba__row .ba__case{corner-shape:squircle}}
}
/* round any remaining sharp corner on imagery (brand: no 90deg on images) */
#results .ba__stage{border-radius:var(--r-2xl)}
#results .ba__row .ba__case{border-radius:var(--r-md)}
#results .ba__row .ba__case img{border-radius:inherit}
/* slow gentle pulse: soft champagne glow that eases in/out via the .9s box-shadow transition on .ba__case (gold-on-light only, no brown). Declared ONCE. */
#results .ba__row .ba__case.ba-pulse{box-shadow:0 0 0 2px rgba(201,162,39,.42),0 0 26px 3px rgba(216,182,90,.4),0 10px 26px -12px rgba(22,19,13,.24),0 28px 54px -26px rgba(22,19,13,.3)}
#results .ba__row .ba__case.active.ba-pulse{box-shadow:0 0 0 2px rgba(201,162,39,.55),0 0 26px 3px rgba(216,182,90,.44),0 10px 24px -10px rgba(22,19,13,.24),0 26px 50px -22px rgba(22,19,13,.32)}
/* hover gives immediate feedback priority over the slow pulse (ui-ux-pro-max) */
#results .ba__row .ba__case{cursor:pointer}
#results .ba__row .ba__case:hover{transform:translateY(-6px) scale(1.02)}
/* mobile: single column, stage on top, restore horizontal-scroll picker, no frame */
@media (max-width:860px){
  #results .ba__layout{display:block}
  #results .ba__picker{padding:0;border:0;background:none;box-shadow:none}
  #results .ba__picker > .ba__hint{text-align:center}
}
@media (prefers-reduced-motion: reduce){
  #results .ba__row .ba__case.ba-pulse{box-shadow:0 1px 2px rgba(22,19,13,.05),0 6px 14px -8px rgba(22,19,13,.2),0 18px 34px -18px rgba(22,19,13,.26)}
}


/* ===== task 4 (appended) ===== */

/* ===== task 4 (appended) ===== */
/* (b) Fill + balance the right include column: distribute the 5 items over the column height. */
#offer .offer-card__incl{ display:flex; flex-direction:column; }
#offer .offer-incl__h{ margin-bottom:clamp(1.6rem,2.6vw,2.4rem); }
#offer .offer-incl__list{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(1.3rem,2.4vw,2.05rem); }
#offer .offer-incl__list li{ position:relative; padding-left:2.05rem; font-size:clamp(1rem,.9rem + .35vw,1.12rem); line-height:1.45; }
#offer .offer-incl__list li::before{ width:1.28rem; height:1.28rem; top:.06em; }
@media (max-width:760px){
  #offer .offer-card__incl{ display:block; }
  #offer .offer-incl__list{ display:grid; gap:1.2rem; }
}


/* ===== task 5 (appended) ===== */

/* ===== task 5 (appended) :: #doctor authority motion ===== */
#doctor .auth-motion__photo{position:relative}
/* champagne edge-line that draws in alongside the portrait clip (no gold-on-dark, sits on light) */
#doctor .auth-motion__photo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(201,162,39,.28);opacity:0;transition:opacity .9s var(--ease,ease)}
#doctor .auth-motion__photo.am-photo-in::after{opacity:1}
/* JS-only pre-hide states for the staggered children (guarded: only added when GSAP runs + motion allowed) */
#doctor .auth-motion.am-stagger .eyebrow,
#doctor .auth-motion.am-stagger .auth__h,
#doctor .auth-motion.am-stagger > p.muted,
#doctor .auth-motion.am-stagger .auth__sig,
#doctor .auth-motion.am-stagger .auth__name{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  #doctor .auth-motion__photo::after{opacity:1;transition:none}
  #doctor .auth-motion.am-stagger .eyebrow,
  #doctor .auth-motion.am-stagger .auth__h,
  #doctor .auth-motion.am-stagger > p.muted,
  #doctor .auth-motion.am-stagger .auth__sig,
  #doctor .auth-motion.am-stagger .auth__name{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
}


/* ===== task 6 (appended) ===== */
/* ===== task 6b :: #stories testimonial wall (scoped) ===== */
#stories{position:relative}
#stories .st-head{display:flex;flex-direction:column;align-items:center;gap:.4rem}
#stories .st-head .eyebrow.center{color:var(--gold-deep)}
#stories .st-sub{margin-top:1rem;max-width:42ch;color:var(--ink-2);font-weight:300;font-size:var(--t-lead);line-height:1.5;font-family:var(--f-sans,inherit)}

/* --- voices ribbon (restyled marquee, id=marquee + track kept intact) --- */
#stories .st-ribbon{margin-top:2.6rem;border-block:1px solid var(--line-soft);padding-block:1.6rem;background:linear-gradient(180deg,rgba(201,162,39,.04),transparent 60%)}
#stories .st-ribbon .marquee__track span{color:var(--ink-2)}
#stories .st-ribbon .marquee__track span::after{color:var(--gold-deep);opacity:.55}

/* --- asymmetric editorial wall --- */
#stories .st-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.9rem,1.6vw,1.4rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
#stories .st-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line-soft);background:var(--paper);padding:clamp(1.8rem,2.4vw,2.6rem);display:flex;flex-direction:column;gap:1.1rem;min-height:248px;transition:transform .5s var(--ease-expo,cubic-bezier(.16,1,.3,1)),box-shadow .5s ease,border-color .5s ease;will-change:transform}
#stories .st-card::after{content:"";position:absolute;top:0;left:-130%;width:62%;height:100%;z-index:3;pointer-events:none;transform:skewX(-16deg);background:linear-gradient(100deg,transparent,rgba(230,205,134,.28) 48%,transparent);opacity:0;transition:opacity .2s ease}
#stories .st-card:hover{transform:translateY(-8px);box-shadow:0 36px 70px -38px rgba(22,19,13,.42);border-color:rgba(201,162,39,.4)}
#stories .st-card:hover::after{opacity:1;animation:stSheen .9s var(--ease-expo,cubic-bezier(.16,1,.3,1)) 1}
@keyframes stSheen{0%{left:-130%}100%{left:170%}}

#stories .st-mark{font-family:var(--f-disp);font-weight:300;font-size:3.4rem;line-height:.6;color:var(--gold);opacity:.85;font-variation-settings:"opsz" 144}
#stories .st-quote{font-family:var(--f-disp);font-weight:300;font-size:var(--t-lead);line-height:1.32;color:var(--ink);font-variation-settings:"opsz" 40}
#stories .st-who{margin-top:auto;font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* span sizing: featured wide, videos tall, quotes compact */
#stories .st-card--feature{grid-column:span 3;grid-row:span 2;background:var(--ink);color:var(--bone);justify-content:center;min-height:0}
#stories .st-card--feature .st-quote{color:var(--bone);font-size:var(--t-h3);line-height:1.22;font-variation-settings:"opsz" 60}
#stories .st-card--feature .st-mark{color:var(--gold-soft);font-size:4.6rem}
#stories .st-card--feature .st-who{color:rgba(244,241,234,.62)}
#stories .st-card--video{grid-column:span 3;grid-row:span 2;padding:0;min-height:0;aspect-ratio:16/10;border:0}
#stories .st-card--video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#stories .st-card--video::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 42%,rgba(22,19,13,.58))}
#stories .st-card--video .st-play{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;border-radius:var(--r-max);background:rgba(251,250,246,.9);color:var(--ink);transition:transform .4s var(--ease-expo,cubic-bezier(.16,1,.3,1)),background .35s ease}
#stories .st-card--video:hover .st-play{transform:translate(-50%,-50%) scale(1.09);background:var(--gold-pop)}
#stories .st-card--video .st-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem 1.6rem;color:var(--bone);font-size:var(--t-eyebrow);letter-spacing:.1em;text-transform:uppercase}
#stories .st-card--quote{grid-column:span 2}
#stories .st-card--accent{background:linear-gradient(165deg,#fbf4dd,var(--paper));border-color:rgba(201,162,39,.28)}
#stories .st-card--accent .st-quote{color:var(--ink)}

/* armed (pre-hide) only while JS will reveal — motion-safe */
#stories .st-wall.st-armed .st-card{opacity:0;transform:translateY(30px)}

@media(max-width:980px){
  #stories .st-wall{grid-template-columns:repeat(2,1fr)}
  #stories .st-card--feature{grid-column:span 2;grid-row:auto}
  #stories .st-card--video{grid-column:span 1;grid-row:auto}
  #stories .st-card--quote{grid-column:span 1}
}
@media(max-width:560px){
  #stories .st-wall{grid-template-columns:1fr}
  #stories .st-card--feature,#stories .st-card--video,#stories .st-card--quote{grid-column:span 1}
  #stories .st-card{min-height:200px}
}
@media (prefers-reduced-motion: reduce){
  #stories .st-wall.st-armed .st-card{opacity:1;transform:none}
  #stories .st-card::after{display:none}
  #stories .st-card:hover{transform:none}
}



/* ============================================================
   7-AGENT REDESIGN PASS (appended overrides)
   ============================================================ */

/* ===== task 3 (appended) ===== */


/* ===== task 3 FINAL (appended LAST — overrides) — #what portrait: clearly CURVED corners + FLOATING layered shadow, no inner frame ===== */
/* container: bold curved radius + hard clip backstop so the absolutely-stacked slides can never show a square edge */
#what .reveal-top .reveal-img.float-frame{
  border-radius:var(--r-2xl);
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  border:0;
  /* elevated, soft, layered drop shadow — reads as floating off the light page (neutral ink, no brown) */
  box-shadow:
    0 2px 4px rgba(22,19,13,.07),
    0 10px 22px -6px rgba(22,19,13,.13),
    0 28px 54px -18px rgba(22,19,13,.21),
    0 60px 104px -38px rgba(22,19,13,.27);
}
@supports(corner-shape:squircle){
  /* squircle ONLY on the clipping container — never on the child imgs (kills the double-mask bottom-corner sliver) */
  #what .reveal-top .reveal-img.float-frame{corner-shape:squircle}
}
/* SINGLE clip authority: the CONTAINER (.float-frame) owns the curved clip (overflow:hidden + radius + squircle).
   The stacked crossfade slides must NOT carry their own radius/squircle — two slightly different squircle masks on
   the same box disagreed at the bottom corners and exposed a grey/gradient sliver. Let the imgs fill flat & be clipped once. */
#what .reveal-top .reveal-img.float-frame img{
  border-radius:0;
  box-shadow:none;
  border:0;
}
/* the new overflow:hidden would hard-clip the radial contact-shadow pseudo into a flat edge — kill it; the layered box-shadow does the floating */
#what .reveal-top .reveal-img.float-frame::before{display:none}
/* keep every old inner hairline/frame gone */
#what .reveal-top .reveal-img.float-frame::after,
#what .reveal-top .reveal-img.float-frame.frame-in::after{content:none !important;border:0 !important;box-shadow:none !important}
#what .float-frame .reveal-figframe,
#what .reveal-figframe{display:none !important}
@media(max-width:820px){
  #what .reveal-top .reveal-img.float-frame{border-radius:var(--r-xl)}
  #what .reveal-top .reveal-img.float-frame img{border-radius:0}
}



/* ============================================================
   7-AGENT REDESIGN PASS (appended overrides)
   ============================================================ */

/* ===== task 1 (appended) ===== */

/* ===== TASK 1 FINAL (appended LAST — overrides) — #what 'A smile, engineered.' portrait =====
   Kill the weird grey/gradient BOTTOM-CORNER artifact for good. ONE clip mask only (the container),
   clean even soft floating drop shadow, crossfade slideshow + ScrollTrigger lift untouched.
   transform/opacity only, no brown, no 90-degree corners. */
#what .reveal-top .reveal-img.float-frame{
  position:relative;
  background:transparent;
  border:0;
  padding:0;
  border-radius:var(--r-2xl);
  overflow:hidden;            /* the ONE clip — single source of truth */
  isolation:isolate;
  /* stable GPU layer that SURVIVES the .lifted transform (no translateZ here — .lifted sets transform:translateY
     with no translateZ and would wipe a container translateZ; will-change keeps the layer before AND after the lift) */
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* clean, even, soft, multi-layer floating drop shadow (neutral ink — never brown / gold-on-near-black),
     aligned to the already-shipped float shadow so this override does not darken the design */
  box-shadow:
    0 2px 4px rgba(22,19,13,.07),
    0 10px 22px -6px rgba(22,19,13,.13),
    0 28px 54px -18px rgba(22,19,13,.21),
    0 60px 104px -38px rgba(22,19,13,.27);
}
@supports(corner-shape:squircle){
  #what .reveal-top .reveal-img.float-frame{corner-shape:squircle}
}
/* crossfade slides: fill the single clipped container, carry NO radius / NO squircle of their own */
#what .reveal-top .reveal-img.float-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  border-radius:0;
  box-shadow:none;
  corner-shape:normal;
}
/* keep the crossfade working exactly as before (opacity toggle on .is-active) */
#what .reveal-top .reveal-img.float-frame img{opacity:0;transition:opacity 1.1s ease}
#what .reveal-top .reveal-img.float-frame img.is-active{opacity:1}
@media (prefers-reduced-motion: reduce){
  #what .reveal-top .reveal-img.float-frame img{transition:none}
}
/* obliterate every legacy contact-shadow / hairline / injected-frame that produced the bottom artifact */
#what .reveal-top .reveal-img.float-frame::before,
#what .reveal-top .reveal-img.float-frame::after,
#what .reveal-top .reveal-img.float-frame.frame-in::after{
  content:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  display:none !important;
}
#what .float-frame .reveal-figframe,
#what .reveal-figframe{display:none !important}
@media(max-width:820px){
  #what .reveal-top .reveal-img.float-frame{border-radius:var(--r-xl)}
  #what .reveal-top .reveal-img.float-frame img{border-radius:0}
}


/* ===== task 2 (appended) ===== */

/* ===== TASK 2 — #offer price-anchor cross-out overlay ===== */
#offer .offer-price{ position:relative; }
#offer .offer-price__strike{ position:absolute; left:.62em; right:0; top:0; bottom:0; height:100%; width:auto; overflow:visible; pointer-events:none; z-index:3; opacity:0; }
#offer .offer-price__strike-line{ fill:none; stroke:#f3df93; stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 8px rgba(243,223,147,.6)); }
@media (prefers-reduced-motion: reduce){
  #offer .offer-price__strike{ display:none !important; }
}


/* ===== task 3 (appended) ===== */


/* ========== TASK 3 :: #stories editorial pull-quote wall (text-only) ========== */
/* Loads last; scoped to #stories so it overrides earlier .st-* blocks.            */
/* Skills: motion-website-generator (word reveal + glass hover), gsap-master       */
/* (ScrollTrigger.batch stagger), ui-ux-pro-max/ux (reserve space, ease-out,       */
/* reduced-motion, 1-2 key motions per view).                                      */

#stories .st-wall.st-wall--editorial{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:row dense;
  gap:clamp(.9rem,1.5vw,1.35rem);
  margin-top:clamp(2.4rem,4vw,3.6rem);
  align-items:stretch;
}

/* base card -- soft paper, hairline, no sharp corners */
#stories .st-wall--editorial .st-card{
  position:relative;isolation:isolate;overflow:hidden;
  grid-column:span 4;grid-row:auto;
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  background:var(--paper);
  padding:clamp(1.7rem,2.3vw,2.5rem);
  display:flex;flex-direction:column;gap:1.05rem;
  min-height:248px;                 /* reserve space, no layout jump (ux) */
  transition:transform .55s var(--ease-expo,cubic-bezier(.16,1,.3,1)),
             box-shadow .55s ease,border-color .45s ease;
  will-change:transform;
}
#stories .st-wall--editorial .st-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(168deg,rgba(201,162,39,.06),transparent 46%);
  opacity:0;transition:opacity .5s ease;
}
#stories .st-wall--editorial .st-card > *{position:relative;z-index:1}

/* kill legacy ::after sheen sweep inside the editorial wall (clean glass hover) */
#stories .st-wall--editorial .st-card::after{content:none}
#stories .st-wall--editorial .st-card:hover::after{animation:none;opacity:0}

/* hover lift (motion-website-generator glass-hover; transform/opacity only) */
#stories .st-wall--editorial .st-card:hover{
  transform:translateY(-8px);
  box-shadow:0 38px 74px -40px rgba(22,19,13,.42);
  border-color:rgba(201,162,39,.42);
}
#stories .st-wall--editorial .st-card:hover::before{opacity:1}

/* drop-cap quote mark in champagne */
#stories .st-wall--editorial .st-mark{
  font-family:var(--f-disp);font-weight:300;line-height:.62;
  font-size:3.4rem;color:var(--gold);opacity:.9;
  font-variation-settings:"opsz" 144;
}
#stories .st-wall--editorial .st-quote{
  font-family:var(--f-disp);font-weight:300;
  font-size:var(--t-lead);line-height:1.34;color:var(--ink);
  font-variation-settings:"opsz" 40;
}
#stories .st-wall--editorial .st-who{
  margin-top:auto;font-family:var(--f-sans);
  font-size:var(--t-eyebrow);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---- FEATURED hero pull-quote: full width, ink card, gold-soft accents ---- */
#stories .st-wall--editorial .st-card--feature{
  grid-column:1 / -1;
  grid-row:auto;
  background:var(--ink);color:var(--bone);
  justify-content:center;
  min-height:clamp(220px,30vw,320px);
  padding:clamp(2.4rem,4vw,4rem) clamp(2rem,5vw,5rem);
  gap:1.4rem;
}
#stories .st-wall--editorial .st-card--feature::before{
  background:radial-gradient(120% 160% at 12% 0%,rgba(216,182,90,.16),transparent 52%);
  opacity:1;
}
#stories .st-wall--editorial .st-card--feature .st-mark{
  color:var(--gold-soft);font-size:clamp(4rem,6vw,5.8rem);opacity:.92;
}
#stories .st-wall--editorial .st-card--feature .st-quote{
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);
  line-height:1.18;color:var(--bone);max-width:24ch;
  font-variation-settings:"opsz" 72,"WONK" .3;
}
/* key phrase: gold-soft on near-black ink is champagne, NOT brown (brand ok) */
#stories .st-wall--editorial .st-card--feature .st-key{
  font-style:italic;color:var(--gold-soft);font-variation-settings:"opsz" 72,"WONK" 1;
}
#stories .st-wall--editorial .st-card--feature .st-rule{
  display:block;width:64px;height:1px;
  background:linear-gradient(90deg,var(--gold-soft),transparent);
  opacity:.7;
}
#stories .st-wall--editorial .st-card--feature .st-who{
  color:rgba(244,241,234,.64);
}
/* per-word reveal armed state (jsAppend wraps words in .st-word) */
#stories .st-wall--editorial .st-card--feature .st-word{
  display:inline-block;will-change:transform,opacity,filter;
}

/* ---- short-quote spans for an asymmetric, editorial rhythm ---- */
#stories .st-wall--editorial .st-card--quote{grid-column:span 4}
#stories .st-wall--editorial .st-card--wide{grid-column:span 8}
#stories .st-wall--editorial .st-card--tall{min-height:300px}

/* accent card: champagne-tinted paper (light), gold hairline, no brown */
#stories .st-wall--editorial .st-card--accent{
  background:linear-gradient(165deg,#fbf4dd,var(--paper));
  border-color:rgba(201,162,39,.3);
}
#stories .st-wall--editorial .st-card--accent .st-mark{opacity:1}
#stories .st-wall--editorial .st-card--accent .st-quote{
  font-size:var(--t-h3);line-height:1.22;font-variation-settings:"opsz" 60;
}

/* armed: pre-hide cards only while GSAP will reveal them (matches task6 IIFE) */
#stories .st-wall--editorial.st-armed .st-card{opacity:0;transform:translateY(30px)}

/* ---- responsive ---- */
@media (max-width:1024px){
  #stories .st-wall--editorial .st-card--quote{grid-column:span 6}
  #stories .st-wall--editorial .st-card--wide{grid-column:span 12}
}
@media (max-width:640px){
  #stories .st-wall--editorial{grid-template-columns:1fr;gap:.95rem}
  #stories .st-wall--editorial .st-card,
  #stories .st-wall--editorial .st-card--feature,
  #stories .st-wall--editorial .st-card--quote,
  #stories .st-wall--editorial .st-card--wide{grid-column:1 / -1}
  #stories .st-wall--editorial .st-card{min-height:200px}
  #stories .st-wall--editorial .st-card--tall{min-height:200px}
  #stories .st-wall--editorial .st-card--feature .st-quote{font-size:clamp(1.5rem,5vw,2rem)}
}

/* accessibility: respect reduced motion -- show everything, kill hover travel */
@media (prefers-reduced-motion: reduce){
  #stories .st-wall--editorial.st-armed .st-card{opacity:1;transform:none}
  #stories .st-wall--editorial .st-card{transition:none}
  #stories .st-wall--editorial .st-card:hover{transform:none;box-shadow:none}
  #stories .st-wall--editorial .st-card--feature .st-word{transform:none!important;opacity:1!important;filter:none!important}
}


/* ===== task 4 (appended) ===== */

/* TASK 4 — #why kinetic title: stop the faux-oblique italic letters (final 'e' of 'change') being clipped by the .kw overflow:hidden mask. Raise horizontal padding with a matching negative margin so word-spacing/layout is byte-for-byte unchanged; the vertical clip (top/bottom padding) is untouched so the masked yPercent word-rise, smile-arc draw + sparkle keep working. Loads last (EOF) so it overrides the base .ktitle .kw rule at line 1260. transform/opacity-safe, no brown. */
.ktitle .kw{ padding-left:.45em; padding-right:.45em; margin-left:-.45em; margin-right:-.45em; }
.ktitle .kaccent .kw{ padding-left:.45em; padding-right:.5em; margin-left:-.45em; margin-right:-.5em; }


/* ===== task 5 (appended) ===== */

/* TASK 5 - subtle continuous pull on the winning PERL card (#why .vs__col--good) */
#why .vs__col--good{isolation:isolate}
/* diagonal champagne sheen sweep - decorative, paints below content, GPU transform+opacity only */
#why .vs__col--good::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:26%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(234,208,138,.10) 42%,rgba(245,232,191,.22) 50%,rgba(234,208,138,.10) 58%,transparent 100%);
  transform:translate3d(-30%,0,0) rotate(18deg);transform-origin:center;will-change:transform,opacity;opacity:0;
  mix-blend-mode:screen;filter:blur(3px);
  animation:perlSheen 11s var(--ease-expo,cubic-bezier(.16,1,.3,1)) infinite}
@keyframes perlSheen{
  0%{transform:translate3d(-30%,0,0) rotate(18deg);opacity:0}
  4%{opacity:.5}
  18%{transform:translate3d(420%,0,0) rotate(18deg);opacity:.5}
  22%{transform:translate3d(420%,0,0) rotate(18deg);opacity:0}
  100%{transform:translate3d(420%,0,0) rotate(18deg);opacity:0}
}
/* soft pulsing champagne edge-glow ring - JS-appended <i>, opacity pulsed, never collides with the occupied ::before/::after */
#why .vs__col--good .vs-glow{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(234,208,138,.55),0 0 34px -6px rgba(216,182,90,.35);
  opacity:.32;will-change:opacity}
@media (prefers-reduced-motion: reduce){
  #why .vs__col--good::after{animation:none!important;opacity:0!important}
  #why .vs__col--good .vs-glow{display:none!important}
}



/* ============================================================
   7-AGENT REDESIGN PASS (appended overrides)
   ============================================================ */

/* ===== task 1 (appended) ===== */


/* ===== task 5 (rev2: loading-cascade pulse, critique-corrected) ===== */
/* Neutralize the prior disliked champagne sheen-sweep + edge-glow on the PERL Way card.
   This block loads LAST so it overrides the earlier appended task-5 rules. */
#why .vs__col--good::after{content:none!important;animation:none!important;opacity:0!important;background:none!important;mix-blend-mode:normal!important;filter:none!important}
#why .vs__col--good .vs-glow{display:none!important;animation:none!important;box-shadow:none!important;opacity:0!important}

/* NEW: sequential loading-style pulse travelling down the check items.
   The check circle is the li::before pseudo (24px champagne disc, vertically centered by translateY(-50%)).
   GSAP toggles .pulse-on per li in sequence; this keyframe animates that li's ::before.
   translateY(-50%) is preserved in EVERY frame so the disc never loses centering. GPU transform+opacity only. */
#why .vs__col--good li{position:relative}
#why .vs__col--good li::before{transform-origin:center center;will-change:transform;backface-visibility:hidden}
#why .vs__col--good li.pulse-on::before{animation:perlCheckPulse 0.62s var(--ease,cubic-bezier(.22,1,.36,1)) both}
@keyframes perlCheckPulse{
  0%{transform:translateY(-50%) scale(1);box-shadow:0 0 0 0 rgba(216,182,90,0)}
  22%{transform:translateY(-50%) scale(1.18);box-shadow:0 0 14px 0 rgba(234,208,138,.5)}
  50%{transform:translateY(-50%) scale(1);box-shadow:0 0 0 0 rgba(216,182,90,0)}
  72%{transform:translateY(-50%) scale(1.14);box-shadow:0 0 12px 0 rgba(234,208,138,.44)}
  100%{transform:translateY(-50%) scale(1);box-shadow:0 0 0 0 rgba(216,182,90,0)}
}
@media (prefers-reduced-motion: reduce){
  #why .vs__col--good li.pulse-on::before{animation:none!important}
  #why .vs__col--good li::before{will-change:auto}
}


/* ===== task 2 (appended) ===== */
/* ===== TASK 2 (appended LAST - overrides earlier squircle rules at lines 1885 & 1941) - #what 'A smile, engineered.' portrait: kill grey SQUARE bottom-corner shadow slivers =====
   ROOT CAUSE (verified by render): box-shadow ignores corner-shape:squircle. overflow:hidden clipped the photo to a TIGHT squircle while the floating drop shadow stayed painted on the looser rounded-rect border-radius path, so two square grey slivers poked out below the bottom corners. FIX: force corner-shape:round (the VALID default keyword) so the box-shadow path == the overflow:hidden clip path (identical rounded rects). corner-shape:normal is INVALID in Chrome and silently dropped (v1's bug) - 'round' is the valid keyword that wins. Corners stay generously CURVED via --r-2xl (52px) - no 90-degree corners. Shadow now follows all four rounded corners. Crossfade + reveal lift untouched. Neutral ink shadow only (no brown, no gold-on-dark, no blue). */
#what .reveal-top .reveal-img.float-frame{
  position:relative;
  background:transparent;
  border:0;
  padding:0;
  border-radius:var(--r-2xl);
  overflow:hidden;                 /* the ONE clip - single source of truth */
  isolation:isolate;
  corner-shape:round !important;   /* CRITICAL: VALID keyword (not 'normal') - makes the clip a plain rounded-rect == the box-shadow's rounded-rect path so no square sliver leaks */
  will-change:transform;           /* stable GPU layer that survives the .lifted translateY */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* clean, even, soft, multi-layer floating drop shadow - neutral ink (22,19,13) tinted, never brown/gold */
  box-shadow:
    0 2px 4px rgba(22,19,13,.07),
    0 10px 22px -6px rgba(22,19,13,.13),
    0 28px 54px -18px rgba(22,19,13,.21),
    0 60px 104px -38px rgba(22,19,13,.27);
  transition:box-shadow .9s var(--ease),transform .9s var(--ease);
}
@supports(corner-shape:squircle){
  /* explicitly DISABLE the squircle that the base @supports rules (lines 1885 & 1941) turned on - that mismatch is the bug. corner-shape:round is the valid clip that matches the box-shadow path. */
  #what .reveal-top .reveal-img.float-frame{corner-shape:round !important;}
}
/* crossfade slides: fill the single clipped container, carry NO radius / NO squircle of their own (kills the double-mask sliver) */
#what .reveal-top .reveal-img.float-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  border-radius:0;
  box-shadow:none;
  corner-shape:round !important;
}
/* keep the crossfade slideshow working exactly as before (opacity toggle on .is-active) */
#what .reveal-top .reveal-img.float-frame img{opacity:0;transition:opacity 1.1s ease}
#what .reveal-top .reveal-img.float-frame img.is-active{opacity:1}
@media (prefers-reduced-motion: reduce){
  #what .reveal-top .reveal-img.float-frame img{transition:none}
}
/* keep the subtle reveal lift, shadow deepens slightly once in view - transform/opacity only */
@media(prefers-reduced-motion:no-preference){
  #what .reveal-top .reveal-img.float-frame.lifted{
    transform:translateY(-8px);
    box-shadow:
      0 3px 5px rgba(22,19,13,.08),
      0 14px 26px -6px rgba(22,19,13,.15),
      0 34px 60px -22px rgba(22,19,13,.23),
      0 70px 116px -40px rgba(22,19,13,.30);
  }
}
/* BACKSTOP: obliterate every legacy contact-shadow / radial rectangle / hairline / injected square frame that could sit behind the photo with a square (radius:0) corner */
#what .reveal-top .reveal-img.float-frame::before,
#what .reveal-top .reveal-img.float-frame::after,
#what .reveal-top .reveal-img.float-frame.frame-in::after{
  content:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  display:none !important;
}
#what .float-frame .reveal-figframe,
#what .reveal-figframe{display:none !important}
@media(max-width:820px){
  #what .reveal-top .reveal-img.float-frame{border-radius:var(--r-xl);corner-shape:round !important}
  #what .reveal-top .reveal-img.float-frame img{border-radius:0;corner-shape:round !important}
}


/* ===== task 3 (appended) ===== */
/* TASK 3 - #offer price slash: SOLID continuous champagne line, no gaps/dashes. */
/* Reveal the full line via a left-anchored scaleX wipe (driven by GSAP); transform/opacity only. */
#offer .offer-price__strike-line{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; transform-box:fill-box; transform-origin:0% 50%; transform:scaleX(0); }
#offer .offer-price__strike{ will-change:opacity; }
@media (prefers-reduced-motion: reduce){
  /* No slash at all under reduced motion (matches the JS reduce branch). */
  #offer .offer-price__strike{ display:none !important; }
  #offer .offer-price__strike-line{ transform:none !important; }
}


/* ===== task 4 (appended) ===== */

/* ===== TASK 4 :: #stories testimonial carousel (pc-) ===== */
#stories .pc{position:relative;margin-top:clamp(2.6rem,4.4vw,3.8rem);--pc-gap:clamp(1rem,2vw,1.6rem)}
#stories .pc__viewport{overflow:hidden;border-radius:var(--r-xl);outline:none;cursor:grab;-webkit-mask:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);mask:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
#stories .pc__viewport.is-dragging{cursor:grabbing}
#stories .pc__viewport:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;border-radius:var(--r-xl)}
#stories .pc__track{display:flex;gap:var(--pc-gap);align-items:stretch;touch-action:pan-y;will-change:transform;user-select:none;padding-block:clamp(.6rem,1.4vw,1.2rem)}
#stories .pc__slide{position:relative;isolation:isolate;flex:0 0 clamp(280px,46%,520px);box-sizing:border-box;border-radius:var(--r-xl);border:1px solid var(--line-soft);background:var(--paper);padding:clamp(2rem,3vw,3rem);display:flex;flex-direction:column;gap:1.2rem;min-height:clamp(300px,34vw,372px);
  transition:transform .55s var(--ease-expo,cubic-bezier(.16,1,.3,1)),opacity .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
  transform:scale(.9);opacity:.5;box-shadow:0 22px 50px -40px rgba(22,19,13,.4);will-change:transform,opacity}
#stories .pc__slide > *{position:relative;z-index:1}
#stories .pc__slide.is-active{transform:scale(1);opacity:1;box-shadow:0 46px 90px -46px rgba(22,19,13,.5);border-color:rgba(201,162,39,.34)}
#stories .pc__mark{font-family:var(--f-disp);font-weight:300;font-size:clamp(3rem,5vw,4.4rem);line-height:.5;color:var(--gold);opacity:.85}
#stories .pc__quote{font-family:var(--f-disp);font-weight:300;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.32;color:var(--ink);margin:0}
#stories .pc__rule{display:block;width:46px;height:1px;margin-top:auto;background:linear-gradient(90deg,var(--gold-deep),transparent)}
#stories .pc__who{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* featured -- ink card, champagne accents (NO gold on brown rule: bone/champagne only on dark) */
#stories .pc__slide--feature{background:var(--ink);color:var(--bone);border-color:rgba(244,241,234,.12);justify-content:center}
#stories .pc__slide--feature .pc__mark{color:var(--gold-soft)}
#stories .pc__slide--feature .pc__quote{color:var(--bone);font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.2}
#stories .pc__slide--feature .pc__key{font-style:italic;color:var(--gold-soft)}
#stories .pc__slide--feature .pc__rule{background:linear-gradient(90deg,var(--gold-soft),transparent)}
#stories .pc__slide--feature .pc__who{color:rgba(244,241,234,.64)}
/* controls */
#stories .pc__controls{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(1.8rem,3vw,2.6rem)}
#stories .pc__arrow{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-max);border:1px solid var(--line);background:rgba(251,250,246,.6);color:var(--ink);cursor:pointer;
  transition:transform .4s var(--ease-expo,cubic-bezier(.16,1,.3,1)),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),opacity .35s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#stories .pc__arrow svg{width:22px;height:22px}
#stories .pc__arrow:hover{background:var(--ink);color:var(--bone);border-color:var(--ink);transform:translateY(-2px)}
#stories .pc__arrow:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
#stories .pc__arrow:disabled{opacity:.32;cursor:default;pointer-events:none}
#stories .pc__arrow:active{transform:scale(.94)}
#stories .pc__dots{display:flex;align-items:center;gap:.55rem}
/* dot: fixed-box hit target; inner fill animates via transform:scaleX only (no layout width animation) */
#stories .pc__dot{position:relative;width:26px;height:18px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
#stories .pc__dot-i{display:block;width:26px;height:9px;border-radius:var(--r-max);background:var(--line);transform:scaleX(.346);transform-origin:center;
  transition:transform .5s var(--ease-expo,cubic-bezier(.16,1,.3,1)),background .4s var(--ease)}
#stories .pc__dot:hover .pc__dot-i{background:var(--ink-3)}
#stories .pc__dot.is-on .pc__dot-i{transform:scaleX(1);background:var(--gold-grad,linear-gradient(135deg,#e7cf86,#c9a227 55%,#9a7b1c))}
#stories .pc__dot:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:var(--r-max)}
#stories .pc__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:760px){
  #stories .pc__slide{flex-basis:min(86%,420px);padding:clamp(1.6rem,6vw,2.2rem);min-height:clamp(260px,72vw,340px)}
  #stories .pc__arrow{width:46px;height:46px}
}
@media (prefers-reduced-motion: reduce){
  #stories .pc__slide,#stories .pc__arrow,#stories .pc__dot-i{transition:opacity .2s linear,background .2s linear}
  #stories .pc__track{scroll-behavior:auto}
}



/* ============================================================
   7-AGENT REDESIGN PASS (appended overrides)
   ============================================================ */

/* ===== task 1 (appended) ===== */

/* ============================================================
   MOBILE PASS — NAV + HERO(#reel) + WHY(#why)  (loads last)
   ============================================================ */
@media (max-width:760px){
  /* ---------- NAV: compact thumb pill that reads over the light reel ---------- */
  #pnav{ padding:.85rem clamp(1.1rem,5vw,1.6rem); }
  #pnav__logo{ font-size:1.5rem; }
  #pnav__r{ gap:0; }
  #pnav__home{ margin-right:clamp(.9rem,4vw,1.3rem); font-size:.72rem; }
  #pnav .btn#pnav__cta{
    display:inline-flex; min-height:44px; padding:.72em 1.15em;
    font-size:.7rem; letter-spacing:.1em; line-height:1;
    max-width:min(52vw,210px); white-space:nowrap;
  }
  #pnav__cta-full{ display:inline; }
  #pnav__cta-short{ display:none; }
  /* keep the dark pill legible over the bright teeth before scroll */
  #pnav:not(.scrolled) .btn#pnav__cta{ background:var(--ink); color:var(--bone); box-shadow:0 8px 22px -12px rgba(0,0,0,.5); }

  /* ---------- HERO #reel: card band lifted clear of the CTA ---------- */
  /* raise the bottom band so the live card never sits under the CTA button */
  #reel .reel__side{ left:clamp(1rem,5vw,1.5rem); right:clamp(1rem,5vw,1.5rem); width:auto;
    top:auto; bottom:clamp(6.2rem,17vh,8.4rem); height:auto; min-height:46svh; }
  #reel .reel__cards{ position:relative; inset:auto; height:auto; min-height:46svh; }
  #reel .perlcard{
    top:auto; bottom:0; left:0; right:0;
    transform:translateY(var(--rise,0px));
    padding:1.15rem 1.25rem 1.25rem; border-radius:var(--r-md);
  }
  #reel .perlcard::before{ inset:6px; }
  #reel .perlcard__eyebrow{ letter-spacing:.18em; font-size:.62rem; }
  #reel .perlcard__title{ font-size:clamp(1.9rem,5.6vw + .4rem,2.5rem); line-height:.92; margin-top:.35rem; }
  #reel .perlcard__body{ max-width:none; margin-top:.6rem; font-size:.92rem; line-height:1.42; }
  #reel .perlcard__list{ margin-top:.7rem; }
  #reel .perlcard__list li{ padding:.5rem 0 .5rem 1.55rem; font-size:.88rem; line-height:1.35; }
  #reel .perlcard__list li::before{ top:.95em; }

  /* ---------- HERO #reel CTA: clean single-line thumb button ---------- */
  #reel .reel__cta{ left:0; right:0; bottom:clamp(1.5rem,5vh,2.4rem); padding:0 clamp(1rem,5vw,1.5rem); }
  #reel .btn-reel{
    width:auto; max-width:min(92vw,420px); min-height:52px;
    justify-content:center; padding:1.05em 1.6em;
    font-size:.82rem; letter-spacing:.1em; line-height:1.05;
    text-align:center; white-space:nowrap;
  }
  #reel .btn-reel__label{ white-space:nowrap; }

  /* ---------- WHY #why: title never clips, cards stack + tappable ---------- */
  #why .s-head.center{ padding-inline:.2rem; }
  #why .ktitle{ overflow-wrap:break-word; word-break:normal; hyphens:none;
    font-size:clamp(2rem,8.4vw,2.7rem); line-height:1.04; }
  #why .vs{ grid-template-columns:1fr; gap:1.1rem; margin-top:2.2rem; }
  #why .vs__col{ padding:1.5rem 1.4rem 1.6rem; }
  #why .vs__col h3{ font-size:clamp(1.7rem,7vw,2.1rem); margin-bottom:1.1rem; }
  #why .vs__col .vs__tag{ min-height:30px; display:inline-flex; align-items:center; margin-bottom:1.1rem; }
  #why .vs__col li{ padding:.85rem 0 .85rem 2.5rem; min-height:44px; display:flex; align-items:center; font-size:.98rem; line-height:1.3; }
}

@media (max-width:480px){
  #pnav .btn#pnav__cta{ max-width:46vw; }
  #pnav__cta-full{ display:none; }
  #pnav__cta-short{ display:inline; }
  #reel .reel__side{ bottom:clamp(5.6rem,16vh,7.6rem); }
  #reel .perlcard__title{ font-size:clamp(1.8rem,6vw,2.2rem); }
  #reel .perlcard__body{ font-size:.9rem; }
  #reel .btn-reel{ font-size:.78rem; padding:1.05em 1.3em; letter-spacing:.08em; }
  #why .ktitle{ font-size:clamp(1.85rem,8.6vw,2.4rem); }
  #why .vs__col h3{ font-size:clamp(1.55rem,7.2vw,1.95rem); }
}


/* ===== task 2 (appended) ===== */

/* ===== task-2 MOBILE (appended LAST) — #film + #what + #results phone polish ===== */
/* Skills: ui-ux-pro-max (44px touch targets, 16px+ body, 8px+ gaps, 1-col stacking),
   gsap-master (ScrollTrigger.batch stagger pattern -> expressed as CSS reveal-in delay so it
   never fights the existing [data-reveal] IIFE), motion-website-generator (transform/opacity
   only, reduced-motion respected). Light editorial luxury kept intact. */

@media (max-width:760px){

  /* ---------- (a) #film — one-line headline wraps gracefully, film centered with margins ---------- */
  #film.vsl-sec--center{ padding-block:clamp(3rem,9vw,4.6rem); }
  #film .wrap{ padding-inline:clamp(1.15rem,5vw,1.6rem); }
  #film .vsl-head{
    white-space:normal;                       /* never overflow on a phone */
    font-size:clamp(1.5rem,5.6vw,2rem);
    line-height:1.08; letter-spacing:.005em;
    max-width:16ch; margin-inline:auto;
    margin-bottom:clamp(1.5rem,5vw,2.1rem);
    text-wrap:balance;
  }
  #film .vsl-sec--center .vsl-player,
  #film .vsl-player{ max-width:100%; margin-inline:auto; border-radius:clamp(16px,4.5vw,22px); }
  /* tap-for-sound pill + play button stay comfortably thumb-sized */
  #film .vsl-player__play{ width:62px; height:62px; }
  #film .vsl-player__tag{ left:.85rem; bottom:.85rem; font-size:.66rem; padding:.42rem .8rem; }
  /* soften the blurred blobs so the dark desaturated bg reads clean, not muddy, on small screens */
  #film.vsl-sec--center .film-fx__blob{ opacity:.4; }

  /* ---------- (b) #what — stack copy -> photo -> 3 diff cards (1 column) ---------- */
  #what .wrap{ padding-inline:clamp(1.15rem,5vw,1.6rem); }
  #what .reveal-top{ display:block; }
  #what .reveal-copy{ padding-left:0; }
  #what .reveal-copy .reveal-hero,
  #what .reveal-hero{ font-size:clamp(2.2rem,9.6vw,3rem); line-height:1.0; max-width:14ch; }
  #what .reveal-copy p{ max-width:60ch; font-size:1.04rem; line-height:1.6; }

  /* portrait: taller, premium, rounded corners + soft float shadow intact, good gap above it */
  #what .reveal-top .reveal-img{
    margin-top:clamp(1.8rem,6vw,2.4rem);
    aspect-ratio:4/5; width:100%;
  }
  #what .reveal-top .reveal-img.float-frame{ border-radius:clamp(18px,5vw,24px); }
  #what .reveal-top .reveal-img.float-frame img{ border-radius:0; }

  /* CRITICAL FIX: an earlier @media(max-width:980px) forces 3 columns of ~92px.
     Stack the diff cards into one readable column and out-specify it. */
  #what .reveal-row,
  #what.section-pad .reveal-row{
    display:grid; grid-template-columns:1fr; gap:0;
    margin-top:clamp(2.4rem,8vw,3.2rem);
  }
  #what .reveal-row .diff{
    padding-top:1.5rem; margin-top:1.5rem;
    border-top:1px solid var(--line);
  }
  #what .reveal-row .diff:first-child{ margin-top:0; }
  #what .reveal-row .diff h3{ font-size:1.35rem; margin-block:.55rem .45rem; }
  #what .reveal-row .diff p{ font-size:1.02rem; line-height:1.55; max-width:60ch; }
  #what .reveal-row .diff .n{ font-size:.74rem; letter-spacing:.12em; }

  /* gsap-master stagger, done in CSS so it rides the existing .reveal-in transition (no JS conflict) */
  #what .reveal-row .diff.reveal-in{ transition-delay:.05s; }
  #what .reveal-row .diff:nth-child(2).reveal-in{ transition-delay:.16s; }
  #what .reveal-row .diff:nth-child(3).reveal-in{ transition-delay:.27s; }

  /* ---------- (c) #results — stage full-width on top, tidy thumbnail GRID below ---------- */
  #results .wrap{ padding-inline:clamp(1.15rem,5vw,1.6rem); }
  #results .ba__layout{ display:block; }

  /* drag stage: full width, a touch taller for a more confident before/after */
  #results .ba__stage{
    width:100%; max-width:100%;
    margin:clamp(1.6rem,6vw,2.2rem) auto 0;
    aspect-ratio:4/5; max-height:none;
    border-radius:clamp(18px,5vw,24px);
  }
  /* keep the After label clear of the drag knob */
  #results .ba__label{ top:.95rem; font-size:.6rem; padding:.42em .9em; letter-spacing:.18em; }
  #results .ba__label.b{ left:.95rem; }
  #results .ba__label.a{ right:.95rem; }
  /* knob stays a comfortable thumb target */
  #results .ba__handle .ba__knob,
  #results .ba__knob{ width:52px; height:52px; }

  /* picker hint */
  #results .ba__picker{ margin-top:0; }
  #results .ba__picker > .ba__hint{ text-align:center; margin-top:clamp(1.3rem,5vw,1.7rem); font-size:.72rem; }

  /* TIDY 2-col x 3-row grid of equal, rounded, well-spaced thumbnail cards — fits 390px & 360px */
  #results .ba__picker > #baRow.ba__row,
  #results #baRow.ba__row,
  #results .ba__row{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(.75rem,3.2vw,1.1rem);
    margin-top:clamp(1rem,4vw,1.4rem);
    overflow:visible; padding-bottom:0;
    flex-wrap:initial; justify-content:initial;
  }
  #results .ba__row .ba__case{
    width:auto !important; flex:initial; margin:0;
    aspect-ratio:4/5; border-radius:clamp(14px,4vw,18px);
    min-height:44px;                          /* touch target floor */
  }
  #results .ba__row .ba__case img{ border-radius:inherit; }
  @supports(corner-shape:squircle){ #results .ba__row .ba__case{ corner-shape:squircle; } }
}

/* ---------- finer phone tuning (480 / 360) ---------- */
@media (max-width:480px){
  #film .vsl-head{ font-size:clamp(1.42rem,6.2vw,1.84rem); max-width:15ch; }
  #what .reveal-copy .reveal-hero,
  #what .reveal-hero{ font-size:clamp(2.05rem,10.4vw,2.6rem); }
  #what .reveal-top .reveal-img{ aspect-ratio:5/6; }   /* a touch less tall on the smallest phones */
  #results .ba__stage{ aspect-ratio:5/6; }
  #results .ba__row .ba__case{ aspect-ratio:5/6; }
}


/* ===== task 3 (appended) ===== */

/* ============================================================
   TASK 3 MOBILE :: #offer + #process + #doctor (loads last)
   Light-editorial luxury, transform/opacity only, scoped.
   ============================================================ */
@media (max-width:760px){
  /* ---------- OFFER: force clean single-column stack ---------- */
  #offer .offer-card{ grid-template-columns:1fr; max-width:none; margin-top:clamp(2rem,7vw,2.8rem); }
  #offer .offer-card__main{ padding:clamp(1.7rem,6vw,2.4rem) clamp(1.4rem,5.5vw,2rem) clamp(1.6rem,5.5vw,2.1rem); align-items:flex-start; }
  #offer .offer-card__incl{ padding:clamp(1.7rem,6vw,2.3rem) clamp(1.4rem,5.5vw,2rem); border-left:0; border-top:1px solid var(--of-border-soft); }
  #offer .offer-kicker{ font-size:.66rem; letter-spacing:.2em; }
  #offer .offer-anchor{ margin-top:1.1rem; font-size:.9rem; }
  #offer .offer-price{ margin:.35rem 0 1rem; font-size:clamp(3.4rem,18vw,4.6rem); align-self:flex-start; }
  #offer .offer-save{ margin-top:.2rem; font-size:.66rem; letter-spacing:.08em; padding:.5rem .85rem; line-height:1.2; }
  #offer .offer-fin{ margin-top:1.25rem; font-size:1.02rem; line-height:1.4; }
  /* full-width CTA = thumb-reachable target */
  #offer .offer-cta{ margin-top:1.6rem; width:100%; padding-top:1.2em; padding-bottom:1.2em; min-height:54px; }
  #offer .offer-deposit{ margin-top:1.15rem; font-size:.82rem; line-height:1.45; align-items:flex-start; }
  #offer .offer-deposit__tick{ margin-top:.15rem; }
  #offer .offer-incl__h{ margin-bottom:1.15rem; font-size:.68rem; }
  #offer .offer-incl__list{ gap:.95rem; }
  #offer .offer-incl__list li{ font-size:1rem; line-height:1.4; padding-left:1.8rem; }

  /* ---------- PROCESS: true vertical timeline ---------- */
  #process .proc__track{ display:flex; flex-direction:column; gap:0; margin-top:clamp(2rem,7vw,2.8rem); padding-left:.25rem; }
  /* re-enable connector as a vertical gold thread through node centers */
  #process .proc__track::before{ display:block; top:34px; bottom:34px; left:27px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep));
    transform:scaleY(0); transform-origin:top center; transition:transform 1.1s var(--ease-expo) .15s; }
  #process .proc.is-in .proc__track::before{ transform:scaleY(1); }
  #process .pstep{ flex-direction:row; align-items:flex-start; text-align:left; gap:1.1rem;
    padding-bottom:clamp(1.8rem,7vw,2.6rem); }
  #process .pstep:last-child{ padding-bottom:0; }
  #process .pstep__node{ width:54px; height:54px; font-size:1.18rem; }
  #process .pstep__card{ flex:1 1 auto; padding-top:.45rem; }
  #process .pstep__card h3{ font-size:1.4rem; margin-bottom:.65rem; }
  #process .pstep__card p{ margin:0; max-width:none; font-size:1rem; line-height:1.55; }
  #process .pstep__time{ margin-top:.95rem; font-size:.64rem; padding:.4rem .8rem; }

  /* ---------- DOCTOR: portrait first, then copy ---------- */
  #doctor .auth__grid{ grid-template-columns:1fr; }
  #doctor .auth__photo{ order:-1; min-height:0; aspect-ratio:4/5; border-radius:var(--r-2xl); margin-bottom:clamp(1.6rem,6vw,2.2rem); }
  #doctor .auth__photo img{ object-position:50% 16%; }
  #doctor .auth__body{ padding:0 !important; }
  #doctor .auth__body > .eyebrow{ font-size:.7rem; }
  #doctor .auth__h{ margin-top:.6rem; line-height:1.06; }
  #doctor .auth__body > p.muted{ font-size:1rem; line-height:1.6; }
  #doctor .auth__sig{ height:54px; margin-top:1.6rem; }
  #doctor .auth__name{ margin-top:.7rem; }
}
@media (max-width:480px){
  /* keep the big price from kissing the card edge on small phones */
  #offer .offer-price{ font-size:clamp(3rem,17.5vw,4.1rem); }
  #offer .offer-fin{ font-size:.98rem; }
  #process .pstep__node{ width:50px; height:50px; font-size:1.1rem; }
  #process .proc__track::before{ left:25px; }
  #process .pstep__card h3{ font-size:1.28rem; }
  #doctor .auth__photo{ aspect-ratio:1/1.18; }
}
@media (prefers-reduced-motion: reduce){
  #process .proc__track::before{ transform:scaleY(1); transition:none; }
}


/* ===== task 4 (appended) ===== */

/* ================= TASK 4 :: MOBILE (stories / apply / faq / close / footer) ================= */
@media (max-width:760px){
  /* ---- #stories testimonial carousel: thumb-usable dots + tighter premium controls ---- */
  #stories .pc{--pc-gap:.85rem;margin-top:clamp(1.8rem,7vw,2.6rem)}
  #stories .pc__slide{flex-basis:min(88%,440px);padding:1.7rem 1.6rem;min-height:clamp(248px,70vw,320px);gap:1rem}
  #stories .pc__quote{font-size:clamp(1.28rem,5.2vw,1.62rem);line-height:1.34}
  #stories .pc__slide--feature .pc__quote{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.22}
  #stories .pc__mark{font-size:clamp(2.6rem,11vw,3.6rem)}
  #stories .pc__controls{gap:.7rem;margin-top:1.7rem}
  #stories .pc__arrow{width:48px;height:48px}
  #stories .pc__arrow svg{width:20px;height:20px}
  /* dots: enlarge invisible hit box to 44px tall while keeping the slim visible pill */
  #stories .pc__dots{gap:.2rem}
  #stories .pc__dot{width:30px;height:44px}
  #stories .pc__dot-i{width:22px;height:8px}

  /* ---- #apply: streamline aside + thumb-friendly form ---- */
  #apply .convert__grid{border-radius:var(--r-xl)}
  #apply .convert__aside{min-height:auto;padding:1.9rem 1.5rem 1.7rem}
  #apply .convert__aside h2{font-size:clamp(1.7rem,7.6vw,2.3rem);line-height:1.04;margin-bottom:.9rem}
  #apply .convert__aside ul{gap:.7rem;margin-top:.9rem}
  #apply .convert__aside li{font-size:.98rem;line-height:1.4}
  #apply .form-pane{padding:1.7rem 1.5rem 1.9rem}
  #apply .form__progress{margin-bottom:1.7rem}
  #apply .fstep h3{font-size:clamp(1.35rem,6vw,1.7rem);line-height:1.1}
  #apply .fstep p.sub{margin-bottom:1.3rem}
  /* option buttons: generous tap area, clear 10px rhythm (ui-ux-pro-max: >=44px + >=8px gap) */
  #apply .opt{padding:1.15rem 1.2rem;margin-bottom:.65rem;min-height:56px;display:flex;align-items:center;line-height:1.3}
  #apply .opt:active{background:rgba(201,162,39,.12);border-color:var(--gold-deep)}
  /* inputs: guarantee >=48px tall and 16px+ font so iOS never zooms on focus */
  #apply .field{margin-bottom:1rem}
  #apply .field input{padding:.95rem 1.05rem;min-height:50px;font-size:max(16px,var(--t-body))}
  #apply .field .hint{font-size:.76rem;line-height:1.45}
  /* deposit + submit: clear and full-width */
  #apply .deposit-box{padding:1.2rem 1.2rem;margin-block:1.2rem;gap:.8rem}
  #apply .deposit-box .d-amt{font-size:1.7rem}
  #apply #submitBtn{min-height:54px;margin-top:.2rem}
  #apply .trust-micro{margin-top:1rem;line-height:1.5}
  #apply #nextBtn{min-height:52px}

  /* ---- #faq: full-width, comfortably tappable accordion rows ---- */
  #faq .faq__grid{gap:1.6rem}
  #faq .faq__anchor h2{line-height:1.04}
  #faq .faq__q{gap:1rem;padding:1.25rem 0;min-height:56px;font-size:clamp(1.05rem,4.6vw,1.3rem);line-height:1.28}
  #faq .faq__q .pm{width:26px;height:26px}
  #faq .faq__a p{padding-bottom:1.5rem;font-size:1rem;line-height:1.6}

  /* ---- #close: centered, balanced ---- */
  #close.close .wrap, .close .wrap{padding-block:clamp(4.5rem,15vh,7rem)}
  .close__big{font-size:clamp(2.5rem,12vw,3.6rem);max-width:14ch}
  .close__scarcity{font-size:.7rem}

  /* ---- footer: clean centered stack, tappable links ---- */
  .foot{padding-block:3rem;text-align:center}
  .foot__row{flex-direction:column;justify-content:center;gap:1.4rem}
  .foot__logo{font-size:1.5rem}
  .foot__links{justify-content:center;gap:.4rem 1.4rem;row-gap:.2rem}
  .foot__links a{padding:.55rem .2rem;min-height:44px;display:inline-flex;align-items:center}
  .foot__fine{margin-top:2rem;padding-top:1.6rem;text-align:left;line-height:1.75}
}

@media (max-width:480px){
  /* tighter still on the smallest phones (~360px) */
  #stories .pc__slide{flex-basis:90%;padding:1.5rem 1.35rem;min-height:240px}
  #stories .pc__quote{font-size:1.32rem}
  #stories .pc__slide--feature .pc__quote{font-size:1.55rem}
  #apply .convert__aside{padding:1.7rem 1.3rem 1.5rem}
  #apply .form-pane{padding:1.6rem 1.3rem 1.8rem}
  #apply .opt{padding:1.1rem 1.05rem}
  #apply .deposit-box{flex-wrap:wrap}
  #faq .faq__q{font-size:1.08rem}
  .close__big{font-size:clamp(2.4rem,13vw,3.2rem)}
  .foot__links{gap:.2rem 1.1rem}
}

/* ============================================================
   MOBILE hero fixes: no white nav box, instant + smooth cards
   ============================================================ */
@media (max-width:760px){
  /* remove the white nav box on scroll -- just the floating logo + Book Now button */
  #pnav.scrolled{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-bottom:0 !important; box-shadow:none !important; }
  #pnav.scrolled #pnav__logo{ color:var(--ink); }
  #pnav.scrolled #pnav__logo .tm{ color:var(--gold-deep); }

  /* hero story cards: drop the per-frame backdrop-blur (the scroll-jank source) for a solid cool-charcoal card,
     and make the first card visible the moment the page loads */
  #reel .perlcard{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:linear-gradient(168deg, rgba(26,30,36,.965) 0%, rgba(15,18,23,.975) 100%) !important; }
  #reel .perlcard[data-card="0"]{ opacity:1; }
}



/* ============================================================
   MOBILE FIX PASS (5-agent, appended overrides)
   ============================================================ */

/* ===== task 2: On mobile the .kw word-mask used overflow:hidden which shaved the italic right-s ===== */
@media (max-width:760px){
  /* TASK 2 — #why kinetic title: stop italic glyphs ('e' in change, 'r' in your) clipping on wrapped lines. The base .kw mask uses overflow:hidden (both axes); the GSAP reveal only needs the BOTTOM masked (inner starts at yPercent:120, i.e. below the box). Replace the box mask with a clip-path that clips only the bottom edge and lets left/right/top bleed out, so no horizontal glyph shaving. transform/opacity-safe, smile-arc + sparkle untouched, no brown. */
  /* bottom must clear DESCENDERS (g in "change", y in "your"/"ways") — was 0 which chopped them.
     -0.42em reveals the tails; the reveal's hidden state (inner at yPercent:120) sits far below this, so it stays masked. */
  #why .ktitle .kw{ overflow:visible !important; -webkit-clip-path:inset(-0.35em -0.6em -0.42em -0.6em) !important; clip-path:inset(-0.35em -0.6em -0.42em -0.6em) !important; }
  /* give the accent word a hair more right room for the steepest italic overhang */
  #why .ktitle .kaccent .kw{ padding-right:.56em !important; margin-right:-.56em !important; }
  /* keep a wrapped word off the hard right edge of the heading box */
  #why .s-head.center{ padding-inline:.45rem !important; }
  #why .ktitle{ padding-right:.18em; overflow:visible; }
}


/* ===== task 3: Widened the #film .vsl-head mobile max-width to ~24ch and trimmed its font-size/ ===== */
@media (max-width:760px){
  /* task-3: force "Learn more from the team handling your teeth" (44 chars) onto exactly 2 lines */
  /* prior rules capped max-width at 15-16ch -> 4 lines. ~22ch/line x 2 = 44 chars fits cleanly. */
  #film .vsl-head{
    white-space:normal !important;
    font-size:clamp(1.42rem,5.3vw,1.92rem) !important;
    line-height:1.1 !important;
    letter-spacing:.004em !important;
    max-width:24ch !important;
    margin-inline:auto !important;
    text-wrap:balance;
  }
}
@media (max-width:480px){
  /* keep 2 lines down to 360px: slightly smaller type, same generous wrap width */
  #film .vsl-head{
    font-size:clamp(1.34rem,5.9vw,1.7rem) !important;
    max-width:24ch !important;
  }
}


/* ===== task 4: Rewrote the before/after drag IIFE to use pointer capture and stage-bound pointe ===== */
@media (max-width:760px){
  #baStage,#baStage *{ touch-action:none; }
  #baStage .ba__handle,#baStage .ba__knob{ touch-action:none; }
}


/* ===== task 5: On mobile, switched the 6-thumbnail smile catalog from a 2-column (2x3) grid to  ===== */
@media (max-width:760px){
  /* TASK 5: smile catalog goes 3-per-row x 2-rows on mobile (was 2x3). Overrides the earlier 2-col grid; matches its specificity + uses !important on the column count to win the cascade. Math: at 360px the #results .wrap content area is ~324px; with two ~8px gaps each of the 3 thumbnails is ~102px wide (well over the 44px touch floor), and ~110px at 390px. */
  #results .ba__picker > #baRow.ba__row,
  #results #baRow.ba__row,
  #results .ba__row{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:clamp(.55rem,2.4vw,.8rem) !important;
    margin-top:clamp(1rem,4vw,1.4rem);
    overflow:visible; padding-bottom:0;
    flex-wrap:initial; justify-content:initial;
  }
  /* smaller equal cards so 3 fit cleanly; keep rounded corners + tap-target floor */
  #results .ba__row .ba__case{
    width:auto !important; flex:initial; margin:0;
    aspect-ratio:4/5;
    border-radius:clamp(12px,3.4vw,16px);
    min-height:44px;
  }
  #results .ba__row .ba__case img{ border-radius:inherit; }
  @supports(corner-shape:squircle){ #results .ba__row .ba__case{ corner-shape:squircle; } }
}
@media (max-width:480px){
  /* keep the catalog 3-up and rounded on the smallest phones (an earlier 480 rule retargets aspect-ratio; reaffirm 3 cols here so it never reverts) */
  #results .ba__picker > #baRow.ba__row,
  #results #baRow.ba__row,
  #results .ba__row{ grid-template-columns:repeat(3,1fr) !important; gap:clamp(.5rem,2.2vw,.72rem) !important; }
  #results .ba__row .ba__case{ aspect-ratio:4/5; border-radius:clamp(11px,3.2vw,15px); }
}


/* ===== task 6: On mobile, restored symmetric gutter padding on the doctor body text and force t ===== */
/* ===== task 6 mobile :: #doctor body padding + visible portrait ===== */
@media (max-width:760px){
  /* (a) comfortable, symmetric horizontal padding so copy is not jammed to the edge */
  #doctor .auth__body.auth-motion{ padding:0 var(--gutter) !important; }
  /* (b) make the portrait visible again: undo any display:none / collapsed height / clip-path / opacity reveal */
  #doctor .auth__photo.auth-motion__photo{
    display:block !important;
    order:-1;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4/5;
    margin:0 var(--gutter) clamp(1.6rem,6vw,2.2rem) !important;
    border-radius:var(--r-2xl) !important;
    overflow:hidden;
    opacity:1 !important;
    visibility:visible !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    transform:none !important;
  }
  #doctor .auth__photo.auth-motion__photo img{
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 16%;
    border-radius:inherit;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}
@media (max-width:480px){
  #doctor .auth__photo.auth-motion__photo{ aspect-ratio:1/1.18; }
}

/* ============================================================
   POST-FIX TWEAKS (2026-06-07): doctor spacing + phone height
   ============================================================ */
@media (max-width:760px){
  /* Dr. Trembley section had 0 vertical padding on mobile: portrait touched the section above,
     and the name line crowded the next section. Add breathing room top and bottom. */
  #doctor{ padding-top:clamp(3rem,10vw,5rem) !important; padding-bottom:clamp(2.75rem,9vw,4.5rem) !important; }
  /* "See new smiles every day" phone mockup read too tall — trim its height a bit
     (chrome is anchored to the screen edges, so it stays intact). */
  .phone__frame{ aspect-ratio:9/17 !important; }
}

/* ============================================================
   HERO VIDEO  (v24 — replaces the scroll-scrubbed reel)
   ============================================================ */
/* SPLIT hero: copy LEFT, video RIGHT (desktop); stacked video-then-copy (mobile) */
.herov{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1.12fr;column-gap:clamp(.8rem,1.6vw,1.6rem);align-items:center;align-content:center;overflow:hidden;background:var(--bone);isolation:isolate;padding:clamp(4.5rem,8vh,6rem) clamp(1.5rem,4vw,3.5rem) clamp(2rem,4vh,3rem) 0}
.herov__media{position:relative;grid-column:2;grid-row:1;z-index:0;display:flex;align-items:center;justify-content:center;padding:0;background:transparent}
.herov__media .vsl-player{width:100%;box-shadow:0 44px 100px -48px rgba(22,19,13,.55)}
.herov__vid,.herov__vid--m{display:none}
.herov__scrim{display:none}
.herov__inner{position:relative;grid-column:1;grid-row:1;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(2rem,4vh,3.5rem) 0 clamp(2rem,4vh,3.5rem) var(--gutter)}
.herov__eyebrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:var(--t-eyebrow);color:var(--gold-deep);margin-bottom:1.2rem}
.herov__title{font-family:var(--f-disp);font-weight:600;font-size:clamp(2.6rem,1.2rem + 3.4vw,4.3rem);line-height:1;letter-spacing:-.025em;color:var(--ink);font-variation-settings:"opsz" 100}
.herov__title-em{color:var(--gold-deep)}
.herov__lede{margin-top:1.5rem;max-width:44ch;font-size:clamp(1.15rem,1rem + .55vw,1.42rem);line-height:1.5;color:var(--ink)}
.herov__lede-key{font-weight:600;color:var(--ink)}
.herov__cta{margin-top:2.3rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.herov__btn{padding:1.2em 2.4em;font-size:calc(var(--t-eyebrow) + .03rem);box-shadow:0 20px 44px -24px rgba(22,19,13,.65)}
.herov__cue{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:1.5px solid var(--ink-3);border-radius:14px;display:flex;justify-content:center;padding-top:7px;opacity:.7;transition:opacity .3s}
.herov__cue:hover{opacity:1}
.herov__cue-dot{width:4px;height:8px;border-radius:2px;background:var(--gold-deep);animation:herovcue 1.8s var(--ease) infinite}
@keyframes herovcue{0%{opacity:0;transform:translateY(-2px)}25%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translateY(13px)}}
@media (max-width:900px){
  .herov{grid-template-columns:1fr;min-height:auto}
  .herov__media{grid-column:auto;grid-row:auto;min-height:auto;padding:clamp(1.4rem,5vw,2.2rem) var(--gutter)}
  .herov__inner{grid-column:auto;grid-row:auto;align-items:flex-start;padding:clamp(2.6rem,7vw,3.6rem) var(--gutter) clamp(3.6rem,9vw,5rem)}
  .herov__title{font-size:clamp(2.4rem,7.2vw,3.4rem)}
  .herov__lede{font-size:1.12rem;max-width:46ch}
  .herov__cta{gap:1rem;flex-direction:column;align-items:flex-start;width:100%}
  .herov__btn{width:100%;justify-content:center}
  .herov__cue{display:none}
}
@media (prefers-reduced-motion: reduce){ .herov__cue-dot{animation:none} .herov__vid{display:none} .herov__media{background:#e8e1d3} }

/* PILLARS — three vs-porcelain reasons (re-homed reel cards) */
/* editorial numeral + hairline-divider treatment (taste-skill/impeccable: no 3-card grid) */
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:0;margin-top:clamp(2.6rem,5vh,4.4rem)}
.pillar{position:relative;display:flex;flex-direction:column;padding:.4rem clamp(1.4rem,3vw,2.8rem)}
.pillar:first-child{padding-left:0}
.pillar:last-child{padding-right:0}
.pillar + .pillar{border-left:1px solid var(--line)}
.pillar__n{display:block;font-family:var(--f-disp);font-weight:300;font-size:clamp(2.6rem,1.6rem + 2.4vw,3.8rem);line-height:1;color:var(--gold-deep);font-feature-settings:"tnum";margin-bottom:.7rem;opacity:.92}
.pillar__title{font-family:var(--f-disp);font-weight:400;font-size:var(--t-h3);margin:0 0 .7rem;font-variation-settings:"opsz" 50}
.pillar p{color:var(--ink-2);font-size:1.02rem;line-height:1.62}
@media (max-width:760px){ .pillars__grid{grid-template-columns:1fr;gap:0} .pillar{padding:1.5rem 0} .pillar:first-child{padding-top:0} .pillar + .pillar{border-left:0;border-top:1px solid var(--line)} }

/* WHAT IS PERL — story + topic Q-cards (PERL-06/07/28) */
.whatis__eyebrow{margin-bottom:1.1rem}
.story{max-width:62ch;margin:clamp(3.4rem,8vh,6rem) auto 0;text-align:center}
.story__lede{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);line-height:1.16;color:var(--ink);font-variation-settings:"opsz" 70}
.story__body{margin-top:1.2rem;color:var(--ink-2);font-size:1.08rem;line-height:1.65}
.story__points{list-style:none;margin:1.9rem auto 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.story__points li{font-size:1rem;font-weight:600;color:var(--ink-2)}.story__points li::before{content:"\2713";color:var(--gold-deep);font-weight:700;margin-right:.55em}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:clamp(1rem,2.2vw,1.8rem);margin-top:clamp(3rem,7vh,5rem)}
.qcard{display:flex;flex-direction:column;padding:1.9rem 1.7rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bone-2);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.qcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(22,19,13,.3)}
.qcard__q{font-family:var(--f-disp);font-weight:400;font-size:1.22rem;line-height:1.16;margin:0 0 .7rem;color:var(--ink);font-variation-settings:"opsz" 40}
.qcard p{color:var(--ink-2);font-size:1rem;line-height:1.6;margin:0}
@media (max-width:860px){ .qgrid{grid-template-columns:1fr} }

/* PROCESS subhead (PERL-23) */
.proc__sub{margin-top:1.1rem;max-width:48ch;color:var(--ink-2);font-size:1.05rem;line-height:1.55}

/* CANDIDATE section (PERL-26) */
.candidate{background:var(--paper)}
.candidate__sub{max-width:60ch;margin:1.4rem auto 0;color:var(--ink-2);font-size:1.08rem;line-height:1.6}
.candidate__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);margin-top:clamp(2.6rem,6vh,4.5rem);align-items:start}
.cand{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem);background:var(--bone)}
.cand--yes{border-color:rgba(154,123,28,.42);box-shadow:0 24px 50px -34px rgba(154,123,28,.45)}
.cand__tag{display:inline-block;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-eyebrow);color:var(--gold-deep);margin-bottom:1.3rem}
.cand--no .cand__tag{color:var(--ink-3)}
.cand__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
.cand__list li{position:relative;padding-left:1.9rem;color:var(--ink-2);line-height:1.5}
.cand__list li::before{position:absolute;left:0;top:0;font-weight:700;font-size:1.05em}
.cand--yes .cand__list li::before{content:"\2713";color:var(--gold-deep)}
.cand--no .cand__list li::before{content:"\2013";color:var(--ink-3)}
.candidate__cta{text-align:center;margin-top:clamp(2.4rem,5vh,3.6rem)}
.candidate__note{max-width:54ch;margin:1.2rem auto 0;color:var(--ink-3);font-size:.98rem;line-height:1.55}
@media (max-width:760px){ .candidate__cols{grid-template-columns:1fr;gap:1rem} }

/* SOCIAL — extra top buffer (PERL-19) + card font change off the display serif (PERL-20) */
#social{ padding-top:clamp(7rem,16vh,13rem); }
.splat__body b{ font-family:var(--f-sans); font-weight:700; letter-spacing:.005em; font-size:1.02rem; }
.splat__cta{ font-family:var(--f-sans); font-weight:700; letter-spacing:.05em; }
.social__links-h{ font-family:var(--f-sans); font-weight:700; letter-spacing:.16em; }

/* BOOKING — multi-step quiz replacement (PERL-14/16) */
.book__pane{display:flex;flex-direction:column}
.book__h{font-family:var(--f-disp);font-weight:300;font-size:var(--t-h3);margin:0 0 .45rem;font-variation-settings:"opsz" 50}
.book__sub{color:var(--ink-3);margin:0 0 1.5rem;line-height:1.5}
.book__primary{width:100%;justify-content:center}
.book__call{display:block;text-align:center;margin-top:.95rem;color:var(--ink-2);font-size:.98rem}
.book__call strong{color:var(--ink);white-space:nowrap}
.book__or{display:flex;align-items:center;gap:1rem;margin:1.7rem 0 1.3rem;color:var(--ink-3);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.book__or::before,.book__or::after{content:"";flex:1;height:1px;background:var(--line)}
.book__form .field{margin-bottom:.95rem}
.book__submit{width:100%;justify-content:center;margin-top:.5rem}
.book__hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- PERL critic-sweep polish ---- */
.vs{align-items:stretch}
.vs__col{display:flex;flex-direction:column}
.social__stage{ gap:clamp(1.4rem,4vw,3.4rem); }
.social__links{ align-self:center; }
.candidate{ background:var(--bone-2); }
.cand{ background:var(--paper); }
#what .reveal-slides img{ object-position:50% 36%; }
@media (max-width:820px){ .reveal-top .reveal-img{ margin-top:1.8rem; } }
@media (max-width:760px){ #pnav.scrolled{ background:rgba(244,241,234,.95); backdrop-filter:blur(14px); } }

/* ---- audit fixes ---- */
/* anchor-offset: in-page links (#what, #film, #apply, etc.) must clear the fixed nav (was missing) */
section[id]{ scroll-margin-top: clamp(4.5rem, 9vh, 6rem); }
/* mobile: pad the dark footer so the floating "Book now" bar never hides the last footer line */
@media (max-width:760px){ .foot{ padding-bottom: 6rem; } }

/* PERL-12: single-image (after-only) state for non-paired gallery cases — no fake before/after drag */
.ba__stage--single .ba__handle{ display:none; }
.ba__stage--single .ba__label.b{ display:none; }
.ba__stage--single .ba__after{ clip-path:none !important; }
.ba__stage--single{ cursor:default; }


/* mobile: keep the aside patient's face framed and text readable (visual QA) */
@media(max-width:760px){
  .convert__aside img{object-position:50% 12%}
  .convert__aside::after{background:linear-gradient(200deg,rgba(22,19,13,.45),rgba(22,19,13,.9))}
}

/* light-break section: scoped light tokens (client: moody overall, light sparingly) */
.light{
  --bone:#f4f1ea; --bone-2:#e8e1d3; --bone-3:#ded5c5; --paper:#fbfaf6;
  --ink:#16130d; --ink-90:#221e16; --ink-2:#4a4438; --ink-3:#857d6d;
  --line:rgba(22,19,13,.14); --line-soft:rgba(22,19,13,.08);
  background:var(--bone);
}

/* side-by-side before/after pair (drag slider removed per client) */
.ba2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1.1rem);max-width:880px;margin:2.2rem auto 0}
.ba2__panel{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-2xl);border:1px solid var(--line)}
.ba2__panel img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   REVISION v5 — MOODY DARK (client: darker, masculine, modern;
   modeled on the Dr. Trembley page). Light breaks stay scoped
   via .light. This block must remain LAST to win the cascade.
   ============================================================ */
:root{
  --bone:#1b1712; --bone-2:#221d16; --bone-3:#2a241b; --paper:#15110c;
  --ink:#f2ede2; --ink-90:#e9e2d4; --ink-2:#c7bda9; --ink-3:#93876f;
  --line:rgba(242,237,226,.16); --line-soft:rgba(242,237,226,.08);
}
body{background-color:#15110c;background:linear-gradient(180deg, #201a13 0%, #181410 40%, #131009 100%)}
.section-pad.alt{background:linear-gradient(180deg,#1e1913 0%,#171310 100%)}
#doctor{background:linear-gradient(180deg,#1c1712,#141110)}
.offer{background:radial-gradient(130% 110% at 50% 0%, #262320 0%, #0e0d0b 70%)}
.close{background:#0e0d0b}
#pnav{background:rgba(20,16,12,.6)}
#pnav.scrolled{background:rgba(20,16,12,.88)}
.btn-line{background:rgba(24,20,15,.5)}
.light .btn-line{background:rgba(255,255,255,.5)}

/* v5 continued — component fixes for the dark base */
.vs__col--bad{background:linear-gradient(180deg,#262019,#1c1813);border:1px solid var(--line-soft)}
.vs__col--bad h3{color:var(--ink-2)}
.vs__col--bad li{color:var(--ink-3)}
.vs__col--bad li::before{background:rgba(242,237,226,.08);color:var(--ink-3)}
.vs__col--good{color:#f4f1ea}
.vs__col--good h3{color:#f4f1ea}
.vs__col--good li{color:#f4f1ea}
.vs__tag{color:var(--ink-3);border-color:var(--line)}
#results > .results__bg{background:
  radial-gradient(120% 78% at 50% -8%, rgba(56,46,32,.55) 0%, rgba(56,46,32,0) 58%),
  linear-gradient(180deg, #1e1913 0%, #171310 100%)}
#results > .results__bg::before{background:none}
#results > .results__grain{mix-blend-mode:overlay;opacity:.3}
.steps-grid .step{background:linear-gradient(180deg,#242019,#1b1712)}
/* the process timeline keeps its warm cream — the deliberate light break */

/* v5 continued — targeted literal fixes from computed-style probe */
.light .s-head h2, .light .proc__sub{color:#221e16}
.light .s-head h2 .display{color:#9a7b1c}
#social .social__head h2{color:#f2ede2}
.close .close__big{color:#f4f1ea}
.convert__aside h2{color:#f4f1ea}
.foot{background:#100e0b}
.offer-fin{color:#c7bda9}
.offer-fin strong{color:#f0d98a}
.offer-incl__list li{color:rgba(244,241,234,.85)}
.offer-anchor{color:rgba(244,241,234,.6)}

/* v5 continued — the old design used var(--bone) as cream TEXT; bone is now the dark bg token */
#offer .s-head h2{color:#f2ede2}
#offer .offer-fin strong{color:#f0d98a}
#offer .offer-incl__list li{color:rgba(244,241,234,.85)}
#offer .offer-price{color:#f4f1ea}
#offer .offer-kicker{color:rgba(244,241,234,.64)}
.pillar__title{color:#f2ede2}

/* v6 — client: bigger pair, visible labels, properly framed faces */
#results .ba__layout{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.ba2{max-width:none}
.ba2__panel{aspect-ratio:4/5}
.ba2__panel img{object-position:50% 20%}
.ba__label{font-size:.78rem;font-weight:700;background:rgba(12,10,8,.74);color:#f4f1ea;border:1px solid rgba(244,241,234,.3);backdrop-filter:blur(8px)}
.ba__label.a{color:#f0d98a}
#results .ba__row img{object-position:50% 14%}

/* v6 — 4 cases read better as a 2x2 of larger cards */
@media(min-width:961px){
  #results .ba__picker > #baRow.ba__row{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   v7 — NEUTRAL BLACK (client: the warm base read as brown).
   Gold stays as accent only; every base surface is neutral.
   Also: pair height locks to the picker's two rows.
   ============================================================ */
:root{
  --bone:#161616; --bone-2:#1d1d1d; --bone-3:#262626; --paper:#101010;
  --ink:#efefec; --ink-90:#e4e4e0; --ink-2:#b9b9b3; --ink-3:#8b8b85;
  --line:rgba(240,240,236,.15); --line-soft:rgba(240,240,236,.08);
}
body{background-color:#111111;background:linear-gradient(180deg, #1a1a1a 0%, #141414 40%, #0e0e0e 100%)}
.section-pad.alt{background:linear-gradient(180deg,#191919 0%,#131313 100%)}
#doctor{background:linear-gradient(180deg,#181818,#111111)}
.offer{background:radial-gradient(130% 110% at 50% 0%, #242424 0%, #0b0b0b 70%)}
.close{background:#0b0b0b}
#pnav{background:rgba(14,14,14,.6)}
#pnav.scrolled{background:rgba(14,14,14,.88)}
.btn-line{background:rgba(20,20,20,.5)}
.vs__col--bad{background:linear-gradient(180deg,#222222,#191919)}
.steps-grid .step{background:linear-gradient(180deg,#212121,#181818)}
#results > .results__bg{background:
  radial-gradient(120% 78% at 50% -8%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 58%),
  linear-gradient(180deg, #191919 0%, #131313 100%)}

/* pair matches the height of the two picker rows */
@media(min-width:961px){
  #results .ba__layout{align-items:stretch}
  .ba2{height:100%;align-items:stretch}
  .ba2__panel{aspect-ratio:auto;height:100%}
}

/* ===== LUXE PASS 2026-07-10 (v2): visible nav, logo lockup, gradient washes.
   Base stays NEUTRAL per v7 client note ("warm base read as brown");
   the lux comes from gold LIGHT auras + luminance travel, never brown tints. ===== */
#pnav:not(.scrolled){color:var(--ink)}
#pnav:not(.scrolled) #pnav__home{color:rgba(242,237,226,.78)}
#pnav:not(.scrolled) #pnav__home:hover,#pnav:not(.scrolled) #pnav__home:focus-visible{color:var(--gold-soft)}
#pnav:not(.scrolled) #pnav__loc{color:rgba(242,237,226,.45)}
#pnav__logo-img{display:block;height:40px;width:auto;filter:brightness(1.15)}
#pnav.scrolled #pnav__logo-img{filter:none}
#pnav__logo #pnav__logo-img--dark{display:none}
#pnav.scrolled #pnav__logo-img--light{display:none}
#pnav.scrolled #pnav__logo-img--dark{display:block}
.foot__logo-img{display:block;height:46px;width:auto;filter:brightness(1.12)}

body{background:linear-gradient(180deg,#1a1a1a 0%,#111111 45%,#0c0c0c 100%)}
.herov{background:
  radial-gradient(85% 75% at 76% 32%, rgba(212,175,55,.11) 0%, transparent 56%),
  radial-gradient(110% 80% at 12% 6%, rgba(255,255,255,.05) 0%, transparent 55%),
  linear-gradient(180deg,#1e1e1e 0%,#141414 68%,#0f0f0f 100%)}
.section-pad{background:linear-gradient(180deg,#1c1c1c 0%,#131313 58%,#0f0f0f 100%)}
.section-pad.alt{background:
  radial-gradient(95% 80% at 85% 0%, rgba(212,175,55,.10) 0%, transparent 54%),
  radial-gradient(120% 70% at 50% 110%, rgba(0,0,0,.5) 0%, transparent 60%),
  linear-gradient(180deg,#202020 0%,#151515 55%,#101010 100%)}
#pillars{background:
  radial-gradient(110% 85% at 12% 100%, rgba(212,175,55,.09) 0%, transparent 58%),
  radial-gradient(90% 60% at 88% 0%, rgba(255,255,255,.045) 0%, transparent 55%),
  linear-gradient(180deg,#151515 0%,#1d1d1d 100%)}
#what{background:
  radial-gradient(80% 65% at 50% -10%, rgba(212,175,55,.07) 0%, transparent 55%),
  linear-gradient(180deg,#1b1b1b 0%,#121212 100%)}
#results > .results__bg{background:
  radial-gradient(95% 70% at 50% -8%, rgba(212,175,55,.09) 0%, transparent 55%),
  radial-gradient(70% 55% at 88% 100%, rgba(255,255,255,.04) 0%, transparent 55%),
  linear-gradient(180deg,#1f1f1f 0%,#151515 60%,#111111 100%)}
.offer{background:
  radial-gradient(120% 100% at 50% 0%, #2a2a2a 0%, #0b0b0b 74%),
  #0b0b0b}
.offer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 8%, rgba(212,175,55,.10) 0%, transparent 60%)}
.offer{position:relative}
.offer > *{position:relative;z-index:1}
#doctor{background:
  radial-gradient(85% 80% at 82% 22%, rgba(212,175,55,.08) 0%, transparent 55%),
  linear-gradient(180deg,#1a1a1a 0%,#111111 100%)}
#social{background:
  radial-gradient(90% 70% at 15% 0%, rgba(212,175,55,.07) 0%, transparent 55%),
  linear-gradient(180deg,#191919 0%,#121212 100%)}
.close{background:
  radial-gradient(85% 65% at 50% 100%, rgba(212,175,55,.13) 0%, transparent 58%),
  radial-gradient(70% 55% at 50% 0%, rgba(255,255,255,.04) 0%, transparent 50%),
  linear-gradient(180deg,#121212 0%,#0a0a0a 100%)}
.foot{background:linear-gradient(180deg,#100f0e 0%,#0a0a09 100%)}
.section-pad.light, .proc.light{background:
  radial-gradient(95% 75% at 50% -10%, rgba(255,255,255,.75) 0%, transparent 55%),
  linear-gradient(180deg,#f7f3ea 0%,#eee7d8 100%)}

/* ===== LUXE PASS 3 2026-07-10: logo presence + dark-on-dark literal fixes ===== */
/* hero carries the full lockup — this page IS the PERL brand */
.herov__logo{display:block;width:clamp(170px,15vw,235px);height:auto;margin-bottom:1.7rem}
/* nav switches to the wordmark-only mark (denser, reads at small size) */
#pnav__logo-img{height:26px;filter:brightness(1.1)}
.foot__logo-img{height:54px}
/* v7 bone went dark; these still used it as cream text/fill */
.splat{color:#f4f1ea}
.splat__body b{color:#f4f1ea}
.splat__cta{background:#f4f1ea;color:#0c0c0c}
.splat:hover .splat__cta{background:var(--gold)}
/* signature png is WHITE; brightness(0) was for the old cream page */
.auth__sig{filter:none;opacity:.85}
/* candidate section read flat (QA) — same aura language as the rest */
#candidate{background:
  radial-gradient(100% 80% at 88% 0%, rgba(212,175,55,.08) 0%, transparent 55%),
  linear-gradient(180deg,#1b1b1b 0%,#121212 100%)}
/* v7 made the scrolled nav dark — keep the WHITE mark in both states, unify mobile */
#pnav.scrolled #pnav__logo-img--light{display:block}
#pnav.scrolled #pnav__logo-img--dark{display:none}
#pnav.scrolled #pnav__logo-img{filter:brightness(1.1)}
@media (max-width:760px){ #pnav.scrolled{ background:rgba(14,14,14,.88); backdrop-filter:blur(14px); } }
/* trimmed signature asset: real script height, not a 1080-square with padding */
.auth__sig{height:52px;margin-top:2.2rem}
/* site.css uppercases headings globally; PERL content keeps its own case (site footer excluded) */
h1,h2:not(.footer__head),h3{text-transform:none}

/* client's exact brand gold from HEX COLORS.key — "Muted Brass Gold" #B08D57 (headline, Ryan 2026-07-11) */
.herov__title-em{color:#B08D57}