@font-face{font-family:"Archivo";font-weight:700;font-display:swap;src:url(/fonts/archivo-700.woff2) format("woff2")}
/* ==========================================================================
 ESTIMATOR — shared stylesheet for /estimator/*.

 Two pages use this: the kitchen estimator and the full-home one. They are
 standalone pages, not a mode of the homepage, so this carries everything
 they need — the palette, the base setting, the controls and the estimator's
 own layout. The control rules (.opts, .picks, .slider, .counter, .pack,
 .tile) are the homepage's, lifted verbatim so the two tools are visibly the
 same tool; if you restyle a control there, restyle it here.

 Pair with assets/estimator.js, which holds the rate card and the maths.
 ========================================================================== */

@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
/* The display face the site sets its headings in. */
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(/fonts/jakarta-latin.woff2) format("woff2")}

/* ---------- palette and base, as the homepage sets them ---------- */

:root {
  --bg:      #F6F8FB;
  --surface: #FFFFFF;
  --ink:     #101720;
  --muted:   #5E6A78;
  --blue:    #1155D6;   /* accent — single source of truth */
  --blue-d:  #0D42A8;   /* hover / pressed */
  --guide:   #101720;   /* black — style→showcase guide + selected ring */
  --dark:    #0E1A26;
  --line:    #E2E8F0;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;

  --sans: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.1rem, 5.42vw, 5rem);
  --maxw: 1560px;
  --sec: clamp(2.3rem, 4.8vw, 4.2rem);
  /* The gap either side of the white calculator band. That band's own
     padding sits INSIDE the white, so each outer gap is drawn by ONE
     neighbour — the showcase below itself, the stages above itself. One
     token so the two can never drift apart. */
  --band-gap: clamp(3.6rem, 7.2vw, 6.5rem);
}

* { box-sizing: border-box; }
/* clip, not hidden: hidden makes the root a scroll container and can break
   position:sticky further down. Belt and braces behind the --vw fix. */
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }

.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- buttons ----------
   The site's pill, lifted whole. States, in order of loudness: hover darkens
   ~10%, active presses 1px down and pulls the shadow in, focus-visible rings
   in the ink (the global blue ring is invisible on a blue button). */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.7rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, transform 90ms ease;
}
.pill:active { transform: translateY(1px); }
/* Arrows as SVG, not glyphs. Poppins' Latin subset carries U+2191/2193 but
   not U+2192/2190/2197, so every → ← ↗ was silently rendering in a fallback
   face next to Poppins text. */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.13em; }

/* Primary. */
.pill.dark { background: var(--blue); color: #fff;
  box-shadow: 0 10px 18px -12px rgba(17,85,214,.6); }
.pill.dark:hover { background: var(--blue-d); box-shadow: 0 12px 20px -12px rgba(13,66,168,.65); }
.pill.dark:active { box-shadow: 0 5px 10px -8px rgba(13,66,168,.7); }
.pill.dark:focus-visible { outline-color: var(--ink); }

/* Secondary: paper, with the page's own hairline so it reads as a sibling of
   the cards rather than a disabled primary. */
.pill.light { background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: 0 12px 22px -16px rgba(16,23,32,.55); }
.pill.light:hover { background: #F1F5F9; border-color: #CBD5E1; }
.pill.light:active { box-shadow: none; }

/* Tertiary, over photography. */
.pill.line { background: transparent; color: #fff;
  border-color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* The wash arrives on hover rather than sitting there at rest — the edge is
   doing the work, and a permanent film over a photograph only greys it. */
.pill.line:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.pill.line:focus-visible { outline-color: #fff; }
/* The disc, same proportions as the primary's: nearly the full inner height,
   the glyph half of it, and the pill trading its right padding for it. White
   here, with the arrow in the page's ink, because the pill has no fill of its
   own for a white glyph to sit against. */
.pill.line:has(> .ico.go) { padding: 0.35rem 0.35rem 0.35rem 1.5rem; gap: 0.75rem; }
.pill.line > .ico.go { width: 38px; height: 38px; padding: 11px; border-radius: 999px;
  background: #fff; color: var(--ink); stroke-width: 2.2; }
.pill.line:hover > .ico.go { color: var(--blue); }

/* A trailing arrow rides in a white disc, the way the round buttons elsewhere
   on the page do. The proportions are the whole job: the disc is nearly the
   full inner height of the pill, the glyph is half the disc, and the pill
   trades its right padding for the disc so the weight stays left-to-right.
   Marked with .go rather than :last-child — a leading icon that is a button's
   only element child (the phone on "Book a call") matches :last-child too, and
   was getting the disc. */
.pill.dark:has(> .ico.go) { padding: 0.35rem 0.35rem 0.35rem 1.5rem; gap: 0.75rem; }
/* Any button that spans its container centres its label in the bar rather than
   sitting beside the disc — centred as a pair, the disc ends up stranded in the
   middle of the button. It belongs on the right edge, with the label centred in
   what is left. The hero's submit, the calculator cards and the modal's
   buttons are all this kind. */
.hf-go:has(> .ico.go) { padding: 0.35rem 0.35rem 0.35rem 1.5rem; gap: 0.75rem; }
/* Buttons that span their container: the label centred in the bar, the
   disc pinned to the right edge. Centred as a PAIR, the disc was stranded
   mid-button on the price panel's and the package dialog's full-width
   "Send my brief". */
.calccard .pill.dark:has(> .ico.go),
.ep-foot .pill.dark:has(> .ico.go),
.pkd-cta:has(> .ico.go),
.cm-go:has(> .ico.go) { position: relative; padding: 0.7rem 3.4rem; gap: 0; }
.calccard .pill.dark > .ico.go,
.ep-foot .pill.dark > .ico.go,
.pkd-cta > .ico.go,
.cm-go > .ico.go { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); }
.pill.dark > .ico.go,
.hf-go > .ico.go,
.calccard .pill.dark > .ico.go {
  width: 38px; height: 38px; padding: 11px; border-radius: 999px;
  background: #fff; color: var(--blue); stroke-width: 2.2;
}
.pill.dark:hover > .ico.go, .hf-go:hover > .ico.go { color: var(--blue-d); }


:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- controls, lifted from the calculator ---------- */
/* ---- slider ---- */
/* A custom slider inside a soft card: label + big value on top, a filled track
   with a real thumb, min/max under the ends, quick presets below. */
.slider {
  display: grid; gap: 0.9rem; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(0.9rem, 2.4vw, 1.2rem) clamp(1rem, 3vw, 1.4rem);
}
.slider .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.slider .top > span { font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.slider .val { display: flex; align-items: center; gap: 0.45rem; }
.slider .val output {
  font-size: 1.35rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right;
}
.slider .val small { color: var(--muted); font-size: 0.8rem; margin-right: 0.15rem; }
.stepbtn {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: border-color 140ms, color 140ms;
}
.stepbtn:hover { border-color: var(--ink); }
.stepbtn:disabled { opacity: 0.3; cursor: default; }

.slider .track { position: relative; }
.slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--blue) 0 var(--fill, 0%), var(--line) var(--fill, 0%) 100%);
}
.slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 999px;
  background: #fff; border: 2.5px solid var(--blue); box-shadow: 0 2px 7px rgba(9,15,23,.22);
  cursor: grab; margin-top: 0;
}
.slider input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
.slider input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border: 2.5px solid var(--blue); border-radius: 999px;
  background: #fff; box-shadow: 0 2px 7px rgba(9,15,23,.22); cursor: grab;
}
.slider input[type=range]:focus-visible { outline: none; }
.slider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(17,85,214,.2); }
.slider .ticks { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.slider .ticks span { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.presets button {
  font: inherit; font-size: 0.8rem; padding: 0.32rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.presets button:hover { border-color: var(--blue); color: var(--blue); }
.presets button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
/* ---- radio rows with expandable sub-options ---- */
.rows { display: grid; gap: 0.55rem; }
.row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: border-color 150ms;
}
.row[data-on="true"] { border-color: var(--blue); }
.row > button {
  width: 100%; display: flex; align-items: center; gap: 0.75rem;
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: none; border: 0; padding: 0.85rem 1rem; cursor: pointer; text-align: left;
}
.radio {
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: border-color 150ms;
}
.radio i { width: 9px; height: 9px; border-radius: 999px; background: var(--blue); transform: scale(0); transition: transform 150ms; }
/* The selected state (aria-pressed / data-on) lives on the option BUTTON itself,
   and the radio is a descendant of it. */
[aria-pressed="true"] .radio,
[data-on="true"] .radio,
[data-on="true"] > button .radio { border-color: var(--blue); }
[aria-pressed="true"] .radio i,
[data-on="true"] .radio i,
[data-on="true"] > button .radio i { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .radio i { transition: none; } }
.row .caret { margin-left: auto; color: var(--muted); width: 1em; height: 1em; transition: transform 180ms; }
.row[data-on="true"] .caret { transform: rotate(180deg); }
.subs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; padding: 0 1rem 1rem; }
@media (max-width: 520px) { .subs { grid-template-columns: 1fr; } }
.sub {
  display: flex; align-items: flex-start; gap: 0.6rem; text-align: left;
  font: inherit; background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 0.7rem 0.8rem; cursor: pointer; color: var(--ink);
  transition: border-color 150ms, background 150ms;
}
.sub[aria-pressed="true"] { border-color: var(--blue); background: rgba(17,85,214,.05); }
.sub b { display: block; font-size: 0.9rem; font-weight: 500; }
.sub small { display: block; color: var(--muted); font-size: 0.78rem; }

/* ---- room counters ---- */
.counters { display: grid; gap: 0.5rem; }
.counter {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.62rem 0.7rem 0.62rem 1rem; font-size: 0.95rem;
}
.counter .nm, .counter > span:first-child { margin-right: auto; }
.counter .stepper { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.counter .n { font-variant-numeric: tabular-nums; min-width: 1.6ch; text-align: center; font-weight: 600; }
.counter .cbtn {
  width: 32px; height: 32px; border-radius: 999px; flex: none; cursor: pointer;
  border: 0; background: var(--blue); color: #fff; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center; transition: opacity 140ms, background 140ms;
}
.counter .cbtn:hover { background: var(--blue-d); }
.counter .cbtn:disabled { opacity: 0.35; cursor: default; background: var(--blue); }

/* ---- package rows ---- */
/* Three stacked rows, not three side-by-side cards. The cards were 920px wide
   and pulled themselves out of the column with `margin-left: 50%` to fit —
   which was aimed at a 560px column centred in the page. Beside the docked
   panel the column is 660px and no longer centred, so the same trick threw
   them off the left edge and under the panel on the right. A list needs no
   trick: it is the width of the column, at every width. */
.packs { display: grid; gap: 0.55rem; width: 100%; }
.pack {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 0.95rem 1.1rem;
  display: grid; gap: 0.3rem;
  transition: border-color 150ms, background 150ms;
}
.pack:hover { border-color: #B9C3CE; }
.pack[aria-pressed="true"] { border-color: var(--blue); background: rgba(17, 85, 214, .035); }
.pack .head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.pack .head b { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.pack .tier { color: var(--blue); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; }
/* Hung under the label rather than under the radio, so the row reads as one
   block of text with a control beside it. */
.pack p { color: var(--muted); font-size: 0.82rem; line-height: 1.45;
  margin-left: calc(20px + 0.6rem); }
@media (max-width: 420px) { .pack p { margin-left: 0; } }

/* ---- flat 2D icon tiles ---- */
/* A fixed minimum rather than a percentage basis: at 25% of its container the
   tile was a different size in the centred column and the left one, and on a
   narrow phone four of them squeezed to the minimum and overflowed. Tracks
   sized from a floor fit the same tile into whatever width there is. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.55rem; }
.tile {
  font: inherit; background: var(--bg); color: #8E9AA8;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.85rem 0.4rem 0.6rem; cursor: pointer; text-align: center;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.tile:hover { border-color: #B9C3CE; }
.tile[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.tile svg { width: 46px; height: 46px; margin: 0 auto; }
.tile .nm { display: block; font-size: 0.74rem; line-height: 1.25; margin-top: 0.45rem; color: var(--muted); }
.tile[aria-pressed="true"] .nm { color: var(--ink); }
/* Accent details keep their own colour whether or not the tile is selected —
   that two-tone read is what the reference set gets from its red. Taupe was
   the obvious pick and it failed: it matches the grey line value exactly and
   vanished. A muted brick carries against both the grey and the near-black. */
.tile .ac, .solution .ac { stroke: var(--blue); }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }

.opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.opts[hidden] { display: none; }
.opt {
  font: inherit; font-size: 0.86rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.46rem 1.05rem; cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* A pill with a number (wardrobe drawers): picked, it opens out into
   "Drawers − 2 +", the stepper sitting inside the dark pill. */
.opt.opt-qty { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0; cursor: default; }
.opt-qty .oq-nm { font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0.46rem 1.05rem; border-radius: 999px; }
.opt-qty[aria-pressed="true"] .oq-nm { padding-right: 0.1rem; }
.opt-qty .oq-step { display: inline-flex; align-items: center; gap: 0.45rem; padding-right: 0.32rem;
  animation: oq-open .2s ease both; }
.opt-qty .oq-step[hidden] { display: none; }
.opt-qty .oq-b { width: 24px; height: 24px; border-radius: 999px; border: 0; cursor: pointer; font: inherit;
  font-size: 0.95rem; line-height: 1; display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: #fff; transition: background 140ms; }
.opt-qty .oq-b:hover { background: rgba(255,255,255,.28); }
.opt-qty .oq-b:disabled { opacity: .35; cursor: default; background: rgba(255,255,255,.16); }
.opt-qty .oq-n { min-width: 1.2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes oq-open { from { opacity: 0; transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .opt-qty .oq-step { animation: none; } }
/* ---- material options ----
   A row whose every choice has a swatch in img/material/ (the shutter
   boards) keeps the rounded-rectangle option, with a small square at its
   left: the swatch sits inside that square, set in from its top and left
   and running out to its bottom and right edges. Picked, the option keeps
   its ground and a thick blue line runs round the option only. */
.opts.mats { gap: 0.5rem; }
.opt.mat { position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 5px 1rem 5px 5px; border-radius: 14px; text-align: left; }
.mat-sq { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mat-sq img { position: absolute; top: 12px; left: 12px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover; display: block; border-top-left-radius: 6px; }
.mat-nm { font-weight: 500; white-space: nowrap; }
.opt.mat[aria-pressed="true"] { background: var(--bg); border-color: transparent; color: var(--ink); }
.opt.mat:hover:not([aria-pressed="true"]) { border-color: var(--blue); }
.opt.mat::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 2.5px var(--blue); opacity: 0; transition: opacity .15s; }
.opt.mat[aria-pressed="true"]::after { opacity: 1; }

.chk { position: relative; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk span {
  display: inline-block; font-size: 0.86rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.46rem 1.05rem; cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.chk:hover span { border-color: var(--ink); }
.chk input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chk input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.arearow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--muted); }
.arearow output { color: var(--ink); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--blue); margin-top: 0.45rem; }


/* ---- option cards with a drawing ---- */
/* ---- option cards with a drawing (kitchen layout, wardrobe type) ---- */
/* Four layouts across the column. Same story as .packs: the 760px break-out
   was sized for a centred column and lands off-centre beside the panel. */
.picks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 0.6rem;
  width: 100%;
}
@media (max-width: 560px) { .picks { grid-template-columns: repeat(2, 1fr); } }
.pick {
  font: inherit; background: var(--bg); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 1rem 0.9rem 0.85rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  color: var(--ink); transition: border-color 140ms, background 140ms;
}
.pick:hover { border-color: #B9C3CE; }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
.pick svg { width: 100%; height: auto; max-width: 168px; }
.pick .nm { font-size: 0.84rem; display: flex; align-items: center; gap: 0.4rem; }
.pick .dot {
  width: 13px; height: 13px; border-radius: 999px; border: 1.5px solid var(--line);
  display: inline-block; flex: none;
}
.pick[aria-pressed="true"] .dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2.5px #fff; }

/* ==========================================================================
   The estimator itself.

   Every input is on ONE page and the price moves as you answer. That is why
   it is not a step wizard: a wizard hides four of the five things that move
   the number, so the figure at the end arrives from nowhere.

   The full-home page is built the way the flow it was modelled on is built —
   ask the two questions that set the scale with the home drawn beside them,
   say what is in the job, then show the SAME home at all three package levels
   side by side. A list of line items cannot tell you what the other two would
   have cost, and that is the question everybody actually has.
   ========================================================================== */
.est { padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(3rem, 7vw, 5.5rem); }
.est-top { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.est-title {
  font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.03em;
}
.est-sub { color: var(--muted); font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  margin-top: 0.7rem; max-width: 62ch; }

/* ---------- step cards ----------
   A numbered card per step. This IS a numbered sequence — you cannot price
   the walls before you have picked the shape they run along — so the numbers
   are information rather than decoration. */
.stepcard, .panelcard {
  background: var(--surface); border-radius: 18px; overflow: hidden;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.sc-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 1.15rem clamp(1.1rem, 2.4vw, 1.6rem) 1.05rem; }
.sc-n { font-size: 0.8rem; font-weight: 600; color: var(--blue); flex: none; }
.sc-t { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); letter-spacing: -0.02em; color: var(--ink); }
.sc-body { padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.3rem, 2.6vw, 1.7rem); }
/* The step number: a blue ring with the figure in it (2026-10-13). */
.sc-num { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2px solid var(--blue);
  display: grid; place-items: center; color: var(--blue); font-weight: 600; font-size: 1.02rem;
  line-height: 1; font-variant-numeric: tabular-nums; }
/* Which wardrobe a question changes: its own pill beside the title, not part of it. */
.sc-for { flex: none; margin-left: auto; font-size: 0.78rem; font-weight: 600; line-height: 1; color: #fff;
  background: var(--blue); border-radius: 999px; padding: 0.4rem 0.7rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fg-h { font-size: 0.95rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.fg-note { color: var(--muted); font-size: 0.86rem; margin-top: 0.22rem; max-width: 62ch; }
.fg-c { margin-top: 0.85rem; }
.fblock + .fblock { margin-top: clamp(1.4rem, 3vw, 1.9rem); }
.est-stack { display: grid; gap: 1rem; }
/* The homepage centres these for its centred column; here the form reads left. */
.est .opts, .est .tiles, .est .presets { justify-content: flex-start; }
.est .picks, .est .packs, .est .tiles { width: 100%; }

/* ---------- step 1: the two questions ----------
   Just the questions, in a card no wider than they need. */
.pc-body { padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.3rem, 2.6vw, 1.7rem); }
.est-start .panelcard { max-width: 44rem; }

/* ---------- the summary strip ----------
   What is in the job, in the same words the scope tiles use. It sits between
   the questions and the money because it is the bridge: this is what you have
   asked for, and this is what that costs. */
.sumbar { display: grid; gap: 1px; background: var(--line);
  border-radius: 18px; overflow: hidden; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 720px) { .sumbar { grid-template-columns: repeat(3, 1fr); } }
.sum-cell { display: flex; align-items: center; gap: 0.8rem;
  background: var(--surface); padding: 1rem clamp(1.1rem, 2.4vw, 1.5rem); }
.sum-ico { width: 40px; height: 40px; flex: none; color: #C7D0DA; }
.sum-ico svg { width: 100%; height: 100%; }
.sum-ico .ac { stroke: var(--blue); }
.sum-cell[data-on="true"] .sum-ico { color: #8E9AA8; }
.sum-t b { display: block; font-size: 0.94rem; font-weight: 600; color: var(--ink); }
.sum-t i { display: block; font-style: normal; font-size: 0.82rem; color: var(--muted); }
.sum-cell[data-on="false"] .sum-t b { color: #A7B2BF; }

/* ---------- line items (the kitchen panel's list) ---------- */
.ep-lines { width: 100%; border-collapse: collapse; }
.ep-lines tr { display: block; padding: 0 clamp(1.1rem, 2.4vw, 1.5rem); margin-block: 0.8rem; }
.ep-lines td { display: block; padding: 0; border: 0; }
.ep-lines td:first-child { font-size: 0.8rem; color: var(--muted); }
.ep-lines td:last-child { font-size: 0.95rem; font-weight: 500; color: var(--ink);
  margin-top: 0.08rem; font-variant-numeric: tabular-nums; }
/* A line you have not asked for is still worth naming, so the list reads as a
   complete bill of what a job like this contains rather than only the parts
   you happened to tick. */
.ep-lines tr[data-state="off"] td { color: #A7B2BF; }
.ep-lines tr[data-state="off"] td:last-child { font-weight: 400; }

.est-foot { margin-top: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 1rem;
  justify-items: start; max-width: 62ch; }
.ep-note { font-size: 0.8rem; line-height: 1.55; color: var(--muted); }

/* ---------- kitchen page: the running total in a column ---------- */
.est-wrap { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 1000px) {
  .est-wrap { grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.6rem, 3vw, 2.4rem); }
}
.est-col { min-width: 0; }
.estpanel { background: var(--surface); border-radius: 18px; display: flex; flex-direction: column; }
@media (min-width: 1000px) {
  /* Sticky, not fixed: this is a page with a header over it and a footer under
     it, and a panel pinned to the window would sail over both. */
  .estpanel { position: sticky; top: clamp(1rem, 3vh, 1.8rem);
    /* Never taller than the window, or the foot of it — the note and the
       button — can never be reached. The line items scroll instead. */
    max-height: calc(100svh - 2 * clamp(1rem, 3vh, 1.8rem)); }
  .estpanel .ep-body { flex: 1 1 auto; min-height: 0; }
}
.ep-plan { background: var(--bg); border-radius: 14px; margin: 0.8rem 0.8rem 0; padding: 0.4rem; }
.ep-plan > svg { width: 100%; height: auto; display: block; }
.ep-head {
  display: flex; align-items: baseline; gap: 0.6rem; width: 100%;
  font: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.25rem 1.35rem 1rem; flex: none;
}
.ep-label { font-size: 0.8rem; color: var(--muted); }
.ep-total {
  font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: 1.45rem; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.ep-chev { width: 18px; height: 18px; flex: none; color: var(--muted);
  align-self: center; transition: transform 300ms cubic-bezier(.4,0,.2,1); }
.estpanel[data-open="true"] .ep-chev { transform: rotate(180deg); }
.ep-body { overflow: hidden auto; }
.ep-foot { flex: none; padding: 0.6rem 1.35rem 1.35rem; display: grid; gap: 0.85rem; }
.ep-foot .pill { justify-content: center; }
@media (min-width: 1000px) {
  .ep-head { cursor: default; pointer-events: none; display: block;
    padding: 1.35rem 1.35rem 1.1rem; }
  .ep-total { display: block; margin-left: 0; margin-top: 0.15rem;
    font-size: clamp(1.6rem, 2.2vw, 1.95rem); }
  .ep-chev { display: none; }
  .estpanel .ep-lines tbody { display: block; }
}
@media (max-width: 999px) {
  /* A bar over the foot of the screen, pulled up for the breakdown. */
  .estpanel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    width: min(560px, calc(100% - 1.2rem)); margin-inline: auto;
    border-radius: 18px 18px 0 0; box-shadow: 0 -16px 44px rgba(9,15,23,.12);
    max-height: 82vh;
  }
  .estpanel .ep-plan { display: none; }
  .estpanel .ep-body { max-height: 0; transition: max-height 340ms cubic-bezier(.4,0,.2,1); }
  .estpanel[data-open="true"] .ep-body { max-height: 52vh; }
  .estpanel:not([data-open="true"]) .ep-note { display: none; }
  .est-wrap ~ *, .est-col { }
  body:has(.estpanel) .est { padding-bottom: 11rem; }
}
@media (prefers-reduced-motion: reduce) { .ep-chev, .ep-body, .tier { transition: none; } }

/* ---------- kitchen: shapes, walls, accessories ---------- */
/* The wall names live around the drawing, which is the only way "Wall-A" in
   the next question means anything. */
/* Room at the foot as well as the head, so a wall named BELOW the drawing
   (Parallel's Wall-C) sits in its own space instead of on the layout name. */
.pk-wrap { position: relative; display: block; padding: 16px 20px 14px 24px; }
.pk-lab { position: absolute; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--muted); }
.pk-top { top: 0; left: 24px; right: 20px; text-align: center; }
.pk-bottom { bottom: 0; left: 24px; right: 20px; text-align: center; }
.pk-left { left: 0; top: 16px; bottom: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  display: grid; place-items: center; }
.pk-right { right: 0; top: 16px; bottom: 0; writing-mode: vertical-rl;
  display: grid; place-items: center; }
.pick .pk-wrap svg { max-width: none; width: 100%; }

.walls { display: grid; gap: 0.7rem; }
.wall { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.7rem 0.9rem; }
.wall-nm { font-size: 0.92rem; color: var(--ink); margin-right: auto; }
.wall.wall-ret, .top-dep, .bfc-dep { transition: opacity 160ms; }
.top-dep[data-off="true"], .bfc-dep[data-off="true"] { opacity: .4; }
.bfc-match { font-size: 0.84rem; color: var(--muted); }
.wall.wall-ret[data-off="true"] { opacity: .4; }
.wall .num { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.wall .num b { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
  font-size: 1.05rem; font-weight: 600; }
.wall .num small { color: var(--muted); font-size: 0.78rem; margin-left: -0.25rem; }

/* ---- accessories (owner-approved mockup v2, 2026-10-15) ----
   Photographs on white, no card around them. The photo is the button; a tick
   marks what is added; a frosted counter sits on the photo for items that can
   be had more than once, so the words underneath never move. Square photos,
   three across in a wide column, two in a narrow one (owner 2026-10-15). */
.acc { container-type: inline-size; }
/* The starter sets: quiet pills, the chosen one in ink. */
.acc-sets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.acc-set { font: inherit; font-size: 0.82rem; color: var(--ink); cursor: pointer; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); padding: 0.45rem 0.95rem;
  display: inline-flex; align-items: baseline; gap: 0.45rem; transition: border-color .15s, background .15s, color .15s; }
.acc-set small { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc-set:hover:not(:disabled) { border-color: #B9C6D6; }
.acc-set[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.acc-set[aria-pressed="true"] small { color: rgba(255,255,255,.7); }
.acc-set:disabled { opacity: .45; cursor: default; }
@media (max-width: 520px) {
  .acc-sets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * clamp(1.1rem, 2.4vw, 1.6rem)); padding-inline: clamp(1.1rem, 2.4vw, 1.6rem); }
  .acc-sets::-webkit-scrollbar { display: none; }
  .acc-set { flex: none; white-space: nowrap; }
}
.acc-sum { margin-left: auto; font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc-sum b { font-weight: 600; color: var(--ink); }
/* Narrow: one even two-across grid, no group headings (groups of three would
   each leave a lone photo). Wide: the groups, three across. */
.acc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 0.85rem; }
.acc-g, .acc-grid { display: contents; }
.acc-gh { display: none; font-size: 0.84rem; font-weight: 500; color: var(--muted); margin-bottom: 0.85rem; }
@container (min-width: 520px) {
  .acc-in, .acc-g { display: block; }
  .acc-gh { display: block; }
  .acc-g + .acc-g { margin-top: 2rem; }
  /* Capped at ~150px a photo (owner: "too big" at a full third of the column). */
  /* Six tracks: a square takes two, so three sit across; in a group of two each
     takes three, filling the row, and stays square (owner 2026-10-15). */
  .acc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 75px)); gap: 1.3rem 1rem; }
  .acc-grid .acc-card { grid-column: span 2; }
  .acc-grid[data-n="2"] .acc-card { grid-column: span 3; }
  .acc-grid[data-n="2"] .acc-art { aspect-ratio: 1; }
  .acc-g + .acc-g { margin-top: 1.6rem; }
  .acc-art { border-radius: 12px; }
  .acc-mk { top: 0.45rem; right: 0.45rem; width: 24px; height: 24px; }
  .acc-mk svg { width: 12px; height: 12px; }
  .acc-qty { left: 0.4rem; bottom: 0.4rem; }
  .acc-qty button { width: 22px; height: 22px; font-size: 0.9rem; }
  .acc-qty b { font-size: 0.8rem; }
  .acc-nm { font-size: 0.84rem; }
}
/* Wide enough for two groups side by side: each keeps its three columns of
   small squares, and the step is two rows deep instead of four. */
@container (min-width: 700px) {
  .acc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.2rem; }
  .acc-g + .acc-g { margin-top: 0; }
  .acc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem 0.8rem; }
}
.acc-card { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; }
.acc-wrap { position: relative; }
.acc-art { position: relative; display: grid; place-items: center; width: 100%; padding: 0; border: 0;
  cursor: pointer; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: var(--bg); color: #8E9AA8;
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .3s ease; }
.acc-art.photo { background: #EFEEEB; }
.acc-art img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.acc-art:hover img { transform: scale(1.03); }
.acc-art > svg { width: 52px; height: 52px; }
.acc-art .ac { stroke: var(--blue); }
.acc-art:focus-visible, .acc-card[data-on="true"] .acc-art { outline-color: var(--blue); }
.acc-mk { position: absolute; top: 0.6rem; right: 0.6rem; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(16,23,32,.10); transition: background .3s, color .3s; }
.acc-mk svg { width: 14px; height: 14px; }
.acc-mk .tick, .acc-card[data-on="true"] .acc-mk .plus { display: none; }
.acc-card[data-on="true"] .acc-mk .tick { display: block; }
.acc-card[data-on="true"] .acc-mk { background: var(--blue); color: #fff; }
.acc-qty { position: absolute; left: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.1rem;
  padding: 0.2rem; border-radius: 999px; background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(16,23,32,.10);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .3s, transform .3s; }
.acc-card[data-on="true"] .acc-qty.multi { opacity: 1; transform: none; pointer-events: auto; }
.acc-qty b { min-width: 1.8ch; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.acc-qty button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: transparent;
  color: var(--ink); font-size: 1rem; line-height: 1; display: grid; place-items: center; transition: background .2s; }
.acc-qty button:hover { background: rgba(16,23,32,.06); }
.acc-qty button:disabled { opacity: .3; cursor: default; background: transparent; }
.acc-tx { padding-inline: 0.15rem; }
.acc-nm { font-size: 0.88rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.acc-pr { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .acc-art, .acc-art img, .acc-qty, .acc-mk { transition: none; } }

/* ==========================================================================
   Full home: two views, and the package cards.
   ========================================================================== */
.est[data-view="start"]  .est-result { display: none; }
.est[data-view="result"] .est-start  { display: none; }

.pc-opts .est-go { margin-top: clamp(1.4rem, 3vw, 1.9rem); }

/* ---------- the top of the estimate ---------- */
.res-top { margin-bottom: clamp(1.2rem, 2.8vw, 1.8rem); max-width: 50rem; }
.res-top .est-title:focus { outline: none; }
/* The blog post's "Back to blog" button, exactly: a ghost pill with the
   arrow in a white disc that leads, inverting on hover. */
.pill.ghost { background: transparent; color: var(--ink); border-color: #D3D9E1; font-family: inherit; }
.pill.ghost:hover { border-color: var(--ink); }
.pill.ghost:has(> .ico.go) { padding: 0.35rem 1.5rem 0.35rem 0.35rem; gap: 0.75rem; }
.pill.ghost > .ico.go { width: 38px; height: 38px; padding: 11px; border-radius: 999px;
  background: var(--surface); color: var(--ink); stroke-width: 2.2; transition: background 160ms ease, color 160ms ease; }
.pill.ghost:hover > .ico.go { background: var(--ink); color: var(--surface); }
.res-back { margin-bottom: 1.1rem; }

/* ---------- the scope strip, with "What's included" under it ---------- */
.sumbox { background: var(--surface); border-radius: 18px; overflow: hidden;
  margin-bottom: 0.8rem; }
.sumbox .sumbar { margin: 0; border-radius: 0; }
.sum-inc { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem clamp(1.1rem, 2.4vw, 1.5rem); border-top: 1px solid var(--line);
  background: var(--bg); font-size: 0.88rem; color: var(--ink); }
.sum-inc b { font-weight: 600; }
.sum-home { color: var(--muted); }
/* Edit is a button now (owner 2026-10-19): a small outlined pill with a pencil. */
.sum-edit { font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--ink); flex: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none;
  transition: border-color .15s, background .15s, color .15s; }
.sum-edit svg { width: 15px; height: 15px; }
.sum-edit:hover { border-color: var(--ink); }
.sum-edit:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- modify requirements: the trigger ---------- */
.modify-row { display: flex; justify-content: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.modify-btn { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit;
  font-size: 0.92rem; font-weight: 600; color: var(--ink); background: none; border: 0;
  padding: 0.5rem 0.25rem; cursor: pointer; }
/* Points the way the panel will come from. */
.modify-btn::after { content: ""; width: 0; height: 0; border-left: 6px solid var(--blue);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform 160ms ease; }
.modify-btn:hover::after { transform: translateX(2px); }

/* ---------- the package cards ---------- */
.pks { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .pks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pk { background: var(--surface); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; position: relative; cursor: pointer; }
/* The radio before the name: an empty ring, or, on the blue header of the
   chosen package, a white ring with a white dot in it. */
.pk-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; margin-right: 0.15rem;
  box-shadow: inset 0 0 0 1.5px #B8BEC8; background: var(--surface);
  transition: box-shadow .15s, background .15s; }
.pk:hover .pk-radio { box-shadow: inset 0 0 0 1.5px var(--blue); }
.pk[aria-checked="true"] .pk-radio { box-shadow: inset 0 0 0 2px #fff;
  background: radial-gradient(circle, #fff 0 4.5px, transparent 5px); }
.pk:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.pk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem;
  padding: 1.15rem clamp(1rem, 2vw, 1.3rem) 0.85rem; margin-bottom: 0.6rem;
  transition: background-color .2s; }
/* The chosen package: its header turns solid blue and everything on it white.
   The gap under every header keeps the band off the photographs without the
   chosen card growing taller than the others. */
.pk[aria-checked="true"] .pk-head { background: var(--blue); }
/* …with a soft sheen across it, like light running over a glossy surface:
   a faint fixed highlight up top, and a diagonal glint that sweeps across
   now and then. */
.pk-head { position: relative; overflow: hidden; }
.pk[aria-checked="true"] .pk-head {
  /* The sheen on the top of the card: light that fades smoothly down the
     blue with no edge to it, a soft light pooled in the corner, and a touch
     of depth at the foot. Static; the glint below is separate. */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22) 0, rgba(255,255,255,.13) 22%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 78%),
    radial-gradient(130% 110% at 8% -30%, rgba(255,255,255,.3), rgba(255,255,255,0) 62%),
    linear-gradient(0deg, rgba(4,30,90,.22), rgba(4,30,90,0) 48%); }
.pk[aria-checked="true"] .pk-head::after { content: ""; position: absolute; top: -50%; bottom: -50%;
  left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.32) 50%, rgba(255,255,255,.08) 65%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-18deg); animation: pk-glint 4.2s cubic-bezier(.4,0,.2,1) .25s infinite; }
@keyframes pk-glint {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  38%, 100% { transform: translateX(340%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .pk[aria-checked="true"] .pk-head::after { display: none; } }
.pk[aria-checked="true"] :is(.pk-t h3, .pk-line, .pk-money, .pk-more) { color: #fff; }
.pk[aria-checked="true"] .pk-badge { background: #fff; color: var(--blue); }
.pk-t { min-width: 0; }
.pk-t h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem;
  font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem); letter-spacing: -0.02em; color: var(--ink); }
.pk-badge { display: none; font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.02em; color: #fff; background: var(--blue); border-radius: 4px;
  padding: 0.18rem 0.45rem; }
.pk[data-rec="true"] .pk-badge { display: inline-block; }
.pk-line { font-size: 0.84rem; color: var(--muted); margin-top: 0.3rem; }
.pk-r { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex: none; text-align: right; }
/* The number is the reason the card exists; it takes the accent and the
   largest type on the card. */
.pk-money { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.03em; color: var(--blue);
  font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.pk-more { font: inherit; font-size: 0.84rem; color: var(--ink); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pk-more:hover { color: var(--blue); }

/* ---------- the slideshow ----------
   Centre photograph large; its neighbours shrunk to 86% and pinned by their
   NEAR edge (transform-origin), so however big the card is the same sliver
   of the next room shows at each side. A move is one transition on
   transform, which the compositor does on its own — no layout, no jank. */
.pk-show { position: relative; outline: none; padding-block: 2px; }
.pk-show:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 12px; }
.pk-track {
  position: relative; overflow: hidden; touch-action: pan-y;
  /* The centre slide is 78% of the card at 16:11; the stage is that tall. */
  aspect-ratio: 100 / 53.6;
}
.pk-slide {
  position: absolute; top: 0; bottom: 0; left: 11%; width: 78%; margin: 0;
  border-radius: 14px; overflow: hidden; background: #E1E3E7; cursor: pointer;
  transition: transform 520ms cubic-bezier(.22, .7, .16, 1), opacity 420ms ease, filter 420ms ease;
  will-change: transform;
}
.pk-slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pk-slide[data-pos="0"]  { z-index: 2; transform: none; cursor: default; }
.pk-slide[data-pos="1"]  { z-index: 1; transform-origin: left center;
  transform: translateX(calc(100% + 12px)) scale(.86); }
.pk-slide[data-pos="-1"] { z-index: 1; transform-origin: right center;
  transform: translateX(calc(-100% - 12px)) scale(.86); }
.pk-slide[data-pos="2"]  { z-index: 0; opacity: 0; transform-origin: left center;
  transform: translateX(calc(200% + 24px)) scale(.86); }
.pk-slide[data-pos="-2"] { z-index: 0; opacity: 0; transform-origin: right center;
  transform: translateX(calc(-200% - 24px)) scale(.86); }
/* The neighbours are a step back, not a second subject. */
.pk-slide[data-pos="1"], .pk-slide[data-pos="-1"] { filter: saturate(.85) brightness(.97); }
.pk-slide.pk-still { transition: none; }

.pk-slide figcaption { position: absolute; left: 0.7rem; bottom: 0.7rem;
  font-size: 0.72rem; font-weight: 500; color: #fff; background: rgba(9, 15, 23, .5);
  padding: 0.22rem 0.6rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(4px); transition: opacity 300ms ease 180ms, transform 300ms ease 180ms; }
/* Only the room in front says what it is. */
.pk-slide[data-pos="0"] figcaption { opacity: 1; transform: none; }

/* Tabs at the very edge, over the slivers of the next rooms — where the eye
   already is when it wants the next one. */
.pk-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 26px; height: 46px; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(246, 248, 251, .88); border: 1px solid rgba(16, 23, 32, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 150ms ease, width 150ms ease; }
.pk-arrow:hover { background: #fff; width: 30px; }
.pk-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pk-arrow svg { width: 15px; height: 15px; }
.pk-arrow.prev { left: 0; border-radius: 0 8px 8px 0; border-left: 0; }
.pk-arrow.next { right: 0; border-radius: 8px 0 0 8px; border-right: 0; }

.pk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

@media (prefers-reduced-motion: reduce) {
  .pk-slide, .pk-slide figcaption { transition: none; }
}

/* ---------- the split along the foot ---------- */
/* The three figures sit at the start, middle and end, and each plus sits in
   the middle of the space between its two neighbours. */
.pk-foot { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center;
  margin-top: 0.95rem; background: var(--bg); padding: 0.85rem clamp(0.6rem, 1.4vw, 0.9rem);
  border-top: 1px solid var(--line); }
.pk-cell { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.pk-ico { width: 30px; height: 30px; flex: none; color: #8E9AA8; }
.pk-ico svg { width: 100%; height: 100%; }
.pk-ico .ac { stroke: var(--blue); }
.pk-v { min-width: 0; }
.pk-v i { display: block; font-style: normal; font-size: 0.72rem; color: var(--muted); }
.pk-v b { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-plus { width: 18px; height: 18px; margin-inline: 0.2rem; border-radius: 999px; justify-self: center;
  display: grid; place-items: center; font-size: 0.8rem; line-height: 1; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 420px) {
  .pk-ico { display: none; }
}

/* ---------- "View details" ---------- */
.pkd { border: 0; padding: 0; margin: auto; width: min(560px, calc(100% - 1.6rem));
  max-height: min(88svh, 900px); border-radius: 18px; background: var(--surface);
  color: var(--ink); box-shadow: 0 30px 80px rgba(9, 15, 23, .28); }
.pkd::backdrop { background: rgba(9, 15, 23, .5); }
/* In: the backdrop fades and the card rises a little as it settles. Out:
   the reverse, a touch quicker (softClose in assets/estimator.js). */
.pkd[open] { animation: pkd-in 300ms cubic-bezier(.22, .8, .2, 1); }
.pkd[open]::backdrop { animation: pkd-dim 300ms ease; }
.pkd.pkd-closing { animation: pkd-out 200ms ease-in forwards; }
.pkd.pkd-closing::backdrop { animation: pkd-dim-out 200ms ease-in forwards; }
@keyframes pkd-in  { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes pkd-out { to   { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes pkd-dim { from { opacity: 0; } }
@keyframes pkd-dim-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pkd[open], .pkd[open]::backdrop, .pkd.pkd-closing, .pkd.pkd-closing::backdrop { animation: none; }
}
.pkd-in { max-height: inherit; overflow: auto; padding: clamp(1.2rem, 3vw, 1.7rem); }
.pkd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pkd-head h2 { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: 1.3rem; letter-spacing: -0.025em; }
.pkd-line { font-size: 0.86rem; color: var(--muted); margin-top: 0.2rem; }
.pkd-x { width: 36px; height: 36px; flex: none; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pkd-x svg { width: 16px; height: 16px; }
.pkd-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding: 0.9rem 1rem; background: var(--bg); border-radius: 12px; }
.pkd-total span { font-size: 0.86rem; color: var(--muted); }
.pkd-total strong { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.pkd-blurb { font-size: 0.9rem; color: var(--ink); margin-top: 1.1rem; }
.pkd-feats { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem;
  font-size: 0.86rem; color: var(--muted); }
.pkd-groups { margin-top: 1.3rem; display: grid; gap: 1rem; }
.pkd-g h3 { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 600;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.pkd-g h3 em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.pkd-g ul { list-style: none; margin: 0; padding: 0; }
.pkd-g li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.55rem 0 0.55rem 2.2rem; }
.pkd-g li + li { border-top: 1px solid rgba(16, 23, 32, .055); }
.pkd-g li b { display: block; font-size: 0.88rem; font-weight: 500; }
.pkd-g li i { display: block; font-style: normal; font-size: 0.76rem; color: var(--muted); }
.pkd-g li em { font-style: normal; font-size: 0.88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pkd-none { color: var(--muted); font-size: 0.84rem; }
.pkd .ep-note { margin-top: 1.2rem; }
.pkd-cta { margin-top: 1rem; width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) { .modify > summary::after, .pk { transition: none; } }

/* ---------- What's included: the edit panel ----------
   Slides in from the right over a dimmed page, like theirs. The close button
   sits OUTSIDE the panel on the dim — the one place it cannot be mistaken
   for part of the form. */
.pnl { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(520px, 100%); height: 100dvh; max-height: none; max-width: none;
  background: var(--surface); color: var(--ink); overflow: visible;
  box-shadow: -24px 0 60px rgba(9, 15, 23, .18); }
.pnl::backdrop { background: rgba(9, 15, 23, .5); }
.pnl[open] { animation: pnl-in 280ms cubic-bezier(.22, .7, .16, 1); }
.pnl[open]::backdrop { animation: pnl-dim 280ms ease; }
.pnl.pnl-closing { animation: pnl-out 220ms ease forwards; }
.pnl.pnl-closing::backdrop { animation: pnl-dim 220ms ease reverse forwards; }
@keyframes pnl-in  { from { transform: translateX(100%); } }
@keyframes pnl-out { to   { transform: translateX(100%); } }
@keyframes pnl-dim { from { opacity: 0; } }

.pnl-x { position: absolute; top: 16px; left: -56px; width: 40px; height: 40px;
  border-radius: 999px; border: 0; background: var(--ink); color: #fff;
  display: grid; place-items: center; cursor: pointer; }
.pnl-x svg { width: 18px; height: 18px; }
.pnl-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  .pnl-x { left: auto; right: 12px; top: 12px; width: 36px; height: 36px;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
}

.pnl-in { height: 100%; display: flex; flex-direction: column;
  border-radius: inherit; overflow: hidden; }
/* Held 12px off the top and bottom of the window and rounded on the two
   corners that stand free — the same fitting as the calculator's brief panel.
   The right edge is the window's, so it stays square and flush. On a phone
   the panel is the whole screen and has no free corner to round. */
@media (min-width: 601px) {
  .pnl { inset: 12px 0 12px auto; height: calc(100dvh - 24px); border-radius: 18px 0 0 18px; }
  .pnl-x { top: 4px; }
}
/* Title left, Save right — the action sits where the eye starts, and stays
   in view however far down a tab the reader has scrolled. */
.pnl-head { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
.pnl-head h2 { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.02em; }

/* A segmented control: the job split three ways, one at a time. */
.pnl-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 1.1rem 1.5rem 0.4rem; border: 1px solid var(--blue); border-radius: 10px; overflow: hidden; }
.pnl-tabs button { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--blue);
  background: var(--surface); border: 0; padding: 0.8rem 0.4rem; cursor: pointer;
  transition: background 150ms ease, color 150ms ease; }
.pnl-tabs button + button { border-left: 1px solid var(--blue); }
.pnl-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.pnl-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

.pnl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.9rem 1.5rem 1.6rem; }
.pnl-panel[hidden] { display: none; }

.pnl-ihead { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px dashed var(--line); margin-bottom: 1rem; }
.pnl-inc { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.pnl-inc input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; flex: none; }
/* A package-set choice shown under the item's name (wall decor's treatment). */
.pnl-inc-t { display: flex; flex-direction: column; gap: 0.1rem; }
.pnl-sub { font-size: 0.76rem; font-weight: 400; color: var(--muted); }
.pnl-range { font-size: 0.84rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Switched off: still visible, so it is obvious what ticking it brings back. */
.pnl-dep { transition: opacity 180ms ease; }
.pnl-dep[data-off="true"] { opacity: .4; }

.pnl-fields { display: grid; gap: 1rem; }
.pnl-field { display: grid; gap: 0.45rem; }
.pnl-field[hidden] { display: none; }
.pnl-field + .pnl-field, .pnl-dep > * + * { margin-top: 1.1rem; }
.pnl-lb { font-size: 0.82rem; color: var(--muted); }
.pnl-note { font-size: 0.78rem; color: var(--muted); margin-top: -0.25rem; }
.pnl-field .num { display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start; }
.pnl-field .num b { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
  font-size: 1.05rem; font-weight: 600; }
.pnl-field .num small { color: var(--muted); font-size: 0.78rem; margin-left: -0.3rem; }
.pnl .opt { font-size: 0.82rem; padding: 0.38rem 0.85rem; }
.pnl .opts, .pnl .presets { justify-content: flex-start; }
.pnl .picks { grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.pnl .pick { padding: 0.55rem 0.4rem 0.5rem; gap: 0.4rem; }
.pnl .pick .nm { font-size: 0.74rem; }
.pnl .pk-wrap { padding: 12px 10px 12px 14px; }
.pnl .pk-lab { font-size: 0.56rem; }
.pnl .pk-top { left: 14px; right: 10px; }
.pnl .pk-bottom { left: 14px; right: 10px; }
@media (max-width: 460px) { .pnl .picks { grid-template-columns: repeat(2, 1fr); } }
.pnl-plan { display: block; width: 100%; height: auto; background: var(--bg); border-radius: 12px; }
.pnl .wall { background: var(--bg); }

.pnl-items { margin-top: 1.3rem; display: grid; gap: 0.5rem; }
.pnl-item { border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  transition: border-color 150ms ease, background 150ms ease; }
.pnl-item[data-on="true"] { background: var(--surface); }
.pnl-item[data-open="true"] { border-color: var(--blue); }
.pnl-item .pnl-ihead { border: 0; margin: 0; padding: 0.65rem 0.75rem; gap: 0.6rem; }
.pnl-item .pnl-inc { margin-right: auto; font-weight: 500; font-size: 0.9rem; }
.pnl-ico { width: 30px; height: 30px; flex: none; color: #8E9AA8; }
.pnl-ico svg { width: 100%; height: 100%; }
.pnl-ico .ac { stroke: var(--blue); }
.pnl-item .pnl-range { font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.pnl-item[data-on="true"] .pnl-range { color: var(--ink); }
.pnl-more { width: 28px; height: 28px; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--muted); display: grid; place-items: center; border-radius: 8px; }
.pnl-more svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.pnl-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.pnl-more:hover { background: var(--bg); color: var(--ink); }
.pnl-item > .pnl-fields { padding: 0.2rem 0.85rem 0.95rem; }
.pnl-item > .pnl-fields[hidden] { display: none; }

.pnl-save { flex: none; font: inherit; font-size: 0.88rem; font-weight: 600; color: #fff;
  background: var(--blue); border: 0; border-radius: 999px; padding: 0.6rem 1.2rem; cursor: pointer;
  transition: background 150ms ease, color 150ms ease; }
.pnl-save:hover:not(:disabled) { background: var(--blue-d); }
.pnl-save:disabled { background: #E3E8EF; color: #8E9AA8; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .pnl[open], .pnl[open]::backdrop, .pnl.pnl-closing, .pnl.pnl-closing::backdrop { animation: none; }
}


/* Phone: the close button sits in the header's top-right corner, so the
   header keeps clear of it. After the header's own padding, or that wins. */
@media (max-width: 600px) { .pnl-head { padding-right: 3.8rem; } }

/* ---------- scrollbars ----------
   The estimator's own scrolling areas — the edit panel, the details sheet,
   the kitchen page's price column — get a slim scrollbar in the page's
   greys: a rounded thumb inset from its track, no arrows, darker on hover.

   Two mechanisms, deliberately kept apart: Chromium and Safari take the
   ::-webkit-scrollbar rules; Firefox only understands scrollbar-width and
   scrollbar-color. The standard pair goes inside @supports, because a
   Chromium that sees scrollbar-color set ignores the webkit rules entirely
   and falls back to a plain grey bar. */
.pnl-body, .pkd-in, .ep-body { --sb-thumb: #C9D2DD; --sb-thumb-h: #9EABBB; }
.pnl-body::-webkit-scrollbar, .pkd-in::-webkit-scrollbar, .ep-body::-webkit-scrollbar {
  width: 12px; height: 12px; }
/* Inset top and bottom: these boxes have rounded corners, and a track that
   ran the full height had the thumb's ends shaved off by them. */
.pnl-body::-webkit-scrollbar-track, .pkd-in::-webkit-scrollbar-track, .ep-body::-webkit-scrollbar-track {
  background: transparent; margin-block: 16px; }
.pnl-body::-webkit-scrollbar-thumb, .pkd-in::-webkit-scrollbar-thumb, .ep-body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: 999px;
  /* A transparent border inset from the edges, so the thumb reads as a slim
     pill floating in the gutter rather than a bar welded to the side. */
  border: 3px solid transparent; background-clip: padding-box; }
.pnl-body::-webkit-scrollbar-thumb:hover, .pkd-in::-webkit-scrollbar-thumb:hover, .ep-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-h); }
.pnl-body::-webkit-scrollbar-button, .pkd-in::-webkit-scrollbar-button, .ep-body::-webkit-scrollbar-button {
  display: none; }
@supports not selector(::-webkit-scrollbar) {
  .pnl-body, .pkd-in, .ep-body { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

/* ---------- "Send my brief": the estimate, to the studio ----------
   The package dialog's shell (.pkd), with ruled fields like the contact page. */
.esend { width: min(480px, calc(100% - 1.6rem)); }
/* The estimate as a receipt (2026-10-13). */
.es-rc { margin-top: 1.1rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.es-rc-top { display: flex; align-items: center; gap: 0.45rem; padding: 0.95rem 1.1rem 0; }
.es-rc-k { font-size: 0.8rem; color: var(--muted); }
.es-rc-chip { font-size: 0.7rem; font-weight: 600; line-height: 1; color: var(--blue); background: #EEF3FD;
  border-radius: 999px; padding: 0.3rem 0.55rem; }
.es-rc-chip[hidden] { display: none; }
.es-rc-v { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 1.1rem 0.95rem; color: #15803D; }
.es-rc-amt { font-family: "Archivo", "Plus Jakarta Sans", var(--sans); font-weight: 700; font-size: 2.15rem;
  letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.es-rc-seal { flex: none; color: #16A34A; }
.es-rc-foot { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.6rem 1.1rem;
  background: var(--bg); border-top: 1px dashed #CBD5E1; font-size: 0.74rem; color: var(--muted); }
.es-rc-foot svg { flex: none; }
.es-fields { display: grid; gap: 1.05rem; margin-top: 1.3rem; }
.es-fields[hidden] { display: none; }
.es-f { display: grid; gap: 0.35rem; }
.es-f span { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.es-f input { font: inherit; font-size: 0.98rem; color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.45rem 0;
  transition: border-color .18s; }
.es-f input::placeholder { color: #A3ADB9; }
.es-f input:focus { outline: none; border-bottom-color: var(--blue); }
/* Plain near-black text beside a red info icon, as in the code dialogs. */
.es-err { min-height: 1.2em; margin-top: 0.8rem; font-size: 0.8rem; line-height: 1.45; color: var(--ink); }
.es-err:not(:empty) { display: flex; align-items: flex-start; gap: 0.5rem; }
.es-err:not(:empty)::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 0.08rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5484D' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Sized to its word, at the left edge the fields share; the arrow disc
   trails the label as it does on the site's other buttons. */
.es-go { width: auto; margin-top: 0.4rem; }
.es-go:has(> .ico.go) { padding: 0.35rem 0.35rem 0.35rem 1.5rem; gap: 0.75rem; }
.es-go[disabled] { opacity: .6; cursor: progress; }
.es-go[hidden], .es-err[hidden] { display: none; }
.es-done { margin-top: 1.3rem; }
.es-done h2 { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.02em; }

/* ---- the wardrobes, as a choice (2026-10-13) ----
   Under the count in step 1: a radio row per wardrobe. The picked one has an ink outline and a
   filled dot -- the same language as the type pickers -- and is what the questions below change. */
.wlist { margin-top: 0.4rem; }
.wlist[hidden] { display: none; }
.wl-say { margin: 0 0 0.55rem; font-size: 0.84rem; color: var(--muted); text-align: left; }
.wl-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; }
.wl-row { position: relative; display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.wl-row:hover { border-color: #B9C3D0; }
.wl-row[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.wl-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wl-dot { flex: none; margin-top: 0.15rem; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #B9C3D0;
  display: grid; place-items: center; }
.wl-row[aria-checked="true"] .wl-dot { border-color: var(--ink); }
.wl-row[aria-checked="true"] .wl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.wl-txt { min-width: 0; flex: 1; }
.wl-txt b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; }
.wl-txt .wl-spec { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-tag { display: inline-block; margin-top: 0.45rem; font-size: 0.72rem; font-weight: 500; line-height: 1; white-space: nowrap;
  padding: 0.32rem 0.55rem; border-radius: 999px; background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); }
.wl-tag.is-own { background: #EEF3FD; color: var(--blue); border-color: #D3E0FA; }
.wl-undo { margin-top: 0.45rem; display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.74rem;
  font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink); cursor: pointer;
  padding: 0.32rem 0.6rem; border-radius: 999px; background: var(--surface); border: 1px solid #C9D2DD; }
.wl-undo:hover { border-color: var(--ink); background: var(--bg); }
.wl-undo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ==========================================================================
   PHONE & TABLET PASS (2026-10-15). Every rule is inside max-width 1024px or
   narrower, so desktop is untouched (proven by an element-position diff at
   1025/1280/1440 against the backup).
   ========================================================================== */
@media (max-width: 560px) {
  /* A measurement row (walls, wardrobe size, breakfast counter) had the label
     and the feet stepper on one line and the inches wrapped underneath. Here
     the label takes its own line and feet and inches sit side by side. */
  .wall { gap: 0.55rem 0.6rem; }
  .wall-nm { flex-basis: 100%; margin-right: 0; }
  .wall .num { flex: 1 1 0; justify-content: space-between; }
  .wall .num + .num { padding-left: 0.6rem; border-left: 1px solid var(--line); }
}
@media (max-width: 1024px) and (pointer: coarse) {
  /* Fingers, not a mouse: the round − / + buttons to 36px. */
  .stepbtn { width: 36px; height: 36px; }
  .opt-qty .oq-b { width: 30px; height: 30px; }
  .acc-qty button { width: 30px; height: 30px; }
}

/* Full home → What's included: the Kitchen and Wardrobes tabs are the
   estimators' own steps (2026-10-16). */
.pnl-pkg { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.pnl-pkg-lb { font-size: 0.82rem; color: var(--muted); }
.pnl-pkg-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.pnl-pkg-seg button { font: inherit; font-size: 0.8rem; font-weight: 500; color: var(--muted); background: none; border: 0;
  border-radius: 999px; padding: 0.38rem 0.85rem; cursor: pointer; transition: background .15s, color .15s; }
.pnl-pkg-seg button:hover { color: var(--ink); }
.pnl-pkg-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16,23,32,.12); }
.pnl-est .stepcard { background: var(--bg); }
.pnl-est .pnl-plan { margin-bottom: 1rem; }

/* Full home, step 2: type of work (2026-10-16). */
.work-types { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.work-type { font: inherit; text-align: left; cursor: pointer; display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 0.95rem 1rem;
  transition: border-color .15s, background .15s; }
.work-type:hover { border-color: #B9C6D6; }
.work-type[aria-checked="true"] { border-color: var(--ink); background: var(--surface); }
.work-type .dot { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid #B9C6D6; }
.work-type[aria-checked="true"] .dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.work-type b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.work-type small { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; }
.work-svc-h { font-size: 0.84rem; color: var(--muted); margin-bottom: 0.6rem; }
@media (max-width: 520px) { .work-types { grid-template-columns: 1fr; } }
/* The type-of-work step's "still to answer" note (2026-10-19). */
/* The site's own error line (as .es-err and the contact form's .send-err):
   plain text beside a red info icon, no box. */
.work-err { display: none; align-items: flex-start; gap: 0.5rem; margin: 0; color: var(--ink); font-size: 0.85rem; line-height: 1.45; }
.work-err.on { display: flex; animation: work-err-in .26s cubic-bezier(.2,.8,.2,1) both; }
.work-err svg { flex: none; width: 16px; height: 16px; margin-top: 0.1rem; color: #E5484D; stroke-width: 2.2; }
@keyframes work-err-in { from { opacity: 0; transform: translateY(-4px); } }
/* What still needs picking: a thick red border that pulses (owner
   2026-10-19: no shake). */
.work-types.is-bad .work-type, .work-svc .opts.is-bad .work-chip { border-color: #E5484D; border-width: 2px; }
.work-types.pulse .work-type, .work-svc .opts.pulse .work-chip { animation: work-pulse 1.1s ease-out 3; }
@keyframes work-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .45); } 100% { box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .work-err.on, .work-types.pulse .work-type, .work-svc .opts.pulse .work-chip { animation: none; } }
.work-svc[hidden] { display: none; }
.pnl-fixed { font-size: 0.86rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; display: inline-block; }

/* Full home → Kitchen → Accessories: two ready-made sets (2026-10-16). */
.acc-pick { display: grid; gap: 0.6rem; }
.acc-opt { font: inherit; text-align: left; cursor: pointer; display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem;
  transition: border-color .15s; }
.acc-opt:hover { border-color: #B9C6D6; }
.acc-opt[aria-checked="true"] { border-color: var(--ink); }
.acc-opt .dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid #B9C6D6; }
.acc-opt[aria-checked="true"] .dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.acc-opt-t { flex: 1; min-width: 0; }
.acc-opt-t b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.acc-opt-inc { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin-top: 0.2rem; }
.acc-opt-pr { flex: none; font-size: 0.88rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-opt-inc { margin-top: 0.35rem; }
.acc-opt-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.1rem; font-size: 0.82rem; color: var(--ink); }

/* Package breakdown: the bill's foot (interiors, design fee, estimate). */
.pkd-sum { margin-top: 0.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 0.4rem 1rem; }
.pkd-sum-r { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; }
.pkd-sum-r + .pkd-sum-r { border-top: 1px dashed var(--line); }
.pkd-sum-r b { display: block; font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.pkd-sum-r i { display: block; font-style: normal; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; }
.pkd-sum-r em { font-style: normal; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.pkd-sum-r.is-total b { font-weight: 700; }
.pkd-sum-r.is-total em { font-weight: 700; font-size: 1rem; }
.pnl-more-gap { visibility: hidden; pointer-events: none; }