/* OMG Kitchen & Bath - global stylesheet
   Iron Rule 39: every section is wrapped in /* SECTION:<name> START *\/ ... /* SECTION:<name> END *\/
   Iron Rule 51: mockup CSS copied verbatim with comma-prefix live BEM
   Iron Rule 60: line budget 1500; lint hook scripts/lint-css.sh enforces.
*/

/* SECTION:reset START */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
/* SECTION:reset END */

/* SECTION:globals START */
:root {
  --gold:          #C5A55A;
  --gold-dark:     #A88B47;
  --gold-text:     #7A6633; /* WCAG AA: 4.5:1+ on white/cream for body-text gold */
  --gold-light:    #D4B876;
  --gold-glow:     rgba(197,165,90,0.35);
  --navy:          #003959;
  --navy-dark:     #002a42;
  --navy-light:    #0a4d6e;
  --teal:          #72E3C0;
  --teal-dark:     #5cc9a7;
  --blue:          #19A5D9;
  --blue-heading:  #174E74;
  --black:         #1a1a1a;
  --black-soft:    #2d2d2d;
  --charcoal:      #3a3a3a;
  --gray-dark:     #555;
  --gray:          #888;
  --gray-light:    #c8c8c8;
  --gray-bg:       #f4f4f2;
  --white:         #ffffff;
  --off-white:     #fafaf8;
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', -apple-system, sans-serif;
  --nav-height:    82px;
  --topbar-height: 38px;
  --total-header:  120px; /* topbar (38) + navbar (82) — was 114 (6px short, caused visible gap below header on page-hero pages) */
}
body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 60px; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 16px;
}
.section-eyebrow::before {
  content: ''; width: 36px; height: 1.5px; background: var(--gold);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 500; line-height: 1.15;
  color: var(--navy); margin-bottom: 20px;
}
/* WCAG AA: gold accent in body-bg headings uses gold-text (4.5:1+ on cream).
   Hero/dark-bg accents stay --gold via per-section overrides (.hero-h1 em). */
.section-heading em,
[class$="-header__heading"] em,
[class$="__accent"] { font-style: italic; color: var(--gold-text); }

.section-desc {
  font-size: 16px; line-height: 1.75;
  color: var(--gray-dark); font-weight: 300; max-width: 560px;
}
/* SECTION:globals END */

/* SECTION:section-header-accent START */
/* Aliases mockup .section-eyebrow / .section-heading / .section-desc onto the
   rfmwpe_section_header BEM output. Iron Rule 22 substring->__accent span.
   Uses [class*="-header"]:not([class*="__"]) so the BEM root matches whether or
   not it carries a modifier class like .process-header--accent-block (the prior
   [class$="-header"] selector failed when the class attribute string ended on
   the modifier instead of the root). */
[class*="-header"]:not([class*="__"]) [class$="__eyebrow"] {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 16px;
}
[class*="-header"]:not([class*="__"]) [class$="__eyebrow"]::before {
  content: ''; width: 36px; height: 1.5px; background: var(--gold);
}
[class*="-header"]:not([class*="__"]) [class$="__heading"] {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 500; line-height: 1.15;
  color: var(--navy); margin-bottom: 20px;
}
[class*="-header"]:not([class*="__"]) [class$="__desc"] {
  font-size: 16px; line-height: 1.75;
  color: var(--gray-dark); font-weight: 300; max-width: 560px;
}
/* .services-header, .ba-header, .testimonials-header, .gallery-header — layout-only; see per-section blocks for align/text-align */

/* accent_display=block triggers --accent-block modifier on root → newline accent */
[class*="-header--accent-block"] [class$="__accent"] { display: block; }
/* SECTION:section-header-accent END */

/* SECTION:buttons START */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 3px; transition: background 0.3s, transform 0.3s, color 0.3s; border: none;
}
.btn-primary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform 0.3s; }
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-2px); }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-navy {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 3px; transition: all 0.3s; border: none;
}
.btn-navy svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; flex: 0 0 auto; }
.btn-navy:hover { background: var(--navy-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,57,89,0.3); }
.btn-navy:hover svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; background: transparent; color: var(--navy);
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  border: 1.5px solid rgba(0,57,89,0.2); border-radius: 3px; transition: all 0.3s;
}
.btn-outline svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(197,165,90,0.18); } /* WCAG AA on white */
.btn-outline:hover svg { transform: translateX(4px); }

.section-cta-wrap { text-align: center; margin-top: 32px; }

.btn-white-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; background: transparent; color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,0.5); border-radius: 3px; transition: all 0.3s;
}
.btn-white-outline svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.btn-white-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,255,255,0.12); }
.btn-white-outline:hover svg { transform: translateX(4px); }

.btn-primary-sm { font-size: 11px; padding: 12px 24px; }
/* SECTION:buttons END */

/* SECTION:topbar START */
/* Mockup #top-bar -> live #omg-top-bar (Elementor TB container, fixed via Elementor's own positioning).
   Mockup uses position:fixed; live container is rendered inside the TB header at top of <body>,
   so mockup's fixed/top:0 is ported as-is (the TB container becomes the fixed element). */
#top-bar,
#omg-top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: var(--topbar-height);
  background: var(--navy-dark); font-size: 11px; letter-spacing: 0.5px;
  transition: transform 0.3s ease;
}
/* On scroll, slide the topbar up out of view (toggled by main.js). */
#top-bar.is-scrolled-out,
#omg-top-bar.is-scrolled-out { transform: translateY(-100%); }
.top-bar-left,
#omg-top-bar-left { display: flex; gap: 28px; align-items: center; color: rgba(255,255,255,0.45); }
.top-bar-left a,
#omg-top-bar-left a { color: rgba(255,255,255,0.75); transition: color 0.3s; }
.top-bar-left a:hover,
#omg-top-bar-left a:hover { color: #fff; }
.top-bar-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.15); }
.top-bar-right,
#omg-top-bar-right { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }

/* Mockup .top-bar-socials -> live widget BEM .omg-topbar__socials + __link */
.top-bar-socials,
.omg-topbar__socials { display: flex; gap: 6px; align-items: center; }
.top-bar-socials a,
.omg-topbar__socials__link {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15); transition: all 0.3s;
}
.top-bar-socials a:hover,
.omg-topbar__socials__link:hover { border-color: var(--gold); background: var(--gold); }
.top-bar-socials svg,
.omg-topbar__socials__link svg { fill: rgba(255,255,255,0.5); stroke: rgba(255,255,255,0.5); stroke-width: 0; transition: all 0.3s; width: 13px; height: 13px; }
.top-bar-socials a:hover svg,
.omg-topbar__socials__link:hover svg { fill: var(--navy); stroke: var(--navy); }

/* Top-bar phone link (live widget BEM .omg-topbar__phone) - inherit color tokens from mockup .top-bar-left a */
.omg-topbar__phone {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.75); font-size: 11px; letter-spacing: 0.5px;
  transition: color 0.3s;
}
.omg-topbar__phone:hover { color: #fff; }
.omg-topbar__phone__icon { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }

/* Top bar promo + reviews (rendered verbatim by v_html) */
.top-bar-follow-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.85); text-transform: uppercase;
}
.top-bar-promo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); font-weight: 600; font-size: 11px;
  letter-spacing: 0.5px; white-space: nowrap;
}
.top-bar-promo svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.top-bar-promo-check { width: 12px; height: 12px; font-size: 13px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.top-bar-reviews {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.75); font-size: 11px;
  white-space: nowrap;
}
.top-bar-stars { display: inline-flex; gap: 1px; align-items: center; vertical-align: middle; margin-right: 6px; color: var(--gold); font-size: 12px; line-height: 1; letter-spacing: 1px; }
.top-bar-stars svg { width: 11px; height: 11px; min-width: 11px; max-width: 11px; fill: var(--gold); stroke: var(--gold); stroke-width: 1; flex-shrink: 0; display: inline-block; }

/* Mobile: hide promo+reviews cluster (no room at 38px height) and center the
   "Follow Us:" + socials cluster. */
@media (max-width: 768px) {
  #top-bar,
  #omg-top-bar { justify-content: center !important; padding: 0 16px; }
  .top-bar-left,
  #omg-top-bar-left { display: none !important; }
  .top-bar-right,
  #omg-top-bar-right {
    width: auto !important;
    flex: 0 1 auto;
    justify-content: center !important;
  }
}
/* SECTION:topbar END */

/* SECTION:navbar START */
/* Mockup #navbar -> live #omg-navbar */
#navbar,
#omg-navbar {
  position: fixed; top: var(--topbar-height); left: 0; right: 0; z-index: 199;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: var(--nav-height);
  background: rgba(255,255,255,0.98); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: top 0.3s ease, box-shadow 0.4s;
}
/* On scroll, the topbar slides away and the navbar drops to top:0. */
#navbar.is-scrolled-up,
#omg-navbar.is-scrolled-up { top: 0; }
#navbar.scrolled,
#omg-navbar.scrolled { box-shadow: 0 2px 30px rgba(0,0,0,0.08); }

/* Live navbar inner container - flex justify between logo, mega-menu, right CTA group */
#omg-navbar-container {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: none; padding: 0; gap: 32px;
}

/* Navbar logo wrapper.
   width:auto + max-width:none override Elementor `e-con-full` (which forces
   100% width on inner wrappers) so the logo container shrinks to its content
   inside the flex row instead of stealing the whole 1344px from siblings. */
#omg-navbar-logo { display: flex; align-items: center; flex-shrink: 0; width: auto; max-width: none; }
/* Specificity bump (.elementor img has higher specificity than .nav-logo-img alone) */
img.nav-logo-img,
.elementor img.nav-logo-img { height: 58px; width: auto; object-fit: contain; }

/* Mockup .nav-links > li > a  ->  live mega-menu link BEM .omg-navbar-mm__link */
.nav-links { display: flex; gap: 28px; list-style: none; align-items: center; }
.omg-navbar-mm { display: flex; gap: 28px; align-items: center; }
.nav-links > li > a,
.omg-navbar-mm__link {
  font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--black-soft); transition: color 0.3s; position: relative;
}
.nav-links > li > a::after,
.omg-navbar-mm__link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--gold); transition: width 0.3s;
}
.nav-links > li > a:hover,
.omg-navbar-mm__link:hover { color: var(--gold-dark); } /* WCAG AA on white */
.nav-links > li > a:hover::after,
.omg-navbar-mm__link:hover::after { width: 100%; }

/* Phone in navbar - live BEM .omg-navbar__phone
   WCAG AA: gold-text on white = 4.5:1+; gold (#C5A55A) is only 2.3:1. */
/* padding is a hit-target, not decoration: the text alone is ~18px tall, under
   the 24px WCAG 2.5.8 minimum. Vertical padding grows the clickable box without
   moving anything (it is a vertically-centred flex item). */
.nav-phone-link,
.omg-navbar__phone {
  display: flex; align-items: center; gap: 7px; padding: 5px 0;
  font-size: 15px; font-weight: 700; color: var(--gold-text);
  letter-spacing: 0.3px; text-transform: none; white-space: nowrap;
  transition: color 0.3s;
}
.nav-phone-link::after,
.omg-navbar__phone::after { display: none; }
.nav-phone-link svg,
.omg-navbar__phone__icon { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.nav-phone-link:hover,
.omg-navbar__phone:hover { color: var(--navy); } /* darker on hover keeps AA */

/* Navbar CTA button - mockup .nav-cta-btn class is set verbatim on live <a> via v_button */
.nav-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 200px; padding: 8px 0; background: var(--gold); border: none; color: var(--navy);
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; border-radius: 3px; transition: all 0.3s; white-space: nowrap;
}
.nav-cta-btn::after { display: none; }
.nav-cta-btn:hover { background: var(--gold-dark); color: var(--navy); box-shadow: 0 4px 16px var(--gold-glow); transform: translateY(-2px); }

#omg-navbar-cta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; width: auto; max-width: none; }

/* "About Us" dropdown holding Service Areas. Built client-side in main.js
   because the rfm-wpe mega-menu widget only supports flat sibling links.
   Deliberately NOT reusing .omg-navbar-mm__mega: that class has a
   `> .panel { transform: translateX(0) }` rule for the wide services panel,
   which would knock this narrow one off-centre. */
.omg-navbar-mm__has-sub { position: relative; display: flex; align-items: center; }
.omg-navbar-mm__subpanel { min-width: 190px; }

/* Hover bridge over the 12px dead gap between the link and the panel - the
   same trick .omg-navbar-mm__mega::after already does for Services. Without
   it the cursor crosses unhovered space on the way down, :hover drops, and the
   panel vanishes before it can be clicked. */
.omg-navbar-mm__has-sub::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px;
}
/* The Services panel is left-aligned under its trigger; this one is centred and
   wider than "About Us", so it overhangs both sides and a diagonal move can
   miss a link-width bridge. Extend the catch area across the panel itself.
   Safe while closed: the panel is pointer-events:none and that inherits here,
   so this can keep a panel open but can never open one. */
.omg-navbar-mm__subpanel::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
/* :focus-within, not just :hover - the submenu has to open for keyboard users
   tabbing from "About Us" into "Service Areas". */
.omg-navbar-mm__has-sub:hover > .omg-navbar-mm__subpanel,
.omg-navbar-mm__has-sub:focus-within > .omg-navbar-mm__subpanel {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.omg-navbar-mm__has-sub > .omg-navbar-mm__link { display: flex; align-items: center; gap: 5px; }
.omg-navbar-mm__has-sub:hover > .omg-navbar-mm__link .omg-navbar-mm__chev,
.omg-navbar-mm__has-sub:focus-within > .omg-navbar-mm__link .omg-navbar-mm__chev { transform: rotate(180deg); }
/* Type/padding come from `.omg-navbar-mm__panel a` above, which is more
   specific and already matches the Services panel. Only the bits that rule
   doesn't cover are set here - don't re-declare the rest, it reads as if it
   applies when it doesn't. */
.omg-navbar-mm__subitem::after { display: none; }
.omg-navbar-mm__subitem:hover { background: var(--navy); color: #fff; }

/* Compact quote link injected under the phone by main.js. Hidden until the
   full-size button gives up its slot at 1385. */
.omg-navbar__quote {
  /* 7px vertical, not 6: at 6 the box computes to exactly 24.0px, sitting right
     on the WCAG 2.5.8 minimum with no rounding margin. 26px has slack. */
  display: none; padding: 7px 14px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  background: var(--navy); color: var(--white); border-radius: 3px;
  white-space: nowrap; transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.omg-navbar__quote::after { display: none; }
.omg-navbar__quote:hover {
  background: var(--navy-dark); color: var(--white);
  box-shadow: 0 4px 14px rgba(0,57,89,0.28); transform: translateY(-1px);
}

/* Progressive nav collapse. Nothing is DROPPED on the way down any more - the
   navbar shrinks instead. Service Areas lives in the About Us dropdown so it
   survives every width, and the right cluster folds from a 200px button into a
   two-line phone + quote stack rather than vanishing. Hamburger at 1024. */

/* 1385: the 200px button stops fitting beside the full nav. Fold the right
   cluster to ~120px - number on top, quote link directly under it. The phone
   icon is what goes; the number itself never does. */
@media (max-width: 1385px) {
  /* Both children carry their own padding to clear the 24px touch-target
     minimum, so a small gap here is spacing between two real buttons rather
     than a sliver of dead space between two text links. */
  #omg-navbar-cta {
    flex-direction: column; align-items: flex-end;
    gap: 5px; line-height: 1.2;
  }
  #omg-navbar-cta .nav-cta-btn { display: none; }
  #omg-navbar-cta .omg-navbar__phone__icon,
  #omg-navbar-cta .omg-navbar__phone svg { display: none; }
  #omg-navbar-cta .omg-navbar__phone { gap: 0; font-size: 16px; }
  .omg-navbar__quote { display: inline-block; }
}

/* 1200: reclaim horizontal room from padding and gaps so the full nav plus the
   phone/quote stack still fit all the way down to the 1024 hamburger. */
@media (max-width: 1200px) {
  #omg-navbar { padding-left: 24px; padding-right: 24px; }
  #omg-navbar-container { gap: 16px; }
  .omg-navbar-mm { gap: 16px; }
}

@media (max-width: 1024px) {
  /* Mobile navbar: logo (order 1) | [auto space] | phone CTA (order 2) | 16px |
     hamburger (order 3). Container gap zeroed so the 16px between phone and
     hamburger is exact; phone gets margin-left:auto to push the right cluster
     to the far right. */
  #omg-navbar-container { justify-content: flex-start; gap: 0; }
  /* Undo the 1385 stack - below the hamburger the phone is a single pill. */
  #omg-navbar-cta { display: flex; flex-direction: row; align-items: center; gap: 0; }
  #omg-navbar-cta .nav-cta-btn,
  #omg-navbar-cta .omg-form-lightbox-trigger,
  #omg-navbar-cta .omg-navbar__quote { display: none; }
  /* Icon AND number, not an icon-only circle: a bare handset glyph doesn't
     read as "call us" to everyone, and the number is the thing being sold. */
  #omg-navbar-cta .omg-navbar__phone {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 16px; gap: 8px;
    border-radius: 20px; background: var(--gold); color: var(--navy);
    font-size: 15px; font-weight: 700; letter-spacing: 0.2px;
  }
  #omg-navbar-cta .omg-navbar__phone:hover { background: var(--gold-dark); transform: translateY(-2px); }
  #omg-navbar-cta .omg-navbar__phone__icon,
  #omg-navbar-cta .omg-navbar__phone svg {
    display: block; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0;
  }
  #omg-navbar-logo { order: 1 !important; }
  #omg-navbar-cta { order: 2 !important; margin-left: auto !important; }
  #omg-navbar-container .omg-navbar-mm,
  #omg-navbar-container [class*="navbar-mm"],
  #omg-navbar-container .elementor-widget-rfmwpe_services_mega_menu {
    order: 3 !important; margin-left: 8px !important;
  }
}

/* 400: tighten the pill rather than hide the number. Measured, the row needs
   ~307px at full size against a 320px worst-case viewport, so trimming padding
   and a point of font size is enough - the number never has to go. */
@media (max-width: 400px) {
  #omg-navbar-cta .omg-navbar__phone {
    height: 36px; padding: 0 12px; gap: 6px; font-size: 14px;
  }
  #omg-navbar-cta .omg-navbar__phone__icon,
  #omg-navbar-cta .omg-navbar__phone svg { width: 15px; height: 15px; }
}

/* Hamburger - mockup .nav-hamburger -> live .omg-navbar-mm__hamburger */
.nav-hamburger,
.omg-navbar-mm__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.nav-hamburger span,
.omg-navbar-mm__hamburger span { display: block; width: 24px; height: 2px; background: var(--black); transition: all 0.3s; }
/* SECTION:navbar END */

/* SECTION:dropdown START */
/* Mockup .nav-dropdown -> live .omg-navbar-mm__panel; mega panel grid -> .omg-navbar-mm__grid */
.nav-links li,
.omg-navbar-mm__mega { position: relative; }
.nav-dropdown,
.omg-navbar-mm__panel {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--white); border-top: 3px solid var(--gold);
  border-radius: 0 0 4px 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  min-width: 230px; padding: 8px 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; z-index: 300;
  list-style: none;
}
/* Mega panel: single-column stacked list under Services trigger. */
.omg-navbar-mm__mega > .omg-navbar-mm__panel {
  min-width: 320px; padding: 8px;
  left: 0; transform: translateX(0) translateY(-6px);
}
.nav-links li:hover .nav-dropdown,
.nav-links li.dropdown-open .nav-dropdown,
.omg-navbar-mm__mega:hover .omg-navbar-mm__panel,
.omg-navbar-mm__mega[aria-expanded="true"] .omg-navbar-mm__panel,
.omg-navbar-mm__mega.is-open .omg-navbar-mm__panel {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.omg-navbar-mm__mega:hover > .omg-navbar-mm__panel,
.omg-navbar-mm__mega[aria-expanded="true"] > .omg-navbar-mm__panel,
.omg-navbar-mm__mega.is-open > .omg-navbar-mm__panel {
  transform: translateX(0) translateY(0);
}
.nav-dropdown a,
.omg-navbar-mm__panel a {
  display: block; padding: 16px 22px; font-size: 13px; font-weight: 400;
  letter-spacing: 0.3px; text-transform: none; color: var(--black-soft);
  transition: background 0.2s, color 0.2s; white-space: nowrap;
}
.nav-dropdown a::after,
.omg-navbar-mm__panel a::after { display: none; }
.nav-dropdown a:hover,
.omg-navbar-mm__item:hover { background: var(--navy); color: #fff; }

/* Mega menu trigger chevron */
.nav-has-dropdown > a,
.omg-navbar-mm__trigger { display: flex; align-items: center; gap: 5px; }
.nav-chevron,
.omg-navbar-mm__chev { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform 0.25s; flex-shrink: 0; }
.nav-links li:hover .nav-chevron,
.nav-links li.dropdown-open .nav-chevron,
.omg-navbar-mm__mega:hover .omg-navbar-mm__chev,
.omg-navbar-mm__mega[aria-expanded="true"] .omg-navbar-mm__chev,
.omg-navbar-mm__mega.is-open .omg-navbar-mm__chev { transform: rotate(180deg); }

/* Hover bridge - prevents dropdown closing when cursor moves from trigger to panel
   (feedback_mega_menu_hover_bridge.md). Mockup uses .nav-has-dropdown::after */
.nav-has-dropdown::after,
.omg-navbar-mm__mega::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px; }

/* Mega panel grid layout (live-only - mockup uses 1-col dropdown lists) */
.omg-navbar-mm__grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
/* Specificity bump (a.… > .…) — without it, plugin/Elementor base anchor styles
   force display:block and stack icon ABOVE copy. Icon-left is the global rule
   per feedback_mega_menu_icon_left.md. */
a.omg-navbar-mm__item,
.omg-navbar-mm__item {
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 4px; transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.omg-navbar-mm__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 6px; background: rgba(0,57,89,0.06);
  color: var(--navy); flex-shrink: 0; transition: background 0.2s, color 0.2s;
}
.omg-navbar-mm__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.omg-navbar-mm__item:hover .omg-navbar-mm__icon { background: var(--gold); color: var(--navy); }
.omg-navbar-mm__copy { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.omg-navbar-mm__title { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.omg-navbar-mm__item:hover .omg-navbar-mm__title { color: #fff; }
.omg-navbar-mm__desc { font-size: 12px; color: var(--gray); line-height: 1.4; }
.omg-navbar-mm__item:hover .omg-navbar-mm__desc { color: rgba(255,255,255,0.75); }
.omg-navbar-mm__panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 12px 14px; border-top: 1px solid rgba(0,0,0,0.06);
}
.omg-navbar-mm__panel-footer-link { font-size: 12px; font-weight: 600; color: var(--navy); }
.omg-navbar-mm__panel-footer-link:hover { color: var(--gold-dark); } /* WCAG AA on white */
.omg-navbar-mm__panel-footer-cta {
  display: inline-flex; align-items: center; padding: 8px 18px;
  background: var(--gold); color: var(--navy);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  border-radius: 3px; transition: all 0.3s;
}
.omg-navbar-mm__panel-footer-cta:hover { background: var(--gold-dark); color: var(--navy); transform: translateY(-2px); box-shadow: 0 4px 14px var(--gold-glow); }
/* SECTION:dropdown END */

/* SECTION:footer START */
/* Mockup #footer -> live #footer (set as _element_id on Elementor footer container) */
#footer {
  background: var(--navy-dark); color: rgba(255,255,255,0.6);
  padding: 72px 0 0; border-top: 3px solid var(--gold);
}
#omg-footer-container { padding: 0 60px; }

/* Footer top grid (live container has class .footer-top via css_classes) */
.footer-top,
#omg-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.07); }

/* Footer brand column */
#omg-footer-col-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
img.footer-logo-img,
.elementor img.footer-logo-img { height: 55px; width: auto; object-fit: contain; margin-bottom: 0; }
.footer-brand-text { font-size: 14px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.7); max-width: 320px; margin-bottom: 0; } /* WCAG AA on navy-dark */

/* Footer column titles */
.footer-col-title { font-size: 14px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 20px; }

/* Footer columns - live class .footer__col on services/company/contact */
#omg-footer-col-services,
#omg-footer-col-company,
#omg-footer-col-contact { display: flex; flex-direction: column; align-items: flex-start; }

/* Mockup .footer-links -> live Elementor nav menu items.
   Live BEM: .elementor-nav-menu inside #omg-footer-col-services / -company */
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
#omg-footer-col-services .elementor-nav-menu,
#omg-footer-col-company .elementor-nav-menu {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
}
#omg-footer-col-services .elementor-nav-menu .menu-item,
#omg-footer-col-company .elementor-nav-menu .menu-item {
  list-style: none;
}
.footer-links a,
#omg-footer-col-services .elementor-nav-menu a.elementor-item,
#omg-footer-col-company .elementor-nav-menu a.elementor-item {
  font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.7); /* WCAG AA on navy-dark */
  transition: color 0.3s, transform 0.3s; position: relative; display: inline-block;
  padding: 0;
}
.footer-links a::after,
#omg-footer-col-services .elementor-nav-menu a.elementor-item::after,
#omg-footer-col-company .elementor-nav-menu a.elementor-item::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: #fff;
  transition: width 0.3s ease;
}
.footer-links a:hover,
#omg-footer-col-services .elementor-nav-menu a.elementor-item:hover,
#omg-footer-col-company .elementor-nav-menu a.elementor-item:hover { color: #fff; transform: translateY(-1px); }
.footer-links a:hover::after,
#omg-footer-col-services .elementor-nav-menu a.elementor-item:hover::after,
#omg-footer-col-company .elementor-nav-menu a.elementor-item:hover::after { width: 100%; }

/* Footer contact items */
.footer-contact-item { margin-bottom: 16px; }
.footer-contact-label { font-size: 14px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 6px; } /* WCAG AA on navy-dark */
.footer-contact-val { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.7; }
.footer-contact-val a,
a.footer-contact-val { color: rgba(255,255,255,0.7); transition: color 0.3s; }
.footer-contact-val a:hover,
a.footer-contact-val:hover { color: #fff; }

/* Footer socials - mockup .footer-socials -> live widget BEM .footer__socials + __link */
.footer-socials,
.footer__socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a,
.footer__socials__link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%; transition: all 0.3s;
}
.footer-socials a:hover,
.footer__socials__link:hover { border-color: var(--gold); background: var(--gold); }
.footer-socials svg,
.footer__socials__link svg { width: 13px; height: 13px; fill: rgba(255,255,255,0.4); transition: all 0.3s; }
.footer-socials a:hover svg,
.footer__socials__link:hover svg { fill: var(--navy); }

/* Footer bottom (legal/tagline) */
.footer-bottom,
#omg-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0; font-size: 14px; color: rgba(255,255,255,0.7); flex-wrap: wrap; gap: 8px;
}
.footer-bottom__copyright,
.footer-bottom__copyright,
.footer-bottom__tagline { font-size: 14px; color: rgba(255,255,255,0.7); } /* WCAG AA on navy-dark */
.footer-bottom__tagline a { color: rgba(255,255,255,0.7); transition: color 0.3s; text-decoration: none; }
.footer-bottom__tagline a:hover { color: #fff; }
.footer-bottom__sep { color: rgba(255,255,255,0.3); margin: 0 4px; }
/* SECTION:footer END */

/* SECTION:mobile-cta-bar START */
/* Mockup #mobile-cta-bar / .mobile-cta-inner / .mobile-cta-call / .mobile-cta-pricing
   ->  live rfm-wpe widget BEM .mobile-cta / .mobile-cta__call / .mobile-cta__estimate.
   Plugin ships zero CSS for this widget; theme owns it. Hidden at desktop, shown at <=768px (in responsive section).
   Note: live widget root IS the inner grid - so .mobile-cta-inner sibling is mockup-only;
   live .mobile-cta inherits the position+chrome AND the inner grid. */
#mobile-cta-bar,
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  height: 62px; background: var(--white);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  border-top: 1px solid rgba(0,0,0,0.08);
}
.mobile-cta-inner { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.mobile-cta-call,
.mobile-cta__call {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--off-white); color: var(--gold-text); /* WCAG AA on off-white */
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  border-right: 1px solid rgba(0,0,0,0.08); text-decoration: none;
}
.mobile-cta-call svg,
.mobile-cta__call svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.mobile-cta-pricing,
.mobile-cta__estimate {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: var(--navy);
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  text-decoration: none;
}
.mobile-cta__estimate svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* SECTION:mobile-cta-bar END */

/* SECTION:mobile-drawer START */
/* Mockup .offcanvas* -> live rfm-wpe widget BEM .omg-mobile-drawer*.
   Plugin v2.0.0 ships .mobile-drawer CSS but our component_name='omg-mobile-drawer' makes
   that selector miss the live element (known plugin bug). Theme owns these rules. */
.offcanvas-overlay,
.omg-mobile-drawer {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s;
  visibility: hidden;
}
.offcanvas-overlay.active,
.omg-mobile-drawer[data-mm-drawer-open="true"] { opacity: 1; pointer-events: auto; visibility: visible; }

.omg-mobile-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  border: none; cursor: pointer; padding: 0; margin: 0;
  opacity: 0; transition: opacity 0.3s ease;
}
.omg-mobile-drawer[data-mm-drawer-open="true"] .omg-mobile-drawer__backdrop { opacity: 1; }

.offcanvas,
.omg-mobile-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 1;
  width: 340px; max-width: 90vw; background: var(--white);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
}
.offcanvas.active,
.omg-mobile-drawer[data-mm-drawer-open="true"] .omg-mobile-drawer__panel { transform: translateX(0); }

.offcanvas-header,
.omg-mobile-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.offcanvas-header img,
img.omg-mobile-drawer__brand-logo,
.elementor img.omg-mobile-drawer__brand-logo { height: 56px !important; width: auto !important; max-width: none !important; object-fit: contain; display: block; }
.offcanvas-close,
.omg-mobile-drawer__close { background: none; border: none; padding: 4px; cursor: pointer; }
.offcanvas-close svg,
.omg-mobile-drawer__close svg { width: 22px; height: 22px; stroke: var(--black); fill: none; stroke-width: 2; }
/* Constrain ALL inline SVGs inside the drawer so unstyled widget SVGs don't
   render at intrinsic full size (the rfm-wpe widget ships unsized SVGs which
   without explicit width/height fill the parent flex item). */
.omg-mobile-drawer svg { width: 18px; height: 18px; flex-shrink: 0; }
.omg-mobile-drawer__accordion-chev,
.omg-mobile-drawer [class*="chev"] { width: 16px !important; height: 16px !important; stroke-width: 2; }
.omg-mobile-drawer__phone svg,
.omg-mobile-drawer [class*="phone"] svg { width: 18px !important; height: 18px !important; }
.omg-mobile-drawer__service-icon svg,
.omg-mobile-drawer [class*="service"] svg { width: 18px !important; height: 18px !important; }
/* Service item rows: icon + name + desc layout. */
.omg-mobile-drawer__service-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--black);
  border-bottom: 1px solid rgba(0,0,0,0.06); justify-content: flex-start;
}
.omg-mobile-drawer__service-link .omg-mobile-drawer__service-name, .omg-mobile-drawer__service-link .omg-mobile-drawer__service-desc { flex: 0 1 auto; }
/* Accordion panel reveal - smooth open/close */
.omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__service-list {
  margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.4s ease, margin 0.4s ease;
}
.omg-mobile-drawer__primary-item--accordion.is-open .omg-mobile-drawer__service-list,
.omg-mobile-drawer__primary-item--accordion[aria-expanded="true"] .omg-mobile-drawer__service-list,
.omg-mobile-drawer__primary-item--accordion[data-open="true"] .omg-mobile-drawer__service-list,
.omg-mobile-drawer__accordion-trigger[aria-expanded="true"] + .omg-mobile-drawer__accordion-panel .omg-mobile-drawer__service-list {
  max-height: 800px; opacity: 1;
  margin: 4px 0 8px; padding: 4px 0 8px;
}

/* Services pinned at top of drawer: render as section header, no toggle.
 * main.js moves the accordion item to the top of .omg-mobile-drawer__primary
 * and force-expands it. Style it as an "OUR SERVICES" label, no chevron, with
 * the service list indented below. */
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion {
  border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 4px; margin-bottom: 4px;
}
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__accordion-trigger {
  padding: 14px 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gray); cursor: default; pointer-events: none;
  border-bottom: none;
}
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__accordion-trigger [class*="chev"],
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__accordion-trigger svg { display: none; }
/* Hide "View All Services" link inside the panel — services are already listed */
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__accordion-all { display: none; }
/* Indent service rows; force visible regardless of attribute state */
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__service-list {
  max-height: none !important; opacity: 1 !important;
  padding: 0 0 6px !important; margin: 0 !important;
}
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__service-link {
  padding: 11px 0 11px 16px;
  font-size: 14px; font-weight: 500; color: var(--black);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.omg-mobile-drawer__primary > .omg-mobile-drawer__primary-item--accordion .omg-mobile-drawer__service-item:last-child .omg-mobile-drawer__service-link { border-bottom: none; }

/* Space between "Call Us" label and phone number in drawer footer */
.omg-mobile-drawer__phone-label { margin-right: 6px; }

.offcanvas-body,
.omg-mobile-drawer__nav { padding: 28px; flex: 1; display: flex; flex-direction: column; gap: 24px; }
.omg-mobile-drawer__primary,
.omg-mobile-drawer__service-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.offcanvas-nav a, .omg-mobile-drawer__primary-link, .omg-mobile-drawer__accordion-trigger, .omg-mobile-drawer__accordion-all, .omg-mobile-drawer__service-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; font-size: 14px; font-weight: 500; color: var(--black);
  border-bottom: 1px solid rgba(0,0,0,0.06); transition: color 0.3s;
  width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none;
  cursor: pointer;
}
.offcanvas-nav a:hover, .omg-mobile-drawer__primary-link:hover, .omg-mobile-drawer__accordion-trigger:hover, .omg-mobile-drawer__service-link:hover { color: var(--gold-dark); } /* WCAG AA on white */

.omg-mobile-drawer__service-name { font-size: 14px; font-weight: 500; color: var(--black); display: block; }
.omg-mobile-drawer__service-desc { font-size: 12px; font-weight: 300; color: var(--gray); display: block; margin-top: 2px; }

.omg-mobile-drawer__footer { padding: 0 28px 28px; display: flex; flex-direction: column; gap: 12px; }
/* CTA goes ABOVE phone (order:1) and centered */
.offcanvas-cta a,
.omg-mobile-drawer__cta {
  order: 1;
  display: flex; justify-content: center; align-items: center;
  padding: 14px 24px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 3px;
  transition: background 0.3s, transform 0.3s;
}
.omg-mobile-drawer__cta:hover { background: var(--gold-dark); transform: translateY(-2px); }
.offcanvas-phone,
.omg-mobile-drawer__phone {
  order: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 0;
  font-size: 15px; font-weight: 600; color: var(--gold-text); /* WCAG AA */
  border-bottom: none;
}
.omg-mobile-drawer__phone .omg-mobile-drawer__phone-icon,
.omg-mobile-drawer__phone svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; stroke: currentColor; }
/* Socials at bottom (injected by main.js) */
.omg-mobile-drawer__socials {
  order: 3;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 18px 0 0; margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.omg-mobile-drawer__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(0,57,89,0.18); color: var(--navy);
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.omg-mobile-drawer__socials a:hover {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
  transform: translateY(-2px);
}
.omg-mobile-drawer__socials svg {
  width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 0;
}
/* SECTION:mobile-drawer END */

/* SECTION:hero START */
/* Mockup: index.html L239-348, css/styles.css L259-414 */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  margin-top: var(--total-header);
  overflow: clip;  /* clip not hidden so .hero-text-col position:sticky still works */
  padding: 0;
}
/* The omg_home_hero widget renders <section class="hero"> wrapped in
   Elementor's .elementor-widget / .elementor-widget-container divs. The
   #hero container is flex-direction:column, so we need flex-grow:1 on the
   widget plus min-height:100% on each link in the chain so .hero fills the
   full 100vh #hero container (so .hero-bg, .hero-accent-line, and
   .hero-indicators sit at the true bottom). */
#hero > .elementor-element.elementor-widget-omg_home_hero {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
#hero .elementor-widget-omg_home_hero > .elementor-widget-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#hero .elementor-widget-omg_home_hero section.hero {
  flex: 1 1 auto;
  width: 100%;
}
#hero section.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: clip;  /* clip not hidden so descendant position:sticky still works */
}
.hero-bg {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
}
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-bg img.active { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,30,50,0.75) 0%, rgba(0,30,50,0.45) 35%, rgba(0,30,50,0.5) 60%, rgba(0,30,50,0.85) 100%),
    linear-gradient(90deg, rgba(0,30,50,0.8) 0%, rgba(0,30,50,0.2) 65%);
}
.hero-accent-line {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: var(--gold); z-index: 10;
}
.hero-indicators {
  position: absolute; z-index: 10; bottom: 48px; left: 80px;
  display: flex; gap: 10px; align-items: center;
}
.hero-dot {
  width: 52px; height: 3px; background: rgba(255,255,255,0.2);
  border-radius: 2px; cursor: pointer; position: relative; overflow: hidden;
  border: none; padding: 0;
}
.hero-dot::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--gold); border-radius: 2px;
}
.hero-dot.active::after { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { width: 100%; } }
.hero-counter {
  position: absolute; z-index: 10; bottom: 40px; right: 80px;
  font-family: var(--font-display); color: rgba(255,255,255,0.4);
  font-size: 16px; letter-spacing: 4px;
}
.hero-counter .cur { font-size: 44px; font-weight: 400; color: #fff; line-height: 1; }
.hero .container {
  position: relative; z-index: 5; width: 100%;
  padding-top: 80px; padding-bottom: 80px;
}
.hero-text-col {
  max-width: 620px;
  position: relative;
  min-height: 320px;
}
/* Form column sits absolutely on the right side of #hero. The slider widget
   takes the full hero width; the form floats over it on the right at 420px
   wide. Mobile: collapses to in-flow under the hero copy. */
.hero-form-col.omg-form-wrapper {
  position: absolute;
  top: calc(var(--total-header) + 80px);
  right: max(60px, calc((100vw - 1280px) / 2 + 60px));
  width: 420px;
  z-index: 6;
  margin: 0;
}
.hero-slide-text {
  max-width: 620px;
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.8s ease;
}
.hero-slide-text.active { opacity: 1; pointer-events: auto; }
.hero-slide-text .hero-eyebrow,
.hero-slide-text .hero-h1,
.hero-slide-text .hero-p,
.hero-slide-text .hero-trust {
  opacity: 0; transform: translateY(16px);
}
.hero-slide-text.active .hero-eyebrow { animation: fadeUp 0.7s 0.15s forwards; }
.hero-slide-text.active .hero-h1 { animation: fadeUp 0.8s 0.3s forwards; }
.hero-slide-text.active .hero-p { animation: fadeUp 0.7s 0.45s forwards; }
.hero-slide-text.active .hero-trust { animation: fadeUp 0.7s 0.58s forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
/* Static H1 (sits above the rotating slides; one per page).
   Slides are position:absolute, so when a static H1 exists we push the slide
   stack down by the H1's height + breathing room (~70px desktop, 56px mobile). */
.hero-static-h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500; line-height: 1.25; color: rgba(255,255,255,0.92);
  letter-spacing: 0.2px; margin: 0 0 22px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
  position: relative; z-index: 4;
}
.hero-text-col:has(> .hero-static-h1) .hero-slide-text { top: 70px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 22px;
}
.hero-eyebrow::before { content: ''; width: 36px; height: 2px; background: rgba(255,255,255,0.5); }
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 500; line-height: 1.1; color: #fff; margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-h1 em { font-style: italic; color: var(--gold); }
.hero-p {
  font-size: 17px; font-weight: 400; line-height: 1.7;
  color: rgba(255,255,255,0.9); max-width: 500px; margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.hero-trust {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  margin-top: 8px;
  opacity: 0; transform: translateY(18px); animation: fadeUp 0.7s 0.58s forwards;
}
.hero-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 600; border-radius: 999px;
  letter-spacing: 0.3px; line-height: 1;
  transition: transform 0.3s ease, background 0.3s ease;
  cursor: default;
}
.hero-trust-item:hover {
  transform: translateY(-3px);
  background: var(--gold-light);
}
.hero-trust-item svg,
.hero-trust-item i,
.hero-trust-item .fa,
.hero-trust-item [class*="fa-"] { width: 14px; height: 14px; stroke: var(--navy); fill: var(--navy); color: var(--navy); stroke-width: 2; font-size: 13px; }
/* SECTION:hero END */

/* SECTION:trust-bar START */
/* Mockup: index.html L350-372, css/styles.css L416-432
   Widget emits .trust-bar__grid > .trust-bar__stat > .trust-bar__number/__label */
#trust-bar { background: var(--navy); padding: 44px 0; }
.trust-bar-inner,
.trust-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-stat,
.trust-bar__stat {
  text-align: center; padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.trust-stat:last-child,
.trust-bar__stat:last-child { border-right: none; }
.trust-stat-number,
.trust-bar__number {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.5vw, 52px); font-weight: 600;
  color: var(--gold); line-height: 1; margin-bottom: 6px;
}
.trust-stat-label,
.trust-bar__label {
  font-size: 12px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
/* SECTION:trust-bar END */

/* SECTION:thank-you START */
/* /thank-you/ (page-id-106) — all 4 sections share 60px vertical padding.
   Page-hero + final-cta defaults are overridden ONLY on this page so the rest
   of the site keeps its standard hero/CTA spacing. */
#thank-next-steps     { padding: 60px 0; background: var(--white); }
#thank-while-you-wait { padding: 60px 0; background: var(--off-white); }
body.page-id-106 .page-hero,
body.page-id-106 .page-hero--split { padding: 60px 0; }
body.page-id-106 #final-cta        { padding: 60px 0; }
.thank-next-steps-header,
.thank-while-header { text-align: center; margin-bottom: 48px; }
.thank-next-steps-header [class$="__desc"],
.thank-while-header [class$="__desc"] { margin: 0 auto; max-width: 720px; }
/* SECTION:thank-you END */

/* SECTION:services START */
/* Mockup: index.html L374-422, css/styles.css L434-471 */
#services { padding: 100px 0; background: var(--off-white); }
#services-grid,
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
/* Equal-height service cards: stretch the Elementor wrapper chain to the
   tallest cell in the row, and let the card fill its wrapper. The "Learn More"
   link gets pushed to the bottom via margin-top:auto in card__link below. */
.services-grid > .elementor-element { display: flex; height: 100%; }
.services-grid > .elementor-element > .elementor-widget-container { display: flex; flex-direction: column; width: 100%; }
.services-header { text-align: center; margin-bottom: 48px; }
.services-header [class$="__desc"] { margin: 0 auto; }
.service-card {
  background: var(--white); border: 1.5px solid rgba(0,0,0,0.07); border-radius: 6px;
  padding: 40px 32px 36px; text-align: center; transition: all 0.3s;
  display: flex; flex-direction: column; align-items: center;
  height: 100%; flex: 1 1 auto;
}
.service-card:hover { border-color: var(--gold); box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-4px); }
.service-card__icon,
.service-icon {
  width: 64px; height: 64px; background: rgba(0,57,89,0.06); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  transition: background 0.3s;
}
.service-card:hover .service-card__icon,
.service-card:hover .service-icon { background: var(--gold); }
.service-card__icon svg,
.service-icon svg {
  width: 28px; height: 28px; stroke: var(--navy); fill: none; stroke-width: 1.5;
  transition: stroke 0.3s;
}
.service-card__title,
.service-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--navy); margin-bottom: 10px;
}
.service-card__desc,
.service-desc {
  font-size: 14px; font-weight: 300; color: var(--gray-dark);
  line-height: 1.65; margin-bottom: 24px; flex: 1;
}
.service-card__link,
.service-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; background: var(--gold); color: var(--navy);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 3px; transition: background 0.3s, transform 0.2s; margin-top: auto;
}
.service-card__link svg,
.service-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.service-card:hover .service-card__link,
.service-card:hover .service-link { background: var(--gold-dark); transform: translateY(-1px); }
/* SECTION:services END */

/* SECTION:before-after START */
/* Mockup: index.html L424-480, css/styles.css L473-495 + L853-891 */
#before-after { padding: 100px 0; background: var(--white); }
.ba-header { margin-bottom: 48px; }
#ba-grid,
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; align-items: stretch; }
/* Equal-height before/after cards: stretch the Elementor wrapper chain to the
   tallest cell, let the card fill the wrapper, and let .ba-card__desc grow to
   absorb extra space so every desc block ends at the same baseline. */
#ba-grid > .elementor-element,
.ba-grid > .elementor-element { display: flex; height: 100%; }
#ba-grid > .elementor-element > .elementor-widget-container,
.ba-grid > .elementor-element > .elementor-widget-container { display: flex; flex-direction: column; width: 100%; }
.ba-card {
  border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.3s; background: var(--white);
  display: flex; flex-direction: column;
  padding: 0; height: 100%; flex: 1 1 auto;
}
.ba-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); transform: translateY(-4px); }
.ba-card__icon,
.ba-card-img {
  position: relative; overflow: hidden;
  width: 100%; height: auto;
  background: none; border-radius: 0; padding: 0; margin: 0; display: block;
}
.ba-card__icon img,
.ba-card-img img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.5s; }
.ba-card:hover .ba-card__icon img,
.ba-card:hover .ba-card-img img { transform: scale(1.05); }
/* Generic hover scale for any image inside a card-style container that doesn't
   already have a per-card rule. Targets common BEM patterns. Card translateY
   stays on the card itself; this layers an inner image scale on top. */
.service-card .service-card__icon img:not([class*="svg"]),
.location-card img,
.feature-card img,
.about-card img,
.team-card img,
.content-split-img img,
.gallery-tile img,
.financing-perk img { transition: transform 0.5s; }
.service-card:hover .service-card__icon img,
.location-card:hover img,
.feature-card:hover img,
.about-card:hover img,
.team-card:hover img,
.content-split:hover .content-split-img img,
.gallery-tile:hover img,
.financing-perk:hover img { transform: scale(1.05); }
/* Card-box link text doubles as our category badge */
.ba-card .ba-card__link,
.ba-card-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px; background: var(--gold); color: var(--navy);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px; border-radius: 2px;
  display: inline-block; text-transform: none;
}
.ba-card .ba-card__link svg { display: none; }
.ba-card__title,
.ba-card-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--navy); margin: 20px 24px 6px;
  padding: 0;
}
.ba-card__desc,
.ba-card-desc { font-size: 13px; color: var(--gray-dark); line-height: 1.6; margin: 0 24px 20px; flex: 1 1 auto; }
/* Before/After slider (omg widget) */
.ba-slider {
  position: relative; overflow: hidden; border-radius: 6px;
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.ba-slider > img {
  display: block; width: 100%; height: 420px; object-fit: cover; pointer-events: none;
}
.ba-slider-before {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2; clip-path: inset(0 50% 0 0);
}
.ba-slider-before img {
  display: block; width: 100%; height: 420px; object-fit: cover; pointer-events: none;
}
.ba-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
  background: var(--gold); z-index: 10; transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}
.ba-slider-handle::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.ba-slider-handle::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px; color: var(--navy); font-weight: 700; z-index: 1;
}
.ba-slider-label {
  position: absolute; bottom: 16px; padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; border-radius: 3px; z-index: 5;
}
.ba-slider-label-before { left: 16px; background: rgba(0,0,0,0.5); }
.ba-slider-label-after { right: 16px; background: var(--gold); color: var(--navy); }
/* SECTION:before-after END */

/* SECTION:process START */
/* Mockup: index.html L482-539, css/styles.css L497-538 */
#process { padding: 100px 0; background: var(--off-white); }
#process-inner,
.process-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.process-steps,
.process__steps { display: flex; flex-direction: column; gap: 0; }
.process-step {
  display: flex; gap: 20px; padding: 24px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06); border-radius: 4px;
  transition: background 0.25s, padding-left 0.25s; cursor: default;
}
.process-step:hover { background: rgba(255,178,93,0.04); padding-left: 12px; }
.process-step:hover .process-step__number,
.process-step:hover .process-num { transform: scale(1.1); box-shadow: 0 4px 14px var(--gold-glow); }
.process-step:hover .process-step__content h4,
.process-step:hover .process-step-title { color: var(--gold-dark); } /* WCAG AA */
.process-step:last-child { border-bottom: none; }
.process-step__number,
.process-num {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; transition: transform 0.25s, box-shadow 0.25s;
}
.process-step__content { flex: 1; }
.process-step-body { flex: 1; }
.process-step__content h4,
.process-step-title {
  font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 4px;
  transition: color 0.25s;
}
.process-step__content p,
.process-step-desc { font-size: 13px; font-weight: 300; color: var(--gray-dark); line-height: 1.65; }
.process-img,
.process__image { position: relative; }
.process-img img,
.process__image img { width: 100%; height: 500px; object-fit: cover; border-radius: 6px; }
.process-img-badge,
.process__image-badge {
  position: absolute; bottom: -15px; left: -20px;
  width: 140px; height: 140px; background: var(--gold); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25); text-align: center;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.process-img-badge:hover,
.process__image-badge:hover { transform: scale(1.08); }
.process__image-badge span:first-child,
.process-badge-num {
  font-family: var(--font-display); font-size: 52px; font-weight: 700;
  color: var(--navy); line-height: 1;
}
.process__image-badge span:last-child,
.process-badge-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(0,57,89,0.7);
  display: block;
}
.process-header [class$="__heading"] em,
.process-header [class$="__accent"] { display: block; }
/* SECTION:process END */

/* SECTION:financing START */
/* Mockup: index.html L541-579, css/styles.css L540-572 */
#financing {
  background: var(--navy-dark); padding: 72px 0;
  position: relative; overflow: hidden;
}
#financing::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--gold);
}
#financing-inner,
.financing-inner { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
/* .financing-badge is an alias to .pill-badge--gold */
.pill-badge--gold,
.financing-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px; background: var(--gold); border-radius: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--navy); margin-bottom: 20px;
}
.pill-badge--gold .pill-badge__leading,
.financing-badge svg { width: 14px; height: 14px; }
.pill-badge__leading { font-weight: 800; font-size: 14px; }
.financing-header [class$="__heading"] {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px); font-weight: 500;
  color: #fff; line-height: 1.2; margin-bottom: 16px;
}
.financing-header [class$="__heading"] em,
.financing-header [class$="__accent"] { font-style: italic; color: var(--gold); }
.financing-header [class$="__desc"] {
  font-size: 15px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.65); max-width: 560px;
}
#financing h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px); font-weight: 500;
  color: #fff; line-height: 1.2; margin-bottom: 16px;
}
#financing h2 em { font-style: italic; color: var(--gold); }
#financing p {
  font-size: 15px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.65); max-width: 560px;
}
.financing-points,
.financing-points__grid,
ul.financing-points { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 20px; padding: 0; list-style: none; }
.financing-point,
.financing-points__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.85);
  padding: 2px 8px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.financing-point:hover,
.financing-points__item:hover {
  transform: translateY(-2px);
  color: #fff;
}
.financing-points__icon,
.financing-point svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2.5; flex-shrink: 0; }
/* SECTION:financing END */

/* SECTION:testimonials START */
/* Mockup: index.html L581-721, css/styles.css L574-624 */
#testimonials { padding: 100px 0; background: var(--white); }
.testimonials-header { margin-bottom: 48px; }
.testimonial-carousel,
.testimonials__carousel { position: relative; overflow: hidden; }
.testimonial-track,
.testimonials__track { display: flex; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); }
.testimonial-slide,
.testimonials__slide {
  min-width: 100%; padding: 0 4px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.testimonial-card {
  background: var(--off-white); border-radius: 6px; padding: 36px 32px;
  position: relative; border: 1.5px solid transparent;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.testimonial-card:hover {
  border-color: rgba(255,178,93,0.25); transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.09);
}
.testimonial-card__quote,
.testimonial-card::before {
  content: '\201C'; font-family: var(--font-display); font-size: 80px;
  color: var(--gold); opacity: 0.15; position: absolute; top: 16px; left: 28px; line-height: 1;
}
.testimonial-card__quote { content: none; left: 28px; }
.testimonial-card__stars,
.stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.star { width: 15px; height: 15px; fill: var(--gold); stroke: var(--gold); stroke-width: 1; }
.testimonial-card__text,
.testimonial-text {
  font-size: 14px; font-weight: 300; line-height: 1.75;
  color: var(--gray-dark); margin-bottom: 20px; position: relative; z-index: 1;
}
.testimonial-card__author,
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar,
.testimonial-initials {
  width: 40px; height: 40px; background: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--navy); flex-shrink: 0;
}
.testimonial-card__info { display: flex; flex-direction: column; }
.testimonial-card__name,
.testimonial-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.testimonial-card__location,
.testimonial-project { font-size: 12px; color: var(--gray-dark); } /* WCAG AA: gray-dark (#555) > 4.5:1 vs cream */
.testimonials__nav,
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; }
.testimonials__dots,
.carousel-dots { display: flex; gap: 8px; }
.testimonials__dot,
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gray-light);
  border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s;
  display: inline-block;
}
.testimonials__dot.active,
.carousel-dot.active { background: var(--gold); transform: scale(1.3); }
.testimonials__arrow,
.carousel-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.12);
  background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, background 0.25s;
}
.testimonials__arrow:hover,
.carousel-btn:hover { border-color: var(--gold); background: var(--gold); transform: translateY(-2px); }
.testimonials__arrow:hover svg,
.carousel-btn:hover svg { stroke: var(--navy); }
.testimonials__arrow svg,
.carousel-btn svg { width: 15px; height: 15px; stroke: var(--gray-dark); fill: none; stroke-width: 2; }
/* SECTION:testimonials END */

/* SECTION:gallery START */
/* Mockup: index.html L723-759, css/styles.css L626-640 */
#gallery { padding: 100px 0; background: var(--off-white); }
/* Home Our Work header: stack left-aligned, button below the heading. */
#gallery-header-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 36px; gap: 20px; text-align: left; }
.gallery-header { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 16px; text-align: left; }
#gallery-header-row .gallery-header { display: contents; }
#gallery-header-row .services-header__desc,
#gallery-header-row [class*="header__desc"] { margin-left: 0; margin-right: 0; }
.gallery-grid,
.gallery__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 12px; }
.gallery__grid > :first-child { grid-row: span 2; }
.gallery-cell,
.gallery__item { overflow: hidden; border-radius: 4px; position: relative; }
.gallery-cell img,
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-cell:hover img,
.gallery__item:hover img { transform: scale(1.05); }
.gallery-cell.tall { grid-row: span 2; }
.gallery-cell-overlay,
.gallery__item-overlay {
  position: absolute; inset: 0; background: rgba(0,57,89,0.4); opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s; color: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}
.gallery-cell:hover .gallery-cell-overlay,
.gallery__item:hover .gallery__item-overlay { opacity: 1; }
.gallery__item-type { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
/* SECTION:gallery END */

/* SECTION:why-omg START */
/* Mockup: index.html L761-805, css/styles.css L642-664 */
#why-omg { padding: 100px 0; background: var(--white); }
.why-header { text-align: center; margin-bottom: 48px; }
.why-header [class$="__desc"] { margin: 0 auto; }
#why-grid,
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card {
  display: block; text-align: center; padding: 36px 24px; border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 6px; transition: all 0.3s; color: inherit; text-decoration: none;
}
.why-card:hover { border-color: var(--gold); box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-4px); }
/* Team grid: 3 cards, center the row instead of leaving a 4th empty column.
   Wrap the override in a desktop-only media query so the .why-grid responsive
   defaults (2-col @ 1100, 1-col @ 768) still kick in on tablet/mobile. */
@media (min-width: 1101px) {
  #about-team-grid { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; max-width: 920px; margin: 0 auto; }
}
.why-card__icon,
.why-icon {
  width: 56px; height: 56px; background: rgba(255,178,93,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  transition: background 0.3s;
}
.why-card:hover .why-card__icon,
.why-card:hover .why-icon { background: var(--gold); }
.why-card__icon svg,
.why-icon svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.5; transition: stroke 0.3s; }
.why-card:hover .why-card__icon svg,
.why-card:hover .why-icon svg { stroke: var(--navy); }
.why-card__title,
.why-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--navy); margin-bottom: 8px;
}
.why-card__desc,
.why-desc { font-size: 13px; font-weight: 300; color: var(--gray-dark); line-height: 1.65; }
/* SECTION:why-omg END */

/* SECTION:faq START */
/* Mockup: index.html L807-893, css/styles.css L666-693 */
#faq { padding: 100px 0; background: var(--off-white); }
#faq-inner,
.faq-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.faq-wrap {
  background: #fff; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.faq-item { border-bottom: 1px solid var(--gray-bg); transition: background 0.2s; }
.faq-item:last-child { border-bottom: none; }
.faq-item:hover { background: rgba(0,0,0,0.01); }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; background: none; border: none; text-align: left;
  cursor: pointer; transition: background 0.2s;
}
.faq-btn:hover { background: var(--off-white); }
.faq-q { flex: 1; font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.5; }
.faq-chevron {
  width: 18px; height: 18px; stroke: var(--gray); fill: none; stroke-width: 2;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease; flex-shrink: 0;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); stroke: var(--gold); }
.faq-item.open .faq-q { color: var(--gold-dark); } /* WCAG AA on white */
.faq-answer {
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease 0.05s;
}
.faq-item.open .faq-answer { max-height: 800px; opacity: 1; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
.faq-answer-inner {
  padding: 0 24px 22px; font-size: 14px; color: var(--gray-dark);
  line-height: 1.75; font-weight: 300;
}
.faq-header [class$="__heading"] em,
.faq-header [class$="__accent"] { display: block; }
/* SECTION:faq END */

/* SECTION:final-cta START */
/* Mockup: index.html L895-911, css/styles.css L695-720 */
#final-cta {
  padding: 80px 0; background: var(--gold);
  text-align: center; position: relative; overflow: hidden;
}
#final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,57,89,0.05) 0%, transparent 50%);
}
#final-cta .final-cta-header [class$="__heading"] {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px); font-weight: 500;
  color: var(--navy); margin-bottom: 12px; position: relative;
}
/* final-cta accent inherits navy color (mockup has no accent there). */
#final-cta .final-cta-header__accent { color: var(--navy); font-style: normal; display: block; }
#final-cta .final-cta-header [class$="__desc"] {
  font-size: 16px; font-weight: 300; color: rgba(0,57,89,0.7);
  margin-bottom: 32px; position: relative; max-width: none; text-align: center;
}
#final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px); font-weight: 500;
  color: var(--navy); margin-bottom: 12px; position: relative;
}
#final-cta p {
  font-size: 16px; font-weight: 300; color: rgba(0,57,89,0.7);
  margin-bottom: 32px; position: relative;
}
#final-cta-btns,
.final-cta-btns { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; }
#final-cta .btn-outline {
  border-color: var(--navy); color: var(--navy);
}
#final-cta .btn-outline:hover {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
#final-cta .btn-outline:hover svg { stroke: #fff; }
/* SECTION:final-cta END */

/* Default-hidden mobile-only hero CTA (shown only at <=768px). */
.hero-mobile-cta { display: none; }

/* SECTION:body-responsive START */
@media (max-width: 1100px) {
  #hero > .hero { padding-top: 32px; padding-bottom: 32px; }
  .hero .hero-text-col { max-width: 100%; }
  /* Form col stacks under hero text on tablet/mobile — 40px gap above to
     break from the hero accent line, 40px gap below for breathing room. */
  .hero-form-col.omg-form-wrapper {
    position: static;
    width: auto;
    max-width: 520px;
    margin: 40px auto 40px;
  }
  #hero { min-height: auto; }
  .services-grid,
  #services-grid { grid-template-columns: 1fr 1fr; }
  .ba-grid,
  #ba-grid { grid-template-columns: 1fr 1fr; }
  .process-inner,
  #process-inner { grid-template-columns: 1fr; gap: 48px; }
  .financing-inner,
  #financing-inner { grid-template-columns: 1fr; }
  .faq-inner,
  #faq-inner { grid-template-columns: 1fr; gap: 36px; }
  .why-grid,
  #why-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-inner,
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-stat,
  .trust-bar__stat { padding: 24px 0; }
  .trust-stat:nth-child(2n),
  .trust-bar__stat:nth-child(2n) { border-right: none; }
  .trust-stat:nth-child(n+3),
  .trust-bar__stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.1); }
  .gallery-grid,
  .gallery__grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }
  .gallery-cell.tall,
  .gallery__grid > :first-child { grid-row: span 1; }
}

@media (max-width: 768px) {
  #hero { min-height: auto; padding-bottom: 40px; }
  .hero .container { padding-top: 40px; padding-bottom: 0; }
  .hero-mobile-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; max-width: 320px; margin: 24px auto 0;
    padding: 16px 24px; background: var(--gold); color: var(--navy);
    font-size: 14px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    border-radius: 3px; transition: background 0.3s, transform 0.3s; text-decoration: none;
  }
  .hero-mobile-cta:hover { background: var(--gold-dark); transform: translateY(-2px); }
  .hero-trust { flex-direction: column; gap: 12px; align-items: flex-start; }
  .hero-indicators { left: 20px; bottom: 24px; }
  .hero-counter { right: 20px; bottom: 16px; }
  .hero-text-col { min-height: 460px; }
  .services-grid,
  #services-grid { grid-template-columns: 1fr; }
  .ba-grid,
  #ba-grid { grid-template-columns: 1fr; }
  .testimonial-slide,
  .testimonials__slide { grid-template-columns: 1fr; }
  .gallery-grid,
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; }
  .gallery-cell.tall,
  .gallery__grid > :first-child { grid-row: span 1; }
  .financing-points,
  .financing-points__grid { grid-template-columns: 1fr; }
  .why-grid,
  #why-grid { grid-template-columns: 1fr; }
  .final-cta-btns,
  #final-cta-btns { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 32px; }
  .process-img,
  .process__image { display: none; }
}
/* SECTION:body-responsive END */

/* SECTION:floating-widgets START */
/* rfm-wpe back-to-top + float-cta widgets - plugin ships zero visual CSS, theme owns. */
/* Floating widget Elementor wrappers must NOT occupy layout space; display:contents
   removes the wrapper from the box model so the inner position:fixed children
   render correctly without leaving a white gap under the footer. */
.elementor-widget-rfmwpe_back_to_top,
.elementor-widget-rfmwpe_float_cta,
.elementor-widget-rfmwpe_mobile_cta { display: contents; }

/* Both floating widgets pin 79px above viewport bottom when the user
   reaches the page footer — clears the footer cleanly. JS toggles
   .is-near-bottom on both .back-to-top and .float-cta. Mobile keeps the
   72px default offset (clears the mobile-cta bar). */
.back-to-top.is-near-bottom,
.float-cta.is-near-bottom { bottom: 79px !important; transition: bottom 0.3s ease; }
@media (max-width: 768px) {
  .back-to-top { bottom: 72px !important; left: 16px !important; transition: opacity 0.3s, transform 0.3s, background 0.3s, bottom 0.3s; }
  /* When at the very bottom on mobile, lift higher (167px) so the button
     clears the mobile-cta bar AND the footer simultaneously. */
  .back-to-top.is-near-bottom { bottom: 167px !important; }
}

.back-to-top {
  position: fixed; bottom: 24px; left: 24px; right: auto; z-index: 350;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  border: 1px solid var(--navy);
  outline: 1px solid var(--navy); outline-offset: -1px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
}
.back-to-top.is-visible,
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--navy-dark); transform: translateY(-3px); }
/* Ring SVG is rendered with width=44/height=44 attributes but the button's
   content-box is 42x42 because of the 1px border + 1px outline. Force the SVG
   to fill the content box exactly so the progress arc + arrow share the same
   center as the button. */
.back-to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.back-to-top__arrow { position: relative; z-index: 1; stroke: currentColor; transform: translateY(-1px); }

.float-cta {
  position: fixed; bottom: 24px; right: 24px; z-index: 350;
  /* Aligns with .back-to-top per feedback_floating_widgets_align_bottom.md */
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.float-cta.is-visible,
.float-cta.visible { opacity: 1; pointer-events: auto; }
.float-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; background: var(--gold); color: var(--navy);
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 3px; border: 1px solid var(--navy);
  transition: background 0.3s, transform 0.3s;
}
.float-cta__btn:hover { background: var(--gold-dark); transform: translateY(-2px); }
/* SECTION:floating-widgets END */

/* SECTION:utility START */
.mb-36 { margin-bottom: 36px; }
.mt-24 { margin-top: 24px; }
.text-gold-link { color: var(--gold-text); font-weight: 600; } /* WCAG AA on light bg */
.text-gold-link:hover { color: var(--gold); }
.section-eyebrow-light { color: rgba(255,255,255,0.7); }
/* SECTION:utility END */

/* SECTION:page-hero START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L1041-1061 verbatim port.
   Iron Rule 51: copy mockup CSS rules verbatim. The omg_page_hero widget renders
   the mockup BEM (.page-hero, .page-hero-bg, .page-hero-overlay, .page-hero-content)
   so identity mapping (no comma-prefix bridge needed). */
.page-hero {
  position: relative; padding: 180px 0 100px;
  background: var(--navy); margin-top: var(--total-header);
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0; z-index: 1;
}
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,40,66,0.7) 0%, rgba(0,40,66,0.9) 100%);
}
.page-hero-content { position: relative; z-index: 3; max-width: 700px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px); font-weight: 500;
  color: #fff; line-height: 1.15; margin-bottom: 16px;
}
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero p { font-size: 17px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 28px; }

/* Split layout: 50/50 text on left, image (or slider) on right. */
.page-hero--split { padding: 140px 0 80px; }
.page-hero--split .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.page-hero--split .page-hero-content { max-width: 100%; }
.page-hero--split .page-hero-content p { color: rgba(255,255,255,0.78); }
.page-hero-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 16px 48px rgba(0,0,0,0.32);
}
.page-hero-media .page-hero-image,
.page-hero-media .page-hero-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero-slider img { opacity: 0; transition: opacity 0.9s ease; }
.page-hero-slider img.is-active { opacity: 1; }

/* Slider indicator: 14px dots row + "1 / 04" counter, pinned bottom-left of
   the .page-hero-media container so the user sees how many slides exist. */
.page-hero-slider-indicator {
  position: absolute;
  left: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  z-index: 3;
}
.page-hero-slider-dots { display: flex; gap: 8px; }
.page-hero-slider-dot {
  appearance: none; -webkit-appearance: none;
  width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, width 0.25s;
}
.page-hero-slider-dot:hover { background: rgba(255,255,255,0.7); transform: translateY(-1px); }
.page-hero-slider-dot.is-active { background: var(--gold); width: 22px; border-radius: 4px; }
.page-hero-slider-counter {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.page-hero-slider-counter__cur { color: var(--gold); }

@media (max-width: 900px) {
  .page-hero--split .container { grid-template-columns: 1fr; gap: 32px; }
  /* width:100% is required, not cosmetic. "margin: 0 auto" makes this a grid
     item with auto side margins, which cancels the default stretch and sizes it
     to max-content. Its children are absolutely positioned, so max-content is
     ~0 and the hero image collapsed to 3x2px (invisible) on every split-hero
     page at mobile widths. */
  .page-hero-media { aspect-ratio: 16 / 10; width: 100%; max-width: 540px; margin: 0 auto; }
  .page-hero-slider-indicator { left: 12px; bottom: 10px; }
}
/* SECTION:page-hero END */

/* SECTION:service-content START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L1063-1078 verbatim port.
   Iron Rule 51: 2-col layout grid (.service-content-inner) + .service-main typography
   (h2/p/ul li with check svg) + sticky .service-sidebar. */
.service-content { padding: 80px 0; }
.service-content-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
.service-main h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--navy); margin-bottom: 16px; margin-top: 40px; }
.service-main h2:first-child,
.service-main > :first-child h2 { margin-top: 0; }
.service-main p { font-size: 15px; line-height: 1.8; color: var(--gray-dark); margin-bottom: 16px; }
.service-main ul { margin-bottom: 20px; padding-left: 0; }
.service-main ul li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 14px; color: var(--gray-dark); line-height: 1.6;
}
.service-main ul li svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2.5; flex-shrink: 0; margin-top: 3px; }

.service-sidebar {
  position: sticky; top: calc(var(--total-header) + 24px);
  align-self: start;
}
/* SECTION:service-content END */

/* SECTION:content-img START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L827-844 verbatim port.
   Iron Rule 51: .content-img + .content-img-grid for inline service-page imagery. */
.content-img {
  position: relative;
  width: 100%; border-radius: 6px; margin: 28px 0;
  overflow: hidden;
}
.content-img img {
  width: 100%; height: 320px; object-fit: cover;
  transition: transform 0.5s;
}
.content-img:hover img { transform: scale(1.03); }
/* Badge pill on .content-img blocks (rendered by rfmwpe_image_badge widget
   with show_badge=yes and badge_primary='Before'/'After'). Top-left corner,
   gold pill, uppercase. */
.content-img-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center;
  padding: 6px 14px; background: var(--gold); color: var(--navy);
  border-radius: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.content-img-badge span:not(:first-child) { margin-left: 6px; }
.content-img-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 28px 0;
}
.content-img-grid__item {
  position: relative; margin: 0; overflow: hidden; border-radius: 6px;
}
.content-img-grid img {
  width: 100%; height: 240px; object-fit: cover; border-radius: 6px;
  transition: transform 0.5s;
  display: block;
}
.content-img-grid img:hover { transform: scale(1.03); }
.content-img-grid__item[data-badge]::before {
  content: attr(data-badge);
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; background: var(--gold); color: var(--navy);
  border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* SECTION:content-img END */

/* SECTION:content-split START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L930-943 verbatim port.
   Iron Rule 51: .content-split (2-col grid, .reverse uses dir:rtl trick).
   Live widget (omg_content_split) emits mockup BEM verbatim, no bridge needed. */
.content-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; margin: 48px 0;
}
.content-split.reverse { direction: rtl; }
.content-split.reverse > * { direction: ltr; }
.content-split-img { border-radius: 6px; overflow: hidden; }
.content-split-img img { width: 100%; height: 360px; object-fit: cover; transition: transform 0.5s; }
.content-split-img:hover img { transform: scale(1.03); }
.content-split-text h3 {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  color: var(--navy); margin-bottom: 12px;
}
.content-split-text p { font-size: 15px; line-height: 1.8; color: var(--gray-dark); margin-bottom: 12px; }
/* SECTION:content-split END */

/* SECTION:sidebar-form-dark — REMOVED. Form styling lives in the Elementor
   Library template "OMG Global Lead Form" via the form widget's own design
   controls (label color, field bg, button colors). Edit there, not here. */

/* SECTION:responsive START */
@media (max-width: 1100px) {
  .container { padding: 0 40px; }
  #omg-footer-container { padding: 0 40px; }
  .footer-top,
  #omg-footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Hamburger takes over at 1024, not 768. Between the two the desktop links were
   cramped to the point of colliding with the phone cluster. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .omg-navbar-mm__link { display: none; }
  .omg-navbar-mm__mega { display: none; }
  .omg-navbar-mm__has-sub { display: none; }
  .nav-hamburger,
  .omg-navbar-mm__hamburger { display: flex; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  #omg-footer-container { padding: 0 20px; }

  #top-bar,
  #omg-top-bar { padding: 0 20px; }
  .top-bar-left .hide-mobile,
  #omg-top-bar-left .hide-mobile { display: none; }
  .top-bar-promo { display: none; }
  .top-bar-reviews { display: none; }

  #navbar,
  #omg-navbar { padding: 0 20px; }

  .footer-top,
  #omg-footer-top { grid-template-columns: 1fr; }

  #mobile-cta-bar,
  .mobile-cta { display: block; }
  .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; }
  body { padding-bottom: 62px; }

  .float-cta { display: none; }
}

@media (max-width: 480px) {
  /* chrome-only - body section overrides live elsewhere */
}
/* SECTION:responsive END */

/* SECTION:service-pages-responsive START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L1004-1014, L1129-1130, L1162.
   Responsive overrides for service-page body blocks (page-hero, service-content,
   content-split). Kept in its own SECTION block per scope instructions: do not
   modify chrome SECTION:responsive. */
@media (max-width: 1100px) {
  .content-split { grid-template-columns: 1fr; gap: 24px; }
  .content-split.reverse { direction: ltr; }
  .service-content-inner { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
}

@media (max-width: 768px) {
  .content-img-grid { grid-template-columns: 1fr; }
  .content-split-img img { height: 240px; }
  .page-hero { padding: 140px 0 60px; }
}
/* SECTION:service-pages-responsive END */

/* SECTION:contact-form START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L985-1002 verbatim port.
   Iron Rule 51: contact-form-section padding/grid + contact-info-card with hover
   gold border + 48x48 round gold-tint icon + label/val typography. */
.contact-form-section { padding: calc(var(--total-header) + 60px) 0 80px; }
.contact-form-section__h1 {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500; line-height: 1.15; color: var(--navy);
  text-align: center; margin: 0 0 40px;
}
/* gold-dark, not gold: --gold on white is 2.35:1 and this heading is large text
   needing 3:1. --gold-dark measures 3.26:1. */
.contact-form-section__h1 em { font-style: italic; color: var(--gold-dark); }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info-card {
  display: flex; gap: 16px; padding: 24px; background: var(--off-white);
  border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); margin-bottom: 16px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.contact-info-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.contact-info-icon {
  width: 48px; height: 48px; background: rgba(197,165,90,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background-repeat: no-repeat; background-position: center;
  background-size: 22px 22px;
}
.contact-info-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 2; }
/* SVGs as background-image so rfmwpe_html sanitization can't strip them.
   Stroke color matches --gold (#C5A55A) hard-coded since data-URIs can't read CSS vars. */
.contact-info-icon--phone { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A55A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
.contact-info-icon--pin { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A55A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.contact-info-icon--clock { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A55A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.contact-info-icon--social { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A55A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><line x1='8.59' y1='13.51' x2='15.42' y2='17.49'/><line x1='15.41' y1='6.51' x2='8.59' y2='10.49'/></svg>"); }
.contact-info-socials {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
}
.contact-info-socials a {
  display: inline-block;
  width: 32px; height: 32px; border-radius: 50%;
  background-color: rgba(197, 165, 90, 0.10);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.contact-info-socials a:hover {
  transform: translateY(-2px);
  /* gold-dark fill on hover for the icon (data URI re-set below) */
}
/* Icon SVGs as data URIs (gold #C5A55A) — kses sanitization strips inline
   <svg>, so background-image is the only reliable way to render them. */
.contact-info-socials .is-facebook { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A55A'><path d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z'/></svg>"); }
.contact-info-socials .is-instagram { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A55A'><path d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.81.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.81-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.81-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.81.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.13 1.39-.67.67-1.08 1.34-1.39 2.13C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.39 2.13.67.67 1.34 1.08 2.13 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.31 1.46-.72 2.13-1.39.67-.67 1.08-1.34 1.39-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.39-2.13-.67-.67-1.34-1.08-2.13-1.39-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 12 18.16 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 12 8a4 4 0 0 1 0 8zm6.41-10.4a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/></svg>"); }
.contact-info-socials .is-youtube { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A55A'><path d='M23.5 6.2c-.3-1-1-1.8-2-2.1C19.7 3.6 12 3.6 12 3.6s-7.7 0-9.5.5c-1 .3-1.7 1.1-2 2.1C0 8 0 12 0 12s0 4 .5 5.8c.3 1 1 1.8 2 2.1 1.8.5 9.5.5 9.5.5s7.7 0 9.5-.5c1-.3 1.7-1.1 2-2.1.5-1.8.5-5.8.5-5.8s0-4-.5-5.8zM9.6 15.6V8.4l6.4 3.6-6.4 3.6z'/></svg>"); }
.contact-info-socials .is-tiktok { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C5A55A'><path d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.85a8.16 8.16 0 0 0 4.77 1.52V6.93a4.85 4.85 0 0 1-1.84-.24z'/></svg>"); }
/* gray-dark, not gray: #888 on --off-white is 3.39:1 at 11px, under the 4.5:1
   small-text floor. #555 measures 7.1:1. */
.contact-info-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-dark); margin-bottom: 4px; }
.contact-info-val { font-size: 15px; font-weight: 500; color: var(--navy); }
.contact-info-val a { color: var(--navy); transition: color 0.3s; }
.contact-info-val a:hover { color: var(--gold-dark); } /* WCAG AA on white */
.contact-info-body { flex: 1; }
.contact-map-placeholder { min-height: 1px; }
/* SECTION:contact-form END */

/* SECTION:contact-map START */
/* Full-width Google Maps embed between #contact-form and #final-cta. */
.contact-map-section { padding: 80px 0; background: #fff; }
.contact-map__embed {
  position: relative; overflow: hidden; border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,57,89,0.12);
  background: var(--off-white);
}
.contact-map__embed iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 768px) {
  .contact-map__embed iframe { height: 360px; }
}

/* Click-to-load facade. Google's embed drops third-party cookies (NID,
   _GRECAPTCHA) the instant the iframe mounts, so we show this button and
   inject the real iframe only on click. Shared by contact + service-area maps;
   main.js binds [data-omg-map-load]. */
.omg-map-facade {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 460px; padding: 24px; text-align: center;
  background: var(--off-white); border: 1px solid rgba(0,0,0,0.08);
  color: var(--navy); font-family: inherit; transition: border-color 0.3s, transform 0.3s;
}
.omg-map-facade:hover { border-color: var(--gold); transform: translateY(-1px); }
.omg-map-facade__icon { width: 40px; height: 40px; color: var(--gold-dark); }
.omg-map-facade__label { font-size: 17px; font-weight: 600; }
.omg-map-facade__sub { font-size: 14px; color: var(--gray-dark); }
.omg-map-facade__note { font-size: 12px; color: var(--gray-dark); }
@media (max-width: 768px) {
  .omg-map-facade { height: 360px; }
}
/* SECTION:contact-map END */

/* SECTION:contact-form-textarea START */
/* Extension to SECTION:sidebar-form-dark covering the textarea field added
   to omg_lead_form for the /contact/ form variant. Mirrors the input/select
   declaration block (omg-global.css SECTION:sidebar-form-dark). */
.hero-form-wrap.is-dark .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid rgba(255,255,255,0.15); border-radius: 3px;
  font-family: var(--font-body); font-size: 14px; color: #fff;
  background: rgba(255,255,255,0.08); transition: border-color 0.2s;
  resize: vertical; min-height: 110px;
}
.hero-form-wrap.is-dark .form-group textarea::placeholder { color: rgba(255,255,255,0.4); }
.hero-form-wrap.is-dark .form-group textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.12); }
/* SECTION:contact-form-textarea END */

/* SECTION:process-page-step START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L960-983 verbatim port.
   Iron Rule 51: long-form 5-step layout for /process/. Each step is a 1fr 1fr
   grid; .reverse uses dir:rtl trick (mirrors .content-split). 56x56 gold round
   number circle with Playfair 700 24px navy text. */
.process-page-steps { padding: 80px 0; }
.process-page-step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; padding: 60px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.process-page-step:last-child { border-bottom: none; }
.process-page-step.reverse { direction: rtl; }
.process-page-step.reverse > * { direction: ltr; }
.process-page-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--gold);
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: var(--navy); margin-bottom: 16px;
}
.process-page-step h3 {
  font-family: var(--font-display); font-size: 28px; font-weight: 500;
  color: var(--navy); margin-bottom: 12px;
}
.process-page-step p { font-size: 15px; line-height: 1.8; color: var(--gray-dark); margin-bottom: 12px; }
.process-page-img { border-radius: 6px; overflow: hidden; }
.process-page-img img { width: 100%; height: 380px; object-fit: cover; transition: transform 0.5s; }
.process-page-img:hover img { transform: scale(1.03); }
/* SECTION:process-page-step END */

/* SECTION:secondary-pages-responsive START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L1004-1015 (the
   secondary-page subset: contact-form-grid, process-page-step). */
@media (max-width: 1100px) {
  .contact-form-grid { grid-template-columns: 1fr; }
  .process-page-step { grid-template-columns: 1fr; gap: 24px; }
  .process-page-step.reverse { direction: ltr; }
}

@media (max-width: 768px) {
  .process-page-step-num { width: 44px; height: 44px; font-size: 18px; }
  .process-page-img img { height: 240px; }
}
/* SECTION:secondary-pages-responsive END */

/* SECTION:gallery-page START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L785-824 (verbatim port).
   Used by: gallery.html .gallery-page (off-white masonry section).
   Wave 5d additions for /gallery/ page — distinct from #gallery (homepage). */
.gallery-page { padding: 80px 0; background: var(--off-white); }
.gallery-filters {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap;
}
.gallery-filter-btn {
  padding: 10px 24px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 50px;
  background: var(--white); color: var(--gray-dark); font-family: var(--font-body);
  font-size: 13px; font-weight: 500; letter-spacing: 0.5px; cursor: pointer;
  transition: all 0.3s;
}
.gallery-filter-btn:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-1px); } /* WCAG AA on white */
.gallery-filter-btn.active {
  background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 700;
}
.gallery-masonry {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
/* Uniform tile heights: same 280px height for every cell.
   Tall modifier kept on the img selector for back-compat but height is fixed. */
.gallery-masonry-item {
  border-radius: 6px; overflow: hidden; position: relative; cursor: pointer;
  background: var(--off-white);
}
a.gallery-masonry-item { display: block; text-decoration: none; color: inherit; }
.gallery-masonry-item img {
  width: 100%; height: 280px; object-fit: cover; display: block;
  transition: transform 0.5s;
}
.gallery-masonry-item:hover img { transform: scale(1.05); }
.gallery-masonry-item.tall img { height: 280px; }
.gallery-masonry-item-overlay {
  position: absolute; inset: 0; background: rgba(0,57,89,0.5); opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: opacity 0.3s; color: #fff; pointer-events: none;
  text-align: center; padding: 12px;
}
.gallery-masonry-item:hover .gallery-masonry-item-overlay { opacity: 1; }
.gallery-masonry-item-overlay span {
  font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
}
.gallery-masonry-item-overlay small {
  font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.85);
}
.gallery-masonry-item[data-category] { transition: opacity 0.4s, transform 0.4s; }
.gallery-masonry-item.hidden { opacity: 0; transform: scale(0.8); position: absolute; pointer-events: none; }

/* Before/After mini-slider on a gallery card. Reuses the .ba-slider drag-handle
   markup so main.js bindSlider() picks it up automatically. */
.gallery-masonry-item.is-ba { cursor: grab; }
.gallery-masonry-item.is-ba .ba-slider {
  position: relative; overflow: hidden; height: 280px; user-select: none;
}
.gallery-masonry-item.is-ba .ba-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: none;
}
.gallery-masonry-item.is-ba .ba-slider-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.gallery-masonry-item.is-ba .ba-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold);
  transform: translateX(-50%); pointer-events: none; z-index: 3;
}
.gallery-masonry-item.is-ba .ba-slider-handle::after {
  content: '↔'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; background: var(--gold); color: var(--navy);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.gallery-masonry-item.is-ba .ba-slider-label {
  position: absolute; bottom: 12px; padding: 4px 10px; background: rgba(0,0,0,0.7); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 2px; z-index: 4;
}
.gallery-masonry-item.is-ba .ba-slider-label--before { left: 12px; }
.gallery-masonry-item.is-ba .ba-slider-label--after { right: 12px; background: var(--gold); color: var(--navy); }

@media (max-width: 768px) {
  .gallery-masonry { grid-template-columns: 1fr 1fr; }
  .gallery-masonry-item img,
  .gallery-masonry-item.tall img { height: 200px; }
  .gallery-masonry-item.is-ba .ba-slider { height: 200px; }
}
/* SECTION:gallery-page END */

/* SECTION:lightbox START */
/* Custom vanilla-JS lightbox for the gallery + before/after viewer.
   Built in main.js (omg-lightbox.js block). Triggered by clicks on
   .omg-lightbox-trigger anchors generated in sec-gallery-page.php. */
.omg-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Form-lightbox variant: close (×) button sits at the top-right CORNER of the
   form itself, not floating in the dark overlay. */
.omg-lightbox.is-form-lightbox .omg-lightbox__stage { max-width: 540px; }
.omg-lightbox.is-form-lightbox .omg-lightbox__form-host { position: relative; }
.omg-lightbox.is-form-lightbox .omg-lightbox__close {
  top: 14px; right: 14px; left: auto;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.12); color: #fff;
  position: absolute; transform: none;
  z-index: 5; font-size: 20px;
}
.omg-lightbox.is-form-lightbox .omg-lightbox__close:hover { background: var(--gold); color: var(--navy); }
.omg-lightbox.is-open { opacity: 1; pointer-events: auto; }
.omg-lightbox__stage {
  position: relative; max-width: min(92vw, 1200px); max-height: 88vh;
  width: 100%;
}
.omg-lightbox__inner {
  position: relative; max-width: 100%; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.omg-lightbox__inner img {
  max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 4px;
  display: block;
}
.omg-lightbox__inner .ba-slider {
  position: relative; overflow: hidden; max-width: 100%; width: 100%;
  aspect-ratio: 16 / 9; max-height: 88vh; user-select: none; border-radius: 4px;
}
.omg-lightbox__inner .ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-height: none; }
.omg-lightbox__inner .ba-slider-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.omg-lightbox__inner .ba-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold);
  transform: translateX(-50%); pointer-events: none; z-index: 3;
}
.omg-lightbox__inner .ba-slider-handle::after {
  content: '↔'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 48px; height: 48px;
  background: var(--gold); color: var(--navy); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.omg-lightbox__inner .ba-slider-label {
  position: absolute; bottom: 16px; padding: 6px 14px; background: rgba(0,0,0,0.7); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 3px; z-index: 4;
}
.omg-lightbox__inner .ba-slider-label--before { left: 16px; }
.omg-lightbox__inner .ba-slider-label--after { right: 16px; background: var(--gold); color: var(--navy); }
.omg-lightbox__caption {
  position: absolute; bottom: -42px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.3px;
}
/* z-index is load-bearing, not decoration. .omg-lightbox__inner is
   position:relative and sits AFTER close/prev in the DOM, so at z-index:auto it
   painted over both and swallowed their clicks: the X and the previous arrow
   were unclickable (only "next", which comes after inner, still worked).
   Backdrop-click still closed, which is what masked it. */
.omg-lightbox__close, .omg-lightbox__prev, .omg-lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; transition: background 0.2s;
  z-index: 2;
}
.omg-lightbox__close:hover, .omg-lightbox__prev:hover, .omg-lightbox__next:hover { background: var(--gold); color: var(--navy); }
/* Main gallery lightbox — close X sits in the top-LEFT corner of the viewport
   (per user preference). prev/next arrows still flank the image edges. */
.omg-lightbox__close { top: 24px; left: 24px; right: auto; transform: none; }
.omg-lightbox__prev { left: 24px; }
.omg-lightbox__next { right: 24px; }
@media (max-width: 768px) {
  .omg-lightbox__close { top: 12px; left: 12px; right: auto; }
  .omg-lightbox__prev { left: 8px; width: 40px; height: 40px; }
  .omg-lightbox__next { right: 8px; width: 40px; height: 40px; }
}
/* SECTION:lightbox END */

/* SECTION:legal-pages START */
/* Privacy / Terms pages — simple text container with hero-style spacing. */
.page-id-legal .entry-content,
.legal-page-wrap { padding: 140px 0 80px; }
.legal-page {
  max-width: 760px; margin: 0 auto; padding: 0 24px;
  font-family: var(--font-body); color: var(--gray-dark);
  font-size: 16px; line-height: 1.75;
}
.legal-page h1 { font-family: var(--font-display); font-size: 44px; font-weight: 500; color: var(--navy); margin-bottom: 28px; }
.legal-page h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--navy); margin: 40px 0 14px; }
.legal-page h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 32px 0 10px; letter-spacing: 0.2px; }
.legal-page p { margin-bottom: 16px; }
.legal-page ul { margin: 12px 0 20px; padding-left: 24px; }
.legal-page ul li { margin-bottom: 8px; }
.legal-page a { color: var(--gold-text); text-decoration: underline; transition: color 0.3s; }
.legal-page a:hover { color: var(--navy); }
.legal-page strong { color: var(--navy); }
/* SECTION:legal-pages END */

/* SECTION:faqs-page START */
/* Standalone /faqs/ page — reuses .faq-item styles from homepage FAQ section. */
.faqs-page-wrap { padding: 140px 0 80px; }
.faqs-page { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.faqs-page__heading {
  font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px);
  font-weight: 500; line-height: 1.15; color: var(--navy);
  text-align: center; margin: 0 0 18px;
}
.faqs-page__heading em {
  font-style: italic; color: var(--gold-text); font-weight: 400;
}
.faqs-page__lede {
  font-family: var(--font-body); font-size: 16px; line-height: 1.75;
  color: var(--gray-dark); text-align: center; max-width: 640px;
  margin: 0 auto 48px;
}
.faqs-page__lede a { color: var(--gold-text); text-decoration: underline; transition: color 0.3s; }
.faqs-page__lede a:hover { color: var(--navy); }
.faqs-page__list {
  background: #fff; border: 1px solid var(--gray-bg); border-radius: 12px;
  overflow: hidden;
}
.faqs-page__list .faq-item { padding: 0 24px; }
.faqs-page__list .faq-btn { padding: 22px 0; }
.faqs-page__list .faq-answer-inner { padding: 0 0 22px; }
@media (max-width: 600px) {
  .faqs-page-wrap { padding: 100px 0 60px; }
  .faqs-page__list .faq-item { padding: 0 18px; }
}
/* SECTION:faqs-page END */

/* SECTION:placeholder-pages START */
/* Used by /services/ and /blog/ stub pages while content is being authored. */
.placeholder-page-wrap { padding: 140px 0 80px; }
.placeholder-page {
  max-width: 760px; margin: 0 auto; padding: 0 24px;
  font-family: var(--font-body); color: var(--gray-dark);
  font-size: 16px; line-height: 1.75; text-align: left;
}
.placeholder-page h1 {
  font-family: var(--font-display); font-size: clamp(34px, 4vw, 50px);
  font-weight: 500; line-height: 1.15; color: var(--navy);
  text-align: center; margin: 0 0 24px;
}
.placeholder-page p { margin: 0 0 18px; }
.placeholder-page__list { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 14px; }
.placeholder-page__list li {
  background: var(--off-white); border: 1px solid var(--gray-bg);
  border-radius: 8px; padding: 16px 20px; transition: transform 0.3s, border-color 0.3s;
}
.placeholder-page__list li:hover { transform: translateY(-2px); border-color: var(--gold); }
.placeholder-page__list a { color: var(--navy); text-decoration: none; display: block; }
.placeholder-page__list strong { color: var(--gold-text); margin-right: 6px; }
.placeholder-page .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  border-radius: 3px; text-decoration: none; transition: background 0.3s, transform 0.3s;
}
.placeholder-page .btn-primary:hover { background: var(--gold-dark); transform: translateY(-2px); }
@media (max-width: 600px) { .placeholder-page-wrap { padding: 100px 0 60px; } }
/* SECTION:placeholder-pages END */

/* SECTION:services-page START */
.services-page-wrap { padding: 140px 0 80px; }
.services-page {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  font-family: var(--font-body); color: var(--gray-dark);
}
.services-page__heading {
  font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500; line-height: 1.15; color: var(--navy);
  text-align: center; margin: 0 0 18px;
}
.services-page__heading em { font-style: italic; color: var(--gold-text); font-weight: 400; }
.services-page__lede {
  font-size: 17px; line-height: 1.7; max-width: 720px;
  margin: 0 auto 56px; text-align: center;
}
.services-page__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px;
}
.services-page__card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gray-bg); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.services-page__card-cover {
  position: absolute; inset: 0; z-index: 2;
  text-indent: -9999px; overflow: hidden;
}
.services-page__card:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.services-page__card-image {
  width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
}
.services-page__card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.services-page__card-body h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--navy); margin: 0;
}
.services-page__card-body p { font-size: 14px; line-height: 1.6; margin: 0; flex-grow: 1; }
.services-page__card-link {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--gold-text); margin-top: 8px;
  transition: color 0.3s;
}
.services-page__card:hover .services-page__card-link { color: var(--navy); }
.services-page__cta-row { text-align: center; margin: 0; }
@media (max-width: 900px) {
  .services-page__grid { grid-template-columns: 1fr; }
}
/* SECTION:services-page END */

/* SECTION:ba-section START */
/* Dedicated Before/After section appended to /gallery/. */
.ba-section {
  margin: 32px 0 24px; padding: 40px 24px;
  background: var(--off-white); border-radius: 12px; scroll-margin-top: 140px;
}
.ba-section__heading {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px);
  font-weight: 500; color: var(--navy);
  text-align: center; margin: 0 0 12px;
}
.ba-section__heading em { font-style: italic; color: var(--gold-text); font-weight: 400; }
.ba-section__lede {
  font-size: 16px; line-height: 1.7; max-width: 680px;
  text-align: center; margin: 0 auto 40px; color: var(--gray-dark);
}
.ba-section__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  grid-auto-rows: max-content;
}
/* Elementor wraps each child in .elementor-element / .elementor-widget-container — flatten so the masonry items themselves are the grid children with the aspect-ratio cap. */
.ba-section__grid > .elementor-element,
.ba-section__grid > .elementor-element > .elementor-widget-container { display: contents; }
.ba-section__grid .gallery-masonry-item { aspect-ratio: 4 / 3; }
.ba-section__grid .ba-slider,
.ba-section__grid .gallery-masonry-item.is-ba .ba-slider {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.ba-section__grid .ba-slider > img,
.ba-section__grid .ba-slider-before img,
.ba-section__grid .gallery-masonry-item.is-ba .ba-slider img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 600px) {
  .ba-section__grid { grid-template-columns: 1fr; }
  .ba-section { padding: 40px 16px; }
}
.gallery-filter-btn--link {
  display: inline-flex; align-items: center; text-decoration: none;
  /* Inherits other .gallery-filter-btn styling */
}
/* SECTION:ba-section END */

/* SECTION:jobs-page START */
/* /jobs/ parent + /jobs/<slug>/ sub-pages. */
.jobs-page-wrap { padding: 140px 0 80px; }
.jobs-page {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  font-family: var(--font-body); color: var(--gray-dark);
}
.jobs-page__heading {
  font-family: var(--font-display); font-size: clamp(36px, 4.2vw, 54px);
  font-weight: 500; line-height: 1.15; color: var(--navy);
  text-align: center; margin: 0 0 18px;
}
.jobs-page__heading em { font-style: italic; color: var(--gold-text); font-weight: 400; }
.jobs-page__lede {
  font-size: 16px; line-height: 1.75; color: var(--gray-dark);
  text-align: center; max-width: 720px; margin: 0 auto 48px;
}
.jobs-page__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px;
}
.jobs-card {
  background: #fff; border: 1px solid var(--gray-bg); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.jobs-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.jobs-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--navy); margin: 0; }
.jobs-card__desc { font-size: 14px; line-height: 1.65; color: var(--gray-dark); margin: 0; flex-grow: 1; }
.jobs-card__link {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--gold-text); text-decoration: none; transition: color 0.3s;
}
.jobs-card__link:hover { color: var(--navy); }
.jobs-page__contact {
  text-align: center; padding: 24px; background: var(--off-white);
  border-radius: 10px; border: 1px solid var(--gray-bg);
}
.jobs-page__contact p { margin: 4px 0; font-size: 15px; color: var(--gray-dark); }
.jobs-page__contact a { color: var(--gold-text); text-decoration: none; font-weight: 600; }
.jobs-page__contact a:hover { color: var(--navy); }

/* Job detail sub-page */
.job-detail-wrap { padding: 140px 0 80px; }
.job-detail {
  max-width: 820px; margin: 0 auto; padding: 0 24px;
  font-family: var(--font-body); color: var(--gray-dark);
  font-size: 16px; line-height: 1.75;
}
.job-detail__breadcrumb { font-size: 13px; margin-bottom: 18px; }
.job-detail__breadcrumb a { color: var(--gold-text); text-decoration: none; transition: color 0.3s; }
.job-detail__breadcrumb a:hover { color: var(--navy); }
.job-detail__title {
  font-family: var(--font-display); font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 500; line-height: 1.15; color: var(--navy); margin: 0 0 24px;
}
.job-detail__summary p { margin: 0 0 16px; }
.job-detail__sub {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--navy); margin: 32px 0 12px;
}
.job-detail__list { list-style: disc; padding-left: 22px; margin: 0 0 18px; }
.job-detail__list li { margin-bottom: 8px; }
.job-detail__form-anchor { margin-top: 48px; }

/* Apply form (rendered by [omg_jobs_form] shortcode) */
.omg-jobs-form-wrap {
  background: var(--off-white); border: 1px solid var(--gray-bg);
  border-radius: 10px; padding: 32px 28px; max-width: 100%;
}
.omg-jobs-form__heading {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  color: var(--navy); margin: 0 0 8px; text-align: center;
}
.omg-jobs-form__lede {
  font-size: 14px; line-height: 1.65; color: var(--gray-dark);
  text-align: center; margin: 0 0 24px;
}
.omg-jobs-form .form-group { margin-bottom: 14px; }
.omg-jobs-form .form-group label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.omg-jobs-form .form-group input,
.omg-jobs-form .form-group textarea {
  width: 100%; padding: 7px 10px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--gray-bg); border-radius: 4px;
  background: #fff; color: var(--black);
  font-family: var(--font-body); transition: border-color 0.3s, box-shadow 0.3s;
}
.omg-jobs-form .form-group input::placeholder,
.omg-jobs-form .form-group textarea::placeholder { color: var(--gray); font-size: 10px; }
.omg-jobs-form .form-group input:focus,
.omg-jobs-form .form-group textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
}
.omg-jobs-form .form-submit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  border: none; border-radius: 3px; cursor: pointer;
  transition: background 0.3s, transform 0.3s; margin-top: 8px;
}
.omg-jobs-form .form-submit-btn:hover:not(:disabled) { background: var(--gold-dark); transform: translateY(-2px); }
.omg-jobs-form .form-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.omg-jobs-form .form-success {
  background: #f0f8f0; border: 1px solid #4caf50; padding: 16px; border-radius: 6px; color: #1e7e1e;
  font-size: 14px; line-height: 1.55;
}
.omg-jobs-form .form-error {
  background: #fdf0f0; border: 1px solid #d32f2f; padding: 12px; border-radius: 4px;
  color: #c62828; font-size: 13px; line-height: 1.55; margin-top: 12px;
}

@media (max-width: 768px) {
  .jobs-page-wrap, .job-detail-wrap { padding: 100px 0 60px; }
  .jobs-page__grid { grid-template-columns: 1fr; }
}
/* SECTION:jobs-page END */

/* SECTION:insurance-claims-page START */
.ic-page-wrap { padding: 140px 0 80px; }
.ic-page {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  font-family: var(--font-body); color: var(--gray-dark);
  font-size: 16px; line-height: 1.75;
}
.ic-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 12px;
}
.ic-eyebrow::before { content: ''; width: 32px; height: 1.5px; background: var(--gold); display: inline-block; }
.ic-hero { text-align: center; margin-bottom: 64px; }
.ic-hero__heading {
  font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500; line-height: 1.15; color: var(--navy); margin: 0 0 20px;
}
.ic-hero__heading em { font-style: italic; color: var(--gold-text); font-weight: 400; }
.ic-hero__lede { font-size: 17px; line-height: 1.7; max-width: 760px; margin: 0 auto 28px; }
.ic-hero__cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 0; }
.ic-cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  border-radius: 3px; text-decoration: none; transition: background 0.3s, transform 0.3s;
}
.ic-cta-primary:hover { background: var(--gold-dark); transform: translateY(-2px); }
.ic-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; background: transparent; color: var(--navy);
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  border-radius: 3px; text-decoration: none; border: 1px solid rgba(0,57,89,0.18);
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.ic-cta-secondary:hover { background: var(--off-white); border-color: var(--navy); transform: translateY(-2px); }
.ic-section { padding: 48px 0; max-width: 880px; margin: 0 auto; }
.ic-section--alt {
  max-width: 100%; padding: 56px 24px; margin-left: -24px; margin-right: -24px;
  background: var(--off-white); border-radius: 12px;
}
.ic-section--alt > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.ic-section--alt > .ic-damage-grid { max-width: 1080px; }
.ic-section__heading {
  font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500; color: var(--navy); margin: 0 0 20px; line-height: 1.2;
}
.ic-section p { margin: 0 0 16px; }
.ic-section strong { color: var(--navy); }
.ic-damage-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px;
}
.ic-damage-card {
  background: #fff; border: 1px solid var(--gray-bg); border-radius: 8px;
  padding: 22px; transition: transform 0.3s, border-color 0.3s;
}
.ic-damage-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.ic-damage-card h3 {
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  color: var(--navy); margin: 0 0 8px;
}
.ic-damage-card p { font-size: 14px; line-height: 1.6; margin: 0; }
.ic-process { list-style: none; counter-reset: ic-step; padding: 0; margin: 24px 0 0; }
.ic-process li {
  counter-increment: ic-step; padding: 0 0 18px 56px; position: relative;
  border-bottom: 1px solid var(--gray-bg); margin-bottom: 18px;
  font-size: 16px; line-height: 1.7;
}
.ic-process li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ic-process li::before {
  content: counter(ic-step); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--gold);
  color: var(--navy); font-family: var(--font-display); font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ic-checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.ic-checklist li {
  position: relative; padding: 12px 0 12px 32px;
  border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 15px; line-height: 1.65;
}
.ic-checklist li:last-child { border-bottom: none; }
.ic-checklist li::before {
  content: '\2713'; position: absolute; left: 4px; top: 12px;
  color: var(--gold); font-weight: 700; font-size: 16px;
}
/* Match home #final-cta: gold bg, navy text. */
.ic-final-cta {
  text-align: center; padding: 56px 24px;
  background: var(--gold); color: var(--navy);
  border-radius: 12px; margin-top: 24px;
  position: relative; overflow: hidden;
}
.ic-final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,57,89,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.ic-final-cta__heading {
  font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 500; color: var(--navy); margin: 0 0 14px; position: relative;
}
.ic-final-cta p { color: rgba(0,57,89,0.7); margin: 0 0 24px; position: relative; font-size: 16px; font-weight: 300; }
.ic-final-cta__buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 0; position: relative; }
.ic-final-cta .ic-cta-primary {
  background: var(--navy); color: #fff;
}
.ic-final-cta .ic-cta-primary:hover { background: var(--navy-dark); }
.ic-final-cta .ic-cta-secondary {
  border-color: var(--navy); color: var(--navy); background: transparent;
}
.ic-final-cta .ic-cta-secondary:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

@media (max-width: 768px) {
  .ic-page-wrap { padding: 100px 0 60px; }
  .ic-damage-grid { grid-template-columns: 1fr; }
  .ic-section--alt { padding: 40px 20px; }
  .ic-process li { padding-left: 48px; }
  .ic-process li::before { width: 32px; height: 32px; font-size: 15px; }
}
/* SECTION:insurance-claims-page END */

/* SECTION:reviews-page START */
/* Mockup source: reviews.html L113-253. The .why-grid wrapper is reused around
   testimonial cards (4-col responsive). Existing .why-grid rule (line 1157) and
   .testimonial-card__* BEM rules (lines 1061-1096) cover the bulk; this block
   only adds the missing __locale alias, a 4-col override on the testimonial
   grid widget, and a reviews-no-sidebar override that makes service-content-inner
   render as a single column (no sidebar form on reviews page). */
.testimonial-card__locale {
  font-size: 12px; color: var(--gray);
}
.service-content-inner.reviews-no-sidebar { grid-template-columns: 1fr; }
/* When the rfmwpe_testimonial_grid widget renders inside service-main, expose
   its inner grid as a 4-col grid. component_name=testimonial-card so the
   wrapper is .testimonial-card.testimonial-card--cols-4. */
/* On /reviews/, the OUTER `.testimonial-card.testimonial-card--cols-4` is just
   a wrapper container — strip the card styling (bg/padding/border/hover) so
   it doesn't look like a single card around the grid. */
.service-main .testimonial-card.testimonial-card--cols-4 {
  background: transparent; padding: 0; border: 0;
}
.service-main .testimonial-card.testimonial-card--cols-4:hover {
  border: 0; transform: none; box-shadow: none;
}
.service-main .testimonial-card.testimonial-card--cols-4::before { content: none; }

.service-main .testimonial-card.testimonial-card--cols-4 > .testimonial-card__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 24px 0 32px;
}
.service-main .testimonial-card.testimonial-card--cols-4 > .testimonial-card__rating { display: none; }

/* Each `.testimonial-card__card` IS a card now: white bg + border + padding +
   gold-accent hover lift. Decorative gold quote glyph in the top-left corner
   matches the original single-card treatment. */
.service-main .testimonial-card.testimonial-card--cols-4 .testimonial-card__card {
  position: relative;
  background: var(--white);
  border-radius: 6px;
  padding: 32px 28px 26px;
  border: 1px solid rgba(0, 57, 89, 0.08);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; flex-direction: column;
}
.service-main .testimonial-card.testimonial-card--cols-4 .testimonial-card__card::before {
  content: '\201C';
  position: absolute; top: 14px; left: 22px;
  font-family: var(--font-display); font-size: 64px; line-height: 1;
  color: var(--gold); opacity: 0.18;
  pointer-events: none;
}
.service-main .testimonial-card.testimonial-card--cols-4 .testimonial-card__card:hover {
  border-color: rgba(197, 165, 90, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 57, 89, 0.10);
}
.service-main .testimonial-card.testimonial-card--cols-4 .testimonial-card__text {
  position: relative; z-index: 1;
  flex: 1 1 auto;
}

@media (max-width: 1100px) {
  .service-main .testimonial-card.testimonial-card--cols-4 > .testimonial-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .service-main .testimonial-card.testimonial-card--cols-4 > .testimonial-card__grid {
    grid-template-columns: 1fr;
  }
}
/* SECTION:reviews-page END */

/* SECTION:404-page START */
/* Mockup source: R:/OMG Kitchen & Bath/css/styles.css L946-958 (verbatim port).
   Wave 5d addition for /404/ page (Elementor TB single template). */
.page-404 {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px; margin-top: var(--total-header);
}
.page-404 h1 {
  font-family: var(--font-display); font-size: clamp(80px, 12vw, 140px);
  font-weight: 600; color: var(--gold-dark); line-height: 1; margin-bottom: 16px; /* WCAG AA */
}
.page-404 h2 {
  font-family: var(--font-display); font-size: 28px; font-weight: 500;
  color: var(--navy); margin-bottom: 12px;
}
.page-404 p { font-size: 16px; color: var(--gray-dark); margin-bottom: 28px; }
/* SECTION:404-page END */

/* SECTION:about-areas START */
/* /about/ Service Areas + Licensed & Certified — centered pill bubbles + hover cards. */
.about-areas-section { padding: 90px 0 100px; background: var(--white); }
.about-areas-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
.about-areas-inner .service-areas-header { width: 100%; text-align: center; margin: 0 auto 28px; }
.about-areas-inner .cert-header { width: 100%; text-align: center; margin: 80px auto 28px; }
.about-areas-inner .service-areas-header__heading, .about-areas-inner .cert-header__heading { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; line-height: 1.15; color: var(--navy); margin: 8px 0 14px; }
.about-areas-inner .service-areas-header__desc, .about-areas-inner .cert-header__desc { font-size: 16px; line-height: 1.7; color: var(--gray-dark); max-width: 720px; margin: 0 auto; }

/* Locations pill grid (chip-list widget with component_name='locations-pills'). */
.locations-pills { width: 100%; max-width: 980px; margin: 8px auto 0; }
.locations-pills__items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.locations-pills__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(0,57,89,0.06); color: var(--navy);
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  text-decoration: none; transition: background 0.25s, transform 0.25s, box-shadow 0.25s, color 0.25s;
}
.locations-pills__chip::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy); flex-shrink: 0;
}
.locations-pills__chip:hover {
  background: var(--gold); color: var(--navy);
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,57,89,0.12);
}
.locations-pills__chip.is-active { background: var(--navy); color: #fff; }
.locations-pills__chip.is-active::before { background: var(--gold); }

/* "View All Service Areas" — text-link with arrow. */
.about-areas-inner .btn-link,
.about-areas-inner .elementor-widget-rfmwpe_button:has(.btn-link) { width: auto; }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 4px; background: transparent; color: var(--navy);
  font-size: 14px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: none; border: none; transition: color 0.25s, gap 0.25s;
}
.btn-link::after { display: none; }
.btn-link:hover { color: var(--gold-dark); gap: 12px; }
.btn-link svg { width: 16px; height: 16px; }

/* Cert grid: 4 hover cards, same look as Our Values. */
#about-cert-grid { width: 100%; }

@media (max-width: 768px) {
  .about-areas-section { padding: 64px 0 72px; }
  .about-areas-inner .cert-header { margin-top: 56px; }
  .locations-pills__items { gap: 10px; }
  .locations-pills__chip { padding: 9px 16px; font-size: 13px; }
}
/* SECTION:about-areas END */

/* SECTION:blog-page-hero START
   The blog hero uses rfmwpe_section_header on a navy bg. Force white text on
   the heading + desc (defaults are navy, invisible on navy). */
.blog-hero-header__eyebrow { color: var(--gold) !important; }
.blog-hero-header__eyebrow::before { background: var(--gold) !important; }
.blog-hero-header__heading { color: #fff !important; }
.blog-hero-header__heading em,
.blog-hero-header__accent { color: var(--gold) !important; }
.blog-hero-header__desc { color: rgba(255,255,255,0.85) !important; margin-left: auto; margin-right: auto; }
.blog-hero-header { text-align: center; }
.blog-hero-header [class$="__desc"] { margin-left: auto; margin-right: auto; }
/* CTA section heading (same component pattern) */
.blog-cta-header__heading { color: #fff !important; }
.blog-cta-header__heading em,
.blog-cta-header__accent { color: var(--gold) !important; }
.blog-cta-header__desc { color: rgba(255,255,255,0.85) !important; }
.blog-cta-header__eyebrow { color: var(--gold) !important; }
.blog-cta-header__eyebrow::before { background: var(--gold) !important; }
.blog-cta-grid {
  display: grid; grid-template-columns: 1fr 460px; gap: 60px; align-items: center;
}
.blog-cta-phone { font-size: 14px; color: rgba(255,255,255,0.85); margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.blog-cta-phone-label { color: rgba(255,255,255,0.7); font-size: 13px; }
.blog-cta-phone-link {
  color: var(--gold); font-family: var(--font-display);
  font-size: 28px; font-weight: 500; letter-spacing: 0.5px; text-decoration: none;
}
.blog-cta-phone-link:hover { color: var(--gold-light); }
@media (max-width: 1100px) {
  .blog-cta-grid { grid-template-columns: 1fr; }
}
/* SECTION:blog-page-hero END */

/* SECTION:blog-index START
   Blog archive (home.php) — navy hero + 3-col card grid + pagination + CTA. */
.omg-blog { background: var(--white); }
.omg-blog__hero {
  background: var(--navy); color: #fff;
  padding: calc(var(--total-header) + 60px) 0 60px;
  text-align: center;
}
.omg-blog__hero .container { max-width: 880px; }
.omg-blog__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px;
}
.omg-blog__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500; line-height: 1.1;
  color: #fff; margin: 0 0 16px;
}
.omg-blog__intro {
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 620px; margin: 0 auto;
}

.omg-blog__body { padding: 80px 0; background: var(--white); }
.omg-blog__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.omg-blog-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.omg-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-color: var(--gold);
}
.omg-blog-card__link {
  position: absolute; inset: 0; z-index: 2;
  text-indent: -9999px; overflow: hidden;
}
.omg-blog-card__image {
  height: 220px;
  background-size: cover; background-position: center;
  background-color: var(--off-white);
}
.omg-blog-card__image--placeholder {
  background: linear-gradient(135deg, var(--off-white), var(--gray-light));
}
.omg-blog-card__body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.omg-blog-card__cat {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold-text);
  margin-bottom: 10px;
}
.omg-blog-card__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500; line-height: 1.25;
  color: var(--navy); margin: 0 0 12px;
}
.omg-blog-card__excerpt {
  font-size: 14px; line-height: 1.65; color: var(--gray-dark);
  margin: 0 0 18px; flex: 1 1 auto;
}
.omg-blog-card__meta {
  font-size: 12px; color: var(--gray);
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
}
.omg-blog-card__meta strong { color: var(--navy); font-weight: 600; }
.omg-blog-card__sep { opacity: 0.4; }
.omg-blog-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold-text);
  transition: color 0.3s, gap 0.3s;
}
.omg-blog-card:hover .omg-blog-card__cta { color: var(--gold-dark); gap: 10px; }

.omg-blog__pagination {
  margin-top: 56px; display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
.omg-blog__pagination a,
.omg-blog__pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 14px;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
  font-size: 13px; font-weight: 600; color: var(--navy);
  text-decoration: none; transition: all 0.3s;
}
.omg-blog__pagination a:hover {
  border-color: var(--gold); background: var(--gold); color: var(--navy);
  transform: translateY(-1px);
}
.omg-blog__pagination span.current {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.omg-blog__empty {
  text-align: center; padding: 60px 0; font-size: 16px; color: var(--gray-dark);
}

@media (max-width: 1100px) {
  .omg-blog__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .omg-blog__hero { padding: calc(var(--total-header) + 32px) 0 40px; }
  .omg-blog__body { padding: 48px 0; }
  .omg-blog__grid { grid-template-columns: 1fr; gap: 24px; }
}
/* SECTION:blog-index END */

/* SECTION:single-post START
   Single blog post template (single-post.php).
   - Hero: 2-col (left = text, right = featured image)
   - Body: 2-col (left = content, right = sticky form)
   - End CTA: reuses #final-cta classes from the rest of the site. */
.omg-single { background: var(--white); }
.omg-single__hero {
  background: var(--navy);
  padding: calc(var(--total-header) + 60px) 0 60px;
  color: #fff;
}
.omg-single__hero .container { max-width: 1280px; }
.omg-single__hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
}
.omg-single__hero-text { text-align: left; }
.omg-single__hero-image { display: flex; justify-content: center; }
.omg-single__hero-img {
  display: block; width: 100%; max-width: 520px; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.omg-single__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  text-decoration: none;
  margin-bottom: 18px;
  transition: gap 0.2s, color 0.2s;
}
.omg-single__back:hover { color: var(--gold-light); gap: 12px; }
.omg-single__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500; line-height: 1.15;
  color: #fff; margin: 0 0 18px;
}
.omg-single__meta {
  font-size: 13px; color: rgba(255,255,255,0.7);
  display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.omg-single__meta strong { color: #fff; font-weight: 600; }
.omg-single__sep { opacity: 0.4; }
/* "All Service Areas" breadcrumb on /service-area/<city>/ pages. Sits at the
   top of the hero, gold uppercase link with hover slide. The wrap container
   sets position:relative so the breadcrumb can absolutely position over the
   navy hero. */
.service-area-hero-wrap { position: relative; }
.service-area-breadcrumb {
  position: absolute;
  top: calc(var(--total-header) + 18px);
  left: 60px; right: 60px;
  z-index: 4;
  pointer-events: none;
}
.service-area-breadcrumb__link {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.service-area-breadcrumb__link:hover { color: var(--gold-light); gap: 12px; }
@media (max-width: 768px) {
  .service-area-breadcrumb { left: 24px; right: 24px; top: calc(var(--total-header) + 12px); }
  .service-area-breadcrumb__link { font-size: 11px; letter-spacing: 1.5px; }
}

/* Service-area map block on the parent /service-area/ page. Sits between
   the hero and the city grid; embedded Google Maps view of the SA metro. */
.service-area-map-section { padding-top: 70px; background: #fff; }
.service-area-map-section .rfm-sh,
.service-area-map-section .service-area-map-header__heading,
.service-area-map-section .service-area-map-header__desc {
  text-align: center;
}
.service-area-map-section .service-area-map-header__desc { max-width: 720px; margin-left: auto; margin-right: auto; }
.service-area-map__embed {
  width: 100%; max-width: 1280px; margin: 36px auto 0;
  position: relative; overflow: hidden; border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,57,89,0.12);
  background: var(--off-white);
}
.service-area-map__embed iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 768px) {
  .service-area-map-section { padding-top: 50px; }
  .service-area-map__embed iframe { height: 360px; }
}

/* Service-area hub grid (parent /service-area/ page). 3-col on desktop,
   2-col tablet, 1-col mobile. Card visual matches the rest of the site:
   white bg + subtle border + gold-accent hover lift + display-font heading. */
.service-area-loop .service-area-list-header__heading,
.service-area-loop .service-area-list-header__desc {
  text-align: center;
}
.service-area-loop .service-area-list-header__desc { max-width: 720px; margin-left: auto; margin-right: auto; }
.service-area-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px; max-width: 1280px; margin: 48px auto 0;
}
.service-area-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 32px 28px 28px;
  background: var(--white);
  border: 1px solid rgba(0,57,89,0.10);
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.service-area-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.service-area-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197,165,90,0.4);
  box-shadow: 0 18px 40px rgba(0,57,89,0.12);
}
.service-area-card:hover::before { transform: scaleX(1); }
.service-area-card__location {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(197,165,90,0.12); color: var(--gold);
  margin-bottom: 18px;
  transition: background 0.25s ease, color 0.25s ease;
}
.service-area-card__location svg { width: 20px; height: 20px; }
.service-area-card:hover .service-area-card__location { background: var(--gold); color: #fff; }
.service-area-card__city {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 500; line-height: 1.15;
  color: var(--navy);
  margin: 0 0 10px;
}
.service-area-card__state {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400; color: var(--gray-dark);
  letter-spacing: 0;
  text-transform: none;
}
.service-area-card__teaser {
  font-size: 14px; line-height: 1.6; color: var(--gray-dark);
  margin: 0 0 22px;
  flex: 1 1 auto;
}
.service-area-card__cta {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.service-area-card:hover .service-area-card__cta { color: var(--gold-dark); gap: 10px; }
@media (max-width: 1100px) {
  .service-area-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .service-area-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 480px) {
  .service-area-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .service-area-card { padding: 24px 22px; }
}

/* Archive hero (category, tag, date, author). Reuses .page-hero base. */
.page-hero--archive { padding: 120px 0 80px; }
.page-hero--archive .page-hero-content { max-width: 820px; }
.omg-archive__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px;
}
.omg-archive__desc {
  font-size: 17px; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}
.omg-archive__desc p { margin: 0; }
.omg-archive__loop { padding: 80px 0; background: var(--white); }

.omg-single__cats {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.omg-single__cats li { margin: 0; }
.omg-single__cats a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(212, 175, 95, 0.4);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.omg-single__cats a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  /* Center the byline + cats on mobile blog post hero (single column). */
  .omg-single__meta { justify-content: center; width: 100%; text-align: center; }
  .omg-single__cats { justify-content: center; }
  .omg-single__back { display: inline-flex; }
  .omg-single__hero-text { text-align: center; }
}
/* Body: 2-col with sticky form sidebar */
.omg-single__body { padding: 80px 0; background: var(--white); }
.omg-single__body .container { max-width: 1280px; }
.omg-single__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 60px; align-items: start;
}
.omg-single__sidebar { position: sticky; top: calc(var(--total-header) + 24px); }
.omg-single__sidebar-form { margin: 0; }
.omg-single__content { font-size: 16px; line-height: 1.75; color: var(--black); }
/* In-post galleries (auto-grouped by the_content filter). 3-col tight grid. */
.omg-single__content .omg-post-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 28px 0;
}
.omg-single__content .omg-post-gallery figure { margin: 0; }
.omg-single__content .omg-post-gallery img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: 6px; margin: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  cursor: zoom-in; transition: transform 0.3s, box-shadow 0.3s;
}
.omg-single__content .omg-post-gallery img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.omg-single__content .omg-post-gallery figcaption {
  display: none; /* figcaptions hidden inside gallery grid */
}
@media (max-width: 768px) {
  .omg-single__content .omg-post-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .omg-single__content .omg-post-gallery img { height: 160px; }
}
/* In-post before/after sliders (auto-paired by alt text). */
.omg-single__content .omg-post-ba { margin: 32px 0; }
.omg-single__content .omg-post-ba .ba-slider {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.15);
  user-select: none; cursor: grab;
}
.omg-single__content .omg-post-ba .ba-slider:active { cursor: grabbing; }
.omg-single__content .omg-post-ba .ba-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: none;
  margin: 0; box-shadow: none; border-radius: 0;
}
.omg-single__content .omg-post-ba .ba-slider-before {
  position: absolute; inset: 0; clip-path: inset(0 50% 0 0);
}
.omg-single__content .omg-post-ba .ba-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: var(--gold); transform: translateX(-50%);
  pointer-events: none; z-index: 3;
}
.omg-single__content .omg-post-ba .ba-slider-handle::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--gold); color: var(--navy);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.omg-single__content .omg-post-ba .ba-slider-label {
  position: absolute; bottom: 14px; padding: 5px 12px;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; border-radius: 3px; z-index: 4;
}
.omg-single__content .omg-post-ba .ba-slider-label--before { left: 14px; }
.omg-single__content .omg-post-ba .ba-slider-label--after  { right: 14px; background: var(--gold); color: var(--navy); }
.omg-single__content p { margin: 0 0 22px; }
.omg-single__content h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 34px); font-weight: 500; line-height: 1.2;
  color: var(--navy); margin: 48px 0 18px;
}
.omg-single__content h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 26px); font-weight: 500; line-height: 1.25;
  color: var(--navy); margin: 36px 0 14px;
}
.omg-single__content h4 {
  font-size: 18px; font-weight: 600; color: var(--navy);
  margin: 28px 0 10px;
}
.omg-single__content a { color: var(--gold-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.omg-single__content a:hover { color: var(--gold-dark); }
.omg-single__content strong { font-weight: 600; color: var(--navy); }
.omg-single__content em { font-style: italic; }
.omg-single__content ul,
.omg-single__content ol { margin: 0 0 22px 24px; padding: 0; }
.omg-single__content ul li,
.omg-single__content ol li { margin: 0 0 8px; line-height: 1.7; }
.omg-single__content ul { list-style: disc; }
.omg-single__content ol { list-style: decimal; }
.omg-single__content blockquote {
  margin: 28px 0; padding: 18px 24px;
  border-left: 4px solid var(--gold);
  background: var(--off-white);
  font-style: italic; color: var(--gray-dark);
  border-radius: 0 4px 4px 0;
}
.omg-single__content img {
  display: block; max-width: 100%; height: auto;
  border-radius: 6px; margin: 28px auto;
  box-shadow: 0 10px 32px rgba(0,0,0,0.10);
}
.omg-single__content figure { margin: 28px 0; }
.omg-single__content figcaption {
  font-size: 13px; color: var(--gray); text-align: center;
  margin-top: 8px; font-style: italic;
}
.omg-single__content iframe {
  display: block; max-width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: 6px; margin: 28px auto;
  box-shadow: 0 10px 32px rgba(0,0,0,0.10);
}
.omg-single__content table {
  width: 100%; border-collapse: collapse; margin: 28px 0;
  font-size: 14px;
}
.omg-single__content th,
.omg-single__content td { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: left; }
.omg-single__content th { font-weight: 600; color: var(--navy); background: var(--off-white); }
/* In-content CTA buttons (.omg-form-lightbox-trigger that the agent inserted) */
.omg-single__content a.omg-form-lightbox-trigger,
.omg-single__content .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; background: var(--gold); color: var(--navy);
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 3px; text-decoration: none;
  transition: background 0.3s, transform 0.3s;
  margin: 8px 0;
}
.omg-single__content a.omg-form-lightbox-trigger:hover,
.omg-single__content .wp-block-button .wp-block-button__link:hover { background: var(--gold-dark); transform: translateY(-2px); }
/* Single-post end CTA reuses #final-cta classes — no custom rules needed.
   The site-wide #final-cta { background: gold; padding: 80px 0; } already
   handles the section. */
@media (max-width: 1100px) {
  .omg-single__layout { grid-template-columns: 1fr; }
  .omg-single__sidebar { position: static; }
  .omg-single__hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .omg-single__hero-text { text-align: center; }
}
@media (max-width: 768px) {
  .omg-single__hero { padding: calc(var(--total-header) + 32px) 0 40px; }
  .omg-single__body { padding: 48px 0; }
  .omg-single__content { font-size: 15px; }
}
/* SECTION:single-post END */

/* SECTION:omg-form-wrapper START
   Site-wide global form. ONE Elementor Library template (post slug
   omg-global-lead-form) is rendered through omg_render_global_form() and
   embedded everywhere — hero, contact page, all sidebars, lightbox.

   Outer chrome (navy card, title, privacy text, next-step callout) is owned by
   .omg-form-wrapper / its modifiers. The inner Elementor Form widget output
   (.elementor-form / .elementor-field-group / .elementor-field / .elementor-button)
   is restyled in place to match the previous .hero-form look. */

.omg-form-wrapper {
  background: rgba(255,255,255,0.97);
  border-radius: 8px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.omg-form-wrapper.is-dark {
  background: var(--navy);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  padding: 32px 28px;
}
.omg-form-wrapper.is-compact { padding: 28px 24px; }
.omg-form-wrapper__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 6px;
  text-align: center;
}
.omg-form-wrapper.is-dark .omg-form-wrapper__title { color: #fff; font-size: 22px; }
.omg-form-wrapper__subtitle {
  font-size: 13px;
  color: var(--gray-dark);
  font-weight: 300;
  margin: 0 0 20px;
  text-align: center;
}
.omg-form-wrapper.is-dark .omg-form-wrapper__subtitle { color: #fff; }
/* Secondary subtitle injected via main.js: "Rather talk to someone? Call ...".
   Smaller, gold-accent phone link. */
.omg-form-wrapper__subtitle--alt {
  margin: -12px 0 22px;
  font-size: 12px; font-weight: 400;
  color: var(--gray-dark); opacity: 0.85;
}
.omg-form-wrapper__subtitle--alt a {
  color: var(--gold-dark); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(197,165,90,0.4);
  transition: color 0.2s, border-color 0.2s;
}
.omg-form-wrapper__subtitle--alt a:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* opacity:1 overrides the 0.85 above; on navy it diluted the gold phone link to
   4.09:1. Full-strength gold on navy measures 5.15:1. */
.omg-form-wrapper.is-dark .omg-form-wrapper__subtitle--alt { color: rgba(255,255,255,0.85); opacity: 1; }
.omg-form-wrapper.is-dark .omg-form-wrapper__subtitle--alt a { color: var(--gold); border-bottom-color: rgba(197,165,90,0.5); }
.omg-form-wrapper.is-dark .omg-form-wrapper__subtitle--alt a:hover { color: #fff; border-bottom-color: #fff; }

/* Form layout + colors: we DON'T own these — they are configured natively in
   the Elementor Library template via the form widget's own design controls
   (label color, field background, button colors, typography, border radius).
   Elementor renders the form correctly when you edit the template post in the
   Elementor editor (WP Admin -> Templates -> "OMG Global Lead Form"). Don't
   override here. */
.omg-form-wrapper .elementor-form { display: block; }

/* Hide Elementor's built-in chevron pseudo-element — it draws its own arrow
   via .elementor-select-wrapper::before. We replace it with a custom SVG on
   the <select> below so the arrow stays consistent across themes. */
.omg-form-wrapper .elementor-select-wrapper::before { display: none; }

/* 4px gap between labels and fields (Elementor's native label-spacing control
   isn't well-exposed; pinning it here so the value is auditable). */
.omg-form-wrapper .elementor-field-group .elementor-field-label { margin-bottom: 4px; }

/* Placeholder font-family fallback — Elementor's field_typography settings
   set the font on the input but pseudo-elements (::placeholder) sometimes need
   an explicit rule to inherit. Plus the label font-family in case Elementor
   skipped it. Keeps everything on DM Sans, matching the rest of the site. */
.omg-form-wrapper .elementor-field-group .elementor-field-label,
.omg-form-wrapper .elementor-field,
.omg-form-wrapper .elementor-button { font-family: var(--font-body); }
.omg-form-wrapper .elementor-field::placeholder { font-family: var(--font-body); opacity: 0.55; }

/* Custom dropdown arrow — Elementor sets appearance:none on the <select> which
   strips the native arrow. Inject a chevron via background-image so the user
   sees a clear "this is a dropdown" affordance on every theme. Also suppress
   Elementor 4.x's new <svg.e-eicon-caret-down> wrapper (the `remove-before`
   class only hides the legacy ::before pseudo, not the new SVG element). */
.omg-form-wrapper .elementor-select-wrapper .select-caret-down-wrapper { display: none !important; }
.omg-form-wrapper select.elementor-field-textual {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.omg-form-wrapper:not(.is-dark) select.elementor-field-textual {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23003959' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Native <option> dropdown items always render black-on-white per user
   preference. Browsers control the open listbox; option { background, color }
   honored on most platforms. */
.omg-form-wrapper select option { background: #fff; color: var(--black); }

/* Submit button hover — matches .btn-primary site-wide: gold-dark bg + 2px lift.
   Uses !important because Elementor injects per-widget inline CSS at higher
   specificity (`.elementor-105 .elementor-button:hover { transform: none }`)
   and Elementor's Pro Form button widget doesn't expose a hover transform
   control. This is the documented escape valve. */
.omg-form-wrapper .elementor-button {
  transition: background 0.3s, transform 0.3s, color 0.3s !important;
}
.omg-form-wrapper .elementor-button:hover {
  background: var(--gold-dark) !important;
  color: var(--navy) !important;
  transform: translateY(-2px) !important;
}

/* Privacy + next-step callout (rendered by omg_render_global_form, OUTSIDE the Elementor template) */
.omg-form-wrapper__privacy {
  font-size: 11px;
  color: var(--gray);
  text-align: center;
  margin: 10px 0 0;
}
.omg-form-wrapper.is-dark .omg-form-wrapper__privacy { color: #fff; }

/* Mobile: form wrapper needs at least 8px breathing room left/right so the
   navy panel doesn't run flush to the screen edges. Only applies when the
   form is in a single column (mobile/narrow tablets). */
@media (max-width: 768px) {
  .omg-form-wrapper {
    margin-left: 8px;
    margin-right: 8px;
    box-sizing: border-box;
  }
}
.omg-form-wrapper__next-step {
  font-size: 12px;
  color: var(--gray-dark);
  margin-top: 12px;
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,178,93,0.08);
  border-left: 3px solid var(--gold);
  padding: 10px 12px;
  border-radius: 0 3px 3px 0;
}
.omg-form-wrapper.is-dark .omg-form-wrapper__next-step { color: #fff; background: rgba(255,178,93,0.12); }
.omg-form-wrapper__next-step strong { color: var(--gold-dark); }
.omg-form-wrapper.is-dark .omg-form-wrapper__next-step strong { color: var(--gold-light); /* WCAG AA: #D4B876 on dark form-bg = 5.5:1 (was #C5A55A = 4.18 fail) */ }

/* Elementor's native success / error messages (after submit) */
.omg-form-wrapper .elementor-message {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 3px;
  margin-top: 12px;
  text-align: center;
}
.omg-form-wrapper .elementor-message-success {
  color: var(--navy);
  background: rgba(255,178,93,0.12);
  border-left: 3px solid var(--gold);
}
.omg-form-wrapper.is-dark .elementor-message-success { color: #fff; background: rgba(255,178,93,0.18); }
.omg-form-wrapper .elementor-message-danger {
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border-left: 3px solid #c0392b;
}

/* Mobile: just the wrapper card padding. Elementor's flex-wrap form layout
   collapses to single-column natively on its own at narrow widths. */
@media (max-width: 768px) {
  .omg-form-wrapper { padding: 28px 22px; }
  .omg-form-wrapper.is-dark { padding: 26px 20px; }
}

/* Form lightbox: form-host overrides only — stage sizing is set in
   SECTION:lightbox earlier in the file. */
.omg-lightbox.is-form-lightbox .omg-lightbox__form-host .omg-form-wrapper { margin: 0; }
/* SECTION:omg-form-wrapper END */