/* Medico clinic landing page. One stylesheet, written whole (never edited by script).
   Spec: BRIEF.md. Brand: #1475bc blue, #404041 charcoal, Montserrat 700 + Open Sans 400 only. */

@font-face{font-family:"Montserrat";src:url(assets/fonts/montserrat-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sans";src:url(assets/fonts/opensans-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --blue:#1475bc; --blue-d:#0f5f9a; --blue-t:#eaf2fa;
  --ink:#404041; --text:#333; --muted:#5b6168; --line:#dbe3ec; --tint:#f4f7fa;
  --radius:10px; --radius-l:14px;
  --max:1200px; --pad:24px;
  --sec:96px;
  --h:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --b:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(30,40,55,.06),0 8px 24px rgba(30,40,55,.07);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#fff;color:var(--text);font:400 18px/1.6 var(--b);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
figure{margin:0}
[hidden]{display:none!important}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--h);font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,4.2vw,56px);line-height:1.08}
h2{font-size:clamp(28px,3.1vw,40px);line-height:1.15}
h3{font-size:clamp(19px,1.7vw,22px);line-height:1.3}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0}
.sec.tint{background:var(--tint)}
.head{max-width:760px;margin-bottom:44px}
.head p{margin-top:16px;color:var(--muted);font-size:18px;max-width:66ch}
.eyebrow{font:700 13px/1.4 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons: one primary style everywhere, secondary is the same shape outlined. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:8px;
  background:var(--blue);color:#fff;border:1.5px solid var(--blue);font:700 16px/1 var(--h);text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.ghost:hover{background:var(--blue-t)}
.btn svg{width:18px;height:18px}
:focus-visible{outline:3px solid #7fb6e3;outline-offset:2px}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.top .logo img{width:176px;height:auto}
.top .right{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--muted)}
.top .phone{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--h);color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:8px;padding:11px 14px}
.top .phone svg{width:16px;height:16px;color:var(--blue)}
.top .phone:hover{border-color:var(--blue)}

/* ---------- Hero ---------- */
.hero{padding:56px 0 72px;background:linear-gradient(180deg,var(--tint),#fff 70%)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:48px;align-items:start}
.hero h1{max-width:18ch;font-size:clamp(34px,3.7vw,52px)}
.hero .lead{margin-top:20px;font-size:19px;max-width:54ch}
.offer{margin-top:24px;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid #cfe0f0;
  background:var(--blue-t);border-radius:var(--radius);max-width:560px}
.offer svg{flex:none;width:22px;height:22px;color:var(--blue);margin-top:3px}
.offer p{font-size:17px}
.offer b{font:700 17px/1.5 var(--h);color:var(--ink)}
.proof{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin:24px 0 0;padding:0;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);max-width:620px}
.proof li{display:flex;align-items:center;gap:10px;padding:12px 16px;border-left:1px solid var(--line);font-size:13px;line-height:1.25;color:var(--muted)}
.proof li:first-child{border-left:0}
.proof b{display:block;font:700 16px/1.2 var(--h);color:var(--ink)}
.proof b i{font-style:normal;color:#f5a623;font-size:12px;letter-spacing:1px;margin-left:2px}
.proof svg.g{width:24px;height:24px;flex:none}
.proof .bbb{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--ink);color:#fff;font:700 10px/1 var(--h);letter-spacing:.02em}
.proof .ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--blue-t);color:var(--blue)}
.proof .ic svg{width:17px;height:17px}
/* Desktop: the photo is a full-width band across the top of the hero; the form column starts inside
   it and overlaps its lower edge. Below 1080px everything stacks in source order (text, form, photo). */
.hero .grid{grid-template-rows:auto auto;row-gap:40px}
/* The form overlaps only the bottom 64px of the photo, so the photo's subject is never covered. */
.hero{--band:clamp(220px,min(24vw,34vh),330px)}
.band{grid-column:1/-1;grid-row:1;perspective:1400px}
.hero .grid>div:first-child{grid-row:2;grid-column:1}
.formcol{grid-row:1/3;grid-column:2;align-self:start;margin-top:calc(var(--band) - 64px);position:relative;z-index:2}
.shot{position:relative;border-radius:var(--radius-l);overflow:hidden;height:var(--band);background:#e7edf3;box-shadow:0 18px 40px rgba(30,40,55,.16);transform-origin:50% 100%}
.nearq{margin:22px 0 0;max-width:560px;font-size:15px;color:var(--ink)}
.nearq blockquote{margin:0;line-height:1.5}
.nearq figcaption{margin-top:4px;font-size:13px;color:var(--muted)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;color:#fff;font-size:14px;
  background:linear-gradient(transparent,rgba(20,26,34,.72))}
.shot figcaption b{font:700 14px/1 var(--h)}

/* ---------- Form ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:28px}
.formcard{position:relative}
.f-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.f-title{font:700 20px/1.3 var(--h);color:var(--ink)}
.f-count{font-size:14px;color:var(--muted);white-space:nowrap}
.f-bar{height:5px;background:var(--line);border-radius:5px;margin:14px 0 22px;overflow:hidden}
.f-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:5px;transition:width .35s ease}
.step{border:0;margin:0;padding:0;min-width:0}
.step[hidden]{display:none}
.step legend{font:700 22px/1.3 var(--h);color:var(--ink);padding:0;margin-bottom:16px}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opts.two .opt:last-child:nth-child(odd){grid-column:1/-1}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border:1.5px solid var(--line);
  border-radius:var(--radius);cursor:pointer;font-size:16px;line-height:1.3;color:var(--ink);background:#fff;transition:border-color .15s,background .15s}
.opt:hover{border-color:#9cc2e3}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #9aa6b2;display:grid;place-items:center;transition:all .15s}
.opt .tick::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s}
.opt:has(input:checked){border-color:var(--blue);background:var(--blue-t)}
.opt:has(input:checked) .tick{border-color:var(--blue);background:var(--blue)}
.opt:has(input:checked) .tick::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:3px solid #7fb6e3;outline-offset:2px}
.f-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.f-back{background:none;border:0;color:var(--muted);font:400 15px var(--b);cursor:pointer;padding:12px 4px;min-height:48px}
.f-back:hover{color:var(--ink)}
.f-nav .btn{flex:1;max-width:none}
.f-nav .f-back[hidden]+.btn{flex:1}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields .full{grid-column:1/-1}
.field label{display:block;font-size:14px;color:var(--ink);margin-bottom:6px}
.field label.opt{display:flex;margin-bottom:0}
.callnote{margin:-6px 0 16px;font-size:14px;color:var(--muted)}
.notes summary{cursor:pointer;font-size:14px;color:var(--blue);min-height:40px;display:flex;align-items:center;list-style:none}
.notes summary::-webkit-details-marker{display:none}
.notes summary span{color:var(--muted);margin-left:4px}
.notes textarea{margin-top:6px}
.field label span{color:var(--muted)}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;
  font:400 16px/1.4 var(--b);color:var(--text);background:#fff}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(20,117,188,.15)}
.field .err{display:none;font-size:13px;color:#b42318;margin-top:5px}
.field.bad input{border-color:#d0463b}
.field.bad .err{display:block}
.step-err{display:none;font-size:14px;color:#b42318;margin-top:10px}
.step.bad .step-err{display:block}
.note{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--blue-t);font-size:14px;color:var(--ink)}
.role .lab{display:block;font-size:14px;color:var(--ink);margin-bottom:6px}
.opts.chips{grid-template-columns:1fr 1fr;gap:8px}
.opts.chips .opt{min-height:48px;padding:10px 12px;font-size:14px;gap:10px}
.opts.chips .tick{width:18px;height:18px}
.field.role.bad .opt{border-color:#e7a29c}
.micro{font-size:14px;color:var(--muted);margin-top:14px}
.f-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.f-foot a{color:var(--muted)}
.f-msg{margin-top:12px;font-size:14px;color:#b42318}
.thanks h3{margin-bottom:10px}
@media (prefers-reduced-motion:no-preference){.step.in{animation:stepIn .28s ease}}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Trust ---------- */
.trust .top-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.trust .top-row .head{margin-bottom:0}
.ratings{display:flex;gap:12px;flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;white-space:nowrap}
.rating .n{font:700 20px/1 var(--h);color:var(--ink)}
.rating .s{color:#f5a623;letter-spacing:1px;font-size:15px}
.rating small{font-size:13px;color:var(--muted)}
.rating svg{width:20px;height:20px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff}
.quote img{aspect-ratio:16/9;object-fit:cover;width:100%}
.quote .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.quote p{font-size:17px;color:var(--ink);flex:1}
.quote .who{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.quote .who b{display:block;font:700 15px/1.3 var(--h);color:var(--ink)}
.quote .who svg{flex:none;width:18px;height:18px}
.quote .gpanel{aspect-ratio:16/9;display:grid;place-content:center;justify-items:center;gap:6px;background:var(--ink);color:#fff}
.quote .gpanel svg{width:30px;height:30px;background:#fff;border-radius:50%;padding:4px}
.quote .gpanel .n{font:700 48px/1 var(--h)}
.quote .gpanel .s{color:#f5a623;font-size:20px;letter-spacing:3px}
.quote .gpanel small{font-size:13px;color:#c9ced4;letter-spacing:.04em}
.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bar div{padding:22px 20px;border-left:1px solid var(--line)}
.bar div:first-child{border-left:0;padding-left:0}
.bar b{display:block;font:700 17px/1.3 var(--h);color:var(--ink)}
.bar span{display:block;margin-top:4px;font-size:15px;color:var(--muted);line-height:1.5}

/* ---------- Experience ---------- */
.exp .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.exp .statrow{display:flex;align-items:flex-end;gap:18px;margin-top:32px;padding-top:24px;border-top:3px solid var(--blue);max-width:460px}
.exp .copy .stat{font:700 clamp(72px,8vw,104px)/.85 var(--h);color:var(--ink);letter-spacing:-.03em;margin:0}
.exp .copy .statl{font:700 17px/1.35 var(--h);color:var(--ink);margin:0 0 6px;max-width:14ch}
.exp .copy p{margin-top:18px;color:var(--muted);max-width:56ch}
.exp .copy .sectors{margin-top:18px;font-size:15px;color:var(--ink)}
.mosaic{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(3,1fr);gap:12px;height:540px}
.mosaic figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#e7edf3}
.mosaic figure:first-child{grid-row:1/4}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.94);color:var(--ink);font-size:13px;padding:5px 9px;border-radius:6px}

/* ---------- Stage cards ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stage{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:24px;transition:border-color .15s}
.stage:hover{border-color:#9cc2e3}
.stage .ill{height:176px;margin:-4px -4px 20px;display:grid;place-items:center;perspective:900px}
.stage .ill svg{width:100%;height:100%;transform-origin:50% 100%}
.lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 16px/1 var(--h);color:var(--blue);text-decoration:none}
.lnk span{transition:translate .2s var(--xo)}
.lnk:hover span{translate:4px 0}
.stage h3{margin-bottom:10px}
.stage p{font-size:16px;color:var(--muted);flex:1}
.stage .lnk{margin-top:14px;align-self:flex-start}

/* ---------- Healthcare is different ---------- */
.diff .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:18px}
.plan svg{width:100%;height:auto;display:block}
.reqs{list-style:none;margin:0;padding:0;counter-reset:r}
.reqs li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.reqs li:first-child{padding-top:0}
.reqs li::before{counter-increment:r;content:"0" counter(r);font:700 13px/1 var(--h);color:var(--blue);border:1.5px solid var(--blue);border-radius:6px;
  height:28px;display:grid;place-items:center}
.csa{margin-top:22px;padding:18px 20px;background:var(--blue-t);border-radius:var(--radius);font-size:15px;color:var(--ink)}
.csa b{font:700 15px/1.5 var(--h)}

/* ---------- Process ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.steps::before{content:"";position:absolute;left:20px;right:calc((100% - 96px) / 5 - 20px);top:20px;height:2px;background:var(--blue)}
.steps li{position:relative}
.steps .n{display:block;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font:700 14px/40px var(--h);text-align:center;margin-bottom:18px;
  box-shadow:0 0 0 6px var(--tint)}
.steps h3{font-size:19px;margin-bottom:8px}
.steps p{font-size:15px;color:var(--muted);line-height:1.55}
.onecall{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.onecall p{font-size:19px;color:var(--ink);max-width:62ch}
.onecall .txt p+p{margin-top:14px}

/* ---------- Portfolio ---------- */
.pf{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:250px;gap:14px}
.pf figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.pf figure img{flex:1;min-height:0}
.pf figure:nth-child(1){grid-column:span 7;grid-row:span 2}
.pf figure:nth-child(2){grid-column:span 5}
.pf figure:nth-child(3){grid-column:span 5}
.pf figure:nth-child(4),.pf figure:nth-child(5),.pf figure:nth-child(6){grid-column:span 4;grid-row:span 1}
.pf img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pf figure:hover img{transform:scale(1.03)}
.pf figcaption{flex:none;padding:10px 16px 12px;color:var(--muted);background:#fff;font-size:14px;line-height:1.35}
.pf figcaption b{display:block;font:700 15px/1.3 var(--h);color:var(--ink)}
.pf-cta{margin-top:28px}

/* ---------- Location ---------- */
.loc .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.map{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:20px}
.map svg{width:100%;height:auto;display:block}
.m-bc,.m-ab{stroke:#9fb3c8;stroke-width:1.2;stroke-linejoin:round}
.m-bc{fill:#dfeaf5}.m-ab{fill:#ecf2f8}
.m-prov{font:700 20px var(--h);letter-spacing:.2em;fill:#8093a6}
.m-lead{fill:none;stroke:var(--ink);stroke-width:2}
.m-halo{fill:rgba(20,117,188,.18)}.m-dot{fill:var(--blue);stroke:#fff;stroke-width:3}
.m-pin text{font:700 27px var(--h);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}
.offices{display:grid;gap:12px}
.office{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.office svg{grid-row:1/4;width:20px;height:20px;color:var(--blue);margin-top:2px}
.office b{font:700 16px/1.3 var(--h);color:var(--ink)}
.office span{font-size:15px;color:var(--muted);line-height:1.5}
.office a{font:700 15px/1.4 var(--h);text-decoration:none}
.area-q{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:17px;color:var(--ink)}

/* ---------- $0 design sheet ---------- */
.fee .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.fee .head{margin-bottom:0}
.fee .head .btn{margin-top:28px}
.sheet{background:#fff;border:1px solid #c9d6e3;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  background-image:linear-gradient(rgba(20,117,188,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,117,188,.05) 1px,transparent 1px);background-size:20px 20px}
.sheet-h{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #c9d6e3;font:700 12px/1 var(--h);letter-spacing:.14em;color:#6f8296;background:rgba(255,255,255,.85)}
.sheet ol{list-style:none;margin:0;padding:6px 22px;background:rgba(255,255,255,.85)}
.sheet li{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px dashed #c9d6e3;font:700 14px/1.3 var(--h);letter-spacing:.06em;color:var(--ink);text-transform:uppercase}
.sheet li:last-child{border-bottom:0}
.sheet li i{font-style:normal;color:#8a9bb0;font-size:12px;width:22px}
.sheet li .dots{flex:1;border-bottom:1px dotted #b9c7d6;transform:translateY(-4px)}
.sheet li .v{color:var(--ink);font-size:17px;letter-spacing:0}
.sheet-tb{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 22px;border-top:1px solid #c9d6e3;background:#fff;font:700 10px/1.4 var(--h);letter-spacing:.14em;color:#6f8296}
.sheet-t{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:var(--ink);color:#fff;flex-wrap:wrap}
.sheet-t .big{font:700 40px/1 var(--h)}
.sheet-t .big small{font-size:15px;letter-spacing:.14em;margin-left:10px;vertical-align:middle}
.sheet-t .stamp{font:700 12px/1.2 var(--h);letter-spacing:.12em;border:1.5px solid rgba(255,255,255,.55);border-radius:6px;padding:9px 12px}
.foot-note{margin-top:14px;font-size:14px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq .grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;
  font:700 18px/1.35 var(--h);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin:0 4px 5px 0;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transform-origin:60% 60%;transition:transform .25s var(--xo)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{padding:0 0 20px;color:var(--muted);font-size:17px;max-width:66ch}

/* ---------- Final CTA ---------- */
.final{background:var(--ink);color:#fff;padding:88px 0}
.final .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.final h2{color:#fff}
.final p{margin-top:16px;color:#d5d9de;max-width:52ch}
.final .small{font-size:15px;color:#b9c0c7;margin-top:10px}
.final .acts{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.final .acts a.tel{color:#fff;font-size:16px}
.final .trustline{margin-top:28px;font-size:14px;color:#b9c0c7}
.final .pic{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/3}
.final .pic img{width:100%;height:100%;object-fit:cover}

/* ---------- Footer ---------- */
.foot{padding:36px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot img{width:140px}
.foot a{color:var(--muted)}

/* ---------- Sticky mobile CTA ---------- */
.stick{display:none}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
  :root{--sec:80px}
  .hero .grid,.exp .grid,.diff .grid,.loc .grid,.fee .grid,.faq .grid,.final .grid{grid-template-columns:1fr;gap:40px}
  .formcard{position:static}
  .band,.formcol,.hero .grid>div:first-child{grid-row:auto;grid-column:auto}
  .formcol{margin-top:0}
  .hero h1{max-width:20ch}
  .mosaic{height:440px}
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:19px;right:auto;top:20px;bottom:20px;width:2px;height:auto}
  .steps li{display:grid;grid-template-columns:40px 1fr;column-gap:18px;padding-bottom:26px}
  .steps .n{grid-row:1/3;margin:0}
  .trust .top-row{flex-direction:column;align-items:flex-start}
  .final .pic{display:none}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  :root{--sec:64px;--pad:18px}
  body{font-size:17px}
  .top .wrap{height:60px}
  .top .logo img{width:140px}
  .top .right .lic{display:none}
  .top .phone span{display:none}
  .top .phone{width:48px;height:48px;justify-content:center;padding:0}
  .top .phone svg{width:20px;height:20px}
  .hero{padding:28px 0 48px}
  .hero .lead{font-size:17px}
  .hero .grid{gap:28px}
  .shot{height:220px}
  /* First screen on a phone must reach the first form answer: the lead line goes. */
  .hero .lead{display:none}
  .eyebrow{font-size:11px;margin-bottom:10px}
  .hero h1{font-size:30px}
  .offer{margin-top:14px;padding:10px 12px}
  .offer p,.offer b{font-size:15px}
  .offer svg{display:none}
  .proof{grid-template-columns:1fr 1fr;max-width:none;margin-top:12px}
  .proof li{padding:7px 10px;gap:8px;font-size:13px}
  .proof li:nth-child(3){border-left:0}
  .proof li:nth-child(n+3){border-top:1px solid var(--line)}
  .proof svg.g{width:20px;height:20px}
  .proof .bbb,.proof .ic{width:26px;height:26px}
  .proof b{font-size:15px}
  .proof b i{display:none}
  .f-nav{flex-direction:column;align-items:stretch;gap:4px}
  .f-back{align-self:flex-start;min-height:44px;padding:10px 0}
  .nearq{display:none}
  .formcard .f-top{gap:6px}
  .step legend{font-size:19px;margin-bottom:12px}
  .opt{min-height:50px;padding:10px 14px}
  .stage{display:grid;grid-template-columns:96px 1fr;column-gap:14px;padding:16px}
  .stage .ill{grid-row:1/4;height:96px;margin:0}
  .stage h3{margin-bottom:4px}
  .stage p{font-size:15px}
  .stage .lnk{margin-top:6px}
  .exp .statrow{max-width:none}
  .shot-m{display:block}
  .card{padding:20px}
  .opts.two,.fields{grid-template-columns:1fr}
  .quotes,.stages,.bar{grid-template-columns:1fr}
  .bar div{border-left:0;border-top:1px solid var(--line);padding:16px 0}
  .bar div:first-child{border-top:0}
  .mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:200px 130px}
  .mosaic figure:first-child{grid-row:auto;grid-column:1/-1}
  .mosaic figure:nth-child(4){display:none}
  .pf{grid-template-columns:1fr;grid-auto-rows:270px}
  .pf figure:nth-child(n){grid-column:auto;grid-row:auto}
  .faq summary{font-size:17px}
  .map{padding:6px 0;margin:0 calc(-1 * var(--pad));border-radius:0;border-left:0;border-right:0}
  .m-pin text{font-size:40px;stroke-width:9px}
  .m-prov{font-size:28px}
  .final{padding:64px 0 96px}
  .stick{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
  .stick.on{transform:none}
  .stick .btn{flex:1}
  .stick .call{flex:none;width:52px;padding:0}
  body.has-stick{padding-bottom:76px}
}
.shot-m{display:none}

/* ---------- Line drawings (stage cards + clinic plan) ---------- */
.sgrid path{stroke:rgba(20,117,188,.12);stroke-width:1;fill:none}
.ssheet{fill:#fff;stroke:#b9cde0;stroke-width:1.2}
.sline,.sline *{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.sthin,.sthin *{fill:none;stroke:#8a9bb0;stroke-width:1.3}
.sdash{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-dasharray:5 4}
.sblue,.sblue *{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spage{fill:#fff;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.sring{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:3 3}
.sfill{fill:var(--blue)}.shole{fill:#fff}
.hsheet{fill:#fbfdff;stroke:#b9cde0;stroke-width:1.2}
.hthin,.hthin *{fill:none;stroke:#9aabbf;stroke-width:1.2}
.hwall{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.hdoor path{fill:none;stroke:var(--blue);stroke-width:1.5}
.hflow{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:6 5}
.hflowtip{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hlabel text{font:700 10px var(--h);letter-spacing:.12em;fill:#6f8296}
.hcall circle{fill:var(--blue)}
.hcall text{font:700 10px var(--h);fill:#fff;text-anchor:middle}
.htitle rect,.htitle path{fill:#fff;stroke:#8a9bb0;stroke-width:1.2}
.htitle text{font:700 8px var(--h);letter-spacing:.1em;fill:#6f8296}

/* =====================================================================================
   MOTION. Everything below only applies under html.anim, which motion.js sets when motion is
   allowed. Without it (no JS, reduced motion) the page renders in its final state. Entrances use
   the individual translate / rotate / scale properties so `transform` stays free for pointer tilt.
   ===================================================================================== */
:root{--xo:cubic-bezier(.16,1,.3,1)}
.pf figure,.stage,.final .pic{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--xo),border-color .15s}
.pf figure,.final .pic{transform-style:preserve-3d}

/* Hero: text builds in, then the form turns in from the side. */
.anim [data-in]{opacity:0;translate:0 18px;transition:opacity .7s var(--xo),translate .8s var(--xo)}
.anim.loaded [data-in]{opacity:1;translate:0 0}
.anim.loaded [data-in="2"]{transition-delay:.08s}.anim.loaded [data-in="3"]{transition-delay:.16s}
.anim.loaded [data-in="4"]{transition-delay:.24s}.anim.loaded [data-in="5"]{transition-delay:.32s}
/* Hero band: stands up off the table once, then stays still and square with the page. */
.anim .band .shot{opacity:0;rotate:x 10deg;translate:0 24px;transition:opacity .6s var(--xo),rotate .9s var(--xo),translate .9s var(--xo)}
.anim.loaded .band .shot{opacity:1;rotate:x 0deg;translate:0 0}
.anim .formcard{opacity:0;rotate:y -10deg;translate:24px 0;transform-origin:right center;transition:opacity .8s var(--xo) .2s,rotate 1s var(--xo) .2s,translate 1s var(--xo) .2s}
.anim.loaded .formcard{opacity:1;rotate:y 0deg;translate:0 0}
.opt{transition:border-color .15s,background .15s,scale .15s}
.opt:active{scale:.985}

/* Reviews: cards flip up from the table, stars fill left to right. */
.anim [data-anim="rise"]>*{opacity:0;rotate:x 8deg;translate:0 20px;transform-origin:50% 100%;transition:opacity .6s var(--xo),rotate .8s var(--xo),translate .8s var(--xo)}
.anim [data-anim="rise"].in>*{opacity:1;rotate:x 0deg;translate:0 0}
.anim [data-anim="rise"].in>:nth-child(2){transition-delay:.09s}.anim [data-anim="rise"].in>:nth-child(3){transition-delay:.18s}

/* Photo grids: tiles swing open on a vertical hinge, one after another. */
/* Mosaic: the four photos rise together as one plane, like a board being stood up. */
.anim [data-anim="plane"]{opacity:0;rotate:x 18deg;translate:0 30px;transform-origin:50% 100%;transition:opacity .7s var(--xo),rotate .9s var(--xo),translate .9s var(--xo)}
.anim [data-anim="plane"].in{opacity:1;rotate:x 0deg;translate:0 0}
.anim [data-anim="plane"]>*{opacity:0;transition:opacity .6s var(--xo)}
.anim [data-anim="plane"].in>*{opacity:1}
.anim [data-anim="plane"].in>:nth-child(2){transition-delay:.07s}.anim [data-anim="plane"].in>:nth-child(3){transition-delay:.14s}.anim [data-anim="plane"].in>:nth-child(4){transition-delay:.21s}
/* Portfolio / thank-you tiles: each photo is revealed upward while it settles from a slight zoom. No skew. */
.anim [data-anim="clip"]>*{clip-path:inset(100% 0 0 0 round var(--radius));transition:clip-path .7s var(--xo)}
.anim [data-anim="clip"]>* img{scale:1.08;transition:scale 1s var(--xo),transform .5s ease}
.anim [data-anim="clip"].in>*{clip-path:inset(0 0 0 0 round var(--radius))}
.anim [data-anim="clip"].in>* img{scale:1}
.anim [data-anim="clip"].in>:nth-child(2),.anim [data-anim="clip"].in>:nth-child(2) img{transition-delay:.06s}
.anim [data-anim="clip"].in>:nth-child(3),.anim [data-anim="clip"].in>:nth-child(3) img{transition-delay:.12s}
.anim [data-anim="clip"].in>:nth-child(4),.anim [data-anim="clip"].in>:nth-child(4) img{transition-delay:.18s}
.anim [data-anim="clip"].in>:nth-child(5),.anim [data-anim="clip"].in>:nth-child(5) img{transition-delay:.24s}
.anim [data-anim="clip"].in>:nth-child(6),.anim [data-anim="clip"].in>:nth-child(6) img{transition-delay:.3s}
.mosaic,.pf{perspective:1400px}

/* Stage cards: rise in; then each drawing acts out its stage. */
.anim [data-anim="stages"]>*{opacity:0;translate:0 30px;transition:opacity .7s var(--xo),translate .9s var(--xo),transform .35s var(--xo),border-color .15s}
.anim [data-anim="stages"].in>*{opacity:1;translate:0 0}
.anim [data-anim="stages"].in>:nth-child(2){transition-delay:.12s,.12s,0s,0s}.anim [data-anim="stages"].in>:nth-child(3){transition-delay:.24s,.24s,0s,0s}
.anim [data-anim="stages"] .ill svg{opacity:0;rotate:x 55deg;transition:opacity .5s var(--xo) .15s,rotate .9s var(--xo) .15s}
.anim [data-anim="stages"].in .ill svg{opacity:1;rotate:x 0deg}
.stage svg .sfill,.stage svg .shole,.stage svg .sring{transform-box:fill-box;transform-origin:50% 100%}
.anim [data-anim="stages"] .sfill,.anim [data-anim="stages"] .shole{opacity:0;translate:0 -34px;transition:opacity .3s ease .7s,translate .7s var(--xo) .7s}
.anim [data-anim="stages"].in .sfill,.anim [data-anim="stages"].in .shole{opacity:1;translate:0 0}
.anim [data-anim="stages"] .sring{opacity:0;scale:.3;transform-origin:50% 50%;transition:opacity .4s ease 1.25s,scale .8s var(--xo) 1.25s}
.anim [data-anim="stages"].in .sring{opacity:1;scale:1}
.anim [data-anim="stages"] .stage:nth-child(2) .sblue{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.2s ease .9s}
.anim [data-anim="stages"].in .stage:nth-child(2) .sblue{stroke-dashoffset:0}
.anim [data-anim="stages"] .stage:nth-child(3) .sblue{transform-box:view-box;transform-origin:14% 18%;scale:0 1;transition:scale 1s var(--xo) 1s}
.anim [data-anim="stages"].in .stage:nth-child(3) .sblue{scale:1 1}
.anim [data-anim="stages"] .stage:nth-child(3) .sdash{stroke-dashoffset:40;transition:stroke-dashoffset 1.6s ease 1.1s}
.anim [data-anim="stages"].in .stage:nth-child(3) .sdash{stroke-dashoffset:0}

/* Clinic plan: arrives as a 3D isometric model and lands flat as the readable plan; walls draw,
   callouts pop in order, the patient flow keeps moving. */
.plan{perspective:1600px}
.plan svg{transform-origin:50% 60%}
.anim [data-anim="iso"] svg{opacity:.2;rotate:1 -.35 .6 58deg;scale:.82;transition:opacity .6s ease,rotate 1.6s var(--xo),scale 1.6s var(--xo)}
.anim [data-anim="iso"].in svg{opacity:1;rotate:1 -.35 .6 0deg;scale:1}
.anim [data-anim="iso"] .hwall{stroke-dasharray:2600;stroke-dashoffset:2600;transition:stroke-dashoffset 2s ease .2s}
.anim [data-anim="iso"].in .hwall{stroke-dashoffset:0}
.anim [data-anim="iso"] .hcall circle,.anim [data-anim="iso"] .hcall text{transform-box:fill-box;transform-origin:50% 50%;opacity:0;scale:0;transition:opacity .3s ease,scale .5s var(--xo)}
.anim [data-anim="iso"].in .hcall circle,.anim [data-anim="iso"].in .hcall text{opacity:1;scale:1}
.anim [data-anim="iso"].in .hcall :nth-child(1),.anim [data-anim="iso"].in .hcall :nth-child(2){transition-delay:1.5s}
.anim [data-anim="iso"].in .hcall :nth-child(3),.anim [data-anim="iso"].in .hcall :nth-child(4){transition-delay:1.7s}
.anim [data-anim="iso"].in .hcall :nth-child(5),.anim [data-anim="iso"].in .hcall :nth-child(6){transition-delay:1.9s}
.anim [data-anim="iso"].in .hcall :nth-child(7),.anim [data-anim="iso"].in .hcall :nth-child(8){transition-delay:2.1s}
.anim [data-anim="iso"].in .hcall :nth-child(9),.anim [data-anim="iso"].in .hcall :nth-child(10){transition-delay:2.3s}
.anim [data-anim="iso"].in .hflow{animation:flow 1.6s linear 2.4s 3}
@keyframes flow{to{stroke-dashoffset:-22}}
.anim .reqs li{opacity:0;translate:16px 0;transition:opacity .6s var(--xo),translate .8s var(--xo)}
.anim .reqs.in li{opacity:1;translate:0 0}
.anim .reqs.in li:nth-child(2){transition-delay:.1s}.anim .reqs.in li:nth-child(3){transition-delay:.2s}
.anim .reqs.in li:nth-child(4){transition-delay:.3s}.anim .reqs.in li:nth-child(5){transition-delay:.4s}

/* Process: the line draws itself and each step lights up as the line reaches it. */
.anim [data-anim="line"]::before{scale:0 1;transform-origin:0 50%;transition:scale .9s cubic-bezier(.65,0,.35,1) .05s}
.anim [data-anim="line"].in::before{scale:1 1}
.anim [data-anim="line"] .n{scale:.6;opacity:0;transition:scale .4s var(--xo),opacity .25s ease}
.anim [data-anim="line"].in .n{opacity:1}
.anim [data-anim="line"] li>div{opacity:0;translate:0 10px;transition:opacity .45s var(--xo),translate .5s var(--xo)}
.anim [data-anim="line"].in .n{scale:1}.anim [data-anim="line"].in li>div{opacity:1;translate:0 0}
.anim [data-anim="line"].in li:nth-child(1) *{transition-delay:.05s}.anim [data-anim="line"].in li:nth-child(2) *{transition-delay:.17s}
.anim [data-anim="line"].in li:nth-child(3) *{transition-delay:.29s}.anim [data-anim="line"].in li:nth-child(4) *{transition-delay:.41s}
.anim [data-anim="line"].in li:nth-child(5) *{transition-delay:.53s}

/* Map: tilts up off the table, then the offices drop in and keep a slow pulse. */
.map{perspective:1400px}
.anim [data-anim="map"] svg{opacity:0;rotate:x 20deg;transform-origin:50% 100%;transition:opacity .8s var(--xo),rotate 1s var(--xo)}
.anim [data-anim="map"].in svg{opacity:1;rotate:x 0deg}
.m-pin circle{transform-box:fill-box;transform-origin:50% 50%}
.anim [data-anim="map"] .m-pin{opacity:0;translate:0 -16px;transition:opacity .4s ease,translate .7s var(--xo)}
.anim [data-anim="map"].in .m-pin{opacity:1;translate:0 0}
.anim [data-anim="map"].in .m-pin:nth-of-type(1){transition-delay:1s}.anim [data-anim="map"].in .m-pin:nth-of-type(2){transition-delay:1.15s}
.anim [data-anim="map"].in .m-pin:nth-of-type(3){transition-delay:1.3s}.anim [data-anim="map"].in .m-pin:nth-of-type(4){transition-delay:1.45s}
.anim [data-anim="map"].in .m-halo{animation:pulse 1.2s ease-out 1.8s 2}
@keyframes pulse{0%{scale:1;opacity:1}100%{scale:2.4;opacity:0}}

/* $0 sheet: stands up off the desk, then each line item is written in. */
.fee .grid>div:last-child{perspective:1400px}
.anim [data-anim="sheet"] .sheet{opacity:0;rotate:x 24deg;translate:0 30px;transform-origin:50% 100%;transition:opacity .5s var(--xo),rotate .7s var(--xo),translate .7s var(--xo)}
.anim [data-anim="sheet"].in .sheet{opacity:1;rotate:x 0deg;translate:0 0}
.anim [data-anim="sheet"] li,.anim [data-anim="sheet"] .sheet-t{opacity:0;translate:-12px 0;transition:opacity .35s var(--xo),translate .4s var(--xo)}
.anim [data-anim="sheet"].in li,.anim [data-anim="sheet"].in .sheet-t{opacity:1;translate:0 0}
.anim [data-anim="sheet"].in li:nth-child(1){transition-delay:.15s}.anim [data-anim="sheet"].in li:nth-child(2){transition-delay:.23s}
.anim [data-anim="sheet"].in li:nth-child(3){transition-delay:.31s}.anim [data-anim="sheet"].in li:nth-child(4){transition-delay:.39s}
.anim [data-anim="sheet"].in .sheet-t{transition-delay:.4s}
.anim [data-anim="sheet"] .v{display:inline-block;rotate:x 90deg;transition:rotate .35s var(--xo)}
.anim [data-anim="sheet"].in .v{rotate:x 0deg}
.anim [data-anim="sheet"].in li:nth-child(1) .v{transition-delay:.2s}.anim [data-anim="sheet"].in li:nth-child(2) .v{transition-delay:.28s}
.anim [data-anim="sheet"].in li:nth-child(3) .v{transition-delay:.36s}.anim [data-anim="sheet"].in li:nth-child(4) .v{transition-delay:.44s}

/* Mobile: the vertical timeline draws downward instead of across. */
@media (max-width:1080px){.anim [data-anim="line"]::before{scale:1 0;transform-origin:50% 0}.anim [data-anim="line"].in::before{scale:1 1}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}