/* ===================================================================
   Page-Specific Styles
   Athena Eye Care
   Values measured from athenaeyecare.com homepage (3x-DPI capture,
   true CSS viewport 1280px)
   =================================================================== */

/* ====================================================================
   SMOOTH SCROLL FOR ANCHOR LINKS
   ==================================================================== */

html {
  scroll-behavior: smooth;
}

/* ====================================================================
   HOMEPAGE — HERO SECTION (ocean video background)

   The header is 108px tall (10px padding top/bottom + 88px logo) — matches original F12.
   The hero pulls up under it with a matching negative margin and
   re-pads by the same amount, so the video starts at the very top of
   the page with NO white gap, and the transparent header sits over it.

   No isolation/transform hacks here — they triggered the Chrome video
   color bug and broke the overlap. The bug is fixed in components.css
   by removing blur + making dropdowns opaque.
   ==================================================================== */

.hero-home {
  position: relative;
  width: 100%;
  min-height: 835px;
  margin-top: -108px;       /* pull up under the sticky header (= its height: 88px logo + 10+10 padding) */
  padding-top: 108px;       /* push content back below the header */
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Background video — fills hero, NO overlay (keeps true ocean color) */
.hero-home__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Hero content container */
.hero-home .container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 100px;
  width: 100%;
}

/* Phone number — white text over hero video, upper-right.
   POSITIONING FIX: previously this was absolute inside .container, whose
   box starts 108px down (the hero's padding-top), so `top` was being
   measured from the wrong origin — top:124 actually rendered at ~232+.
   Now anchored to .hero-home directly (see .hero-home position:relative)
   so `top` is measured from the true hero top.
   Measured target from original (full-page screenshot, normalized to
   build width): phone sits ~197px down from hero top. */
.hero-home__phone {
  position: absolute;
  /* TRUE CSS PIXEL measurement: original phone center sits at y≈126.
     The phone text is ~30px tall, so top ≈ 111 puts the center at ~126.
     (Structure already fixed: phone is a direct child of .hero-home so
     `top` is measured from the true hero top.) */
  top: 111px;
  /* Lateral position MEASURED from latest screenshots: original phone
     sits 68px from the right edge; build was at 33px. Set to 68px. */
  right: 68px;
  z-index: 4;
  font-family: var(--font-times);
  font-weight: var(--fw-bold);
  font-size: 25px;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 1px;
  transition: opacity var(--transition-fast);
}

.hero-home__phone:hover {
  opacity: 0.85;
  color: var(--color-white);
  text-decoration: underline;
}

/* Hero content block — right-aligned */
.hero-home__content {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* "Transform Your Vision"
   Original: "Birdseye" = Avenir Next LT W01 Ultra Light.
   We use Jost (free Avenir alternative).
   ALL values below measured in TRUE CSS PIXELS — both build and original
   screenshots confirmed to render at 1280px viewport.
   - size: from the reliable solid-text measurement (88px font → 69px
     cap-height; original cap-height = 62px) → 88 * 62/69 ≈ 79px.
     (The 73px tried last round was based on a faint-text reading that
     under-measured the height — corrected here to 79px.)
   - weight: kept at 100 per "200 too heavy" feedback. If 100 now looks
     too faint, 150 is the middle option. */
.hero-home__title {
  /* HERO EXCEPTION: only element not using --font-jost (Nunito Sans).
     DM Sans loaded as variable wght@100..1000 in index.html. Lightest
     master is 100, so weight 100 renders cleanly without snapping.
     Iteration history: Jost @ 175/185 → Nunito Sans @ 200 (too heavy)
     → Inter @ 150 → Inter @ 115 → DM Sans @ 100 (current). */
  font-family: 'DM Sans', sans-serif;
  /* All three values below from a CLEAN same-scale measurement (both
     build and original H1 captured as full-width 3840px crops = 3.0x
     of 1280 CSS):
     - font-size 79px: cap-height measured 62.3 vs original 62.0 — KEEP.
     - letter-spacing 4.4px: build text was 649 CSS wide vs original
       740.7 — 92px too narrow across ~21 chars = +4.4px/char.
     - font-weight: see iteration history in font-family comment above. */
  font-weight: 100;
  font-size: 79px;
  line-height: 1.0;
  /* letter-spacing reduced 4.4 → 3.5 per user request: "all the letters
     spaced a little closer together." 4.4 was the measured value vs
     the original at full lowercase size. With per-letter size variation
     introduced (see .hero-home__title-lc below), the visual rhythm of
     the spacing changes, so this is a re-tuning rather than a regression
     from the measurement. Easy to fine-tune further. */
  letter-spacing: 3.5px;
  color: var(--color-white);
  margin: 0;
}

/* Lowercase letters in the hero title (EXCEPT 'f') are sized down
   slightly relative to the uppercase letters and 'f'. Visual effect:
   capitals at the start of each word visually dominate, 'f' rides
   up tall, the other lowercase letters tuck slightly under the cap
   line. Baselines stay aligned automatically (CSS baseline alignment).
   The 0.90 ratio is a starting point — increase toward 1.0 to shrink
   the size difference, decrease to widen it. */
.hero-home__title-lc {
  font-size: 0.90em;
}

/* "Dr Audrey Tai"
   Times New Roman, weight 600, line-height 1.0, 24px.
   NOTE: pixel-detection of this element's height has been inconsistent
   between screenshot rounds (faint/thin text is hard to measure
   reliably), so 24px is the best current estimate, not a locked value.
   If it looks too small next to the original, the cleanest fix is an
   F12 read of the original's actual font-size.
   Gap above (H1 → name): measured ~42px CSS. */
.hero-home__subtitle {
  font-family: var(--font-times);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: 1.0;
  letter-spacing: 1px;
  color: var(--color-white);
  margin: 30px 0 0 0;
}

/* Buttons row — right-aligned.
   Gap above (name → buttons): measured ~74px CSS in the original; the
   build's rendered gap measured ~88px with margin-top:60px, so trimmed
   to 46px to bring it closer. */
.hero-home__buttons {
  display: flex;
  gap: 24px;
  margin-top: 46px;
}

/* Override secondary button when on dark background (hero) */
.btn-secondary--on-dark {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-secondary--on-dark:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ====================================================================
   HOMEPAGE — BIO SECTION (two independent flowing columns, 50/50)
   ==================================================================== */

.bio-section {
  /* padding-bottom was 80, which stacked with .awards-section padding-top
     to produce a 108 CSS gap between "Precision" and "Most Trusted"
     (target 40). The original treats these two centered lines as a
     single visual block, so we tighten to 16. The real "section break"
     visual rhythm comes back at the awards row 1 below. */
  padding: 72px 0 16px;
  background-color: var(--color-white);
}

/* "Dr. Audrey Tai" — measured ~40px, Playfair regular, centered */
.bio-section__title {
  text-align: center;
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: 56px;
}

/* The two-column grid — 50/50 split, 48px gap (measured) */
.bio-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.bio-col {
  display: flex;
  flex-direction: column;
}

/* Subheadings — bold serif, CENTERED within their column (measured ~18px) */
.bio-section__subhead {
  font-family: var(--font-playfair);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-black);
  text-align: center;
  margin-top: 28px;
  margin-bottom: 20px;
}

/* First subhead in a column has no big top margin */
.bio-col > .bio-section__subhead:first-child {
  margin-top: 0;
}

/* Bio section closing line "Precision, Personalization, Peace of Mind"
   — full-width, centered, Playfair bold. Sits below the two bio columns,
   above the awards section.
   margin-top measured from the screenshot: 44 produced a 61 CSS gap
   (target 54). 36 brings it to ~53 CSS. The remaining ~28 px comes from
   the .bio-text last paragraph's margin-bottom (18) + line leading. */
.bio-section__closer {
  font-family: var(--font-playfair);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-black);
  text-align: center;
  margin: 36px 0 0 0;
}

/* Body paragraphs — left-aligned */
.bio-text {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-black);
  margin-bottom: 18px;
}

/* Media (images AND video) — fill column width */
.bio-media {
  width: 100%;
  height: auto;
  display: block;
  margin: 24px 0;
}

/* Portrait photo — TRUE CSS PIXEL measurement: the original portrait is
   413px wide (and ~619px tall) in a 1280px-viewport layout, centered in
   its column with white space either side. Last round's 63% rendered it
   at only ~343px CSS — 17% too small. 413px restores the exact size.
   max-width:100% keeps it safe if the column ever gets narrower. */
.bio-media--portrait {
  width: 413px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Awards list */
.bio-awards {
  list-style: none;
  margin: 4px 0 18px 0;
  padding: 0;
}

.bio-awards li {
  font-family: var(--font-playfair);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-black);
}

/* ====================================================================
   RESPONSIVE — Tablet
   ==================================================================== */

@media (max-width: 1023px) {

  .hero-home {
    min-height: 640px;
  }

  .hero-home__title {
    font-size: 60px;
  }

  .hero-home__subtitle {
    font-size: 21px;
  }

  .hero-home__phone {
    font-size: 21px;
    top: 84px;
    right: var(--container-padding-tablet);
  }
}

/* ====================================================================
   RESPONSIVE — Mobile
   ==================================================================== */

@media (max-width: 767px) {

  .hero-home {
    /* PROPER MOBILE HERO HEIGHT — was min-height: 520px, which made
       the hero ~55% of viewport at iPhone 12 Pro (compressed: title
       appeared near top of hero, bio section started too early).

       Original athenaeyecare.com makes the hero FULL VIEWPORT at mobile.
       Math:
         - Mobile header height = logo 48 + padding 10+10 = 68 CSS
         - Hero needs to extend from y=-68 (under sticky header) to
           y=100vh (viewport bottom)
         - Total height = 100vh + 68
         - margin-top: -68 pulls hero up under the transparent header
         - padding-top: 68 pushes content back below where header
           would sit, so the header doesn't visually cover the title

       Combined with .hero-home .container { justify-content: flex-end;
       padding-bottom: 100px } (already in desktop rule), the hero text
       and buttons end up bottom-anchored in the full viewport-tall hero,
       matching the original. */
    min-height: calc(100vh + 68px);
    margin-top: -68px;
    padding-top: 68px;
  }

  .hero-home__title {
    font-size: 40px;
  }

  .hero-home__subtitle {
    font-size: 17px;
  }

  .hero-home__phone {
    font-size: 17px;
    /* Phone position measured precisely from same-scale side-by-side
       comparison: original places phone at viewport y≈60 (~7% from
       top, just below the 68-tall header). With hero margin-top:-68,
       hero top = viewport y=-68. To get phone at viewport y=60:
       top = 60 - (-68) = 128. Using 130 for cleaner number. */
    top: 130px;
    right: var(--container-padding-mobile);
  }

  .hero-home__buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-home__buttons .btn {
    width: 100%;
  }

  /* Bio — stack the two columns */
  .bio-section {
    padding: 48px 0 56px;
  }

  .bio-section__title {
    font-size: 30px;
    margin-bottom: 32px;
  }

  .bio-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ====================================================================
   CHUNK 2 — Awards / Affiliations · Unlock Your Vision Potential · CTA
   Section heights measured from the original full-page screenshot
   (3840px wide = 3.0x of the 1280px CSS layout):
     - Awards section ≈ 407px tall
     - Unlock section ≈ 847px tall
     - CTA strip      ≈ 193px tall
   Layout/spacing is a first build from the visual reference; fine
   measurements (logo sizes, gaps) to be refined against a build vs
   original comparison screenshot.
   ==================================================================== */

/* ---- Awards / Affiliations (white background) ---- */
.awards-section {
  background: var(--color-white);
  /* padding-top contributes to the Precision → Most Trusted gap. The
     larger contributor (bio-section padding-bottom) was reduced from
     80 → 16; this 8 fine-tunes the remaining ~4 CSS px to land at the
     ~40 CSS target gap. Don't tune this above ~12 without re-checking
     bio-section padding-bottom — they stack. */
  padding: 8px 0 80px;
  text-align: center;
}

.awards-section__title {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  /* Measured from original: regular weight (NOT bold), sits on ONE line. */
  font-size: 19px;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 1100px;
  margin: 0 auto;
  /* Measured: gap from heading bottom → row 1 logos = 71 CSS in original. */
  padding-bottom: 71px;
}

.awards-row {
  /* Switched from flex+justify-content:center to a 4-column grid.
     Reason: with flex+center, naturally-narrower logos clustered
     tightly in the middle while wider logos spread out — making
     row 1 (mostly tall/square logos) look much narrower than
     row 2 (mostly horizontal logos). Original distributes BOTH
     rows evenly across the full container width.
     With grid + repeat(4, 1fr) each logo gets its own equal-width
     cell (1136/4 = 284 CSS at desktop), so both rows align
     identically regardless of logo aspect ratios. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  /* Row-to-row vertical gap. */
  margin-bottom: 48px;
}

.awards-row:last-child {
  margin-bottom: 0;
}

.awards-row__logo {
  /* Explicit height (not max-height) — the previous session
     established this approach because the source images have small
     natural dimensions and max-height would only scale DOWN. Using
     explicit `height` forces them to scale UP to fill, matching the
     original's apparent logo size.

     Updated 2026-05-15: height bumped 130 → 152 to match the
     original's measured row 1 logo height of 151 CSS (Castle
     Connolly, Physicians of Excellence, the AAO Fellow badge).

     ROW 1 LOGOS (OC Medical, Castle Connolly, Physicians of
     Excellence, Super Doctors): mostly small-intrinsic sources;
     scale UP to fill height: 152.

     ROW 2 LOGOS (UC Irvine, Columbia, AAO Board, AAO Fellow):
     larger intrinsic widths → hit max-width: 260 first. Browser
     scales whole image down to fit max-width, so they render
     width=260 with proportional height. Their height ends up < 152
     (matches original where row 2 is shorter than row 1).

     max-width 260 retained: works inside each 284-wide grid cell
     (leaves ~12 CSS breathing room per cell side). */
  height: 152px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
}

/* ---- Unlock Your Vision Potential (underwater photo background) ---- */
.unlock-section {
  background: url("../media/home/unlock-vision-background.webp") center center / cover no-repeat;
  /* padding-top 65 / padding-bottom 18 (tuned after user feedback that
     heading needed to move down further and section needed less
     crowding overall). The added padding is offset by a body-text
     reduction (font 18→17, line-height 1.7→1.65) so section total
     height stays close to the 854 CSS target where bg-image cover
     fits without significant side cropping. */
  padding: 72px 0 20px;
  text-align: center;
}

.unlock-section__title {
  /* F12 from original (Computed):
       font-family: "Playfair Display"
       font-weight: 400 (regular)
       font-size: 48px
       line-height: 60px
       color: rgb(255,255,255)
       text-align: center
     The earlier Jost-300/52px was wrong; the original uses Playfair. */
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 48px;
  line-height: 60px;
  letter-spacing: 0;
  color: var(--color-white);
  /* margin-bottom 38: tuned for slightly more space between heading
     and the icon row below. Previously was 30 (from the redistribute
     pass), originally 56 (visually estimated). */
  margin: 0 0 42px;
}

.unlock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.unlock-col {
  text-align: center;
  padding: 0 8px;
}

.unlock-col__icon {
  /* Bumped from 70 -> 90 to match the visibly larger icons in original. */
  height: 90px;
  width: auto;
  /* margin-bottom 18: small bump for less-crowded icon-to-label gap. */
  margin: 0 auto 20px;
  display: block;
}

.unlock-col__label {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  /* Bumped 22 -> 26 to match the original's larger label text. */
  font-size: 26px;
  line-height: 1.2;
  /* Measured from the original: a bright orchid pink, rgb(246,169,240). */
  color: #F6A9F0;
  margin: 0 0 20px;
}

.unlock-col__text {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  /* Body line cap-height same-scale measurement gave 18px (15 * 13/11
     ≈ 18) as the original. Now at 16.5px after iterative user feedback:
     18 → too large, 16 (Path 2) → rejected as too small, 17 → "tiny bit
     too large still", 16.5 → current. Half-step between rejected and
     approved sizes. */
  font-size: 16.5px;
  /* Line-height tightened 1.7 → 1.65 to match the smaller font and
     create slightly more compact paragraphs (less-crowded section). */
  line-height: 1.65;
  color: var(--color-white);
  margin: 0;
}

/* ---- CTA strip (solid sky-blue band) ----
   Padding bumped 36 → 48: equal-scale measurement of the original strip
   was 573 raw px vs build's 554; the +12 of total padding (and the
   taller flex content from the new button padding below) restores it. */
.cta-strip {
  background: var(--color-sky-blue);
  padding: 48px 0;
}

.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.cta-strip__text {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 26px;
  color: var(--color-text);
  margin: 0;
}

/* CTA button — FULL OVERRIDE of .btn .btn-primary on purpose.
   Why a full override:
   - The hero's --button-padding-y:6 was specifically tuned for the
     hero buttons (they were measured 1.38× too tall there). The CTA
     button shares the .btn-primary class chain, so it was inheriting
     that 6px and rendering ~18 CSS px shorter than the original's CTA
     button. That under-tall button was also why "Personal and
     Customized..." was floating 25 CSS px too high in the strip — the
     flex container was shorter than it should be.
   - Original site: base state is SOLID black fill + white text. On
     hover it inverts to OUTLINED (transparent fill + black border +
     black text). The previous build had the right components but on
     the wrong states; the hover behavior in components.css was making
     the bg disappear without changing the text color, causing the
     "invisible button on mouseover" symptom.
   Pages.css loads after components.css, so this rule wins on
   equal-specificity (later wins). */
.cta-strip__button {
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
  padding: 14px 36px;
  font-family: var(--font-montserrat);
  font-size: var(--fs-button);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--button-border-radius);
  transition: background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
}

.cta-strip__button:hover {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}

/* ====================================================================
   CHUNK 3 — YouTube Gallery + Reviews / Testimonials
   ====================================================================
   YouTube widget self-renders its own header, tabs, thumbnails, and
   pagination. Section wrapper just provides background + padding.

   Reviews widget self-renders the "Overall Rating" box, the review
   cards, and the "Load More" button. But the PAGE provides the
   section heading ("What our patients say") and the subtitle link
   above the widget — visible in the original site's HTML structure
   (the heading sits OUTSIDE the gray rating box, so it's not from
   the widget).

   IMPORTANT: do NOT try to restyle widget internals from this
   stylesheet. Elfsight widgets load inside their own shadow/scoped
   DOM context; targeting their classes from here won't work reliably.
   If colors or typography inside a widget look wrong, fix them in
   the Elfsight dashboard, not here. */

.youtube-section {
  background: var(--color-white);
  /* font-family: Jost approximates the original site's "Birdseye"
     (Avenir Next Ultra Light, Weebly's alias). The Elfsight widget
     inherits font-family from its containing section, so without this
     it picks up Playfair from base.css body styles — wrong typeface
     vs the original. Setting Jost here makes the widget render with
     the same font family as the original. Widget supplies its own
     weights/sizes; we only override the family. */
  font-family: var(--font-jost);
  /* First-pass padding estimate. Original YT section is ~493 CSS tall
     at 1280 viewport; widget content + this padding should land close.
     Refine after seeing rendered build. */
  padding: 60px 0 30px;
}

.reviews-section {
  background: var(--color-white);
  /* Same reason as .youtube-section above — force Jost so the Elfsight
     reviews widget inherits the correct typeface (matching the
     original site's Birdseye) instead of our body's Playfair.
     The .reviews-section__title and __subtitle rules below set
     font-family explicitly to Playfair, so they're unaffected by
     this section-level override. */
  font-family: var(--font-jost);
  /* First-pass padding estimate. Original Reviews section is ~1717 CSS
     tall (much taller now that the widget shows 8 reviews in 2 rows). */
  padding: 30px 0 80px;
}

/* "What our patients say" — F12-verified from original:
     font-family: "Playfair Display"
     font-size: 32px
     font-weight: 400 (regular)
     line-height: 40px
     color: rgb(27, 89, 124) = #1B597C  (deep navy-teal)
     text-align: center
   Earlier guesses (40px, --color-teal-dark) were both wrong. */
.reviews-section__title {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 32px;
  line-height: 40px;
  color: var(--color-navy-teal, #1B597C);
  text-align: center;
  margin: 0 0 28px;
}

/* Subtitle "Hear directly..." link — F12-verified from original:
     font-family: "Playfair Display"
     font-size: 18px
     font-weight: 600 (semibold/bold) — earlier was regular, wrong
     line-height: 31.5px
     text-align: center
   The wrapping <p> has the typography; the <a> inherits and adds
   underline. Link color: black on the original. */
.reviews-section__subtitle {
  font-family: var(--font-playfair);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 31.5px;
  text-align: center;
  margin: 0 0 40px;
}

.reviews-section__link {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.reviews-section__link:hover {
  color: var(--color-navy-teal, #1B597C);
}

/* "Your journey to your best vision starts here" — contact section
   heading. F12-verified from the original:
     font-family: Playfair Display
     font-size: 32px
     font-weight: 500
     line-height: 56px
     color: rgb(0, 0, 0) = black
     text-align: center */
.contact-section__title {
  font-family: var(--font-playfair);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: 56px;
  color: var(--color-black);
  text-align: center;
  margin: 0 0 48px;
}

/* Contact info column — added with the #7 fixes to match the
   original's structure. F12-verified from original (the .paragraph
   wrapping the address element):
     font-family: Playfair Display
     font-size: 18px
     font-weight: 500 (medium)
     color: rgb(0, 0, 0) = black
     line-height: 31.5px
   Setting them on the .contact-info parent so they cascade to every
   descendant text node (overrides whatever cascade was making the
   build's contact info text read as dim/gray). */
.contact-info {
  color: var(--color-black);
  font-family: var(--font-playfair);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 31.5px;
}

.contact-info__subtitle {
  font-family: var(--font-playfair);
  font-size: 18px;
  line-height: 31.5px;
  margin: 0 0 24px;
}

.contact-info__hours-line {
  font-family: var(--font-playfair);
  font-size: 18px;
  line-height: 31.5px;
  margin: 0;
}

/* Phone link override — was inheriting link color (white) from
   base.css despite the .contact-info parent rule above. <a> elements
   carry their own color cascade independent of the parent's color.
   Setting explicitly here. */
.contact-info__phone {
  color: var(--color-black);
}

/* Footer text and icons override.
   Base.css styles the footer with white text/icons for the sky-blue
   background. Original site uses BLACK on the same background. The
   social icons are inline <svg> with <path> children; we override
   fill on both the <svg> and the <path> to bypass whatever rule
   was making them white (could be currentColor inherit from white
   link color, or explicit fill:white — either way this wins). */
.social-icons__link {
  color: var(--color-black);
}

.social-icons__link svg,
.social-icons__link svg path {
  fill: var(--color-black);
}

.footer-links__link,
.footer-links__divider,
.site-footer__copyright {
  color: var(--color-black);
}

/* Map section — separate <section> in our build but visually part of
   the same sky-blue area as the contact section above it. Original
   site keeps the iframe inside its own .container so it doesn't go
   full-width.
   - Background sky-blue: continues the visual band from the contact
     section above and the footer below
   - iframe centered with max-width matching the standard container
     content width (1136 = 1200 max-width − 64 padding)
   - padding-top 30: matches the original's iframe margin-top:30,
     but placed on the SECTION (not the iframe). The iframe's
     margin-top would otherwise collapse through this parent and
     leave 30 CSS of body bg above the section. Padding on the
     section instead keeps the 30px breathing room INSIDE the
     sky-blue.
   - padding-bottom 50px: matches the wsite-spacer height:50px the
     original has between the iframe and the social icons row. */
.map-section {
  background: var(--color-sky-blue);
  padding: 30px 0 50px;
}

.map-section iframe {
  display: block;
  max-width: 1136px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Responsive: stack the columns on narrow screens ---- */
@media (max-width: 767px) {
  /* MOBILE LOGO SIZE OVERRIDE — components.css line 132-138 hardcodes
     .site-logo img to 334×88 at all viewports. On a 358-wide mobile
     viewport that's 93% of the screen width. Scale to height:48 keeps
     proportions (logo aspect 334:88 ≈ 3.8:1 → 48-tall = ~182-wide ≈ 50%
     of viewport). This is the only header CSS I need at mobile —
     components.css already produces the original's structural layout
     (transparent overlay on video, logo left, hamburger right, phone
     in hero). Specificity 0,1,1 vs components.css's 0,1,1: pages.css
     loads later so wins source-order. */
  .site-logo img {
    height: 48px;
    width: auto;
  }

  .unlock-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Awards at mobile: 2-col grid (user preference; previous tries
     were 1-col, neither matched original perfectly, user picked 2-col).
     Each cell at 375px viewport ≈ (375 − 32 padding) ÷ 2 ≈ 170 CSS.
     max-width:160 keeps logos snug inside cells. */
  .awards-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
  .awards-row__logo {
    height: 100px;
    max-width: 160px;
  }
  .cta-strip__inner {
    gap: 24px;
  }

  /* ===== OPEN-MENU OVERLAY =====
     ONLY the open-menu state is customized at mobile. The CLOSED state
     uses base.css/components.css defaults (transparent header over the
     dark hero video, logo top-left, hamburger top-right, phone right-
     aligned on the hero) — that matches the original's closed state.

     When nav.js adds .is-open to .main-nav, the menu transitions from
     hidden to a full-screen white overlay matching the original's
     mobile menu (vertical list of menu items in uppercase dark text
     with thin gray dividers between rows).
     Toggle classes confirmed via F12:
       - .main-nav.is-open (the nav, when opened)
       - .mobile-menu-toggle.is-active (the hamburger, when opened) */

  .main-nav.is-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-white);
    overflow-y: auto;
    z-index: 1000;
    /* Top padding clears the close (X) button at top-right.
       Bottom padding gives breathing room at the end of the scroll. */
    padding: 72px 0 60px;
    margin: 0;
    display: block;
  }

  /* Menu list — vertical stack of items, no horizontal flex */
  .main-nav.is-open .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Each menu item gets a bottom border = the thin divider lines
     visible in the original. */
  .main-nav.is-open .main-nav__item {
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
  }

  /* Top item gets a top border too so the first divider exists. */
  .main-nav.is-open .main-nav__item:first-child {
    border-top: 1px solid #e0e0e0;
  }

  /* Menu link text styling — uppercase dark gray, full-width tap
     target. Matches the original's clean monospace-ish menu look.
     CHANGED display:block → display:flex so the ::after chevron on
     dropdown-toggle items can right-align via margin-left:auto. */
  .main-nav.is-open .main-nav__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #333;
    text-transform: uppercase;
    font-family: var(--font-jost);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 16px 24px;
    text-decoration: none;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
  }

  /* HOME (first item) gets a subtle light-gray background — the
     original uses this as a current-page indicator. */
  .main-nav.is-open .main-nav__item:first-child > .main-nav__link {
    background-color: #f5f5f5;
  }

  /* ▼ chevron on dropdown-parent items (TREATMENTS, FORMS & SECURE
     PAY, YOUTUBE & AMAZON in our build) AND on sub-dropdown parents
     (Cataracts). These are identified by data-* attrs in the HTML —
     non-dropdown items (HOME, CONTACT US) don't get chevrons. */
  .main-nav.is-open [data-dropdown-toggle]::after,
  .main-nav.is-open [data-sub-dropdown-toggle]::after {
    content: "\25BC";          /* ▼ */
    font-size: 11px;
    color: #999;
    margin-left: auto;
    /* Without this, components.css's `.dropdown__item--has-submenu >
       .dropdown__link::after { content: '\25B6' }` (line 261) would
       ALSO render a ▶ on Cataracts. Hide that one to avoid double
       chevron. */
  }

  /* Suppress the inherited ▶ from components.css on the Cataracts
     sub-dropdown toggle, since we want our own ▼ to be the only marker. */
  .main-nav.is-open .dropdown__item--has-submenu > .dropdown__link::after {
    content: none;
  }

  .main-nav.is-open .main-nav__link:hover {
    background: #f5f5f5;
    color: var(--color-black);
  }

  /* Hide the dropdown arrows (▼) at mobile menu — original's flat
     list doesn't show them. */
  .main-nav.is-open .main-nav__arrow {
    display: none;
  }

  /* Dropdowns shown inline in the mobile menu (not hover-flyouts).
     If you want them collapsed by default and tappable to expand,
     that needs JS support — for now they show as a nested block. */
  .main-nav.is-open .dropdown,
  .main-nav.is-open .sub-dropdown {
    position: static;
    display: block;
    background: #fafafa;
    box-shadow: none;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .main-nav.is-open .dropdown__item {
    border-top: 1px solid #ececec;
    width: 100%;
  }

  .main-nav.is-open .dropdown__link {
    /* Switched display:block → display:flex so the ::after chevron
       on Cataracts (data-sub-dropdown-toggle) can right-align via
       margin-left:auto. Without this, the chevron appears inline
       right after "Cataracts" text instead of at the right edge. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
    color: #555;
    text-transform: none;
    font-size: 13px;
    text-decoration: none;
    font-family: var(--font-jost);
  }

  .main-nav.is-open .dropdown__link:hover {
    background: #f0f0f0;
    color: var(--color-black);
  }

  /* Hamburger → X transformation when menu is open.
     - Position fixed at top-right so it overlays the open menu and
       stays accessible for closing.
     - Middle line fades out, top/bottom lines rotate to form an X.
     Transition on the lines so the X-fold-in is animated. Since the
     closed-state hamburger styling lives in base.css (which we leave
     alone), we just add the transition without changing dimensions. */
  .mobile-menu-toggle__line {
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
  }

  .mobile-menu-toggle.is-active {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 1001;        /* above the .main-nav overlay (z:1000) */
  }

  .mobile-menu-toggle.is-active .mobile-menu-toggle__line {
    /* When open menu is white-overlay, the X needs to be DARK to be
       visible. Override whatever color base.css uses. */
    background-color: #333;
  }

  .mobile-menu-toggle.is-active .mobile-menu-toggle__line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-menu-toggle.is-active .mobile-menu-toggle__line:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.is-active .mobile-menu-toggle__line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ---- Tablet (768-1023): awards row at this width is the problem
   case — the desktop 4-col grid leaves ~150-175 CSS per cell which
   isn't enough for height:152 logos. Switch to 4-col with smaller
   logos at this breakpoint. */
@media (min-width: 768px) and (max-width: 1023px) {
  .awards-row__logo {
    height: 110px;
    max-width: 180px;
  }
}
/* ===================================================================
   SUB-PAGE CONTENT CLASSES (.content-*, .blog-*, .u1-*, .u2-*)
   Phase 5 — Append to pages.css after existing home-page rules.
   Source: PHASE-4-AUDIT-RESULTS.md (F12-verified from athenaeyecare.com)

   Uses var(--color-navy-teal, #1B597C) with fallback — works whether
   or not the variable is defined in variables.css. (Recommend adding
   the variable for cleanliness.)
   =================================================================== */

/* ============================================================
   TEMPLATE A/B — Photo hero + body content (16 pages)
   ============================================================ */

/* Sub-page body background — F12-confirmed #BFE9FC from athenaeyecare.com
   on the .wsite-background-39 section. Light blue tint that distinguishes
   sub-pages from the home page (which stays pure white). */
body:not(.page-home) {
  background-color: #BFE9FC;
}

/* Contact section + map override on sub-pages — should be WHITE,
   not sky-blue. Home page keeps the original sky-blue treatment. */
body:not(.page-home) .contact-section,
body:not(.page-home) .map-section {
  background-color: var(--color-white);
}

/* Contact section "Your journey to your best vision starts here" title on sub-pages.
   F12-confirmed values (cataracts-orange-county-benefits.html):
     color: #31228A (dark indigo)
     font: Playfair Display 500 / 24px / line-height 42px / center
   Home page keeps its own larger 32px/lh-56px treatment. */
body:not(.page-home) .contact-section h2,
body:not(.page-home) .contact-section .contact-section__title,
body:not(.page-home) .contact-section .contact-title {
  color: #31228A;
  font-family: var(--font-playfair);
  font-size: 24px;
  font-weight: 500;
  line-height: 42px;
  text-align: center;
}

/* Photo hero — pulls up under transparent header, same pattern
   as .hero-home on the home page. */
.content-hero {
  width: 100%;
  min-height: 411px;          /* F12-measured at 1280 viewport */
  margin-top: -108px;          /* slide under sticky transparent header */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;      /* fallback while image loads */
}

/* Body content wrapper — sits below hero */
.content-section {
  padding: 60px 0 80px;
}

.content-section .container {
  max-width: 1200px;
  padding: 0 32px;
}

.content-body {
  max-width: 1120px;           /* matches Weebly's measured content width */
  margin: 0 auto;
}

/* Section title H2 (page title, FAQ heading, schedule closer) */
.content-section-title {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 37px;
  line-height: 46.25px;
  color: var(--color-navy-teal, #1B597C);
  text-align: left;
  margin: 0 0 30px;
}

/* "Reviewed by Dr. Audrey Tai..." italic tagline (short form).
   Higher-specificity selector (p.content-reviewed-by inside .content-body)
   needed to override .content-body p's 16px default. */
.content-body p.content-reviewed-by,
.content-reviewed-by {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-style: italic;
  font-size: 13px;
  line-height: 22.75px;
  color: var(--color-black);
  margin: 0 0 30px;
}

/* Body paragraph */
.content-body p {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-black);
  margin: 0 0 30px;
  text-align: left;
}

/* Bold inline emphasis within body */
.content-body strong,
.content-body b {
  font-weight: var(--fw-bold);
}

/* Bullet list */
.content-bullet-list {
  margin: 0 0 30px;
  padding-left: 25px;
  list-style: disc;
}

.content-bullet-list li {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-black);
  padding-left: 5px;
  margin-top: 3px;
}

.content-bullet-list li:first-child {
  margin-top: 0;
}

.content-bullet-list li strong {
  font-weight: var(--fw-bold);
}

/* Inline body hyperlink — for plain text links inside body paragraphs
   (e.g., "www.athenaeyecare.com" in the closer phone/visit line).
   F12-confirmed: Playfair 400 / 16px / #1155CC / underlined.
   !important used here because base.css or visited-link defaults may be
   winning the cascade; this ensures the F12 color always applies. */
.content-inline-link,
.content-inline-link:visited,
.content-inline-link:hover,
.content-inline-link:active {
  color: #1155CC !important;
  text-decoration: underline !important;
}

.content-inline-link:hover {
  color: var(--color-navy-teal, #1B597C) !important;
}

/* Page-specific H2 override — F12-confirmed 24px section H2s (page title
   stays at default 37px via :not(:first-of-type)). These pages use Weebly's
   font size="5" inline override on every section H2.
   Add new sub-pages to this comma-separated list as we F12-verify them. */
.page-cataracts-benefits .content-body .content-section-title:not(:first-of-type),
.page-cataracts-types .content-body .content-section-title:not(:first-of-type),
.page-cataracts-lens-options .content-body .content-section-title:not(:first-of-type),
.page-cataracts-what-to-know .content-body .content-section-title:not(:first-of-type),
.page-cataracts-causes .content-body .content-section-title:not(:first-of-type),
.page-cataracts-signs .content-body .content-section-title:not(:first-of-type),
.page-cataracts-risks .content-body .content-section-title:not(:first-of-type),
.page-cataracts-coverage .content-body .content-section-title:not(:first-of-type),
.page-cornea .content-body .content-section-title:not(:first-of-type),
.page-refractive-surgery .content-body .content-section-title:not(:first-of-type),
.page-lasik .content-body .content-section-title:not(:first-of-type),
.page-pterygium .content-body .content-section-title:not(:first-of-type),
.page-glaucoma .content-body .content-section-title:not(:first-of-type),
.page-dry-eyes .content-body .content-section-title:not(:first-of-type),
.page-macular-degeneration .content-body .content-section-title:not(:first-of-type) {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 30px;
}

/* Inline figure (image + caption) used on cornea/pterygium and others where
   a small illustrative image appears within the content flow.
   F12-confirmed on live site: caption uses body sans-serif (Avenir/DM Sans),
   font-weight 500, ~14px, NOT italic Playfair. */
.content-inline-figure {
  margin: 24px auto;
  text-align: center;
}
.content-inline-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.content-inline-figure figcaption {
  margin-top: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  color: #000;
}

/* Footnote/citation paragraph at the bottom of pages like pterygium */
.content-citation {
  margin-top: 32px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted, #555);
}

/* Internal-link bullets (e.g. "Learn More About Cataracts" cross-reference
   lists). F12-confirmed: Playfair 600 / 16px / #1155CC / underlined. */
.content-bullet-list a {
  color: #1155CC;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

.content-bullet-list a:hover {
  color: var(--color-navy-teal, #1B597C);
}

/* YouTube ▶ playlist link — F12-confirmed Playfair 600 / 16px / #1155CC
   (Google-style hyperlink blue), underlined, left-aligned in body flow. */
.content-youtube-link {
  font-family: var(--font-playfair);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 28px;
  color: #1155CC;
  text-decoration: underline;
  text-align: left;
  display: inline-block;
  margin: 0 0 30px;
  transition: color var(--transition-fast);
}

.content-youtube-link:hover {
  color: var(--color-navy-teal, #1B597C);
}

/* Inline reference link "Please click here to learn more about X" — LEFT-aligned, sits in body flow */
.content-arrow-link {
  font-family: var(--font-playfair);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 28px;
  color: var(--color-black);
  text-decoration: underline;
  text-align: left;
  display: block;
  margin: 0 0 30px;
  transition: color var(--transition-fast);
}

.content-arrow-link:hover {
  color: var(--color-navy-teal, #1B597C);
}

/* Final closer ▶ link at the bottom — CENTERED variant of the arrow link */
.content-arrow-link--centered {
  text-align: center;
}

/* Inline video embed wrapper — videos on the live site are NOT full
   content-column width; they're roughly 60% (~660px) and centered.
   Uses aspect-ratio on the wrapper div (not the iframe directly) for
   reliable 16:9 sizing. Iframe fills the wrapper. */
.content-video-wrapper {
  width: 100%;
  max-width: 660px;
  aspect-ratio: 16 / 9;
  margin: 30px auto;
  background: #000;
}

.content-video-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* FAQ — semantic dl/dt/dd (our build improves on Weebly's varying markup) */
.content-faq {
  margin: 0 0 30px;
}

.content-faq dt {
  font-family: var(--font-playfair);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 28px;
  color: var(--color-black);
  margin: 0 0 4px;
}

.content-faq dd {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-black);
  margin: 0 0 20px;
}

.content-faq dd:last-child {
  margin-bottom: 0;
}

/* Bottom-of-page disclaimer — Very small italic centered text that sits
   below the map at the very bottom of every sub-page, above the footer. */
.content-disclaimer {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-style: italic;
  font-size: 11px;
  line-height: 18px;
  color: var(--color-black);
  text-align: center;
  margin: 0 auto;
  max-width: 1120px;
  padding: 0 20px;
}

/* Disclaimer section wrapper — sits between map and footer.
   White bg on sub-pages to seamlessly continue from contact/map area. */
.disclaimer-section {
  padding: 30px 0 30px;
}

body:not(.page-home) .disclaimer-section {
  background-color: var(--color-white);
}

/* ============================================================
   BLOG TEMPLATE (Eye Exam — Phase 8)
   ============================================================ */

.blog-hero {
  width: 100%;
  min-height: 600px;
  margin-top: -108px;
  background-size: cover;
  background-position: center;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 108px 0 0;          /* push title below header overlap */
}

.blog-hero__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 100;
  font-size: 80px;
  line-height: 92px;
  color: var(--color-white);
  text-align: center;
  margin: 15px 0;
  width: 1120px;
  max-width: calc(100% - 80px);
  padding: 0 40px;
}

.blog-layout {
  display: grid;
  grid-template-columns: 860px 250px;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 32px;
}

.blog-post {
  width: 860px;
}

.blog-title {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 37px;
  line-height: 55.5px;
  color: var(--color-navy-teal, #1B597C);
  text-align: left;
  margin: 0 0 10px;
}

.blog-meta {
  margin: 0 0 30px;
}

.blog-date {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  color: var(--color-black);
  display: inline-block;
  padding-bottom: 4px;
  margin-right: 12px;
}

.blog-comments-link {
  font-family: var(--font-playfair);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  line-height: 13px;
  color: var(--color-black);
  text-decoration: underline;
  display: inline-block;
}

.blog-post .content-reviewed-by,
.blog-post .content-body p,
.blog-post .content-bullet-list li {
  text-align: justify;
}

.blog-sidebar {
  width: 250px;
  padding: 1px;
}

.blog-sidebar h2 {
  font-family: var(--font-playfair);
  font-weight: var(--fw-regular);
  font-size: 37px;
  line-height: 46.25px;
  color: var(--color-navy-teal, #1B597C);
  text-align: left;
  margin: 0 0 10px;
}

.blog-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.blog-sidebar a {
  font-family: var(--font-playfair);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  line-height: 24.5px;
  color: var(--color-black);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.blog-sidebar a:hover {
  color: var(--color-navy-teal, #1B597C);
}

/* ============================================================
   TEMPLATE U1 — Action Pages (Phase 9)
   ============================================================ */

.u1-hero {
  width: 100%;
  min-height: 774px;
  margin-top: -108px;
  background-size: cover;
  background-position: center;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 148px 40px 40px;    /* 108 header + 40 top spacing */
  text-align: center;
}

.u1-hero__headline {
  font-family: 'DM Sans', sans-serif;
  font-weight: 100;
  font-size: 80px;
  line-height: 92px;
  color: var(--color-white);
  text-align: center;
  margin: 15px 0;
  max-width: 1120px;
}

.u1-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.u1-actions__group {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.u1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  font-family: 'DM Sans', sans-serif;
  font-weight: var(--fw-regular);
  border-radius: 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.u1-btn--primary {
  font-size: 14px;
  color: var(--color-white);
  background: var(--color-black);
  border: 1px solid var(--color-black);
}

.u1-btn--primary:hover {
  background: transparent;
  color: var(--color-white);
}

.u1-btn--secondary {
  font-size: 18px;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-white);
}

.u1-btn--secondary:hover {
  background: transparent;
  color: var(--color-white);
}

.u1-btn--outline {
  font-size: 18px;
  color: var(--color-white);
  background: transparent;
  border: 1px solid var(--color-white);
}

.u1-btn--outline:hover {
  background: var(--color-white);
  color: var(--color-black);
}

.u1-helper-text {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

/* ============================================================
   TEMPLATE U2 — Legal Pages (Phase 10)
   ============================================================ */

.u2-hero {
  width: 100%;
  min-height: 423px;
  margin-top: -108px;
  background-size: cover;
  background-position: center;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 108px 40px 0 40px;
}

.u2-hero__overlay {
  text-align: right;
  max-width: 600px;
}

.u2-hero__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 100;
  font-size: 80px;
  line-height: 92px;
  color: var(--color-white);
  text-align: right;
  margin: 15px 0;
}

.u2-hero__subtitle {
  font-family: var(--font-times);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 60px;
  letter-spacing: 1px;
  color: var(--color-white);
  text-align: right;
  margin: 15px 0;
}

/* LEARN MORE button — TBD, re-inspect during Phase 10 build.
   Placeholder Montserrat values matching home-hero CTA pattern. */
.u2-hero__button {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-regular);
  font-size: 12px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: var(--color-black);
  background: var(--color-white);
  padding: 12px 24px;
  border: 0;
  text-decoration: none;
  display: inline-block;
  margin-top: 16px;
  transition: background-color 0.2s, color 0.2s, outline 0.2s;
}

.u2-hero__button:hover {
  background: transparent;
  color: var(--color-white);
  outline: 1px solid var(--color-white);
}

/* U2 body overrides — CENTER alignment (different from A/B left) */
.u2-body .content-section-title,
.u2-body .content-body p,
.u2-body .content-bullet-list li {
  text-align: center;
}

/* ============================================================
   HEADER NAV READABILITY
   Components.css sets nav font-weight to 300; bumping to 400 (Regular)
   here for a slightly more substantial stroke while keeping the original's
   light/refined feel.
   Layered text-shadow gives maximum contrast against bright photo areas:
   tight dark drop-shadow + wider soft halo around each letter.
   ============================================================ */
.main-nav__link {
  font-weight: 400;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   END OF SUB-PAGE CONTENT CLASSES
   ============================================================ */

/* ============================================================
   PHASES 8-10 — Blog / U1 / U2 template styles
   ============================================================ */

/* ===== Hero with overlay text (blog + U2 pages) ===== */
.hero-overlay {
  position: relative;
  min-height: 600px;
  margin-top: -108px;          /* slide under sticky transparent header */
  background-color: #0c1e2c;   /* dark fallback if image missing */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  pointer-events: none;
}
.hero-overlay__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 80px 20px;
  text-align: center;
}
.hero-overlay__title {
  font-family: var(--font-jost);
  font-weight: 200;
  font-size: 64px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #fff;
}
.hero-overlay__subtitle {
  font-family: var(--font-jost);
  font-weight: 300;
  font-size: 28px;
  margin: 0 0 28px;
  color: #fff;
}

/* --with-cta variant (privacy, ab-1278): bigger, right-aligned */
.hero-overlay--with-cta {
  min-height: 560px;
  align-items: center;
}
.hero-overlay--with-cta .hero-overlay__content {
  text-align: right;
  padding-right: 60px;
}
/* "Transform Your Vision" — EXACT home-page hero-home__title treatment:
   DM Sans 79px weight 100, letter-spacing 3.5px, line-height 1.0 */
.hero-overlay--with-cta .hero-overlay__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 100;
  font-size: 79px;
  line-height: 1.0;
  letter-spacing: 3.5px;
  margin: 0;
}
/* "Dr Audrey Tai" — EXACT home-page hero-home__subtitle treatment:
   Times New Roman semibold 24px, line-height 1.0, letter-spacing 1px,
   margin-top 30px */
.hero-overlay--with-cta .hero-overlay__subtitle {
  font-family: var(--font-times);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: 1.0;
  letter-spacing: 1px;
  margin: 30px 0 0 0;
}

/* LEARN MORE button — standalone styling so it doesn't depend on .btn inheritance */
.btn--learn-more {
  display: inline-block;
  padding: 14px 30px;
  margin-top: 46px;
  background-color: #000;
  color: #fff !important;
  border: 2px solid #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 100;
  line-height: 12px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn--learn-more:hover {
  background-color: #000;
  color: #fff !important;
  border-color: #fff;
  text-decoration: none;
}

/* ===== Hero with action content (U1 pages: patient-forms, secure-payments, provider-referrals) ===== */
.hero-action {
  position: relative;
  min-height: 720px;
  margin-top: -108px;          /* slide under sticky transparent header */
  background-color: #0c1e2c;   /* dark fallback if image missing */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--color-white, #fff);
  display: flex;
  align-items: center;
}
.hero-action__content {
  position: relative;
  z-index: 1;
  padding: 140px 20px 60px;   /* extra top padding to clear header */
  width: 100%;
  text-align: center;
}
.hero-action__heading {
  font-family: var(--font-jost);
  font-weight: 400;
  font-size: 24px;
  line-height: 27.6px;
  color: #fff;
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
}
.hero-action__buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin: 0 auto 80px;
}
.hero-action__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 0 20px;
  flex-wrap: wrap;
}
.hero-action__note {
  color: #fff;
  font-family: var(--font-jost);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  text-align: center;
}

/* ===== Buttons (matches F12 live: Montserrat Thin, 12px / 0.36px tracking) ===== */
.btn {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-align: center;
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
}

/* PRIMARY: black solid → INVERTS to white bg + BLACK text on hover */
.btn--primary {
  background: #000;
  color: #fff;
  border-color: #000;
}
.btn--primary:hover {
  background: transparent;
  color: #000;
  border-color: #000;
  text-decoration: none;
}

/* SECONDARY: white solid with black text → stays white bg + BLACK text on hover */
.btn--secondary {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.btn--secondary:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}

/* OUTLINE: transparent with white outline → inverts to white solid + black text on hover */
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn--outline:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
  text-decoration: none;
}

.hero-action__footer .btn--outline {
  min-width: 200px;
}

/* ===== Payment card widget (secure-payments) ===== */
.payment-card {
  background: #fff;
  width: 320px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.payment-card__header {
  background: #16263d;
  padding: 32px 24px;
  text-align: center;
}
.payment-card__logo {
  max-width: 200px;
  height: auto;
}
.payment-card__body {
  padding: 32px 24px;
  text-align: center;
}
.btn--pay {
  background: #1B7BE0;
  color: #fff;
  border-color: #1B7BE0;
  width: 100%;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 500;
}

/* ===== Utility content section (U2 body) ===== */
.utility-section {
  background-color: #ffffff !important;
  padding: 80px 0 100px;
}
.utility-section .container {
  max-width: 900px;
}
.utility-section__title {
  font-family: var(--font-playfair);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 32px;
  color: #000;
}
.utility-section__centered-title {
  font-family: var(--font-playfair);
  font-weight: 500;
  text-align: center;
  margin: 0 0 24px;
  font-size: 16px;
  color: #000;
}
.utility-section p {
  font-family: var(--font-playfair);
  font-weight: 500;
  margin: 0 0 20px;
  line-height: 28px;
  font-size: 16px;
  text-align: center;
  color: #000;
}

/* ===== Blog layout (eye-exam-orange-county) ===== */
.blog-section {
  background-color: #ffffff !important;
  padding: 60px 0 80px;
}
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}
.blog-post p,
.blog-post li,
.blog-post dt,
.blog-post dd {
  font-family: var(--font-playfair);
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: #000;
}
.blog-post p { margin: 0 0 16px; }
.blog-post__title {
  font-family: var(--font-playfair);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 8px;
}
.blog-post__title a {
  color: var(--color-navy-teal, #1B597C);
  text-decoration: none;
}
.blog-post__title a:hover { text-decoration: underline; }
.blog-post__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-jost);
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
.blog-post__comments {
  color: #666;
  text-decoration: underline;
}
.blog-post__heading {
  font-family: var(--font-playfair);
  font-size: 22px;
  font-weight: 500;
  margin: 32px 0 16px;
  color: #000;
}
.blog-post__footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog-post__share {
  display: inline-block;
  padding: 6px 14px;
  background: #000;
  color: #fff;
  font-family: var(--font-jost);
  font-size: 13px;
  text-decoration: none;
  border-radius: 3px;
}

/* Blog sidebar */
.blog-sidebar__block { margin-bottom: 32px; }
.blog-sidebar__title {
  font-family: var(--font-playfair);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 12px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}
.blog-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-sidebar__list li { margin-bottom: 8px; }
.blog-sidebar__list a {
  color: #1155CC;
  text-decoration: underline;
  font-family: var(--font-jost);
  font-size: 14px;
}
.blog-sidebar__rss {
  display: inline-block;
  color: #1155CC;
  text-decoration: underline;
  font-family: var(--font-jost);
  font-size: 14px;
}

/* Page-class section H2 sizing for utility pages (no body H2s on most, but include) */
.page-eye-exam .content-body .content-section-title:not(:first-of-type),
.page-u2-privacy-policy .content-body .content-section-title:not(:first-of-type),
.page-u2-ab-1278 .content-body .content-section-title:not(:first-of-type) {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 30px;
}

/* ============================================================
   PHASE 10b — Page-class overrides for U1 / U2 / blog pages
   Fix: nav text appearing teal due to heavy dark text-shadow,
        U1 contact section colors needing to match live cyan.
   ============================================================ */

/* Clean white nav on these 5 + blog page (no heavy shadow that
   makes white text read as cyan against bright sky photo areas) */
body.page-u1-patient-forms .main-nav__link,
body.page-u1-secure-payments .main-nav__link,
body.page-u1-provider-referrals .main-nav__link,
body.page-u2-privacy-policy .main-nav__link,
body.page-u2-ab-1278 .main-nav__link,
body.page-eye-exam .main-nav__link {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* U1 + U2 contact section + map bg → cyan-blue (matches live, overrides
   the body:not(.page-home) white override for sub-pages) */
body.page-u1-patient-forms .contact-section,
body.page-u1-secure-payments .contact-section,
body.page-u1-provider-referrals .contact-section,
body.page-u2-privacy-policy .contact-section,
body.page-u2-ab-1278 .contact-section,
body.page-u1-patient-forms .map-section,
body.page-u1-secure-payments .map-section,
body.page-u1-provider-referrals .map-section,
body.page-u2-privacy-policy .map-section,
body.page-u2-ab-1278 .map-section {
  background-color: var(--color-sky-blue) !important;
}

/* U1 + U2 contact section text colors (matches F12 live):
   - Section TITLE "Your journey..." stays white
   - Body text (contact-info, form-wrapper title) is navy-teal #0E4361 */
body.page-u1-patient-forms .contact-section .contact-section__title,
body.page-u1-secure-payments .contact-section .contact-section__title,
body.page-u1-provider-referrals .contact-section .contact-section__title,
body.page-u2-privacy-policy .contact-section .contact-section__title,
body.page-u2-ab-1278 .contact-section .contact-section__title {
  color: #ffffff !important;
}

body.page-u1-patient-forms .contact-section .contact-info,
body.page-u1-secure-payments .contact-section .contact-info,
body.page-u1-provider-referrals .contact-section .contact-info,
body.page-u2-privacy-policy .contact-section .contact-info,
body.page-u2-ab-1278 .contact-section .contact-info,
body.page-u1-patient-forms .contact-section .contact-info *,
body.page-u1-secure-payments .contact-section .contact-info *,
body.page-u1-provider-referrals .contact-section .contact-info *,
body.page-u2-privacy-policy .contact-section .contact-info *,
body.page-u2-ab-1278 .contact-section .contact-info *,
body.page-u1-patient-forms .contact-section .contact-form-wrapper__title,
body.page-u1-secure-payments .contact-section .contact-form-wrapper__title,
body.page-u1-provider-referrals .contact-section .contact-form-wrapper__title,
body.page-u2-privacy-policy .contact-section .contact-form-wrapper__title,
body.page-u2-ab-1278 .contact-section .contact-form-wrapper__title {
  color: #0E4361 !important;
  font-family: var(--font-playfair);
  font-weight: 500;
}
/* PAGE-EYE-EXAM: blog hero title smaller to match live */
.page-eye-exam .hero-overlay__title {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
}


/* ============================================================
   PHASE 13c — Post-deploy mobile fixes (2026-05-19)
   Three scoped fixes, all isolated; no desktop impact.
   ============================================================ */

/* FIX 1: Hamburger icon color = dark indigo on 12 light-hero pages
   (all 9 cataract pages + RLE + LASIK + macular degeneration).
   The default lines are white-ish and disappear against bright hero
   photos with light sky. Scoped by body class so other pages
   keep their default treatment. */
body.page-cataract-surgery .mobile-menu-toggle__line,
body.page-cataracts-benefits .mobile-menu-toggle__line,
body.page-cataracts-causes .mobile-menu-toggle__line,
body.page-cataracts-coverage .mobile-menu-toggle__line,
body.page-cataracts-lens-options .mobile-menu-toggle__line,
body.page-cataracts-risks .mobile-menu-toggle__line,
body.page-cataracts-signs .mobile-menu-toggle__line,
body.page-cataracts-types .mobile-menu-toggle__line,
body.page-cataracts-what-to-know .mobile-menu-toggle__line,
body.page-refractive-surgery .mobile-menu-toggle__line,
body.page-lasik .mobile-menu-toggle__line,
body.page-macular-degeneration .mobile-menu-toggle__line {
  background-color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 3px rgba(0, 0, 0, 0.5);
}

/* FIX 2: Mobile open-menu visibility on iPhone.
   Problem: pages that force .main-nav__link to white with dark
   text-shadow (for legibility over hero photos) carry that style
   INTO the open menu overlay, producing white-on-white text with
   ghostly shadow halos (the "smudgy/hazy" look on iPhone).
   Fix: when .main-nav.is-open, force dark text + remove shadow.
   Higher specificity (0,3,1) beats body.page-X .main-nav__link
   override (0,2,1). Includes !important as a final safety belt
   to defeat any !important upstream. */
.main-nav.is-open .main-nav__link,
.main-nav.is-open .main-nav__list .main-nav__link,
.main-nav.is-open .dropdown__link,
.main-nav.is-open .sub-dropdown .dropdown__link {
  color: #333 !important;
  text-shadow: none !important;
}

/* Also force the close (X) hamburger icon back to dark when menu open,
   even on the 12 pages where the closed-state icon is now indigo. */
.mobile-menu-toggle.is-active .mobile-menu-toggle__line {
  background-color: #333 !important;
}

/* Safety: ensure the open-menu panel covers the full viewport on iOS
   Safari (which can mishandle 100vh / 100vw in certain rendering
   contexts). dvh = dynamic viewport height, accounts for iOS toolbar. */
@supports (height: 100dvh) {
  .main-nav.is-open {
    height: 100dvh;
  }
}

/* FIX 3: Reduce "Transform Your Vision" hero title by 20% on the AB and
   privacy pages. 79px × 0.8 = 63.2px → 63px. Letter-spacing scaled
   proportionally (3.5px × 0.8 = 2.8px) for visual consistency.
   Page-scoped so the home page (which uses the same DM Sans treatment
   via .hero-home__title) is untouched. */
.page-u2-privacy-policy .hero-overlay--with-cta .hero-overlay__title,
.page-u2-ab-1278 .hero-overlay--with-cta .hero-overlay__title {
  font-size: 63px;
  letter-spacing: 2.8px;
}

/* ============================================================
   PHASE 13d — Mobile open-menu corrections (2026-05-19)
   Match the live mobile menu look from athenaeyecare.com
   ============================================================ */

@media (max-width: 767px) {
  
  /* FIX A: Defeat the suppression rule that was killing the ▼ caret
     on "Cataracts". Original suppression rule was at line ~988 with
     specificity 0,4,1. Override with EVEN HIGHER specificity by
     stacking the .main-nav.is-open twice. */
  .main-nav.is-open.main-nav .dropdown__item--has-submenu > .dropdown__link[data-sub-dropdown-toggle]::after {
    content: "\25BC" !important;
    font-size: 11px;
    color: #999;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }
  
  /* FIX B: Center-align all menu items (matches live mobile site).
     Caret stays on the right via the absolute-positioning above
     for sub-dropdown-toggle, and via override below for top-level
     dropdown toggles. */
  .main-nav.is-open .main-nav__link,
  .main-nav.is-open .dropdown__link,
  .main-nav.is-open .sub-dropdown .dropdown__link {
    justify-content: center !important;
    text-align: center !important;
    position: relative;
  }
  
  /* Top-level caret (TREATMENTS, FORMS & SECURE PAY, YOUTUBE & AMAZON)
     also absolute-positioned so text can be perfectly centered. */
  .main-nav.is-open .main-nav__link[data-dropdown-toggle]::after,
  .main-nav.is-open .main-nav__item > [data-dropdown-toggle]::after {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin-left: 0 !important;
  }

  /* FIX C: Force the open-menu panel to genuinely cover the full
     viewport on iOS Safari. The original used 100vw which on iOS
     can include the scrollbar gutter, making content overflow.
     Using inset shorthand + 100% width keeps it edge-to-edge. */
  .main-nav.is-open {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent horizontal scrolling under the menu (iOS Safari quirk
     where document-level overflow leaks through fixed elements) */
  body:has(.main-nav.is-open) {
    overflow: hidden;
  }
}

/* ============================================================
   PHASE 13e — Mobile menu submenu visibility (REVISED v2)
   2026-05-19 — Cataracts sub-dropdown starts CLOSED; click ▼ caret
   to expand. Smooth max-height + opacity transitions for drama.
   ============================================================ */

@media (max-width: 767px) {
  /* Default state: collapsed but kept in the layout so transitions
     work. We use max-height + opacity instead of display:none so
     the open/close can be animated smoothly. */
  .main-nav.is-open .dropdown,
  .main-nav.is-open .sub-dropdown {
    display: block !important;
    visibility: visible !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: max-height 0.45s ease-out, opacity 0.35s ease-in-out;
  }

  /* Expanded state: parent LI has .is-open. Larger max-height than
     any realistic content height; the actual height is determined by
     content. */
  .main-nav.is-open .main-nav__item.is-open > .dropdown,
  .main-nav.is-open .dropdown__item--has-submenu.is-open > .sub-dropdown {
    max-height: 2000px;
    opacity: 1;
    background: #fafafa;
  }
}


/* Phase 1 A4: H1 promotion — element-based section-title sizing (makes subsection size independent of :first-of-type) */
.content-body h2.content-section-title { font-size: 24px; font-weight: var(--fw-bold); line-height: 30px; }


/* Phase 1 C2: author attribution block */
.author-bio-section { padding: 0 0 56px; }
.author-bio { display: flex; gap: 18px; align-items: center; max-width: 760px; margin: 0 auto; padding-top: 28px; border-top: 1px solid #e3e3e3; }
.author-bio img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-bio p { font-size: 15px; line-height: 1.55; margin: 0; color: #444; }


/* ===== Phase 1 Session 4: conversion layer ===== */
/* E1: sticky mobile CTA bar */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,.18); }
  .mobile-cta-bar a { flex: 1; text-align: center; padding: 15px 8px; min-height: 48px;
    font-weight: 700; font-size: 16px; text-decoration: none; }
  .mobile-cta-bar__call { background: var(--color-sky-blue); color: #06283c; flex: 1.2; }
  .mobile-cta-bar__book { background: var(--color-black); color: var(--color-white); }
  body { padding-bottom: 58px; }
}
/* E2: header CTA retired — the locked header design has no room for an added element.
   Desktop CTA coverage: nav Contact Us + soft CTAs + dual-path CTAs + contact section. */
/* E4: soft CTAs */
.soft-cta { margin: 36px 0; padding: 16px 20px; background: rgba(94,195,240,.12);
  border-left: 4px solid var(--color-sky-blue); }
.soft-cta p { margin: 0; font-size: 16px; }
.soft-cta a { font-weight: 700; color: var(--color-navy-teal); }
/* E5: dual-path CTA */
.dual-cta-section { padding: 8px 0 40px; }
.dual-cta { display: flex; gap: 24px; max-width: 900px; margin: 0 auto; }
.dual-cta__box { flex: 1; padding: 28px 24px; background: #f5fafd; border: 1px solid #d9edf7;
  border-radius: 10px; text-align: center; }
.dual-cta__box--premium { background: #f1fbf6; border-color: #d4eee0; }
.dual-cta__box h3 { margin: 0 0 8px; font-size: 20px; color: var(--color-navy-teal); }
.dual-cta__box p { margin: 0 0 16px; font-size: 15px; color: #444; }
.dual-cta__btn { padding: 18px 32px; }  /* .btn base supplies font system; padding keeps 48px+ tap target */
@media (max-width: 768px) { .dual-cta { flex-direction: column; } }
/* E7: next-step funnel link */
.next-step-wrap { padding: 0 0 8px; }
.next-step { display: block; max-width: 760px; margin: 0 auto; padding: 16px 20px;
  background: var(--color-navy-teal); color: var(--color-white); text-decoration: none;
  border-radius: 8px; font-size: 17px; font-weight: 600; text-align: center; min-height: 48px; }
.next-step span { opacity: .75; font-weight: 400; margin-right: 6px; }
.next-step:hover { filter: brightness(1.08); }
/* E6: tap-target minimums on mobile */
@media (max-width: 768px) {
  .main-nav__link, .dropdown__link { padding-top: 12px; padding-bottom: 12px; min-height: 48px; }
  .site-footer a { display: inline-block; padding: 8px 4px; }
  .contact-info__phone { display: inline-block; padding: 10px 0; }
}


/* Pre-cutover: GHL contact form embed — carded wrapper styles both the form
   and the post-submit thank-you message (both render inside the iframe) */
.contact-form__embed { width: 100%; border: 2px solid var(--color-sky-blue);
  border-radius: 12px; background: #f5fbfe; padding: 14px 14px 6px;
  box-shadow: 0 2px 12px rgba(94,195,240,.15); }
.contact-form__embed iframe { min-height: 699px; display: block; background: transparent; }
.contact-form__privacy { margin: 10px 0 0; font-size: 13px; text-align: center; }
.contact-form__privacy a { color: #46707e; text-decoration: underline; }