/* Bunny Cleaning — one stylesheet for the whole site.
 *
 * Palette is fixed by brand/Bunny_Cleaning_Logo_Usage_Guide.pdf and CLAUDE.md.
 * The four brand tokens are marked; everything else is a tint or shade derived
 * from them for states and hairlines, not a new brand colour.
 *
 * Design position: the price ledger is the only loud thing on the page.
 * Everything around it stays quiet — hairlines instead of shadows, fog fills
 * instead of cards, one motion (the price changing) instead of many.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Direction A — warm plum. Chosen 12 September 2026.
     Magenta is the logo's own colour and it now also carries the price, the
     tick marks and the active tab; everything structural is the deep plum ink.
     Every pair below has been checked at WCAG AA. */

  --magenta: #DA237A;        /* brand — logo, the price, ticks, active tab */
  --magenta-deep: #AE1A61;   /* magenta as small text — 6.4:1 on paper */

  --ink: #2B2029;            /* deep plum-black — text, buttons. 14.8:1 */
  --ink-2: #6E6068;          /* secondary text — 5.6:1 on paper */
  --ink-deep: #1C1520;       /* button hover, pressed */
  --ink-line: #4A3D46;       /* hairlines on a dark surface */
  --ink-text: #B9ADB4;       /* body text on a dark surface */

  --paper: #FBF8F6;          /* page ground, warm */
  --card: #FFFFFF;           /* raised surfaces and controls */
  --band: #F6F1ED;           /* quiet panels and section bands */
  --photo-bg: #EDE3DD;       /* photograph placeholders */

  --line: #E7DED9;           /* decorative hairlines and dividers */
  --control-line: #948480;   /* borders of inputs and chips — 3.4:1 */

  --display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body: 'Karla', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1140px;
  --gutter: 24px;
  --radius: 16px;
  --radius-lg: 18px;
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
}

/* -------------------------------------------------------------- foundation */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.4vw, 62px); letter-spacing: -0.03em; }
h2 { font-size: clamp(29px, 3.6vw, 42px); letter-spacing: -0.024em; }
h3 { font-size: clamp(20px, 2.2vw, 25px); }
h4 { font-size: 18px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}
/* On graphite surfaces a graphite ring disappears. */
.band-dark :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.prose { max-width: 62ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }

.lede {
  font-size: clamp(18px, 1.6vw, 20px);
  color: var(--ink-2);
  max-width: 54ch;
}

.small { font-size: 15px; }
.fine { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 200;
  text-decoration: none;
  font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 246, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { width: 40px; height: 40px; }
.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand:hover { color: var(--ink); }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--magenta);
}
/* `.site-nav a` is more specific than `.btn`, so the button's own white text
   loses without this, and the label goes mid-gray on a dark fill. */
.site-nav .btn { border-bottom: none; color: #fff; }
.site-nav .btn:hover { color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .site-nav a:not(.btn)[aria-current="page"] { color: var(--magenta-deep); }
  .site-nav .btn { margin-top: 14px; text-align: center; }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--control-line);
}
.btn-quiet:hover { background: var(--band); color: var(--ink); border-color: var(--control-line); }

.btn-on-dark {
  background: var(--card);
  color: var(--ink);
  border-color: var(--card);
}
.btn-on-dark:hover { background: var(--line); color: var(--ink); border-color: var(--line); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

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

.section { padding: clamp(56px, 8vw, 100px) 0; }
.section-tight { padding: clamp(40px, 5vw, 64px) 0; }

.band-fog { background: var(--band); border-block: 1px solid var(--line); }

.band-dark {
  background: var(--ink);
  color: var(--ink-text);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark strong { color: #fff; }
.band-dark a { color: #fff; }

.section-head { max-width: 60ch; margin-bottom: clamp(30px, 4vw, 48px); }
.section-head p { color: var(--ink-2); font-size: clamp(17px, 1.5vw, 19px); margin-bottom: 0; }

.page-head { padding: clamp(44px, 6vw, 78px) 0 clamp(28px, 4vw, 44px); }
.page-head .lede { margin-top: 18px; }

.crumb {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

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

.hero { padding: clamp(38px, 5vw, 66px) 0 clamp(48px, 6vw, 78px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.hero-where {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 18px;
}

.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 26px; }

.hero-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.hero-facts li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.hero-facts b { font-weight: 700; }
.hero-facts span { color: var(--ink-2); font-size: 15px; text-align: right; }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- estimator */

.estimator {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}

.estimator-head {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
}
.estimator-head h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.estimator-head p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

.estimator-body { padding: 22px 24px 24px; }

/* The ledger: the memorable element. A receipt you can read while you build. */
.ledger {
  background: var(--band);
  border-top: 1px solid var(--line);
  padding: 22px 24px 24px;
}

.ledger-total {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(52px, 8vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.ledger-total.is-moving { transition: none; }

.ledger-caption {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.ledger-caption b { color: var(--ink); font-weight: 700; }

.ledger-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.ledger-lines li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.ledger-lines b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-lines .is-discount span { color: var(--ink); }
/* A tax line is information, not arithmetic: the amount is already inside
   every figure above it, so it is set apart rather than read as an add. */
.ledger-lines .is-note, .ledger-lines .is-note b { color: var(--ink-2); font-style: italic; }
.ledger-lines .is-note b { font-style: normal; }

.ledger-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

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

.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 9px;
  color: var(--ink);
}

.field-hint {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 8px 0 0;
  line-height: 1.5;
}

fieldset { border: 0; margin: 0 0 22px; padding: 0; }
fieldset:last-child { margin-bottom: 0; }
legend {
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 9px;
}

.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opts input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.opts label {
  flex: 1 1 auto;
  min-width: 58px;
  text-align: center;
  padding: 10px 14px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  background: var(--card);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.opts label:hover { border-color: var(--ink-2); }
.opts input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 700;
}
.opts input:focus-visible + label {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.opts-grid-2, .opts-grid-3 { display: grid; gap: 7px; }
.opts-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-grid-2 label, .opts-grid-3 label { min-width: 0; }
@media (max-width: 460px) {
  .opts-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
textarea { resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-2); }
input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Nothing on this site is colour-coded, so an error is marked by a rule, a
   glyph and weight instead — which also makes it legible to anyone who cannot
   tell two hues apart. */
.error {
  display: none;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.error.is-shown { display: flex; }
.error .icon { width: 18px; height: 18px; margin-top: 1px; }

.notice {
  border-left: 3px solid var(--magenta);
  background: var(--band);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  line-height: 1.55;
}
.notice p { margin-bottom: 0.6em; }
.notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- extras UI */

.extras { display: grid; gap: 8px; }

.extra {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--control-line);
  border-radius: 10px;
  padding: 12px 15px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.extra:hover { border-color: var(--ink-2); }
.extra input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: var(--ink);
  cursor: pointer;
}
.extra > .icon { color: var(--ink-2); }
.extra.is-checked > .icon { color: var(--ink); }
.extra-name { flex: 1; font-size: 15.5px; }
.extra-price {
  font-family: var(--display);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.extra.is-checked { border-color: var(--ink); background: var(--band); }
.extra.is-checked .extra-price { color: var(--ink-deep); }

.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.qty button:hover { border-color: var(--ink); color: var(--ink); }
.qty output {
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
}

/* ---------------------------------------------------------------- photo UI */

.dropzone {
  display: block;
  border: 2px dashed var(--control-line);
  border-radius: var(--radius);
  background: var(--band);
  padding: 28px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.is-hot { border-color: var(--ink); background: var(--band); }
.dropzone strong { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 6px; }
.dropzone span { font-size: 14.5px; color: var(--ink-2); }
.dropzone input { display: none; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(48, 50, 56, 0.82);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.thumb button:hover { background: var(--ink-deep); }

.shotlist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
}
.shotlist li {
  font-size: 13.5px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
}

/* ---------------------------------------------------------------- calendar */

.calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 380px;
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--band);
}
.calendar-head strong { font-family: var(--display); font-size: 16.5px; font-weight: 600; }
.calendar-head button {
  border: 1px solid var(--control-line);
  background: var(--card);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font: inherit;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.calendar-head button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.calendar-head button:disabled { opacity: 0.35; cursor: not-allowed; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 10px;
}
.calendar-dow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  padding-bottom: 6px;
}
.calendar-grid button {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.calendar-grid button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.calendar-grid button:disabled {
  color: var(--ink-2);
  cursor: not-allowed;
  text-decoration: line-through;
}
.calendar-grid button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 700;
}
.calendar-grid .is-empty { visibility: hidden; }

.calendar-foot {
  border-top: 1px solid var(--line);
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--band);
}

/* ------------------------------------------------------------------- steps */

.step-progress {
  display: flex;
  gap: 5px;
  margin-top: 16px;
}
.step-progress i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}
.step-progress i.is-done { background: var(--magenta); }

.step-pane { display: none; }
.step-pane.is-active { display: block; }

.step-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.step-nav {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.step-nav .btn { flex: 1; text-align: center; }

/* --------------------------------------------------------------- ruled set */

.ruled {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.ruled > li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ruled h3 { font-size: 19px; margin-bottom: 5px; }
.ruled p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* ------------------------------------------------------------ service list */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.service {
  border-top: 2px solid var(--ink);
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
}
.service .icon { margin-bottom: 14px; }
.service h3 { margin-bottom: 8px; font-size: 20px; }
.service .from { font-size: 14px; color: var(--ink-2); margin: 0 0 2px; }
.service .amount {
  font-family: var(--display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
  line-height: 1;
}
.service p { font-size: 15.5px; color: var(--ink-2); flex: 1; }
.service .btn { align-self: flex-start; margin-top: 18px; }

/* ------------------------------------------------------------- how it works */

.sequence {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.sequence li { counter-increment: step; padding-top: 46px; position: relative; }
.sequence li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--magenta);
  color: var(--magenta-deep);
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.sequence h3 { font-size: 19px; margin-bottom: 8px; }
.sequence p { font-size: 15.5px; color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--line); max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--magenta);
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; }

/* ------------------------------------------------------------------- areas */

.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-chips li {
  background: var(--band);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15px;
  color: var(--ink-2);
}

.area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.area-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: border-color 0.14s ease;
}
.area-card:hover { border-color: var(--ink); color: var(--ink); }
.area-card h3 { margin-bottom: 6px; }
.area-card p { font-size: 15px; color: var(--ink-2); margin: 0; }

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

.cta {
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 60px);
}
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: var(--ink-text); max-width: 52ch; font-size: 18px; }
.cta .btn-row { margin-top: 26px; }
.cta a.plain {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-text);
  padding-bottom: 3px;
}

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

.site-footer {
  background: var(--ink);
  color: var(--ink-text);
  padding: clamp(44px, 6vw, 68px) 0 34px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}
.site-footer h2 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--ink-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer img.footer-logo { width: 220px; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid var(--ink-line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ layout */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: 18px; }

.aside {
  border-radius: var(--radius);
  padding: 24px;
  background: var(--band);
  font-size: 15.5px;
}
.aside h3 { font-size: 17px; margin-bottom: 10px; }

/* --------------------------------------------------------------- utilities */

[hidden] { display: none !important; }

.center { text-align: center; }
.mt-0 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .btn, .estimator { display: none; }
  body { font-size: 12pt; color: #000; }
}

/* --------------------------------------------------------- booking layout */

/* `.two-col` sets align-items:start, which makes every column exactly as tall
   as its own content — and a sticky child inside a content-height column has
   nowhere to travel, so it never sticks. Stretching this one column to the
   row height is what gives the price block its run. */
.book-ledger { align-self: stretch; }
.book-ledger .estimator {
  position: sticky;
  top: 94px;                 /* 74px header + 20px clearance */
  max-height: calc(100vh - 114px);
  overflow-y: auto;          /* a long ledger scrolls inside itself, not away */
}

.summary-box {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 20px 0;
  /* Literal text the person is going to copy into an email, so it is set as
     copyable text rather than styled prose. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .book-ledger { position: static; margin: 20px 0 28px; }
  .book-ledger .estimator {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .book-ledger .ledger-total { font-size: 34px; }
}



/* ------------------------------------------------------------------- icons */

/* Every icon inherits the colour and flow of the text beside it. Definitions
   live in web/partials/icons.html and are injected by tools/sync.mjs. */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon-lg { width: 32px; height: 32px; stroke-width: 1.4; }
.icon-sm { width: 18px; height: 18px; stroke-width: 1.7; }

/* -------------------------------------------------------------- price list */

/* Extras and inclusions: a ruled two-up list rather than a wall of cards.
   Every row is icon, name, and — where there is one — a price. */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--ink);
}
.price-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.price-list .name { flex: 1; font-size: 15.5px; }
.price-list .amount {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-list .note { font-size: 13.5px; color: var(--ink-2); }

/* A plain ruled list with icons, no prices — used for what a visit includes
   and for the jobs we decline. */
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.icon-list .icon { margin-top: 1px; }
.icon-list b { display: block; font-weight: 700; }
.icon-list span { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* ------------------------------------------------------------ photographs */

/* A photo frame that holds its shape before the image loads, and that renders
   an honest placeholder while there is no photograph yet. Set the ratio per
   slot: style="--ar:4/3". Competitors use 2:1 and 4:3 for heroes and 4:5 for
   the portraits beside copy. */
.photo {
  position: relative;
  aspect-ratio: var(--ar, 3 / 2);
  background: var(--photo-bg);
  border-radius: var(--radius);
  overflow: hidden;
}
.photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The placeholder state: the mark at low opacity, plus a brief saying what to
   shoot. Swap in a real <img> and delete the .photo-brief. */
.photo-empty { display: grid; place-items: center; }
.photo-empty > img {
  width: 38%;
  max-width: 190px;
  height: auto;
  object-fit: contain;
  opacity: 0.22;
}
.photo-brief {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.photo-caption { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; }

.photo-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.photo-band h3 { font-size: 18px; margin: 16px 0 6px; }
.photo-band p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------------- quote card */

/* The first thing on the homepage: pick a service, see the price, see exactly
   what is in it, see why us. Tabs, price and inclusions all come from config. */
.quote {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.quote-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.quote-tabs::-webkit-scrollbar { display: none; }
.quote-tabs button {
  flex: 1 0 auto;
  min-width: 124px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--body);
  font-size: 15px;
  padding: 16px 14px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.quote-tabs button:hover { color: var(--ink); }
.quote-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--magenta);
}

.quote-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
@media (max-width: 900px) { .quote-body { grid-template-columns: 1fr; } }
.quote-rooms { padding: 26px clamp(20px, 2.4vw, 30px); }
.quote-price {
  padding: 26px clamp(20px, 2.4vw, 30px);
  background: var(--band);
  border-left: 1px solid var(--line);
}
@media (max-width: 900px) {
  .quote-price { border-left: 0; border-top: 1px solid var(--line); }
}

.quote-from { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.quote-lede { font-size: 15px; color: var(--ink-2); margin: 0 0 20px; }

/* what is in it */
.incl-head {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.incl li { display: flex; gap: 12px; align-items: flex-start; }
.incl .icon { color: var(--ink-2); margin-top: 1px; }
.incl b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.incl span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* why us — the tick is the one place a small graphic carries the brand colour */
.wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wins li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.wins .icon { color: var(--magenta); margin-top: 2px; }
.wins b { font-weight: 700; }
.wins-ruled { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 22px; }

/* Four tabs will not fit across a phone. Scrolling them hides two of the four
   services, so on a narrow screen they become a two-by-two grid instead. */
@media (max-width: 560px) {
  .quote-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }
  .quote-tabs button { min-width: 0; padding: 14px 8px; font-size: 14px; }
  .quote-tabs button:nth-child(-n+2) { box-shadow: inset 0 -1px 0 var(--line); }
}

/* The ongoing plan price, under the first-visit headline. Deliberately set
   smaller than the big number but larger than fine print: it is the figure the
   customer will actually live with. */
.quote-then {
  margin: 2px 0 14px;
  font-size: 16px;
  color: var(--ink-2);
}
.quote-then b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Add-on cards keep scope visible and controls comfortable on touch screens. */
.extras:has(.addon-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.addon-card{min-width:0;border:1px solid var(--control-line);border-radius:16px;padding:18px;background:var(--card);}
.addon-choice{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0;}
.addon-choice input{width:22px;height:22px;flex:none;accent-color:var(--magenta-deep);margin-top:2px;}
.addon-choice .extra-name{font-weight:600;line-height:1.4;}
.addon-choice .extra-price{white-space:nowrap;flex:none;color:var(--magenta-deep);font-size:14px;}
.addon-description{font-size:14px;line-height:1.6;margin:12px 0;color:var(--ink-2);}
.addon-level{font-size:12px;display:block;margin-top:12px;}
.addon-level select{display:block;width:100%;min-height:44px;margin-top:5px;}
.addon-status{display:block;font-size:12px;line-height:1.5;color:var(--ink-2);margin-top:12px;}
.addon-card.is-checked{border-color:var(--magenta-deep);background:var(--band);}
.addon-card.is-included{background:#f1f7f3;border-color:#cfdfd4;}
.addon-card .qty{margin-top:8px;justify-content:space-between;width:100%;}
.addon-card .qty button{width:44px;height:44px;}
@media(max-width:600px){.extras:has(.addon-card){grid-template-columns:1fr;}.addon-card{padding:16px;}.addon-choice .extra-name{font-size:15px;}.addon-choice .extra-price{font-size:13px;}}

/* Compact, explicitly chosen add-on scope. */
.addon-details{margin:4px 0 0}.addon-details summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:13px;color:#82405e;font-weight:600;list-style:none}.addon-details summary::after{content:"+";font-size:20px}.addon-details[open] summary::after{content:"−"}.addon-details summary::-webkit-details-marker{display:none}.addon-details summary:focus-visible{outline:2px solid #ad3267;outline-offset:3px;border-radius:4px}.addon-details .addon-level{margin-top:10px}.savings-note{border-color:#cce2d8;background:#edf7f0;color:#255941;font-size:14px;line-height:1.6}.addon-status:empty{display:none}

.quote-save-card{border:1px solid #e5d8df;border-radius:16px;padding:22px;margin:18px 0;background:#fff}.quote-save-card>strong{display:block;font-size:22px;color:#8b315d;margin:8px 0;overflow-wrap:anywhere}.quote-save-card [data-draft-status]{font-size:14px;line-height:1.6}.quote-save-card .btn{font-size:13px;min-height:44px}.quote-save-card .field-hint{font-size:13px}@media(max-width:600px){.quote-save-card{padding:18px}}

.savings-note{position:relative;overflow:hidden;background:linear-gradient(115deg,#fff9df,#fff0f7 55%,#fff8de);border:1px solid #ebd497;color:#644823;border-radius:14px;padding:18px;box-shadow:0 4px 20px #b28b2620}.savings-note>strong,.savings-note>span{display:block}.savings-note>strong{font-size:16px;margin-bottom:8px}.saving-prices{font-size:20px;margin-bottom:8px}.saving-prices s{color:#947971}.saving-prices b{color:#ad3267}.addon-saving{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:600;color:#925b20;padding:7px 10px;background:linear-gradient(110deg,#fff7d8,#ffeef6);border:1px solid #f0ddac;border-radius:8px;margin-top:8px}.addon-saving s{color:#8e817d}.addon-saving[hidden],.addon-details[hidden],.savings-note[hidden]{display:none}.addon-details .addon-description{margin-bottom:4px}.addon-details .addon-level{margin-top:14px}.addon-card .addon-status{font-size:12px}.addon-choice{min-height:48px}

/* One compact task per row; selected details expand beneath it. */
#extras{display:grid;grid-template-columns:1fr;gap:12px}#extras .addon-card{position:relative;border:1px solid #d9cbd1;border-radius:12px;padding:12px 16px;background:#fff;box-shadow:none;min-height:0}#extras .addon-choice{display:flex;align-items:center;gap:12px;min-height:42px;margin:0;padding:0}#extras .extra-name{flex:1;font-size:15px;font-weight:600}#extras .extra-price{font-size:14px;white-space:nowrap}#extras .addon-card.is-checked{border-color:#b13b70;background:#fffafd}#extras .addon-card.is-included{background:#f5faf6;border-color:#d2e3d5}#extras .addon-details{border-top:1px solid #eee1e7;margin-top:10px;padding-top:12px}#extras .addon-description{font-size:14px;line-height:1.6;margin:10px 0}#extras .addon-status{display:block;margin-top:8px}#extras .addon-status:empty{display:none}#extras .addon-saving,.option-discount{position:absolute;top:-8px;right:10px;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.1px;padding:4px 7px;border:1px solid #e2c786;border-radius:20px;background:linear-gradient(110deg,#fff3c2,#ffeaf1);color:#805116;box-shadow:0 2px 6px #96602012;white-space:nowrap;margin:0}#extras .addon-saving[hidden],.option-discount[hidden]{display:none}.opts label{position:relative}.opts label:has(.option-discount:not([hidden])){padding-top:15px}.opts label .option-discount{right:8px;top:-7px}.opts input:checked+label .option-discount{border-color:#e3bd68;background:linear-gradient(110deg,#fff0af,#ffe5ed);color:#6d4310}[data-restored-progress] .btn{display:block;margin-top:12px}@media(max-width:600px){#extras .addon-card{padding:12px}#extras .extra-name{font-size:14px}#extras .extra-price{font-size:13px}.option-discount{font-size:9px}}

.quick-extras,.other-extras{display:grid;gap:12px}.more-extras summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14px;color:#725768;padding:10px 0;list-style:none}.more-extras summary::after{content:"+";font-size:20px}.more-extras[open] summary::after{content:"−"}.more-extras summary::-webkit-details-marker{display:none}.more-extras summary:focus-visible{outline:2px solid #ae366d;outline-offset:4px}.more-extras .other-extras{padding-top:8px}

/* Compact add-on rows: details appear only for the selected task. */
#extras{gap:9px}
#extras .addon-card{padding:5px 12px;border-radius:10px}
#extras .addon-choice{min-height:44px;gap:10px}
#extras .addon-choice input{width:18px;height:18px;margin:0}
#extras .addon-icon{width:21px;height:21px;flex:none;color:var(--ink-2)}
#extras .extra-name{font-size:14px;font-weight:500;line-height:1.3}
#extras .extra-price{font-size:13px}
#extras .addon-details{margin:2px 0 5px;padding-top:8px}
#extras .addon-description{font-size:12.5px;line-height:1.5;margin:7px 0}
#extras .addon-level{margin-top:0;font-size:12px}
#extras .addon-level select{min-height:40px;margin-top:4px;padding:8px 10px;font-size:13px}
#extras .qty{margin:4px 0 6px}
@media(max-width:600px){#extras .addon-card{padding:5px 10px}#extras .addon-choice{gap:8px}#extras .extra-name{font-size:13px}#extras .extra-price{font-size:12px}#extras .addon-icon{width:19px;height:19px}}