/* ============================================================
   DUBADENT v5 — "Amethyst Royale"
   Loads AFTER one.css. Same approved DNA, elevated execution:
   drag before/after sliders, cursor spotlight, masked word
   reveals, price bars graph, framed CTA letters.
   ============================================================ */

/* ---------- answer capsule (SEO + premium moment) ---------- */
.capsule5 { padding: 0; margin-top: -40px; position: relative; z-index: 3; }
.capsule5 .note {
  max-width: 860px; margin: 0 auto; background: #fff; color: var(--light-text);
  border: 1px solid var(--light-stroke); border-radius: 26px; padding: 30px 38px 26px;
  box-shadow: 0 30px 80px rgba(5, 2, 15, 0.55), 0 0 0 1px rgba(168, 85, 247, 0.25);
  position: relative; overflow: hidden;
}
.capsule5 .note::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--grad-cta);
}
.capsule5 .hd {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--violet);
}
.capsule5 .hd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-cta); box-shadow: 0 0 10px rgba(168,85,247,.8); }
.capsule5 p { font-size: 16.5px; line-height: 1.85; color: var(--light-text); }
.capsule5 p b { color: var(--violet); }
@media (max-width: 760px) { .capsule5 { margin-top: -20px; } .capsule5 .note { padding: 22px 20px 20px; margin-inline: 4px; } }

/* ---------- cases: draggable before/after slider ---------- */
.case-media.slider5 { touch-action: pan-y; cursor: ew-resize; }
.case-media.slider5 .after-img {
  opacity: 1; transition: none;
  clip-path: inset(0 0 0 var(--cut, 55%));
}
.case-media.slider5 .cut-line {
  position: absolute; top: 0; bottom: 0; left: var(--cut, 55%); width: 2px; z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(232,200,122,.95));
  box-shadow: 0 0 14px rgba(232, 200, 122, 0.85);
}
.case-media.slider5 .cut-grip {
  position: absolute; top: 50%; left: var(--cut, 55%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #E8C87A, #C9A44E); color: #17102B;
  box-shadow: 0 6px 22px rgba(201, 164, 78, 0.55), 0 0 0 4px rgba(255,255,255,.9);
  display: grid; place-items: center;
  transition: transform .2s var(--ease);
}
.case-media.slider5:hover .cut-grip { transform: translate(-50%, -50%) scale(1.1); }
.case-media.slider5 .cut-grip svg { pointer-events: none; }
.case-media.slider5 .ba-tags {
  position: absolute; inset-inline: 12px; top: 12px; z-index: 2;
  display: flex; justify-content: space-between; pointer-events: none;
}
.case-media.slider5 .ba-tags span {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff;
  background: rgba(23, 16, 43, 0.72); border-radius: var(--r-pill); padding: 5px 12px; backdrop-filter: blur(6px);
}
.case-media.slider5 .ba-tags .t-after { background: var(--grad-cta); }
.case-card:hover .case-media.slider5 .after-img { opacity: 1; }

/* ---------- cursor spotlight (21st.dev spotlight-card pattern) ---------- */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(168, 85, 247, 0.16), transparent 65%);
}
.spot:hover::after { opacity: 1; }
.light .spot::after, .lead-panel .spot::after {
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, 0.10), transparent 65%);
}

/* ---------- masked word reveal for section titles ---------- */
.sec-head h2 .wrd, .about-body h2 .wrd, .finale3 h2 .wrd, .doctor-body h2 .wrd {
  display: inline-block; white-space: pre-wrap;
}
.grad .wrd, .h-display .grad .wrd {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.js5 .wrd { opacity: 0; transform: translateY(22px); filter: blur(6px); }
html.js5 .wrd.on { opacity: 1; transform: none; filter: blur(0); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
html.no-gsap .wrd, .no-gsap .wrd { opacity: 1 !important; transform: none !important; filter: none !important; }

/* hero masked line reveal */
.hero h1 .hl { display: block; overflow: hidden; }
.hero h1 .hl > .hl-in { display: block; }

/* ---------- price bars graph (the element Eli liked) ---------- */
.bars5 { max-width: 880px; margin: 0 auto 40px; display: grid; gap: 18px; }
.bar5 { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.bar5 .who { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.bar5 .who b { display: block; color: var(--text); font-size: 15px; }
.bar5 .rail {
  position: relative; height: 40px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke); overflow: hidden;
}
.bar5 .rail i {
  position: absolute; inset-block: 4px; inset-inline-start: 4px; width: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(191, 183, 214, 0.18), rgba(191, 183, 214, 0.34));
}
.bar5.us .rail i { background: var(--grad-cta); box-shadow: 0 0 26px rgba(139, 92, 246, 0.5); }
.bar5 .rail span {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text);
  background: rgba(11, 7, 22, 0.72); border: 1px solid var(--stroke); border-radius: var(--r-pill);
  padding: 3px 13px; direction: ltr; white-space: nowrap; backdrop-filter: blur(6px);
}
.bar5.us .rail span { border-color: rgba(168, 85, 247, 0.5); }
.bars5-note { text-align: center; font-size: 12.5px; color: var(--text-3); margin: -22px 0 40px; }
@media (max-width: 700px) {
  /* On a phone the price chip sat on top of the rail and covered the fill,
     so the graph was unreadable. Label above, bar, number underneath. */
  .bar5 { grid-template-columns: 1fr; gap: 8px; margin-bottom: 30px; }
  .bar5 .who { display: flex; gap: 8px; align-items: baseline; }
  .bar5 .rail { height: 22px; border-radius: 11px; overflow: visible; }
  .bar5 .rail i { inset-block: 3px; border-radius: 8px; }
  .bar5 .rail span {
    top: calc(100% + 9px); transform: none;
    /* the chip sets direction:ltr on itself, so its own inline-start is always
       the left edge: pin it physically instead, under the label above it */
    inset-inline: auto; right: 2px; left: auto;
    background: none; border: 0; padding: 0; backdrop-filter: none;
    font-size: 16px; font-weight: 700;
  }
  [dir="ltr"] .bar5 .rail span { right: auto; left: 2px; }
  .bars5 { gap: 6px; margin-bottom: 26px; }
  .bars5-note { margin-top: 0; }
}

/* ---------- CTA letter band (the treatment Eli liked in v4) ---------- */
.cta-band .band.letter5 { padding: 48px 44px; }
.cta-band .band.letter5::after {
  content: ""; position: absolute; inset: 12px; border-radius: 18px; pointer-events: none;
  border: 1px solid rgba(232, 200, 122, 0.35);
}
.cta-band .band.letter5 .band-kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em;
  color: var(--gold); margin-bottom: 8px;
}
@media (max-width: 700px) { .cta-band .band.letter5 { padding: 38px 26px; } }

/* ---------- package essence lines ---------- */
.pack3 .p-essence {
  font-family: var(--font-display); font-size: 15.5px; color: var(--text-2);
  margin: 2px 0 0; min-height: 1.5em;
}
.pack3.star .p-essence { color: var(--gold); }
.packs-more { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--text-3); }
.packs-more a, .cmp-foot a { color: var(--violet-2); text-decoration: none; border-bottom: 1px solid rgba(168, 85, 247, 0.4); }
.packs-more a:hover, .cmp-foot a:hover { color: #fff; border-color: var(--violet-2); }

/* ---------- stat chip live pulse ---------- */
.stat-chip .live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7EE2A8; margin-inline-end: 2px; }
.stat-chip .live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(126, 226, 168, 0.7); animation: livep 2s var(--ease) infinite; }
@keyframes livep { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stat-chip .live::after { animation: none; } }

/* ---------- craft: giant measurement moment ---------- */
.craft-mm { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.craft-mm b {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 7vw, 96px); line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.craft-mm span { font-size: 15px; color: var(--text-2); font-weight: 600; }

/* small polish */
.sec-head .eyebrow { box-shadow: 0 0 30px rgba(139, 92, 246, 0.12); }
.doctor-figure img { transition: transform .5s var(--ease); }
.doctor-figure:hover img { transform: scale(1.015); }

/* ============================================================
   v5.1 — new type system + scroll-motion layer
   ============================================================ */

/* fonts: Heebo Black display (the BH Properties headline style Eli approved) + IBM Plex Sans Hebrew body */
:root {
  --font-display: "Heebo", "Segoe UI", sans-serif;
  --font-ui: "IBM Plex Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --fd-w: 900;
}
body { font-weight: 400; }
.h-display { font-weight: var(--fd-w); letter-spacing: 0; line-height: 1.18; }
.hero h1 { font-size: clamp(36px, 5.6vw, 74px); }
.sec-head h2 { font-size: clamp(29px, 4vw, 48px); }
.about-body h2 { font-size: clamp(27px, 3.8vw, 44px); }
.doctor-body h2 { font-size: clamp(26px, 3.4vw, 40px); }
.finale3 h2 { font-size: clamp(29px, 4.4vw, 52px); }
.stat-chip b, .pack3 .p-price b, .counter b, .cmp-stat b, .doc-float b,
.j-num, .about-collage .badge-glass b, .calc-count { font-weight: var(--fd-w); }
.cta-band h3, .lead-a h3, .lead-b h3 { font-weight: var(--fd-w); }
.bar5 .rail span { font-weight: 600; }

/* header scroll progress */
.hdr .prog5 {
  position: absolute; bottom: -1px; inset-inline-start: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, #7C3AED, #A855F7, #E8C87A);
  transform: scaleX(0); transform-origin: right; z-index: 2;
}
[dir="ltr"] .hdr .prog5 { transform-origin: left; }

/* star package glow breath */
.pack3.star { animation: starglow 4.5s ease-in-out infinite; }
@keyframes starglow {
  0%, 100% { box-shadow: var(--glow-soft); }
  50% { box-shadow: 0 10px 55px rgba(139, 92, 246, 0.5); }
}
@media (prefers-reduced-motion: reduce) { .pack3.star { animation: none; } }

/* craft cinema scrub target */
.craft3 .media { will-change: transform; }
.marquee .track { will-change: transform; }

/* ============================================================
   v5.2 — the top floor: preloader, film scrub, custom cursor
   ============================================================ */

/* preloader */
#pre5 {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center;
  transition: transform .95s cubic-bezier(.76, 0, .24, 1);
}
#pre5.done { transform: translateY(-101%); }
#pre5 .pre-in { text-align: center; }
#pre5 .pre-img { width: 210px; height: auto; margin: 0 auto 6px; }
#pre5 .pre-logo b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
#pre5 .pre-num {
  display: block; margin-top: 14px; font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 78px); line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; direction: ltr;
}
#pre5 .pre-line { width: 190px; height: 2px; background: var(--stroke); margin: 18px auto 0; border-radius: 99px; overflow: hidden; }
#pre5 .pre-line i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--gold)); }
html.preloading { overflow: hidden; }

/* bidi: numbers with trailing +/%/★ must not flip in RTL */
.stat-chip b, .doc-float b, .counter b, .cmp-stat b { unicode-bidi: plaintext; }

/* header DD monogram mark */
.hdr .logo img.dd-mark {
  width: 42px; height: 42px; border-radius: 0; object-fit: contain;
}

/* envelope tabs (what's included) */
.env5 { max-width: 1080px; margin-inline: auto; }
.env5-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.env5-tab {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-pill);
  padding: 12px 24px; cursor: pointer;
  transition: color .25s, background .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.env5-tab:hover { color: #fff; border-color: rgba(139, 92, 246, 0.45); transform: translateY(-2px); }
.env5-tab.on { background: var(--grad-cta); color: #fff; border-color: transparent; box-shadow: var(--glow-soft); }
.env5-tab:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.env5-pane {
  display: none; grid-template-columns: .92fr 1.08fr; gap: 44px; align-items: center;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 28px;
  padding: 30px; backdrop-filter: blur(8px); position: relative; overflow: hidden;
}
.env5-pane.on { display: grid; animation: paneIn .55s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.env5-pane::before {
  content: attr(data-n); position: absolute; top: -34px; inset-inline-end: 6px;
  font-family: var(--font-display); font-weight: var(--fd-w); font-size: 168px; line-height: 1;
  color: rgba(139, 92, 246, 0.09); pointer-events: none; direction: ltr;
}
.env5-pane.on .env5-media img, .env5-pane.on .env5-media video { animation: kb5 9s var(--ease) forwards; }
@keyframes kb5 { from { transform: scale(1); } to { transform: scale(1.08); } }
.env5-pane.on .env5-body li { opacity: 0; transform: translateY(12px); animation: liIn5 .55s var(--ease) forwards; }
.env5-pane.on .env5-body li:nth-child(1) { animation-delay: .12s; }
.env5-pane.on .env5-body li:nth-child(2) { animation-delay: .22s; }
.env5-pane.on .env5-body li:nth-child(3) { animation-delay: .32s; }
.env5-pane.on .env5-body li:nth-child(4) { animation-delay: .42s; }
@keyframes liIn5 { to { opacity: 1; transform: none; } }
/* auto-advance progress fill inside the active tab */
.env5.auto .env5-tab.on::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0;
  background: rgba(255, 255, 255, 0.16); animation: tfill5 5.5s linear forwards;
}
.env5-tab { position: relative; overflow: hidden; }
@keyframes tfill5 { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .env5-pane.on .env5-media img, .env5-pane.on .env5-media video,
  .env5-pane.on .env5-body li, .env5.auto .env5-tab.on::before { animation: none; opacity: 1; transform: none; }
}
.env5-media {
  position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid var(--stroke-strong); box-shadow: var(--shadow-md);
}
.env5-media img, .env5-media video { width: 100%; height: 100%; object-fit: cover; }
.env5-media .chip {
  position: absolute; bottom: 14px; inset-inline-start: 14px;
  background: rgba(18, 12, 34, 0.9); border: 1px solid var(--stroke-strong);
  border-radius: var(--r-pill); padding: 8px 16px; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(10px);
}
.env5-body h3 { font-family: var(--font-display); font-weight: var(--fd-w); font-size: 26px; margin-bottom: 6px; }

/* ---- included: sticky media + scroll-synced list ---- */
.incB-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.incB-media { position: sticky; top: 110px; }
.incB-frame {
  position: relative; aspect-ratio: 4 / 4.6; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--stroke-strong); box-shadow: var(--shadow-lg), 0 0 60px rgba(139, 92, 246, 0.2);
}
.incB-frame .m { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease), transform .9s var(--ease); transform: scale(1.05); }
.incB-frame .m.on { opacity: 1; transform: scale(1); }
.incB-frame .m img, .incB-frame .m video { width: 100%; height: 100%; object-fit: cover; }
.incB-frame .chip {
  position: absolute; bottom: 16px; inset-inline-start: 16px; z-index: 2;
  background: rgba(18, 12, 34, 0.9); border: 1px solid var(--stroke-strong); border-radius: var(--r-pill);
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(10px);
}
.incB-list { display: grid; gap: 10px; padding-block: 40px; }
.incB-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: start;
  padding: 26px 24px; border-radius: 22px; border: 1px solid transparent;
  /* .42 dropped the body copy of four of the five items to 2.63:1, below the
     4.5:1 minimum. .68 keeps the active item clearly ahead without making the
     other four unreadable. */
  opacity: .68; transition: opacity .45s var(--ease), background .45s, border-color .45s, transform .45s var(--ease);
}
.incB-item.on { opacity: 1; background: var(--panel); border-color: rgba(139, 92, 246, 0.4); }
.incB-item .n {
  font-family: var(--font-display); font-weight: var(--fd-w); font-size: 34px; line-height: 1;
  color: var(--violet-2); direction: ltr; transition: color .4s;
}
.incB-item.on .n { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.incB-item h3 { font-family: var(--font-display); font-weight: var(--fd-w); font-size: 24px; margin-bottom: 6px; }
.incB-item > div > p { color: var(--text-2); font-size: 15.5px; margin-bottom: 14px; }
.incB-item ul { list-style: none; display: grid; gap: 9px; max-height: 0; overflow: hidden; transition: max-height .6s var(--ease); }
.incB-item.on ul { max-height: 260px; }
.incB-item li { display: flex; gap: 11px; font-size: 14.5px; color: var(--text-2); }
.incB-item li::before {
  content: ""; flex: none; width: 11px; height: 6px; margin-top: 8px;
  border-inline-start: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) scaleX(-1);
}
.incB-thumb { display: none; }

/* verification block (facts from the company's public verification page) */
.verify5 {
  margin-top: 24px; border: 1px solid var(--stroke-strong); border-radius: 22px;
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.12), rgba(18, 12, 34, 0.5));
  padding: 22px 24px; backdrop-filter: blur(8px);
}
.v5-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.v5-head b { font-size: 15.5px; color: var(--text); }
.v5-head span { font-size: 12px; color: var(--text-3); }
.v5-rows { display: grid; gap: 0; }
.v5-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--stroke); font-size: 14px;
}
.v5-row span { color: var(--text-2); flex: none; }
.v5-row b { color: var(--text); font-weight: 600; text-align: end; font-size: 13.5px; }
.v5-note { margin-top: 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
@media (max-width: 560px) {
  .verify5 { padding: 18px 16px; }
  .v5-row { flex-direction: column; gap: 3px; }
  .v5-row b { text-align: start; }
}

/* ---- accessibility widget ---- */
.a11y-btn {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-cta); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 10px 34px rgba(139, 92, 246, .45);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.a11y-btn:hover { transform: translateY(-3px) scale(1.05); }
.a11y-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.a11y-panel {
  position: fixed; bottom: 84px; inset-inline-end: 22px; z-index: 91; width: 262px;
  background: rgba(11, 7, 22, .97); border: 1px solid var(--stroke-strong); border-radius: 20px;
  padding: 18px; backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h4 { font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.a11y-panel .row { display: flex; gap: 8px; margin-bottom: 8px; }
.a11y-panel button.opt {
  flex: 1; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 11px;
  padding: 10px 8px; cursor: pointer; transition: all .2s;
}
.a11y-panel button.opt:hover { color: #fff; border-color: var(--violet); }
.a11y-panel button.opt.on { background: var(--grad-cta); color: #fff; border-color: transparent; }
.a11y-panel .reset {
  width: 100%; margin-top: 6px; font-family: var(--font-ui); font-size: 12.5px; color: var(--text-3);
  background: none; border: 1px solid var(--stroke); border-radius: 11px; padding: 9px; cursor: pointer;
}
.a11y-panel .reset:hover { color: var(--text); border-color: var(--stroke-strong); }
@media (max-width: 900px) { .a11y-btn { bottom: 86px; } .a11y-panel { bottom: 146px; inset-inline-end: 14px; } }

html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast .aurora { display: none !important; }
html.a11y-contrast :is(p, span, li, td, th, .sub, figcaption) { color: #fff !important; }
html.a11y-contrast .light :is(p, span, li, td, th, figcaption) { color: #000 !important; }
html.a11y-gray { filter: grayscale(1); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation: none !important; transition: none !important;
}

/* treatments */
.treat5 { margin-top: 40px; }
.t5-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.t5-card {
  border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 24px 22px;
  background: var(--panel); backdrop-filter: blur(6px); position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.t5-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .7), transparent);
  opacity: 0; transition: opacity .3s;
}
.t5-card:hover { transform: translateY(-5px); border-color: rgba(139, 92, 246, 0.4); background: var(--panel-strong); }
.t5-card:hover::before { opacity: 1; }
.t5-ic {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(139, 92, 246, 0.13); border: 1px solid rgba(139, 92, 246, 0.3); margin-bottom: 15px;
}
.t5-card b { display: block; font-family: var(--font-display); font-weight: var(--fd-w); font-size: 18px; margin-bottom: 6px; }
.t5-card p { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.t5-note { margin-top: 20px; font-size: 13px; color: var(--text-3); text-align: center; }
@media (max-width: 1000px) { .t5-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .t5-grid { grid-template-columns: 1fr; } .t5-card { padding: 20px 18px; } }

/* variant C: bento mosaic */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-rows: 200px; }
.b-tile {
  position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--stroke);
  background: var(--panel); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.b-tile:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, 0.45); box-shadow: var(--shadow-md); }
.b-big { grid-column: span 2; grid-row: span 2; }
.b-wide { grid-column: span 2; }
.b-media img, .b-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.b-tile:hover .b-media img, .b-media:hover img, .b-media:hover video { transform: scale(1.06); }
.b-cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 44px 22px 20px;
  background: linear-gradient(transparent, rgba(11, 7, 22, 0.94));
}
.b-cap b { display: block; font-family: var(--font-display); font-weight: var(--fd-w); font-size: 19px; margin-bottom: 3px; }
.b-cap span { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.b-stat {
  display: grid; place-content: center; text-align: center; padding: 22px;
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.22), rgba(18, 12, 34, 0.6));
  border-color: rgba(168, 85, 247, 0.35);
}
.b-stat b {
  display: block; font-family: var(--font-display); font-weight: var(--fd-w); font-size: 46px; line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  direction: ltr; margin-bottom: 8px;
}
.b-stat span { font-size: 13.5px; color: var(--text-2); }

@media (max-width: 900px) {
  /* mobile: each step is a self-contained card with its own image */
  .incB-grid { grid-template-columns: 1fr; gap: 0; }
  .incB-media { display: none; }
  .incB-list { padding-block: 0; gap: 14px; }
  .incB-item {
    display: flex; flex-direction: column; position: relative;
    background: var(--panel); border-color: var(--stroke); opacity: 1;
    padding: 14px 14px 20px;
  }
  .incB-item.on { border-color: rgba(139, 92, 246, 0.45); }
  .incB-item .n {
    position: absolute; top: 26px; inset-inline-end: 26px; z-index: 2;
    font-size: 20px; color: #fff; background: rgba(11, 7, 22, 0.72);
    border: 1px solid var(--stroke-strong); border-radius: 12px; padding: 4px 12px;
    backdrop-filter: blur(10px);
  }
  .incB-item.on .n { background: var(--grad-cta); border-color: transparent; -webkit-text-fill-color: #fff; }
  .incB-item h3 { font-size: 21px; margin-bottom: 8px; }
  .incB-item ul { max-height: 400px; }
  .incB-item > div { padding-inline: 4px; }
  .incB-thumb {
    display: block; position: relative; order: -1; margin: 0 0 16px;
    border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10;
    border: 1px solid var(--stroke-strong);
  }
  .incB-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .incB-thumb .chip {
    position: absolute; bottom: 10px; inset-inline-start: 10px;
    background: rgba(18, 12, 34, 0.9); border: 1px solid var(--stroke-strong);
    border-radius: var(--r-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 600;
    backdrop-filter: blur(10px);
  }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 168px; gap: 12px; }
  .b-big { grid-column: span 2; grid-row: span 1; }
  .b-wide { grid-column: span 2; }
  .b-stat b { font-size: 34px; }
}
/* ============================================================
   v5.9 — carousel arrows + language switch + LTR parity
   ============================================================ */

/* The journey is pinned on desktop, so the whole section has to fit one
   screen: heading, track, progress and arrows. Its own 110px top padding sat
   on top of the pin offset and pushed the arrows below the fold. */
@media (min-width: 901px) and (pointer: fine) {
  .journey3 { padding-top: 42px; padding-bottom: 56px; }
  .journey3 .sec-head { margin-bottom: 28px; }
  .journey3 .sec-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 12px 0 10px; }
  .journey3 .sec-head p { font-size: 16px; }
  .journey3 .j-day-ind { margin-top: 10px; }
  .j-track { padding: 8px 22px 16px; }
  .j-card { min-height: 268px; padding: 22px; }
  .j-card.media { min-height: 330px; padding: 0; }
  .journey3 .crsl-nav { margin-top: 16px; }
}
@media (min-width: 901px) and (pointer: fine) and (max-height: 840px) {
  .journey3 { padding-top: 16px; padding-bottom: 36px; }
  .journey3 .sec-head { margin-bottom: 18px; }
  .journey3 .sec-head h2 { font-size: clamp(25px, 2.8vw, 33px); }
  .journey3 .sec-head p { font-size: 14.5px; }
  .j-card { min-height: 232px; padding: 18px 20px; }
  .j-card.media { min-height: 286px; padding: 0; }
  .j-card h3 { font-size: 19px; margin: 6px 0 6px; }
  .j-num { font-size: 38px; }
}

/* While GSAP is scrubbing the track the native horizontal scroller must be
   off, or the two fight each other on touch. Without JS it stays a swiper.
   It has to be `visible`, NOT `hidden`: overflow on the track clips its own
   children to its 390px box, so every card except the first vanished.
   .journey3 already has overflow:hidden and does the clipping. */
.j-track.pinned { overflow-x: visible; scroll-snap-type: none; }

/* Phones get the same scroll-scrubbed six days as desktop, so the whole
   scene (heading, cards, progress, arrows) has to fit one screen. */
@media (max-width: 900px) {
  .journey3 { padding-top: 18px; padding-bottom: 30px; }
  .journey3 .sec-head { margin-bottom: 16px; padding-inline: 16px; }
  .journey3 .sec-head h2 { font-size: clamp(21px, 6.2vw, 27px); margin: 8px 0 6px; line-height: 1.2; }
  .journey3 .sec-head p { font-size: 14px; line-height: 1.5; }
  .journey3 .j-day-ind { margin-top: 8px; }
  .j-track { padding: 6px 16px 12px; gap: 14px; }
  .j-card { flex-basis: 76vw; min-height: 0; padding: 18px 18px 16px; }
  .j-card.media { min-height: 250px; padding: 0; }
  .j-card h3 { font-size: 19px; margin: 6px 0 6px; }
  .j-card p { font-size: 14px; }
  .j-num { font-size: 34px; }
  .j-card .j-when { padding-top: 12px; font-size: 12px; }
  /* the progress bar was hidden on phones; with the scrub it is the cue */
  .j-progress { display: block; margin: 4px 16px 0; }
  .journey3 .crsl-nav { margin-top: 14px; }
}
/* short phones (360x640 and similar) need the scene tighter still */
@media (max-width: 900px) and (max-height: 700px) {
  .journey3 { padding-top: 10px; padding-bottom: 20px; }
  .journey3 .sec-head { margin-bottom: 10px; }
  .journey3 .sec-head h2 { font-size: clamp(19px, 5.6vw, 23px); margin: 6px 0 4px; }
  .journey3 .sec-head p { display: none; }
  .journey3 .j-day-ind { margin-top: 4px; }
  .j-track { padding: 4px 14px 8px; }
  .j-card.media { min-height: 190px; }
  .j-card { padding: 14px 16px; }
  .j-card h3 { font-size: 17px; margin: 4px 0 5px; }
  .j-card p { font-size: 13px; }
  .j-num { font-size: 28px; }
  .journey3 .crsl-nav { margin-top: 10px; }
  .journey3 .crsl-btn { width: 40px; height: 40px; }
}

/* the patient strip is aligned to the container so five cards genuinely
   overflow it: without this it fits whole on a wide desktop and the arrows
   have almost nothing to travel */
.voices3 { max-width: 1264px; margin-inline: auto; scroll-padding-inline-start: 22px; }
/* one.css snaps these cards by their CENTRE under `scroll-snap-type: mandatory`.
   No card centre lines up with the viewport centre at scroll position 0, so the
   strip could never rest at the start: "previous" always stopped one pitch in
   and the button never disabled. Snapping to the card's start makes 0 a real
   snap point and the arrows exact inverses of each other. */
.voices3 > .voice3 { scroll-snap-align: start; }

/* ---- tablet-width blowout ----
   Grid and flex children default to min-width:auto, so unbreakable content
   (the nowrap clinic name, the long sticky-CTA label) widened the whole page
   between roughly 700px and 900px. Only showed up at tablet widths. */
.doctor-grid > * { min-width: 0; }
.doctor-figure img { max-width: 100%; }
/* the glow behind the doctor photo is `inset: -8% -6% auto auto`, so once the
   grid collapses to one column it bled ~46px past the page edge with nothing
   clipping it. That was the tablet-width horizontal scroll. */
/* Same pattern in the about collage. Once these grids collapse to one column
   the decorative glows and hanging badges are the only things past the page
   edge, and nothing clips them, so they alone produced the sideways scroll. */
@media (max-width: 940px) {
  /* the source uses the `inset` shorthand, i.e. the PHYSICAL right edge, so a
     logical override does nothing in RTL and the glow kept bleeding */
  .doctor-figure::before { right: 0; }
  .about-collage::before { right: 0; }
  .doc-float { inset-inline-end: 6px; }
  .about-collage .badge-glass { inset-inline-start: 0; }
}
/* The collage slots were shaped 3/4 and 4/3 while the photos in them were tall
   before/after composites. `cover` then cut a band out of the middle of each
   one, which is why the divider and half a face were what actually showed.
   The photos are now single frames at 588x450, so the slot must be 4/3 too. */
.about-collage .c2 { aspect-ratio: 4 / 3; }

/* The collage now carries one photograph, not three: the reception shot it used
   to lead with turned out to be a different clinic's lobby, with that clinic's
   lit wall logo in frame, captioned as ours. One image needs to fill the column
   on its own rather than sit in a corner of a three-card composition. */
.about-collage:not(:has(.c2)) { min-height: 0; display: grid; }
.about-collage:not(:has(.c2)) .c1 { position: static; width: 100%; aspect-ratio: 16 / 11; }
.about-collage:not(:has(.c2)) .badge-glass { top: auto; bottom: 18px; }

/* The collage is three absolutely-positioned cards tuned for a desktop column.
   Squeezed into a phone it read as clutter with dead space around it, so below
   the breakpoint it becomes an ordinary grid and the badge joins the flow. */
@media (max-width: 760px) {
  .about-collage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .about-collage img { position: static; height: auto; }
  /* one.css sizes each card by class, which outranks a bare `img` selector,
     so the widths have to be reset on the same classes or they stay at 64/52/42% */
  .about-collage .c1 { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 10; }
  .about-collage .c2, .about-collage .c3 { width: 100%; aspect-ratio: 4 / 3; opacity: 1; }
  .about-collage .badge-glass { position: static; grid-column: 1 / -1; text-align: center; padding: 10px 14px; }
  .about-collage::before { display: none; }
}

.mbar .row > * { min-width: 0; }
.mbar .btn-primary { min-width: 0; }
@media (max-width: 940px) {
  /* the inline nowrap on the clinic name has to give way on narrow screens */
  .doctor-body h2 .grad { white-space: normal !important; }
}

/* ---- mobile menu sheet, rebuilt ----
   The inherited sheet used 32px links on a full-screen blackout, which reads
   as a cheap template. Restrained type, hairline rows, brand at the top. */
/* while the sheet is open the page behind it must not scroll under the finger */
html.msheet-open, html.msheet-open body { overflow: hidden; touch-action: none; }
.msheet:focus { outline: none; }

/* ---- accessibility corrections, all measured with qa/a11y.cjs ---- */

/* A collapsed answer clipped to 0fr is still in the accessibility tree, so a
   screen reader read all eleven answers whether or not they were opened.
   visibility takes it out, and the delay lets the open transition still play. */
.faq-body > div { visibility: hidden; transition: visibility 0s linear .45s; }
.faq-card.open .faq-body > div { visibility: visible; transition-delay: 0s; }

/* The eyebrow sits on a nearly transparent pill. Over the hero film that left
   violet type on moving footage at about 1.3:1; on the light sections it kept
   its dark-theme violet against near-white at 3.27:1. Both get a colour that
   belongs to the surface they are actually on. */
.hero .eyebrow {
  background: rgba(11, 7, 22, .86); color: #E9D9FF;
  border-color: rgba(168, 85, 247, .5); backdrop-filter: blur(6px);
}
.light .eyebrow { color: #5B21B6; background: rgba(124, 58, 237, .10); border-color: rgba(91, 33, 182, .32); }
.light .cases-note, .light .bars5-note, .light .cmp-foot { color: #4A4363; }

/* White on the WhatsApp green ran from 2.45:1 at the light end of the gradient
   to 4.50:1 at the dark end. Same brand green, deep enough to read. */
.wa3 { background: linear-gradient(135deg, #0E8038, #0A6B31); }

/* Every primary button is white on --grad-cta, which ended at #C084FC: a pale
   lilac that gave the label 2.64:1. The gradient keeps its violet identity and
   its direction, it just stops short of the corner that could not hold text.
   Measured across all three stops: 7.12:1, 5.70:1, 4.68:1. */
:root { --grad-cta: linear-gradient(135deg, #6D28D9 0%, #7C3AED 58%, #8B4FF0 100%); }

/* The display gradient was built for a near-black page. On the two light
   sections its pale stop (#E9D5FF) sat on #F7F5FC at 1.26:1, so half of every
   headline there was barely on the page at all. Same violet, same sweep, tuned
   for white: 5.27:1, 6.59:1, 3.66:1 against the light background. */
.light { --grad-text: linear-gradient(110deg, #7C3AED 0%, #6D28D9 45%, #A855F7 100%); }

.msheet {
  justify-content: flex-start; padding: 18px 20px 26px;
  background: rgba(9, 6, 18, 0.985); backdrop-filter: blur(22px) saturate(1.2);
}
.msheet-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--stroke);
}
.msheet-logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--text);
}
.msheet-logo img { width: 30px; height: 30px; object-fit: contain; }
.msheet-logo b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.msheet .msheet-close {
  position: static; width: 38px; height: 38px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-size: 0;
  background: var(--panel); border: 1px solid var(--stroke-strong); color: var(--text-2);
  transition: color .2s, border-color .2s, background .2s;
}
.msheet .msheet-close:hover { color: #fff; border-color: rgba(168, 85, 247, .5); background: var(--panel-strong); }

.msheet-links { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.msheet a.mlink {
  font-family: var(--font-ui); font-weight: 600; font-size: 16.5px; letter-spacing: .01em;
  color: var(--text-2); text-decoration: none; padding: 15px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  display: flex; align-items: center; gap: 12px;
  transition: color .2s var(--ease);
}
.msheet a.mlink::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--violet-2); opacity: 0; transform: scale(.4);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.msheet a.mlink:hover, .msheet a.mlink:focus-visible { color: #fff; }
.msheet a.mlink:hover::before, .msheet a.mlink:focus-visible::before { opacity: 1; transform: none; }
.msheet-links a.mlink:last-child { border-bottom: none; }

.msheet-foot { margin-top: auto; padding-top: 22px; display: grid; gap: 14px; justify-items: stretch; }
.msheet .msheet-cta { margin-top: 0; width: 100%; padding: 14px 20px; font-size: 15px; }
.msheet .msheet-lang { margin-top: 0; justify-content: center; }
.msheet .msheet-lang a { font-size: 13.5px; padding: 9px 22px; }

/* a light stagger so the panel arrives rather than snaps */
@media (prefers-reduced-motion: no-preference) {
  .msheet.open .msheet-top,
  .msheet.open a.mlink,
  .msheet.open .msheet-foot { animation: mshIn .34s var(--ease) both; }
  .msheet.open a.mlink { animation-delay: calc(0.03s * var(--i, 0) + 0.04s); }
  .msheet.open .msheet-foot { animation-delay: .26s; }
}
@keyframes mshIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-height: 700px) {
  .msheet a.mlink { padding: 11px 2px; font-size: 15.5px; }
  .msheet-top { padding-bottom: 14px; }
  .msheet-foot { padding-top: 16px; gap: 10px; }
}

/* ---- phone header: menu on the side, logo in the middle ---- */
@media (max-width: 980px) {
  .hdr .bar {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 10px; padding-inline: 14px;
  }
  .hdr .mnav-btn { grid-column: 1; justify-self: start; }
  .hdr .logo { grid-column: 2; justify-self: center; gap: 8px; }
  .hdr .hdr-actions { grid-column: 3; justify-self: end; gap: 8px; }
  /* the consultation button already lives in the sheet and in the bottom bar */
  .hdr .hdr-actions .btn-primary { display: none; }
}
@media (max-width: 560px) {
  /* the wordmark is the centrepiece now, so it stays visible */
  .hdr .logo span { display: inline; font-size: 17px; }
  .hdr .logo img.dd-mark { width: 34px; height: 34px; }
  .hdr .bar { padding-inline: 10px; gap: 6px; }
}
@media (max-width: 390px) {
  .hdr .logo span { font-size: 15.5px; }
  .hdr .logo img.dd-mark { width: 30px; height: 30px; }
}

/* ---- comparison table on phones ----
   The stacked cards read as three separate lists, not as a comparison, so
   the phone now gets the real table: the row label is frozen on the side
   and the three columns are swiped past it (arrows below, like the rest). */
@media (max-width: 900px) {
  .cmp-cards { display: none !important; }
  .cmp-wrap {
    display: block; overflow-x: auto; padding: 10px 0 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .cmp-wrap::-webkit-scrollbar { display: none; }
  /* two columns now, so the table fits the screen: no sideways scroll and,
     by the engine's own rule, no arrows under it either */
  .cmp { min-width: 0; width: 100%; table-layout: fixed; }
  .cmp th, .cmp td { padding: 13px 12px; font-size: 13.5px; }
  .cmp thead th { font-size: 14px; }
  .cmp .sub { font-size: 11.5px; line-height: 1.45; }

  /* frozen label column: it must be opaque or the columns show through */
  .cmp thead th:first-child,
  .cmp tbody th {
    position: sticky; inset-inline-start: 0; z-index: 3;
    min-width: 116px; max-width: 116px; width: 116px;
    background: #0E0920; text-align: start; font-size: 12.5px; line-height: 1.35;
    padding-inline: 12px 10px;
  }
  .cmp tbody th::after {
    content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
    width: 1px; background: var(--stroke-strong);
  }
  .cmp thead th:first-child::after {
    content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
    width: 1px; background: var(--stroke-strong);
  }
  .cmp thead th:not(:first-child),
  .cmp tbody td { padding: 13px 9px; font-size: 12.5px; }
  .cmp .sub { font-size: 11px; }
  .cmp-wrap + .crsl-nav { margin-top: 12px; }
}
@media (max-width: 900px) {
  .cmp thead th:first-child, .cmp tbody th { width: 27%; }
  .cmp thead th:not(:first-child), .cmp tbody td { width: 36.5%; }
}
@media (max-width: 380px) {
  .cmp thead th:first-child, .cmp tbody th { width: 25%; font-size: 11.5px; }
  .cmp thead th:not(:first-child), .cmp tbody td { width: 37.5%; padding: 12px 7px; }
}

/* ---- carousel arrows (below every horizontal section) ---- */
.crsl-nav {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  margin: 26px auto 0;
}
.crsl-btn {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: var(--violet-2); padding: 0;
  transition: background .28s var(--ease), color .28s, border-color .28s,
              transform .28s var(--ease), box-shadow .28s, opacity .28s;
}
.crsl-btn svg { pointer-events: none; }
[dir="rtl"] .crsl-btn svg { transform: scaleX(-1); }
.crsl-btn:hover:not(:disabled) {
  background: var(--grad-cta); color: #fff; border-color: transparent;
  transform: translateY(-3px); box-shadow: 0 12px 28px rgba(139, 92, 246, 0.45);
}
.crsl-btn:active:not(:disabled) { transform: translateY(-1px) scale(.96); }
.crsl-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.crsl-btn:disabled { opacity: .28; cursor: default; }
.light .crsl-btn { background: rgba(124, 58, 237, 0.07); border-color: rgba(124, 58, 237, 0.3); color: var(--violet); }
@media (max-width: 560px) { .crsl-btn { width: 44px; height: 44px; } .crsl-nav { gap: 12px; margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .crsl-btn { transition: none; } }

/* ---- language switch: segmented pill with sliding indicator ---- */
.hdr .lang-switch {
  position: relative; display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--stroke-strong); border-radius: var(--r-pill); overflow: visible;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
  padding: 3px; font-size: 12.5px; font-weight: 700;
  transition: border-color .3s, box-shadow .3s;
}
.hdr .lang-switch:hover { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 22px rgba(139, 92, 246, 0.25); }
.hdr .lang-switch .globe { display: grid; place-items: center; width: 26px; color: var(--text-3); flex: none; }
.hdr .lang-switch:hover .globe { color: var(--violet-2); }
.hdr .lang-switch a {
  position: relative; z-index: 2; padding: 6px 12px; border-radius: var(--r-pill);
  text-decoration: none; color: var(--text-3); line-height: 1.2; letter-spacing: .03em;
  transition: color .28s var(--ease);
}
.hdr .lang-switch a:hover { color: #fff; }
.hdr .lang-switch a.on { color: #fff; background: none; }
.hdr .lang-switch .pill {
  position: absolute; z-index: 1; top: 3px; bottom: 3px; border-radius: var(--r-pill);
  background: var(--grad-cta); box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5);
  transition: inset-inline-start .38s var(--ease), width .38s var(--ease);
  pointer-events: none;
}
@media (max-width: 620px) {
  .hdr .lang-switch .globe { display: none; }
  .hdr .lang-switch a { padding: 6px 9px; font-size: 12px; }
}

/* v5.37: the one-time browser-language suggestion banner */
.lang-suggest {
  position: relative; z-index: 60; margin: 96px 20px 0; padding: 14px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  max-width: 1220px; margin-inline: auto; margin-top: 96px;
  background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px);
  border: 1px solid var(--stroke-strong); border-radius: 16px;
  font-size: 14.5px; color: var(--text-2, #C9C2DC);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.lang-suggest.in { opacity: 1; transform: translateY(0); }
.lang-suggest .btn {
  flex: none; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--grad-cta); color: #fff; font-weight: 700; font-size: 13.5px;
  text-decoration: none; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}
.lang-suggest .x {
  margin-inline-start: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--stroke-strong); background: none; color: var(--text-3);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.lang-suggest .x:hover { color: #fff; border-color: rgba(168, 85, 247, 0.55); }
@media (max-width: 620px) {
  .lang-suggest { margin-top: 84px; padding: 12px 14px; font-size: 13.5px; }
}
/* language row inside the mobile menu sheet */
.msheet .msheet-lang { display: flex; gap: 10px; margin-top: 22px; }
.msheet .msheet-lang a {
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; text-decoration: none;
  color: var(--text-2); background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--r-pill); padding: 10px 26px; transition: all .25s var(--ease);
}
.msheet .msheet-lang a.on { background: var(--grad-cta); color: #fff; border-color: transparent; }
.msheet .msheet-lang a:hover { color: #fff; border-color: var(--violet); }

/* ---- LTR parity: mirror the tick marks drawn with logical borders ---- */
[dir="ltr"] .incB-item li::before,
[dir="ltr"] .env5-body li::before {
  border-inline-start: 0; border-inline-end: 2px solid var(--gold);
}
/* the marquee keyframe is authored for RTL travel */
@keyframes mqLtr { to { transform: translateX(-50%); } }
[dir="ltr"] .marquee .track { animation-name: mqLtr; }
[dir="ltr"] .stat-chip span,
[dir="ltr"] .doc-float span { text-align: start; }

/* ============================================================
   v5.10 — "The Reveal": scroll-scrubbed smile transformation
   A tall stage with a sticky frame. GSAP writes --cutp (a percentage)
   from the stage's scroll progress; the after image is clipped to it,
   so the broken smile is wiped away as the visitor scrolls.
   ============================================================ */
.reveal5 { padding-bottom: 0; overflow: clip; }
.rv5-stage { position: relative; height: 230vh; }
.rv5-sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center; padding: 84px 22px 40px;
}
.rv5-inner { width: 100%; max-width: 940px; position: relative; }
/* the heading lives inside the sticky scene so title and image hold together */
.rv5-sticky .sec-head { margin-bottom: 26px; }
.rv5-sticky .sec-head h2 { font-size: clamp(26px, 3.3vw, 40px); margin: 12px 0 10px; }
.rv5-sticky .sec-head p { font-size: 16px; }
.rv5-inner::before {
  content: ""; position: absolute; inset: -14% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.32), transparent 72%);
  filter: blur(26px);
}
.rv5-frame {
  position: relative; z-index: 1; aspect-ratio: 3 / 2; overflow: hidden;
  max-width: 640px; margin-inline: auto;
  border-radius: 26px; border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow-lg), 0 0 70px rgba(139, 92, 246, 0.24);
  background: #0B0716;
}
.rv5-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the untreated mouth reads cooler and flatter, so the reveal lands warmer */
.rv5-before { filter: saturate(.58) brightness(.84) contrast(1.04); }
/* the wipe follows the reading direction: left to right in English,
   right to left in Hebrew, so the new smile arrives where the eye starts */
.rv5-after-wrap { position: absolute; inset: 0; clip-path: inset(0 var(--cutp, 100%) 0 0); }
[dir="rtl"] .rv5-after-wrap { clip-path: inset(0 0 0 var(--cutp, 100%)); }

.rv5-edge {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 2px;
  right: var(--cutp, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.98) 22%, rgba(232,200,122,.98) 78%, rgba(232,200,122,.2));
  box-shadow: 0 0 24px rgba(232, 200, 122, 0.9), 0 0 60px rgba(168, 85, 247, 0.5);
  opacity: var(--edgeo, 1);
}
[dir="rtl"] .rv5-edge { right: auto; left: var(--cutp, 100%); }
.rv5-grip {
  position: absolute; top: 50%; z-index: 4; right: var(--cutp, 100%);
  width: 46px; height: 46px; border-radius: 50%; transform: translate(50%, -50%);
  background: linear-gradient(135deg, #E8C87A, #C9A44E); color: #17102B;
  display: grid; place-items: center; opacity: var(--edgeo, 1);
  box-shadow: 0 6px 26px rgba(201, 164, 78, 0.6), 0 0 0 5px rgba(255, 255, 255, 0.92);
}
[dir="rtl"] .rv5-grip { right: auto; left: var(--cutp, 100%); transform: translate(-50%, -50%); }

.rv5-tag {
  position: absolute; top: 16px; z-index: 5;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  border-radius: var(--r-pill); padding: 7px 16px; backdrop-filter: blur(8px);
  transition: opacity .4s var(--ease);
}
/* "before" sits on the side the wipe has not reached yet */
.rv5-tag-b { inset-inline-end: 16px; background: rgba(11, 7, 22, 0.74); border: 1px solid var(--stroke-strong); color: var(--text-2); }
.rv5-tag-a { inset-inline-start: 16px; background: var(--grad-cta); color: #fff; opacity: 0; }

.rv5-meta { position: relative; z-index: 1; margin-top: 20px; text-align: center; }
.rv5-rail { height: 3px; max-width: 320px; margin: 0 auto 14px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.rv5-rail i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--grad-cta); }
.rv5-note { font-size: 13px; color: var(--text-3); }
.rv5-cue { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .22em; color: var(--violet-2); }

@media (min-width: 761px) and (max-height: 860px) {
  .rv5-sticky { padding-top: 70px; }
  .rv5-sticky .sec-head { margin-bottom: 18px; }
  .rv5-sticky .sec-head h2 { font-size: clamp(24px, 2.7vw, 32px); }
  .rv5-sticky .sec-head p { font-size: 14.5px; }
  .rv5-inner { max-width: 820px; }
}
@media (max-width: 760px) {
  .rv5-stage { height: 210vh; }
  .rv5-sticky { padding: 76px 16px 32px; }
  .rv5-sticky .sec-head { margin-bottom: 18px; }
  .rv5-sticky .sec-head p { font-size: 15px; }
  /* the crop is a wide band, so on a phone the frame crops in on the mouth */
  .rv5-frame { aspect-ratio: 3 / 2; border-radius: 20px; max-width: none; }
  .rv5-grip { width: 38px; height: 38px; }
  .rv5-tag { top: 12px; font-size: 11px; padding: 6px 13px; }
  .rv5-tag-b { inset-inline-end: 12px; }
  .rv5-tag-a { inset-inline-start: 12px; }
}
/* no scroll motion available: show the finished smile, not a broken one */
@media (prefers-reduced-motion: reduce) {
  .rv5-stage { height: auto; }
  .rv5-sticky { position: static; height: auto; padding: 0; }
  .rv5-after-wrap { clip-path: none !important; }
  .rv5-edge, .rv5-grip, .rv5-cue { display: none; }
  .rv5-tag-a { opacity: 1; }
}
html.no-gsap .rv5-stage { height: auto; }
html.no-gsap .rv5-sticky { position: static; height: auto; padding: 0; }
html.no-gsap .rv5-after-wrap { clip-path: none; }
html.no-gsap .rv5-edge, html.no-gsap .rv5-grip { display: none; }
html.no-gsap .rv5-tag-a { opacity: 1; }

/* v5.13: the #proof reveal is a whole face, not a mouth band, so its frame
   is taller. The mouth reveal in #transform keeps the wide default. */
.rv5-frame.rv5-face { aspect-ratio: 3 / 2; max-width: 640px; margin-inline: auto; }
@media (max-width: 760px) {
  .rv5-frame.rv5-face { aspect-ratio: 3 / 2; max-width: none; }
}

/* v5.13: the quiet call to action that separates the big reveal from the
   strip of cases below it. Deliberately a line of text, not a button band. */
.softcta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 8px 16px; text-align: center;
  margin-top: 46px; padding: 22px 0 6px;
  border-top: 1px solid var(--stroke);
}
.softcta p { margin: 0; font-size: 15px; color: var(--text-3); max-width: 900px; }
.softcta a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--violet-2);
  border-bottom: 1px solid rgba(168, 85, 247, 0.42); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.softcta a:hover { color: #fff; border-color: #fff; }
/* each page already ships a chevron pointing the way its language reads,
   so this one must NOT be mirrored the way the carousel arrows are */
@media (max-width: 700px) {
  .softcta { margin-top: 34px; }
  .softcta p { font-size: 14px; }
}

/* v5.18 -- the hero is a full-bleed film again.
   The smearing was never the layout: a 720x1280 take stretched across a 1440
   hero is a 2x browser upscale of a 257kbps crop. It is now mastered at
   1080x1920 with a lanczos resample and a light unsharp, at 3.4Mbps, so the
   browser downscales it on a phone and lifts it only 1.33x on a desktop.
   object-position keeps the smile inside the visible band at both shapes. */
.hero-bg video { object-position: 50% 76%; }
/* the stat chips now reach the bottom of the hero, so the centred scroll
   cue was overlapping them at every width */
.scroll-cue { display: none; }
@media (max-width: 900px) {
  /* a phone covers the full height of the take, so only the horizontal
     position does anything here */
  .hero-bg video { object-position: 50% 50%; transform: none; }
}

/* v5.14: tighten the vertical air. one.css puts 110px of padding on every
   section, so any two neighbours were 220px apart and the page read as mostly
   empty space. Measured with qa/gaps.cjs, not guessed. Scoped to v5 so the
   approved v3.1 pages keep their own rhythm. */
/* v5.18: the padding is what the gap between two neighbours is made of, and
   it is paid twice -- once by the section above and once by the one below. At
   52px that is still 104px of nothing between every pair. 40px desktop and
   30px on a phone keeps the sections legible as separate blocks without the
   page reading as a list of islands. Measured with qa/gaps.cjs. */
section { padding: 40px 0; }
.sec-head { margin-bottom: 26px; }
@media (max-width: 900px) {
  section { padding: 30px 0; }
  .sec-head { margin-bottom: 20px; }
}
/* the two scroll reveals and the band CTAs carry their own inner padding on
   top of the section's, which is where the widest gaps on the page were */
.reveal5 { padding-block: 6px; }
.cta-band { padding-block: 20px; }
@media (max-width: 900px) {
  .reveal5 { padding-block: 4px; }
  .cta-band { padding-block: 16px; }
}

/* a short strip must never sit against one edge of a four-column grid with a
   hole beside it: match the column count to how many cards are actually there */
/* The strip holds however many cases there are. auto-fit sizes the columns
   from the cards instead of from a hard-coded count, so five sit in one row on
   a desktop and reflow to four, three and two on the way down, with no orphan
   card stranded on a line of its own. */
.cases-strip {
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  justify-content: center;
}
@media (max-width: 1000px) { .cases-strip { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 560px) { .cases-strip { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }

/* v5.13: warranty after the flight home */
.wr5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.wr5-card {
  padding: 24px 22px 26px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--stroke);
}
.wr5-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(168, 85, 247, 0.28);
  margin-bottom: 15px;
}
.wr5-card b { display: block; font-size: 16px; color: var(--text); margin-bottom: 8px; }
.wr5-card p { font-size: 14px; line-height: 1.72; color: var(--text-3); margin: 0; }
.wr5-note {
  margin-top: 22px; font-size: 12.5px; line-height: 1.8; color: var(--text-3);
  text-align: center; max-width: 820px; margin-inline: auto;
}
@media (max-width: 1040px) { .wr5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .wr5 { grid-template-columns: 1fr; gap: 12px; }
  .wr5-card { padding: 20px 18px 22px; }
}


/* ---- Powered by BDI credit ---- */
/* one.css sets `footer.ftr .container { display: grid }` at higher
   specificity, which stacked the credit under the copyright */
footer.ftr .container.ftr-base {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--stroke);
  font-size: 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.pw-bdi {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--stroke-strong); background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px); direction: ltr;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.pw-bdi > span {
  font-size: 9.5px; font-weight: 600; letter-spacing: .2em; color: var(--text-3);
}
.pw-bdi b {
  font-family: var(--font-display); font-weight: var(--fd-w, 900); font-size: 15px; letter-spacing: .04em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pw-bdi:hover { border-color: rgba(168, 85, 247, .5); background: rgba(139, 92, 246, .1); box-shadow: 0 0 20px rgba(139, 92, 246, .2); }
@media (max-width: 560px) { footer.ftr .container.ftr-base { justify-content: center; text-align: center; } }

/* temporary font picker (preview only) */
.fontpick {
  position: fixed; bottom: 96px; inset-inline-start: 16px; z-index: 120;
  background: rgba(11, 7, 22, 0.94); border: 1px solid var(--stroke-strong); border-radius: 16px;
  padding: 12px 14px; display: grid; gap: 7px; backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md); max-width: 190px;
}
.fontpick b { font-size: 11.5px; color: var(--text-3); letter-spacing: .06em; }
.fontpick button {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; text-align: start; transition: all .2s;
}
.fontpick button:hover { color: #fff; border-color: var(--violet); }
.fontpick button.on { background: var(--grad-cta); color: #fff; border-color: transparent; }
@media (max-width: 900px) { .fontpick { bottom: 84px; } }
.env5-body > p { color: var(--text-2); margin-bottom: 18px; font-size: 16px; }
.env5-body ul { list-style: none; display: grid; gap: 12px; }
.env5-body li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.env5-body li::before {
  content: ""; flex: none; width: 12px; height: 7px; margin-top: 8px;
  border-inline-start: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) scaleX(-1);
}
@media (max-width: 900px) {
  .env5-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .env5-tabs::-webkit-scrollbar { display: none; }
  .env5-tab { white-space: nowrap; flex: none; }
  .env5-pane { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 22px; }
  .env5-body { padding-inline: 6px; }
}

/* v5.17 -- every before/after on the site is now a 3:2 smile crop, cut to the
   same multiple of the patient's own teeth width so the two halves of a pair
   sit at the same scale. The card box has to be 3:2 too, or object-fit crops
   the smile straight back out. */
.case-media img { aspect-ratio: 3 / 2; }

/* ---- v5.17: the packages section moved onto the light surface ----
   Everything in it was written for a near-black page, so on white the ghost
   buttons went white-on-white and every supporting line dropped to a grey
   meant for a dark background. Each token is re-pointed at the light palette
   rather than nudged, so the section is one theme and not two. */
.light .pack3 {
  background: #FFFFFF;
  border-color: rgba(23, 16, 43, .10);
  box-shadow: 0 2px 4px rgba(23, 16, 43, .04), 0 18px 44px rgba(23, 16, 43, .07);
}
.light .pack3 h3 { color: var(--light-text); }
.light .pack3 .p-name { color: #6D28D9; }
.light .pack3 .p-essence,
.light .pack3 .p-per,
.light .pack3 ul li { color: #4A4363; }
.light .pack3 .p-price b { color: var(--light-text); }

/* the featured card keeps its lift, in light-surface terms */
.light .pack3.star {
  background: linear-gradient(165deg, #F3ECFF, #FFFFFF 62%);
  border-color: rgba(109, 40, 217, .28);
  box-shadow: 0 26px 70px rgba(109, 40, 217, .16);
}
.light .pack3.star .p-essence { color: #6D28D9; }

/* the ghost button is a dark-surface control: on white it was invisible */
.light .btn-ghost {
  color: #4C1D95; border-color: rgba(76, 29, 149, .28); background: rgba(109, 40, 217, .04);
}
.light .btn-ghost:hover { background: rgba(109, 40, 217, .09); border-color: rgba(76, 29, 149, .45); }

.light .packs-foot, .light .packs-more, .light .t5-note { color: #4A4363; }
.light .packs-more a { color: #6D28D9; }

.light .t5-card {
  background: #FFFFFF; border-color: rgba(23, 16, 43, .10);
  box-shadow: 0 2px 4px rgba(23, 16, 43, .04), 0 14px 34px rgba(23, 16, 43, .06);
}
.light .t5-card b, .light .t5-card h3 { color: var(--light-text); }
.light .t5-card p, .light .t5-card span { color: #4A4363; }
.light .t5-ic { background: rgba(109, 40, 217, .09); border-color: rgba(109, 40, 217, .2); }

/* the comparison bars and stat tiles live in this section too */
.light .bars5-note, .light .cmp-foot { color: #4A4363; }
.light .cmp-stat { background: #FFFFFF; border-color: rgba(23, 16, 43, .10); }
.light .cmp-stat b { color: var(--light-text); }
.light .cmp-stat span { color: #4A4363; }

/* v5.17 -- the pinned journey lost its two bookend cards, and with a shorter
   track the first and last day could no longer reach the middle of the screen:
   the stage counter went straight to 2 and stopped at 4. Half a viewport of
   runway at each end, minus half a card, lets every day be centred, so the
   counter reads 1 through 5 again. The GSAP tween measures the track live, so
   the pin length follows on its own. */
.j-spacer { flex: 0 0 calc(50vw - 200px); align-self: stretch; }
@media (max-width: 940px) { .j-spacer { display: none; } }

/* ---- v5.19: the difference ledger --------------------------------------
   The reference for this section was six identical warning cards in a grid,
   which is the shape that makes a page read as generated. The same six pairs
   work harder as a ledger: one spine, risk on one side and the answer on the
   other, so the eye compares across a row instead of hunting between boxes.
   Red and green are deliberately not used; the violet already carries "us". */
.ledger {
  border: 1px solid var(--stroke); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%);
}
.ledger-head, .ledger-row { display: grid; grid-template-columns: 1fr 1fr; }
.ledger-head {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--stroke);
}
.ledger-head > * { padding: 16px 24px; }
.ledger-head .lg-us { color: var(--violet-2); }
.ledger-row + .ledger-row { border-top: 1px solid var(--stroke); }
.ledger-row > div { padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; }
.ledger-row p { margin: 0; font-size: 15px; line-height: 1.62; }
.ledger-row .lg-risk { color: var(--text-3); }
.ledger-row .lg-us {
  color: var(--text); position: relative;
  background: rgba(139, 92, 246, .045);
}
/* the spine: one line the whole way down, drawn on the answer column so it
   sits between the two regardless of writing direction */
.ledger-row .lg-us::before, .ledger-head .lg-us::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 1px; background: rgba(139, 92, 246, .42);
}
.ledger-head .lg-us { position: relative; }
.lg-n {
  flex: none; font-family: var(--font-display); font-weight: var(--fd-w);
  font-size: 13px; letter-spacing: .04em; color: var(--violet-2);
  padding-top: 2px; opacity: .85;
}
.ledger-foot { text-align: center; margin-top: 22px; color: var(--text-3); font-size: 14.5px; }
.ledger-foot a { color: var(--violet-2); font-weight: 600; border-bottom: 1px solid rgba(168, 85, 247, .4); }

@media (max-width: 820px) {
  /* a two-column ledger on a phone gives each cell 40 characters, so the rows
     stack: the risk, then the answer indented under it with the spine kept */
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-row > div { padding: 16px 18px; }
  .ledger-row .lg-us {
    padding-top: 14px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .075), transparent 90%);
  }
  .ledger-row .lg-us::before { inset-block: 0 auto; inset-inline: 0; width: auto; height: 1px; }
  .ledger-row .lg-us::after {
    content: ""; flex: none; width: 13px; height: 13px; margin-top: 4px; order: -1;
    background: var(--grad-cta); border-radius: 50%;
    box-shadow: 0 0 12px rgba(168, 85, 247, .55);
  }
  .ledger-row .lg-us p { order: 1; }
}

/* ---- v5.19: technique ---------------------------------------------------
   Two ways to build the same veneer. The shell is one photograph used as an
   illustration in both panels, labelled as such, and the difference is carried
   by the backdrop and the spec rows rather than by pretending the picture
   changed. */
.tech2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tech-card {
  border-radius: 24px; overflow: hidden; background: #FFFFFF;
  border: 1px solid rgba(23, 16, 43, .10);
  box-shadow: 0 2px 4px rgba(23, 16, 43, .04), 0 20px 50px rgba(23, 16, 43, .08);
  display: flex; flex-direction: column;
}
.tech-shot {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  overflow: hidden;
}
.tech-shot img {
  position: absolute; inset: 11% 26%; z-index: 1;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  margin: auto; object-fit: contain;
  /* a white cutout on a light surface needs a shadow to sit on it; multiply
     was dissolving the shell into the background instead */
  filter: drop-shadow(0 18px 26px rgba(23, 16, 43, .22));
}
.tech-full { background: radial-gradient(120% 90% at 50% 44%, #FFFFFF, #F0EAFE 74%, #E7DEFB); }
.tech-half { background: radial-gradient(120% 90% at 50% 44%, #FFFFFF, #E8F1FD 74%, #DCE9FA); }
/* the 0.5 shell is the translucent one, so it gets the light behind it */
.tech-half::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(38% 30% at 50% 56%, rgba(255, 255, 255, .95), transparent 70%);
}
.tech-tag {
  position: absolute; z-index: 2; inset-block-start: 16px; inset-inline-start: 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  padding: 7px 14px; border-radius: var(--r-pill); background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(23, 16, 43, .12);
}
.tech-full .tech-tag { color: #6D28D9; }
.tech-half .tech-tag { color: #1D4ED8; }
.tech-note {
  position: absolute; z-index: 2; inset-block-end: 12px; inset-inline-end: 14px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(23, 16, 43, .38);
}
.tech-body { padding: 24px 26px 26px; }
.tech-body h3 { font-size: 24px; margin: 0 0 8px; color: var(--light-text); }
.tech-body > p { margin: 0; color: #4A4363; font-size: 15px; line-height: 1.68; }
.tech-spec { margin: 18px 0 0; display: grid; gap: 0; }
.tech-spec > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid rgba(23, 16, 43, .09);
}
.tech-spec dt { margin: 0; font-size: 13px; color: #6B6484; }
.tech-spec dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--light-text); text-align: end; }
.tech-foot { text-align: center; margin-top: 22px; color: #4A4363; font-size: 14.5px; }
.tech-foot a { color: #6D28D9; font-weight: 600; border-bottom: 1px solid rgba(109, 40, 217, .38); }

@media (max-width: 820px) {
  .tech2 { grid-template-columns: 1fr; gap: 16px; }
  .tech-shot { aspect-ratio: 16 / 10; }
  .tech-shot img { height: 74%; }
  .tech-body { padding: 20px 20px 22px; }
  .tech-body h3 { font-size: 21px; }
}

/* ==========================================================================
   v5.20 -- the framed hero, the air, and the Instagram band
   ========================================================================== */

/* ---- the hero film is now an object, not a backdrop ---------------------
   Every take we own is portrait: the hero film is 1080x1920 and there is no
   landscape footage anywhere in the library. A 9:16 take covering a 1440x900
   hero shows 35% of its own height at 1.33x, which on this take is her mouth
   and chin filling the screen. No amount of object-position fixes that, so the
   film stops being a backdrop and becomes a framed object: at 9/16 the frame
   matches the source exactly, so the whole face is on screen, uncropped, and
   the browser now downscales 1080px into ~316 CSS px instead of stretching it.
   The bleed keeps its cinema feel from a heavily blurred still of the same
   film: blur is a deliberate look, an upscale is not. */
.hero { align-items: center; }
.hero-bg { background: #0B0716; }
.hero-bg::before {
  content: ""; position: absolute; inset: -10%; z-index: 0;
  background: url(/assets/img/posters/hero-film.jpg) 50% 32% / cover no-repeat;
  filter: blur(58px) saturate(1.18) brightness(.46);
  transform: scale(1.05);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(30px, 4vw, 66px);
  text-align: start;
  /* the shorthand in one.css zeroes the container's inline padding, so all
     four sides have to be named here or the copy runs to the viewport edge */
  padding: 112px 22px 60px;
}
.hero-copy { min-width: 0; }
.hero h1 {
  margin-inline: 0; max-width: 12.4em;
  font-size: clamp(34px, 4.4vw, 62px);
}
.hero .sub { margin-inline: 0; max-width: 38em; }
.hero-ctas, .hero-stats { justify-content: flex-start; }
.hero-stats { margin-top: 38px; }

.hero-film { margin: 0; display: grid; gap: 11px; justify-items: center; }
.hf-frame {
  position: relative; overflow: hidden;
  width: clamp(212px, 22vw, 316px); aspect-ratio: 9 / 16;
  /* an arch, not a rounded rectangle: the shape reads as a portrait rather
     than as a video player, which is what the film actually is here */
  border-radius: 999px 999px 26px 26px;
  background: #0B0716;
  border: 1px solid rgba(168, 85, 247, .34);
  box-shadow: 0 42px 96px rgba(0, 0, 0, .55), 0 0 0 9px rgba(139, 92, 246, .07);
}
.hf-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hf-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(11, 7, 22, .34), transparent 34%);
}
.hero-film figcaption {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .03em; color: var(--text-3);
}
.hf-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
@media (max-width: 1300px) { .hero-inner { padding: 104px 22px 52px; } }

@media (max-width: 900px) {
  /* one column, and the film sits directly under the headline so the first
     screen carries the promise and the proof of it together. display:contents
     promotes the copy's children to grid items so the figure can be ordered
     between them without duplicating the markup. */
  .hero-inner {
    grid-template-columns: 1fr; justify-items: center;
    text-align: center; gap: 0; padding: 88px 22px 38px;
  }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; margin-inline: auto; max-width: none; }
  .hero-film { order: 3; margin: 24px auto 2px; }
  .hero .sub { order: 4; margin-inline: auto; }
  .hero-ctas { order: 5; justify-content: center; }
  .hero-stats { order: 6; justify-content: center; margin-top: 26px; }
  .hf-frame { width: min(50vw, 208px); box-shadow: 0 26px 54px rgba(0, 0, 0, .5), 0 0 0 7px rgba(139, 92, 246, .07); }
  .hero-bg::before { filter: blur(44px) saturate(1.18) brightness(.44); }
}
@media (max-width: 380px) { .hf-frame { width: 176px; } }

/* ---- the air ------------------------------------------------------------
   qa/gaps.cjs said the space BETWEEN sections was already tight, so the dead
   screens had to be inside them. qa/dead.cjs and a 26-frame filmstrip put the
   blame on three scroll-holding sections: the two wipe stages held 230vh each
   to play a 62%-long scrub, and the journey pinned one pixel of track per
   pixel of scroll. Together that was 6,300px of desktop scroll, a quarter of
   the page, spent on three moments. The scrubs keep their full range; only the
   scroll it costs to see them comes down. */
.rv5-stage { height: 164vh; }
.rv5-sticky { padding-top: 58px; padding-bottom: 32px; }
/* the reveal is the whole point of the section, so the frame gets the room
   the shortened stage gives back */
.rv5-frame { max-width: 760px; }
@media (max-width: 760px) {
  .rv5-stage { height: 150vh; }
  .rv5-sticky { padding-top: 62px; padding-bottom: 26px; }
}

/* the remaining wide boundaries measured by qa/gaps.cjs, at their source */
#voices { padding-bottom: 44px !important; }
.finale3 { padding-block: 30px; }
#warranty, #craft { padding-block: 34px; }
@media (max-width: 900px) {
  #voices { padding-bottom: 30px !important; }
  .finale3 { padding-block: 24px; }
  #warranty, #craft { padding-block: 26px; }
}

/* ---- Instagram ----------------------------------------------------------
   Deliberately a link, not an embed: no third-party script, nothing that can
   go stale or blank when a token expires. The four rings are stills from films
   that live on that account, so the block shows what is actually there instead
   of describing it. */
#social { padding-block: 26px 46px; }
.ig-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(18px, 3vw, 40px);
  padding: 26px clamp(20px, 3vw, 34px);
  border: 1px solid var(--stroke); border-radius: 26px;
  background:
    linear-gradient(120deg, rgba(168, 85, 247, .10), transparent 46%),
    rgba(255, 255, 255, .022);
  color: inherit; text-decoration: none;
  transition: border-color .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1);
}
.ig-band:hover { border-color: rgba(168, 85, 247, .5); transform: translateY(-2px); }
.ig-rings { display: flex; }
.ig-rings span {
  width: 62px; height: 62px; border-radius: 50%; background-size: cover;
  background-position: 50% 26%; flex: none;
  box-shadow: 0 0 0 2px #140C24, 0 0 0 4px rgba(168, 85, 247, .62);
}
.ig-rings span + span { margin-inline-start: -16px; }
.ig-at {
  display: block; font-family: var(--font-display); font-weight: var(--fd-w);
  font-size: clamp(21px, 2.6vw, 30px); letter-spacing: .01em; direction: ltr;
}
[dir="rtl"] .ig-at { text-align: right; }
.ig-band p { margin: 5px 0 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; }
.ig-go {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 13px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 14.5px;
  color: #fff;
  /* Instagram's own gradient puts white text at 2.7:1 on its orange end.
     Same three hues, deep enough that every stop clears 4.5:1. */
  background: linear-gradient(135deg, #8E2A6E 0%, #B31B5B 48%, #C2452A 100%);
  box-shadow: 0 12px 30px rgba(142, 42, 110, .34);
}
.ig-go svg { flex: none; }
@media (max-width: 820px) {
  .ig-band { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; padding: 24px 18px; }
  .ig-rings span { width: 54px; height: 54px; }
  .ig-band p { font-size: 14px; }
}

/* ---- v5.20b: the hero, after looking at it -----------------------------
   Three things the first render showed that the plan did not.
   1. A blurred still of a face is a brown wash, not a cinema backdrop, so the
      bleed is desaturated almost to grey and the colour comes back from the
      violet the brand already owns.
   2. The WhatsApp pill is fixed to the bottom inline-start corner, which is
      exactly where a start-aligned chip row now ends. Sending the chips to the
      other end clears it in both writing directions, and lands them under the
      film where they read as a counterweight rather than a fifth line of copy.
   3. On a phone the stack came to 1,380px. The film loses a little width and
      the chips lose their padding, which is where the height actually was. */
.hero-bg::before { filter: blur(58px) saturate(.5) brightness(.42); }
.hero-bg::after {
  background:
    linear-gradient(to top, var(--bg) 3%, rgba(11, 7, 22, .84) 34%, rgba(11, 7, 22, .5) 64%, rgba(11, 7, 22, .58) 100%),
    radial-gradient(78% 66% at 50% 92%, rgba(124, 58, 237, .40), transparent 68%),
    radial-gradient(52% 52% at 84% 4%, rgba(168, 85, 247, .18), transparent 72%);
}
@media (min-width: 901px) { .hero-stats { justify-content: flex-end; } }

@media (max-width: 900px) {
  .hero-inner { padding: 66px 22px 34px; }
  .hf-frame { width: min(46vw, 186px); }
  .hero-stats { margin-top: 22px; gap: 9px; }
  .stat-chip { padding: 10px 14px; gap: 9px; border-radius: 15px; }
  .stat-chip b { font-size: 19px; }
  .stat-chip span { font-size: 11.5px; line-height: 1.3; }
  .hero .eyebrow { font-size: 12px; }
}
@media (max-width: 380px) { .hf-frame { width: 168px; } }

/* ---- v5.20c: short desktops -------------------------------------------
   At 1366x768 the copy column ran past the fold and the primary button
   landed underneath the fixed WhatsApp pill. A laptop is the most common
   desktop this page will be opened on, so the hero gets its own scale there
   rather than being tuned only for a 900px-tall window. */
@media (min-width: 901px) { .hero-inner { padding-block: 92px 88px; } }
@media (min-width: 901px) and (max-height: 840px) {
  .hero-inner { padding: 74px 22px 34px; }
  .hero h1 { font-size: clamp(30px, 3.5vw, 46px); }
  .hero .sub { font-size: 16px; max-width: 40em; }
  .hero-ctas { margin-top: 26px; }
  .hero-stats { margin-top: 24px; }
  .hf-frame { width: clamp(190px, 18.5vw, 252px); }
}

/* ---- v5.20d: the last of the held scroll -------------------------------
   qa/dead.cjs after the first pass: the journey still held 2,121px and the two
   wipes 1,522px between them. The runway spacers at each end of the track are
   pure empty width, and every pixel of width is paid for again in held scroll,
   so they shrink to what the first and last card actually need to reach the
   middle of the screen. */
.j-spacer { flex: 0 0 calc(24vw - 90px); }
.rv5-stage { height: 150vh; }
@media (max-width: 760px) { .rv5-stage { height: 138vh; } }

/* ---- v5.20e: the two floats swap corners --------------------------------
   The hero copy is start-aligned now, so its last row ends exactly where the
   WhatsApp pill is pinned: bottom inline-start. That is true in both writing
   directions, and in English the copy runs 106px taller, so no amount of
   type-scale tuning clears it. The pill moves to the inline-end corner and the
   accessibility launcher takes the one it left, which puts the wide float on
   the side the copy never reaches in either language. Measured, not assumed:
   qa/herobox.cjs reports every fixed element against the hero's own boxes. */
.wa3 { inset-inline-start: auto; inset-inline-end: 22px; }
.a11y-btn { inset-inline-end: auto; inset-inline-start: 22px; }
.a11y-panel { inset-inline-end: auto; inset-inline-start: 22px; }
@media (max-width: 900px) { .a11y-panel { inset-inline-end: auto; inset-inline-start: 14px; } }
/* with the corner free the chips can align with the headline again */
@media (min-width: 901px) { .hero-stats { justify-content: flex-start; } }
/* the pill now shares the inline-end column with the film, so the film stops
   being centred against the taller copy and hangs from the top of the row
   instead: its arch lines up with the eyebrow, and its bottom edge clears the
   float by the height difference between the two columns */
@media (min-width: 901px) {
  .hero-inner { align-items: start; }
  .hero-film { align-self: start; margin-top: 4px; }
}

/* ==========================================================================
   v5.21 -- the three rejected sections, rebuilt
   Eli's words were "נראים מגעיל מאוד לא מקצועי ורחוק ממה שביקשתי". Reading
   them next to the rest of the page, the fault is the same in all three: every
   section on this site that works is anchored by real media at full size, and
   those three were a text table, two white cards holding a cut-out blob, and a
   thin bar. They read as an admin panel bolted onto a film. They are now built
   from the same parts as everything else: dark violet surfaces, real footage,
   one clear structure per card.
   ========================================================================== */

/* ---- the six questions -------------------------------------------------- */
.dif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dif-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 30px 28px 26px; border-radius: 24px;
  border: 1px solid var(--stroke);
  background:
    linear-gradient(168deg, rgba(168, 85, 247, .10), rgba(255, 255, 255, .012) 52%),
    rgba(20, 12, 36, .5);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dif-card:hover {
  border-color: rgba(168, 85, 247, .45); transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .4);
}
/* the numeral is drawn as an outline so it gives the card a corner without
   competing with the headline for attention */
.dif-n {
  position: absolute; inset-block-start: 6px; inset-inline-end: 22px; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(168, 85, 247, .3);
}
.dif-card h3 {
  font-family: var(--font-display); font-weight: var(--fd-w);
  font-size: 20px; line-height: 1.32; margin: 0 0 10px; max-width: 13.5em;
  position: relative; z-index: 1;
}
.dif-risk { margin: 0 0 22px; color: var(--text-3); font-size: 14.5px; line-height: 1.68; }
.dif-us {
  margin-top: auto; display: flex; gap: 13px; align-items: flex-start;
  padding-top: 18px; border-top: 1px solid rgba(168, 85, 247, .2);
}
.dif-us svg {
  flex: none; width: 15px; height: 15px; padding: 6px; box-sizing: content-box;
  border-radius: 50%; color: #fff; background: var(--grad-cta);
  box-shadow: 0 6px 18px rgba(139, 92, 246, .38);
}
.dif-us p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text); }
.dif-foot { text-align: center; margin-top: 26px; color: var(--text-3); font-size: 14.5px; }
.dif-foot a { color: var(--violet-2); font-weight: 600; border-bottom: 1px solid rgba(168, 85, 247, .4); }
@media (max-width: 1080px) { .dif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .dif-grid { grid-template-columns: 1fr; gap: 14px; }
  .dif-card { padding: 24px 22px 22px; }
  .dif-n { font-size: 52px; inset-inline-end: 18px; }
  .dif-card h3 { font-size: 18.5px; }
}

/* ---- technique ----------------------------------------------------------
   The previous version put one cut-out veneer photo in both panels under two
   different technique names, which is a claim the picture cannot support. The
   anchor is now a real macro of finished work, and the difference between the
   two builds is carried by a measured bar rather than by a retouched shell. */
.tech-wrap { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 22px; }
.tech-film {
  margin: 0; position: relative; overflow: hidden; border-radius: 26px;
  border: 1px solid var(--stroke-strong); background: #0B0716;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}
.tech-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tech-film figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  padding: 54px 22px 16px; font-size: 13px; color: var(--text-2);
  background: linear-gradient(to top, rgba(11, 7, 22, .92), transparent);
}
.tech-rows { display: grid; gap: 18px; align-content: stretch; }
.tq {
  padding: 26px 26px 20px; border-radius: 24px; border: 1px solid var(--stroke);
  background:
    linear-gradient(168deg, rgba(168, 85, 247, .09), rgba(255, 255, 255, .012) 52%),
    rgba(20, 12, 36, .5);
}
.tq-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tq-tag {
  font-size: 11px; letter-spacing: .14em; font-weight: 700; padding: 6px 13px;
  border-radius: var(--r-pill); background: rgba(168, 85, 247, .16);
  color: var(--violet-2); border: 1px solid rgba(168, 85, 247, .32);
}
.tq-tag-b { background: rgba(125, 211, 252, .12); color: #A5DEFC; border-color: rgba(125, 211, 252, .3); }
.tq h3 { font-family: var(--font-display); font-weight: var(--fd-w); font-size: 22px; margin: 0; }
.tq > p { margin: 0 0 20px; color: var(--text-2); font-size: 15px; line-height: 1.66; }
.tq-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 8px; }
.tq-meter b { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.tq-meter i { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.tq-meter i span { display: block; height: 100%; border-radius: 99px; background: var(--grad-cta); }
.tq-tag-b ~ * .tq-meter i span, .tq:last-child .tq-meter i span {
  background: linear-gradient(90deg, #38BDF8, #7DD3FC);
}
.tq-meter > span { font-size: 12.5px; font-weight: 600; color: var(--violet-2); }
.tq:last-child .tq-meter > span { color: #A5DEFC; }
.tq-spec { margin: 12px 0 0; display: grid; }
.tq-spec > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--stroke);
}
.tq-spec dt { margin: 0; font-size: 13px; color: var(--text-3); }
.tq-spec dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: end; }
@media (max-width: 900px) {
  .tech-wrap { grid-template-columns: 1fr; gap: 16px; }
  .tech-film { aspect-ratio: 16 / 10; }
  .tq { padding: 22px 20px 18px; }
  .tq h3 { font-size: 20px; }
}

/* ---- Instagram ----------------------------------------------------------
   Still a link and not an embed, so there is no third-party script and nothing
   that can blank out when a token expires. What changed is that the section
   now shows six real frames from six different films on that account, at post
   size, instead of four thumbnails the size of a coin. */
#social { padding-block: 34px 52px; }
.ig-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  text-decoration: none; color: inherit;
}
.ig-grid figure {
  margin: 0; position: relative; overflow: hidden; aspect-ratio: 1;
  border-radius: 16px; border: 1px solid var(--stroke); background: #0B0716;
}
.ig-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.ig-grid figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 7, 22, .34), transparent 46%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.ig-grid:hover img { transform: scale(1.05); }
.ig-grid:hover figure::after { opacity: 1; }
.ig-grid:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 6px; border-radius: 18px; }
.ig-bar { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.ig-at {
  font-family: var(--font-display); font-weight: var(--fd-w);
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .01em;
}
@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #social { padding-block: 26px 38px; }
  .ig-bar { gap: 14px; margin-top: 18px; }
}

/* ---- the hero's two buttons were not the same object --------------------
   .btn sets padding, not height, so the primary carried a 18px icon inside its
   line box and finished 6px taller than the ghost beside it. Both are now the
   same measured height with the padding doing only the horizontal work. */
.hero-ctas .btn { min-height: 58px; padding-block: 0; font-size: 16px; }
.hero-ctas .btn .ic { display: inline-flex; align-items: center; line-height: 0; }
@media (max-width: 560px) { .hero-ctas .btn { min-height: 52px; font-size: 15px; padding-inline: 24px; } }

/* ---- prices: white room, violet cards ----------------------------------- */
.light .pack3 {
  background: linear-gradient(168deg, #6D28D9 0%, #5B21B6 58%, #4C1D95 100%);
  border-color: rgba(76, 29, 149, .5);
  box-shadow: 0 4px 10px rgba(76, 29, 149, .14), 0 24px 56px rgba(76, 29, 149, .22);
}
.light .pack3 h3,
.light .pack3 .p-price b { color: #FFFFFF; }
.light .pack3 .p-name { color: #E9D9FF; }
.light .pack3 .p-essence,
.light .pack3 .p-per,
.light .pack3 .p-price span,
.light .pack3 ul li { color: rgba(255, 255, 255, .86); }
.light .pack3 li svg { color: #DDC9FF; }
/* the recommended card: same violet, in a black frame */
.light .pack3.star {
  background: linear-gradient(168deg, #7C3AED 0%, #6D28D9 56%, #4C1D95 100%);
  border: 2px solid #17102B;
  box-shadow: 0 6px 14px rgba(23, 16, 43, .18), 0 30px 72px rgba(76, 29, 149, .3);
}
.light .pack3.star .p-essence { color: #F5D67B; }
/* the buttons live on violet now, so they invert */
.light .pack3 .btn-primary {
  background: #FFFFFF; color: #4C1D95; box-shadow: 0 10px 26px rgba(23, 16, 43, .22);
}
.light .pack3 .btn-primary:hover { background: #F5EFFF; box-shadow: 0 16px 34px rgba(23, 16, 43, .3); }
.light .pack3 .btn-ghost {
  background: rgba(255, 255, 255, .1); color: #FFFFFF; border-color: rgba(255, 255, 255, .42);
}
.light .pack3 .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #FFFFFF; color: #FFFFFF; }

/* ---- the sticky phone bar wears WhatsApp's colour ----------------------- */
.mbar .btn-primary {
  background: linear-gradient(135deg, #0E8038, #0A6B31);
  box-shadow: 0 10px 30px rgba(10, 107, 49, .34);
}

/* ---- the reviews ran into the section under them ------------------------ */
#voices { padding-bottom: 14px !important; }
@media (max-width: 900px) { #voices { padding-bottom: 8px !important; } }
/* and the same footprint, so the pair reads as one control with two states */
@media (min-width: 561px) { .hero-ctas .btn { min-width: 236px; } }
.hero-ctas .btn-ghost { border-width: 1px; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.hero-ctas .btn-ghost:hover { border-color: var(--violet); background: rgba(139, 92, 246, .14); }

/* ---- v5.22: what a render showed that the file names did not --------------
   qa/shotmedia.cjs photographs every media box as the visitor sees it, and
   qa/jshots.cjs drives the pinned journey and photographs the viewport. Three
   things only those two could see. */

/* 1. the two scrub frames were different widths. .rv5-face carries a 640px cap
   from v5.13 that outranks the 760px set for its sibling, so the page's two
   biggest before/after pictures did not match each other. */
.rv5-frame.rv5-face { max-width: 760px; }

/* 2. the journey films are portrait takes in a near-square card, so cover was
   showing torsos. The faces sit in the upper third of both. */
.j-card.media video { object-position: 50% 22%; }

/* 3. the same white-room-with-violet-cards treatment on the main picture
   strip: Eli asked for it on the packages and then for it here too, so the
   card is the violet object and the room around it stays white. */
.light .case-card {
  background: linear-gradient(168deg, #6D28D9 0%, #5B21B6 58%, #4C1D95 100%);
  border-color: rgba(76, 29, 149, .5);
  box-shadow: 0 4px 10px rgba(76, 29, 149, .14), 0 20px 46px rgba(76, 29, 149, .22);
}
.light .case-card:hover { box-shadow: 0 8px 18px rgba(76, 29, 149, .2), 0 30px 66px rgba(76, 29, 149, .32); }
.light .case-foot { color: rgba(255, 255, 255, .84); }
.light .case-foot b { color: #FFFFFF; }

/* v5.22: the tick badges are gone at Eli's word. The rule above the answer
   already separates it from the risk, so the icon was decoration doing a job
   the divider was doing anyway. */
.dif-us { display: block; }
.dif-us svg { display: none; }

/* ==========================================================================
   v5.23 -- the hero goes back to being a background film
   Eli: "הסרטון לא ברקע ולא מותאמת בכלל להירו". The framed arch is gone and the
   copy is centred over a full bleed again, the way it was. What changed is the
   FILE, not the CSS: qa/hero_plate.py authors the take at 16:9 and at 9:16,
   with the patient laid in small and feathered over a heavily blurred, dimmed
   field of the same footage. The browser then only has to cover, which is what
   a background film is for, and a 9:16 take no longer has to survive a 16:9
   crop that could only ever show a band across her mouth.
   ========================================================================== */
.hero { align-items: end; }
.hero-bg { background: #0B0716; }
.hero-bg::before { content: none; }
.hero-bg video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%; transform: none;
}
.hero-inner {
  display: block; text-align: center;
  padding: 118px 22px 66px;
}
.hero h1 { margin: 26px auto 0; max-width: 13.5em; font-size: clamp(34px, 4.6vw, 64px); }
.hero .sub { margin: 22px auto 0; max-width: 40em; }
.hero-ctas, .hero-stats { justify-content: center; }
.hero-stats { margin-top: 40px; }
/* the framed film and everything that positioned it are retired */
.hero-film, .hf-frame, .hf-dot { display: none; }

@media (min-width: 901px) and (max-height: 840px) {
  .hero-inner { padding: 96px 22px 44px; }
  .hero h1 { font-size: clamp(32px, 3.9vw, 52px); }
}
@media (max-width: 900px) {
  /* the tall plate puts her in the top third, so the copy starts under her */
  .hero-inner { padding: 250px 22px 40px; text-align: center; }
  .hero-copy { display: block; }
  .hero h1 { margin-inline: auto; }
}
@media (max-width: 380px) { .hero-inner { padding-top: 226px; } }
/* the headline gives back the gutter the patient stands in */
.hero h1 { max-width: 11.5em; }

/* ---- v5.24: the round Eli listed nine ways -------------------------------
   The hero is a background film again, but this time the film is authored at
   the hero's shape and the copy moves out of its way instead of sitting on top
   of it. Everything else here is a named item from his list. */

/* ---- the hero: she holds one side, the copy holds the other -------------- */
.hero-bg video { object-position: 50% 50%; }
/* the plate always plays at viewport height, so a tall copy column can never
   stretch it and crop her face out of the sides */
.hero-bg { inset: 0; height: 100%; }

@media (min-width: 901px) {
  .hero-inner {
    /* the framed hero left a two column track on this element. Leaving it in
       scatters the copy down both sides of the plate, which is what the first
       render of this pass showed and what no amount of alignment would fix. */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
    justify-items: start; text-align: start;
    padding: 130px 0 92px;
  }
  .hero-inner > * { width: 100%; max-width: 620px; margin-inline: 0; }
  .hero .eyebrow { width: auto; }
  .hero h1 { max-width: 10.4em; margin: 24px 0 0; font-size: clamp(36px, 3.7vw, 58px); }
  .hero .sub { max-width: 40em; margin: 20px 0 0; }
  .hero-ctas { justify-content: flex-start; margin-top: 30px; }
  .hero-stats { justify-content: flex-start; margin-top: 36px; }
}
@media (min-width: 901px) and (max-height: 860px) {
  .hero-inner { padding: 108px 0 62px; }
  .hero h1 { font-size: clamp(32px, 3.2vw, 50px); }
  .hero-stats { margin-top: 26px; }
}
@media (max-width: 900px) {
  /* the tall plate keeps her whole head in the upper half and darkens the rest,
     so the copy starts under her chin and never crosses her smile */
  .hero-bg { inset: 0 0 auto 0; height: 100svh; }
  .hero-inner { display: block; text-align: center; padding: 414px 20px 44px; }
  .hero h1 { margin-inline: auto; max-width: 12em; }
  .hero-ctas, .hero-stats { justify-content: center; }
}
@media (max-width: 380px) { .hero-inner { padding-top: 378px; } }

/* ---- the clinic stands behind the section that names it ------------------ */
#about { position: relative; isolation: isolate; overflow: hidden; }
.about-room { position: absolute; inset: 0; z-index: -1; }
.about-room img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.about-room::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,7,22,.95) 0%, rgba(11,7,22,.70) 44%, rgba(11,7,22,.94) 100%),
    linear-gradient(to left, rgba(11,7,22,.42), rgba(11,7,22,.88));
}
#about .about-collage { position: relative; z-index: 1; }

/* ---- the four treatment cards wear the same violet as the packages ------- */
.light .t5-card {
  background: linear-gradient(168deg, #6D28D9 0%, #5B21B6 58%, #4C1D95 100%);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 18px 44px rgba(76, 29, 149, .26);
}
.light .t5-card b { color: #FFFFFF; }
.light .t5-card p { color: rgba(255, 255, 255, .82); }
.light .t5-card .t5-ic { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .22); }
.light .t5-card .t5-ic svg path,
.light .t5-card .t5-ic svg circle { stroke: #F5EDFF; }

/* ---- the question gets its own line, and the answer sits under it -------- */
.lead-b h3 { line-height: 1.32; }
.lead-b h3 b { display: block; margin-top: 10px; }

/* ---- the before/after boxes are sized to the pixels that exist ------------
   The composites the clinic sent are 580x1024 for a two-up, so a half holds
   about 580x410 and a registered crop of it holds less. Every box below is set
   to the largest width its sharpest half can fill without being enlarged; the
   numbers are printed by qa/recut.py on every run. */
.rv5-frame, .rv5-frame.rv5-face { max-width: 560px; }
@media (max-width: 900px) { .rv5-frame, .rv5-frame.rv5-face { max-width: none; } }
.cases-strip { grid-template-columns: repeat(auto-fit, minmax(212px, 260px)); }
@media (max-width: 1000px) { .cases-strip { grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); } }

/* ---- v5.25: the hero plate carries its own light -------------------------
   one.css lays a heavy gradient over the film so that a raw take can hold
   white text. The plate is graded and scrimmed at build time now, so that
   second layer only muddies her; what is left here is the short fade into the
   page colour under the fold. */
.hero { background: #0B0716; }
.hero-bg video { transform: none; object-position: 50% 50%; }
.hero-bg::after {
  background: linear-gradient(to top, var(--bg) 2%, rgba(11, 7, 22, .38) 15%, transparent 44%);
}
/* one plate, two directions: English mirrors it so the copy can start on the
   left without a second encode */
html[dir="ltr"] .hero-bg video { transform: scaleX(-1); }
@media (max-width: 900px) {
  /* the tall plate is symmetrical enough that mirroring it would only cost a
     cache entry */
  html[dir="ltr"] .hero-bg video { transform: none; }
  .hero-inner { padding-top: 452px; }
}
@media (max-width: 380px) { .hero-inner { padding-top: 414px; } }

/* the four hero figures read as a block rather than three and an orphan */
@media (min-width: 901px) {
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
  .hero-stats .stat-chip { margin: 0; }
}

/* ---- v5.26: the two sections Eli sent references for ---------------------
   Reference one is a risk/answer grid, reference two is a pair of product
   cards led by a full size photograph of the veneer itself. Both are executed
   in this site's materials rather than copied: the risk grid keeps the site's
   light-section treatment, and the product cards carry the site's own veneer
   shells at the size that made every working section on this page work. */

/* ---- 01. not every clinic is the same ---------------------------------- */
.eyebrow-warn { color: #A81F45 !important; background: rgba(190, 24, 74, .09) !important; border-color: rgba(168, 31, 69, .30) !important; }
.eyebrow-warn::before { background: #BE184D !important; }

.dif-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 40px;
}
@media (max-width: 1040px) { .dif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dif-grid { grid-template-columns: 1fr; } }

.dif-card {
  position: relative; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--light-stroke);
  border-radius: var(--r-card); padding: 26px 24px 24px;
  box-shadow: 0 14px 34px rgba(23, 16, 43, .06);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dif-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(23, 16, 43, .12); }
.dif-card { display: flex; flex-direction: column; }
.dif-row + .dif-row { margin-top: auto; }
.dif-n {
  position: absolute; inset-block-start: 14px; inset-inline-end: 20px;
  font-family: var(--font-display); font-size: 34px; font-weight: 800;
  color: rgba(23, 16, 43, .07); letter-spacing: -.02em; line-height: 1;
}
.dif-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.dif-row + .dif-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(23, 16, 43, .09); }
.dif-ic {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.dif-row b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; margin-bottom: 5px; }
.dif-row p { font-size: 15px; line-height: 1.62; margin: 0; color: var(--light-text-2); }

.dif-risk .dif-ic { background: rgba(190, 24, 74, .10); color: #BE184D; }
.dif-risk b { color: #A81F45; }
.dif-ours .dif-ic { background: rgba(124, 58, 237, .12); color: #6D28D9; }
.dif-ours b { color: #5B21B6; }
.dif-ours p { color: var(--light-text); }

.dif-foot { margin-top: 30px; text-align: center; font-size: 15px; color: var(--light-text-2); }
.dif-foot a { color: #5B21B6; font-weight: 700; border-bottom: 1px solid rgba(91, 33, 182, .35); }
#technique .dif-foot { color: var(--text-2); }
#technique .dif-foot a { color: #C4A7FF; border-bottom-color: rgba(196, 167, 255, .38); }

/* ---- 02. choose the style of your smile -------------------------------- */
.tq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
@media (max-width: 860px) { .tq-grid { grid-template-columns: 1fr; } }

.tq5 {
  border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.tq5:hover { transform: translateY(-5px); border-color: rgba(168, 85, 247, .42); }

.tq5-art {
  position: relative; aspect-ratio: 4 / 3.05;
  display: grid; place-items: center; overflow: hidden;
}
.tq5-full .tq5-art { background: radial-gradient(120% 96% at 50% 8%, #F6F1FF 0%, #E7DEFA 52%, #D7C9F3 100%); }
.tq5-half .tq5-art { background: radial-gradient(120% 96% at 50% 8%, #F3F9FF 0%, #DFEDFB 54%, #CBDDF2 100%); }
.tq5-half .tq5-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34% 30% at 50% 56%, rgba(29, 78, 216, .16), transparent 72%);
}
.tq5-art img {
  width: 43%; max-width: 220px; height: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 26px 34px rgba(40, 22, 84, .26));
}
/* the copy says light travels through the thin one, so the picture says it too:
   its incisal third dissolves into the card behind it */
.tq5-half .tq5-art img {
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .34) 88%, rgba(0, 0, 0, .16) 100%);
  mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .34) 88%, rgba(0, 0, 0, .16) 100%);
  /* a drop-shadow under a mask makes Chromium composite the element box, which
     paints a faint rectangle around the tooth; the glow moves to the panel */
  filter: none;
}
.tq5-tag {
  position: absolute; inset-block-start: 20px; inset-inline-start: 20px; z-index: 2;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  padding: 8px 14px; border-radius: 999px;
}
.tq5-full .tq5-tag { color: #5B21B6; background: rgba(255, 255, 255, .78); }
.tq5-half .tq5-tag { color: #1D4ED8; background: rgba(255, 255, 255, .82); }

.tq5-body { padding: 26px 26px 28px; }
.tq5-body h3 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 31px); margin: 0; letter-spacing: -.02em; }
.tq5-sub { margin: 6px 0 0; font-weight: 700; font-size: 14.5px; color: #C4A7FF; }
.tq5-half .tq5-sub { color: #9CC4FF; }
.tq5-copy { margin: 14px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.66; }

.tq5-meter { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tq5-meter b { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); }
.tq5-meter i { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .12); display: block; }
.tq5-meter i span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7C3AED, #A855F7); }
.tq5-half .tq5-meter i span { background: linear-gradient(90deg, #3B82F6, #93C5FD); }
.tq5-meter > span { font-size: 12.5px; font-weight: 800; color: var(--text); }

.tq5-spec { margin: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.tq5-spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tq5-spec dt { font-size: 13.5px; color: var(--text-2); margin: 0; }
.tq5-spec dd { font-size: 13.5px; font-weight: 700; margin: 0; text-align: end; }

@media (max-width: 900px) {
  .tq5-art { aspect-ratio: 4 / 2.7; }
  .tq5-art img { width: 34%; }
  .dif-card { padding: 22px 20px 20px; }
}

/* ---- v5.27: composite against E.max, where the price gap comes from -----
   The client's own explanation, folded into the section that already asks the
   reader to choose. It is a comparison, so it is built as one: two cards on a
   shared baseline, the one we actually fit carrying the accent. */
.mat-compare {
  margin-top: 44px; padding: 30px 30px 28px;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 24px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .07), rgba(255, 255, 255, .015));
}
.mat-head h3 { font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 28px); margin: 0; letter-spacing: -.02em; }
.mat-head p { margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.66; max-width: 62ch; }
.mat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
@media (max-width: 780px) { .mat-grid { grid-template-columns: 1fr; } }
.mat-card {
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px;
  padding: 22px 22px 20px; background: rgba(255, 255, 255, .028);
}
.mat-star { border-color: rgba(168, 85, 247, .40); background: linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(124, 58, 237, .05)); }
.mat-kind {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-2);
  padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07);
}
.mat-star .mat-kind { color: #E9D9FF; background: rgba(168, 85, 247, .22); }
.mat-card h4 { font-family: var(--font-display); font-size: 21px; margin: 13px 0 0; letter-spacing: -.01em; }
.mat-card > p { margin: 10px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.64; }
.mat-card ul { margin: 15px 0 0; padding: 0; list-style: none; }
.mat-card li {
  position: relative; padding-inline-start: 19px; margin-top: 9px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
}
.mat-card li::before {
  content: ""; position: absolute; inset-block-start: 8px; inset-inline-start: 0;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .28);
}
.mat-star li { color: var(--text); }
.mat-star li::before { background: #A855F7; }
.mat-note { margin: 22px 0 0; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.mat-note b { color: var(--text); }
@media (max-width: 700px) { .mat-compare { padding: 22px 18px 20px; } }

/* the reveal frame shrank to the size its pixels can hold, so the scroll hold
   that used to sit around a 760px picture now has to shrink with it or the
   section reads as one small photo in an empty room */
.rv5-stage { height: 118vh; }
@media (max-width: 760px) { .rv5-stage { height: 112vh; } }

/* Every card's divider on one line across the row. The risk lines are not all
   the same length, so aligning them by hand is a guess that a translation
   breaks: the two rows share the grid's row tracks instead, and the English
   page lines up for the same reason the Hebrew one does. */
.dif-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
@supports not (grid-template-rows: subgrid) {
  .dif-card { display: flex; flex-direction: column; }
  .dif-card .dif-ours { margin-top: auto; }
}

/* ---- v5.28: the hero moved to footage that was shot at the right distance,
   and the technique cards show the difference instead of stating it -------- */

/* the plate now carries her at a natural size, so the copy column can hold its
   own third of the frame without crowding her */
@media (max-width: 900px) {
  .hero-inner { padding-top: 474px; }
}
@media (max-width: 380px) { .hero-inner { padding-top: 438px; } }

/* ---- light through the tooth, as a mechanic rather than a sentence -------
   A source sits behind each shell and a specular sweep travels across it. Both
   are masked by the shell's own PNG, so the light is shaped by the tooth and
   never by a box. The full-layered card keeps its light on the surface; the
   0.5 card lets it come through the incisal third, which is the whole claim. */
.tq5-shell { position: relative; display: block; width: 43%; max-width: 220px; }
.tq5-shell img { width: 100%; max-width: none; display: block; }
.tq5-shell::before {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  inset: 6% -30% -14% -30%;
  filter: blur(26px);
  animation: tqBreathe 9s ease-in-out infinite;
}
.tq5-full .tq5-shell::before { background: radial-gradient(closest-side, rgba(196, 167, 255, .60), transparent 72%); }
.tq5-half .tq5-shell::before { background: radial-gradient(closest-side, rgba(120, 190, 255, .72), transparent 74%); inset: 26% -26% -20% -26%; }
.tq5-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask-image: var(--shell); mask-image: var(--shell);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background-image: linear-gradient(104deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.78) 50%, rgba(255,255,255,0) 60%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: tqShine 7s cubic-bezier(.4, 0, .2, 1) infinite;
}
.tq5-half .tq5-shine {
  background-image: linear-gradient(104deg, rgba(255,255,255,0) 40%, rgba(214,236,255,.9) 50%, rgba(255,255,255,0) 60%);
  animation-delay: 1.6s;
}
@keyframes tqShine {
  0%, 14% { background-position: 150% 0; }
  56%, 100% { background-position: -50% 0; }
}
@keyframes tqBreathe {
  0%, 100% { opacity: .68; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}
.tq5:hover .tq5-shell::before { opacity: 1; transform: scale(1.1); animation-play-state: paused; }
.tq5-art img { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .tq5-shine, .tq5-shell::before { animation: none; }
  .tq5-shine { background-position: 40% 0; }
}
@media (max-width: 900px) { .tq5-shell { width: 34%; } }

/* ---- the very bottom of the page was holding a screen of nothing --------- */
footer.ftr { padding: 34px 0 34px; }
@media (max-width: 900px) { footer.ftr { padding: 28px 0 104px; } }
section.light#lead { padding-bottom: 56px; }

/* ---- v5.29: what a five-width phone audit turned up -----------------------
   qa/mobile.cjs walks 360, 390, 414, 430 and 768 in both languages and reports
   every control under 44px, every run of type under 12px and every element
   that leaves the viewport. These are its findings, not a guess at them. */

/* the language pill and the wordmark were 26 and 30px tall: readable, but not
   a thumb's worth of target. The hit area grows without the pill changing size. */
@media (max-width: 900px) {
  .hdr .logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* a pseudo-element hit expander is invisible to an audit and to anyone
     reading the CSS later, so the controls are simply the size they need */
  .hdr .lang-switch { padding-block: 0; }
  .hdr .lang-switch a {
    min-height: 44px; min-width: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-block: 0;
  }
  /* the same for the standalone link that closes the proof section: it is a
     call to action sitting on its own line, not a link inside a sentence */
  .softcta a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 11px is under the floor for a phone, tracked uppercase or not */
@media (max-width: 900px) {
  #compare th, #compare .sub, .bar5 .who span { font-size: 12.5px; }
  .tq5-tag { font-size: 12.5px; }
  .mat-kind { font-size: 12px; }
}

/* The dentist's portrait reveals from scale 1.08, and at tablet width the
   figure is the full column, so for the second and a bit that the tween runs
   the image is 7px wider than the viewport and the page scrolls sideways.
   Clip the section rather than the figure: the DHA badge deliberately hangs
   14px outside the frame, and overflow:hidden would eat it. */
#doctor { overflow-x: clip; }

/* ---- v5.30: the hero's two blocks share one grid -------------------------
   Eli: the buttons and the four figures ride on each other. They did, and the
   cause was that they were laid out by two different systems. The buttons were
   a flex row sized by their own labels (239 and 288 wide, 14px apart); the
   figures were a two column grid (274 and 274, 12px apart). One side of each
   block lined up by coincidence and every other edge was 16 to 18px out. On a
   phone it was worse: the four chips wrapped to four different widths across
   two rows that shared neither edge, so six boxes in the hero had not one
   common edge between them.

   The fix is one track for both, not a nudged margin. The button row becomes
   the same two column grid the figures already use, so button one sits exactly
   over figure one and every vertical edge in the hero is the same edge. On a
   phone both blocks run one column wide and the figures sit in a true 2x2. */

@media (min-width: 901px) {
  /* the padding shorthand above erased the container's own 22px gutter, so
     between 901 and 1264 the copy ran to the viewport edge: at 1024 it started
     at x=0. Naming it back also lines the hero up with every other section on
     the page, which it had never done. */
  .hero-inner { padding-inline: 22px; }

  .hero-ctas,
  .hero-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; width: 100%; max-width: 560px; margin-inline: 0;
  }
  .hero-ctas { margin-top: 30px; }
  /* close enough to read as one column of the same block, open enough that
     the act and the evidence are not the same row of things */
  .hero-stats { margin-top: 18px; }
  /* a grid item cannot also be sized by its label */
  .hero-ctas .btn { min-width: 0; width: 100%; padding-inline: 22px; }
}
@media (min-width: 901px) and (max-height: 860px) {
  .hero-ctas { margin-top: 24px; }
  .hero-stats { margin-top: 14px; }
}

@media (max-width: 900px) {
  .hero-ctas,
  .hero-stats {
    display: grid; gap: 10px;
    width: 100%; max-width: 420px; margin-inline: auto;
  }
  .hero-ctas { grid-template-columns: 1fr; margin-top: 24px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .hero-ctas .btn { width: 100%; min-width: 0; }
  /* the columns are narrower than the widest label, so the box has to be
     allowed to shrink rather than push its neighbour out of line */
  .stat-chip { min-width: 0; padding: 11px 14px; gap: 10px; }
  .stat-chip b { font-size: 19px; }
  .stat-chip span { font-size: 12px; min-width: 0; }
}

/* On a phone the two columns are narrower than the longest English label, so
   side by side the figure and its words wrapped to three lines and the second
   row of chips stood 89px against the first row's 56. The number moves above
   the label instead: the words get the full inner width, all four boxes come
   out the same height in both languages, and it costs less vertical space than
   letting the taller row set the size for everyone. */
@media (max-width: 900px) {
  .hero-stats { grid-auto-rows: 1fr; }
  .stat-chip { flex-wrap: wrap; align-content: center; row-gap: 3px; }
  /* :not(.live) matters: the live dot is a span too, and giving it a full
     width flex basis turned it into a green bar across the top of the chip */
  .stat-chip span:not(.live) { flex: 1 0 100%; }
}
/* the body's 1.7 line-height gave a 19px number a 32px line box, 13px of dead
   air inside every chip and 26px down the block */
@media (max-width: 900px) {
  .stat-chip { padding: 10px 13px; }
  .stat-chip b { line-height: 1.1; }
}

/* The English primary label ("Free consultation on WhatsApp") is 302px of text
   and icon, so a 274px column broke it over two lines inside a pill. Widening
   the block to the copy column's own 620px both fixes that and puts the last
   two edges in the hero on the same line as the headline and the paragraph. */
@media (min-width: 901px) {
  .hero-ctas, .hero-stats { max-width: 620px; }
  .hero-ctas .btn { padding-inline: 18px; }
}

/* ---- v5.31: the hero stops being a stretched plate -----------------------
   Five rebuilds, five rejections, and the cause was never the CSS. Every clip
   this project owns is a vertical phone video, 720x1280 or 576x1024, and there
   is no landscape footage and no landscape photograph anywhere in it. Making a
   wide background out of a 720 wide clip meant scaling it to the hero's height
   and filling the rest with a blurred stretch of its own edge pixels:

       panel 692x900 on a 1600x900 canvas
       -> 43% of the desktop hero was footage, 57% was blur

   That 57% is the dead field. It cannot be graded or masked away because there
   is nothing behind it.

   So the film takes a column of the hero at its own proportion instead. It
   bleeds off the top, the bottom and the outer edge of the viewport, and its
   inner edge dissolves into the page, which is what a background is. Nothing
   is scaled up: 720x934 into a 574px column at 1512 is a downscale. */

.hero-bg { inset: 0; height: 100%; overflow: hidden; }
.hero-bg::before { content: none; }
.hero-bg video {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: var(--film); height: 100%;
  object-fit: cover; object-position: 50% 26%;
  transform: none;
}
/* the film sits on the far side, so its inner edge is the one that dissolves */
.hero-bg video {
  -webkit-mask-image: linear-gradient(to right, #000 46%, rgba(0,0,0,.55) 74%, transparent 100%);
          mask-image: linear-gradient(to right, #000 46%, rgba(0,0,0,.55) 74%, transparent 100%);
}
html[dir="ltr"] .hero-bg video {
  transform: none;
  -webkit-mask-image: linear-gradient(to left, #000 46%, rgba(0,0,0,.55) 74%, transparent 100%);
          mask-image: linear-gradient(to left, #000 46%, rgba(0,0,0,.55) 74%, transparent 100%);
}

@media (min-width: 901px) {
  .hero { --film: clamp(380px, 38vw, 620px); }
  /* the copy stops before the film rather than sitting on it. The container is
     centred at 1220, so the film's inner edge is that much further in than the
     container's own edge, and the padding has to give that distance back. */
  .hero-inner {
    padding-inline-end: max(22px, calc(var(--film) - (100vw - min(100vw, 1220px)) / 2 + 44px));
    padding-inline-start: 22px;
  }
  .hero-inner > * { max-width: 560px; }
  .hero-ctas, .hero-stats { max-width: 560px; }
}

@media (max-width: 900px) {
  /* a band, not a full screen. The old plate filled the first screen with a
     film and a pill and pushed the headline, the price and the button onto the
     second one, so a phone landed on a hero that said nothing. */
  .hero { --film: 100%; }
  .hero-bg { inset: 0 0 auto 0; height: 46svh; }
  .hero-bg video, html[dir="ltr"] .hero-bg video {
    inset-inline-end: auto; inset-inline-start: 0;
    width: 100%; object-position: 50% 14%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
  }
  .hero-inner { padding: calc(46svh + 18px) 20px 40px; }
}
@media (max-width: 380px) { .hero-inner { padding-top: calc(46svh + 14px); } }

/* the first render of the column: the film ended in a discernible vertical
   edge because the dissolve finished exactly at the column's own boundary,
   and her head was cut at the top on both shapes */
.hero-bg video { object-position: 50% 16%; }
.hero-bg video,
html[dir="ltr"] .hero-bg video {
  -webkit-mask-image: linear-gradient(var(--fade), #000 0%, #000 52%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.28) 88%, transparent 100%);
          mask-image: linear-gradient(var(--fade), #000 0%, #000 52%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.28) 88%, transparent 100%);
}
.hero { --fade: to right; }
html[dir="ltr"] .hero { --fade: to left; }

@media (min-width: 901px) {
  /* a wider column leaves less flat page between the film and the copy, and
     the light it throws carries across the seam instead of stopping at it */
  .hero { --film: clamp(400px, 44vw, 680px); }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(58% 78% at var(--glow, 34%) 46%, rgba(124, 58, 237, .16), transparent 70%);
  }
  html[dir="ltr"] .hero-bg::after { --glow: 66%; }
}
@media (max-width: 900px) {
  .hero { --fade: to bottom; }
  html[dir="ltr"] .hero { --fade: to bottom; }
  .hero-bg video, html[dir="ltr"] .hero-bg video { object-position: 50% 2%; }
}
/* narrowing the copy column to 560 above put the English primary label back
   over two lines; the copy side has room for the 620 the label needs */
@media (min-width: 901px) {
  .hero-inner > *, .hero-ctas, .hero-stats { max-width: 620px; }
}

/* Between 901 and 1200 the film column and the copy column are both real, so
   the copy gets about 470 to 550px and two buttons of 300 do not fit in it.
   Below that width the buttons take the full column instead of being squeezed
   until the English label breaks in half. */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero { --film: clamp(340px, 36vw, 520px); }
  .hero-ctas { grid-template-columns: 1fr; gap: 10px; }
}
@media (min-width: 901px) {
  /* the two figure rows stay the same height whatever the label does */
  .hero-stats { grid-auto-rows: 1fr; }
}

/* ---- v5.32: the film goes back to being the whole background -------------
   Eli: "והסרטון תחזיר אותו לסרטון הקודם שהיה של הבחורה". The column was not
   what he asked for; he wants her filling the frame the way she did before.

   The reason the earlier full frame version was 57% blur was the pre-composited
   plate, which fitted the whole portrait into a wide canvas and padded the
   sides. object-fit: cover does the opposite: it crops into the frame, so every
   pixel on screen is footage. The cost is scale, not blur, and qa/hero_fill.py
   takes the first 1.5x with lanczos so the browser is left a 1.4x step.

   The copy keeps its own side and a scrim underneath it, because on the old
   build the headline sat across her mouth and neither could be read. */
.hero-bg { inset: 0; height: 100%; overflow: hidden; }
.hero-bg video,
html[dir="ltr"] .hero-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  transform: none;
  -webkit-mask-image: none; mask-image: none;
}
/* one scrim, built from the copy side inward, so the type has a field to sit
   on and her face keeps its light */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--scrim), rgba(9,6,18,.94) 0%, rgba(9,6,18,.86) 26%, rgba(9,6,18,.48) 56%, rgba(9,6,18,.20) 78%, rgba(9,6,18,.34) 100%),
    linear-gradient(to top, rgba(9,6,18,.92) 0%, rgba(9,6,18,.30) 26%, transparent 52%),
    radial-gradient(70% 60% at 50% 8%, rgba(9,6,18,.55), transparent 70%);
}
.hero { --scrim: to left; }
html[dir="ltr"] .hero { --scrim: to right; }

@media (min-width: 901px) {
  .hero-inner { padding-inline: 22px; }
  .hero-inner > *, .hero-ctas, .hero-stats { max-width: 620px; }
  .hero-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-ctas { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 900px) {
  /* full frame here too, with the copy over it: that is both what he asked for
     and the shorter hero, because the copy no longer queues up under a band */
  .hero-bg { inset: 0; height: 100%; }
  .hero-bg video, html[dir="ltr"] .hero-bg video { object-position: 50% 12%; }
  .hero { --scrim: to top; }
  html[dir="ltr"] .hero { --scrim: to top; }
  .hero-bg::after {
    background:
      linear-gradient(to top, rgba(9,6,18,.96) 0%, rgba(9,6,18,.92) 34%, rgba(9,6,18,.66) 58%, rgba(9,6,18,.32) 78%, rgba(9,6,18,.42) 100%),
      radial-gradient(90% 40% at 50% 4%, rgba(9,6,18,.62), transparent 72%);
  }
  .hero-inner { padding: 300px 20px 40px; }
}
@media (max-width: 380px) { .hero-inner { padding-top: 268px; } }
/* first render of the full frame: cover was cropping the top of her head off
   on both shapes, and the scrim was heavy enough on the copy side to put her
   face in shadow exactly where the smile is */
.hero-bg video, html[dir="ltr"] .hero-bg video { object-position: 50% 6%; }
@media (min-width: 901px) {
  .hero-bg::after {
    background:
      linear-gradient(var(--scrim), rgba(9,6,18,.92) 0%, rgba(9,6,18,.80) 30%, rgba(9,6,18,.36) 60%, rgba(9,6,18,.12) 82%, rgba(9,6,18,.26) 100%),
      linear-gradient(to top, rgba(9,6,18,.92) 0%, rgba(9,6,18,.28) 24%, transparent 50%),
      radial-gradient(70% 56% at 50% 6%, rgba(9,6,18,.5), transparent 70%);
  }
}
@media (max-width: 900px) {
  .hero-bg video, html[dir="ltr"] .hero-bg video { object-position: 50% 3%; }
}

/* At 1512 the cover scale is driven by width, so the frame fits the viewport
   exactly and there is no horizontal slack to place her with: whatever the
   vertical offset, her face lands under the copy and the paragraph runs across
   her teeth. The smile is the product, so it does not get written on. A small
   scale buys the slack, and the translate spends it moving her away from the
   copy side, which is the opposite side in each language. */
@media (min-width: 901px) {
  .hero-bg video { transform: scale(1.14) translateX(-7%); }
  html[dir="ltr"] .hero-bg video { transform: scale(1.14) translateX(7%); }
  .hero-bg video, html[dir="ltr"] .hero-bg video { object-position: 50% 8%; }
}

/* ---- v5.33: the blonde, in a frame, sharp ---------------------------------
   Eli: "תחזיר את הסרטון של הבחורה לבחורה הבלונדית הקודמת שהייתה ובתבנית הקודמת,
   לא ככה ברקע שהכל מתשושתש". Three instructions in one sentence, and all three
   point the same way.

   hero-film.mp4 is the blonde clip: 1080x1920 native, the best asset in the
   project, she smiles in every one of its 450 frames. It was never wired into
   any build on disk, which is why it kept not coming back.

   "Not blurred in the background" is the constraint that decides the layout.
   A background fills the hero's width, and the widest source we own is 1080px,
   so a background is always drawn soft. A frame is 300px wide, so a 720px cut
   inside it is drawn at half size and is sharp. That is the whole argument: the
   film goes in the frame because that is where it is sharp. */

.hero-bg { inset: 0; height: 100%; overflow: hidden; background: transparent; }
.hero-bg video { display: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(62% 68% at var(--fx, 76%) 34%, rgba(124, 58, 237, .26), transparent 66%),
    radial-gradient(48% 52% at var(--fx2, 18%) 82%, rgba(168, 85, 247, .14), transparent 70%),
    linear-gradient(to bottom, #0B0716 0%, #0D0819 62%, var(--bg) 100%);
}
html[dir="ltr"] .hero-bg::before { --fx: 24%; --fx2: 82%; }
.hero-bg::after { content: none; }

.hero-film { margin: 0; display: grid; gap: 12px; justify-items: center; }
.hf-frame {
  position: relative; overflow: hidden;
  width: clamp(232px, 24vw, 340px); aspect-ratio: 9 / 16;
  /* v5.36: Eli's client didn't like the arch. A rectangle, matching the
     corner radius the arch already used on its bottom two corners. */
  border-radius: 28px;
  background: #0B0716;
  border: 1px solid rgba(168, 85, 247, .34);
  box-shadow: 0 48px 110px rgba(0, 0, 0, .62), 0 0 0 10px rgba(139, 92, 246, .06);
}
.hf-frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hf-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(11, 7, 22, .40), transparent 36%);
}
.hero-film figcaption {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .02em; color: var(--text-3);
}
.hf-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.hero-film, .hf-frame, .hf-dot { display: revert; }
.hero-film { display: grid; }
.hf-dot { display: block; }

@media (min-width: 901px) {
  .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: clamp(34px, 4.4vw, 76px);
    justify-items: start; text-align: start;
    padding: 118px 22px 84px;
  }
  .hero-inner > *:not(.hero-film) { grid-column: 1; width: 100%; max-width: 600px; margin-inline: 0; }
  .hero-film { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .hero h1 { max-width: 10.6em; margin: 24px 0 0; font-size: clamp(34px, 3.4vw, 54px); }
  .hero .sub { max-width: 40em; margin: 18px 0 0; }
  .hero-ctas, .hero-stats { max-width: 600px; }
  .hero-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-height: 880px) {
  .hero-inner { padding: 96px 22px 60px; }
  .hf-frame { width: clamp(210px, 21vw, 300px); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-ctas { grid-template-columns: 1fr; gap: 10px; }
  .hf-frame { width: clamp(200px, 22vw, 268px); }
}

@media (max-width: 900px) {
  /* one column, and the frame sits under the headline so the first screen
     carries the promise and the proof of it together */
  .hero-inner {
    display: grid; grid-template-columns: 1fr; justify-items: center;
    text-align: center; gap: 0; padding: 92px 20px 40px;
  }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; margin: 20px auto 0; max-width: 12em; }
  .hero-film { order: 3; margin: 24px auto 4px; }
  .hero .sub { order: 4; margin: 20px auto 0; }
  .hero-ctas { order: 5; margin-top: 24px; }
  .hero-stats { order: 6; margin-top: 14px; }
  .hf-frame { width: min(56vw, 230px); box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 0 0 8px rgba(139, 92, 246, .06); }
}
@media (max-width: 380px) { .hf-frame { width: 196px; } }

/* ---- the buttons stop sitting on the figures -----------------------------
   Their boxes never overlapped; every edge measured identical at six widths.
   What overlaps is the light: --glow is `0 10px 45px`, so the primary button
   throws violet about 55px past its own bottom edge, onto a chip 18px below it.
   A box measurement cannot see that, which is why six passes of edge geometry
   called this fixed while it plainly was not. The glow is now shorter than the
   gap, and the gap is wider than the glow. */
.hero-ctas .btn-primary { box-shadow: 0 4px 14px rgba(109, 40, 217, .30); }
.hero-ctas .btn-primary:hover { box-shadow: 0 8px 22px rgba(139, 92, 246, .42); }
@media (min-width: 901px) { .hero-stats { margin-top: 26px; } }
@media (max-width: 900px) { .hero-stats { margin-top: 20px; } }
/* `gap` on a grid is both axes: with five copy rows that quietly added four
   66px gaps down the copy column and stretched the hero past 1700px */
@media (min-width: 901px) {
  .hero-inner { column-gap: clamp(34px, 4.4vw, 76px); row-gap: 0; align-content: center; }
}
@media (max-width: 900px) { .hero-inner { row-gap: 0; } }
/* two children, one row: the film can align with the whole copy block instead
   of stretching a single grid row to its own height */
@media (min-width: 901px) {
  .hero-copy { grid-column: 1; min-width: 0; width: 100%; max-width: 600px; }
  .hero-copy > * { width: 100%; max-width: 600px; margin-inline: 0; }
  .hero-film { grid-column: 2; grid-row: auto; align-self: center; }
}
@media (max-width: 900px) {
  /* contents promotes the copy's children to grid items so the frame can be
     ordered between the headline and the paragraph */
  .hero-copy { display: contents; }
}
/* qa/glow.cjs still measured 7 points of violet on the chip under the button at
   1280. An outer glow on a control that has another control 26px below it is
   always going to reach it, so the hero's primary keeps its lift as an inset
   highlight and a shadow with no colour to spill. */
.hero-ctas .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .38);
}
.hero-ctas .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px rgba(0, 0, 0, .46);
}

/* ---- v5.34: the cases become a 3D carousel -------------------------------
   The client rejected the drag sliders, and he was right about the material:
   every pair on his own site is one tall card, the before above the after, with
   the DUBADENT mark already on it. Cutting each pair into two mouth crops threw
   away the faces, which is most of what makes a before and after persuasive.
   These are his seven files, unmodified.

   The presentation is a real perspective coverflow rather than a strip: the
   cards sit on an arc in 3D, the centre one square to the viewer and the rest
   turning away from it. Every card's transform is computed from one continuous
   position value, so a drag moves the whole arc rather than snapping between
   slides, and the motion is the same whether it came from a pointer, a wheel,
   the arrows or the keyboard. */

.ba3d { margin-top: clamp(30px, 4vw, 52px); }
.ba3d-stage {
  position: relative; perspective: 1600px; perspective-origin: 50% 44%;
  height: var(--ba-h, 560px);
  touch-action: pan-y;
  cursor: grab;
}
.ba3d-stage.is-drag { cursor: grabbing; }
.ba3d-stage::after {
  /* the floor the arc stands on */
  content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0;
  width: min(78%, 720px); height: 46px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(109, 40, 217, .20), transparent 72%);
  filter: blur(3px);
}
.ba3d-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.ba3d-card {
  position: absolute; top: 0; left: 50%; margin: 0;
  width: var(--ba-w, 300px);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: opacity .22s linear;
}
.ba3d-card img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(24, 12, 48, .28), 0 2px 0 rgba(255, 255, 255, .7) inset;
  -webkit-box-reflect: below 10px linear-gradient(transparent 62%, rgba(255, 255, 255, .22));
  user-select: none; -webkit-user-drag: none;
}
.ba3d-card figcaption {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin-top: 14px; opacity: 0; transition: opacity .26s var(--ease);
}
.ba3d-card figcaption b { font-family: var(--font-display); font-size: 17px; color: var(--ink, #1B1130); }
.ba3d-card figcaption span { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.ba3d-card.is-active figcaption { opacity: 1; }
.ba3d-card.is-active img {
  box-shadow: 0 44px 96px rgba(76, 29, 149, .32), 0 0 0 1px rgba(139, 92, 246, .30),
              0 2px 0 rgba(255, 255, 255, .8) inset;
}

.ba3d-ui { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.ba3d-arrow {
  width: 46px; height: 46px; min-width: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(76, 29, 149, .22); background: #fff; color: #4C1D95;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s;
  box-shadow: 0 6px 18px rgba(76, 29, 149, .10);
}
.ba3d-arrow:hover { transform: translateY(-2px); background: #F6F2FF; box-shadow: 0 10px 26px rgba(76, 29, 149, .18); }
.ba3d-arrow:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
html[dir="rtl"] .ba3d-arrow svg { transform: scaleX(-1); }
.ba3d-dots { display: flex; align-items: center; gap: 9px; }
.ba3d-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(76, 29, 149, .22); transition: background .2s, transform .2s var(--ease), width .24s var(--ease);
}
.ba3d-dot.on { background: var(--violet); width: 26px; border-radius: 999px; }
.ba3d-dot:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ba3d-card { transition: none; }
  .ba3d-card img { -webkit-box-reflect: none; }
}
/* no javascript, no arc: the cards fall back to a plain readable row */
.ba3d:not([data-ready]) .ba3d-track { position: static; display: flex; gap: 18px; overflow-x: auto; }
.ba3d:not([data-ready]) .ba3d-card { position: static; left: auto; flex: 0 0 var(--ba-w, 300px); }
.ba3d:not([data-ready]) .ba3d-card figcaption { opacity: 1; }
.ba3d:not([data-ready]) .ba3d-stage { height: auto; }
/* First run of qa/ba3d.cjs: at 390px the next button could not be clicked at
   all, and the page scrolled 19px sideways. Both came from the same thing.
   `-webkit-box-reflect` paints outside the element's box, so each card's
   reflection hung over the caption and then over the controls underneath, and
   the off centre cards ran past the viewport. The reflection goes (it was
   WebKit only anyway), the stage clips, and the controls sit above it.

   Clipping is safe here: `overflow` flattens 3D only on the element that
   carries `transform-style: preserve-3d`, which is .ba3d-track, not .ba3d-stage. */
.ba3d-card img { -webkit-box-reflect: none; }
.ba3d-stage { overflow: hidden; }
.ba3d-ui { position: relative; z-index: 2; }
/* qa/mobile.cjs: the dots were 9x9, a fifth of what a thumb needs. The button
   becomes the 44x44 target and a pseudo element draws the dot inside it, so the
   control grows and the design does not. Seven of them at 44 with no gap is
   308px, which still fits a 360px phone. */
.ba3d-dots { gap: 0; }
.ba3d-dot {
  width: 44px; height: 44px; min-width: 44px; background: none; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: none;
}
.ba3d-dot::before {
  content: ""; display: block; width: 9px; height: 9px; border-radius: 999px;
  background: rgba(76, 29, 149, .22);
  transition: background .2s, width .24s var(--ease);
}
.ba3d-dot.on { background: none; width: 44px; }
.ba3d-dot.on::before { background: var(--violet); width: 26px; }
.ba3d-dot:focus-visible { outline: 2px solid var(--violet); outline-offset: -6px; border-radius: 12px; }
/* Seven 44px dots plus two 46px arrows and their gaps is 436px, which is wider
   than any phone, and one row too wide pushed the whole document sideways: the
   audit came back with 239 findings, of which 238 were the header and every
   section reporting that they now started at x=38. On a narrow screen the dots
   take their own row underneath. */
@media (max-width: 560px) {
  .ba3d-ui { flex-wrap: wrap; row-gap: 4px; gap: 14px; }
  .ba3d-dots { order: 3; flex-basis: 100%; justify-content: center; }
}

/* ---- v5.35: the clinic goes behind the hero, the figures stop being cards --
   Eli, third time on the same block: "הכפתורים בהירו גם במחשב וגם בטלפון לא
   מסודרים עוד". Every previous pass treated it as spacing, measured the edges,
   found them identical to the pixel, and shipped. The edges were never the
   problem.

   Look at what the first screen actually contained: two pill buttons and four
   filled rounded rectangles, all six the same width, on the same two column
   track, one row apart. Six boxes in a 3x2 grid. Nothing in that arrangement
   says the top row is where you act and the bottom four are what you read, so
   the eye files them as one block of controls and the block looks unsorted no
   matter how the gaps are tuned. More air between rows of identical boxes just
   makes a taller grid of identical boxes.

   So the figures stop being boxes. No fill, no border, no radius: four columns
   of a rule, hairline separated, the number over its label. Two buttons and one
   strip, which is two things instead of six, and the difference between acting
   and reading is now carried by the form rather than by the gap.

   And: "שים ברקע את התמונה של המרפאה עם הלוגו". The hero background had been a
   flat violet field since the blurred video came out of it. The reception, with
   the DUBADENT mark on the stone, now sits behind the film frame, radially
   masked so it never reaches the column the copy is set in. */

/* --- the clinic, behind the whole hero --- */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url(/assets/img/hero-clinic.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 36%;
}
/* the plate is already graded down in the file; this is the reading scrim, and
   it is directional: heavy over the column the copy is set in, light over the
   half the film frame stands in, so the room is still a room there */
.hero-bg::before {
  z-index: 2;
  background:
    linear-gradient(to left, rgba(6, 4, 14, .90) 0%, rgba(6, 4, 14, .74) 34%, rgba(6, 4, 14, .26) 62%, rgba(6, 4, 14, .08) 100%),
    radial-gradient(62% 68% at var(--fx, 76%) 34%, rgba(124, 58, 237, .20), transparent 66%),
    radial-gradient(48% 52% at var(--fx2, 18%) 82%, rgba(168, 85, 247, .12), transparent 70%),
    linear-gradient(to bottom, rgba(11, 7, 22, .55) 0%, rgba(13, 8, 25, .30) 46%, var(--bg) 100%);
}
html[dir="ltr"] .hero-bg::before {
  background:
    linear-gradient(to right, rgba(6, 4, 14, .90) 0%, rgba(6, 4, 14, .74) 34%, rgba(6, 4, 14, .26) 62%, rgba(6, 4, 14, .08) 100%),
    radial-gradient(62% 68% at 24% 34%, rgba(124, 58, 237, .20), transparent 66%),
    radial-gradient(48% 52% at 82% 82%, rgba(168, 85, 247, .12), transparent 70%),
    linear-gradient(to bottom, rgba(11, 7, 22, .55) 0%, rgba(13, 8, 25, .30) 46%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 3; }

@media (max-width: 900px) {
  /* one centred column, so there is no clear half: the scrim closes over the
     whole plate and the room stays as depth behind the type.

     The plate is also capped to a band here. The hero is one column on a phone,
     so its box runs past 2600px tall, and `cover` on a box that tall scales a
     1670px wide file to 3500px: the sign stops being a watermark and becomes a
     two foot blur. A band the height of the first screen is a downscale again. */
  .hero-bg::after {
    inset: 0 0 auto 0; height: min(76vh, 620px);
    background-position: 50% 30%;
  }
  .hero-bg::before,
  html[dir="ltr"] .hero-bg::before {
    background:
      linear-gradient(to bottom, rgba(6, 4, 14, .58) 0%, rgba(6, 4, 14, .74) 26%, rgba(8, 5, 18, .92) 52%, var(--bg) 74%),
      radial-gradient(74% 30% at 50% 10%, rgba(124, 58, 237, .18), transparent 70%);
  }
}

/* --- the four figures: a rule, not a grid of cards --- */
.hero .hero-stats {
  display: flex; flex-wrap: nowrap; gap: 0;
  width: 100%; max-width: 600px;
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero .stat-chip {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start;
  column-gap: 6px; row-gap: 5px;
  margin: 0; padding: 0 15px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero .stat-chip:first-child { padding-inline-start: 0; }
.hero .stat-chip:last-child { padding-inline-end: 0; }
.hero .stat-chip + .stat-chip::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 2px; bottom: 4px;
  width: 1px; background: rgba(255, 255, 255, .12);
}
.hero .stat-chip b {
  font-size: clamp(20px, 1.55vw, 25px); line-height: 1;
  letter-spacing: -.015em; font-weight: 700;
}
.hero .stat-chip .live { align-self: center; margin-inline-end: 0; }
.hero .stat-chip span:not(.live) {
  flex: 1 0 100%; min-width: 0;
  font-size: 11px; line-height: 1.45; letter-spacing: .012em;
  color: var(--text-3);
}

@media (min-width: 901px) and (max-width: 1199px) {
  .hero .hero-stats { padding-top: 18px; margin-top: 36px; }
  .hero .stat-chip { padding: 0 11px; }
  .hero .stat-chip span:not(.live) { font-size: 10.5px; }
}

@media (max-width: 900px) {
  /* two by two, still one object: the rule runs round the outside of the four
     cells instead of round each of them */
  .hero .hero-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    width: 100%; max-width: 420px; margin-inline: auto;
    margin-top: 34px; padding-top: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .hero .stat-chip {
    justify-content: center; text-align: center;
    padding: 15px 12px; row-gap: 4px;
  }
  .hero .stat-chip:first-child, .hero .stat-chip:last-child { padding-inline: 12px; }
  .hero .stat-chip + .stat-chip::before { content: none; }
  .hero .stat-chip:nth-child(2n)::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 13px; bottom: 13px;
    width: 1px; background: rgba(255, 255, 255, .12);
  }
  .hero .stat-chip:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }
  .hero .stat-chip b { font-size: 21px; }
  .hero .stat-chip span:not(.live) { font-size: 11px; text-align: center; }
  /* the buttons keep their own air; the rule is what separates the two groups */
  .hero .hero-ctas { margin-top: 26px; }
}
@media (max-width: 380px) {
  .hero .stat-chip { padding: 13px 8px; }
  .hero .stat-chip b { font-size: 19px; }
  .hero .stat-chip span:not(.live) { font-size: 10.5px; }
}

/* The English primary reads "Free consultation on WhatsApp": 319px of label,
   icon and padding in a 294px column, so it broke over two lines while the
   ghost beside it stayed on one. Widening the row does nothing, the copy column
   is what caps it at 600. So the row stops splitting itself in half: the
   primary takes the width its own label needs and the ghost takes the rest,
   which holds for any label in either language and keeps both blocks on the
   same two edges as the figure rule under them. */
@media (min-width: 1200px) {
  /* the remainder goes to the primary, not the ghost: sizing both to content
     left the Hebrew secondary 76px wider than the button it is secondary to */
  .hero-ctas { grid-template-columns: minmax(200px, 1fr) minmax(0, auto); }
}

/* ---- v5.36: the gallery's arrows point the way the gallery moves ----------
   Eli, on a phone in Hebrew: "the before and after scrolls left to right, it
   all has to be reversed in Hebrew, everything should match".

   Measured, both languages, 390px:

     he   PREV at x=202 points LEFT   NEXT at x=142 points RIGHT
     en   PREV at x=142 points LEFT   NEXT at x=202 points RIGHT

   English is right. Hebrew has the two buttons pointing at each other: the row
   is a flex row, so `direction: rtl` puts prev on the right and next on the
   left, but the chevrons inside them are drawn in the markup and do not know
   that. So the button on the left, the one that moves you forward, was drawing
   a right pointing arrow, and the one on the right was drawing a left one.

   The arc itself, the drag, the wheel, the keyboard and the dot order were all
   already mirrored. This was the one piece still facing the other way. */
[dir="rtl"] .ba3d-arrow svg { transform: scaleX(-1); }