/* Sun Airy 3 — Rehana's sun and the Sun 3 palette with Burn2's airy
   wordmark. Generated by tools/make_final_site.py --airy3 from
   logo-package-sun-airy-3/BRAND-GUIDE-SUN-AIRY-3.md. */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:600;
  font-display:swap;src:url('../fonts/josefin-sans-600.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;
  font-display:swap;src:url('../fonts/jost-600.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/jost-500.woff2') format('woff2');}
:root{
  /* the five logo colours, straight from brand-source/SMO-SUN-SPEC.md */
  --sun-orange:#FF6B2C; --sun-gold:#FFB33F; --sun-yellow:#F8D987;
  --sea-pale:#C9E3E8;    --sea:#83C5DF;
  /* supporting colours, contrast-checked against the five above */
  --chalk:#F6F4F1; --shell:#FDFCFA; --ink:#1B1D20; --slate:#565D65;
  --harbor:#175A70;
  --sun-gradient:linear-gradient(180deg, #FF6B2C 0%, #FFB33F 32%, #F8D987 58%, #C9E3E8 78%, #83C5DF 100%);
  /* Kellie 2026-08-18, Style Option A: Sun Gold solid buttons - the
     full-orange original read harsh against the cool palette. Hover
     deepens to orange. */
  --action:var(--sun-gold); --action-hover:var(--sun-orange);
  --action-frame:var(--sun-orange);
  /* Ink on orange and gold, never white (white on either fails contrast) */
  --on-action:var(--ink);
  --link:var(--harbor);
  --brand-display:'Josefin Sans',sans-serif;
  --brand-display-weight:600;
  --font-display:var(--brand-display);
  --font-label:'Jost',sans-serif;
  --font-body:'Inter Tight',sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --radius:14px; --radius-lg:22px;
  /* legacy names resolve into the palette so no component keeps a stale hex */
  --paper:var(--chalk); --cream:var(--shell);
  --butter:var(--shell); --meringue:var(--shell); --wash:var(--sea-pale);
  --ash:var(--harbor); --rule:rgba(27,29,32,.16); --rule-cool:rgba(27,29,32,.12);
  --wire:rgba(253,252,250,.6);
  --marigold:var(--action); --coral:var(--sun-gold);
  --magenta:var(--sun-gold); --teal:var(--sea);
  --sky:var(--sea); --sky-pale:var(--sea-pale);
  --sky-mid:var(--sea); --sky-deep:var(--harbor);
  --sun-amber:var(--sun-gold); --sun-butter:var(--sun-yellow);
  --sun-sand:var(--sun-yellow);
  --bracket-empty:rgba(27,29,32,.14);
  --placeholder-border:var(--sun-gold);
  --marigold-tint:var(--sun-yellow); --coral-tint:var(--sun-yellow);
  --magenta-tint:var(--sea-pale); --teal-tint:var(--sea-pale);
  --sky-tint:var(--sea-pale);
  --coast-sand:var(--chalk); --coast-butter:var(--shell);
  --coast-palm:var(--harbor); --coast-ocean:var(--sea);
  --coast-dune:var(--shell); --coast-rule:rgba(27,29,32,.12);
  --coast-stone:var(--harbor);
  --coast-green-tint:var(--sea-pale); --coast-ocean-tint:var(--sea-pale);
}
/* The base sheet redefines --font-display inside .variant-coast and
   points every heading at --font-display-spa (Fraunces) with higher
   specificity, so a brand display face set only at :root never actually
   reached a heading. Remap both, and restate the heading rule at
   matching specificity with a weight we ship a file for. */
:root{--font-display-spa:var(--brand-display);}
.variant-coast{--font-display:var(--brand-display);
  --font-display-spa:var(--brand-display);}
.variant-coast h1,.variant-coast h2,.variant-coast h3,
.variant-coast .pullquote,.variant-coast .brand-name,
.variant-coast .ask-q,.variant-coast .calc-row output,
.variant-coast .calc-result b{font-family:var(--brand-display);
  font-weight:var(--brand-display-weight);letter-spacing:0;}
.variant-coast .utility{font-family:var(--font-label);font-weight:600;
  letter-spacing:.26em;}
body{background:var(--chalk);color:var(--ink);}
a{color:var(--link);}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:0;}
h1{line-height:1.13;}
.utility,.nav a,.nav-drop>button{font-family:var(--font-label);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;}
.nav a,.nav-drop>button{font-size:.8rem;}
.site-header .wrap{gap:18px;}
.btn{font-family:var(--font-label);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;border-radius:var(--radius);}
.btn-book{background:var(--action);color:var(--on-action);}
.btn-book:hover{background:var(--action-hover);color:var(--on-action);}
.btn-phone{background:transparent;color:var(--ink);border-color:var(--ink);}
.header-cta .btn{letter-spacing:.05em;padding:12px 18px;}
.variant-coast .cta-pop .btn-book{background:var(--action);color:var(--on-action);}
.site-header{background:var(--shell);border-bottom:1px solid var(--rule);}
.site-footer,.variant-coast .site-footer{background:var(--ink);
  color:var(--shell);border-top:0;}
.variant-coast .site-footer a,.variant-coast .site-footer h3,
.variant-coast .site-footer .utility,.variant-coast .site-footer p,
.variant-coast .site-footer li,.variant-coast .site-footer span,
.site-footer a,.site-footer h3{color:var(--shell);}
.glass{background:rgba(253,252,250,.86);border-radius:var(--radius-lg);}
.card,.variant-coast .card,.money-mini,.variant-coast .money-mini,
.variant-coast .money-section .calc,.calc,img.photo-frame,.photo-frame,
.anno-chip{border-radius:var(--radius);}
.wave-rule{display:none;}
.horizon-rule{border-top:1px solid rgba(27,29,32,.5);width:min(520px,100%);
  margin-top:14px;}
/* Kellie 2026-08-17: colour at the top of the page. Interior page heroes
   sit on Sea Pale with the text in a Shell box; every pairing here is
   contrast-checked (ink on sea-pale 12.6, harbor eyebrows 5.7). */
.variant-coast .page-hero{background:var(--sea-pale);}
.variant-coast .page-hero .wrap{background:var(--shell);
  border-radius:var(--radius-lg);padding:36px 40px 34px;}
@media (max-width:720px){.variant-coast .page-hero .wrap{padding:24px 20px;}}
/* the sun's own colours as a rule, read top to bottom like the mark */
.sunset-strip{display:block;margin-top:12px;}
.sunset-strip i{display:block;height:2px;margin-bottom:2px;}
.sunset-strip i:nth-child(1){width:112px;background:var(--sun-orange);}
.sunset-strip i:nth-child(2){width:80px;background:var(--sun-yellow);}
.sunset-strip i:nth-child(3){width:52px;background:var(--sea);}
.smile-anim rect{fill:var(--sun-orange);}
.smile-anim rect:nth-of-type(3n+2){fill:var(--sun-gold);}
.smile-anim rect:nth-of-type(3n){fill:var(--sea);}
.divider-wire{--wire:rgba(27,29,32,.2);padding:10px 0 0;}
.divider-wire .smile-anim{max-height:84px;}
/* logo sizing */
.variant-coast .brand-badge{width:300px;}
@media (max-width:860px){.variant-coast .brand-badge{width:216px;}}
.site-footer .brand-mark.footer-logo{display:block;width:min(100%,340px);margin:0;}
/* on a phone the footer is two columns; the brand column takes the full
   row so the lockup keeps the package's minimum width and the blurb
   under it reads in one block */
@media (max-width:720px){.footer-grid>div:first-child{grid-column:1/-1;}}
/* two locations: the office cards each carry their own mark */
.office-marks{display:grid;grid-template-columns:1fr 1fr;gap:26px;
  align-items:start;margin:26px 0 6px;}
.office-marks .mark{max-width:310px;}
.office-marks .mark svg{width:100%;height:auto;}
.office-marks p{margin-top:10px;font-size:.95rem;line-height:1.6;}
.office-marks .utility{display:block;margin-bottom:10px;color:var(--harbor);}
@media (max-width:720px){.office-marks{grid-template-columns:1fr;gap:32px;}}
/* draft flags — every unapproved block announces itself */
.draft{border-left:4px solid var(--sun-orange);background:var(--sun-yellow);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin:10px 0 18px;}
.draft.ops{border-left-color:var(--harbor);background:var(--sea-pale);}
.draft.voice{border-left-color:var(--slate);background:var(--sea-pale);}
.draft > .flag{font-family:var(--font-label);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--harbor);
  display:block;margin-bottom:6px;}
.draft p{margin:0 0 8px;}
.draft p:last-child{margin-bottom:0;}
.draft-inline{background:var(--sun-yellow);border-bottom:2px solid var(--sun-orange);
  padding:1px 5px;border-radius:3px;}
.draft-inline::before{content:"Draft — to confirm · ";font-family:var(--font-label);
  font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--harbor);}
p.pullquote .draft-inline::before{content:"Draft — Rehana's words · ";}
/* the DTLA film strip - Kellie's 110-at-golden-hour footage, cropped
   above the traffic. Video on desktop; the palette skyline on mobile. */

/* The DTLA photographs. Lead image full width, the rest in a grid that
   collapses to two columns on a phone rather than shrinking to stamps. */
/* The Best Brace Place burst — Los Angeles homepage. Sun Gold ground
   with Ink type: the brand's loudest legible pairing. White on any of
   the five logo colours fails contrast, so it is never an option here. */
.lee-burst{background:#FFB33F;padding:30px 0 26px}
.burst-inner{display:flex;gap:26px;align-items:center;width:100%}
.burst-mark{flex:none;width:104px}
.burst-mark svg{width:100%;height:auto;display:block}
.lee-burst h2{margin:2px 0 6px}
.lee-burst .utility{color:#175A70}
.lee-burst .draft{background:rgba(255,255,255,.55);border-color:#1B1D20}
.burst-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
/* The band is Sun Gold and so is .btn-book, which left the primary
   button invisible against it. Ink-filled here, with Shell type — the
   "Ink on orange, never white" rule is about text sitting ON a brand
   colour, which this no longer is. */
.lee-burst .btn-book{background:#1B1D20;color:#FDFCFA}
.lee-burst .btn-book:hover{background:#175A70}
.lee-burst .btn-phone{border-color:#1B1D20;color:#1B1D20}
@media (max-width:700px){.burst-inner{flex-direction:column;align-items:flex-start}
  .burst-mark{width:76px}}
.dtla-photos{display:grid;gap:14px;margin-top:20px}
/* The lead is a banner, not a wall. Several of these are portrait
   phone shots; at full width one of them ran over a thousand pixels tall
   and pushed everything else off the screen. */
.dtla-photo-lead img{width:100%;height:auto;max-height:440px;object-fit:cover;
  object-position:center 60%;display:block;border-radius:var(--radius)}
.dtla-photo-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.dtla-photo-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  display:block;border-radius:var(--radius)}
@media (max-width:760px){.dtla-photo-grid{grid-template-columns:repeat(2,1fr)}}
/* Finding us in DTLA: prose at a readable measure, then the three
   wayfinding pictures in a row beneath it. As a sidebar the cards ran to
   twice the height of the copy and left half the section blank. */
.finding-copy{max-width:66ch}
.wayfinding{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:28px}
.wayfinding .card{margin:0}
.wayfinding h3{margin:14px 0 4px}
.wayfinding p{margin:0}
@media (max-width:820px){.wayfinding{grid-template-columns:1fr}}

/* Treatment D — picture and words, full width, sides alternating. */
/* One frame per beat of the story: the picture and the words it belongs
   to, held together and sized the same every time.
   Kellie, 2026-09-16 — full-bleed slabs at 56vh with two lines of text
   in them read as a series of disconnected screens rather than as a
   page you move through. Contained, consistent, and small enough that
   the copy fills the block instead of floating in it. */
.band-section{padding-top:0;padding-bottom:0;margin:22px 0}
.photo-band{display:grid;grid-template-columns:1.05fr 1fr;
  background:#FDFCFA;border:1px solid #E6E0D6;border-radius:var(--radius);
  overflow:hidden;align-items:stretch}
.photo-band>img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:3/2;min-height:0}
.photo-band .band-words{display:grid;align-content:center;padding:34px 38px}
.photo-band.flip>img{order:2}
.photo-band.sea{background:#C9E3E8;border-color:#B4D6DD}
.photo-band h2{margin:.12em 0 .35em;font-size:clamp(22px,2.1vw,30px)}
.photo-band p{max-width:44ch;margin:0}
.photo-band .utility{margin-bottom:2px}
@media (max-width:820px){.photo-band{grid-template-columns:1fr}
  .photo-band.flip>img{order:0}
  .photo-band>img{aspect-ratio:16/10}
  .photo-band .band-words{padding:26px 24px}}
/* Treatment B — a photograph carrying a whole section, text on a scrim.
   A picture is not a background until the type on it is guaranteed
   legible; these are bright skies and white rooms. */
.takeover{position:relative;min-height:78vh;display:grid;align-items:center;
  overflow:hidden;isolation:isolate}
.takeover>img,.takeover>video{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover;z-index:-2}
.takeover::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(12,16,20,.86) 0%,
    rgba(12,16,20,.62) 38%,rgba(12,16,20,.12) 68%,rgba(12,16,20,0) 100%)}
.takeover .wrap{position:relative}
.takeover-hold{max-width:620px;color:#FDFCFA}
.takeover-hold .utility{color:#FFB33F}
.takeover-hold h2{color:#FDFCFA}
/* The consult form's role chooser. Two plain targets rather than a
   dropdown: this gets opened from a QR code on a phone, often one-handed,
   and a dentist standing at a chairside should not have to hunt. The
   referral fields stay hidden until they are wanted, so a patient still
   sees the short form they came for.

   Everything here is written under .form-grid on purpose. The site's base
   sheet sets label{display:block} and input{width:100%}, which turned
   the pills into stacked blocks with a full-width radio sitting above the
   words. Class-on-element beats bare element, so these win. */
.role-pick{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  padding:14px 16px;border:1px solid #DDD6CA;border-radius:10px;
  background:#FBF8F3}
.role-q{font-family:'Jost',system-ui,sans-serif;font-size:14px;
  letter-spacing:.02em;color:#565D65;margin:0}
.form-grid .role-opt{display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;margin:0;padding:9px 15px;border:1px solid #DDD6CA;
  border-radius:999px;background:#FDFCFA;font-size:15px;line-height:1.25;
  font-weight:500}
.form-grid .role-opt:has(input:checked){border-color:#175A70;
  background:#C9E3E8}
.form-grid .role-opt input[type="radio"]{width:auto;flex:none;margin:0;
  padding:0;border:0;background:none;accent-color:#175A70}
.referral-h{font-family:'Jost',system-ui,sans-serif;font-size:13px;
  letter-spacing:.11em;text-transform:uppercase;color:#175A70;
  margin:12px 0 -2px}
.form-grid.role-patient .referral-only{display:none}
.slot-file{margin:8px 0 0;font-family:'Jost',system-ui,sans-serif;
  font-size:12.5px;color:#6B7076}
.slot-file b{color:#1B1D20;font-weight:600}
/* Her own words where a photograph is not coming. A frame, not a pull
   quote in the flow: it sits in the same slot a picture would, so the
   page keeps its rhythm instead of turning into a column of prose. */
.quote-card{margin:0;padding:26px 28px;border:1px solid #DDD6CA;
  border-left:5px solid #FFB33F;border-radius:12px;background:#FDFCFA}
.quote-card blockquote{margin:0;font-family:Georgia,serif;
  font-size:clamp(17px,1.7vw,21px);line-height:1.45;color:#1B1D20}
.quote-card figcaption{margin-top:12px;font-family:'Jost',system-ui,
  sans-serif;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#6B7076}
.photo-slot figcaption{margin-top:8px;font-family:'Jost',system-ui,
  sans-serif;font-size:12.5px;color:#6B7076}
/* The page a scanned code lands on. The masthead is already two bars
   tall, so the heading here is a band rather than a hero card: on a
   phone the question "are you a patient or a doctor" has to be on the
   first screen, not below a fold. */
.refer-hero{background:#C9E3E8;padding:22px 0 20px}
.refer-hero h1{margin:.08em 0 .22em;font-size:clamp(28px,4vw,40px)}
.refer-hero .utility{color:#135366}
.refer-hero .hero-meta{margin:0}
.refer-hero + .section{padding-top:26px}
/* The referring doctor's strip. It sits above the masthead because the
   masthead is already full, and because a second audience should have
   its own door rather than compete for the patient's nav. Quiet by
   design: ink on shell, one line, no colour that pulls the eye off the
   consult button. */
.refer-strip{background:#FDFCFA;border-bottom:1px solid #E4DDD1;
  font-family:'Jost',system-ui,sans-serif;font-size:13px}
.refer-strip .wrap{display:flex;align-items:center;gap:16px;
  padding-top:7px;padding-bottom:7px;max-width:1320px}
.refer-strip span{color:#565D65;letter-spacing:.02em}
.refer-strip a{color:#1B1D20;text-decoration:none;border-bottom:1px solid
  transparent;padding-bottom:1px}
.refer-strip a:hover{border-bottom-color:#1B1D20}
.refer-strip .refer-go{margin-left:auto;font-weight:600;color:#175A70}
@media (max-width:720px){
  .refer-strip .wrap{gap:12px;font-size:12px}
  .refer-strip span{display:none}
  .refer-strip .refer-go{margin-left:auto}
}
/* EN | ES, at the very top of every page (Kellie 2026-10-14). It rides
   the referral strip's right end so it costs no extra height, and the
   current language is the one that is not a link. */
.refer-strip .lang-switch{display:inline-flex;align-items:center;gap:7px;
  margin-left:16px;padding:5px 13px 5px 10px;border:1.5px solid #175A70;
  border-radius:999px;color:#175A70;font-weight:600;font-size:13.5px;
  letter-spacing:.02em;background:#FDFCFA;border-bottom-width:1.5px}
.refer-strip .lang-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.8}
.refer-strip .lang-switch:hover{background:#175A70;color:#FDFCFA;
  border-bottom-color:#175A70}
@media (max-width:720px){
  .refer-strip .lang-switch{margin-left:8px;padding:4px 10px 4px 8px}
  .refer-strip .wrap{flex-wrap:nowrap;gap:10px}
  .refer-strip a{white-space:nowrap}
  .refer-strip a:nth-of-type(2){display:none}
}
/* the same link in the menu (only once the nav has folded into the
   menu button; on a wide screen the pill at the top is in view) and in
   the footer */
.nav-lang{display:none}
@media (max-width:1280px){
  .site-header .nav.open .nav-lang{display:block;font-weight:600;color:#175A70}
}
@media (max-width:1440px){
  html[lang="es"] .site-header .nav.open .nav-lang{display:block;font-weight:600;
    color:#175A70}
}
.footer-lang{margin-top:12px;font-weight:600}
.footer-lang a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border-bottom:1px solid currentColor}
.footer-lang svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
/* The one-line offer on the English pages when the browser is set to
   Spanish. No redirect; a question, a link and a close. */
.lang-banner{background:#175A70;color:#FDFCFA;font-family:'Jost',system-ui,
  sans-serif;font-size:14px}
.lang-banner .wrap{display:flex;align-items:center;gap:14px;
  padding-top:8px;padding-bottom:8px;max-width:1320px}
.lang-banner a{color:#FDFCFA;font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.lang-banner button{margin-left:auto;background:none;border:0;color:#FDFCFA;
  font-size:20px;line-height:1;cursor:pointer;padding:0 4px;width:auto}
/* The language question on every form, styled as the role pills are. */
.lang-pick .role-q{min-width:100%}
@media (min-width:721px){.lang-pick .role-q{min-width:0}}
.form-grid .lang-callback-note{color:#175A70;font-weight:500}
.cb-form{margin-top:22px;max-width:900px}
.offices-intro .serving{margin:-6px 0 14px;font-family:'Jost',system-ui,sans-serif;
  font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:#175A70}
/* The section on the consult page. Bordered rather than tinted so it
   reads as an aside to the page it sits on, not as a second hero. */
.refer-card{border:1px solid #DDD6CA;border-left:5px solid #FFB33F;
  border-radius:12px;padding:26px 30px;background:#FBF8F3}
.refer-card h2{margin:.1em 0 .35em}
.refer-card .lede{max-width:62ch}
.refer-card .refer-links{display:flex;flex-wrap:wrap;gap:10px;
  margin:18px 0 0}
@media (max-width:640px){
  .refer-card{padding:22px 20px}
  .refer-card .refer-links .btn{width:100%;text-align:center}
}
/* Addresses. Kellie 2026-09-26: the Directions button is fine but the
   address itself has to be findable at a glance. Everywhere one is
   printed it was grey, small, and run in with the hours and the phone.

   Four places carry one: the line under the hero buttons, the location
   cards on the contact page, the footer's office list, and the office
   section on the homepage. */
.hero-meta{color:#3C4248;font-size:.96rem}
.hero-meta .addr{font-weight:600;color:#1B1D20;font-size:1.04rem;
  letter-spacing:.002em}
.hero-meta a{color:#1B1D20;font-weight:600}
.loc-card address{font-weight:600;font-size:1.06rem;line-height:1.45;
  color:#1B1D20;margin-bottom:12px}
.site-footer .addr-line{font-weight:600;color:#1B1D20}
/* Hover and focus. Only the consult button responded to a pointer;
   every other button and the address links sat dead under the cursor,
   which reads as "not clickable" rather than "restrained". */
.btn{transition:background-color .15s ease,color .15s ease,
  border-color .15s ease}
.btn-book:hover,.btn-book:focus-visible{background:#FF6B2C;
  color:#1B1D20}
.btn-phone:hover,.btn-phone:focus-visible,
.btn-ghost:hover,.btn-ghost:focus-visible{background:#C9E3E8;
  border-color:#175A70;color:#123F4F}
.menu-toggle{transition:background-color .15s ease}
.menu-toggle:hover{background:#C9E3E8}
.loc-card .loc-phone{transition:color .15s ease}
.loc-card .loc-phone:hover{color:#175A70;text-decoration:underline}
.hero-meta a:hover{color:#175A70}
/* The header did not fit the page it sits on. Brand, five nav links and
   the consult button need about 1,255px side by side; the site's content
   column is 1,120px. So they spilled past its right edge at every window
   size. On a wide screen the margin absorbed it and it merely looked
   misaligned with everything below. Below about 1,450px the spill reached
   the edge of the window, which put a horizontal scrollbar on every page
   and cut the consult button in half. The nav only became a menu button
   at 720px, far too late to catch it.

   The first attempt at this let the nav shrink. That was worse: a flex
   item shrinking does not shrink its children, so the nav box narrowed
   while its links stayed put and "Santa Monica" ended up underneath the
   consult button — present, clickable, invisible. Never shrink a box
   whose contents cannot follow.

   So the header gets a column of its own, wider than the article column.
   A masthead is a bar, not a paragraph, and nothing is dropped to make
   it fit. Below 1,220px it becomes the menu button that already exists,
   while there is still room, rather than after the damage. That number
   is measured, not chosen: 1,183px is what the bar needs at its tightest
   legible setting, and the first standard width that clears it is the
   next one up. */
/* Kellie 2026-10-05: the titles read crowded. On a wide screen the
   bar now takes the room it is given and the nav spreads its links
   evenly across whatever is left between the brand and the button; it
   can grow but never shrink, so nothing hides under the button. Below
   about 1,400px there is no room to spread and it sits as before. */
.site-header .wrap{max-width:1560px;flex-wrap:nowrap}
.site-header .brand,.site-header .header-cta{flex:none}
.site-header .nav{flex:1 0 auto;justify-content:center;gap:10px}
/* Kellie 2026-10-14: each item framed like a button, room between
   them, the page you are on filled in, the dropdown label on two lines */
.site-header .nav>a,.site-header .nav-drop>button{padding:9px 16px;
  border:1.5px solid #D9D2C5;border-radius:999px;background:#FDFCFA;
  font-size:.76rem;letter-spacing:.11em;line-height:1.15;
  transition:background-color .15s,border-color .15s}
.site-header .nav>a:hover,.site-header .nav-drop>button:hover{
  background:#C9E3E8;border-color:#175A70}
.site-header .nav>a[aria-current="page"]{background:#C9E3E8;
  border-color:#175A70;color:#135366}
.site-header .nav-drop>button{display:inline-flex;align-items:center;gap:8px;
  padding-top:5px;padding-bottom:5px}
.site-header .nav-drop>button .stack{display:inline-block;text-align:left;
  line-height:1.15}
/* the dropdown, in three short columns */
.nav-drop-grid{min-width:0;padding:12px 14px 14px;grid-template-columns:repeat(3,auto);
  gap:2px 18px;white-space:nowrap}
.nav-drop.open .nav-drop-grid,.nav-drop:focus-within .nav-drop-grid{display:grid}
.nav-col{display:flex;flex-direction:column}
.nav-h{font-family:'Jost',system-ui,sans-serif;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6B7076;padding:6px 12px 4px}
.nav-drop-grid a{font-size:.9rem;padding:7px 12px}
@media (max-width:1280px){
  .nav-drop.open .nav-drop-grid,.nav-drop:focus-within .nav-drop-grid{
    grid-template-columns:1fr;gap:6px 0;white-space:normal}
}
@media (max-width:1470px){
  .site-header .nav{gap:7px}
  .site-header .nav>a,.site-header .nav-drop>button{padding:8px 12px;font-size:.72rem;
    letter-spacing:.09em}
  .brand-mark{width:48px}
  .site-header .wrap{gap:10px}
}
@media (max-width:1300px){
  .site-header .nav{gap:5px}
  .site-header .nav>a,.site-header .nav-drop>button{padding:8px 10px;font-size:.7rem;
    letter-spacing:.07em}
  .brand-name{font-size:.9rem}
  .brand-mark{width:42px}
}
/* below this the nav becomes the menu button — the rule the base sheet
   applies at 720px, moved to where the header actually stops fitting */
@media (max-width:1280px){
  .site-header .nav{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;background:var(--paper);
    border-bottom:1px solid var(--rule-cool);padding:10px 16px 18px;
    z-index:60}
  .site-header .nav.open{display:flex}
  .site-header .nav>a,.site-header .nav-drop>button{font-size:.95rem;
    padding:10px 9px;border:0;border-radius:8px;background:none;letter-spacing:.06em}
  .site-header .nav-drop>button .stack br{display:none}
  .nav-drop-menu{position:static;border:0;padding-left:14px}
  .menu-toggle{display:block}
}
/* Spanish labels run a word longer, so the Spanish masthead tightens its
   tracking and folds into the menu button 160px sooner. */
html[lang="es"] .site-header .nav>a,html[lang="es"] .site-header .nav-drop>button{
  letter-spacing:.07em}
@media (max-width:1300px){
  html[lang="es"] .site-header .nav{display:none;position:absolute;top:100%;
    left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--rule-cool);
    padding:10px 16px 18px;z-index:60}
  html[lang="es"] .site-header .nav.open{display:flex}
  html[lang="es"] .site-header .nav>a,html[lang="es"] .site-header .nav-drop>button{
    font-size:.95rem;padding:10px 9px;border:0;border-radius:8px;background:none;
    letter-spacing:.06em}
  html[lang="es"] .site-header .nav-drop>button .stack br{display:none}
  html[lang="es"] .nav-drop-menu{position:static;border:0;padding-left:14px}
  html[lang="es"] .menu-toggle{display:block}
}
/* Treatment E — a section header that is only a photograph. A stray
   brace above this line used to swallow the first rule, so the street
   photograph shipped at its full height — Aleem 2026-10-07: "really
   large, requires a lot of scrolling". */
.photo-header{position:relative;height:40vh;min-height:280px;max-height:460px;
  overflow:hidden}
.photo-header img{width:100%;height:100%;object-fit:cover;display:block}
.photo-header .label{position:absolute;left:0;bottom:0;width:100%;
  padding:34px 0;color:#FDFCFA;background:linear-gradient(0deg,
    rgba(12,16,20,.9),rgba(12,16,20,0))}
.photo-header .label .utility{color:#FFB33F}
.photo-header .label h2{color:#FDFCFA;margin:0}
.name-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.portrait-inline{width:132px;height:132px;object-fit:cover;
  border-radius:50%;flex:none;object-position:center 22%}
.btn-ghost{border:2px solid currentColor;background:none}

/* A photograph that has not been taken yet, labelled with the one that
   should be. A grey box tells nobody anything. */

/* Hero copy on the left, the photograph that belongs there on the right,
   in one card. */
.hero-with-slot{display:grid;grid-template-columns:1fr 400px;gap:40px;
  align-items:center}
.hero-with-slot>.hero-slot{align-self:center}
@media (max-width:900px){.hero-with-slot{grid-template-columns:1fr}}
.photo-slot{margin:14px 0 22px;max-width:440px;aspect-ratio:16/10;
  padding:22px;border:2px dashed #B9B0A2;
  border-radius:10px;background:repeating-linear-gradient(45deg,#FBF9F6,
  #FBF9F6 11px,#F3EFE8 11px,#F3EFE8 22px);display:grid;place-items:center;
  text-align:center}
/* Sized like the photograph that belongs there, so the page shows its
   real shape rather than collapsing to a caption bar. */
.photo-slot-frame{aspect-ratio:4/3;margin:0}
/* A frame with a photograph in it: no dashed edge, no stripes, no
   caption. The picture fills the frame edge to edge and is cropped to
   it, so every frame on a page is the same shape whatever the shot. */
.photo-fig{margin:14px 0 22px;max-width:440px;aspect-ratio:16/10;
  border-radius:10px;overflow:hidden;background:#F3EFE8}
.photo-fig img.photo-frame{display:block;width:100%;height:100%;
  object-fit:cover;border-radius:0;box-shadow:none}
.hero-slot .photo-fig{margin:0;max-width:none;aspect-ratio:4/3}
/* The jaw page: the review sits in the hero's right frame, first screen. */
.hero-with-slot.has-review{grid-template-columns:minmax(0,1fr) minmax(0,520px);
  align-items:start}
.hero-with-slot.has-review>.hero-review{align-self:start}
.hero-review .utility{display:block;margin-bottom:10px}
.hero-review .review-card{font-size:15px;line-height:1.5;padding:22px 24px}
.hero-review .review-card .stars{font-size:.95rem}
.hero-review .review-photo{margin:0 0 16px;max-width:none;aspect-ratio:16/10;
  border-radius:12px}
.says-grid .review-photo{margin:0 0 16px;max-width:none;aspect-ratio:16/10;
  border-radius:12px}
/* Q & A with Dr. Khan: three groups under her own answers */
.qa-group{padding-top:12px}
.qa-group .section-intro{margin-bottom:18px}
.qa-group .section-intro .utility{display:block;margin-bottom:6px}
.qa-group h2{margin:0}
.ask-a a{color:#175A70}
.ask-q .key{background:linear-gradient(transparent 58%,rgba(255,184,76,.5) 58%);
  padding:0 2px}
/* the Q & A header: a band, not a hero, so the questions start at once */
.page-hero.qa-hero{padding:26px 0 22px}
.page-hero.qa-hero .wrap.hero-with-slot{display:grid;
  grid-template-columns:minmax(0,1fr) 210px;gap:32px;align-items:center}
.qa-portrait{margin:0}
.qa-portrait img{display:block;width:190px;height:190px;border-radius:50%;
  object-fit:cover;margin-left:auto;border:5px solid #FDFCFA;
  box-shadow:0 10px 28px rgba(12,16,20,.14)}
@media (max-width:720px){
  .page-hero.qa-hero .wrap.hero-with-slot{grid-template-columns:1fr;gap:16px}
  .qa-portrait img{width:120px;height:120px;margin-left:0}}
.page-hero.qa-hero h1{font-size:clamp(28px,3.6vw,40px);margin:.1em 0 .3em}
.page-hero.qa-hero p{margin:0 0 8px;max-width:70ch}
.page-hero.qa-hero .caption{margin:0}
.qa-hero + .section{padding-top:26px}
.band-words .btn{margin-top:6px}
/* the glossary */
.terms-group{padding-top:8px}
.terms-group h2{margin:0 0 18px}
.terms{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.terms .term{padding:14px 18px;border:1px solid #E4DDD1;border-radius:12px;background:#FDFCFA}
.terms dt{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin:0 0 4px}
.terms dd{margin:0;font-size:.95rem;color:#565D65}
@media (max-width:720px){.terms{grid-template-columns:1fr}}
@media (max-width:900px){
  .hero-with-slot.has-review{grid-template-columns:1fr}
  .hero-review{margin-top:18px}}
/* A section that opens with a photograph: picture one side, words the
   other, the next one flipped. Full width, because the page has it. */
.section-intro.media-row{max-width:none;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;
  align-items:center;margin-bottom:56px}
.media-row>.photo-fig{margin:0;max-width:none;aspect-ratio:4/3}
.media-row.flip>.photo-fig{order:2}
.media-text>h2:first-child{margin-top:0}
.media-text>p:last-child{margin-bottom:0}
@media (max-width:900px){
  .section-intro.media-row{grid-template-columns:1fr;gap:20px}
  .media-row.flip>.photo-fig{order:0}}
/* In an article column beside the consult card the photograph takes
   the whole column rather than two thirds of it. */
.content-main .photo-fig{max-width:none;aspect-ratio:16/9}
/* the opening photograph: level with the sidebar card's top edge, and
   about its height, so the two frames read as a pair */
.content-main>.photo-fig:first-child{margin-top:0;margin-bottom:26px;aspect-ratio:16/9}
.content-main>.photo-fig:first-child+h2{margin-top:0}
.sidebar-card .card{margin-top:0}
/* Kids & teens (Kellie 2026-10-14): a photograph beside each section,
   and single review cards between them. The frames keep a 3:2 shape so
   nothing of a face is lost; the last, a portrait, is held at its top. */
.media-row.teen-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:start;margin-bottom:28px}
.media-row.teen-row>.photo-fig{aspect-ratio:3/2}
.media-row.teen-last>.photo-fig{aspect-ratio:4/5;width:min(100%,420px);
  justify-self:end}
.teen-row .teen-cards{margin-top:0}
.teen-row .teen-cards .card{padding:18px 20px}
.says-grid.one{grid-template-columns:1fr;margin-top:6px}
.says-grid.one .review-card{max-width:760px}
.teen-row .says-grid.one{margin-top:18px}
.teen-row .says-grid.one .review-card{max-width:none}
.says-top{padding-top:28px}
.teen-options .section-intro{max-width:none}
.teen-options .section-intro p{max-width:64ch}
.option-card h3{margin:0 0 8px}
.option-card p{margin:0 0 10px}
.option-card .more{margin:4px 0 0;font-weight:600}
@media (max-width:900px){
  .media-row.teen-row{grid-template-columns:1fr}
  .media-row.teen-last>.photo-fig{justify-self:stretch;max-width:none;aspect-ratio:3/2}
}
.team-card{margin:0}
.team-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.team-card figcaption{margin-top:10px;font-family:'Jost',system-ui,sans-serif;
  font-size:14px;color:#6B7076}
.team-card figcaption b{display:block;font-size:16px;font-weight:600;
  color:#1B1D20}
/* The payment calculator, the full width of the page: three sliders in
   a row, the monthly number beside them. */
.card.calc.calc-wide{max-width:none;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:26px;padding:36px 36px 30px}
.calc-wide .calc-tag{font-size:1.15rem;margin:0;max-width:60ch}
.calc-intro{max-width:none;text-align:center;margin:0 auto 14px}
.calc-wide .calc-note{max-width:62ch;margin:14px auto 22px;text-align:center}
.calc-intro .utility{display:block}
.calc-intro p{max-width:62ch;margin-left:auto;margin-right:auto}
.calc-wide .calc-sum{width:min(100%,560px);text-align:center;
  background:#C9E3E8;border:1px solid #C9DFE4;border-radius:18px;
  padding:26px 28px 24px;box-shadow:0 10px 30px rgba(23,90,112,.08)}
.calc-wide .calc-sum .calc-result{margin:0;padding:0;border:0;
  font-size:1rem;line-height:1.2;color:#135366}
.calc-wide .calc-sum .calc-result b{display:block;font-size:3.6rem;
  margin:4px 0 2px;color:#1B1D20}
.calc-wide .calc-sum .calc-lines{justify-content:center;margin-top:12px;
  gap:6px 22px}
.calc-wide .calc-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 32px;width:min(100%,1100px);text-align:left}
.calc-wide .calc-row{margin-top:0}
.calc-wide .calc-row label{white-space:nowrap;font-size:.92rem}
.calc-wide .calc-val{font-size:.98rem}
.calc-wide .calc-val input{width:6.5ch}
.calc-wide>.caption{margin:0;max-width:70ch}
@media (max-width:900px){
  .card.calc.calc-wide{padding:24px 20px}
  .calc-wide .calc-inputs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .calc-wide .calc-inputs{grid-template-columns:1fr}}
/* The offices section opens with the building, whole, beside the words. */
.offices-intro{display:grid;grid-template-columns:minmax(0,460px) 1fr;
  gap:56px;align-items:center}
.offices-intro img{display:block;width:100%;height:auto;border-radius:14px}
.offices-intro h2{margin:.2em 0 .5em}
.offices-intro p{max-width:44ch}
@media (max-width:900px){.offices-intro{grid-template-columns:1fr;gap:24px}}
/* The cost cards: the long one wide across the top, the three short ones
   in a row beneath. */
.cost-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cost-grid .card-wide{grid-column:1/-1}
.cost-grid .card-wide .cost-cols{column-count:2;column-gap:44px}
.cost-grid .card-wide .cost-cols p{break-inside:avoid}
.cost-grid .card-wide .cost-cols p:first-child{margin-top:0}
@media (max-width:900px){.cost-grid{grid-template-columns:1fr}
  .cost-grid .card-wide .cost-cols{column-count:1}}
/* The cost page's adults / kids rows, tightened. */
.section.tight{padding:44px 0 56px}
.tight .section-intro.media-row{grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:36px;margin-bottom:32px}
.tight .media-row>.photo-fig{aspect-ratio:3/2}
.tight .cost-grid{margin-top:8px}
/* The form first. A one-line heading, then the fields; the sticky
   header never covers the top of it when a link lands here. */
.form-head{background:#C9E3E8;padding:18px 0 12px}
.form-head h1{margin:0;font-size:clamp(24px,3.4vw,34px)}
.form-first{padding-top:26px;scroll-margin-top:150px}
#consult-form{scroll-margin-top:150px}
.page-hero .as-h1{font-size:clamp(30px,4.4vw,48px);line-height:1.08;margin:.1em 0 .4em}
/* The in-house Botox card, bottom corner, twenty seconds in. */
.botox-pop{position:fixed;right:20px;bottom:20px;z-index:70;width:min(408px,calc(100vw - 32px));
  background:var(--paper);border:1px solid #DDD6CA;border-left:6px solid var(--marigold);
  border-radius:16px;padding:22px 24px 24px;box-shadow:0 14px 40px rgba(12,16,20,.18)}
.botox-pop[hidden]{display:none}
.botox-pop .botox-pop-h{font-family:var(--font-display);font-weight:700;
  font-size:1.38rem;line-height:1.22;margin:8px 0 8px}
.botox-pop p{margin:0 0 14px;font-size:1.05rem}
.botox-pop .btn{width:100%}
.botox-pop-x{position:absolute;top:8px;right:10px;border:0;background:none;
  font-size:22px;line-height:1;cursor:pointer;color:#6B7076;padding:4px 6px}
@media (max-width:720px){.botox-pop{bottom:78px;right:12px}}
.footer-social{margin-top:10px;font-weight:600}
.footer-social a{text-decoration:none;border-bottom:1px solid currentColor}
/* Google reviews: five marigold stars, the words, the name. */
.review-card .stars{color:var(--marigold);letter-spacing:3px;font-size:1.05rem}
/* the Google rating, front and centre under the headline */
.rating-badge{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 0 18px;padding:9px 16px;border:1px solid var(--rule-cool);
  border-radius:999px;background:rgba(255,255,255,.72);text-decoration:none;
  color:var(--ink);font-size:.98rem;line-height:1.2}
.rating-badge:hover{border-color:var(--marigold)}
.rating-badge .stars{color:var(--marigold);letter-spacing:2px;font-size:1.05rem}
.rating-badge .rb-num{font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.rating-badge .rb-text{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rating-badge .rb-where{color:#6B7076;font-size:.88rem}
.page-hero .rating-badge{margin:10px 0 6px}
@media (max-width:720px){.rating-badge{gap:8px;padding:8px 12px;font-size:.92rem}
  .rating-badge .rb-where{flex-basis:100%;margin-top:-4px}}
.review-card blockquote p{margin:0 0 .7em}
.review-card blockquote p:last-child{margin-bottom:0}
.review-card .caption{margin:0;color:#6B7076}
.award-wall{margin-top:18px}
.award-wall img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:10px}
.says{padding:40px 0}
.says .utility{display:block;margin-bottom:14px}
.says-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.says-grid .review-card{max-width:600px}
.award-wall{grid-template-columns:repeat(3,1fr)}
.calc-val{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  white-space:nowrap}
.calc-val input{width:6.5ch;font:inherit;border:0;border-bottom:1px solid #C9C2B4;
  background:transparent;text-align:right;padding:0 2px;color:inherit}
.calc-val input:focus{outline:none;border-bottom-color:var(--marigold)}
.calc-lines{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 0;font-size:.9rem;
  color:#565D65}
.calc-lines b{color:var(--ink)}
.calc-wide .calc-sum .calc-lines{justify-content:center;margin-top:10px}
/* The accolades: a row of bursts under the homepage hero. */
.accolades{padding:34px 0 30px;background:var(--paper);border-bottom:1px solid #EAE4D8}
.accolades .utility{display:block;margin-bottom:14px}
.bursts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1000px){.bursts{grid-template-columns:repeat(3,1fr)}}
.burst{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:18px 14px 16px;border:1.5px dashed var(--marigold);border-radius:14px;
  text-decoration:none;color:var(--ink);background:#FFFDF8;transition:transform .15s,box-shadow .15s}
.burst:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,16,20,.10)}
.burst svg{width:26px;height:26px;fill:var(--marigold)}
.burst b{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.2}
.burst span{font-size:.84rem;color:#565D65;line-height:1.3}
@media (max-width:720px){.bursts{grid-template-columns:1fr 1fr;gap:10px}
  .burst{padding:14px 10px} .burst b{font-size:.98rem}}
/* In the hero: photo first, the six bursts under it, three across. */
.hero-cols{align-items:start}
.hero-side{display:flex;flex-direction:column;gap:12px}
.bursts-hero{grid-template-columns:repeat(3,1fr);gap:10px}
.bursts-hero .burst{padding:12px 8px;gap:4px;background:rgba(253,252,250,.92)}
.bursts-hero .burst svg{width:20px;height:20px}
.bursts-hero .burst b{font-size:.9rem}
.bursts-hero .burst span{font-size:.74rem}
@media (max-width:720px){.bursts-hero{grid-template-columns:1fr 1fr}}
.only-doc{font-weight:600}
/* Dr. Khan's page: the photographs run the length of her bio. */
.doctor-cols{align-items:start}
.doctor-pics{display:grid;gap:18px;align-content:start}
.doctor-pics img{display:block;width:100%;border-radius:10px;
  object-fit:cover}
.doctor-pics .pic-43{aspect-ratio:4/3}
.doctor-pics .pic-34{aspect-ratio:3/4}
@media (max-width:980px){.doctor-pics{grid-template-columns:1fr 1fr}
  .doctor-pics img:first-child{grid-column:1/-1}}
.photo-slot .slot-tag{display:inline-block;font:600 11px/1 'Jost',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:#4A4437;
  background:#E9A23C;padding:6px 11px;border-radius:3px;margin-bottom:10px}
.photo-slot p{margin:0;font-size:14.5px;color:#565D65;font-style:italic;
  max-width:34ch}
.empty-state{padding:24px 26px}
.empty-state p{margin:0 0 .6em}
.empty-state p:last-child{margin:0}
.dtla-reel{position:relative;overflow:hidden;max-height:340px}
.dtla-reel video{width:100%;height:auto;display:block}
.dtla-reel svg{display:none}
@media (max-width:720px){
  .dtla-reel video{display:none}
  .dtla-reel svg{display:block}}