/* src/styles/tokens.css */
/* Residual: what the style registry cannot hold. Everything else moved to the registry (css-to-registry.mjs). */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/uploads/Y7o19N-xH60Ud2gl34jY7-bodoni-moda-var.woff2") format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;
  src:url("/uploads/xH9g-p6Pj3lbiwdi7pr53-bodoni-moda-italic-var.woff2") format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/uploads/6gNIDElj53x4YcodnajZT-manrope-var.woff2") format('woff2')}


/* src/styles/wla-review-3.css */
/* ==========================================================================
   REVIEW ROUND 3 — Brandklout BugHerd, 2026-10-07/08 (pins #39-#112). Shipped
   verbatim as src/styles/wla-review-3.css (21-instatic-upload/apply-bugherd-round3.mjs
   translates these Client-First names to whatever the target instance still uses).
   Main site only where it says body:not(.is-landing-page): the ad pages were
   reviewed on their own and keep their motion (wla-lp-pins.js).
   ========================================================================== */

/* ---------- faces: variable woff2 (Latin), own family names so no static install shadows them ---------- */
@font-face{font-family:'Lora WLA';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/uploads/mKh01XySMUcP_1J1EwMA3-lora-normal-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora WLA';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/uploads/VZfTawvG7YF9MaCaQ-KWV-lora-italic-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond WLA';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/uploads/WEj5iGnRccv2iYUv8JLEq-cormorant-garamond-normal-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond WLA';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('/uploads/aQg-HO3zCZO0swNuT6tU5-cormorant-garamond-italic-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* #50 #51 #96 every "The Proof" heading in Lora SemiBold */
.section_before-after .before-after_content .heading-style-h2,
.section_before-after .before-after_content .heading-style-h2 em{font-family:'Lora WLA',Georgia,serif;font-weight:600;font-variation-settings:normal}
.section_before-after .before-after_content .heading-style-h2{letter-spacing:-.01em}
/* #97 every proof quote in Cormorant Garamond SemiBold */
.section_before-after .before-after_quote{font-family:'Cormorant Garamond WLA',Georgia,serif;font-weight:600;font-variation-settings:normal;letter-spacing:0;font-size:calc(var(--t-quote) * 1.08);max-width:24ch}
/* #66 the statement banner in Lora SemiBold, on every page; the home page's reality
   line is the same banner and follows it */
.section_statement .statement_text,.section_reality .reality_statement{font-family:'Lora WLA',Georgia,serif;font-weight:600;font-variation-settings:normal;letter-spacing:-.01em}
/* #64 the questions heading in Playfair Display SemiBold, like the H1s (#24) */
body:not(.is-landing-page) .faq-section_head .heading-style-h2,body:not(.is-landing-page) .faq-section_head .heading-style-h2 em{font-family:'Playfair Display WLA',var(--serif);font-weight:600;font-variation-settings:normal}

/* ---------- #41 #42 #55 the statement and the reality line: not pinned, every word shown ---------- */
body:not(.is-landing-page) .section_statement .statement_stage,
body:not(.is-landing-page) .section_reality .reality_stage{min-height:0}
body:not(.is-landing-page) .section_statement .statement_text .wz-word,
body:not(.is-landing-page) .section_reality .reality_statement .wz-word{opacity:1!important}
body:not(.is-landing-page) .section_statement .statement_after,
body:not(.is-landing-page) .section_reality .reality_after{opacity:1!important;transform:none!important}

/* ---------- #39 compare: not pinned, the three gold boxes at once ---------- */
body:not(.is-landing-page) .section_compare .compare_pin{min-height:0}
body:not(.is-landing-page) .section_compare .compare_column,
body:not(.is-landing-page) .section_compare .compare_column li{opacity:1!important;transform:none!important}
body:not(.is-landing-page) .section_compare .compare_column{border-color:var(--gold)}
body:not(.is-landing-page) .section_compare .compare_column.is-hot{background:rgba(196,163,106,.08)}
body:not(.is-landing-page) .section_compare .compare_track i{transform:scaleX(1)!important}

/* ---------- #45 the ledger: not pinned, every row readable; the row under the pointer lights up ---------- */
body:not(.is-landing-page) .section_ledger .ledger_pin{min-height:0}
body:not(.is-landing-page) .section_ledger .ledger_list::before{transform:scaleY(1)}
body:not(.is-landing-page) .section_ledger .ledger_list li{opacity:1;transform:none;position:relative;transition:opacity .35s,background-color .35s,padding-left .45s var(--ease-out)}
body:not(.is-landing-page) .section_ledger .ledger_list li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out)}
body:not(.is-landing-page) .section_ledger .ledger_list li b{transition:color .3s}
@media (hover:hover){
  body:not(.is-landing-page) .section_ledger .ledger_list:hover li{opacity:.55}
  body:not(.is-landing-page) .section_ledger .ledger_list li:hover{opacity:1;background-color:rgba(196,163,106,.07);padding-left:2rem}
  body:not(.is-landing-page) .section_ledger .ledger_list li:hover::after{transform:scaleY(1)}
  body:not(.is-landing-page) .section_ledger .ledger_list li:hover b{color:var(--gold-deep)}
}

/* ---------- #49 before/after: not pinned. Since round 4 (#118 #130 #134) it is a drag slider: 07-review-4.css + 96-review-4.js ---------- */
body:not(.is-landing-page) .section_before-after .before-after_pin{min-height:0}

/* ---------- #43 #46 the pinned steps say "Scroll" (wla-review-3.js adds the cue while the pin runs) ---------- */
.steps_scroll-cue{display:none}
.section_steps.has-scroll-cue .steps_scroll-cue{display:flex;align-items:center;gap:.9rem;margin-top:1.75rem;font-size:var(--t-micro);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);transition:opacity .4s}
.steps_scroll-cue i{display:block;width:1px;height:2.6rem;background:linear-gradient(180deg,var(--gold),transparent);transform-origin:top;animation:wla-cue 2.2s cubic-bezier(.65,0,.35,1) infinite}
.section_steps.is-steps-done .steps_scroll-cue{opacity:0}
@keyframes wla-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.steps_scroll-cue i{animation:none}}

/* ---------- #65 footer: the name and the line centred on top, then five equal columns ---------- */
.footer_component .footer_brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:2.75rem;margin-bottom:3rem;border-bottom:1px solid var(--line-soft)}
.footer_component .footer_brand .footer_about{margin:1.1rem auto 0;max-width:none;text-wrap:balance}
.footer_component .footer_grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5rem 2rem}
.footer_component .footer_grid p{margin-bottom:0}
@media (max-width:991px){.footer_component .footer_grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.footer_component .footer_grid{grid-template-columns:1fr 1fr}}
@media (max-width:479px){.footer_component .footer_grid{grid-template-columns:1fr}}

/* ---------- #59 #60 the primary nav carries seven links. They fit from 1280 to 2560 once the
   phone number gives up its place in the bar (it stays on the cover buttons, the invitation, the
   footer and the phone bar); below the laptop breakpoint the links fold into the menu, which has
   them all. Measured: no overflow at any width 1280-1920 (scratchpad navfit.mjs). ---------- */
body:not(.is-landing-page) .nav_component .nav_phone{display:none}
/* the chapter readout ("05 · The Proof") was squeezed to a clipped word at 1440; the reading
   progress line along the top of the bar stays */
body:not(.is-landing-page) .nav_component .nav_readout{display:none}
body:not(.is-landing-page) .nav_component .nav_links{gap:1.25rem}
@media (max-width:1279px){body:not(.is-landing-page) .nav_component .nav_links{display:none}}

/* ---------- #94 general dentistry: the statement on the left, the services as a list on the right ---------- */
.section_statement[data-st-services] .statement_services .faq_list{margin-top:.25rem}
.section_statement[data-st-services] .statement_services .faq_question{font-size:var(--t-lead);font-weight:500;padding:1rem 0}
.section_statement[data-st-services] .statement_services .faq_answer p{font-size:var(--t-small);padding-bottom:1.1rem}

/* ---------- #59 #60 the hub pages: the linked pages as photo cards ---------- */
.section_post-index[data-hub] .post-index_card .heading-style-h3{font-size:1.5rem}
.section_post-index[data-hub] .post-index_card .text-size-small{max-width:34ch}
.section_post-index[data-hub] .post-index_date{color:var(--gold-deep);font-weight:700;letter-spacing:.18em}


/* src/styles/wla-review-4.css */
/* ==========================================================================
   REVIEW ROUND 4 — Brandklout BugHerd, 2026-10-19/20. Shipped as its own code
   asset, src/styles/wla-review-4.css; the behaviour is js/96-review-4.js.
   Main site only (the ad pages keep their own).
   ========================================================================== */

/* before/after (#118 #130 #134): a slider, not a hover swap. Round 3's swap rules are gone
   from 06-review-3.css; the clip and the handle start at the middle, the script moves them. */
body:not(.is-landing-page) .section_before-after .before-after_stage{cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
body:not(.is-landing-page) .section_before-after .before-after_after{clip-path:inset(0 0 0 50%)}
body:not(.is-landing-page) .section_before-after .before-after_handle{left:50%}
body:not(.is-landing-page) .section_before-after .before-after_stage::after{content:"Drag or hover to compare";position:absolute;right:1rem;bottom:1rem;z-index:3;background:rgba(250,248,244,.9);color:var(--ink);padding:.45rem .75rem;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
body:not(.is-landing-page) .section_before-after .before-after_stage.is-touched::after{opacity:0}
body:not(.is-landing-page) .section_before-after .before-after_stage:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (hover:none){
  body:not(.is-landing-page) .section_before-after .before-after_stage::after{content:"Drag to compare"}
}

/* steps (#119 …): one photo per step. Pinned: they cross-fade in the one frame. Not pinned
   (phones, reduced motion): each step carries its own photo and the shared frame steps aside. */
.steps_image-wrapper img + img{opacity:0}
.steps_image-wrapper.has-step-photos img{opacity:0;transition:opacity .7s var(--ease-out)}
.steps_image-wrapper.has-step-photos img.is-current{opacity:1}
.steps_image-wrapper.has-inline-photos{display:none}
.steps_step .steps_image-wrapper.is-inline{margin-top:1.2rem;aspect-ratio:16/10}

/* the cursor dot (#149, "remove the dot that is the mouse") */
.cursor_component{display:none}

/* ledger rows that link out (#154, /financing: each lender's application) */
.section_ledger .ledger_list li > .arrow-link_component{grid-column:2;justify-self:start;margin-top:.55rem}

/* ledger photos (#132, /technology): a photo per row in the sticky column */
.ledger_photo{position:relative;margin-top:2rem;height:clamp(14rem,40vh,26rem);border:1px solid var(--line-soft)}
.ledger_head:has(.ledger_photo) .ledger_figure{display:none} /* "Eleven tools" is in the heading; the photo needs the height */
.ledger_photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-out)}
.ledger_photo img.is-current{opacity:1}
.ledger_photo img:first-child{opacity:1}
.ledger_photo[data-wz-rows] img:first-child:not(.is-current){opacity:0}
@media (max-width:1023px){.ledger_photo{display:none}}


/* src/styles/wla-review-5.css */
/* ==========================================================================
   08 — REVIEW 5 (Brandklout design notes, 2026-10-20, Chrome 1432x1002)
   Shipped as src/styles/wla-review-5.css by apply-design-r6.mjs, after
   wla-review-4.css. Client-First names; the patch translates them to the
   old names on production.
   ========================================================================== */

/* "We have this recurrent problem with these types of buttons" (/dental-implants,
   "Zirconia bridges →"): an arrow link is as wide as its words. In a flex column
   (the compare columns) or a grid cell it stretched to the column, 364px for 134px
   of text, and the underline ran the full width. A set width is not stretched. */
.arrow-link_component{width:fit-content;max-width:100%}

/* "The alignment of the buttons should be fixed ... across the site" (/surgery-and-care):
   a button and an arrow link side by side share one centre line. The link's
   underline padding sat under the text only, so its words rode 3px high; the same
   padding above puts the text on the button's centre. */
:is(.cover_actions,.arrival_actions,.photo-strip_actions,.before-after_actions,.landing_actions,.location_actions,.detail_actions,.gallery_actions) > .arrow-link_component{padding-top:.35rem}
.before-after_actions,.gallery_actions{align-items:center}

/* "The menu does not have a close button": the nav (z 60) is its own stacking
   context, so the button's z 70 never rose above the open drawer (z 65), which
   covered the X. While the menu is open the nav sits over the drawer. */
.nav_component.is-menu-open{z-index:66}

/* "The H1s on the hero sections are too big and it makes the section too tall":
   102px titles in 11ch ran to four lines and pushed the cover past one screen
   (1122px at 1432x1002). About a quarter smaller, a wider measure. Every
   breakpoint is restated here in descending order: production's landing title
   had its 1279 rule after its 767 one, so phones got the tablet size.
   Specificity comes from context and `main`, never a repeated class: the
   production translation renames only the first class of a chain. */
.section_cover .cover_title{font-size:4.75rem;max-width:15ch}
/* the split cover's photograph was the other half of it: 4:5 at full column width
   (744px at 1432x1002) plus the padding, row gap and fact row (378px) is 1122px. Literal rem: production
   has no --space-* tokens (4rem padding x2, 4rem gap, 7.5rem for the fact row).
   Capped so the whole cover is one screen, by its WIDTH: the frame keeps its 4:5 and narrows.
   The first cap set max-height and left the width, so on a wider window the frame turned into a
   2:1 band and cut Dr. Barriere's face off at the eyes ("the doctor's face is cutting again").
   A capped height with a free width crops harder as the window grows (IMAGES.md §2a). */
.is-split .cover_image-wrapper{max-height:none;width:min(100%,calc((100svh - var(--nav-h) - 19.5rem) * .8));justify-self:end}
main .section_cover .is-small{font-size:2.75rem;max-width:24ch;line-height:1.12}
.section_arrival .heading-style-display{font-size:5rem;max-width:13ch}
main :is(.section_landing-hero,.section_consultation,.section_thank-you) .landing_title{font-size:3.75rem;max-width:15ch}
main :is(.section_landing-hero,.section_consultation,.section_thank-you) .is-form-page-title{font-size:3.4rem;max-width:14ch}
@media (max-width:1279px){
  .section_cover .cover_title{font-size:4.1rem}
  main :is(.section_landing-hero,.section_consultation,.section_thank-you) .landing_title{font-size:3.4rem}
  main :is(.section_landing-hero,.section_consultation,.section_thank-you) .is-form-page-title{font-size:3.1rem}
}
@media (max-width:1023px){
  .is-split .cover_image-wrapper{max-height:60svh;width:100%;justify-self:stretch} /* one column: the photo follows the copy */
  .section_cover .cover_title{font-size:3.6rem}
  .section_arrival .heading-style-display{font-size:4rem}
  main :is(.section_landing-hero,.section_consultation,.section_thank-you) .landing_title{font-size:3.1rem;max-width:none}
  main :is(.section_landing-hero,.section_consultation,.section_thank-you) .is-form-page-title{font-size:2.9rem;max-width:none}
}
@media (max-width:767px){
  .section_cover .cover_title{font-size:2.9rem;max-width:none}
  main .section_cover .is-small{font-size:1.9rem}
  .section_arrival .heading-style-display{font-size:3rem;max-width:none}
  main :is(.section_landing-hero,.section_consultation,.section_thank-you) .landing_title{font-size:2.4rem}
  main :is(.section_landing-hero,.section_consultation,.section_thank-you) .is-form-page-title{font-size:2.3rem}
}

/* "This font is different from the H1 heading" (home, "The Reality"): the reality line
   sets in the H1's face, Playfair Display SemiBold. Round 3 had given it the statement
   banners' Lora (#66 asked that for the banners on the service pages only; they keep it). */
main .section_reality .reality_statement{font-family:'Playfair Display WLA',var(--serif);font-weight:600;font-variation-settings:normal;letter-spacing:-.015em}


/* src/styles/wla-review-6.css */
/* ==========================================================================
   REVIEW ROUND 5 — Alejandro's BugHerd pins #167-#174, 2026-10-21 (Chrome 1685x819, production).
   Shipped as its own code asset, src/styles/wla-review-6.css, after wla-review-5.css.

   - One display face (#167 "This is the correct font weight, apply this to the rest of the site",
     #168 "this weight on the size does not read well ... better to have that standardized",
     #173 "the font weight needs to match our model from the homepage"): every serif line sets
     like the H1s and the home page's reality line, Playfair Display SemiBold. --serif names a
     family whose only weight is 600, so every rule that asked Bodoni Moda for 400 or 500 now
     renders SemiBold (a variable font's weight is clamped to its @font-face range). The
     statement banners (Lora, #66), the proof headings (Lora, #50 #51 #96) and the proof quotes
     (Cormorant Garamond, #97) join it.
   - The reviews widget filling its container (#171) is not here: Elfsight caps its root at
     1280px from inside its shadow root (:host, !important), which no page CSS outranks. It is
     the widget's own setting, Layout > Width > Full Width, in the Elfsight editor.
   - The invitation's copy column stays beside the form while the form scrolls (#174); it is
     pinned in wla-review-6.js, here it only starts level with the form.
   ========================================================================== */
@font-face{font-family:'WLA Serif';font-style:normal;font-weight:600;font-display:swap;
  src:url('/uploads/hg5ePe3ERpiBqHI5yPIll-playfair-display-normal-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'WLA Serif';font-style:italic;font-weight:600;font-display:swap;
  src:url('/uploads/Hql79riIRYO_zQ4cgFUzu-playfair-display-italic-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--serif:'WLA Serif',Georgia,'Times New Roman',serif}
.section_statement .statement_text,
.section_before-after .before-after_content .heading-style-h2,
.section_before-after .before-after_content .heading-style-h2 em,
.section_before-after .before-after_quote{font-family:var(--serif);font-weight:600;font-variation-settings:normal}
.section_statement .statement_text{letter-spacing:-.015em}
.section_before-after .before-after_content .heading-style-h2{letter-spacing:-.015em}

/* Line breaks (Codex review 2, 2026-10-21): headings ended on one word ("Exceptional / standards.",
   "experience."), and the questions heading beside the FAQ list ran five lines of one or two words
   in its narrow column. Headings balance their lines; the questions heading is a side heading and
   sets smaller than a section title. */
.heading-style-display,.heading-style-h2,.heading-style-h3,.statement_text,.reality_statement{text-wrap:balance}
.faq-section_head .heading-style-h2{font-size:clamp(2.2rem,3vw,3.4rem)}

/* Faces (a Codex visual review at the reviewers' windows, 2026-10-21: about forty cover portraits
   with the forehead or the eyes above the frame, and step and strip photos with the crown trimmed).
   Every framed photo drifted with the scroll inside a box 24% taller than its frame (inset -12%),
   so the top tenth of each photo was always above the frame, and on the covers the drift started 8%
   up as well, a fifth gone on arrival. IMAGES.md §2a: no motion on people. The photos now sit whole
   in their frame and stay still (site.js and wla-review-4.js no longer drift them; the wipe-in stays),
   and a cover without a focal point of its own (an object-position class) crops from a third of the
   way down, where a portrait's head is. */
.media-frame_component .parallax_image{inset:0;height:100%}
.cover_image-wrapper img,.thank-you_image-wrapper img{object-position:50% 30%}
/* the home Surgeon strip: round 4 unmirrored the doctor photo, so he stands at the left now, but the
   frame still zoomed 1.3x into the right-hand corner (made for the mirrored file): a blurred patient's hair */
.surgeon_photo.is-doctor img{object-position:0% 50%;transform:none}

/* two photos whose heads start at the file's top edge need a crop from the very top, a row the
   focal classes in the style registry do not have (they start at 20%) */
.ledger_photo img[src*="r4-tech-11-smile-simulation"],.cover_image-wrapper img[src*="patient-smile-portrait-1"],
.cover_image-wrapper img[src*="tonybarrerie_headshot"]{object-position:50% 0%}

/* the ad pages' "In their own words" card: Emily stands at the right of her 2:1 film (the home
   page crops her the same way, BugHerd #17); the card showed the wall beside her (Codex review 2) */
.stories_clip[poster*="emily_dentalimplant"]{object-position:90% 40%}

/* a split cover on a short, wide window (1707x870 is the reviewers' 2560x1305 at 150%): with a
   three-line Playfair H1 the cover ran past the screen (962px on /dr-tony-barriere, its facts row
   cut by the fold; 998px at 1856x950). It is the window's shape, not its height: the rem grows with
   the width. Less air above and below and a heading no taller than the window allows */
@media (min-width:1280px) and (max-height:920px),(min-width:1280px) and (min-aspect-ratio:17/10){
  .is-split .cover_grid{padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:2rem}
  .section_cover .cover_title{font-size:min(4.75rem,8.2svh)}
}

/* short windows (a MacBook's 1512x730 and 1512x614, the reviewers' Safari): the home Transformation's
   text column was 667px tall in 455px of room, held off the foot of the screen (pin-fit). Smaller
   heading and quote, less air, and the photo narrower, never wider than 4:5 (a capped height with a
   free width crops faces); under 660px the small before/after pair goes (the proof sections carry it) */
@media (min-width:1024px) and (max-height:780px){
  .transformation_pin{padding-top:calc(var(--nav-h) + .75rem);padding-bottom:1.5rem}
  .section_transformation .heading-style-h2{font-size:min(var(--t-h2),8.5svh);margin-bottom:1.25rem}
  .transformation_content .text-style-tagline{margin-bottom:1rem}
  .transformation_story blockquote{font-size:min(var(--t-quote),5svh);margin-bottom:.8rem}
  .transformation_patient,.transformation_before-after{margin-bottom:.8rem}
  .transformation_before-after img{width:6.5rem}
  .transformation_media{max-height:none;width:min(100%,calc((100svh - var(--nav-h) - 3rem) * .8));justify-self:center}
}
@media (min-width:1024px) and (max-height:660px){.transformation_before-after{display:none}}
/* the card rails (/cosmetic-dentistry's seven treatments) ran 130px past a 1685x819 window: less
   air and a heading no taller than the window allows; wla-review-6.js then narrows the cards */
@media (min-width:1024px) and (max-height:900px){
  .card-rail_pin{padding-top:calc(var(--nav-h) + .75rem);padding-bottom:1.5rem;gap:1.5rem}
  .section_card-rail .heading-style-h2{font-size:min(var(--t-h2),8.5svh)}
}
/* ...and when even that does not fit, the rail is not pinned (wla-review-6.js adds .is-flow): its
   cards wrap into rows that scroll by with the page */
body:not(.is-landing-page) .section_card-rail.is-flow .card-rail_pin{min-height:0}
body:not(.is-landing-page) .section_card-rail.is-flow .card-rail_track{flex-wrap:wrap;row-gap:2.5rem;padding-right:var(--gutter)}
body:not(.is-landing-page) .section_card-rail.is-flow .card-rail_progress,body:not(.is-landing-page) .section_card-rail.is-flow .card-rail_count{display:none}

/* the /technology ledger column is held by a ScrollTrigger pin (wla-review-6.js). Its old
   position:sticky (dead under ScrollSmoother) left top:123px on it, which the pin copies onto its
   spacer, and the column held 123px lower than asked: "this sticky section is cut. It's not centered" */
.section_ledger .ledger_head{position:relative;top:auto}

/* #174 two columns: the copy starts at the top, level with the form, so the pin has room */
@media (min-width:1024px){.section_invitation .invitation_grid{align-items:start}}


/* src/styles/wla-review-7.css */
/* ==========================================================================
   wla-review-7.css — Alejandro, 2026-10-22 (/bone-grafting at 1888x858):
   "On the services section we have too much white space there. We can add a
   second image ... the image matches the service."

   Round 6 (wla-review-5.css) capped the split cover's 4:5 photo by the
   window's height so the cover is one screen; on a wide window the frame
   narrowed to 318-508px in a 530-790px column, and 260-520px of the cover
   stood empty between the copy and the photo. A second photo, chosen per
   page for its service, now fills that room: two equal 4:5 frames, each the
   single photo's width or half the column, whichever is smaller, tops and
   feet level (a stagger reads as misalignment). wla-review-7.js pairs them
   (.is-pair) only when the pair keeps 70% or more of the single photo's
   width; otherwise the cover keeps its one photo (4:3 windows, tablets,
   phones). A first pass let the second frame take whatever room was left:
   at 1440x900 that was a 172x504 slice, and it cut the people in it.

   Literal rem: production has no --space-* tokens. Specificity from context,
   never a repeated class (the production translation renames only the
   first class of a chain).
   ========================================================================== */
.is-split .cover_image-wrapper.is-second{display:none}
@media (min-width:1024px){
  /* both frames share the photo column's cell; the copy keeps the first, the facts row the second row */
  .is-split .cover_image-wrapper{grid-column:2;grid-row:1}
  .is-split.is-pair .cover_image-wrapper{--cover-pair:min(calc((100svh - var(--nav-h) - 19.5rem) * .8), calc((100% - 1.5rem) / 2));width:var(--cover-pair)} /* 100% = the photo column */
  .is-split.is-pair .cover_image-wrapper.is-second{display:block;justify-self:end;margin-right:calc(var(--cover-pair) + 1.5rem)}
}


/* src/styles/wla-site-review.css */
/* Residual: what the style registry cannot hold. Everything else moved to the registry (css-to-registry.mjs). */
@font-face{font-family:'Playfair Display WLA';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/uploads/hg5ePe3ERpiBqHI5yPIll-playfair-display-normal-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display WLA';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('/uploads/Hql79riIRYO_zQ4cgFUzu-playfair-display-italic-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}