:root{
  --bg:#f7f7f4;
  --surface:#fff;
  --text:#202320;
  --muted:#727872;
  --line:#dfe3df;
  --green:rgb(31,215,155);
  --green-dark:#0f4d39;
  --pink:#f2b6ca;
  --soft:rgba(31,215,155,.09);
  /* The primary button. Matches the body charcoal so the one primary action on
     the page carries full weight. */
  --ink:#202320;
  --ink-hover:#000;
  /* The closing phrase of a tagline heading. Meets 3:1 on the page background,
     which is the AA floor for text this size. */
  --title-soft:#868c85;
  --radius:16px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.shell{max-width:var(--max);margin:0 auto;padding:0 28px}

header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,247,244,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(223,227,223,.9);
}
.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:600;
  font-size:24px;
}
.leaf{
  width:18px;height:26px;border-radius:80% 0 80% 0;
  background:var(--green);transform:rotate(-20deg);display:inline-block;
}
.navlinks{display:flex;gap:28px;font-size:13px;color:#4b5049}
.header-actions{display:flex;align-items:center;gap:10px}
.phone-link{
  font-size:13px;font-weight:600;padding:10px 12px;border-radius:999px;
  transition:.2s ease;
}
.phone-link:hover{background:rgba(31,215,155,.08);color:var(--green-dark)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 18px;
  font-weight:600;
  transition:.22s ease;
  background:#fff;
  color:var(--text);
}
.cta:hover{
  border-color:var(--green);
  background:rgba(31,215,155,.08);
  transform:translateY(-1px);
}
.primary-cta{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.primary-cta:hover{
  background:var(--green);
  color:#10251d;
  border-color:var(--green);
  box-shadow:0 10px 24px rgba(31,215,155,.18);
}

.hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  /* Anchored to the top, not centred. The quote card grows as details and
     follow-up questions appear, and a centred row would slide the headline
     down the page every time the customer typed. */
  align-items:start;
  padding:90px 0 72px;
  overflow:hidden;
}
#ambient-canvas{
  position:absolute;inset:-30px;z-index:0;pointer-events:none;opacity:.95;
}
.hero > *:not(#ambient-canvas){position:relative;z-index:2}
.eyebrow{
  font-family:Consolas,"Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  color:var(--green-dark);
  margin-bottom:18px;
}
h1,h2,h3{font-family:"IBM Plex Sans Condensed",sans-serif;margin-top:0}
h1{
  font-size:clamp(54px,6vw,84px);
  line-height:.93;
  letter-spacing:-.035em;
  margin-bottom:26px;
  font-weight:500;
}
.lede{
  max-width:610px;
  font-size:19px;
  line-height:1.55;
  color:#50564e;
  margin-bottom:28px;
}
.hero-note{margin-top:15px;color:var(--muted);font-size:13px}

.quote-card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px;
  backdrop-filter:blur(8px);
  transition:.25s ease;
}
.quote-card:hover{
  border-color:rgba(31,215,155,.38);
  box-shadow:0 18px 44px rgba(20,24,20,.06);
}
.quote-kicker{
  font-family:Consolas,"Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  color:var(--green-dark);
  margin-bottom:8px;
}
.quote-card h3{font-size:30px;margin-bottom:8px}
.quote-card p{color:var(--muted);font-size:14px;margin-bottom:18px}

textarea,input,select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:13px 14px;
  color:var(--text);
  outline:none;
  transition:.18s ease;
}
textarea{min-height:120px;resize:vertical}
textarea:focus,input:focus,select:focus{
  border-color:rgba(31,215,155,.85);
  box-shadow:0 0 0 3px rgba(31,215,155,.09);
}

.section-label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin:12px 0 8px;
}
/* Room for two rows of chips, so the first details landing does not jolt. */
.chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;min-height:58px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:999px;
  background:rgba(31,215,155,.10);
  border:1px solid rgba(31,215,155,.22);
  color:#174b3a;font-size:12px;font-weight:500;
}
.chip::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--green);
}
.empty{font-size:12px;color:#9a9e98}

/* A value Claude concluded rather than read. Dashed, so the customer can tell
   at a glance which details are theirs and which are ours to be corrected. */
.chip.is-inferred{
  background:transparent;
  border-style:dashed;
  border-color:rgba(31,215,155,.45);
  color:#3d6355;
  cursor:help;
}
.chip.is-inferred::before{background:transparent;border:1px solid var(--green)}

.label-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:12px 0 8px;
}
.label-row .section-label{margin:0}
.reading-status{
  font-family:Consolas,"Courier New",monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:0;transition:opacity .2s ease;
}
.reading-status.visible{opacity:1}
.reading-status.is-reading{color:var(--green-dark)}
.reading-status.is-reading::after{
  content:"";display:inline-block;width:4px;height:4px;margin-left:5px;
  border-radius:50%;background:var(--green);
  animation:pulse 1s ease-in-out infinite;vertical-align:middle;
}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.chips.is-reading{opacity:.55;transition:opacity .2s ease}

.readback{
  display:none;
  margin-top:14px;padding:12px 14px;
  background:var(--soft);
  border:1px solid rgba(31,215,155,.22);
  border-radius:12px;
  font-size:13px;line-height:1.5;color:#1d4a3b;
}
.readback.visible{display:block}
.readback span{
  display:block;font-family:Consolas,"Courier New",monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-dark);opacity:.7;margin-bottom:5px;
}
.readback strong{font-weight:500}

/* The closing phrase of the tagline, one step back from the charcoal so the
   headline lands softly rather than shouting the whole sentence. */
.title-soft{color:var(--title-soft)}

/* Everything the classifier can add or remove sits inside .quote-dynamic. Giving
   the region a floor means the ordinary case fills space that already exists, so
   the card stops growing under the cursor while someone is typing. */
.quote-dynamic{min-height:150px}

.followups{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:grid;gap:8px;
}

/* One row per question, label left and control right. A stacked card was ~90px;
   this is ~44px, which is what makes two questions affordable. */
.followup{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;
  background:#fbfbf9;border:1px solid var(--line);border-radius:10px;
  padding:7px 8px 7px 12px;
  transition:background .18s ease,border-color .18s ease;
}
.followup label{margin:0;flex:1;font-size:12.5px;font-weight:500;line-height:1.3}
/* Fixed width, not content width. Auto sizing made every row's control a
   different size, so nothing lined up down the right edge. */
.followup select,.followup input{
  flex:0 0 150px;width:150px;max-width:150px;
  padding:6px 10px;border-radius:8px;
  /* The control inherited the body's 16px while the label beside it is 12.5px,
     so the two halves of one row were visibly different sizes. A touch larger
     than the label, so the answer still reads as the value. */
  font-size:13px;
}

/* Answered rows are tinted, never collapsed. Collapsing would resize the card at
   the moment of answering, which is the behaviour this layout exists to prevent. */
.followup.is-answered{
  background:rgba(31,215,155,.05);
  border-color:rgba(31,215,155,.30);
}
.followup.is-answered label{color:var(--muted)}

.contact-block{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.contact-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.contact-option{
  border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:11px 8px;font-size:13px;transition:.18s ease;
}
.contact-option:hover{border-color:rgba(31,215,155,.55)}
.contact-option.active{
  background:rgba(31,215,155,.10);
  border-color:var(--green);
  color:var(--green-dark);
}

.contact-fields{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:600;color:var(--muted)}
.mode-field[hidden]{display:none!important}

.quote-submit{
  width:100%;
  margin-top:16px;
  background:var(--ink);color:#fff;border-color:var(--ink);
  transition:.22s ease;
}
.quote-submit.is-started{
  background:rgba(31,215,155,.20);
  color:#124835;
  border-color:rgba(31,215,155,.45);
}
.quote-submit.is-progress{
  background:rgba(31,215,155,.55);
  color:#0d392b;
  border-color:rgba(31,215,155,.75);
}
.quote-submit.is-ready{
  background:var(--green);
  color:#10251d;
  border-color:var(--green);
  box-shadow:0 10px 24px rgba(31,215,155,.18);
}

/* Hover states, one per progress state.

   The generic .cta:hover washes the background to a near-transparent green.
   That is right for an outline button, but this one carries its own background
   that changes as the form fills, and the wash was overriding it while leaving
   the white text in place. The result was white text on a pale green ground on
   every hover. Each state now darkens rather than washes out. */
.quote-submit:hover{
  background:var(--ink-hover);
  border-color:var(--ink-hover);
  color:#fff;
}
.quote-submit.is-started:hover{
  background:rgba(31,215,155,.30);
  border-color:rgba(31,215,155,.60);
  color:#124835;
}
.quote-submit.is-progress:hover{
  background:rgba(31,215,155,.68);
  border-color:var(--green);
  color:#0d392b;
}
.quote-submit.is-ready:hover{
  background:#19c690;
  border-color:#19c690;
  color:#10251d;
}
/* Only appears after a failed submit, so the customer is told what is missing
   instead of watching the button shake. */
.form-error{
  display:none;margin-top:10px;font-size:12.5px;line-height:1.45;color:#8a4b3c;
}
.form-error.visible{display:block}

.confirmation{
  display:none;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.confirmation.visible{display:block}
.confirmation strong{display:block;font-size:15px;margin-bottom:3px}
.confirmation span{font-size:12px;color:var(--muted)}

.trust{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust-item{padding:26px 0}
.trust-item + .trust-item{border-left:1px solid var(--line);padding-left:26px}
.trust strong{display:block;font-size:15px;margin-bottom:4px}
.trust span{font-size:13px;color:var(--muted)}

section{padding:86px 0}
.section-title{
  font-size:48px;line-height:.98;letter-spacing:-.025em;
  max-width:650px;margin-bottom:18px;
}
.section-copy{color:var(--muted);max-width:640px;font-size:17px}

.owner-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.owner-photo{
  aspect-ratio:1/1;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.08)),
    url("https://media.licdn.com/dms/image/v2/C5103AQFfwseJvi3B3A/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1550251142928?e=1790812800&v=beta&t=yWK6xUcpqqVMCn0R2dBXJ0DRFQlhevu_E_Q2n9TtIHA")
    center/cover;
}
.signature{font-size:13px;color:var(--muted);margin-top:22px}

.difference-grid,.services,.reviews{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  margin-top:34px;
}
.difference-item,.service,.review{
  padding:28px 26px 10px 0;
}
.difference-item + .difference-item,
.service + .service,
.review + .review{
  border-left:1px solid var(--line);
  padding-left:26px;
}
.difference-item h3,.service h3{font-size:24px;margin-bottom:10px}
.difference-item p,.service p,.review p{font-size:14px;color:var(--muted);line-height:1.6}
.review strong{display:block;margin-top:16px;font-size:13px}

.final-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-top:1px solid var(--line);
  padding:70px 0;
  display:flex;justify-content:space-between;align-items:center;gap:26px;
}
/* Bubbles behind the closing call to action, same field as the hero. Never
   catches a click, so the CTA underneath stays reachable. */
.ambient-field{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.final-cta > *:not(.ambient-field){position:relative;z-index:2}
.final-cta h2{font-size:44px;line-height:1;letter-spacing:-.025em;margin-bottom:8px}
.final-cta p{color:var(--muted);margin:0}

footer{
  border-top:1px solid var(--line);
  padding:28px 0 40px;
  color:var(--muted);
  font-size:13px;
}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.mobile-action-bar{display:none}


.quote-card{
  position:relative;
  /* Transform is animated on its own curve so the lift feels like the card
     responding, not the generic .25s used for colour changes. */
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease,
             border-color .25s ease;
  will-change:transform;
}

.quote-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  border:1px solid transparent;
  pointer-events:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
  opacity:0;
}

/* Hovering or focusing any "Request a quote" button: the whole card lifts and
   picks up a green ring, so the button visibly points at its destination. */
.quote-card.quote-highlight{
  transform:translateY(-3px);
  border-color:rgba(31,215,155,.35);
  box-shadow:0 18px 44px rgba(20,24,20,.07);
}

.quote-card.quote-highlight::before{
  border-color:rgba(31,215,155,.9);
  box-shadow:0 0 0 4px rgba(31,215,155,.10);
  opacity:1;
}

/* On click: the card answers with one short rise and settle while the ring
   flashes. Translate only, never scale, so the text inside never blurs. */
.quote-card.quote-pulse{
  animation:quoteCardRise .8s cubic-bezier(.2,.7,.3,1);
}

.quote-card.quote-pulse::before{
  animation:quotePulse .9s ease-out;
}

@keyframes quoteCardRise{
  0%{transform:translateY(0)}
  28%{transform:translateY(-7px)}
  62%{transform:translateY(-1px)}
  100%{transform:translateY(0)}
}

@keyframes quotePulse{
  0%{
    border-color:rgba(31,215,155,0);
    box-shadow:0 0 0 0 rgba(31,215,155,0);
    opacity:0;
  }
  30%{
    border-color:rgba(31,215,155,1);
    box-shadow:0 0 0 7px rgba(31,215,155,.14);
    opacity:1;
  }
  100%{
    border-color:rgba(31,215,155,.30);
    box-shadow:0 0 0 14px rgba(31,215,155,0);
    opacity:.5;
  }
}

/* The lift and the flash are decoration. Anyone who has asked for less motion
   still gets the hairline, which is the part that carries the meaning. */
@media (prefers-reduced-motion: reduce){
  .quote-card{transition:border-color .25s ease}
  .quote-card.quote-highlight{transform:none;box-shadow:none}
  .quote-card.quote-pulse{animation:none}
  .quote-card.quote-pulse::before{animation:none;opacity:1;border-color:rgba(31,215,155,.9)}
}

@media(max-width:900px){
  .navlinks{display:none}
  .hero,.owner-grid{grid-template-columns:1fr}
  .hero{padding-top:54px}
  .trust,.difference-grid,.services,.reviews{grid-template-columns:1fr}
  .trust-item + .trust-item,
  .difference-item + .difference-item,
  .service + .service,
  .review + .review{
    border-left:none;border-top:1px solid var(--line);padding-left:0;
  }
}

@media(max-width:640px){
  body{padding-bottom:74px}
  .shell{padding:0 18px}
  .nav{min-height:66px}
  .brand{font-size:21px}
  .header-actions .phone-link{display:none}
  h1{font-size:48px}
  .lede{font-size:17px}
  .contact-options,.contact-fields{grid-template-columns:1fr}
  .quote-dynamic{min-height:120px}
  /* Side by side gets cramped below this width. A breakpoint difference, not
     movement during use, so it does not reintroduce the resizing problem. */
  .followup{flex-direction:column;align-items:stretch;gap:7px;padding:10px 12px}
  /* Back to 16px: anything smaller makes iOS Safari zoom on focus, and the
     specific rule above would otherwise win inside this breakpoint. */
  .followup select,.followup input{max-width:none;width:100%;font-size:16px}
  textarea,input,select{font-size:16px}
  .section-title{font-size:38px}
  .final-cta{flex-direction:column;align-items:flex-start}
  .final-cta h2{font-size:38px}
  .mobile-action-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(247,247,244,.96);
    border-top:1px solid var(--line);
    backdrop-filter:blur(14px);
  }
  .mobile-action-bar a{
    min-height:46px;display:flex;align-items:center;justify-content:center;
    border-radius:12px;font-size:14px;font-weight:600;
  }
  .mobile-call{background:#fff;border:1px solid var(--line)}
  .mobile-quote{background:var(--ink);color:#fff;border:1px solid var(--ink)}
}

/* ------------------------------------------------------------------
   Interior pages (service, location, guide)
   Same tokens and restraint as the homepage: light rules, no cards,
   no shadows. An interior page should read as the same publication.
   ------------------------------------------------------------------ */

.page-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
  padding:64px 0 56px;
}
.page-hero h1{font-size:clamp(40px,4.4vw,60px);margin-bottom:20px}
.page-hero .lede{margin-bottom:24px}

.breadcrumbs{
  font-family:Consolas,"Courier New",monospace;
  font-size:11px;letter-spacing:.08em;color:var(--muted);
  padding-top:24px;
}
.breadcrumbs a:hover{color:var(--green-dark)}
.breadcrumbs span{margin:0 7px;opacity:.5}

.prose{max-width:680px}
.prose p{font-size:17px;line-height:1.65;color:#50564e;margin:0 0 18px}
.prose h2{font-size:32px;letter-spacing:-.02em;margin:44px 0 14px}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose ul{margin:0 0 18px;padding-left:20px;color:#50564e;font-size:16px;line-height:1.7}
.prose li{margin-bottom:6px}
.prose > *:first-child{margin-top:0}

.detail-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);margin-top:34px;
}
.detail-list > div{padding:26px 26px 22px 0}
.detail-list > div:nth-child(odd){border-right:1px solid var(--line)}
.detail-list > div:nth-child(n+3){border-top:1px solid var(--line);padding-left:0}
.detail-list > div:nth-child(even){padding-left:26px}
.detail-list h3{font-size:20px;margin-bottom:8px}
.detail-list p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}

.faq{border-top:1px solid var(--line);margin-top:34px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:20px 0;font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:19px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-dark)}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq details p{
  font-size:15px;color:var(--muted);line-height:1.65;
  margin:0;padding:0 0 22px;max-width:660px;
}

.related{border-top:1px solid var(--line);padding:44px 0 0;margin-top:64px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.related-card{
  border:1px solid var(--line);border-radius:14px;padding:18px;
  transition:.2s ease;background:#fff;
}
.related-card:hover{border-color:rgba(31,215,155,.45);transform:translateY(-1px)}
.related-card strong{display:block;font-family:"IBM Plex Sans Condensed",sans-serif;font-size:18px;margin-bottom:5px}
.related-card span{font-size:13px;color:var(--muted);line-height:1.5}

.footer-nav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding:36px 0 30px;border-bottom:1px solid var(--line);
}
.footer-nav .footer-heading{
  font-family:Consolas,"Courier New",monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:400;
}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.footer-nav a{font-size:13px;color:#4b5049}
.footer-nav a:hover{color:var(--green-dark)}

/* A page still missing its verified content. Visible in local preview only;
   these pages are never linked, sitemapped, or indexed. */
.draft-banner{
  background:#fff6e5;border:1px solid #f0dcb4;border-radius:12px;
  padding:12px 14px;margin:18px 0 0;font-size:13px;color:#6b5626;
}
.draft-banner strong{display:block;margin-bottom:2px}

@media(max-width:900px){
  .page-hero{grid-template-columns:1fr;gap:36px;padding-top:40px}
  .related-grid{grid-template-columns:1fr}
  .detail-list{grid-template-columns:1fr}
  .detail-list > div{padding:22px 0 18px!important;border-right:none!important}
  .detail-list > div + div{border-top:1px solid var(--line)}
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:22px}
}

@media(max-width:640px){
  .page-hero h1{font-size:38px}
  .prose p{font-size:16px}
  .prose h2{font-size:27px}
  .footer-nav{grid-template-columns:1fr}
}

/* Quote form heading. An h2 rather than an h3 so the form can sit on a page
   whose h1 is the page title, without leaving a gap in the heading order. */
.quote-card .quote-heading{font-size:30px;margin-bottom:8px;line-height:1.05}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Service names on the homepage link through to their own pages. */
.service h3 a{transition:color .18s ease}
.service h3 a:hover{color:var(--green-dark)}

.faq-section .section-title{margin-bottom:0}

/* ------------------------------------------------------------------
   Geo suggestion toast

   Floating, so it never pushes the page around after load, and never a
   redirect: the visitor keeps the URL they asked for.
   ------------------------------------------------------------------ */
.geo-toast{
  position:fixed;
  left:20px;bottom:20px;z-index:60;
  max-width:320px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 14px 40px rgba(20,24,20,.10);
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.geo-toast.visible{opacity:1;transform:translateY(0)}
.geo-toast p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--text)}
.geo-toast strong{font-weight:600}
.geo-toast-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.geo-toast-go{
  display:inline-flex;align-items:center;
  background:var(--ink);color:#fff;
  border-radius:999px;padding:8px 14px;
  font-size:12.5px;font-weight:600;
  transition:.2s ease;
}
.geo-toast-go:hover{background:var(--green);color:#10251d}
.geo-toast-close{
  background:none;border:0;padding:8px 4px;
  font-size:12.5px;color:var(--muted);
  transition:color .18s ease;
}
.geo-toast-close:hover{color:var(--text)}

@media(max-width:640px){
  /* Clear of the mobile call and quote bar. */
  .geo-toast{left:12px;right:12px;max-width:none;bottom:84px}
}

@media (prefers-reduced-motion: reduce){
  .geo-toast{transition:opacity .2s ease;transform:none}
  .geo-toast.visible{transform:none}
}