/* ============================================================
   noah.香港 — consultation landing · v3
   Single-language display (中文 default) + bottom language switch.
   Updated 2024–2025 local data sections. Cinematic Noah direction.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@300;400;500;700;900&display=swap");

:root {
  --font-hk: "Noto Sans HK", "PingFang HK", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --cta: var(--noah-orange);
  --cta-hover: var(--action-bg-hover);
  --cta-press: var(--action-bg-press);
  --hk-night: #100D0B;
  --hk-charcoal: #1A1613;
  --sec-pad: 124px;
  --gutter: 80px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--noah-white); }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--noah-ink); }
img { display: block; max-width: 100%; }

.page { width: 1440px; margin: 0 auto; transform-origin: top center; background: var(--noah-white); }
@media (min-width: 1025px) { .page { zoom: calc(100vw / 1440px); } }

.wrap { width: 1180px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { width: 1320px; margin: 0 auto; padding: 0 60px; }
.section { padding: var(--sec-pad) 0; }

/* ---------- single-language display ---------- */
[data-lang="cn"] .en { display: none !important; }
[data-lang="en"] .cn { display: none !important; }
.cn { font-family: var(--font-hk); }
.en { font-family: var(--font-display); }

.bihead { display: flex; flex-direction: column; gap: 8px; }
.bihead.center { align-items: center; text-align: center; }
.bihead .cn, .bihead .en { font-size: var(--pri); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; color: var(--noah-ink); margin: 0; text-wrap: balance; }
.bihead .en { font-weight: 600; }
.bihead.h1 { --pri: 64px; }
.bihead.h2 { --pri: 50px; }
.bihead.h3 { --pri: 32px; }

.bisub { display: flex; flex-direction: column; gap: 0; max-width: 660px; }
.bisub.center { align-items: center; text-align: center; margin: 0 auto; }
.bisub .cn, .bisub .en { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--noah-ink-soft); margin: 0; }

.on-dark .bihead .cn, .on-dark .bihead .en { color: #fff; }
.on-dark .bisub .cn, .on-dark .bisub .en { color: rgba(255,255,255,0.82); }
/* dark sections: keep headings white (flowfs stays dark — it's on cream) */
.match .bihead .cn, .match .bihead .en,
.osfs .os__head .cn, .osfs .os__head .en { color: #fff; }
.match .bisub .cn, .match .bisub .en { color: rgba(255,255,255,0.88); }
.osfs .os__head .eyebrow .cn, .osfs .os__head .eyebrow .en { color: var(--cta); }
.os__badge { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.os__launch { font-family: var(--font-hk); font-weight: 600; font-size: 13px; padding-left: 17px; }
.osfs .os__launch .cn, .osfs .os__launch .en { color: rgba(255,255,255,0.6); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-hk); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--cta); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cta); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-hk); font-weight: 700; border-radius: var(--radius-pill); border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.btn .arrow-ne { font-weight: 600; order: 2; }
.btn--primary { background: var(--cta); color: #fff; padding: 16px 28px; font-size: 19px; }
.btn--primary:hover { background: var(--cta-hover); }
.btn--primary:active { background: var(--cta-press); transform: scale(0.98); }
.btn--lg { padding: 19px 34px; font-size: 23px; }
.btn--ghost-light { background: rgba(255,255,255,0.06); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); padding: 14.5px 26px; font-size: 18px; backdrop-filter: blur(6px); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.14); }

/* ---------- ticker ---------- */
.ticker { position: relative; z-index: 50; width: 100%; background: var(--hk-night); color: rgba(255,255,255,0.85); overflow: hidden; padding: 11px 0; white-space: nowrap; }
.ticker__track { display: inline-flex; align-items: center; gap: 22px; animation: tickerScroll 40s linear infinite; will-change: transform; }
.ticker__track span { font-family: var(--font-hk); font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.8); }
.ticker__track .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--cta); flex-shrink: 0; }
@keyframes tickerScroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- nav ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: flex-end; padding: 24px 30px; }
.nav__spacer { flex: 1; }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__wm { height: 90px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav__chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border-radius: var(--radius-s); color: #fff; font-family: var(--font-hk); font-weight: 600; font-size: 14px; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.nav__chip:hover { background: rgba(255,255,255,0.2); }
.nav__menu { position: relative; }
.nav__dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; display: flex; flex-direction: column; padding: 8px; background: rgba(28,24,21,0.92); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-s); box-shadow: 0 18px 44px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 30; }
.nav__menu.is-open .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropitem { display: block; padding: 11px 14px; border-radius: 8px; color: #fff; text-decoration: none; font-family: var(--font-hk); font-size: 15px; line-height: 1.2; transition: background .15s ease; }
.nav__dropitem:hover { background: rgba(255,255,255,0.12); }
.nav__dropitem.is-current { color: var(--cta); }
.nav__chip-ic { width: 20px; height: 20px; display: none; flex-shrink: 0; }
.m-br { display: none; }
.dotcol { display: grid; grid-template-columns: 3px; grid-auto-rows: 3px; gap: 3px; }
.dotgrid { display: grid; grid-template-columns: repeat(3, 3px); grid-auto-rows: 3px; gap: 3px; }
.dotcol i, .dotgrid i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: block; }

/* ============================================================ HERO ============================================================ */
.hero { position: relative; height: 880px; overflow: hidden; background: var(--hk-night); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); transform: translateZ(0); isolation: isolate; }
.hero__slot, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.hero__img { background: url("assets/hero-hl-opt.jpg") 48% 30% / cover no-repeat; }
.hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 8%, rgba(16,13,11,0) 30%, rgba(16,13,11,0.55) 100%),
    linear-gradient(180deg, rgba(16,13,11,0.55) 0%, rgba(16,13,11,0) 26%, rgba(16,13,11,0.1) 52%, rgba(16,13,11,0.82) 84%, var(--hk-night) 100%); }
.hero__content { position: absolute; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 5; width: 780px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.hero .bihead .cn, .hero .bihead .en { color: #fff; }
.hero .bihead .cn { white-space: pre-line; }
.hero .bisub .cn, .hero .bisub .en { color: rgba(255,255,255,0.9); }
.hero__cta { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hero__note { font-family: var(--font-hk); font-size: 12px; color: rgba(255,255,255,0.45); max-width: 620px; line-height: 1.5; margin-top: 8px; }

/* ============================================================ MATCH — SmartMatch (dark) ============================================================ */
.match { position: relative; background: linear-gradient(110deg, var(--hk-night) 0%, var(--hk-charcoal) 52%, #3a2a1c 100%); color: #fff; padding: 116px 0; overflow: hidden; scroll-margin-top: 24px; }

/* animated background — irregular glowing lines that loop */
.match__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.match__bg svg { width: 100%; height: 100%; display: block; }
.match .wrap { position: relative; z-index: 1; }
.mline {
  stroke-linecap: round;
  stroke-dasharray: 340 1400;
  filter: drop-shadow(0 0 6px rgba(255,118,40,0.55)) drop-shadow(0 0 14px rgba(255,118,40,0.28));
  will-change: stroke-dashoffset, opacity;
}
.mline--1 { animation: mflow 13s linear infinite, mglow 5s ease-in-out infinite; }
.mline--2 { animation: mflow 17s linear infinite reverse, mglow 6.5s ease-in-out infinite; animation-delay: -4s, -2s; }
.mline--3 { animation: mflow 21s linear infinite, mglow 7s ease-in-out infinite; animation-delay: -9s, -3.5s; opacity: 0.7; }
.mline--4 { animation: mflow 15s linear infinite reverse, mglow 5.8s ease-in-out infinite; animation-delay: -6s, -1s; opacity: 0.6; }
@keyframes mflow { from { stroke-dashoffset: 1740; } to { stroke-dashoffset: 0; } }
@keyframes mglow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .mline { animation: none !important; stroke-dasharray: none; opacity: 0.4; }
}
.match__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 70px; align-items: center; }
.wrap .match__grid { } 
.match__copy { display: flex; flex-direction: column; gap: 22px; }
.match__points { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.match__micro { font-family: var(--font-hk); font-weight: 600; font-size: 14px; color: var(--cta); letter-spacing: 0.01em; margin: 0; }
.match__pt { display: flex; gap: 13px; align-items: flex-start; }
.match__pt > div { min-width: 0; font-size: 17px; line-height: 1.45; }
.match__pt .tick { color: var(--cta); font-weight: 700; font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.match__pt .cn, .match__pt .en { font-family: var(--font-hk); font-weight: 600; font-size: 17px; color: rgba(255,255,255,0.9); line-height: 1.45; white-space: nowrap; }
.smpanel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-l); padding: 30px; backdrop-filter: blur(8px); }

/* SmartMatch — vertical scrolling option list (smpanel--list) */
.smpanel--list { display: flex; flex-direction: column; }
.smpanel--list #sm-cta { align-self: flex-start; }
.optwrap { display: flex; gap: 16px; align-items: center; }
.optnav { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.optnav__btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); background: transparent; color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.optnav__btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }
.optnav__btn:active { transform: scale(0.96); }
.optlist { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; background: rgba(255,255,255,0.08); border: none; border-radius: var(--radius-pill); padding: 13px 20px; color: #fff; cursor: pointer; font: inherit; transition: background var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }
.opt:hover { background: rgba(255,255,255,0.14); }
.opt__ic { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.3px solid rgba(255,255,255,0.55); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: rgba(255,255,255,0.8); margin-top: 2px; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.opt__ic::before { content: '+'; }
.opt__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.opt__label { font-family: var(--font-hk); font-weight: 700; font-size: 17px; line-height: 1.35; color: #fff; }
.opt__desc { display: none; font-family: var(--font-hk); font-weight: 500; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.75); }
.opt.is-active { background: rgba(255,255,255,0.16); border-radius: var(--radius-l); padding: 16px 20px; }
.opt.is-active .opt__ic { background: var(--cta); border-color: var(--cta); }
.opt.is-active .opt__ic::before { content: ''; }
.opt.is-active .opt__desc { display: block; }
.smpanel__q { font-family: var(--font-hk); font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 18px; }
.smpanel__q .hint { font-family: var(--font-hk); font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.45); margin-left: 8px; }
.smpanel__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.smchip { font-family: var(--font-hk); font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,0.32); background: transparent; color: rgba(255,255,255,0.92); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.smchip:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.smchip.is-active { background: var(--cta); border-color: var(--cta); color: #fff; }
.smpanel__result { margin-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: none; }
.smpanel__result.show { display: block; animation: smReveal var(--dur-slow) var(--ease-out); }
@keyframes smReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.smpanel__matchline { display: flex; align-items: center; gap: 8px; font-family: var(--font-hk); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--cta); margin-bottom: 10px; }
.smpanel__route { font-family: var(--font-hk); font-weight: 700; font-size: 20px; color: #fff; margin: 0; }
.smpanel__doc { font-family: var(--font-hk); font-size: 13px; color: rgba(255,255,255,0.5); margin: 10px 0 0; }

/* ============================================================ STAT CARDS (2.5) ============================================================ */
.statcards-sec { background: var(--noah-white); }
.statcards-sec .bihead { margin-bottom: 14px; }
.statcards-sec .lead-sub { font-family: var(--font-hk); font-weight: 500; font-size: 19px; color: var(--noah-ink-soft); margin: 0 0 46px; max-width: 640px; }
.statcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scard { background: var(--noah-cream); border-radius: var(--radius-l); padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
.scard__num { font-family: var(--font-display); font-weight: 600; font-size: 66px; line-height: 0.92; color: var(--cta); letter-spacing: -0.02em; }
.scard__num.phrase { font-family: var(--font-hk); font-weight: 700; font-size: 42px; line-height: 1.05; }
.scard__cap { font-family: var(--font-hk); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--noah-ink); flex: 1; }
.scard__src { font-family: var(--font-hk); font-weight: 500; font-size: 12px; color: var(--noah-mute); line-height: 1.45; border-top: 1px solid var(--border-default); padding-top: 14px; }
.statcards-line { margin: 36px auto 0; font-family: var(--font-hk); font-weight: 700; font-size: 24px; color: var(--noah-ink); text-wrap: balance; max-width: 820px; text-align: center; }

/* ============================================================ COVERAGE ============================================================ */
.cover { background: var(--noah-cream-warm); }
.cover__head { margin-bottom: 48px; }
.cover__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { background: var(--noah-white); border-radius: var(--radius-l); padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; border: 1px solid rgba(48,45,40,0.06); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.tile:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(48,45,40,0.32); border-color: var(--cta); }
.tile:hover .tile__n { letter-spacing: 0.04em; }
.tile__n { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--cta); }
.tile h3 { font-family: var(--font-hk); font-weight: 700; font-size: 25px; line-height: 1.25; margin: 0; color: var(--noah-ink); }
.tile p { font-size: 16px; line-height: 1.55; color: var(--noah-ink-soft); margin: 0; flex: 1; font-family: var(--font-hk); }
.tile__cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-hk); font-weight: 700; font-size: 15px; color: var(--cta); cursor: pointer; }
.cover__note { margin-top: 28px; text-align: center; }
.cover__note .cn, .cover__note .en { font-family: var(--font-hk); font-weight: 700; font-size: 20px; color: var(--noah-ink); }

/* ============================================================ WHY CONSULT (4) — risks + pull-quote ============================================================ */
.whyc { background: var(--noah-white); }
.whyc__head { margin-bottom: 8px; text-align: center; }
.whyc__head.bihead { align-items: center; }
.whyc__sub { font-family: var(--font-hk); font-weight: 500; font-size: 19px; color: var(--noah-ink-soft); margin: 0 auto 28px; max-width: 640px; text-align: center; }
.risks { display: flex; flex-direction: column; max-width: 980px; }
.risk { display: grid; grid-template-columns: 68px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--noah-ink); align-items: start; }
.risk:last-child { border-bottom: 1px solid var(--noah-ink); }
.risk__i { color: var(--cta); font-size: 13px; font-weight: 700; font-family: var(--font-hk); padding-top: 6px; line-height: 1.3; }
.risk__b { display: flex; flex-direction: column; }
.risk__hd { font-family: var(--font-hk); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--noah-ink); margin: 0 0 7px; }
.risk__t { font-family: var(--font-hk); font-weight: 600; font-size: 19px; line-height: 1.55; color: var(--noah-ink); }
.risk__t b { color: var(--noah-ink); font-weight: 700; }

/* risk cards — seamless auto-scroll + drag (JS transform-driven) */
.riskmarquee { overflow: hidden; margin-top: 8px; cursor: grab; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.riskmarquee.is-dragging { cursor: grabbing; }
.riskmarquee.is-dragging .riskcard__img img, .riskmarquee.is-dragging .riskcard { transition: none; }
.riskmarquee__track { display: flex; width: max-content; will-change: transform; }
.riskset { display: flex; gap: 24px; margin-right: 24px; }
.riskcard { display: flex; flex-direction: column; width: 340px; flex-shrink: 0; cursor: inherit; transition: transform var(--dur-base) var(--ease-out); }
.riskcard__img { border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 18px; background: var(--noah-sand); }
.riskcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.riskcard .risk__i { color: var(--cta); font-family: var(--font-hk); font-weight: 700; font-size: 13px; margin-bottom: 8px; transition: letter-spacing var(--dur-base) var(--ease-out); }
.riskcard .risk__hd { font-family: var(--font-hk); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--noah-ink); margin: 0 0 10px; transition: color var(--dur-base) var(--ease-out); }
.riskcard .risk__t { font-family: var(--font-hk); font-weight: 500; font-size: 15.5px; line-height: 1.55; color: var(--noah-ink-soft); }
/* hover — subtle lift + image zoom (marquee pauses on hover) */
@media (hover: hover) {
  .riskcard:hover { transform: translateY(-6px); }
  .riskmarquee.is-dragging .riskcard:hover { transform: none; }
  .riskcard:hover .riskcard__img img { transform: scale(1.06); }
  .riskcard:hover .risk__i { letter-spacing: 0.08em; }
  .riskcard:hover .risk__hd { color: var(--cta); }
}

/* self-medicating callout — emphasized danger block */
.selfmed { border: 1.5px solid var(--noah-ink); border-radius: var(--radius-l); padding: 38px 42px; margin: 0 0 40px; max-width: 1180px; }
.selfmed__label { display: inline-flex; align-items: center; font-family: var(--font-hk); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--cta); margin-bottom: 16px; }
.selfmed__h { font-family: var(--font-hk); font-weight: 700; font-size: 28px; line-height: 1.3; color: var(--noah-ink); margin: 0 0 14px; }
.selfmed__lead { font-family: var(--font-hk); font-weight: 500; font-size: 17px; line-height: 1.6; color: var(--noah-ink-soft); margin: 0 0 30px; max-width: 920px; }
.selfmed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--noah-ink); }
.selfmed__pt { padding: 22px 26px 6px 0; border-right: 1px solid rgba(48,45,40,0.14); }
.selfmed__pt:last-child { border-right: none; padding-right: 0; }
.selfmed__pt + .selfmed__pt { padding-left: 26px; }
.selfmed__pt-h { display: block; font-family: var(--font-hk); font-weight: 700; font-size: 17px; color: var(--cta); margin-bottom: 8px; }
.selfmed__pt p { font-family: var(--font-hk); font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--noah-ink-soft); margin: 0; }
.selfmed__close { font-family: var(--font-hk); font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--noah-ink); margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--noah-ink); }
.selfmed__close em { font-style: normal; color: var(--cta); }

.pullquote { position: relative; overflow: hidden; border-radius: var(--radius-l); margin-top: 48px; padding: 54px 56px;
  background: linear-gradient(150deg, #F6C98A 0%, #F4A65C 40%, var(--noah-orange) 100%); }
.pullquote__mark { font-family: var(--font-display); font-weight: 700; font-size: 88px; line-height: 0.6; color: rgba(255,255,255,0.55); height: 44px; display: block; }
.pullquote__q { font-family: var(--font-hk); font-weight: 700; font-size: 27px; line-height: 1.5; color: #fff; margin: 10px 0 0; max-width: 880px; text-wrap: balance; text-shadow: 0 2px 24px rgba(137,57,44,0.25); }
.pullquote__by { font-family: var(--font-hk); font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.92); margin-top: 24px; }
.reassure-sec .pullquote, .whydoc .pullquote { text-align: center; }
.reassure-sec .pullquote__mark, .whydoc .pullquote__mark { margin: 0 auto; }
.reassure-sec .pullquote__q, .whydoc .pullquote__q { margin-left: auto; margin-right: auto; }
.whyc__line { margin-top: 44px; font-family: var(--font-hk); font-weight: 700; font-size: 30px; color: var(--noah-ink); }
.src-note { font-family: var(--font-hk); font-weight: 500; font-size: 12px; color: var(--noah-mute); margin-top: 22px; line-height: 1.6; max-width: 900px; }

/* ============================================================ TRENDS (4.5) ============================================================ */
.trends { background: var(--noah-blue-tint); padding: var(--sec-pad) 0; }
.trends__head { margin-bottom: 10px; }
.trends__tag { font-family: var(--font-hk); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; color: var(--noah-blue); margin-bottom: 14px; }
.trends__sub { font-family: var(--font-hk); font-weight: 500; font-size: 19px; color: var(--noah-ink-soft); margin: 0 0 46px; max-width: 680px; }
.trendgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcard { background: #fff; border-radius: var(--radius-l); padding: 32px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.tcard__tag { align-self: flex-start; font-family: var(--font-hk); font-weight: 700; font-size: 12px; color: var(--noah-blue); background: var(--noah-blue-tint); padding: 6px 13px; border-radius: var(--radius-pill); }
.tcard__num { font-family: var(--font-display); font-weight: 600; font-size: 56px; color: var(--noah-ink); line-height: 0.92; letter-spacing: -0.02em; }
.tcard__t { font-family: var(--font-hk); font-weight: 600; font-size: 17px; line-height: 1.5; color: var(--noah-ink-soft); flex: 1; }
.tcard__src { font-family: var(--font-hk); font-weight: 500; font-size: 11.5px; color: var(--noah-mute); line-height: 1.4; }
.trends__line { margin-top: 36px; font-family: var(--font-hk); font-weight: 600; font-size: 19px; color: var(--noah-ink); line-height: 1.55; max-width: 1000px; }
.trends__line b { font-weight: 700; }

/* ============================================================ FLOW — tablet ============================================================ */
.flow { background: var(--noah-cream-warm); }
.flow__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 70px; align-items: center; }
.flow__head { display: flex; flex-direction: column; gap: 28px; }
.flow__steps { display: flex; flex-direction: column; }
.fstep { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--noah-ink); }
.fstep:last-child { border-bottom: 1px solid var(--noah-ink); }
.fstep__n { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--cta); }
.fstep__b { display: flex; flex-direction: column; gap: 9px; }
.fstep__b h4 { font-family: var(--font-hk); font-weight: 700; font-size: 22px; margin: 0; color: var(--noah-ink); line-height: 1.3; }
.fstep__b p { font-size: 15px; line-height: 1.55; color: var(--noah-ink-soft); margin: 0; font-family: var(--font-hk); }
.fstep__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.ftag { font-family: var(--font-hk); font-weight: 600; font-size: 12px; color: var(--noah-orange); background: var(--noah-orange-tint); padding: 5px 11px; border-radius: var(--radius-pill); }
.tablet { width: 100%; aspect-ratio: 4 / 3.1; background: #15110E; border-radius: 28px; padding: 14px; box-shadow: 0 40px 80px -30px rgba(20,16,12,0.5); }
.tablet__screen { width: 100%; height: 100%; background: var(--noah-cream-warm); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.tablet__bar { height: 46px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--noah-line); }
.tablet__bar .wm { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--noah-ink); }
.tablet__bar .dots { display: flex; gap: 6px; }
.tablet__bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--noah-line-2); display: block; }
.tablet__body { flex: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.tablet__eg { font-family: var(--font-hk); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: var(--noah-blue); }
.tablet__qline { font-family: var(--font-hk); font-weight: 700; font-size: 22px; color: var(--noah-ink); line-height: 1.3; margin: 0; }
.tablet__opts { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.tablet__opt { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1.5px solid var(--noah-line-2); border-radius: 12px; font-family: var(--font-hk); font-weight: 600; font-size: 15px; color: var(--noah-ink); }
.tablet__opt.sel { border-color: var(--noah-ink); background: var(--noah-cream); }
.tablet__opt .arr { color: var(--noah-mute); }
.tablet__match { margin-top: auto; background: var(--noah-blue-tint); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.tablet__match .t { color: var(--noah-blue); font-size: 16px; }
.tablet__match span:last-child { font-family: var(--font-hk); font-weight: 700; font-size: 14px; color: var(--noah-blue); }

/* device showcase — full-bleed image bands */
.device-full { width: 100%; margin: 0; overflow: hidden; }
.device-full img { display: block; width: 100%; object-fit: cover; object-position: center; }
.device-full--dark { background: var(--hk-night); margin-top: 60px; }
.device-full--dark img { height: 720px; }
.device-full--light { background: #ededed; margin-top: 56px; }
.device-full--light img { height: 640px; }
.flow__head { max-width: 880px; }

/* ============================================================ HEALTHOS — dark ============================================================ */
.os { background: var(--hk-night); color: #fff; padding: 110px 0; }
.os__head { margin-bottom: 52px; }
.os__head { text-align: center; }
.os__head.bihead { align-items: center; }
.os__pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.ospill { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: var(--radius-m); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.ospill:hover { background: rgba(255,255,255,0.07); }
.ospill.is-active { background: rgba(255,255,255,0.08); border-color: rgba(255,118,40,0.6); }
.ospill__k { display: flex; align-items: center; gap: 10px; font-family: var(--font-hk); font-weight: 700; font-size: 18px; color: #fff; }
.ospill__k .pip { display: none; }
.ospill__v { font-family: var(--font-hk); font-weight: 500; font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.4; max-height: 0; overflow: hidden; opacity: 0; transition: all var(--dur-base) var(--ease-out); padding-left: 18px; }
.ospill.is-active .ospill__v { max-height: 60px; opacity: 1; margin-top: 4px; }

/* HealthOS — full-screen image stage with overlaid content */
.osfs { position: relative; min-height: 800px; padding: 90px 0; display: flex; align-items: center; overflow: hidden; background: var(--hk-night); }
.osfs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; z-index: 1; }
.osfs__scrim { position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(90deg, rgba(16,13,11,0.97) 0%, rgba(16,13,11,0.86) 28%, rgba(16,13,11,0.34) 50%, rgba(16,13,11,0) 68%),
  linear-gradient(0deg, rgba(16,13,11,0.55) 0%, rgba(16,13,11,0) 32%); }
.osfs__inner { position: relative; z-index: 3; }
.osfs .os__head { text-align: left; align-items: flex-start; max-width: 560px; margin-bottom: 0; }
.osfs .os__pills { display: flex; flex-direction: column; grid-template-columns: none; gap: 10px; max-width: 440px; margin-top: 34px; }
.osfs .ospill { background: rgba(255,255,255,0.07); }

/* SmartMatch flow — full-screen image stage, cream scrim + ink content on the left */
.flowfs { position: relative; min-height: 840px; padding: 90px 0; display: flex; align-items: center; overflow: hidden; background: var(--noah-cream-warm); }
.flowfs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: 1; }
.flowfs__scrim { position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(90deg, rgba(248,243,237,0.99) 0%, rgba(248,243,237,0.96) 33%, rgba(248,243,237,0.62) 49%, rgba(248,243,237,0) 67%),
  linear-gradient(0deg, rgba(248,243,237,0.45) 0%, rgba(248,243,237,0) 30%); }
.flowfs__inner { position: relative; z-index: 3; width: 100%; }
.flowfs .flowfs__inner { padding-left: 108px; }
.flowfs .flow__head { max-width: 468px; gap: 24px; }
.flowfs .fstep { padding: 20px 0; }
/* self-diagnosis full-bleed stage (section 03): keep the man (centre-right) clear of the left copy */
.argfs { min-height: 720px; }
.argfs .flowfs__img { object-position: 60% 32%; }
.argfs .flow__head { gap: 18px; }
.argfs .argp { max-width: 440px; }

/* ROLE OF A DOCTOR (v4 §05) — full-bleed photo stage, warm scrim, white head + cream tiles */
.rolefs { position: relative; overflow: hidden; border-radius: var(--radius-l); margin-left: 12px; margin-right: 12px; }
.rolefs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 38%; z-index: 0; }
.rolefs__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,13,11,0.78) 0%, rgba(16,13,11,0.52) 40%, rgba(16,13,11,0.34) 100%); }
.rolefs > .wrap { position: relative; z-index: 2; }
.rolefs .cover__head .cn, .rolefs .cover__head .en { color: #fff; }
.rolefs .lead-center .cn, .rolefs .lead-center .en { color: rgba(255,255,255,0.9); }
.rolefs .lead-center { margin-bottom: 56px; }

/* WHY-DOCTOR (v4 §02) — symptom→cause cards + consult breakdown */
.sympmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.symp { background: var(--noah-cream); border-radius: var(--radius-l); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.symp__n { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--cta); }
.symp__s { font-family: var(--font-hk); font-weight: 700; font-size: 22px; color: var(--noah-ink); margin: 0; }
.symp__c { font-family: var(--font-hk); font-weight: 500; font-size: 15.5px; line-height: 1.55; color: var(--noah-ink-soft); margin: 0; }
.sympline { font-family: var(--font-hk); font-weight: 700; font-size: 24px; color: var(--noah-ink); text-align: center; margin: 36px auto 0; max-width: 820px; text-wrap: balance; }

@media (max-width: 860px) {
  .sympmap { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .sympline { font-size: 20px; margin-top: 28px; }
}
.flowfs .fstep__b h4 { font-size: 20px; }
.flowfs .fstep__b p { font-size: 14px; }

/* ============================================================
   SOFT-CORNER PANELS — round the major sections into stacked cards
   ============================================================ */
.match, .osfs, .statcards-sec, .cover, .whyc, .trends, .flowfs, .why, .faq, .final {
  border-radius: var(--radius-l);
  margin-left: 12px;
  margin-right: 12px;
}
.match { margin-top: 12px; }
.osfs, .statcards-sec, .cover, .whyc, .trends, .struggle, .flowfs, .why, .faq, .final { margin-top: 12px; }

/* ============================================================
   STRUGGLES → noah — diverging bar infographic
   ============================================================ */
.struggle { background: var(--noah-cream); border-radius: var(--radius-l); margin-left: 12px; margin-right: 12px; }
.struggle__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.struggle__stamp { flex-shrink: 0; width: 100px; height: 100px; border: 1.6px solid var(--cta); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cta); font-family: var(--font-hk); font-weight: 700; font-size: 15px; line-height: 1.2; transform: rotate(-7deg); }
.struggle__caption { font-family: var(--font-hk); font-weight: 700; font-size: 15px; color: var(--noah-ink-soft); }
.struggle__caption--top { margin: 36px 0 16px; }
.struggle__caption--bot { margin: 16px 0 0; }
.struggle__chart { display: flex; gap: 10px; align-items: flex-end; min-height: 446px; }
.struggle__chart { display: flex; gap: 10px; align-items: flex-end; min-height: 0; padding-bottom: 150px; }
.sc-col { flex: 1; position: relative; --barH: calc(64px + var(--pct) * 4.6px); }
.sc-top { height: var(--barH); border-radius: var(--radius-s); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px; cursor: pointer; transition: transform var(--dur-base) var(--ease-out); }
.sc-bot { position: absolute; top: calc(100% + 6px); left: 0; right: 0; height: 138px; border-radius: var(--radius-s); overflow: hidden; display: flex; align-items: flex-start; padding: 14px 16px; }
.sc-pct { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1; }
.sc-pct sup { font-size: 0.46em; font-weight: 600; vertical-align: super; margin-left: 1px; }
.sc-lbl { align-self: flex-end; font-family: var(--font-hk); font-weight: 700; font-size: 15px; text-align: right; }
.sc-sol { font-family: var(--font-hk); font-weight: 700; font-size: 15px; line-height: 1.3; }
/* struggle — orange tints */
.sc-top--1 { background: #FF7628; } .sc-top--1 .sc-pct, .sc-top--1 .sc-lbl { color: #fff; }
.sc-top--2 { background: #FF965B; } .sc-top--2 .sc-pct, .sc-top--2 .sc-lbl { color: #fff; }
.sc-top--3 { background: #FBB387; } .sc-top--3 .sc-pct { color: rgba(255,255,255,0.88); } .sc-top--3 .sc-lbl { color: #fff; }
.sc-top--4 { background: #FBD8C5; } .sc-top--4 .sc-pct, .sc-top--4 .sc-lbl { color: var(--noah-orange); }
/* noah solution — deep-blue tints (brand anchor, in place of teal) */
.sc-bot--1 { background: #1B2E57; } .sc-bot--2 { background: #2C4A8A; } .sc-bot--3 { background: #6480AE; } .sc-bot--4 { background: #C4CFE3; }
.sc-bot--1 .sc-sol, .sc-bot--2 .sc-sol, .sc-bot--3 .sc-sol { color: #fff; }
.sc-bot--4 .sc-sol { color: #1B2E57; }

/* hover-to-reveal: blue solution blocks hidden until you hover the orange struggle above */
.sc-cue { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--font-hk); font-weight: 600; font-size: 13px; color: var(--cta); opacity: 0.9; }
@media (hover: hover) {
  .sc-bot { opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .sc-col:hover .sc-bot, .sc-col:focus-within .sc-bot { opacity: 1; transform: none; }
  .sc-col:hover .sc-top, .sc-col:focus-within .sc-top { transform: translateY(-2px); }
}
.phone { width: 320px; height: 660px; background: #060504; border-radius: 46px; padding: 11px; margin: 0 auto; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); }
.phone__screen { width: 100%; height: 100%; background: linear-gradient(180deg, #F8F3ED 0%, #F1E7DA 100%); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; background: #060504; border-radius: 14px; z-index: 5; }
.phone__top { padding: 40px 24px 16px; display: flex; align-items: center; justify-content: space-between; }
.phone__top .wm { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--noah-ink); }
.phone__top .gear { color: var(--noah-mute); font-size: 16px; }
.phone__body { flex: 1; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.oscard { background: #fff; border-radius: 18px; padding: 16px 18px; }
.oscard--hi { background: var(--noah-blue); color: #fff; }
.oscard__lbl { font-family: var(--font-hk); font-weight: 700; font-size: 11px; letter-spacing: 0.05em; color: var(--noah-mute-3); margin-bottom: 6px; }
.oscard--hi .oscard__lbl { color: rgba(255,255,255,0.7); }
.oscard__big { font-family: var(--font-hk); font-weight: 700; font-size: 22px; color: var(--noah-ink); }
.oscard--hi .oscard__big { color: #fff; }
.oscard__sub { font-family: var(--font-hk); font-size: 12px; color: var(--noah-mute-3); margin-top: 3px; }
.oscard--hi .oscard__sub { color: rgba(255,255,255,0.75); }
.osline { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--noah-line); }
.osline:last-child { border-bottom: none; }
.osline .k { font-family: var(--font-hk); font-weight: 600; font-size: 14px; color: var(--noah-ink); }
.osline .v { font-family: var(--font-hk); font-size: 12px; color: var(--noah-mute-3); }
.osline .badge { font-family: var(--font-hk); font-weight: 700; font-size: 11px; color: var(--noah-blue); background: var(--noah-blue-tint); padding: 3px 8px; border-radius: var(--radius-pill); }
.phone__nav { display: flex; justify-content: space-around; padding: 14px 0 18px; background: rgba(255,255,255,0.6); }
.phone__nav i { width: 22px; height: 22px; border-radius: 6px; background: var(--noah-line-2); display: block; }
.phone__nav i.on { background: var(--noah-ink); }

/* ============================================================ WHY NOAH — 5-up ============================================================ */
.why { background: var(--noah-white); }
.why__head { margin-bottom: 44px; }
.why__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--noah-ink); }
.whyitem { padding: 28px 20px 30px 0; border-right: 1px solid rgba(48,45,40,0.14); display: flex; flex-direction: column; gap: 10px; }
.whyitem:last-child { border-right: none; padding-right: 0; }
.whyitem h4 { font-family: var(--font-hk); font-weight: 700; font-size: 19px; margin: 0; color: var(--noah-ink); line-height: 1.3; }
.whyitem p { font-size: 14px; line-height: 1.5; color: var(--noah-ink-soft); margin: 0; font-family: var(--font-hk); }

/* choosing-a-service checklist */
.why__head { margin-bottom: 14px; }
.why__sub { font-family: var(--font-hk); font-weight: 500; font-size: 19px; color: var(--noah-ink-soft); margin: 0 0 38px; max-width: 640px; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; border-top: 1px solid var(--noah-ink); }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid rgba(48,45,40,0.14); align-items: start; }
.check__i { color: var(--noah-ink); font-size: 19px; font-weight: 700; line-height: 1.35; }
.check__b h4 { font-family: var(--font-hk); font-weight: 700; font-size: 21px; margin: 0 0 5px; color: var(--noah-ink); line-height: 1.25; }
.check__b p { font-family: var(--font-hk); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--noah-ink-soft); margin: 0; }
.why__note { margin-top: 26px; font-family: var(--font-hk); font-weight: 500; font-size: 13px; color: var(--noah-mute); }

/* ============================================================ FAQ ============================================================ */
.faq { position: relative; overflow: hidden; background: var(--noah-cream-warm); }
.faq::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1600px; z-index: 0;
  background: url("assets/faq-bg-opt.jpg") center top / cover no-repeat; }
.faq::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(248,243,237,0.86) 0%, rgba(248,243,237,0.78) 100%); }
.faq .wrap { position: relative; z-index: 2; }
.faq__grid { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.faq__head { position: sticky; top: 40px; }
.faqlist { display: flex; flex-direction: column; gap: 10px; min-height: 540px; }
.qa { border: 1px solid rgba(48,45,40,0.16); border-radius: var(--radius-m); background: rgba(255,255,255,0.74); backdrop-filter: blur(6px); padding: 0 22px; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.qa:hover, .qa[open] { background: rgba(255,255,255,0.92); border-color: rgba(48,45,40,0.28); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.qa__q::-webkit-details-marker { display: none; }
.qa__qt .cn, .qa__qt .en { font-family: var(--font-hk); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--noah-ink); }
.qa__chev { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); color: var(--noah-ink); font-size: 14px; }
.qa[open] .qa__chev { transform: rotate(180deg); color: var(--cta); }
.qa[open] .qa__qt .cn, .qa[open] .qa__qt .en { color: var(--cta); }
.qa__a { padding: 0 50px 24px 0; }
.qa__a .cn, .qa__a .en { font-family: var(--font-hk); font-weight: 500; font-size: 16px; line-height: 1.65; color: var(--noah-ink-soft); }

/* ============================================================ FINAL ============================================================ */
.final { position: relative; background: var(--hk-night); color: #fff; padding: 150px 0; text-align: center; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 40%, rgba(255,118,40,0.16) 0%, rgba(255,118,40,0) 60%); }
.final__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.final .bihead .cn, .final .bihead .en { color: #fff; }

/* heartbeat glow — orange radial light that pulses in a lub-dub rhythm */
.final__glow { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; transform: translate(-50%, -50%) scale(0.9); z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,118,40,0.42) 0%, rgba(255,118,40,0.20) 24%, rgba(255,118,40,0.06) 44%, rgba(255,118,40,0) 64%);
  opacity: 0.5; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  .final__glow { animation: heartbeat 2.4s ease-in-out infinite; }
}
@keyframes heartbeat {
  0%   { transform: translate(-50%,-50%) scale(0.86); opacity: 0.42; }
  10%  { transform: translate(-50%,-50%) scale(1.04); opacity: 0.85; }  /* lub */
  20%  { transform: translate(-50%,-50%) scale(0.92); opacity: 0.55; }
  30%  { transform: translate(-50%,-50%) scale(1.0);  opacity: 0.78; }  /* dub */
  44%  { transform: translate(-50%,-50%) scale(0.86); opacity: 0.42; }
  100% { transform: translate(-50%,-50%) scale(0.86); opacity: 0.42; }
}

/* ============================================================ FOOTER + LANG SWITCH ============================================================ */
.langband { background: var(--noah-cream); display: flex; justify-content: flex-end; padding: 40px 70px 0; }
.langswitch { display: inline-flex; background: rgba(48,45,40,0.07); border-radius: var(--radius-pill); padding: 4px; }
.langswitch button { font-family: var(--font-hk); font-weight: 700; font-size: 14px; padding: 10px 22px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--noah-ink-soft); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.langswitch button.on { background: var(--noah-ink); color: #fff; }

.footer { background: var(--noah-cream); padding: 56px 70px 28px; color: var(--noah-ink); }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer__links { display: flex; gap: 72px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col .h { font-family: var(--font-hk); font-weight: 700; font-size: 15px; color: var(--cta); margin-bottom: 6px; }
.footer__col a { font-family: var(--font-hk); font-weight: 500; font-size: 15px; color: var(--noah-ink); text-decoration: none; cursor: pointer; }
.footer__col a:hover { color: var(--noah-blue); }
.footer__meta { font-family: var(--font-hk); font-weight: 500; font-size: 13px; color: var(--noah-mute-3); line-height: 1.4; }

/* mid band — social bottom-left, big faded wordmark bottom-right */
.footer__mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 52px; min-height: 96px; }
.footer__social { display: flex; gap: 14px; align-items: center; }
.footer__social a { display: inline-flex; color: var(--noah-mute-3); transition: color var(--dur-base) var(--ease-out); }
.footer__social a:hover { color: var(--noah-ink); }
.footer__bigwm { height: clamp(70px, 9vw, 128px); width: auto; opacity: 0.13; align-self: flex-end; }

.footer__compliance { border-top: 1px solid rgba(48,45,40,0.16); margin-top: 26px; padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.footer__compliance .line { font-family: var(--font-hk); font-weight: 500; font-size: 13px; color: var(--noah-ink-soft); line-height: 1.5; max-width: 1000px; }
.footer__legal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-family: var(--font-hk); font-size: 12px; color: var(--noah-mute-3); }
.footer__legal-c { text-align: center; }
.footer__legal .right { display: flex; gap: 20px; align-items: center; justify-content: flex-end; }
.footer__legal a { color: var(--noah-mute-3); text-decoration: none; }
.footer__legal a:hover { color: var(--noah-ink); }

/* density */
[data-density="compact"] { --sec-pad: 84px; }
[data-density="comfy"]   { --sec-pad: 150px; }

html { scroll-behavior: smooth; }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transition: opacity 0.8s var(--ease-out); }
  .reveal.in { opacity: 1; }
  .sr { opacity: 0; transform: translateY(26px); transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out); }
  .sr.sr-in { opacity: 1; transform: none; }
  /* directional + scale reveal variants (override the default translateY at rest;
     .sr.sr-in resets transform to none for all of them) */
  .sr.sr-left  { transform: translateX(-46px); }
  .sr.sr-right { transform: translateX(46px); }
  .sr.sr-scale { transform: scale(0.93); }
  .sr.sr-blur  { filter: blur(9px); transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out), filter 0.62s var(--ease-out); }
  .sr.sr-blur.sr-in { filter: none; }
  /* settled state must override the variant rest rules above (equal specificity → needs source order + extra class) */
  .sr.sr-left.sr-in, .sr.sr-right.sr-in, .sr.sr-scale.sr-in { transform: none; }
  .hero__content > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .hero__content.hero-in > * { opacity: 1; transform: none; }
  /* parallax targets get a little extra scale so the shift never reveals an edge */
  .flowfs__img { will-change: transform; }
}

/* scroll progress bar — sits above everything, outside the zoomed .page */
.scroll-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--cta); z-index: 2147483646; pointer-events: none; transition: width 0.08s linear; }
@media (prefers-reduced-motion: reduce) { .scroll-prog { display: none; } }

/* ============================================================
   RESPONSIVE — tiered reflow
   • 861–1440  scaled desktop (above)
   • ≤860      tablet / large-phone reflow (fluid type, 2-col grids)
   • ≤560      phone (single column, tighter gutters)
   ============================================================ */
@media (max-width: 1024px) {
  .page { width: 100%; transform: none; }
  :root { --gutter: 30px; --sec-pad: 80px; }
  .wrap, .wrap-wide { width: 100%; max-width: 100%; padding: 0 var(--gutter); }

  /* fluid display type */
  .bihead.h1 { --pri: clamp(34px, 6.2vw, 54px); }
  .bihead.h2 { --pri: clamp(28px, 5vw, 46px); }
  .bihead.h3 { --pri: clamp(22px, 4vw, 30px); }
  .bihead .cn, .bihead .en { letter-spacing: -0.005em; }
  .bisub .cn, .bisub .en { font-size: 17px; }
  .faq__head.bihead { --pri: clamp(30px, 5vw, 44px) !important; }
  .final .bihead.h1 { --pri: clamp(32px, 5.5vw, 58px) !important; }

  /* HERO — reflow so a long headline never clips */
  .hero { height: auto; min-height: min(98vh, 880px); display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__img { background-position: 40% 18%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(16,13,11,0.5) 0%, rgba(16,13,11,0.1) 20%, rgba(16,13,11,0.3) 42%, rgba(16,13,11,0.82) 66%, var(--hk-night) 92%); }
  .hero__content { position: relative; z-index: 5; left: auto; transform: none; width: 100%; max-width: 640px; margin: 0 auto; padding: 200px var(--gutter) 56px; gap: 22px; }
  .hero__content .bisub { max-width: 100%; }
  .hero .bisub .cn, .hero .bisub .en { overflow-wrap: anywhere; }
  .hero__note { font-size: 12px; }

  .nav { padding: 18px 22px; }
  .nav__chip { min-height: 42px; padding: 10px 15px; font-size: 14px; }
  .nav__right .nav__menu { display: block; }

  /* split layouts stack */
  .match { padding: 80px 0; }
  .match__grid { grid-template-columns: 1fr; gap: 44px; }
  .smpanel { padding: 26px; }
  .smchip { padding: 12px 18px; }
  .os { padding: 80px 0; }
  .os__pills { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .device-full--dark img { height: 480px; }
  .device-full--light img { height: 440px; }
  .device-full--dark { margin-top: 48px; }
  .device-full--light { margin-top: 44px; }
  /* HealthOS overlay → stack: content first, image below */
  .osfs { display: flex; flex-direction: column; min-height: 0; padding: 72px 0 0; align-items: stretch; }
  .osfs__img { position: static; order: 2; height: 460px; object-position: 60% 42%; margin-top: 40px; }
  .osfs__scrim { display: none; }
  .osfs__inner { order: 1; }
  .osfs .os__head, .osfs .os__pills { max-width: none; }
  /* SmartMatch overlay → stack: content first, image below */
  .flowfs { display: flex; flex-direction: column; min-height: 0; padding: 72px 0 0; align-items: stretch; }
  .flowfs__img { position: static; order: 2; height: 440px; object-position: 46% 50%; margin-top: 40px; }
  .flowfs__scrim { display: none; }
  .flowfs__inner { order: 1; }
  .flowfs .flowfs__inner { padding-left: var(--gutter); }
  .flowfs .flow__head { max-width: none; }
  /* soft corners: tighten side margins on small screens */
  .match, .osfs, .statcards-sec, .cover, .whyc, .trends, .flowfs, .why, .faq, .final { margin-left: 8px; margin-right: 8px; border-radius: var(--radius-m); }
  .flow { }
  .flow__head { max-width: none; }
  .faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq__head { position: static; }
  .faqlist { min-height: 0; }

  /* card grids → 2-up on tablet */
  .statcards { grid-template-columns: 1fr; max-width: 600px; }
  .trendgrid, .cover__grid { grid-template-columns: repeat(2, 1fr); }
  /* struggle chart — no hover on touch, so reveal all blue solution blocks from the start */
  .sc-bot { opacity: 1 !important; transform: none !important; }
  .sc-cue { display: none !important; }
  .scard { min-height: 0; padding: 30px 26px; }
  .scard__num { font-size: clamp(48px, 8vw, 66px); }
  .scard__num.phrase { font-size: clamp(32px, 5.5vw, 42px); }
  .tcard { min-height: 0; }
  .tile { min-height: 0; }
  .statcards-line { font-size: clamp(20px, 3.4vw, 24px); }
  .whyc__line { font-size: clamp(22px, 3.6vw, 30px); }
  .trends__line { font-size: 17px; }
  .lead-sub, .whyc__sub, .trends__sub { font-size: 17px; margin-bottom: 34px; }

  /* why-noah 5-up → 2-up grid with hairlines */
  .why__grid { grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--noah-ink); }
  .whyitem { border-right: 1px solid rgba(48,45,40,0.14); border-bottom: 1px solid rgba(48,45,40,0.14); padding: 24px 24px 26px 0; }
  .whyitem:nth-child(2n) { border-right: none; padding-right: 0; }
  .whyitem:last-child { border-right: none; }

  .pullquote { padding: 48px 40px; margin-top: 40px; }
  .pullquote__q { font-size: clamp(22px, 3.4vw, 27px); }
  .pullquote__mark { font-size: 84px; height: 42px; }

  .qa__qt .cn, .qa__qt .en { font-size: 19px; }
  .qa__a { padding-right: 0; }

  .final { padding: 110px 0; }
  .langband { padding: 36px var(--gutter) 0; }
  .footer { padding: 44px var(--gutter) 30px; }
  .footer__legal { gap: 16px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; --sec-pad: 60px; }

  /* nav chips → circular icon buttons */
  .nav__chip { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; font-size: 0; }
  .nav__chip-label { display: none; }
  .nav__chip-ic { display: inline-flex; }
  .m-br { display: inline; }

  .bihead.h1 { --pri: clamp(30px, 8.5vw, 38px); }
  .bihead.h2 { --pri: clamp(26px, 7.5vw, 32px); }
  .ticker__track span { font-size: 12px; }

  .hero { min-height: min(100vh, 760px); }
  .hero__img { background-position: 40% 16%; }
  .hero__content { padding: 150px var(--gutter) 40px; gap: 16px; }
  /* EN mobile: drop the long hero sub-line to save vertical space */
  [data-lang="en"] .hero .bisub { display: none; }
  /* mobile: drop the hero sub-line entirely (both languages) to save space */
  .hero .bisub { display: none; }
  /* EN mobile: force the hero headline onto two lines, at a smaller size */
  [data-lang="en"] .hero .bihead .en { white-space: pre-line; font-size: clamp(24px, 7vw, 30px); }
  .hero__cta { flex-direction: column; width: 100%; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__note { font-size: 11px; }

  .smpanel { padding: 22px; }
  .smpanel__route { font-size: 18px; }
  .smpanel__q { font-size: 17px; }
  .smpanel__q .hint { display: block; margin: 6px 0 0; }

  /* all card grids → single column */
  .statcards, .trendgrid, .cover__grid, .why__grid { grid-template-columns: 1fr; }
  .os__pills { grid-template-columns: 1fr; }
  .device-full--dark img { height: 380px; }
  .device-full--light img { height: 340px; }
  .osfs__img { height: 360px; }
  .flowfs__img { height: 340px; }
  .scard { padding: 28px 24px; }
  .scard__cap { font-size: 17px; }
  .why__grid { border-top: none; }
  .whyitem { border-right: none !important; border-bottom: 1px solid var(--noah-ink); padding: 22px 0; }
  .whyitem:first-child { border-top: 1px solid var(--noah-ink); }

  .risk { grid-template-columns: 56px 1fr; gap: 12px; padding: 20px 0; }
  .risk__hd { font-size: 18px; }
  .riskset { gap: 16px; margin-right: 16px; }
  .riskcard { width: 250px; }
  .riskcard__img { aspect-ratio: 4 / 3; }
  .risk__t { font-size: 16px; }
  .selfmed { padding: 26px 22px; margin-bottom: 32px; }
  .selfmed__h { font-size: clamp(21px, 5vw, 26px); }
  .selfmed__lead { font-size: 16px; }
  .selfmed__grid { grid-template-columns: 1fr; border-top: none; }
  .selfmed__pt { border-right: none; border-top: 1px solid rgba(48,45,40,0.16); padding: 18px 0 4px; }
  .selfmed__pt + .selfmed__pt { padding-left: 0; }
  .selfmed__close { font-size: 17px; }
  .pullquote { padding: 38px 24px; margin-top: 32px; }
  .pullquote__mark { font-size: 80px; height: 40px; }
  .src-note { font-size: 11px; }

  .fstep { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
  .fstep__n { font-size: 32px; }
  .fstep__b h4 { font-size: 19px; }

  .cover__note .cn, .cover__note .en { font-size: 18px; }
  .qa__qt .cn, .qa__qt .en { font-size: 17px; }
  .qa__a .cn, .qa__a .en { font-size: 15px; }

  .final { padding: 90px 0; }
  /* struggle chart — keep 4 columns but shrink so they fit a phone */
  /* struggle chart — stack vertically: each problem card with its solution beneath */
  .struggle__chart { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; gap: 14px; }
  .sc-col { position: static; width: 100%; }
  .sc-top { height: auto; min-height: 84px; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; }
  .sc-pct { font-size: 32px; }
  .sc-lbl { align-self: center; font-size: 16px; }
  .sc-bot { position: static; height: auto; min-height: 0; margin-top: 8px; padding: 16px 22px; opacity: 1 !important; transform: none !important; }
  .sc-sol { font-size: 15px; line-height: 1.3; }
  .sc-cue { display: none; }
  .struggle__caption--bot { margin-top: 24px; }
  .langband { justify-content: center; }
  .footer__top { flex-direction: column; align-items: flex-start; gap: 30px; }
  .footer__links { flex-direction: column; gap: 26px; }
  .footer__mid { flex-direction: column-reverse; align-items: flex-start; gap: 24px; margin-top: 36px; min-height: 0; }
  .footer__bigwm { height: 64px; opacity: 0.12; }
  .footer__legal { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .footer__legal-c { text-align: left; }
  .footer__legal .right { justify-content: flex-start; }
  .btn--lg { font-size: 19px; padding: 16px 26px; }
}

/* ============================================================
   v4 — argument-arc sections (why doctor / self-diagnosis / self-medicate / role)
   ============================================================ */
.whydoc .bihead.center { align-items: center; }
.lead-center { max-width: 760px; margin: 22px auto 0; text-align: center; font-family: var(--font-hk); font-weight: 500; font-size: 19px; line-height: 1.65; color: var(--noah-ink-soft); }

.argblock { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.argblock--flip .argblock__media { order: 2; }
.argblock__media img { width: 100%; border-radius: var(--radius-l); aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.argblock__media--stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.argblock__media--stack img { aspect-ratio: 3 / 4; }
.argpx { will-change: transform; transition: transform 0.12s linear; }
.argblock__body { display: flex; flex-direction: column; gap: 16px; }
.argblock__body .bihead { gap: 4px; }
.argtag { font-family: var(--font-hk); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--cta); }
.argp { font-family: var(--font-hk); font-weight: 500; font-size: 17px; line-height: 1.6; color: var(--noah-ink-soft); margin: 0; }
.argpoints { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; }
.argpoints li { font-family: var(--font-hk); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--noah-ink-soft); padding-left: 24px; position: relative; }
.argpoints li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--cta); font-weight: 700; }
.argpoints b { color: var(--noah-ink); font-weight: 700; }

/* SELF-MEDICATING (v4 §04) — sticky scroll-stepper: copy left, faded image right, vertical step nav far right */
.dosestep { position: relative; background: var(--noah-cream-warm); border-radius: var(--radius-l); margin: 0 12px; height: 340vh; }
.dosestep__pin { position: sticky; top: 0; height: min(100vh, 1440px); min-height: 0; display: flex; align-items: stretch; overflow: hidden; }
.dosestep .dosestep__layout.wrap { width: 100%; max-width: none; padding: 0 80px; position: relative; z-index: 1; }
.dosestep__layout { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: stretch; width: 100%; }
.dosestep__stage { position: relative; min-height: 0; min-width: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: stretch; }
.dosestep__copycol { position: relative; min-width: 0; align-self: stretch; }
.dosestep__step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-bottom: 6vh; opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); pointer-events: none; }
.dosestep__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.dosestep__copy { min-width: 0; align-self: flex-start; max-width: 480px; background: var(--noah-white); padding: 46px 42px; border-radius: var(--radius-l); }
.dosestep__copy .argtag { display: block; margin-bottom: 32px; font-size: 24px; }
.dosestep__copy h2 { margin: 0; font-size: 66px; font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; color: var(--noah-ink); }
.dosestep__copy h2 .en { font-weight: 600; }
.dosestep__copy p { margin: 56px 0 0; max-width: 27ch; font-size: 18px; line-height: 1.62; color: var(--noah-ink-soft); font-family: var(--font-hk); }
.dosestep__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.dosestep__media img, .dosestep__media video, .dosestep__media canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.dosestep__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 58px; align-self: center; }
.dosestep__nav li { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 500; font-size: 23px; color: rgba(255,255,255,0.72); cursor: pointer; white-space: nowrap; transition: color 0.3s var(--ease-out); }
.dosestep__nav li .cn { font-family: var(--font-hk); }
.dosestep__navbar { width: 2px; height: 24px; background: transparent; border-radius: 2px; transition: background 0.3s var(--ease-out); }
.dosestep__nav li.is-active { color: #fff; font-weight: 600; }
.dosestep__nav li.is-active .dosestep__navbar { background: #fff; }

@media (max-width: 1000px) {
  .dosestep__layout { gap: 32px; }
  .dosestep__step { grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.05fr); gap: 32px; }
  .dosestep__copy h2 { font-size: 42px; }
  .dosestep__nav li { font-size: 19px; }
}
@media (max-width: 760px) {
  .dosestep { height: auto; margin: 0 8px; }
  .dosestep__pin { position: static; height: auto; min-height: 0; display: block; padding: 56px 0; }
  .dosestep__layout { display: block; }
  .dosestep__stage { position: static; min-height: 0; height: auto; display: flex; flex-direction: column; gap: 0; }
  .dosestep__copycol { position: static; }
  .dosestep__step { position: static; display: flex; flex-direction: column; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 40px; }
  .dosestep__step:last-child { margin-bottom: 0; }
  .dosestep__media { position: static; width: auto; height: auto; aspect-ratio: 1280 / 720; margin: 0 0 28px; border-radius: var(--radius-l); overflow: hidden; }
  .dosestep__copy { max-width: none; padding: 28px 24px; }
  .dosestep__copy h2 { font-size: 34px; }
  .dosestep__copy p { font-size: 16px; max-width: none; }
  .dosestep__nav { display: none; }
}

/* role of a doctor — pillars on dark */
.role__head.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.role__head .eyebrow { margin-bottom: 12px; }
.role__sub { max-width: 760px; margin: 18px auto 48px; text-align: center; font-family: var(--font-hk); font-weight: 500; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); }
.role__grid { align-items: start; }
.role__pillars { display: flex; flex-direction: column; gap: 16px; }
.rolecard { border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-l); padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,0.03); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.rolecard:hover { border-color: rgba(255,118,40,0.5); background: rgba(255,255,255,0.05); }
.rolecard__n { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--cta); }
.rolecard h3 { font-family: var(--font-hk); font-weight: 700; font-size: 21px; line-height: 1.3; color: #fff; margin: 0; }
.rolecard p { font-family: var(--font-hk); font-weight: 500; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; }

@media (max-width: 860px) {
  .argblock { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .argblock > * { min-width: 0; }
  .argblock--flip .argblock__media { order: 0; }
  .argblock__media--stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .argpx { transform: none !important; }
  .lead-center { font-size: 17px; }
  .role__sub { font-size: 16px; }
}
@media (max-width: 560px) {
  .lead-center { font-size: 16px; }
  .argblock__media--stack { gap: 10px; }
  .rolecard { padding: 20px 22px; }
  .rolecard h3 { font-size: 19px; }
}