/* aeo-overrides.css — modernization layer loaded sitewide AFTER the mirrored
   Elementor combined stylesheet. Pure CSS; no markup rebuild of WordPress. */

/* 0) Design tokens — the single source of truth for the whole site.
      They live HERE rather than in aeo-design.css because this file is the one
      that also reaches the mirrored WordPress pages (injected by
      scripts/inject-overrides.mjs), and the shared components (VideoGallery,
      FAQSection, RelatedLinks, HubLinks) render on both kinds of page.
      Prefixed --u- to stay clear of Elementor's --e-global-*.
      Component classes built on these tokens: /aeo-design.css. */
:root {
  /* Brand — the mirrored Elementor kit's secondary is #C48F41; the custom pages
     use a slightly softer gold that reads better on light backgrounds. Both are
     kept so a CTA can match a header button exactly when it sits next to one. */
  --u-gold: #c0a062;
  --u-gold-brand: #c48f41;
  --u-gold-deep: #8a6d2f;
  --u-gold-hover: #ad8d4f;
  --u-link: #8a6524;     /* text links on light backgrounds. Darkened 2026-08-16: #b07d2b was 3.61:1 on white, under the 4.5:1 AA floor. Now 5.3:1. */

  --u-ink: #1a1a1a;      /* headings */
  --u-body: #3a3a3a;     /* body copy */
  --u-muted: #666;       /* secondary copy */
  --u-faint: #6e6e6e;    /* captions, breadcrumbs, disclaimers. Darkened 2026-08-16: #8a8a8a was 3.25:1, under AA. Now 5.1:1. */
  --u-line: #ece4d4;     /* card + panel borders */
  --u-line-soft: #f0e9da;
  --u-tint: #faf6ee;     /* warm panel fill */
  --u-page: #faf8f4;     /* page background (set on .page-main) */
  --u-surface: #fff;
  --u-dark: #111;        /* CTA band */
  --u-dark-copy: #cfcfcf;

  --u-ok: #5b9e6f;       /* do / positive */
  --u-warn: #c97b6f;     /* don't / caution */

  /* Type — one scale, fluid so mobile needs no per-template overrides. */
  --u-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --u-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --u-h1: clamp(2.05rem, 1.35rem + 2.6vw, 2.9rem);
  --u-h2: clamp(1.45rem, 1.2rem + .9vw, 1.75rem);
  --u-h3: 1.18rem;
  --u-lead: 1.08rem;     /* intro / prose */
  --u-small: .92rem;
  --u-tiny: .82rem;
  --u-eyebrow: .72rem;

  /* Spacing scale */
  --u-1: .35rem;
  --u-2: .6rem;
  --u-3: 1rem;
  --u-4: 1.5rem;
  --u-5: 2rem;
  --u-6: 2.5rem;
  --u-7: 3rem;
  --u-8: 4rem;

  /* Containers — three widths, not five */
  --u-narrow: 760px;     /* single-column reading (glossary, prepare, insights) */
  --u-page-w: 880px;     /* the default page column */
  --u-wide: 1120px;      /* galleries and hub grids */

  --u-radius: 14px;
  --u-radius-lg: 18px;
  --u-radius-sm: 12px;
  --u-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  --u-shadow-hover: 0 10px 28px rgba(0, 0, 0, .10);
}

/* Playfair Display, self-hosted (2026-08-16).
   It used to come from fonts.googleapis.com, which Lighthouse measured as
   **828 ms of render-blocking time** on a mobile treatment page: a stylesheet
   request to one host, then the font file from a second. Serving both from this
   origin removes a DNS lookup, a TLS handshake and a round trip from the critical
   path, and stops every visitor's IP reaching Google, which is worth something on
   a medical site.
   One file per subset, not six: Google ships Playfair as a VARIABLE font, so all
   three weights the site uses live in the same woff2. Only latin and latin-ext are
   kept; the cyrillic, greek and vietnamese subsets were dead weight here. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1) Brand consistency: all Elementor headings use Playfair Display (the brand serif). */
.elementor-heading-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}

/* 2) Homepage hero — solid gold primary CTA + a secondary "call" button. */
.elementor-element-132e2235 .elementor-button {
  background-color: #c0a062 !important;
  color: #111 !important;
  border: none !important;
  padding: .95rem 2.1rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
}
.elementor-element-132e2235 .elementor-button:hover { background-color: #ad8d4f !important; }
/* The mirrored theme underlines links inside the hero, which reads as a bug on
   a pill button. */
.elementor-element-132e2235 .elementor-button,
.aeo-call-btn { text-decoration: none !important; }
.aeo-hero-sub { font-size: 1.12rem; line-height: 1.55; margin: 0 auto .25rem; max-width: 640px; }
.aeo-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1rem auto 1.1rem; max-width: 620px; }
.aeo-hero-chips a {
  font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.55); padding: .42rem .95rem; border-radius: 999px; transition: all .15s;
}
.aeo-hero-chips a:hover { background: #c0a062; border-color: #c0a062; color: #111; }
.aeo-hero-rating { color: #f1e4c6 !important; font-weight: 600; letter-spacing: .3px; margin: 0; }
.aeo-call-btn {
  display: inline-block; margin-left: .6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: .8rem;
  border: 1px solid rgba(255,255,255,.6); padding: .9rem 1.5rem; border-radius: 999px; letter-spacing: .5px; vertical-align: middle;
}
.aeo-call-btn:hover { background: rgba(255,255,255,.14); }

/* 2b) Homepage body copy: Elementor set two text blocks in the brand gold
      (#C48F41) at 16px/600, justified. Gold body text on white measures ~2.9:1,
      under the 4.5:1 WCAG AA minimum, and justified 16px opens rivers of white
      space. Headings may stay gold (large text, 3:1 applies); paragraphs do not. */
.home .elementor-element-41574348,
.home .elementor-element-2a8f61de {
  color: var(--u-body, #3a3a3a) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* 3a) Homepage "Areas of Expertise" — grid, not a 19-row column.
      Elementor gave each category its own top-level <section>, so they stacked
      full width: nineteen mostly-empty rows. `scripts/grid-expertise.mjs` wraps
      the run in `.aeo-exp-grid` (re-run it after any fresh mirror) and the grid
      lives here. The sections keep their own pale accent background, so the
      wrapper carries it instead and each card sits on it. */
.aeo-exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;                  /* each card keeps its own height */
  gap: 1.1rem;
  /* Full-bleed accent band (the heading strip above already carries it) while
     the cards themselves stay inside a 1180px measure — the padding, not a
     max-width, does the centring, so the background still reaches both edges.
     Without this a 2560px display shows seven columns of category lists. */
  padding: 0 max(1.25rem, calc((100% - 1180px) / 2)) 2.5rem;
  background-color: var(--e-global-color-accent, #f9e2ab);
}
.aeo-exp-grid > .elementor-section { padding: 0 !important; background-color: transparent !important; }
.aeo-exp-grid .elementor-container { max-width: none !important; }
/* Deliberately NOT equal-height: the lists run from 1 item (Ultherapy) to 19
   (Lasers), so stretching every card to its row's tallest left three quarters of
   most cards empty. Cards keep their natural height and align to the row top. */
@media (max-width: 700px) { .aeo-exp-grid { gap: .8rem; padding-bottom: 1.5rem; } }

/* 3) Homepage "Areas of Expertise" — the 19 separate Elementor toggle widgets
      become clean always-open cards (each beside its section's background image),
      instead of a wall of dark collapsed bars. Scoped to the homepage (.home). */
.home .elementor-toggle-item {
  background: #fff !important; border: 1px solid #ece4d4 !important; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.home .elementor-tab-title {
  background: #fff !important; border: none !important; padding: 1.1rem 1.3rem .35rem !important; cursor: default !important;
}
.home .elementor-toggle-icon { display: none !important; }
.home .elementor-toggle-title {
  color: #1a1a1a !important; font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.15rem !important; font-weight: 600 !important; text-decoration: none !important; cursor: default !important;
}
.home .elementor-tab-content {
  display: block !important; padding: .15rem 1.3rem 1.15rem !important; border: none !important; background: #fff !important;
}
.home .elementor-tab-content ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.home .elementor-tab-content li { margin: .22rem 0 !important; }
.home .elementor-tab-content a {
  color: #6a5836 !important; font-size: .86rem !important; text-decoration: none !important; line-height: 1.4 !important;
}
.home .elementor-tab-content a:hover { color: #b07d2b !important; }

/* 3b) Mirrored SERVICE pages: the Essential-Addons price table.
      Every treatment page ends in one of these (`.ea-advanced-data-table`), and
      raw it is a full-bleed 1168px grid of 12px grey text with hairline borders.
      Same treatment as the custom pages' `.a-table`: contained width, dark serif
      header, readable rows, and a wrapper that scrolls on phones instead of
      crushing three columns into three-word cells. */
.ea-advanced-data-table-wrap {
  max-width: var(--u-page-w, 880px); margin: 0 auto; }
.ea-advanced-data-table-wrap-inner {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--u-radius, 14px); box-shadow: var(--u-shadow, 0 2px 14px rgba(0,0,0,.06));
  background: var(--u-surface, #fff); }
/* ⚠️ Specificity note: the plugin ships
   `.ea-advanced-data-table-wrap .ea-advanced-data-table th{background-color:initial!important}`
   (0-2-1, important). An `!important` of ours at 0-1-3 loses to it, which is why every
   selector below carries the `-wrap` ancestor. */
.ea-advanced-data-table-wrap table.ea-advanced-data-table {
  width: 100%; min-width: 460px; border-collapse: collapse; background: var(--u-surface, #fff);
  margin: 0 !important; border: 0 !important; }
.ea-advanced-data-table-wrap table.ea-advanced-data-table thead th {
  background-color: var(--u-dark, #111) !important; color: #fff !important;
  font-family: var(--u-serif, 'Playfair Display', Georgia, serif) !important;
  font-weight: 600 !important; font-size: 1rem !important; text-align: left;
  padding: .8rem 2.2rem .8rem 1rem !important; border: 0 !important; }
.ea-advanced-data-table-wrap table.ea-advanced-data-table thead th p {
  margin: 0 !important; color: inherit !important; font: inherit !important; }
/* Sort arrows are #4d4d4d by default — invisible on the dark header. */
.ea-advanced-data-table-wrap .ea-advanced-data-table.ea-advanced-data-table-sortable th:before {
  border-bottom-color: rgba(255,255,255,.55) !important; }
.ea-advanced-data-table-wrap .ea-advanced-data-table.ea-advanced-data-table-sortable th:after {
  border-top-color: rgba(255,255,255,.55) !important; }
.ea-advanced-data-table-wrap table.ea-advanced-data-table tbody td {
  padding: .8rem 1rem !important; border: 0 !important;
  border-bottom: 1px solid var(--u-line-soft, #f0e9da) !important;
  font-size: .95rem !important; color: var(--u-body, #3a3a3a) !important; vertical-align: middle; }
.ea-advanced-data-table-wrap table.ea-advanced-data-table tbody td p {
  margin: 0 !important; font: inherit !important; color: inherit !important; }
.ea-advanced-data-table-wrap table.ea-advanced-data-table tbody tr:last-child td { border-bottom: 0 !important; }
.ea-advanced-data-table-wrap table.ea-advanced-data-table tbody tr:hover td { background-color: var(--u-tint, #faf6ee) !important; }
/* Price is the column people scan for. */
.ea-advanced-data-table-wrap table.ea-advanced-data-table tbody td:last-child {
  font-weight: 600; color: var(--u-ink, #1a1a1a) !important; white-space: nowrap; }

/* 3c) /treatments/ — one absolutely-positioned decorative image (alt="", an
      Elementor `_position:absolute` widget) is pinned at `left:446px` on small
      screens, so on a 390px phone it hung 326px past the right edge and gave the
      whole page a horizontal scrollbar. It is decoration, so it goes away on
      phones rather than being repositioned. */
@media (max-width: 760px) {
  .elementor-element-1610260.elementor-absolute { display: none !important; }
}

/* 4) Sitewide sticky "Book" bar (mobile). Markup from StickyCta.astro; styles here so
      it also styles correctly on mirrored pages. */
.aeo-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; gap: .55rem;
  padding: .6rem .8rem; background: rgba(20,16,12,.97); box-shadow: 0 -4px 18px rgba(0,0,0,.28);
}
.aeo-sticky a { flex: 1; text-align: center; padding: .8rem .5rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .9rem; }
.aeo-sticky__book { background: #c0a062; color: #111; flex: 3; }
.aeo-sticky__call { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
@media (max-width: 760px) {
  .aeo-sticky { display: flex; }
  body { padding-bottom: 64px; }
}

/* 5) Accessibility: the brand gold fails AA in BOTH directions (found 2026-08-16 by
      scripts/check-a11y.mjs, 1,244 failing elements across every page).

      White on the theme gold #c48f41 is 2.85:1, well under the 4.5:1 floor, and it
      is not a corner case: it is the "SCHEDULE AN APPOINTMENT" button on all 573
      pages, the active item in the mobile menu, and the whole footer hours band.
      Dark text on that same gold is 6.7:1 and keeps the brand colour, which is the
      call the design system already made for .a-chip.is-active and for the trust
      band's buttons. So the gold stays and the text on it gets darker.

   ⚠️ The background is forced too, and that is not cosmetic. On the mirrored
   service pages the button sits inside the hero, whose overlay is 60% black over
   a photograph, and the theme lets that show through: axe read the pairing as
   #332716 on #453318, a ratio of 1.2. Darkening the text alone made those two
   buttons WORSE than the white they started with. Pinning the gold opaque means
   the dark text always has the 6.7:1 background underneath it, whatever is behind
   the button. */
.elementor-button-wrapper a.elementor-button,
a.elementor-button:not(.aeo-call-btn) { background-color: #c48f41 !important; }
/* The contact form's submit is an <input>, not an .elementor-button, so it missed
   every selector above and kept white-on-gold at 2.85:1. */
.wpcf7-submit { background-color: #c48f41 !important; }
.elementor-button .elementor-button-text,
.elementor-button-wrapper a.elementor-button,
.wpcf7-submit { color: #111 !important; }

/* Only the DROPDOWN (mobile) menu paints the active item gold; the desktop nav's
   active item is white on the black header and must stay that way. */
.elementor-nav-menu--dropdown .elementor-item-active { color: #111 !important; }

/* The footer address + hours band (`elementor-element-27f8a43f`): white body copy
   and a pink `tel:` link on gold, the link at 1.73:1. Dark copy, and the phone
   number keeps a link affordance that is not colour alone. */
/* `*`, not a list of tags: the first version named p/strong/span/address and missed
   the <b> holding the phone number. */
.elementor-element-27f8a43f, .elementor-element-27f8a43f * { color: #1a1a1a !important; }
.elementor-element-27f8a43f a { color: #111 !important; text-decoration: underline !important; }

/* The other two gold bands (`3a0f71f`, the "why choose us" strip, and `610ed084`,
   the hours/contact strip, both on 25 pages) have the same white-on-gold problem as
   the footer band. */
.elementor-element-3a0f71f, .elementor-element-3a0f71f *,
.elementor-element-610ed084, .elementor-element-610ed084 * { color: #1a1a1a !important; }
.elementor-element-3a0f71f a,
.elementor-element-610ed084 a { color: #111 !important; text-decoration: underline !important; }

/* Brand gold as TEXT on white is 2.85:1, under the 3:1 large-text floor and well
   under 4.5:1 for body copy. The deep gold reads as the same brand colour and
   clears both. Scoped to the elements axe actually found rather than every heading,
   so the theme's own headline colours are left alone. */
.home h3, .home .elementor-size-xl,
.elementor-element-3c24629c .elementor-testimonial-content,
.elementor-element-3c24629c .elementor-testimonial-name,
.elementor-element-554293c2 h4,
.elementor-element-6c63682b h4,
.elementor-element-5d274609 .elementor-testimonial-content,
.elementor-element-5d274609 .elementor-testimonial-name,
.elementor-element-35e781e7 .elementor-testimonial-content,
.elementor-element-35e781e7 .elementor-testimonial-name,
.elementor-element-bd5b368 h4 { color: #8a6d2f !important; }

/* Status line for the contact form, injected by /aeo-contact.js. The mirrored
   Contact Form 7 form had no working feedback of its own, because its script was
   talking to the old WordPress install. */
.aeo-contact-status { margin: .8rem 0 0; font-size: .92rem; line-height: 1.5; min-height: 1.2em; }
.aeo-contact-status.is-ok { color: #2f6b45; font-weight: 600; }
.aeo-contact-status.is-err { color: #b00020; font-weight: 600; }

/* ============================================================================
   6) Header: six items, one row (2026-08-17)

   The nav had grown to nine top-level items and wrapped onto a second row,
   because Elementor sizes the three header columns 33/33/33 and the menu lives
   in one third while the logo column sits mostly empty. `scripts/regroup-nav.mjs`
   did the grouping; this makes the header carry it. Columns become
   content-width, the nav takes the slack, and the labels get one visual
   language: the markup is title case (some screen readers spell out ALL-CAPS
   words) and the uppercase is applied here.
   ========================================================================= */
@media (min-width: 1025px) {
  .elementor-element-b27c177 > .elementor-container { flex-wrap: nowrap; }
  .elementor-element-dae66fe,
  .elementor-element-b10aa0f { width: auto !important; flex: 0 0 auto !important; }
  .elementor-element-96459dc { width: auto !important; flex: 1 1 auto !important; min-width: 0; }

  .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap !important; }
  .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
    text-transform: uppercase;
    letter-spacing: .085em;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    padding-left: .78rem;
    padding-right: .78rem;
  }
}

/* ============================================================================
   7) Above the fold (2026-08-17)

   The hero was a 90vh container holding vertically-centred content, so the
   first screen was: 170px of wrapped navigation, ~350px of empty photograph,
   the headline, and a primary CTA sitting on the fold line. Nothing below the
   hero was visible, so nothing suggested the page continued.

   Four changes, all cheap: the nav is one row (above), the hero is shorter so
   the next section peeks, the vertical rhythm inside it is tightened, and the
   veil is a gradient instead of a flat 60% black — darkest under the header
   where white nav links sit, lightest across the middle where the photograph
   is, dark again at the bottom edge.
   ========================================================================= */
.home .elementor-element-6c1dc81b > .elementor-background-overlay {
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.54) 30%,
    rgba(0,0,0,.58) 66%,
    rgba(0,0,0,.80) 100%) !important;
  opacity: 1 !important;
}
@media (min-width: 1025px) {
  /* 720px, not 90vh: on a 1080p laptop 90vh is 790px of hero before the browser
     chrome, which is the whole screen. This leaves the next section visible. */
  .home .elementor-element-6c1dc81b > .elementor-container {
    min-height: min(78vh, 660px) !important;
    max-width: 940px !important;   /* 800 broke the headline into three lines */
  }
}
@media (max-width: 1024px) {
  .home .elementor-element-6c1dc81b > .elementor-container { min-height: min(86vh, 620px) !important; }
}

/* Elementor's per-widget bottom margins stack up to ~90px inside the hero. The
   spacing is set here instead, once. */
.home .elementor-element-6c1dc81b .elementor-widget { margin-bottom: 0 !important; }

.home .elementor-element-15656d15 .elementor-headline {
  font-size: clamp(2.15rem, 4.4vw, 3.5rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
  margin: 0 0 .55rem !important;
}
.home .aeo-hero-sub { font-size: 1.05rem; margin: 0 auto .55rem; max-width: 620px; }
.home .aeo-hero-rating { margin: 0 0 1.35rem; font-size: .95rem; }
/* The chips are navigation, not conversion, so they moved BELOW the buttons
   (DOM order, not CSS order — the tab sequence has to match what the eye sees). */
.home .aeo-hero-chips { margin: 1.5rem auto 0; max-width: 660px; }
.home .aeo-hero-chips a { font-size: .76rem; padding: .38rem .85rem; border-color: rgba(255,255,255,.42); }

/* One dominant action. The call button stays available but stops competing:
   same height, lighter weight, no fill. */
.home .elementor-element-132e2235 .elementor-button { padding: 1.05rem 2.4rem !important; font-size: .84rem !important; }
.home .aeo-call-btn { padding: 1.02rem 1.6rem; font-weight: 600; }

/* ============================================================================
   8) The desktop dropdowns never opened (found 2026-08-17)

   Elementor Pro's nav-menu widget hands its submenus to SmartMenus at runtime,
   and on the mirror that handler never initialises — the <ul> never gets the
   `sm` class, so every submenu stayed `display:none`. It is the same family as
   the mobile-menu bug from 2026-08-16 (`elementorModules is not defined`), and
   it was live on the demo: "Services" (19 pages) and "GUIDES" (10) were dead on
   desktop, silently, because their parent items still looked like links.

   Fixed in CSS rather than with more JS, because a menu that needs JavaScript to
   reveal half the site is one broken bundle away from the same failure. Hover
   AND :focus-within, so the keyboard reaches it too.
   ========================================================================= */
@media (min-width: 1025px) {
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children { position: relative; }
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu {
    display: block !important;          /* beats the inherited display:none */
    position: absolute;
    top: 100%;
    left: -.4rem;
    z-index: 1000;
    min-width: 250px;
    margin: 0;
    padding: .45rem 0;
    list-style: none;
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    /* Hidden by opacity/visibility, not display, so the panel can also be a grid. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .elementor-nav-menu--main ul.sub-menu > li { margin: 0; }
  .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
    display: block;
    padding: .5rem 1.1rem;
    font-size: .8rem;
    line-height: 1.35;
    color: #f2ede3;
    text-transform: none;
    text-decoration: none;
  }
  /* Dark on gold, never white on gold — the same 6.7:1 pairing section 5 settled on. */
  .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
  .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:focus-visible {
    background: #c48f41;
    color: #111;
  }
  /* Treatments carries 20 items; a single column would be ~700px tall.
     The selector repeats the full parent chain on purpose: `:has()` takes the
     specificity of its argument, so the shorter version lost to the panel rule
     above and the panel silently stayed one column. */
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu:has(> li:nth-child(12)) {
    display: grid !important;
    /* Column-major: reading down the first column and then the second is how a
       menu is read. Row-major (the default) zig-zags across the gap. Rows are
       fixed at 10, so a service added in WordPress grows a third column rather
       than silently lengthening the panel. */
    grid-template-rows: repeat(10, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    min-width: 520px;
  }
  /* The right-hand menus open leftwards so they stay on screen. */
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:nth-last-child(-n+2) > ul.sub-menu {
    left: auto;
    right: -.4rem;
  }
}

/* In the burger panel there is no hover and no working toggle, so the children
   are simply shown, indented, under their parent. Without this the mobile menu
   would list six words and hide every treatment page behind them. */
.elementor-nav-menu--dropdown ul.sub-menu {
  display: block !important;
  padding: 0 0 .4rem;
  list-style: none;
}
.elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item {
  padding-left: 2.1rem !important;
  font-size: .84rem !important;
  opacity: .92;
}

/* The client's headline contains "Anti-Aging", and a hyphen is a line-break
   opportunity, so it broke as "Premier Aesthetics, Anti-" / "Aging and Wellness".
   improve-homepage.mjs wraps that one word; the words themselves are untouched. */
.aeo-nb { white-space: nowrap; }

/* ============================================================================
   9) B10.2 — the black corners on the "Areas of Expertise" cards (2026-08-17)

   `.elementor-toggle-item` is the card: 14px radius and a hard
   `0 0 10px rgba(0,0,0,.5)` shadow. Its children (`.elementor-tab-title` and
   `.elementor-tab-content`) are white with SQUARE corners and paint on top of
   it, so the visible white shape was a rectangle while the shadow followed a
   rounded one — and the gap between the two read as a black nub at every
   corner. Clipping the children to the card is the fix; the softer shadow is
   because 50% black at 10px blur was muddying a pale gold band.
   ========================================================================= */
.aeo-exp-grid .elementor-toggle-item {
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10) !important;
  border: 1px solid rgba(0, 0, 0, .05);
}
/* The actual culprit, found with elementsFromPoint rather than by reading CSS:
   each category's `.elementor-widget-container` carries a **category photograph**
   as a square background, and the white card covers all of it except the four
   rounded corners — which is why the nubs were navy on one card and maroon on
   the next. Clip the photo to the same shape. */
.aeo-exp-grid .elementor-widget-container {
  border-radius: 14px;
  overflow: hidden;
}

/* ============================================================================
   10) B10.3 — width discipline in the footer (2026-08-17)

   Measured at 2560px: the footer links band (`.fnav__inner`) is capped at
   1160px and centred, while the mirrored gold band below it and its container
   run the full 2560px. So the address sat at the far left edge and "FOLLOW US"
   at the far right, with the links above them floating in the middle. Same
   measure for both, and they line up.
   ========================================================================= */
.elementor-element-27f8a43f > .elementor-container {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

/* B10.6 — the homepage "Success Stories" band now leads somewhere. */
.aeo-reviews-link { text-align: center; padding: 0 1.25rem 2.5rem; background: #fff; }
.aeo-reviews-link a {
  display: inline-block; font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  color: var(--u-link, #8a6524); text-decoration: none;
  border-bottom: 2px solid var(--u-gold, #c0a062); padding-bottom: 2px;
}
.aeo-reviews-link a:hover { color: var(--u-gold-deep, #8a6d2f); }

/* ============================================================================
   11) B10.5 — the contact page (2026-08-17)

   It is the page that receives enquiries and it looked like a draft: a
   full-bleed section with 72px of empty top, an H1 at 65px in a navy
   (rgb(28,36,75)) that appears nowhere else in the brand, contact details as
   loose lines on the left, and the form floating in the right half at 336px
   wide inside a 720px column with unstyled inputs. Measured before touching
   anything; all of it is fixable from here without editing the mirrored markup.
   ========================================================================= */
.elementor-element-4e7d0a07 { padding: 2.5rem 1.25rem 3rem !important; }
.elementor-element-4e7d0a07 > .elementor-container {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  gap: 2.5rem;
}
/* The brand H1, not the theme's navy, and not 65px. */
.elementor-element-4e7d0a07 h1.elementor-heading-title {
  color: var(--u-ink, #1a1a1a) !important;
  font-size: clamp(2.1rem, 4vw, 3rem) !important;
  line-height: 1.1;
  margin-bottom: .5rem;
}
.elementor-element-7930edd4 { color: var(--u-body, #3a3a3a); font-size: 1.05rem; }

/* Contact details become one panel instead of four floating fragments. */
.elementor-element-d77002e,
.elementor-element-0a7e0aa {
  background: var(--u-tint, #faf6ee);
  border: 1px solid var(--u-line, #ece4d4);
  padding: 1.1rem 1.25rem;
}
.elementor-element-d77002e { border-radius: 14px 14px 0 0; border-bottom: 0; margin-top: 1.5rem; }
.elementor-element-0a7e0aa { border-radius: 0 0 14px 14px; }
.elementor-element-d77002e .elementor-icon-box-title,
.elementor-element-d77002e .elementor-icon-box-title span {
  color: var(--u-ink, #1a1a1a) !important;
  font-family: var(--u-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem !important;
}
.elementor-element-0a7e0aa .elementor-icon-list-item { margin-bottom: .35rem; }

/* The form becomes a card, and fills the column it was floating in. */
.elementor-element-4ffbb178 {
  background: var(--u-surface, #fff);
  border: 1px solid var(--u-line, #ece4d4);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  padding: 1.6rem 1.6rem 1.2rem;
}
.wpcf7-form p { margin: 0 0 1rem; }
.wpcf7-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--u-ink, #1a1a1a);
}
.wpcf7-form label br { display: none; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: .35rem; }
.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-email,
.wpcf7-form textarea.wpcf7-textarea {
  width: 100% !important;
  box-sizing: border-box;
  padding: .8rem .95rem !important;
  border: 1px solid var(--u-line, #ece4d4) !important;
  border-radius: 10px !important;
  background: #fff;
  font-size: 1rem;
  font-family: inherit;
  color: var(--u-ink, #1a1a1a);
  transition: border-color .15s, box-shadow .15s;
}
.wpcf7-form input.wpcf7-text:focus,
.wpcf7-form input.wpcf7-email:focus,
.wpcf7-form textarea.wpcf7-textarea:focus {
  outline: none;
  border-color: var(--u-gold, #c0a062) !important;
  box-shadow: 0 0 0 3px rgba(192, 160, 98, .22);
}
.wpcf7-form textarea.wpcf7-textarea { min-height: 130px; resize: vertical; }
/* One full-width action. The 89px "Submit" button read as a form control, not
   as the point of the page. Colour stays the pinned gold with dark text (6.7:1). */
.wpcf7-form input.wpcf7-submit {
  width: 100%;
  padding: .95rem 1.5rem !important;
  border: 0;
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .92rem;
  cursor: pointer;
}

/* The map is a landmark, not a full-bleed strip. */
.elementor-element-4e7d0a07 ~ .elementor-section iframe,
.page-content iframe[src*="maps"] {
  border-radius: 14px;
  border: 1px solid var(--u-line, #ece4d4);
  max-width: 1160px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 767px) {
  .elementor-element-4ffbb178 { padding: 1.2rem 1.1rem 1rem; }
  .elementor-element-d77002e { margin-top: 1.25rem; }
}

/* The Essential Addons wrapper pins the form itself to 66% of its column
   (334px inside 507px), which is why the fields looked stranded in the middle
   of the card. Both the plugin's div and CF7's own take the full card. */
.eael-contact-form-7-wrapper .eael-contact-form,
.eael-contact-form-7-wrapper .wpcf7 { width: 100% !important; max-width: none !important; }

/* The theme paints this page's body copy in rgb(28,36,75), a navy that appears
   nowhere else in the brand. The two detail panels also had a seam between them
   because each is its own Elementor widget with its own margin. */
.elementor-element-4e7d0a07 p,
.elementor-element-4e7d0a07 .elementor-icon-list-text,
.elementor-element-4e7d0a07 .elementor-icon-box-description,
.elementor-element-4e7d0a07 li,
.elementor-element-4e7d0a07 b { color: var(--u-body, #3a3a3a) !important; }
.elementor-element-4e7d0a07 b { color: var(--u-ink, #1a1a1a) !important; }
.elementor-element-4e7d0a07 a[href^="tel:"] { color: var(--u-link, #8a6524) !important; font-weight: 700; text-decoration: none; }
.elementor-element-4e7d0a07 a[href^="tel:"]:hover { text-decoration: underline; }
.elementor-element-d77002e { margin-bottom: 0 !important; }
.elementor-element-0a7e0aa { margin-top: 0 !important; }
/* CF7 leaves a response slot and a spinner paragraph at the foot of the form,
   which read as ~150px of empty card. */
.wpcf7-form > p:last-of-type { margin-bottom: 0; }
.wpcf7-response-output { margin: 1rem 0 0 !important; border-radius: 10px; font-size: .9rem; }
.wpcf7-form p:last-of-type { margin-bottom: 0 !important; }
.elementor-element-4ffbb178 { padding-bottom: 1.1rem; }

/* B10.7 — the 19 "Areas of Expertise" card titles are links now (they were
   hrefless accordion triggers, then spans). They keep the card heading's look;
   only the hover says "link", because a grid of nineteen underlined headings
   would read as noise. */
.aeo-exp-grid a.aeo-exp-link { color: inherit; text-decoration: none; }
.aeo-exp-grid a.aeo-exp-link:hover { color: var(--u-gold-deep, #8a6d2f); text-decoration: underline; text-underline-offset: 3px; }
.aeo-exp-grid a.aeo-exp-link:focus-visible { outline: 2px solid var(--u-gold, #c0a062); outline-offset: 3px; }

/* The homepage testimonial carousel set the review text in bold brand gold,
   centred, in three columns: decorative rather than readable, and the least
   like a review of anything on the site. Body copy reads as body copy; the
   name keeps the gold. */
.elementor-element-422594ba .elementor-testimonial-content {
  color: var(--u-body, #3a3a3a) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}
.elementor-element-422594ba .elementor-testimonial-name {
  color: var(--u-ink, #1a1a1a) !important;
  font-family: var(--u-serif, 'Playfair Display', Georgia, serif);
}
.elementor-element-422594ba .elementor-testimonial-job { color: var(--u-faint, #6e6e6e) !important; }

/* ============================================================================
   9) First screen and header, from the client walkthrough call (2026-08-27)

   Measured on the live site at 1366x768 before the change: the header is 100px,
   the hero headline began 25px under it (the client: "it cuts off"), the nav and
   the booking button sat top-aligned against an 80px logo ("scooch these down"),
   and the section under the hero set its heading at 65px against 16px body copy
   ("a weird jump"). The hero's rating and location lines are removed by
   scripts/first-screen-2026-08-28.mjs; the phone link it adds is styled here.
   ========================================================================= */
@media (min-width: 1025px) {
  .elementor-element-b27c177 > .elementor-container { align-items: center; padding-top: 6px; padding-bottom: 6px; }
  .elementor-element-b27c177 .elementor-widget-wrap { align-content: center !important; align-items: center !important; }
  .elementor-element-dae66fe > .elementor-widget-wrap { flex-wrap: nowrap !important; }
  .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { padding-left: 1rem; padding-right: 1rem; }
  /* A smaller booking button: the nav is the primary read, the button a quiet constant. */
  .elementor-element-b10aa0f .elementor-button { padding: .62rem 1.15rem !important; font-size: .74rem !important; letter-spacing: .06em !important; }
  /* Hero copy clears the header instead of being vertically centred against it. */
  .home .elementor-element-6c1dc81b > .elementor-container { padding-top: 112px !important; padding-bottom: 24px !important; box-sizing: border-box; }
  .aeo-hdr-phone {
    display: inline-block; color: #f1e4c6; text-decoration: none; font-size: .82rem; font-weight: 600;
    letter-spacing: .06em; margin: 0 16px 0 14px; white-space: nowrap; order: -1;
  }
  .aeo-hdr-phone:hover { color: #c0a062; }
}
/* On phones the sticky bar already carries the number. */
@media (max-width: 1024px) { .aeo-hdr-phone { display: none; } }

/* Type scale under the hero: one step down for the display heading, one step up
   for the body copy, so the two read as the same page. */
.home .elementor-element-1a22255b .elementor-heading-title { font-size: clamp(1.85rem, 3vw, 2.6rem) !important; line-height: 1.12 !important; }
.home .elementor-element-1a22255b .elementor-widget-text-editor,
.home .elementor-element-1a22255b .elementor-widget-text-editor p { font-size: 1.08rem !important; line-height: 1.7 !important; }
.home .elementor-element-15656d15 .elementor-headline { font-size: clamp(2.1rem, 4vw, 3.25rem) !important; }

/* ============================================================================
   10) Header and footer from the call of 2026-09-01 (worked 2026-09-03)

   Header: "logo all the way to the left, the phone number right next to it,
   bigger, and scooch the menu over". The phone sits in the header's first
   column ahead of the logo (first-screen script, 2026-08-28); this orders it
   after the logo, enlarges it to the size of the nav links, and lets the nav
   column take what is left. Desktop only: the burger header keeps its layout.

   Footer: "looks huge, too much space" -> the gold footer's three columns lose
   their empty vertical padding and the address column carries the logo (his
   billboards use it). The dark link band above it is compressed in
   FooterNav.astro. The year and the LLC are text edits in footer.txt.
   ========================================================================= */
@media (min-width: 1025px) {
  /* Section 9 put the phone left of the logo (order: -1). The client wants the logo
     first, then the phone, larger: order 2, nav-link size, a little air after the logo. */
  .aeo-hdr-phone {
    order: 2 !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    margin: 0 0 0 1.5rem !important;
    color: #f5ead2 !important;
  }
  .aeo-hdr-phone:hover { color: #c0a062 !important; }
  /* The header's first column holds the phone + the logo; let it grow so the pair
     sits flush left and the menu column takes the rest. */
  .elementor-element-b27c177 > .elementor-container > .elementor-column:first-child { flex-grow: 0; width: auto !important; }
  .elementor-element-b27c177 > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { justify-content: flex-start !important; flex-wrap: nowrap !important; }
  .elementor-element-b27c177 > .elementor-container > .elementor-column:first-child .elementor-widget-image { margin-bottom: 0 !important; }
}
/* Gold footer: tighter vertical rhythm. The mirrored sections stack ~70px of
   padding per column; 28px top/bottom reads as one band instead of three. */
footer .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* Measured 2026-09-03: the empty space was the two inner sections per column, whose
   containers carry min-height 80px and 120px from the theme. Let content set the height. */
footer .elementor-inner-section > .elementor-container { min-height: 0 !important; }
footer .elementor-inner-section .elementor-widget { margin-bottom: 6px !important; }
/* The address heading was written with blank lines (br br) between address and city and a
   leading/trailing br; one break is enough now that the logo sits above it. */
footer .elementor-heading-title > br:first-child, footer .elementor-heading-title > b + br,
footer .elementor-heading-title > b > br + br { display: none; }
footer .elementor-heading-title { line-height: 1.35 !important; }
footer .aeo-footer-logo { display: block; width: 190px; max-width: 70%; margin: 0 auto 8px; }
footer .aeo-footer-logo img { width: 100%; height: auto; display: block; }

/* ============================================================================
   11) The homepage on a phone (2026-09-04)

   The client's verdict on the staging homepage, from his iPhone: "looks
   terrible". Measured in WebKit at 393px: 16,723px tall against 6,365px for
   the WordPress page it replaces, and two blocks made 9,657px of that. The
   "Areas of Expertise" cards, always open on desktop where four columns share
   the height, stacked into ONE column of ~150 ALL-CAPS service names (5,177px);
   the results strip stacked eight 4:5 video posters (4,480px; fixed in
   VideoGallery.astro). Below 700px each expertise card is its title only, two
   to a row, the whole card a link to the service page that lists the services;
   the lists stay in the DOM for wider screens.
   ========================================================================= */
@media (max-width: 700px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr floors at the column's min-content, and
     the word MICRONEEDLING made the left column 181px against 162px on the right
     (measured on the deployed page). */
  .aeo-exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-items: stretch; padding-bottom: 1.75rem; }
  /* The one title that cannot fit half the width at any sane size takes the
     whole row (13th of 19, so the pairs still close with no orphan). Older
     engines without :has() fall back to the uneven columns above. */
  .aeo-exp-grid > .elementor-section:has(.aeo-exp-link[href="/exion-rf-microneedling-ultrasound/"]) { grid-column: 1 / -1; }
  /* Every layer between the grid cell and the card fills the cell, so the two
     cards of a row stay the same height when one title wraps. */
  .aeo-exp-grid > .elementor-section,
  .aeo-exp-grid > .elementor-section > .elementor-container,
  .aeo-exp-grid .elementor-column,
  .aeo-exp-grid .elementor-widget-wrap,
  .aeo-exp-grid .elementor-widget-toggle,
  .aeo-exp-grid .elementor-widget-toggle > .elementor-widget-container,
  .aeo-exp-grid .elementor-toggle,
  .aeo-exp-grid .elementor-toggle-item { height: 100%; box-sizing: border-box; }
  .aeo-exp-grid .elementor-widget-wrap { padding: 0 !important; }
  .aeo-exp-grid .elementor-widget-toggle { margin: 0 !important; }
  .home .aeo-exp-grid .elementor-tab-content { display: none !important; }
  .home .aeo-exp-grid .elementor-toggle-item { box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; }
  .home .aeo-exp-grid .elementor-tab-title {
    position: relative; height: 100%; box-sizing: border-box; min-height: 3.6rem;
    display: flex; align-items: center; padding: .8rem 1.7rem .8rem .85rem !important;
  }
  /* .85rem: MICRONEEDLING (13 caps in Playfair) fits a 171px card at that size;
     overflow-wrap is the net for a label edited later, not a design choice. */
  .home .aeo-exp-grid .elementor-toggle-title { font-size: .85rem !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  /* The whole card is the tap target, not just the words. */
  .home .aeo-exp-grid a.aeo-exp-link::before { content: ""; position: absolute; inset: 0; }
  /* A chevron says "this opens a page"; on desktop the list under the title said it. */
  .home .aeo-exp-grid .elementor-tab-title::after {
    content: ""; position: absolute; right: .95rem; top: 50%; width: .5rem; height: .5rem;
    border-right: 2px solid var(--u-gold, #c0a062); border-bottom: 2px solid var(--u-gold, #c0a062);
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* On the homepage the hero carries its own "Schedule consultation" and "Call",
   and the sticky bar sat on top of them on the very first phone screen: two
   identical pairs of buttons. StickyCta.astro holds it below the viewport there
   until the hero has scrolled by. */
.aeo-sticky { transition: transform .25s ease; }
.aeo-sticky--wait { transform: translateY(110%); }

/* ============================================================================
   12) The client's homepage corrections of 2026-09-04
       (scripts/homepage-corrections-2026-09-04.mjs). Two things live here:
       the "Areas of Expertise" cards as balanced columns on wider screens ("needs
       to be organized better, more symmetrical": the row grid left holes under
       the short cards because every row took the height of its tallest), and
       the copy block that replaced the About section at the bottom of the page.
   ========================================================================= */
@media (min-width: 701px) {
  /* Multi-column flow packs the cards top to bottom with no row alignment, so
     the four column bottoms land within one card of each other whatever the
     list lengths. `gap` is a grid property; the spacing moves to the cards. */
  .aeo-exp-grid { display: block; column-count: 3; column-gap: 1.1rem; }
  .aeo-exp-grid > .elementor-section { break-inside: avoid; margin-bottom: 1.1rem; }
  .aeo-exp-grid > .elementor-section:last-child { margin-bottom: 0; }
}
@media (min-width: 1100px) { .aeo-exp-grid { column-count: 4; } }
/* Phones (the 700px rule above): EXION takes a full row, so with an even count
   the last card would sit alone in the left half; give it the row too. */
@media (max-width: 700px) {
  .aeo-exp-grid > .elementor-section:last-child:nth-child(even) { grid-column: 1 / -1; }
}

.aeo-copy { background: var(--u-surface, #fff); padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.aeo-copy__inner { max-width: 880px; margin: 0 auto; font-family: var(--u-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color: var(--u-ink, #1a1a1a); }
.aeo-copy h2 { font-family: var(--u-serif, 'Playfair Display', Georgia, serif) !important; font-weight: 600; font-size: var(--u-h2, 1.7rem); line-height: 1.25; margin: 2rem 0 .75rem; color: var(--u-ink, #1a1a1a); }
.aeo-copy h2:first-child { margin-top: 0; }
.aeo-copy p { font-size: 1.02rem; line-height: 1.7; margin: 0 0 1rem; color: #3a3a3a; }
.aeo-copy ul { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.aeo-copy li { font-size: 1.02rem; line-height: 1.65; margin-bottom: .45rem; color: #3a3a3a; }
.aeo-copy li::marker { color: var(--u-gold, #c0a062); }
.aeo-copy a { color: var(--u-link, #8a6524); font-weight: 600; text-decoration: none; }
.aeo-copy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aeo-copy__tag { font-family: var(--u-serif, 'Playfair Display', Georgia, serif); font-size: 1.35rem; font-weight: 600; color: var(--u-ink, #1a1a1a); margin-top: 1.5rem; }

/* ============================================================================
   13) "Areas of Expertise" starts closed on desktop (2026-09-09)

   The client, looking at the desktop homepage on the call: "It looks just kinda
   messy. Just too much." Every card was forced open (section 3 above), so the
   section was ~150 ALL-CAPS service names in four columns. Closed, it is 19
   titles a visitor can scan, and the list is one click away.

   Everything here hangs off `.is-collapsible`, which `public/aeo-expertise.js`
   adds. Without the script the cards stay open exactly as before: a closed card
   with no working toggle would hide the lists behind nothing, and Elementor's
   own toggle handler does not run on these pages.

   The layout goes back to a real grid while collapsible. The column flow of
   section 12 exists to pack cards of wildly different heights; closed cards are
   all the same height, so a grid is symmetric anyway, and it cannot shuffle the
   other cards between columns when one of them opens.
   ========================================================================= */
.aeo-exp-toggle { display: none; } /* phones: the whole card is a link, no toggle */

@media (min-width: 701px) {
  .aeo-exp-grid.is-collapsible {
    display: grid;
    column-count: initial;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 1rem;
    row-gap: 1rem;
    align-items: start;
  }
  .aeo-exp-grid.is-collapsible > .elementor-section { margin-bottom: 0; }

  .home .aeo-exp-grid.is-collapsible .elementor-tab-content { display: none !important; }
  .home .aeo-exp-grid.is-collapsible .elementor-toggle-item.is-open .elementor-tab-content {
    display: block !important;
    padding: .15rem 1.15rem 1.1rem !important;
  }

  /* Elementor puts a 20px bottom margin on every widget; with the cards in a
     grid that margin reads as an uneven row gap. Same reset the phone block
     makes, for the same reason. */
  .aeo-exp-grid.is-collapsible .elementor-widget-toggle { margin: 0 !important; }
  .aeo-exp-grid.is-collapsible .elementor-widget-wrap { padding: 0 !important; }

  .home .aeo-exp-grid.is-collapsible .elementor-tab-title {
    display: flex; align-items: center; gap: .6rem;
    /* A closed card is its title, so one- and two-line titles must come out the
       same height or the row looks ragged, which is the "more symmetrical" note
       from 2026-09-04. Three-line EXION is still taller; that is one card. */
    min-height: 4.6rem; box-sizing: border-box;
    padding: 1rem 1.15rem !important;
    cursor: pointer !important;               /* section 3 sets `default` for always-open cards */
  }
  .home .aeo-exp-grid.is-collapsible .elementor-toggle-item.is-open .elementor-tab-title {
    /* The min-height exists to even out the closed cards; holding it open leaves
       a band of white between the title and the first service. */
    min-height: 0; padding-bottom: .5rem !important;
  }
  .home .aeo-exp-grid.is-collapsible .elementor-toggle-title {
    flex: 1 1 auto; font-size: 1.05rem !important; line-height: 1.25 !important;
  }
  /* One title runs to three lines at 1.05rem and makes its whole row 97px against
     76px for every other card (measured at 1440). At .92rem it fits two lines and
     the grid is uniform. Named explicitly, like the phone rule for the same card,
     rather than shrinking all eighteen titles to suit one. */
  .home .aeo-exp-grid.is-collapsible > .elementor-section:has(.aeo-exp-link[href="/exion-rf-microneedling-ultrasound/"]) .elementor-toggle-title {
    font-size: .92rem !important;
  }

  .aeo-exp-grid.is-collapsible .aeo-exp-toggle {
    display: block; flex: 0 0 auto;
    width: 2rem; height: 2rem; padding: 0; margin: 0;
    position: relative;
    background: transparent; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px;
    cursor: pointer;
  }
  /* The chevron. Gold-deep, not brand gold: section 5 measured plain gold as a
     contrast failure in both directions. */
  .aeo-exp-grid.is-collapsible .aeo-exp-toggle::after {
    content: ""; position: absolute; left: 50%; top: 45%;
    width: .45rem; height: .45rem;
    border-right: 2px solid var(--u-gold-deep, #8a6d2f);
    border-bottom: 2px solid var(--u-gold-deep, #8a6d2f);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform .15s ease;
  }
  .aeo-exp-grid.is-collapsible .elementor-toggle-item.is-open .aeo-exp-toggle::after {
    transform: translate(-50%, -25%) rotate(-135deg);
  }
  .aeo-exp-grid.is-collapsible .aeo-exp-toggle:hover { background: rgba(192, 160, 98, .14); }
  /* The theme paints `outline: auto 3px rgb(204,51,102)` on any :focus, so a
     mouse click on the chevron left a pink ring behind. Keyboard focus keeps a
     ring, in the brand gold, through :focus-visible. */
  .aeo-exp-grid.is-collapsible .aeo-exp-toggle:focus { outline: none; }
  .aeo-exp-grid.is-collapsible .aeo-exp-toggle:focus-visible {
    outline: 2px solid var(--u-gold-deep, #8a6d2f); outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .aeo-exp-grid.is-collapsible .aeo-exp-toggle::after { transition: none; }
  }
}

/* ============================================================================
   14) Keyboard focus the audit found missing (2026-09-14)

   From scripts/audit-a11y-keyboard.mjs: the contact form's Submit changed
   nothing on focus, and the legacy price tables became focusable (so a keyboard
   can scroll them on a phone) and need a ring to show it. Gold-deep, the same
   colour section 13 uses, because plain brand gold fails contrast on white.
   ========================================================================= */
.wpcf7-form input.wpcf7-submit:focus-visible,
.ea-advanced-data-table-wrap-inner:focus-visible,
iframe.aeo-map:focus {
  outline: 3px solid var(--u-gold-deep, #8a6d2f) !important;
  outline-offset: 3px;
}
/* The skip link lands on <main tabindex="-1">; a programmatic focus target needs no ring. */
.page-main:focus { outline: none; }
/* WCAG 1.4.10: the closed phone-menu panel extends 12px past a 320px viewport and
   made /quiz/ scroll sideways by 4px. `clip`, not `hidden`: hidden turns the body
   into a scroll container and breaks the sticky header and the sticky booking bar. */
@media (max-width: 767px) { body { overflow-x: clip; } }

/* ============================================================================
   15) Headings whose tag changed for the outline, pinned to their old look (2026-09-14)

   fix-a11y-mirror.mjs turns the footer h5s, the homepage "SUCCESS STORIES" /
   "BRANDS WE USE" h4s and the contact page's "Address:" h4 into h2, because a
   native h4 keeps level 4 whatever aria-level says. Computed styles were compared
   against the live pages at 1440 and 390 wide: everything matched except the
   homepage pair, which picked up a homepage h2 colour (#c48f41) instead of the
   gold-deep they had. Add a pin here only for a property that measured different.
   ========================================================================= */
.home h2.elementor-heading-title.aeo-h4 { color: var(--u-gold-deep, #8a6d2f) !important; }