/* ===========================================================================
   PRECISION DENTAL ARTS  —  main.css
   Consolidated child-theme stylesheet
   RunningFish · built 2026-10-14

   REPLACES, in one file:
     1. styles/css/styles-4k-refactor.css   (the live compiled stylesheet)
     2. The five working copies: buttons-variables-typography.css,
        home.css, layout-components.css,
        mixins-animation-layout-social-forms.css, styles.css
     3. Divi → Theme Options → Custom CSS  (glass header + nav dropdown fix)
     4. pda-responsive-fixes.css            (phone + large-display clearance)
     5. pda-nav-clearance-bigscreen.css     (superseded by #4)

   INSTALL
     a. Save as  wp-content/themes/precisiondental/styles/css/main.css
     b. Point the child theme enqueue at main.css instead of
        styles-4k-refactor.css (functions.php — search "styles-4k-refactor").
     c. EMPTY Divi → Theme Options → Custom CSS. Its entire current contents
        (verified against the compiled et-core-unified-20.min.css) are
        reproduced in Section 8 and Section 7b below. Leaving them in both
        places is harmless but makes the next person guess.
     d. Clear WP Rocket + Divi's static CSS cache.
     e. Keep the old file on disk until you've eyeballed the site. Nothing
        here is minified or source-mapped, so it diffs cleanly.

   GROUND RULE USED
     This file reproduces what the LIVE site does today, rule for rule.
     Where the five working copies disagreed with the live compiled file, the
     LIVE behavior won. Every such difference — and every rule that turned out
     never to apply at all — is parked in Section 19 at the bottom, commented
     out, with the corrected selector ready to uncomment. Nothing in this file
     changes how the site renders except the two fixes named below.

   THE ONLY TWO INTENTIONAL BEHAVIOR CHANGES
     1. Section 9 — the  max-width:400px  rule that zeroed the hero's top and
        bottom padding is GONE. It was putting the H1 71px behind the nav bar
        on every phone 400px and narrower (iPhone SE/12/13/14/15/16, most
        Androids). Replaced with a positive 7rem/2rem padding.
     2. Section 17 — hero clearance above 2000px now scales with the nav
        instead of sitting at a fixed 10rem, which the nav outgrew.

   READ SECTION 19 BEFORE YOU SHIP. There are live bugs documented there that
   are deliberately left alone because fixing them changes the design.

   TABLE OF CONTENTS
     1   Design tokens (:root)
     2   Base + Divi layout overrides
     3   Animation
     4   Typography
     5   Buttons
     6   Site header (Divi native nav)
     7a  Theme Builder header — large-display sizing lives in §17
     7b  Nav dropdown auto-width (DiviFlash)        [from Theme Options]
     8   Theme Builder header — Glass Deep Teal     [from Theme Options]
     9   Fullwidth header (page hero)
     10  Footer
     11  Forms (Gravity Forms)
     12  Social icons
     13  News
     14  Home + service cards
     15  Global nav clearance (page-ID scoped)
     16  Section layout fixes
     17  Responsive fixes + large display (≥2000px, ≥3200px)
     18  Phone fixes (≤600px)
     19  Known-dead rules and opt-in fixes — READ THIS
   =========================================================================== */


/* ===========================================================================
   1. DESIGN TOKENS
   Declared for future use. Nothing in this file consumes them yet — every
   value below is still hardcoded, and the two sets match. Migrate rules onto
   the tokens as you touch them; don't do it in one pass.
   =========================================================================== */

:root {
  /* Colors */
  --color-1: #274156;            /* navy — primary */
  --color-2: #6b879c;            /* slate blue — secondary */
  --color-3: #0d0106;
  --color-4: #d0ad67;
  --color-5: #000000;
  --color-6: #ffffff;
  --color-font-1: #212427;
  --color-font-2: #000000;
  --color-font-3: rgba(0, 0, 0, 0.6);
  --color-font-inverse: #fff;
  --color-ui-1: #999999;

  /* Logo palette — used by the glass header in §8. These are sampled from
     the logo PNG, not invented, and they are NOT the same family as
     --color-1/--color-2 above. See §19 note 7. */
  --logo-teal: #049ab3;
  --logo-teal-deep: #067590;
  --logo-teal-dark: #0b3a47;
  --logo-teal-light: #5ecde0;

  /* Typography */
  --font-title: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  --font-body: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  --font-interactive: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;

  /* Sizing — derived from a 1.5rem baseline */
  --size-xxsmall: 0.375rem;
  --size-xsmall: 0.5rem;
  --size-small: 0.75rem;
  --size-medium: 1.5rem;
  --size-large: 3rem;
  --size-xlarge: 4.5rem;
  --size-xxlarge: 6rem;
  --row-max-width: 1920px;
  --row-width: 90.09%;

  /* Breakpoints — reference only. CSS can't use variables in media queries,
     so the literals below must be kept in step with these by hand.
       laptop 1400px · tablet 980px · smartphone 767px · portrait 479px
       large display 2000px · extra large 3200px */
}


/* ===========================================================================
   2. BASE + DIVI LAYOUT OVERRIDES
   =========================================================================== */

*:focus {
  outline: 0 !important;
}

body {
  overflow-x: hidden;
}

.et_pb_section:not(.et_pb_fullwidth_section) {
  padding: 3rem 0;
}

.et_pb_row {
  width: 90.09%;
  max-width: 1920px;
  padding: 1.5rem 0;
}

.et_pb_module {
  margin-bottom: 1.5rem;
}
.et_pb_module.et-last-child,
.et_pb_module:last-child {
  margin-bottom: 0;
}

/* Vertically centered two-column row */
.rf-centered--row {
  display: flex;
}
.rf-centered--row .et_pb_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 980px) {
  .rf-centered--row {
    flex-direction: column;
  }
  .rf-centered--row .et_pb_image {
    max-width: 500px;
  }
  .rf-centered--row .et_pb_column:first-child {
    margin-bottom: 3rem;
  }

  /* Add .rf-flip to a row to reverse column order on tablet and below */
  .rf-flip {
    display: flex;
    flex-direction: column-reverse;
  }
  .rf-flip .et_pb_column:last-child {
    margin-bottom: 3rem !important;
  }
  .rf-flip .et_pb_column:first-child {
    margin-bottom: 0px !important;
  }
}

/* Kill the phantom gap under gallery thumbnails */
.et_pb_gallery_image a {
  line-height: 0 !important;
}

@media (max-width: 980px) {
  #rf-body .rf-contact--blurb .et_pb_blurb_content {
    margin: 0;
  }
}


/* ===========================================================================
   3. ANIMATION
   Staggered image entry — each later column starts 0.25s after the one
   before it. Desktop only; on mobile the columns stack so the stagger reads
   as lag rather than choreography.
   =========================================================================== */

#rf-body img {
  animation-fill-mode: both;
}

@media only screen and (min-width: 980.02px) {
  #rf-body .et_pb_column:nth-child(2) img { animation-delay: 0.25s; }
  #rf-body .et_pb_column:nth-child(3) img { animation-delay: 0.5s; }
  #rf-body .et_pb_column:nth-child(4) img { animation-delay: 0.75s; }
  #rf-body .et_pb_column:nth-child(5) img { animation-delay: 1s; }
  #rf-body .et_pb_column:nth-child(6) img { animation-delay: 1.25s; }
}


/* ===========================================================================
   4. TYPOGRAPHY
   Fluid scale. Each heading declares a px-ish fallback first, then the
   clamp() — old browsers take the fallback, everything current takes the
   clamp. min-height:0vw is the Safari clamp-in-calc workaround; leave it.
   =========================================================================== */

/* H1 — 3rem → 4rem */
body.et_divi_theme h1,
body.et_divi_theme .h1 {
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  min-height: 0vw;
  font-size: 4rem;
  font-size: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 1.3889)), 4rem);
}
body.et_divi_theme h1 span,
body.et_divi_theme .h1 span { display: block; }

/* H2 — 2rem → 3rem */
body.et_divi_theme h2,
body.et_divi_theme .h2 {
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  min-height: 0vw;
  font-size: 3rem;
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 1.3889)), 3rem);
}
body.et_divi_theme h2 span,
body.et_divi_theme .h2 span { display: block; }

/* H3 — 1.5rem → 2.25rem */
body.et_divi_theme h3,
body.et_divi_theme .h3 {
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  min-height: 0vw;
  font-size: 2.25rem;
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 1.0417)), 2.25rem);
}
body.et_divi_theme h3 span,
body.et_divi_theme .h3 span { display: block; }

/* H4 — 1.25rem → 1.5rem */
body.et_divi_theme h4,
body.et_divi_theme .h4 {
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  min-height: 0vw;
  font-size: 1.5rem;
  font-size: clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 0.3472)), 1.5rem);
}
body.et_divi_theme h4 span,
body.et_divi_theme .h4 span { display: block; }

/* H5 — 1rem → 1.25rem */
body.et_divi_theme h5,
body.et_divi_theme .h5 {
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  min-height: 0vw;
  font-size: 1.25rem;
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.48rem) * 0.3472)), 1.25rem);
}
body.et_divi_theme h5 span,
body.et_divi_theme .h5 span { display: block; }

/* H6 — 0.85rem → 1rem */
body.et_divi_theme h6,
body.et_divi_theme .h6 {
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  min-height: 0vw;
  font-size: 1rem;
  font-size: clamp(0.85rem, calc(0.85rem + ((1vw - 0.48rem) * 0.2083)), 1rem);
  line-height: 1.5rem;
}
body.et_divi_theme h6 span,
body.et_divi_theme .h6 span { display: block; }

/* NOTE — the body-copy, .rf-paragraph--large and .rf-paragraph--small rules
   that belong here have never applied on the live site. They are in §19
   (notes 1–3) with the fix. Body copy currently renders at Divi's
   14px / 1.7em / weight 500, not the 16px / 1.5rem / weight 400 intended. */

body.et_divi_theme a {
  transition: all 0.3s ease;
}

/* Links inside headings and paragraphs inherit color, gain weight */
body.et_divi_theme h1 a,
body.et_divi_theme h2 a,
body.et_divi_theme h3 a,
body.et_divi_theme h4 a,
body.et_divi_theme h5 a,
body.et_divi_theme h6 a,
body.et_divi_theme p a {
  color: inherit !important;
  font-weight: 700;
}
body.et_divi_theme h1 a:hover,
body.et_divi_theme h2 a:hover,
body.et_divi_theme h3 a:hover,
body.et_divi_theme h4 a:hover,
body.et_divi_theme h5 a:hover,
body.et_divi_theme h6 a:hover,
body.et_divi_theme p a:hover {
  color: #6b879c !important;
}

body.et_divi_theme .et_pb_layout_dark {
  color: #fff;
}


/* ===========================================================================
   5. BUTTONS
   The SCSS had .et_pb_button / .gform_button / [type=submit] / .more-link all
   @extend-ing .rf-button--primary, which compiled into one enormous shared
   selector list. Unrolled here: a shared base, then one rule per variant.

   One deliberate deviation: .rf-button--primary itself is now in the shared
   base list. In the compiled original it was only ever the @extend target, so
   a standalone .rf-button--primary element got the colors but no padding,
   display or type — i.e. it didn't actually work as a button. None of the
   .rf-button--* variant classes appear in the live markup (checked on the
   homepage and a service page), so this is inert today and simply means the
   class behaves as intended the first time someone uses it.

   The compiled original also contained ~35 impossible @extend cross-products
   (".rf-cta--secondary .rf-news a.more-link", ".rf-home--slider .rf-news
   a.more-link", "a.more-link + a.more-link" and similar). Those DOM shapes
   can't occur — a more-link is a post-excerpt link and never sits inside the
   home slider or a CTA module. They are dropped.
   =========================================================================== */

/* --- Shared base -------------------------------------------------------
   The original also carried  transition: all 0.3s ease  and a
   :hover { color: #6b879c }  here. Both were overridden for every selector
   in this list by the primary rule immediately below, so they never had an
   effect and are dropped. */
#rf-body .et_pb_button,
#rf-body .rf-news a.more-link,
#rf-body .gform_button,
#rf-body [type=submit],
#rf-body .rf-button--primary {
  display: inline-flex;
  justify-content: center;
  position: relative;
  border: none;
  font-size: 1rem;
  font-size: clamp(0.85rem, calc(0.85rem + ((1vw - 0.48rem) * 0.2083)), 1rem);
  font-weight: 400;
  letter-spacing: 1px;
  padding: 0.75rem 1.5rem !important;
  text-transform: capitalize;
  border-radius: 5px;
  font-family: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  line-height: 1.5rem !important;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
}

/* --- Primary (the default for every button on the site) ---------------- */
#rf-body .rf-button--primary,
#rf-body .et_pb_button,
#rf-body .rf-news a.more-link,
#rf-body .gform_button,
#rf-body [type=submit],
#rf-body #main-header li.btn a,
#rf-body .rf-home--slider .et_pb_button,
#rf-body .service-page-blurb .df_ab_blurb_button {
  transition: 0.25s all ease-in-out;
  color: #fff;
  background: #274156;
  background: linear-gradient(90deg, #274156 0%, #6b879c 100%);
}
#rf-body .rf-button--primary:hover,
#rf-body .et_pb_button:hover,
#rf-body .rf-news a.more-link:hover,
#rf-body .gform_button:hover,
#rf-body [type=submit]:hover,
#rf-body #main-header li.btn a:hover,
#rf-body .rf-home--slider .et_pb_button:hover,
#rf-body .service-page-blurb .df_ab_blurb_button:hover {
  background-color: #6b879c !important;
  color: #fff !important;
  opacity: 80%;
  transform: translateY(-0.25rem);
}

/* --- Outline ----------------------------------------------------------- */
#rf-body .rf-button--outline,
#rf-body .rf-news a.more-link {
  color: #274156 !important;
  background-color: transparent;
  height: fit-content;
  box-shadow: 0 0 0 0.125rem inset #274156;
}
#rf-body .rf-button--outline:hover,
#rf-body .rf-news a.more-link:hover {
  background-color: #274156 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* --- Secondary --------------------------------------------------------- */
#rf-body .rf-button--secondary,
#rf-body .df-menu-button {
  color: #fff;
  background-color: #6b879c;
}
#rf-body .rf-button--secondary:hover,
#rf-body .df-menu-button:hover {
  background-color: transparent !important;
  color: #6b879c !important;
  opacity: 80%;
}

/* --- Secondary outline ------------------------------------------------- */
#rf-body .rf-button--secondary-outline {
  color: #6b879c;
  background-color: #fff;
  box-shadow: 0 0 0 0.125rem inset #6b879c;
}
#rf-body .rf-button--secondary-outline:hover {
  background-color: #6b879c !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.125rem inset #6b879c;
}

/* --- Inverse (for dark sections) --------------------------------------- */
#rf-body .rf-button--inverse {
  color: #6b879c !important;
  background-color: #fff;
  height: fit-content;
  box-shadow: 0 0 0 0.125rem inset #fff;
}
#rf-body .rf-button--inverse:hover {
  background-color: transparent;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 0.125rem inset #fff;
}

/* --- Inverse outline --------------------------------------------------- */
#rf-body .rf-button--inverse-outline,
#rf-body .rf-cta--secondary .et_pb_button {
  color: #fff !important;
  background-color: transparent;
  height: fit-content;
  box-shadow: 0 0 0 0.125rem inset #fff;
}
/* BUG, PRESERVED AS-IS: the !important beats the 80% below it regardless of
   order, so this hover never fades — and white-on-white text makes the label
   vanish on hover. See §19 note 6. */
#rf-body .rf-button--inverse-outline:hover,
#rf-body .rf-cta--secondary .et_pb_button:hover {
  background-color: #fff !important;
  color: #ffffff !important;
  opacity: 1 !important;
  opacity: 80%;
}

/* --- Newsletter -------------------------------------------------------- */
#rf-body .rf-button--newsletter,
#rf-body #et-main-area .gform_wrapper .gf_simple_horizontal #gform_submit_button_2 {
  color: #fff !important;
  background-color: transparent;
  height: fit-content;
}
#rf-body .rf-button--newsletter:hover,
#rf-body #et-main-area .gform_wrapper .gf_simple_horizontal #gform_submit_button_2:hover {
  background-color: #fff !important;
  color: #000000 !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 0.0625rem inset #fff;
}

/* --- Two buttons side by side ------------------------------------------ */
#rf-body .et_pb_button + .et_pb_button {
  margin-left: 1.5rem;
}


/* ===========================================================================
   6. SITE HEADER (Divi native nav)
   Only reached on templates not covered by the Theme Builder header.
   =========================================================================== */

/* --- Divi Cloud menu modules ------------------------------------------- */
#rf-body .rf-centered-inline--menu .et_pb_menu__logo a:hover,
#rf-body .rf-left-aligned--menu .et_pb_menu__logo a:hover {
  opacity: 1;
}
#rf-body .rf-centered-inline--menu li a,
#rf-body .rf-left-aligned--menu li a {
  font-size: 1.3125rem;
  font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.48rem) * 0.6944)), 1.25rem);
}
#rf-body .rf-centered-inline--menu .et_pb_menu__logo-wrap,
#rf-body .rf-left-aligned--menu .et_pb_menu__logo-wrap {
  margin-bottom: 0px;
}
#rf-body .rf-centered-inline--menu .et_pb_menu_inner_container,
#rf-body .rf-left-aligned--menu .et_pb_menu_inner_container {
  display: flex;
}
@media screen and (max-width: 980px) {
  #rf-body .rf-centered-inline--menu .et_pb_menu__wrap,
  #rf-body .rf-left-aligned--menu .et_pb_menu__wrap {
    justify-content: flex-end;
  }
}

/* Open mobile menu: hamburger glyph becomes the X (ETmodules U+004D) */
#rf-body .mobile_nav.opened .mobile_menu_bar::before {
  content: "\4d";
}

/* --- Nav items rendered as buttons (tablet and up) --------------------- */
@media (min-width: 980px) {
  #rf-body li.btn {
    display: flex;
    align-items: center;
  }
  #rf-body li.btn a {
    color: #274156 !important;
    background-color: transparent;
    height: fit-content;
    padding: 1.5rem 1.5rem !important;
    box-shadow: 0 0 0 0.0625rem inset #274156;
  }
  #rf-body li.btn a:hover {
    background-color: #274156 !important;
    color: #fff !important;
    opacity: 1 !important;
  }
}

/* --- Container widths -------------------------------------------------- */
#main-header .container,
#top-header .container {
  max-width: 1400px;
  width: 90.09%;
}

/* --- Native nav dropdowns size to their content ------------------------ */
@media only screen and (min-width: 981px) {
  .nav li ul {
    width: fit-content;
    display: flex;
    flex-direction: column;
  }
  .nav li li {
    white-space: nowrap;
  }
  .nav li li a {
    width: auto !important;
  }
}

/* --- Top bar ----------------------------------------------------------- */
#top-header .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#top-header #et-info-phone a {
  font-weight: 500;
  transition: all 0.3s ease;
}
#top-header #et-info-phone a:hover {
  opacity: 0.7;
}
#top-header a {
  font-size: 15px !important;
}
#top-header #et-secondary-menu {
  float: none;
}

/* --- Main header ------------------------------------------------------- */
#main-header .et_pb_menu__wrap {
  display: flex;
  justify-content: flex-end;
}
#main-header #menu-top-menu {
  display: flex;
  align-items: center;
}
@media (min-width: 980px) {
  #main-header li.btn a {
    color: #fff !important;
    height: fit-content;
  }
  #main-header li.btn a:hover {
    color: #fff !important;
    opacity: 1 !important;
  }
}

#main-header #logo {
  max-width: 25%;
}
@media (max-width: 767px) {
  #main-header #logo {
    max-width: 100%;
  }
}

#et-top-navigation {
  padding-top: 42px;
}

/* --- Main menu --------------------------------------------------------- */
#main-header #top-menu {
  display: flex;
  align-items: center;
}
#main-header #top-menu li a {
  font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.48rem) * 0.6944)), 1.25rem);
}
#main-header #top-menu li ul {
  width: auto;
}
#main-header #top-menu li ul a {
  width: auto;
  white-space: nowrap;
}

/* --- Mobile header (≤980px) -------------------------------------------- */
@media (max-width: 980px) {
  #main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  #main-header .logo_container {
    position: static;
  }
  #main-header #et-top-navigation {
    padding-left: 0px !important;
  }
  #main-header .logo_container #logo {
    max-width: unset;
    max-height: 100px;
  }
  #main-header .et_header_style_split #logo {
    max-width: unset;
  }
  #main-header #et_search_icon,
  #main-header .select_page {
    display: none;
  }
  #main-header .mobile_menu_bar::before {
    color: rgba(0, 0, 0, 0.6);
    font-size: 3rem;
    position: absolute;
    transform: translate(-50px, -22px);
  }
  #main-header .mobile_nav.opened .mobile_menu_bar::before {
    content: "\4d";
  }
  #main-header .mobile_nav {
    padding: 0 !important;
  }
  #main-header #et_mobile_nav_menu {
    margin: 0;
  }

  .et_header_style_centered #main-header .container {
    display: block;
    text-align: left;
  }
  .et_header_style_centered #main-header div#et-top-navigation {
    position: absolute;
    bottom: auto;
    top: 0;
    padding-top: 0;
  }
  .et_header_style_centered #main-header #et_mobile_nav_menu {
    margin-top: 0;
  }
  .et_header_style_centered #main-header #et_mobile_nav_menu .mobile_nav {
    padding: 0;
  }
}


/* ===========================================================================
   7a. THEME BUILDER HEADER
   The live site uses the Theme Builder header (layout #635), not the Divi
   native header in §6. Its sizing rules are width-gated and live in §17.
   Its color treatment is §8.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   7b. NAV DROPDOWN AUTO-WIDTH (DiviFlash advanced menu)
   MOVED FROM: Divi → Theme Options → Custom CSS
   Without this, DiviFlash sub-menus are pinned to a fixed width and clip
   longer service names. §6's .nav li ul equivalent targets Divi's native
   nav and does not reach this module.
   --------------------------------------------------------------------------- */

@media only screen and (min-width: 981px) {
  .df-normal-menu-wrap .df-menu-wrap li.menu-item ul.sub-menu {
    width: fit-content;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    width: auto !important;
  }
}


/* ===========================================================================
   8. THEME BUILDER HEADER — "GLASS DEEP TEAL"
   MOVED FROM: Divi → Theme Options → Custom CSS
   Replaces the flat #9cbdd1 bar that Divi's module settings still specify.

   Measured before → after:
     white nav text on bar : 1.98:1  →  13.1:1   (WCAG AA wants 4.5:1)
     white text on CTA     : 3.77:1  →  5.31:1   (AA for large text)
     CTA vs bar            : 1.91:1  →  high separation

   Colors sampled from the logo file, not invented:
     #049AB3  logo teal (tooth mark)       → primary CTA
     #067590  deep logo teal               → CTA hover
     #0B3A47  dark teal derived from above → the bar

   The _N index suffixes (_0_tb_header, _2_tb_header, _3_tb_header) are
   Divi's module-order classes. If you add, delete or reorder modules in the
   Theme Builder header, these renumber and this section silently stops
   applying. If that happens, re-read the numbers off the rendered header.
   =========================================================================== */

/* --- The bar: translucent deep teal + frosted blur --------------------- */
.difl_advancedmenu_0_tb_header {
  background-color: rgba(11, 58, 71, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
          backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* No backdrop-filter support: go more opaque so the nav never sits on a
   washed-out backdrop with unreadable text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .difl_advancedmenu_0_tb_header {
    background-color: rgba(11, 58, 71, 0.92) !important;
  }
}

/* --- Drop shadow REMOVED 14 Oct 2026 at client request -----------------
   This section previously carried
       .et_pb_section_0_tb_header {
         box-shadow: 0 10px 30px -8px rgba(8, 20, 26, 0.38) !important;
       }
   Checked before removing: neither the header section nor the menu module
   has a box-shadow of its own in Divi's module CSS, so taking this out
   leaves no shadow rather than exposing an older one. The bar now separates
   from the page on the frosted blur and the 10% white border alone.
   ---------------------------------------------------------------------- */

/* --- Nav links --------------------------------------------------------- */
.difl_advancedmenuitem_0_tb_header .df-normal-menu-wrap .df-menu-nav > li.menu-item > a {
  color: #ffffff !important;
}
.difl_advancedmenuitem_0_tb_header .df-normal-menu-wrap .df-menu-nav > li.menu-item > a:hover,
.difl_advancedmenuitem_0_tb_header .df-normal-menu-wrap .df-menu-nav > li.menu-item > a:focus {
  color: #5ECDE0 !important;
}

/* --- Hamburger was #6B879C: invisible against the dark bar ------------- */
.difl_advancedmenuitem_0_tb_header .df-mobile-menu-button {
  color: #ffffff !important;
}

/* --- Primary CTA → logo teal ------------------------------------------- */
a.difl_advancedmenuitem_2_tb_header.df-am-item {
  background-color: #049AB3 !important;
  border-color: #049AB3 !important;
  color: #ffffff !important;
}
a.difl_advancedmenuitem_2_tb_header.df-am-item:hover,
a.difl_advancedmenuitem_2_tb_header.df-am-item:focus {
  background-color: #067590 !important;
  border-color: #067590 !important;
  color: #ffffff !important;
}

/* --- Phone number + icon ----------------------------------------------- */
.difl_advancedmenuitem_3_tb_header,
.difl_advancedmenuitem_3_tb_header p,
.difl_advancedmenuitem_3_tb_header a,
.difl_advancedmenuitem_3_tb_header i {
  color: #ffffff !important;
}
.difl_advancedmenuitem_3_tb_header a:hover {
  color: #5ECDE0 !important;
}


/* ===========================================================================
   9. FULLWIDTH HEADER (page hero)

   *** CHANGED — do not restore the old version without reading this ***

   The original was:
       @media screen and (max-width: 400px) {
         #rf-body .et_pb_fullwidth_header {
           padding-top: 0px; padding-bottom: 0px;
         }
       }
   The nav is position:absolute, so the hero's own top padding is the ONLY
   thing holding the H1 clear of it. Zeroing that padding put the H1 71px
   behind the nav bar on every screen 400px and narrower — iPhone SE (375),
   iPhone 12 through 16 (390/393), and most Androids (360). Measured: broken
   at exactly 400px, fine at 401px.

   Replaced with a positive 7rem / 2rem. 7rem clears the 71px mobile nav with
   41px to spare and is tighter than the 10rem desktop value, so phones don't
   waste a third of the first screen on empty space. Scoped to #main-content
   rather than #rf-body because #main-content is in the server-rendered HTML
   (see §19 note 5).
   =========================================================================== */

#rf-body .et_pb_fullwidth_header_container {
  margin: auto;
  max-width: 1920px;
  width: 90.09%;
}

@media screen and (max-width: 400px) {
  #rf-body .et_pb_fullwidth_header_container {
    margin-left: auto;
    margin-right: auto;
  }
  #main-content .et_pb_fullwidth_header {
    padding-top: 7rem !important;
    padding-bottom: 2rem !important;
  }
}


/* ===========================================================================
   10. FOOTER
   =========================================================================== */

#main-footer #footer-widgets {
  display: block;
  justify-content: center;
}
@media screen and (min-width: 980px) {
  #main-footer #footer-widgets {
    display: flex;
  }
}
@media screen and (max-width: 980px) {
  #main-footer #footer-widgets {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

#main-footer .footer-widget {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#main-footer .footer-widget li {
  padding-left: 0;
}
#main-footer .footer-widget li::before {
  display: none;
}
#main-footer .footer-widget .widget_media_image {
  padding-bottom: 0;
  margin-bottom: 20px;
}

/* --- Bottom bar -------------------------------------------------------- */
/* The font-family/size for this bar is in §19 note 4 — it never applied. */
#footer-info {
  float: none;
  padding: 0.75rem 0;
  text-align: center;
}
#footer-info a {
  font-size: 14px;
}


/* ===========================================================================
   11. FORMS (Gravity Forms)
   =========================================================================== */

/* --- reCAPTCHA notice -------------------------------------------------- */
.recaptcha {
  font-size: 0.8rem !important;
  opacity: 0.7;
}
.recaptcha * {
  font-size: 0.8rem !important;
}

/* --- General ----------------------------------------------------------- */
.gform_validation_errors {
  text-transform: none;
}

/* Hide the "* Required fields" heading block */
.gform_heading {
  display: none;
}

/* --- Wrapper ----------------------------------------------------------- */
.gform_wrapper {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
/* BUG, PRESERVED AS-IS: "210 20% 98%" is not a valid CSS color — no
   function wrapper, no units. The browser drops the whole declaration, so
   inputs render with the default background. Fix in §19 note 8. */
.gform_wrapper input {
  border-radius: 5px;
  border: 1px solid #bbb !important;
  background-color: 210 20% 98%;
}

/* --- Input borders, consistent across types ---------------------------- */
#et-main-area .gform_wrapper input[type="number"],
#et-main-area .gform_wrapper input[type="text"],
#et-main-area .gform_wrapper input[type="tel"],
#et-main-area .gform_wrapper input[type="email"],
#et-main-area .gform_wrapper input[type="date"],
#et-main-area .gform_wrapper textarea {
  border: 1px solid #bbb !important;
}

/* --- Horizontal newsletter signup -------------------------------------- */
#et-main-area .gform_wrapper .gf_simple_horizontal {
  position: relative;
  display: flex;
  justify-content: center;
}
#et-main-area .gform_wrapper .gf_simple_horizontal,
#et-main-area .gform_wrapper .gf_simple_horizontal * {
  margin: 0 auto;
  max-width: 838px;
  width: 100%;
  height: 3rem;
}
#et-main-area .gform_wrapper .gf_simple_horizontal .gfield {
  padding: 0;
}
#et-main-area .gform_wrapper .gf_simple_horizontal input {
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  border: 1px solid white;
  color: white;
}
#et-main-area .gform_wrapper .gf_simple_horizontal input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
#et-main-area .gform_wrapper .gf_simple_horizontal .gform_footer {
  position: absolute;
  width: 25%;
  right: 0;
}
#et-main-area .gform_wrapper .gf_simple_horizontal #gform_submit_button_2 {
  border-left: 1px solid white;
}


/* ===========================================================================
   12. SOCIAL ICONS
   For the inline [rf_social_media] shortcode output.
   =========================================================================== */

.rf-social-icons-inline .ul-social-et {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.rf-social-icons-inline .ul-social-et .et-social-icon {
  margin: 0 1.5rem 0 0;
}
.rf-social-icons-inline .ul-social-et .et-social-icon:last-child {
  margin: 0;
}

.rf-social-icons-inline .ul-social-et .et-social-icon a {
  font-size: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  border-style: solid;
  border-width: 0.125rem;
}
.rf-social-icons-inline .ul-social-et .et-social-icon a::before {
  position: relative;
}

/* Visually hide the icon labels but keep them for screen readers */
.rf-social-icons-inline .ul-social-et .et-social-icon span {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ===========================================================================
   13. NEWS
   =========================================================================== */

#rf-body .rf-news--header .header-content .et_pb_module_header {
  font-size: 3rem;
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 1.3889)), 3rem) !important;
}

#rf-body .rf-news .entry-featured-image-url {
  max-width: 550px;
}

#rf-body .rf-news .entry-title {
  line-height: 0.5em;
}
#rf-body .rf-news .entry-title a {
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0px;
  text-transform: none;
  font-size: 1.5rem !important;
  font-family: "Telex", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
}

/* "Read more" — this element is in the base, primary AND outline lists in
   §5, then gets overridden here. Net result: gradient background (primary),
   no border (box-shadow:none below beats outline's inset ring), white label,
   80% fade on hover. Pulling it out of any one of those three lists in §5
   makes it transparent-on-white and invisible. */
#rf-body .rf-news a.more-link {
  letter-spacing: 2px;
  box-shadow: none !important;
  color: white !important;
  margin-top: 1.5rem;
  text-transform: capitalize;
  font-size: 1rem;
  font-size: clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.2083)), 1rem);
}
#rf-body .rf-news a.more-link:hover {
  opacity: 80% !important;
}

#rf-body .et_pb_post_content h1,
#rf-body .et_pb_post_content h2,
#rf-body .et_pb_post_content h3,
#rf-body .et_pb_post_content h4,
#rf-body .et_pb_post_content h5,
#rf-body .et_pb_post_content h6 {
  text-transform: capitalize;
}


/* ===========================================================================
   14. HOME + SERVICE CARDS
   =========================================================================== */

#rf-body .rf-home--slider .et_pb_container {
  max-width: 1400px;
}

/* --- Help blurb: underline wipes in from the left on hover ------------- */
#rf-body .help-blurb {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#rf-body .help-blurb h4 {
  display: inline-block;
  position: relative;
}
#rf-body .help-blurb h4::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #274156;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
#rf-body .help-blurb h4:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- Menu button ------------------------------------------------------- */
#rf-body .df-menu-button {
  border-radius: 5px;
  padding: 0.75rem 1.5rem;
}
#rf-body .df-menu-button:hover {
  box-shadow: 0 0 0 0.125rem inset #6b879c;
}

/* --- Contact blurb card ------------------------------------------------ */
#rf-body .rf-contact--blurb {
  display: flex;
  justify-content: start;
  background-color: #ffffff !important;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
#rf-body .rf-contact--blurb .et_pb_blurb_content {
  margin: 0 !important;
}

/* --- Service cards ----------------------------------------------------- */
#rf-body .service-page-blurb {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 2rem;
  height: 100%;
  justify-content: space-between;
}
#rf-body .service-page-blurb .df_ab_blurb_title {
  color: #6b879c;
}
#rf-body .service-page-blurb li::marker {
  color: #6b879c;
}
/* Equal-height cards regardless of copy length */
#rf-body .service-page-blurb .et_pb_module_inner {
  height: 100%;
}
#rf-body .service-page-blurb .df_ab_blurb_container {
  height: 100%;
}
#rf-body .service-page-blurb .df_ab_blurb_content_container {
  height: 100%;
  justify-content: space-between;
}
/* Button pinned to the bottom of the card */
#rf-body .service-page-blurb .df_ab_blurb_button {
  margin-top: 2rem;
  border-radius: 5px;
  padding: 0.75rem 1.5rem;
  width: 100%;
  justify-content: center;
}
#rf-body .service-page-blurb .df-blurb-icon {
  padding: 1rem;
  border-radius: 100%;
  background: linear-gradient(#274156 0%, #6b879c 100%);
  margin-bottom: 2rem;
  transition: 0.25s all ease-in-out;
}
#rf-body .service-page-blurb .df-blurb-icon:hover {
  transform: scale(1.1);
}


/* ===========================================================================
   15. GLOBAL NAV CLEARANCE (page-ID scoped, all widths)
   The nav is position:absolute, so every page needs its own top spacing to
   sit clear of it. Divi content pages get that from the hero module's own
   10rem builder padding. The pages below can't take builder padding — they
   share a global header module, or they're non-Divi legal pages — so they're
   cleared here by page ID.

   MAINTENANCE TRAP: this is a hardcoded page-ID whitelist. A new page that
   uses the shared global header will sit under the nav until someone adds
   its ID here. §17 fixes the large-display half of this problem generically;
   this list is still manual.
   =========================================================================== */

/* Pages using the shared global fullwidth-header (module #159) */
.page-id-29 .et_pb_fullwidth_header,
.page-id-39 .et_pb_fullwidth_header,
.page-id-314 .et_pb_fullwidth_header,
.page-id-675 .et_pb_fullwidth_header,
.page-id-1662 .et_pb_fullwidth_header {
  padding-top: 10rem !important;
}

/* Non-Divi legal pages: Privacy, Terms, Accessibility, Cookie, DMCA */
.page-id-3 #main-content,
.page-id-26 #main-content,
.page-id-258 #main-content,
.page-id-2168 #main-content,
.page-id-2169 #main-content {
  padding-top: 10rem !important;
}


/* ===========================================================================
   16. SECTION LAYOUT FIXES (all widths)
   =========================================================================== */

/* Trust bar — keep the three badges centered as one cluster instead of
   left-bunched with dead space to the right */
.rf-trust .et_pb_column {
  justify-content: center !important;
  flex-wrap: wrap;
}

/* Dedicated section — let the photo fill its column at every width. It was
   pinned near 650px, leaving dead space beside it. */
.rf-dedicated .et_pb_image,
.rf-dedicated .et_pb_image .et_pb_image_wrap,
.rf-dedicated .et_pb_image .et_pb_image_wrap img {
  width: 100% !important;
  max-width: 100% !important;
}
.rf-dedicated .et_pb_image .et_pb_image_wrap img {
  height: auto !important;
}


/* ===========================================================================
   17. RESPONSIVE FIXES + LARGE DISPLAY

   Two blocks: ≥2000px and ≥3200px. Nothing here touches screens below
   2000px. Section hooks used: .rf-hero .rf-trust .rf-symptoms .rf-dedicated
   .rf-services .rf-smiles .rf-logos .rf-testimonials — all stable authored
   classes, deliberately NOT Divi's _N index classes, which shift whenever
   modules are added or reordered.

   NAMING CAVEAT: "2000px" is not 4K. True 4K at 100% zoom is 3840 CSS px.
   At 2000 this block also catches 1440p monitors and any 1920 browser
   zoomed out — which is how the big-screen treatment showed up on a 1080p
   screen at 60% zoom. Raising the gate to ~2560px would make the name
   honest. Left at 2000 because that's current behavior and the clearance fix
   below makes it safe either way; it's a design call, not a bug.
   =========================================================================== */

@media (min-width: 2000px) {

  /* --- Global rows: wider content band -------------------------------- */
  .et_pb_row:not(.et_pb_row_0_tb_header) {
    max-width: min(3200px, 90vw) !important;
    width: 90% !important;
  }
  /* Section rhythm — the hero keeps its own padding */
  .et_pb_section:not(.et_pb_fullwidth_section):not(.et_pb_section_0_tb_header):not(.rf-hero) {
    padding: 5rem 0 !important;
  }

  /* --- Hero ----------------------------------------------------------- */
  .rf-hero .et_pb_fullwidth_header_container {
    max-width: min(3000px, 90vw) !important;
    width: 90% !important;
  }
  .rf-hero .et_pb_fullwidth_header_container .header-content {
    max-width: clamp(620px, 42vw, 1040px) !important;
    width: 100% !important;
  }
  .rf-hero h1.et_pb_module_header {
    font-size: clamp(2.4rem, 3vw, 4rem) !important;
    line-height: 1.12 !important;
  }
  .rf-hero .et_pb_fullwidth_header_subhead {
    font-size: clamp(1.1rem, 1vw, 1.6rem) !important;
  }
  .rf-hero .et_pb_button {
    font-size: clamp(1rem, 0.9vw, 1.4rem) !important;
    padding: 1rem 2.5rem !important;
  }

  /* --- Trust bar ------------------------------------------------------ */
  .rf-trust .et_pb_row {
    max-width: min(1500px, 80vw) !important;
  }
  .rf-trust .et_pb_blurb .et_pb_module_header,
  .rf-trust .et_pb_blurb .et_pb_blurb_description {
    font-size: clamp(1rem, 0.95vw, 1.5rem) !important;
  }
  .rf-trust .et_pb_blurb .et-pb-icon {
    font-size: clamp(22px, 1.6vw, 34px) !important;
  }

  /* --- Symptom grid ("What Brings You In Today") ----------------------- */
  .rf-symptoms .et_pb_row {
    max-width: min(1600px, 88vw) !important;
  }
  .rf-symptoms h2 {
    font-size: clamp(2rem, 2.4vw, 3.4rem) !important;
  }
  .rf-symptoms .et_pb_blurb .et-pb-icon {
    font-size: clamp(28px, 2.2vw, 46px) !important;
  }
  .rf-symptoms .et_pb_blurb .et_pb_module_header {
    font-size: clamp(1.1rem, 1.1vw, 1.7rem) !important;
    line-height: 1.3 !important;
  }

  /* --- Dedicated section ---------------------------------------------- */
  .rf-dedicated .et_pb_image .et_pb_image_wrap,
  .rf-dedicated .et_pb_image .et_pb_image_wrap img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .rf-dedicated .et_pb_column:last-child {
    padding: clamp(2rem, 3vw, 4rem) clamp(2rem, 4vw, 5rem) !important;
  }
  .rf-dedicated .et_pb_cta .et_pb_module_header {
    font-size: clamp(2rem, 2.5vw, 4rem) !important;
    line-height: 1.2 !important;
  }
  .rf-dedicated .et_pb_cta h3 {
    font-size: clamp(1rem, 1.2vw, 1.8rem) !important;
  }
  .rf-dedicated .et_pb_cta .et_pb_promo_content p {
    font-size: clamp(1rem, 1vw, 1.5rem) !important;
    line-height: 1.75 !important;
  }
  .rf-dedicated .et_pb_cta .et_pb_promo_button {
    font-size: clamp(1rem, 1vw, 1.5rem) !important;
    padding: 1rem 2.5rem !important;
  }

  /* --- Service cards --------------------------------------------------- */
  /* Targets the stable .service-page-blurb class. The predecessor used
     .difl_advanced_blurb_0..7, and the first card collapsed the moment
     modules were renumbered. */
  .service-page-blurb {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(2rem, 2.5vw, 4rem) !important;
  }
  .service-page-blurb .et_pb_module_inner,
  .service-page-blurb .df_ab_blurb_container,
  .service-page-blurb .df_ab_blurb_content_container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .service-page-blurb .df_ab_blurb_container {
    flex-direction: column !important;
    align-items: center !important;
  }
  .service-page-blurb .df_ab_blurb_image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
  }
  .service-page-blurb .df-blurb-icon {
    font-size: clamp(25px, 2.8vw, 55px) !important;
    padding: clamp(1rem, 1.5vw, 2rem) !important;
    margin-bottom: clamp(1.5rem, 2vw, 3rem) !important;
  }
  .service-page-blurb .df_ab_blurb_title {
    font-size: clamp(1rem, 1.2vw, 2rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* --- Art of Beautiful Smiles ---------------------------------------- */
  .rf-smiles .et_pb_cta .et_pb_module_header {
    font-size: clamp(2rem, 2.5vw, 4rem) !important;
    line-height: 1.2 !important;
  }
  .rf-smiles .et_pb_cta h3 {
    font-size: clamp(1rem, 1.2vw, 1.8rem) !important;
  }
  .rf-smiles .et_pb_cta .et_pb_promo_content p {
    font-size: clamp(1rem, 1vw, 1.5rem) !important;
    line-height: 1.75 !important;
  }
  .rf-smiles .et_pb_cta .et_pb_promo_button {
    font-size: clamp(1rem, 1vw, 1.5rem) !important;
    padding: 1rem 2.5rem !important;
  }
  .rf-smiles .et_pb_image .et_pb_image_wrap,
  .rf-smiles .et_pb_image .et_pb_image_wrap img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* --- Logos carousel -------------------------------------------------- */
  .rf-logos .dica_divi_carousel .dica_divi_carouselitem .dica-image-container img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  .rf-logos .dica_divi_carousel .dica_divi_carouselitem .dica-image-container {
    min-height: clamp(80px, 8vw, 160px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Testimonials heading -------------------------------------------- */
  .rf-testimonials .et_pb_text_inner h3 {
    font-size: clamp(2rem, 2.5vw, 4rem) !important;
    padding-bottom: 2rem !important;
  }

  /* --- Theme Builder header ------------------------------------------- */
  /* Targeted by function (logo / nav / button / phone) rather than by _N
     index class, so adding a header module doesn't break it. */
  .et-l--header .df-am-item:has(img.df-site-logo) {
    width: clamp(150px, 12vw, 320px) !important;
  }
  .et-l--header img.df-site-logo {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
  .et-l--header .df-normal-menu-wrap .df-menu-nav > li.menu-item > a {
    font-size: clamp(1rem, 1.1vw, 1.8rem) !important;
  }
  .et-l--header .df-normal-menu-wrap .df-menu-nav {
    gap: clamp(10px, 1.5vw, 35px) !important;
  }
  .et-l--header .df-am-item:has(.df-menu-button) {
    width: auto !important;
  }
  .et-l--header .df-menu-button {
    font-size: clamp(0.85rem, 0.85vw, 1.4rem) !important;
    padding: 0.85rem 1.75rem !important;
  }
  .et-l--header .df-am-item h6,
  .et-l--header .df-am-item h6 a {
    font-size: clamp(0.85rem, 0.8vw, 1.25rem) !important;
  }

  /* --- Footer --------------------------------------------------------- */
  #main-footer .container,
  #footer-bottom .container {
    max-width: min(3200px, 90vw) !important;
    width: 90% !important;
  }
  #main-footer .footer-widget .widget_media_image img {
    width: clamp(200px, 12vw, 400px) !important;
    height: auto !important;
    max-width: none !important;
  }
  .footer-widget,
  .footer-widget li,
  .footer-widget li a {
    font-size: clamp(14px, 0.85vw, 22px) !important;
    line-height: 1.8 !important;
  }
  #main-footer .footer-widget h4.title {
    font-size: clamp(18px, 1.1vw, 28px) !important;
  }
  #footer-info,
  #footer-info a {
    font-size: clamp(12px, 0.7vw, 18px) !important;
  }
  #footer-widgets {
    padding: 5% 0 !important;
  }

  /* --- General text --------------------------------------------------- */
  .et_pb_text_inner p,
  .et_pb_text_inner li {
    font-size: clamp(1rem, 1vw, 1.6rem) !important;
    line-height: 1.75 !important;
  }
  .et_pb_text_inner h2 {
    font-size: clamp(2rem, 2.5vw, 4rem) !important;
  }
  .et_pb_text_inner h3 {
    font-size: clamp(1.5rem, 1.8vw, 3rem) !important;
  }
  .et_pb_module {
    margin-bottom: clamp(1.5rem, 2vw, 3rem) !important;
  }
  .et_pb_module.et-last-child,
  .et_pb_module:last-child {
    margin-bottom: 0 !important;
  }

  /* --- NAV CLEARANCE, LARGE DISPLAY  *** NEW *** ----------------------
     The rules in this block grow the nav from roughly 118px tall at 1920 to
     roughly 231px at 3840 (bigger logo, bigger nav type, bigger CTA). The
     fixed 10rem = 160px clearance in §15 does not grow with it, so the hero
     slid under the nav as the screen got wider. Measured overlap before this
     fix: −36px at 2560 on the homepage, −85px at 3840, −183px on /novocaine/.

     clamp(250px, 11.5vw, 340px) tracks the nav's growth instead of guessing.
     Measured after: +66px at 2560, +73px at 3200, +63px at 3840. 768 and
     1440 are untouched — verify by diffing computed padding at those widths.

     This must stay the LAST padding-top rule in the file; it is overriding
     §15's !important by source order. Do not move §15 below it.
     -------------------------------------------------------------------- */

  /* Hero modules, wherever they come from (builder padding, global module,
     or the §15 whitelist) */
  #main-content .et_pb_fullwidth_header {
    padding-top: clamp(250px, 11.5vw, 340px) !important;
  }

  /* Pages whose first section is NOT a hero module — generic, so a new page
     doesn't need adding to a whitelist */
  #main-content .et_pb_section:first-of-type:not(:has(.et_pb_fullwidth_header)) {
    padding-top: clamp(250px, 11.5vw, 340px) !important;
  }

  /* Non-Divi legal pages — same five IDs as §15 */
  .page-id-3 #main-content,
  .page-id-26 #main-content,
  .page-id-258 #main-content,
  .page-id-2168 #main-content,
  .page-id-2169 #main-content {
    padding-top: clamp(250px, 11.5vw, 340px) !important;
  }
}


@media (min-width: 3200px) {
  .et_pb_row:not(.et_pb_row_0_tb_header) {
    max-width: min(3800px, 88vw) !important;
    width: 88% !important;
  }
  .et-l--header .df-am-item:has(img.df-site-logo) {
    width: clamp(200px, 10vw, 380px) !important;
  }
  .et-l--header .df-normal-menu-wrap .df-menu-nav > li.menu-item > a {
    font-size: clamp(1.2rem, 0.9vw, 2rem) !important;
  }
  .rf-hero h1.et_pb_module_header {
    font-size: clamp(3rem, 3vw, 5rem) !important;
  }
  .service-page-blurb .df-blurb-icon {
    font-size: clamp(40px, 3vw, 70px) !important;
  }
  #main-footer .container,
  #footer-bottom .container {
    max-width: min(3800px, 88vw) !important;
    width: 88% !important;
  }
}


/* ===========================================================================
   18. PHONE FIXES  *** NEW ***
   The H1 clamp in §4 bottoms out at 3rem = 48px, which it holds all the way
   down to 360px. A service-page H1 at 48px on a 360px screen wraps to five
   lines and eats the whole first screen. This caps it where the viewport is
   actually narrow. 600px rather than 767px so tablets keep the full scale.
   =========================================================================== */

@media screen and (max-width: 600px) {
  #main-content h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }
}


/* ===========================================================================
   19. KNOWN-DEAD RULES AND OPT-IN FIXES  —  READ BEFORE SHIPPING

   THE ROOT CAUSE behind notes 1–5:  #rf-body IS THE BODY ELEMENT.
   scripts/rf.js runs  $("body").attr("id","rf-body")  — the id is added by
   jQuery at runtime, it is not in the server-rendered HTML. Two consequences:

   (a) Any selector with #rf-body as a DESCENDANT — "something #rf-body" —
       can never match, because body is never inside anything. Five rules in
       the original SCSS are written that way. They have never done anything.
       They are notes 1–4 below, left out of the sections above and parked
       here instead of being silently switched on, because turning each one
       on changes how the live site looks.

   (b) Every rule with #rf-body as the ANCESTOR prefix — the majority of this
       file — does work, but only after jQuery and rf.js have executed. Until
       then buttons, cards and layout flips paint unstyled. That is a real
       flash-of-unstyled-content and Largest-Contentful-Paint cost on every
       page load, and it is Google-visible. Fix is note 5; it needs no CSS
       changes at all.

   Each note below is safe to leave exactly as it is. None of them is a
   regression introduced by this consolidation — they are all pre-existing.
   =========================================================================== */

/* --- NOTE 1 — BODY COPY IS 14px, NOT THE INTENDED 16px ------------------
   Original (dead):
     body.et_divi_theme #rf-body, body.et_divi_theme a #rf-body,
     body.et_divi_theme li #rf-body { ... }

   Because it never applied, body copy currently renders with Divi's own
   defaults: 14px / line-height 1.7em / font-weight 500. The design intended
   16px / 1.5rem / 400. The font family is fine either way — Divi's Theme
   Options already set --et_global_body_font to Geologica.

   14px body copy is small for a dental practice, where a good share of
   visitors are reading on a phone and not all of them have young eyes. This
   is the highest-value item on this list. It is also the most visible change:
   turning it on reflows text sitewide, so check the hero, the service cards
   and the footer before you commit to it.

   Uncomment to activate: */
/*
body.et_divi_theme,
body.et_divi_theme a,
body.et_divi_theme li {
  font-family: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  line-height: 1.5rem;
  font-weight: 400;
  font-size: 1rem;
}
*/

/* --- NOTE 2 — .rf-paragraph--large never applied -----------------------
   Original (dead):
     body.et_divi_theme .rf-paragraph--large #rf-body { ... }
   Anywhere .rf-paragraph--large is used for an intro or lede paragraph, it
   is rendering at normal body size. Uncomment to activate: */
/*
body.et_divi_theme .rf-paragraph--large,
body.et_divi_theme .rf-paragraph--large a {
  font-family: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  line-height: 1.5rem;
  font-weight: 400;
  font-size: 1.3125rem;
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 0.5435)), 1.3125rem);
}
*/

/* --- NOTE 3 — .rf-paragraph--small never applied -----------------------
   Original (dead):
     body.et_divi_theme .rf-paragraph--small #rf-body { ... }
   The original also declared line-height twice (1.5rem then 1.3125rem); the
   second wins, so only 1.3125rem is kept below. Uncomment to activate: */
/*
body.et_divi_theme .rf-paragraph--small,
body.et_divi_theme .rf-paragraph--small a {
  font-family: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3125rem;
}
*/

/* --- NOTE 4 — footer bottom bar and form-error font never applied ------
   Original (dead):
     #footer-info #rf-body { ... }
     #et-main-area .gform_wrapper .gform_submission_error #rf-body { ... }
   Both inherit whatever Divi gives them instead. Low stakes — turn these on
   with note 1 so the whole type scale lands together. Uncomment to
   activate: */
/*
#footer-info {
  font-family: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  line-height: 1.3125rem;
}
#et-main-area .gform_wrapper .gform_submission_error {
  font-family: "Geologica", "Open Sans", "Arial", "Helvetica Neue", sans-serif;
  line-height: 1.5rem;
  font-weight: 400;
  font-size: 1rem;
}
*/

/* --- NOTE 5 — THE #rf-body FLASH (no CSS change needed) ----------------
   rf.js sets the body id with jQuery, so every #rf-body rule in this file
   waits on jQuery. Set the id as the body opens instead, and the flash is
   gone with zero risk to specificity. In the child theme's functions.php:

     add_action( 'wp_body_open', function () {
         echo '<script>document.body.id="rf-body";</script>';
     } );

   That fires before any content paints. Then delete the
   $("body").attr("id","rf-body") line from scripts/rf.js so the id isn't
   being set twice.

   Do NOT "fix" this by rewriting the #rf-body prefixes to `body` — that
   drops specificity from (1,0,1) to (0,1,1) and hands several of these
   rules back to Divi's own module CSS.
   ---------------------------------------------------------------------- */

/* --- NOTE 6 — .rf-button--inverse-outline hover is broken --------------
   Live, in §5:  opacity: 1 !important;  opacity: 80%;
   The !important wins over the plain declaration below it regardless of
   order, so the intended 80% fade never happens. Worse, that hover sets
   both background and color to white, so the label disappears on hover
   wherever this variant is used (.rf-cta--secondary buttons). Pick one:
   either drop the opacity line and give the label a real color, or drop the
   !important. Uncomment the version you want: */
/*
#rf-body .rf-button--inverse-outline:hover,
#rf-body .rf-cta--secondary .et_pb_button:hover {
  background-color: #fff !important;
  color: #274156 !important;
  opacity: 1 !important;
}
*/

/* --- NOTE 7 — THE PALETTE IS SPLIT IN TWO -----------------------------
   The logo is #049AB3 teal and #332C2B charcoal. The site runs on #274156
   navy and #6B879C slate blue — a different, more desaturated family. The
   header in §8 has already been pulled onto the logo teal, which is why it
   no longer quite matches the buttons below it.

   Not a bug, and not something to fix in CSS on a whim: it needs mockups
   first, then the gcid-* Divi tokens and --color-1/--color-2 moved together
   in one pass. Flagged so the next person doesn't "fix" the header back to
   navy by mistake.
   ---------------------------------------------------------------------- */

/* --- NOTE 8 — Gravity Forms input background is an invalid color -------
   Live, in §11:  background-color: 210 20% 98%;
   That is an HSL triplet with no hsl() wrapper and no units, so the browser
   discards the declaration and inputs use the default background. The
   intended value is #f8fafc. Uncomment to activate: */
/*
.gform_wrapper input {
  background-color: #f8fafc;
}
*/

/* ===========================================================================
   END  —  main.css
   =========================================================================== */