/* ============================================================
   Dezawa Aesthetics™ — site rebuild V2 (additive layer)
   Loaded AFTER site.css on the -v2 pages only.
   NEVER touches v1 (index.html / product.html / about.html).
   New components: purchase dropdown · CTA cluster · benefit cards ·
   clinic strip · How-It-Works video · clinical results ·
   order-portal cards · footer social.
   Brand: brand/aes/brand-identity.md (LOCKED 2026-02-18)
   ============================================================ */

/* ---------- NAV: Purchase dropdown (pure CSS, hover + focus-within) ---------- */
.nav-purchase{position:relative;display:inline-flex}
.nav-purchase__btn{background:transparent;border:none;color:var(--text-light);font-family:var(--font-sans);
  font-size:11px;font-weight:700;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  padding:8px 14px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.nav-purchase__btn:hover,.nav-purchase:focus-within .nav-purchase__btn{color:var(--gold)}
.nav-purchase__btn svg{width:9px;height:9px;transition:transform .25s var(--ease-out)}
.nav-purchase:hover .nav-purchase__btn svg,.nav-purchase:focus-within .nav-purchase__btn svg{transform:rotate(180deg)}
.nav-purchase__panel{position:absolute;top:calc(100% + 12px);right:0;min-width:260px;padding:10px;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,.07) 100%),rgba(0,33,38,.94);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 24px 60px -28px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);z-index:210}
.nav-purchase:hover .nav-purchase__panel,.nav-purchase:focus-within .nav-purchase__panel{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-purchase__note{display:block;font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(231,242,231,.5);padding:8px 14px 6px}
.nav-purchase__link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:10px;
  text-decoration:none;transition:background .2s}
.nav-purchase__link:hover{background:rgba(255,255,255,.06)}
.nav-purchase__link .l{display:block;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text-light)}
.nav-purchase__link:hover .l{color:var(--gold)}
.nav-purchase__link .d{display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:400;color:rgba(231,242,231,.55);margin-top:3px}
.nav-purchase__link .arr{color:var(--gold);font-size:13px;flex-shrink:0}
@media (max-width:760px){.nav-purchase{display:none}}

/* ---------- TOP CTA CLUSTER (product hero) ---------- */
.cta-cluster{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cta-chip{display:inline-flex;flex-direction:column;gap:3px;min-width:190px;padding:16px 22px;border-radius:16px;
  text-decoration:none;border:1px solid rgba(231,242,231,.22);background:rgba(0,33,38,.4);backdrop-filter:blur(8px);
  transition:border-color .25s,background .25s,transform .25s}
.cta-chip:hover{border-color:var(--gold);transform:translateY(-2px);background:rgba(0,33,38,.6)}
.cta-chip--gold{background:var(--gold);border-color:var(--gold)}
.cta-chip--gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.cta-chip .cc-label{font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--text-light);display:flex;align-items:center;gap:8px}
.cta-chip .cc-sub{font-family:var(--font-sans);font-size:11px;color:rgba(231,242,231,.6);letter-spacing:.02em}
.cta-chip--gold .cc-label{color:var(--blue-deep)}
.cta-chip--gold .cc-sub{color:rgba(0,54,63,.7)}
.cta-chip .cc-label .arr{color:var(--gold);transition:transform .25s}
.cta-chip:hover .cc-label .arr{transform:translateX(4px)}
.cta-chip--gold .cc-label .arr{color:var(--blue-deep)}

/* small "redirects to partner" tag */
.redirect-note{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--font-sans);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.85}
.redirect-note svg{width:12px;height:12px}

/* ---------- HIGH-LEVEL BENEFIT CARDS ---------- */
.benefit-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.bcard{padding:30px 26px;border-radius:18px;background:rgba(0,33,38,.5);border:1px solid rgba(231,242,231,.14);
  backdrop-filter:blur(8px);transition:border-color .3s,transform .3s}
.bcard:hover{border-color:rgba(211,173,90,.5);transform:translateY(-3px)}
.bcard__glyph{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  background:linear-gradient(160deg,rgba(211,173,90,.22),rgba(211,173,90,.06));border:1px solid rgba(211,173,90,.35)}
.bcard__glyph svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.5}
.bcard h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--text-light);margin-bottom:10px;line-height:1.1}
.bcard p{font-family:var(--font-sans);font-size:13.5px;line-height:1.6;color:var(--text-soft)}
.section--warm .bcard{background:rgba(255,255,255,.5);border-color:rgba(138,100,37,.18)}
.section--warm .bcard h3{color:var(--blue-deep)}
.section--warm .bcard p{color:#3a4a44}
.section--warm .bcard__glyph{background:linear-gradient(160deg,rgba(138,100,37,.18),rgba(138,100,37,.05));border-color:rgba(138,100,37,.3)}
.section--warm .bcard__glyph svg{stroke:var(--gold-deep)}
@media (max-width:960px){.benefit-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.benefit-cards{grid-template-columns:1fr}}

/* ---------- HOW IT WORKS — video block ---------- */
.video-block{position:relative;margin-top:44px;border-radius:22px;overflow:hidden;border:1px solid rgba(231,242,231,.16);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
.video-block video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--blue-deep)}
.video-block__frame{position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(211,173,90,.14) inset;border-radius:22px}
.video-caption{margin-top:18px;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.02em;color:var(--text-muted);text-align:center}

/* ---------- CLINICAL RESULTS ---------- */
.results-intro{max-width:760px}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.result-card{border-radius:18px;overflow:hidden;background:rgba(0,33,38,.5);border:1px solid rgba(231,242,231,.14)}
.result-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(160deg,var(--sage) 0%,var(--blue-mid) 55%,var(--blue) 100%)}
.result-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.result-card__body{padding:20px 22px}
.result-card__body h4{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--text-light);margin-bottom:8px;line-height:1.15}
.result-card__body p{font-family:var(--font-sans);font-size:13px;line-height:1.55;color:var(--text-soft)}
.result-tag{display:inline-block;font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
@media (max-width:960px){.results-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.results-grid{grid-template-columns:1fr}}

/* immediate-results chips row (radiance / hydration / firmness ...) */
.immediate-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.immediate-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;
  background:rgba(0,33,38,.45);border:1px solid rgba(211,173,90,.28);
  font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--text-light)}
.immediate-chip svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.6}

/* asset-pending placeholder (before/after imagery from DMA) */
.asset-pending{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:4/5;border-radius:18px;text-align:center;padding:24px;
  background:repeating-linear-gradient(135deg,rgba(0,33,38,.55),rgba(0,33,38,.55) 14px,rgba(1,67,78,.55) 14px,rgba(1,67,78,.55) 28px);
  border:1px dashed rgba(211,173,90,.5)}
.asset-pending .ap-label{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.asset-pending .ap-desc{font-family:var(--font-sans);font-size:12px;color:var(--text-muted);max-width:220px;line-height:1.5}

/* ---------- ORDER-PORTAL / ACCESS cards (Peptual · Kairos) ---------- */
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;max-width:860px}
.portal-card{display:flex;flex-direction:column;gap:14px;padding:34px 30px;border-radius:20px;text-decoration:none;
  background:rgba(0,33,38,.5);border:1px solid rgba(231,242,231,.16);backdrop-filter:blur(8px);
  transition:border-color .3s,transform .3s,background .3s}
.portal-card:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(0,33,38,.66)}
.portal-card__logo{height:44px;display:flex;align-items:center}
.portal-card__logo img{max-height:44px;max-width:170px;object-fit:contain}
.portal-card__logo .wordmark{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:.02em;color:var(--text-light)}
.portal-card__type{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.portal-card__desc{font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--text-soft)}
.portal-card__cta{margin-top:auto;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.portal-card__cta .arr{transition:transform .25s}
.portal-card:hover .portal-card__cta .arr{transform:translateX(4px)}
@media (max-width:640px){.portal-grid{grid-template-columns:1fr}}

/* ---------- FEATURED CLINICS (home) + clinic strip ---------- */
.clinic-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.clinic-card{display:flex;flex-direction:column;gap:16px;padding:34px 32px;border-radius:20px;text-decoration:none;
  background:rgba(0,33,38,.5);border:1px solid rgba(231,242,231,.16);backdrop-filter:blur(8px);
  transition:border-color .3s,transform .3s,background .3s}
.clinic-card:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(0,33,38,.66)}
.clinic-card__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.clinic-card__logo{height:52px;display:flex;align-items:center}
.clinic-card__logo img{max-height:56px;max-width:190px;object-fit:contain}
.clinic-card__logo .wordmark{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--text-light);line-height:1.05}
.verified{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sage-light);
  padding:6px 12px;border-radius:999px;background:rgba(107,163,139,.14);border:1px solid rgba(107,163,139,.4)}
.verified svg{width:13px;height:13px;stroke:var(--sage-light);fill:none;stroke-width:2}
.clinic-card__role{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.clinic-card__desc{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-soft)}
.clinic-card__cta{margin-top:auto;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.clinic-card__cta .arr{transition:transform .25s}
.clinic-card:hover .clinic-card__cta .arr{transform:translateX(4px)}
@media (max-width:760px){.clinic-grid{grid-template-columns:1fr}}

/* logo scroller (clinic partnerships marquee) */
.clinic-strip{margin-top:40px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clinic-strip__track{display:flex;align-items:center;gap:64px;width:max-content;animation:clinicScroll 34s linear infinite}
.clinic-strip:hover .clinic-strip__track{animation-play-state:paused}
.clinic-logo{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;opacity:.72;transition:opacity .3s}
.clinic-logo:hover{opacity:1}
.clinic-logo .name{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:.02em;color:var(--text-soft);white-space:nowrap}
.clinic-logo .sub{font-family:var(--font-sans);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
@keyframes clinicScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.clinic-strip__track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}}

/* ---------- FOOTER social row ---------- */
.foot__social{display:flex;gap:14px;margin-top:22px}
.foot__social a{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(231,242,231,.18);color:var(--text-soft);transition:border-color .25s,color .25s,transform .25s}
.foot__social a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.foot__social svg{width:17px;height:17px;fill:currentColor}
/* multi-column footer sitemap */
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot__col h5{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
.foot__col a{display:block;font-family:var(--font-sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);text-decoration:none;margin-bottom:11px;transition:color .25s}
.foot__col a:hover{color:var(--gold)}
@media (max-width:760px){.foot__cols{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:460px){.foot__cols{grid-template-columns:1fr}}

/* ============================================================
   ELEGANT NAV (v3) — horizontal text, hairline, no loud gold pill
   Overrides the compact nav-actions layout. Restraint per brand book.
   ============================================================ */
.nav--line{gap:34px;border-bottom:1px solid rgba(231,242,231,.14);
  background:linear-gradient(180deg,rgba(0,54,63,.82) 0%,rgba(0,54,63,.28) 70%,rgba(0,54,63,0) 100%)}
.nav--line .nav-mark{height:34px}
/* family (sibling brands) — muted, letter-spaced, sits next to logo */
.nav-family{display:inline-flex;align-items:center;gap:26px;flex-shrink:0}
.nav-family a{font-family:var(--font-sans);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(231,242,231,.5);text-decoration:none;transition:color .25s;white-space:nowrap}
.nav-family a:hover{color:var(--text-light)}
.nav-family a.is-active{color:var(--text-light);font-weight:600}
/* primary page nav — pushed right, refined weight */
.nav-primary{display:inline-flex;align-items:center;gap:30px;margin-left:auto;flex-shrink:0}
.nav-primary > a,.nav-primary .nav-purchase__btn{position:relative;font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(231,242,231,.82);text-decoration:none;padding:6px 0;
  background:none;border:none;cursor:pointer;transition:color .25s}
.nav-primary > a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s var(--ease-out)}
.nav-primary > a:hover{color:var(--text-light)}
.nav-primary > a:hover::after{right:0}
.nav-primary .nav-purchase__btn{padding:6px 0}
.nav-primary .nav-purchase__btn svg{width:8px;height:8px}
/* "Partner With Us" = the single quiet emphasis: gold text, gold hairline */
.nav-primary a.nav-partner{color:var(--gold)}
.nav-primary a.nav-partner::after{right:0;opacity:.5}
.nav-primary a.nav-partner:hover{color:var(--gold-light)}
.nav--line .nav-menu-wrap{display:none}
@media (max-width:1180px){
  .nav-family{gap:18px}
  .nav-family a{font-size:9.5px;letter-spacing:.12em}
  .nav-primary{gap:22px}
}
@media (max-width:1000px){
  /* collapse to logo + hamburger; hide the horizontal clusters */
  .nav--line .nav-family,.nav--line .nav-primary{display:none}
  .nav--line .nav-menu-wrap{display:block;margin-left:auto;position:relative}
}

/* ============================================================
   TEAM — Guided by Scientific Leadership
   ============================================================ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.team-card{text-align:left}
.team-card__photo{position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--sage) 0%,var(--blue-mid) 55%,var(--blue) 100%);border:1px solid rgba(231,242,231,.14)}
.team-card__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.03)}
.team-card__photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,33,38,.55) 100%)}
.team-card h4{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--text-light);margin:18px 0 5px;line-height:1.1}
.team-card p{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);line-height:1.4}
.section--warm .team-card h4{color:var(--blue-deep)}
.section--warm .team-card p{color:var(--gold-deep)}
@media (max-width:900px){
  .team-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .team-card{scroll-snap-align:start}
}

/* ============================================================
   FLAT EDITORIAL IMAGE SECTIONS (break the teal · zero video weight)
   ============================================================ */
.editorial{position:relative;z-index:3;min-height:88vh;display:grid;align-items:center;overflow:hidden;background:var(--blue-deep)}
.editorial__media{position:absolute;inset:0;z-index:0}
.editorial__media img{width:100%;height:100%;object-fit:cover;display:block}
/* subtle palette grade so warm faces harmonize without going teal */
.editorial__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,33,38,.78) 0%,rgba(0,54,63,.42) 42%,rgba(0,54,63,.06) 100%)}
.editorial__grade--right{background:linear-gradient(270deg,rgba(0,33,38,.8) 0%,rgba(0,54,63,.42) 42%,rgba(0,54,63,.05) 100%)}
.editorial__grade--soft{background:linear-gradient(180deg,rgba(0,33,38,.28) 0%,rgba(0,33,38,.12) 45%,rgba(0,33,38,.55) 100%)}
.editorial__inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.editorial__inner--right{text-align:right;margin-left:auto}
.editorial__inner--right .body{margin-left:auto}
.editorial__inner--right .eyebrow{justify-content:flex-end}
.editorial__inner--right .eyebrow::before{display:none}
.editorial__inner--right .eyebrow::after{content:'';width:28px;height:1px;background:var(--gold);display:inline-block;flex-shrink:0}

/* stacked faces (two portraits back-to-back) */
.face-stack{position:relative;z-index:3;background:var(--blue-deep);display:grid;grid-template-columns:1fr 1fr;min-height:92vh}
.face-stack__cell{position:relative;overflow:hidden}
.face-stack__cell img,.face-stack__cell video{width:100%;height:100%;object-fit:cover;display:block;min-height:44vh}
.face-stack__cell::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,33,38,.2),rgba(0,33,38,.5))}
.face-stack__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:36px var(--gutter);
  font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,40px);color:var(--text-light);line-height:1.05;
  text-shadow:0 2px 24px rgba(0,0,0,.6)}
.face-stack__cap .gold{color:var(--gold)}
@media (max-width:760px){.face-stack{grid-template-columns:1fr}}

/* section eyebrow centering helper for warm CTA bands */
.section--warm .redirect-note{color:var(--gold-deep)}
.section--warm .immediate-chip{background:rgba(255,255,255,.55);border-color:rgba(138,100,37,.3);color:var(--blue-deep)}
.section--warm .immediate-chip svg{stroke:var(--gold-deep)}
.section--warm .result-card{background:rgba(255,255,255,.5);border-color:rgba(138,100,37,.18)}
.section--warm .result-card__body h4{color:var(--blue-deep)}
.section--warm .result-card__body p{color:#3a4a44}

/* ============================================================
   BRAND DIRECTION — 2026-07-03 (Lonnie)
   1) Header text GOLD · eyebrows WHITE (Carla Sans reads best in gold)
   2) Square corners everywhere (no rounded edges)
   3) No Carla Sans ligatures / swashes / flourishes
   ============================================================ */

/* --- 1 · Gold headers, white eyebrows ---
   Polished-metal gold: warm highlight → mid → a bright sheen band at ~52% →
   deep base. The mid sheen is what reads as brushed/liquid metal instead of flat foil. */
.display{
  background:linear-gradient(168deg,
    #fcefc0 0%,
    #eecf80 18%,
    #dcb35f 35%,
    #f5e4a4 52%,
    #cb9d40 70%,
    #b2862f 88%,
    #97701f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 13px rgba(0,0,0,.42));
  /* Design-council Sev-1: interior headline scale, down from clamp(40,5.6vw,82)/1.04.
     NOTE: no max-width here on purpose — a width cap on a block heading breaks
     centering in text-align:center sections (FAQ, pattern). The smaller size alone
     keeps long left-aligned titles from spanning the frame. Alignment stays with the parent. */
  font-size:clamp(34px,4.3vw,60px);line-height:1.06}
.display .gold,.display em{-webkit-text-fill-color:transparent}
/* Hero keeps its signature scale */
.chapter--hero .display{font-size:clamp(44px,5.6vw,82px)}
/* Guaranteed text-side scrim: body copy holds AA over live video/atmosphere.
   Darkens the text (left) column, fades to clear so product imagery stays bright on the right.
   Skips warm/cream chapters and the pattern chapter (which carries its own overlay). */
.chapter:not(.section--warm):not(.chapter--pattern)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,33,38,.72) 0%,rgba(0,33,38,.34) 44%,rgba(0,33,38,0) 72%)}
.chapter__inner{position:relative;z-index:1}
.eyebrow{color:var(--text-light)}
.eyebrow::before,.eyebrow::after{background:var(--text-light)}

/* --- Canvas chapter: heading top-left · body centered · sub bottom-right ---
   Matches the approved "Cellular Regeneration / For Skin and Scalp" composition:
   three anchored zones across a tall frame rather than a single stacked column. */
.chapter--canvas .chapter__inner{display:flex;flex-direction:column;justify-content:space-between;
  min-height:80vh;max-width:1240px;gap:6vh}
.chapter--canvas .cv-lead{align-self:flex-start;text-align:left;margin:0}
.chapter--canvas .cv-mid{align-self:center;text-align:center;max-width:620px;margin:0 auto}
.chapter--canvas .cv-end{align-self:flex-end;text-align:right;margin:0}
@media (max-width:760px){
  .chapter--canvas .chapter__inner{min-height:66vh;gap:4vh}
  .chapter--canvas .cv-lead,.chapter--canvas .cv-mid,.chapter--canvas .cv-end{align-self:flex-start;text-align:left;margin:0}
}
/* warm / cream surfaces: solid deep-gold header + dark eyebrow (light-gold gradient vanishes on cream) */
.section--warm .display{background:none;-webkit-text-fill-color:var(--gold-deep);color:var(--gold-deep);filter:none}
.section--warm .eyebrow{color:var(--blue-deep)}
.section--warm .eyebrow::before,.section--warm .eyebrow::after{background:var(--blue-deep)}

/* --- 2 · Square corners (brand: no rounded edges) --- */
.btn,.cta,.nav-brands,.nav-menu-panel,.nav-menu-link,.nav-menu-btn,.nav-purchase__panel,.nav-purchase__link,
.cta-chip,.bcard,.bcard__glyph,.comp-card,.video-block,.video-block__frame,.result-card,.result-card__media,
.immediate-chip,.asset-pending,.portal-card,.clinic-card,.team-card__photo,.verified,.foot__social a,
.benefit,.ph-badge{border-radius:0}

/* --- 3 · Carla Sans: no ligatures / swashes / contextual alternates --- */
.display,.display--caps,.wordmark,.team-card h4,.comp-card h3,.bcard h3,.result-card__body h4,
.portal-card__logo .wordmark,.clinic-card__logo .wordmark,.face-stack__cap,.video-duo__cap,.leader h4{
  font-variant-ligatures:none;
  -webkit-font-feature-settings:"liga" 0,"clig" 0,"dlig" 0,"hlig" 0,"calt" 0,"swsh" 0,"salt" 0;
  font-feature-settings:"liga" 0,"clig" 0,"dlig" 0,"hlig" 0,"calt" 0,"swsh" 0,"salt" 0}

/* ============================================================
   VIDEO SOLO — the DA Asian-woman footage (desktop wide clip;
   mobile swaps to the same clip's portrait crop).
   ============================================================ */
.video-solo{position:relative;z-index:3;min-height:86vh;display:grid;align-items:end;overflow:hidden;background:var(--blue-deep)}
.video-solo__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-solo__media--mob{display:none}
.video-solo__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,33,38,.62) 0%,rgba(0,54,63,.24) 46%,rgba(0,54,63,.04) 76%)}
.video-solo__inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter) 9vh}
.video-solo__cap{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.05;
  color:var(--gold);text-shadow:0 2px 24px rgba(0,0,0,.6)}
@media (max-width:760px){
  .video-solo__media--desk{display:none}
  .video-solo__media--mob{display:block}
}

/* ============================================================
   DESIGNED-FOR-PRACTICES — flat brand pattern + practice logos
   ============================================================ */
.chapter--pattern{background:var(--blue-deep) url('patterns/da-topography-teal.webp') center/cover no-repeat}
.chapter--pattern::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,54,63,.5) 0%,rgba(0,33,38,.72) 100%)}
.chapter--pattern .chapter__inner{position:relative;z-index:1}
/* Partner wall — labelled, hairline-framed row; equal cell height + dividers so the
   mixed text-lockup + logo marks read as one deliberate set. */
.partner-wall{max-width:940px;margin:50px auto 0}
.partner-wall__label{display:block;text-align:center;font-family:var(--font-sans);font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);opacity:.82;margin-bottom:26px}
.practice-logos{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;
  border-top:1px solid rgba(211,173,90,.28);border-bottom:1px solid rgba(211,173,90,.28)}
.practice-logo{flex:1 1 0;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:30px 24px;opacity:.9;transition:opacity .3s}
.practice-logo + .practice-logo{border-left:1px solid rgba(211,173,90,.16)}
.practice-logo:hover{opacity:1}
.practice-logo img{max-height:34px;max-width:196px;object-fit:contain}
.practice-logo--lg img{max-height:58px;max-width:120px}
/* real logo present → hide the text lockup; onerror removes the img → lockup returns */
.practice-logo:has(img) .pl-fallback{display:none}
.pl-name{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.7vw,21px);letter-spacing:.05em;
  color:var(--text-light);text-transform:uppercase;line-height:1.05;text-align:center}
.pl-sub{font-family:var(--font-sans);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,242,231,.5);text-align:center}
@media (max-width:760px){
  .practice-logos{flex-wrap:wrap;border-top:none;border-bottom:none}
  .practice-logo{flex:1 1 100%;min-height:auto;padding:22px}
  .practice-logo + .practice-logo{border-left:none;border-top:1px solid rgba(211,173,90,.16)}
}

/* ============================================================
   MEDIA-SPLIT — full-height media panel + copy/benefits (approved
   skin & scalp sections). Left media, right content.
   ============================================================ */
.media-split{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh;background:var(--blue)}
.media-split__media{position:relative;overflow:hidden}
.media-split__media img,.media-split__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-split__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,33,38,.12) 0%,rgba(0,54,63,.28) 100%)}
.media-split__body{display:flex;flex-direction:column;justify-content:center;padding:13vh var(--gutter)}
.media-split__body .num-list{margin-top:34px}
@media (max-width:860px){
  .media-split{grid-template-columns:1fr}
  .media-split__media{min-height:58vh}
}

/* two-column content inside a pattern chapter (Regenerative Intelligence) */
.split-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:8px}
@media (max-width:860px){.split-cols{grid-template-columns:1fr;gap:30px}}

/* flat brand-pattern flow section (FAQ) */
.section--pattern-flat{background:var(--blue-deep) url('patterns/da-topography-teal.webp') center/cover no-repeat}

/* clean product ground — two bottles on teal gradient, no competing video (Clinical-Grade §2) */
.chapter--product{background:radial-gradient(ellipse at 32% 42%,#036a69 0%,#01434e 52%,#00363f 100%)}

/* ============================================================
   DIPTYCH — skin ⇄ scalp (Animation Library §A sticky-bg crossfade
   + §C slide-in drawer + Penner power2.inOut). Base = flat stacked
   (mobile / reduced-motion / no-JS safe); .is-live = sticky crossfade.
   ============================================================ */
.diptych{position:relative;z-index:3;background:var(--blue)}
.diptych__stage{display:block}
.diptych__media{position:relative;overflow:hidden}
.diptych__media .dm{display:block;width:100%;height:58vh;object-fit:cover;object-position:50% 28%}
.diptych__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,33,38,.12) 0%,rgba(0,33,38,.16) 42%,rgba(0,33,38,.78) 100%)}
.dh{position:relative;z-index:2;padding:6vh var(--gutter) 2vh}
.dh .display{font-size:clamp(34px,4.2vw,60px)}
.dh .body{max-width:600px;margin-top:16px;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.dp{padding:0 var(--gutter) 6vh}
.dp .num-list{margin-top:0}
.diptych .dp .num-item{padding:22px 0}
.diptych .dp .num-item .t{font-size:16px;line-height:1.45}

/* live (wide desktop, GSAP): SQUARE gold-framed panel (top-left) with heading + body overlaid
   INSIDE the box at the bottom; numbered list on the teal to the right. The beautiful format. */
.diptych.is-live{height:auto}
.diptych.is-live .diptych__stage{height:100vh;overflow:hidden}
.diptych.is-live .diptych__media{position:absolute;top:12vh;bottom:12vh;left:var(--gutter);width:37%;height:auto;
  box-shadow:0 54px 130px -46px rgba(0,0,0,.72),0 10px 46px -22px rgba(0,0,0,.5)}
.diptych.is-live .diptych__media .dm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;will-change:transform;transform:scale(1.0)}
/* living-portrait flip: two teal-graded touch loops crossfade in sync with skin<->scalp.
   Videos only exist in the wide-desktop is-live state; mobile / reduced-motion / no-JS keep the still. */
.dm-vid{display:none}
.diptych.is-live .dm-still{display:none}
.diptych.is-live .dm-vid{display:block;object-fit:cover}
.diptych.is-live .diptych__media::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid rgba(211,173,90,.30);box-shadow:inset 0 0 90px rgba(0,33,38,.55)}
@media (prefers-reduced-motion:no-preference){
  .diptych.is-live .diptych__media .dm{animation:dmBreathe 26s ease-in-out infinite}
}
@keyframes dmBreathe{0%,100%{transform:scale(1.0)}50%{transform:scale(1.035)}}
/* warm inner bloom lifts her skin off the teal + bottom darken so the heading reads (Council Sev-1/2) */
.diptych.is-live .diptych__scrim{background:
  radial-gradient(135% 95% at 42% 30%,rgba(255,224,150,.11) 0%,rgba(255,224,150,0) 58%),
  linear-gradient(180deg,rgba(0,33,38,.05) 0%,rgba(0,33,38,.12) 48%,rgba(0,33,38,.60) 100%)}
.diptych.is-live .dh{position:absolute;left:var(--gutter);width:37%;bottom:12vh;padding:0 clamp(26px,2.4vw,42px) 5vh;will-change:opacity,transform}
.diptych.is-live .dh .display{font-size:clamp(30px,3vw,48px)}
.diptych.is-live .dh .body{max-width:none;margin-top:14px}
.diptych.is-live .dp{position:absolute;left:53%;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gutter) 0 4vw;will-change:opacity,transform}
.diptych.is-live .dh--scalp,.diptych.is-live .dp--scalp{opacity:0}

/* responsive <picture> atmosphere layer (desktop still + mobile crop) — inner img must cover */
.atmosphere__layer > img{width:100%;height:100%;object-fit:cover;display:block}
/* Atmosphere responsive swap: some triggers use a wide desktop clip + a portrait/close mobile crop
   (both share one data-bg id; only the breakpoint-appropriate one renders). */
.atmo--mob{display:none}
@media (max-width:760px){.atmo--desk{display:none}.atmo--mob{display:block}}

/* The Regenerative System — two components flanking the bottles (approved product §2) */
.regsys{
  display:grid;grid-template-columns:1fr minmax(290px,1fr) 1fr;
  gap:clamp(24px,3.4vw,56px);align-items:start;
  margin:clamp(26px,4vh,48px) 0 clamp(8px,1.6vh,16px);text-align:left;
}
/* BOTH columns read left — the grid carries the symmetry, never a ragged left edge.
   The right column's BOX is flush right; its text still reads left. */
.regsys__col{max-width:33ch;text-align:left}
.regsys__col:not(.regsys__col--right){justify-self:start}
.regsys__col--right{justify-self:end;text-align:left}

/* headings share one baseline so the two hairlines align even when they wrap differently */
.regsys__col h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,1.55vw,24px);line-height:1.18;color:var(--gold);
  letter-spacing:.02em;margin:0 0 .8em;
  min-height:2.36em;display:flex;align-items:flex-end;      /* 2-line box → shared baseline */
  padding-bottom:.66em;border-bottom:1px solid rgba(211,173,90,.28);
}
.regsys__col p{font-family:var(--font-sans);font-size:15.5px;line-height:1.75;color:var(--text-soft);margin:0}

.regsys__vials{position:relative;text-align:center;padding:0 clamp(4px,1vw,14px);isolation:isolate;align-self:center}
.regsys__vials::before{
  content:"";position:absolute;left:50%;top:53%;translate:-50% -50%;
  width:120%;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(107,163,139,.20) 0%, rgba(1,67,78,0) 68%);
}
.regsys__vials img{max-width:100%;object-fit:contain;filter:drop-shadow(0 30px 52px rgba(0,0,0,.55))}

@media (max-width:1024px){
  .regsys{grid-template-columns:1fr;text-align:center;gap:clamp(18px,3vh,28px)}
  .regsys__col,.regsys__col--right{justify-self:center;max-width:50ch;text-align:center}
  .regsys__col h3{border-bottom:0;padding-bottom:0;min-height:0;display:block}
  .regsys__vials{order:-1}
}


/* before/after pair (clinical results — Eleonora) */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px;max-width:860px}
.ba{position:relative;margin:0;overflow:hidden;border:1px solid rgba(231,242,231,.14)}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ba figcaption{position:absolute;top:16px;left:16px;font-family:var(--font-sans);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-light);
  background:rgba(0,33,38,.62);border:1px solid rgba(211,173,90,.45);padding:6px 13px;backdrop-filter:blur(6px)}
@media (max-width:560px){.ba-pair{grid-template-columns:1fr}}

/* ============================================================
   SCIENCE / PRODUCT v2 — approved-copy rebuild (2026-07-24)
   Additive only: new classes, no existing selector touched.
   stress-chain flow · dotted reveal list · one-by-one stagger.
   ============================================================ */
/* Stress cascade: STRESS-ENDURING MUSECELLS® ↓ STRESS-ADAPTED … ↓ STRESSED SKIN */
.stress-chain{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:42px}
.stress-chain .sc-node{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(17px,1.9vw,25px);color:var(--gold);line-height:1.12;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0,"dlig" 0,"swsh" 0}
.stress-chain .sc-arrow{color:rgba(211,173,90,.55);font-size:20px;line-height:1;margin:2px 0 2px 3px}
/* Dotted variant of the numbered list (why-different bullets) */
.num-list--dot .num-item{grid-template-columns:22px 1fr;gap:16px;align-items:start}
.num-list--dot .num-item .n{font-size:15px;line-height:1.7;color:var(--gold)}
.num-list--dot .num-item .t{font-size:16px;color:var(--text-soft)}
/* "Animate these to appear one by one" — children reveal in sequence */
.stagger > .reveal:nth-child(1){transition-delay:0s}
.stagger > .reveal:nth-child(2){transition-delay:.1s}
.stagger > .reveal:nth-child(3){transition-delay:.2s}
.stagger > .reveal:nth-child(4){transition-delay:.3s}
.stagger > .reveal:nth-child(5){transition-delay:.4s}
.stagger > .reveal:nth-child(6){transition-delay:.5s}
.stagger > .reveal:nth-child(7){transition-delay:.6s}
.stagger > .reveal:nth-child(8){transition-delay:.7s}
/* platform tagline under a numbered list */
.platform-line{margin-top:30px;font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.6;color:var(--gold)}
/* two-column "heading left · list right" (why-different, simple-difference) */
.split-lead{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start;margin-top:8px}
@media (max-width:860px){.split-lead{grid-template-columns:1fr;gap:26px}}


/* ============================================================
   BUTTONS — unified with the header ORDER pill (2026-07-25).
   Solid = gold pill w/ foil sheen. Line = hairline pill.
   One button language across the whole site.
   ============================================================ */
.btn{
  position:relative;overflow:hidden;border-radius:999px;
  font-family:var(--font-sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding:1.02em 2.1em;display:inline-flex;align-items:center;gap:.7em;
  transition:background .45s var(--ease-out),color .45s var(--ease-out),
             border-color .45s var(--ease-out);
  text-wrap:balance;text-align:center;line-height:1.5;   /* even wrap; NO max-width — it crushed flex-row buttons */
}
.btn-solid{background:var(--gold);color:var(--blue-deep);border:0}
.btn-solid::after{ /* the same foil sheen as the header Order pill */
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;pointer-events:none;
  background:linear-gradient(105deg,transparent 8%,rgba(255,252,240,.55) 50%,transparent 92%);
  transform:translateX(-120%) rotate(8deg);
}
.btn-solid:hover::after,.btn-solid:focus-visible::after{
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);transform:translateX(460%) rotate(8deg);
}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--gold-light)}
.btn-line{background:transparent;color:var(--gold);border:1px solid rgba(211,173,90,.5)}
.btn-line:hover,.btn-line:focus-visible{border-color:var(--gold);color:var(--gold-light);background:rgba(211,173,90,.08)}
.btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.btn .arr,.btn span[aria-hidden]{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn:hover .arr{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn .arr{transition:background .3s ease,color .3s ease}
  .btn-solid::after{display:none}
}

/* ============================================================
   ABOUT HERO — the discoverer in frame (2026-07-26, Lonnie)
   "it's About so it should really be about her."
   Copy holds the left; her portrait sits opposite it, sized as a
   PERSON not a badge. The avatar art already carries its own soft
   round vignette, so the only addition is a gold hairline ring and
   a caption in the site's existing eyebrow register — no card, no
   drop shadow, nothing that turns a portrait into a UI component.
   ============================================================ */
.about-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(30px,5vw,80px);
}
.about-hero__copy{min-width:0}
.about-hero__portrait{
  margin:0;justify-self:center;text-align:center;max-width:360px;
}
.about-hero__portrait img{
  display:block;width:100%;height:auto;border-radius:50%;
  border:1px solid rgba(211,173,90,.42);
  box-shadow:0 30px 80px -46px rgba(0,0,0,.8);
}
.about-hero__portrait figcaption{
  margin-top:20px;
  font-family:var(--font-sans,"Neue Haas Grotesk",Arial,sans-serif);
  text-transform:uppercase;
}
.about-hero__portrait figcaption b{
  display:block;font-weight:700;font-size:.78rem;letter-spacing:.2em;
  color:var(--gold,#d3ad5a);
}
.about-hero__portrait figcaption span{
  display:block;margin-top:7px;font-size:.68rem;letter-spacing:.2em;
  color:var(--text-muted,#a9bcb6);
}
/* reveal: the portrait rises with the copy rather than popping */
.about-hero__portrait.reveal{opacity:0;transform:translateY(24px) scale(.985)}
.about-hero__portrait.reveal.is-in{opacity:1;transform:none}

@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
  /* portrait leads on mobile — she is the subject of the page */
  .about-hero__portrait{order:-1;max-width:210px}
  .about-hero__portrait figcaption{margin-top:15px}
}

/* ---- a2 · the cell film, GRADED into the brand (2026-07-26, Lonnie:
   "section two *might* be the cells if and only if we get the color to be right")
   Raw footage is fluorescent blue + green — the two colours the palette does not own,
   and far too bright to sit under gold type. Strip most of the chroma, drop the
   luminance, then lay the brand teal over it so what survives is the MOTION and the
   cell forms, in our colour. Tune here, not in a re-encode. ---- */
.atmosphere__layer.atmo--cells{
  filter:saturate(.30) brightness(.40) contrast(1.06);
}
.atmosphere__layer.atmo--cells + .atmo-cells-wash,
.atmo--cells-wash{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,rgba(0,54,63,.55) 0%,rgba(0,33,38,.86) 70%);
  mix-blend-mode:multiply;
}

/* ---- soften the hero seam (2026-07-26, Lonnie: "im not sure about this harsh line,
   could we just have the hero video fade out?")
   .chapter--product paints an OPAQUE gradient, so its top edge cut the fixed atmosphere
   film off in a hard horizontal line. Same background, but moved to a masked pseudo-element
   that dissolves upward — the hero film now fades out instead of being guillotined. ---- */
/* .chapter--product overlay REMOVED 2026-07-26 — superseded by the solid atmosphere layer
   (see product-v2 p2). The opaque panel + masked pseudo-element was the source of the
   horizontal line; the atmosphere crossfade has no edge to show. */

/* ---- leadership: RECTANGLE RAIL, refined motion (v4 — 2026-07-26) ----
   REVERTED from circles: "no we liked the rectangles — i just meant that we could change how
   they were animated / how you did the horizontal scroll." The cards were never the problem.
   What changed is the MOTION and the edges:
     · the rail MASKS its own left/right edges, so cards dissolve instead of being guillotined
       by the container — that hard cut was what made the old rail feel bolted on;
     · cards enter with a staggered rise (transition-delay by position) rather than all at once;
     · click-drag to scroll on desktop, with snap set to `proximity` so it guides, never fights;
     · no arrows, no counter, no cue — the soft right edge is the affordance. */
.leaders.leaders--rail{                      /* out-specify the base .leaders grid */
  display:flex;flex-wrap:nowrap;gap:clamp(16px,1.8vw,28px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 18px;
  scrollbar-width:none;
  /* SCROLL-AWARE EDGES. A fade must MEAN "there is more this way" — so it appears only on a
     side that actually has hidden content (Lonnie: "end of line should be solid, more to see
     should have the blur"). Static masks got this wrong twice: they blurred the first card at
     scroll-zero, then blurred Cohen at the end where nothing follows. JS toggles .can-l/.can-r
     from scroll position; these four states are the result. Default: no mask at all. */
  -webkit-mask-image:none;mask-image:none;
  cursor:grab;
}
.leaders--rail.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.leaders--rail::-webkit-scrollbar{display:none}
.leaders--rail .leader{
  /* sized so SIX cannot fit the measure — the set runs past the right edge and the masked
     edge reveals a partial card. That peek IS the affordance; it is why no arrows are needed. */
  flex:0 0 clamp(210px,21vw,286px);scroll-snap-align:start;margin:0;
}
.leaders--rail .leader .ph{
  aspect-ratio:4/5;overflow:hidden;border-radius:2px;
  border:1px solid rgba(211,173,90,.20);
  box-shadow:0 22px 60px -38px rgba(0,0,0,.8);
}
.leaders--rail .leader .ph img{width:100%;height:100%;object-fit:cover;display:block}
.leaders--rail .leader h4{
  margin:16px 0 0;font-family:var(--font-sans,"Neue Haas Grotesk",Arial,sans-serif);
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-light,#fbf8f4);line-height:1.35;
}
.leaders--rail .leader p{
  margin:7px 0 0;font-family:var(--font-sans,"Neue Haas Grotesk",Arial,sans-serif);
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
  color:var(--text-muted,#a9bcb6);
}
/* staggered rise on entry — the rail assembles rather than appearing */
.leaders--rail.reveal .leader{opacity:0;transform:translateY(22px)}
.leaders--rail.reveal.is-in .leader{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s cubic-bezier(.16,1,.3,1);
}
.leaders--rail.reveal.is-in .leader:nth-child(1){transition-delay:.00s}
.leaders--rail.reveal.is-in .leader:nth-child(2){transition-delay:.07s}
.leaders--rail.reveal.is-in .leader:nth-child(3){transition-delay:.14s}
.leaders--rail.reveal.is-in .leader:nth-child(4){transition-delay:.21s}
.leaders--rail.reveal.is-in .leader:nth-child(5){transition-delay:.28s}
.leaders--rail.reveal.is-in .leader:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .leaders--rail.reveal .leader,.leaders--rail.reveal.is-in .leader{
    opacity:1;transform:none;transition:none}
  .leaders--rail{scroll-behavior:auto}
}

/* grab-to-scroll for the leadership rail (desktop affordance; touch already works) */

/* --- the four edge states (set by the scroll listener in about.html) --- */
.leaders--rail.can-r{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
}
.leaders--rail.can-l{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%);
}
.leaders--rail.can-l.can-r{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}

/* ---- About hero headline — studio typography rules (2026-07-26) ----
   TYPOGRAPHY-REFERENCE-INDEX: measure-controlled, `text-wrap:balance` on headings, fluid clamps.
   The hard <br> was the fault: it forced a break after "skincare," and then BOTH halves re-wrapped
   inside the portrait-narrowed column, producing four ragged lines. Remove the break, cap the
   measure so the wrap point is predictable, and let `balance` even the rag.
   `balance` is UNSUPPORTED on older iOS Safari, so it is a progressive enhancement only — the
   clamp + measure below do the real work and hold up without it. */
.about-hero__copy .display{
  text-wrap:balance;
  max-width:15ch;                       /* display measure — nothing like body's 65ch */
  font-size:clamp(2.1rem,4.4vw,3.5rem); /* sizes to the narrowed column, no reliance on balance */
  line-height:1.03;
  letter-spacing:.005em;
}
@media (max-width:900px){
  .about-hero__copy .display{max-width:18ch;font-size:clamp(1.9rem,7.4vw,2.6rem)}
}

/* ---- solid atmosphere layer — SHARED (must live here, not in a page-specific sheet) ----
   A "flat" beat is just an atmosphere layer that happens to be a solid colour, so it uses the
   same opacity crossfade as every other layer and can never show a seam. This rule was briefly
   in sci-split.css, which product-v2.html does NOT load — the layer would have rendered
   transparent there and the film would have shown through. Shared sheet only. */
.atmosphere__layer.atmo--solid{background:#013f49}

/* ---- brand grade for blue-leaning footage (2026-07-26) ----
   Stock ocean/underwater plates sit around hue 205-215 (blue); the brand ground is deep teal
   (~185). Rotating the hue down, pulling chroma back and dropping luminance lands the plate in
   the palette WITHOUT a re-encode — which matters while the clip is still a comp under review.
   Tune the numbers here; nothing is baked into the file. */
.atmosphere__layer.atmo--grade-teal{
  filter:hue-rotate(-24deg) saturate(.68) brightness(.62) contrast(1.06);
}