[hidden] { display: none !important; }
/* Lemon & Linen Home Care — concept site by BlueFire
   Layout concept: a calm linen page, left-aligned, where the "visit card" (a real
   room-by-room checklist) is the one bold object; lemon marks only what is done or chosen. */
:root {
  --linen: #FBF7EE;
  --paper: #FFFFFF;
  --sand: #F3ECDC;
  --ink: #1E2B24;
  --ink-soft: #4A5A51;
  --leaf: #2F6B4F;
  --leaf-deep: #234F3B;
  --leaf-wash: #E3EEE7;
  --lemon: #F2D65B;
  --lemon-soft: #FBF0B8;
  --line: #E4DCC8;
  --bf-night: #0F1D3A;
  --bf-cyan: #5CC6E2;

  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.15rem;
  --step-4: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem);

  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--leaf); text-underline-offset: 3px; }
a:hover { color: var(--leaf-deep); }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--sand { background: var(--sand); }
.section--leaf { background: var(--leaf); color: #FFFFFF; }
.section--leaf h2, .section--leaf h3 { color: #FFFFFF; }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }
.head { display: grid; gap: 14px; max-width: 64ch; margin-bottom: clamp(28px, 4vw, 48px); }
.kicker { font-weight: 700; font-size: var(--step--1); color: var(--leaf); }
.section--leaf .kicker { color: var(--lemon-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }

/* Concept banner (shared across BlueFire demos) */
.concept {
  background: var(--bf-night);
  color: #FFFFFF;
  font-size: 0.8125rem;
  padding-block: 7px;
}
.concept .wrap { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; align-items: center; text-align: center; }
.concept a { color: var(--bf-cyan); font-weight: 600; }
.concept a:hover { color: #FFFFFF; }

/* Header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(251, 247, 238, 0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand svg { width: 38px; height: 38px; }
.brand-name { font-family: var(--display); font-size: 1.3rem; line-height: 1; }
.brand-name small { display: block; font-family: var(--body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 4px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 10px 12px; border-radius: 999px; }
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--lemon-soft); }
.head-actions { display: flex; align-items: center; gap: 14px; }
.head-phone { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; font-size: 0.95rem; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid var(--leaf); background: var(--leaf); color: #FFFFFF;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn--lemon { background: var(--lemon); color: var(--ink); border-color: var(--ink); }
.btn--lemon:hover { background: #FFFFFF; color: var(--ink); border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy .lede { max-width: 46ch; }
.hero h1 .mark { background: linear-gradient(transparent 62%, var(--lemon) 62%, var(--lemon) 92%, transparent 92%); padding-inline: 2px; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 4px 0 0; list-style: none; font-size: 0.95rem; font-weight: 600; }
.proof li { display: flex; align-items: center; gap: 8px; }
.proof svg { width: 20px; height: 20px; color: var(--leaf); flex-shrink: 0; }

/* Visit card — the signature object */
.visit {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(30, 43, 36, 0.35);
  padding: 24px; display: grid; gap: 18px; position: relative; min-width: 0;
}
.visit::before {
  content: ""; position: absolute; top: -12px; left: 32px; width: 84px; height: 24px;
  background: var(--lemon); border-radius: 4px; transform: rotate(-3deg); opacity: .9;
}
.visit-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.visit-top h2 { font-size: 1.35rem; }
.visit-meta { font-size: 0.9rem; color: var(--ink-soft); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--leaf-wash); color: var(--leaf-deep); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rooms li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px dashed var(--line); font-size: 0.97rem; }
.rooms li:last-child { border-bottom: 0; }
.rooms .tick { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); display: grid; place-items: center; transition: background-color .3s ease, border-color .3s ease; }
.rooms .tick svg { width: 14px; height: 14px; opacity: 0; transition: opacity .3s ease; color: var(--ink); }
.rooms li.done .tick { background: var(--lemon); border-color: var(--ink); }
.rooms li.done .tick svg { opacity: 1; }
.rooms .t { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.85rem; }
.visit-foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.05rem; background: var(--leaf-wash); color: var(--leaf-deep); flex-shrink: 0; }
.avatar--lemon { background: var(--lemon-soft); color: var(--ink); }
.visit-foot p { font-size: 0.92rem; line-height: 1.45; }

/* Trust strip */
.trust { border-block: 1px solid var(--line); background: var(--paper); }
.trust ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 28px; }
.trust li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; }
.trust strong { display: block; }
.trust svg { width: 26px; height: 26px; color: var(--leaf); flex-shrink: 0; margin-top: 2px; }

/* Grids */
.grid { display: grid; gap: 20px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid > * { min-width: 0; }

.service { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; align-content: start; }
.service .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--leaf-wash); display: grid; place-items: center; color: var(--leaf-deep); }
.service .ico svg { width: 26px; height: 26px; }
.service p { color: var(--ink-soft); font-size: 0.98rem; }
.service .more { font-weight: 700; text-decoration: none; margin-top: 4px; }
.service .more:hover { text-decoration: underline; }
.service--feature { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.service--feature h3 { color: #FFFFFF; }
.service--feature p { color: #D7DED9; }
.service--feature .ico { background: var(--lemon); color: var(--ink); }
.service--feature .more { color: var(--lemon); }

/* Steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; counter-increment: step; min-width: 0; }
.steps li::before { content: counter(step); font-family: var(--display); font-size: 1.4rem; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lemon); color: var(--ink); }
.section--leaf .steps p { color: #E6EFE9; }

/* Checklist tabs */
.tabs { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.tablist { display: grid; gap: 6px; }
.tablist button {
  text-align: left; font: inherit; font-weight: 600; color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 12px; padding: 14px 16px; cursor: pointer; min-height: 48px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.tablist button:hover { background: var(--paper); border-color: var(--line); }
.tablist button[aria-selected="true"] { background: var(--paper); border-color: var(--ink); }
.tablist .count { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tabpanel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); min-width: 0; }
.tabpanel h3 { margin-bottom: 14px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 0.97rem; line-height: 1.45; }
.checklist svg { width: 20px; height: 20px; color: var(--leaf); margin-top: 2px; }
.checklist .deep { color: var(--ink-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 0.85rem; color: var(--ink-soft); }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--lemon-soft); color: var(--ink); vertical-align: 1px; margin-left: 6px; white-space: nowrap; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.stars { display: flex; gap: 2px; color: var(--ink); }
.stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; font-size: 1rem; }
.review figcaption { font-size: 0.9rem; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.review figcaption strong { color: var(--ink); }
.sample { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.rating { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.rating .big { font-family: var(--display); font-size: 2.6rem; line-height: 1; }

/* Areas */
.areas { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
.area-list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.area-list .zip { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.zipcheck { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; }
.zipcheck form { display: flex; gap: 10px; flex-wrap: wrap; }
.zipcheck input { flex: 1 1 140px; }
.zip-result { font-weight: 600; min-height: 1.6em; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.faq summary { cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 700; list-style: none; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.5rem; color: var(--leaf); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 20px 20px; color: var(--ink-soft); display: grid; gap: 10px; }
.faq-group { display: grid; gap: 16px; }
.faq-group + .faq-group { margin-top: 44px; }

/* CTA band */
.cta-band { background: var(--ink); color: #FFFFFF; border-radius: 24px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.cta-band h2 { color: #FFFFFF; }
.cta-band p { color: #D7DED9; margin-top: 10px; }
.cta-band .btn-row { justify-content: flex-end; }
.cta-band .btn--ghost { color: #FFFFFF; border-color: #FFFFFF; }
.cta-band .btn--ghost:hover { background: #FFFFFF; color: var(--ink); }

/* Page header (inner pages) */
.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page-head .wrap { display: grid; gap: 16px; }
.crumbs { font-size: 0.85rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

/* Service detail rows */
.svc-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); padding-block: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); align-items: start; }
.svc-detail:last-child { border-bottom: 0; }
.svc-detail .intro { display: grid; gap: 14px; align-content: start; }
.svc-detail .best { font-size: 0.95rem; background: var(--lemon-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.svc-detail .price-from { font-family: var(--display); font-size: 1.4rem; }
.svc-detail .price-from small { font-family: var(--body); font-size: 0.85rem; color: var(--ink-soft); }

/* Add-ons table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.97rem; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; background: var(--sand); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }

/* Forms */
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: 0.92rem; }
.field .hint { font-size: 0.82rem; color: var(--ink-soft); }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid #8C8170; border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--leaf); outline-offset: 1px; border-color: var(--leaf); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid #8C8170; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.95rem; background: var(--paper); }
.chip input:checked + span { background: var(--lemon); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--leaf); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid #8C8170; border-radius: 999px; background: var(--paper); }
.stepper button { width: 44px; height: 44px; border: 0; background: none; font: inherit; font-size: 1.3rem; cursor: pointer; color: var(--ink); border-radius: 999px; }
.stepper button:hover { background: var(--sand); }
.stepper output { min-width: 3ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); }
.form-done { background: var(--leaf-wash); border: 1px solid var(--leaf); border-radius: var(--radius); padding: 20px; display: grid; gap: 6px; }

/* Quote builder */
.quote { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 24px; align-items: start; }
.quote-form { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 24px; min-width: 0; }
.quote-row { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.quote-total { position: sticky; top: 100px; background: var(--ink); color: #FFFFFF; border-radius: 20px; padding: 28px; display: grid; gap: 14px; min-width: 0; }
.quote-total .range { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.quote-total .per { color: #D7DED9; font-size: 0.95rem; }
.quote-total ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 8px; font-size: 0.92rem; color: #D7DED9; }
.quote-total ul li { display: flex; justify-content: space-between; gap: 12px; }
.quote-total ul li span:last-child { font-variant-numeric: tabular-nums; color: #FFFFFF; }
.quote-total .btn { width: 100%; }
.quote-total .fine { font-size: 0.82rem; color: #C3CCC6; }

/* Team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.member { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; }
.member .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.member .role { font-size: 0.9rem; color: var(--ink-soft); }
.member p { font-size: 0.97rem; }

/* Two-column prose */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split > * { min-width: 0; }
.prose { display: grid; gap: 16px; max-width: 62ch; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts span:last-child { font-weight: 700; text-align: right; }

/* Footer */
.site-foot { background: var(--ink); color: #D7DED9; padding-block: 56px 32px; margin-top: 0; }
.site-foot a { color: #FFFFFF; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h2 { font-family: var(--body); font-size: 0.95rem; font-weight: 700; color: #FFFFFF; margin-bottom: 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand .brand-name { color: #FFFFFF; }
.foot-brand .brand-name small { color: #C3CCC6; }
.foot-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.foot-legal a { color: var(--bf-cyan); }

/* Sticky mobile bar */
.mbar { display: none; }

@media (max-width: 1020px) {
  .nav, .head-phone { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .head-actions .btn { display: none; }
  .site-head.open .nav {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--linen); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 18px; gap: 2px;
  }
  .site-head.open .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .quote { grid-template-columns: 1fr; }
  .quote-total { position: static; }
}
@media (max-width: 820px) {
  .hero .wrap, .areas, .split, .svc-detail, .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start; }
  .steps, .reviews, .team, .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: 1fr; }
  .tablist { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .checklist { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 24px -18px rgba(30,43,36,.45);
  }
  .mbar .btn { min-height: 52px; padding: 0 12px; width: 100%; }
}
@media (max-width: 520px) {
  .trust ul, .grid--4, .area-list, .foot-grid { grid-template-columns: 1fr; }
  .site-head .wrap { min-height: 64px; }
  .brand-name small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.field-label { font-size: 0.92rem; }
.split--book { grid-template-columns: 1.3fr 0.7fr; }
@media (max-width: 820px) { .split--book { grid-template-columns: 1fr; } }

/* Photo slots: a labeled placeholder until images/<file> exists, then the photo covers it */
.photo {
  position: relative; margin: 0; aspect-ratio: var(--ar, 4 / 3); max-width: 100%; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--sand) 0 14px, #ECE3CD 14px 28px);
  border: 1.5px dashed #8C8170;
}
.photo:has(img) { border-color: transparent; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; color: transparent; font-size: 0; }
.photo-slot { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; }
.photo-card { background: rgba(255, 255, 255, 0.92); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; max-width: 34ch; font-size: 0.82rem; line-height: 1.4; color: var(--ink); }
.photo-tag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; background: var(--ink); color: #FFFFFF; padding: 3px 9px; border-radius: 999px; }
.photo-tag svg { width: 13px; height: 13px; }
.photo-file { color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Hero: photo with the visit card overlapping it */
.hero-media { display: grid; min-width: 0; }
.hero-media .photo { --ar: 6 / 5; border-radius: 24px; }
.hero-media .visit { margin: -120px 0 0 -48px; width: 88%; z-index: 2; }
.hero-media .photo-slot { align-items: flex-start; justify-content: flex-end; }

/* Photos inside cards bleed to the card edge */
.service > .photo, .member > .photo { margin: -24px -24px 6px; width: calc(100% + 48px); max-width: none; border-radius: var(--radius) var(--radius) 0 0; border-width: 0 0 1.5px; }
.member > .photo { margin: -22px -22px 6px; width: calc(100% + 44px); }
.svc-detail .photo { --ar: 3 / 2; }
.stack { display: grid; gap: 20px; min-width: 0; align-content: start; }

@media (max-width: 820px) {
  .hero-media .visit { margin: -64px 12px 0; width: auto; }
}

/* Header fit: never wrap labels; wider header row; phone moves out before anything wraps */
.btn, .nav a, .head-phone { white-space: nowrap; }
.site-head .wrap { max-width: 1320px; gap: 20px; }
.nav { gap: 2px; }
.nav a { padding: 10px 11px; }
@media (max-width: 1279px) { .head-phone { display: none; } }
@media (max-width: 1099px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .head-actions .btn { display: none; }
  .site-head.open .nav {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--linen); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 18px; gap: 2px;
  }
  .site-head.open .nav a { padding: 14px 12px; font-size: 1.05rem; }
}

/* ==========================================================================
   Motion — "freshly cleaned"
   Lemon highlighter wipes, a polish glint on photos and buttons, sparkles,
   soap bubbles on the leaf band, and ticks that draw themselves.
   Everything is scoped to html.mo, which site.js adds only when the visitor
   has not asked for reduced motion. No JS = everything simply shows.
   ========================================================================== */
@keyframes ll-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ll-wipe   { to { background-size: 100% 100%; } }
@keyframes ll-settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ll-glint  { 0% { transform: translateX(-130%) skewX(-18deg); } 22%, 100% { transform: translateX(160%) skewX(-18deg); } }
@keyframes ll-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes ll-pop    { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ll-float  {
  0%   { opacity: 0; transform: translate(0, 0) scale(.8); }
  12%  { opacity: 1; }
  50%  { transform: translate(var(--sway, 14px), -48vh) scale(1); }
  88%  { opacity: .9; }
  100% { opacity: 0; transform: translate(0, -96vh) scale(1.08); }
}
@keyframes ll-pulse  { 0% { box-shadow: 0 0 0 0 rgba(242, 214, 91, .9); } 100% { box-shadow: 0 0 0 14px rgba(242, 214, 91, 0); } }

/* Scroll reveal (classes added by site.js) */
html.mo .rv { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
html.mo .rv.in { opacity: 1; transform: none; }

/* Hero entrance */
html.mo .hero-copy > *, html.mo .page-head .wrap > * { animation: ll-rise .8s cubic-bezier(.2,.7,.2,1) both; }
html.mo .hero-copy > :nth-child(2), html.mo .page-head .wrap > :nth-child(2) { animation-delay: .12s; }
html.mo .hero-copy > :nth-child(3), html.mo .page-head .wrap > :nth-child(3) { animation-delay: .24s; }
html.mo .hero-copy > :nth-child(4), html.mo .page-head .wrap > :nth-child(4) { animation-delay: .36s; }
html.mo .hero h1 .mark {
  background: linear-gradient(transparent 62%, var(--lemon) 62%, var(--lemon) 92%, transparent 92%) left center / 0% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: ll-wipe .9s .75s cubic-bezier(.65,0,.25,1) forwards;
}
html.mo .hero-media { position: relative; }
html.mo .hero-media .photo { animation: ll-settle 1.1s .1s cubic-bezier(.2,.7,.2,1) both; }
html.mo .hero-media .visit { animation: ll-rise .9s .55s cubic-bezier(.2,.7,.2,1) both; }

/* Polish glint: sweeps the hero photo every few seconds, service photos on hover */
html.mo .photo:has(img)::after {
  content: ""; position: absolute; inset: -10% -30%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-18deg);
}
html.mo .hero-media .photo:has(img)::after { animation: ll-glint 7s 1.8s ease-in-out infinite; }
html.mo .service:hover .photo:has(img)::after, html.mo .member:hover .photo:has(img)::after { animation: ll-glint 2.6s ease-in-out 1; }

/* Sparkles beside the hero photo (injected by site.js) */
.ll-spark { position: absolute; z-index: 3; pointer-events: none; width: var(--s, 22px); height: var(--s, 22px); opacity: 0; }
.ll-spark svg { width: 100%; height: 100%; display: block; }
html.mo .ll-spark { animation: ll-twinkle 3.4s var(--sd, 0s) ease-in-out infinite; }

/* Soap bubbles on the leaf band and the closing band (injected by site.js) */
.ll-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ll-bubbles span {
  position: absolute; bottom: -60px; left: var(--x); width: var(--b); height: var(--b); border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55) 0 12%, rgba(255,255,255,.08) 13% 60%, rgba(251,240,184,.16) 100%);
  opacity: 0;
}
html.mo .ll-bubbles span { animation: ll-float var(--t, 16s) var(--bd, 0s) linear infinite; }
.has-bubbles { position: relative; isolation: isolate; }
.has-bubbles > :not(.ll-bubbles) { position: relative; z-index: 1; }

/* Buttons: lift + a quick shine on hover */
html.mo .btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .15s ease, border-color .15s ease, transform .2s ease, box-shadow .2s ease; }
html.mo .btn::after {
  content: ""; position: absolute; inset: -2px -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-18deg);
}
html.mo .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(30,43,36,.55); }
html.mo .btn:hover::after { transition: transform .7s ease; transform: translateX(130%) skewX(-18deg); }
html.mo .btn:active { transform: translateY(0); }

/* Cards lift on hover */
html.mo .service, html.mo .review, html.mo .member { transition: transform .25s ease, box-shadow .25s ease, opacity .75s cubic-bezier(.2,.7,.2,1); }
html.mo .service:hover, html.mo .review:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(30,43,36,.5); }
html.mo .service .photo img, html.mo .member .photo img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
html.mo .service:hover .photo img, html.mo .member:hover .photo img { transform: scale(1.045); }
html.mo .service .ico { transition: transform .3s ease; }
html.mo .service:hover .ico { transform: rotate(-8deg) scale(1.08); }

/* Visit card: each tick draws itself and pops; the status pill pulses when the visit is done */
html.mo .rooms .tick svg path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s .1s ease; }
html.mo .rooms li.done .tick svg path { stroke-dashoffset: 0; }
html.mo .rooms li.done .tick { animation: ll-pop .45s ease; }
html.mo .rooms li { transition: background-color .4s ease; }
html.mo .rooms li.just-done { background: linear-gradient(90deg, var(--lemon-soft), transparent); }
html.mo .pill.is-done { animation: ll-pulse 1.2s ease-out 2; }

/* Checklists: items cascade in and their check marks draw */
html.mo .checklist.rv-list li { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * 45ms); }
html.mo .checklist.rv-list svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s ease; transition-delay: calc(var(--i, 0) * 45ms + 150ms); }
html.mo .checklist.rv-list.in li { opacity: 1; transform: none; }
html.mo .checklist.rv-list.in svg path { stroke-dashoffset: 0; }

/* Steps: the numbered lemon circles pop in turn */
html.mo .steps > li.rv::before { transform: scale(.4); transition: transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--d, 0ms) + 200ms); }
html.mo .steps > li.rv.in::before { transform: none; }

/* Reviews: stars light up one by one */
html.mo .stars.rv-stars svg { opacity: .2; transform: scale(.6); transition: opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--i, 0) * 90ms); }
html.mo .stars.rv-stars.in svg { opacity: 1; transform: none; }

/* FAQ answers ease open; sticky header gains a soft shadow once you scroll */
html.mo .faq details[open] > div { animation: ll-rise .35s ease both; }
html.mo .faq summary::after { transition: transform .25s ease; }
html.mo .faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
html.mo .site-head { transition: box-shadow .3s ease; }
html.mo .site-head.scrolled { box-shadow: 0 10px 24px -18px rgba(30,43,36,.45); }
html.mo .brand svg { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
html.mo .brand:hover svg { transform: rotate(-12deg) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .ll-spark, .ll-bubbles { display: none; }
}