*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#0F172A;color-scheme:light;
font-family:"Montserrat","Montserrat Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
overflow-x:hidden}
img{max-width:100%}
main{display:block}
/* "Montserrat Fallback" is named here and in template.py's .xhac-svc stack but is not
declared yet. An undeclared family is skipped by the browser, so this is inert until
the metric-overridden @font-face lands (performance.md 7.2, which measured this
site's CLS as fonts rather than unsized images). Naming it in both stacks now means
that swap is one @font-face block and no stack edits. */
/* The header is sticky, so a hash link would otherwise land its target underneath
it. The embed script measured this at jump time; standalone it is one rule. */
[id]{scroll-margin-top:96px}
:where(a,button,input,summary):focus-visible{outline:3px solid #61BC47;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#5F2980;padding:12px 18px;
font-weight:800;z-index:1000;border-radius:0 0 10px 0}
.skip:focus{left:0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;
animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* ============================== header ============================== */
.xh-hd{position:sticky;top:0;z-index:900;background:#5E2C7E;color:#fff;
font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif}
.xh-hd *{box-sizing:border-box}
.xh-hd a{text-decoration:none}
/* Color inheritance is scoped to the purple bar and the mobile panel. Applying it to
every descendant forced the white dropdown's links to render white-on-lavender. */
.xh-bar a,.xh-panel a,.xh-callbar a{color:inherit}
.xh-bar{max-width:1280px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;
justify-content:space-between;gap:24px}
.xh-logo{display:flex;align-items:center;flex:none}
.xh-logo img{height:44px;width:auto;display:block}
.xh-nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:14px}
.xh-navitem{position:static}
.xh-hd{position:sticky}
.xh-navbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 0;
color:#fff;font:inherit;font-weight:600;cursor:pointer;min-height:44px}
.xh-navbtn .car{font-size:9px;opacity:.6;transition:transform .18s ease}
/* NEW rides above the label, centred on it. The button is 44px tall for the tap
target while the text is ~17px, so the chip sits in space the row already had. */
.xh-navbtn.has-new{position:relative}
.xh-navbtn .xh-new{position:absolute;left:50%;top:2px;transform:translateX(-50%);
background:#6BB85C;color:#0F172A;font-size:8.5px;font-weight:800;letter-spacing:1px;
line-height:1;border-radius:4px;padding:3px 5px;white-space:nowrap}
.xh-navitem[data-open="true"] .xh-navbtn .car{transform:rotate(180deg)}
.xh-nav a.xh-link{display:inline-flex;align-items:center;min-height:44px}
.xh-nav a.xh-link:hover,.xh-navbtn:hover{color:#8FD481}
.xh-nav .is-current{color:#8FD481}
.xh-actions{display:flex;align-items:center;gap:18px;flex:none}
.xh-phone{font-weight:800;font-size:15px;white-space:nowrap}
.xh-phone:hover{color:#8FD481}
.xh-cta{background:#6BB85C;color:#0F172A;font-weight:800;font-size:14px;padding:12px 20px;
border-radius:10px;border:0;cursor:pointer;font-family:inherit;min-height:44px;white-space:nowrap}
.xh-cta:hover{background:#8FD481}
/* ---- mega menu: full-width panel, matching the Framer desktop header ---- */
.xh-navbtn{position:relative}
.xh-navbtn .bar{position:absolute;left:0;right:0;bottom:-14px;height:3px;background:#6BB85C;
transform:scaleX(0);transform-origin:center;transition:transform .15s ease;border-radius:2px}
.xh-navbtn[aria-expanded="true"]{color:#6BB85C;font-weight:800}
.xh-navbtn[aria-expanded="true"] .bar{transform:scaleX(1)}
.xm-scrim{position:fixed;left:0;right:0;bottom:0;background:rgba(15,23,42,.45);z-index:890;display:none}
.xh-hd[data-menu] .xm-scrim{display:block}
.xm-shell{position:absolute;left:0;right:0;top:100%;z-index:900}
.xm-panel{background:#fff;border-top:1px solid #E7E7EA;
box-shadow:0 24px 60px rgba(15,23,42,.22);display:none}
.xh-hd[data-menu="hvac"] .xm-panel[data-menu="hvac"],
.xh-hd[data-menu="plumbing"] .xm-panel[data-menu="plumbing"]{display:block;animation:xmIn .15s ease-out both}
@keyframes xmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.xm-panel{animation:none!important}}
.xm-grid{max-width:1280px;margin:0 auto;padding:30px 40px 34px;
display:grid;grid-template-columns:1.1fr 1fr 340px;gap:40px}
.xm-label{font-weight:800;font-size:10.5px;letter-spacing:1.8px;color:#94A3B8;
padding-bottom:12px;border-bottom:1px solid #E7E7EA;margin-bottom:10px}
.xm-row{display:flex;align-items:flex-start;gap:12px;padding:11px 10px;border-radius:10px;
text-decoration:none;transition:background .13s ease}
.xm-row .txt{flex:1;display:flex;flex-direction:column;gap:2px}
.xm-row .t{font-weight:800;font-size:14px;color:#0F172A;display:flex;align-items:center;gap:8px}
.xm-row .d{font-weight:500;font-size:11.5px;color:#475569}
.xm-row .go{opacity:0;color:#6BB85C;font-weight:800;transition:opacity .13s ease}
.xm-row:hover{background:#F4F1F8}
.xm-row:hover .t{color:#5F2980}
.xm-row:hover .go{opacity:1}
.xm-row:focus-visible{outline:2px solid #5F2980;outline-offset:-2px}
.xm-row.slim{padding:10px}
.xm-glyph{position:relative;display:block;width:26px;height:26px;flex:none}
.xm-glyph i{position:absolute;inset:9.5px 2px;border-radius:2px}
.xm-glyph i:first-child{background:#5F2980;transform:rotate(45deg)}
.xm-glyph i:last-child{background:#6BB85C;transform:rotate(-45deg)}
.xm-badge{background:#EEF7EC;color:#4E9B41;font-weight:800;font-size:9.5px;letter-spacing:.6px;
border-radius:5px;padding:3px 7px}
.xm-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 10px 8px 46px}
.xm-chip{background:#F4F1F8;color:#5F2980;font-weight:700;font-size:10.5px;border-radius:6px;
padding:5px 9px;text-decoration:none;transition:background .13s ease,color .13s ease}
.xm-chip:hover{background:#5F2980;color:#fff}
.xm-divider{height:1px;background:#E7E7EA;margin:12px 0}
.xm-viewall{display:inline-block;font-weight:800;font-size:13px;color:#5F2980;
text-decoration:none;padding:6px 10px}
.xm-viewall:hover{color:#3F852B}
.xm-aside{display:flex;flex-direction:column;gap:14px}
.xm-promo{border-radius:14px;padding:18px 20px}
.xm-promo.lav{background:#F4F1F8}
.xm-promo.mint{background:#EEF7EC}
.xm-promo .h{font-weight:800;font-size:15px;margin-bottom:6px}
.xm-promo.lav .h{color:#5F2980}
.xm-promo.mint .h{color:#3D7A33}
.xm-promo p{font-weight:500;font-size:12.5px;line-height:1.55;color:#475569;margin:0 0 10px}
.xm-promo a,.xm-promo button{font-weight:800;font-size:13px;color:#5F2980;text-decoration:none;
background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.xm-promo.mint a,.xm-promo.mint button{color:#3D7A33}
.xm-promo a:hover,.xm-promo button:hover{text-decoration:underline}
/* ---- mobile: bar trigger + full-screen panel, matching the Framer mobile header ---- */
.xh-burger{display:none;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.4);
border-radius:12px;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.xh-burger span{display:block;width:18px;height:2px;background:#fff;
box-shadow:0 5px 0 #fff,0 -5px 0 #fff}
.xh-burger:active{transform:scale(.96)}
.xh-panel{display:none;position:fixed;inset:0;z-index:950;flex-direction:column;
background:linear-gradient(160deg,#5E2C7E 0%,#542770 45%,#3A1A4E 100%);color:#fff}
.xh-panel[data-open="true"]{display:flex}
.xh-panel-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
border-bottom:1px solid rgba(255,255,255,.12);flex:none}
.xh-panel-bar .xh-logo img{width:min(52vw,200px);height:auto;margin:3px 0 0 -6px}
.xh-close{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.45);border-radius:11px;
background:transparent;color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center}
.xh-close:active{transform:scale(.96)}
.xh-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px 20px 16px}
/* Rows are large italic display type, one per line with a rule beneath. */
.xh-acc>button,.xh-simple a{width:100%;display:flex;align-items:center;
justify-content:space-between;gap:10px;padding:16px 2px;min-height:44px;background:none;
border:0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer;text-align:left;
font-style:italic;font-weight:900;font-size:19px;color:#fff;font-family:inherit;
text-decoration:none}
.xh-acc>button:focus-visible,.xh-simple a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.xh-caret{font-style:normal;font-size:13px;color:rgba(255,255,255,.55)}
.xh-acc[data-open="true"] .xh-caret{color:#6BB85C}
.xh-save{display:inline-block;margin-left:10px;vertical-align:middle;background:#6BB85C;
color:#0F172A;font-style:normal;font-weight:800;font-size:9.5px;letter-spacing:1px;
border-radius:5px;padding:3px 7px}
/* Expanded content sits in an inset card, two columns, green section labels. */
.xh-acc>div{display:none}
.xh-acc[data-open="true"]>div{display:block;margin:12px 0 16px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:16px 16px 14px}
.xh-mini{font-weight:800;font-size:9.5px;letter-spacing:1.6px;color:#8FD481;margin:0 0 8px}
.xh-mini + .xh-grid + .xh-mini{margin-top:14px}
.xh-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin-bottom:12px}
.xh-grid a{display:flex;align-items:center;min-height:40px;padding:4px 2px;
font-weight:600;font-size:13px;color:rgba(255,255,255,.92);text-decoration:none;
border-bottom:0}
.xh-grid a:active{color:#8FD481}
.xh-all{display:inline-block;font-weight:800;font-size:13px;color:#8FD481;
text-decoration:none;padding:6px 2px;min-height:32px}
/* Pinned actions at the foot of the panel. */
.xh-pinned{flex:none;background:rgba(15,23,42,.25);border-top:1px solid rgba(255,255,255,.12);
padding:14px 20px calc(14px + env(safe-area-inset-bottom));display:grid;gap:10px}
.xh-pinned .cta{width:100%;min-height:48px;border:0;border-radius:12px;cursor:pointer;
background:#6BB85C;color:#0F172A;font-weight:800;font-size:15.5px;font-family:inherit}
.xh-pinned .call{width:100%;min-height:48px;display:flex;align-items:center;
justify-content:center;border:1.5px solid rgba(255,255,255,.45);border-radius:12px;
color:#fff;font-weight:800;font-size:15px;text-decoration:none}
.xh-pinned .text{width:100%;min-height:48px;display:flex;align-items:center;
justify-content:center;border:1.5px solid rgba(255,255,255,.45);border-radius:12px;
color:#fff;font-weight:800;font-size:15px;text-decoration:none}
.xh-pinned .trust{display:flex;align-items:center;justify-content:center;gap:8px;
font-weight:700;font-size:12px;color:rgba(255,255,255,.82)}
.xh-pinned .trust .s{color:#F6A723;letter-spacing:1px}
/* --------------------------- chat widget theme ---------------------------
The widget renders in a shadow root, so these are the only styles of ours that
reach it: custom properties pierce the boundary, and every one below is a
documented token with a default, so setting them is configuration rather than
override. We used to append a whole stylesheet into the shadow root instead.
That is gone as of 2026-08-13 — FollowUp Pro shipped the fixes it was patching
around, including the .card p / .fine specificity bug that kept the consent
disclosure from ever rendering as fine print, and the missing safe-area insets.
Do not reintroduce it. If the widget looks wrong, report it upstream; a patch
here is invisible to them and breaks silently when they rename a class. */
extreme-chat{
--exc-purple:#5F2980; --exc-green:#6BB85C; --exc-border:#E7E7EA;
--exc-ink:#0F172A; --exc-slate:#64748B;
--exc-radius-input:12px; --exc-radius-btn:12px; --exc-radius-card:16px;
--exc-weight-heading:900; --exc-weight-btn:800; --exc-size-fine:12.5px}
/* ---------------------------- mobile dock ----------------------------
Three things competed for the bottom of a phone screen and nothing arbitrated:
this bar, the chat launcher, and whichever modal was open. The launcher lives in
the chat widget's shadow root at z-index 2147483000, so it won every fight — it
sat on top of the Schedule button and clipped the label, on top of the mobile
menu's Text Us button, and on top of the booking wizard, where tapping it would
have started a second conversation mid-booking.
The fix is not to shuffle our own furniture around it. The widget marks its button
part="launcher", and in the shadow cascade normal declarations from the outer
document beat the shadow tree's own rules, so we can place and size it from here.
No fork, no vendor change, no JS, and the script's consent wording — which is
quoted verbatim in the A2P registration — is untouched.
So the launcher stops being a thing that lands on the bar and becomes the bar's
third button. If the widget ever drops the part attribute, every rule below stops
matching and it reverts to a free-floating circle: today's behavior, not worse. */
.xh-callbar{position:fixed;z-index:940;display:none;gap:8px;
left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
padding:8px;border-radius:18px;
background:rgba(37,16,50,.86);
-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
border:1px solid rgba(255,255,255,.13);
box-shadow:0 10px 30px rgba(9,4,14,.42),inset 0 1px 0 rgba(255,255,255,.07)}
/* The dock no longer reserves a seat for the launcher. It did while the launcher was
a bare circle we could size to match the buttons; as of the 2026-08-13 widget build
it is a labelled "Text Us" pill of its own width, which does not belong wedged into
a row of our buttons. It floats above the dock instead, via --exc-launcher-bottom,
which is the vendor's supported hook for exactly this. */
/* nowrap is load-bearing, not cosmetic. flex:1 was splitting the bar down the middle,
which on a 320px screen is 139px a side — enough for "Schedule Online" (needs 102)
but not for "Call (844) 584-7399" (needs 154), so the phone number wrapped onto a
second line. The dock keeps the lesson and drops the even split: the number is
content-sized and Schedule takes the slack it was never using.
The budget, measured on the deployed dock rather than estimated. A 360px phone —
a Galaxy S or a 12 mini, the narrowest width that still matters — gives the dock
336px, and the border and padding take 18, leaving 318. The number needs 163 with
its handset glyph and the gap takes 8, so the green pill gets 147 for a label that
needs 122.
Handing the launcher's 54px seat back to the row is what bought that. While the seat
existed the pill had 134px and "Schedule Online" needed 118 of it, a fit so tight it
was a coincidence waiting to break on a font swap, and both the glyph and the word
"Online" had to go. Both come back now. */
.xh-callbar a,.xh-callbar button{display:inline-flex;align-items:center;gap:6px;
justify-content:center;min-height:46px;border-radius:12px;font-weight:800;font-size:15px;
border:0;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.xh-callbar .call{flex:0 0 auto;padding:0 10px;background:rgba(255,255,255,.10);color:#fff;
border:1px solid rgba(255,255,255,.24)}
.xh-callbar .call svg{width:17px;height:17px;flex:none;fill:currentColor;opacity:.92}
.xh-callbar .sched{flex:1 1 auto;min-width:0;padding:0 10px;background:#6BB85C;color:#0F172A;
box-shadow:0 2px 10px rgba(107,184,92,.28)}
/* Set by the header script while the mobile menu is open; the panel has its own
pinned Schedule/Call pair and the bar was landing on top of it. */
.xh-menu-open .xh-callbar{display:none}
@media (max-width:1023px){
.xh-bar{padding:12px 24px;gap:14px}
.xh-nav{gap:16px;font-size:13.5px}
.xh-phone{display:none}
.xm-grid{grid-template-columns:1fr 1fr;gap:28px;padding:24px 24px 28px}
.xm-aside{grid-column:1 / -1;flex-direction:row}
.xm-promo{flex:1}
}
@media (max-width:809px){
.xh-bar{padding:10px 16px}
.xh-nav,.xh-actions{display:none}
.xh-burger{display:flex}
.xh-logo img{height:38px}
.xh-callbar{display:flex}
/* Dock is 62px tall and floats 12px off the bottom; 86 leaves it 12px of daylight
over the last line of the footer. */
body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
/* Lift the chat launcher clear of the dock. The dock's top edge is 76px off the
bottom (12 inset + 64 tall), so 88 leaves a 12px gap, matching the daylight the
dock keeps from the footer.
Both halves of this are load-bearing, and the second is a workaround, not a belt
and braces. --exc-launcher-bottom is the widget's own hook, added 2026-08-13 at
our request, and on a phone it does nothing: they wrote
.launcher { bottom: calc(var(--exc-launcher-bottom,20px) + …) }
.wrap[data-fullscreen] .launcher { bottom: calc(16px + …) }
and the fullscreen rule out-specifies the token on the only layout where the
token matters. Same defect as the .fine one we reported, third time now. So the
token is set for when they fix it, and ::part carries it until they do, because
the outer document wins the shadow cascade on specificity ties and beats it. */
extreme-chat{--exc-launcher-bottom:calc(88px + env(safe-area-inset-bottom));
--exc-launcher-right:12px}
extreme-chat::part(launcher){bottom:calc(88px + env(safe-area-inset-bottom));right:12px}
/* Positioning is a token; "get out of the way right now" is not, so these two stay
on ::part(). A modal owns the screen or it doesn't. Both states are mobile-only,
and on mobile the chat panel is a full-screen sheet — so neither the menu nor the
wizard can be reached while chat is open, and hiding the launcher can never take
away the only control that closes an open panel.
:has() is the live-updating part: the wizard mounts .xw-root when it opens and
unmounts it when it closes. Browsers without :has() keep today's behavior. */
.xh-menu-open extreme-chat::part(launcher){display:none}
html:has(.xw-root) extreme-chat::part(launcher){display:none}
}
/* Narrowest phones still in use (iPhone SE 1st gen, 320px). 290px of usable width, and
the number plus "Schedule Online" needs 258 of it once the glyph comes off. So the
glyph gives way here and the number does not: it is the one thing someone reads when
the heat is out, and it now survives at every width the dock is drawn at. */
@media (max-width:359px){
.xh-callbar{left:8px;right:8px;gap:6px;padding:6px}
.xh-callbar .call svg{display:none}
extreme-chat{--exc-launcher-right:8px}
extreme-chat::part(launcher){right:8px}
}
@media (prefers-reduced-motion:reduce){.xh-hd *{transition:none!important}}
/* ============================== footer ============================== */
.xf{position:relative;background:#3A1A4E;color:#fff;overflow:hidden;
font-family:"Montserrat",ui-sans-serif,system-ui,sans-serif}
.xf *{box-sizing:border-box}
.xf a{color:inherit;text-decoration:none}
.xf-accent{height:4px;background:linear-gradient(90deg,#6BB85C,#5F2980)}
.xf-mark{position:absolute;right:-60px;top:20px;width:340px;opacity:.05;
transform:rotate(-8deg);filter:brightness(0) invert(1);pointer-events:none}
.xf-wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 40px}
.xf-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:40px 0 34px;border-bottom:1px solid rgba(255,255,255,.14)}
.xf-cta h2{margin:0;font-style:italic;font-weight:900;font-size:26px;letter-spacing:-.5px}
.xf-cta p{margin:8px 0 0;font-size:14px;font-weight:500;color:rgba(255,255,255,.72)}
.xf-cta-btns{display:flex;gap:10px;flex:none}
.xf-btn-green,.xf-btn-outline{display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:12px 22px;border-radius:12px;font-weight:800;font-size:14.5px;
border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.xf-btn-green{background:#6BB85C;color:#0F172A}
.xf-btn-green:hover{background:#8FD481}
.xf-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.xf-btn-outline:hover{border-color:#6BB85C;color:#8FD481}
.xf-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:32px;padding:34px 0 30px}
/* The tight file, not logo-white.png: that one is 55% transparent padding, so a
76px box only ever drew a 34px logo. Same box, nearly twice the mark. */
.xf-logo{height:64px;width:auto;display:block}
.xf-blurb{margin:14px 0 0;font-size:13px;line-height:1.6;font-weight:500;color:rgba(255,255,255,.72)}
.xf-247{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;font-weight:700}
.xf-247 .dot{width:8px;height:8px;border-radius:50%;background:#6BB85C}
.xf-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.xf-social a{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72);min-height:32px;
display:inline-flex;align-items:center}
.xf-social a:hover{color:#8FD481}
.xf-h{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:#8FD481;margin-bottom:12px}
.xf-col a{display:block;padding:6px 0;font-size:13.5px;font-weight:600;
color:rgba(255,255,255,.78);min-height:32px}
.xf-col a:hover{color:#fff}
.xf-phone{font-weight:800!important;font-size:16px!important;color:#fff!important}
/* The sitewide NAP. `address` because that is what it is; font-style reset because
the element italicises by default and the rest of the column does not. */
.xf-nap{font-style:normal;font-size:13.5px;font-weight:600;line-height:1.6;
color:rgba(255,255,255,.78);margin:0 0 8px}
.xf-nap b{display:block;color:#fff;font-weight:800;margin-bottom:2px}
.xf-meta{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:8px;line-height:1.6}
.xf-areas{padding:22px 0;border-top:1px solid rgba(255,255,255,.12);
font-size:12px;line-height:1.7;color:rgba(255,255,255,.55);display:grid;gap:8px}
.xf-areas b{color:rgba(255,255,255,.8);font-weight:800;letter-spacing:.4px;margin-right:6px}
.xf-areas a{color:rgba(255,255,255,.62);text-decoration:none}
.xf-areas a:hover{color:#8FD481;text-decoration:underline}
/* The office row is the one line in this band that points at premises rather than at
service areas, so it reads a step brighter than the towns beneath it. */
.xf-offices a{color:rgba(255,255,255,.85);font-weight:700}
.xf-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:18px 0 30px;border-top:1px solid rgba(255,255,255,.12);
font-size:12px;color:rgba(255,255,255,.55)}
.xf-bottom .links{display:flex;gap:18px}
.xf-bottom a{min-height:32px;display:inline-flex;align-items:center}
.xf-bottom a:hover{color:#8FD481}
@media (max-width:1023px){
.xf-wrap{padding:0 24px}
.xf-grid{grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.xf-logo{height:56px}
.xf-mark{width:240px}
}
@media (max-width:809px){
.xf-wrap{padding:0 20px}
.xf-cta{flex-direction:column;align-items:stretch;text-align:left;padding:32px 0 28px}
.xf-cta h2{font-size:21px}
.xf-cta-btns{flex-direction:column}
.xf-btn-green,.xf-btn-outline{width:100%;min-height:48px}
.xf-grid{grid-template-columns:1fr 1fr;gap:24px 20px;padding:30px 0 26px}
.xf-logo{height:50px}
.xf-brand{grid-column:1 / -1}
.xf-bottom{flex-direction:column;align-items:flex-start;gap:10px}
.xf-mark{width:150px;top:12px;right:-24px}
}
@media (max-width:479px){ .xf-grid{grid-template-columns:1fr} }