.xhac-svc{--purple:#542770;--purple-light:#5E2C7E;--purple-dark:#3A1A4E;--green:#6BB85C;
--green-hover:#8FD481;--green-dark:#4E9B41;--green-tint:#EEF7EC;--promo-green:#3D7A33;
--ink:#0F172A;--body:#475569;--muted:#94A3B8;--rule:#E7E7EA;--soft:#F7F6FA;--tint:#F4F1F8;
--stars:#F6A723;
/* "Montserrat Fallback" is the metric-overridden local face shell.py defines alongside
   the self-hosted woff2. It is what stops the swap from shifting layout — the measured
   CLS on this site is fonts, not images. An unknown family name is skipped by the
   browser, so this is inert until shell.py declares it. */
font-family:"Montserrat","Montserrat Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
color:var(--ink);width:100%;overflow-x:hidden;
/* The embed is a bare <section>. Framer's page supplies the white behind it, but
   standalone — a local preview, or anyone opening the file — whatever is behind
   shows through, and on a dark-mode browser that is black under dark text.
   Own the background so the embed renders correctly anywhere. color-scheme keeps
   form controls light too, or the ZIP input renders dark-on-dark. */
background:#fff;color-scheme:light}
.xhac-svc *{box-sizing:border-box;margin:0}
.xsp-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.xsp-dt{}
.xsp-mb{display:none !important}

/* Where in-page anchor links land. The site header is position:sticky;top:0, so a
   section scrolled flush to the viewport top slides underneath it. scroll-margin-top
   is honoured by scrollIntoView — including across the embed iframe boundary — and
   pushes the landing point down by this much. TUNE THIS ONE VALUE if the header
   height changes: it should be header height + ~20px of breathing room. */
.xhac-svc{--xsp-anchor-offset:112px}
.xhac-svc [id]{scroll-margin-top:var(--xsp-anchor-offset)}

/* buttons */
.xsp-btn-green{display:flex;align-items:center;justify-content:center;background:var(--green);
color:var(--ink);font-weight:800;font-size:15px;padding:14px;border-radius:10px;min-height:44px;
text-decoration:none;cursor:pointer;border:0;font-family:inherit;width:100%;
box-shadow:0 6px 18px rgba(107,184,92,.35);transition:background .15s ease,color .15s ease}
.xsp-btn-green:hover{background:var(--green-dark);color:#fff}
.xsp-btn-purple{display:flex;align-items:center;justify-content:center;background:var(--purple);
color:#fff;font-weight:800;font-size:15px;padding:14px;border-radius:10px;min-height:44px;
text-decoration:none;cursor:pointer;border:0;font-family:inherit;width:100%;margin-top:10px;
transition:background .15s ease}
.xsp-btn-purple:hover{background:#3E1C54}
.xsp-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--green);
color:var(--ink);font-weight:800;font-size:14px;padding:12px 20px;border-radius:10px;min-height:44px;
text-decoration:none;cursor:pointer;border:0;font-family:inherit;white-space:nowrap;
transition:background .15s ease}
.xsp-cta:hover{background:var(--green-hover)}
.xsp-cta-outline{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.45);
color:#fff;font-weight:800;font-size:14px;padding:12px 20px;border-radius:10px;min-height:44px;
text-decoration:none;background:transparent;white-space:nowrap;transition:border-color .15s,color .15s}
.xsp-cta-outline:hover{border-color:var(--green);color:var(--green)}

/* hero */
.xsp-hero{background:linear-gradient(180deg,#5E2C7E 0%,#542770 45%,#3A1A4E 100%);position:relative;color:#fff}
.xsp-hero-mark{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.xsp-hero-mark img{position:absolute;right:-90px;top:-40px;width:620px;opacity:.06;
transform:rotate(-8deg);filter:brightness(0) invert(1)}
.xsp-hero-grid{position:relative;display:grid;grid-template-columns:1fr 360px;gap:48px;
max-width:1280px;margin:0 auto;padding:48px 40px 64px}
.xsp-hero-grid.nocard{grid-template-columns:1fr;padding-bottom:48px}
.xsp-crumbs{font-size:12px;font-weight:700;color:rgba(255,255,255,.7)}
.xsp-crumbs a{color:rgba(255,255,255,.7);text-decoration:none}
.xsp-crumbs a:hover{color:var(--green-hover)}
.xsp-crumbs .cur{color:var(--green)}
.xsp-crumbs .sep{margin:0 7px;opacity:.6}
.xsp-h1{margin-top:14px;font-style:italic;font-weight:900;font-size:46px;line-height:1.08;letter-spacing:-1px;color:#fff}
.xsp-h1 em{font-style:italic;color:var(--green)}
.xsp-hero.sub .xsp-h1{font-size:42px}
.xsp-intro{margin-top:16px;max-width:520px;font-size:15.5px;line-height:1.6;font-weight:500;color:rgba(255,255,255,.82)}
.xsp-chiprow{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.xsp-chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:12px;
padding:10px 14px;font-size:12.5px;font-weight:700;color:#fff}
.xsp-chip .st{color:var(--stars)}
.xsp-hero-ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* booking card (hero overlap)
   align-self:end pins the card to the bottom of the hero grid so the -84px margin
   actually pulls it past the edge and it hangs over the section below. With
   align-self:start the card floated at the top of a taller row and the negative
   margin did nothing — which is why the service pages never overhung. Every page
   that renders a .xsp-bookcol also renders a body section below it, so the
   clearance on .xsp-bodygrid / .xco-body is unconditional. */
.xsp-bookcol{position:relative;margin-bottom:-84px;align-self:end}
.xsp-book{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.25);padding:24px;color:var(--ink)}
.xsp-book.inflow{box-shadow:0 12px 30px rgba(84,39,112,.12);border:1px solid var(--rule)}
.xsp-book .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-dark)}
.xsp-book .t{font-weight:800;font-size:18px;margin-top:8px}
.xsp-book .s{font-size:13px;font-weight:500;color:var(--body);margin-top:6px;line-height:1.5}
.xsp-book .btns{margin-top:16px}
.xsp-book .trust{display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid var(--rule);
margin-top:16px;padding-top:14px;font-size:12px;font-weight:700;color:var(--body)}
.xsp-book .trust .st{color:var(--stars)}
.xsp-book .trust .bar{color:#D8D5DE}

/* pill sub-nav */
.xsp-pillbar{background:#fff;border-bottom:1px solid var(--rule)}
.xsp-pillbar-in{max-width:1280px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.xsp-pill-label{font-size:10.5px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.xsp-pills{display:flex;gap:8px;flex-wrap:wrap}
.xsp-pill{border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;text-decoration:none;
color:var(--purple);background:var(--tint);min-height:32px;display:inline-flex;align-items:center;
transition:background .15s,color .15s}
.xsp-pill:hover{background:#E9E2F1}
.xsp-pill.active{background:var(--purple);color:#fff;font-weight:800}

/* body grid */
.xsp-bodygrid{display:grid;grid-template-columns:1fr 360px;gap:48px;max-width:1280px;margin:0 auto;padding:56px 40px}
/* Only the pages whose hero carries a booking card need clearance for it — the sub
   pages put that card in the rail instead, and padding them too would just open a
   48px hole. Scoped with :has() so no generator has to remember to flag it; a browser
   without :has() falls back to the plain 56px, which is what shipped before. */
.xhac-svc:has(.xsp-bookcol) .xsp-bodygrid{padding-top:104px}
.xsp-main{display:flex;flex-direction:column;gap:48px;min-width:0}
.xsp-rail{padding-top:64px;display:flex;flex-direction:column;gap:16px;align-self:start}
.xsp-rail.flush{padding-top:0}
.xsp-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-dark)}
.xsp-eyebrow.purple{color:var(--purple)}
.xsp-h2{margin-top:10px;font-style:italic;font-weight:900;font-size:33px;letter-spacing:-.5px;color:var(--ink)}

/* checklist */
.xsp-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px}
.xsp-check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--body)}
.xsp-check .c{width:18px;height:18px;flex:none;border-radius:50%;background:var(--green);color:#fff;
font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.xsp-callout{margin-top:20px;background:var(--green-tint);border-radius:12px;padding:14px 18px;
font-size:13px;font-weight:600;color:var(--promo-green);line-height:1.55}
.xsp-callout a{color:var(--promo-green);font-weight:800;text-decoration:none}
.xsp-callout.safety{background:var(--ink);color:rgba(255,255,255,.85)}
.xsp-callout.safety b{color:var(--green-hover)}
.xsp-callout.safety a{color:#fff;font-weight:800}

/* what-we-do cards */
.xsp-cards3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-card{border:1px solid var(--rule);border-radius:16px;padding:20px;background:#fff;display:flex;
flex-direction:column;gap:8px;text-decoration:none;transition:box-shadow .18s,border-color .18s,transform .18s}
.xsp-card:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);border-color:#D8CCE4;transform:translateY(-2px)}
.xsp-card .t{font-weight:800;font-size:16.5px;color:var(--ink)}
.xsp-card .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body)}
.xsp-card .lm{font-weight:800;font-size:13px;color:var(--purple);margin-top:2px}
.xsp-card:hover .lm{color:var(--green-dark)}
.xsp-glyph{position:relative;display:block;width:30px;height:30px;flex:none}
.xsp-glyph i{position:absolute;inset:11px 2px;border-radius:2px;display:block}
.xsp-glyph i:first-child{background:var(--purple);transform:rotate(45deg)}
.xsp-glyph i:last-child{background:var(--green);transform:rotate(-45deg)}

/* process */
.xsp-steps{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.xsp-step{display:flex;gap:0}
.xsp-step .n{flex:0 0 44px;font-style:italic;font-weight:900;font-size:25px;color:var(--purple)}
.xsp-step .t{font-weight:800;font-size:15px}
.xsp-step .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:4px;max-width:560px}

/* decision card */
.xsp-decision{border:1px solid var(--rule);border-radius:16px;padding:20px 22px;background:#fff}
.xsp-decision .t{font-weight:800;font-size:16.5px}
.xsp-decision .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:6px;max-width:620px}
.xsp-decision a{display:inline-flex;align-items:center;margin-top:12px;border:2px solid var(--purple);
color:var(--purple);font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:10px;min-height:40px;
text-decoration:none;transition:background .15s,color .15s}
.xsp-decision a:hover{background:var(--purple);color:#fff}

/* faq */
.xsp-faq{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.xsp-qa{border:1px solid var(--rule);border-radius:14px;background:#fff;overflow:hidden}
.xsp-qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 18px;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;
font-weight:700;font-size:15px;color:var(--ink);min-height:44px}
.xsp-qa .tog{width:26px;height:26px;flex:none;border-radius:50%;background:var(--tint);color:var(--purple);
display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;transition:background .15s,color .15s}
.xsp-qa.open .tog{background:var(--purple);color:#fff}
.xsp-qa .a{display:none;font-size:13.5px;line-height:1.6;font-weight:500;color:var(--body);
padding:0 18px 16px;max-width:620px}
.xsp-qa.open .a{display:block}

/* media block — one photo or one video, full width of the main column */
.xsp-shot{position:relative;margin-top:20px;aspect-ratio:16 / 9;border-radius:14px;overflow:hidden;
background:#0F172A;border:1px solid var(--rule)}
.xsp-shot img,.xsp-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.xsp-shot img{object-fit:cover}
.xsp-mediasub{margin-top:10px;font-size:14px;line-height:1.6;font-weight:500;color:var(--body);max-width:64ch}
.xsp-mediacap{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--muted)}

/* rail photo + promos */
.xsp-photo{height:220px;border-radius:14px;background:#F4F6F8;border:1px solid var(--rule);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);
letter-spacing:1px;overflow:hidden}
.xsp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.xsp-promo{border-radius:14px;padding:18px 20px;display:block;text-decoration:none}
.xsp-promo.lav{background:var(--tint)}
.xsp-promo.mint{background:var(--green-tint)}
.xsp-promo .t{font-weight:800;font-size:15px;color:var(--purple)}
.xsp-promo.mint .t{color:var(--promo-green)}
.xsp-promo .d{font-size:12.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:6px}
.xsp-promo .lm{font-weight:800;font-size:13px;color:var(--purple);margin-top:10px}
.xsp-promo.mint .lm{color:var(--promo-green)}
.xsp-promo:hover .lm{text-decoration:underline}
.xsp-sibs{border:1px solid var(--rule);border-radius:14px;padding:18px 20px;background:#fff}
.xsp-sibs .h{font-size:10.5px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.xsp-sibs a{display:flex;align-items:center;justify-content:space-between;padding:10px 0;
font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid #F1F0F4;min-height:40px}
.xsp-sibs a:last-child{border-bottom:0;padding-bottom:0}
.xsp-sibs a:hover{color:var(--purple)}
.xsp-sibs .ar{color:var(--purple);font-weight:800}

/* emergency band */

/* related strip */
.xsp-rel{background:var(--soft)}
.xsp-rel-in{max-width:1280px;margin:0 auto;padding:44px 40px}
.xsp-rel-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px}
.xsp-rel-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.05);
text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:box-shadow .18s,transform .18s}
.xsp-rel-card:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);transform:translateY(-2px)}
.xsp-rel-card .t{font-weight:800;font-size:15px;color:var(--ink)}
.xsp-rel-card .lm{font-weight:800;font-size:13px;color:var(--purple)}
.xsp-rel-card:hover .lm{color:var(--green-dark)}

/* ---------------------- GEO content model ----------------------
   Four pieces the copy needs and the old template had nowhere to put: the
   answer-first block, real H2/H3 body sections, decision tables, and a visible
   last-updated line. */

/* The answer-first block sits in the hero copy column, directly under the H1.
   It is the page's lead paragraph, not a callout: no box, no border, no tint, no
   rule. Size and weight carry it, and the deck below steps down so the order of
   importance reads correctly. Anything boxed here would look like an aside and get
   read as one. */
.xsp-answer{margin-top:18px;max-width:640px}
.xsp-answer p{font-size:18px;line-height:1.55;font-weight:600;color:#fff;letter-spacing:-.1px}
.xsp-answer p + p{margin-top:10px}
.xsp-answer + .xsp-intro{margin-top:12px;font-size:14.5px;color:rgba(255,255,255,.72)}

/* body sections: an H2 question, its direct answer, optional H3 sub-questions.
   .xsp-main already puts 48px between blocks, so a section owns only its internals. */
.xsp-h3{margin-top:24px;font-weight:800;font-size:18px;line-height:1.35;letter-spacing:-.2px;color:var(--ink)}
.xsp-prose{margin-top:12px;font-size:15px;line-height:1.65;font-weight:500;color:var(--body);max-width:68ch}
/* Contextual links in body copy. These are the site's internal-linking backbone — 139
   of them across the service pages — so they stay inline in the sentence where their
   anchor text means something, rather than becoming buttons. A 1px underline set off
   the baseline reads as a link without the heavy default rule cutting through the
   descenders. */
.xsp-prose a{color:var(--purple);font-weight:700;text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#C9B8D8}
.xsp-prose a:hover{color:var(--green-dark);text-decoration-color:currentColor}
/* A phone number in prose is a fact first and a link second. It keeps tel: so it is
   still tappable, but it is not competing with the contextual links around it — the
   button under the section is the thing meant to be pressed. */
.xsp-prose a[href^="tel:"]{color:var(--ink);text-decoration-color:#D9D4E0}
.xsp-prose a[href^="tel:"]:hover{color:var(--purple)}
/* The action row that closes a section whose answer is "call or book". */
.xsp-inlinecta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* The one-sentence takeaway that has to sit immediately above a table — engines lift
   it when they can't lift the table. Heavier than body copy, lighter than a heading. */
.xsp-takeaway{margin-top:18px;font-size:15.5px;line-height:1.6;font-weight:700;color:var(--ink);max-width:68ch}

/* Decision tables.
   Desktop: a purple header band, a tinted row-header column, hairline rules and a
   soft lift. The caption sits ABOVE the card rather than inside it — inside, it read
   as a stray label floating over the header row.
   Mobile (<=700px): the table becomes stacked cards. A four-column comparison in a
   390px scroller means reading one column at a time and losing the row you were on;
   as cards, each row is a self-contained "Factor: value, value, value" block. The
   markup stays a real <table> — only `display` changes — and table_block() adds the
   ARIA roles back, because display:block strips a table's implicit roles from the
   accessibility tree in Chrome and Firefox. */
.xsp-tablewrap{margin-top:14px;border:1px solid var(--rule);border-radius:14px;background:#fff;
overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;
box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(84,39,112,.18)}
.xsp-tablewrap:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.xsp-table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px;line-height:1.55}
/* The table's title, sitting above the box as a sub-headline. Sentence case at
   reading size — as a tiny uppercase tracked-out label it read as chrome, and long
   ones are a wall of capitals. */
.xsp-tablelabel{margin:20px 0 10px;font-size:16.5px;line-height:1.45;font-weight:800;
color:var(--ink);max-width:68ch}
.xsp-tablelabel + .xsp-tablewrap{margin-top:0}
.xsp-table th,.xsp-table td{padding:13px 16px;text-align:left;vertical-align:top;
border-bottom:1px solid #EFECF3}
.xsp-table thead th{font-weight:800;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
color:#fff;background:var(--purple);border-bottom:0;white-space:nowrap}
.xsp-table thead th:first-child{border-top-left-radius:13px}
.xsp-table thead th:last-child{border-top-right-radius:13px}
.xsp-table tbody th{font-weight:800;color:var(--ink);width:24%;background:#FAF8FC}
.xsp-table tbody td{font-weight:500;color:var(--body)}
.xsp-table tbody tr:last-child th,.xsp-table tbody tr:last-child td{border-bottom:0}
@media (hover:hover){.xsp-table tbody tr:hover td{background:#FBFAFC}}

/* Stacked cards under 700px. 700, not the site's 810 breakpoint: a three-column
   comparison is still readable on a tablet and only breaks down on a phone.
   The wrapper drops its border and shadow so the CARDS carry the styling — a card
   inside a card reads as a mistake. Column headers move into each cell via
   data-label, which table_block() writes. */
/* Two ranges, one treatment. Under 700px the viewport is the constraint. But from 810
   to ~1090 the RAIL is: .xsp-bodygrid is `1fr 360px` with a 48px gap and 40px padding,
   so the main column is viewport-488 — 322px at 810 and 536px at 1024, both under the
   table's 560px minimum. Left alone that band side-scrolls a four-column table inside
   a half-width column, which is worse than a phone. Between 700 and 809 the rail is
   hidden and the column is full width, so the table fits and stays a table. */
@media (max-width:699px), (min-width:810px) and (max-width:1090px){
  .xsp-tablewrap{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  .xsp-table{min-width:0;display:block;font-size:14px}
  .xsp-tablelabel{font-size:15.5px;margin-top:18px}
  .xsp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
  .xsp-table tbody{display:block}
  .xsp-table tbody tr{display:block;background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:4px 0;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .xsp-table tbody tr:last-child{margin-bottom:0}
  /* The row header becomes the card title. */
  .xsp-table tbody th{display:block;width:auto;background:transparent;border-bottom:1px solid #EFECF3;
  font-size:15px;color:var(--ink);padding:12px 16px}
  /* Label above value, not beside it. Side by side looks tidy while column names are
     short ("Single-stage") and falls apart when they are not — "Replacement usually
     makes sense when" wraps to three lines against a one-line value and the pair
     stops reading as a pair. Stacked handles any length. */
  .xsp-table tbody td{display:block;border-bottom:1px solid #F5F3F8;padding:11px 16px 12px}
  .xsp-table tbody tr td:last-child{border-bottom:0}
  .xsp-table tbody td::before{content:attr(data-label);display:block;margin-bottom:3px;
  font-weight:800;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--purple)}
  .xsp-table tbody td>span{display:block}
}

/* Last updated. Quiet, but present — it has to match schema dateModified exactly. */
.xsp-updated{font-size:12.5px;font-weight:700;color:var(--muted)}

/* Click-to-load video facade. The YouTube iframe pulls ~835 KiB before anyone presses
   play; this is the poster, and the player replaces it on click. */
.xsp-shot .xsp-vplay{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;
background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);color:#fff;font-family:inherit;
text-align:center}
.xsp-vplay .pl{width:62px;height:62px;border-radius:50%;background:var(--green);color:var(--ink);
display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:5px;
box-shadow:0 10px 28px rgba(0,0,0,.35);transition:background .15s,transform .15s}
.xsp-vplay:hover .pl{background:var(--green-hover);transform:scale(1.06)}
.xsp-vplay .vt{font-size:14.5px;font-weight:800;max-width:34ch;line-height:1.4}
.xsp-vplay .vh{font-size:11.5px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,.6)}

/* ------------------------- mobile (2b stacking) ------------------------- */
@media (max-width:809px){
.xsp-answer{max-width:none}
.xsp-answer p{font-size:16px;line-height:1.5}
.xsp-answer + .xsp-intro{font-size:13.5px}
.xsp-h3{font-size:16.5px;margin-top:20px}
.xsp-prose{font-size:14.5px}
.xsp-takeaway{font-size:14.5px}
.xsp-vplay .pl{width:52px;height:52px;font-size:19px}
.xsp-vplay .vt{font-size:13.5px}
.xhac-svc{--xsp-anchor-offset:96px}
.xsp-dt{display:none !important}
.xsp-mb{display:revert !important}
.xsp-wrap,.xsp-pillbar-in,.xsp-rel-in{padding-left:20px;padding-right:20px}
.xsp-hero-grid{grid-template-columns:1fr;gap:0;padding:32px 20px 44px}
.xsp-h1{font-size:34px;letter-spacing:-.5px}
.xsp-hero.sub .xsp-h1{font-size:32px}
.xsp-intro{font-size:14px}
.xsp-hero-ctas{flex-direction:column;gap:14px}
.xsp-hero-ctas.xsp-mb{display:flex !important;flex-direction:column;gap:14px}
.xsp-hero-ctas .xsp-cta,.xsp-hero-ctas .xsp-cta-outline{width:100%}
.xsp-chiprow{gap:8px;justify-content:center}
.xsp-chip{padding:7px 10px;font-size:11px;border-radius:10px}
.xsp-bookcol{display:none}
.xsp-bodygrid{grid-template-columns:1fr;gap:40px;padding:40px 20px 48px}
/* the hero card is display:none here, so there is nothing to clear */
.xhac-svc:has(.xsp-bookcol) .xsp-bodygrid{padding-top:40px}
.xsp-rail{display:none}
.xsp-h2{font-size:24px;letter-spacing:-.4px}
.xsp-checks{grid-template-columns:1fr;gap:10px}
.xsp-cards3{grid-template-columns:1fr;gap:0;margin-top:12px}
.xsp-card{flex-direction:row;align-items:center;gap:12px;border:0;border-radius:0;
border-bottom:1px solid #F1F0F4;padding:13px 0;background:transparent}
.xsp-card:hover{box-shadow:none;transform:none}
.xsp-card .xsp-glyph{width:26px;height:26px}
.xsp-card .glyphwrap{flex:none}
.xsp-card .txt{flex:1}
.xsp-card .t{font-size:14.5px}
.xsp-card .d{font-size:11.5px;line-height:1.45}
.xsp-card .lm{display:none}
.xsp-card .mrow{display:block;color:var(--purple);font-weight:800}
.xsp-step .d{font-size:13px}
.xsp-rel-grid{grid-template-columns:1fr;gap:0;margin-top:10px}
.xsp-rel-card{flex-direction:row;align-items:center;justify-content:space-between;border-radius:0;
box-shadow:none;background:transparent;padding:13px 0;border-bottom:1px solid #F1F0F4}
.xsp-rel-card:hover{box-shadow:none;transform:none}
.xsp-mbrail.xsp-mb{display:flex !important;flex-direction:column;gap:14px}
}
@media (min-width:810px){
.xsp-card .mrow{display:none}
}

.xsp-hubhero-grid{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center;
max-width:1280px;margin:0 auto;padding:48px 40px 72px}
.xsp-hub-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);
background:rgba(255,255,255,.1);border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:800;
letter-spacing:2px;color:#fff}
.xsp-hub-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.xsp-hubhero-grid .xsp-h1{font-size:44px}
.xsp-hub-photo{position:relative;min-height:280px}
.xsp-hub-photo .slashw{position:absolute;left:2%;right:-6%;bottom:26px;height:14px;background:#fff;opacity:.25;
transform:rotate(-9deg) skewX(-16deg)}
.xsp-hub-photo .slash{position:absolute;left:-6%;right:-2%;bottom:34px;height:44px;background:var(--green);
transform:rotate(-9deg) skewX(-16deg);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.xsp-hub-photo .ph{position:relative;height:280px;border-radius:20px;overflow:hidden;background:#F4F6F8;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}
.xsp-hub-photo .ph img{width:100%;height:100%;object-fit:cover;display:block}
.xsp-xplan-detail{list-style:none;margin:16px 0 0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:8px 22px}
.xsp-xplan-detail li{display:flex;gap:9px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9)}
.xsp-xplan-detail li .c{width:17px;height:17px;flex:none;border-radius:50%;background:var(--green);
color:var(--ink);font-size:10px;font-weight:800;display:grid;place-items:center}
@media (max-width:809px){.xsp-xplan-detail{grid-template-columns:1fr}}
.xsp-cut{position:relative;height:84px;background:#fff;clip-path:polygon(0 62%,100% 0,100% 100%,0 100%)}
.xsp-promise{background:#fff;padding:6px 0 26px}
.xsp-promise-in{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;
align-items:center;gap:20px;flex-wrap:wrap}
.xsp-promise-label{font-size:12px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.xsp-promise-items{display:flex;gap:26px;flex-wrap:wrap}
.xsp-promise-items span{font-size:12.5px;font-weight:700;color:var(--body)}
.xsp-promise-items .di{color:var(--green)}
.xsp-hubsec{background:#fff;padding:44px 0 56px}
.xsp-hubsec.soft{background:var(--soft)}
.xsp-hubsec-in{max-width:1280px;margin:0 auto;padding:0 40px}
.xsp-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-notsure{background:var(--tint);border:0;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px;
text-decoration:none;transition:box-shadow .18s,transform .18s}
.xsp-notsure:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);transform:translateY(-2px)}
.xsp-notsure .t{font-weight:800;font-size:16.5px;color:var(--purple)}
.xsp-notsure .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body)}
.xsp-notsure .lm{font-weight:800;font-size:13px;color:var(--purple);margin-top:2px}
.xsp-badge{display:inline-block;background:var(--green-tint);color:var(--green-dark);font-weight:800;
font-size:9.5px;letter-spacing:.6px;border-radius:5px;padding:3px 7px;margin-left:8px;vertical-align:middle}
a.xsp-xplan{text-decoration:none;cursor:pointer;transition:box-shadow .18s,transform .18s}
a.xsp-xplan:hover{box-shadow:0 18px 44px rgba(84,39,112,.35);transform:translateY(-2px)}
.xsp-xplan{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:24px;padding:40px 44px;
color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr auto;gap:32px;align-items:center}
.xsp-xplan .mark{position:absolute;right:-40px;bottom:-46px;width:300px;opacity:.06;pointer-events:none;
filter:brightness(0) invert(1)}
.xsp-xplan .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-hover)}
.xsp-xplan h2{margin-top:10px;font-style:italic;font-weight:900;font-size:30px;letter-spacing:-.5px;color:#fff}
.xsp-xplan .chips{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.xsp-xplan .chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:999px;
padding:8px 14px;font-size:12.5px;font-weight:700}
.xsp-xplan .price{position:relative;text-align:right}
.xsp-xplan .amt{font-style:italic;font-weight:900;font-size:34px}
.xsp-xplan .per{font-size:15px;font-weight:700;opacity:.85;font-style:normal}
.xsp-xplan .alt{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);margin-top:4px}
.xsp-xplan .xsp-cta{margin-top:14px}
.xsp-cross{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xsp-cross .xsp-promo .t{font-size:16.5px}
@media (max-width:809px){
.xsp-hubhero-grid{grid-template-columns:1fr;gap:28px;padding:32px 20px 52px}
.xsp-hubhero-grid .xsp-h1{font-size:34px}
.xsp-hub-photo{min-height:0}
.xsp-hub-photo .ph{height:200px}
.xsp-cut{height:44px;clip-path:polygon(0 55%,100% 0,100% 100%,0 100%)}
.xsp-promise-in{padding:0 20px}
.xsp-promise-items{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.xsp-hubsec-in{padding:0 20px}
.xsp-grid3,.xsp-grid4{grid-template-columns:1fr;gap:10px;margin-top:14px}
.xsp-xplan{grid-template-columns:1fr;padding:28px 22px;border-radius:20px}
.xsp-xplan .price{text-align:left}
.xsp-cross{grid-template-columns:1fr}
}

.xsp-bookcol.pricing .price-row{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.xsp-bookcol.pricing .amt{font-style:italic;font-weight:900;font-size:38px;color:var(--ink)}
.xsp-bookcol.pricing .per{font-weight:700;font-size:14px;color:var(--body)}
.xsp-bookcol.pricing .alt{font-size:13px;font-weight:600;color:var(--body);margin-top:4px}
.xsp-benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.xsp-benefit{border:1px solid var(--rule);border-radius:16px;padding:18px;background:#fff;display:flex;gap:12px}
.xsp-benefit .c{width:18px;height:18px;flex:none;border-radius:50%;background:var(--green);color:#fff;
font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.xsp-benefit .t{font-weight:800;font-size:15px;color:var(--ink)}
.xsp-benefit .d{font-size:13px;line-height:1.55;font-weight:500;color:var(--body);margin-top:4px}
.xsp-usecases{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xsp-usecase{border:1px solid var(--rule);border-radius:16px;padding:20px;background:#fff;display:flex;
flex-direction:column;gap:8px}
.xsp-usecase .t{font-weight:800;font-size:16.5px;color:var(--ink)}
.xsp-usecase .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body)}
.xsp-value{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:24px;
padding:36px 40px;color:#fff;margin-top:20px}
.xsp-value .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-hover)}
.xsp-value h3{margin-top:10px;font-style:italic;font-weight:900;font-size:26px;letter-spacing:-.5px;color:#fff}
.xsp-value .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-top:22px}
.xsp-value .n{font-style:italic;font-weight:900;font-size:26px;color:#fff}
.xsp-value .cap{font-size:12.5px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.75);margin-top:6px}
.xsp-joinband{background:var(--ink)}
.xsp-joinband-in{max-width:1280px;margin:0 auto;padding:20px 40px;display:flex;align-items:center;
justify-content:space-between;gap:24px;flex-wrap:wrap}
.xsp-joinband b{font-weight:800;font-size:15px;color:#fff}
.xsp-joinband span{font-size:13px;font-weight:500;color:rgba(255,255,255,.6)}
@media (max-width:809px){
.xsp-bookcol.pricing{display:block !important;margin:28px 0 0}
.xsp-benefits,.xsp-usecases{grid-template-columns:1fr;gap:12px}
.xsp-value{padding:26px 22px;border-radius:20px}
.xsp-value .stats{grid-template-columns:1fr;gap:18px}
.xsp-joinband-in{padding:20px;flex-direction:column;align-items:flex-start;gap:12px}
}

/* ------------------------- company pages (4a-4d) ------------------------- */
.xco-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.xco-bcard{border:1px solid var(--rule);border-radius:16px;padding:20px;background:#fff}
.xco-bcard .t{font-weight:800;font-size:16.5px;margin-top:12px}
.xco-bcard .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:4px}
.xco-bcard .xsp-cta{margin-top:14px;font-size:14px;padding:12px 18px}
.xco-bcard .plink{display:inline-block;font-weight:800;font-size:14px;color:var(--purple);
text-decoration:none;margin-top:16px;min-height:44px;display:inline-flex;align-items:center}
.xco-bcard .plink:hover{color:var(--green-dark)}
.xco-phone{font-style:italic;font-weight:900;font-size:27px;letter-spacing:-.5px;margin-top:8px}
.xco-phone a{color:var(--ink);text-decoration:none}
.xco-loc{border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:#fff}
.xco-loc-img{height:160px;background:#F4F6F8;border-bottom:1px solid var(--rule);display:flex;
align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:1px}
.xco-loc-img img{width:100%;height:100%;object-fit:cover;display:block}
.xco-loc-body{padding:18px}
.xco-loc-body .t{font-weight:800;font-size:16.5px}
.xco-loc-body .meta{font-size:12px;font-weight:700;color:var(--body);margin-top:2px}
.xco-loc-body .addr{font-size:13px;line-height:1.55;font-weight:500;color:var(--body);margin-top:4px}
.xco-loc-body .addr.hrs{font-size:12.5px;margin-top:6px}
.xco-loc-body a{display:inline-block;font-weight:800;font-size:13px;color:var(--purple);
text-decoration:none;margin-top:10px}
/* The local number reads as part of the address block, not as one of the two action
   links under it, so it takes the address colour and sits tight to the hours. It is
   still a tel: link, because on the device most of these are read on that is the
   whole point of printing it. */
.xco-loc-body a.tel{display:block;margin-top:6px;font-size:13.5px;color:var(--ink)}
.xco-loc-body a.tel:hover{color:var(--purple)}
/* The two links stack rather than sit side by side: at 4-up the card is ~300px and a
   "Get directions" / "service area" pair wraps mid-phrase on the narrower ones. */
.xco-loc-body a.alt{display:block;margin-top:6px}
.xco-loc-body a:hover{color:var(--green-dark)}
/* A card with no exterior photograph (Troy, Waynesville) has no image box at all. It
   still has to line up with the two that do, so the body carries the shortfall. */
.xco-loc:not(:has(.xco-loc-img)) .xco-loc-body{padding-top:22px}
.xco-hours{border:1px solid var(--rule);border-radius:16px;margin-top:20px;overflow:hidden}
.xco-hours .row{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;
border-bottom:1px solid var(--rule)}
.xco-hours .row:last-child{border-bottom:0}
.xco-hours .row span:first-child{font-weight:700;font-size:14px}
.xco-hours .row span:last-child{font-weight:600;font-size:14px;color:var(--body);text-align:right}
.xco-hours .row.em{background:var(--green-tint)}
.xco-hours .row.em span{font-weight:800;color:var(--promo-green)}
.xco-body{max-width:1280px;margin:0 auto;padding:56px 40px;display:flex;flex-direction:column;gap:48px}
/* Clearance for the hero booking card, which hangs into this section — only on the
   pages that actually render one (see .xsp-bookcol in template.py). */
.xhac-svc:has(.xsp-bookcol) .xco-body{padding-top:104px}
.xco-split{display:grid;grid-template-columns:1fr 360px;gap:48px}
.xco-heroslot{width:100%;height:250px;border-radius:16px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:1px;overflow:hidden}
.xco-heroslot img{width:100%;height:100%;object-fit:cover;display:block}
.xco-hero-grid-400{grid-template-columns:1fr 400px;align-items:center}
.xco-ccard{border:1px solid var(--rule);border-radius:16px;padding:18px;background:#fff}
.xco-ccard .c{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;
font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.xco-ccard .t{font-weight:800;font-size:15px;margin-top:10px}
.xco-ccard .d{font-size:13px;line-height:1.5;font-weight:500;color:var(--body);margin-top:4px}
.xco-lchips{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.xco-lchips .lab{font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:rgba(255,255,255,.5)}
.xco-lchips .chip{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);
border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;color:#fff}
.xco-fine{font-size:11px;font-weight:600;color:rgba(255,255,255,.45);margin-top:14px}
.xco-coupons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.xco-coupon{border:1.5px dashed #C4B5D4;border-radius:16px;padding:20px;display:flex;flex-direction:column}
.xco-coupon .pill{align-self:flex-start;background:var(--tint);color:var(--purple);font-size:10px;
font-weight:800;letter-spacing:1.5px;border-radius:999px;padding:5px 10px}
.xco-coupon .val{font-style:italic;font-weight:900;font-size:34px;letter-spacing:-1px;margin-top:12px}
.xco-coupon .val .per{font-size:16px;letter-spacing:0}
.xco-coupon .t{font-weight:800;font-size:15.5px;margin-top:2px}
.xco-coupon .d{font-size:13px;line-height:1.5;font-weight:500;color:var(--body);margin-top:4px;flex:1}
.xco-coupon .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:16px;padding-top:14px;border-top:1px solid #EDEAF2}
.xco-coupon .lbl{font-size:11.5px;font-weight:700;color:var(--muted)}
.xco-claim{display:inline-flex;align-items:center;justify-content:center;background:var(--green);
color:var(--ink);font-weight:800;font-size:13px;padding:10px 16px;border-radius:10px;min-height:40px;
text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s ease}
.xco-claim:hover{background:var(--green-hover)}
.xco-finenote{font-size:11.5px;line-height:1.6;font-weight:600;color:var(--muted);margin-top:24px}
.xco-mail{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:16px;
padding:22px;position:relative;overflow:hidden;color:#fff}
.xco-mail .t{font-weight:800;font-size:16px}
.xco-mail .d{font-size:12.5px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.75);margin-top:6px}
.xco-mail form{display:flex;gap:8px;margin-top:14px}
.xco-mail input{flex:1;min-width:0;background:#fff;border:0;border-radius:10px;padding:12px 14px;
font-size:13px;font-weight:600;color:var(--ink);font-family:inherit}
.xco-mail button{background:var(--green);color:var(--ink);font-weight:800;font-size:13px;
padding:12px 16px;border-radius:10px;border:0;cursor:pointer;font-family:inherit}
.xco-story{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.xco-story p{margin-top:16px;font-size:14.5px;line-height:1.65;font-weight:500;color:var(--body)}
.xco-story p + p{margin-top:12px}
.xco-slot{width:100%;border-radius:16px;background:#F4F6F8;border:1px solid var(--rule);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
color:var(--muted);letter-spacing:1px;overflow:hidden}
.xco-slot img{width:100%;height:100%;object-fit:cover;display:block}
.xco-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.xco-vals .xco-ccard .xsp-glyph{width:26px;height:26px}
.xco-vals .xco-ccard .t{margin-top:12px}
.xco-stats{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:24px;
padding:32px 36px;position:relative;overflow:hidden}
.xco-stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.xco-stats .n{font-style:italic;font-weight:900;font-size:30px;color:#fff}
.xco-stats .n .st{color:var(--stars)}
.xco-stats .cap{font-size:12.5px;line-height:1.5;font-weight:600;color:rgba(255,255,255,.75);margin-top:4px}
.xco-team{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.xco-team .slot{height:230px;border-radius:14px}
.xco-team .name{font-weight:800;font-size:14px;margin-top:10px}
.xco-team .role{font-size:12.5px;font-weight:600;color:var(--body)}
@media (max-width:809px){
.xco-2col{grid-template-columns:1fr;gap:12px;margin-top:16px}
.xco-hours .row{padding:13px 16px}
.xco-body{padding:40px 20px 48px;gap:40px}
.xhac-svc:has(.xsp-bookcol) .xco-body{padding-top:40px}
.xco-split{grid-template-columns:1fr;gap:40px}
.xco-hero-grid-400{grid-template-columns:1fr}
.xco-heroslot{height:200px;margin-top:24px}
.xco-coupons{grid-template-columns:1fr;gap:12px}
.xco-story{grid-template-columns:1fr;gap:20px}
.xco-story .xco-slot{height:200px}
.xco-vals{grid-template-columns:1fr;gap:12px}
.xco-stats{padding:26px 22px;border-radius:20px}
.xco-stats .grid{grid-template-columns:1fr 1fr;gap:18px}
.xco-team{grid-template-columns:1fr 1fr;gap:12px}
.xco-team .slot{height:180px}
}

/* --------------------------- location pages (5a-5h) --------------------------- */
.xlc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.xlc-card{position:relative;border:1px solid var(--rule);border-radius:16px;padding:20px;
background:#fff;text-decoration:none;display:block;transition:box-shadow .15s ease,transform .15s ease}
.xlc-card:hover{box-shadow:0 12px 30px rgba(84,39,112,.12);transform:translateY(-2px)}
.xlc-card .t{font-weight:800;font-size:16.5px;color:var(--ink)}
.xlc-card .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:6px}
.xlc-card .lm{display:inline-block;margin-top:14px;font-weight:800;font-size:13.5px;color:var(--purple)}
.xlc-card:hover .lm{color:var(--green-dark)}
.xlc-new{position:absolute;top:14px;right:14px;background:var(--green);color:var(--ink);
font-size:10px;font-weight:800;letter-spacing:1.2px;border-radius:999px;padding:4px 9px}
.xlc-towns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin-top:20px}
.xlc-town{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--body)}
.xlc-town .c{width:18px;height:18px;flex:none;border-radius:50%;background:#3F852B;color:#fff;
font-size:10px;font-weight:800;display:grid;place-items:center}
.xlc-town a{color:var(--body);text-decoration:none}
.xlc-town a:hover{color:var(--purple)}
.xlc-note{font-size:13px;font-weight:600;color:var(--muted);margin-top:16px}
/* Descriptive cross-links out of a city page. Navigation, not a page section, so it
   takes an eyebrow and no H2 — the indexed hubs already run seven of those. */
.xlc-rel{margin-top:8px}
.xlc-rellinks{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px}
.xlc-rellinks a{display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--rule);
border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--body);
text-decoration:none;background:#fff}
.xlc-rellinks a:hover{color:var(--purple);border-color:var(--purple)}
.xlc-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.xlc-rev{border:1px solid var(--rule);border-radius:16px;padding:20px;background:#fff}
.xlc-rev .stars{color:var(--stars);font-size:14px;letter-spacing:2px}
.xlc-rev .q{font-size:14px;line-height:1.6;font-weight:500;color:var(--body);margin-top:10px}
.xlc-rev .who{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:14px}
.xlc-rev .who span{color:var(--muted);font-weight:600}
.xlc-dir{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:20px}
.xlc-dircol .lab{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--purple);
padding-bottom:10px;border-bottom:1px solid var(--rule)}
.xlc-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin-top:14px}
.xlc-links a{font-size:13.5px;font-weight:600;color:var(--body);text-decoration:none}
.xlc-links a:hover{color:var(--purple)}
.xlc-metro{border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:#fff;
margin-top:20px}
/* Atlist embed. It sizes itself internally, so the wrapper owns the height and the
   iframe fills it — the same treatment the previous hub used. */
.xlc-map{width:100%;height:clamp(420px,55vw,640px);overflow:hidden;background:#F4F6F8;
border-bottom:1px solid var(--rule)}
.xlc-map iframe{width:100%!important;height:100%!important;display:block;border:0}
.xlc-metro .body{padding:20px;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:12px 24px}
.xlc-metro .cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
background:var(--green);color:var(--ink);font-weight:800;font-size:14px;padding:12px 20px;
border-radius:10px;text-decoration:none;white-space:nowrap}
.xlc-metro .cta:hover{background:var(--green-hover)}
.xlc-metro .eyebrow{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--purple)}
.xlc-metro .t{font-style:italic;font-weight:900;font-size:22px;letter-spacing:-.4px;
color:var(--ink);margin-top:8px}
.xlc-metro .d{font-size:13.5px;line-height:1.55;font-weight:500;color:var(--body);margin-top:8px}
.xlc-metro .lm{display:inline-block;margin-top:14px;font-weight:800;font-size:13.5px;color:var(--green-dark)}
.xlc-zip{display:flex;gap:8px;margin-top:14px}
.xlc-zip input{flex:1;min-width:0;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;
font-size:16px;font-weight:600;color:var(--ink);font-family:inherit}
.xlc-zip input:focus-visible{outline:3px solid #61BC47;outline-offset:2px}
.xlc-zipmsg{font-size:12.5px;font-weight:600;margin-top:10px;min-height:18px}
.xlc-zipmsg.ok{color:var(--promo-green)} .xlc-zipmsg.no{color:var(--body)}
.xlc-xp{background:linear-gradient(135deg,#5E2C7E,#542770 45%,#3E1C54);border-radius:24px;
padding:32px 36px;color:#fff;margin-top:20px}
.xlc-xp .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--green-hover)}
.xlc-xp h3{margin-top:10px;font-style:italic;font-weight:900;font-size:26px;letter-spacing:-.5px}
.xlc-xp ul{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.xlc-xp li{display:flex;gap:10px;font-size:14px;font-weight:600;color:rgba(255,255,255,.9)}
.xlc-xp li .c{width:18px;height:18px;flex:none;border-radius:50%;background:var(--green);
color:var(--ink);font-size:10px;font-weight:800;display:grid;place-items:center}
.xlc-xp .cta{display:inline-flex;align-items:center;justify-content:center;background:var(--green);
color:var(--ink);font-weight:800;font-size:15px;padding:13px 24px;border-radius:12px;min-height:44px;
text-decoration:none;margin-top:22px}
.xlc-xp .cta:hover{background:var(--green-hover)}
.xlc-xp .fine{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);margin-top:12px}
/* --- page-specific ink CTA band (handoff: ink #0F172A band + 4px green-to-purple
   hairline). These pages emit .xsp-band, which had no styles at all — the markup was
   rendering unformatted. --- */
.xsp-band{background:var(--ink)}
.xsp-band-in{max-width:1280px;margin:0 auto;padding:34px 40px;display:flex;align-items:center;
justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.xsp-band .t{font-style:italic;font-weight:900;font-size:26px;letter-spacing:-.5px;color:#fff}
.xsp-band .d{font-size:14px;line-height:1.6;font-weight:500;color:rgba(255,255,255,.72);
margin-top:8px;max-width:64ch}
.xsp-band .btns{flex:none;display:flex;gap:10px}
.xsp-band .xsp-cta{white-space:nowrap}
.xsp-band::after{content:"";display:block;height:4px;
background:linear-gradient(90deg,var(--green),var(--purple))}

/* The overhanging booking card and the body clearance it needs now live in
   template.py / company_pages.py, so every page type gets the same treatment. */

@media (max-width:809px){
/* The hub's hero card is the town finder, not a booking CTA. .xsp-bookcol is
   display:none on a phone, which left /locations with no search box at all — the
   only input on the page. Show it inline instead, the way /maintenance keeps its
   pricing card, and drop the overhang since nothing is overhanging on mobile. */
.xsp-bookcol.zip{display:block;margin:24px 0 0}
.xsp-band-in{padding:26px 20px;flex-direction:column;align-items:flex-start;gap:16px}
.xsp-band .t{font-size:21px}
.xsp-band .btns{width:100%}
.xsp-band .xsp-cta{width:100%}
}
/* The NEW pill belongs to the headline, not the breadcrumb. Sitting flush under the
   crumbs it read as another nav item; the spacing now groups it with the H1 below. */
.xlc-pill{display:inline-block;background:var(--green);color:var(--ink);font-size:11px;
font-weight:800;letter-spacing:1.4px;border-radius:999px;padding:6px 12px;margin:26px 0 0}
.xlc-pill + .xsp-h1{margin-top:10px}
@media (max-width:809px){
.xlc-grid3,.xlc-revs{grid-template-columns:1fr;gap:12px}
.xlc-map{height:auto}
.xlc-map iframe{height:575px!important}
.xlc-towns,.xlc-dir,.xlc-xp ul{grid-template-columns:1fr;gap:10px}
.xlc-links{grid-template-columns:1fr 1fr}
.xlc-xp{padding:26px 22px;border-radius:20px}
}