/* UltraShine website v5.10.96: carpet pickups booked online (v5.10.97: or dropped off at the carwash). Light and warm like a clean home
   (as the owner asked), in UltraShine's own brand: the logo, the Lora serif for what is read first, piano black, champagne lines and ice
   blue for what is clean. One moving moment: the sitting room's carpet washed clean in a single pass as the page opens. */
@font-face { font-family: 'US Lora'; src: url('/fonts/lora.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --serif: 'US Lora', 'Lora', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --metal: linear-gradient(180deg, #FFFFFF 0%, #ECECEE 52%, #C4C4CA 100%);
  --paper: #FAF8F5; --card: #FFFFFF; --band: #F2EEE8; --sheet: #FFFFFF; --well: #FFFFFF;
  --ink: #000000; --ink-2: #3A3835; --ink-3: #6E6962;
  --hair: #E7E2DA; --hair-strong: #D3CCC1; --champ: #A99C88;
  --ice: #4FA8FF; --ice-ink: #1660B8; --ring: rgba(79, 168, 255, .35); --focus: #1E78D9;
  --free-bg: #EDF5FF; --free-ink: #0F4E96; --fee-bg: #F3EFE8; --fee-ink: #3A3835;
  --danger: #B3261E; --danger-bg: #FCEEEC; --danger-ink: #8C1D16;
  --sel-bg: #000000; --sel-ink: #FFFFFF; --sel-sub: rgba(255, 255, 255, .72);
  --mini-fill: #F3EDE3; --mini-line: #A39886; --mini-mark: #4FA8FF;
  --dock-bg: rgba(255, 255, 255, .9); --dock-line: rgba(0, 0, 0, .1);
  --lift: 0 24px 48px -30px rgba(60, 44, 24, .35);
  --gut: max(20px, env(safe-area-inset-left));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #000000; --card: #121214; --band: #0A0A0B; --sheet: #0E0E10; --well: #000000;
    --ink: #FFFFFF; --ink-2: #D6D2CC; --ink-3: #A39E97;
    --hair: rgba(255, 255, 255, .12); --hair-strong: rgba(255, 255, 255, .24); --champ: rgba(212, 205, 195, .55);
    --ice-ink: #8CC8FF; --ring: rgba(79, 168, 255, .4); --focus: #8CC8FF;
    --free-bg: rgba(79, 168, 255, .14); --free-ink: #B5DBFF; --fee-bg: rgba(212, 205, 195, .12); --fee-ink: #E6E1D9;
    --danger: #FF8A80; --danger-bg: rgba(255, 138, 128, .12); --danger-ink: #FFB4AB;
    --sel-bg: var(--metal); --sel-ink: #000000; --sel-sub: rgba(0, 0, 0, .62);
    --mini-fill: #1C1B19; --mini-line: #B9B2A8; --mini-mark: #4FA8FF;
    --dock-bg: rgba(18, 18, 20, .88); --dock-line: rgba(255, 255, 255, .14);
    --lift: 0 24px 48px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-sheet { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; color: var(--ink); }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 16px; border-radius: 12px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: var(--lift); }
.skip:focus { top: 12px; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent;
  border-radius: 14px; font: 600 16px/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .ic { width: 20px; height: 20px; flex: none; }
.btn-ink { color: #FFFFFF; background: #000000; border-color: #000000; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .7); }
.btn-ink:hover { background: #1C1C1E; }
.btn-line { color: var(--ink); background: transparent; border-color: var(--hair-strong); }
.btn-line:hover { border-color: var(--ink-3); }
.btn-quiet { color: var(--ink); background: transparent; border-color: var(--hair-strong); }
.btn-quiet:hover { border-color: var(--ink-3); }
.btn-sm { min-height: 42px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
@media (prefers-color-scheme: dark) {
  .btn-ink { color: #000000; background: var(--metal); border-color: #FFFFFF; box-shadow: 0 14px 28px -16px rgba(255, 255, 255, .45); }
  .btn-ink:hover { background: var(--metal); }
}

/* ---------------------------------------------------------------- the top */
.top-in { display: flex; align-items: center; gap: 28px; height: 68px; padding-top: env(safe-area-inset-top); }
.brand { display: block; border-radius: 6px; }
.brand img { width: 168px; height: auto; }
.nav { display: none; }
.top-call { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--hair-strong); border-radius: 50%; color: var(--ink); }
.top-call .ic { width: 20px; height: 20px; }
.top-book { display: none; }

/* ---------------------------------------------------------------- the hero: the sitting room, its carpet washed as the page opens */
.hero-in { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 56px; }
.photo { position: relative; margin: 0 0 28px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: #E9E1D4; box-shadow: var(--lift); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.photo img, .photo-grime, .photo-dirty, .photo-wet { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo img { object-fit: cover; object-position: 50% 72%; }
.photo-grime { overflow: hidden; }
.photo-dirty img { filter: saturate(.62) sepia(.3) brightness(.84) contrast(.94); }
/* the carpet as it arrives: a dull brown film and the marks of feet and spills, on the floor only */
.photo-film { position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(120, 100, 76, 0) 0%, rgba(120, 100, 76, 0) 46%, rgba(118, 92, 62, .55) 58%, rgba(104, 80, 52, .62) 100%); }
.photo-stains { position: absolute; inset: 0; mix-blend-mode: multiply;
  background: radial-gradient(7% 4.5% at 24% 66%, rgba(70, 46, 22, .85), rgba(70, 46, 22, 0) 100%), radial-gradient(4% 3% at 29% 69%, rgba(60, 38, 18, .7), rgba(60, 38, 18, 0) 100%),
    radial-gradient(11% 6% at 62% 80%, rgba(70, 46, 22, .8), rgba(70, 46, 22, 0) 100%), radial-gradient(5% 3.5% at 70% 76%, rgba(60, 38, 18, .7), rgba(60, 38, 18, 0) 100%),
    radial-gradient(6% 4% at 44% 58%, rgba(70, 46, 22, .7), rgba(70, 46, 22, 0) 100%), radial-gradient(9% 5% at 13% 88%, rgba(70, 46, 22, .8), rgba(70, 46, 22, 0) 100%),
    radial-gradient(7% 4% at 86% 92%, rgba(70, 46, 22, .75), rgba(70, 46, 22, 0) 100%), radial-gradient(5% 3% at 52% 92%, rgba(60, 38, 18, .7), rgba(60, 38, 18, 0) 100%),
    radial-gradient(46% 16% at 44% 76%, rgba(84, 62, 38, .45), rgba(84, 62, 38, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 46%, #000 56%); mask-image: linear-gradient(180deg, transparent 46%, #000 56%); }
.photo-wet { pointer-events: none; }
.photo-wet i { position: absolute; top: 0; bottom: 0; left: -4%; width: 8%; opacity: 0; filter: blur(4px);
  background: linear-gradient(90deg, rgba(120, 190, 255, 0), rgba(120, 190, 255, .3) 38%, rgba(240, 249, 255, .9) 50%, rgba(120, 190, 255, .26) 62%, rgba(120, 190, 255, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .photo-grime, .photo-wet { animation: us-pass 2.8s cubic-bezier(.62, 0, .32, 1) .7s both; }
  .photo-dirty { animation: us-pass-back 2.8s cubic-bezier(.62, 0, .32, 1) .7s both; }
  .photo-wet i { animation: us-wet 2.8s linear .7s both; }
}
@media (prefers-reduced-motion: reduce) { .photo-grime, .photo-wet { display: none; } }
@keyframes us-pass { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes us-pass-back { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes us-wet { 0% { opacity: 0; } 5% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
.hero h1 { font: 520 clamp(36px, 9.6vw, 64px)/1.05 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.hero .lede { margin-top: 16px; max-width: 31em; color: var(--ink-2); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink-3); font-size: 14.5px; }
.hero-note .ic { flex: none; width: 18px; height: 18px; color: var(--ice); stroke-width: 2.2; }
.hero-paused { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--fee-bg); color: var(--fee-ink); font-size: 15px; }

/* ---------------------------------------------------------------- sections */
.sec { padding: 64px 0 68px; border-top: 1px solid var(--hair); }
.sec-in { display: grid; gap: 24px; }
.sec h2 { font: 520 clamp(30px, 7.6vw, 46px)/1.1 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.sec .lede { max-width: 34em; color: var(--ink-2); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.sec p { text-wrap: pretty; }
.anchor { display: block; position: relative; top: -24px; }

/* how it works: four steps, in order */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 30px 60px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--champ); border-radius: 50%; background: var(--paper); color: var(--ink); font: 500 19px/1 var(--serif); }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 42px; bottom: 2px; width: 1px; background: var(--hair); }
.steps h3 { font: 600 20px/1.3 var(--serif); }
.steps p { margin-top: 4px; max-width: 30em; }

/* prices: the rate, the sizes drawn to one scale, and a price worked out */
.prices { background: var(--band); border-top-color: transparent; }
.rate-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.rate-line b { color: var(--ink); font: 520 clamp(48px, 13vw, 76px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.rate-line span { color: var(--ink-3); font-size: 17px; }
.rate-line b:empty { display: inline-block; width: 4.2em; height: .86em; border-radius: 10px; background: var(--hair); }
.prices .lede { margin-top: 14px; }
.prices-off { margin-top: 10px; color: var(--ink-2); }
.sizes { list-style: none; margin: 26px 0 0; padding: 4px 20px 6px; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.size-g { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 20px 0 8px; border-bottom: 1px solid var(--hair); }
.size-g b { color: var(--ink); font: 600 18px/1.3 var(--serif); }
.size-g span { color: var(--ink-3); font-size: 15px; }
.size { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 66px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.size:last-child { border-bottom: 0; }
.mini { width: 100px; height: 66px; }
.mr-o { fill: var(--mini-fill); stroke: var(--mini-line); stroke-width: 1; }
.mr-i { fill: none; stroke: var(--mini-line); stroke-width: .7; opacity: .55; }
.mr-m { fill: var(--mini-mark); }
.mr-n { fill: none; stroke: var(--mini-line); stroke-width: .9; stroke-linecap: round; }
.size-d b { display: block; color: var(--ink); font: 600 17px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.size-p { color: var(--ink); font: 500 21px/1 var(--serif); font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; }
.size-p:empty::before { content: ''; display: inline-block; width: 70px; height: 16px; border-radius: 5px; background: var(--hair); vertical-align: middle; }
.calc { margin-top: 20px; padding: 24px 20px 20px; border-radius: 22px; background: var(--card); box-shadow: var(--lift); }
.calc h3 { font: 600 21px/1.3 var(--serif); }
.calc-unit { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.calc-unit legend { margin-bottom: 8px; padding: 0; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.calc-seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--hair-strong); border-radius: 14px; background: var(--paper); }
.calc-seg label { position: relative; display: block; }
.calc-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.calc-seg span { display: block; padding: 9px 14px; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
.calc-seg input:checked + span { background: var(--sel-bg); color: var(--sel-ink); }
.calc-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc-hint { margin-top: 12px; color: var(--ink-3); font-size: 14.5px; }
.calc-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; }
.calc-f { flex: 1; display: grid; gap: 6px; min-width: 0; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.calc-in { display: flex; align-items: center; height: 56px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 14px; background: var(--well); }
.calc-in:focus-within { border-color: var(--ice-ink); box-shadow: 0 0 0 3px var(--ring); }
.calc-in input { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 22px/1 var(--sans); font-variant-numeric: tabular-nums; }
.calc-in small { color: var(--ink-3); font-size: 15px; font-weight: 400; }
.calc-x { padding-bottom: 14px; color: var(--ink-3); font: 400 24px/1 var(--serif); }
.calc-qty { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.calc-qty > span { margin-right: auto; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.calc-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.calc-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc-sum span { color: var(--ink-3); font-size: 15px; font-weight: 600; }
.calc-sum b { color: var(--ink); font: 520 clamp(34px, 9vw, 44px)/1.05 var(--serif); letter-spacing: -.015em; font-variant-numeric: lining-nums; text-align: right; }
.calc-total.is-empty .calc-sum { display: none; }
.calc-total.is-empty .calc-out { margin-top: 0; }
.calc-out { margin-top: 6px; color: var(--ink-3); font-size: 14.5px; }
.calc-book { width: 100%; margin-top: 18px; }
/* v5.10.102: the list opens on one common size of each of three groups; every size, and the calculator, open on one tap */
.prices:not(.is-all) .sizes > li:not([data-common]), .prices:not(.is-all) .calc, .prices.is-off .all-sizes { display: none; }
.prices:not(.is-all) .size[data-common="last"] { border-bottom: 0; }
.all-sizes { width: 100%; margin-top: 16px; }
.all-sizes .ic { transition: transform .25s ease; }
.prices.is-all .all-sizes .ic { transform: rotate(180deg); }

/* where we collect: the free areas named in one sentence (v5.10.102) */
.area-names { color: var(--ink); font-weight: 500; }
.fee { max-width: 34em; margin-top: 18px; color: var(--ink-2); font-size: 17px; }
.fee b { color: var(--ink); }

/* good to know: the questions customers ask, each opened in place */
.faq-list { border-top: 1px solid var(--hair); }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--ink); font: 600 17px/1.35 var(--sans); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ''; flex: none; width: 14px; height: 14px; transition: transform .25s ease;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 34em; margin: -6px 0 20px; color: var(--ink-2); }
.faq-list details p b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* talk to us, and the foot: on the brand's piano black */
.contact { background: #000000; border-top: 0; color: #C9C9CE; }
.contact h2 { color: #FFFFFF; }
.ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.ways a { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #FFFFFF; text-decoration: none; }
.ways .ic { flex: none; width: 46px; height: 46px; padding: 11px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; stroke-width: 1.7; transition: border-color .2s ease; }
.ways a:hover .ic { border-color: rgba(255, 255, 255, .6); }
.ways b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ways small { display: block; color: #A8A8AE; font-size: 15px; }
.till { margin-top: 22px; color: #C9C9CE; }
.till b { color: #FFFFFF; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.foot { padding: 8px 0 calc(116px + env(safe-area-inset-bottom)); background: #000000; color: #8E8E95; }
.foot-in { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.foot img { width: 160px; height: auto; }
.foot p { margin-top: 16px; font-size: 14px; line-height: 1.7; }

/* the bar at the bottom of the phone, once the first buttons have scrolled away */
.dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 8px; padding: 8px;
  border-radius: 22px; background: var(--dock-bg); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5), 0 0 0 1px var(--dock-line);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  transform: translateY(calc(100% + 30px)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.dock.on { transform: none; }
.dock-book { flex: 1; }
.dock-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--hair-strong); border-radius: 14px; color: var(--ink); }
.dock-ic .ic { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- the booking sheet */
.sheet { width: 100%; max-width: 100%; height: min(92dvh, 720px); max-height: none; margin: auto 0 0; padding: 0; border: 0; border-radius: 26px 26px 0 0;
  background: var(--sheet); color: var(--ink-2); box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, .55); overscroll-behavior: contain; }
.sheet::backdrop { background: rgba(20, 16, 10, .55); }
.sheet:not([open]) { display: none; }
.sheet.is-plain { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }   /* a browser without dialogs */
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: us-sheet .42s cubic-bezier(.2, .8, .2, 1); }
  .sheet[open]::backdrop { animation: us-fade .3s ease; }
  .bk-step.is-in { animation: us-step .32s cubic-bezier(.2, .8, .2, 1); }
  .bk-step.is-back { animation: us-step-back .32s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes us-sheet { from { transform: translateY(48px); opacity: .4; } }
@keyframes us-fade { from { opacity: 0; } }
@keyframes us-step { from { transform: translateX(22px); opacity: 0; } }
@keyframes us-step-back { from { transform: translateX(-22px); opacity: 0; } }
.bk { display: flex; flex-direction: column; height: 100%; }
.bk-head { position: relative; flex: none; padding: 20px 20px 0; }
.bk-head h2 { padding-right: 52px; font: 520 21px/1.25 var(--serif); }
.bk-count { margin-top: 2px; color: var(--ink-3); font-size: 14px; }
.bk-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--band); color: var(--ink); }
.bk-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bk-bar { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: var(--hair); }
.bk-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ice); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.bk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 26px; }
.bk-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.bk-q { display: block; float: none; width: 100%; padding: 0; margin: 0; color: var(--ink); font: 520 27px/1.15 var(--serif); letter-spacing: -.01em; outline: none; }
.bk-hint { margin-top: 8px; color: var(--ink-3); font-size: 15px; }
.bk-label { margin: 22px 0 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.bk-step > .bk-hint + .chips { margin-top: 20px; }
.bk-err { margin-top: 10px; color: var(--danger); font-size: 14.5px; font-weight: 500; }
.bk-send { padding: 14px 16px; border-radius: 14px; background: var(--danger-bg); color: var(--danger-ink); font-weight: 400; }
.bk-send p + p { margin-top: 10px; }
.bk-send a { font-weight: 600; }
.bk-foot { display: flex; flex: none; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--sheet); }
.bk-foot [data-next] { flex: 1; }
.bk-foot .btn { min-height: 54px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* choices: nothing is chosen until the customer chooses */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 52px; padding: 0 18px; border: 1px solid var(--hair-strong);
  border-radius: 999px; background: var(--well); color: var(--ink); font: 600 16px/1.2 var(--sans); text-align: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.chip input:checked + span { border-color: transparent; background: var(--sel-bg); color: var(--sel-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { opacity: .36; }
.nums .chip span { width: 56px; padding: 0; font: 500 23px/1 var(--serif); }
.nums .chip-wide span { width: auto; padding: 0 20px; font: 600 16px/1.2 var(--sans); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip-slot span { flex-direction: column; gap: 3px; min-height: 66px; padding: 8px 6px; border-radius: 18px; }
.chip-slot b { font-size: 16px; font-weight: 600; }
.chip-slot small { color: var(--ink-3); font-size: 13.5px; font-weight: 400; }
.chip-slot input:checked + span small { color: var(--sel-sub); }
.areas-chips .chip span { min-height: 46px; padding: 0 16px; font-size: 15.5px; }
.chip-else span { border-style: dashed; }
/* v5.10.97: how the carpets get to us, a pickup or a drop-off: two cards, neither chosen until the customer chooses */
.hows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.chip-how span { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; min-height: 108px; padding: 14px 14px 13px;
  border-radius: 18px; text-align: left; }
.chip-how .ic { width: 22px; height: 22px; margin-bottom: 6px; color: var(--ink-3); }
.chip-how b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.chip-how small { color: var(--ink-3); font-size: 13.5px; font-weight: 400; line-height: 1.35; }
.chip-how input:checked + span small, .chip-how input:checked + span .ic { color: var(--sel-sub); }
.drop-box { margin-top: 16px; padding: 16px 16px 14px; border-radius: 18px; background: var(--band); color: var(--ink-2); font-size: 15.5px; }
.drop-box b { color: var(--ink); font-weight: 600; }
.drop-box p + p { margin-top: 6px; }
.drop-box .btn { margin-top: 12px; }
.drop-box .btn .ic, .done-map .ic { width: 18px; height: 18px; }
.drop-box .drop-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); color: var(--ink-3); font-size: 14.5px; }
.done-map { margin-top: 14px; }
.bk-fee { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--free-bg); color: var(--free-ink); font-size: 15px; }
.bk-fee.is-fee { background: var(--fee-bg); color: var(--fee-ink); }
.days { display: flex; gap: 10px; margin: 0 -20px; padding: 2px 20px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; scroll-snap-align: start; scroll-margin-left: 20px; }
.day span { display: grid; justify-items: center; gap: 2px; min-width: 66px; padding: 10px 10px 9px; border-radius: 18px; }
.day small { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.day b { color: inherit; font: 500 25px/1.05 var(--serif); font-variant-numeric: lining-nums; }
.day em { color: var(--ink-3); font-size: 12.5px; font-style: normal; font-weight: 400; }
.day input:checked + span small, .day input:checked + span em { color: var(--sel-sub); }
.stepper { display: flex; align-items: center; gap: 12px; width: fit-content; margin-top: 16px; padding: 8px 10px 8px 18px; border-radius: 18px; background: var(--band); }
.stepper-l { margin-right: 8px; color: var(--ink-2); font-weight: 600; }
.stepper-b { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair-strong); border-radius: 50%; background: var(--well); color: var(--ink); }
.stepper-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.stepper-b:disabled { opacity: .35; cursor: not-allowed; }
.stepper-n { min-width: 38px; color: var(--ink); font: 500 27px/1 var(--serif); text-align: center; font-variant-numeric: tabular-nums lining-nums; }

/* fields */
.field { display: grid; gap: 8px; margin-top: 20px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.field small { color: var(--ink-3); font-weight: 400; }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid var(--hair-strong); border-radius: 14px; outline: 0;
  background: var(--well); color: var(--ink); font: 400 17px/1.4 var(--sans); -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 86px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ice-ink); box-shadow: 0 0 0 3px var(--ring); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field ::placeholder { color: var(--ink-3); opacity: .8; }
.locate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.locate .btn .ic { width: 18px; height: 18px; }
.locate-note { color: var(--ink-3); font-size: 14px; }
.locate-note button { padding: 0; border: 0; background: none; color: var(--ice-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* the check before sending, and the booking once sent */
.bk-sum { margin: 18px 0 4px; padding: 2px 16px; border-radius: 18px; background: var(--band); }
[data-step="4"] .bk-sum { margin-top: 0; }
.bk-step .field + .bk-label, .bk-step .bk-err + .bk-label { margin-top: 26px; }
.sum-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hair); }
.sum-row:first-child { border-top: 0; }
.sum-row dt { color: var(--ink-3); font-size: 14px; }
.sum-row dd { margin: 0; color: var(--ink); font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.sum-row dd small { display: block; color: var(--ink-3); font-size: 14px; font-weight: 400; }
.sum-row button { padding: 2px 0; border: 0; background: none; color: var(--ice-ink); font-size: 14.5px; font-weight: 600; }
.bk-price { margin-top: 16px; color: var(--ink-3); font-size: 14.5px; }
.bk-done, .bk-off { padding-top: 8px; }
.done-mark svg { width: 64px; height: 64px; margin-bottom: 18px; fill: none; stroke: var(--ice); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .bk-done.is-in .done-mark circle { stroke-dasharray: 151; animation: us-draw .6s cubic-bezier(.65, 0, .35, 1) both; }
  .bk-done.is-in .done-mark path { stroke-dasharray: 34; animation: us-draw .4s cubic-bezier(.65, 0, .35, 1) .45s both; }
}
@keyframes us-draw { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
.done-lead { margin-top: 10px; color: var(--ink-2); font-size: 17px; }
.done-lead b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.done-note { margin-top: 16px; color: var(--ink-3); font-size: 14.5px; }
.off-ways { display: grid; gap: 10px; margin-top: 24px; }

/* ---------------------------------------------------------------- larger screens */
@media (min-width: 640px) {
  .photo { aspect-ratio: 3 / 2; }
}
@media (min-width: 960px) {
  .top-in { height: 84px; }
  .brand img { width: 200px; }
  .nav { display: flex; gap: 28px; margin-left: auto; }
  .nav a { color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .2s ease; }
  .nav a:hover { color: var(--ink); }
  .top-call { display: none; }
  .top-book { display: inline-flex; margin-left: 8px; }
  .hero-in { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; gap: 56px; padding-top: 28px; padding-bottom: 96px; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .photo { grid-column: 2; grid-row: 1; aspect-ratio: 6 / 5; margin: 0; border-radius: 28px; }
  .hero h1 { font-size: clamp(42px, 3.9vw, 56px); }
  .sec { padding: 104px 0; }
  .sec-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .sec-in > h2 { position: sticky; top: 32px; }
  .sec-body { max-width: 680px; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
  .steps li { padding: 56px 0 0; }
  .steps li::before { top: 0; }
  .steps li:not(:last-child)::after { display: none; }
  .dock { display: none; }
  .foot { padding-bottom: 56px; }
  .foot-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .foot p { margin: 0; text-align: right; }
  .sheet { width: min(540px, calc(100% - 48px)); height: min(740px, calc(100vh - 64px)); margin: auto; border-radius: 26px; }
  @media (prefers-reduced-motion: no-preference) { .sheet[open] { animation: us-pop .34s cubic-bezier(.2, .8, .2, 1); } }
}
@keyframes us-pop { from { transform: translateY(14px) scale(.98); opacity: 0; } }