/**
 * Forest Air design system — the approved redesign (Claude Design canvas
 * "Forest Air — Brand & Page Design").
 *
 * Everything here is scoped under `.fa`. A rebuilt template puts `fa` on its
 * own root element (header, footer, each new section), so these rules reach
 * only the markup that was written for them and leave the older Tailwind
 * templates alone while the site is moved over one module at a time.
 *
 * Loaded last (after blog.css) so it wins ties with the older layers.
 */

:root {
  --f950: #00240b;
  --f900: #00300f;
  --f700: #004713;
  --f600: #0f5a24;
  --f100: #dceadf;
  --f50:  #f2f7f2;
  --s500: #2bb6ec;
  --s300: #7fd3f5;
  --s700: #0b6f97;
  --s50:  #ebf7fd;
  --b600: #2a5aae;
  --b800: #1f4588;
  --ink900: #142019;
  --ink700: #3d4a42;
  --ink500: #5f6b63;
  --line: #dde6de;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --shadow: 0 2px 4px rgba(20, 32, 25, .04), 0 16px 36px -16px rgba(20, 32, 25, .24);
}
.fa { font-family: var(--body); color: var(--ink700); -webkit-font-smoothing: antialiased; }
.fa * { box-sizing: border-box; }
.fa h1, .fa h2, .fa h3, .fa h4 { font-family: var(--display); color: var(--ink900); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.fa p, .fa ul, .fa ol { margin: 0; }
.fa img { display: block; max-width: 100%; }
:is(.fa .dark, .fa.dark) { color: #fff; }
:is(.fa .dark, .fa.dark) h1, :is(.fa .dark, .fa.dark) h2, :is(.fa .dark, .fa.dark) h3, :is(.fa .dark, .fa.dark) h4 { color: #fff; }

/* Links in running text. Scoped to links with no class (or .link), so these
   rules can never repaint a button, nav item, card or footer link — an
   unscoped `.dark a` outranked the button classes and turned button text sky
   on sky. */
.fa a:not([class]), .fa a.link { color: var(--s700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s var(--ease); }
.fa a:not([class]):hover, .fa a.link:hover, .fa a.link.is-hover { color: var(--f700); text-decoration-thickness: 2px; }
:is(.fa .dark, .fa.dark) a:not([class]), :is(.fa .dark, .fa.dark) a.link { color: #ffffff; }
:is(.fa .dark, .fa.dark) a:not([class]):hover, :is(.fa .dark, .fa.dark) a.link:hover, :is(.fa .dark, .fa.dark) a.link.is-hover { color: #ffffff; text-decoration-thickness: 2px; }
.fa a.plain, .fa a.plain:hover { color: inherit; text-decoration: none; }

/* Buttons — one height, one radius, one weight */
.fa .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font: 700 15px/1 var(--body); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.fa .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.fa .btn:hover, .fa .btn.is-hover { transform: translateY(-1px); text-decoration: none; }
.fa .btn:active { transform: none; }
.fa .btn:focus-visible { outline: 3px solid var(--s500); outline-offset: 3px; }
.fa .btn-primary { background: var(--f700); color: #fff; }
.fa .btn-primary:hover, .fa .btn-primary.is-hover { background: var(--f900); color: #fff; box-shadow: 0 10px 20px -12px rgba(0, 48, 15, .7); }
.fa .btn-accent { background: var(--s500); color: var(--f950); }
.fa .btn-accent:hover, .fa .btn-accent.is-hover { background: var(--s300); color: var(--f950); box-shadow: 0 10px 22px -12px rgba(43, 182, 236, .8); }
.fa .btn-outline { background: transparent; border-color: var(--f700); color: var(--f700); }
.fa .btn-outline:hover, .fa .btn-outline.is-hover { background: var(--f700); color: #fff; }
/* Blue — the call button that sits beside a blue booking button: solid on
   the dark green footer, outlined on light sections. */
.fa .btn-blue { background: var(--b600); color: #fff; box-shadow: 0 12px 24px -12px rgba(31, 69, 136, .75); }
.fa .btn-blue:hover, .fa .btn-blue.is-hover { background: var(--b800); color: #fff; }
.fa .btn-outline-blue { background: transparent; border-color: var(--b600); color: var(--b600); }
.fa .btn-outline-blue:hover, .fa .btn-outline-blue.is-hover { background: var(--b600); color: #fff; }
.fa .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.fa .btn-outline-light:hover, .fa .btn-outline-light.is-hover { background: #fff; border-color: #fff; color: var(--f900); }
.fa .btn-block { width: 100%; }

/* Text link with arrow */
.fa .go { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.2 var(--body); color: var(--f700); text-decoration: none; }
.fa .go svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fa .go:hover, .fa .go.is-hover { color: var(--f900); text-decoration: none; }
.fa .go:hover svg, .fa .go.is-hover svg { transform: translateX(4px); }
:is(.fa .dark, .fa.dark) .go { color: var(--s300); }
:is(.fa .dark, .fa.dark) .go:hover { color: #fff; }

/* Labels */
.fa .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--s700); }
.fa .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
:is(.fa .dark, .fa.dark) .eyebrow { color: #ffffff; }
.fa .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(43, 182, 236, .16); color: #fff; font: 600 14px/1 var(--body); }
.fa .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s500); }
.fa .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--f50); border: 1px solid var(--f100); color: var(--f700); font: 700 12.5px/1 var(--body); text-decoration: none; white-space: nowrap; }
.fa .chip svg { width: 14px; height: 14px; }

/* Filter chips */
.fa .filter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink900); font: 600 14px/1 var(--body); cursor: pointer; white-space: nowrap; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.fa .filter .count { font: 700 12px/1 var(--body); color: var(--ink700); background: var(--f50); border-radius: 999px; padding: 5px 8px; }
.fa .filter:hover, .fa .filter.is-hover { border-color: var(--f700); color: var(--f700); }
.fa .filter.is-active { background: var(--f700); border-color: var(--f700); color: #fff; }
.fa .filter.is-active .count { background: rgba(255, 255, 255, .2); color: #fff; }

/* Cards */
.fa .card { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.fa .card:hover, .fa .card.is-hover { transform: translateY(-3px); border-color: var(--f700); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.fa .card h3 { transition: color .2s var(--ease); }
.fa .card:hover h3, .fa .card.is-hover h3 { color: var(--f700); }
.fa .card .more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--body); color: var(--f700); }
.fa .card .more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fa .card:hover .more svg, .fa .card.is-hover .more svg { transform: translateX(4px); }

/* Icon tile — fills on hover, icon goes white (never green on green) */
.fa .itile { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--f50); color: var(--f700); flex-shrink: 0; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .itile svg { width: 26px; height: 26px; }
.fa .card:hover .itile, .fa .card.is-hover .itile, .fa .qa:hover .itile, .fa .qa.is-hover .itile { background: var(--f700); color: #fff; }
:is(.fa .dark, .fa.dark) .itile { background: rgba(43, 182, 236, .16); color: var(--s300); }

/* Quick actions */
.fa .qa { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .2s var(--ease); }
.fa .qa:hover, .fa .qa.is-hover { background: var(--f50); color: inherit; text-decoration: none; }
.fa .qa .arrow { margin-left: auto; width: 18px; height: 18px; color: var(--f700); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.fa .qa:hover .arrow, .fa .qa.is-hover .arrow { opacity: 1; transform: none; }

/* Service-area chips */
.fa .area { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink900); font: 600 15px/1 var(--body); text-decoration: none; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.fa .area svg { width: 16px; height: 16px; color: var(--f700); transition: color .18s var(--ease); }
.fa .area:hover, .fa .area.is-hover { background: var(--f700); border-color: var(--f700); color: #fff; text-decoration: none; }
.fa .area:hover svg, .fa .area.is-hover svg { color: var(--s300); }

/* Header nav */
.fa .nav a { position: relative; color: #fff; text-decoration: none; font: 500 15px/1 var(--body); padding: 12px 2px; }
.fa .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--s500); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.fa .nav a:hover, .fa .nav a.is-current { color: #fff; }
.fa .nav a:hover::after, .fa .nav a.is-current::after { transform: scaleX(1); }
.fa .tel { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 16px/1 var(--body); }
.fa .tel:hover { color: var(--s300); text-decoration: none; }
.fa .tel svg { width: 18px; height: 18px; color: var(--s300); }

/* Footer links */
.fa .flink { color: #fff; text-decoration: none; font-size: 15px; line-height: 1.4; }
.fa .flink:hover { color: var(--s300); text-decoration: underline; }

/* Icon buttons */
.fa .ibtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--f700); cursor: pointer; text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.fa .ibtn svg { width: 18px; height: 18px; }
.fa .ibtn:hover, .fa .ibtn.is-hover { background: var(--f700); border-color: var(--f700); color: #fff; }
:is(.fa .dark, .fa.dark) .ibtn { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
:is(.fa .dark, .fa.dark) .ibtn:hover { background: #fff; border-color: #fff; color: var(--f900); }

/* Search field */
.fa .field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.fa .field:focus-within, .fa .field.is-hover { border-color: var(--f700); box-shadow: 0 0 0 4px rgba(0, 71, 19, .12); }
.fa .field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--body); color: var(--ink900); }
.fa .field input::placeholder { color: var(--ink500); }
.fa .field svg { width: 20px; height: 20px; color: var(--ink500); flex-shrink: 0; }

/* Checks */
.fa .tick { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.fa .tick svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--f700); margin-top: 1px; }
:is(.fa .dark, .fa.dark) .tick svg { color: var(--s300); }

/* Article contents list */
.fa .toc a { display: flex; gap: 10px; padding: 9px 12px; border-left: 2px solid var(--line); color: var(--ink700); text-decoration: none; font-size: 14.5px; line-height: 1.4; transition: background-color .15s, color .15s, border-color .15s; }
.fa .toc a:hover { color: var(--f700); border-color: var(--f700); background: var(--f50); }
.fa .toc a.is-current { color: var(--f700); font-weight: 700; border-color: var(--f700); }
.fa .toc .n { min-width: 18px; color: var(--ink500); font-weight: 700; }
.fa .toc a.is-current .n { color: var(--f700); }

/* FAQ accordion */
.fa .faq { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.fa .faq + .faq { margin-top: 10px; }
.fa .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font: 700 17px/1.35 var(--display); color: var(--ink900); transition: background-color .15s, color .15s; }
.fa .faq summary::-webkit-details-marker { display: none; }
.fa .faq summary:hover { background: var(--f50); color: var(--f700); }
.fa .faq summary svg { width: 20px; height: 20px; color: var(--f700); flex-shrink: 0; transition: transform .2s var(--ease); }
.fa .faq[open] summary { color: var(--f700); }
.fa .faq[open] summary svg { transform: rotate(180deg); }
.fa .faq .a { padding: 0 20px 20px; font-size: 16px; line-height: 1.65; color: var(--ink700); }

/* Checklist */
.fa .chk { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; cursor: pointer; font-size: 16px; line-height: 1.45; color: var(--ink900); }
.fa .chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--f700); flex-shrink: 0; cursor: pointer; }

/* Service explorer tabs */
.fa .svc-tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-left: 3px solid transparent; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: 600 16px/1.3 var(--body); color: var(--ink900); transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.fa .svc-tab:hover { background: var(--f50); color: var(--f700); }
.fa .svc-tab.is-active { background: var(--s50); color: var(--b800); border-left-color: var(--b600); font-weight: 700; }
.fa .svc-tab .itile { width: 40px; height: 40px; border-radius: 10px; }
.fa .svc-tab .itile svg { width: 20px; height: 20px; }
.fa .svc-tab.is-active .itile { background: var(--b600); color: #ffffff; }
.fa .svc-tab .chev { margin-left: auto; width: 18px; height: 18px; opacity: 0; transition: opacity .18s var(--ease); }
.fa .svc-tab:hover .chev, .fa .svc-tab.is-active .chev { opacity: 1; }

/* Explorer autoplay: a progress bar fills under the active tab, then moves on */
.fa .svc-tab { position: relative; overflow: hidden; }
.fa .svc-tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--s500); transform: scaleX(0); transform-origin: left; }
.fa .svc-tab.is-active .bar { animation: fa-fill 5s linear forwards; }
.fa .svc-paused .svc-tab.is-active .bar { animation-play-state: paused; }
/* Slides: all six photos are stacked; the incoming one wipes in on a
   diagonal over the outgoing one — no zoom. The outgoing
   photo stays put underneath until the wipe has covered it. */
.fa .svc-media { position: relative; aspect-ratio: 2.15 / 1; overflow: hidden; background: var(--f900); }
.fa .svc-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; clip-path: polygon(0 0, 0 0, -18% 100%, -18% 100%); transition: clip-path 0s linear .9s; }
.fa .svc-slide.is-active { z-index: 2; clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); transition: clip-path .9s var(--ease); }
/* Progress: a white chip on the photo with the slide number and one segment
   per service. Done segments stay full, the current one fills over the five
   seconds, and every segment is a button. */
.fa .svc-hud { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-radius: 999px; background: #ffffff; box-shadow: 0 8px 24px -8px rgba(0, 36, 11, .35); }
.fa .svc-count { font: 700 13px/1 var(--display); color: var(--ink500); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fa .svc-count b { font-size: 17px; color: var(--b600); }
.fa .svc-segs { display: flex; gap: 6px; }
.fa .svc-seg { position: relative; width: 34px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fa .svc-seg::before, .fa .svc-seg i { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 6px; border-radius: 99px; }
.fa .svc-seg::before { background: var(--line); }
.fa .svc-seg i { background: var(--b600); transform: scaleX(0); transform-origin: left; }
.fa .svc-seg.is-done i { transform: scaleX(1); }
.fa .svc-seg.is-active i { background: var(--s500); animation: fa-fill 5s linear forwards; }
.fa .svc-paused .svc-seg.is-active i { animation-play-state: paused; }
.fa .svc-seg:focus-visible { outline: 2px solid var(--s500); outline-offset: 2px; border-radius: 4px; }
/* Copy: stacked in one grid cell so the panel keeps the tallest height and
   never jumps; the new title, text and buttons rise in one after another. */
.fa .svc-copy { display: grid; padding: clamp(24px, 3vw, 36px); }
.fa .svc-txt { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; visibility: hidden; transition: visibility 0s linear .2s; }
.fa .svc-txt.is-active { visibility: visible; transition: none; }
.fa .svc-txt > * { opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; }
.fa .svc-txt.is-active > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.fa .svc-txt.is-active > :nth-child(1) { transition-delay: .25s; }
.fa .svc-txt.is-active > :nth-child(2) { transition-delay: .35s; }
.fa .svc-txt.is-active > :nth-child(3) { transition-delay: .45s; }
@keyframes fa-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fa .svc-tab.is-active .bar, .fa .svc-seg.is-active i { animation: none; transform: scaleX(1); } .fa .svc-slide, .fa .svc-slide.is-active, .fa .svc-txt > *, .fa .svc-txt.is-active > * { transition: none; } }

/* Brand logos — grey at rest, full colour on hover */
.fa .brand { display: flex; align-items: center; justify-content: center; height: 88px; padding: 0 20px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fa .brand img { max-height: 44px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .7; transition: filter .25s var(--ease), opacity .25s var(--ease); }
.fa .brand:hover { border-color: var(--f700); box-shadow: var(--shadow); }
.fa .brand:hover img { filter: none; opacity: 1; }

/* Google stars */
.fa .stars { display: inline-flex; gap: 2px; color: #fbbc04; }
.fa .stars svg { width: 16px; height: 16px; }

/* Branded van driving along a road line */
/* The road fades out at both ends, so the van drives in out of nothing and
   away into nothing rather than popping in at a hard edge. */
.fa .road { position: relative; height: 64px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.fa .road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: repeating-linear-gradient(90deg, #c9d6cb 0 18px, transparent 18px 34px); }
/* The negative delay starts the van part-way along the road, so it is in view
   the moment the page appears (and in still previews) instead of off-screen. */
.fa .van { position: absolute; bottom: 10px; left: -140px; width: 120px; height: auto; animation: fa-drive 16s linear -6s infinite; }
.fa .van .bob { animation: fa-bob .45s ease-in-out infinite alternate; }
.fa .van .wheel { transform-box: fill-box; transform-origin: center; animation: fa-spin .55s linear infinite; }
@keyframes fa-drive { from { left: -140px; } to { left: 100%; } }
@keyframes fa-bob { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes fa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fa .van, .fa .van .bob, .fa .van .wheel { animation: none; }
  .fa .van { left: 24px; }
}

/* Blog tiles — each carries its topic: a coloured header with the topic's
   icon, which fills solid on hover */
.fa .ptile { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.fa .ptile:hover { transform: translateY(-4px); border-color: var(--t); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.fa .ptile .head { position: relative; height: 112px; background: var(--tb); overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 18px; transition: background-color .3s var(--ease); }
.fa .ptile:hover .head { background: var(--t); }
.fa .ptile .mark { position: absolute; right: -14px; top: -10px; width: 132px; height: 132px; color: var(--t); opacity: .14; transition: color .3s var(--ease), opacity .3s var(--ease), transform .5s var(--ease); }
.fa .ptile:hover .mark { color: #ffffff; opacity: .22; transform: rotate(-8deg) scale(1.06); }
.fa .ptile .badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #ffffff; color: var(--t); box-shadow: 0 6px 14px -8px rgba(20,32,25,.35); }
.fa .ptile .badge svg { width: 24px; height: 24px; }
.fa .ptile .topic { position: relative; font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--t); transition: color .3s var(--ease); }
.fa .ptile:hover .topic { color: #ffffff; }
.fa .ptile .body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; flex: 1; }
.fa .ptile h3 { font-size: 19px; line-height: 1.3; transition: color .2s var(--ease); }
.fa .ptile:hover h3 { color: var(--t); }
.fa .ptile p { font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fa .ptile .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink500); }
.fa .ptile .read { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--t); }
.fa .ptile .read svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fa .ptile:hover .read svg { transform: translateX(4px); }

/* Hero road — the van drives past pines along the foot of the hero */
.fa .hero-road { position: relative; height: 112px; overflow: hidden; margin-top: 8px; }
.fa .hero-road .pines { position: absolute; left: 0; bottom: 20px; width: 200%; height: 70px; animation: fa-pines 60s linear infinite; }
.fa .hero-road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 26px, transparent 26px 46px); }
.fa .hero-road .van { width: 170px; bottom: 15px; animation-duration: 18s; }
@keyframes fa-pines { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* A road on a dark band */
.fa .road.on-dark { height: 76px; }
.fa .road.on-dark::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 18px, transparent 18px 34px); }

/* White button, for the one action on a blue panel */
.fa .btn-white { background: #ffffff; color: var(--b600); box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }
.fa .btn-white:hover, .fa .btn-white.is-hover { background: #e9f0fc; color: var(--b600); }

/* Pulsing call icon */
.fa .pulse { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #ffffff; color: var(--b600); flex-shrink: 0; }
.fa .pulse svg { width: 30px; height: 30px; animation: fa-ring 2.4s ease-in-out infinite; }
.fa .pulse::before, .fa .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: fa-ripple 2.4s ease-out infinite; }
.fa .pulse::after { animation-delay: 1.2s; }
@keyframes fa-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@keyframes fa-ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-14deg); } 68% { transform: rotate(12deg); } 72% { transform: rotate(-10deg); } 76% { transform: rotate(8deg); } 80% { transform: rotate(0); } }
.fa .bigtel { font: 800 clamp(34px, 4.2vw, 56px)/1 var(--display); letter-spacing: -.02em; color: #ffffff; text-decoration: none; }
.fa .bigtel:hover { color: #ffffff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.fa .when { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #ffffff; font: 600 13px/1 var(--body); }

/* Since-1994 seal */
.fa .seal { position: absolute; width: 168px; height: 168px; border-radius: 50%; background: #004713; box-shadow: 0 22px 44px -22px rgba(0,36,11,.65), inset 0 0 0 6px #004713, inset 0 0 0 8px rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; }
.fa .seal svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: fa-turn 40s linear infinite; }
.fa .seal .core { display: flex; flex-direction: column; align-items: center; color: #ffffff; line-height: 1; }
@keyframes fa-turn { to { transform: rotate(360deg); } }

/* Treeline */
.fa .treeline { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; color: #004713; opacity: .08; }

/* Quick actions bar */
.fa .qbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: #ffffff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 40px -28px rgba(20,32,25,.4); overflow: hidden; }
.fa .qbar a { display: flex; align-items: center; gap: 14px; padding: 22px 24px; color: inherit; text-decoration: none; border-left: 1px solid var(--line); transition: background-color .2s var(--ease); }
.fa .qbar a:first-child { border-left: 0; }
.fa .qbar a:hover { background: var(--f50); color: inherit; text-decoration: none; }
.fa .qbar a:hover .itile { background: var(--f700); color: #ffffff; }
.fa .qbar .lbl { display: flex; flex-direction: column; gap: 3px; }
.fa .qbar strong { font: 700 17px/1.2 var(--display); color: var(--ink900); }
.fa .qbar small { font-size: 14px; color: var(--ink500); }
.fa .qbar .arrow { margin-left: auto; width: 18px; height: 18px; color: var(--f700); transition: transform .2s var(--ease); }
.fa .qbar a:hover .arrow { transform: translateX(4px); }

/* Footer */
.fa .fcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
/* Column titles sit level with the middle of the 104px logo that heads the
   brand column, so the logo and the four titles read as one row; a short sky
   rule under each title starts its list. */
.fa .fhead { display: flex; flex-direction: column; gap: 14px; padding-top: 46px; font: 700 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #ffffff; text-wrap: nowrap; }
.fa .fhead::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--s500); }
.fa .flist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
/* Links start flush with their column title; on hover a sky dot appears in
   the gutter and the link steps right to meet it. */
.fa .flist .flink { position: relative; display: inline-block; transition: color .2s var(--ease), transform .2s var(--ease); }
.fa .flist .flink::before { content: ""; position: absolute; left: -14px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--s500); opacity: 0; transform: scale(0); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.fa .flist .flink:hover { transform: translateX(6px); text-decoration: none; }
.fa .flist .flink:hover::before { opacity: 1; transform: scale(1); }
.fa .totop { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #ffffff; text-decoration: none; font: 600 14px/1 var(--body); }
.fa .totop:hover { background: #ffffff; color: var(--f900); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .fa .hero-road .pines, .fa .pulse svg, .fa .pulse::before, .fa .pulse::after, .fa .seal svg.ring { animation: none; }
}

/* Service-area city picker */
.fa .city { display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff; color: var(--ink900); font: 600 15px/1.2 var(--body); text-align: left; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.fa .city svg { width: 16px; height: 16px; color: var(--f700); flex-shrink: 0; transition: color .18s var(--ease); }
.fa .city:hover { border-color: var(--f700); color: var(--f700); transform: translateY(-1px); }
.fa .city.is-active { background: var(--f700); border-color: var(--f700); color: #ffffff; }
.fa .city.is-active svg { color: var(--s300); }

/* Responsive helpers for the page artboards */
.fa .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.fa .show-md { display: none !important; }
@media (max-width: 960px) {
  .fa .hide-md { display: none !important; }
  .fa .show-md { display: inline-flex !important; }
}
@media (max-width: 640px) {
  .fa .wrap { padding: 0 20px; }
}

/* Cool Club — a members-only panel rather than another white section: deep
   blue, the perks as a checklist, and the membership card held up over the
   Skyway photo with a second card behind it and a slow light sweep. */
.fa .cc-panel { position: relative; display: flex; flex-wrap: wrap; border-radius: 28px; overflow: hidden; background: var(--b600); box-shadow: 0 40px 80px -40px rgba(20, 40, 90, .6); }
.fa .cc-copy { position: relative; flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(36px, 4.5vw, 64px); }
.fa .cc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--s500); color: var(--b800); font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.fa .cc-perks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.fa .cc-perks li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.4; color: #ffffff; }
.fa .cc-perks strong { font-weight: 700; color: #ffffff; }
.fa .cc-tick { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(43, 182, 236, .18); color: var(--s300); display: inline-flex; align-items: center; justify-content: center; }
.fa .cc-tick svg { width: 15px; height: 15px; }
.fa .cc-media { position: relative; flex: 1 1 440px; min-height: 460px; }
.fa .cc-card { position: absolute; left: 36px; bottom: 36px; width: 300px; height: 184px; border-radius: 18px; background: #ffffff; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 30px 50px -22px rgba(10, 25, 60, .65); animation: fa-float 6s ease-in-out infinite; }
.fa .cc-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); transform: skewX(-18deg); animation: fa-sheen 5s ease-in-out infinite; }
.fa .cc-card-back { background: var(--s500); transform: rotate(5deg) translate(18px, -10px); box-shadow: 0 20px 40px -24px rgba(10, 25, 60, .6); animation: none; }
.fa .cc-card-back::after { display: none; }
.fa .cc-chip { width: 36px; height: 26px; border-radius: 6px; background: var(--s50); border: 1px solid #cfe6f4; }
@keyframes fa-float { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }
@keyframes fa-sheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .fa .cc-card, .fa .cc-card::after { animation: none; } }
/* A stat that is also a link (the Google rating): no underline, a light lift on hover. */
.fa a.stat-link { color: inherit; text-decoration: none; border-radius: 14px; transition: background-color .2s var(--ease); }
.fa a.stat-link:hover { background: var(--f50); }
.fa a.stat-link:focus-visible { outline: 2px solid var(--s500); outline-offset: -2px; }

/* Booking — every "Book Online" / "Schedule Service" on the site. The one
   action we most want taken, so it is the one blue button among the green
   ones: brand blue with a calendar mark and heavier type. On the blue panels
   (emergency) it goes to the navy of the top bar so it still stands off
   the background. */
.fa .btn-book { background: var(--b600); color: #ffffff; font-weight: 800; box-shadow: 0 12px 24px -12px rgba(31, 69, 136, .75); }
.fa .btn-book:hover, .fa .btn-book.is-hover { background: var(--b800); color: #ffffff; transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(31, 69, 136, .85); }
:is(.fa .on-blue, .fa.on-blue) .btn-book { background: #142f5e; color: #ffffff; box-shadow: 0 12px 24px -12px rgba(5, 15, 35, .8); }
:is(.fa .on-blue, .fa.on-blue) .btn-book:hover, :is(.fa .on-blue, .fa.on-blue) .btn-book.is-hover { background: #0e2244; color: #ffffff; }
/* In the header it is the logo's light sky blue, the one place that colour
   is used on a button, so the main booking action jumps off the blue bar. */
.fa header.on-blue .btn-book { background: var(--s500); color: var(--f950); box-shadow: 0 10px 22px -12px rgba(5, 15, 35, .7); }
.fa header.on-blue .btn-book:hover { background: var(--s300); color: var(--f950); }

/* Phone services: all six as a two-up grid of photo tiles, so the list is
   complete at a glance rather than a strip of tabs that runs off the edge. */
.fa .mtile { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #ffffff; color: var(--ink900); text-decoration: none; box-shadow: 0 16px 30px -18px rgba(10, 25, 60, .6); }
.fa .mtile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fa .mtile-body { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 12px 12px 14px; }
.fa .mtile strong { font: 700 14px/1.25 var(--display); color: var(--ink900); }
.fa .mtile .go-arrow { flex-shrink: 0; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--f50); color: var(--f700); }
.fa .mtile:hover .go-arrow { background: var(--f700); color: #ffffff; }

/* ---------------------------------------------------------------------------
   Interaction — the signature hover layer used everywhere.
   Buttons lift, a band of light sweeps across them and their icon gives a
   small nudge. Cards lift and draw a brand rule along their foot while their
   photo eases in. Small things (city chips, social icons, back to top) each
   get one bit of motion that says what they do. All of it switches off for
   visitors who ask for reduced motion.
   ------------------------------------------------------------------------- */
.fa .btn { position: relative; overflow: hidden; isolation: isolate; }
.fa .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0)); transform: skewX(-20deg); pointer-events: none; z-index: 1; transition: left .7s var(--ease); }
.fa .btn:hover::after, .fa .btn.is-hover::after { left: 135%; }
.fa .btn:hover, .fa .btn.is-hover { transform: translateY(-2px); }
.fa .btn:active { transform: translateY(0) scale(.98); }
.fa .btn svg { transition: transform .3s var(--ease); }
.fa .btn:hover svg, .fa .btn.is-hover svg { animation: fa-nudge .55s var(--ease); }
@keyframes fa-nudge { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(8deg) scale(1.12); } 100% { transform: rotate(0) scale(1); } }

.fa .card, .fa .ptile, .fa .mtile, .fa .review { background-image: linear-gradient(var(--rule, var(--f700)), var(--rule, var(--f700))); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 3px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-size .45s var(--ease); }
.fa .card:hover, .fa .card.is-hover, .fa .ptile:hover, .fa .mtile:hover, .fa .review:hover { background-size: 100% 3px; }
.fa .ptile { --rule: var(--t); }
.fa .mtile { --rule: var(--b600); }
.fa .mtile:hover { transform: translateY(-3px); }
.fa .card { overflow: hidden; }
.fa .mtile:hover .go-arrow { transform: translateX(3px); }
.fa .mtile .go-arrow { transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }

.fa .review { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-size .45s var(--ease); }
.fa .review:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .55); }
.fa .review .gmark { transition: transform .5s var(--ease); }
.fa .review:hover .gmark { transform: rotate(360deg); }

.fa .ph { overflow: hidden; }
/* Photos are never zoomed or cropped in on hover; cards lift instead. */

.fa .city svg { transition: color .18s var(--ease), transform .3s var(--ease); }
.fa .city:hover svg { animation: fa-hop .5s var(--ease); }
@keyframes fa-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }

.fa .ibtn { transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .2s var(--ease); }
.fa .ibtn:hover { transform: translateY(-2px) rotate(-6deg); }
.fa .totop svg { transition: transform .25s var(--ease); }
.fa .totop:hover svg { transform: translateY(-3px); }
.fa .brand { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .25s var(--ease); }
.fa .brand:hover { transform: translateY(-3px); }
.fa .qbar .itile { transition: background-color .2s var(--ease), color .2s var(--ease), transform .3s var(--ease); }
.fa .qbar a:hover .itile { transform: translateY(-2px) rotate(-6deg); }
.fa .svc-tab .itile { transition: background-color .2s var(--ease), color .2s var(--ease), transform .3s var(--ease); }
.fa .svc-tab:hover .itile { transform: scale(1.08); }
.fa .nav a::after { transform-origin: center; }
.fa .tel svg { transition: transform .3s var(--ease); }
.fa .tel:hover svg { animation: fa-nudge .55s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .fa .btn::after { display: none; }
  .fa .btn:hover svg, .fa .tel:hover svg, .fa .city:hover svg { animation: none; }
  .fa .btn:hover, .fa .card:hover, .fa .mtile:hover, .fa .review:hover, .fa .brand:hover, .fa .ibtn:hover, .fa .flist .flink:hover { transform: none; }
  .fa .card:hover img, .fa .mtile:hover img, .fa .ph:hover img, .fa .review:hover .gmark { transform: none; }
}
/* Phone brand strip: three across, shorter tiles. */
.fa .mbrands .brand { height: 60px; padding: 0 10px; border-radius: 12px; }
.fa .mbrands .brand img { max-height: 30px; }

/* ---------------------------------------------------------------------------
   WordPress adapters — markup WordPress writes for us (menus, the drawer).
   ------------------------------------------------------------------------- */
.fa .nav > ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.fa .nav li { position: relative; }
.fa .nav li.current-menu-item > a::after,
.fa .nav li.current_page_item > a::after,
.fa .nav li.current-menu-ancestor > a::after { transform: scaleX(1); }
.fa .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fa .logo img { display: block; height: 60px; width: auto; }
@media (max-width: 640px) { .fa .logo img { height: 46px; } }
.fa .flist a { font-size: 15px; }
.fa .flist .sub-menu { display: none; }
.fa .totop svg { width: 16px; height: 16px; }
.fa .hero-m { display: none; }
@media (max-width: 960px) { .fa .hero-m { display: block; } }
.fa .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; background: #ffffff; border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -16px rgba(20, 32, 25, .35); }
@media (max-width: 960px) {
  .fa .sticky-cta { display: grid; }
  body { padding-bottom: 68px; }
  /* Housecall Pro's chat bubble pins itself to the bottom corner with an
     inline style; lift it above the Call / Book Online bar. */
  #proChatIframeContainer { bottom: 68px !important; }
}

/* Section pieces that only make sense at one size: the services explorer
   on desktop and tablet, its photo-tile grid on phones. */
.fa .only-phone { display: none !important; }
@media (max-width: 760px) {
  .fa .only-desk { display: none !important; }
  .fa .only-phone { display: grid !important; }
  .fa a.only-phone { display: flex !important; }
}
.fa a.city { text-decoration: none; }
.fa .fa-prose p { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.fa .fa-prose p:last-child { margin-bottom: 0; }

/* The theme's Tailwind reset sets headings to font-weight: inherit; the
   design's headings are bold unless a heading says otherwise. */
.fa h1, .fa h2, .fa h3, .fa h4 { font-weight: 700; }
@media (max-width: 640px) { .fa .stat-lbl { white-space: normal !important; } }
.fa .topbar-link { color: #ffffff; text-decoration: none; }
.fa .topbar-link:hover { color: var(--s300); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Article page. The body comes from the editor, so it is styled from its
   wrapper rather than with classes on its tags.
   ------------------------------------------------------------------------- */
.fa .fa-article-body { display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.75; color: var(--ink700); }
.fa .fa-article-body > * { margin: 0; }
.fa .fa-article-body > p:first-child { font-size: 20px; line-height: 1.65; color: var(--ink900); }
.fa .fa-article-body h2 { font-size: 28px; line-height: 1.25; font-weight: 800; margin-top: 18px; scroll-margin-top: 90px; }
.fa .fa-article-body h2.is-numbered { display: flex; gap: 14px; align-items: flex-start; }
.fa .fa-article-body h2 .h-n { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--f700); color: #ffffff; font: 800 17px/38px var(--display); text-align: center; }
.fa .fa-article-body h3 { font-size: 21px; line-height: 1.3; font-weight: 800; margin-top: 8px; }
.fa .fa-article-body ul, .fa .fa-article-body ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.fa .fa-article-body ul { list-style: disc; }
.fa .fa-article-body ol { list-style: decimal; }
.fa .fa-article-body li::marker { color: var(--f700); }
.fa .fa-article-body blockquote { border-left: 4px solid var(--s500); padding: 4px 0 4px 20px; font-style: italic; color: var(--ink900); }
.fa .fa-article-body img { max-width: 100%; height: auto; border-radius: 18px; }
.fa .fa-article-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fa .fa-article-body th, .fa .fa-article-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.fa .fa-article-body th { background: var(--f50); color: var(--ink900); }
.fa .fa-article-body .faq-list { display: flex; flex-direction: column; }

.fa .fa-callout { background: var(--b600); border-radius: 20px; padding: 28px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin: 14px 0; }
.fa .fa-callout__text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fa .fa-callout__text strong { font: 800 22px/1.2 var(--display); color: #ffffff; }
.fa .fa-callout__text span { font-size: 15px; line-height: 1.6; color: #ffffff; }

@media (min-width: 961px) { .fa .fa-article-aside { position: sticky; top: 24px; } }

.fa-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70; pointer-events: none; }
.fa-progress__bar { display: block; height: 100%; background: var(--s500, #2bb6ec); transform: scaleX(0); transform-origin: left; }
.fa a.filter { text-decoration: none; color: var(--ink900); }
.fa a.filter.is-active { color: #ffffff; }
.fa .post-meta svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink500); }
.fa .post-meta > span { white-space: nowrap; }

/* ===========================================================================
   Inner pages
   ========================================================================= */

/* Section heads */
.fa .sec-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.fa .sec-head--center { align-items: center; text-align: center; margin: 0 auto; }
.fa .sec-head--center .eyebrow::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.fa .sec-title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; font-weight: 800; }
.fa .sec-lead { font-size: 17px; line-height: 1.6; color: var(--ink700); }
:is(.fa .dark, .fa.dark) .sec-lead { color: #ffffff; }
:is(.fa .sec, .fa.sec) { padding: clamp(56px, 8vw, 104px) 0; }
:is(.fa .sec--tint, .fa.sec--tint) { background: var(--f50); }

/* Scroll reveal: sections and cards rise in once as they arrive. The hidden
   state is only applied once js/design.js has run (html.fa-js), so nothing
   is ever stranded invisible. */
html.fa-js .fa [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
html.fa-js .fa [data-reveal].is-in { opacity: 1; transform: none; }
html.fa-js .fa [data-reveal-group] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
html.fa-js .fa [data-reveal-group].is-in > * { opacity: 1; transform: none; }
html.fa-js .fa [data-reveal-group].is-in > *:nth-child(2) { transition-delay: .08s; }
html.fa-js .fa [data-reveal-group].is-in > *:nth-child(3) { transition-delay: .16s; }
html.fa-js .fa [data-reveal-group].is-in > *:nth-child(4) { transition-delay: .24s; }
html.fa-js .fa [data-reveal-group].is-in > *:nth-child(5) { transition-delay: .32s; }
html.fa-js .fa [data-reveal-group].is-in > *:nth-child(6) { transition-delay: .40s; }
html.fa-js .fa [data-reveal-group].is-in > *:nth-child(n+7) { transition-delay: .46s; }

/* Content teaser: photo in a frame with an offset brand block behind it */
.fa .tease { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.fa .tease--right .tease-media { order: 2; }
.fa .tease-media { position: relative; flex: 1 1 420px; min-width: 0; }
.fa .tease-media::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 26px; background: var(--b600); opacity: .12; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.fa .tease--right .tease-media::before { inset: 22px 22px -22px -22px; background: var(--f700); }
.fa .tease-media:hover::before { transform: translate(-6px, -6px); opacity: .2; }
.fa .tease-frame { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(20, 32, 25, .5); }
.fa .tease-frame img { display: block; width: 100%; height: auto; }
.fa .tease-body { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fa .tease-product { position: relative; flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.fa .tease-product img { max-height: 360px; width: auto; max-width: 100%; animation: fa-float-soft 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(0, 36, 11, .25)); }
.fa .tease-product::before { content: ""; position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(43, 182, 236, .22), rgba(43, 182, 236, 0) 70%); }
@keyframes fa-float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fa .tease-band { position: relative; border-radius: 28px; overflow: hidden; background: var(--f50); padding: clamp(32px, 5vw, 64px); }

/* Prose from the editor */
.fa .fa-prose { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.7; color: var(--ink700); }
.fa .fa-prose > * { margin: 0; }
.fa .fa-prose ul { list-style: disc; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.fa .fa-prose li::marker { color: var(--f700); }
:is(.fa .dark, .fa.dark) .fa-prose { color: #ffffff; }

/* Checklist with ticks that pop in */
.fa .checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fa .checks li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #ffffff; border: 1px solid var(--line); font: 600 15.5px/1.45 var(--body); color: var(--ink900); transition: border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.fa .checks li:hover { border-color: var(--f700); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(0, 48, 15, .5); }
.fa .checks .tk { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--f700); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .checks .tk svg { width: 14px; height: 14px; }
.fa .checks--one { grid-template-columns: 1fr; }

/* Process steps: numbered circles on a dashed track */
.fa .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; counter-reset: step; position: relative; }
.fa .step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 26px; border-radius: 22px; background: #ffffff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.fa .step:hover { transform: translateY(-4px); border-color: var(--b600); box-shadow: 0 24px 44px -28px rgba(31, 69, 136, .55); }
.fa .step-n { width: 56px; height: 56px; border-radius: 50%; background: var(--b600); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font: 800 22px/1 var(--display); box-shadow: 0 0 0 6px rgba(42, 90, 174, .14); transition: transform .4s var(--ease); }
.fa .step:hover .step-n { transform: rotate(-8deg) scale(1.06); }
.fa .step h3 { font-size: 20px; line-height: 1.25; font-weight: 800; margin-top: 6px; }
.fa .step p { font-size: 15px; line-height: 1.6; color: var(--ink700); }
.fa .step-track { position: absolute; left: 6%; right: 6%; top: 56px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); z-index: 0; }
.fa .steps > li { z-index: 1; }

/* Icon cards (service alerts, why-choose v2) */
.fa .icards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.fa .icard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border-radius: 20px; background: #ffffff; border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.fa .icard::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--f50); transition: transform .5s var(--ease), background-color .3s var(--ease); z-index: 0; }
.fa .icard > * { position: relative; z-index: 1; }
.fa .icard:hover { transform: translateY(-4px); border-color: var(--f700); box-shadow: var(--shadow); }
.fa .icard:hover::after { transform: scale(1.6); background: #e3efe6; }
.fa .icard:hover .itile { background: var(--f700); color: #ffffff; }
.fa .icard h3 { font-size: 18px; line-height: 1.3; font-weight: 800; }
.fa .icard p { font-size: 15px; line-height: 1.6; color: var(--ink700); }
.fa .icard--row { flex-direction: row; align-items: flex-start; gap: 16px; }
.fa .icard--hi { background: var(--f700); border-color: var(--f700); }
.fa .icard--hi h3, .fa .icard--hi p { color: #ffffff; }
.fa .icard--hi .itile { background: rgba(255, 255, 255, .14); color: #ffffff; }
.fa .icard--hi::after { background: rgba(255, 255, 255, .06); }

/* Link cards (related services) */
.fa .lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fa .lcard { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); color: var(--ink900); text-decoration: none; font: 700 17px/1.3 var(--display); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.fa .lcard .go-arrow { flex-shrink: 0; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--f50); color: var(--f700); transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.fa .lcard:hover { background: var(--f700); border-color: var(--f700); color: #ffffff; transform: translateY(-2px); }
.fa .lcard:hover .go-arrow { background: #ffffff; color: var(--f700); transform: rotate(-45deg); }

/* Horizontal carousel (scroll-snap; arrows from js/design.js) */
.fa .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 40px) / 3)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 18px; scrollbar-width: none; }
.fa .rail::-webkit-scrollbar { display: none; }
.fa .rail > * { scroll-snap-align: start; }
.fa .rail-nav { display: flex; gap: 10px; }
.fa .rail-nav button[disabled] { opacity: .35; cursor: default; }
@media (max-width: 760px) { .fa .rail { grid-auto-columns: 84%; } }

/* Service cards (three-card Our Services, services slider, services v2) */
.fa .scard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 22px; background: #ffffff; border: 1px solid var(--line); color: inherit; text-decoration: none; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.fa .scard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--b600); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.fa .scard:hover { transform: translateY(-5px); border-color: var(--b600); box-shadow: 0 30px 54px -32px rgba(31, 69, 136, .55); }
.fa .scard:hover::before { transform: scaleX(1); }
.fa .scard:hover .itile { background: var(--b600); color: #ffffff; transform: rotate(-6deg); }
.fa .scard .itile { transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease); }
.fa .scard h3 { font-size: 20px; line-height: 1.25; font-weight: 800; }
.fa .scard p { font-size: 15px; line-height: 1.6; color: var(--ink700); }
.fa .scard .go { margin-top: auto; padding-top: 6px; }
.fa .scard--hi { background: var(--b600); border-color: var(--b600); }
.fa .scard--hi h3, .fa .scard--hi p, .fa .scard--hi .go { color: #ffffff; }
.fa .scard--hi .itile { background: rgba(255, 255, 255, .16); color: #ffffff; }

/* Forms (Gravity Forms inside a form card) */
.fa .form-card { position: relative; background: #ffffff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 40px 70px -46px rgba(20, 32, 25, .45); }
.fa .form-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: var(--f700); }
.fa .form-card .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .fa .form-card .gform_wrapper select, .fa .form-card .gform_wrapper textarea { border: 1.5px solid var(--line) !important; border-radius: 12px !important; padding: 12px 14px !important; font: 500 16px var(--body) !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fa .form-card .gform_wrapper input:focus, .fa .form-card .gform_wrapper select:focus, .fa .form-card .gform_wrapper textarea:focus { border-color: var(--f700) !important; box-shadow: 0 0 0 4px rgba(0, 71, 19, .12) !important; outline: 0 !important; }
.fa .form-card .gform_wrapper .gfield_label { font: 700 14px/1.3 var(--body) !important; color: var(--ink900) !important; }
.fa .form-card .gform_wrapper .gform_button, .fa .form-card .gform_wrapper input[type="submit"] { background: var(--b600) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; height: 52px; padding: 0 30px !important; font: 800 16px/1 var(--body) !important; cursor: pointer; box-shadow: 0 12px 24px -12px rgba(31, 69, 136, .75); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.fa .form-card .gform_wrapper .gform_button:hover, .fa .form-card .gform_wrapper input[type="submit"]:hover { background: var(--b800) !important; transform: translateY(-2px); }

/* Contact points */
.fa .cpoints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fa .cpoint { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #ffffff; border: 1px solid var(--line); color: var(--ink900); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
a.cpoint:hover { border-color: var(--f700); transform: translateX(4px); }
.fa .cpoint .itile { width: 44px; height: 44px; border-radius: 12px; }
.fa .cpoint .itile svg { width: 20px; height: 20px; }
.fa .cpoint small { display: block; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink500); margin-bottom: 5px; }
.fa .cpoint strong { font: 700 16px/1.4 var(--body); color: var(--ink900); }

/* Comparison table (repair vs replace) */
.fa .compare { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #ffffff; font-size: 15.5px; }
.fa .compare th, .fa .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.55; }
.fa .compare thead th { border-top: 0; font: 800 15px/1.2 var(--display); color: #ffffff; }
.fa .compare thead th:nth-child(1) { background: var(--f900); }
.fa .compare thead th:nth-child(2) { background: var(--f700); }
.fa .compare thead th:nth-child(3) { background: var(--b600); }
.fa .compare tbody th { font: 700 15px/1.4 var(--body); color: var(--ink900); background: var(--f50); width: 26%; }
.fa .compare tbody tr { transition: background-color .2s var(--ease); }
.fa .compare tbody tr:hover td { background: #fafcfa; }

/* FAQ tabs */
.fa .faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fa .faq-tabs .filter { cursor: pointer; background: #ffffff; }

/* Jobs */
.fa .job { border: 1px solid var(--line); border-radius: 20px; background: #ffffff; overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fa .job[open] { border-color: var(--f700); box-shadow: var(--shadow); }
.fa .job summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 22px 24px; }
.fa .job summary::-webkit-details-marker { display: none; }
.fa .job-body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 16px; }

/* Call link: the phone number as a filled round badge and bold digits, never
   an outlined button. Reads on white, light green, blue and dark green. */
.fa .tel-cta { display: inline-flex; align-items: center; gap: 12px; color: var(--ink900); text-decoration: none; font: 800 18px/1 var(--display); letter-spacing: .01em; }
.fa .tel-cta__badge { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--f700); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.fa .tel-cta__badge::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; color: var(--f700); opacity: 0; transform: scale(.8); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.fa .tel-cta__badge svg { width: 19px; height: 19px; }
.fa .tel-cta__num { border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .2s var(--ease), color .2s var(--ease); }
.fa .tel-cta:hover { color: var(--f700); text-decoration: none; }
.fa .tel-cta:hover .tel-cta__num { border-color: currentColor; }
.fa .tel-cta:hover .tel-cta__badge { transform: rotate(-10deg); }
.fa .tel-cta:hover .tel-cta__badge::after { opacity: .35; transform: scale(1); }
.fa .tel-cta:hover .tel-cta__badge svg { animation: fa-nudge .55s var(--ease); }
:is(.fa .dark, .fa.dark) .tel-cta { color: #ffffff; }
:is(.fa .dark, .fa.dark) .tel-cta:hover { color: var(--s300); }
:is(.fa .dark, .fa.dark) .tel-cta__badge { background: #ffffff; color: var(--b600); }
:is(.fa .dark, .fa.dark) .tel-cta__badge::after { color: #ffffff; }

/* Get Started's three ticks share one line on desktop. */
@media (min-width: 1100px) { .fa .ticks-row { flex-wrap: nowrap !important; } }

/* Header dropdowns: a white card with a caret, rounded rows that fill light
   green and step right on hover, and a chevron on the parent item that turns
   as the menu opens. Doubled ids so these outrank the older Customizer rules
   for #primary-menu. */
html body #fa-masthead #primary-menu > li.menu-item-has-children { padding-right: 14px; }
html body #fa-masthead #primary-menu > li.menu-item-has-children::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid rgba(255,255,255,.8); border-bottom: 2px solid rgba(255,255,255,.8); transform: rotate(45deg); transition: transform .25s var(--ease), margin-top .25s var(--ease); pointer-events: none; }
html body #fa-masthead #primary-menu > li.menu-item-has-children:hover::after, html body #fa-masthead #primary-menu > li.menu-item-has-children:focus-within::after { transform: rotate(-135deg); margin-top: -1px; }
html body #fa-masthead #primary-menu .sub-menu { top: calc(100% + 10px); left: 50%; min-width: 260px; padding: 8px; border-radius: 16px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(8, 22, 60, .45); transform: translate(-50%, 10px); }
html body #fa-masthead #primary-menu li.menu-item-has-children:hover > .sub-menu, html body #fa-masthead #primary-menu li.menu-item-has-children:focus-within > .sub-menu { transform: translate(-50%, 0); }
html body #fa-masthead #primary-menu .sub-menu::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; background: #ffffff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
html body #fa-masthead #primary-menu .sub-menu::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
html body #fa-masthead #primary-menu .sub-menu li { position: relative; }
html body #fa-masthead #primary-menu .sub-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: var(--ink900) !important; font: 600 15px/1.3 var(--body); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
html body #fa-masthead #primary-menu .sub-menu a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s500); opacity: 0; transform: scale(0); transition: opacity .2s var(--ease), transform .2s var(--ease); flex-shrink: 0; }
html body #fa-masthead #primary-menu .sub-menu a:hover, html body #fa-masthead #primary-menu .sub-menu a:focus-visible { background: var(--f50); color: var(--f700) !important; transform: translateX(3px); }
html body #fa-masthead #primary-menu .sub-menu a:hover::before, html body #fa-masthead #primary-menu .sub-menu a:focus-visible::before { opacity: 1; transform: scale(1); }
html body #fa-masthead #primary-menu .sub-menu .current-menu-item > a { color: var(--f700) !important; background: var(--f50); }
.fa .fa-map iframe { display: block; width: 100%; height: clamp(340px, 42vw, 520px); border: 0; }
.fa .job summary .ibtn svg { transition: transform .25s var(--ease); }
.fa .job[open] summary .ibtn svg { transform: rotate(180deg); }
.fa .job[open] summary .ibtn { background: var(--f700); border-color: var(--f700); color: #ffffff; }

/* In-text links: brand blue and semi-bold, sitting on a thin sky rule that
   swells into a highlighter stroke behind the words on hover. On blue or
   green they are white on a light-sky rule. Wrapped links carry the rule on
   every line. */
.fa a:not([class]), .fa a.link {
  color: var(--b600);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(rgba(43, 182, 236, .45), rgba(43, 182, 236, .45));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding: 0 1px 1px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
.fa a:not([class]):hover, .fa a.link:hover, .fa a.link.is-hover, .fa a:not([class]):focus-visible {
  color: var(--b800);
  text-decoration: none;
  background-size: 100% 42%;
}
:is(.fa .dark, .fa.dark) a:not([class]), :is(.fa .dark, .fa.dark) a.link {
  color: #ffffff;
  background-image: linear-gradient(rgba(127, 211, 245, .6), rgba(127, 211, 245, .6));
}
:is(.fa .dark, .fa.dark) a:not([class]):hover, :is(.fa .dark, .fa.dark) a.link:hover {
  color: #ffffff;
  background-image: linear-gradient(rgba(127, 211, 245, .35), rgba(127, 211, 245, .35));
  background-size: 100% 46%;
}

/* Heroes: the copy stays clear of the diagonal photo on mid-size screens */
@media (min-width: 961px) and (max-width: 1260px) {
  .fa .hero-copy { max-width: 40vw !important; }
}

/* Inner hero: one compact height everywhere — the hero carries the intro's
   opening sentence; the rest follows in a white lede card that overlaps the
   hero's lower edge */
.fa .hero-lead p { margin: 0; font-size: 18px; line-height: 1.55; }
.fa.hero-lede { position: relative; z-index: 2; margin-top: -30px; padding-bottom: clamp(8px, 2vw, 24px); }
.fa .lede-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px clamp(28px, 4vw, 56px); background: #ffffff; border-radius: 20px; padding: 24px clamp(22px, 3vw, 36px) 24px clamp(22px, 2.6vw, 32px); border-left: 5px solid var(--b600); box-shadow: 0 24px 48px -30px rgba(8, 22, 60, .42), 0 0 0 1px rgba(20, 32, 25, .05); }
.fa .lede-text { max-width: 68ch; }
.fa .lede-proof { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); }
@media (max-width: 760px) { .fa .lede-card { grid-template-columns: 1fr; } .fa .lede-proof { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
.fa .lede-text { color: #2b3a31; font-size: 17px; line-height: 1.65; }
.fa .lede-text p { margin: 0; }
.fa .lede-text p + p { margin-top: .55em; }
@media (max-width: 640px) {
  .fa.hero-lede { margin-top: -22px; }
  .fa .lede-card { padding: 18px 20px; }
}

/* ── Service pages, round two ─────────────────────────────────────────── */

/* Warning signs: numbered cards (no corner disc), blue on hover */
.fa .icard::after { content: none; }
.fa .icard { border-top: 3px solid transparent; }
.fa .icard-n { position: absolute; top: 14px; right: 18px; font: 800 44px/1 var(--display); letter-spacing: -.02em; color: rgba(42, 90, 174, .1); transition: color .3s var(--ease), transform .4s var(--ease); pointer-events: none; }
.fa .icard:hover { border-color: var(--line); border-top-color: var(--b600); }
.fa .icard:hover .icard-n { color: rgba(42, 90, 174, .2); transform: translateY(-2px); }
.fa .icard:hover .itile { background: var(--b600); color: #ffffff; }
.fa .icard h3 { padding-right: 46px; }
.fa .signs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 18px 22px 18px 18px; border-radius: 20px; background: var(--f50); border: 1px solid rgba(0, 71, 19, .1); }
.fa .signs-bar p { display: flex; align-items: center; gap: 14px; margin: 0; font: 800 20px/1.3 var(--display); color: var(--ink900); }
.fa .signs-bar .itile { background: #ffffff; }
.fa .signs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* What's included: head + uncropped photo | checklist card */
.fa .incl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.fa .incl-side { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 961px) { .fa .incl-side { position: sticky; top: 120px; } }
.fa .incl-photo { position: relative; }
.fa .incl-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 24px; background: var(--b600); opacity: .1; }
.fa .incl-photo img { position: relative; display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(20, 32, 25, .5); }
.fa .incl-card { background: #ffffff; border: 1px solid var(--line); border-radius: 24px; padding: 10px clamp(18px, 2.6vw, 30px) 16px; box-shadow: 0 30px 60px -44px rgba(20, 32, 25, .45); }
.fa .incl-count { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; border-bottom: 2px solid var(--f700); font: 800 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--f700); }
.fa .incl-num { width: 40px; height: 40px; border-radius: 50%; background: var(--f700); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; letter-spacing: 0; }
.fa .incl-list { list-style: none; margin: 0; padding: 0; }
.fa .incl-list li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 6px; border-bottom: 1px solid var(--line); font: 600 16.5px/1.5 var(--body); color: var(--ink900); transition: background-color .2s var(--ease), padding .25s var(--ease); border-radius: 10px; }
.fa .incl-list li:last-child { border-bottom: 0; }
.fa .incl-list li:hover { background: var(--f50); padding-left: 12px; }
.fa .incl-list .tk { flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--f700); color: var(--f700); display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .incl-list .tk svg { width: 13px; height: 13px; }
.fa .incl-list li:hover .tk { background: var(--f700); color: #ffffff; }
.fa .incl--solo { grid-template-columns: 1fr; }
@media (min-width: 761px) { .fa .incl--solo .incl-list { columns: 2; column-gap: 32px; } .fa .incl--solo .incl-list li { break-inside: avoid; } }
@media (max-width: 960px) { .fa .incl { grid-template-columns: 1fr; } }

/* How it works: the van drives the road above the steps, lighting each pin */
@media (min-width: 961px) { .fa .journey-wrap .steps { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
.fa .step-track { display: none; }
.fa .journey { position: relative; height: 92px; margin-bottom: 4px; }
.fa .journey-road { position: absolute; left: 0; right: 0; bottom: 12px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #c9d6cb 0 20px, transparent 20px 36px); }
.fa .journey-stop { position: absolute; bottom: 30px; left: calc((var(--i) - .5) / var(--n) * 100%); width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: #ffffff; border: 2px solid var(--line); color: #9aa8a0; display: flex; align-items: center; justify-content: center; transform: scale(.82); transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s var(--ease); transition-delay: calc((var(--i) - .5) / (var(--n) - .5) * 2.3s + .2s); }
.fa .journey-stop::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 16px; margin-left: -1px; background: var(--line); }
.fa .journey-stop svg { width: 17px; height: 17px; }
.fa .journey.is-in .journey-stop { background: var(--f700); border-color: var(--f700); color: #ffffff; transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 71, 19, .12); }
.fa .journey .van { left: 0; bottom: 12px; width: 120px; z-index: 2; animation: none; transition: left 2.6s cubic-bezier(.5, .05, .3, 1); }
.fa .journey .van .bob, .fa .journey .van .wheel { animation: none; }
.fa .journey.is-in .van { left: calc((var(--n) - .5) / var(--n) * 100% - 150px); }
.fa .journey.is-in .van .wheel { animation: fa-spin .55s linear 5; }
.fa .journey.is-in .van .bob { animation: fa-bob .45s ease-in-out 6 alternate; }
.fa .sec--tint .journey-stop, .fa.sec--tint .journey-stop { background: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  .fa .journey .van { transition: none; left: calc((var(--n) - .5) / var(--n) * 100% - 150px); }
  .fa .journey-stop { transition: none; background: var(--f700); border-color: var(--f700); color: #ffffff; transform: none; }
}

/* Keep exploring: related pages + blog guides */
.fa .explore-guides { display: flex; flex-direction: column; gap: 20px; }
.fa .explore-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.fa .explore-label { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 800 22px/1.2 var(--display); color: var(--ink900); }
.fa .explore-label svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #e9eff9; color: var(--b600); }
.fa .ptiles-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.fa.explore .wrap > div:first-child:only-child .explore-bar { border-top: 0; padding-top: 0; }

/* The footer's call-to-action strip repeats the Get Started block word for
   word; on pages that already end with that block, it steps aside. */
body:has(#fa-get-started) #fa-footer .fcta { display: none; }

/* ── Service area pages ───────────────────────────────────────────────── */

/* What's included: a tall photo is shown whole, just smaller */
.fa .incl-photo { align-self: flex-start; max-width: 100%; }
.fa .incl-photo img { width: auto; max-width: 100%; max-height: 440px; }

/* Benefits (cards with no icons or links): one blue band, ticks between rules */
.fa .bband { list-style: none; margin: 0; padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 30px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-radius: 24px; background: var(--b600); color: #ffffff; box-shadow: 0 30px 60px -36px rgba(31, 69, 136, .7); }
.fa .bband li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; align-items: start; padding: 10px clamp(14px, 2.4vw, 28px); border-left: 1px solid rgba(255, 255, 255, .22); }
.fa .bband li:first-child { border-left: 0; }
.fa .bband .tk { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: #ffffff; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; transition: transform .35s var(--ease); }
.fa .bband .tk svg { width: 16px; height: 16px; }
.fa .bband li:hover .tk { transform: rotate(-10deg) scale(1.08); }
.fa .bband h3 { margin: 0; font: 800 20px/1.25 var(--display); color: #ffffff; }
.fa .bband p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
@media (max-width: 760px) { .fa .bband li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding: 16px 4px; } .fa .bband li:first-child { border-top: 0; } }

/* Keep exploring: the area's own page leads the list, marked with a pin */
.fa .lcard--hub { justify-content: flex-start; background: var(--f50); border-color: rgba(0, 71, 19, .14); }
.fa .lcard--hub .go-arrow { margin-left: auto; background: #ffffff; }
.fa .lcard--hub .hub-pin { flex-shrink: 0; width: 20px; height: 20px; color: var(--f700); }
.fa .lcard--hub:hover .hub-pin { color: #ffffff; }

/* Text pages (Privacy Policy): sticky contents beside a readable card */
.fa .legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 56px); align-items: start; }
.fa .legal-toc { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: #ffffff; border: 1px solid var(--line); }
.fa .legal-toc-label { font: 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--f700); }
.fa .legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.fa .legal-toc li { counter-increment: toc; }
.fa .legal-toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink700); text-decoration: none; font: 600 15px/1.35 var(--body); background: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .legal-toc a::before { content: counter(toc, decimal-leading-zero); font: 800 12px/1.6 var(--display); color: var(--b600); opacity: .7; }
.fa .legal-toc a:hover { background: var(--f50); color: var(--f700); }
.fa .legal-card { max-width: 780px; background: #ffffff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px, 4vw, 52px); box-shadow: 0 30px 60px -48px rgba(20, 32, 25, .45); display: block; }
.fa .legal-card h2 { scroll-margin-top: 120px; margin: 1.8em 0 .5em; font: 800 clamp(22px, 2.2vw, 26px)/1.25 var(--display); color: var(--ink900); }
.fa .legal-card h2:first-child { margin-top: 0; }
.fa .legal-card p { margin: 0 0 1em; }
.fa .legal-card ul { margin: 0 0 1em; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fa .legal-card li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.6; color: var(--ink700); }
.fa .legal-card li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--f700); }
@media (max-width: 960px) { .fa .legal { grid-template-columns: 1fr; } .fa .legal-toc { position: static; } }

/* CTA band: the hero's diagonal split — copy on brand colour, photo behind a
   sky-blue stripe on the right */
.fa .cband { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 360px; border-radius: 28px; box-shadow: 0 34px 64px -38px rgba(8, 22, 60, .7); }
.fa .cband-copy { position: relative; z-index: 1; width: 56%; padding: clamp(30px, 4.5vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.fa .cband-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 52%; background: #ffffff; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.fa .cband-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(17.4% 0, 100% 0, 100% 100%, 1.4% 100%); }
@media (max-width: 760px) {
  .fa .cband { display: block; min-height: 0; }
  .fa .cband-photo { position: relative; width: 100%; height: 220px; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); background: none; }
  .fa .cband-photo img { clip-path: none; }
  .fa .cband-copy { width: auto; }
}

/* Cards on a dark band keep light-section icon tiles (readable on white) */
:is(.fa .dark, .fa.dark) :is(.scard, .icard:not(.icard--hi), .step) .itile { background: #e9eff9; color: var(--b600); }
:is(.fa .dark, .fa.dark) .scard:hover .itile { background: var(--b600); color: #ffffff; }

/* A carousel with more to see fades out at its right edge */
.fa .rail.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 90px), transparent); }
.fa .rail-nav[hidden] { display: none; }

/* How it works, live: the script drives the van between the stops */
.fa .journey.is-live .journey-stop { transition-delay: 0s; background: #ffffff; border-color: var(--line); color: #9aa8a0; transform: scale(.82); box-shadow: none; cursor: pointer; }
.fa .journey.is-live .journey-stop.is-on { background: var(--f700); border-color: var(--f700); color: #ffffff; transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 71, 19, .12); }
.fa .journey.is-live .journey-stop.is-current { transform: scale(1.14); box-shadow: 0 0 0 9px rgba(0, 71, 19, .16); }
.fa .journey.is-live .van { transition-property: left; transition-timing-function: cubic-bezier(.45, .05, .3, 1); }
.fa .journey.is-live .van .wheel, .fa .journey.is-live .van .bob { animation: none; }
.fa .journey.is-live .van.is-driving .wheel { animation: fa-spin .55s linear infinite; }
.fa .journey.is-live .van.is-driving .bob { animation: fa-bob .45s ease-in-out infinite alternate; }
.fa .journey .van.is-flipped svg, .fa .journey .van.is-flipped { transform: scaleX(-1); }
.fa .journey-wrap .step.is-current { border-color: var(--b600); transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(31, 69, 136, .55); }
.fa .journey-wrap .step.is-current .step-n { background: var(--f700); box-shadow: 0 0 0 6px rgba(0, 71, 19, .14); }
.fa .journey-wrap .step .step-n { transition: transform .4s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }

/* Google rating badge */
.fa .rating-badge { display: inline-flex; align-items: center; gap: 14px; color: var(--ink900); text-decoration: none; background: none; white-space: nowrap; }
.fa .rating-badge img { width: 36px; height: 36px; flex-shrink: 0; transition: transform .5s var(--ease); }
.fa .rating-badge:hover img { transform: rotate(360deg); }
.fa .rating-badge__body { display: flex; flex-direction: column; gap: 4px; }
.fa .rating-badge__score { display: inline-flex; align-items: center; gap: 8px; font: 800 24px/1 var(--display); }
.fa .rating-badge .stars { display: inline-flex; gap: 2px; color: #f5b301; }
.fa .rating-badge .stars svg { width: 15px; height: 15px; }
.fa .rating-badge__count { font: 600 14px/1.2 var(--body); color: var(--ink700); border-bottom: 2px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
.fa .rating-badge:hover .rating-badge__count { color: var(--b600); border-color: currentColor; }

/* Call bar (Our Services v2): number and button together, the van driving
   the rest of the bar */
.fa .callbar { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px 32px; padding: 26px 32px; border-radius: 22px; background: #2a5aae; }
.fa .callbar-copy { display: flex; flex-direction: column; gap: 10px; }
.fa .callbar-road { align-self: end; margin: 0 -32px -26px 0; }
.fa .callbar-road .road { height: 84px; }
@media (max-width: 960px) { .fa .callbar { grid-template-columns: 1fr; } }

/* Why choose us (v2) on deep green: open columns, not cards — a big sky-blue
   number, the icon, a white title and light copy, thin rules between */
.fa.why2 .rail, .fa.why2 .icards { gap: 0; }
.fa.why2 .icard { background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .16); border-radius: 0; box-shadow: none; padding: 8px clamp(18px, 2.4vw, 32px) 12px; gap: 14px; overflow: visible; }
.fa.why2 .icard:first-child { border-left: 0; padding-left: 0; }
.fa.why2 .icard:hover { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, .16); }
.fa.why2 .icard-n { position: static; order: -1; font: 800 64px/1 var(--display); color: #7fd3f5; letter-spacing: -.02em; transition: color .3s var(--ease), transform .4s var(--ease); }
.fa.why2 .icard:hover .icard-n { color: #ffffff; transform: translateX(4px); }
.fa.why2 .icard .itile { width: 48px; height: 48px; background: rgba(255, 255, 255, .1); color: #7fd3f5; }
.fa.why2 .icard:hover .itile { background: #2bb6ec; color: #ffffff; }
.fa.why2 .icard h3 { padding-right: 0; font: 800 21px/1.25 var(--display); color: #ffffff; }
.fa.why2 .icard p { color: rgba(255, 255, 255, .82); }
.fa.why2 .icard .go { color: #7fd3f5 !important; }
.fa.why2 .icard--hi .icard-n { color: #ffffff; }
.fa.why2 .icard--hi h3 { color: #7fd3f5; }
@media (max-width: 760px) { .fa.why2 .icard { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding: 22px 0; } .fa.why2 .icard:first-child { border-top: 0; } }

/* ── Reviews page wall ───────────────────────────────────────────────── */
.fa.rv .stars { display: inline-flex; gap: 2px; color: #f5b301; }
.fa.rv .stars svg { width: 18px; height: 18px; }
.fa .rv-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch; }
.fa .rv-stage { position: relative; overflow: hidden; min-height: 340px; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: var(--b600); color: #ffffff; box-shadow: 0 34px 64px -38px rgba(8, 22, 60, .7); }
.fa .rv-mark { position: absolute; right: 28px; top: -40px; font: 800 260px/1 Georgia, serif; color: rgba(255, 255, 255, .1); pointer-events: none; }
.fa .rv-slide { position: absolute; inset: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) 70px; margin: 0; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.fa .rv-slide.is-active { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
.fa .rv-stage .stars { color: #ffd34d; }
.fa .rv-pull { margin: 0; font: 800 clamp(30px, 3.6vw, 48px)/1.08 var(--display); letter-spacing: -.01em; }
.fa .rv-body { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.fa .rv-slide figcaption { display: flex; align-items: center; gap: 12px; font: 700 16px/1 var(--body); }
.fa .rv-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font: 800 16px/1 var(--display); }
.fa .rv-av svg { width: 18px; height: 18px; }
.fa .rv-stage .rv-av { background: #ffffff !important; color: var(--b600); }
.fa .rv-dots { position: absolute; left: clamp(28px, 4vw, 52px); bottom: 28px; display: flex; gap: 8px; }
.fa .rv-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .35s var(--ease), background-color .35s var(--ease); }
.fa .rv-dots button.is-active { width: 34px; background: #ffffff; }
.fa .rv-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 24px; border-radius: 28px; background: #ffffff; border: 1px solid var(--line); text-align: center; box-shadow: 0 30px 60px -44px rgba(20, 32, 25, .45); }
.fa .rv-score img { width: 44px; height: 44px; }
.fa .rv-score-num { font: 800 72px/1 var(--display); color: var(--ink900); letter-spacing: -.02em; }
.fa .rv-score .stars svg { width: 22px; height: 22px; }
.fa .rv-score-count { font: 600 15px/1.3 var(--body); color: var(--ink700); }
.fa .rv-score .btn { margin-top: 8px; }
.fa .rv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.fa .rv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #ffffff; color: var(--ink900); font: 700 15px/1 var(--body); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.fa .rv-chip span { min-width: 24px; padding: 4px 7px; border-radius: 999px; background: var(--f50); color: var(--f700); font-size: 12px; }
.fa .rv-chip:hover { border-color: var(--f700); transform: translateY(-2px); }
.fa .rv-chip.is-active { background: var(--f700); border-color: var(--f700); color: #ffffff; }
.fa .rv-chip.is-active span { background: rgba(255, 255, 255, .2); color: #ffffff; }
.fa .rv-wall { columns: 3 300px; column-gap: 20px; }
.fa .rv-card { break-inside: avoid; display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; padding: 24px; border-radius: 20px; background: #ffffff; border: 1px solid var(--line); border-top: 4px solid var(--b600); transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease); }
.fa .rv-card:nth-child(3n+2) { border-top-color: var(--f700); }
.fa .rv-card:nth-child(3n) { border-top-color: #2bb6ec; }
.fa .rv-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(20, 32, 25, .5); }
.fa .rv-card.is-hidden { display: none; }
.fa .rv-card h3 { margin: 0; font: 800 20px/1.25 var(--display); color: var(--ink900); }
.fa .rv-card blockquote { margin: 0; }
.fa .rv-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink700); }
.fa .rv-card figcaption { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--body); color: var(--ink900); }
.fa .rv-card .rv-av { width: 34px; height: 34px; font-size: 14px; }
.fa .rv-club { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
.fa .rv-club-pitch { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: #004713; }
.fa .rv-club-pitch h2 { margin: 0; font: 800 clamp(28px, 3vw, 40px)/1.08 var(--display); color: #ffffff; }
.fa .rv-club-pitch p { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.fa .rv-club-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fa .rv-club-quotes .rv-card { margin: 0; border-top-color: #004713; }
@media (max-width: 960px) {
  .fa .rv-top, .fa .rv-club { grid-template-columns: 1fr; }
  .fa .rv-club-quotes { grid-template-columns: 1fr; }
}

/* Trust bar: an open row between rules (no card); real Google and BBB marks */
.fa .tbar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fa .tbar-item { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-left: 1px solid var(--line); transition: background-color .25s var(--ease); }
.fa .tbar-item:first-child { border-left: 0; }
.fa .tbar-item:hover { background: var(--f50); }
.fa .tbar-item .itile { width: 50px; height: 50px; border-radius: 14px; background: var(--f700); color: #ffffff; transition: transform .35s var(--ease); }
.fa .tbar-item:hover .itile { transform: rotate(-8deg); }
.fa .tbar-label { display: flex; flex-direction: column; gap: 3px; font: 800 16px/1.25 var(--display); color: var(--ink900); }
.fa .tbar-label small { font: 600 12.5px/1.2 var(--body); letter-spacing: .03em; color: var(--ink500); }
.fa .tbar-logos { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fa .tbar-logos img { height: 40px; width: auto; }
.fa .tbar-logos .tbar-bbb { height: 42px; border-radius: 6px; }
.fa .tbar-item--logos { grid-column: span 1; }
@media (max-width: 760px) { .fa .tbar-item { border-left: 0; border-top: 1px solid var(--line); } .fa .tbar-item:first-child { border-top: 0; } }

/* Typography: no lone last words, balanced headings, hyphenated words kept
   whole, a two-paragraph intro set side by side */
.fa p, .fa li, .fa blockquote { text-wrap: pretty; }
.fa h1, .fa h2, .fa h3, .fa .sec-title, .fa .rv-pull { text-wrap: balance; }
.fa .nw { white-space: nowrap; }
.fa .lede-text--split { max-width: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); }
.fa .lede-text--split p + p { margin-top: 0; padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--line); margin-left: calc(-1 * clamp(12px, 1.5vw, 22px)); }
@media (max-width: 760px) { .fa .lede-text--split { grid-auto-flow: row; } .fa .lede-text--split p + p { padding-left: 0; border-left: 0; margin: .6em 0 0; } }

/* Trust bar widths follow the content: the Google / BBB cell (two marks and
   a long label) gets about twice the room, so nothing spills over */
.fa .tbar { display: flex; flex-wrap: wrap; }
.fa .tbar-item { flex: 1 1 190px; min-width: 0; }
.fa .tbar-item--logos { flex: 2.1 1 400px; }
.fa .tbar-label { min-width: 0; }
.fa .tbar-logos img { height: 34px; }
.fa .tbar-logos .tbar-bbb { height: 36px; }
@media (max-width: 760px) { .fa .tbar-item, .fa .tbar-item--logos { flex-basis: 100%; } }

/* A carousel whose cards all fit becomes a plain row (mobile still swipes) */
@media (min-width: 761px) { .fa .rail:not(.has-more) { overflow-x: visible; } }

/* Reviews: stage copy in white; the wall as open quotes, not boxed cards */
.fa .rv-stage .rv-pull, .fa .rv-stage .rv-body, .fa .rv-stage figcaption { color: #ffffff; }
.fa .rv-stage .rv-body { color: rgba(255, 255, 255, .9); }
.fa .rv-wall { column-gap: clamp(28px, 3.5vw, 48px); }
.fa .rv-card { position: relative; margin: 0 0 34px; padding: 2px 0 2px 22px; border: 0; border-left: 3px solid var(--b600); border-radius: 0; background: none; box-shadow: none; }
.fa .rv-card:nth-child(3n+2) { border-left-color: var(--f700); }
.fa .rv-card:nth-child(3n) { border-left-color: #2bb6ec; }
.fa .rv-card:hover { transform: translateX(4px); box-shadow: none; }
.fa .rv-card h3 { font-size: 21px; }
.fa .rv-club-quotes .rv-card { margin: 0; align-self: center; border-left-color: #004713; }

/* ── Service areas: search + city pills, the van photo behind a diagonal ── */
.fa.sa { position: relative; overflow: hidden; background: #f2f7f2; }
.fa .sa-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; background: #ffffff; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.fa .sa-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; clip-path: polygon(23.4% 0, 100% 0, 100% 100%, 1.4% 100%); }
.fa .sa-grid { position: relative; display: block; }
.fa .sa-copy { max-width: min(640px, 56%); display: flex; flex-direction: column; gap: 20px; }
.fa .sa-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink700); }
.fa .sa-search { position: relative; display: flex; align-items: center; }
.fa .sa-search svg { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--f700); pointer-events: none; }
.fa .sa-search input { width: 100%; height: 56px; padding: 0 20px 0 50px; border-radius: 999px; border: 1.5px solid #cfdcd1; background: #ffffff; font: 600 16px/1 var(--body); color: var(--ink900); box-shadow: 0 16px 30px -24px rgba(20, 32, 25, .5); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fa .sa-search input:focus { outline: none; border-color: var(--f700); box-shadow: 0 0 0 4px rgba(0, 71, 19, .12); }
.fa .sa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fa .sa-chips .city { display: inline-flex; width: auto; padding: 8px 13px 8px 10px; border-radius: 999px; font-size: 14px; }
.fa .sa-chips .city[hidden] { display: none; }
.fa .sa-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 18px 22px; border-radius: 20px; background: #004713; color: #ffffff; box-shadow: 0 26px 50px -32px rgba(0, 36, 11, .8); }
.fa .sa-check { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #ffffff; color: #004713; display: inline-flex; align-items: center; justify-content: center; }
.fa .sa-check svg { width: 22px; height: 22px; }
.fa .sa-answer-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; }
.fa .sa-kicker { font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #9fdcab; }
.fa .sa-answer strong { font: 800 22px/1.2 var(--display); color: #ffffff; }
.fa .sa-answer .go { color: #bfe6f8; font-size: 14px; }
.fa .sa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fa .sa-answer .tel-cta { color: #ffffff; }
.fa .sa-answer .tel-cta__badge { background: #ffffff; color: #004713; }
.fa .sa-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.fa .sa-shop { display: inline-flex; align-items: center; gap: 12px; color: var(--ink900); text-decoration: none; background: none; }
.fa .sa-shop span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fa .sa-shop strong { font: 700 15px/1.3 var(--display); }
.fa .sa-shop small { font-size: 13px; color: var(--ink500); }
.fa .sa-shop:hover strong { color: var(--b600); }
@media (max-width: 960px) { .fa .sa-copy { max-width: none; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* CTA band, photo on the left (Get Started): the diagonal on the photo's
   right edge, the copy on light green */
.fa .cband--left { box-shadow: none; border: 1px solid #dceadf; min-height: 380px; }
.fa .cband--left .cband-photo { right: auto; left: 0; width: 46%; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.fa .cband--left .cband-photo img { clip-path: polygon(0 0, 98.6% 0, 82.6% 100%, 0 100%); }
.fa .cband--left .cband-copy { width: auto; margin-left: 44%; }
@media (max-width: 760px) {
  .fa .cband--left .cband-photo { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .fa .cband--left .cband-photo img { clip-path: none; }
  .fa .cband--left .cband-copy { margin-left: 0; }
}

/* Testimonials band: rating + blue button; a big turning pull-quote beside
   the latest Google reviews as open quotes */
.fa .tm { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.fa .tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.fa .tm-score { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fa .tm-score img { width: 40px; height: 40px; padding: 6px; border-radius: 50%; background: #ffffff; }
.fa .tm-score-body { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.fa .tm-score-num { display: inline-flex; align-items: center; gap: 10px; font: 800 26px/1 var(--display); color: #ffffff; }
.fa #fa-testimonials .stars { display: inline-flex; gap: 2px; color: #ffd34d; }
.fa #fa-testimonials .stars svg { width: 16px; height: 16px; }
.fa .tm-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.fa .tm-body--solo { grid-template-columns: 1fr; }
.fa .tm-body--solo .tm-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; }
.fa .tm-pull { position: relative; min-height: 320px; padding: 8px 0 48px; }
.fa .tm-mark { position: absolute; left: -10px; top: -70px; font: 800 220px/1 Georgia, serif; color: rgba(127, 211, 245, .22); pointer-events: none; }
.fa .tm-pull .rv-slide { position: absolute; inset: 8px 0 48px; margin: 0; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.fa .tm-pull .rv-slide.is-active { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
.fa .tm-pull blockquote { margin: 0; }
.fa .tm-pull-line { margin: 0 0 12px; font: 800 clamp(32px, 4vw, 54px)/1.05 var(--display); letter-spacing: -.015em; color: #ffffff; }
.fa .tm-pull-body { margin: 0; max-width: 56ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.fa .tm-pull figcaption { font: 700 16px/1 var(--body); color: #7fd3f5; }
.fa .tm-pull .rv-dots { left: 0; bottom: 6px; }
.fa .tm-quotes { display: flex; flex-direction: column; gap: 26px; }
.fa .tm-quote { margin: 0; padding-left: 22px; border-left: 3px solid #2bb6ec; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease); }
.fa .tm-quote:nth-child(2) { border-left-color: #7fd3f5; }
.fa .tm-quote:nth-child(3) { border-left-color: #9fdcab; }
.fa .tm-quote:hover { transform: translateX(4px); }
.fa .tm-quote blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: #ffffff; }
.fa .tm-quote figcaption { display: flex; align-items: center; gap: 10px; }
.fa .tm-quote figcaption > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.fa .tm-quote strong { font-size: 15px; color: #ffffff; }
.fa .tm-quote small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.fa .tm-av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #00300f; font: 800 14px/1 var(--display); }
@media (max-width: 960px) { .fa .tm-body { grid-template-columns: 1fr; } }

/* Services explorer, open: a big numbered list in white on the blue band,
   the photo behind a diagonal with a white cut line, copy beneath */
.fa .svc-x { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 8fr); gap: 0 clamp(24px, 3vw, 48px); align-items: stretch; color: #ffffff; }
.fa .svc-x-tabs { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0; }
.fa .svc-x .svc-tab { gap: 18px; padding: 14px 6px 14px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); border-radius: 0; background: none; color: rgba(255, 255, 255, .72); font: 700 clamp(19px, 1.7vw, 23px)/1.2 var(--display); }
.fa .svc-x .svc-tab:hover { background: none; color: #ffffff; }
.fa .svc-x .svc-tab.is-active { background: none; color: #ffffff; border-left: 0; }
.fa .svc-x-n { flex-shrink: 0; width: 34px; font: 800 14px/1 var(--display); letter-spacing: .06em; color: rgba(127, 211, 245, .7); transition: color .2s var(--ease), transform .3s var(--ease); }
.fa .svc-x .svc-tab.is-active .svc-x-n { color: #7fd3f5; transform: translateX(4px); }
.fa .svc-x-t { transition: transform .3s var(--ease); }
.fa .svc-x .svc-tab:hover .svc-x-t, .fa .svc-x .svc-tab.is-active .svc-x-t { transform: translateX(6px); }
.fa .svc-x .svc-tab .chev { color: #7fd3f5; }
.fa .svc-x .svc-tab .bar { background: #7fd3f5; height: 2px; }
.fa .svc-x-panel { min-width: 0; display: flex; flex-direction: column; }
.fa .svc-x .svc-media { position: relative; border-radius: 0 24px 24px 0; overflow: hidden; background: #ffffff; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.fa .svc-x .svc-media .svc-slide { clip-path: none; }
.fa .svc-x .svc-media::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(to right, #ffffff, #ffffff) no-repeat; background-size: 0 0; }
.fa .svc-x .svc-media .svc-slide.is-active { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.fa .svc-x .svc-hud { left: auto; right: 18px; }
.fa .svc-x .svc-copy { padding: 22px 0 0 clamp(8px, 4vw, 56px); background: none; }
.fa .svc-x .svc-txt p { color: rgba(255, 255, 255, .88); }
.fa .svc-x-h { font: 800 clamp(24px, 2.2vw, 30px)/1.15 var(--display); color: #ffffff; }

/* Hero intro, open: no card — a large statement beside the rest of the copy
   and the Google rating */
.fa.hero-lede { margin-top: 0; padding: clamp(36px, 5vw, 64px) 0 clamp(8px, 2vw, 16px); }
.fa .lede { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 88px); align-items: start; }
.fa .lede--one { align-items: center; }
.fa .lede-statement { padding-left: 24px; border-left: 4px solid var(--b600); }
.fa .lede-statement p { margin: 0; font: 600 clamp(20px, 2vw, 25px)/1.5 var(--display); letter-spacing: -.005em; color: var(--ink900); }
.fa .lede-side { display: flex; flex-direction: column; gap: 22px; }
.fa .lede--one .lede-side { align-items: flex-start; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); }
.fa .lede-side .lede-text { max-width: none; font-size: 16.5px; line-height: 1.7; color: var(--ink700); }
.fa .lede-side .lede-proof { padding: 0; border: 0; }
@media (max-width: 860px) { .fa .lede { grid-template-columns: 1fr; } .fa .lede--one .lede-side { padding-left: 0; border-left: 0; } }

/* Trust bar, final: content-width points spread across one row, thin
   dividers; the Google / BBB point is the marks alone */
.fa .tbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 0; padding: 16px 0; }
.fa .tbar-item, .fa .tbar-item--logos { flex: 0 1 auto; padding: 4px clamp(14px, 2vw, 28px); border-left: 1px solid var(--line); border-top: 0; }
.fa .tbar-item:first-child { padding-left: 0; border-left: 0; }
.fa .tbar-item:last-child { padding-right: 0; }
.fa .tbar-item:hover { background: none; }
.fa .tbar-item .itile { width: 44px; height: 44px; border-radius: 12px; }
.fa .tbar-label > span { white-space: nowrap; }
.fa .tbar-logos { gap: 18px; }
.fa .tbar-google .rating-badge__score { font-size: 20px; }
.fa .tbar-google img { width: 30px; height: 30px; }
.fa .tbar-logos .tbar-bbb { height: 40px; }
@media (max-width: 960px) { .fa .tbar { justify-content: center; gap: 14px 0; } .fa .tbar-item, .fa .tbar-item--logos { flex-basis: auto; } }
@media (max-width: 600px) { .fa .tbar-item, .fa .tbar-item--logos { border-left: 0; padding: 6px 12px; } }

/* About: the numbers on blue, open columns, the van along the foot */
.fa .astats-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fa .astats-row li { display: flex; flex-direction: column; gap: 8px; padding: 6px clamp(16px, 2.4vw, 32px); border-left: 1px solid rgba(255, 255, 255, .2); }
.fa .astats-row li:first-child { padding-left: 0; border-left: 0; }
.fa .astats-row strong { font: 800 clamp(48px, 5.4vw, 72px)/1 var(--display); letter-spacing: -.02em; color: #ffffff; }
.fa .astats-row li:nth-child(2n) strong { color: #7fd3f5; }
.fa .astats-row span { max-width: 22ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
@media (max-width: 760px) { .fa .astats-row li { border-left: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .2); } .fa .astats-row li:first-child { border-top: 0; } }

/* Crew wall: the technician's name picked out in each quote */
.fa .crew mark { padding: 0 4px; border-radius: 4px; background: #e9eff9; color: var(--b600); font-weight: 700; }

/* Service areas: a wider photo panel so the van is shown whole, not cropped
   in; the copy stays clear of the cut */
.fa .sa-photo { width: 47%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.fa .sa-photo img { object-position: 28% 60%; clip-path: polygon(21.2% 0, 100% 0, 100% 100%, 1.2% 100%); }
.fa .sa-copy { max-width: min(600px, 50%); }
@media (max-width: 960px) { .fa .sa-copy { max-width: none; } }

/* Trust bar icons in BBB blue, to sit with the seal */
.fa .tbar-item .itile { background: #0b4b87; color: #ffffff; }

/* Contact: Book Online leads the info panel, the map closes it; the form has
   one full-width Submit */
.fa .ci-book { position: relative; align-self: stretch; justify-content: center; height: 54px; margin-bottom: 6px; }
.fa .ci-map { position: relative; margin-top: 10px; border-radius: 16px; overflow: hidden; min-height: 220px; flex: 1; }
.fa .ci-map iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
#ss-contact-info .gform_footer, #ss-contact-info .gform_page_footer { display: block; }
#ss-contact-info .gform_footer input[type="submit"], #ss-contact-info .gform_footer button { width: 100%; height: 54px; justify-content: center; }

/* Service areas, condensed: six cities as pills (the rest show as matches
   while searching), a slim answer row */
.fa .sa-copy { gap: 16px; }
.fa .sa-copy .sec-title { font-size: clamp(28px, 3vw, 40px); }
.fa .sa-sub { font-size: 16px; }
.fa .sa-search input { height: 50px; }
.fa .sa-chips .city.is-extra { display: none; }
.fa .is-searching .sa-chips .city.is-extra:not([hidden]) { display: inline-flex; }
.fa .sa-answer { padding: 12px 14px 12px 16px; gap: 12px 18px; border-radius: 16px; }
.fa .sa-check { width: 36px; height: 36px; }
.fa .sa-check svg { width: 18px; height: 18px; }
.fa .sa-kicker { display: none; }
.fa .sa-answer strong { font-size: 18px; }
.fa .sa-answer .btn { height: 44px; padding: 0 18px; }
.fa .sa-answer .tel-cta { font-size: 16px; }
.fa .sa-answer .tel-cta__badge { width: 38px; height: 38px; }
.fa .sa-photo img { object-position: 55% 55%; }

/* Testimonials, condensed: one quote at a time under the header row */
.fa .tm { gap: 24px; }
.fa .tm-pull { min-height: 0; max-width: 980px; padding: 10px 0 40px; }
.fa .tm-mark { top: -60px; font-size: 180px; }
.fa .tm-pull-line { font-size: clamp(28px, 3.2vw, 42px); }
.fa .tm-pull-body { font-size: 17px; }
.fa .tm-pull-quote { margin: 0; max-width: 60ch; font: 600 clamp(20px, 2vw, 26px)/1.45 var(--display); color: #ffffff; }
.fa .tm-pull figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fa .tm-g { display: inline-flex; align-items: center; gap: 5px; font: 500 13px/1 var(--body); color: rgba(255, 255, 255, .7); }
.fa .tm-pull .rv-dots { bottom: 4px; }

/* Hero intro, balanced: statement over the rating on the left, the rest of
   the copy on the right; one column when there is no more copy */
.fa .lede { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.fa .lede--one { grid-template-columns: minmax(0, 820px); }
.fa .lede-main { display: flex; flex-direction: column; gap: 22px; }
.fa .lede-main .lede-proof { margin-left: 28px; padding: 0; border: 0; }
.fa .lede > .lede-text { max-width: none; padding-top: 4px; font-size: 16.5px; line-height: 1.7; color: var(--ink700); }
.fa .lede > .lede-text p + p { margin-top: .7em; }

/* Less dead space around the trust bar */
.fa.hero-lede { padding-bottom: 0; }
#fa-trust-badges { padding: clamp(20px, 3vw, 32px) 0 !important; }
#fa-trust-badges + section, #fa-trust-badges + .fa { padding-top: clamp(32px, 4.5vw, 64px) !important; }

/* Values (About's What We Stand For): head left, an open 2×2 grid right */
.fa.values { background: #ffffff; }
.fa .values-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.fa .values-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.fa .values-list li { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px 0; border-top: 1px solid var(--line); }
.fa .values-list li:nth-child(2n) { padding: 26px 0 28px 28px; border-left: 1px solid var(--line); }
.fa .values-icon { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--f700); color: var(--f700); display: inline-flex; align-items: center; justify-content: center; transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease); }
.fa .values-icon svg { width: 26px; height: 26px; }
.fa .values-list li:hover .values-icon { background: var(--f700); color: #ffffff; transform: rotate(-8deg); }
.fa .values-list h3 { margin: 0; font: 800 22px/1.25 var(--display); color: var(--ink900); }
.fa .values-list p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink700); }
@media (max-width: 860px) { .fa .values-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fa .values-list { grid-template-columns: 1fr; } .fa .values-list li, .fa .values-list li:nth-child(2n) { padding: 22px 0; border-left: 0; } }

/* Hero intro statement a size down; the BBB seal centred in its cell */
.fa .lede-statement p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
.fa .tbar-item--logos { flex: 1 1 auto; display: flex; justify-content: center; }

/* Values, compact: the head over one row of four, thin dividers; tighter
   spacing between the About page's white sections */
.fa.values { padding: clamp(44px, 5vw, 72px) 0 !important; }
.fa .values-grid { grid-template-columns: 1fr; gap: 28px; }
.fa .values-list { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fa .values-list li, .fa .values-list li:nth-child(2n) { padding: 24px 24px 4px; border-top: 0; border-left: 1px solid var(--line); }
.fa .values-list li:first-child { padding-left: 0; border-left: 0; }
.fa .values-list li:last-child { padding-right: 0; }
.fa .values-icon { width: 48px; height: 48px; }
.fa .values-icon svg { width: 22px; height: 22px; }
.fa .values-list h3 { font-size: 20px; }
.fa.values + .fa.crew { padding-top: clamp(24px, 3vw, 40px) !important; }
@media (max-width: 960px) { .fa .values-list { grid-template-columns: 1fr 1fr; } .fa .values-list li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .fa .values-list { grid-template-columns: 1fr; } .fa .values-list li, .fa .values-list li:nth-child(2n) { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); } .fa .values-list li:first-child { border-top: 0; } }

/* Testimonials ticker: two rows of review headlines gliding past */
.fa .tm-ticker { display: flex; flex-direction: column; gap: 14px; margin: 0 calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fa .tm-row { display: flex; width: max-content; animation: fa-ticker 80s linear infinite; }
.fa .tm-row--back { animation-direction: reverse; animation-duration: 95s; }
.fa .tm-ticker:hover .tm-row { animation-play-state: paused; }
.fa .tm-track { list-style: none; margin: 0; padding: 0 14px 0 0; display: flex; gap: 14px; }
.fa .tm-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; transition: background-color .25s var(--ease); }
.fa .tm-chip:hover { background: rgba(255, 255, 255, .14); }
.fa .tm-chip strong { font: 700 18px/1 var(--display); color: #ffffff; }
.fa .tm-chip em { font: 600 14px/1 var(--body); font-style: normal; color: #7fd3f5; }
.fa #fa-testimonials .tm-chip .stars svg { width: 13px; height: 13px; }
@keyframes fa-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fa .tm-row { animation: none; } .fa .tm-ticker { overflow-x: auto; } }

/* FAQ: a smaller head with a simple "still have questions" line; the
   questions as open rows with a +/- toggle, no boxes */
.fa.faqs .faq-aside .sec-title { font-size: clamp(28px, 2.8vw, 38px); }
.fa .faq-help { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.fa .faq-help strong { font: 800 19px/1.3 var(--display); color: var(--ink900); }
.fa .faq-help span { font-size: 15px; color: var(--ink700); }
.fa .faq-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 12px; }
.fa.faqs .faq { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; overflow: visible; }
.fa.faqs .faq:first-of-type { border-top: 1px solid var(--line); }
.fa.faqs .faq + .faq { margin-top: 0; }
.fa.faqs .faq summary { padding: 20px 4px; font-size: 18px; }
.fa.faqs .faq summary:hover { background: none; }
.fa.faqs .faq summary svg { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--f50); transition: transform .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.fa.faqs .faq summary:hover svg, .fa.faqs .faq[open] summary svg { background: var(--f700); color: #ffffff; }
.fa.faqs .faq .a { padding: 0 48px 22px 4px; }

/* Section rhythm: the standard section padding a third tighter, so stacked
   sections don't open up big white gaps */
.fa[style*="padding: clamp(56px, 8vw, 104px) 0"], .fa[style*="padding: clamp(64px, 9vw, 120px) 0"], .fa[style*="padding: clamp(64px, 9vw, 112px) 0"], .fa[style*="padding: clamp(56px, 8vw, 96px) 0\""], .fa[style*="padding: clamp(56px, 7vw, 96px) 0"], .fa[style*="padding: clamp(48px, 7vw, 96px) 0"] { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }

/* Contact section: a narrow pitch column, the form given most of the width;
   the ways to reach us as plain rows */
.fa .cs-grid { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr); gap: 36px clamp(32px, 5vw, 64px); align-items: start; }
.fa .cs-copy { display: flex; flex-direction: column; gap: 20px; }
.fa .cs-copy .sec-title { font-size: clamp(28px, 2.8vw, 38px); }
.fa .cs-points { max-width: none; gap: 0; }
.fa .cs-points .cpoint { padding: 12px 0; background: none; border: 0; border-bottom: 1px solid #dceadf; border-radius: 0; box-shadow: none; }
.fa .cs-points li:last-child .cpoint { border-bottom: 0; }
.fa .cs-points .cpoint .itile { width: 40px; height: 40px; background: #ffffff; }
.fa .cs-points .cpoint:hover { transform: none; }
@media (max-width: 900px) { .fa .cs-grid { grid-template-columns: 1fr; } }

/* Why choose us (v2): flip tiles on the green band */
.fa .flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.fa .flip { perspective: 1200px; min-height: 250px; cursor: pointer; outline: none; }
.fa .flip-inner { position: relative; height: 100%; min-height: 250px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.fa .flip:focus-visible .flip-inner, .fa .flip.is-flipped .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) { .fa .flip:hover .flip-inner { transform: rotateY(180deg); } }
.fa .flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fa .flip-front { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.fa .flip-n { position: absolute; top: 18px; right: 22px; font: 800 15px/1 var(--display); letter-spacing: .08em; color: rgba(127, 211, 245, .8); }
.fa .flip-icon { width: 64px; height: 64px; border-radius: 18px; background: #7fd3f5; color: #004713; display: inline-flex; align-items: center; justify-content: center; }
.fa .flip-icon svg, .fa .flip-icon img { width: 32px; height: 32px; }
.fa .flip-front h3 { margin: auto 0 0; padding-right: 36px; font: 800 22px/1.2 var(--display); color: #ffffff; }
.fa .flip-hint { position: absolute; right: 22px; bottom: 26px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .flip-hint svg { width: 14px; height: 14px; }
.fa .flip-back { transform: rotateY(180deg); background: #7fd3f5; color: #00300f; justify-content: center; gap: 12px; }
.fa .flip-back strong { font: 800 20px/1.2 var(--display); color: #00300f; }
.fa .flip-back p { margin: 0; font-size: 16px; line-height: 1.55; color: #00300f; }
.fa .flip-back a { color: #00300f !important; background-image: linear-gradient(#00300f, #00300f); }
.fa .flip-back .go { margin-top: 4px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fa .flip-inner { transition: none; } }

/* Hero intro, one paragraph: one compact row — the statement, then the
   Google rating behind a thin divider */
.fa .lede--one { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 48px; }
.fa .lede--one .lede-main { flex-direction: row; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 18px 48px; flex-wrap: wrap; }
.fa .lede--one .lede-statement { flex: 1 1 420px; }
.fa .lede--one .lede-main .lede-proof { margin-left: 0; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); }
.fa .hero-lede:has(.lede--one) { padding-top: clamp(28px, 3.5vw, 44px); }

/* Quote stages: arrows beside the dots to click through */
.fa .rv-arrows { position: absolute; right: clamp(28px, 4vw, 52px); bottom: 18px; z-index: 3; display: flex; gap: 10px; }
.fa .tm-pull .rv-arrows { right: 0; bottom: -6px; }
.fa .rv-arrows .ibtn { width: 46px; height: 46px; }
.fa .hero-lede:has(.lede--one), .fa.hero-lede:has(.lede--one) { padding-top: clamp(28px, 3.5vw, 44px); }

/* Testimonials: the Google rating and "Google review" tags link to Google */
.fa .tm-score-link { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.fa .tm-score-link:hover .tm-score-body > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.fa a.tm-g { color: rgba(255, 255, 255, .7); text-decoration: none; }
.fa a.tm-g:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

/* Trust bar with the Google rating as its own block beside the BBB seal */
.fa .tbar-item--logos { flex: 0 1 auto; }
.fa .tbar-item--google .rating-badge__score { font-size: 20px; }
.fa .tbar-item--google .rating-badge img { width: 34px; height: 34px; }
.fa .tbar-item--google .rating-badge__count { font-size: 13px; }

/* Repair or replace: a versus of two panels, each with its next step */
.fa .vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fa .vs-panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; }
.fa .vs-panel--repair { background: var(--f50); border: 1px solid rgba(0, 71, 19, .14); }
.fa .vs-panel--replace { background: #e9eff9; border: 1px solid rgba(42, 90, 174, .16); }
.fa .vs-head { display: flex; align-items: center; gap: 14px; }
.fa .vs-head h3 { margin: 0; font: 800 clamp(22px, 2.2vw, 28px)/1.15 var(--display); color: var(--ink900); }
.fa .vs-icon { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; }
.fa .vs-icon svg { width: 24px; height: 24px; }
.fa .vs-panel--repair .vs-icon { background: var(--f700); }
.fa .vs-panel--replace .vs-icon { background: var(--b600); }
.fa .vs-list { margin: 0; display: flex; flex-direction: column; }
.fa .vs-list > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(20, 32, 25, .1); }
.fa .vs-list dt { font: 700 12px/1.6 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink500); }
.fa .vs-list dd { margin: 0; font: 600 16px/1.5 var(--body); color: var(--ink900); }
.fa .vs-cta { align-self: flex-start; margin-top: auto; }
.fa .vs-cta svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fa .vs-cta:hover svg { transform: translateX(3px); }
.fa .vs-badge { position: absolute; left: 50%; top: 50%; z-index: 2; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #ffffff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--display); letter-spacing: .04em; color: var(--ink900); box-shadow: 0 12px 24px -14px rgba(20, 32, 25, .5); }
.fa .vs-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; text-align: center; font: 600 17px/1.4 var(--body); color: var(--ink700); }
@media (max-width: 860px) { .fa .vs { grid-template-columns: 1fr; } .fa .vs-badge { display: none; } .fa .vs-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* FAQ fixes: the phone badge keeps its white icon; the head a size down */
.fa .faq-help span { color: inherit; }
.fa .faq-help > span { color: var(--ink700); }
.fa.faqs .faq-aside .sec-title, .fa.faqs .faq-aside h2 { font-size: clamp(28px, 2.8vw, 38px) !important; }

/* Trust bar: five points on one line */
@media (min-width: 1100px) { .fa .tbar { flex-wrap: nowrap; } }
.fa .tbar-item, .fa .tbar-item--logos, .fa .tbar-item--google { padding: 4px clamp(10px, 1.4vw, 20px); }
.fa .tbar-item .itile { width: 40px; height: 40px; border-radius: 11px; }
.fa .tbar-item .itile svg, .fa .tbar-item .itile img { width: 20px; height: 20px; }
.fa .tbar-label { font-size: 15px; }
.fa .tbar-label small { font-size: 11.5px; }
.fa .tbar-item--google .rating-badge__score { font-size: 17px; gap: 6px; }
.fa .tbar-item--google .rating-badge img { width: 28px; height: 28px; }
.fa .tbar-item--google .rating-badge__count { font-size: 12px; }
.fa .tbar-item--google .stars svg { width: 12px; height: 12px; }
.fa .tbar-logos .tbar-bbb { height: 34px; }

/* Hero intro: a short last line as fine print under the statement */
.fa .lede-note { display: inline-flex; align-items: center; gap: 8px; margin-left: 28px; font: 600 14px/1.4 var(--body); color: var(--ink700); }
.fa .lede-note svg { width: 18px; height: 18px; color: var(--f700); flex-shrink: 0; }
.fa .lede--one .lede-main { flex-direction: column; align-items: flex-start; }

/* Recent Projects: head with rating and booking, the feed in a clean frame */
.fa .rp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.fa .rp-head .sec-head { max-width: 640px; }
.fa .rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.fa .rp-feed { padding: clamp(14px, 2vw, 24px); border-radius: 24px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(20, 32, 25, .45); min-height: 400px; }

/* Trust bar order: the Google rating and the BBB seal close the row */
.fa .tbar-item--google { order: 8; }
.fa .tbar-item--logos { order: 9; padding-right: 0 !important; }
.fa .tbar-item:last-child:not(.tbar-item--logos) { padding-right: clamp(10px, 1.4vw, 20px); }

/* Service areas directory: search + A–Z, every area as a tile that opens
   to its service pages */
.fa .dir-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.fa .dir-head .sec-head { max-width: 680px; }
.fa .dir-count { display: inline-flex; align-items: baseline; gap: 8px; font: 600 15px/1 var(--body); color: var(--ink700); }
.fa .dir-count strong { font: 800 44px/1 var(--display); color: var(--f700); }
.fa .dir-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.fa .dir-search { flex: 1 1 360px; max-width: 520px; }
.fa .dir-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.fa .dir-letters button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid #cfdcd1; background: #ffffff; font: 700 14px/1 var(--display); color: var(--ink900); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.fa .dir-letters button:hover { border-color: var(--f700); color: var(--f700); }
.fa .dir-letters button.is-active { background: var(--f700); border-color: var(--f700); color: #ffffff; }
.fa .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.fa .dir-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: #ffffff; border: 1px solid #dceadf; transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.fa .dir-tile[hidden] { display: none; }
.fa .dir-tile:hover { border-color: var(--f700); box-shadow: 0 18px 34px -26px rgba(0, 48, 15, .55); transform: translateY(-2px); }
.fa .dir-tile--home { background: #004713; border-color: #004713; }
.fa .dir-top { display: flex; align-items: center; gap: 10px; }
.fa .dir-pin { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--f50); color: var(--f700); display: inline-flex; align-items: center; justify-content: center; }
.fa .dir-pin svg { width: 18px; height: 18px; }
.fa .dir-tile .dir-city { font: 800 18px/1.2 var(--display); color: var(--ink900); text-decoration: none; background: none; padding: 0; }
.fa .dir-tile .dir-city:hover { color: var(--f700); }
.fa .dir-badge { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #7fd3f5; color: #00300f; font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.fa .dir-tile--home .dir-city { color: #ffffff; }
.fa .dir-tile--home .dir-city:hover { color: #9fdcab; }
.fa .dir-tile--home .dir-pin { background: rgba(255, 255, 255, .14); color: #9fdcab; }
.fa .dir-more summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 44px; cursor: pointer; font: 600 13.5px/1.2 var(--body); color: var(--ink500); }
.fa .dir-more summary::-webkit-details-marker { display: none; }
.fa .dir-more summary svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.fa .dir-more[open] summary svg { transform: rotate(180deg); }
.fa .dir-tile--home .dir-more summary { color: rgba(255, 255, 255, .75); }
.fa .dir-more ul { list-style: none; margin: 10px 0 2px 44px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fa .dir-more ul a { display: inline-block; padding: 4px 0; font: 600 14.5px/1.3 var(--body); color: var(--b600); background-size: 0 2px; }
.fa .dir-more ul a:hover, .fa .dir-more ul a.is-match { color: var(--f700); background-size: 100% 2px; }
.fa .dir-tile--home .dir-more ul a { color: #bfe6f8; }
.fa .dir-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; font: 600 16px/1.5 var(--body); color: var(--ink700); }
.fa .dir-empty[hidden] { display: none; }

/* Contact section, rebuilt: a top band (pitch + buttons | ways to reach us),
   then the form across the full width with its fields two to a row */
.fa .cs-grid { grid-template-columns: 1fr; gap: 28px; }
.fa .cs-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head points" "btns points"; gap: 18px clamp(32px, 5vw, 72px); align-items: start; }
.fa .cs-copy > .sec-head { grid-area: head; }
.fa .cs-copy > .cs-btns { grid-area: btns; }
.fa .cs-copy > .cs-points { grid-area: points; align-self: center; }
.fa .cs-form { padding: clamp(22px, 3vw, 36px) clamp(22px, 3.4vw, 44px); }
.fa .cs-form .gform_fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 22px !important; }
.fa .cs-form .gfield { grid-column: span 1 !important; }
.fa .cs-form .gfield--type-textarea, .fa .cs-form .gfield--type-address, .fa .cs-form .gfield--type-consent, .fa .cs-form .gfield--type-html, .fa .cs-form .gfield--type-section, .fa .cs-form .gfield--type-captcha { grid-column: 1 / -1 !important; }
.fa .cs-form .gfield--type-radio .gfield_radio { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fa .cs-form .ginput_container_address { display: grid !important; grid-template-columns: 2fr 2fr 1.4fr 1.2fr 1fr; gap: 12px 14px; }
.fa .cs-form .ginput_container_address > span { width: auto !important; padding: 0 !important; margin: 0 !important; flex: none !important; }
.fa .cs-form .ginput_container_address .ginput_full { grid-column: span 1; }
.fa .cs-form .gfield_label { margin-bottom: 6px !important; }
.fa .cs-form .gform_footer { margin-top: 8px !important; }
@media (max-width: 1100px) { .fa .cs-form .ginput_container_address { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .fa .cs-copy { grid-template-columns: 1fr; grid-template-areas: "head" "btns" "points"; }
  .fa .cs-form .gform_fields { grid-template-columns: 1fr !important; }
  .fa .cs-form .ginput_container_address { grid-template-columns: 1fr; }
}

/* One-paragraph intro: the statement keeps its natural height (a flex basis
   meant for width was stretching it tall in the column layout) */
.fa .lede--one .lede-statement { flex: none; max-width: 980px; }

/* Service areas: a live map behind the diagonal, moving to the city picked */
.fa .sa-livemap { background: #ffffff; }
.fa .sa-livemap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; clip-path: polygon(21.2% 0, 100% 0, 100% 100%, 1.2% 100%); filter: saturate(1.05); }
.fa .sa-map-tag { position: absolute; right: 24px; top: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #004713; color: #ffffff; font: 800 15px/1 var(--display); box-shadow: 0 14px 28px -14px rgba(0, 36, 11, .7); pointer-events: none; }
.fa .sa-map-tag svg { width: 18px; height: 18px; color: #9fdcab; }

/* Trust bar order: BBB, then the Google rating last */
.fa .tbar-item--logos { order: 8; padding-right: clamp(10px, 1.4vw, 20px) !important; }
.fa .tbar-item--google { order: 9; padding-right: 0 !important; }

/* Forms: required fields marked with a red asterisk, and a legend */
.fa .gfield_required { font-size: 0 !important; }
.fa .gfield_required::after { content: "*"; margin-left: 3px; font: 800 16px/1 var(--body); color: #c0392b; }
.fa .fa-form-legend { margin: 0 0 14px; font: 600 13px/1 var(--body); color: var(--ink500); }
.fa .fa-form-legend span { color: #c0392b; font-weight: 800; }
.fa .gform_required_legend { display: none !important; }

/* FAQ as a chat: questions on the left, the answer as a reply on the right */
.fa .faqchat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(28px, 4vw, 56px); align-items: start; }
.fa .faqchat-side { display: flex; flex-direction: column; gap: 18px; }
.fa .faqchat-side .sec-title { font-size: clamp(28px, 2.8vw, 38px); }
.fa .faqchat-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fa .faqchat-qs li:has(> [hidden]) { display: none; }
.fa .faqchat-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: #ffffff; text-align: left; font: 700 16px/1.35 var(--display); color: var(--ink900); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.fa .faqchat-q svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--f700); transition: transform .2s var(--ease); }
.fa .faqchat-q:hover { border-color: var(--f700); transform: translateX(3px); }
.fa .faqchat-q:hover svg { transform: translateX(3px); }
.fa .faqchat-q.is-active { background: var(--b600); border-color: var(--b600); color: #ffffff; }
.fa .faqchat-q.is-active svg { color: #ffffff; }
.fa .faqchat-q[hidden] { display: none; }
.fa .faqchat-win { position: sticky; top: 110px; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #f2f7f2; border: 1px solid #dceadf; box-shadow: 0 30px 60px -44px rgba(20, 32, 25, .5); }
.fa .faqchat-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #004713; color: #ffffff; }
.fa .faqchat-bar strong { display: block; font: 800 16px/1.2 var(--display); }
.fa .faqchat-bar small { font-size: 13px; color: rgba(255, 255, 255, .78); }
.fa .faqchat-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #ffffff; color: #004713; display: inline-flex; align-items: center; justify-content: center; }
.fa .faqchat-avatar svg { width: 14px; height: 24px; }
.fa .faqchat-avatar::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #7ee08f; border: 2px solid #004713; }
.fa .faqchat-thread { display: flex; flex-direction: column; gap: 16px; min-height: 260px; padding: 24px clamp(18px, 2.4vw, 28px); outline: none; }
.fa .faqchat-pair { display: flex; flex-direction: column; gap: 12px; }
html.fa-js .fa .faqchat-pair:not(.is-active) { display: none; }
.fa .faqchat-bubble { max-width: 86%; margin: 0; padding: 14px 18px; border-radius: 20px; font-size: 16px; line-height: 1.6; }
.fa .faqchat-bubble p { margin: 0; }
.fa .faqchat-bubble p + p { margin-top: .6em; }
.fa .faqchat-bubble--q { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--b600); color: #ffffff; font-weight: 600; animation: fa-bubble .35s var(--ease); }
.fa .faqchat-bubble--a { align-self: flex-start; border-bottom-left-radius: 6px; background: #ffffff; color: var(--ink900); border: 1px solid #dceadf; animation: fa-bubble .4s var(--ease); }
.fa .faqchat-typing { display: none; align-self: flex-start; gap: 5px; padding: 14px 18px; border-radius: 20px; border-bottom-left-radius: 6px; background: #ffffff; border: 1px solid #dceadf; }
.fa .faqchat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--f700); animation: fa-dot 1s ease-in-out infinite; }
.fa .faqchat-typing i:nth-child(2) { animation-delay: .15s; }
.fa .faqchat-typing i:nth-child(3) { animation-delay: .3s; }
.fa .faqchat-pair.is-typing .faqchat-typing { display: inline-flex; }
.fa .faqchat-pair.is-typing .faqchat-bubble--a { display: none; }
@keyframes fa-bubble { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fa-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.fa .faqchat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; background: #ffffff; border-top: 1px solid #dceadf; }
.fa .faqchat-foot > span { font: 800 16px/1.2 var(--display); color: var(--ink900); margin-right: auto; }
.fa .faqchat-foot .btn { height: 46px; }
@media (max-width: 900px) { .fa .faqchat-grid { grid-template-columns: 1fr; } .fa .faqchat-win { position: static; } }

/* Contact rows: hover — the icon fills green and tilts, the text steps right */
.fa .cs-points .cpoint .itile { transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--ease); }
.fa .cs-points .cpoint > span:last-child { transition: transform .25s var(--ease); }
.fa .cs-points a.cpoint:hover .itile { background: var(--f700); color: #ffffff; transform: rotate(-8deg); }
.fa .cs-points a.cpoint:hover > span:last-child { transform: translateX(4px); }
.fa .cs-points a.cpoint:hover strong { color: var(--f700); }

/* Service cards on light bands: visible before hover — solid green icon
   tile, a green top rule, a soft shadow, an arrow in a circle */
.fa .scard { border-color: #dceadf; box-shadow: 0 20px 40px -32px rgba(20, 32, 25, .45); }
.fa .scard::before { transform: scaleX(1); background: var(--f700); height: 4px; transition: background-color .3s var(--ease); }
.fa .scard:hover::before { background: var(--b600); }
.fa .scard:not(.scard--hi) .itile { background: var(--f700); color: #ffffff; }
.fa .scard:not(.scard--hi):hover .itile { background: var(--b600); }
.fa .scard .go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; font-weight: 700; }
.fa .scard .go svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--f50); color: var(--f700); transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.fa .scard:hover .go svg { background: var(--f700); color: #ffffff; transform: translateX(4px); }
:is(.fa .dark, .fa.dark) .scard::before { background: #7fd3f5; }

/* Forms, polished: one asterisk per required label, consistent labels,
   soft fields with a clear focus ring, a full-width Submit */
.fa .gfield_required .gfield_required::after { content: none; }
.fa .gfield_required { margin-left: 3px !important; }
.fa .gfield_required::after { margin-left: 0; }
.fa .gform_wrapper .gfield_label, .fa .gform_wrapper legend.gfield_label { font: 700 14.5px/1.3 var(--body) !important; color: var(--ink900) !important; margin-bottom: 6px !important; }
.fa .gform_wrapper input[type="text"], .fa .gform_wrapper input[type="tel"], .fa .gform_wrapper input[type="email"], .fa .gform_wrapper input[type="date"], .fa .gform_wrapper input[type="number"], .fa .gform_wrapper select, .fa .gform_wrapper textarea { min-height: 50px; padding: 12px 16px !important; border-radius: 12px !important; border: 1.5px solid #d6e2d8 !important; background: #f7faf7 !important; font: 500 16px/1.4 var(--body) !important; color: var(--ink900) !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.fa .gform_wrapper input:hover, .fa .gform_wrapper select:hover, .fa .gform_wrapper textarea:hover { border-color: #b9cfbd !important; }
.fa .gform_wrapper input:focus, .fa .gform_wrapper select:focus, .fa .gform_wrapper textarea:focus { outline: none !important; border-color: var(--f700) !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(0, 71, 19, .12) !important; }
.fa .gform_wrapper textarea { min-height: 120px; }
.fa .gform_wrapper .gform_footer input[type="submit"], .fa .gform_wrapper .gform_footer button { width: 100% !important; height: 54px !important; border-radius: 999px !important; font: 800 16px/1 var(--display) !important; }
.fa .fa-form-legend { margin-bottom: 18px; }

/* Service areas, slimmer: every city as a compact pill, no answer bar; the
   map's tag links to the picked city */
.fa .sa-copy { gap: 14px; }
.fa .sa-chips { gap: 6px; }
.fa .sa-chips .city { padding: 6px 11px 6px 8px; font-size: 13.5px; }
.fa .sa-chips .city svg { width: 14px; height: 14px; }
.fa .sa-foot { padding-top: 4px; }
.fa a.sa-map-tag { pointer-events: auto; text-decoration: none; background-image: none; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.fa a.sa-map-tag:hover { background: var(--b600); transform: translateY(-2px); }
.fa a.sa-map-tag svg:last-child { width: 15px; height: 15px; color: #ffffff; }

/* Contact section, half and half: content left, the form right, equal
   height and compact */
.fa .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 56px); align-items: stretch; }
.fa .cs-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; grid-template-areas: none; }
.fa .cs-copy > .cs-points { align-self: stretch; margin-top: auto; }
.fa .cs-form { padding: clamp(20px, 2.6vw, 30px); }
.fa .cs-form .gform_fields { gap: 12px 16px !important; }
.fa .cs-form .gform_wrapper input[type="text"], .fa .cs-form .gform_wrapper input[type="tel"], .fa .cs-form .gform_wrapper input[type="email"], .fa .cs-form .gform_wrapper input[type="date"], .fa .cs-form .gform_wrapper select { min-height: 46px; padding: 10px 14px !important; }
.fa .cs-form .gform_wrapper textarea { min-height: 96px; height: 96px; }
.fa .cs-form .gform_wrapper .gfield_label { margin-bottom: 4px !important; }
.fa .cs-form .gform_wrapper .gform_footer input[type="submit"], .fa .cs-form .gform_wrapper .gform_footer button { height: 50px !important; }
.fa .cs-form .ginput_container_address { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .fa .cs-grid { grid-template-columns: 1fr; } }

/* After the reveal: smooth, delay-free hover transitions on revealed items */
html.fa-js .fa [data-reveal-group].is-done > *, html.fa-js .fa [data-reveal].is-done { transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, background-color .3s ease, color .3s ease, opacity .3s ease; transition-delay: 0s !important; }

/* Service cards, compact: icon beside the title, tighter padding, copy
   capped at four lines; gentle hover */
.fa .scard { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 10px; align-content: start; padding: 22px 22px 20px; }
.fa .scard > .itile { grid-column: 1; grid-row: 1; width: 46px; height: 46px; border-radius: 13px; }
.fa .scard > .itile svg, .fa .scard > .itile img { width: 22px; height: 22px; }
.fa .scard > h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 18.5px; line-height: 1.25; }
.fa .scard > p { grid-column: 1 / -1; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fa .scard > .go { grid-column: 1 / -1; align-self: end; padding-top: 4px; }
.fa .scard:hover { transform: translateY(-4px); }
.fa .scard .itile, .fa .scard .go svg, .fa .scard::before { transition-duration: .4s; transition-timing-function: cubic-bezier(.22, .61, .36, 1); }
.fa .scard:hover .itile { transform: rotate(-5deg); }

/* Hero intro, stacked: the statement and, under it, the rest of the copy —
   one column at reading width */
.fa .lede--stack { grid-template-columns: minmax(0, 900px); gap: 14px; }
.fa .lede--stack > .lede-text { padding-left: 28px; padding-top: 0; font-size: 17px; }

/* Service pages, rhythm: What's Included as a deep-green feature band */
.fa .inclb-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; }
.fa .inclb-grid--solo { grid-template-columns: 1fr; }
.fa .inclb-photo { position: relative; justify-self: start; }
.fa .inclb-photo img { display: block; width: auto; max-width: min(100%, 460px); max-height: 380px; height: auto; border-radius: 22px; border: 6px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6); }
.fa .inclb-count { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #ffffff; color: var(--ink900); font: 700 14px/1 var(--body); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .55); }
.fa .inclb-count strong { width: 32px; height: 32px; border-radius: 50%; background: #004713; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font: 800 15px/1 var(--display); }
.fa .inclb-body { display: flex; flex-direction: column; gap: 22px; }
.fa .inclb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fa .inclb-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font: 600 16px/1.45 var(--body); color: #ffffff; transition: background-color .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1); }
.fa .inclb-list li:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.fa .inclb-list .tk { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #9fdcab; color: #004713; display: inline-flex; align-items: center; justify-content: center; }
.fa .inclb-list .tk svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .fa .inclb-grid { grid-template-columns: 1fr; } .fa .inclb-list { grid-template-columns: 1fr; } }

/* Section rhythm: How It Works on light green, Keep exploring on light sky */
#ss-how-it-works { background: #f2f7f2; }
.fa.sec--sky { background: #eef4fc; }
.fa.sec--sky .ptile { border-color: #d9e5f5; }

/* Keep exploring: related services as icon tiles */
.fa .ltiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fa .ltile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 18px 20px; border-radius: 18px; background: #ffffff; border: 1px solid #d9e5f5; color: var(--ink900); text-decoration: none; background-image: none; box-shadow: 0 18px 36px -30px rgba(31, 69, 136, .5); transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s cubic-bezier(.22, .61, .36, 1), background-color .3s ease, border-color .3s ease; }
.fa .ltile-icon { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; background: var(--b600); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(.22, .61, .36, 1), background-color .3s ease; }
.fa .ltile-icon svg { width: 24px; height: 24px; }
.fa .ltile-title { font: 800 17px/1.25 var(--display); }
.fa .ltile-go { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1 var(--body); color: var(--b600); }
.fa .ltile-go svg { width: 14px; height: 14px; transition: transform .3s ease; }
.fa .ltile:hover { transform: translateY(-4px); background: var(--b600); border-color: var(--b600); color: #ffffff; box-shadow: 0 26px 46px -28px rgba(31, 69, 136, .7); }
.fa .ltile:hover .ltile-icon { background: #ffffff; color: var(--b600); transform: rotate(-6deg); }
.fa .ltile:hover .ltile-go { color: #bfe6f8; }
.fa .ltile:hover .ltile-go svg { transform: translateX(4px); }
.fa .ltile--hub .ltile-icon { background: var(--f700); }

/* Contact section: a customer's word on booking fills the left column */
.fa .cs-quote { margin: 0; padding: 20px 22px; border-radius: 20px; background: #ffffff; border: 1px solid #dceadf; border-left: 4px solid var(--b600); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 40px -34px rgba(20, 32, 25, .45); }
.fa .cs-quote-stars { display: inline-flex; gap: 2px; color: #f5b301; }
.fa .cs-quote-stars svg { width: 16px; height: 16px; }
.fa .cs-quote blockquote { margin: 0; font: 600 16.5px/1.55 var(--body); color: var(--ink900); }
.fa .cs-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fa .cs-quote figcaption > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.fa .cs-quote figcaption strong { font-size: 15px; }
.fa .cs-quote figcaption small { font-size: 12.5px; color: var(--ink500); }
.fa .cs-quote .rv-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font: 800 14px/1 var(--display); }
.fa .cs-quote-rating { margin-left: auto; padding-left: 14px; border-left: 1px solid var(--line); }
.fa .cs-quote-rating img { width: 28px; height: 28px; }
.fa .cs-quote-rating .rating-badge__score { font-size: 17px; }
.fa .cs-quote-rating .rating-badge__count { font-size: 12px; }
.fa .cs-quote-rating .stars svg { width: 12px; height: 12px; }

/* Forms: selects read as dropdowns (chevron, pointer) */
.fa .gform_wrapper select { -webkit-appearance: none !important; appearance: none !important; cursor: pointer; padding-right: 46px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004713' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 18px 18px !important; }

/* Contact forms: email on its own row; service and preferred date side by side */
.fa .cs-form .gfield--type-email { grid-column: 1 / -1 !important; }
.fa .gform_wrapper select:focus, .fa .gform_wrapper select:hover { background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004713' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 18px 18px !important; }

/* Service areas: the map as a soft backdrop; the content takes the space in
   two columns (head | search, cities, address and link) */
.fa.sa { padding: clamp(36px, 4.5vw, 56px) 0 !important; }
.fa .sa-backmap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fa .sa-backmap iframe { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; height: 100%; border: 0; pointer-events: none; filter: saturate(.55) contrast(.95); opacity: .7; }
.fa .sa-backmap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #f2f7f2 0%, #f2f7f2 46%, rgba(242, 247, 242, .82) 62%, rgba(242, 247, 242, .25) 82%, rgba(242, 247, 242, 0) 100%); }
.fa .sa-backmap .sa-map-tag { z-index: 2; }
.fa.sa .sa-grid { position: relative; z-index: 1; }
.fa.sa .sa-copy { display: grid; max-width: 78%; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-auto-rows: auto; column-gap: clamp(28px, 4vw, 56px); row-gap: 14px; align-items: start; }
.fa.sa .sa-copy > .eyebrow { grid-column: 1; grid-row: 1; }
.fa.sa .sa-copy > .sec-title { grid-column: 1; grid-row: 2; margin: 0; }
.fa.sa .sa-copy > .sa-sub { grid-column: 1; grid-row: 3 / span 2; }
.fa.sa .sa-copy > .sa-search { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.fa.sa .sa-copy > .sa-chips { grid-column: 2; grid-row: 3; }
.fa.sa .sa-copy > .sa-foot { grid-column: 2; grid-row: 4; }
.fa.sa .sa-chips .city { background: rgba(255, 255, 255, .92); }
@media (max-width: 1100px) { .fa.sa .sa-copy { max-width: none; } .fa .sa-backmap iframe { width: 100%; opacity: .35; } }
@media (max-width: 860px) { .fa.sa .sa-copy { grid-template-columns: 1fr; } .fa.sa .sa-copy > * { grid-column: 1 !important; grid-row: auto !important; } }

/* Contact section balance: call / visit / hours in one compact row of three;
   the form card hugs its fields, centred against the left column */
.fa .cs-grid { align-items: center; }
.fa .cs-copy > .cs-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 0; padding-top: 6px; }
.fa .cs-points li .cpoint { flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 4px 16px 4px 0; border-bottom: 0; }
.fa .cs-points li + li .cpoint { padding-left: 16px; border-left: 1px solid #dceadf; }
.fa .cs-points .cpoint small { font-size: 11px; }
.fa .cs-points .cpoint strong { font-size: 14px; line-height: 1.4; }
.fa .cs-points .cpoint .itile { width: 36px; height: 36px; }
.fa .cs-copy { justify-content: flex-start; }
@media (max-width: 600px) { .fa .cs-copy > .cs-points { grid-template-columns: 1fr; } .fa .cs-points li + li .cpoint { padding-left: 0; border-left: 0; } }

/* Inner heroes with a photo keep a minimum height (a title-only hero such as
   Recent Projects no longer collapses and crops the photo); text centred */
@media (min-width: 961px) {
  #fa-inner-hero:has(> .hero-media img) { display: flex; align-items: center; min-height: clamp(300px, 24vw, 360px); }
  #fa-inner-hero:has(> .hero-media img) > .wrap { width: 100%; }
  /* Photos the client wants seen whole (forest_air_hero_show): the panel takes the photo's shape, so the full unit shows, with a shallower diagonal that clears it. */
  #fa-inner-hero .hero-media--fit, #fa-inner-hero .hero-edge--fit { width: auto !important; max-width: 56%; aspect-ratio: var(--fit-ar); }
  #fa-inner-hero .hero-media--fit { clip-path: polygon(8% 0, 100% 0, 100% 100%, 5px 100%) !important; }
  #fa-inner-hero .hero-edge--fit { clip-path: polygon(calc(8% - 5px) 0, 8% 0, 5px 100%, 0 100%) !important; }
}

/* Fixes: the active city pill keeps its green; contact rows sized to fit */
.fa.sa .sa-chips .city.is-active { background: var(--f700); }
.fa .cs-copy > .cs-points { grid-template-columns: max-content minmax(0, 1.1fr) minmax(0, 1.3fr); }

/* Benefits band (area pages): one full-width blue band, head beside the
   benefits */
.fa .bband-grid { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: 20px clamp(28px, 4vw, 56px); align-items: center; }
.fa.bband-sec .bband { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.fa.bband-sec .sec-title { font-size: clamp(26px, 2.6vw, 34px); }
@media (max-width: 860px) { .fa .bband-grid { grid-template-columns: 1fr; } }

/* Content teaser without an image: head left, the copy in a readable column */
.fa .tease--text .tease { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 72px); align-items: start; }
.fa .tease--text .tease-body { display: contents; }
.fa .tease--text .tease-body > .eyebrow, .fa .tease--text .tease-body > .sec-title { grid-column: 1; }
.fa .tease--text .tease-body > .eyebrow { grid-row: 1; }
.fa .tease--text .tease-body > .sec-title { grid-row: 2; margin: 0; font-size: clamp(26px, 2.6vw, 36px); }
.fa .tease--text .tease-body > .fa-prose { grid-column: 2; grid-row: 1 / span 3; max-width: 68ch; }
@media (max-width: 860px) { .fa .tease--text .tease { grid-template-columns: 1fr; } .fa .tease--text .tease-body > * { grid-column: 1 !important; grid-row: auto !important; } }

/* Emergency: a full-width alert band, no photo — heading | copy | buttons */
.fa.emg { position: relative; overflow: hidden; background: #2a5aae; padding: clamp(32px, 4vw, 48px) 0; margin-top: clamp(40px, 5vw, 72px); }
.fa .emg-grid { position: relative; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 4.6fr) auto; gap: 20px clamp(24px, 3vw, 44px); align-items: center; }
.fa .emg-head { display: flex; align-items: center; gap: 18px; }
.fa .emg-pulse { flex-shrink: 0; width: 64px !important; height: 64px !important; }
.fa .emg-head h2 { margin: 6px 0 0; font: 800 clamp(26px, 2.6vw, 36px)/1.08 var(--display); color: #ffffff; }
.fa .emg-body { display: flex; flex-direction: column; gap: 12px; padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid rgba(255, 255, 255, .22); }
.fa .emg-body p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.fa .emg-when { display: flex; flex-wrap: wrap; gap: 8px; }
.fa .emg-actions { display: flex; flex-direction: column; gap: 10px; }
.fa .emg-actions .btn { justify-content: center; height: 52px; white-space: nowrap; }
.fa .emg-call { color: #004713 !important; font-weight: 800; }
@media (max-width: 1100px) { .fa .emg-grid { grid-template-columns: 1fr 1fr; } .fa .emg-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 760px) { .fa .emg-grid { grid-template-columns: 1fr; } .fa .emg-body { padding-left: 0; border-left: 0; } }

/* Service areas map: the content in one column on the left; the map's right
   half fully visible (Pinellas in view), only a narrow soft edge between */
.fa.sa .sa-copy { display: flex; flex-direction: column; max-width: min(620px, 54%); gap: 14px; }
.fa.sa .sa-copy > * { grid-column: auto; grid-row: auto; }
.fa .sa-backmap iframe { width: 52%; opacity: 1; filter: saturate(.8); }
.fa .sa-backmap::after { background: linear-gradient(90deg, #f2f7f2 0%, #f2f7f2 47%, rgba(242, 247, 242, 0) 55%); }
@media (max-width: 1100px) { .fa.sa .sa-copy { max-width: none; } .fa .sa-backmap { display: none; } }

/* Contact section: visit and hours as two even columns, icon beside text */
.fa .cs-copy > .cs-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 4px; }
.fa .cs-points li .cpoint, .fa .cs-points li + li .cpoint { flex-direction: row; align-items: flex-start; gap: 12px; padding: 6px 18px 6px 0; }
.fa .cs-points li + li .cpoint { padding-left: 18px; border-left: 1px solid #dceadf; }
.fa .cs-points .cpoint .itile { flex-shrink: 0; width: 40px; height: 40px; }
.fa .cs-points .cpoint > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.fa .cs-points .cpoint strong { font-size: 14.5px; line-height: 1.45; }

/* Service areas map: nudged up so Google's place card sits out of view */
.fa .sa-backmap iframe { top: -64px; bottom: auto; height: calc(100% + 64px); }

/* Service areas on light sky: the map blends in through a wider, softer
   light-blue edge; the search box spans the column */
.fa.sa { background: #eaf3fc; }
.fa .sa-backmap::after { background: linear-gradient(90deg, #eaf3fc 0%, #eaf3fc 44%, rgba(234, 243, 252, .85) 50%, rgba(234, 243, 252, .45) 56%, rgba(234, 243, 252, .12) 62%, rgba(234, 243, 252, 0) 68%); }
.fa.sa .sa-copy > .sa-search { align-self: stretch; }
.fa.sa .sa-chips .city:not(.is-active) { background: #ffffff; }
.fa .sa-backmap iframe { top: -100px; height: calc(100% + 100px); }

/* Service areas map: the map fades itself in (a mask on the iframe), so there's no hard edge where it starts; the shop pin is a solid green tile so it reads on the sky blue. */
.fa .sa-backmap::after { content: none; }
.fa .sa-backmap iframe { width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 10%, rgba(0, 0, 0, .7) 20%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 10%, rgba(0, 0, 0, .7) 20%, #000 30%); }
.fa.sa .sa-shop .itile { background: var(--f700); color: #ffffff; box-shadow: 0 10px 22px -12px rgba(0, 48, 15, .6); }
.fa.sa .sa-shop .itile svg { color: #ffffff; }

/* Areas directory: every tile the same height, the service list pinned to the bottom. */
.fa .dir-grid { align-items: stretch; }
.fa .dir-tile .dir-more { margin-top: auto; }

/* The closing Get Started card is brand blue. */
.fa .cband--blue { background: #2a5aae; border-color: #2a5aae; box-shadow: 0 34px 64px -34px rgba(8, 22, 60, .7); }
.fa .cband--blue .cband-copy p { color: rgba(255, 255, 255, .88); }
.fa .cband--blue .tick { color: #ffffff; }
.fa .cband--blue .btn-book { background: #ffffff; color: var(--b600); box-shadow: 0 12px 24px -12px rgba(5, 15, 35, .6); }
.fa .cband--blue .btn-book:hover, .fa .cband--blue .btn-book.is-hover { background: var(--s300); color: #142f5e; }
.fa.sa + .fa#ss-contact-section { background: #ffffff; }

/* Hero lede statement: large body copy rather than a second headline, kept to a comfortable line length when it runs the full width. */
.fa .lede-statement { padding-left: 20px; border-left-width: 3px; }
.fa .lede-statement p { max-width: 80ch; font: 500 clamp(17px, 1.3vw, 19px)/1.65 var(--body); letter-spacing: 0; color: var(--ink700); }


/* Big bands are blue, not green (the footer stays green as the brand anchor). When two blue bands meet, the second is deep navy so they still read apart. */
.fa.why2 .flip-icon { color: #1f4588; }
.fa.why2 .flip-back, .fa.why2 .flip-back strong, .fa.why2 .flip-back p { color: #142f5e; }
.fa.why2 .flip-back a { color: #142f5e !important; background-image: linear-gradient(#142f5e, #142f5e); }
.fa.inclb .inclb-count strong { background: var(--b600); }
.fa.inclb .inclb-list .tk { background: #7fd3f5; color: #142f5e; }
.fa.tm-band .btn-blue { background: #ffffff; color: var(--b600); box-shadow: 0 12px 24px -12px rgba(5, 15, 35, .6); }
.fa.tm-band .btn-blue:hover { background: var(--s300); color: #142f5e; }
.fa.tm-band .tm-quote:nth-child(3) { border-left-color: #bfe6f8; }
.fa.tm-band .tm-av { color: #142f5e; }
.fa#ss-our-services-slider + .fa.why2, .fa.inclb + .fa.bband-sec, .fa.astats + .fa.tm-band { background: #1f4588 !important; }

/* Directory: the Home Base tag stays on one line beside the service-pages toggle, so the city name keeps its room. */
.fa .dir-tile--home { position: relative; }
.fa .dir-tile--home .dir-badge { position: absolute; right: 16px; top: 58px; white-space: nowrap; font-size: 10.5px; padding: 5px 9px; }

/* Footer: plain deep navy with light-blue accents on the headings and icons. */
#fa-footer .fhead::after { background: #7fd3f5; }
#fa-footer .tick svg { color: #7fd3f5; }
#fa-footer .flist .flink::before { background: #7fd3f5; }
#fa-footer .flink:hover { color: #7fd3f5; }
#fa-footer .fcta .itile { background: rgba(127, 211, 245, .16); color: #7fd3f5; }
#fa-footer .ibtn:hover { background: #7fd3f5; border-color: #7fd3f5; color: #0f2850; }
#fa-footer .totop:hover { color: #0f2850; }

/* Header top bar: the slogan from the van, in its italic voice. */
.fa .topbar-slogan { font: italic 700 13.5px/1 var(--display); letter-spacing: .01em; color: #7fd3f5; }

/* Emergency band sits flush against the section above it. */
.fa.emg { margin-top: 0; }

/* Keep Exploring and the Contact section share the light sky, so they read as one "next steps" zone instead of two clashing light bands; a thin rule separates them. */
.fa.explore + .fa#ss-contact-section { padding-top: 0 !important; }
.fa.explore + .fa#ss-contact-section .cs-grid { border-top: 1px solid #d9e5f5; padding-top: clamp(44px, 5.5vw, 72px); }
.fa#ss-contact-section.sec--sky .cs-quote { border-top-color: #d9e5f5; border-right-color: #d9e5f5; border-bottom-color: #d9e5f5; }

/* Directory: the service list drops as a panel over the grid instead of growing the tile, so rows never change height. */
.fa .dir-tile { position: relative; }
.fa .dir-tile:has(.dir-more[open]) { z-index: 30; border-color: var(--f700); box-shadow: 0 18px 34px -26px rgba(0, 48, 15, .55); }
.fa .dir-more ul { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 8px; gap: 2px; background: #ffffff; border: 1px solid #dceadf; border-radius: 16px; box-shadow: 0 28px 56px -26px rgba(20, 32, 25, .4); animation: fa-dir-drop .24s var(--ease) both; }
.fa .dir-more ul::before { content: ""; position: absolute; top: -7px; left: 56px; width: 12px; height: 12px; background: #ffffff; border-left: 1px solid #dceadf; border-top: 1px solid #dceadf; transform: rotate(45deg); }
@keyframes fa-dir-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fa .dir-more ul a.dir-link, .fa .dir-tile--home .dir-more ul a.dir-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; font: 600 14.5px/1.3 var(--body); color: var(--ink900); background: none; text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease); }
.fa .dir-more ul a.dir-link::after { content: "\2192"; color: var(--f700); opacity: 0; transform: translateX(-4px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.fa .dir-more ul a.dir-link:hover, .fa .dir-more ul a.dir-link:focus-visible { background: var(--f50); color: var(--f700); }
.fa .dir-more ul a.dir-link:hover::after, .fa .dir-more ul a.dir-link:focus-visible::after { opacity: 1; transform: none; }
.fa .dir-tile.has-hit .dir-more { display: none; }
.fa .dir-hit { margin: 0 0 0 44px; }
.fa .dir-hit[hidden] { display: none; }
.fa .dir-hit-link { font: 700 14px/1.3 var(--body); color: var(--b600); text-decoration: none; background: none; }
.fa .dir-hit-link:hover { color: var(--f700); }
.fa .dir-tile--home .dir-hit-link { color: #bfe6f8; }
@media (prefers-reduced-motion: reduce) { .fa .dir-more ul { animation: none; } }

/* Sticky header: the top bar scrolls away and the blue nav bar stays pinned, condensing smoothly once the page is scrolled. */
#fa-masthead { position: sticky; top: calc(var(--fa-adminbar, 0px) - var(--fa-topbar-h, 42px)); z-index: 1000; }
body.admin-bar #fa-masthead { --fa-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar #fa-masthead { --fa-adminbar: 46px; } }
@media (max-width: 600px) { body.admin-bar #fa-masthead { --fa-adminbar: 0px; } }
#fa-masthead #masthead-bar { transition: box-shadow .35s var(--ease); }
#fa-masthead #masthead-bar > .wrap { transition: height .35s var(--ease); }
#fa-masthead .logo img { transition: height .35s var(--ease); }
#fa-masthead.is-condensed #masthead-bar { box-shadow: 0 14px 30px -18px rgba(5, 15, 35, .7); }
#fa-masthead.is-condensed #masthead-bar > .wrap { height: 68px !important; }
#fa-masthead.is-condensed .logo img { height: 46px; }
@media (max-width: 640px) { #fa-masthead.is-condensed #masthead-bar > .wrap { height: 60px !important; } #fa-masthead.is-condensed .logo img { height: 38px; } }
@media (prefers-reduced-motion: reduce) { #fa-masthead #masthead-bar > .wrap, #fa-masthead .logo img { transition: none; } }

/* Footer links: soft white that brightens on hover as a light-blue underline sweeps in from the left (no sideways shift); social icons fill light blue and lift. */
#fa-footer .flink { color: rgba(255, 255, 255, .82); text-decoration: none; background-image: linear-gradient(#7fd3f5, #7fd3f5); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .2s var(--ease), background-size .3s var(--ease); }
#fa-footer .flink:hover, #fa-footer .flink:focus-visible { color: #ffffff; text-decoration: none; background-size: 100% 2px; }
#fa-footer .flist .flink { display: inline; }
#fa-footer .flist .flink::before { content: none; }
#fa-footer .flist .flink:hover { transform: none; }
#fa-footer .ibtn { transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease); }
#fa-footer .ibtn:hover { transform: translateY(-2px); }
#fa-footer .totop { transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
#fa-footer .totop:hover { background: #ffffff; border-color: #ffffff; color: #0f2850; }

/* Hero lede, short statement beside long copy: one calm column, the statement and then the copy straight under it at the same width, so neither side is left with blank space. */
.fa .lede--flow { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.fa .lede--flow > .lede-text { padding: 0 0 0 23px; font-size: 16.5px; }

/* Area hero scene: the van drives in along the road and parks by a green highway sign for the area, under a light-blue sky with the logo's swooshes. */
.fa .hscene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #a9dcf5 0%, #d4eefb 58%, #eaf7fd 100%); }
.fa .hscene-swoosh { position: absolute; inset: 0; width: 100%; height: 100%; }
.fa .hscene-cloud { position: absolute; width: 110px; height: 34px; border-radius: 40px; background: #ffffff; opacity: .92; animation: hs-cloud 38s linear infinite alternate; }
.fa .hscene-cloud::before, .fa .hscene-cloud::after { content: ""; position: absolute; border-radius: 50%; background: #ffffff; }
.fa .hscene-cloud::before { width: 52px; height: 52px; left: 18px; top: -24px; }
.fa .hscene-cloud::after { width: 40px; height: 40px; left: 54px; top: -16px; }
.fa .hscene-cloud--a { top: 16%; left: 42%; }
.fa .hscene-cloud--b { top: 34%; left: 76%; transform: scale(.7); animation-duration: 46s; animation-delay: -12s; }
@keyframes hs-cloud { from { translate: 0 0; } to { translate: -90px 0; } }
.fa .hscene-trees { position: absolute; left: 0; right: 0; bottom: 86px; width: 100%; height: 110px; }
.fa .hscene-grass { position: absolute; left: 0; right: 0; bottom: 66px; height: 22px; background: #5aa66a; }
.fa .hscene-road { position: absolute; left: 0; right: 0; bottom: 0; height: 66px; background: #3b434b; border-top: 4px solid #cfd8de; }
.fa .hscene-dash { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #ffffff 0 30px, transparent 30px 60px); opacity: .85; animation: hs-road .45s linear 6 .2s; }
@keyframes hs-road { to { background-position: -60px 0; } }
.fa .hscene-van { position: absolute; left: 27%; bottom: 14px; width: clamp(160px, 26%, 215px); z-index: 1; animation: hs-drive 2.7s cubic-bezier(.22, .8, .3, 1) .2s both; }
@keyframes hs-drive { from { transform: translateX(-440px); } to { transform: none; } }
.fa .hscene .van { position: static; display: block; width: 100%; animation: none; }
.fa .hscene .van .wheel { animation: fa-spin .55s linear 5 .2s; }
.fa .hscene .van .bob { animation: fa-bob .45s ease-in-out 6 alternate .2s; }
.fa .hscene-sign { position: absolute; right: 7%; bottom: 86px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; transform-origin: 50% 100%; animation: hs-pop .6s cubic-bezier(.3, 1.4, .5, 1) 2.3s both; }
.fa .hscene-pin { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -10px rgba(8, 22, 60, .6); animation: hs-bob 2.4s ease-in-out 3s infinite; }
.fa .hscene-pin svg { width: 22px; height: 22px; }
.fa .hscene-board { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 18px 13px; border-radius: 10px; background: #0b6b3a; color: #ffffff; box-shadow: inset 0 0 0 3px #0b6b3a, inset 0 0 0 5px #ffffff, 0 12px 24px -12px rgba(0, 36, 11, .6); }
.fa .hscene-board small { font: 700 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.fa .hscene-board strong { font: 800 22px/1.05 var(--display); letter-spacing: -.01em; white-space: nowrap; color: #ffffff; }
.fa .hscene-svc { padding: 7px 12px; border-radius: 8px; background: var(--b600); color: #ffffff; font: 800 13px/1 var(--display); white-space: nowrap; box-shadow: inset 0 0 0 2px var(--b600), inset 0 0 0 3.5px #ffffff; }
.fa .hscene-posts { width: 64%; height: 46px; margin-top: -6px; background: linear-gradient(90deg, #9aa5ad 0 6px, transparent 6px calc(100% - 6px), #9aa5ad calc(100% - 6px)); }
@keyframes hs-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .fa .hscene *, .fa .hscene-van, .fa .hscene-sign { animation: none !important; } }

/* Area map: the city on Google Maps in a rounded card, nudged up so the place card is out of view. */
.fa .area-map { position: relative; width: 100%; max-width: 520px; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; background: #e8f6fd; box-shadow: 0 24px 48px -30px rgba(8, 22, 60, .45), inset 0 0 0 1px rgba(42, 90, 174, .08); }
.fa .area-map iframe { position: absolute; left: 0; top: -100px; width: 100%; height: calc(100% + 100px); border: 0; }
.fa .area-map-tag { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #004713; color: #ffffff; font: 800 15px/1 var(--display); box-shadow: 0 14px 28px -14px rgba(0, 36, 11, .7); pointer-events: none; }
.fa .area-map-tag svg { width: 18px; height: 18px; color: #9fdcab; }

/* Service areas: the city card on the map — the picked city, its service pages as links and a button to its page, eased in on each pick. The map is widened to the left so the city sits just left of the card. */
.fa .sa-card { position: absolute; right: 0; top: 50%; z-index: 2; width: 340px; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: #ffffff; box-shadow: 0 30px 60px -30px rgba(8, 22, 60, .55), 0 0 0 1px rgba(42, 90, 174, .08); transform: translateY(-50%); }
.fa .sa-card.is-fresh { animation: fa-card-in .4s var(--ease); }
@keyframes fa-card-in { from { opacity: .35; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.fa .sa-card-head { display: flex; align-items: center; gap: 12px; }
.fa .sa-card-pin { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--f700); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .sa-card-pin svg { width: 22px; height: 22px; }
.fa .sa-card-title { display: flex; flex-direction: column; gap: 4px; }
.fa .sa-card-title small { font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink500); }
.fa .sa-card-title strong { font: 800 22px/1.1 var(--display); color: var(--ink900); }
.fa .sa-card-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fa .sa-svc { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 100%; padding: 9px 11px; border-radius: 10px; background: #f4f8fd; border: 1px solid #dbe6f3; color: var(--ink900); font: 600 13.5px/1.25 var(--body); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.fa .sa-svc svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--b600); transition: transform .2s var(--ease), color .2s var(--ease); }
.fa .sa-svc:hover, .fa .sa-svc:focus-visible { background: var(--b600); border-color: var(--b600); color: #ffffff; text-decoration: none; }
.fa .sa-svc:hover svg, .fa .sa-svc:focus-visible svg { color: #ffffff; transform: translateX(3px); }
.fa .sa-card-go { justify-content: center; width: 100%; }
.fa .sa-backmap iframe { width: calc(60% + 200px); }
@media (max-width: 1100px) { .fa .sa-card { position: static; width: auto; max-width: 520px; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fa .sa-card.is-fresh { animation: none; } }

/* Service areas map: starts right of the text column (never behind the copy) and sits high, so the picked city shows above the city card in the lower right; the shift also keeps Google's place card out of view. */
.fa .sa-backmap iframe { left: 55%; right: auto; width: 45%; top: -240px; height: calc(100% + 240px); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 8%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 8%, #000 18%); }
.fa .sa-card { top: auto; bottom: 0; transform: none; }

/* FAQs page: quick answers, then a sticky side (search, topics, help) beside the topics' questions, then the questions by city. */
.fa .fq-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fa .fq-quick li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #f4f8fd; border: 1px solid #dbe6f3; }
.fa .fq-quick-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--b600); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .fq-quick-ic svg { width: 22px; height: 22px; }
.fa .fq-quick li > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fa .fq-quick small { font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink500); }
.fa .fq-quick strong, .fa .fq-quick .fq-quick-link { font: 700 14.5px/1.35 var(--display); color: var(--ink900); }
.fa .fq-quick .fq-quick-link { text-decoration: none; background: none; padding: 0; }
.fa .fq-quick .fq-quick-link:hover { color: var(--b600); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .fa .fq-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fa .fq-quick { grid-template-columns: 1fr; } }

.fa .fq-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 56px); align-items: start; }
.fa .fq-side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.fa .fq-search { width: 100%; max-width: none; }
.fa .fq-topics { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); }
.fa .fq-topic { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--ink900); font: 600 14.5px/1.25 var(--body); text-decoration: none; background: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .fq-topic-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: #eaf2fc; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .fq-topic-ic svg { width: 16px; height: 16px; }
.fa .fq-topic-name { flex: 1; }
.fa .fq-count { min-width: 26px; padding: 3px 7px; border-radius: 999px; background: #f2f5f8; color: var(--ink500); font: 700 12px/1 var(--body); text-align: center; }
.fa .fq-topic:hover, .fa .fq-topic.is-current { background: #eef4fc; color: var(--b600); text-decoration: none; }
.fa .fq-topic:hover .fq-topic-ic, .fa .fq-topic.is-current .fq-topic-ic { background: var(--b600); color: #ffffff; }
.fa .fq-topic.is-empty { opacity: .4; }
.fa .fq-help { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 18px; background: #2a5aae; color: #ffffff; }
.fa .fq-help strong { font: 800 18px/1.2 var(--display); color: #ffffff; }
.fa .fq-help > span { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.fa .fq-help .tel-cta { color: #ffffff; font-size: 17px; }
.fa .fq-help .tel-cta__badge { background: #ffffff; color: var(--b600); width: 38px; height: 38px; }
.fa .fq-help .btn-book { background: #ffffff; color: var(--b600); }
.fa .fq-help .btn-book:hover { background: var(--s300); color: #142f5e; }

.fa .fq-main { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 52px); min-width: 0; }
.fa .fq-group { scroll-margin-top: 110px; display: flex; flex-direction: column; gap: 14px; }
.fa .fq-group[hidden] { display: none; }
.fa .fq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 12px; border-bottom: 2px solid #e3ecf6; }
.fa .fq-head-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--f700); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .fq-head-ic svg { width: 21px; height: 21px; }
.fa .fq-head h2 { margin: 0; font: 800 clamp(22px, 2vw, 27px)/1.15 var(--display); }
.fa .fq-links { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fa .fq-chip { padding: 6px 12px; border-radius: 999px; background: #eef4fc; color: var(--b600); font: 700 12.5px/1.2 var(--body); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .fq-chip:hover { background: var(--b600); color: #ffffff; text-decoration: none; }
.fa .fq-list { display: flex; flex-direction: column; gap: 8px; }
.fa .fq-item { border-radius: 14px; background: #ffffff; border: 1px solid var(--line); transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.fa .fq-item[hidden] { display: none; }
.fa .fq-item:hover { border-color: #b9cde8; }
.fa .fq-item[open] { border-color: var(--b600); box-shadow: 0 18px 36px -28px rgba(31, 69, 136, .55); }
.fa .fq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; font: 700 16px/1.4 var(--display); color: var(--ink900); }
.fa .fq-item summary::-webkit-details-marker { display: none; }
.fa .fq-item summary:hover, .fa .fq-item[open] summary { color: var(--b600); }
.fa .fq-plus { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #eef4fc; transition: background-color .2s var(--ease), transform .3s var(--ease); }
.fa .fq-plus::before, .fa .fq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--b600); transition: transform .3s var(--ease), background-color .2s var(--ease); }
.fa .fq-plus::after { transform: rotate(90deg); }
.fa .fq-item[open] .fq-plus { background: var(--b600); transform: rotate(180deg); }
.fa .fq-item[open] .fq-plus::before, .fa .fq-item[open] .fq-plus::after { background: #ffffff; }
.fa .fq-item[open] .fq-plus::after { transform: rotate(0deg); }
.fa .fqa { padding: 0 18px 18px; font-size: 15.5px; line-height: 1.65; color: var(--ink700); animation: fa-fq-open .3s var(--ease); }
.fa .fqa p { margin: 0 0 .7em; }
.fa .fqa p:last-of-type { margin-bottom: 0; }
@keyframes fa-fq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fa .fqa-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 700 13.5px/1.2 var(--body); color: var(--b600); text-decoration: none; background: none; padding: 0; }
.fa .fqa-src svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.fa .fqa-src:hover { color: var(--f700); text-decoration: none; }
.fa .fqa-src:hover svg { transform: translateX(3px); }
.fa .fq-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.fa .fq-city { padding: 8px 14px; border-radius: 999px; border: 1px solid #cfdcd1; background: #ffffff; color: var(--ink900); font: 700 13.5px/1 var(--body); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.fa .fq-city:hover { border-color: var(--f700); color: var(--f700); }
.fa .fq-city.is-active { background: var(--f700); border-color: var(--f700); color: #ffffff; }
.fa .fq-city[hidden] { display: none; }
.fa .fq-cityset { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: #f4f8fd; border: 1px solid #dbe6f3; }
.fa .fq-cityset[hidden] { display: none; }
.fa .fq-cityhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fa .fq-cityhead h3 { margin: 0; font: 800 19px/1.25 var(--display); }
.fa .fq-citygo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--f700); color: #ffffff; font: 700 13.5px/1 var(--body); text-decoration: none; transition: background-color .2s var(--ease); }
.fa .fq-citygo svg { width: 14px; height: 14px; }
.fa .fq-citygo:hover { background: var(--f600); color: #ffffff; text-decoration: none; }
.fa .fq-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 22px; border-radius: 18px; background: #f4f8fd; border: 1px dashed #b9cde8; }
.fa .fq-empty[hidden] { display: none; }
@media (max-width: 960px) { .fa .fq-grid { grid-template-columns: 1fr; } .fa .fq-side { position: static; } .fa .fq-topics { flex-direction: row; flex-wrap: wrap; } .fa .fq-topic-ic, .fa .fq-count { display: none; } .fa .fq-help { display: none; } }
@media (prefers-reduced-motion: reduce) { .fa .fqa { animation: none; } }

/* Cool Club hero: the whole intro on the left (statement set apart, the rest under it); on the right the member card rises out of a sleeve with the benefits and the Join button. */
.fa.hero--club .hero-copy { max-width: 560px !important; }
.fa .club-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.fa .club-state svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; color: #7fd3f5; }
.fa .club-state p { margin: 0; font: 600 16.5px/1.5 var(--body); color: #ffffff; }
.fa .club-more p { margin: 0 0 .6em; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.fa .club-more p:last-child { margin-bottom: 0; }
.fa .club-card { position: absolute; z-index: 2; left: 51%; bottom: clamp(28px, 4vw, 48px); width: 300px; height: 186px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; border-radius: 18px; overflow: hidden; color: #ffffff; background: linear-gradient(135deg, #0f2850 0%, #1f4588 55%, #2a5aae 100%); box-shadow: 0 30px 60px -24px rgba(5, 15, 35, .75), inset 0 0 0 1px rgba(255, 255, 255, .18); transform: rotate(-6deg); animation: fa-club-float 6s ease-in-out infinite; }
.fa .club-card::before { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 46%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); transform: rotate(20deg); }
.fa .club-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.fa .club-card-top img { height: 40px; width: auto; }
.fa .club-card-flake { width: 26px; height: 26px; color: #7fd3f5; }
.fa .club-card-name { position: relative; font: 800 28px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.fa .club-card-foot { position: relative; display: flex; align-items: center; justify-content: space-between; font: 700 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #bfe6f8; }
.fa .club-card-chip { width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #e4ebf2, #a9bccd); box-shadow: inset 0 0 0 1px rgba(15, 40, 80, .25); }
.fa .club-card-pines { position: absolute; right: -8px; bottom: -10px; width: 130px; height: auto; fill: rgba(127, 211, 245, .16); }
@keyframes fa-club-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .fa .club-card { animation: none; } }
/* The map's left edge fades out fully before Google's layer toggle (bottom left), so no thumbnail shows through. */
.fa .sa-backmap iframe { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 15%, rgba(0, 0, 0, .5) 23%, #000 33%); mask-image: linear-gradient(90deg, transparent 0%, transparent 15%, rgba(0, 0, 0, .5) 23%, #000 33%); }

.fa .club-join { position: relative; flex: 0 1 400px; display: flex; flex-direction: column; align-items: center; perspective: 1000px; }
.fa .club-join .club-card { position: relative; left: auto; bottom: auto; z-index: 2; width: 330px; height: 204px; margin-bottom: -70px; --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg); transition: transform .25s ease-out; animation: fa-club-bob 6s ease-in-out infinite; }
@keyframes fa-club-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.fa .club-sleeve { position: relative; width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 92px 26px 24px; border-radius: 24px; background: #ffffff; color: var(--ink700); box-shadow: 0 34px 64px -32px rgba(5, 15, 35, .7); }
.fa .club-sleeve::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 10px; border-radius: 0 0 10px 10px; background: #e8eef6; }
.fa .club-sleeve-title { font: 800 19px/1.25 var(--display); color: var(--ink900); }
.fa .club-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fa .club-perks li { display: flex; align-items: flex-start; gap: 10px; font: 600 15px/1.45 var(--body); color: var(--ink900); }
.fa .club-tick { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: #e3f5fc; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; }
.fa .club-tick svg { width: 14px; height: 14px; }
.fa .club-go { justify-content: center; width: 100%; margin-top: 4px; }
.fa .club-go svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.fa .club-go:hover svg { transform: translateX(4px); }
.fa .club-sleeve .tel-cta { align-self: center; color: var(--ink900); font-size: 17px; }
.fa .club-sleeve .tel-cta:hover { color: var(--f700); }
.fa .club-sleeve .tel-cta__badge { background: var(--f700); color: #ffffff; width: 38px; height: 38px; }
.fa .club-sleeve .tel-cta__badge::after { color: var(--f700); }
@media (max-width: 960px) { .fa .club-join { flex-basis: 100%; max-width: 440px; margin: 12px auto 0; } }
@media (prefers-reduced-motion: reduce) { .fa .club-join .club-card { animation: none; transition: none; } }

/* Service areas, framed: two even columns — the copy, and the live map in a rounded frame at full strength (no fading into the page) with the city card docked along its foot. */
.fa.sa .sa-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 4vw, 56px); align-items: stretch; }
.fa.sa .sa-copy { max-width: none; }
.fa .sa-mapcol { position: relative; min-height: 540px; }
.fa .sa-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; background: #dbe9f5; border: 6px solid #ffffff; box-shadow: 0 30px 60px -34px rgba(8, 22, 60, .55); }
.fa .sa-frame iframe { position: absolute; left: 0; top: -130px; width: 100%; height: calc(100% + 130px); border: 0; pointer-events: none; filter: saturate(.9); }
.fa .sa-mapcol .sa-card { position: absolute; left: 18px; right: 18px; bottom: 18px; top: auto; width: auto; transform: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 20px; }
.fa .sa-mapcol .sa-card-links { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa .sa-mapcol .sa-card-go { grid-column: 2; grid-row: 1; width: auto; padding: 0 18px; height: 44px; }
.fa .sa-mapcol .sa-card-title strong { font-size: 20px; }
@media (max-width: 1100px) { .fa.sa .sa-grid { grid-template-columns: 1fr; } .fa .sa-mapcol { min-height: 480px; } }
@media (max-width: 640px) {
  .fa .sa-mapcol { min-height: 0; display: flex; flex-direction: column; }
  .fa .sa-frame { position: relative; height: 300px; }
  .fa .sa-mapcol .sa-card { position: relative; left: auto; right: auto; bottom: auto; margin: -56px 10px 0; grid-template-columns: 1fr; }
  .fa .sa-mapcol .sa-card-links { grid-template-columns: 1fr 1fr; grid-row: auto; }
  .fa .sa-mapcol .sa-card-go { grid-column: 1; grid-row: auto; width: 100%; }
}

/* Cool Club join panel, wide and short: the member card tucked over the top-right corner, the benefits two by two, and Join beside the call link. */
.fa.hero--club .hero-copy { max-width: 520px !important; }
.fa .club-join { flex: 0 1 580px; display: block; margin-top: 56px; }
.fa .club-join .club-card { position: absolute; right: -14px; top: -66px; width: 214px; height: 132px; margin: 0; padding: 12px 14px; border-radius: 14px; }
.fa .club-join .club-card-top img { height: 28px; }
.fa .club-join .club-card-flake { width: 18px; height: 18px; }
.fa .club-join .club-card-name { font-size: 19px; }
.fa .club-join .club-card-foot { font-size: 9px; }
.fa .club-join .club-card-chip { width: 24px; height: 18px; border-radius: 4px; }
.fa .club-join .club-card-pines { width: 90px; }
.fa .club-sleeve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px 22px; padding: 26px 28px 24px; }
.fa .club-sleeve::before { content: none; }
.fa .club-sleeve-title { grid-column: 1 / -1; padding-right: 200px; }
.fa .club-perks { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 22px; }
.fa .club-perks li { font-size: 14.5px; }
.fa .club-go { margin-top: 0; }
.fa .club-sleeve .tel-cta { justify-self: center; font-size: 16px; }
@media (max-width: 960px) { .fa .club-join { flex-basis: 100%; max-width: 580px; margin: 72px auto 0; } }
@media (max-width: 560px) { .fa .club-sleeve, .fa .club-perks { grid-template-columns: 1fr; } .fa .club-sleeve-title { padding-right: 0; margin-top: 52px; } .fa .club-join .club-card { right: 50%; transform: translateX(50%) rotate(-4deg); } }
/* The member card rides higher on the panel's corner, clear of the benefits. */
.fa .club-join { margin-top: 92px; }
.fa .club-join .club-card { top: -104px; }
@media (max-width: 960px) { .fa .club-join { margin-top: 110px; } }

/* FAQ sections link on to the full FAQs page. */
.fa .faqchat-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 16px; border-radius: 999px; background: #eef4fc; color: var(--b600); font: 700 14.5px/1 var(--body); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .faqchat-all svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.fa .faqchat-all:hover { background: var(--b600); color: #ffffff; text-decoration: none; }
.fa .faqchat-all:hover svg { transform: translateX(3px); }

/* Contact page panel: the ways to reach Forest Air two by two (hours across), and the map filling the rest, so the panel is no taller than the form. */
.fa .ci-rows { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.fa .ci-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.fa .ci-map { min-height: 200px; }
@media (max-width: 560px) { .fa .ci-rows { grid-template-columns: 1fr; } }
.fa#ss-contact-info + #ss-cta-band-v2 { padding-top: 0 !important; }

/* Cool Club: the member card sits over the panel's corner rather than off its edge; Join scrolls to the sign-up form. */
.fa .club-join .club-card { right: 28px; }
#ss-contact-section { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html:has(#ss-contact-section) { scroll-behavior: smooth; } }

/* Contact panel rows, formatted: small icon tiles, the label tight over its value, the email on one line in the wider column, social links as pills, and the hours' main line bold over two smaller notes. */
.fa .ci-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 0 18px; }
.fa .ci-row { gap: 12px; padding: 14px 0; align-items: flex-start; }
.fa .ci-row--clock { grid-column: 1 / -1; border-bottom: 0; }
.fa .ci-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .ci-ic svg { width: 18px; height: 18px; }
.fa .ci-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fa .ci-label { font: 700 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #7fd3f5; }
.fa .ci-val { font: 600 15.5px/1.45 var(--body); color: #ffffff; text-decoration: none; background: none; padding: 0; }
.fa a.ci-val:hover { color: #bfe6f8; text-decoration: underline; text-underline-offset: 3px; }
.fa .ci-row--mail .ci-val, .fa .ci-row--phone .ci-val { white-space: nowrap; }
.fa .ci-note { font: 500 14px/1.45 var(--body); color: rgba(255, 255, 255, .78); }
.fa .ci-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fa .ci-soc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #ffffff; font: 600 13.5px/1 var(--body); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.fa .ci-soc svg { width: 15px; height: 15px; }
.fa .ci-soc:hover { background: #ffffff; color: #1f4588; text-decoration: none; }
@media (max-width: 560px) { .fa .ci-rows { grid-template-columns: 1fr; } }

/* A short intro sits whole in the hero, with the Google rating as a white pill under it. */
.fa .hero-more p { margin: 0 0 .5em; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.fa .hero-more p:last-child { margin-bottom: 0; }
.fa .rating-badge.hero-proof { align-self: flex-start; margin-top: 8px; padding: 10px 18px 10px 12px; border-radius: 16px; background: #ffffff; box-shadow: 0 16px 32px -18px rgba(5, 15, 35, .6); }
.fa .rating-badge.hero-proof img { width: 32px; height: 32px; }
.fa .rating-badge.hero-proof .rating-badge__score { font-size: 20px; }

/* Every diagonal white cut (heroes, CTA bands, the Get Started card) is the same fixed 5px stripe, whatever the size of the photo beside it. */
.fa .cband-photo img { clip-path: polygon(calc(16% + 5px) 0, 100% 0, 100% 100%, 5px 100%); }
.fa .cband--left .cband-photo img { clip-path: polygon(0 0, calc(100% - 5px) 0, calc(84% - 5px) 100%, 0 100%); }
@media (max-width: 760px) { .fa .cband-photo img, .fa .cband--left .cband-photo img { clip-path: none; } }

/* Mobile menu: a clean sheet from the right — Call and Book Online first, big rows, About Us and Services opening in place, address and hours at the foot. */
.fa.mnav { position: fixed; inset: 0; z-index: 2000; visibility: hidden; pointer-events: none; }
.fa.mnav.is-open { visibility: visible; pointer-events: auto; }
.fa .mnav-backdrop { position: absolute; inset: 0; background: rgba(8, 20, 40, .55); opacity: 0; transition: opacity .3s var(--ease); }
.fa.mnav.is-open .mnav-backdrop { opacity: 1; }
.fa .mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 420px); display: flex; flex-direction: column; background: #ffffff; box-shadow: -24px 0 60px -30px rgba(8, 20, 40, .6); transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
.fa.mnav.is-open .mnav-panel { transform: none; }
.fa .mnav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; border-bottom: 1px solid var(--line); }
.fa .mnav-logo img { height: 46px; width: auto; display: block; }
.fa .mnav-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #eef4fc; color: var(--ink900); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fa .mnav-x svg { width: 22px; height: 22px; }
.fa .mnav-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 8px; }
.fa .mnav-ctas .btn { justify-content: center; height: 50px; padding: 0 12px; font-size: 15px; }
.fa .mnav-list { padding: 4px 20px; }
.fa .mnav-list > ul { list-style: none; margin: 0; padding: 0; }
.fa .mnav-list > ul > li { border-bottom: 1px solid var(--line); }
.fa .mnav-row { display: flex; align-items: center; gap: 8px; }
.fa .mnav-link { flex: 1; padding: 16px 0; font: 700 18px/1.2 var(--display); color: var(--ink900); text-decoration: none; background: none; }
.fa .mnav-link.is-current, .fa .mnav-sublink.is-current { color: var(--b600); }
.fa .mnav-more { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 0; background: #eef4fc; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s var(--ease); }
.fa .mnav-more svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.fa .mnav-more[aria-expanded="true"] { background: var(--b600); color: #ffffff; }
.fa .mnav-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.fa .mnav-sub { list-style: none; margin: 0 0 14px; padding: 6px; border-radius: 14px; background: #f4f8fd; display: flex; flex-direction: column; gap: 2px; animation: fa-mnav-sub .28s var(--ease); }
.fa .mnav-sub[hidden] { display: none; }
@keyframes fa-mnav-sub { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fa .mnav-sublink { display: block; padding: 11px 12px; border-radius: 10px; font: 600 15.5px/1.3 var(--body); color: var(--ink900); text-decoration: none; background: none; }
.fa .mnav-sublink:active, .fa .mnav-sublink:hover { background: #ffffff; color: var(--b600); }
.fa .mnav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 26px; background: #f4f8fd; }
.fa .mnav-info { display: flex; align-items: flex-start; gap: 10px; font: 500 14.5px/1.45 var(--body); color: var(--ink700); text-decoration: none; background: none; }
.fa .mnav-info svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--b600); }
.fa .mnav-slogan { font: italic 700 14px/1.3 var(--display); color: var(--b600); }
html.mnav-locked, html.mnav-locked body { overflow: hidden; }
@media (min-width: 1200px) { .fa.mnav { display: none; } }
@media (prefers-reduced-motion: reduce) { .fa .mnav-panel, .fa .mnav-backdrop { transition: none; } .fa .mnav-sub { animation: none; } }
/* Logged in, the menu sheet sits below the WordPress admin bar. */
body.admin-bar .fa.mnav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fa.mnav { top: 46px; } }

/* Mobile pass. */
/* Services on phones: white cards with a vector icon instead of photos. */
.fa .mtile--icon { gap: 14px; padding: 16px 14px 14px; min-height: 132px; }
.fa .mtile-ic { width: 48px; height: 48px; border-radius: 14px; background: #e8f1fb; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; }
.fa .mtile-ic svg { width: 24px; height: 24px; }
.fa .mtile--icon .mtile-body { padding: 0; }
.fa .mtile--icon:hover .mtile-ic { background: var(--b600); color: #ffffff; }
@media (max-width: 640px) {
  /* Service areas: the city pills become one row to swipe through. */
  .fa.sa .sa-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 10px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .fa.sa .sa-chips::-webkit-scrollbar { display: none; }
  .fa.sa .sa-chips .city { flex-shrink: 0; scroll-snap-align: start; }
  /* Cool Club band: a shorter photo with a smaller member card. */
  .fa .cc-media { flex-basis: 100%; min-height: 280px; }
  .fa .cc-card { left: 16px; bottom: 16px; width: 250px; height: 154px; padding: 16px 18px; }
}
@media (max-width: 1100px) { .fa.sa .sa-grid { grid-template-columns: minmax(0, 1fr); } .fa.sa .sa-copy, .fa .sa-mapcol { min-width: 0; } }
@media (max-width: 760px) {
  /* Emergency band: a smaller ringing phone so its ripple stays on screen; buttons full width. */
  .fa .emg-pulse { width: 48px !important; height: 48px !important; }
  .fa .emg-pulse svg { width: 22px; height: 22px; }
  .fa .emg-head { gap: 14px; }
  .fa .emg-actions .btn { flex: 1 1 100%; justify-content: center; }
  /* Get Started card: the photo spans the card on phones. */
  .fa .cband--left .cband-photo { position: relative; left: auto; width: 100%; height: 220px; }
}
@media (max-width: 640px) {
}
@media (max-width: 960px) {
  /* Heroes on phones: the photo (or the area scene) comes back as a strip along the foot, cut on a diagonal with the same white line. */
  #fa-inner-hero, #fa-hero { display: flex; flex-direction: column; }
  #fa-inner-hero > .wrap, #fa-hero > .wrap { order: 1; width: 100%; }
  .fa .hero-media { order: 2; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 210px; margin-top: 28px; background: #ffffff; clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%) !important; }
  #fa-inner-hero .hero-media { margin-bottom: -36px; }
  #fa-hero .hero-media { margin-top: 0; }
  .fa .hero-media > img { position: absolute; inset: 0; width: 100%; height: 100% !important; clip-path: polygon(0 calc(22% + 5px), 100% 5px, 100% 100%, 0 100%); }
  .fa .hero-media > .hscene { clip-path: polygon(0 calc(22% + 5px), 100% 5px, 100% 100%, 0 100%); }
  .fa .hero-media .hscene-road { height: 46px; }
  .fa .hero-media .hscene-grass { bottom: 46px; height: 16px; }
  .fa .hero-media .hscene-trees { bottom: 60px; height: 84px; }
  .fa .hero-media .hscene-sign { bottom: 60px; right: 5%; scale: .62; transform-origin: 100% 100%; }
  .fa .hero-media .hscene-van { bottom: 8px; left: 8%; width: 150px; }
  .fa .hero-media .hscene-cloud--a { top: 30%; left: 10%; }
  .fa .hero-media .hscene-cloud--b { display: none; }
  /* Signs you need: compact rows instead of tall cards. */
  .fa .icards { grid-template-columns: 1fr !important; gap: 0 !important; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); overflow: hidden; }
  .fa .icard { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--line) !important; transform: none !important; }
  .fa .icard:first-child { border-top: 0 !important; }
  .fa .icard-n { display: none; }
  .fa .icard .itile { width: 44px; height: 44px; }
  .fa .icard h3 { font-size: 17px; }
  .fa .icard p { font-size: 14.5px; line-height: 1.55; }
  /* How it works: a vertical timeline instead of boxed cards. */
  .fa .steps { display: flex !important; flex-direction: column; gap: 0 !important; }
  .fa .steps .step { position: relative; display: grid !important; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 0 0 26px !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; text-align: left; }
  .fa .steps .step::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--line); }
  .fa .steps .step:last-child { padding-bottom: 0 !important; }
  .fa .steps .step:last-child::before { content: none; }
  .fa .steps .step-n { grid-row: span 2; width: 52px !important; height: 52px !important; margin: 0 !important; font-size: 18px !important; }
  .fa .steps .step h3 { align-self: end; margin: 6px 0 0; font-size: 18px; }
  .fa .steps .step p { margin: 0; font-size: 15px; }
}
@media (max-width: 640px) {
  /* What's included: the checklist leads; the tall photo steps aside on phones. */
  .fa .inclb-photo { display: none; }
}

/* Phone carousels (js/design.js adds .mcar below 640px): a swipeable row, the next card peeking in, arrows and a counter underneath. */
.fa .mcar { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; margin-left: -20px !important; margin-right: -20px !important; padding: 6px 20px 10px !important; scrollbar-width: none; columns: auto !important; }
.fa .mcar::-webkit-scrollbar { display: none; }
.fa .mcar > * { flex: 0 0 84% !important; width: auto !important; max-width: none !important; min-width: 0; scroll-snap-align: center; margin: 0 !important; break-inside: auto; }
.fa .mcar > .flip { flex-basis: 70% !important; }
.fa .mcar-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 6px; }
.fa .mcar-nav[hidden] { display: none !important; }
.fa .mcar-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #ffffff; color: var(--b600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 18px -12px rgba(8, 22, 60, .45); transition: opacity .2s var(--ease); }
.fa .mcar-btn svg { width: 20px; height: 20px; }
.fa .mcar-btn:disabled { opacity: .35; cursor: default; }
.fa .mcar-count { min-width: 48px; text-align: center; font: 700 14px/1 var(--body); color: var(--ink700); font-variant-numeric: tabular-nums; }
:is(.fa .dark, .fa.dark) .mcar-btn { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: #ffffff; box-shadow: none; }
:is(.fa .dark, .fa.dark) .mcar-count { color: #ffffff; }
@media (max-width: 640px) {
  .fa .rail-nav { display: none !important; }
}
@media (max-width: 760px) {
  /* CTA bands on phones: centred, so they read as callouts. */
  .fa .cband-copy { align-items: center !important; text-align: center; }
  .fa .cband-copy .ticks-row { justify-content: center; }
  .fa .cband-copy > div { justify-content: center; }
  .fa .cband-copy .eyebrow { justify-content: center; }
  .fa .emg-grid { text-align: center; justify-items: center; }
  .fa .emg-head { flex-direction: column; text-align: center; }
  .fa .emg-when { justify-content: center; }
  .fa .signs-bar { flex-direction: column; align-items: center !important; text-align: center; }
  .fa .signs-cta { justify-content: center; }
  .fa .fcta { flex-direction: column; text-align: center; }
  .fa .fcta > div { flex-direction: column; justify-content: center; }
}
@media (max-width: 640px) {
  /* Why choose us: the stats card leads; the office photo steps aside on phones. */
  .fa .why-media { padding-bottom: 0 !important; }
  .fa .why-media > img { display: none; }
  .fa .why-media > div { position: static !important; }
  #fa-why > .wrap { gap: 32px !important; }
  /* Contact section: the form comes right after the heading and buttons; the quote and details follow. */
  .fa .cs-grid { display: flex !important; flex-direction: column; gap: 20px !important; }
  .fa .cs-copy { display: contents; }
  .fa .cs-copy > .sec-head { order: 1; }
  .fa .cs-copy > .cs-btns { order: 2; }
  .fa .cs-form { order: 3; }
  .fa .cs-copy > .cs-quote { order: 4; }
  .fa .cs-copy > .cs-points { order: 5; }
  .fa .cs-btns .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 960px) {
  /* Homepage hero: the diagonal photo strip replaces the old rounded phone image. */
  #fa-hero .hero-m { display: none !important; }
  /* FAQs on phones: the topics as a chip row to swipe; one topic shows at a time. */
  .fa .fq-topics { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; margin: 0 -20px; padding: 2px 20px 6px; border: 0; background: none; scrollbar-width: none; }
  .fa .fq-topics::-webkit-scrollbar { display: none; }
  .fa .fq-topic { flex-shrink: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff; font-size: 14px; white-space: nowrap; }
  .fa .fq-topic.is-current { background: var(--b600); border-color: var(--b600); color: #ffffff; }
  .fa .fq-side { gap: 12px; }
  .fa .fq-quick { display: none; }
}
@media (max-width: 960px) {
  /* Cool Club hero on phones: the member card sits centred above the panel. */
  .fa .club-join { margin-top: 104px !important; }
  .fa .club-join .club-card { left: 50% !important; right: auto !important; top: -92px !important; transform: translateX(-50%) rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg) !important; }
  .fa .club-sleeve-title { padding-right: 0 !important; margin-top: 40px; }
}
@media (max-width: 640px) {
  /* Flip tiles on phones: room for the back face's text. */
  .fa .flip, .fa .flip-inner { min-height: 290px; }
  .fa .flip-face { padding: 22px 20px; }
  .fa .flip-back p { font-size: 15px; }
}
@media (max-width: 760px) {
  /* Trust strip on phones: the items line up two by two, left-aligned. */
  .fa .tbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 14px !important; justify-items: start; align-items: center; padding: 18px 0 !important; }
  .fa .tbar-item, .fa .tbar-item--logos, .fa .tbar-item--google { padding: 0 !important; border: 0 !important; justify-content: flex-start !important; width: 100%; }
  .fa .tbar-label > span { white-space: normal; }
}

@media (max-width: 640px) {
  /* Footer on phones: brand centred, a short two-column set of key links (the Services and Service Areas lists step aside; the menu has them), compact contact details, and a centred bottom bar. */
  #fa-footer { padding-top: 44px !important; }
  #fa-footer .wrap { gap: 28px !important; }
  #fa-footer .fgrid { display: flex !important; flex-direction: column; gap: 26px !important; }
  #fa-footer .fgrid > div { flex: none !important; }
  #fa-footer .fgrid > div:first-child { align-items: center; text-align: center; }
  #fa-footer .fgrid > div:first-child > a.plain { align-self: center !important; }
  #fa-footer .fgrid > div:first-child > a.plain img { height: 84px !important; }
  #fa-footer .fgrid > div:first-child > div img { height: 38px !important; width: auto !important; }
  #fa-footer .fgrid > div:first-child p { max-width: 32ch !important; font-size: 14.5px !important; color: rgba(255, 255, 255, .82) !important; }
  #fa-footer .fgrid > div:first-child > div { justify-content: center; }
  #fa-footer .fgrid > div:nth-child(3), #fa-footer .fgrid > div:nth-child(4) { display: none !important; }
  #fa-footer .fgrid > div:nth-child(2), #fa-footer .fgrid > div:nth-child(5) { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); gap: 14px !important; }
  #fa-footer .fhead { padding-top: 0; }
  #fa-footer .fgrid > div:nth-child(2) .flist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  #fa-footer .fgrid > div:nth-child(2) .flist > li:first-child { display: none; }
  #fa-footer .fgrid > div:nth-child(5) ul { gap: 12px !important; font-size: 14.5px !important; }
  #fa-footer .wrap > div:last-child { flex-direction: column; align-items: center !important; text-align: center; gap: 12px !important; font-size: 13px !important; }
  #fa-footer .wrap > div:last-child > span:last-child { justify-content: center; gap: 14px !important; }
}
@media (max-width: 960px) {
  /* Photos on phones keep their natural shape, so nobody's head or a van's wheels get cropped: hero strips follow the photo's own proportions (a portrait photo is left out rather than cut to a banner), with a shallower diagonal. */
  .fa .hero-media { height: auto !important; aspect-ratio: var(--ar, 16 / 9); clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%) !important; }
  .fa .hero-media > img { clip-path: polygon(0 calc(8% + 5px), 100% 5px, 100% 100%, 0 100%) !important; }
  .fa .hero-media:has(> .hscene) { aspect-ratio: auto; height: 210px !important; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%) !important; }
  .fa .hero-media--tall { aspect-ratio: 4 / 3 !important; }
  .fa .hero-media--tall > img { object-position: var(--focus, 50% 55%) !important; }
  .fa .hero-media.hero-media--fit { width: 100% !important; aspect-ratio: var(--fit-ar) !important; }
  /* Logo: bigger in the phone header. */
  .fa .logo img { height: 58px !important; }
  #fa-masthead.is-condensed .logo img { height: 46px !important; }
}
@media (max-width: 760px) {
  /* CTA band and Get Started photos: the whole photo, no crop. */
  .fa .cband-photo { height: auto !important; clip-path: none !important; background: none; }
  .fa .cband-photo img { position: relative !important; inset: auto !important; display: block; width: 100% !important; height: auto !important; object-fit: contain; clip-path: none !important; }
}
@media (max-width: 640px) {
  /* About photo and the Cool Club scene: natural proportions; the member cards step aside. */
  #fa-about img { height: auto !important; }
  .fa .cc-media { min-height: 0 !important; }
  .fa .cc-media > img { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; }
  .fa .cc-media .cc-card { display: none; }
  /* Footer logo a touch bigger on phones. */
  #fa-footer .fgrid > div:first-child > a.plain img { height: 100px !important; }
}
/* Recent Projects: job photos fit their tiles instead of being cropped. */
.job-image-container img { object-fit: contain !important; background: #eef2f6; }
@media (max-width: 960px) { .fa .fq-grid { grid-template-columns: minmax(0, 1fr) !important; } .fa .fq-side, .fa .fq-main { min-width: 0; } }
@media (max-width: 900px) {
  /* Contact section on phones and tablets: visit and hours sit right under the form, stacked as full-width rows; the customer quote follows. */
  .fa .cs-grid { display: flex !important; flex-direction: column; }
  .fa .cs-copy { display: contents; }
  .fa .cs-copy > .sec-head { order: 1; }
  .fa .cs-copy > .cs-btns { order: 2; }
  .fa .cs-form { order: 3; }
  .fa .cs-copy > .cs-points { order: 4; }
  .fa .cs-copy > .cs-quote { order: 5; }
  .fa .cs-copy > .cs-points { display: flex !important; flex-direction: column; gap: 0 !important; padding: 4px 18px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); }
  .fa .cs-points li { border-top: 1px solid var(--line); }
  .fa .cs-points li:first-child { border-top: 0; }
  .fa .cs-points li + li .cpoint, .fa .cs-points .cpoint { padding: 14px 0 !important; border-left: 0 !important; display: flex; align-items: center; gap: 14px; }
  .fa .cs-points .cpoint > span:last-child { display: flex; flex-direction: column; gap: 3px; }
}
@media (max-width: 900px) {
  .fa .cs-points .itile { background: #e8f1fb !important; color: var(--b600) !important; transform: none !important; }
  .fa .cs-points .cpoint strong { color: var(--ink900) !important; }
}
@media (max-width: 640px) {
  /* Reviews page on phones: a compact Google score row, swipeable filter chips, and room for the reviewer under the quote. */
  .fa .rv-top { grid-template-columns: minmax(0, 1fr) !important; }
  .fa .rv-score { display: grid !important; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; align-items: center; justify-items: start; gap: 2px 12px !important; padding: 16px 18px !important; border-radius: 20px !important; text-align: left; }
  .fa .rv-score > img, .fa .rv-score > svg { grid-row: span 2; width: 36px !important; height: 36px !important; }
  .fa .rv-score-num { grid-row: span 2; font-size: 40px !important; }
  .fa .rv-score .stars { grid-column: 3; }
  .fa .rv-score-count { grid-column: 3; font-size: 13px; }
  .fa .rv-score .btn { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 10px; }
  .fa .rv-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .fa .rv-chips::-webkit-scrollbar { display: none; }
  .fa .rv-chip { flex-shrink: 0; }
  .fa .rv-stage { padding-bottom: 92px !important; }
  .fa .rv-stage .rv-dots { bottom: 32px; }
}
@media (max-width: 640px) {
  /* About stats on phones: two by two. */
  .fa .astats-row { grid-template-columns: 1fr 1fr !important; gap: 0 18px; }
  .fa .astats-row li { padding: 16px 0 !important; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .2) !important; }
  .fa .astats-row li:nth-child(-n+2) { border-top: 0 !important; }
  .fa .astats-row strong { font-size: 42px; }
  .fa .astats-row span { font-size: 14px; }
  /* What we stand for: a compact two-by-two of short values. */
  .fa .values-list { grid-template-columns: 1fr 1fr !important; gap: 0 16px; }
  .fa .values-list li, .fa .values-list li:nth-child(2n) { padding: 18px 0 !important; border-left: 0 !important; gap: 8px; }
  .fa .values-list h3 { font-size: 17px; }
  .fa .values-list p { font-size: 14px; }
  .fa .values-icon { width: 40px !important; height: 40px !important; }
}
/* Recent Projects: the feed shows a first batch and fades out above a Show more button. */
.fa .rp-feed.is-collapsed { position: relative; overflow: hidden; }
.fa .rp-feed.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 85%); pointer-events: none; }
.fa .rp-more { display: flex; justify-content: center; margin-top: 18px; }
.fa .rp-more[hidden] { display: none; }
@media (max-width: 640px) {
  /* Checklists on phones (careers, benefits): a tight list in one card instead of a box per line. */
  .fa .checks { gap: 0 !important; grid-template-columns: 1fr !important; border-radius: 16px; background: #ffffff; border: 1px solid var(--line); padding: 4px 16px; }
  .fa .checks li { padding: 12px 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: 15px; }
  .fa .checks li:first-child { border-top: 0 !important; }
  .fa .checks .tk { width: 22px; height: 22px; }
}
@media (max-width: 860px) {
  /* Hero intro on phones and tablets: one column, the statement then the rest. */
  .fa .lede, .fa .lede--one, .fa .lede--flow { display: flex !important; flex-direction: column; gap: 14px !important; grid-template-columns: none !important; }
  .fa .lede > .lede-text { padding: 0 0 0 23px; font-size: 16px; }
  .fa .lede--one .lede-main .lede-proof { padding-left: 0; border-left: 0; }
}

/* Careers hero: the office drawn on the lot, the van pulling in to park out front, then the hiring sign. */
.fa .oscene-office { position: absolute; left: 31%; bottom: 62px; width: 54%; max-width: 470px; height: auto; z-index: 1; }
.fa .oscene-lot { background: #3b434b; }
.fa .oscene-lot::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 26px; background: repeating-linear-gradient(90deg, transparent 0 96px, rgba(255, 255, 255, .75) 96px 100px); }
.fa .oscene .hscene-van { left: 36%; bottom: 10px; z-index: 3; animation: os-park 3.2s cubic-bezier(.2, .75, .25, 1) .2s both; }
.fa .oscene .hscene-van .van .wheel { animation-iteration-count: 6; }
.fa .oscene-sign { right: 3%; bottom: 62px; scale: .82; transform-origin: 100% 100%; animation-delay: 3s; }
@keyframes os-park { 0% { transform: translateX(-560px); } 86% { transform: translateX(6px); } 93% { transform: translateX(-2px) rotate(.6deg); } 100% { transform: none; } }
@media (max-width: 960px) {
  .fa .hero-media .oscene-office { bottom: 44px; left: 24%; width: 58%; }
  .fa .hero-media .oscene-lot::before { height: 18px; background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255, 255, 255, .75) 70px 73px); }
  .fa .hero-media .oscene .hscene-van { left: 30%; bottom: 6px; width: 130px; }
  .fa .hero-media .oscene-sign { right: 2%; bottom: 44px; scale: .55; }
}

/* Credits first: when the trust strip follows the hero straight away, the intro sits under it. */
#fa-inner-hero + #fa-trust-badges { padding-top: clamp(26px, 3.6vw, 40px) !important; }
#fa-trust-badges + .fa.hero-lede--after { padding-top: clamp(28px, 3.6vw, 48px) !important; }

/* Careers: the openings beside a sticky Apply card; each role reads as a title, a summary, three short columns and the Apply button. */
.fa .jobs { display: flex; flex-direction: column; gap: 24px; max-width: 980px; margin: 0 auto; width: 100%; }
.fa .jobs--apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; gap: clamp(24px, 3vw, 40px); max-width: none; }
.fa .jobs-list { display: flex; flex-direction: column; gap: 16px; }
.fa .job { border-color: var(--line); }
.fa .job[open] { border-color: var(--line); box-shadow: 0 30px 60px -40px rgba(8, 22, 60, .35); }
.fa .job summary { flex-wrap: nowrap; padding: 24px 28px; }
.fa .job summary .ibtn { flex: none; }
.fa .job[open] summary .ibtn { background: var(--b600); border-color: var(--b600); }
.fa .job-head { display: flex; flex-direction: column; gap: 10px; }
.fa .job-head .job-title { font: 800 clamp(21px, 2.2vw, 26px)/1.2 var(--display); color: var(--ink900); }
.fa .job-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.fa .chip--blue { background: #e9eff9; border-color: #d5e1f4; color: var(--b600); }
.fa .job-body { padding: 0 28px 28px; gap: 22px; }
.fa .job-summary { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink700); max-width: 68ch; }
.fa .job-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: #f7f9fc; }
.fa .job-col { padding: 18px 20px 20px; }
.fa .job-col + .job-col { border-left: 1px solid var(--line); }
.fa .job-col h3 { margin: 0 0 12px; font: 800 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--b600); }
.fa .job-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fa .job-col li { display: flex; align-items: flex-start; gap: 10px; font: 500 15px/1.45 var(--body); color: var(--ink900); }
.fa .job-col .tk { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--b600); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.fa .job-col .tk svg { width: 12px; height: 12px; }
.fa .job-col--perks .tk { background: var(--f700); }
.fa .job-apply { align-self: flex-start; height: 50px; gap: 8px; }
.fa .job-apply svg { width: 16px; height: 16px; }
.fa .jobs-open { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 16px; border: 1px dashed #c5d3ea; background: #ffffff; font-size: 15.5px; line-height: 1.5; color: var(--ink700); }
.fa .jobs-open strong { color: var(--ink900); }
.fa .jobs-open .itile { flex: none; }
.fa .jobs-form { position: sticky; top: 110px; padding: clamp(22px, 2.4vw, 30px); scroll-margin-top: 120px; }
.fa .jobs-form::before { background: var(--b600); }
.fa .jobs-form-head { margin-bottom: 14px; }
.fa .jobs-form-head h3 { margin: 0 0 6px; font: 800 24px/1.15 var(--display); color: var(--ink900); }
.fa .jobs-form-head p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink700); }
.fa .jobs-form .gform_wrapper .gform_fields { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px !important; }
.fa .jobs-form .gform_wrapper .gfield { grid-column: 1 / -1 !important; }
.fa .jobs-form .gform_wrapper textarea { height: 110px !important; min-height: 0 !important; }
.fa .jobs-form .gform_wrapper .gform_footer { margin-top: 14px !important; padding: 0 !important; }
.fa .jobs-form .gform_wrapper .gform_button { width: 100% !important; }
.fa .jobs-form .gform_required_legend { font-size: 13px; color: var(--ink700); }
.fa .jobs-form.is-picked { box-shadow: 0 0 0 3px rgba(42, 90, 174, .35), 0 40px 70px -46px rgba(20, 32, 25, .45); transition: box-shadow .3s var(--ease); }
@media (max-width: 1020px) {
  .fa .jobs--apply { grid-template-columns: minmax(0, 1fr); }
  .fa .jobs-form { position: relative; top: auto; }
}
@media (max-width: 760px) {
  .fa .job summary { padding: 18px 18px; }
  .fa .job-body { padding: 0 18px 20px; gap: 18px; }
  .fa .job-cols { grid-template-columns: minmax(0, 1fr); }
  .fa .job-col + .job-col { border-left: 0; border-top: 1px solid var(--line); }
  .fa .job-col { padding: 16px 16px 18px; }
  .fa .job-apply { align-self: stretch; justify-content: center; }
  .fa .jobs-open { align-items: flex-start; }
}

/* Benefits band with longer blurbs: the head above, the benefits across the full width. */
.fa .bband-grid--stack { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.6vw, 30px); }
.fa .bband-grid--stack .bband li { padding-top: 4px; padding-bottom: 4px; }
.fa .bband-grid--stack .bband p { max-width: 40ch; }

/* Trust strip on desktop: each credit centred in its own cell, dividers between. */
@media (min-width: 961px) {
  .fa .tbar { justify-content: center; }
  .fa .tbar-item, .fa .tbar-item--logos { flex: 1 1 auto; justify-content: center; padding-left: clamp(12px, 1.6vw, 24px) !important; padding-right: clamp(12px, 1.6vw, 24px) !important; }
}
#fa-trust-badges + .fa.hero-lede--after { padding-top: clamp(18px, 2.4vw, 30px) !important; }

/* Hero intro: when a coloured band follows, it gets the same breathing room below as above (the rating no longer sits on the band's edge); the rating lines up with the statement's text. */
.fa.hero-lede:has(+ .dark, + .on-blue, + .sec--tint, + .sec--sky, + .tm-band, + .explore, + [style*="background"]:not([style*="background: #fff"]):not([style*="background: #ffffff"])) { padding-bottom: clamp(40px, 5vw, 64px) !important; }
.fa .lede-main .lede-proof { margin-left: 24px; }
@media (max-width: 760px) { .fa .lede-main .lede-proof { margin-left: 22px; } }
.fa.sec--tint + #ss-repair-decisions.sec--tint { background: #ffffff !important; }

/* Recent Projects toolbar: service chips with counts and an area picker over the feed; a dozen at a time with a count and Show more. */
.fa .rp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 18px; }
.fa .rp-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fa .rp-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff; color: var(--ink900); font: 700 14px/1 var(--body); cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.fa .rp-chip span { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: #eef4fc; color: var(--b600); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.fa .rp-chip:hover { border-color: var(--b600); }
.fa .rp-chip.is-active { background: var(--b600); border-color: var(--b600); color: #ffffff; }
.fa .rp-chip.is-active span { background: rgba(255, 255, 255, .2); color: #ffffff; }
.fa .rp-city select { height: 40px; min-width: 200px; padding: 0 38px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232a5aae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; -webkit-appearance: none; appearance: none; font: 700 14px/1 var(--body); color: var(--ink900); cursor: pointer; }
.fa .rp-feed .job-card.rp-hide { display: none !important; }
.fa .rp-feed.is-collapsed { max-height: none !important; overflow: visible; }
.fa .rp-feed.is-collapsed::after { display: none; }
.fa .rp-empty { margin: 24px 0; text-align: center; font-size: 15.5px; color: var(--ink700); }
.fa .rp-more { flex-direction: column; align-items: center; gap: 12px; }
.fa .rp-count { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink700); }
.fa .rp-more button[hidden] { display: none; }
@media (max-width: 760px) {
  .fa .rp-tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .fa .rp-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .fa .rp-chips::-webkit-scrollbar { display: none; }
  .fa .rp-city select { width: 100%; }
}

/* Repair or Replace on phones: a Repair | Replace switch shows one panel at a time; buttons wrap and fill the panel. */
.fa .vs-tabs { display: none; }
@media (max-width: 860px) {
  .fa .vs { grid-template-columns: minmax(0, 1fr) !important; }
  .fa .vs-cta { align-self: stretch; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 50px; padding-top: 12px; padding-bottom: 12px; }
  .fa .vs-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #eef2f6; border: 1px solid var(--line); }
  .fa .vs-tab { height: 44px; border: 0; border-radius: 999px; background: transparent; font: 800 15px/1 var(--display); color: var(--ink700); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
  .fa .vs-tab[aria-selected="true"][data-vs="repair"] { background: var(--f700); color: #ffffff; }
  .fa .vs-tab[aria-selected="true"][data-vs="replace"] { background: var(--b600); color: #ffffff; }
  .fa .vs[data-vs-show="repair"] .vs-panel--replace, .fa .vs[data-vs-show="replace"] .vs-panel--repair { display: none; }
  .fa .vs-panel { padding: 22px 20px; }
  .fa .vs-head h3 { font-size: 21px; }
}

/* No sideways wobble on phones from third-party widgets (the chat bubble's frame); clip, unlike hidden, keeps the sticky header working. */
body { overflow-x: clip; }
/* Financing's steps wrap the heading and text in their own column: keep them left-aligned in the phone timeline. */
.fa .steps .step > span h3 { align-self: auto !important; }

/* Blog posts on phones: the contents list opens from the top of the article (the sidebar copy, which falls below the article, steps aside). */
.fa .toc-m { display: none !important; }
@media (max-width: 960px) {
  .fa .toc-m:not([hidden]) { display: block !important; flex: 1 1 100%; margin-bottom: -28px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; }
  .fa .toc-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font: 700 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink700); }
  .fa .toc-m summary::-webkit-details-marker { display: none; }
  .fa .toc-m-ic { width: 26px; height: 26px; border-radius: 50%; background: #eef4fc; position: relative; flex: none; }
  .fa .toc-m-ic::before, .fa .toc-m-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--b600); border-radius: 2px; transition: transform .2s var(--ease); }
  .fa .toc-m-ic::after { transform: rotate(90deg); }
  .fa .toc-m[open] .toc-m-ic::after { transform: rotate(0deg); }
  .fa .toc-m .toc-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 12px; }
  .fa .fa-article-aside .toc { display: none !important; }
}

@media (max-width: 960px) {
  /* Cool Club on phones: the join card in the hero already lists the member benefits, so the repeat section steps aside. */
  body:has(.hero--club) #ss-member-benefits { display: none; }
}
@media (max-width: 640px) {
  /* Forms on phones: address (and other split) fields one per row instead of two cramped halves. */
  .fa .gform_wrapper .ginput_complex > span, .fa .gform_wrapper .ginput_complex > .ginput_left, .fa .gform_wrapper .ginput_complex > .ginput_right { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .fa .gform_wrapper .ginput_complex { row-gap: 10px !important; }
}

/* Recent Projects: every job in one grid (four across, two on phones) under the overall stats, instead of a carousel per neighbourhood. */
.fa .rp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; margin-top: 20px; }
.fa .rp-grid > .job-card-wrapper { width: auto !important; min-width: 0 !important; flex: none !important; margin: 0 !important; }
.fa .rp-grid .job-image-container { min-height: 0 !important; }
.fa .rp-feed .service-area-spacing { margin-bottom: 0 !important; }
@media (max-width: 1100px) { .fa .rp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fa .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* Area pages' "Why Choose Forest Air": the head centred over a row of reason cards, then Book Online and the phone. */
.fa .why-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
.fa .why-cards--2 { --cols: 2; max-width: 900px; margin: 0 auto; }
.fa .why-cards--4 { --cols: 4; }
.fa .why-cards li { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px 28px; border-radius: 20px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 24px 48px -36px rgba(8, 22, 60, .35); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.fa .why-cards li:hover { transform: translateY(-3px); border-color: #c5d3ea; box-shadow: 0 30px 56px -34px rgba(31, 69, 136, .45); }
.fa .why-cards .itile { width: 48px; height: 48px; border-radius: 14px; background: #eef4fc; color: var(--b600); }
.fa .why-cards .itile svg { width: 24px; height: 24px; }
.fa .why-cards p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink700); }
.fa .why-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }
@media (max-width: 1100px) { .fa .why-cards--4 { --cols: 2; } }
@media (max-width: 760px) {
  .fa .why-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 0; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); overflow: hidden; }
  .fa .why-cards li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; border: 0; border-radius: 0; box-shadow: none; }
  .fa .why-cards li + li { border-top: 1px solid var(--line); }
  .fa .why-cards li:hover { transform: none; box-shadow: none; }
  .fa .why-cards .itile { flex: none; width: 40px; height: 40px; border-radius: 12px; }
  .fa .why-cards .itile svg { width: 20px; height: 20px; }
  .fa .why-cards p { font-size: 15px; line-height: 1.6; }
  .fa .why-cta { flex-direction: column; }
}
/* Reason cards in an even grid: two by two for four reasons, three across for three, every card the same size. */
@media (min-width: 761px) {
  .fa .why-cards { grid-auto-rows: 1fr; max-width: 1080px; margin: 0 auto; width: 100%; }
  .fa .why-cards--4 { --cols: 2; }
  .fa .why-cards--3 { max-width: none; }
  .fa .why-cards li { flex-direction: row; align-items: flex-start; gap: 18px; }
  .fa .why-cards .itile { flex: none; }
}
@media (min-width: 761px) and (max-width: 1100px) { .fa .why-cards--3 { --cols: 1; max-width: 760px; } }
/* After How It Works (always tinted) the guide takes the light sky, so it neither stacks on the tint nor on the white FAQs below. */
#ss-how-it-works + #ss-repair-decisions.sec--tint { background: #eef4fc !important; }
#ss-how-it-works + #ss-repair-decisions .vs-panel--replace { background: #ffffff; }
@media (max-width: 640px) {
  .fa .gform_wrapper .ginput_complex.gform-grid-row, .fa .gform_wrapper .ginput_container_address { grid-template-columns: minmax(0, 1fr) !important; }
  .fa .gform_wrapper .ginput_complex > span { grid-column: 1 / -1 !important; }
}

/* Header between tablet and full desktop (961-1199px, e.g. iPad landscape and small laptops): the full menu doesn't fit, so it uses the menu button like phones (keeping Book Online), and the top bar drops the licence number so it stays on one line. */
@media (min-width: 961px) and (max-width: 1199px) {
  #masthead-bar .nav.hide-md, #masthead-bar .tel.hide-md { display: none !important; }
  #masthead-bar .ibtn.show-md { display: inline-flex !important; }
  .fa-topbar .wrap > span.hide-md:last-child { display: none !important; }
}

/* File upload fields (the Careers résumé): sized to their button rather than cropped by the text-field padding, with the button styled to match. */
.fa .form-card .gform_wrapper input[type="file"] { height: auto !important; min-height: 52px; padding: 8px 10px !important; line-height: 1.4 !important; font: 500 15px/1.4 var(--body) !important; color: var(--ink700); background: #ffffff; cursor: pointer; width: 100%; }
.fa .form-card .gform_wrapper input[type="file"]::file-selector-button { margin: 0 12px 0 0; padding: 9px 16px; border: 0; border-radius: 999px; background: #eef4fc; color: var(--b600); font: 700 14px/1.2 var(--body); cursor: pointer; transition: background-color .2s var(--ease); }
.fa .form-card .gform_wrapper input[type="file"]::file-selector-button:hover { background: #dbe7f8; }

/* What's Included with a wide photo: two even halves, the photo filling its half at its own shape. */
.fa .inclb-grid--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fa .inclb-grid--wide .inclb-photo { justify-self: stretch; }
.fa .inclb-grid--wide .inclb-photo img { width: 100%; max-width: none; max-height: none; }
@media (max-width: 900px) { .fa .inclb-grid--wide { grid-template-columns: 1fr; } }

/* Section labels without the small decorative dashes beside them (client request). */
.fa .eyebrow::before, .fa .eyebrow::after, .fa .sec-head--center .eyebrow::after { content: none !important; display: none !important; }
.fa .eyebrow { gap: 0; }

/* Trust strip: Google Guaranteed and A+ BBB Accredited as two lines beside the seal. */
.fa .tbar-item--logos { gap: 12px; }
.fa .tbar-creds { display: flex; flex-direction: column; gap: 4px; font: 800 14.5px/1.2 var(--display); color: var(--ink900); white-space: nowrap; }

/* Inner heroes with a photo: on desktop the hero is tall enough for the photo panel (56% wide) to show the photo whole, up to 640px, with the copy centred beside it. */
@media (min-width: 961px) {
  #fa-inner-hero.hero--photo { display: flex; flex-direction: column; justify-content: center; min-height: min(640px, calc(56vw / (var(--hero-ar)))); }
}

/* Homepage headline: two whole lines sized to the column ("St. Petersburg's Trusted" measures about 11.9em in this font), so no word is left alone on a line. */
.fa .hero-h1-fit { container-type: inline-size; width: 100%; }
.fa .hero-h1 { margin: 0; font-size: clamp(24px, 8.1cqi, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; }
.fa .hero-h1 > span { display: block; white-space: nowrap; }
.fa .hero-h1-accent { color: #7fd3f5; }

/* Homepage About on phones: the 30+ seal is smaller and sits on the photo's lower edge, so the skyline stays in view. */
@media (max-width: 760px) {
  #fa-about .seal { width: 112px !important; height: 112px !important; right: 12px !important; bottom: -4px !important; }
  #fa-about .seal .core span:first-child { font-size: 30px !important; }
  #fa-about .seal .core span + span { font-size: 8px !important; }
  #fa-about .seal svg.ring text { font-size: 10px; }
}

/* Homepage Cool Club panel: the photo is anchored to its right edge, where the AC unit sits, so the whole unit shows at any panel width. */
.fa .cc-media > img { object-position: 100% 60%; }

/* Homepage Cool Club panel: the member card moves off the unit, smaller and up into the sky in the photo's top-left corner (1200px and wider); narrower screens leave it out so the whole unit shows. */
@media (min-width: 1200px) {
  .fa .cc-media .cc-card { top: 22px; bottom: auto; left: 22px; scale: .62; transform-origin: 0 0; }
}
@media (min-width: 961px) and (max-width: 1199px) {
  .fa .cc-media .cc-card { display: none; }
}

@media (max-width: 760px) {
  /* Trust strip on phones: the BBB badge and its two credential lines need a full row, and the Google rating's count may wrap, so nothing is clipped at 375px. */
  .fa .tbar { grid-auto-flow: row dense; }
  .fa .tbar-item--logos { grid-column: 1 / -1; }
  .fa .tbar-item--google, .fa .tbar-item--google * { min-width: 0; }
  .fa .tbar-item--google .rating-badge__count { white-space: normal; }
}

/* About block with long copy (ss_about_teaser.php, over ~160 words): the photo floats at the top left and the copy wraps around it and continues full width underneath. A flex column can't wrap a float, so the copy and prose become plain blocks here. */
#fa-about .about-flow::after { content: ""; display: table; clear: both; }
#fa-about .about-flow .about-media { float: left; position: relative; width: min(46%, 520px); margin: 6px 56px 28px 0; padding-bottom: 40px; }
#fa-about .about-flow .about-copy { display: block; }
#fa-about .about-flow .about-copy > .eyebrow { margin-bottom: 18px; }
#fa-about .about-flow .about-copy > h2 { margin: 0 0 22px; max-width: none !important; }
#fa-about .about-flow .fa-prose { display: block; }
#fa-about .about-flow .fa-prose > * { margin: 0 0 16px; }
#fa-about .about-flow .fa-prose > *:last-child { margin-bottom: 0; }
#fa-about .about-flow .about-copy > div:last-child:not(.fa-prose) { margin-top: 24px !important; }
@media (max-width: 760px) {
  #fa-about .about-flow .about-media { float: none; width: 100%; margin: 0 0 36px; padding-bottom: 32px; }
}

/* Why Choose on wider screens: the reasons read as one panel of rows (as on phones), each row as tall as its own text, so a long reason never leaves the others as half-empty cards. Replaces the even card grid above. */
@media (min-width: 761px) {
  .fa .why-cards, .fa .why-cards--2, .fa .why-cards--3, .fa .why-cards--4 { --cols: 1; grid-auto-rows: auto; max-width: 880px; margin: 0 auto; gap: 0; border-radius: 20px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 24px 48px -36px rgba(8, 22, 60, .35); overflow: hidden; }
  .fa .why-cards li { align-items: flex-start; padding: 24px 32px; gap: 22px; border: 0; border-radius: 0; box-shadow: none; }
  .fa .why-cards li + li { border-top: 1px solid var(--line); }
  .fa .why-cards li:hover { transform: none; box-shadow: none; border-color: var(--line); background: #f8fbff; }
}