/* ============================================================
   G&F Cleaning Services — site stylesheet

   Shared by index and thanks. It lives here rather than inline in each
   template because the two pages drifted badly when the CSS was duplicated:
   the thank-you page was still carrying the old brown, the old blue-tinted
   background and the removed hero gradients days after the homepage changed.
   One file, one source of truth.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
/* Her two official brand colours, supplied by her designer 2026-08-19:
     blue #005584, and brown #83481E — the brown since adjusted to #5A3825
   at the client's request. Designer originals in brand/ are left untouched.
   Everything else here is derived from those two — darker shades for hover,
   a tint for panels, and neutrals biased toward the blue. See brand/BRAND.md. */
:root {
  /* The site is white by design, at the owner's request. color-scheme:light
     stops the browser rendering form fields and scrollbars dark on a phone
     that is set to dark mode. */
  color-scheme: light;
  --navy-deep:   #003C5E;   /* derived — headings */
  --navy-mid:    #005584;   /* OFFICIAL */
  --navy-soft:   #E2EEF6;   /* derived — panel tint */
  --brown:       #5A3825;   /* adjusted from the designer's #83481E */
  --brown-dark:  #422818;   /* derived — hover */
  /* Text that sits ON the brown button. Her brown is dark, so this is white in
     light mode — but the dark theme lifts the brown to #BC8C63, where white
     fails and near-black is needed instead. Hence a token, not a literal. */
  --on-brown:    #FFFFFF;   /* text on a brown fill */
  --on-navy:     #FFFFFF;   /* text on a blue fill — blue is now the primary */

  /* ALL WHITE, at the owner's request — for a cleaning business white reads as
     clean and clinical, which is the point. --surface and --band are kept as
     separate tokens even though all three are #FFFFFF: they mark what each thing
     IS, so if any tint is ever wanted back it's one value rather than a hunt.
     With no fills at all, structure comes entirely from hairline rules, generous
     spacing, and her navy in the type. */
  --ground:      #FFFFFF;
  --surface:     #FFFFFF;
  --band:        #FFFFFF;
  --ink:         #11212B;
  --ink-soft:    #485A66;
  --ink-faint:   #798A94;
  --rule:        #DAE4EC;

  --shadow-sm: 0 1px 2px rgba(18,34,46,.06), 0 2px 8px rgba(18,34,46,.04);
  --shadow-md: 0 2px 4px rgba(18,34,46,.06), 0 12px 32px rgba(18,34,46,.08);

  --display: "Fraunces", Georgia, serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
}


/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--navy-mid); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-mid); margin: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 700; font-size: 1rem;
  padding: .95rem 1.6rem; border-radius: 4px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Blue is the primary action colour at the owner's request; brown is kept for
   the small accents only — keylines, the pricing rule, stars, required marks. */
.btn-primary { background: var(--navy-mid); color: var(--on-navy); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-deep); box-shadow: var(--shadow-md); }
.btn-ghost { border-color: currentColor; color: var(--ink); }
.btn-ghost:hover { background: var(--navy-soft); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
/* The mark is 3.44:1, so it's sized by HEIGHT and left to find its own width.
   Its fills reference --brown / --navy-mid, so it re-tints itself in dark mode
   rather than needing a second asset. */
.logo-mark { height: 28px; width: auto; flex: none; }
@media (min-width: 560px) { .logo-mark { height: 34px; } }
@media (min-width: 900px) { .logo-mark { height: 38px; } }
.logo-text { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; color: var(--navy-mid); }
@media (min-width: 560px) { .logo-text { font-size: 1.1rem; } }
.logo-text small { display: block; font-family: var(--body); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.nav { display: none; gap: 1.75rem; align-items: center; }
.nav a { font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-soft); transition: color .15s; }
.nav a:hover { color: var(--navy-mid); }
.header-cta { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
}

/* Mobile menu. Below 900px the desktop nav is hidden, so without this there is
   no way to reach Services or the quote form from a phone except scrolling the
   whole page — and most of her traffic is phones. */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--navy-mid); color: var(--navy-mid); }
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding-bottom: 1rem;
}
.mobile-nav[data-open="true"] { display: block; }
/* Belt and braces: if the viewport widens while the menu is open, hide it —
   otherwise the panel hangs below the desktop nav. */
@media (min-width: 900px) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-nav ul a {
  display: block; padding: .95rem var(--pad);
  text-decoration: none; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.mobile-nav ul a:hover { background: var(--navy-soft); color: var(--navy-mid); }
.mobile-nav .btn { margin: 1rem var(--pad) 0; display: flex; }

/* ============================================================
   HERO — the phone number is the hero, because a call is the conversion
   ============================================================ */
/* The hero used to carry two large radial gradients — brown at top right, navy at
   top left. They were background-IMAGE, not background-color, which is why they
   survived the switch to an all-white page and left a blue cast in the top-left
   corner. Removed: "white" has to mean no washes either. */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3rem, 7vw, 4.5rem); }
.hero-inner { display: grid; gap: 2.75rem; }
@media (min-width: 940px) { .hero-inner { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3.5rem; } }

.hero-copy { display: flex; flex-direction: column; gap: 1.35rem; align-items: flex-start; }

/* MOBILE HERO
   On a short phone the hero was pushing the phone number — the entire point of
   the page — below the fold, and the two buttons were wrapping onto separate
   lines. Tightened the vertical rhythm and forced the buttons to share one row
   at equal width. */
@media (max-width: 559px) {
  .hero { padding-block: 1.25rem 2rem; }
  .hero-inner { gap: 1.25rem; }
  .hero-copy { gap: .9rem; }
  .hero h1 { font-size: 2.05rem; line-height: 1.1; }
  .hero-lede { font-size: 1rem; max-width: none; }

  /* flex:1 1 0 sizes them from zero rather than their text, so both come out
     identical regardless of label length. */
  .hero-actions { flex-wrap: nowrap; width: 100%; gap: .6rem; }
  .hero-actions .btn { flex: 1 1 0; padding: .8rem .5rem; font-size: .9rem; }

  .phone-card { padding: 1.1rem; }
  .phone-card .eyebrow { font-size: .7rem; }
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--navy-mid); }
.hero-lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--ink-soft); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Deliberately the ONLY properly rounded element on the page — everything else
   is 4px. The phone number is the conversion, so it should not look like the
   cards around it. Don't "fix" this inconsistency; it's carrying weight. */
.phone-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.75rem; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
}
.phone-card .eyebrow { color: var(--ink-faint); }
.phone-number {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 2.75rem); letter-spacing: -.03em; line-height: 1;
  color: var(--navy-deep); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.phone-number:hover { color: var(--navy-mid); }
.phone-note { font-size: .92rem; color: var(--ink-soft); }
.phone-card .btn { margin-top: .6rem; align-self: stretch; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust { border-block: 1px solid var(--rule); background: var(--band); }
.trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule);
}
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  background: var(--surface); padding: 1.5rem var(--pad);
  display: flex; flex-direction: column; gap: .2rem; align-items: center; text-align: center;
}
.trust-num { font-family: var(--display); font-weight: 700; font-size: 1.65rem; color: var(--navy-mid); line-height: 1.1; }
.trust-label { font-size: .82rem; color: var(--ink-soft); letter-spacing: .02em; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-head { display: flex; flex-direction: column; gap: .7rem; max-width: 56ch; margin-bottom: 2.75rem; }
/* A short brown bar above every section heading. On an all-white page this is the
   thing the eye catches — it repeats, so it reads as "a new section starts here".
   Done with ::before rather than markup so it can never fall out of sync, and both
   containers are flex-column so it inherits their gap. */
.section-head::before, .quote-copy::before {
  content: ""; width: 44px; height: 3px; flex: none;
  background: var(--brown);
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.02em; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* SERVICES */
.svc-groups { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .svc-groups { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.svc-group h3 {
  font-size: 1.35rem; padding-bottom: .8rem; margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--navy-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.svc-group h3 span { font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.svc-list { display: grid; gap: .85rem; list-style: none; margin: 0; padding: 0; }
.svc-item {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.svc-item:hover { border-color: var(--navy-mid); transform: translateY(-2px); }

/* Pricing is NOT a service, so it must not be dressed as one. A brown left rule
   separates it without adding another panel — the same device used for findings
   in the Reliem proposal, so her site and that paperwork read as one hand. */
.price-note {
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--brown);
}
.price-note .eyebrow { margin-bottom: .35rem; }
.price-note p:last-child { font-size: .95rem; color: var(--ink-soft); max-width: 46ch; }
.svc-item h4 { font-family: var(--body); font-weight: 700; font-size: 1.02rem; margin: 0 0 .2rem; }
.svc-item p { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }

/* MID-PAGE PROMPT
   Sits at the end of Services. Deliberately quiet — a rule, some space, a line
   and the button — because the page is all white and a heavy band would fight
   the section keylines rather than help them. */
.cta-inline {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
@media (min-width: 720px) {
  .cta-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
}
.cta-inline p { color: var(--ink-soft); font-size: .98rem; max-width: 48ch; }
.cta-inline .btn { flex: none; }
@media (max-width: 559px) { .cta-inline .btn { align-self: stretch; } }

/* WHY US */
/* Was a solid navy block — the page's one strong contrast moment. Now white
   like everything else, so it needs rules top and bottom or it dissolves into
   the sections either side. */
.why { background: var(--ground); color: var(--ink); border-block: 1px solid var(--rule); }
.why .section-head h2 { color: var(--navy-deep); }
.why .section-head p { color: var(--ink-soft); }
.why-grid { display: grid; gap: 1.75rem; }
@media (min-width: 780px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.why-item { display: flex; flex-direction: column; gap: .5rem; }
.why-item h3 { font-size: 1.2rem; color: var(--navy-deep); }
.why-item p { font-size: .96rem; color: var(--ink-soft); line-height: 1.6; }
/* .why-rule removed — the section keyline now carries this job. Four brown bars in
   one section made the marker meaningless. */

/* ABOUT — her mission and vision, in her own words, plus her photos.
   Two columns of statement, then a photo grid underneath. Both halves render
   only if there's content, so the section can't sit there half-empty. */
.about-grid { display: grid; gap: 2rem; }
@media (min-width: 780px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.about-item { display: flex; flex-direction: column; gap: .6rem; }
.about-item h3 {
  font-family: var(--body); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brown);
}
/* Her statements are short, so they can carry more weight than body copy
   without shouting. */
.about-item p { font-size: 1.15rem; line-height: 1.55; color: var(--ink); max-width: 40ch; }

/* WORK CAROUSEL
   Her photos are all portrait phone shots, so they're shown as a horizontal
   scroll strip rather than a grid — portrait cards side by side waste no space
   and swipe natively on a phone. CSS scroll-snap does the work; the arrows are
   a progressive enhancement and the strip is fully usable without JavaScript. */
.work { margin-top: 2.75rem; }
.work-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.work-head p { font-size: .9rem; color: var(--ink-faint); }
.work-nav { display: none; gap: .5rem; }
@media (hover: hover) and (min-width: 760px) { .work-nav { display: flex; } }
.work-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink); cursor: pointer; padding: 0;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.work-btn:hover:not(:disabled) { border-color: var(--navy-mid); color: var(--navy-mid); }
.work-btn:disabled { opacity: .35; cursor: default; }
.work-btn svg { width: 18px; height: 18px; }

.work-strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 42vw);
  gap: .9rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: .75rem;
  /* bleed to the screen edge on mobile so it reads as swipeable */
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
@media (prefers-reduced-motion: reduce) { .work-strip { scroll-behavior: auto; } }
@media (min-width: 620px) { .work-strip { grid-auto-columns: minmax(230px, 27vw); gap: 1.1rem; } }
@media (min-width: 960px) {
  .work-strip { grid-auto-columns: 250px; margin-inline: 0; padding-inline: 0; }
}
.work-strip::-webkit-scrollbar { height: 8px; }
.work-strip::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

.work-item { margin: 0; scroll-snap-align: start; }
.work-item img {
  /* height:auto is load-bearing. The width/height attributes on the <img> are
     presentational hints; without this the height stays pinned at 960px, both
     dimensions become definite, and aspect-ratio is ignored — which rendered
     these 200x960 instead of 3:4. */
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--rule);
  background: var(--ground);   /* placeholder while loading — white, like everything else */
}
.work-item figcaption { margin-top: .55rem; font-size: .85rem; color: var(--ink-soft); }

/* REVIEWS
   A swipe strip, like the photos, so all of her quotes fit without a wall of
   text. Cards are equal height by grid row, not by content, so a long quote and
   a short one still line up. */
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.reviews-head p { font-size: .9rem; color: rgba(255,255,255,.7); }
.reviews-strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 78vw);
  gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: .75rem;
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
@media (prefers-reduced-motion: reduce) { .reviews-strip { scroll-behavior: auto; } }
@media (min-width: 620px) { .reviews-strip { grid-auto-columns: minmax(300px, 46vw); gap: 1.25rem; } }
/* On a wide screen, exactly three fit and the rest scroll. */
@media (min-width: 1000px) {
  .reviews-strip { grid-auto-columns: calc((100% - 2.5rem) / 3); margin-inline: 0; padding-inline: 0; }
}
.reviews-strip::-webkit-scrollbar { height: 8px; }
.reviews-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 4px; }
.reviews-strip .review { scroll-snap-align: start; }
.review {
  margin: 0;   /* <figure> has 40px browser side margins — they were squeezing the card */
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .9rem;
}
.stars { color: var(--brown); font-size: 1rem; letter-spacing: .12em; }
.review blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.review figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: auto; }
.review figcaption strong { color: var(--ink-soft); font-weight: 700; }

/* QUOTE / CTA */
.quote-band { background: var(--band); border-block: 1px solid var(--rule); }
.quote-inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) { .quote-inner { grid-template-columns: 1fr auto; gap: 3rem; } }
.quote-copy { display: flex; flex-direction: column; gap: .8rem; }
.quote-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); letter-spacing: -.02em; }
.quote-copy p { color: var(--ink-soft); max-width: 48ch; }
.quote-actions { display: flex; flex-direction: column; gap: .75rem; }
@media (max-width: 879px) { .quote-actions { flex-direction: row; flex-wrap: wrap; } }

/* FOOTER */
/* The bottom padding exists to clear the fixed call bar, which is 59px tall on
   a phone. It was 104px — far more than needed, leaving a slab of blank white
   after the last line on a page that has no colour anywhere to signal it has
   ended. 4.75rem (76px) clears the bar with room to spare and no dead space.
   The top border gives the footer a defined edge, which on an all-white page is
   the only thing telling you the page is over. */
.site-footer { background: var(--ground); padding-block: 2.5rem calc(4.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .site-footer { padding-bottom: 2.5rem; } }
.footer-grid { display: grid; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.footer-col h4 { font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { font-size: .95rem; color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--navy-mid); text-decoration: underline; }
.footer-about p { font-size: .95rem; color: var(--ink-soft); max-width: 42ch; margin-top: .8rem; }
.footer-bottom { padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .85rem; color: var(--ink-faint); }

/* STICKY MOBILE CALL BAR */
.callbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 20px rgba(18,34,46,.1);
}
@media (min-width: 720px) { .callbar { display: none; } }
/* The extra bottom padding goes on the LINKS rather than the bar, so each one
   carries its own background all the way to the physical bottom edge. Padding
   the bar instead would show its divider colour as a strip under the buttons.
   env() resolves to 0 where there is no home indicator, so this is a no-op on
   Android and desktop. */
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  font-weight: 700; font-size: 1rem; text-decoration: none;
}
.callbar .cb-call { background: var(--navy-mid); color: var(--on-navy); }
.callbar .cb-text { background: var(--surface); color: var(--ink); }

/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote-form { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.field .req { color: var(--brown); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: .8rem .9rem; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-mid) 22%, transparent);
}
.field-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: .87rem; color: var(--ink-faint); }
.hp { position: absolute; left: -9999px; }
.quote-form .btn { justify-self: start; }
@media (max-width: 619px) { .quote-form .btn { justify-self: stretch; } }

/* thank-you page */
.thanks { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.thanks-inner { display: flex; flex-direction: column; gap: 1.1rem; align-items: center; max-width: 46ch; }
.thanks h1 { font-size: clamp(2rem, 5vw, 3rem); }
.thanks p { color: var(--ink-soft); }

/* ============================================================
   COLOUR BANDS
   The all-white page came from a phone showing it navy — which turned out to be
   the dark theme, since removed. With that fixed, three sections get colour
   back to give the page a rhythm: navy trust bar, pale-blue services, navy
   reviews. Everything else stays white. White cards sit on the coloured
   grounds so the reading surface itself never changes.
   ============================================================ */

/* Hero bullets — the two claims that used to be ✓ boxes in the trust bar.
   Plain text with a navy tick, so they carry weight without another panel. */
.hero-points {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
}
.hero-points li {
  font-size: .92rem; font-weight: 700; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: .45rem;
}
.hero-points li::before { content: "✓"; color: var(--navy-mid); font-weight: 700; }

/* Trust bar — reversed. Two figures now, not four: four blue boxes side by side
   was more colour than the page could carry. */
.trust { background: var(--navy-mid); border-block: 0; }
.trust-grid { background: rgba(255,255,255,.18); }
.trust-item { background: var(--navy-mid); }
.trust-num { color: var(--on-navy); }
.trust-label { color: rgba(255,255,255,.85); }
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }

/* Services — white cards with a navy left rule. Solid blue cards read as a
   second blue slab straight after the trust bar; the rule keeps the blue
   without the mass. */
#services .svc-item { border-left: 3px solid var(--navy-mid); }
#services .svc-item h4 { color: var(--navy-deep); }

/* Reviews — navy band, cards stay white */
#reviews { background: var(--navy-deep); }
#reviews .section-head h2 { color: var(--on-navy); }
#reviews .section-head p { color: rgba(255,255,255,.8); }
#reviews .eyebrow { color: rgba(255,255,255,.75); }
#reviews .section-head::before { background: var(--on-navy); }   /* brown vanishes on navy */
#reviews .review { border-color: transparent; }