/* WordPress's block library: the rules for the blocks this site uses, so the theme's styles are written over
   the base WordPress gives them. Generated by scripts/blocklib_css.py from WordPress's stylesheet (sha256
   7b36bf3ac43dbfd5); never edit. */
.wp-block-button__link { cursor: pointer; display: inline-block; text-align: center; word-break: normal; overflow-wrap: anywhere; box-sizing: border-box; height: 100%; align-content: center; }
.wp-block-button__link.aligncenter { text-align: center; }
.wp-block-button__link.alignright { text-align: right; }
:where(.wp-block-button__link) { box-shadow: none; text-decoration: none; border-radius: 9999px; padding: calc(0.667em + 2px) calc(1.333em + 2px); }
.wp-block-button[style*=text-decoration] .wp-block-button__link { text-decoration: inherit; }
.wp-block-buttons > .wp-block-button.has-custom-width { max-width: none; }
.wp-block-buttons > .wp-block-button.has-custom-width .wp-block-button__link { width: 100%; }
.wp-block-buttons > .wp-block-button.has-custom-font-size .wp-block-button__link { font-size: inherit; }
.wp-block-buttons > .wp-block-button[class*=wp-block-button__width] { width: calc(var(--wp--block-button--width) * 1% - var(--wp--style--block-gap, 0.5em) * (1 - var(--wp--block-button--width) / 100)); }
.wp-block-buttons > .wp-block-button.wp-block-button__width-25 { width: calc(25% - var(--wp--style--block-gap, 0.5em) * 0.75); }
.wp-block-buttons > .wp-block-button.wp-block-button__width-50 { width: calc(50% - var(--wp--style--block-gap, 0.5em) * 0.5); }
.wp-block-buttons > .wp-block-button.wp-block-button__width-75 { width: calc(75% - var(--wp--style--block-gap, 0.5em) * 0.25); }
.wp-block-buttons > .wp-block-button.wp-block-button__width-100 { width: 100%; flex-basis: 100%; }
.wp-block-buttons.is-vertical > .wp-block-button[class*=wp-block-button__width] { width: calc(var(--wp--block-button--width) * 1%); }
.wp-block-buttons.is-vertical > .wp-block-button.wp-block-button__width-25 { width: 25%; }
.wp-block-buttons.is-vertical > .wp-block-button.wp-block-button__width-50 { width: 50%; }
.wp-block-buttons.is-vertical > .wp-block-button.wp-block-button__width-75 { width: 75%; }
.wp-block-button.is-style-squared, .wp-block-button__link.wp-block-button.is-style-squared { border-radius: 0; }
.wp-block-button.no-border-radius, .wp-block-button__link.no-border-radius { border-radius: 0 !important; }
:root :where(.wp-block-button.is-style-outline > .wp-block-button__link), :root :where(.wp-block-button .wp-block-button__link.is-style-outline) { border: 2px solid currentColor; padding: 0.667em 1.333em; }
:root :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)), :root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) { color: currentColor; }
:root :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)), :root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) { background-color: transparent; background-image: none; }
.wp-block-buttons { box-sizing: border-box; }
.wp-block-buttons.is-vertical { flex-direction: column; }
.wp-block-buttons.is-vertical > .wp-block-button:last-child { margin-bottom: 0; }
.wp-block-buttons > .wp-block-button { display: inline-block; margin: 0; }
.wp-block-buttons.is-content-justification-left { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-left.is-vertical { align-items: flex-start; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-buttons.is-content-justification-center.is-vertical { align-items: center; }
.wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-right.is-vertical { align-items: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }
.wp-block-buttons.aligncenter { text-align: center; }
.wp-block-buttons:not(.is-content-justification-space-between, .is-content-justification-right, .is-content-justification-left, .is-content-justification-center) .wp-block-button.aligncenter { margin-left: auto; margin-right: auto; width: 100%; }
.wp-block-buttons[style*=text-decoration] .wp-block-button, .wp-block-buttons[style*=text-decoration] .wp-block-button__link { text-decoration: inherit; }
.wp-block-buttons.has-custom-font-size .wp-block-button__link { font-size: inherit; }
.wp-block-buttons .wp-block-button__link { width: 100%; }
.wp-block-button.aligncenter { text-align: center; }
.wp-block-details { box-sizing: border-box; }
.wp-block-details summary { cursor: pointer; }
.wp-block-group { box-sizing: border-box; }
:where(.wp-block-group.wp-block-group-is-layout-constrained) { position: relative; }
h1:where(.wp-block-heading).has-background, h2:where(.wp-block-heading).has-background, h3:where(.wp-block-heading).has-background, h4:where(.wp-block-heading).has-background, h5:where(.wp-block-heading).has-background, h6:where(.wp-block-heading).has-background { padding: var(--wp--style--block-background-padding, 1.25em 2.375em); }
:root :where(.wp-block-list.has-background) { padding: var(--wp--style--block-background-padding, 1.25em 2.375em); }
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table thead { border-bottom: 3px solid; }
.wp-block-table tfoot { border-top: 3px solid; }
.wp-block-table td, .wp-block-table th { border: 1px solid; padding: 0.5em; }
.wp-block-table .has-fixed-layout { table-layout: fixed; width: 100%; }
.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th { word-break: normal; overflow-wrap: anywhere; }
.wp-block-table.alignleft, .wp-block-table.aligncenter, .wp-block-table.alignright { display: table; width: auto; }
.wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignright td, .wp-block-table.alignright th { word-break: normal; overflow-wrap: anywhere; }
.wp-block-table .has-subtle-light-gray-background-color { background-color: #f3f4f5; }
.wp-block-table .has-subtle-pale-green-background-color { background-color: #e9fbe5; }
.wp-block-table .has-subtle-pale-blue-background-color { background-color: #e7f5fe; }
.wp-block-table .has-subtle-pale-pink-background-color { background-color: #fcf0ef; }
.wp-block-table.is-style-stripes { border-spacing: 0; border-collapse: inherit; background-color: transparent; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f0f0f0; }
.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) { background-color: #f3f4f5; }
.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) { background-color: #e9fbe5; }
.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd) { background-color: #e7f5fe; }
.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd) { background-color: #fcf0ef; }
.wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { border-color: transparent; }
.wp-block-table.is-style-stripes { border-bottom: 1px solid #f0f0f0; }
.wp-block-table .has-border-color > *, .wp-block-table .has-border-color tr, .wp-block-table .has-border-color th, .wp-block-table .has-border-color td { border-color: inherit; }
.wp-block-table table[style*=border-top-color] > *, .wp-block-table table[style*=border-top-color] tr:first-child { border-top-color: inherit; }
.wp-block-table table[style*=border-top-color] > * th, .wp-block-table table[style*=border-top-color] > * td, .wp-block-table table[style*=border-top-color] tr:first-child th, .wp-block-table table[style*=border-top-color] tr:first-child td { border-top-color: inherit; }
.wp-block-table table[style*=border-top-color] tr:not(:first-child) { border-top-color: currentColor; }
.wp-block-table table[style*=border-right-color] > *, .wp-block-table table[style*=border-right-color] tr, .wp-block-table table[style*=border-right-color] th, .wp-block-table table[style*=border-right-color] td:last-child { border-right-color: inherit; }
.wp-block-table table[style*=border-bottom-color] > *, .wp-block-table table[style*=border-bottom-color] tr:last-child { border-bottom-color: inherit; }
.wp-block-table table[style*=border-bottom-color] > * th, .wp-block-table table[style*=border-bottom-color] > * td, .wp-block-table table[style*=border-bottom-color] tr:last-child th, .wp-block-table table[style*=border-bottom-color] tr:last-child td { border-bottom-color: inherit; }
.wp-block-table table[style*=border-bottom-color] tr:not(:last-child) { border-bottom-color: currentColor; }
.wp-block-table table[style*=border-left-color] > *, .wp-block-table table[style*=border-left-color] tr, .wp-block-table table[style*=border-left-color] th, .wp-block-table table[style*=border-left-color] td:first-child { border-left-color: inherit; }
.wp-block-table table[style*=border-style] > *, .wp-block-table table[style*=border-style] tr, .wp-block-table table[style*=border-style] th, .wp-block-table table[style*=border-style] td { border-style: inherit; }
.wp-block-table table[style*=border-width] > *, .wp-block-table table[style*=border-width] tr, .wp-block-table table[style*=border-width] th, .wp-block-table table[style*=border-width] td { border-width: inherit; border-style: inherit; }
:root :where(.wp-block-table-of-contents) { box-sizing: border-box; }
.wp-element-button { cursor: pointer; }

/* Midnight Petal Cleaning: the design tokens in WordPress's names, the faces and their fallbacks, then the
   theme's own values per width. Generated by scripts/build_tokens.py from design/tokens/theme.json, tokens.json
   and font-fallbacks.json; never edit. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 300 500; size-adjust: 100.05%; ascent-override: 94.95%; descent-override: 24.99%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 300 900; size-adjust: 90.23%; ascent-override: 108.39%; descent-override: 28.26%; line-gap-override: 0%; }

:root {
  --wp--preset--color--milk: #F0F9F9;
  --wp--preset--color--mist: #DBEEEF;
  --wp--preset--color--midnight: #1B233A;
  --wp--preset--color--glacier: #A0BFB9;
  --wp--preset--color--glacier-deep: #1E6061;
  --wp--preset--color--fireweed: #BD3A7F;
  --wp--preset--color--fireweed-deep: #9B2361;
  --wp--preset--color--alpenglow: #F6C8BC;
  --wp--preset--color--white: #FAFEFE;
  --wp--preset--font-family--fraunces: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --wp--preset--font-family--figtree: "Figtree", "Figtree Fallback", system-ui, sans-serif;
  --wp--preset--font-size--small: 15px;
  --wp--preset--font-size--body: 17px;
  --wp--preset--font-size--h3: 22px;
  --wp--preset--font-size--h2: clamp(26px, 3.4vw, 36px);
  --wp--preset--font-size--h1: clamp(34px, 5.0vw, 56px);
  --wp--preset--spacing--4: 4px;
  --wp--preset--spacing--8: 8px;
  --wp--preset--spacing--12: 12px;
  --wp--preset--spacing--16: 16px;
  --wp--preset--spacing--20: 20px;
  --wp--preset--spacing--24: 24px;
  --wp--preset--spacing--32: 32px;
  --wp--preset--spacing--40: 40px;
  --wp--preset--spacing--48: 48px;
  --wp--preset--spacing--64: 64px;
  --wp--preset--spacing--80: 80px;
  --wp--preset--spacing--120: 120px;
  --wp--custom--radius--none: 0px;
  --wp--custom--radius--sm: 2px;
  --wp--custom--radius--md: 3px;
  --wp--custom--radius--lg: 4px;
  --wp--custom--radius--full: 9999px;
  --wp--custom--shadow--sm: 0 1px 3px rgba(27, 35, 58, 0.12);
  --wp--custom--shadow--md: 0 2px 12px rgba(27, 35, 58, 0.18);
  --wp--custom--motion--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --wp--custom--motion--fast: 120ms;
  --wp--custom--motion--base: 200ms;
  --wp--custom--motion--slow: 350ms;
  --wp--custom--measure: 68ch;
  --wp--custom--fraunces-axes: "SOFT" 100, "WONK" 0;
  --mp-frame-width: 1440px;
  --mp-content-width: 1100px;
  --mp-section-pad-x: 170px;
  --mp-section-pad-y: 120px;
  --mp-section-pad-y-tight: 80px;
  --mp-gap-l: 48px;
  --mp-gap-m: 24px;
  --mp-gap-s: 12px;
  --mp-footer-link-gap: 10px;
  --mp-tap-min: 0px;
  --mp-track-2: 538px;
  --mp-track-3: 350.66px;
  --mp-track-4: 257px;
  --mp-area-name: 350.66px;
  --mp-hero-scene: 320px;
  --mp-hero-pad-bottom: 184px;
  --mp-kit-edge: 112px;
  --mp-kit-panorama: 180px;
  --mp-type-kicker: 13px;
  --mp-type-caption: 13px;
  --mp-track-2-cols: 2;
  --mp-track-3-cols: 3;
  --mp-track-4-cols: 4;
}
@media (min-width: 1680px) { :root { --mp-frame-width: 1920px; --mp-section-pad-x: 410px; --mp-hero-scene: 360px; --mp-hero-pad-bottom: 204px; --mp-kit-edge: 128px; --mp-kit-panorama: 200px; } }
@media (max-width: 768px) { :root { --mp-frame-width: 768px; --mp-content-width: 720px; --mp-section-pad-x: 24px; --mp-section-pad-y: 80px; --mp-section-pad-y-tight: 64px; --mp-gap-l: 32px; --mp-gap-m: 20px; --mp-footer-link-gap: 0px; --mp-tap-min: 44px; --mp-track-2: 350px; --mp-track-3: 226.66px; --mp-track-4: 350px; --mp-area-name: 226.66px; --mp-hero-scene: 260px; --mp-hero-pad-bottom: 150px; --mp-kit-edge: 84px; --mp-kit-panorama: 140px; --mp-type-kicker: 14px; --mp-type-caption: 14px; --mp-track-4-cols: 2; --wp--preset--font-size--h3: 21px; } }
@media (max-width: 480px) { :root { --mp-frame-width: 390px; --mp-content-width: 350px; --mp-section-pad-x: 20px; --mp-section-pad-y: 64px; --mp-section-pad-y-tight: 48px; --mp-gap-l: 24px; --mp-gap-m: 16px; --mp-gap-s: 8px; --mp-track-3: 350px; --mp-area-name: 302px; --mp-hero-scene: 180px; --mp-hero-pad-bottom: 106px; --mp-kit-edge: 64px; --mp-kit-panorama: 104px; --mp-track-2-cols: 1; --mp-track-3-cols: 1; --mp-track-4-cols: 1; } }
@media (prefers-reduced-motion: reduce) { :root { --wp--custom--motion--fast: 0ms; --wp--custom--motion--base: 0ms; --wp--custom--motion--slow: 0ms; } }

/* The theme's base: the page, the text roles, links, the skip link, the bands and the staging notice. Every value a token
   (site/styles/tokens.css). In WordPress: the theme's style.css, beside theme.json's styles. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-bottom: var(--mp-tap-min); }
body {
  margin: 0;
  background: var(--wp--preset--color--milk);
  color: var(--wp--preset--color--midnight);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 560;
  font-variation-settings: var(--wp--custom--fraunces-axes);
}
h1 { font-size: var(--wp--preset--font-size--h1); line-height: 1.08; }
/* a heading's level follows the outline and its drawn type is a block style when the two differ (components/render.py;
   core/heading's styles h2 and h3, registered by the theme) */
h2, h1.is-style-h2 { font-size: var(--wp--preset--font-size--h2); line-height: 1.15; }
h3, h2.is-style-h3 { font-size: var(--wp--preset--font-size--h3); line-height: 1.3; }

/* the token sheet's other text styles, one class each (design/tokens/tokens.json "styles"; components/render.py gives
   each comp text its role): the size, weight, line height and case each style sets */
.t-body, .t-body-strong { font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.t-body-strong, .t-label { font-weight: 600; }
.t-small { font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.t-label { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.t-caption { font-size: var(--mp-type-caption); line-height: 1.4; }
.t-kicker { font-size: var(--mp-type-kicker); font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }

/* a node the comps show at some widths only (components/render.py): hidden in the other ranges, the token sheet's
   breakpoints */
@media (width >= 1680px) { .hide-1920 { display: none !important; } }
@media (768px < width < 1680px) { .hide-1440 { display: none !important; } }
@media (480px < width <= 768px) { .hide-768 { display: none !important; } }
@media (width <= 480px) { .hide-390 { display: none !important; } }
p { margin: 0; }
a { color: var(--wp--preset--color--glacier-deep); }
img, svg { display: block; max-width: 100%; }
/* lists as the parts and bands set them; :where() so any of their own rules wins (the open menu's 16 px above and below
   its links lost to this rule's specificity: measured 2026-10-25) */
:where(ul.wp-block-list) { margin: 0; padding: 0; list-style: none; }

/* a name for assistive technology only (the menu button's) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* focus: the comps draw none; a 2 px ring in fireweed-deep (6.99:1 on milk, brand/tools/palette.json), milk on the
   midnight footer (14.56:1) */
:focus-visible { outline: 2px solid var(--wp--preset--color--fireweed-deep); outline-offset: 2px; }

/* WordPress's flex layout (its layout support, docs/wp/receipts/wp-layout-support.txt lines 431 to 446; build record
   row 7): what its global styles give .is-layout-flex */
.is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; }
.is-layout-flex > :is(*, div) { margin: 0; }

.skip-link {
  position: absolute;
  left: var(--mp-gap-s);
  top: calc(-1 * var(--wp--preset--spacing--120));
  padding: var(--mp-gap-s) var(--mp-gap-m);
  background: var(--wp--preset--color--midnight);
  color: var(--wp--preset--color--milk);
}
.skip-link:focus { top: var(--mp-gap-s); }

/* a band (kit.js band()): its parts in a column gap-l apart, section-pad-y above and below, or section-pad-y-tight
   where it holds one short item (is-style-tight), or none (is-style-flush: an edge); its sides the content's margin */
.band {
  display: flex;
  flex-direction: column;
  gap: var(--mp-gap-l);
  padding-block: var(--mp-section-pad-y);
  padding-inline: max(var(--mp-gap-m), (100% - var(--mp-content-width)) / 2);
}
.band.is-style-tight { padding-block: var(--mp-section-pad-y-tight); }
.band.is-style-flush { gap: 0; padding: 0; }
/* the words a band holds, a section head and a list no wider than 720 px (kit.js para(), head(), list()) */
.band > .t-body, .band > .t-body-strong, .section-head { max-width: 720px; }
.section-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--12); }
.section-head .t-kicker { color: var(--wp--preset--color--glacier-deep); }
.band ul.wp-block-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.band ul.wp-block-list > li { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--12); }
.icon-mark { display: flex; flex: none; color: var(--wp--preset--color--glacier-deep); }
.icon-mark svg { width: 24px; height: 24px; }
.icon-mark .icon--close { color: var(--wp--preset--color--midnight); } /* what she does not clean (09-services.js line 46) */
/* the three doors (kit.js doors()): one row gap-s apart that wraps gap-s down, its buttons centred on their line */
.doors { gap: var(--mp-gap-s); }
/* a label and her sample beside it ("Last updated" and the date, "Alaska business license" and its number): one line,
   gap-s apart, wrapping (kit.js row(), gap-s) */
.labelled { display: flex; flex-wrap: wrap; column-gap: var(--mp-gap-s); }

/* WordPress's background colours by preset (what theme.json's palette gives a group's backgroundColor) */
.has-milk-background-color { background-color: var(--wp--preset--color--milk); }
.has-mist-background-color { background-color: var(--wp--preset--color--mist); }
.has-white-background-color { background-color: var(--wp--preset--color--white); }
.has-glacier-background-color { background-color: var(--wp--preset--color--glacier); }
.has-midnight-background-color { background-color: var(--wp--preset--color--midnight); color: var(--wp--preset--color--milk); }
/* a kicker in glacier-deep, and in glacier on the midnight ground (every kicker the comps draw, census 2026-10-25) */
.t-kicker { color: var(--wp--preset--color--glacier-deep); }
.has-midnight-background-color .t-kicker { color: var(--wp--preset--color--glacier); }

/* row 9: the booking screens' notice, one bar fixed to the foot of the viewport; the page keeps its height as end padding */
.staging-notice {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  padding: var(--mp-gap-s) var(--mp-gap-m);
  background: var(--wp--preset--color--midnight);
  color: var(--wp--preset--color--milk);
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
}
body.has-staging-notice { padding-bottom: var(--wp--preset--spacing--64); }

/* The area row (the comps' Area row, kit.js areaRows(); a custom block in WordPress): a list of her areas under a 1 px
   mist rule, each row one link 20 px above and below its words with a 1 px mist rule under it; inside, the name on the
   area-name track and the towns filling the rest, gap-m apart and wrapping gap-s down when the name takes the width
   (at 390), centred on each other; the arrow 24 px after them, glacier-deep. In WordPress: the block's styles. */
[class$="__area-rows"], [class*="__area-rows "] { border-top: 1px solid var(--wp--preset--color--mist); }
.area-row {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--24);
  padding-block: var(--wp--preset--spacing--20);
  border-bottom: 1px solid var(--wp--preset--color--mist);
  color: var(--wp--preset--color--midnight);
  text-decoration: none;
}
.area-row > :first-child {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-gap-s) var(--mp-gap-m);
}
.area-row > :first-child > :first-child { flex: none; width: min(var(--mp-area-name), 100%); } /* never wider than its row (320 px: T8's sweep) */
.area-row > :first-child > :last-child { flex: 1 1 0; min-width: 0; }
.area-row__arrow { flex: none; color: var(--wp--preset--color--glacier-deep); }
@media (hover: hover) { .area-row:hover .wp-block-heading { text-decoration: underline; } }

/* Services' other services (the comps' "Add-ons" band, scripts/figma/09-services.js lines 31 to 43): plain cards on
   white, a 1 px mist border inside radius-lg, 32 px of padding and 12 px between their parts, two up on track-2 (one at
   390), gap-m across and gap-l down (kit.js row()), each as tall as its line (stretch), its action at its foot (as
   comp-card-service.css, design-changelog.md). In WordPress: the add-ons pattern's styles. */
.add-ons__add-on-cards {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.add-ons__add-on-cards > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--12);
  padding: var(--wp--preset--spacing--32);
  border: 1px solid var(--wp--preset--color--mist);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--white);
}
.add-ons__add-on-cards > * > .wp-block-buttons:last-child { margin-top: auto; }

/* Offices' closing (the comps' "Ask" band, scripts/figma/14-faq-contact-offices.js lines 56 to 58): its two buttons in
   one row gap-s apart, wrapping gap-s down, centred on their line (kit.js row(), as the doors). In WordPress: the
   pattern's styles. */
.ask__doors { gap: var(--mp-gap-s); }

/* Home's two cleans (the comps' "Basic and deep" band, scripts/figma/08-home.js and 24-home-v3.js illustrate()): each
   card's title in a row with its 96 px illustration, 16 px apart, the title bottom-aligned and taking the rest. In
   WordPress: the pattern's styles. */
.basic-and-deep__title-row { display: flex; align-self: stretch; align-items: flex-end; gap: var(--wp--preset--spacing--16); }
.basic-and-deep__title-row > .wp-block-heading { flex: 1 1 0; min-width: 0; }
.basic-and-deep__title-row > .illustration { flex: none; display: block; }

/* Book's band (the comps' "Booking", scripts/figma/11-book.js): the form's first step and the other ways in side by
   side on track-2, top-aligned, gap-m across and gap-l down (one up at 390); the form's parts 20 px apart, its button
   across the step; the other ways in a mist box, radius-lg, 32 px in, 20 px between its parts, each way's title, words
   and action 8 px apart, the action's button and her number gap-s apart, centred on their line; the line on when the
   deposit is paid on its own. Staging only for the form: in WordPress the booking plugin's form sits here. */
.booking__form-and-other-ways {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  align-items: start;
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.booking__booking-form { display: flex; flex-direction: column; gap: 20px; }
.booking__button > .wp-block-button { flex: 1 1 auto; }
.booking__button .wp-block-button__link { width: 100%; }
/* the box and each way are named in the comps after their own titles, which share their classes: held by place */
.booking__form-and-other-ways > .booking__other-ways-in {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--wp--preset--spacing--32);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--mist);
}
.booking__other-ways-in > div { display: flex; flex-direction: column; gap: 8px; }
.booking__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-gap-s); }

/* The first view (the comps' "First view" band, kit.js's heroBand; every page with one, plan section 4): the page's own
   scene across the band's foot at its drawn height (--mp-hero-scene), fitted by the plan's rule (object-fit cover, its
   foot held: section 4, "Between drawn widths"); the words in a 760 px column, the hero's text zone (hero.mjs SIZES:
   [170, 930] at 1440, [410, 1170] at 1920), or the content's width where that is narrower, 16 px between them; the
   band's parts gap-m apart; its foot padded by --mp-hero-pad-bottom so the words clear the scene (row 12). In
   WordPress: the first-view pattern's styles. */
.band--first-view {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mp-gap-m);
  padding-bottom: var(--mp-hero-pad-bottom);
}
.band--first-view > .scene { position: absolute; inset: auto 0 0 0; height: var(--mp-hero-scene); }
/* every part after the scene paints above it, as the comps stack them (the scene positioned, the doors not, laid its
   pale sky over the doors: seen in the 2026-10-25 capture of Basic clean) */
.band--first-view > :not(.scene) { position: relative; }
.band--first-view > .scene picture, .band--first-view > .scene img { display: block; width: 100%; height: 100%; }
.band--first-view > .scene img { object-fit: cover; object-position: 50% 100%; }
.first-view__hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--16);
  max-width: 760px;
}
.band--first-view .t-kicker { color: var(--wp--preset--color--glacier-deep); }
/* links to her pages gap-m apart (Not found's), wrapping as the comps' row wraps; the doors are global.css's */
.first-view__links { gap: var(--mp-gap-m); }

/* The booking, quote and walkthrough screens' one band (the comps' "Flow", scripts/figma/16-flows.js screen()): gap-m
   between its parts; its step no wider than 640 px, its parts 20 px apart: the done mark (48 px round, alpenglow, its
   check midnight), the kicker and progress bar, the title, the fields, the step's button across the step when it
   stands alone (Book 1 and the requests), and the Continue or pay button with Back gap-m apart, wrapping gap-s down;
   a line of words with a link and her number (Changes, Sooner) gap-s apart, centred on its line. Staging only. */
.band--flow { gap: var(--mp-gap-m); }
.flow__step-content { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.flow__done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--alpenglow);
}
.flow__done-mark .icon-mark { color: var(--wp--preset--color--midnight); }
.flow__button > .wp-block-button { flex: 1 1 auto; }
.flow__button .wp-block-button__link { width: 100%; }
.flow__navigation { gap: var(--mp-gap-s) var(--mp-gap-m); }
.flow__changes, .flow__sooner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-gap-s); }
.flow__expiry-and-code { display: flex; gap: var(--mp-gap-m); }
.flow__expiry-and-code > * { flex: 1 1 0; }

/* Pricing's policies (the comps' "Good to know" band, scripts/figma/10-pricing.js lines 28 to 53): four rows under a 1 px
   mist rule, each padded gap-l above and below with a 1 px mist rule under it; in each, the policy's name on track-3 and
   what it says filling the rest (at least 260 px), 12 px between its parts and no wider than 720 px, gap-m between the
   two and gap-s down when they wrap (at 390). In WordPress: the pattern's styles. */
.good-to-know__policies { border-top: 1px solid var(--wp--preset--color--mist); }
.good-to-know__policies > * {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mp-gap-s) var(--mp-gap-m);
  padding-block: var(--mp-gap-l);
  border-bottom: 1px solid var(--wp--preset--color--mist);
}
.good-to-know__name { flex: none; width: min(var(--mp-track-3), 100%); } /* never wider than its row (320 px: T8) */
.good-to-know__what-it-says {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12);
  min-width: 260px;
}
.good-to-know__what-it-says > * { max-width: 720px; }

/* Offices' first steps (the comps' "How it starts" band, scripts/figma/14-faq-contact-offices.js lines 49 to 55): its
   head (the kicker and the title, 16 px apart) and the three steps side by side on track-2, top-aligned, gap-m across
   and gap-l down when they stack (at 390). In WordPress: the pattern's styles. */
.how-it-starts__head-and-steps {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  align-items: start;
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.how-it-starts__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); }

/* Home's booking steps on the midnight ground (the comps' "How it works" band, scripts/figma/08-home.js; the steps on
   one line, kit.js steps() onDark): the head (kicker, title, and the deposit's line with its link, 12 px apart and
   wrapping 12 px down) and the steps side by side on track-2, gap-m across and gap-l down, top-aligned; the head's parts
   16 px apart; the text link glacier on midnight as the kicker. In WordPress: the pattern's styles. */
.how-it-works__head-and-steps {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  align-items: start;
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.how-it-works__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); }
.how-it-works__deposit-terms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--12); }
.has-midnight-background-color .is-style-text > .wp-block-button__link { color: var(--wp--preset--color--glacier); }

/* FAQ's questions (the comps' "Questions" band, scripts/figma/14-faq-contact-offices.js lines 17 to 22): her clients'
   questions one under another, no gap between them, no wider than 720 px. In WordPress: the pattern's styles. */
.questions__items { display: flex; flex-direction: column; max-width: 720px; }

/* The reviews (the comps' "Reviews" bands on Home, About's page and Reviews, and "Reviews (none yet)": scripts/figma/
   13-about-reviews.js): reviews are never drafted (A60 and A61), so a group of review cards gives way to the comps'
   empty state, its title and its line gap-s apart, as its own band is drawn; "Leave a review"'s two links gap-s apart,
   wrapping gap-s down (one above the other at 390). In WordPress: the patterns' styles. */
.band--no-reviews-yet, .empty-state { gap: var(--mp-gap-s); }
.empty-state { display: flex; flex-direction: column; }
.empty-state > .t-body { max-width: 720px; }
.leave-a-review__where { gap: var(--mp-gap-s); }

/* The legal pages' text (the comps' "Text" band, 15-legal-404.js; Privacy and Terms): its words no wider than 720 px
   (the comps' text box at 1920, 1440 and 768; the content's width at 390); its ground and spacing are the band's own
   (global.css). In WordPress: the text pattern's styles. */
.band--text > * { max-width: 720px; }

/* About's crew (the comps' "The crew" band, scripts/figma/13-about-reviews.js): the portraits on track-3, gap-m across
   and gap-l down (one up at 390), each its line and its photograph 12 px apart; staging has no photographs (row 25), so
   a portrait is its line. In WordPress: the pattern's styles. */
.the-crew__portraits {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-3-cols), minmax(0, 1fr));
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.the-crew__portrait { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--12); }
/* Home's crew (the same band name, scripts/figma/24-home-v3.js): the photograph and the words side by side on track-2;
   with no photograph the row closes up (the deck's photos rule), so the words take the first track, their parts 16 px
   apart */
.the-crew__crew-row {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  align-items: center;
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.the-crew__crew-text { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); }

/* Contact's ways to reach her (the comps' "Ways to reach her" band, scripts/figma/14-faq-contact-offices.js lines 31 to
   38): three milk cards on the white band, on track-3 (one up at 390), gap-m across and gap-l down, radius-lg, 32 px of
   padding and 12 px between a card's title and her phone, email or hours. In WordPress: the pattern's styles. */
.ways-to-reach-her__cards {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-3-cols), minmax(0, 1fr));
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.ways-to-reach-her__cards > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--12);
  padding: var(--wp--preset--spacing--32);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--milk);
}

/* Pricing's two ways to a quote (the comps' "What changes a quote" band, scripts/figma/10-pricing.js lines 15 to 26):
   milk cards on the white band, radius-lg, 32 px of padding and 12 px between their parts, two up on track-2 (one at
   390), gap-m across and gap-l down, each as tall as its line; each card's action a row gap-s apart, centred, that
   wraps gap-s down, at the card's foot (as comp-card-service.css, design-changelog.md). In WordPress: the
   pattern's styles. */
.what-changes-a-quote__two-ways-to-a-quote {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.what-changes-a-quote__two-ways-to-a-quote > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--12);
  padding: var(--wp--preset--spacing--32);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--milk);
}
.what-changes-a-quote__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-gap-s); }
.what-changes-a-quote__two-ways-to-a-quote > * > :is(.wp-block-buttons, .what-changes-a-quote__action):last-child { margin-top: auto; }

/* The Book bar (the comps' Book bar: scripts/figma/20a-components-v2.js lines 163 to 172, 20b and 20g; shown at 390
   only): "Book a clean" across a phone's screen, fixed to its foot at 480 px and below, on milk, 12 px round the button
   and a 1 px mist rule above it (counted in its height, 73 px, as the comps count it), its shadow the token sheet's
   shadow-md turned upward (20g). The page ends with room for it, and a focused element is kept clear of it (WCAG 2.2,
   2.4.11; row 3). In WordPress: parts/book-bar.html's styles. */
.book-bar { display: none; }
@media (max-width: 480px) {
  .book-bar {
    position: fixed;
    z-index: 20;
    inset: auto 0 0 0;
    display: block;
    padding: var(--wp--preset--spacing--12) max(var(--mp-gap-m), (100% - var(--mp-content-width)) / 2);
    border-top: 1px solid var(--wp--preset--color--mist);
    background: var(--wp--preset--color--milk);
    box-shadow: 0 -2px 12px color-mix(in srgb, var(--wp--preset--color--midnight) 18%, transparent);
  }
  .book-bar .wp-block-button, .book-bar .wp-block-button__link { width: 100%; }
  body.has-book-bar { padding-bottom: calc(2 * var(--wp--preset--spacing--12) + var(--wp--preset--spacing--48) + 1px); }
  html:has(body.has-book-bar) { scroll-padding-bottom: calc(2 * var(--wp--preset--spacing--12) + var(--wp--preset--spacing--48) + 1px); }
}

/* The button (the comps' Button set: scripts/figma/05a-components-chrome.js lines 106 to 131; one height, 48, for every
   kind since mockups v2, 20a-components-v2.js line 5): core/button's link, its kind a block style. The primary is the
   comps' 22 px sides and fill; the secondary's 1.5 px outline is counted in its width as the comps count it (201 px for
   "Call or text for a quote": 22 + 154 + 22 + 3), drawn as an inset shadow, since Chrome floors a 1.5 px border to 1 px
   at DPR 1 and the row after it moved (measured 2026-10-25: border-left-width 1px, the doors 2 to 3.8 px left); in
   forced colours, where shadows are not drawn, every box takes a 1 px border instead. The text kind is glacier-deep
   words with the comps' arrow 8 px after them (18 px, drawn with a 2 px line as the resized icon keeps its weight), no
   box. In WordPress: the theme's styles for core/button. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--8);
  min-height: var(--wp--preset--spacing--48);
  padding: 0 22px;
  border: 0;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--fireweed-deep);
  color: var(--wp--preset--color--milk);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.is-style-secondary > .wp-block-button__link {
  padding: 0 23.5px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--midnight);
  color: var(--wp--preset--color--midnight);
}
.is-style-text > .wp-block-button__link {
  padding: 0;
  background: none;
  color: var(--wp--preset--color--glacier-deep);
}
/* the states the comps leave to the build (DESIGN.md, Buttons; row 26): on a fine pointer's hover the primary's fill
   lifts a step toward milk and the secondary takes a mist fill, the text kind its underline; a step's button sending
   (the script's loading state, a second press taken once) keeps its words and shows the wait in its cursor and fill */
@media (hover: hover) and (pointer: fine) {
  .wp-block-button:not(.is-style-secondary, .is-style-text) > .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--fireweed-deep) 88%, var(--wp--preset--color--milk)); }
  .is-style-secondary > .wp-block-button__link:hover { background: var(--wp--preset--color--mist); }
  .is-style-text > .wp-block-button__link:hover { text-decoration: underline; }
}
/* pressed: the primary's fill a step toward midnight, the secondary's glacier (midnight on glacier, the closing band's
   pair) */
.wp-block-button:not(.is-style-secondary, .is-style-text) > .wp-block-button__link:active { background: color-mix(in srgb, var(--wp--preset--color--fireweed-deep) 85%, var(--wp--preset--color--midnight)); }
.is-style-secondary > .wp-block-button__link:active { background: var(--wp--preset--color--glacier); }
.wp-block-button__link.is-loading, .wp-block-button__link[aria-disabled="true"] {
  background: color-mix(in srgb, var(--wp--preset--color--fireweed-deep) 82%, var(--wp--preset--color--milk));
  cursor: progress;
}
button.wp-block-button__link { cursor: pointer; }
@media (forced-colors: active) {
  .wp-block-button__link { border: 1px solid ButtonText; }
  .is-style-text > .wp-block-button__link { border: 0; }
}
.is-style-text > .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
@media (forced-colors: active) { .is-style-text > .wp-block-button__link::after { forced-color-adjust: none; background: LinkText; } }
/* on the glacier field the text link is midnight (kit.js onGlacier: glacier-deep on glacier is 3.67:1, a pair declared
   for large text only, 18a) */
.has-glacier-background-color .is-style-text > .wp-block-button__link { color: var(--wp--preset--color--midnight); }

/* The service card (the comps' Card/Service, scripts/figma/05c-components-content.js lines 91 to 115; the areas' and
   the services' cards): white, a 1 px mist border inside radius-lg (05c card()), 32 px of padding and 16 px between its
   parts; two up on track-2 (one at 390), gap-m across and gap-l down, each as tall as its line (kit.js stretch); its
   actions 20 px apart, at the card's foot so a row's actions line up (design-changelog.md, carried to the build: "Card
   buttons sit at the card's foot"; the comps align only the card edges). In WordPress: the card pattern's styles. */
.card-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--16);
  padding: var(--wp--preset--spacing--32);
  border: 1px solid var(--wp--preset--color--mist);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--white);
}
:has(> .card-service) {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-2-cols), minmax(0, 1fr));
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
.card-service .wp-block-buttons { gap: var(--wp--preset--spacing--20); }
.card-service > .wp-block-buttons:last-child { margin-top: auto; }

/* A kit edge between two bands (components/blocks/art.py; the comps' Scene kit/Edge top pieces on Home, placed by
   scripts/figma/24-home-v3.js placeKit()): the band's full width at kit-edge's height (128, 112, 84, 64 px), the drawing
   for the width range covering it, set on its foot and cut at its sides between the drawn widths, as the first view's
   scene is. In WordPress: the scene block's edge style. */
.edge { display: block; }
.edge__img { display: block; width: 100%; height: var(--mp-kit-edge); object-fit: cover; object-position: 50% 100%; }

/* An FAQ item (the comps' "FAQ item", scripts/figma/05c-components-content.js lines 266 to 287): WordPress's details
   block, a 1 px mist rule under it; its summary the question in Body strong, 20 px above and below it closed and 12 px
   between it and the answer open, the answer 20 px from the rule; the comps' 24 px chevron drawn here (down closed, up
   open: the same chevron turned), 16 px after the question. In WordPress: core/details's styles in the theme. */
.faq-item { border-bottom: 1px solid var(--wp--preset--color--mist); }
.faq-item[open] { padding-bottom: 20px; }
.faq-item > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq-item[open] > summary { padding-bottom: 12px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: auto;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.faq-item[open] > summary::after { transform: rotate(180deg); }
@media (forced-colors: active) { .faq-item > summary::after { forced-color-adjust: none; background: CanvasText; } }

/* The footer part (the comps' Footer: scripts/figma/05a-components-chrome.js lines 235 to 285, with 20a's tap rows;
   comps-ref, Chrome @1920, @1440, @768 and @390): midnight, 64 px above and 32 below, the columns and the legal line 48
   apart; four columns of track-4 that wrap to two at 768 and one at 390, gap-m across and gap-l down; its links milk in
   the small type, each a tap row (tap-min) at 768 and below and footer-link-gap apart above that; the group titles
   glacier kickers; the legal line glacier captions, 24 px under a 1 px glacier-deep rule (the comps count the rule in
   the line's height: 25 px to its words). In WordPress: parts/footer.html's styles. */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--48);
  padding: var(--wp--preset--spacing--64) max(var(--mp-gap-m), (100% - var(--mp-content-width)) / 2) var(--wp--preset--spacing--32);
  background: var(--wp--preset--color--midnight);
  color: var(--wp--preset--color--milk);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer :focus-visible { outline-color: var(--wp--preset--color--milk); }
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(var(--mp-track-4-cols), minmax(0, 1fr));
  gap: var(--mp-gap-l) var(--mp-gap-m);
}
/* two up until 960 px, where the header's links take over from its menu (comp-header.css): four columns from 769 px
   broke "Call or text" and "Email" onto two lines up to 824 (T8's sweep) */
@media (max-width: 959.98px) { .site-footer__columns { grid-template-columns: repeat(min(2, var(--mp-track-4-cols)), minmax(0, 1fr)); } }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--16); }
.site-footer__logo { width: auto; height: 48px; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--16); }
.site-footer__group, .site-footer__group ul { display: flex; flex-direction: column; gap: var(--mp-footer-link-gap); }
.site-footer__title {
  color: var(--wp--preset--color--glacier);
  font-size: var(--mp-type-kicker);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* a row: a link, or a label with her sample beside it, 6 px apart as the comps' rows are */
.site-footer li > * { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: var(--mp-tap-min); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
  padding-top: var(--wp--preset--spacing--24);
  border-top: 1px solid var(--wp--preset--color--glacier-deep);
  color: var(--wp--preset--color--glacier);
  font-size: var(--mp-type-caption);
  line-height: 1.4;
}
.site-footer__legal > a, .site-footer__license > * { display: flex; align-items: center; column-gap: 6px; min-height: var(--mp-tap-min); }
@media (hover: hover) { .site-footer a[href]:hover { text-decoration: underline; } }

/* The booking, quote and walkthrough screens' parts (components/blocks/form.py): the comps' Field and Choice
   (scripts/figma/05c-components-content.js lines 170 to 231) and the flows' progress bar, calendar, slots, summary,
   notice and card fields (16-flows.js, kit.js notice() and fieldGroup()). The comps include their strokes in layout,
   so a line is a border where it moves the words (the fields, the slots, the notice, the card box) and an inset
   shadow where a state changes it (a choice keeps the chosen card's size either way: build record). Staging only: in
   WordPress the booking plugin's forms take these looks. */

/* a field: its label (Label), its control (48 px, white, a 1 px glacier-deep line, radius-md, 14 px in), its help
   (Caption), 6 px apart */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--wp--preset--color--glacier-deep);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--midnight);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.6;
}
.field__input::placeholder { color: var(--wp--preset--color--glacier-deep); opacity: 1; }
textarea.field__input { display: block; min-height: 120px; padding: 12px 14px; resize: vertical; }
select.field__input { padding-right: 54px; appearance: none; cursor: pointer; }
select.field__input:has(option:checked:disabled) { color: var(--wp--preset--color--glacier-deep); }
.field__control { position: relative; display: block; }
.field__control::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 15px;
  width: 24px;
  height: 24px;
  background: var(--wp--preset--color--midnight);
  pointer-events: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
/* a field that erred (the comps' Error variant, 05c lines 180 and 185): its line fireweed-deep and 2 px (the second
   pixel drawn inside, so nothing moves), its message in the help line's place in fireweed-deep (6.99:1 on milk) */
.field.is-error .field__input { border-color: var(--wp--preset--color--fireweed-deep); box-shadow: inset 0 0 0 1px var(--wp--preset--color--fireweed-deep); }
.field.is-error .field__help { display: none; }
.field__error { color: var(--wp--preset--color--fireweed-deep); }
/* the deposit's card fields: the comps' boxes and words, nothing to type (row 27) */
.field.is-inert .field__input { display: flex; align-items: center; color: var(--wp--preset--color--glacier-deep); }
.card-fields {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12);
  padding: 16px;
  border: 1px solid var(--wp--preset--color--glacier-deep);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--white);
}
/* a group of fields under its heading, 16 px apart (the legend floated, so it lays out as the group's first part) */
.field-group { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); min-width: 0; margin: 0; padding: 0; border: 0; }
.field-group > legend { float: left; width: 100%; margin: 0; padding: 0; }

/* the choices: each a white card, radius-lg, its radio 16 px before its words (Body strong, then Small, 2 px apart);
   a mist line, a 2 px fireweed-deep one when chosen; the radio 20 px round, its 1.5 px ring midnight, fireweed-deep
   with a 10 px dot when chosen */
.choices { display: flex; flex-direction: column; gap: 20px; }
.choice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--white);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--mist);
  cursor: pointer;
}
.choice:has(:checked) { box-shadow: inset 0 0 0 2px var(--wp--preset--color--fireweed-deep); }
.choice:has(:focus-visible) { outline: 2px solid var(--wp--preset--color--fireweed-deep); outline-offset: 2px; }
.choice__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: var(--wp--custom--radius--full);
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--midnight);
  appearance: none;
  cursor: pointer;
}
.choice__input:focus-visible { outline: none; }
.choice__input:checked {
  background: radial-gradient(circle, var(--wp--preset--color--fireweed-deep) 0 5px, transparent 5.5px);
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--fireweed-deep);
}
.choice__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* the progress bar: a 4 px round step each, 6 px apart, done in fireweed-deep */
.progress { display: flex; gap: 6px; }
.progress__step { flex: 1 1 0; height: 4px; border-radius: var(--wp--custom--radius--full); background: var(--wp--preset--color--mist); }
.progress__step.is-done { background: var(--wp--preset--color--fireweed-deep); }

/* the calendar: the month between its 44 px buttons (a mist line), then the weekdays and the days on a grid of 36 px
   cells 4 px apart, the month's first day under its weekday; the chosen day fireweed-deep with milk words */
.calendar { display: flex; flex-direction: column; gap: 4px; width: 276px; }
.calendar__month { display: flex; align-items: center; justify-content: space-between; }
.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--wp--custom--radius--md);
  background: none;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--mist);
  color: var(--wp--preset--color--midnight);
  cursor: pointer;
}
.calendar__nav--previous svg { transform: rotate(90deg); }
.calendar__nav--next svg { transform: rotate(-90deg); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 4px; }
.calendar__weekday, .calendar__day { display: flex; align-items: center; justify-content: center; height: 36px; }
.calendar__day {
  padding: 0;
  border: 0;
  border-radius: var(--wp--custom--radius--md);
  background: none;
  color: var(--wp--preset--color--midnight);
  font-family: inherit;
  cursor: pointer;
}
.calendar__day.is-chosen { background: var(--wp--preset--color--fireweed-deep); color: var(--wp--preset--color--milk); }
.calendar__day--col-1 { grid-column-start: 1; }
.calendar__day--col-2 { grid-column-start: 2; }
.calendar__day--col-3 { grid-column-start: 3; }
.calendar__day--col-4 { grid-column-start: 4; }
.calendar__day--col-5 { grid-column-start: 5; }
.calendar__day--col-6 { grid-column-start: 6; }
.calendar__day--col-7 { grid-column-start: 7; }

/* the time slots: 44 px buttons, 18 px in, a 1 px glacier-deep line, radius-md, gap-s apart; the chosen one
   fireweed-deep with milk words */
.slots { display: flex; flex-wrap: wrap; gap: var(--mp-gap-s); }
.slot {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--wp--preset--color--glacier-deep);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--midnight);
  font-family: inherit;
  cursor: pointer;
}
.slot.is-chosen { border-color: var(--wp--preset--color--fireweed-deep); background: var(--wp--preset--color--fireweed-deep); color: var(--wp--preset--color--milk); }

/* the summary: mist, radius-md, 16 px by 20 px in, its rows 10 px apart, each its name (Small) and what was chosen
   (Body strong) gap-s apart, wrapping */
.summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--mist);
}
.summary__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-gap-s); }
.summary dd { margin: 0; }

/* a notice (the card declined, the request not sent): mist with a 1 px fireweed-deep line, radius-md, 14 px by 16 px
   in, its lines 6 px apart */
.notice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--wp--preset--color--fireweed-deep);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--mist);
}

@media (forced-colors: active) {
  .choice, .calendar__nav, .calendar__day { border: 1px solid CanvasText; }
  .choice__input { border: 1.5px solid CanvasText; }
  .choice__input:checked { background: Highlight; }
  .calendar__day.is-chosen, .slot.is-chosen { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .field__control::after { forced-color-adjust: none; background: CanvasText; }
  .progress__step { border: 1px solid CanvasText; }
}

/* The header part (the comps' Header: scripts/figma/05a-components-chrome.js lines 210 to 233; comps-ref, Chrome @1920,
   @1440, @768 and @390): 88 px tall on milk, its 1 px mist rule inside its foot, the logo 56 px tall at the left and at
   the right the links, "Call or text" and "Book a clean", 28 px apart; the side padding the bands' own. In WordPress:
   parts/header.html's styles. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-gap-m);
  padding: var(--wp--preset--spacing--16) max(var(--mp-gap-m), (100% - var(--mp-content-width)) / 2) calc(var(--wp--preset--spacing--16) - 1px);
  border-bottom: 1px solid var(--wp--preset--color--mist);
  background: var(--wp--preset--color--milk);
}
/* the logo keeps its 56 px box; narrower than the comps' 390 (WCAG reflow at 320) it gives way before the menu button,
   its drawing scaled inside the box (T8: the sweep found the page 8 px wide at 320) */
.site-header__logo, .site-menu__logo { flex: 0 1 auto; min-width: 0; }
.site-header__logo img, .site-menu__logo img { display: block; width: auto; max-width: 100%; height: 56px; object-fit: contain; object-position: left center; }
.site-header__actions, .site-header__links { display: flex; align-items: center; gap: 28px; }
/* a link: the comps' Nav/Link, 8 px above its words and 6 below; the page you are on carries its 2 px fireweed rule
   inside that foot (Current=Yes) */
.site-header__links a {
  display: block;
  padding: var(--wp--preset--spacing--8) 0 6px;
  color: var(--wp--preset--color--midnight);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__links a[aria-current="page"] { padding-bottom: 4px; border-bottom: 2px solid var(--wp--preset--color--fireweed); }
.site-header__call {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--glacier-deep);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__book .wp-block-button__link { white-space: nowrap; }
@media (hover: hover) { .site-header__links a:hover, .site-header__call:hover { text-decoration: underline; } }

/* the menu button and the open menu (the comps' Menu button, 44 by 44, lines 198 to 205, and Menu/Open, lines 288 to
   305): shown where the links no longer fit beside the logo (the query below). Open, the panel covers the screen with
   its logo where the header's sits, and the button, now showing the close icon, stays where it was */
.site-menu { display: none; }
.site-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--wp--preset--color--midnight);
  cursor: pointer;
  list-style: none;
}
.site-menu > summary::-webkit-details-marker { display: none; }
@media (forced-colors: active) { .site-menu > summary { border: 1px solid ButtonText; } }
/* the lockup is an image, which forced colours never recolour, so on a dark canvas its midnight words all but vanish:
   there the header and the menu show the footer's light lockup (T8's forced-colours look) */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .site-header__logo img, .site-menu__logo img { content: url("/assets/brand/lockup-on-midnight.svg"); }
}
.site-menu .icon--close, .site-menu[open] .icon--menu { display: none; }
.site-menu[open] .icon--close { display: block; }
.site-menu[open] > summary {
  position: fixed;
  z-index: 31;
  top: calc(var(--wp--preset--spacing--16) + 6px);
  right: max(var(--mp-gap-m), (100% - var(--mp-content-width)) / 2);
}
.site-menu__panel {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--16) max(var(--mp-gap-m), (100% - var(--mp-content-width)) / 2) var(--wp--preset--spacing--32);
  overflow-y: auto;
  background: var(--wp--preset--color--milk);
}
.site-menu__links { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); padding-block: var(--wp--preset--spacing--16); }
.site-menu__links a {
  display: block;
  padding-block: 10px;
  color: var(--wp--preset--color--midnight);
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: var(--wp--preset--font-size--h3);
  font-weight: 560;
  font-variation-settings: var(--wp--custom--fraunces-axes);
  line-height: 1.3;
  text-decoration: none;
}
.site-menu__buttons { flex-direction: column; align-items: stretch; align-self: stretch; gap: var(--wp--preset--spacing--8); }
.site-menu__buttons .wp-block-button__link { width: 100%; }
html:has(.site-menu[open]) { overflow: hidden; }

/* the switch: the comps draw the links at 1440 and the menu button at 768; between, the links stay while they fit. They
   need 954 px (24 + the logo's 252 + the header's 24 gap + 630 for the links, the call with her sample number and the
   button + 24: measured 2026-10-25), so the menu button takes over below 960 px, where the gap to the logo is 30 px.
   Measure again when her own number replaces the sample. */
@media (max-width: 959.98px) {
  .site-header__nav, .site-header__call, .site-header__book { display: none; }
  .site-menu { display: block; }
}

/* The steps (the comps' Step, scripts/figma/05c-components-content.js lines 152 to 168, a vertical timeline since
   mockups v2: 20a-components-v2.js section 16 and 20d-step-line-review-foot.js): each step a row, 20 px between its
   badge and its words; the badge 40 px round in alpenglow with its number centred in Body strong; a 2 px glacier line
   from the badge's foot to the next badge, none after the last ("Show line"); the words 8 px apart, 6 px down so the
   title's first line sits on the badge, 32 px under them. In WordPress: the steps block's style. */
.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.steps__item { position: relative; display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--20); }
.steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--wp--preset--spacing--40);
  bottom: 0;
  left: 19px;
  width: 2px;
  background: var(--wp--preset--color--glacier);
}
.steps__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--wp--preset--spacing--40);
  height: var(--wp--preset--spacing--40);
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--alpenglow);
  color: var(--wp--preset--color--midnight);
  font-weight: 600;
}
.steps__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--wp--preset--spacing--8);
  min-width: 0;
  padding: 6px 0 var(--wp--preset--spacing--32);
}
@media (forced-colors: active) { .steps__number { border: 1px solid CanvasText; } .steps__item:not(:last-child)::before { background: CanvasText; } }

/* The comparison as core/table (the comps' Compare/Header and Compare/Row: scripts/figma/05c-components-content.js lines
   117 to 150), written over WordPress's own table rules (reset.css): 720 px wide; the task column takes the rest, each
   clean's column 96 px with its label and its check centred; the header row 12 px above and below its labels over a
   1.5 px midnight rule, drawn as a shadow inside it since Chrome floors a 1.5 px border to 1 px; each row 14 px above and
   below its task over a 1 px mist rule. In WordPress: the theme's styles for core/table. */
.wp-block-table { margin: 0; max-width: 720px; }
.wp-block-table table { table-layout: fixed; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table th, .wp-block-table td { padding: 14px 0; border: 0; text-align: left; vertical-align: middle; }
.wp-block-table thead th {
  padding-block: var(--wp--preset--spacing--12);
  box-shadow: inset 0 -1.5px 0 var(--wp--preset--color--midnight);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.4;
}
.wp-block-table thead th + th, .wp-block-table td { width: 96px; text-align: center; }
.wp-block-table tbody tr { border-bottom: 1px solid var(--wp--preset--color--mist); }
.wp-block-table tbody th { font-size: var(--wp--preset--font-size--body); font-weight: 400; line-height: 1.6; }
.wp-block-table td .icon-mark { justify-content: center; }