/* =========================================================================
   ALAIN SHAB M.D. · ADVANCED VEIN CLINIC · BEIRUT   —   v2
   Built on the Salvato scroll model, reproduced in vanilla.
   Their stack: jQuery + 11 GSAP plugins + Lenis ≈ 300 KB.  Ours: ~9 KB.
   Spec: ../SALVATO_MOTION_SPEC.md
   ========================================================================= */

:root{
  --paper:#F6F5F9;
  --paper-2:#EFEEF5;
  --card:#FFFFFF;

  --ink:#171827;
  --body:#474A63;
  --muted:#5F6380;
  --faint:#8A8DA6;

  --peri:#4E5288;
  --peri-deep:#353963;
  --peri-mid:#7C80A6;
  --peri-lite:#A9ACC6;
  --mist:#C9CBDE;
  --wash:#E9EAF3;

  --gold:#A9741A;
  --wa:#25D366;
  --line:rgba(23,24,39,.10);
  --line-2:rgba(23,24,39,.055);

  --glass:rgba(255,255,255,.74);
  --glass-hi:rgba(255,255,255,.92);
  --glass-line:rgba(255,255,255,.9);
  --blur:saturate(180%) blur(20px);

  --sh-1:0 1px 2px rgba(23,24,39,.05),0 2px 6px rgba(23,24,39,.04);
  --sh-2:0 2px 4px rgba(23,24,39,.05),0 10px 24px rgba(53,57,99,.08);
  --sh-3:0 4px 8px rgba(23,24,39,.05),0 22px 52px rgba(53,57,99,.13);
  --sh-lift:0 10px 20px rgba(23,24,39,.06),0 34px 74px rgba(53,57,99,.18);

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ar:'IBM Plex Sans Arabic','Noto Sans Arabic','Geeza Pro',system-ui,sans-serif;

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --wrap:1180px;
  --pad:clamp(84px,13vh,150px);

  /* their two eases */
  --e-out:cubic-bezier(.22,1,.36,1);          /* power1/2.out */
  --e-back:cubic-bezier(.34,1.56,.64,1);      /* back.out(1) */
  --e-ui:cubic-bezier(.45,.05,.55,.95);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.65;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--peri);outline-offset:3px;border-radius:4px}
::selection{background:var(--peri);color:#fff}

/* ============================== TYPE ============================== */
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:500;letter-spacing:-.022em;line-height:1.08}

.claim{
  font-family:var(--serif);font-weight:400;letter-spacing:-.026em;font-optical-sizing:auto;
  font-size:clamp(41px,7vw,80px);line-height:1.02;color:var(--ink);
}
.claim em{font-style:italic;color:var(--peri)}

h2.sec{
  font-family:var(--serif);font-weight:400;letter-spacing:-.019em;font-optical-sizing:auto;
  font-size:clamp(32px,5vw,56px);line-height:1.05;
}
h2.sec em{font-style:italic;color:var(--peri)}
h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.018em;line-height:1.24}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--peri);margin:0 0 20px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--peri-lite);flex:none}
.eyebrow.mid{justify-content:center}
.eyebrow.mid::after{content:"";width:22px;height:1px;background:var(--peri-lite);flex:none}

.lede{font-size:clamp(17px,1.7vw,19.5px);line-height:1.6;color:var(--body);max-width:52ch}
.tiny{font-size:12.5px;line-height:1.58;letter-spacing:.008em;color:var(--faint)}
.mid{text-align:center;margin-inline:auto}

/* ============================== LAYOUT ============================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
section,header,footer{overflow-x:clip}
section{position:relative}
.sec-pad{padding-block:var(--pad)}

/* ============================== MOTION KIT ==============================
   1 · word-rise    2 · line-rise    3 · droplet morph
   4 · scrubbed marquee   5 · traveller   6 · plain reveal
   ====================================================================== */

/* 1 · word-rise — their signature. words climb out of their own line box. */
.wr{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.wr>i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%) rotate(5deg);opacity:0;
  transition:transform .95s var(--e-out),opacity .95s var(--e-out);
  transition-delay:calc(var(--i,0) * .085s);
}
.in .wr>i,.wr.in>i{transform:none;opacity:1}

/* 2 · line-rise — for sub-lines and blocks, with the overshoot */
.lr{opacity:0;transform:translateY(34px);
  transition:opacity .85s var(--e-out),transform .95s var(--e-out)}
.lr.in{opacity:1;transform:none}
.lr[data-d="1"].in{transition-delay:.12s}
.lr[data-d="2"].in{transition-delay:.24s}
.lr[data-d="3"].in{transition-delay:.36s}
.lr[data-d="4"].in{transition-delay:.48s}
.lr[data-d="5"].in{transition-delay:.60s}

/* 6 · plain reveal */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"].in{transition-delay:.1s}
.rv[data-d="2"].in{transition-delay:.2s}
.rv[data-d="3"].in{transition-delay:.3s}
.rv[data-d="4"].in{transition-delay:.4s}
html:not(.js) .wr>i,html:not(.js) .lr,html:not(.js) .rv{opacity:1;transform:none}

/* 3 · THE DROPLET — a video panel that morphs its own corners as you scroll.
      Salvato: 20 / 120 / 20 / 120 on desktop, 15 / 80 / 15 / 80 on mobile. */
.drop{
  position:relative;overflow:hidden;background:var(--paper-2);
  --k:calc(var(--p,0));
  border-radius:
    calc(14px + 8px * var(--k))
    calc(14px + 116px * var(--k))
    calc(14px + 8px * var(--k))
    calc(14px + 116px * var(--k));
  box-shadow:var(--sh-3);
  transform:translateZ(0);
}
.drop.flip{
  border-radius:
    calc(14px + 116px * var(--k))
    calc(14px + 8px * var(--k))
    calc(14px + 116px * var(--k))
    calc(14px + 8px * var(--k));
}
.drop>video,.drop>img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.06 - .06 * var(--k)));
  transition:transform .1s linear;
}
@media(min-width:900px){
  .drop{
    border-radius:
      calc(16px + 6px * var(--k))
      calc(16px + 108px * var(--k))
      calc(16px + 6px * var(--k))
      calc(16px + 108px * var(--k));
  }
  .drop.flip{
    border-radius:
      calc(16px + 108px * var(--k))
      calc(16px + 6px * var(--k))
      calc(16px + 108px * var(--k))
      calc(16px + 6px * var(--k));
  }
}

/* the second plane that parallaxes against it — their "gota" */
.gota{
  position:absolute;z-index:2;overflow:hidden;border-radius:50%;
  box-shadow:var(--sh-lift);border:5px solid var(--paper);
  transform:translate(calc(-38px * var(--p,0)), calc(38px * var(--p,0)));
}
.gota img,.gota video{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){.gota{transform:translate(calc(-18px * var(--p,0)),0)}}

/* the generated 3D forms — cut to alpha, floating free, never in a box */
.form{
  position:absolute;pointer-events:none;z-index:1;
  filter:drop-shadow(0 26px 48px rgba(78,82,136,.22));
  animation:formfloat 11s var(--e-ui) infinite;
}
.form.b{animation-duration:13s;animation-delay:-4s}
@keyframes formfloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(-2.5deg)}
}
.results .form-drop{right:-40px;bottom:-24px;width:132px;opacity:.7}
.why .form-flow{right:-34px;top:-40px;width:186px;opacity:.9}
@media(max-width:979px){
  .results .form-drop{right:-40px;bottom:-40px;width:104px;opacity:.65}
  .why .form-flow{right:-38px;top:-26px;width:112px;opacity:.7}
}
@media(prefers-reduced-motion:reduce){.form{animation:none}}

/* the loose gradient arc — pure decoration, leads the eye */
.arc{position:absolute;pointer-events:none;z-index:0;overflow:visible}
.arc path{
  fill:none;stroke:url(#arcg);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:var(--L,900);stroke-dashoffset:calc(var(--L,900) * (1 - var(--p,0)));
  transition:stroke-dashoffset 1.4s var(--e-out);
}

/* 4 · SCRUBBED MARQUEE — driven by scroll position, never auto-playing */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-in{display:flex;gap:14px;width:max-content;will-change:transform}
.mq.rtl .mq-in{transform:translate3d(calc(-42vw + 42vw * var(--p,0)),0,0)}
.mq .mq-in{transform:translate3d(calc(-42vw * var(--p,0)),0,0)}

/* 5 · TRAVELLER — sticky pin plus a scroll-linked drift */
.trav{position:sticky;top:calc(50vh - 150px)}

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 28px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  transition:background-color .24s var(--e-ui),color .24s var(--e-ui),
             box-shadow .3s var(--e-ui),border-color .24s var(--e-ui);
}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--peri);color:#fff;
  box-shadow:0 2px 4px rgba(53,57,99,.18),0 12px 30px rgba(78,82,136,.32)}
.btn-primary:hover{background:var(--peri-deep);box-shadow:0 3px 6px rgba(53,57,99,.24),0 18px 44px rgba(78,82,136,.44)}
.btn-wa{background:var(--wa);color:#0A2E19;box-shadow:0 2px 4px rgba(20,120,60,.16),0 10px 26px rgba(37,211,102,.20)}
.btn-wa:hover{background:#1EBE5B;box-shadow:0 3px 6px rgba(20,120,60,.26),0 18px 44px rgba(37,211,102,.42)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--peri-lite);background:rgba(255,255,255,.6)}

/* outlined serif chip — their treatment pill */
.chip{
  display:inline-flex;align-items:center;gap:9px;
  min-height:54px;padding:0 24px;border-radius:999px;
  border:1px solid var(--peri-lite);background:transparent;
  font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.005em;color:var(--ink);
  transition:background-color .3s var(--e-ui),border-color .3s var(--e-ui),
             transform .4s var(--e-out),box-shadow .4s var(--e-out);
}
.chip:hover,.chip[aria-expanded="true"]{
  background:var(--card);border-color:var(--peri);
  transform:translateY(-2px);box-shadow:var(--sh-2);
}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--peri);flex:none;font-style:normal;
  transition:transform .3s var(--e-ui)}
.chip[aria-expanded="true"] i{transform:scale(2.2)}

/* ============================== HEADER ============================== */
.hd{position:fixed;inset:0 0 auto;z-index:70;transition:transform .8s var(--e-out),background-color .3s,box-shadow .3s}
.hd.away{transform:translateY(-120%)}
.hd.stuck{background:var(--glass-hi);backdrop-filter:var(--blur) brightness(1.02);
  -webkit-backdrop-filter:var(--blur) brightness(1.02);box-shadow:none}
.hd.stuck::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,245,249,.7),rgba(246,245,249,0));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;min-height:44px}
.brand img{width:26px;height:auto}
.brand b{font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand span span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.05em;color:var(--muted);text-transform:none}
.hd-nav,.hd-cta{display:none}
@media(min-width:940px){
  .hd-nav{display:flex;gap:28px;align-items:center}
  .hd-nav a{font-size:14.5px;font-weight:500;color:var(--muted);transition:color .2s}
  .hd-nav a:hover{color:var(--ink)}
  .hd-cta{display:inline-flex;min-height:48px;padding:0 22px;font-size:14.5px}
}

/* ============================== HERO ============================== */
.hero{position:relative;padding-top:120px;padding-bottom:40px;overflow:hidden}
.hero-bg{position:absolute;inset:-15% -25% auto;height:135%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 38% at 80% 6%,rgba(169,172,198,.34),transparent 66%),
    radial-gradient(48% 42% at 8% 86%,rgba(201,203,222,.40),transparent 70%);}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;gap:38px}
@media(min-width:980px){
  .hero{padding-top:158px;padding-bottom:70px}
  .hero-grid{grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
}
.hero-copy .claim{margin-bottom:22px;max-width:14ch}
.hero-copy .lede{max-width:44ch;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:28px}
.hero-cta .btn{flex:1 1 190px;min-width:0}
@media(max-width:520px){.hero-cta{flex-direction:column}.hero-cta .btn{flex:0 0 auto;width:100%}}

.creds{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cred{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--sh-1);
  font-size:12.5px;font-weight:500;color:var(--body);white-space:nowrap}
.cred svg{width:14px;height:14px;color:var(--peri);flex:none}

/* hero stage: the droplet + the round gota + the glass rating */
.stage{position:relative;display:flex;justify-content:center;padding-block:6px}
.stage .drop{width:min(360px,86vw);aspect-ratio:3/4}
.stage .gota{width:124px;height:124px;left:2%;bottom:-4%}
@media(min-width:980px){
  .stage .drop{width:100%;max-width:430px;aspect-ratio:4/5}
  .stage .gota{width:172px;height:172px;left:-2%;bottom:2%}
}
.grate{
  position:absolute;z-index:4;right:-4%;top:6%;
  display:flex;align-items:center;gap:12px;padding:12px 17px;border-radius:var(--r);
  background:var(--glass-hi);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--sh-3);min-height:56px;
  transition:transform .3s var(--e-out),box-shadow .3s var(--e-out);
}
.grate:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.grate .g{width:23px;height:23px;flex:none}
.grate .n{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink)}
.grate .st{display:flex;gap:1.5px;margin-bottom:2px}
.grate .st svg{width:11px;height:11px;color:var(--gold)}
.grate .sub{font-size:11px;color:var(--muted);white-space:nowrap;line-height:1.3}
.grate .sub u{text-decoration:none;border-bottom:1px solid var(--mist)}
@media(max-width:979px){.grate{right:auto;left:50%;transform:translateX(-50%);top:auto;bottom:-26px}
  .grate:hover{transform:translateX(-50%) translateY(-3px)}}

/* ============================== IS THIS YOU ============================== */
.qs{display:flex;flex-wrap:wrap;gap:11px;margin-top:38px}
.qwrap{position:relative}
.qans{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--e-out),margin .55s var(--e-out);
  margin-top:0;
}
.qans.open{grid-template-rows:1fr;margin-top:20px}
.qans>div{overflow:hidden;min-height:0}
.qcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 26px 28px;box-shadow:var(--sh-2);max-width:62ch;
}
.qcard p{margin:0 0 12px;font-size:16.5px;line-height:1.62;color:var(--body)}
.qcard p:last-child{margin-bottom:0}
.qcard b{color:var(--ink);font-weight:600}
.qcard .sig{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.qcard .sig img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 18%}
.qcard .sig span{font-size:12.5px;color:var(--muted)}
.qcard .sig b{display:block;font-size:13px;color:var(--ink)}

/* ============================== SPLIT SECTIONS ============================== */
.split{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:70px}
  .split.swap .sp-media{order:-1}}
.sp-media{position:relative;display:flex;justify-content:center}
.sp-media .drop{width:min(400px,88vw);aspect-ratio:4/5}
.sp-media .gota{width:126px;height:126px;right:-4%;top:8%}
@media(min-width:900px){.sp-media .drop{width:100%;max-width:440px}.sp-media .gota{width:150px;height:150px}}

/* ============================== TREATMENTS ============================== */
.tr-list{display:flex;flex-wrap:wrap;gap:11px;margin-top:36px}
.tr-body{max-width:60ch;margin-top:22px}
.tr-body .qcard{max-width:none}
.tr-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tr-meta span{padding:6px 13px;border-radius:999px;background:var(--wash);
  font-size:12px;font-weight:500;color:var(--peri-deep)}

/* ============================== PROOF MARQUEE ============================== */
.rev{
  flex:none;width:min(340px,80vw);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:22px 21px;
}
.rev .st{display:flex;gap:2px;margin-bottom:11px}
.rev .st svg{width:13px;height:13px;color:var(--gold)}
.rev p{margin:0 0 15px;font-size:14.5px;line-height:1.58;color:var(--body)}
.rev mark{background:none;color:var(--ink);font-weight:600;box-shadow:inset 0 -.5em 0 rgba(169,172,198,.34)}
.rev .who{display:flex;align-items:center;gap:9px;padding-top:13px;border-top:1px solid var(--line-2)}
.rev .dot{width:30px;height:30px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--peri-mid),var(--peri));color:#fff;
  font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.rev .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
.rev .loc{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);line-height:1.25}
.rev .loc svg{width:10px;height:10px;color:var(--peri-mid);flex:none}

/* ============================== BEFORE / AFTER ============================== */
.ba-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-3);background:var(--paper-2)}
.ba-tag{position:absolute;left:20px;top:20px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--glass-hi);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--sh-1);
  font-size:11.5px;font-weight:600;color:var(--peri-deep);letter-spacing:.03em}
.ba-tag i{width:6px;height:6px;border-radius:50%;background:var(--peri);display:block}
.note{margin-top:18px;padding:14px 17px;border-radius:var(--r-sm);
  background:var(--paper-2);border:1px solid var(--line-2);font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ============================== FAQ ============================== */
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:24px 2px;cursor:pointer;list-style:none;min-height:44px;
  font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.4;
  transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--peri)}
.faq .chev{width:28px;height:28px;flex:none;border-radius:50%;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  transition:background-color .25s,transform .4s var(--e-out)}
.faq .chev svg{width:12px;height:12px;color:var(--peri)}
.faq details[open] .chev{background:var(--peri);transform:rotate(45deg)}
.faq details[open] .chev svg{color:#fff}
.faq .ans{padding:0 2px 26px;max-width:62ch}
.faq .ans p{margin:0 0 12px;font-size:16px;line-height:1.65}
.faq .ans p:last-child{margin-bottom:0}

/* ============================== VISIT ============================== */
.loc-grid{display:grid;gap:16px;margin-top:38px}
@media(min-width:920px){.loc-grid{grid-template-columns:1.15fr .85fr}}
.mapcard{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:340px;
  border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--paper-2)}
.mapcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.34) contrast(1.02)}
.mapcard .pin{position:absolute;left:16px;top:16px;z-index:2;max-width:calc(100% - 32px);
  padding:14px 17px;border-radius:var(--r);
  background:var(--glass-hi);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--sh-2)}
.mapcard .pin b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.mapcard .pin span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block}
.hours{border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-1);padding:28px 26px;display:flex;flex-direction:column}
.hours h3{margin-bottom:16px}
.hours dl{margin:0 0 20px;display:grid;grid-template-columns:1fr auto;gap:9px 16px;font-size:14.5px}
.hours dt{color:var(--muted);margin:0}
.hours dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
.hours dd.shut{color:var(--faint);font-weight:400}
.hours .now{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:7px 13px;border-radius:999px;background:var(--wash);
  font-size:12px;font-weight:600;color:var(--peri-deep);margin-bottom:18px}
.hours .now i{width:6px;height:6px;border-radius:50%;background:#3F8F63;display:block}
.hours .now.shut i{background:var(--faint)}
.hours .btn{margin-top:auto;width:100%}

/* ============================== CLOSE ============================== */
.close{position:relative;background:var(--peri-deep);color:#fff;overflow:hidden}
.close::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 58% at 84% 6%,rgba(169,172,198,.30),transparent 70%),
             radial-gradient(42% 52% at 8% 94%,rgba(124,128,166,.32),transparent 70%)}
.close .wrap{position:relative;z-index:2;text-align:center}
.close h2{color:#fff;margin-bottom:16px}
.close h2 em{color:var(--mist)}
.close p{color:rgba(255,255,255,.8);max-width:46ch;margin:0 auto 32px;font-size:17.5px}
.close .btn-primary{background:#fff;color:var(--peri-deep);box-shadow:0 12px 36px rgba(0,0,0,.28)}
.close .btn-primary:hover{background:var(--wash)}
.close .btn-ghost{color:#fff;border-color:rgba(255,255,255,.36)}
.close .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.62)}
.close-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.close-cta .btn{min-width:220px}
@media(max-width:520px){.close-cta{flex-direction:column}.close-cta .btn{width:100%;min-width:0}}
.close .tiny{color:rgba(255,255,255,.5);margin-top:26px}

/* ============================== FOOTER ============================== */
.ft{background:var(--ink);color:rgba(255,255,255,.62);padding-block:54px 40px;font-size:13.5px}
.ft-top{display:grid;gap:28px;margin-bottom:34px}
@media(min-width:800px){.ft-top{grid-template-columns:1.3fr 1fr 1fr}}
.ft b{display:block;color:#fff;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:13px}
.ft a{color:rgba(255,255,255,.62);transition:color .2s;display:inline-block;padding:3px 0}
.ft a:hover{color:#fff}
.ft ul{list-style:none;margin:0;padding:0}
.ft .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.ft .fbrand img{width:26px}
.ft .fbrand span{color:#fff;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ft-bot{padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.42);line-height:1.6}

/* ============================== WHATSAPP DOCK ============================== */
.wa-dock{
  position:fixed;right:18px;bottom:18px;z-index:80;
  display:flex;align-items:center;gap:10px;
  padding:12px 20px 12px 14px;border-radius:999px;
  background:var(--wa);color:#0A2E19;font-size:15px;font-weight:600;
  box-shadow:0 6px 18px rgba(20,120,60,.28),0 18px 46px rgba(37,211,102,.34);
  transform:translateY(140%) scale(.9);opacity:0;
  transition:transform .7s var(--e-back),opacity .5s var(--e-ui),background-color .2s;
}
.wa-dock.up{transform:none;opacity:1}
.wa-dock:hover{background:#1EBE5B}
.wa-dock svg{width:24px;height:24px;flex:none}
.wa-dock span{white-space:nowrap}
@media(max-width:640px){
  .wa-dock{left:14px;right:14px;bottom:14px;justify-content:center;padding:15px 20px;
    padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  body{padding-bottom:82px}
}

/* ============================== GRAIN ============================== */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:gd 8s steps(6) infinite}
@keyframes gd{0%{transform:translate(0,0)}17%{transform:translate(-4%,-3%)}33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)}67%{transform:translate(4%,3%)}83%{transform:translate(-5%,-2%)}100%{transform:translate(0,0)}}

/* ============================== REDUCED MOTION ============================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .wr>i,.lr,.rv{opacity:1!important;transform:none!important}
  .drop{--k:1}
  .mq .mq-in,.mq.rtl .mq-in{transform:none!important}
  .grain{animation:none}
  .wa-dock{transform:none;opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUST HERO — the v1 doctor card, rebuilt on the v2 motion system
   ═══════════════════════════════════════════════════════════════════════ */
.drcard{
  position:relative;z-index:3;width:min(330px,84vw);
  border-radius:var(--r-xl);
  background:linear-gradient(168deg,#FFF 0%,#F8F8FC 52%,#F0F1F7 100%);
  border:1px solid var(--glass-line);box-shadow:var(--sh-lift);
  padding:22px 22px 24px;text-align:center;
}
.drcard::before{content:"";position:absolute;inset:11px;border-radius:calc(var(--r-xl) - 9px);
  border:1px dashed rgba(78,82,136,.26);pointer-events:none}
.dr-shot{position:relative;height:230px;margin:2px 0 16px;display:flex;align-items:flex-end;justify-content:center}
.dr-shot::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:186px;height:50px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(78,82,136,.20),transparent 72%)}
.dr-shot img{position:relative;z-index:1;height:100%;width:auto;object-fit:contain}
.drcard h3{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:-.01em;margin-bottom:5px}
.drcard .role{font-size:13px;font-weight:500;color:var(--peri);letter-spacing:.04em;margin-bottom:14px}
.drcard .where{display:flex;flex-direction:column;gap:5px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--muted)}
.drcard .where b{color:var(--ink);font-weight:600}

.tcard{z-index:4;width:250px;padding:15px 16px 13px;border-radius:var(--r);
  background:var(--glass-hi);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--sh-3)}
.tcard p{margin:0 0 11px;font-size:13.5px;line-height:1.48;color:var(--body)}
.tcard mark{background:none;color:var(--ink);font-weight:600;box-shadow:inset 0 -.5em 0 rgba(169,172,198,.34)}
.tcard .who{display:flex;align-items:center;gap:8px}
.tcard .dot{width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--peri-mid),var(--peri));color:#fff;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.tcard .nm{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.22}
.tcard .loc{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);line-height:1.22}
.tcard .loc svg{width:10px;height:10px;flex:none;color:var(--peri-mid)}

.stage2{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;justify-content:center;padding-block:6px}
.floats{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.floats .grate,.floats .tcard{width:min(340px,100%)}
.floats .grate{position:static;transform:none}
@media(min-width:980px){
  .stage2{min-height:600px}
  .floats{display:contents}
  .floats .grate{position:absolute;width:auto;top:-2%;right:-96px}
  .floats .tcard{position:absolute;width:232px}
  .floats .tcard.t1{right:-118px;top:30%}
  .floats .tcard.t2{right:-84px;bottom:-4%}
  .flt{animation:flt 8s var(--e-ui) infinite}
  .flt.d1{animation-duration:9.5s;animation-delay:-2.6s}
  .flt.d2{animation-duration:10.5s;animation-delay:-5s}
}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── the trust band ─────────────────────────────────────────────────── */
.band{border-block:1px solid var(--line-2);background:var(--paper-2)}
.band-in{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media(min-width:820px){.band-in{grid-template-columns:repeat(4,1fr)}}
.stat{padding:30px 18px;text-align:center;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
@media(min-width:820px){.stat{border-bottom:0}.stat:last-child{border-right:0}}
@media(max-width:819px){.stat:nth-child(2n){border-right:0}.stat:nth-child(n+3){border-bottom:0}}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,54px);
  line-height:1;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px}
.stat b em{font-style:normal;color:var(--peri);font-size:.6em}
.stat span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;max-width:20ch;margin-inline:auto}

/* ═══════════════════════════════════════════════════════════════════════
   SYMPTOM CARDS — animated icon, not a flat chip
   ═══════════════════════════════════════════════════════════════════════ */
.sym-grid{display:grid;gap:12px;margin-top:40px}
@media(min-width:600px){.sym-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.sym-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sym{
  position:relative;width:100%;text-align:left;overflow:hidden;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-1);padding:22px 20px 20px;
  transition:border-color .3s var(--e-ui),box-shadow .4s var(--e-out),transform .4s var(--e-out);
}
.sym::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(169,172,198,.30),transparent 62%);
  transition:opacity .4s var(--e-ui)}
.sym:hover,.sym:focus-visible{border-color:var(--peri-lite);box-shadow:var(--sh-3);transform:translateY(-4px)}
.sym:hover::after,.sym[aria-expanded="true"]::after{opacity:1}
.sym[aria-expanded="true"]{border-color:var(--peri);box-shadow:var(--sh-3);transform:none}
.sym-ic{position:relative;width:56px;height:56px;border-radius:17px;background:var(--wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:background-color .35s var(--e-ui)}
.sym:hover .sym-ic,.sym[aria-expanded="true"] .sym-ic{background:var(--peri)}
.sym-ic svg{width:30px;height:30px;overflow:visible}
.sym-ic svg *{stroke:var(--peri);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s var(--e-ui)}
.sym:hover .sym-ic svg *,.sym[aria-expanded="true"] .sym-ic svg *{stroke:#fff}
.sym h3{font-size:16.5px;line-height:1.3;margin-bottom:0;letter-spacing:-.015em}
.sym .go{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--peri);
  letter-spacing:.05em;text-transform:uppercase}
.sym .go svg{width:12px;height:12px;transition:transform .3s var(--e-ui)}
.sym[aria-expanded="true"] .go svg{transform:rotate(45deg)}

/* the icon motion — runs on hover and while open */
.sym:hover .a1,.sym[aria-expanded="true"] .a1{animation:aPulse 2s var(--e-ui) infinite}
.sym:hover .a2,.sym[aria-expanded="true"] .a2{animation:aDrop 2.2s var(--e-ui) infinite}
.sym:hover .a3,.sym[aria-expanded="true"] .a3{animation:aRing 2.4s var(--e-out) infinite}
.sym:hover .a4,.sym[aria-expanded="true"] .a4{animation:aDash 2s linear infinite}
@keyframes aPulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes aDrop{0%{transform:translateY(-4px);opacity:0}30%,70%{opacity:1}100%{transform:translateY(5px);opacity:0}}
@keyframes aRing{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.25);opacity:0}}
@keyframes aDash{to{stroke-dashoffset:-24}}
.sym-ic svg .a1,.sym-ic svg .a3{transform-origin:center}
.a4{stroke-dasharray:6 6}

/* the before/after sits in the droplet like every other visual */
.drop.ba{width:min(420px,88vw);aspect-ratio:4/5}
.drop.ba img{object-position:center 46%}
@media(min-width:900px){.drop.ba{width:100%;max-width:460px}}

/* ═══════════════════════════════════════════════════════════════════════
   THE PROCEDURE — one illustration, five states, driven by the scroll
   ═══════════════════════════════════════════════════════════════════════ */
.proc-grid{display:grid;gap:0;margin-top:46px}
.proc-stage{position:sticky;top:78px;align-self:start;z-index:1;padding-block:6px 16px}
.pframe{
  position:relative;border-radius:var(--r-xl);overflow:hidden;padding:16px;
  background:linear-gradient(172deg,#FFF 0%,#F7F7FC 58%,#EFF0F7 100%);
  border:1px solid var(--line);box-shadow:var(--sh-2);
}
.pframe::before{content:"";position:absolute;inset:9px;border-radius:calc(var(--r-xl) - 7px);
  border:1px dashed rgba(78,82,136,.2);pointer-events:none}
.pframe svg{width:100%;height:auto;display:block}
.pcap{
  position:absolute;left:24px;bottom:22px;z-index:2;display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--peri);
}
.pcap i{width:5px;height:5px;border-radius:50%;background:var(--peri);display:block;flex:none}
.pdots{position:absolute;right:24px;bottom:22px;z-index:2;display:flex;gap:6px}
.pdots b{width:6px;height:6px;border-radius:50%;background:var(--mist);transition:background-color .4s,transform .4s var(--e-out)}
.proc[data-step="1"] .pdots b:nth-child(1),.proc[data-step="2"] .pdots b:nth-child(2),
.proc[data-step="3"] .pdots b:nth-child(3),.proc[data-step="4"] .pdots b:nth-child(4),
.proc[data-step="5"] .pdots b:nth-child(5){background:var(--peri);transform:scale(1.5)}

.proc-steps{list-style:none;margin:0;padding:0}
.pstep{position:relative;padding:26px 0 26px 22px;border-top:1px solid var(--line-2);
  transition:opacity .5s var(--e-ui)}
.pstep:first-child{border-top:0}
.pstep::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;border-radius:2px;
  background:var(--peri);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--e-out)}
.pstep.on::before{transform:scaleY(1)}
.pstep .n{display:block;font-family:var(--serif);font-size:15px;color:var(--peri);
  letter-spacing:.06em;margin-bottom:7px;transition:color .4s}
.pstep h3{margin-bottom:8px;transition:color .4s}
.pstep p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body);max-width:42ch;transition:color .4s}
.pstep:not(.on) h3,.pstep:not(.on) p{color:var(--faint)}
.pstep:not(.on) .n{color:var(--mist)}
@media(min-width:900px){
  .proc-grid{grid-template-columns:1.06fr .94fr;column-gap:60px}
  .proc-stage{grid-column:1;top:96px}
  .proc-steps{grid-column:2}
}

/* ── the illustration ─────────────────────────────────────────────── */
.pi .skin{fill:none;stroke:rgba(78,82,136,.22);stroke-width:1.4;stroke-dasharray:5 7}
.pi .flesh{fill:rgba(169,172,198,.10)}
.pi .vein{fill:none;stroke:#9B6B8E;stroke-width:13;stroke-linecap:round;
  transition:stroke-width .7s var(--e-out),stroke .7s var(--e-out),opacity .7s var(--e-out)}
.pi .alt{fill:none;stroke:var(--peri-lite);stroke-width:7;stroke-linecap:round;
  transition:stroke-width .7s var(--e-out),stroke .7s var(--e-out)}
.pi .flow{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:15 24;opacity:0;
  transition:opacity .5s}
.pi .tool{fill:none;stroke:var(--peri-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pi .lbl{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--peri-deep);
  letter-spacing:.05em;opacity:0;transition:opacity .5s var(--e-ui)}
.pi .grp{opacity:0;transition:opacity .55s var(--e-ui),transform .7s var(--e-out)}

/* state 1 · the scan */
.proc[data-step="1"] .g-scan{opacity:1}
.proc[data-step="1"] .l-scan{opacity:1}
.proc[data-step="1"] .probe{animation:probeSweep 4.5s var(--e-ui) infinite}
@keyframes probeSweep{0%,100%{transform:translateX(-92px)}50%{transform:translateX(92px)}}
.proc[data-step="1"] .cone{animation:probeSweep 4.5s var(--e-ui) infinite}

/* state 2 · the injection */
.proc[data-step="2"] .g-needle{opacity:1}
.proc[data-step="2"] .l-inject{opacity:1}
.proc[data-step="2"] .needle{animation:needleIn 3.2s var(--e-ui) infinite}
@keyframes needleIn{0%,12%{transform:translate(26px,-30px);opacity:0}
  32%,72%{transform:translate(0,0);opacity:1}92%,100%{transform:translate(26px,-30px);opacity:0}}
.proc[data-step="2"] .fill{stroke-dasharray:300;stroke-dashoffset:300;animation:fillIn 3.2s var(--e-ui) infinite}
@keyframes fillIn{0%,28%{stroke-dashoffset:300;opacity:0}44%{opacity:.95}88%,100%{stroke-dashoffset:0;opacity:.95}}
.pi .fill{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;opacity:0}

/* state 3 · it closes */
.proc[data-step="3"] .vein{stroke-width:4;stroke:var(--peri-lite)}
.proc[data-step="3"] .l-close{opacity:1}
.proc[data-step="3"] .g-seal{opacity:1}

/* state 4 · the body absorbs it, blood reroutes */
.proc[data-step="4"] .vein{stroke-width:3;stroke:var(--peri-lite);opacity:.2}
.proc[data-step="4"] .alt{stroke-width:12;stroke:var(--peri-mid)}
.proc[data-step="4"] .flow-alt{opacity:.95;animation:flowRun 3s linear infinite}
.proc[data-step="4"] .l-route{opacity:1}
@keyframes flowRun{to{stroke-dashoffset:-78}}

/* state 5 · you walk out */
.proc[data-step="5"] .vein{stroke-width:2.4;stroke:var(--peri-lite);opacity:.12}
.proc[data-step="5"] .alt{stroke-width:12;stroke:var(--peri-mid)}
.proc[data-step="5"] .flow-alt{opacity:.95;animation:flowRun 3s linear infinite}
.proc[data-step="5"] .g-home{opacity:1}
.proc[data-step="5"] .l-home{opacity:1}

/* ═══════════════════════════════════════════════════════════════════════
   WATCH BANDS — real footage from his clinic, full bleed, breaking the read
   ═══════════════════════════════════════════════════════════════════════ */
.watch{
  position:relative;width:100vw;left:50%;margin-left:-50vw;
  height:clamp(300px,50vh,500px);overflow:hidden;background:#12131F;
}
.watch>video,.watch>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.watch>video{z-index:1}
.watch .scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(18,19,31,.30) 0%,rgba(18,19,31,.10) 38%,rgba(18,19,31,.86) 100%)}
.watch .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 clamp(20px,5vw,40px) clamp(28px,5vh,52px);
  max-width:calc(var(--wrap) + 80px);margin-inline:auto;
}
.watch .tagline{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.28);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.watch .tagline i{width:6px;height:6px;border-radius:50%;background:#FF5A5A;display:block;flex:none;
  animation:recblink 2s var(--e-ui) infinite}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.25}}
.watch h3{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(26px,3.6vw,44px);line-height:1.06;letter-spacing:-.018em;max-width:19ch;
}
.watch h3 em{font-style:italic;color:var(--mist)}

/* ═══════════════════════════════════════════════════════════════════════
   PHONE HERO — his face has to be on screen, not below a wall of text
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:979px){
  .hero{padding-top:98px;padding-bottom:32px}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{order:1;margin-bottom:14px}
  .hero-copy .claim{order:2;margin-bottom:22px}
  .stage,.stage2{order:3;margin-bottom:26px}
  .hero-cta{order:4;margin-bottom:20px}
  .hero-copy .lede{order:5;margin-bottom:22px;font-size:16.5px}
  .creds{order:6}
  .drcard{width:min(302px,86vw);padding:18px 18px 20px}
  .dr-shot{height:198px;margin-bottom:12px}
  .drcard h3{font-size:24px}
  .drcard .role{margin-bottom:11px}
}
@media(max-width:520px){
  .hero .claim{font-size:clamp(35px,10.4vw,46px)}
  .drcard{width:min(282px,82vw)}
  .dr-shot{height:182px}
  .floats .grate,.floats .tcard{width:min(320px,100%)}
}

/* ═══════════════════════════════════════════════════════════════════════
   PROGRESSIVE GROUND — nothing on this page is ever flat white
   ═══════════════════════════════════════════════════════════════════════ */
section{isolation:isolate}
.sec-pad::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(54% 46% at 90% 2%,rgba(169,172,198,.22),transparent 68%),
    radial-gradient(48% 42% at 2% 96%,rgba(201,203,222,.26),transparent 70%);
}
.sec-pad:nth-of-type(even)::before{
  background:
    radial-gradient(50% 44% at 4% 4%,rgba(169,172,198,.24),transparent 68%),
    radial-gradient(54% 48% at 96% 92%,rgba(124,128,166,.15),transparent 72%);
}
.close::before,.watch::before{display:none}

/* the ambient object layer — generated forms sitting behind the content */
.amb{
  position:absolute;pointer-events:none;z-index:-1;opacity:.26;
  filter:blur(.4px) drop-shadow(0 30px 50px rgba(78,82,136,.16));
  animation:formfloat 15s var(--e-ui) infinite;
}
.amb.r{right:-70px;top:-30px;width:186px}
.amb.l{left:-84px;bottom:-50px;width:164px;animation-delay:-6s}
@media(max-width:900px){
  /* apple-design §14 — never float a large moving object over content */
  .amb{display:none}
  .amb.r{right:-80px;top:-40px;width:200px}
  .amb.l{left:-90px;bottom:-50px;width:180px}
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER RAIL — she must always know where she is and what is left.
   Stripe/Apple pattern: named chapters + live active state + a hairline
   progress line living inside the bar, not floating over the page.
   ═══════════════════════════════════════════════════════════════════════ */
.rail{
  position:fixed;left:0;right:0;top:0;z-index:69;
  opacity:0;pointer-events:none;
  transition:transform .55s var(--e-out),opacity .4s var(--e-ui),filter .5s var(--e-out);
  background:var(--glass-hi);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:none;
}
.rail.up{transform:none;opacity:1;pointer-events:auto}
.rail-line{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--peri);
  transform:scaleX(var(--sp,0));transform-origin:left;transition:transform .12s linear}
.rail-in{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);min-height:56px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.rail-in::-webkit-scrollbar{display:none}
.rail a{
  position:relative;flex:none;display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;
  padding:6px 0;transition:color .3s var(--e-ui);
}
.rail a em{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--mist);
  transition:color .3s var(--e-ui)}
.rail a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--peri);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--e-out)}
.rail a.is-cur{color:var(--ink);font-weight:600}
.rail a.is-cur em{color:var(--peri)}
.rail a.is-cur::after{transform:scaleX(1)}
.rail a:hover{color:var(--ink)}
@media(max-width:860px){
  .rail-in{min-height:48px;gap:18px}
  .rail a{font-size:12.5px}
  .rail a em{display:none}
}

/* ── chapter opener: a number, a title, and a change of ground ───────── */
.chap{position:relative;padding-block:clamp(46px,7vh,76px) 0}
.chap-in{display:flex;align-items:baseline;gap:16px}
.chap .no{
  font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,44px);
  line-height:1;color:var(--peri-lite);letter-spacing:-.02em;flex:none;
}
.chap .ttl{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--peri);padding-bottom:.35em;
}
.chap .rule{flex:1;height:1px;background:var(--line);position:relative;top:-.4em;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-out) .15s}
.chap.in .rule{transform:scaleX(1)}

/* ═══════════════════════════════════════════════════════════════════════
   APPLE PASS — from the apple-design skill (Emil Kowalski / WWDC talks).
   Response, material weight, vibrancy, and the accessibility signals
   beyond reduced-motion. Applied as behaviour, not decoration.
   ═══════════════════════════════════════════════════════════════════════ */

/* §1 RESPONSE · feedback lives on the press, not the release. Waiting for
   click to show anything reads as dead. Instant, then the spring settles. */
.btn,.chip,.sym,.va,.grate,.rev,.wa-dock,.rail a,.faq summary{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:active,.wa-dock:active{transform:scale(.978);transition-duration:.06s}
.sym:active{transform:translateY(-2px) scale(.992);transition-duration:.06s}
.chip:active{transform:translateY(0) scale(.982);transition-duration:.06s}
.grate:active{transform:translateY(-1px) scale(.99);transition-duration:.06s}
.faq summary:active{opacity:.72;transition-duration:.06s}

/* §12 MATERIAL WEIGHT · bigger surfaces read as thicker. Chrome that spans
   the viewport gets more blur and a deeper shadow than a small chip. */
.hd.stuck,.rail{--blur:saturate(190%) blur(26px)}
.cred{--blur:saturate(160%) blur(12px)}
.grate,.tcard{--blur:saturate(180%) blur(20px)}

/* §12 VIBRANCY · flat grey text dies on a translucent surface. Over glass we
   lift contrast and weight slightly rather than colouring the foreground. */
.grate .sub,.cred,.tcard .loc,.tcard .nm{font-weight:500}
.grate .sub{color:var(--body)}
.cred{color:var(--ink);font-weight:520}

/* §12 MATERIALIZE · glass should arrive as a material, not fade in. Blur and
   scale move together so the surface reads as forming, not appearing. */
.rail{transform:translateY(-100%) scale(.985);filter:blur(6px)}
.rail.up{transform:translateY(0) scale(1);filter:blur(0);
  transition:transform .6s var(--e-out),opacity .4s var(--e-ui),filter .5s var(--e-out)}

/* §14 · reduced motion is only one of three signals. Honour the other two. */
@media(prefers-reduced-transparency:reduce){
  .hd.stuck,.rail,.grate,.tcard,.cred,.mapcard .pin,.ba-tag,.wa-dock{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card)}
  .hd.stuck::after{display:none}
}
@media(prefers-contrast:more){
  :root{--body:#2E3145;--muted:#3D4058;--line:rgba(23,24,39,.28);--line-2:rgba(23,24,39,.18)}
  .grate,.tcard,.cred,.rail,.hd.stuck{background:#fff;border-color:var(--line)}
  .chip{border-width:2px}
}

/* §14 · slow full-viewport oscillation sits in the vestibular danger band.
   Keep the drift, halve the amplitude, and let big movers go translucent. */
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes formfloat{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:1}
  50%{transform:translateY(-11px) rotate(-1.4deg);opacity:.9}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE DE-BOX PASS — apple-design §6 "simplicity, not minimalism" and §1
   "decide what not to build". Content was living inside 19 bordered,
   shadowed rectangles. Grouping is now done with space and type, the way
   Apple does it. Material is reserved for what actually floats: chrome,
   glass, media, and the things you can touch.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · symptom cards become content, not tiles ─────────────────────── */
.sym{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:22px 4px 20px;border-top:1px solid var(--line-2);
  transition:opacity .3s var(--e-ui),transform .45s var(--e-out);
}
.sym::after{display:none}
.sym:hover,.sym:focus-visible,.sym[aria-expanded="true"]{
  background:none;border-color:var(--line);box-shadow:none;transform:none;
}
.sym-ic{
  width:44px;height:44px;border-radius:0;background:none;margin-bottom:14px;
  justify-content:flex-start;
}
.sym-ic svg{width:34px;height:34px}
.sym:hover .sym-ic,.sym[aria-expanded="true"] .sym-ic{background:none}
.sym:hover .sym-ic svg *,.sym[aria-expanded="true"] .sym-ic svg *{stroke:var(--peri)}
.sym h3{font-size:19px;letter-spacing:-.02em}
.sym .go{
  border-top:0;padding-top:10px;margin-top:10px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--e-ui),transform .35s var(--e-out);
}
.sym:hover .go,.sym:focus-visible .go,.sym[aria-expanded="true"] .go{opacity:1;transform:none}
@media(max-width:599px){.sym .go{opacity:1;transform:none}}
.sym-grid{gap:0 clamp(24px,4vw,56px);margin-top:30px}

/* ── 2 · the answer is a passage, not a panel ────────────────────────── */
.qcard{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:4px 0 8px 22px;border-left:2px solid var(--peri);max-width:64ch;
}
.qcard p{font-size:17px;line-height:1.66}
.qcard .sig{border-top:0;padding-top:0;margin-top:16px}
.qans.open{margin-top:14px;margin-bottom:26px}

/* ── 3 · reviews lead with the sentence, not the container ───────────── */
.rev{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0 26px 0 0;
  width:min(390px,84vw);
}
.rev p{font-size:17px;line-height:1.55;color:var(--ink);letter-spacing:-.012em}
.rev mark{box-shadow:none;color:var(--peri);font-weight:600}
.rev .who{border-top:0;padding-top:0;margin-top:14px}
.rev .st svg{width:12px;height:12px}
.mq-in{gap:0}

/* ── 4 · the numbers need space, not dividing lines ──────────────────── */
.band{background:none;border-block:0}
.stat{border:0;padding:8px 18px 0}
.band-in{padding-block:clamp(26px,5vh,54px)}

/* ── 5 · the illustration sits on the page, unframed ─────────────────── */
.pframe{background:none;border:0;box-shadow:none;padding:0}
.pframe::before{display:none}
.pcap{left:2px;bottom:-4px}
.pdots{right:2px;bottom:-2px}

/* ── 6 · hours is a list, and a list does not need a card ────────────── */
.hours{background:none;border:0;border-radius:0;box-shadow:none;padding:30px 0 0}
@media(min-width:920px){.hours{padding:6px 0 0 28px}}

/* ── 7 · fine print is fine print ────────────────────────────────────── */
.fineprint{margin-top:20px;font-size:12.5px;line-height:1.6;color:var(--faint);max-width:56ch}

/* ── 8 · more air between sections, fewer things inside them ─────────── */
:root{--pad:clamp(96px,15vh,178px)}
.split{gap:52px}
@media(min-width:900px){.split{gap:clamp(70px,7vw,104px)}}

@media(max-width:599px){
  .sym{padding:17px 2px 15px}
  .sym-ic{width:32px;height:32px;margin-bottom:9px}
  .sym-ic svg{width:26px;height:26px}
  .sym h3{font-size:17.5px}
  .sym .go{margin-top:7px;padding-top:6px;font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE MINIMUM — trust · origin · proof · services · place. Nothing else.
   Image and type carry it. Text is down to the strict minimum.
   ═══════════════════════════════════════════════════════════════════════ */

/* where they flew in from — the strongest trust line he owns */
.places{list-style:none;margin:clamp(40px,6vh,72px) 0 0;padding:0;
  display:grid;gap:0;text-align:center}
@media(min-width:760px){.places{grid-template-columns:repeat(3,1fr)}}
.places li{padding:26px 16px;position:relative}
@media(min-width:760px){
  .places li+li::before{content:"";position:absolute;left:0;top:26%;bottom:26%;
    width:1px;background:var(--line-2)}
}
.places b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,4.4vw,50px);line-height:1.02;letter-spacing:-.024em;color:var(--ink)}
.places span{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.origins-note{margin:clamp(30px,5vh,52px) auto 0;text-align:center;max-width:44ch;
  font-size:14px;color:var(--muted)}

/* services — a list, an icon, one line each. No panels, no disclosure. */
.svc-list{list-style:none;margin:clamp(40px,6vh,72px) 0 0;padding:0;
  display:grid;gap:2px clamp(30px,4vw,64px)}
@media(min-width:640px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.svc-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc-list .svc{padding:28px 0 26px;border-top:1px solid var(--line-2);
  background:none;border-left:0;border-right:0;border-bottom:0;border-radius:0;box-shadow:none}
.svc-list .svc-ic{width:38px;height:38px;background:none;border-radius:0;
  display:flex;align-items:center;justify-content:flex-start;margin-bottom:14px}
.svc-list .svc-ic svg{width:30px;height:30px}
.svc-list .svc-ic svg *{stroke:var(--peri);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.svc-list h3{font-size:19px;letter-spacing:-.02em;margin-bottom:7px}
.svc-list p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:30ch}

/* language toggle — one control, current state obvious */
.lang{display:inline-flex;align-items:center;gap:2px;flex:none;
  border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.lang b,.lang a{display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:32px;padding:0 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;transition:background-color .25s var(--e-ui),color .25s var(--e-ui)}
.lang b{background:var(--peri);color:#fff}
.lang a{color:var(--muted);font-family:var(--ar)}
.lang a:hover{color:var(--ink);background:var(--wash)}
[dir="rtl"] .lang b{background:none;color:var(--muted);font-family:var(--sans)}
[dir="rtl"] .lang a{background:var(--peri);color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   ARABIC — the same render, positioned for Arabic. Logical properties do
   most of it; these are the places where direction actually matters.
   ═══════════════════════════════════════════════════════════════════════ */
[dir="rtl"]{--serif:'IBM Plex Sans Arabic',system-ui,sans-serif;--sans:'IBM Plex Sans Arabic',system-ui,sans-serif}
[dir="rtl"] .claim,[dir="rtl"] h2.sec{font-weight:600;letter-spacing:normal;line-height:1.28}
[dir="rtl"] .claim em,[dir="rtl"] h2.sec em{font-style:normal;font-weight:600}
[dir="rtl"] .eyebrow{letter-spacing:normal;font-weight:600}
[dir="rtl"] .eyebrow::before{margin-inline-end:0}
[dir="rtl"] .lede,[dir="rtl"] .svc-list p,[dir="rtl"] .rev p{letter-spacing:normal;line-height:1.8}
[dir="rtl"] .places b{letter-spacing:normal;font-weight:600}
[dir="rtl"] .places span{letter-spacing:normal;text-transform:none}
[dir="rtl"] .stat b{letter-spacing:normal;font-weight:600}
[dir="rtl"] .stat b em{font-style:normal}
[dir="rtl"] .qcard{border-left:0;border-right:2px solid var(--peri);padding-inline:22px 0}
[dir="rtl"] .svc-list .svc-ic,[dir="rtl"] .sym-ic{justify-content:flex-start}
[dir="rtl"] .pstep{padding-inline:22px 0}
[dir="rtl"] .pstep::before{left:auto;right:0}
[dir="rtl"] .hours dd{text-align:left}
[dir="rtl"] .mapcard .pin{left:auto;right:16px}
[dir="rtl"] .ba-tag{left:auto;right:20px}
[dir="rtl"] .wa-dock{right:auto;left:18px}
@media(max-width:640px){[dir="rtl"] .wa-dock{left:14px;right:14px}}
[dir="rtl"] .rail a::after{transform-origin:right}
[dir="rtl"] .rail-line{transform-origin:right}
/* the number, the phone and the clinic name stay left-to-right inside Arabic */
[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* numerals must not be reordered by the bidi algorithm */
[dir="rtl"] .stat b,[dir="rtl"] .places b,[dir="rtl"] .grate .n,
[dir="rtl"] .hours dd,[dir="rtl"] .brand b{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .stat,[dir="rtl"] .places li{text-align:center}
[dir="rtl"] .hours dd{text-align:left}

/* ═══════════════════════════════════════════════════════════════════════
   CRAFT + MOTION PASS — Office/knowledge/UIUX_MOTION_2026
   Law 3 hand-crafted scale · Law 4 proximity · Law 5 stagger 40-80ms and
   fade never alone · Law 7 elevation ladder · Law 10 GPU-only properties.
   Easing anchored on Zajno's production curve, one curve does the work.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* one easing family. an award studio's CSS layer is smaller than ours, not bigger */
  --e-out:cubic-bezier(.22,1,.36,1);        /* entrances, long travel */
  --e-ui:cubic-bezier(.55,0,.45,1);          /* zajno's production curve, state change */
  --e-back:cubic-bezier(.34,1.56,.64,1);     /* momentum only, never an entrance */

  /* a five-value duration scale, two workhorses */
  --t-micro:.09s; --t-ui:.3s; --t-mid:.55s; --t-rev:.72s; --t-show:1.15s;

  /* elevation ladder — three rungs, most surfaces sit flat on the page */
  --e1:0 1px 2px rgba(23,24,39,.05);
  --e2:0 2px 6px rgba(23,24,39,.05),0 12px 28px rgba(53,57,99,.09);
  --e3:0 6px 14px rgba(23,24,39,.06),0 30px 66px rgba(53,57,99,.16);

  /* Law 3 · hand-crafted, 25% jumps, no fractional pixels */
  --fs-1:13px; --fs-2:15px; --fs-3:17px; --fs-4:21px; --fs-5:27px;
}
.sh-1,.cred,.rev,.svc{box-shadow:var(--e1)}
.mapcard,.grate,.tcard{box-shadow:var(--e2)}
.drcard,.wa-dock,.drop{box-shadow:var(--e3)}

/* Law 5 · stagger tightens to the 40-80ms band. nothing arrives together. */
.wr>i{transition-delay:calc(var(--i,0) * .055s);transition-duration:var(--t-rev)}
.lr{transition-duration:var(--t-rev)}
.lr[data-d="1"].in{transition-delay:.07s}
.lr[data-d="2"].in{transition-delay:.14s}
.lr[data-d="3"].in{transition-delay:.21s}
.lr[data-d="4"].in{transition-delay:.28s}
.lr[data-d="5"].in{transition-delay:.35s}
.rv[data-d="1"].in{transition-delay:.06s}
.rv[data-d="2"].in{transition-delay:.12s}
.rv[data-d="3"].in{transition-delay:.18s}
.rv[data-d="4"].in{transition-delay:.24s}

/* Law 5 · fade is never used alone. Law 10 · transform and opacity only. */
.rv{transform:translate3d(0,22px,0) scale(.994);
  transition:opacity var(--t-rev) var(--e-out),transform var(--t-rev) var(--e-out)}
.rv.in{transform:none}

/* Law 4 · proximity — the gap inside a group is smaller than between groups */
.svc-list{gap:0 clamp(30px,4vw,64px)}
.svc-list h3{margin-bottom:6px}
.places li{padding-block:22px}

/* SLOP TELL · "three identical cards in a row". Give the grid an asymmetric
   bias so the eye has somewhere to start instead of scanning a uniform wall. */
@media(min-width:1040px){
  .svc-list{grid-template-columns:1.25fr 1fr 1fr}
  .svc-list .svc:first-child h3{font-size:var(--fs-5);letter-spacing:-.024em}
  .svc-list .svc:first-child .svc-ic svg{width:36px;height:36px}
  .svc-list .svc:first-child p{font-size:16px;max-width:34ch}
}

/* SLOP TELL · "same section rhythm top to bottom". Alternate the density. */
.origins{padding-block:clamp(74px,11vh,128px)}
#care{padding-block:clamp(104px,17vh,196px)}
#proof{padding-block:clamp(80px,12vh,140px)}

/* Law 9 · the craft is in the states. Hover must move, not just tint. */
.svc-list .svc{transition:transform var(--t-ui) var(--e-ui),opacity var(--t-ui) var(--e-ui)}
.svc-list .svc:hover{transform:translate3d(0,-3px,0)}
.svc-list .svc:hover .svc-ic svg *{stroke:var(--peri-deep)}
.places li{transition:transform var(--t-ui) var(--e-ui)}
.places li:hover b{color:var(--peri)}

/* ═══════════════════════════════════════════════════════════════════════
   THE ANSWER PAGES — built to be lifted by answer engines, so they must
   still read like the clinic. Question is the heading, answer stands alone,
   the number rides inside every block.
   ═══════════════════════════════════════════════════════════════════════ */
.answers .ans-hero{padding-block:calc(var(--pad) * .7) calc(var(--pad) * .4)}
.answers .claim{max-width:15ch;margin-bottom:22px}
.qa-wrap{padding-top:0}
.qa{max-width:66ch;padding:34px 0;border-top:1px solid var(--line-2)}
.qa:first-child{border-top:0}
.qa h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,33px);
  line-height:1.14;letter-spacing:-.02em;margin-bottom:14px;color:var(--ink)}
.qa p{margin:0 0 12px;font-size:17px;line-height:1.68;color:var(--body)}
.qa .qa-cta{margin:0;font-size:15.5px;color:var(--peri-deep);font-weight:600}
[dir="rtl"] .qa h2{font-weight:600;letter-spacing:normal;line-height:1.4}
[dir="rtl"] .qa p{line-height:1.9}
@media(min-width:900px){.qa{padding:40px 0}}


/* --- answers hub · where to next (hairline list, no boxes) ------------- */
.ansnav{list-style:none;margin:clamp(34px,5vh,58px) 0 0;padding:0;
  display:grid;gap:0 clamp(30px,4vw,64px)}
@media(min-width:700px){.ansnav{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ansnav li{border-top:1px solid var(--line)}
.ansnav a{display:block;padding:22px 0 20px;text-decoration:none;color:var(--ink);
  transition:opacity .3s var(--e-ui)}
.ansnav a:hover{opacity:.62}
.ansnav b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.4vw,25px);letter-spacing:-.012em;line-height:1.2}
.ansnav span{display:block;margin-top:7px;font-size:15.5px;line-height:1.55;color:var(--muted);
  max-width:46ch}
[dir="rtl"] .ansnav span{max-width:44ch}