/* Hollis Family Cleaning (concept by Quvlo).
   Lemon and eucalyptus on bright white. Parkinsans (round, friendly, a little quirky, like a label on a
   refill bottle) for display and numbers, Figtree for text. The motif is the visit checklist: tick boxes,
   not numbers or eyebrows. The look is a freshly cleaned room: lots of white, one lemon highlight, soft
   green ink. */

/* Parkinsans: Google Fonts (fonts.gstatic.com, latin subset, OFL 1.1, see fonts/LICENSE-parkinsans.txt).
   Figtree: Fontsource build of the Google Fonts release (OFL 1.1, see fonts/LICENSE-figtree.txt). */
@font-face { font-family: "Parkinsans"; src: url(fonts/parkinsans-latin.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree.woff2) format("woff2-variations"); font-weight: 300 900; font-display: swap; }

:root {
  --white: #fbfcf7;
  --paper: #f3f6ee;
  --mist: #e6ede3;
  --lemon: #f6e04b;
  --lemon-2: #fff6b8;
  --euc: #5d8a76;          /* decoration only: rings, outlines, the done state */
  --euc-ink: #3f6b59;      /* eucalyptus for text: 5.9:1 on white */
  --euc-deep: #24453a;
  --ink: #1c2b25;
  --ink-soft: #4d5e56;
  --line: #d6e0d6;
  --display: "Parkinsans", "Figtree", system-ui, sans-serif;
  --sans: "Figtree", system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 56px);
  --gut-l: max(var(--gut), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--gut), env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--euc-ink); outline-offset: 3px; }

/* A small tick box before a short label: the visit checklist, used as the page's section marker */
.kick { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 600 15px/1.2 var(--sans); color: var(--euc-ink); }
.kick::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--lemon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231c2b25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.h2 { margin: 0; max-width: 18ch; font: 700 clamp(34px, 4.6vw, 66px)/1.02 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.lede { margin: 18px 0 0; max-width: 44ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-soft); }
.fine { margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut-r) 0 var(--gut-l); }
.wrap--narrow { max-width: 820px; }

/* Buttons: lemon pill with a soft press */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--lemon); color: var(--ink); font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -12px rgba(138,114,0,.6); transition: transform .2s var(--ease), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 16px 30px -14px rgba(138,114,0,.7); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--full { width: 100%; }
.btn--ink { background: var(--euc-deep); color: #fff; box-shadow: 0 10px 24px -14px rgba(36,69,58,.8); }
.btn--ghost { background: rgba(251,252,247,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.link { min-height: 44px; background: none; border: 0; padding: 8px 4px; color: var(--euc-deep); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-weight: 600; }

/* Bar */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 12px var(--gut-r) 12px var(--gut-l); background: rgba(251,252,247,.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar.is-scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 700 23px/1 var(--display); letter-spacing: -.02em; text-decoration: none; }
.brand__x { white-space: pre; }
/* phones: the full name stacks, Hollis over a small tracked FAMILY CLEANING */
@media (max-width: 480px) { .brand__x { display: block; white-space: nowrap; margin-top: 3px; font: 700 8.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; } }
.brand__dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbd6, var(--lemon) 55%, #e2c400); box-shadow: 0 0 0 3px var(--lemon-2); }
.tag { white-space: nowrap; font: 600 12px/1 var(--sans); padding: 6px 9px; border-radius: 999px; background: var(--mist); color: var(--euc-deep); }
.bar__nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.bar__nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; }

/* Hero: copy on the left, the kitchen you wipe on the right */
.hero { display: grid; grid-template-columns: minmax(320px, .72fr) 1.85fr; gap: clamp(20px, 3vw, 48px); align-items: center; min-height: 100vh; min-height: 100svh; padding: 92px var(--gut-r) 40px var(--gut-l); }
.hero__h { margin: 0; font: 700 clamp(50px, 6.6vw, 108px)/.96 var(--display); letter-spacing: -.035em; }
.hero__line { display: inline-block; transition: opacity .35s, transform .5s var(--ease); }
.hero__line.is-swap { opacity: 0; transform: translateY(14px); }
.hero__p { margin: 22px 0 0; max-width: 32ch; font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-soft); }
.hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.wipe { position: relative; aspect-ratio: 3 / 2; max-height: calc(100svh - 130px); justify-self: end; width: 100%; border-radius: 28px; overflow: hidden; background: var(--mist); box-shadow: 0 40px 80px -40px rgba(36,69,58,.45), 0 0 0 1px rgba(36,69,58,.06); isolation: isolate; }
.wipe__clean, .wipe__mess { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .wipe__clean { object-position: 25% 50%; } }
.wipe__mess { cursor: none; touch-action: pan-y; }
.wipe.is-done .wipe__mess { pointer-events: none; }
.wipe__cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.08), inset 0 0 24px rgba(255,255,255,.5); pointer-events: none; opacity: 0; transition: opacity .2s; }
.wipe.is-hover .wipe__cursor { opacity: 1; }
.meter { position: absolute; z-index: 4; right: 18px; top: 18px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: rgba(251,252,247,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.25); pointer-events: none; }
.meter__ring { position: absolute; inset: 6px; transform: rotate(-90deg); }
.meter__track { fill: none; stroke: var(--mist); stroke-width: 5; }
.meter__fill { fill: none; stroke: var(--lemon); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s linear, stroke .3s; }
.wipe.is-done .meter__fill { stroke: var(--euc); }
.meter__n { position: relative; font: 700 21px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.meter__n small { font-size: .6em; margin-left: 1px; }
.meter__k { position: relative; font: 600 11px/1 var(--sans); color: var(--ink-soft); margin-top: 3px; }
.wipe__hint { position: absolute; z-index: 4; left: 18px; top: 18px; margin: 0; padding: 9px 14px; border-radius: 999px; background: rgba(28,43,37,.78); color: #fff; font: 600 14px/1 var(--sans); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .4s; pointer-events: none; }
.wipe__hint .hint--touch { display: none; }
@media (hover: none) { .wipe__hint .hint--fine { display: none; } .wipe__hint .hint--touch { display: inline; } }
.wipe.is-started .wipe__hint { opacity: 0; }
.wipe__auto { position: absolute; z-index: 4; left: 18px; bottom: 18px; min-height: 44px; font-size: 14px; }
.wipe.is-done .wipe__auto { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.sparkle { position: absolute; z-index: 5; width: 26px; height: 26px; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, transparent 19%), conic-gradient(from 0deg, transparent 0 10%, #fff 12% 13%, transparent 15% 35%, #fff 37% 38%, transparent 40% 60%, #fff 62% 63%, transparent 65% 85%, #fff 87% 88%, transparent 90%); filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); animation: spark 1.1s var(--ease) forwards; }
@keyframes spark { 0% { transform: scale(0) rotate(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.3) rotate(90deg); opacity: 0; } }

/* Film: the frame grows from a card into the whole screen as you scroll in */
.film { position: relative; height: 760vh; background: var(--white); }
.film__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; }
.film__frame { position: absolute; inset: 0; clip-path: inset(var(--inset, 9%) var(--inset-x, 6%) round var(--r, 28px)); background: var(--mist); }
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,20,16,.5) 0%, rgba(10,20,16,.12) 42%, rgba(10,20,16,0) 60%), linear-gradient(0deg, rgba(10,20,16,.42), rgba(10,20,16,0) 34%); }

.caps { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.cap { position: absolute; left: calc(var(--gut-l) + 3vw); bottom: 14vh; max-width: min(600px, 46vw); color: #fff; opacity: 0; transform: translateY(20px); transition: opacity .15s var(--ease), transform .7s var(--ease); }
.cap.is-on { transition: opacity .5s var(--ease), transform .7s var(--ease); }
.cap.is-on { opacity: 1; transform: none; }
/* each caption sits where its shot is empty: the counters and bedroom shots put it up top, clear of the hand
   and the cleaner (data-place for every screen, data-place-s for phones in portrait only) */
.cap[data-place~="top"] { bottom: auto; top: calc(186px + env(safe-area-inset-top, 0px)); }
.cap[data-place~="right"] { left: auto; right: calc(var(--gut-r) + 3vw); text-align: right; }
.cap[data-place~="right"] .cap__p { margin-left: auto; }
/* the bathroom caption stays on the tile wall, right of the squeegee lane (wide screens only) */
@media (min-width: 901px) { .cap[data-shot="3"] { max-width: min(470px, 33vw); } }
/* a soft shade behind the words so they read on bright rooms and walls (AA against the footage) */
.cap::before { content: ""; position: absolute; z-index: -1; inset: -14px -22px; border-radius: 40px; background: rgba(10,20,16,.56); filter: blur(22px); pointer-events: none; }
/* the time and room, as a small dark tag (like the time stamp on the photos the cleaners send) */
.cap__k { display: inline-block; margin: 0 0 12px; padding: 6px 10px; border-radius: 8px; background: rgba(16,28,23,.82); font: 700 15px/1 var(--sans); color: var(--lemon-2); font-variant-numeric: tabular-nums; }
.cap__h { margin: 0; font: 700 clamp(36px, 4.6vw, 72px)/1.02 var(--display); letter-spacing: -.03em; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
/* the lemon highlight is wiped across the words, left to right, like a cloth */
.cap__h mark { color: var(--ink); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--lemon), var(--lemon)) left 62% / 0% 76% no-repeat; border-radius: .12em .3em .18em .25em; text-shadow: none; transition: background-size .7s .2s var(--ease), color .25s .3s; }
.cap:not(.is-on) .cap__h mark { color: #fff; }
.cap.is-on .cap__h mark { background-size: 100% 76%; }
.cap__p { margin: 14px 0 0; max-width: 36ch; font-size: clamp(16px, 1.3vw, 19px); color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }

/* Checklist that ticks itself off as the visit happens: a slim card in the top corner, six boxes and the
   line being done now, so it never sits over the cleaner or the room (a tall card on the right covered
   the cleaner on iPad and desktop). */
.list { position: absolute; z-index: 4; left: var(--gut-l); top: calc(80px + env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 16px; min-width: 270px; max-width: calc(100% - 2 * var(--gut)); padding: 11px 14px 38px 12px; border-radius: 16px; background: rgba(251,252,247,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); opacity: 0; transition: opacity .5s; }
.list.is-on { opacity: 1; }
.list { transition: opacity .5s, transform .5s var(--ease); }
/* phones: the card steps up and out for the bathroom shot, where the squeegee works the top of the glass */
.list.is-on.is-tuck { opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.list__k { display: none; }
.list__items { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.list__t { display: none; }
.list__items li.is-current .list__t { display: block; position: absolute; left: 12px; right: 12px; bottom: 11px; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick { flex: none; display: block; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #7f9085; position: relative; transition: background-color .3s, border-color .3s; }
.tick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ease); }
.is-current .tick { border-color: var(--euc-deep); }
.is-done .tick { background: var(--lemon); border-color: #c9ad10; }
.is-done .tick::after { transform: rotate(45deg) scale(1); }
.list__time { margin: 0; font: 700 19px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; }
.list__time span:last-child { font: 600 12px/1 var(--sans); color: var(--ink-soft); }
.film__bar { position: absolute; z-index: 4; left: 50%; bottom: 3.5vh; width: min(320px, 50vw); height: 4px; transform: translateX(-50%); border-radius: 4px; background: rgba(255,255,255,.35); overflow: hidden; }
.film__bar span { display: block; height: 100%; width: 100%; background: var(--lemon); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Estimator */
.price { padding: clamp(90px, 13vh, 150px) 0; background: var(--paper); }
.price__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.est { margin-top: 34px; display: grid; gap: 26px; }
.step { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px 14px 22px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.step__k { font-weight: 700; font-size: 18px; }
.step__ctl { display: flex; align-items: center; gap: 12px; }
.step__b { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #7f9085; background: var(--white); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .2s, transform .15s; }
.step__b:hover { background: var(--lemon-2); }
.step__b:active { transform: scale(.92); }
.step__b:disabled { opacity: .45; cursor: default; }
.step__n { min-width: 3.4ch; text-align: center; font: 700 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.step__n.is-word { font-size: 20px; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; margin-bottom: 10px; font: 700 15px/1 var(--sans); color: var(--ink); }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--white); border: 1px solid #7f9085; font-weight: 600; transition: background-color .2s, border-color .2s; }
.chips small { font-weight: 700; color: var(--euc-ink); }
.chips input:checked + span { background: var(--euc-deep); border-color: var(--euc-deep); color: #fff; }
.chips input:checked + span small { color: var(--lemon); }
.chips input:disabled { cursor: default; }
.chips input:focus-visible + span { outline: 3px solid var(--euc-ink); outline-offset: 3px; }
.total { position: sticky; top: 96px; padding: 28px; border-radius: 28px; background: var(--lemon); box-shadow: 0 40px 80px -40px rgba(138,114,0,.6); }
.total__clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 2.6em; font: 600 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.total__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(28,43,37,.35); }
.total__dot.is-run { background: #b42318; animation: blink 1s steps(2) infinite; }
.total__dot.is-done { background: var(--euc-deep); }
@keyframes blink { 50% { opacity: .2; } }
#clock { font: 700 16px/1 var(--display); }
.total__clockk { font-weight: 500; color: var(--ink); }
.total__k { margin: 18px 0 0; font: 700 15px/1 var(--sans); }
.total__n { margin: 8px 0 0; font: 800 clamp(68px, 7.4vw, 108px)/.9 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.total__u { margin: 8px 0 22px; font-weight: 500; }
.total .fine { color: var(--ink); }

/* Checklist tabs */
.check { padding: clamp(90px, 13vh, 150px) 0; }
.tabs { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.tabs [role="tab"] { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid #7f9085; background: var(--white); color: var(--ink); font-weight: 700; cursor: pointer; }
.tabs [aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.panels { margin-top: 24px; }
.panel[hidden] { display: none; }
.panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ticks li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; }
.ticks li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--lemon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231c2b25' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transform: scale(.4); opacity: 0; transition: transform .4s var(--ease), opacity .3s; transition-delay: calc(var(--i, 0) * 90ms); }
.panel.is-seen .ticks li::before { transform: none; opacity: 1; }

/* Promises: one ticked card, like the slip the cleaners leave on the counter */
.promise { padding: clamp(80px, 12vh, 140px) 0; background: var(--euc-deep); color: #fff; }
.promise .kick { color: var(--lemon-2); }
.promise__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.promise__list { list-style: none; margin: 0; padding: 10px 28px; border-radius: 26px; background: var(--white); color: var(--ink); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
.promise__list li { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; padding: 20px 0; border-bottom: 1px dashed #7f9085; }
.promise__list li:last-child { border-bottom: 0; }
.promise__list li::before { content: ""; grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; border-radius: 9px; background: var(--lemon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231c2b25' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.promise__list h3 { margin: 0 0 4px; font: 700 22px/1.2 var(--display); letter-spacing: -.01em; }
.promise__list p { margin: 0; color: var(--ink-soft); }

/* FAQ */
.faq { padding: clamp(80px, 12vh, 140px) 0; }
.faq .h2 { margin-bottom: 26px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 20px 0; font: 600 21px/1.3 var(--display); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lemon-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231c2b25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; max-width: 60ch; color: var(--ink-soft); }

/* Booking */
.book { padding: clamp(80px, 12vh, 140px) 0; background: var(--paper); }
.book__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.book__card { padding: 24px; border-radius: 28px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(36,69,58,.5); }
.book__days, .book__times { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { min-height: 48px; min-width: 56px; padding: 8px 14px; border-radius: 16px; border: 1px solid #7f9085; background: var(--white); color: var(--ink); font: 600 15px/1.15 var(--sans); cursor: pointer; text-align: center; }
.chip small { display: block; font: 600 12px/1 var(--sans); color: var(--ink-soft); margin-bottom: 4px; }
.chip[aria-checked="true"] { background: var(--euc-deep); border-color: var(--euc-deep); color: #fff; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--euc-deep); }
.chip[aria-checked="true"] small { color: var(--lemon-2); }
.book__note { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 2.6em; }

/* Footer */
.foot { padding: 48px 0 calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: #fff; }
.foot__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; }
.foot__brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 26px/1 var(--display); letter-spacing: -.02em; }
.foot__small { font-size: 14px; color: rgba(255,255,255,.78); }
.foot__small p { margin: 0 0 8px; }
/* 44 px tap targets: the link in the sentence grows its hit area, the last link is a full-height row */
.foot__small a { padding: 14px 4px; margin: 0 -4px; }
.foot__small p:last-child a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

@media (max-width: 900px) {
  .bar__nav a.hide-s { display: none; }
  .bar { padding: 8px var(--gut-r) 8px var(--gut-l); gap: 10px; }
  .brand { font-size: 20px; }
  .bar .btn--sm { padding: 0 14px; white-space: nowrap; }
  .bar .btn--sm .long { display: none; }
  .tag { font-size: 11px; padding: 5px 7px; }
  /* 28 px each side, so a wipe can't start inside Safari's back-swipe edge */
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 76px max(28px, var(--gut-r)) 28px max(28px, var(--gut-l)); gap: 18px; }
  .hero__copy { order: 2; }
  .wipe { order: 1; aspect-ratio: 4 / 5; border-radius: 22px; max-height: 66svh; }
  .hero__h { font-size: clamp(44px, 12vw, 64px); }
  .hero__p { margin-top: 14px; }
  .meter { width: 80px; height: 80px; right: 12px; top: 12px; }
  .meter__n { font-size: 19px; }
  .meter__k { font-size: 10px; }
  .wipe__hint { left: 12px; top: 12px; }
  .wipe__auto { left: 12px; bottom: 12px; }
  .film { height: 700vh; }
  .film__frame::after { background: linear-gradient(0deg, rgba(10,20,16,.72) 0%, rgba(10,20,16,.25) 42%, rgba(10,20,16,0) 60%); }
  .cap, .cap[data-place~="right"] { left: var(--gut-l); right: var(--gut-r); bottom: 10vh; max-width: none; text-align: left; }
  .cap[data-place] { top: auto; bottom: 10vh; }
  .cap[data-place~="right"] .cap__p { margin-left: 0; }
  .cap__h { font-size: clamp(32px, 9.4vw, 46px); }
  .cap__p { font-size: 16px; }
  .price__grid, .panel, .book__grid, .foot__grid, .promise__grid { grid-template-columns: 1fr; }
  .total { position: static; }
  .step { padding-left: 16px; }
  .promise__list { padding: 4px 20px; }
}
/* Phones in portrait: the cleaners fill the lower half of most shots, so those captions go up top */
@media (max-width: 600px) and (orientation: portrait) {
  .cap[data-place-s~="top"] { top: calc(174px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .cap[data-place-s~="top"]::before { background: rgba(10,20,16,.66); }
  .cap[data-place-s~="right"] { left: auto; max-width: 64%; text-align: right; }
  .cap[data-place-s~="right"] .cap__p { margin-left: auto; }
  /* the two cleaners fill the arrival shot top to bottom: only the time and headline, low over the path */
  .cap[data-place-s~="short"] .cap__p { display: none; }
  /* the bathroom shot: the checklist card is tucked, so its caption rises to just under the header, clear of the blade */
  .cap[data-shot="3"][data-place-s~="top"] { top: calc(74px + env(safe-area-inset-top, 0px)); }
  /* "Do it for me" sits up by the cabinets, off the mess on the floor */
  .wipe__auto { top: 56px; bottom: auto; }
}

/* Phones on their side: the wipe and the headline share the first screen */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { grid-template-columns: 1fr 1.25fr; align-items: center; min-height: 100svh; padding-top: 64px; padding-bottom: 14px; gap: 18px; }
  .hero__copy { order: 0; }
  .wipe { order: 0; aspect-ratio: 3 / 2; max-height: calc(100svh - 82px); }
  .hero__h { font-size: clamp(30px, 5.6vw, 42px); }
  .hero__p { font-size: 15px; line-height: 1.45; margin-top: 8px; }
  .hero__cta { margin-top: 10px; }
  .hero .kick { margin-bottom: 8px; }
  .meter { width: 68px; height: 68px; }
  .meter__n { font-size: 16px; }
  .list { top: calc(62px + env(safe-area-inset-top, 0px)); }
  /* the header, the card and a caption would cover most of a picture this short: captions sit low, with no
     paragraph, and the counters caption moves right, off the glove */
  .cap__p { display: none; }
  /* the counters shot keeps only its time tag: the glove sweeps the whole width */
  .cap[data-place-l~="tag"] .cap__h { display: none; }
  .cap[data-place~="top"], .cap[data-place~="right"] { top: auto; bottom: 9vh; left: auto; right: var(--gut-r); max-width: 46vw; text-align: right; }
  .cap[data-place-l~="tag"][data-place] { left: var(--gut-l); right: auto; text-align: left; }
  .cap[data-shot="3"] { max-width: 38vw; }
  .cap { bottom: 9vh; max-width: 62vw; }
  .cap__h { font-size: clamp(26px, 5vw, 34px); }
  .cap__k { margin-bottom: 6px; padding: 5px 8px; font-size: 13px; }
  .cap__p { margin-top: 6px; font-size: 14px; }
  .film__frame::after { background: linear-gradient(90deg, rgba(10,20,16,.6) 0%, rgba(10,20,16,.15) 50%, rgba(10,20,16,0) 70%), linear-gradient(0deg, rgba(10,20,16,.5), rgba(10,20,16,0) 40%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Short phones (SE): a top caption keeps only its time and headline, so it stays above the cleaners */
@media (max-width: 600px) and (max-height: 600px) and (orientation: portrait) {
  .cap[data-place-s] .cap__p { display: none; }
  .cap[data-shot="3"] .cap__h { font-size: 28px; }
}

/* Short phones (SE): a squarer kitchen so the whole headline fits on the first screen */
@media (max-width: 600px) and (max-height: 600px) and (orientation: portrait) {
  .wipe { aspect-ratio: 1 / 1; max-height: 50svh; }
  .hero { padding-top: 70px; gap: 14px; }
  .hero .kick { margin-bottom: 6px; }
  .hero__h { font-size: 42px; }
}