/* ============================================================
   Segovia Orthodontics — Home page styles
   Plain CSS over the design-system tokens (styles.css).
   Layer order locks the cascade: base < layout < components
   < sections < responsive.
   ============================================================ */

@layer base, layout, components, sections, responsive;

/* Unlayered: --container-max must beat tokens/spacing.css, whose unlayered
   :root sets 1200px. Layered declarations always lose to unlayered ones, so the
   1350px container fix lives out here, outside the layers. */
:root { --container-max: 1350px; }

/* Unlayered for the same reason: darker brand purple from the client's mockup,
   overriding tokens/colors.css's --color-lavender scale (base #A089B7). Every
   component reads the purple through these four tokens (or --brand-primary/
   --text-heading/etc., which are themselves defined in terms of these), so
   redeclaring just these four here re-tints the whole site consistently.
   --color-lavender-blush is a separate, pinker decorative accent — left as-is. */
:root {
  --color-lavender: #6b4f98;
  --color-lavender-light: #7758a9;
  --color-lavender-deep: #543e78;
  --color-lavender-deeper: #3e2e59;
  /* --gradient-hero's stops are hardcoded hex in tokens/colors.css (not var()-based),
     so it needs its own override to pick up the darker purple; final stop left
     as the original pale blush since it's just a soft fade to light, not "the purple". */
  --gradient-hero: linear-gradient(135deg, #6b4f98 0%, #7758a9 50%, #E0BBD6 100%);
}

/* ===================================================== BASE */
@layer base {
  :root {
    --container-pad: 32px;

    /* Accessible accent inks (base brand hues fail AA on white) */
    --ink-lavender: var(--color-lavender-deeper);   /* #6F5A86, AA on white */
    --ink-sage: #5E7342;                            /* darkened sage, AA on white */

    /* Primary buttons use the soft sage green from the brand reference */
    --btn-primary: #8AA269;
    --btn-primary-hover: #7B9359;
    --btn-primary-active: #6E844F;

    /* Really-light purple wash for the trust bar; the hero wave blends into it. */
    --surface-trust: #F6F2FB;

    /* Shared faint grain (an SVG turbulence filter baked to low opacity, tiled) —
       used as a second background layer on top of a solid fill to give it a
       little texture instead of reading as a flat color. Reused wherever this
       texture is applied so every instance stays visually identical. */
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
  }

  *, *::before, *::after { box-sizing: border-box; }
  /* Reserve the scrollbar's gutter permanently so locking scroll (mobile menu open)
     never removes/re-adds it and shifts the page underneath. */
  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, svg, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: var(--ink-sage); }

  h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); margin: 0; }
  h1 { font-weight: 500; }
  h2 { font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.5rem); line-height: 1.18; letter-spacing: -0.005em; }
  h3 { font-weight: 500; }
  p { margin: 0; }

  :focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; border-radius: 3px; }

  .skip-link {
    position: absolute; left: 12px; top: -64px; z-index: 400;
    background: #fff; color: var(--text-heading); font-weight: 600;
    padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    transition: top var(--duration-fast) var(--ease-soft);
  }
  .skip-link:focus { top: 12px; }

  /* ---- Google Website Translator ----
     The element mounts its own select + toolbar. We keep the select in the DOM
     (site.js drives it) but out of sight, and suppress Google's top banner iframe,
     which otherwise shifts the whole page down by ~40px via an inline style on
     <body>. These live in the first layer so their !important beats that inline
     style and any later layer. */
  #google_translate_element {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body { top: 0 !important; position: static !important; }
  .skiptranslate iframe, iframe.skiptranslate { display: none !important; }
  /* Google's translating spinner overlay, which otherwise parks in the top-left
     corner of the viewport. Its class is obfuscated and changes between releases,
     so match on the stable prefix. */
  div[class*="VIpgJd-ZVi9od-aZ2wEe"] { display: none !important; }
  /* Google wraps translated runs in <font> tags; keep them transparent to layout. */
  font { font: inherit; color: inherit; background: none; }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ===================================================== LAYOUT */
@layer layout {
  .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
  .container--narrow { max-width: 820px; }

  .section { padding: 88px 0; }

  .bg-white { background: var(--color-white); --timeline-ring: var(--color-white); }
  .bg-pink { background: var(--color-pink-pale); }
  .bg-sage { background: var(--color-sage-pale); }
  .bg-warm { background: var(--color-offwhite-warm); }
  .bg-light { background: var(--neutral-50); }
  .bg-gradient-hero { background: var(--gradient-hero); }
  .bg-purple-dark { background: var(--color-lavender-deeper); }

  /* Section header pattern: label -> h2 -> intro */
  .section-header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
  /* Balance centered headings so no single word gets orphaned on its own line. */
  .section-header h2 { text-wrap: balance; }
  .section-label {
    display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 600;
    font-size: 15px; letter-spacing: 0.02em; color: var(--ink-sage);
    background: var(--color-white); padding: 8px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); margin-bottom: 18px;
  }
  .section-label--on-dark { background: rgba(255, 255, 255, 0.96); color: var(--ink-sage); border-color: transparent; }
  .section-intro { font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-body); margin: 18px auto 0; max-width: 64ch; text-wrap: balance; }
  .section-intro--left { margin-left: 0; }

  /* Text + image split (image on top when stacked) */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

  /* Scroll reveal (gated behind .js so content is visible without JS) */
  .js .reveal { opacity: 0; transform: translateY(24px); }
  .js .reveal.in-view { animation: ds-reveal-up 700ms cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms) forwards; }
  @keyframes ds-reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal.in-view { opacity: 1; transform: none; animation: none; }
    .faq-panel:not([hidden]) { animation: none; }
  }
}

/* ===================================================== COMPONENTS */
@layer components {

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 48px; padding: 0 26px; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); line-height: 1;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-soft),
                box-shadow var(--duration-base) var(--ease-soft),
                transform var(--duration-base) var(--ease-soft), color var(--duration-fast);
  }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }
  .smile-exam__short { display: none; }
  /* Size modifiers change height/padding only — all buttons share the base
     font size (var(--text-base), matching the header CTA). */
  .btn--sm { height: 38px; padding: 0 18px; gap: 7px; }
  .btn--lg { height: 58px; padding: 0 32px; gap: 11px; }

  /* Warm rise: filled CTAs lift and bloom a soft sage glow on hover, like the
     button gently rising to greet you. The :active press-down reads naturally
     from the raised state. */
  .btn--primary { background: var(--btn-primary); color: #fff; box-shadow: var(--shadow-sm); }
  .btn--primary:hover { background: var(--btn-primary-hover); transform: translateY(-3px); box-shadow: var(--shadow-rise-sage); }
  .btn--primary:active { background: var(--btn-primary-active); transform: translateY(1px) scale(0.99); }

  .btn--secondary { background: var(--brand-secondary); color: var(--color-charcoal); box-shadow: var(--shadow-sm); }
  .btn--secondary:hover { background: var(--brand-secondary-hover); transform: translateY(-3px); box-shadow: var(--shadow-rise-sage); }
  .btn--secondary:active { background: var(--brand-secondary-active); transform: translateY(1px) scale(0.99); }

  .btn--lavender { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-sm); }
  .btn--lavender:hover { background: var(--brand-primary-hover); transform: translateY(-3px); box-shadow: var(--shadow-glow-lavender); }
  .btn--lavender:active { background: var(--brand-primary-active); transform: translateY(1px) scale(0.99); }

  .btn--outline { background: transparent; color: var(--ink-lavender); border-color: var(--color-lavender-light); }
  .btn--outline:hover { background: var(--color-pink-tint); border-color: var(--color-lavender); transform: translateY(-3px); box-shadow: var(--shadow-glow-lavender); }
  .btn--outline:active { transform: translateY(1px) scale(0.99); }

  .btn--ghost { background: transparent; color: var(--text-heading); }
  .btn--ghost:hover { background: var(--color-pink-tint); }

  .btn--on-gradient { color: #fff; border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); }
  /* On the dark hero/final-cta gradient a sage glow would disappear, so the lift
     is grounded by a soft dark shadow instead. */
  .btn--on-gradient:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(40, 42, 46, 0.45); }
  .btn--on-gradient:active { transform: translateY(1px) scale(0.99); }

  /* Respect reduced-motion: keep the warm color/glow, drop the lift. */
  @media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
    .card--interactive:hover { translate: none; }
  }

  /* ---- Icon tiles ---- */
  .icon-tile, .card__icon {
    width: 56px; height: 56px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
  }
  .icon-tile svg, .card__icon svg { width: 28px; height: 28px; }
  .icon-tile--lavender { background: var(--color-pink-pale); color: var(--color-lavender-deeper); }
  .icon-tile--sage { background: var(--color-sage-pale); color: var(--ink-sage); }

  /* ---- Fact list: label + short value pairs in 2 columns (credentials, payment options) ---- */
  .fact-list {
    list-style: none; margin: 32px 0; padding: 24px 0 0; border-top: 1px solid var(--border-soft);
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px;
  }
  .fact-list li { display: flex; flex-direction: column; gap: 4px; }
  .fact-list strong { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--text-heading); }
  .fact-list span { font-size: 15px; color: var(--text-body); }

  /* ---- Cards ---- */
  .card {
    background: var(--surface-card); border: 1px solid var(--border-soft);
    border-radius: var(--radius-card); padding: var(--space-6); box-shadow: var(--shadow-sm);
  }
  /* Lift with `translate`, not `transform`: cards also carry .reveal, whose finished
     animation (fill-mode forwards) keeps holding `transform` and would cancel the lift. */
  .card--interactive { transition: translate var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft); }
  .card--interactive:hover { translate: 0 -4px; box-shadow: var(--shadow-lg); }
  .card__icon { margin-bottom: 18px; }
  .card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-h4); line-height: 1.25; color: var(--text-heading); margin: 0 0 10px; }
  .card__body { color: var(--text-body); font-size: 17px; line-height: var(--leading-relaxed); margin: 0; }
  .card__link {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
    color: var(--ink-sage); font-weight: 700; font-size: 14.5px; text-decoration: none;
  }
  .card__link svg { width: 17px; height: 17px; transition: transform var(--duration-fast) var(--ease-soft); }
  .card__link:hover { text-decoration: underline; }
  .card__link:hover svg { transform: translateX(3px); }

  /* ---- Header / utility bar ---- */
  /* .nav is a sibling of .site-header (not nested in it) so its sticky containing
     block is the whole page, not the header's own tightly-fit box. On desktop both
     stack as independently-sticky elements so they still appear to stick together. */
  .site-header { position: sticky; top: 0; z-index: 201; }
  /* Below .site-header (not above): the language dropdown (.lang-menu) opens
     downward from the utility bar and overflows into .nav's box below it, so
     .nav needs a LOWER stacking level for that overflow to render on top of it.
     .nav-links/.nav-backdrop don't need .nav above .site-header any more either
     — they're siblings of .nav in the DOM now, not descendants, so they no
     longer inherit .nav's stacking context at all (see where they're declared). */
  .nav { position: sticky; top: 54px; z-index: 200; }

  /* Grain layered over the gradient — a little texture so the bar doesn't read as a flat color fill. */
  .utility-bar {
    background: var(--texture-grain), linear-gradient(90deg, var(--color-lavender), var(--color-lavender-deep));
    color: #fff; font-size: 14.5px; letter-spacing: 0.01em;
  }
  .utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; }
  .utility-bar__right { display: flex; align-items: center; gap: 22px; }
  .utility-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-soft); }
  .utility-link:hover { color: #fff; }
  .utility-link svg { width: 16px; height: 16px; flex: none; }
  .utility-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.35); }

  /* ---- Language switcher ---- */
  .lang-switch { position: relative; }
  .lang-toggle {
    display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0;
    color: rgba(255, 255, 255, 0.96); font: inherit; cursor: pointer; padding: 6px 11px; border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease-soft);
  }
  .lang-toggle:hover { background: rgba(255, 255, 255, 0.14); }
  .flag { width: 22px; height: 15px; border-radius: 3px; overflow: hidden; display: inline-block; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
  .flag svg { width: 100%; height: 100%; }
  .lang-toggle .chev { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease-soft); }
  .lang-switch.open .lang-toggle .chev { transform: rotate(180deg); }
  .lang-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 172px; list-style: none; margin: 0; padding: 6px;
    background: #fff; color: var(--text-body); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 300;
  }
  .lang-menu li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; }
  .lang-menu li:hover, .lang-menu li[aria-selected="true"] { background: var(--color-pink-tint); }
  .lang-menu li:focus-visible { background: var(--color-pink-pale); outline: none; }

  /* ---- Primary nav ---- */
  /* Simplified header: logo, a Call/Text quick-contact strip, the Schedule CTA, and a
     hamburger that opens the off-canvas panel — the same panel at every breakpoint,
     so there's no separate desktop dropdown menu to maintain. */
  .nav { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-soft); }
  .nav-inner { display: flex; align-items: center; gap: 20px; height: 108px; }
  .nav-logo { display: inline-flex; flex: none; }
  .nav-logo img { height: 68px; width: auto; }

  /* Call/Text/Schedule/hamburger read as one right-aligned cluster, away from the logo. */
  .nav-quicklinks { display: flex; align-items: center; gap: 18px; margin-left: auto; }
  .nav-divider { width: 1.5px; height: 34px; flex: none; background: var(--color-lavender-blush); opacity: 0.6; }
  .nav-quicklink { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  .nav-quicklink__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid currentColor;
    transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
  }
  .nav-quicklink__icon svg { width: 19px; height: 19px; }
  .nav-quicklink--call { color: var(--color-lavender-deeper); }
  .nav-quicklink--text { color: var(--color-sage-deeper); }
  .nav-quicklink:hover .nav-quicklink__icon { background: currentColor; }
  .nav-quicklink:hover .nav-quicklink__icon svg { color: #fff; }
  .nav-quicklink__text { display: flex; flex-direction: column; line-height: 1.3; }
  .nav-quicklink__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: inherit; }
  .nav-quicklink__value { font-size: 15.5px; font-weight: 700; color: var(--color-charcoal); }

  .nav-actions { display: flex; align-items: center; gap: 18px; flex: none; }
  .nav-schedule__btn { height: 50px; padding: 0 22px; font-size: 15px; border-radius: var(--radius-sm); }

  /* A filled, rounded tile (not just bare bars) so the hamburger reads as a clear,
     tappable button rather than a decorative afterthought. */
  .nav-burger {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 50px; height: 50px; border-radius: var(--radius-sm);
    background: var(--color-pink-pale); border: 0; cursor: pointer; padding: 0; box-shadow: var(--shadow-xs);
    transition: background var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft);
  }
  .nav-burger:hover { background: var(--color-lavender-blush); box-shadow: var(--shadow-sm); }
  .nav-burger span { display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--color-lavender-deeper); transition: transform var(--duration-base) var(--ease-soft), opacity var(--duration-fast); }
  body.nav-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---- Off-canvas menu panel (opened by the hamburger, every breakpoint) ---- */
  .nav-links {
    position: fixed; top: 0; right: 0; left: auto; width: min(86vw, 380px); height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 24px; z-index: 250;
    background: linear-gradient(180deg, var(--color-lavender-deep) 0%, var(--color-lavender-deeper) 100%);
    transform: translateX(100%); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform; overflow-y: auto; overscroll-behavior: contain;
  }
  /* Shadow only while open: on the closed, off-screen panel it bleeds into the right edge of the page. */
  body.nav-open .nav-links { transform: translateX(0); box-shadow: -12px 0 40px rgba(58, 60, 64, 0.28); }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 240; background: rgba(58, 60, 64, 0.5); opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1); }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .nav-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
  /* Logo's own colors don't read on a purple panel, so show it as a white silhouette (same treatment used on dark brand surfaces). */
  /* Wordmark only (no flower mark) in the panel and footer. */
  .nav-panel-header img { height: 40px; width: auto; filter: brightness(0) invert(1); }
  .nav-panel-close { background: transparent; border: 0; cursor: pointer; color: #fff; padding: 8px; border-radius: var(--radius-sm); }
  .nav-panel-close svg { width: 24px; height: 24px; }

  .nav-item { position: static; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .nav-item > a { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 16px 22px; font-weight: 600; font-size: 16px; color: #fff; text-decoration: none; }
  .nav-item > a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .nav-item > a .chev { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-soft); }
  .nav-item.open > a .chev { transform: rotate(180deg); }

  .dropdown { position: static; display: none; min-width: 0; margin-top: 0; padding: 0 0 8px; background: rgba(0, 0, 0, 0.14); }
  .nav-item.open .dropdown { display: block; }
  .dropdown a { display: block; padding: 12px 28px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-decoration: none; }
  .dropdown a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .dropdown-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 6px 22px; }

  /* Braces reveals its options (WildSmiles / LightForce) as a tap-to-expand submenu */
  .nav-subitem { position: relative; }
  .dropdown .nav-subitem__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 28px; font-weight: 600; color: #fff; cursor: pointer; }
  .nav-subitem:hover > .nav-subitem__label, .nav-subitem:focus-within > .nav-subitem__label { background: rgba(255, 255, 255, 0.12); }
  .nav-subitem .chev { display: inline-block; width: 14px; height: 14px; flex: none; transition: transform var(--duration-base) var(--ease-soft); }
  .nav-subitem.open .chev { transform: rotate(180deg); }
  .subdropdown { display: none; position: static; min-width: 0; padding: 0; background: transparent; }
  .nav-subitem.open .subdropdown { display: block; }
  .subdropdown a { padding-left: 40px; }

  /* margin-top:auto drops the whole block to the very bottom of the panel;
     when the menu is tall enough to scroll it simply flows after the links. */
  .nav-panel-footer { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding: 24px 22px calc(22px + env(safe-area-inset-bottom)); }
  .nav-panel-phone, .nav-panel-text, .nav-panel-cta { width: 100%; }
  .nav-panel-utility { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 4px; }
  .nav-panel-utility a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14px; font-weight: 600; transition: color var(--duration-fast) var(--ease-soft); }
  .nav-panel-utility a:hover { color: #fff; }
  .nav-panel-utility a svg { width: 17px; height: 17px; flex: none; }

  /* ---- Footer ---- */
  .site-footer { background: var(--color-lavender-deeper); color: var(--color-white); padding: 72px 0 32px; }
  .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
  .footer-logo { height: 50px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
  .footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 10px; }
  .footer-contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--color-white); text-decoration: none; font-size: 14.5px; }
  .footer-contact a:hover { color: var(--color-pink-pale); }
  .footer-contact svg { width: 17px; height: 17px; flex: none; color: var(--color-pink-pale); }
  .footer-contact a.footer-contact__address { align-items: flex-start; text-align: left; }
  .footer-contact__address svg { margin-top: 2px; }
  .footer-social { display: flex; gap: 12px; margin-top: 22px; }
  .footer-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--color-lavender); color: #fff;
    transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
  }
  .footer-social a:hover { background: var(--color-lavender-deep); color: #fff; transform: translateY(-2px); }
  .footer-social svg { width: 19px; height: 19px; }
  .footer-col__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-pink-pale); margin: 0 0 16px; }
  .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .footer-links a { color: var(--color-white); text-decoration: none; font-size: 14.5px; }
  .footer-links a:hover { color: var(--color-pink-pale); }
  .footer-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
  .footer-copy { margin: 0; font-size: 13px; color: var(--color-white); }
  .footer-legal__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .footer-legal__links a { color: var(--color-white); text-decoration: none; font-size: 13px; }
  .footer-legal__links a:hover { color: var(--color-pink-pale); }

  /* ---- Before/after slider ---- */
  .ba-slider {
    position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-md); user-select: none; touch-action: pan-y; background: var(--neutral-100); --pos: 50%;
    /* <figure> carries a 40px UA margin; the grid uses gap for spacing, so zero it out. */
    margin: 0;
  }
  .ba-slider:focus-within { outline: 3px solid var(--ring-focus); outline-offset: 3px; }
  .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
  .ba-before-wrap { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%); width: 44px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; }
  .ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 3px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); }
  .ba-handle svg { position: relative; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #fff; color: var(--color-lavender-deeper); box-shadow: var(--shadow-md); }
  .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
  .ba-tags { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .ba-tag { position: absolute; bottom: 14px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: #fff; background: rgba(58, 60, 64, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .ba-tag--before { left: 14px; }
  .ba-tag--after { right: 14px; }

  /* ---- FAQ accordion ---- */
  .faq { border-top: 1px solid var(--border-soft); }
  .faq-item { border-bottom: 1px solid var(--border-soft); }
  .faq-q { margin: 0; }
  .faq-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 4px; background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: var(--font-display); font-weight: 500; font-size: var(--text-h4); color: var(--text-heading);
  }
  .faq-trigger span { flex: 1; }
  .faq-icon { width: 22px; height: 22px; flex: none; color: var(--color-lavender); transition: transform var(--duration-base) var(--ease-soft); }
  .faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
  .faq-panel { overflow: hidden; }
  .faq-panel > p { margin: 0 0 22px; color: var(--text-body); font-size: 17px; line-height: var(--leading-relaxed); max-width: 70ch; }
  .faq-panel:not([hidden]) { animation: faq-in var(--duration-base) var(--ease-soft); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ===================================================== SECTIONS */
@layer sections {

  /* ---- Hero ---- */
  .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(600px, 52vw, 780px); padding: 72px 0; background-color: var(--color-white); }
  .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right 22%; }
  /* Left-side light scrim so the heading stays readable over the photo. */
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.62) 34%, rgba(255, 255, 255, 0.2) 54%, rgba(255, 255, 255, 0) 70%); }
  .hero .container { position: relative; z-index: 2; }
  .hero__text { max-width: 580px; }
  .hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 6.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-charcoal); margin: 0; }
  .hero__headline { display: block; color: var(--color-lavender); }
  .hero__headline-line { display: block; }
  /* The H1 stays for SEO but is styled to match hero subtext (.hero__sub). */
  .hero__care { display: block; margin-top: 16px; font-family: var(--font-body); font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: var(--neutral-700); text-wrap: balance; }
  /* Reusable italic-serif accent for one or two words inside a heading. */
  .accent { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; color: var(--color-lavender-deep); }
  .hero__sub { color: var(--neutral-700); font-size: 18.5px; margin: 22px 0 0; max-width: 40em; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .hero__reviews { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: var(--color-charcoal); font-size: 15px; font-weight: 600; }
  /* Optically center the star glyphs with the adjacent text. */
  .hero__review-stars { color: var(--status-warning); font-size: 18px; letter-spacing: 1px; line-height: 1; transform: translateY(-1px); }

  /* A simple checklist beneath the rating keeps the benefits easy to scan. */
  .hero__benefits { list-style: none; display: grid; gap: 12px; margin: 24px 0 0; padding: 0; color: var(--color-charcoal); font-size: 17px; font-weight: 700; line-height: 1.4; text-align: left; }
  .hero__benefits li { display: flex; align-items: center; gap: 12px; }
  .hero__benefits svg { width: 20px; height: 20px; flex: none; color: var(--color-sage-deep); }

  /* ---- Trust bar ---- */
  .trust-bar { padding: 30px 0; background: var(--surface-trust); }
  .trust-bar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 48px; }
  /* More breathing room on wide screens; below 1280px the six logos would no longer fit on one row. */
  @media (min-width: 1280px) { .trust-bar__list { column-gap: 72px; } }
  .trust-logo { display: flex; align-items: center; justify-content: center; }
  /* Mixed logo shapes fit a shared bounding box so they read as balanced.
     Muted grayscale by default, full color on hover. */
  .trust-logo img {
    max-height: 72px; max-width: 184px; width: auto; height: auto;
    filter: grayscale(1); opacity: 0.7;
    transition: opacity var(--duration-base) var(--ease-soft), filter var(--duration-base) var(--ease-soft);
  }
  .trust-logo:hover img { filter: grayscale(0); opacity: 1; }
  /* LightForce is a tall badge, so give it a little more height to stay legible. */
  .trust-logo img[src*="lightforce"] { max-height: 98px; max-width: 130px; }

  /* ---- Who we treat ---- */
  .who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
  .who-card { --card-pad: 40px; padding: var(--card-pad); display: flex; flex-direction: column; text-align: center; border-color: transparent; position: relative; cursor: pointer; }
  /* Each card gets its own soft brand tint. */
  .who-card:nth-child(1) { background: var(--color-pink-pale); }
  .who-card:nth-child(2) { background: var(--color-sage-pale); }
  .who-card:nth-child(3) { background: var(--color-offwhite-warm); }
  /* Full-bleed image slot at the top of the card (currently a placeholder). */
  .who-card__media {
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 28px;
    aspect-ratio: 16 / 10; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-lavender-deeper);
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
  }
  .who-card__media svg { width: 40px; height: 40px; opacity: 0.7; }
  .who-card__media span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.75; }
  /* When a real image is dropped in, it fills the slot edge to edge. */
  .who-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-soft); }
  /* Zoom the image gently when hovering anywhere on the card. */
  .who-card:hover .who-card__media img { transform: scale(1.06); }
  .who-card .card__body { flex: 1; line-height: 1.65; }
  .who-card .card__title { margin-bottom: 13px; }
  /* Age label as a centered white pill above the title. */
  .who-card__age { align-self: center; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--color-lavender-deeper); background: #fff; padding: 5px 15px; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
  /* CTA is a real full-width button that wraps gracefully for longer labels. */
  .who-card__cta { align-self: stretch; margin-top: 28px; height: auto; min-height: 48px; padding: 12px 18px; white-space: normal; line-height: 1.3; }
  /* Whole-card link: a transparent anchor stretched over the entire card, sitting above
     the card content but below the CTA button (which the .btn transform would otherwise
     scope a stretched-link to). Clicking anywhere on the card follows this link. */
  .who-card__overlay { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
  /* Keep the green button above the overlay so its own hover/click still work as before. */
  .who-card__cta { position: relative; z-index: 2; }


  /* ---- Meet Dr. Segovia ---- */
  /* Dark purple section: heading/accent/body/sublabel all need light-on-dark
     colors, matching the same treatment .final-cta uses on its own dark bg. */
  .doctor h2 { color: #fff; }
  .doctor .accent { color: var(--color-pink-pale); }
  .doctor__sublabel { font-weight: 600; color: var(--color-sage-pale); font-size: 15px; margin: 6px 0 20px; }
  .doctor__text > p:not(.section-label):not(.doctor__sublabel) { margin-bottom: 16px; color: rgba(255, 255, 255, 0.92); }
  /* Shorter than the standard portrait frame (was 4:5) so she reads less tall. */
  .doctor__frame { aspect-ratio: 1 / 1; width: 100%; margin-left: auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
  /* Anchor to the bottom so any overflow crops from the top, keeping her feet/hem in frame. */
  .doctor__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

  /* ---- Treatments ---- */
  /* Three cards: always one even row, stacking to a single column on phones (see the 640px block). */
  .treatments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .treatment-card { position: relative; cursor: pointer; padding: 0; overflow: hidden; text-align: center; border-color: transparent; }
  /* Alternate pale lavender (#EFDDE9) and warm off-white (#E9E6D9) across all four cards. */
  .treatment-card:nth-child(odd)  { background: var(--color-pink-pale); }
  .treatment-card:nth-child(even) { background: var(--color-sage-pale); }
  /* On a pink section the pink cards would disappear, so they switch to white. */
  .bg-pink .treatment-card:nth-child(odd) { background: var(--color-white); }
  /* Full-bleed image slot at the top of the card. Ratio matches the source photos (16:10)
     exactly so object-fit: cover never has to crop any of the four images. */
  .treatment-card__media {
    aspect-ratio: 16 / 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-lavender-deeper);
  }
  .treatment-card__media svg { width: 36px; height: 36px; opacity: 0.6; }
  .treatment-card__media span { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.75; }
  /* When a real photo is dropped in, it fills the slot edge to edge, same pattern as the who-cards. */
  .treatment-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-soft); }
  .treatment-card:hover .treatment-card__media img { transform: scale(1.06); }
  .treatment-card__body { padding: 20px 18px 24px; }
  .treatment-card .card__title { margin: 0 0 8px; padding: 0; }
  /* Matches the body copy on the other cards (.card__body). */
  .treatment-card__desc { color: var(--text-body); font-size: 17px; line-height: var(--leading-relaxed); margin: 0; }
  /* The title's link, stretched over the whole card so a click/tap anywhere follows it. */
  .treatment-card__link { color: inherit; text-decoration: none; }
  .treatment-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

  /* ---- Gallery ---- */
  /* Fixed 2-up grid: the homepage's four cases form two rows of two. */
  .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  /* An odd last case (7 on the gallery page) centers on its own row instead of hugging the left. */
  .gallery-grid > .ba-card:last-child:nth-child(odd):not(.ba-card--wide) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
  /* A 3-photo case (before, progress, after) spans the grid at 1.5 card widths, so its photos
     match the size of the 2-photo cards: 1.5 x (100% - 24px gap) / 2. */
  .gallery-grid > .ba-card--wide { grid-column: 1 / -1; justify-self: center; width: calc(75% - 18px); }
  .gallery__cta { text-align: center; margin-top: 40px; }

  /* Before & after card: the two photos butt together over a purple name bar, and the
     whole unit is rounded as one piece, so only its outer corners curve. */
  .ba-card { margin: 0; border-radius: var(--radius-card); overflow: hidden; }
  .ba-card__pair { display: grid; grid-template-columns: 1fr 1fr; }
  .ba-card--wide .ba-card__pair { grid-template-columns: repeat(3, 1fr); }
  .ba-card__photo { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--neutral-100); }
  .ba-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ba-card__tag {
    position: absolute; top: 10px; left: 10px; padding: 5px 12px; border-radius: var(--radius-pill);
    font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    background: rgba(255, 255, 255, 0.94); color: var(--color-charcoal); box-shadow: var(--shadow-sm);
  }
  /* Tags sit in the outer corners (before left, after right), away from the seam. */
  .ba-card__tag--after { left: auto; right: 10px; background: var(--brand-primary); color: #fff; }
  .ba-card__tag--progress { left: 50%; transform: translateX(-50%); }
  /* Same grain + gradient as the purple utility bar. */
  .ba-card__title {
    margin: 0; padding: 14px 16px; text-align: center; color: #fff;
    font-family: var(--font-display); font-weight: 500; font-size: var(--text-h4); line-height: 1.3;
    background: var(--texture-grain), linear-gradient(90deg, var(--color-lavender), var(--color-lavender-deep));
  }

  /* ---- Inner page hero ---- */
  /* Compact banner, no photo: plum to brand purple to rose, with a soft pink glow in the
     top-right corner, so it reads as several brand tones rather than one flat purple.
     The center stays mid-purple so the white text keeps its contrast. */
  .page-hero {
    position: relative; overflow: hidden; padding: 56px 0; text-align: center; color: #fff;
    background:
      radial-gradient(40% 120% at 100% 0%, rgba(239, 221, 233, 0.55) 0%, rgba(239, 221, 233, 0) 70%),
      linear-gradient(100deg, var(--color-lavender-deeper) 0%, var(--color-lavender) 38%, #8f64a8 68%, #c48ab4 100%);
  }
  .page-hero .section-label { margin-bottom: 14px; }
  .page-hero__inner { max-width: 760px; margin: 0 auto; }
  .page-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.75rem); line-height: 1.15; text-wrap: balance; }
  .page-hero .accent { color: var(--color-pink-pale); }
  .page-hero__sub { color: rgba(255, 255, 255, 0.95); font-size: var(--text-lg); margin: 12px auto 0; max-width: 60ch; text-wrap: balance; }

  /* ---- Testimonials ---- */
  .testimonials { position: relative; overflow: hidden; }
  .testimonials .container { position: relative; z-index: 1; }
  /* Decorative flower mark from the logo, bled off the right edge behind the content. */
  .testimonials__mark {
    position: absolute; top: 50%; right: -70px; transform: translateY(-50%);
    width: 320px; height: auto; opacity: 0.1; z-index: 0; pointer-events: none;
  }

  /* ---- Your Path (timeline) ---- */
  /* Horizontal on desktop/tablet: four steps in a row under a line that fills left to
     right as the section scrolls up the screen. Vertical (line on the left) on phones.
     JS reads --timeline-axis to know which way to size and fill the line. */
  .journey h2 { color: #fff; }
  .journey .accent { color: var(--color-pink-pale); }
  .journey__timeline { --timeline-axis: x; position: relative; }
  .journey__line {
    position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px;
    background: rgba(255, 255, 255, 0.2); border-radius: 2px; overflow: hidden;
  }
  .journey__fill {
    position: absolute; inset: 0; background: var(--color-sage);
    transform: scaleX(var(--timeline-progress, 0)); transform-origin: left;
  }
  .journey__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .journey__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .journey__dot {
    position: relative; width: 18px; height: 18px; flex: none;
    border-radius: 50%; background: var(--color-lavender-deeper); border: 2px solid rgba(255, 255, 255, 0.4);
    transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  }
  .journey__step.is-active .journey__dot {
    background: var(--color-sage); border-color: var(--color-sage);
    box-shadow: 0 0 0 6px rgba(163, 187, 132, 0.22);
  }
  .journey__content { margin-top: 32px; }
  .journey__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 50%; border: 1px solid rgba(163, 187, 132, 0.5); color: var(--color-sage);
  }
  .journey__icon svg { width: 28px; height: 28px; }
  .journey__num {
    font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-sage-pale); margin: 20px 0 4px;
  }
  .journey__title { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.2; color: #fff; margin: 0 0 8px; }
  .journey__text { font-size: 17px; line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.9); margin: 0 auto; max-width: 30ch; }
  @media (prefers-reduced-motion: reduce) {
    .journey__dot { transition: none; }
  }

  /* ---- Location ---- */
  .location__details { list-style: none; margin: 30px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .location__details li { display: flex; align-items: flex-start; gap: 14px; }
  .location__icon { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: #fff; color: var(--color-lavender-deeper); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
  .location__icon svg { width: 22px; height: 22px; }
  .location__details strong { font-family: var(--font-display); font-weight: 500; color: var(--text-heading); }
  .location__details a { color: var(--ink-sage); text-decoration: none; font-weight: 600; }
  .location__details a:hover { text-decoration: underline; }
  .location__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
  .map-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--neutral-100); }
  .map-frame iframe { width: 100%; height: 100%; border: 0; }
  /* Light brand-colored tint over the map. pointer-events: none keeps the map beneath it fully draggable/clickable. */
  .map-frame::after { content: ""; position: absolute; inset: 0; background: var(--color-lavender); opacity: 0.14; pointer-events: none; }

  /* ---- Final CTA ---- */
  .final-cta {
    position: relative; overflow: hidden; padding: 84px 0; color: #fff; text-align: center;
    background-image: url(../uploads/cta-footer.webp); background-size: cover; background-position: center 30%;
  }
  /* Brand gradient as a translucent wash over the photo, keeping white text legible. */
  .final-cta__scrim { position: absolute; inset: 0; background: var(--gradient-hero); opacity: 0.84; }
  .final-cta .container { position: relative; z-index: 1; }
  .final-cta__inner { max-width: 780px; margin: 0 auto; }
  .final-cta h2 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 2.75rem); text-wrap: balance; }
  .final-cta .accent { color: var(--color-pink-pale); }
  .final-cta p { color: rgba(255, 255, 255, 0.95); font-size: var(--text-lg); margin: 18px auto 0; max-width: 60ch; }
  .final-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

  /* ---- Photo reveal ----
     A wipe uncovers the photo while it settles from a slight zoom. Put `photo-reveal reveal`
     on the element that wraps the <img> (a page frame or a card's media slot) and name the
     edge the wipe starts from with data-reveal-from="left|right|top|bottom": the edge away
     from the text, so the photo opens toward it. Uses the shared .reveal observer for
     .in-view but replaces its fade-up.
     - Zoom uses `scale`, not `transform`, so card hover zooms (transform) keep working.
     - A frame's own shadow is held back until the wipe is nearly done.
     - The wipe waits for --reveal-delay, so photos in a row can open in sequence. */
  .js .photo-reveal { opacity: 1; transform: none; animation: none; transition: box-shadow 600ms ease 900ms; }
  .js .photo-reveal:not(.in-view) { box-shadow: none; }
  .js .photo-reveal img {
    clip-path: inset(0 100% 0 0); scale: 1.12;
    transition: clip-path 1100ms cubic-bezier(0.77, 0, 0.18, 1) var(--reveal-delay, 0ms),
                scale 1600ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
                transform var(--duration-slow) var(--ease-soft);
  }
  .js .photo-reveal[data-reveal-from="right"] img { clip-path: inset(0 0 0 100%); }
  .js .photo-reveal[data-reveal-from="bottom"] img { clip-path: inset(100% 0 0 0); }
  .js .photo-reveal[data-reveal-from="top"] img { clip-path: inset(0 0 100% 0); }
  .js .photo-reveal.in-view img { clip-path: inset(0); scale: none; }
  /* Homepage card grids: the cards themselves don't animate in (the wipe is enough
     motion), so stagger their photos left to right here instead. */
  .who-grid > :nth-child(2) .photo-reveal, .treatments-grid > :nth-child(2) .photo-reveal { --reveal-delay: 120ms; }
  .who-grid > :nth-child(3) .photo-reveal, .treatments-grid > :nth-child(3) .photo-reveal { --reveal-delay: 240ms; }
  @media (prefers-reduced-motion: reduce) {
    .js .photo-reveal { transition: none; }
    .js .photo-reveal img { clip-path: none; scale: none; transition: none; }
  }

  /* ================================================ SHARED INNER-PAGE COMPONENTS */
  /* ---- Split sections: framed photo + copy column ---- */
  .page-frame { aspect-ratio: 4 / 3; max-width: 600px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
  .page-frame--portrait { aspect-ratio: 4 / 5; max-width: 500px; }
  .page-frame--square { aspect-ratio: 1 / 1; max-width: 540px; }
  .page-frame--wide { aspect-ratio: 16 / 10; }
  .page-frame img { width: 100%; height: 100%; object-fit: cover; }
  /* Photo in the right-hand column hugs the outer edge. */
  .split-copy + .split-image .page-frame { margin-left: auto; }
  .split--top { align-items: start; }
  .split-copy h2 { text-wrap: balance; }
  /* Partner brand logo above a section label (WildSmiles page). */
  .split-copy .brand-logo { display: block; width: 150px; height: auto; margin: 0 0 20px; }
  .split-copy > p:not(.section-label) { margin: 16px 0 0; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .section-header + .btn-row { justify-content: center; }
  .btn-row--center { justify-content: center; }
  .callout + .section-header { margin-top: 72px; }

  /* ---- Soft-dot list (copy lists never use checkmarks or hyphens as bullets) ---- */
  .dot-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
  .dot-list li { position: relative; padding-left: 26px; font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-body); }
  .dot-list li::before {
    content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-lavender); box-shadow: 0 0 0 4px rgba(107, 79, 152, 0.14);
  }
  .dot-list strong { color: var(--text-heading); font-weight: 600; }
  .dot-list--2 { grid-template-columns: 1fr 1fr; column-gap: 32px; }

  /* ---- Long-form text (care guides, policies) ---- */
  .prose { max-width: 760px; margin-inline: auto; }
  .prose h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.2; margin: 48px 0 12px; text-wrap: balance; }
  .prose h3 { font-size: 1.3rem; line-height: 1.3; margin: 32px 0 8px; }
  .prose > :first-child { margin-top: 0; }
  .prose p, .prose li { font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-body); }
  .prose p { margin: 12px 0 0; }
  .prose ul, .prose ol { margin: 12px 0 0; padding-left: 1.3em; }
  .prose li + li { margin-top: 8px; }
  .prose li::marker { color: var(--color-lavender); }
  /* Long URLs and emails may break so they never widen the page on phones. */
  .prose a { color: var(--ink-sage); font-weight: 600; overflow-wrap: anywhere; }
  .prose strong { color: var(--text-heading); font-weight: 600; }
  .prose .legal-date { font-size: 15px; font-style: italic; color: var(--text-muted); }

  /* ---- Topic grid: scannable long-form content in short titled blocks ---- */
  .topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; max-width: 1100px; margin-inline: auto; }
  .topic { padding-top: 22px; border-top: 2px solid rgba(107, 79, 152, 0.18); }
  .topic__title { font-size: 1.35rem; line-height: 1.3; margin: 0 0 10px; }
  .topic p { font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
  .topic p + p, .topic p + .dot-list, .topic .dot-list + p { margin-top: 12px; }
  .topic .dot-list { margin-top: 12px; gap: 8px; }
  .topic a { color: var(--ink-sage); font-weight: 600; }

  /* ---- Callout: one important note with an action ---- */
  .callout {
    display: flex; align-items: center; gap: 24px; padding: 32px; border-radius: var(--radius-lg);
    background: var(--color-white); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm);
  }
  .callout .card__icon { margin: 0; }
  .callout__title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--text-heading); margin: 0 0 6px; }
  .callout__text { font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
  .callout .btn { margin-left: auto; flex: none; }
  .callout__actions { margin-left: auto; flex: none; display: flex; flex-wrap: wrap; gap: 12px; }
  .callout__actions .btn { margin: 0; }
  .callout + .callout, .icon-grid + .callout, .callout + .icon-grid { margin-top: 24px; }
  .topic-grid + .callout, .faq-group + .callout { margin-top: 56px; }

  /* ---- Grid variants and photo cards ---- */
  .icon-grid.icon-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .icon-grid.icon-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .icon-card .card__body + .card__body { margin-top: 10px; }
  .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .photo-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .photo-card__media {
    aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--color-pink-pale); color: var(--color-lavender);
  }
  .photo-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .photo-card__media svg { width: 56px; height: 56px; opacity: 0.75; }
  .photo-card__body { padding: 24px 24px 28px; }
  .photo-card__tag {
    display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--color-sage-pale); color: var(--ink-sage); font-size: 13px; font-weight: 700;
  }
  .photo-grid > :nth-child(3n+2) .photo-reveal { --reveal-delay: 120ms; }
  .photo-grid > :nth-child(3n) .photo-reveal { --reveal-delay: 240ms; }
  .photo-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .photo-grid--4 > :nth-child(4n+1) .photo-reveal { --reveal-delay: 0ms; }
  .photo-grid--4 > :nth-child(4n+2) .photo-reveal { --reveal-delay: 120ms; }
  .photo-grid--4 > :nth-child(4n+3) .photo-reveal { --reveal-delay: 240ms; }
  .photo-grid--4 > :nth-child(4n) .photo-reveal { --reveal-delay: 360ms; }
  .photo-grid--4 .photo-card__body { padding: 20px 20px 24px; }

  /* ---- Smile close-ups (WildSmiles): photo-only tiles under the style cards ---- */
  .smile-grid { list-style: none; margin: 56px 0 0; padding: 0; }
  .smile-shot { aspect-ratio: 2 / 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
  .smile-shot img { width: 100%; height: 100%; object-fit: cover; }

  .card--narrow { max-width: 920px; margin-inline: auto; }
  .card--narrow .dot-list { margin-top: 0; }

  /* ---- Pills (style names, quick tags) ---- */
  .pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; }
  .pill-list li {
    padding: 8px 16px; border-radius: var(--radius-pill); background: var(--color-white); border: 1px solid var(--border-soft);
    font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text-heading); box-shadow: var(--shadow-xs);
  }

  /* ---- Bracket shapes (WildSmiles): product tiles cut from the maker's art, gray bg baked in ---- */
  .bracket-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; width: 100%; margin: 24px 0 0; padding: 0; }
  .bracket-grid--single { grid-template-columns: minmax(0, 150px); }
  .bracket-grid li {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--text-heading);
  }
  .bracket-grid img { display: block; width: 100%; max-width: 120px; height: auto; border-radius: var(--radius-md); background: rgb(246, 246, 246); }
  /* Collection cards (WildSmiles): centered, static cards; each bracket shape
     lifts with the same lavender glow the cards use elsewhere. */
  .icon-card.collection-card { align-items: center; text-align: center; }
  .collection-card .bracket-grid--single { justify-content: center; }
  .bracket-grid img {
    transition: translate var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft),
                background-color var(--duration-base) var(--ease-soft);
  }
  .bracket-grid li { transition: color var(--duration-base) var(--ease-soft); }
  .bracket-grid li:hover { color: var(--brand-primary); }
  .bracket-grid li:hover img { translate: 0 -6px; background: var(--color-white); box-shadow: var(--shadow-md), var(--shadow-glow-lavender); }
  @media (prefers-reduced-motion: reduce) {
    .bracket-grid img, .bracket-grid li { transition: none; }
    .bracket-grid li:hover img { translate: none; }
  }

  /* ---- QR + link to the WildSmiles Create Your Smile tool ---- */
  .smile-tool {
    display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; padding: 14px 14px 12px;
    background: var(--color-white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--brand-primary); text-decoration: none;
    transition: translate 0.2s ease, box-shadow 0.2s ease;
  }
  .smile-tool img { display: block; width: 120px; height: 120px; }
  .smile-tool:hover { translate: 0 -3px; box-shadow: var(--shadow-md); }

  /* ---- Comparison table ---- */
  .compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); background: var(--color-white); }
  .compare { width: 100%; border-collapse: collapse; }
  .compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; font-size: 16px; line-height: 1.5; border-bottom: 1px solid var(--border-soft); color: var(--text-body); }
  .compare thead th { background: var(--color-lavender-deeper); color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 17px; }
  .compare tbody th { font-family: var(--font-display); font-weight: 500; color: var(--text-heading); white-space: nowrap; }
  .compare tbody tr:last-child > * { border-bottom: 0; }
  .compare tbody tr:nth-child(even) { background: #FBF8FC; }

  /* ---- Office hours ---- */
  .hours { list-style: none; margin: 8px 0 0; padding: 0; max-width: 420px; }
  .hours li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); font-size: 17px; color: var(--text-body); }
  .hours li span:first-child { font-family: var(--font-display); font-weight: 500; color: var(--text-heading); }
  .bg-pink .hours li { border-bottom-color: rgba(107, 79, 152, 0.3); }

  /* ---- Forms (Netlify Forms) ---- */
  .form-card { background: var(--color-white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px; }
  .form-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.2; color: var(--text-heading); margin: 0; }
  .form-card__intro { font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-body); margin: 8px 0 0; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 24px; }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .field--full { grid-column: 1 / -1; }
  .field > label, .field legend { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text-heading); padding: 0; }
  .field .req { color: var(--color-lavender); }
  .field input:not([type="checkbox"]), .field select, .field textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--text-heading); background: var(--color-white);
    padding: 12px 14px; border: 1px solid #D9CFE4; border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft);
  }
  .field textarea { min-height: 120px; resize: vertical; }
  .field select {
    appearance: none; padding-right: 44px; cursor: pointer;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  }
  .field select:has(option[value=""]:checked) { color: var(--text-muted); }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-lavender); box-shadow: 0 0 0 3px rgba(107, 79, 152, 0.16); }
  fieldset.field { border: 0; margin: 0; padding: 0; }
  .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 6px; }
  .check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--text-body); cursor: pointer; }
  .check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--color-lavender); }
  .form-section { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--color-lavender); margin: 10px 0 -4px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
  .form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .form-note { font-size: 14px; line-height: 1.55; color: var(--text-body); margin: 0; }
  .form-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  /* Spam trap: a real input bots fill in, kept off-screen for people (never type="hidden") */
  .form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Shown by site.js when /api/contact sends the visitor back with ?error= */
  .form-error { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); background: #FDECEC; border: 1px solid #F3B9B9; color: #8A1F1F; font-size: 15px; line-height: 1.5; }
  .form-error[hidden] { display: none; }

  /* Copy + form splits give the form a little more room. */
  .split:has(> .split-form) { grid-template-columns: 5fr 7fr; }
  .split-copy .location__details { margin: 28px 0 20px; }
  /* Contact page: solid brand tiles so address / call / hours read at a glance */
  .split-copy .location__icon { width: 48px; height: 48px; background: var(--color-lavender); color: #fff; box-shadow: 0 6px 16px rgba(107, 79, 152, 0.28); }
  .split-copy .location__icon svg { width: 24px; height: 24px; }
  .map-frame--wide { aspect-ratio: 21 / 9; }

  /* Compact vertical timeline for narrow columns: line on the left, steps to its right. */
  .vtimeline--compact { margin: 32px 0 0; max-width: none; }
  .vtimeline--compact .vtimeline__line { left: 22px; }
  .vtimeline--compact .vtimeline__steps { gap: 24px; }
  .vtimeline--compact .vtimeline__step { grid-template-columns: 44px 1fr; column-gap: 18px; align-items: start; }
  .vtimeline--compact .vtimeline__node { grid-column: 1; width: 44px; height: 44px; font-size: 18px; box-shadow: 0 0 0 6px var(--timeline-ring, var(--color-pink-pale)); }
  .vtimeline--compact .vtimeline__body,
  .vtimeline--compact .vtimeline__step:nth-child(even) .vtimeline__body { grid-column: 2; justify-self: start; max-width: none; text-align: left; padding-top: 2px; }
  .vtimeline--compact .vtimeline__title { font-size: 20px; margin-bottom: 4px; }
  .vtimeline--compact .vtimeline__text { font-size: 16px; }

  /* ---- Embedded booking scheduler ---- */
  .embed-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-soft); background: var(--color-white); }
  .embed-frame iframe { display: block; width: 100%; height: 780px; border: 0; }
  /* Responsive 16:9 video (YouTube) */
  .video-frame { max-width: 900px; aspect-ratio: 16 / 9; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
  .video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
  .topic-grid + .video-frame, .icon-grid + .video-frame { margin-top: 56px; }

  /* ---- FAQ page: category jump links and groups ---- */
  .jump-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 56px; padding: 0; }
  .jump-links a {
    display: inline-flex; padding: 10px 20px; border-radius: var(--radius-pill); text-decoration: none;
    background: var(--color-white); border: 1px solid var(--border-soft); color: var(--text-heading);
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    transition: background-color var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
  }
  .jump-links a:hover { background: var(--color-lavender); border-color: var(--color-lavender); color: #fff; }
  .faq-group { scroll-margin-top: 140px; }
  .faq-group + .faq-group { margin-top: 64px; }
  .faq-group__title { font-size: clamp(1.5rem, 2.4vw, 1.85rem); margin: 0 0 18px; }
  .faq-panel a { color: var(--ink-sage); font-weight: 600; }

  /* ================================================ MEET DR. SEGOVIA PAGE */
  /* ---- Intro: portrait + credentials ---- */
  .about-intro__frame,
  .about-family__frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
  .about-intro__frame { aspect-ratio: 4 / 5; max-width: 520px; }
  .about-intro__frame img,
  .about-family__frame img { width: 100%; height: 100%; object-fit: cover; }
  .about-intro__frame img { object-position: center top; }
  .about-family__frame { aspect-ratio: 3 / 2; }
  .about-intro__text > p:not(.section-label),
  .about-family__text > p:not(.section-label) { margin: 16px 0 0; }

  /* ---- Education timeline ---- */
  /* Centered vertical line, steps alternating left and right of it. Shares
     initTimeline() in site.js with the homepage journey (--timeline-axis: y). */
  .vtimeline__timeline { --timeline-axis: y; position: relative; max-width: 960px; margin-inline: auto; }
  .vtimeline__line {
    /* top/bottom are a no-JS fallback; initTimeline() replaces them with exact node-to-node values. */
    position: absolute; left: 50%; top: 28px; bottom: 28px; width: 4px; margin-left: -2px; z-index: 0;
    background: rgba(107, 79, 152, 0.16); border-radius: 4px; overflow: hidden;
  }
  .vtimeline__fill {
    position: absolute; inset: 0; background: var(--color-lavender);
    transform: scaleY(var(--timeline-progress, 0)); transform-origin: top;
  }
  .vtimeline__steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: 56px; }
  .vtimeline__step { display: grid; grid-template-columns: 1fr 56px 1fr; column-gap: 40px; align-items: center; }
  .vtimeline__node {
    grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 50%; font-family: var(--font-display); font-weight: 500; font-size: 22px;
    color: var(--color-lavender); background: var(--color-white); border: 2px solid rgba(107, 79, 152, 0.22);
    /* Ring in the section color so the line never shows through the node. */
    box-shadow: 0 0 0 8px var(--timeline-ring, var(--color-pink-pale));
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
  }
  .vtimeline__step.is-active .vtimeline__node { color: #fff; background: var(--color-lavender); border-color: var(--color-lavender); }
  .vtimeline__body { grid-column: 1; grid-row: 1; justify-self: end; max-width: 380px; text-align: right; }
  .vtimeline__step:nth-child(even) .vtimeline__body { grid-column: 3; justify-self: start; text-align: left; }
  .vtimeline__when {
    font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-sage); margin: 0 0 4px;
  }
  .vtimeline__title { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--text-heading); margin: 0 0 8px; }
  .vtimeline__text { font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
  @media (prefers-reduced-motion: reduce) {
    .vtimeline__node { transition: none; }
  }

  /* ================================================ WHY CHOOSE US PAGE */
  .why-intro__frame,
  .why-pay__frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
  .why-intro__frame { aspect-ratio: 1 / 1; max-width: 560px; }
  .why-pay__frame { aspect-ratio: 4 / 5; max-width: 480px; margin-left: auto; }
  .why-intro__frame img,
  .why-pay__frame img { width: 100%; height: 100%; object-fit: cover; }
  .why-intro__text > p:not(.section-label),
  .why-pay__text > p:not(.section-label) { margin: 16px 0 0; }

  .why-intro__text h2, .why-pay__text h2 { text-wrap: balance; }
  .icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .icon-card { display: flex; flex-direction: column; align-items: flex-start; }
  .icon-card .card__link { margin-top: auto; padding-top: 18px; }
  /* Hover: the card lifts with a soft lavender glow and border, and its icon tile
     fills with the brand color (lavender or sage) and grows slightly. The lift uses
     `translate` so the .reveal animation's held `transform` cannot cancel it. */
  .icon-card, .photo-card {
    transition: translate var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft),
                border-color var(--duration-base) var(--ease-soft);
  }
  .icon-card .card__icon {
    transition: transform var(--duration-base) var(--ease-soft), background-color var(--duration-base) var(--ease-soft),
                color var(--duration-base) var(--ease-soft);
  }
  .photo-card:hover { translate: 0 -6px; box-shadow: var(--shadow-lg), var(--shadow-glow-lavender); border-color: var(--color-lavender-blush); }
  .icon-card:not(.collection-card):hover { translate: 0 -6px; box-shadow: var(--shadow-lg), var(--shadow-glow-lavender); border-color: var(--color-lavender-blush); }
  .icon-card:not(.collection-card):hover .card__icon { transform: scale(1.08); color: #fff; }
  .icon-card:not(.collection-card):hover .icon-tile--lavender { background: var(--color-lavender); }
  .icon-card:not(.collection-card):hover .icon-tile--sage { background: var(--btn-primary); }
  @media (prefers-reduced-motion: reduce) {
    .icon-card, .icon-card .card__icon, .photo-card { transition: none; }
    .icon-card:hover, .photo-card:hover { translate: none; }
    .icon-card:hover .card__icon { transform: none; }
  }
  .why-faq .faq-panel a { color: var(--ink-sage); font-weight: 600; }

  /* ================================================ BLOG */
  .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
  .blog-grid > li { display: flex; min-width: 0; }
  .blog-card {
    display: flex; flex-direction: column; width: 100%; overflow: hidden; color: inherit; text-decoration: none;
    background: var(--color-white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, translate 0.25s ease;
  }
  .blog-card:hover { translate: 0 -4px; box-shadow: var(--shadow-md); }
  .blog-card:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 3px; }
  .blog-card__media { display: block; aspect-ratio: 16 / 10; background: var(--color-pink-pale); }
  .blog-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .blog-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 24px 24px; }
  .blog-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--text-heading); text-wrap: balance; }
  .blog-card__excerpt { font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-body); }
  .blog-card__date { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--text-muted); }
  .blog-empty { text-align: center; }

  .blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
  .blog-pagination__link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--color-white);
    color: var(--text-heading); font-family: var(--font-display); font-weight: 500; text-decoration: none;
  }
  a.blog-pagination__link:hover { border-color: var(--color-lavender); color: var(--color-lavender); }
  .blog-pagination__link.is-current { background: var(--color-lavender); border-color: var(--color-lavender); color: #fff; }
  .blog-pagination__gap { color: var(--text-muted); padding: 0 2px; }

  .blog-hero .page-hero__inner { max-width: 860px; }
  .blog-hero__back { display: inline-block; margin-bottom: 18px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
  .blog-hero__back:hover { text-decoration: underline; }
  .blog-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 18px 0 0; color: #fff; font-size: 15px; }
  .blog-share { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
  .blog-share__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: transparent; color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .blog-share__btn svg { display: block; width: 18px; height: 18px; }
  .blog-share__btn:hover { background: #fff; color: var(--color-lavender-deeper); }
  .blog-share__status { position: absolute; top: 100%; left: 50%; translate: -50% 4px; font-size: 13px; white-space: nowrap; }
  .blog-share-end { max-width: 760px; margin: 40px auto 72px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
  .blog-share-end .blog-share { margin-top: 0; }
  .blog-share-end .blog-share__btn { border-color: var(--border-soft); color: var(--color-lavender-deeper); }
  .blog-share-end .blog-share__btn:hover { background: var(--color-lavender); border-color: var(--color-lavender); color: #fff; }

  .blog-featured { margin-top: 24px; }
  .blog-featured img { display: block; width: 100%; max-width: 1000px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-inline: auto; border-radius: var(--radius-lg); }
  .blog-content { margin-top: 48px; }
  .blog-content img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
  .blog-content figure { margin: 28px 0; }
  .blog-content figure br { display: none; }
  .blog-content figcaption { margin-top: 8px; font-size: 14px; color: var(--text-muted); text-align: center; }
  .blog-content iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: var(--radius-md); margin: 28px 0; }
  .blog-content blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--color-lavender); color: var(--text-heading); }
  .blog-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 28px 0; font-size: 16px; }
  .blog-content th, .blog-content td { padding: 12px 14px; border: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
  .blog-content thead th { background: var(--color-lavender-deeper); color: #fff; font-family: var(--font-display); font-weight: 500; }
  .blog-content thead th strong { color: inherit; }
  .blog-content tbody tr:nth-child(even) { background: var(--color-pink-pale); }
}

/* ===================================================== RESPONSIVE */
@layer responsive {

  @media (max-width: 1024px) {
    /* Blog */
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    :root { --container-pad: 24px; }
    .section { padding: 64px 0; }
    .page-hero { padding: 48px 0; }
    .section-header { margin-bottom: 44px; }

    /* Stack splits, image on top */
    .split { grid-template-columns: 1fr; gap: 32px; }
    .split-image { order: -1; }
    .doctor__frame { margin: 0 auto; max-width: 420px; }
    .hero { flex-direction: column; min-height: 0; padding: 0 0 48px; }
    .hero__image { position: static; height: auto; aspect-ratio: 16 / 7; object-position: right 22%; }
    .hero::before { display: none; }
    .hero .container { padding-top: 32px; }
    .hero__text { max-width: none; }

    /* Dr. Segovia stands in the left ~20% of the wide CTA panorama; when the image
       is cropped narrow on mobile the default centered position hides her behind the
       palms, so pull the focus left to keep her in frame. */
    .final-cta { background-position: 14% center; }

    /* ---- Center stacked content on mobile ---- */
    /* Hero: everything centered. */
    .hero__text { text-align: center; }
    .hero__sub { margin-left: auto; margin-right: auto; }
    .hero__cta { justify-content: center; }
    .hero__reviews { justify-content: center; }

    .hero__benefits { width: fit-content; max-width: 100%; margin-inline: auto; }

    /* The Doctor Behind the Smiles: center everything. */
    .doctor__text { text-align: center; }

    /* Meet Dr. Segovia page: center stacked text, keep the credentials grid readable. */
    .about-intro__text, .about-family__text { text-align: center; }
    .about-intro__frame { margin: 0 auto; max-width: 420px; }
    .about-family__frame { margin: 0 auto; max-width: 640px; }
    .fact-list { max-width: 520px; margin-inline: auto; text-align: left; }

    /* Shared inner-page components */
    .split-copy { text-align: center; }
    .split-copy .brand-logo { margin-inline: auto; }
    .split-copy .btn-row { justify-content: center; }
    .split-copy .dot-list, .split-copy .fact-list, .split-copy .hours { max-width: 520px; margin-inline: auto; text-align: left; }
    .split-copy .pill-list { justify-content: center; }
    .page-frame, .split-copy + .split-image .page-frame { margin: 0 auto; max-width: 560px; }
    .page-frame--portrait { max-width: 420px; }
    .icon-grid.icon-grid--4, .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .callout { flex-direction: column; text-align: center; }
    .callout .btn { margin: 0; }
    .callout__actions { margin: 0; justify-content: center; }
    .form-card { padding: 32px; }
    .jump-links { margin-bottom: 44px; }
    .split:has(> .split-form) { grid-template-columns: 1fr; }
    .split-copy .location__details li { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .split-copy .vtimeline--compact { max-width: 520px; margin-inline: auto; text-align: left; }
    .map-frame--wide { aspect-ratio: 4 / 3; }

    /* Why Choose Us page */
    .why-intro__text, .why-pay__text { text-align: center; }
    .why-intro__frame { margin: 0 auto; max-width: 420px; }
    .why-pay__frame { margin: 0 auto; max-width: 420px; }
    .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .vtimeline__steps { gap: 48px; }
    .vtimeline__step { column-gap: 28px; }

    /* Our Office: center the text, and stack each detail's icon above its heading. */
    .location__text { text-align: center; }
    .location__text .section-intro--left { margin-left: auto; margin-right: auto; }
    .location__details li { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .location__cta { justify-content: center; }

    /* Footer: center everything. */
    .site-footer { text-align: center; }
    .footer-logo { margin-left: auto; margin-right: auto; }
    /* Stack each contact line: icon above the text, both centered. */
    .footer-contact { align-items: center; }
    .footer-contact a, .footer-contact a.footer-contact__address { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
    .footer-contact__address svg { margin-top: 0; }
    .footer-social { justify-content: center; }
    .footer-links { align-items: center; }
    .footer-legal { justify-content: center; }
    .footer-legal__links { justify-content: center; }

    /* ----- Compact header ----- */
    /* Keep the purple utility bar, but trim it to just language on mobile — the address and referral/login links already live in the nav panel and footer. */
    .utility-bar__right { display: none; }
    .nav-inner { height: 76px; gap: 8px; }
    .nav-logo img { height: 40px; }

    /* Quick-contact strip collapses to icon-only pills; number/label reappear in the panel footer. */
    .nav-quicklinks { gap: 8px; }
    .nav-divider { display: none; }
    .nav-quicklink__text { display: none; }
    .nav-quicklink__icon { width: 38px; height: 38px; }

    /* Schedule collapses to an icon-only button; wording lives in the panel footer instead. */
    .nav-schedule__btn { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-xs); }
    .nav-schedule__btn span { display: none; }
    .nav-actions { gap: 8px; }
    .nav-burger { width: 40px; height: 40px; border-radius: var(--radius-xs); }
    .nav-burger span { width: 20px; }

    /* Only the logo/hamburger bar stays sticky on mobile; the utility bar scrolls away with the page. */
    .site-header { position: static; }
    /* Drop the frosted backdrop-filter on mobile: an element with backdrop-filter
       becomes the containing block for its fixed descendants, which would pin the
       fixed nav panel/backdrop to the nav bar (54px down) instead of the viewport
       and push the panel's footer off the bottom of the screen. A solid bar also
       avoids any ghosting of content scrolling underneath it. */
    .nav { position: sticky; top: 0; z-index: 200; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

    /* Timeline: keep four across, just tighter. */
    .journey__steps { gap: 20px; }
    .journey__title { font-size: 24px; }
    .journey__text { font-size: 16px; }

    /* Footer */
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
    .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }
  }

  @media (max-width: 640px) {
    /* Blog */
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured img { border-radius: var(--radius-md); }
    .blog-content { margin-top: 36px; }
    .blog-share-end { margin-bottom: 56px; }
    :root { --container-pad: 20px; }
    .hero__benefits { font-size: 15px; }
    .treatments-grid { grid-template-columns: 1fr; }
    .section { padding: 48px 0; }
    .section-header { margin-bottom: 36px; }

    /* Pull the top bar and header a bit closer to the screen edges (scoped to the header only,
       not the shared --container-pad, so page sections keep their own spacing). */
    .site-header .container, .nav .container { padding-left: 14px; padding-right: 14px; }

    /* Give the logo more breathing room above/below. */
    .nav-inner { height: 78px; }

    .utility-bar { font-size: 13px; }
    .utility-bar__inner { gap: 10px; }
    .lang-toggle { padding: 6px 8px; gap: 6px; }

    /* Keep both smiles visible in the narrow crop, above the centered copy. */
    .hero__image { aspect-ratio: 8 / 5; object-position: right center; }
    .hero__cta .btn, .final-cta__buttons .btn, .location__cta .btn { width: 100%; }
    .smile-exam__full { display: none; }
    .smile-exam__short { display: inline; }

    /* Equal-width columns so the mixed logo widths center neatly, two per row. */
    .trust-bar { padding: 33px 0; }
    .trust-bar__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
    .trust-logo img { max-height: 58px; max-width: 150px; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-legal { flex-direction: column; align-items: center; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid > .ba-card:last-child:nth-child(odd), .gallery-grid > .ba-card--wide { width: 100%; }
    .ba-card__tag { top: 8px; left: 8px; padding: 4px 9px; font-size: 11px; }
    .ba-card__tag--after { left: auto; right: 8px; }
    .ba-card__tag--progress { left: 50%; }
    .ba-card__title { padding: 12px 16px; font-size: var(--text-lg); }
    .page-hero { padding: 40px 0; }

    .faq-trigger { font-size: var(--text-lg); padding: 18px 2px; }
    .testimonials__mark { width: 220px; right: -90px; }

    /* Timeline: single column with the line down the left edge. */
    .journey__timeline { --timeline-axis: y; }
    .journey__line { left: 8px; right: auto; top: 9px; bottom: 0; width: 2px; height: auto; }
    .journey__fill { transform: scaleY(var(--timeline-progress, 0)); transform-origin: top; }
    .journey__steps { grid-template-columns: 1fr; gap: 48px; }
    .journey__step { display: grid; grid-template-columns: 18px 1fr; column-gap: 20px; align-items: start; text-align: left; }
    .journey__dot { margin-top: 19px; }
    .journey__content { margin-top: 0; }
    .journey__text { margin: 0; }
    .journey__title { font-size: 24px; }

    /* Shared inner-page components */
    .icon-grid.icon-grid--2, .icon-grid.icon-grid--4, .photo-grid, .form-grid, .checks, .dot-list--2 { grid-template-columns: 1fr; }
    .photo-grid.smile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }
    .smile-shot { border-radius: var(--radius-md); }
    .topic-grid { grid-template-columns: 1fr; gap: 32px; }
    .callout { padding: 28px 22px; }
    .form-card { padding: 28px 20px; }
    .embed-frame iframe { height: 900px; }
    /* Comparison table stacks on phones: each row becomes a block with its topic as a
       heading and one labeled line per option (labels come from each td's data-label). */
    .compare-wrap { overflow: visible; }
    .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .compare tbody tr:nth-child(even) { background: none; }
    .compare tbody tr + tr { border-top: 1px solid var(--border-soft); }
    .compare tbody th { padding: 12px 18px; background: var(--color-lavender-deeper); color: #fff; font-size: 16px; white-space: normal; border-bottom: 0; }
    .compare tbody tr:first-child th { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .compare tbody td { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px 18px; font-size: 15px; }
    .compare tbody td::before { content: attr(data-label); font-family: var(--font-display); font-weight: 500; color: var(--text-heading); }
    .compare tbody tr:last-child > td:not(:last-child) { border-bottom: 1px solid var(--border-soft); }

    /* Fact lists, Why Choose Us cards */
    .fact-list { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .icon-grid { grid-template-columns: 1fr; }
    /* Education timeline: line on the left, every step to its right. */
    .vtimeline__line { left: 26px; }
    .vtimeline__steps { gap: 40px; }
    .vtimeline__step { grid-template-columns: 52px 1fr; column-gap: 20px; align-items: start; }
    .vtimeline__node { grid-column: 1; width: 52px; height: 52px; font-size: 20px; }
    .vtimeline__body, .vtimeline__step:nth-child(even) .vtimeline__body {
      grid-column: 2; justify-self: start; max-width: none; text-align: left; padding-top: 2px;
    }
    .vtimeline__title { font-size: 22px; }
  }
}

/* Blog posts print as the article alone. */
@media print {
  .site-header, .nav, .nav-links, .nav-backdrop, .site-footer, .final-cta, .blog-share, .blog-share-end, .blog-hero__back { display: none !important; }
  .page-hero { background: none; color: #000; padding: 0; }
  .page-hero h1, .page-hero__sub, .blog-hero__meta { color: #000; }
}