/* GENERATED BY build.py -- DO NOT EDIT. Change business.json or build.py. */

:root {
  --navy: #1D1A4B;
  --sky: #0EA5E8;
  --violet: #7C3AED;
  --green: #21C45D;
  --pink: #F472B5;
  --slate: #4B5462;
  --slate-light: #6B7280;

  --ink: #14142b;
  --surface: #ffffff;
  --surface-alt: #f6f8fb;
  --line: #e4e8ef;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,20,43,.05), 0 8px 24px rgba(20,20,43,.06);
  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--violet); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

/* ---- FILL marker: an unresolved [[TOKEN]]. Loud on purpose. ---- */
.fill {
  background: #fff3b0;
  border-bottom: 2px solid #9a7b00;
  padding: 0 .2em;
  font-weight: 700;
}

/* ---------------------------------------------------------------- site header */

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.topbar {
  background: var(--navy);
  color: #fff;
  font-size: 14.5px;
}
.topbar .wrap {
  display: flex; gap: 18px; align-items: center; justify-content: flex-end;
  min-height: 42px; flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 140px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { height: 128px; width: auto; }   /* Ryan, 2026-11-11 11:22 PM: "twice the size" */
.brand span { display: none; }

.nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.nav a {
  color: var(--slate); text-decoration: none; font-weight: 600; font-size: 15.5px;
  padding: 9px 11px; border-radius: 9px; white-space: nowrap;
}
.nav a:hover { color: var(--navy); background: var(--surface-alt); }
.nav a.current { color: var(--violet); background: #f4edff; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 13px 24px; border-radius: 999px; border: 2px solid transparent;
  font-size: 16px; cursor: pointer; line-height: 1.2;
}
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: #6929d6; }
.btn-green { background: var(--green); color: #06331a; }
.btn-green:hover { background: #16a34a; color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn-lg { padding: 16px 32px; font-size: 17.5px; }

/* ----------------------------------------------------------------------- hero */

/* A flat navy wash over the whole photo dimmed the room to mud -- wrong advert for a
   cleaning company. Instead: the photo at full brightness, with a scrim that is opaque
   behind the text and fades to nothing over the right-hand side of the room. */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,12,43,.92) 0%, rgba(14,12,43,.80) 38%,
                    rgba(14,12,43,.34) 66%, rgba(14,12,43,.14) 100%),
    linear-gradient(to top, rgba(14,12,43,.45), rgba(14,12,43,0) 42%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 104px; padding-bottom: 104px; }
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.12;
  margin: 0 0 18px; max-width: 18ch; letter-spacing: -.02em;
}
.hero p.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 56ch; margin: 0 0 30px; color: #e7e9f5; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-sub { background: var(--navy); color: #fff; }
.hero-sub .wrap { padding-top: 62px; padding-bottom: 62px; }
.hero-sub h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 14px; letter-spacing: -.02em; }
.hero-sub p { color: #e7e9f5; max-width: 60ch; margin: 0; font-size: 1.1rem; }

/* Breadcrumbs. Visible AND backed by BreadcrumbList schema -- the BloomWorks site ran
   a visual breadcrumb with no schema behind it for weeks before that was caught. */
.crumbs {
  background: var(--surface-alt); border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--slate-light);
}
.crumbs .wrap { padding-top: 11px; padding-bottom: 11px; }
.crumbs a { color: var(--slate); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--violet); text-decoration: underline; }
.crumbs .sep { color: var(--line); padding: 0 3px; }
.crumbs [aria-current] { color: var(--slate-light); }

.trust { background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.trust .wrap {
  display: flex; gap: 14px 40px; flex-wrap: wrap; justify-content: center;
  padding-top: 18px; padding-bottom: 18px; font-weight: 600; color: var(--slate);
  font-size: 15.5px; text-align: center;
}
.trust span::before { content: "\2713"; color: var(--green); font-weight: 800; margin-right: 8px; }

/* -------------------------------------------------------------------- sections */

section { padding: 74px 0; }
section.alt { background: var(--surface-alt); }

h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; margin: 0 0 16px; letter-spacing: -.02em; }
h3 { font-size: 1.22rem; margin: 0 0 10px; }
.section-lede { color: var(--slate); max-width: 62ch; margin: 0 0 40px; font-size: 1.07rem; }

.grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card p { color: var(--slate); margin: 0 0 18px; }
.card .more { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--violet); }
.card .more:hover { text-decoration: underline; }

/* The services grid runs 3 columns with 4 cards, so row 2 was one tile and a two-cell
   hole. Ryan, 2026-11-12 12:12 AM: "there's the four tiles, three stacked together, one
   sitting by itself. It looks unbalanced... take that whole blurb of text and move it
   down next to the window cleaning tile... try to fill up that white space."
   So the intro paragraph IS a grid item rather than a block above the grid: it lands in
   the hole beside the fourth card and centres vertically against it.

   The left padding is a PERCENTAGE on purpose. Ryan, 2026-11-12 12:24 AM: it sat hard
   against the left edge of the two-cell span; he wants it pushed right toward the seam
   between the Move-Out and Commercial tiles above it, "but not 100% centered". A % padding
   resolves against the span's own width, so the nudge holds its proportion at every
   viewport instead of drifting the way a fixed px value would. 12% lands it roughly
   two-thirds of the way to true centre -- deliberately short of it. */
.grid .grid-note {
  grid-column: span 2; align-self: center; margin: 0;
  max-width: 48ch; padding: 0 8px 0 12%;
  font-size: 1.14rem; line-height: 1.72; color: var(--slate);
}
.grid .grid-note a { font-weight: 600; }
@media (max-width: 980px) {
  /* Below 3 columns there is no hole to fill, and an INTRO paragraph that reads after
     the cards is nonsense -- so it goes back to the top, full width. */
  .grid .grid-note {
    grid-column: 1 / -1; order: -1; align-self: start;
    max-width: 62ch; padding: 0; margin-bottom: 6px; font-size: 1.07rem;
  }
}

.split { display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

ul.ticks { list-style: none; padding: 0; margin: 0 0 26px; }
ul.ticks li { padding-left: 32px; position: relative; margin-bottom: 11px; }
ul.ticks li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  color: var(--green); font-weight: 800; font-size: 1.1em;
}

.pill {
  display: inline-block; background: #f4edff; color: var(--violet);
  font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}

.towns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.towns li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-weight: 600; color: var(--navy);
}

/* .faq is RESERVED for questions that are also in the page's FAQPage schema -- the
   gate's faq_schema_matches_visible check reads `.faq h3` as the authoritative list of
   visible questions. Anything else that just happens to look like a stacked Q&A (the
   "How it works" steps) uses .step, which renders identically. Using .faq for the steps
   made the gate demand three how-it-works headings inside the FAQ schema. */
.faq, .step { border-top: 1px solid var(--line); padding: 22px 0; }
.faq h3, .step h3 { margin: 0 0 8px; }
.faq p, .step p { margin: 0; color: var(--slate); }

/* ------------------------------------------------------------------------- CTA */

.cta { background: linear-gradient(135deg, var(--violet), var(--sky)); color: #fff; }
.cta .wrap { text-align: center; padding: 72px 22px; }
.cta h2 { margin: 0 0 14px; }
.cta p { max-width: 54ch; margin: 0 auto 30px; font-size: 1.1rem; color: #f2ecff; }
.cta .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta .btn-ghost { background: transparent; border-color: rgba(255,255,255,.65); color: #fff; }
.cta .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ------------------------------------------------------------------------ form */

form.quote { display: grid; gap: 18px; }
.row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 15px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 3px solid #ddd0ff; border-color: var(--violet); }
textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 14.5px; color: var(--slate-light); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err {
  margin: 0; padding: 12px 16px; border-radius: 10px; font-weight: 600;
  background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4;
}
.sent {
  background: #e9f9ef; border: 1px solid var(--green); border-radius: var(--radius);
  padding: 28px 30px;
}
.sent h3 { color: #06331a; margin: 0 0 8px; font-size: 1.4rem; }
.sent p { margin: 0; color: #14532d; }

.contact-panel {
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
}
.contact-panel dt { font-weight: 700; margin-top: 18px; }
.contact-panel dt:first-child { margin-top: 0; }
.contact-panel dd { margin: 4px 0 0; color: var(--slate); }
.contact-panel a { font-weight: 600; }

/* ---------------------------------------------------------------------- footer */

footer.site { background: var(--navy); color: #c9cde4; padding: 58px 0 32px; font-size: 15.5px; }
footer.site .cols { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
footer.site h4 { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 9px; }
footer.site a { color: #c9cde4; text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site img.logo { height: 46px; width: auto; margin-bottom: 14px; }
.legal {
  border-top: 1px solid rgba(255,255,255,.13); margin-top: 38px; padding-top: 22px;
  display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: space-between;
  color: #9aa0c0; font-size: 14px;
}

/* --------------------------------------------------------------- policy pages */

.policy { padding: 60px 0 80px; }
.policy h1 { font-size: 2.1rem; margin: 0 0 6px; }
.policy .updated { color: var(--slate-light); margin: 0 0 38px; font-size: 15px; }
.policy h2 { font-size: 1.3rem; margin: 36px 0 10px; }
.policy p, .policy li { color: var(--slate); }

@media (max-width: 760px) {
  .site-header .wrap { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .nav { order: 3; width: 100%; }
  .nav a { padding: 8px 10px; font-size: 15px; }
  section { padding: 54px 0; }
}