/* Booking, quick estimate and the language switch. Layout only; colours come
   from the palette tokens so this follows whichever scheme is loaded. */
.lang-switch{display:inline-flex;gap:10px;align-items:center;margin-left:14px;font-size:.9rem}
.lang-switch a{text-decoration:none;color:var(--muted);padding:2px 0}
.lang-switch a[aria-current]{color:var(--ink);font-weight:700;border-bottom:2px solid var(--brick)}
.nav .lang-switch{margin-left:6px}
@media(max-width:1100px){.nav .lang-switch{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}}
@media(max-width:1100px){.nav{overflow-y:auto;overscroll-behavior:contain}.nav>*{flex-shrink:0}}

/* hero video slot */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-scene.is-video{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-scene.is-video{opacity:0}}

/* two column tool pages */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:40px;align-items:start}
@media(max-width:900px){.tool{grid-template-columns:1fr}}
/* top was 24px, which parked the range and its button 76px under the sticky
   header once the page scrolled (2.4.11). */
.tool-side{position:sticky;top:calc(var(--head-h) + 16px);background:var(--sand);border-top:3px solid var(--brick);padding:26px}
.tool-side h2{font-size:1.15rem;margin-bottom:8px}
.tool-side .big{font-family:Archivo,sans-serif;font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.05;margin:6px 0 10px}
.tool-side .fine{font-size:.86rem;color:var(--muted)}
.tool-side .btn{width:100%;margin-top:14px}
@media(max-width:900px){.tool-side{position:static}}

/* steps */
.bk-steps{display:flex;gap:6px;margin:0 0 26px;padding:0;list-style:none;font-size:.86rem;color:var(--muted)}
.bk-steps li{flex:1;padding:8px 0;border-top:3px solid var(--line)}
.bk-steps li.on{border-top-color:var(--brick);color:var(--ink);font-weight:700}
.bk-steps li.done{border-top-color:var(--navy)}
.bk-step[hidden]{display:none}

/* choice tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:14px 0 6px}
.tile{display:block;text-align:left;background:#fff;border:1px solid var(--line-strong);border-radius:4px;padding:16px;font:inherit;cursor:pointer;color:var(--ink)}
.tile b{display:block;font-size:1.05rem;margin-bottom:4px}
.tile span{display:block;font-size:.9rem;color:var(--muted)}
.tile:hover{border-color:var(--ink)}
.tile[aria-pressed=true]{border-color:var(--brick);box-shadow:inset 0 0 0 2px var(--brick)}

/* day picker */
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.day{position:relative;text-align:left;background:#fff;border:1px solid var(--line-strong);border-radius:4px;padding:12px 14px;font:inherit;cursor:pointer;color:var(--ink)}
.day b{display:block}
.day span{display:block;font-size:.84rem;color:var(--muted);margin-top:3px}
.day.pref{border-color:var(--navy)}
.day.pref::before{content:attr(data-pref);position:absolute;top:-9px;left:10px;background:var(--navy);color:#fff;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.day[disabled]{opacity:.5;cursor:not-allowed}
.day[aria-pressed=true]{border-color:var(--brick);box-shadow:inset 0 0 0 2px var(--brick)}
.day.full b::after{content:" ";}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.slot{background:#fff;border:1px solid var(--line-strong);border-radius:4px;padding:9px 14px;font:inherit;cursor:pointer;color:var(--ink)}
.slot[aria-pressed=true]{border-color:var(--brick);box-shadow:inset 0 0 0 2px var(--brick)}
.bk-summary{background:var(--sand);padding:16px 18px;border-left:3px solid var(--navy);margin:8px 0 18px}
.bk-summary b{display:block}
.bk-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.bk-done{background:var(--sand);border-top:3px solid var(--navy);padding:28px}
.bk-done h2{margin-bottom:8px}
.bk-done .btn{margin-top:14px}
.err{color:var(--brick);font-weight:600;margin-top:10px}
/* The error lines are role=alert live regions and stay in the page while
   empty, because a region that only appears with its text is not reliably
   read out (4.1.3). Empty, they take no room. */
.err:empty{margin:0}
/* The field at fault gets a red border as well as the message (3.3.1). */
.field [aria-invalid=true],.rate input[aria-invalid=true]{border-color:var(--red,#b22234);box-shadow:inset 0 0 0 1px var(--red,#b22234)}
.wait-note{font-size:.92rem;color:var(--muted);margin-top:8px}

/* estimate calculator */
.rate-group{margin:22px 0 0}
.rate-group h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:Archivo,sans-serif;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.rate{display:grid;grid-template-columns:minmax(0,1fr) 120px 110px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.rate label{font-weight:600;color:var(--ink)}
.rate small{display:block;font-weight:400;color:var(--muted);font-size:.86rem}
.rate input{width:100%;padding:9px 10px;border:1px solid var(--line-strong);border-radius:4px;font:inherit;font-size:1rem}
.rate .amt{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
@media(max-width:520px){.rate{grid-template-columns:minmax(0,1fr) 90px}.rate .amt{grid-column:1/-1;text-align:left;font-size:.9rem}}
.helper{background:var(--sand);padding:16px 18px;margin:18px 0;border-radius:4px}
.helper h2,.helper h3{font-size:1rem;margin-bottom:8px}
.helper-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;align-items:end}
.helper-row label{font-size:.82rem;color:var(--muted);display:block;margin-bottom:4px}
.helper-row input,.helper-row select{width:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:4px;font:inherit}
/* Safari draws a native select at its own height and ignores the padding, so
   it sat at half the height of the fields beside it. Draw it like a field,
   with our own arrow. */
.field select,.helper-row select{-webkit-appearance:none;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230e2147' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.helper-row .btn{width:100%;min-width:0;padding-inline:10px;white-space:normal;text-align:center}
.helper-out{font-weight:700;color:var(--ink);margin-top:8px}
.send-box{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.send-box .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.send-box .field-row{grid-template-columns:1fr}}

/* Three facts about this climate, as a list rather than three identical cards.
   The cards read as a generated layout; these are peers, not a sequence. */
.facts{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr);gap:10px 48px;
  padding:26px 0;border-bottom:1px solid var(--line)}
.fact h3{margin:0;font-size:1.22rem;line-height:1.2;color:var(--ink)}
.fact p{margin:0;color:var(--body)}
@media(max-width:760px){.fact{grid-template-columns:1fr;gap:6px;padding:20px 0}}

/* 2026-11-06 SEO pass. The Google line under the hero buttons sits on the same
   dark lower band as the buttons, in the lede's colour. */
.hero-proof{margin-top:16px;font-size:.95rem;color:#eef2f9}
.hero-proof a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Each month card's heading links to the service that does that month's work. */
.season-card h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.facts h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.gal-more{margin-top:24px}
.work-svcs{margin-top:28px;color:var(--body)}
/* marketing email consent: unticked by default, the label is the click target */
.opt-in{display:flex;gap:10px;align-items:flex-start;min-height:24px;margin:0;color:var(--body);font-size:.95rem;cursor:pointer}
.opt-in input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}

/* 2026-11-07 conversion pass. Two buttons under every service page's lede, so
   a phone visitor has a book or request action on the first screen instead of
   three screens down (Plan/2026-11-06/05 findings 1 and 2). */
.head-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.head-actions .btn{min-height:48px;padding:12px 20px}
/* On snow, cleanups and tree work the request block sits beside the headline
   on a desktop, so the first screen is the decision; on a phone it follows the
   buttons. The "Send a request" button only jumps to that block, so it goes
   where the block is already in view. */
@media(min-width:941px){
  .page-head--request .head-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:48px;align-items:start}
  .page-head--request .head-actions .to-request{display:none}
}
@media(max-width:760px){
  /* On a phone the buttons come straight after the H1 and the lede follows.
     Below the lede they sat under the call bar at 320x568, at 375 wide in
     Safari, and on two Spanish pages at 390x664, because the header and the
     two-line notice already take about 170px. Only the paint order changes:
     the lede has no links, so the reading and tab order are the same. */
  .head-text{display:flex;flex-direction:column}
  .head-text .lede{order:1;margin-top:16px}
  .head-actions{margin-top:16px}
  .head-actions .btn{flex:1 1 auto}
}
.request{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:4px;
  padding:24px;scroll-margin-top:96px}
@media(max-width:940px){.request{margin-top:28px}}
@media(max-width:400px){.request{padding:20px 16px}}
.request h2{font-size:1.6rem;line-height:1.1}
.request-p{margin:8px 0 18px;color:var(--body);font-size:.98rem}
.form--request{gap:16px}
.form--request .btn{width:100%;min-width:0}
/* Checkboxes and radios as 44px targets. They sit outside .field, whose input
   rule would draw them as text boxes. */
.choices{border:0;margin:0;padding:0;min-width:0}
.choices legend{float:left;width:100%;padding:0;margin:0 0 6px;font-weight:600;font-size:.9rem;color:var(--ink)}
.choice-row{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.choice{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  border:1px solid var(--line-strong);border-radius:4px;background:#fff;color:var(--ink);font-size:.98rem;cursor:pointer}
.choice input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--navy)}
.choice:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.request-more{border-top:1px solid var(--line)}
.request-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
  cursor:pointer;font-weight:600;color:var(--navy-2);list-style:none}
.request-more summary::-webkit-details-marker{display:none}
.request-more summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--navy-2)}
.request-more[open] summary::after{content:"\2212"}
.request-more-body{display:grid;gap:16px;padding:4px 0 8px}
/* the way out of a quick estimate that has no rates, and out of a full week */
.est-alt{margin-top:16px;max-width:62ch;color:var(--body)}
.est-alt a,.bk-alt a{color:var(--navy-2);font-weight:600}
.bk-alt{margin-top:12px}