/* src/styles/article-body.css */
/* Blog article body: tables + references (scoped to .article_body) */
.article_body table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;font-size:.9rem;line-height:1.55;margin-top:1.6rem}
.article_body .article_refs{font-size:.85rem;line-height:1.6;word-break:break-word;overflow-wrap:anywhere}
.article_body a{overflow-wrap:anywhere}


/* src/styles/form-hold.css */
/* form-hold.css (Dr. Nahlah, 2026-11-03): each office form holds its own height from the first paint, and a ring sits in
   the held space until GoHighLevel reveals the form. Generated by bk-dr-nahlah scenario-7-seo-aeo/04-content-depth/output/
   2026-11-03-home-v3-round-5/code/form-hold.mjs from each form's measured height: re-run it there, never edit by hand. */
[data-wz-embed-slot]:has(iframe[src*="/widget/form/"]) { container: wz-form / inline-size; }
[data-wz-embed-slot]:has(iframe[src*="/widget/form/"]) > .wz-embed { position: relative; }
[data-wz-embed-slot]:has(iframe[src*="/widget/form/"]) > .wz-embed::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: clamp(3rem, 14%, 7.5rem);
  width: 28px; height: 28px; margin-left: -14px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--line, rgba(20,20,22,.13)); border-top-color: var(--rule, #8a7e4e);
  animation: wz-form-ring .9s linear infinite; pointer-events: none; transition: opacity .3s ease;
}
/* form_embed.js reveals the frame by setting opacity: 1 (and hides it with opacity: 0 before that) */
[data-wz-embed-slot] > .wz-embed:has(iframe[src*="/widget/form/"][style*="opacity: 1"])::before { opacity: 0; animation: none; }
/* round 6 (Alejandro: "It first loads with the overflow, then disappears, then loads again"): until form_embed.js runs, the
   frame is a plain 150px iframe showing the top of the form with its own scrollbar (real load, 1.0s); the script then parks it
   off-screen (4.8s) and reveals it sized (7.9s). It stays out of sight until that reveal; the ring holds the place. Not
   display:none, and not !important: the frame must load, and the script's inline reveal must win. If the script never comes
   (blocked), the frame shows itself after 20s rather than never. */
[data-wz-embed-slot] > .wz-embed iframe[src*="/widget/form/"]:not([style*="opacity: 1"]) { visibility: hidden; opacity: 0; animation: wz-form-late .01s 20s forwards; }
@keyframes wz-form-late { to { visibility: visible; opacity: 1; } }
@keyframes wz-form-ring { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-wz-embed-slot]:has(iframe[src*="/widget/form/"]) > .wz-embed::before { animation-duration: 2.4s; }
}
/* McLean (Tysons Corner) (axgcdqEPUFoHF8Dt5Nji): 0px+ 1309, 290px+ 1289, 300px+ 1269, 310px+ 1209, 340px+ 1189, 350px+ 1169, 360px+ 1129, 380px+ 1109, 400px+ 936, 430px+ 896, 450px+ 879, 460px+ 859, 490px+ 839, 530px+ 819, 570px+ 799, 600px+ 779, 680px+ 758, 740px+ 738 */
.wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1309px; }
@container wz-form (min-width: 290px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1289px; } }
@container wz-form (min-width: 300px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1269px; } }
@container wz-form (min-width: 310px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1209px; } }
@container wz-form (min-width: 340px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1189px; } }
@container wz-form (min-width: 350px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1169px; } }
@container wz-form (min-width: 360px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1129px; } }
@container wz-form (min-width: 380px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 1109px; } }
@container wz-form (min-width: 400px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 936px; } }
@container wz-form (min-width: 430px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 896px; } }
@container wz-form (min-width: 450px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 879px; } }
@container wz-form (min-width: 460px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 859px; } }
@container wz-form (min-width: 490px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 839px; } }
@container wz-form (min-width: 530px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 819px; } }
@container wz-form (min-width: 570px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 799px; } }
@container wz-form (min-width: 600px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 779px; } }
@container wz-form (min-width: 680px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 758px; } }
@container wz-form (min-width: 740px) { .wz-embed:has(iframe[src*="/widget/form/axgcdqEPUFoHF8Dt5Nji"]) { min-height: 738px; } }
/* Alexandria (g7FeioS7e7quSCxIQHRw): 0px+ 1349, 290px+ 1329, 300px+ 1269, 310px+ 1229, 330px+ 1209, 340px+ 1189, 350px+ 1169, 380px+ 1129, 400px+ 936, 430px+ 916, 450px+ 899, 460px+ 879, 470px+ 859, 500px+ 839, 530px+ 819, 590px+ 799, 640px+ 779, 690px+ 759, 750px+ 739 */
.wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1349px; }
@container wz-form (min-width: 290px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1329px; } }
@container wz-form (min-width: 300px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1269px; } }
@container wz-form (min-width: 310px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1229px; } }
@container wz-form (min-width: 330px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1209px; } }
@container wz-form (min-width: 340px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1189px; } }
@container wz-form (min-width: 350px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1169px; } }
@container wz-form (min-width: 380px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 1129px; } }
@container wz-form (min-width: 400px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 936px; } }
@container wz-form (min-width: 430px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 916px; } }
@container wz-form (min-width: 450px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 899px; } }
@container wz-form (min-width: 460px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 879px; } }
@container wz-form (min-width: 470px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 859px; } }
@container wz-form (min-width: 500px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 839px; } }
@container wz-form (min-width: 530px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 819px; } }
@container wz-form (min-width: 590px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 799px; } }
@container wz-form (min-width: 640px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 779px; } }
@container wz-form (min-width: 690px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 759px; } }
@container wz-form (min-width: 750px) { .wz-embed:has(iframe[src*="/widget/form/g7FeioS7e7quSCxIQHRw"]) { min-height: 739px; } }


/* src/styles/home-v3.css */
/* home-v2.css: /home-v2 only, 2026-11-02. Served verbatim after the registry; every rule hangs off a hv2- class. */

/* ---------- grounds: five light tones, so each chapter reads as its own. "only using white everywhere is not a good thing" ---------- */
:root{--hv2-sand:hsl(42,44%,90%);--hv2-champagne:hsl(45,38%,83%);--hv2-mist:hsl(208,20%,92%);--hv2-olive:hsl(48,30%,30%);--hv2-olive-ink:hsl(47,38%,86%);--section:clamp(3rem,6.5vw,6rem)}
#story{background:var(--hv2-sand)}
#credentials.hv2-creds{background:var(--hv2-champagne);border-bottom:0}
#why.section_content{background:var(--hv2-sand)}
#services.section_services,#services{background:var(--card)}
/* round 2: the before and after on black (Alejandro), in the site's dark token scope (data-theme="dark" on the section) */
#transformation,#transformation .transformation_pin{background:var(--bg)}
#cost.section_content{background:var(--hv2-sand)}
#path,#path .path_pin{background:var(--hv2-champagne)}
#specialist{background:var(--card)}
/* round 2: "Change this gray. I don't like it at all as a background": the cool mist is gone from the page */
#proof{background:var(--hv2-champagne)}
#filmed.section_content{background:var(--hv2-sand)}
#local-faq.section_content{background:var(--card)}
#cta-locations.hv2-close{background:var(--hv2-champagne)}
#cta-locations.hv2-close::after{display:none}

/* ---------- hero: promise, proof, and the check on the first screen ---------- */
.hv2-hero.section_arrival{align-items:flex-end;padding-top:clamp(5.75rem,13vh,8rem);padding-bottom:clamp(1rem,3vh,2rem)}
.hv2-hero .arrival_scroll-cue{display:none}
.hv2-hero .arrival_content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(.55rem,1.5vh,.95rem) clamp(1.5rem,3vw,3.5rem);align-items:center}
.hv2-hero .tagline_component{margin-bottom:0}
.hv2-hero .arrival_content>*{grid-column:1/-1;min-width:0}
/* !important: the accessibility widget pins an inline font-size on the title */
.section_arrival.hv2-hero p#heroTitle{font-size:calc(var(--d2) * .98)!important;line-height:1.08;max-width:none;margin:.2rem 0 .35rem}
.section_arrival.hv2-hero p#heroTitle em{display:block}
.hv2-hero .arrival_lead{max-width:74ch;margin:0 0 clamp(.3rem,1vh,.6rem)}
.hv2-hero .arrival_content>.arrival_actions{grid-column:1;margin:0}
.hv2-hero .arrival_content>.arrival_meta{grid-column:2;margin:0;padding:0;border:0;flex-wrap:nowrap;gap:clamp(1rem,2.4vw,2.5rem)}
.hv2-hero .arrival_meta b{font-size:calc(1.55rem * var(--t-mid));line-height:1.15}
.hv2-hero .arrival_meta span{font-size:.68rem;letter-spacing:.1em}

.hv2-quiz{display:grid;grid-template-columns:minmax(13rem,21%) minmax(0,1fr);column-gap:clamp(1.25rem,2.6vw,2.75rem);align-items:center;
  margin-top:clamp(1.75rem,4.5vh,3rem);padding:clamp(.9rem,1.5vw,1.35rem) clamp(1rem,1.9vw,1.75rem);
  background:var(--hv2-olive);color:var(--fg-body);border:0;border-top:2px solid var(--gold);box-shadow:0 22px 50px hsla(240,5%,8%,.24);
  --fg-soft:hsla(0,0%,100%,.82)}
/* round 2: "Let's try this on a black theme". data-theme="dark" on #check flips the site's tokens inside it (white type).
   round 3: "more spacing at the top ... a differentiator color but not too extreme": the site's own deep olive accent
   (--accent outside the dark scope), not black. Its small gold type is the light gold-ink, 5:1 on the olive. */
.hv2-quiz_title{font-family:var(--f-display);font-size:calc(1.6rem * var(--t-mid));line-height:1.15;color:var(--fg);font-weight:500;margin:0}
.hv2-quiz_note{font-size:.8rem;line-height:1.45;color:var(--fg-soft);margin:.3rem 0 0}
.hv2-quiz_panel{min-width:0}
.hv2-quiz_head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.55rem}
.hv2-quiz_question{font-weight:600;font-size:.98rem;line-height:1.3;color:var(--fg);margin:0 0 .55rem}
.hv2-quiz_head .hv2-quiz_question{margin:0}
.hv2-quiz_question:focus{outline:none}
.hv2-quiz_meta{flex:none;display:flex;align-items:baseline;gap:1rem}
.hv2-quiz_count{flex:none;font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--hv2-olive-ink)}
.hv2-quiz_options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.hv2-quiz_options[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.hv2-quiz_options[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.hv2-quiz_option{display:flex;align-items:center;min-height:3rem;padding:.6rem .9rem;background:hsla(0,0%,100%,.09);border:1px solid hsla(0,0%,100%,.28);
  font:inherit;font-size:.9rem;font-weight:500;line-height:1.25;color:var(--fg);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s}
.hv2-quiz_option:hover,.hv2-quiz_option:focus-visible{background:hsla(47,38%,86%,.2);border-color:var(--hv2-olive-ink);color:var(--fg)}
.hv2-quiz_option:focus-visible,.hv2-quiz_back:focus-visible,.hv2-quiz a:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.hv2-quiz_back{padding:0;background:none;border:0;font:inherit;font-size:.8rem;color:var(--hv2-olive-ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.hv2-quiz.is-done .hv2-quiz_panel{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1.25rem,2.6vw,2.75rem);align-items:center}
.hv2-quiz_line{font-size:.9rem;line-height:1.45;color:var(--fg-body);margin:0 0 .3rem}
.hv2-quiz_line:last-child{margin-bottom:0}
.hv2-quiz_topic{color:var(--hv2-olive-ink);font-weight:600}
.hv2-quiz_next{display:grid;justify-items:center;gap:.5rem}
.hv2-quiz_book{min-width:11rem}
.hv2-quiz_ask{font-size:.85rem;font-weight:600;color:var(--hv2-olive-ink);text-underline-offset:.2em}

/* ---------- credentials: where the others show press logos ---------- */
.hv2-creds_grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);padding-block:clamp(1.25rem,2.4vw,2rem)}
.hv2-creds_item{display:block;padding-left:.9rem;border-left:2px solid var(--gold-deep);font-size:.82rem;font-weight:500;line-height:1.4;color:var(--fg)}
/* round 4: each credential under its body's logo, every logo in one dark tone at one height, the caption under it */
.hv2-creds_cell{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;min-width:0}
.hv2-creds_mark{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(44px,4.4vw,58px)}
.hv2-creds_logo{display:block;height:100%;width:100%;object-fit:contain;filter:grayscale(1) brightness(.55) contrast(1.4);opacity:.82}
.hv2-creds_logo.hv2-creds_logo-ink{filter:brightness(0);opacity:.74}
.hv2-creds_cell .hv2-creds_item{padding-left:0;border-left:0;max-width:24ch;text-wrap:balance}

/* ---------- comparison ---------- */
.hv2-compare{display:grid;border-top:1px solid var(--line)}
.hv2-compare_row{display:grid;grid-template-columns:minmax(9rem,.62fr) minmax(0,1.3fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.hv2-compare_row>*{padding:clamp(.8rem,1.2vw,1.1rem) clamp(1rem,1.7vw,1.6rem)}
.hv2-compare_label{display:flex;align-items:center;padding-left:0;font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.hv2-compare_ours{position:relative;display:flex;align-items:center;padding-left:clamp(2.6rem,3.2vw,3.2rem);background:var(--card);color:var(--fg);font-weight:500}
.hv2-compare_ours::before{content:"";position:absolute;left:clamp(1rem,1.5vw,1.4rem);top:50%;width:.95rem;height:.5rem;margin-top:-.4rem;
  border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg)}
.hv2-compare_other{display:flex;align-items:center;color:var(--fg-body)}
.hv2-compare_tag{display:none}
.hv2-compare_more{display:block;margin-top:1rem;padding:0;background:none;border:0;font:inherit;font-size:max(.9rem,15px);font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.hv2-compare_head>*{padding-block:.8rem;font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hv2-compare_head .hv2-compare_ours{padding-left:clamp(1rem,1.7vw,1.6rem);background:var(--gold-ink);color:#fff}
.hv2-compare_head .hv2-compare_ours::before{display:none}

/* ---------- treatments: four doors, then the rest as links ---------- */
.hv2-services .services_grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:clamp(1rem,1.8vw,1.5rem);border-top:0}
.hv2-services .services_card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(1.25rem,2.2vw,2rem);row-gap:.5rem;
  padding:0;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.hv2-services .services_card>*{grid-column:2;padding-right:clamp(1.25rem,2.2vw,2rem)}
.hv2-services .services_card>.services_image-wrapper,.wz-svfollow .hv2-services .services_card>.services_image-wrapper{display:block;grid-column:1;grid-row:1 / -1;margin:0;padding:0;aspect-ratio:auto;height:100%;min-height:15rem}
.hv2-services .services_number{padding-top:clamp(1.25rem,2vw,1.75rem)}
.hv2-services .services_card h3{font-size:max(1.5rem,22px);line-height:1.2}
.hv2-services .services_more{padding-bottom:clamp(1.25rem,2vw,1.75rem)}
.services_cursor-image{display:none!important}
/* heads whole in their frames (Codex, 2026-11-03) */
.hv2-services .services_image-wrapper img[src*="28387-w1920"]{object-position:50% 20%}
.section_path .path_card .path_image-wrapper img[src*="8L6A7479"]{object-position:50% 50%}
.hv2-treatments{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-top:clamp(1.5rem,2vw,2rem)}
.hv2-treatments_label{font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.hv2-treatments_link{font-size:.92rem;color:var(--accent);text-decoration:underline;text-underline-offset:.2em}

/* ---------- cost and warranty ---------- */
.hv2-cost_grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,5rem);align-items:stretch}
.hv2-cost_copy h2{margin-bottom:1.1rem}
.hv2-cost_copy>p{max-width:60ch}
.hv2-cost_facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.1rem,2vw,1.75rem) clamp(1.25rem,2.6vw,2.5rem);margin-block:clamp(1.5rem,2.6vw,2.25rem)}
.hv2-cost_fact{display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:1rem;align-items:start;padding-top:.9rem;border-top:1px solid var(--gold-deep)}
.hv2-cost_fact>*{grid-column:2}
/* round 2: "let's put some icons on the list items". Line icons in the gold-deep ink, on a white disc */
.hv2-cost_fact::before{content:"";grid-column:1;grid-row:1 / span 2;width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--card) var(--hv2-icon) center/1.4rem no-repeat;border:1px solid var(--gold-light)}
.hv2-cost_fact:nth-child(1){--hv2-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E")}
.hv2-cost_fact:nth-child(2){--hv2-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21v-9M9.5 21v-9M14.5 21v-9M19 21v-9M12 3 3 8h18z'/%3E%3C/svg%3E")}
.hv2-cost_fact:nth-child(3){--hv2-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7.5-3.6 7.5-9.5V5.3L12 2.5 4.5 5.3V12c0 5.9 7.5 9.5 7.5 9.5z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E")}
.hv2-cost_fact:nth-child(4){--hv2-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7E4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2.5V8h5.5'/%3E%3Ccircle cx='11.5' cy='14' r='2.6'/%3E%3Cpath d='m13.4 15.9 2.1 2.1'/%3E%3C/svg%3E")}
.hv2-cost_figure{display:block;font-family:var(--f-display);font-size:var(--h3);line-height:1.15;color:var(--fg)}
.hv2-cost_detail{display:block;margin-top:.3rem;font-size:.92rem;line-height:1.5;color:var(--fg-body)}
.hv2-cost_links{display:flex;flex-wrap:wrap;gap:.75rem}
.hv2-cost_copy>p.hv2-cost_lead{font-size:max(1.25rem,18px);line-height:1.5;color:var(--fg)}
.hv2-warranty{display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:clamp(1.75rem,3vw,3rem);background:var(--card);border:1px solid var(--gold-light);border-top:3px solid var(--gold-deep)}
.hv2-warranty_years{font-family:var(--f-display);font-size:var(--d2);line-height:1;color:var(--accent-lg)}
.hv2-warranty_title{font-size:var(--h3);line-height:1.2;margin:0}
.hv2-warranty p{margin:0}
.hv2-warranty .hv2-warranty_condition{padding-top:.9rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--fg-body)}

/* ---------- Melanie's story ---------- */
@media (min-width:1024px){#story .proof_story{grid-template-columns:1.2fr 1fr}}
#story blockquote{font-size:clamp(1.9rem,2.5vw,2.5rem);line-height:1.2}
/* the reviews kept the home's gap for a story above them, which moved to #story: the tagline sat 110px over its heading */
#proof .proof_reviews{margin-top:0}
/* round 4: each office's Elfsight widget under the office's name. The widget renders late and is 335px tall at every width:
   that height is held, so nothing below it moves when it arrives */
.hv2-reviews_offices{display:grid;gap:clamp(2rem,4vw,3rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
.hv2-reviews_label{display:block;margin:0 0 .5rem}
.hv2-reviews_office [class*="elfsight-app-"]{min-height:335px}

/* ---------- films: one spacing inside each card, and a second row of two, centred under the first ("another row") ---------- */
#filmed .card_component{row-gap:clamp(1rem,1.5vw,1.4rem)}
#filmed .card_component>*{margin:0}
#filmed .hv2-films_more{margin-top:clamp(var(--space-small),1.8vw,1.5rem)}
@media (min-width:720px){#filmed .hv2-films_more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){
  #filmed .hv2-films_more{grid-template-columns:repeat(6,minmax(0,1fr))}
  #filmed .hv2-films_more>:nth-child(1){grid-column:2 / span 2}
  #filmed .hv2-films_more>:nth-child(2){grid-column:4 / span 2}
}

/* ---------- closing band: the contact panel, without its page-top spacing ---------- */
.hv2-close.section_page-hero{min-height:0;padding-top:var(--section);padding-bottom:var(--section)}
.hv2-close.section_page-hero .contact-panel_info h2{font-size:var(--h2);line-height:1.12;max-width:none;padding:0}
.hv2-close_lead{max-width:48ch;margin:.6rem 0 1rem}

/* ---------- the two pinned chapters: held in the space under the header, at every laptop window ---------- */
@media (min-width:992px){
  #transformation .transformation_pin{box-sizing:border-box;padding-top:112px;padding-bottom:14px}
}
@media (min-width:992px) and (max-height:900px){
  #transformation .transformation_pin>.container-large{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1.5rem,3vw,3rem);align-items:center}
  #transformation .transformation_head{grid-column:1;grid-row:1 / span 2;margin:0}
  #transformation .transformation_compare{grid-column:2;grid-row:1;width:min(calc((100svh - 11rem) * 16 / 9),60vw);height:auto;aspect-ratio:16/9}
  #transformation .transformation_footer{grid-column:2;grid-row:2;margin-top:.6rem}
}
/* ---------- How It Works, round 2. Alejandro: the progress line "is too close ... If you are setting up the outer element depending
   on the viewport height, let's not do that ... more spacing between the number, the heading, the paragraph, and also the actual photo".
   The head now sits above the pin (build.mjs); the pin is only the cards and the line, as tall as they are. home-v2.js holds it
   centred under the header; nothing here reads the window's height. ---------- */
#path.section_path{padding-top:var(--section);padding-bottom:var(--section)}
#path .hv2-path_head{margin-bottom:clamp(1.75rem,3.2vw,3rem)}
#path .path_pin{min-height:0;padding:0;display:block}
#path .path_track{padding-bottom:0}
#path .path_progress-bar{position:relative;left:auto;right:auto;bottom:auto;margin:clamp(2.5rem,4vw,3.5rem) var(--pa-inset-end) 0 var(--pa-inset)}
#path .path_card{gap:0;padding:clamp(1.5rem,2.4vw,2.4rem)}
#path .path_card .path_number{margin:0 0 clamp(.9rem,1.3vw,1.25rem)}
#path .path_card h3{margin:0 0 clamp(.6rem,.9vw,.85rem)}
#path .path_card p{margin:0 0 clamp(1.25rem,1.9vw,1.75rem)}
#path .path_card .path_image-wrapper{margin-top:auto;aspect-ratio:2/1}
/* heads whole in the wider frame (Codex, round 2): the doctor in Final Restoration, the patient in Changing My Smile */
#path .path_card .path_image-wrapper img[src*="dr-with-patient"]{object-position:50% 12%}
#path .path_card .path_image-wrapper img[src*="22237"]{object-position:50% 48%}
.hv2-services .services_image-wrapper img[src*="consult-discussion"]{object-position:50% 12%}
/* the shortest laptop window (1512x614): the line sat under the window's foot. The photos give way, not the box (Codex, round 2) */
/* a short window keeps the first screen's fit: the check's added room above it pushed the hero's first line under the nav at 1512x614 */
@media (min-width:768px) and (max-height:680px){.hv2-hero .hv2-quiz{margin-top:1.1rem}}
@media (min-width:992px) and (max-height:680px){
  #path .path_card .path_image-wrapper{aspect-ratio:5/2}
  #path .path_progress-bar{margin-top:1.5rem}
}

@media (max-width:1279px){
  /* three to a row and the short row centred, never two stranded on the left */
  .hv2-creds_grid{display:flex;flex-wrap:wrap;justify-content:center}
  .hv2-creds_cell{flex:0 1 calc((100% - 2 * clamp(1rem,2vw,2rem)) / 3)}
}
@media (max-width:991px){
  .hv2-hero .arrival_content{grid-template-columns:minmax(0,1fr)}
  .hv2-hero .arrival_content>.arrival_actions,.hv2-hero .arrival_content>.arrival_meta{grid-column:1}
  .hv2-hero .arrival_content>.arrival_meta{margin-top:1rem}
  .hv2-quiz{grid-template-columns:minmax(0,1fr);row-gap:.7rem}
  .hv2-cost_grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .hv2-hero.section_arrival{padding-top:5.25rem}
  .hv2-quiz{padding:16px}
  .hv2-quiz_title{font-size:20px}
  .hv2-quiz_note{font-size:13px}
  .hv2-quiz_question{font-size:16px}
  .hv2-quiz_count,.hv2-quiz_back{font-size:12px}
  .hv2-quiz_option{min-height:48px;font-size:15px;padding:10px 12px}
  .hv2-quiz_line{font-size:15px}
  .hv2-compare_row{grid-template-columns:minmax(0,1fr)}
  .hv2-compare_head{display:none}
  .hv2-compare_row>*{padding:12px 14px}
  .hv2-compare_label{padding:16px 0 4px;font-size:12px}
  .hv2-compare_ours,.hv2-compare_other{display:grid;gap:4px;padding-left:14px;font-size:16px;line-height:1.45}
  .hv2-compare_ours{padding-left:40px}
  .hv2-compare_ours::before{top:22px;margin-top:0}
  .hv2-compare_tag{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .hv2-compare.is-folded .hv2-compare_row:nth-child(n+6){display:none}
  .hv2-services .services_grid{grid-template-columns:minmax(0,1fr)}
  .hv2-services .services_card{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hv2-services .services_card>*{grid-column:1;padding-left:18px;padding-right:18px}
  .hv2-services .services_card>.services_image-wrapper,.wz-svfollow .hv2-services .services_card>.services_image-wrapper{grid-row:auto;aspect-ratio:16/9;height:auto;min-height:0;padding:0}
  .hv2-services .services_card h3{font-size:22px}
  .hv2-services .services_card p{font-size:15px}
  .hv2-cost_copy>p.hv2-cost_lead{font-size:18px}
  .hv2-hero .arrival_actions .button.is-secondary{display:none}
  .hv2-hero .arrival_content>.arrival_meta{margin-top:.5rem;gap:.75rem}
  .hv2-hero .arrival_meta div{flex:1 1 0;min-width:0}
  .hv2-hero .arrival_meta span{font-size:var(--label);letter-spacing:.06em;line-height:1.3}
  .hv2-quiz_options,.hv2-quiz_options[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv2-quiz.is-done .hv2-quiz_panel{grid-template-columns:minmax(0,1fr);row-gap:.8rem}
  .hv2-quiz_next{justify-items:stretch;text-align:center}
  .hv2-creds_cell{flex-basis:calc((100% - clamp(1rem,2vw,2rem)) / 2)}
    .hv2-cost_facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:479px){
  .hv2-creds_grid{row-gap:1.6rem}
}

/* home-v3.css: /home-v3 only, 2026-11-03, served after home-v2.css. Alejandro: "create a version 3 and let's add the form into
   the hero section". The hero is two columns: the promise, proof and credentials on the left; on the right the office toggle,
   that office's number and calendar, and its form. */

/* ---------- the hero ---------- */
.hv3-hero.section_arrival{align-items:flex-start;min-height:0;padding-top:clamp(6.5rem,12vh,8.25rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.hv3-hero_grid{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(2rem,4.5vw,5rem);align-items:start;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-right:var(--gutter);padding-left:calc(var(--gutter) + var(--rail))}
/* round 3: "Let's add a margin top of 2rem" (on a phone the column is display:contents, so this is the desktop's) */
.hv3-hero_grid .arrival_content{max-width:none;margin:2rem 0 0;padding:0;grid-template-columns:minmax(0,1fr)}
.hv3-hero .arrival_content>.arrival_actions,.hv3-hero .arrival_content>.arrival_meta{grid-column:1}
.hv3-hero .arrival_content>.arrival_meta{flex-wrap:wrap;row-gap:.9rem;margin-top:.3rem}
.section_arrival.hv3-hero p#heroTitle{font-size:calc(var(--d2) * .8)!important}
/* 2026-11-06: beside the form the hero column is 8.5-11em wide, and SplitText fixes the lines once, sometimes before
   Playfair's italic face has loaded (faux italic from the regular face is ~15% wider): "Often in Just One / Day." came and
   went from load to load at 1050-1440. Capped under "Often in Just One" in both faces (7.5em real, ~8.6em faux) and over
   "Often in Just" (5.55em, ~6.4em faux): every desktop width reads "Often in Just / One Day.". text-wrap:balance does
   nothing here (SplitText measures its own spans), nor does a no-break space (it splits on it). Below 992 the hero stacks
   and the line has 12.9em or more. */
@media (min-width:992px){.section_arrival.hv3-hero p#heroTitle em{max-width:7em}}
.hv3-hero .arrival_lead{max-width:52ch}

/* the film keeps the first screen's scale: the hero is taller than the window, and a film covering all of it showed only
   ceiling on a phone (Codex, round 2). It ends under a solid wash, well inside the section, so no edge of it can show. */
.hv3-hero .arrival_film{min-height:0;height:calc(100svh + 8px);bottom:auto}
.hv3-hero .arrival_background::before{display:block;content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent calc(100svh - 320px),var(--bg) calc(100svh - 60px))}

/* the booking panel: the toggle, its form, then the office's line (round 3: "put this at the bottom so the form shows first") */
.hv3-hero_book{position:relative;z-index:4;min-width:0}
.hv3-hero .contact-panel_forms{box-shadow:0 24px 60px hsla(240,5%,8%,.14)}
.hv3-hero .contact-panel_forms .office-card_component{background:none;margin:.6rem 0 0;padding:1.1rem .4rem .3rem;border-top:1px solid var(--line);
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name book" "phone dir";column-gap:1.25rem;row-gap:.35rem;align-items:center}
.hv3-hero .contact-panel_forms .office-card_component h3{grid-area:name;font-size:calc(1.35rem * var(--t-mid));line-height:1.2;margin:0}
.hv3-hero .contact-panel_forms .office-card_component address,
.hv3-hero .contact-panel_forms .office-card_component .office-card_line~.office-card_line{display:none}
.hv3-hero .contact-panel_forms .office-card_component .office-card_line{grid-area:phone;display:flex;align-items:baseline;gap:.6rem;padding:0;border:0}
.hv3-hero .contact-panel_forms .office-card_component .office-card_line a{font-size:calc(1.3rem * var(--t-mid))}
.hv3-hero .contact-panel_forms .office-card_component .button{grid-area:book;min-width:11rem}
.hv3-hero .contact-panel_forms .office-card_component .office-card_directions{grid-area:dir;justify-self:center;margin:0}

/* ---------- the candidate check, in a band of its own ---------- */
.hv3-check.section_content{background:var(--card);padding-block:clamp(2.5rem,5vw,4rem)}
.hv3-check .hv2-quiz{margin-top:0}

/* round 5: "Let's make this sticky. Make sure it's vertically centered on every layout". Beside the form, the promise's box
   fills the first screen under the header (the hero's top padding to 3vh above the screen's foot) and centres its words in
   it; home-v2.js heroHold() pins that box while the form column scrolls. It replaces round 3's 2rem top margin. Descendant
   selectors, not ">": the pin moves the box into a pin-spacer, and a child rule then stops matching (the rows stretched). */
@media (min-width:992px){
  .hv3-hero_grid .arrival_content{margin-top:0;min-height:calc(100svh - clamp(6.5rem,12vh,8.25rem) - clamp(1rem,3vh,2rem));align-content:center}
}
/* under 1280 there is no left rail and the words start where the accessibility widget's round button sits (fixed, bottom
   left): at 1089x762 it covered "Warranty on Implants" while the words held. Centre them in the space above it (5.5rem, the
   house dock offset for that button). */
@media (min-width:992px) and (max-width:1279px){
  .hv3-hero_grid .arrival_content{min-height:calc(100svh - clamp(6.5rem,12vh,8.25rem) - 5.5rem)}
}
@media (max-width:991px){
  .hv3-hero_grid{grid-template-columns:minmax(0,1fr);row-gap:2.25rem}
}
@media (max-width:767px){
  .hv3-hero.section_arrival{padding-top:5.5rem}
  .hv3-hero_grid{padding-left:var(--gutter)}
  /* on a phone the form follows the promise */
  .hv3-hero_grid>.arrival_content{display:contents}
  .hv3-hero_grid>.arrival_content>*{position:relative}
  .hv3-hero_book{order:1}
  .hv3-hero .contact-panel_forms .office-card_component{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "phone" "book" "dir";row-gap:.6rem}
  .hv3-hero .contact-panel_forms .office-card_component .button{width:100%}
  .hv3-hero .contact-panel_forms .office-card_component .office-card_directions{justify-self:start}
}

/* #film (2026-11-10, Alejandro: the hero film did not make sense behind the form): its own section, framed, muted loop */
.hv3-hero .arrival_background{background:var(--bg)}
.hv3-film_head{max-width:52rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.hv3-film_head .tagline_component{margin-bottom:1rem}
.hv3-film_head h2{margin:0 0 1rem}
.hv3-film_head p{max-width:60ch;margin:0}
.hv3-film_frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--card);box-shadow:0 22px 50px hsla(240,5%,8%,.14)}
.hv3-film_frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#practice-film.section_content{background:var(--hv2-sand)}

.hv3-film_frame{max-width:calc(70vh * 16 / 9);margin-inline:auto}

/* #practice-film v2 (2026-11-10, Alejandro: under the questionnaire, lead with the specialist): copy left, film right */
#practice-film .hv3-film_grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
#practice-film .hv3-film_copy .tagline_component{margin-bottom:1rem}
#practice-film .hv3-film_copy h2{margin:0 0 1.5rem}
#practice-film .hv3-film_stat{padding:1.25rem 0 1.25rem 1.25rem;border-left:2px solid var(--gold-deep);margin-bottom:1.75rem}
#practice-film .hv3-film_stat-num{display:block;font-family:var(--f-display);font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.1;color:var(--accent)}
#practice-film .hv3-film_stat-text{margin:.6rem 0 0;max-width:46ch;color:var(--fg-body)}
#practice-film .hv3-film_points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
#practice-film .hv3-film_point-big{display:block;font-family:var(--f-display);font-size:calc(var(--h3) * .8);line-height:1.15;color:var(--fg)}
#practice-film .hv3-film_point-small{display:block;margin-top:.3rem;font-size:var(--label);letter-spacing:.08em;line-height:1.45;text-transform:uppercase;color:var(--fg-body)}
#practice-film .hv3-film_frame{max-width:none;margin:0}
@media (max-width:991px){#practice-film .hv3-film_grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){#practice-film .hv3-film_points{grid-template-columns:minmax(0,1fr)}}

/* #fp1 (2026-11-10, Alejandro: highlight that he does FP1): the site's FP image on its black card, FP1 ringed in gold */
#fp1.section_content{background:var(--hv2-champagne)}
.hv3-fp_head{max-width:58rem;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.hv3-fp_head .tagline_component{margin-bottom:1rem}
.hv3-fp_head h2{margin:0 0 1rem}
.hv3-fp_lead{max-width:62ch;margin:0;font-size:max(1.12rem,17px);line-height:1.55;color:var(--fg)}
.hv3-fp_figure{position:relative;background:#000;padding:clamp(1rem,2.5vw,2.25rem) clamp(1rem,2.5vw,2.25rem) clamp(.5rem,1vw,1rem);box-shadow:0 24px 60px hsla(240,5%,8%,.22)}
.hv3-fp_img{display:block;width:100%;height:auto}
.hv3-fp_ring{position:absolute;top:clamp(.5rem,1.2vw,1rem);bottom:clamp(.25rem,.6vw,.5rem);left:clamp(.5rem,1.2vw,1rem);width:calc((100% - 2 * clamp(1rem,2.5vw,2.25rem)) / 3 + clamp(.5rem,1.3vw,1.25rem));border:2px solid var(--gold,#c9b27a);pointer-events:none}
.hv3-fp_badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:.35em .9em;background:var(--gold,#c9b27a);color:#111;font-size:var(--label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.hv3-fp_types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(1.25rem,2.5vw,2rem)}
.hv3-fp_type{padding:clamp(1.1rem,1.8vw,1.5rem);border-top:1px solid var(--line);color:var(--fg-body)}
.hv3-fp_type-ours{background:var(--card);border-top:3px solid var(--gold-deep);box-shadow:0 14px 34px hsla(240,5%,8%,.08)}
.hv3-fp_type-label{display:block;font-family:var(--f-display);font-size:clamp(1.6rem,2.2vw,2.1rem);line-height:1;color:var(--fg-body)}
.hv3-fp_type-ours .hv3-fp_type-label{color:var(--gold-deep)}
.hv3-fp_type-title{margin:.5rem 0 .6rem;font-size:calc(var(--h3) * .72);line-height:1.2;color:var(--fg)}
.hv3-fp_type-list{display:grid;gap:.35rem}
.hv3-fp_type-item{position:relative;margin:0;padding-left:1.1em;font-size:.97rem;line-height:1.5}
.hv3-fp_type-item::before{content:"";position:absolute;left:0;top:.62em;width:.38em;height:.38em;border-radius:50%;background:var(--gold-deep)}
.hv3-fp_foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2.5rem;margin-top:clamp(1.25rem,2.5vw,2rem)}
.hv3-fp_note{max-width:68ch;margin:0;font-size:.97rem;line-height:1.55;color:var(--fg-body)}
@media (max-width:767px){
  .hv3-fp_types{grid-template-columns:minmax(0,1fr)}
  .hv3-fp_badge{font-size:10px;letter-spacing:.08em}
}


/* src/styles/specialist-plate.css */
/* specialist plate, no scroll drift (2026-11-10) */
.specialist_plate img{transform:translate(-50%,0)!important;will-change:auto}