/* ============================================================
   The Laundry Hub SF: Astra header + footer chrome
   Matches design/mockups/hero-opt4.html. Astra Pro is NOT installed,
   so the sticky header is done here rather than via the sticky-header module.
   ============================================================ */

/* ---------- STICKY PRIMARY HEADER ---------- */
/* position:sticky can only travel inside its OWN parent's box. The primary row's
   parent .ast-main-header-wrap is exactly as tall as the row itself (77px), so a
   sticky rule on .ast-primary-header-bar had zero distance to travel and scrolled
   away with the page. Verified in Chrome: barTop went to -1339 at scrollY 1400.
   Pinning #masthead instead gives it #page as the containing block, which is the
   full document height. The negative top is the height of the navy utility bar,
   so that bar scrolls up out of view and the white primary row lands flush at 0,
   which is the behaviour the old rule was reaching for. */
.ast-primary-header-bar {
	background: var(--white, #fff);
	border-bottom: 1px solid var(--line, #dbe4ee);
}
/* --lh-hdr-offset is the negative height of the utility bar, measured at runtime
   by the script in functions.php. It is NOT a media query on purpose: the bar is
   40px at every width except narrow phones, where the address and hours wrap to
   two lines and it becomes 55px. A 921px breakpoint looked right on a 390px phone
   and cut 15px off the top of the header at 768px. Measuring survives both the
   wrap point moving and the bar's copy changing. */
#masthead {
	position: sticky;
	top: var(--lh-hdr-offset, -40px);
	z-index: 99;
	transition: box-shadow .2s ease;
}
.admin-bar #masthead { top: calc(32px + var(--lh-hdr-offset, -40px)); }
@media (max-width: 782px) { .admin-bar #masthead { top: calc(46px + var(--lh-hdr-offset, -40px)); } }
body.lh-scrolled #masthead { box-shadow: 0 3px 18px rgba(18, 63, 105, .09); }

/* keeps anchor jumps from landing under the pinned bar */
html { scroll-padding-top: 92px; }
@media (max-width: 921px) { html { scroll-padding-top: 76px; } }

/* the above bar scrolls away; only the primary row pins */
.ast-above-header-bar { position: relative; z-index: 100; }

/* ---------- THE NAVY UTILITY BAR ---------- */
.ast-above-header-bar {
	background: var(--navy, #123f69);
	color: #b9d0e6;
	font-size: 13.5px;
	line-height: 1.5;
}
/* `body` prefix is load-bearing. Elementor's kit stylesheet emits
   `.elementor-kit-8 a { color: ... }` at (0,1,1) and loads AFTER this file, so a
   bare `.ast-above-header-bar a` at the same specificity loses and the phone
   number renders dark-on-navy at 1.51:1. (0,1,2) keeps it white. */
body .ast-above-header-bar a { color: #fff; font-weight: 600; text-decoration: none; }
.ast-above-header-bar a:hover { color: var(--bright, #499be6); }
.ast-above-header-bar .ast-builder-html-element { line-height: 1.5; }
.ast-above-header-bar .site-header-above-section-left,
.ast-above-header-bar .site-header-above-section-right { min-height: 40px; }

.lh-top { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.lh-top--right { justify-content: flex-end; }
.lh-stars { color: #f0a500; letter-spacing: 2px; }

/* ---------- PRIMARY ROW ---------- */
.ast-primary-header-bar .site-primary-header-wrap { min-height: 76px; }
.site-logo-img img { height: 32px; width: auto; }

.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
	font-family: 'Encode Sans', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--navy, #123f69);
	white-space: nowrap;
}
.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover,
.ast-primary-header-bar .main-header-menu > .menu-item.current-menu-item > .menu-link {
	color: var(--bright, #499be6);
}

/* header CTA, same shape as the in-page .btn */
.ast-primary-header-bar .ast-custom-button {
	font-family: 'Encode Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	padding: 13px 22px;
	border-radius: 6px;
	/* --brand, not --bright: white on #499be6 is 2.95:1 and fails WCAG AA.
	   #2c5894 is 7.6:1 with almost no visual change. */
	background: var(--brand, #2c5894);
	color: #fff;
	border: 2px solid transparent;
	white-space: nowrap;
	transition: .18s;
}
.ast-primary-header-bar .ast-custom-button:hover { background: var(--navy, #123f69); color: #fff; }

/* ---------- MOBILE ---------- */
@media (max-width: 921px) {
	.ast-above-header-bar { font-size: 12.5px; }
	.lh-top { gap: 14px; justify-content: center; }
	.lh-top--right { justify-content: center; }
	.ast-primary-header-bar .site-primary-header-wrap { min-height: 64px; }
	.site-logo-img img { height: 28px; }
}

/* ---------- FOOTER ---------- */
/* Same specificity leak as the headings below: `body.elementor-page a` from
   atomic-overrides.css ties `.site-footer a` at 0,1,1 and wins on load order,
   repainting every footer link the bright accent instead of the muted blue.
   Repeating the body class settles it at 0,2,1. */
.site-footer { background: var(--navy, #123f69); color: #9dc5ea; }
.site-footer a,
body.elementor-page .site-footer a { color: #9dc5ea; text-decoration: none; }
.site-footer a:hover,
body.elementor-page .site-footer a:hover { color: #fff; }

.ast-primary-footer-wrap { padding-block: clamp(44px, 5vw, 72px); }

/* atomic-overrides.css mirrors the ENTIRE design system behind `body.elementor-page`,
   and that prefix matches the footer and header too, not only the Elementor content.
   So `body.elementor-page h4 { color: var(--navy) }` (specificity 0,1,2) outranks a
   plain `.site-footer h4` (0,1,1) and painted every footer heading navy-on-navy --
   invisible against the navy footer. The old "The Store" address column had the same
   bug and simply looked like it had no heading. Repeating the body class here wins at
   0,2,2. Any future footer rule that fights the design system needs the same prefix. */
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
body.elementor-page .site-footer h2,
body.elementor-page .site-footer h3,
body.elementor-page .site-footer h4,
body.elementor-page .site-footer .widget-title {
	font-family: 'Encode Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}

/* Helena's footer gives the brand column extra width; Astra's "4-equal" preset does
   not. Matches the mockup's 1.4fr 1fr 1fr 1fr.
   Astra wins this with `.ast-builder-grid-row-4-equal .ast-builder-grid-row` (0,2,0),
   so the override needs three classes. Note the wrapper is .site-primary-footer-wrap,
   NOT .ast-primary-footer-wrap -- the latter matches nothing on this build. */
@media (min-width: 922px) {
	.site-primary-footer-wrap .ast-builder-grid-row.ast-builder-footer-grid-columns {
		grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
	}
}

.lh-fcol { font-size: 14.5px; line-height: 1.9; }
.lh-fcol a,
.lh-fcol span { display: block; }
.lh-fcol .lh-ph { color: #6f8fb3; }

.lh-nap {
	text-align: center;
	font-size: 14px;
	color: #9dc5ea;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .13);
}
.lh-nap a { color: #fff; font-weight: 600; }

/* ---------- FOOTER BRAND COLUMN (col 1) ---------- */
/* Mirrors the Helena Aesthetics footer: wordmark, one-line description, rating,
   social buttons. The logo is the white recolour -- the navy original disappears
   on this background. */
.lh-brand__logo {
	height: 34px;
	width: auto;
	display: block;
	margin-bottom: 18px;
}
.lh-brand p { font-size: 14.5px; line-height: 1.75; margin: 0 0 12px; }
.lh-brand .lh-stars { color: #f0a500; letter-spacing: 2px; }

.lh-social { display: flex; gap: 10px; margin-top: 20px; }
.lh-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	transition: background .18s;
}
.lh-social a:hover { background: rgba(255, 255, 255, .22); }
.lh-social svg { width: 18px; height: 18px; }

/* ---------- BELOW BAR ---------- */
/* Tony asked for the legal links centred. Astra lays the below row out as flex
   columns, so a single centred column needs the wrap forced to centre too --
   otherwise below_1 hugs the left edge regardless of text-align. */
.ast-below-footer-wrap {
	background: #0d2135;
	font-size: 13px;
	color: #7f9dbd;
	text-align: center;
}
.ast-below-footer-wrap .ast-builder-grid-row {
	justify-content: center;
	grid-template-columns: 1fr;
}
.ast-below-footer-wrap .site-footer-section { justify-content: center; }
.ast-below-footer-wrap .ast-footer-copyright { text-align: center; width: 100%; }
.ast-below-footer-wrap .ast-footer-copyright p { margin: 0; }

.lh-legal { margin: 8px 0 0; text-align: center; }
.lh-legal a { color: #9dc5ea; }
.lh-legal a:hover { color: #fff; }

/* ---------- SECTION 3, SERVICE CARDS ---------- */
/* Reference: home-painting-04 "Our Services", supplied by Tony 2026-08-12.
   Three things it needs that the Elementor panel has no control for:

   1. the link sitting on a shared baseline across cards of unequal copy
      (margin-top:auto -- the margin control takes numbers, not "auto"),
   2. the stagger. Doing it with margin-top would make each staggered card
      SHORTER than its neighbour, which breaks Tony's "exactly the same
      height". A transform costs no layout, so heights stay identical,
   3. the badge riding on the photo instead of in the card flow, which is what
      keeps card 1's headline level with the other three.

   The photo breaking out above the card's top edge is NOT here: that is a
   negative top margin, which the panel does expose, so it stays editable.

   Everything is scoped to .svc-grid, a class set on the row in Elementor, so
   none of it can reach page 9. */
.svc-grid,
.svc-grid .svc-card { overflow: visible; }
.svc-grid .svc-card { position: relative; }
.svc-grid .svc-link { margin-top: auto; }

.svc-grid .svc-badge {
	position: absolute;
	top: -26px;
	left: 18px;
	z-index: 2;
	margin: 0;
	width: auto;
}

/* The zigzag stagger was removed 2026-08-12 at Tony's instruction: "make the
   service cards uniform instead of zigzagging". All four cards now sit on one
   top line and one bottom line. The equal-height and shared-link-baseline rules
   above are what make that read as deliberate rather than as four cards that
   happen to be the same length, so they stay. */

@media (max-width: 1024px) {
	.svc-grid .svc-badge { top: -22px; }
}

/* ---------- SECTION 10, SERVICE AREA ROWS ---------- */
/* Reference: the "Perth Services" three-up link grid Tony sent 2026-08-12. Its
   move is the label hard left and the chevron hard right, with a hairline under
   every row.

   The hairline is NOT here: Elementor's icon-list exposes a Divider control, so
   it stays in the panel. The only thing this adds is the one part no icon-list
   control can express, which is putting the icon AFTER the label and pushing
   the two apart. row-reverse plus space-between does it: in row-reverse the
   main axis starts on the right, so the icon (first in the DOM) lands right and
   the text lands left.

   Elementor wraps linked rows in an <a> and unlinked ones in a <span>, so both
   have to be targeted or a row without a link collapses back to inline. */
.area-rows .elementor-icon-list-item > a,
.area-rows .elementor-icon-list-item > span {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 15px 2px;
}
.area-rows .elementor-icon-list-icon { flex: 0 0 auto; }
.area-rows .elementor-icon-list-text { flex: 1 1 auto; }

/* Elementor's Divider draws on :not(:last-child), so the bottom row of each
   column came out unruled. The reference rules every row, and with columns of
   3/3/2 the missing lines read as an accident rather than a choice.
   NOTE: this colour has to track the widget's Divider colour in the panel.
   They are the same hairline (lhline #DBE4EE); change both together. */
.area-rows .elementor-icon-list-item:last-child::after {
	content: '';
	display: block;
	border-top: 1px solid #DBE4EE;
	width: 100%;
}

/* ---------- $20 OFF TAG, THE TILT ---------- */
/* Elementor 4.2.2 writes `--e-con-transform-rotateZ: -7deg` onto the container
   from the Advanced > Transform panel, but ships NO rule that consumes it for
   containers. A scan of every stylesheet on the page found zero rules
   referencing `e-con-transform`, so the tag rendered dead flat with
   `transform: none` however the panel was set. This is Elementor's gap, not a
   bad setting.

   The angle stays a panel control. This only supplies the plumbing, reading
   Elementor's own variable, so changing the rotation in the editor still works
   and nothing is hardcoded here. Scoped to page 328 so it cannot reach page 9.
   Re-test after any Elementor update: if they ship the rule, this becomes a
   harmless duplicate, but a differing default would fight it. */
.elementor-27 .elementor-element-b3246fc {
	transform: rotateZ(var(--e-con-transform-rotateZ, 0deg));
}

/* =========================================================
   FAQ GRID, page /faqs/ only
   Two-column card accordion. Native Elementor accordion controls
   cannot set an ACTIVE-state title background, which is the whole
   visual signature of this component, so the open-state fill lives
   here. Everything else (typography, colours, spacing) is set on the
   widget in Elementor. Scoped to .lh-faqcol so the deep-band
   accordions on 363 / 433 / 435 / 466 / 479 are untouched.
   ========================================================= */
.lh-faqcol .elementor-accordion { border: 0; }
.lh-faqcol .elementor-accordion .elementor-accordion-item {
  border: 1px solid #DBE4EE;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #FFFFFF;
}
.lh-faqcol .elementor-accordion .elementor-accordion-item:last-child { margin-bottom: 0; }
.lh-faqcol .elementor-accordion .elementor-tab-title {
  padding: 17px 22px;
  border: 0;
  background: #FFFFFF;
  transition: background .18s ease;
}
.lh-faqcol .elementor-accordion .elementor-tab-title:hover { background: #F6FAFD; }
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active,
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active:hover { background: #123F69; }
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title,
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active a { color: #FFFFFF; }
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i,
.lh-faqcol .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg { color: #9DC5EA; fill: #9DC5EA; }
.lh-faqcol .elementor-accordion .elementor-tab-content {
  background: #123F69;
  color: #CFE0EE;
  border: 0;
  padding: 0 22px 22px;
}
.lh-faqcol .elementor-accordion .elementor-tab-content p { margin: 0; }
@media (max-width: 767px) {
  .lh-faqcol .elementor-accordion .elementor-tab-title { padding: 15px 18px; }
  .lh-faqcol .elementor-accordion .elementor-tab-content { padding: 0 18px 18px; }
}

/* =========================================================
   lh-navdrop: primary nav flyouts
   SERVICES opens a two-panel flyout. Left rail is the locations,
   hovering one opens that location's service list flush to the
   right, aligned to the TOP of the panel rather than to the
   hovered row. AREAS WE SERVE opens a three-column list.
   Astra Pro is NOT installed, so there is no native mega menu.
   Everything reverts to a plain stacked list below 921px.
   ========================================================= */
.ast-primary-header-bar .main-header-menu .sub-menu {
  padding: 8px 0;
  border: 1px solid #DBE4EE;
  border-top: 3px solid #2C5894;
  box-shadow: 0 18px 44px rgba(18, 63, 105, .14);
  background: #FFFFFF;
}
.ast-primary-header-bar .main-header-menu .sub-menu .menu-link {
  font-size: 15px;
  font-weight: 500;
  color: #123F69;
  padding: 10px 22px;
  line-height: 1.4;
}
.ast-primary-header-bar .main-header-menu .sub-menu .menu-item:hover > .menu-link {
  background: #EEF4FA;
  color: #2C5894;
}
@media (min-width: 922px) {
  /* SERVICES, two panels */
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu {
    width: 236px;
    background: #F4F7FB;
    border-radius: 0 0 0 10px;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item { position: static; }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item > .menu-link {
    font-weight: 600;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item:hover > .menu-link {
    background: #FFFFFF;
    color: #2C5894;
  }
  /* lh-flyout-chevron: every location row shows the affordance, not
     only the hovered one. Astra's own toggle is hidden to avoid two. */
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item-has-children > .menu-link {
    display: flex;
    align-items: center;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item-has-children > .menu-link .dropdown-menu-toggle,
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item-has-children > .menu-link .ast-icon {
    display: none;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item-has-children > .ast-menu-toggle { display: none; }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item-has-children > .menu-link::after {
    content: "\203A";
    margin-left: auto;
    padding-left: 12px;
    font-size: 19px;
    line-height: 1;
    color: #8FA6BC;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item-has-children:hover > .menu-link::after { color: #2C5894; }
  .ast-primary-header-bar .main-header-menu .menu-item-12 > .sub-menu > .menu-item > .sub-menu {
    position: absolute;
    left: 236px;
    top: -3px;
    width: 282px;
    min-height: calc(100% + 3px);
    margin: 0;
    border-left: 1px solid #DBE4EE;
    border-radius: 0 0 10px 0;
  }
  /* AREAS WE SERVE, three columns filled top to bottom */
  .ast-primary-header-bar .main-header-menu .menu-item-14 > .sub-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(184px, 1fr));
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    width: auto;
    padding: 14px 6px 12px;
    border-radius: 0 0 10px 10px;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-14 > .sub-menu > .menu-item { width: 100%; }
  .ast-primary-header-bar .main-header-menu .menu-item-14 > .sub-menu > .lh-seeall {
    grid-row: 8;
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #DBE4EE;
  }
  .ast-primary-header-bar .main-header-menu .menu-item-14 > .sub-menu > .lh-seeall > .menu-link {
    color: #2C5894;
    font-weight: 600;
  }
}

/* =========================================================
   lh-linklist: three-column link list
   Label left, chevron right, hairline under each row. Used for the
   services block and the extra service-area columns on 435, and
   reusable on /services/ and every location page.
   Elementor's icon-list puts its icon on the left with no control
   to move it, so the row is flipped here.
   ========================================================= */
.lh-linklist .elementor-icon-list-items { width: 100%; }
.lh-linklist .elementor-icon-list-item { border-bottom: 1px solid #DBE4EE; }
.lh-linklist .elementor-icon-list-item > a,
.lh-linklist .elementor-icon-list-item > a:hover { text-decoration: none; }
.lh-linklist .elementor-icon-list-item > a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  transition: color .16s ease;
}
.lh-linklist .elementor-icon-list-icon { margin: 0 0 0 12px; }
.lh-linklist .elementor-icon-list-icon i { font-size: 13px; }
.lh-linklist .elementor-icon-list-text { padding-left: 0; }
.lh-linklist .elementor-icon-list-item:hover > a .elementor-icon-list-text,
.lh-linklist .elementor-icon-list-item:hover > a .elementor-icon-list-icon i { color: #2C5894; }
@media (max-width: 767px) {
  .lh-linklist .elementor-icon-list-item > a { padding: 13px 2px; }
}

/* Neighborhood cards on 435: the body fills the card so the link
   button sits on one baseline across a row whatever the blurb length.
   _css_classes does not apply to inner containers, so these are
   targeted by Elementor's own element ids. */
.e-con.elementor-element.elementor-element-hood0-b,
.e-con.elementor-element.elementor-element-hood1-b,
.e-con.elementor-element.elementor-element-hood2-b,
.e-con.elementor-element.elementor-element-hood3-b,
.e-con.elementor-element.elementor-element-hood4-b,
.e-con.elementor-element.elementor-element-hood5-b,
.e-con.elementor-element.elementor-element-hood6-b,
.e-con.elementor-element.elementor-element-hood7-b {
  --flex-grow: 1;
  flex-grow: 1 !important;
}


/* =========================================================
   lh-fab: floating action button, bottom right
   Two destinations behind one control: the Cents booking flow for
   consumers, the commercial quote form for businesses. Built in the
   child theme rather than as an Elementor global widget so it renders
   on every template including the blog, search and 404, and so the
   markup stays out of all 80-odd page document trees.

   Colour rules are written with TWO classes on purpose. Elementor's kit
   emits `.elementor-kit-8 a { color: ... }` at (0,1,1) and loads AFTER
   chrome.css, so a single-class `.lh-fab-opt` would tie and lose on
   load order, exactly the leak documented on the footer links above.
   ========================================================= */
.lh-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 120;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.lh-fab .lh-fab-btn {
	width: 60px;
	height: 60px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--navy, #123f69);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(13, 33, 53, .32);
	display: grid;
	place-items: center;
	transition: background .2s ease;
}
.lh-fab .lh-fab-btn:hover { background: #0d2f50; }
.lh-fab .lh-fab-btn:focus-visible { outline: 3px solid #f2a03d; outline-offset: 3px; }
.lh-fab .lh-fab-btn svg { width: 24px; height: 24px; fill: currentColor; transition: transform .2s ease; }
.lh-fab.is-open .lh-fab-btn svg { transform: rotate(45deg); }

.lh-fab .lh-fab-menu { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.lh-fab .lh-fab-menu[hidden] { display: none; }
.lh-fab .lh-fab-opt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--navy, #123f69);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 22px rgba(13, 33, 53, .22);
	animation: lh-fab-in .18s ease both;
	/* 44px is the minimum comfortable tap target. Padding plus a 1.0 line-height
	   landed at 41px on phones and 43px on tablets, so the height is set here
	   rather than left to fall out of the font size. */
	min-height: 46px;
}
.lh-fab .lh-fab-opt:hover,
.lh-fab .lh-fab-opt:focus { background: var(--navy, #123f69); color: #fff; }
.lh-fab .lh-fab-opt svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.lh-fab .lh-fab-opt + .lh-fab-opt { animation-delay: .05s; }
@keyframes lh-fab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
	.lh-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
	.lh-fab .lh-fab-opt { font-size: 14.5px; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.lh-fab .lh-fab-btn, .lh-fab .lh-fab-btn svg, .lh-fab .lh-fab-opt { transition: none; animation: none; }
}

/* Astra's Scroll to Top ships bottom-right, the corner the FAB now owns. */
#ast-scroll-top.ast-scroll-to-top-right { right: auto; left: 24px; }
@media (max-width: 480px) { #ast-scroll-top.ast-scroll-to-top-right { left: 16px; } }

/* ---------- FOOTER MAP (col 4) ---------- */
/* Hybrid satellite, so the imagery matches the reference Tony supplied while the
   street labels stay readable at 190px. output=embed needs no Maps API key.
   line-height:0 on the wrapper kills the inline-descender gap under the iframe,
   which otherwise shows as a 4px navy sliver below the rounded corner. */
.lh-fmap {
	margin-top: 18px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	border: 1px solid rgba(255, 255, 255, .14);
}
.lh-fmap iframe { display: block; width: 100%; height: 190px; border: 0; }

/* ---------- BELOW BAR NAV ---------- */
/* About / FAQs / Contact / Business quote used to be tacked onto the bottom of
   the address column, which made column 4 read as two unrelated blocks. They are
   utility links, so they belong with the legal row. */
.lh-belowbar .lh-fnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	margin: 0 0 12px;
	font-size: 14.5px;
}
.lh-belowbar .lh-fnav a { color: #9dc5ea; }
.lh-belowbar .lh-fnav a:hover { color: #fff; }

/* ---------- FOOTER GUTTERS BELOW DESKTOP ---------- */
/* Astra only applies the container gutter to the footer at desktop width. Below
   921px every column ran flush to x=0, so the brand copy, the link lists and the
   map all touched the screen edge. Measured: brand text x=0 at 390, 768 and 900,
   against 120 at 1440. */
@media (max-width: 1240px) {
	.site-primary-footer-wrap .ast-builder-grid-row,
	.site-below-footer-wrap .ast-builder-grid-row {
		padding-left: 24px;
		padding-right: 24px;
	}
}