/*
  W8 INTAKE FORM styles.

  PHONE FIRST, AND LITERALLY SO: every rule here is the phone rule, and the media
  queries only ADD to it. Writing it the other way round is how a "responsive" form
  ends up being a desktop form that survives a narrow window, which is not the same
  thing as being usable with a thumb.

  THE TABLET BREAKPOINT IS 820px, NOT 768px. House standard, and the reason is that
  768 is a stale device-width assumption that under-serves the modern tablet range
  (up/docs/responsive-design-standard.md section 2).

  TAP TARGETS ARE 48px MINIMUM. Nothing on this page needs a hover, a drag, or a
  precise click: a customer is standing in a half-packed room holding a phone in one
  hand.
*/

/* ---------------------------------------------------------------- tokens -- */
/*
  TODO 00173.b: Calvin's own site, measured from jumpstartmoving.com's computed
  styles (the operator-approved mockup, deliverables/dashboard-design/00173-quote-form).
  Sky blue for his nav, headings and outline buttons, his darker blue band behind
  the card, his orange for the one call to action, his #f5f5f5 form panel.

  LIGHT ONLY, on purpose. His site has no dark scheme, and this form now sits on his
  site (an iframe on jumpstartmoving.com) as well as on its own page, so a dark card
  on his white page would look like someone else's form. The old dark block is gone.
*/
:root {
  --blue:        #4EAEE1;   /* his nav, headings, outline buttons */
  --blue-dark:   #1C6FA3;   /* small blue text and icons that must read on white */
  --blue-wash:   #EEF7FC;
  --blue-line:   #BFE0F2;
  --band:        #3996CE;   /* his quote-page band */
  --orange:      #F77817;   /* his CTA */
  --orange-dark: #D9620A;

  /* The filled sky-blue button ("+ Add items", the picker's Done). */
  --btn-fill:        #4EAEE1;
  --btn-fill-hover:  #3996CE;

  --ink:         #3A3A3A;   /* his labels */
  --ink-2:       #7A7A7A;   /* his body gray */
  --ink-3:       #7A7A7A;
  --line:        #D9D9D9;
  --field-line:  #777777;   /* his input border */
  --bg:          #F5F5F5;   /* his header and form panel */
  --surface:     #FFFFFF;

  --danger:      #C0281F;
  --danger-wash: #FDF0EF;
  --danger-line: #F3C9C5;
  --ok:          #12805C;

  --radius:      14px;
  --radius-lg:   20px;
  --pill:        100px;
  --tap:         48px;

  --shadow-sm: 0 1px 2px rgba(18, 21, 27, .06), 0 1px 3px rgba(18, 21, 27, .04);
  --shadow-md: 0 4px 16px rgba(18, 21, 27, .08);
  --shadow-lg: 0 -8px 34px rgba(18, 21, 27, .16);

  /* Self-hosted (fonts/, all SIL OFL 1.1): the page makes no Google Fonts request. */
  --font:         Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Outfit, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-cta:     Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url("/intake-static/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap; src: url("/intake-static/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url("/intake-static/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url("/intake-static/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 800; font-display: swap; src: url("/intake-static/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 700; font-display: swap; src: url("/intake-static/fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url("/intake-static/fonts/roboto-latin-500-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

/*
  [hidden] MUST WIN, and this rule is not decoration.

  The browser's own `[hidden] { display: none }` lives in the UA stylesheet, so ANY
  author rule that sets `display` beats it: `.btn { display: inline-flex }` on an
  element that also carries `hidden` renders it anyway, with the attribute correctly
  set and doing nothing.

  That is exactly what happened here. The staff-only "Take another enquiry" button
  appeared on the CUSTOMER receipt, and every `hidden` assertion in the code was
  true while the screen said otherwise. `!important` is the right tool for a rule
  that must outrank every display declaration in this file by construction.
*/
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  /* 16px minimum on every input, because iOS Safari zooms the whole page on focus
     for anything smaller and the customer then has to pinch back out. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

/* ---------------------------------------------------------------- intro -- */
.intro { padding: 26px 0 18px; }
h1 { font-size: 1.6rem; line-height: 1.22; letter-spacing: -.02em; font-weight: 800; }
.lede { margin-top: 8px; color: var(--ink-2); }

/* ---------------------------------------------------------------- steps -- */
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.step {
  flex: 1;
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--ink-3);
  padding: 9px 4px 9px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.step-dot {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  background: var(--line); color: var(--ink-2);
  font-size: .7rem; font-weight: 800;
}
.step.is-current { color: var(--blue-dark); border-color: var(--blue-line); background: var(--blue-wash); }
.step.is-current .step-dot { background: var(--btn-fill); color: #fff; }
.step.is-done .step-dot { background: var(--ok); color: #fff; }

/* ----------------------------------------------------------------- card -- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em;
  margin-bottom: 16px;
}
.card-num {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  background: var(--blue-wash); color: var(--blue-dark);
  font-size: .82rem; font-weight: 800;
}

/* ---------------------------------------------------------------- field -- */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.req { color: var(--danger); }

input[type=text], input[type=tel], input[type=email],
input[type=date], input[type=search], select, textarea {
  width: 100%;
  min-height: var(--tap);
  font: inherit;
  font-size: 1rem;            /* never below 16px: see the note on body */
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  appearance: none;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7484' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 42px;
}

input::placeholder, textarea::placeholder { color: #9AA2AF; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(22, 104, 227, .38);
  outline-offset: 2px;
  border-color: var(--blue);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); background: var(--danger-wash); }

.hint { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }

.err {
  font-size: .82rem; font-weight: 600;
  color: var(--danger);
  margin-top: 6px;
}
.err-submit {
  background: var(--danger-wash);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

/* One column on a phone. Two only when there is genuinely room for two. */
.field-row { display: grid; gap: 14px; }

/* TODO 00152 MINOR-1: a plain .field right after a .field-row (the date/time/
   truck row above origin_address) needs the same 14px gap every other stacked
   .field gets. Scoped to that one transition so it does NOT also add space
   under the phone/email row, which already sits 6px under its own .hint and
   was never flagged as broken (round-1.md Q1). */
.field-row + .field { margin-top: 20px; }

/* ---------------------------------------------------------------- stops -- */
.stop { margin-bottom: 14px; }
.stop-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.stop-head label { margin-bottom: 0; }
.stop-remove {
  min-height: var(--tap); padding: 6px 12px;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--danger); background: none;
  border: 1px solid transparent; border-radius: 9px;
  cursor: pointer;
}
.stop-remove:hover { background: var(--danger-wash); }

/* --------------------------------------------------------------- basket -- */
.basket { margin-bottom: 14px; }
.basket-empty {
  color: var(--ink-3); font-size: .9rem;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
}
.basket-list { display: flex; flex-direction: column; gap: 8px; }

/* TODO 00135: a row is now a small stack, name + stepper on top, Edit and Remove
   under it, the editor below that when open. Two actions side by side beside a
   48px stepper do not fit at 360px, so they get their own line. */
.basket-row {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px 6px 13px;
}
.basket-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.basket-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -12px; }
.line-btn {
  min-height: var(--tap); padding: 6px 12px;
  font: inherit; font-size: .84rem; font-weight: 700;
  color: var(--blue-dark); background: none;
  border: 1px solid transparent; border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.line-btn:hover { background: var(--blue-wash); }
.line-btn.line-remove { color: var(--danger); }
.line-btn.line-remove:hover { background: var(--danger-wash); }
.basket-edit {
  border-top: 1px solid var(--line);
  padding: 10px 0 6px;
}
.edit-label { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.edit-options { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-option {
  min-height: var(--tap); padding: 8px 16px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.edit-option:hover { border-color: var(--blue-line); background: var(--blue-wash); }
.edit-option.is-current { border-color: var(--blue); background: var(--blue-wash); color: var(--blue-dark); }
.basket-name { flex: 1; min-width: 0; font-size: .93rem; font-weight: 600; overflow-wrap: anywhere; }
.basket-variant { display: block; font-size: .78rem; font-weight: 600; color: var(--blue-dark); }
.basket-custom { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------------------------------------- stepper -- */
/*
  The quantity stepper. Calvin's current form has one and it stays.
  Two buttons and a number, every one of them a real tap target: a stepper built from
  a native number input is a 3mm arrow nobody can hit on a phone.
*/
.stepper { display: flex; align-items: center; gap: 2px; flex: none; }
.step-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  font: inherit; font-size: 1.3rem; font-weight: 600; line-height: 1;
  color: var(--blue-dark);
  background: var(--surface);
  border: 1.5px solid var(--blue-line);
  border-radius: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.step-btn:hover { background: var(--blue-wash); }
.step-btn:active { transform: scale(.94); }
.step-qty {
  min-width: 34px; text-align: center;
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  font: inherit; font-size: 1rem; font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; font-size: 1.02rem; }
.btn-xl { min-height: 56px; font-size: 1.06rem; }

.btn-primary { background: var(--btn-fill); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--btn-fill-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled] { background: #9EBBEA; cursor: progress; }

.btn-ghost {
  background: var(--surface);
  color: var(--blue-dark);
  border-color: var(--blue-line);
}
.btn-ghost:hover { background: var(--blue-wash); }

.icon-btn {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  flex: none;
  color: var(--ink-2); background: none;
  border: none; border-radius: 11px; cursor: pointer;
}
.icon-btn:hover { background: var(--bg); }

.fineprint {
  font-size: .78rem; color: var(--ink-3);
  text-align: center;
  margin: 12px 0 8px;
}

/* -------------------------------------------------------------- receipt -- */
.receipt { text-align: center; padding: 34px 20px; margin-top: 26px; }
.receipt-tick {
  display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: 50%;
  background: #E6F6F0; color: var(--ok);
}
.reference {
  margin: 18px auto 0; max-width: 260px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}
.reference strong {
  display: block; margin-top: 4px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: .02em;
  text-transform: none; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.receipt .hint { margin-top: 12px; }
.receipt .btn { margin-top: 20px; }

/* ==================================================== THE PICKER SHEET == */
/*
  Full screen on a phone. Not a centred modal: a centred modal on a 360px screen is
  a small box with its own scrollbar inside a page with another one, and the customer
  ends up scrolling the wrong thing.
*/
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(18, 21, 27, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet[hidden] { display: none; }

.sheet-panel {
  display: flex; flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  /* `dvh` so the sheet does not sit under a phone's collapsing browser chrome. */
  max-height: 100dvh;
}

.sheet-head {
  flex: none;
  padding: max(10px, env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sheet-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-head h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }

.search-wrap { position: relative; margin-top: 10px; }
.search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
}
#search { padding-left: 40px; background: var(--bg); }

.sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px 22px;
}

.room-group { margin-bottom: 20px; }
.room-title {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blue-dark);
  margin-bottom: 9px;
}

/* One column of full-width rows on a phone: a two-column grid halves every tap
   target's width, and these rows carry a stepper on the right. */
.item-list { display: flex; flex-direction: column; gap: 7px; }

.item-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  text-align: left;
  font: inherit;
  /* A <button> does not inherit `color` from the page in either theme (the UA
     stylesheet gives it its own `buttontext`, which this page never overrides
     with `color-scheme`), so without this the name inside falls back to black
     on a dark row surface. Set explicitly so it tracks the theme like every
     other row in this file. */
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px 8px 14px;
}
/* The whole row is the tap target when it has no stepper in it yet. */
button.item-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.item-row:hover { border-color: var(--blue-line); background: var(--blue-wash); }
button.item-row:active { transform: scale(.995); }

.item-row.is-chosen { border-color: var(--blue); background: var(--blue-wash); }

.item-name { flex: 1; min-width: 0; font-size: .96rem; font-weight: 600; overflow-wrap: anywhere; }
.item-sub {
  display: block;
  font-size: .76rem; font-weight: 600; color: var(--ink-3);
  margin-top: 1px;
}
.item-plus {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--blue-wash); color: var(--blue-dark);
  font-size: 1.3rem; font-weight: 600; line-height: 1;
}
.item-chevron { flex: none; color: var(--ink-3); }

/* TODO 00136: drawn item icons. A fixed box that never shrinks, in the heading blue
   (measured 6.5:1 or better on every row surface, light and dark), so a row is the same
   height with or without one and a name never moves when its row is chosen. */
.icon { flex: none; display: block; color: var(--blue-dark); }
.item-icon { width: 28px; height: 28px; }
.basket-icon { width: 22px; height: 22px; }
.room-icon { width: 16px; height: 16px; }
.variant-icon { width: 26px; height: 26px; }
.room-title, .variant-title { display: flex; align-items: center; gap: 7px; }

.no-results { text-align: center; padding: 26px 16px; }
.no-results p { color: var(--ink-2); margin-bottom: 14px; }

/* ---- TODO 00135: "Something else" and the basket ceiling ---- */
.other-entry { margin-top: 4px; }
.other-row { border-style: dashed; }
.other-form { padding: 12px 2px 4px; }
/* Input and its button on one line; the input shrinks, the button never does. */
.other-form-row { display: flex; gap: 8px; align-items: stretch; }
.other-form-row input { flex: 1; min-width: 0; }
.other-form-row .btn { flex: none; }
.other-done { margin-top: 8px; overflow-wrap: anywhere; }
.limit-note {
  margin-top: 10px;
  font-size: .84rem; font-weight: 600;
  color: var(--ink);
  background: var(--danger-wash);
  border: 1px solid var(--danger-line);
  border-radius: 10px;
  padding: 8px 12px;
}

/* ---- layer two ---- */
.back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 8px 12px 8px 6px;
  font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--blue-dark); background: none;
  border: none; border-radius: 10px; cursor: pointer;
  margin-bottom: 8px;
}
.back-btn:hover { background: var(--blue-wash); }

.variant-title { font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em; }
.variant-hint { color: var(--ink-3); font-size: .9rem; margin: 2px 0 14px; }
.variant-list { display: flex; flex-direction: column; gap: 8px; }

.sheet-foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.sheet-count { font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.sheet-foot .btn { min-width: 128px; }

/* ==================================================== TABLET AND WIDER == */
/*
  820px, NOT 768px. See the header note.
*/
@media (min-width: 820px) {
  h1 { font-size: 2rem; }
  .intro { padding: 36px 0 22px; }

  .card { padding: 26px 24px; border-radius: var(--radius-lg); }
  .steps { gap: 10px; margin-bottom: 22px; }
  .step { font-size: .86rem; padding: 10px 14px; }

  /* Two columns only now that each one is still a comfortable target. */
  .field-row { grid-template-columns: 1fr 1fr; }

  /* The picker becomes a centred dialog, because at this width a full-screen
     takeover is disorienting rather than helpful. */
  .sheet { align-items: center; padding: 24px; }
  .sheet-panel {
    max-width: 640px;
    height: auto;
    max-height: min(88dvh, 820px);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .sheet-head { padding: 16px 20px 14px; }
  .sheet-body { padding: 18px 20px 24px; }
  .sheet-foot { padding: 14px 20px; }

  /* Two columns of items, matching the density of Calvin's current picker, now that
     each row is still wide enough to hold a name and a stepper.

     `minmax(0, 1fr)`, not a bare `1fr`: a bare `1fr` track's minimum is `auto`,
     which lets ANY row's content (a chosen row's stepper is the widest thing in
     the grid) force that whole column wider, which pushes every column after it
     and moves the grid the instant a row becomes chosen (TODO 00136). Pinning the
     minimum to 0 stops a row's content from ever growing its column; the row
     itself gets `min-width: 0` too so it can actually be compressed to the
     column's width, and its name wraps or ellipses inside instead. */
  .item-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
  .variant-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }

  /* A chosen row fits its OWN cell and never changes the grid (TODO 00136): no span,
     no wider track, no taller row. The icon box and the left padding are untouched, so
     the name keeps its x; the stepper goes compact (44px targets, a narrower count)
     and the vertical padding shrinks so the 44px buttons sit inside the same 54px row
     an unchosen one has. The name wraps at a word inside what is left, on a tighter
     line so two lines still fit the row. */
  .item-row.is-chosen { padding-top: 3px; padding-bottom: 3px; padding-right: 6px; }
  .item-row.is-chosen .item-name { line-height: 1.2; overflow-wrap: break-word; }
  .item-row.is-chosen .stepper { gap: 0; }
  .item-row.is-chosen .step-btn { width: 44px; height: 44px; }
  .item-row.is-chosen .step-qty { min-width: 24px; }
}

@media (min-width: 1280px) {
  /* 720px was the narrowest that ever held the icon, a name and the compact
     stepper side by side in ONE cell: at 720px a track was ~220px, the name
     got ~20px, and the old fix (a chosen row spanning two tracks) threw a
     third-column row onto the next line and moved up to eight of its
     neighbours (TODO 00136, audit s196). The grid tracks stay the fixed
     `minmax(0, 1fr)` x3 that fix relies on: only the panel's own max-width
     changes below, never a track spanning or a taller row.

     1280px, not 1100px (TODO 00151 round 1): once this fires, `.sheet-panel`
     is already at its full cap (the .sheet gets 24px of padding a side from
     820px up, so anything past ~950-1000px viewport has room to spare), so
     pushing the threshold cannot, by itself, widen a chosen row once 3
     columns are in effect - the 2-column layout below 1280 already gives a
     chosen name ~114px (comfortably enough), so the push at least keeps
     every viewport in the old bad band (1100-1279) on that working layout.

     900px (TODO 00151 round 1) was NOT enough on its own past 1280: measured
     (headless Chromium, canvas measureText against the row's real computed
     font) a chosen name's box at 900px is ~99px, and "Entertainment" needs
     ~103px, so `overflow-wrap: break-word` (line 633) fell back to a genuine
     mid-word split at every width >=1280, same as pw00136's own documented
     "a few longer names wrap to two lines" at 1440 - except this one broke
     mid-WORD, not just mid-name. 960px (TODO 00151 round 2, CEO amendment):
     measured 946px as the smallest integer where the name box first clears
     114px (900->112.0px name box, +1px panel ~= +0.33px name box); 960px
     gives ~118.7px, a small safety margin over that exact boundary for
     sub-pixel font-metric variance across renderers, and stays well under
     the amendment's 1040px ceiling. `overflow-wrap: break-word` stays as
     the backstop for a genuinely unbreakable single "word" (e.g. a long
     custom item name with no spaces) that even this cannot help. */
  .sheet-panel { max-width: 960px; }
  .item-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============================================================ MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:active, .step-btn:active, button.item-row:active { transform: none; }
}

/* ---------- TODO 00217: photos start the list ----------
   The optional photo block at the top of card 3, the check line above a list the
   photos started, and the tag a photo line carries. Every colour, radius and tap
   size is a token from the top of this file, so the block follows the form in light
   and dark with no values of its own. */
.photo-block {
  background: var(--blue-wash);
  border: 1px solid var(--blue-line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}
.photo-title { font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.photo-line { font-size: .9rem; color: var(--ink-2); margin-top: 4px; }
.photo-block .btn { margin-top: 12px; }
.photo-block .btn svg { flex: none; }
.btn-ghost[aria-disabled="true"],
.btn-ghost[disabled] {
  color: var(--ink-3); background: var(--bg);
  border-color: var(--line); cursor: not-allowed;
}
.photo-or { font-size: .84rem; color: var(--ink-2); text-align: center; margin-top: 10px; }

/* TODO 00217.i (CEO rulings s286 I1): "Add photos" and "Take a video" side by side.
   They wrap with no breakpoint of their own: two do not fit on a phone, so each
   takes the full width, one above the other. */
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-actions .btn { flex: 1 1 200px; margin-top: 0; }
.photo-tip { font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
/* The video the phone reads the pictures from: in the page (some phones load
   nothing otherwise) but not seen, not heard and not in the way. */
.photo-video-stage {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.photo-thumbs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-thumb {
  position: relative; flex: none;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-3);
  background: linear-gradient(135deg, var(--surface), var(--bg));
  border: 1px solid var(--blue-line);
  overflow: hidden;
}
.photo-thumb.is-waiting { opacity: .55; }
.photo-thumb.is-refused { border: 1.5px solid var(--danger); color: var(--danger); background: var(--danger-wash); }
.photo-badge {
  position: absolute; right: 3px; bottom: 3px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff; background: var(--ok);
}
.photo-badge.is-reading {
  background: var(--surface); color: var(--blue);
  border: 2.5px solid var(--blue-line); border-top-color: var(--blue);
  animation: photo-spin .9s linear infinite;
}
.photo-badge.is-refused { background: var(--danger); color: var(--surface); }
@keyframes photo-spin { to { transform: rotate(360deg); } }

.photo-status { font-size: .9rem; font-weight: 700; color: var(--ink); margin-top: 12px; }
.photo-status-sub { display: block; font-size: .82rem; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.photo-bar {
  height: 6px; margin-top: 8px;
  border-radius: 999px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--blue-line);
}
.photo-bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }

.photo-note {
  font-size: .88rem; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--blue-line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
}
.photo-note.is-problem { background: var(--danger-wash); border-color: var(--danger-line); }
.photo-note strong { font-weight: 700; overflow-wrap: anywhere; }

/* The one line above a list the photos started. */
.basket-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  margin: 12px 0 10px;
}
.basket-check svg { flex: none; margin-top: 2px; color: var(--blue-dark); }

/* The tag a line carries until the customer changes it. */
.basket-from {
  display: block; width: fit-content;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: var(--blue-dark);
  background: var(--blue-wash);
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 3px;
}
.basket-size-needed { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-3); }

/* ================================================ TODO 00173: HIS LOOK == */
/*
  The operator-approved mockup (s299c), made real: Calvin's own header, his blue
  band, one white card with his 6px sky-blue bar, his gray form panels, his pill
  inputs and buttons, his footer. Values were read from his site's computed styles.
  Wording is untouched; this section only changes how the same page looks.

  Written AFTER the component rules above on purpose: it restyles them in place
  (later rule, same specificity, wins) so every behaviour rule above stays as it was.
  Breakpoints: 1100 / 1024 for his header (his own), 820 for the form (house
  standard, never 768), 700 for the phone layout of his band and footer.
*/

/* ---------- his header ---------- */
.site-header { background: var(--bg); position: relative; z-index: 30; }
.hdr {
  max-width: 1440px; margin: 0 auto;
  min-height: 70px; padding: 0 36px 0 58px;
  display: flex; align-items: center; gap: 24px;
}
.hdr-logo { flex: none; display: block; }
.hdr-logo img { display: block; width: 77px; height: auto; }
.hdr-nav { margin-left: auto; }
.hdr-menu { display: flex; gap: 24px; align-items: center; }
.hdr-menu > li { position: relative; }
.hdr-menu a {
  color: var(--blue); font-weight: 600; font-size: 16px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.hdr-has-sub { display: flex; align-items: center; }
.hdr-sub-toggle {
  display: grid; place-items: center;
  width: 28px; height: var(--tap); margin-left: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--blue);
}
.hdr-sub-toggle .caret { width: 12px; height: 14px; fill: currentColor; transition: transform .15s; }
.hdr-sub-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.hdr-sub {
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 260px; padding: 8px 0;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(18, 21, 27, .14);
  border-radius: 6px;
}
.hdr-sub a { display: flex; padding: 0 20px; white-space: nowrap; font-weight: 500; }
.hdr-sub a:hover { background: var(--blue-wash); }
.hdr-ctas { display: flex; gap: 10px; align-items: center; margin-left: 14px; }
.pill-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: var(--pill);
  font-family: var(--font); font-weight: 700; font-size: 18px;
  text-decoration: none; white-space: nowrap;
}
.pill-cta svg { display: block; width: 14px; height: 18px; fill: currentColor; }
.pill-quote { background: var(--orange); color: #fff; }
.pill-phone { border: 2px solid var(--blue); color: #333; background: transparent; height: 56px; }
.hdr-burger {
  display: none; margin-left: auto;
  width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center;
  color: var(--blue); background: none; border: 0; cursor: pointer;
}
.hdr-burger svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.hdr-mobile { background: var(--surface); border-top: 1px solid var(--line); }
.hdr-mobile a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 24px; color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--bg);
}
.hdr-mobile a:hover { background: var(--blue-wash); }

/* ---------- his band and the white card ---------- */
.band { background: var(--band); padding: 107px 20px; }
.quote-card {
  max-width: 980px; margin: 0 auto;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 6px 0 0 var(--blue);
  padding: 64px 92px 52px;
}
.truck { display: block; width: 100px; height: 100px; margin: 0 auto 18px; }
.mode-badge {
  display: block; width: fit-content; margin: 0 auto 14px;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue-dark); background: var(--blue-wash);
  border: 1px solid var(--blue-line);
  padding: 5px 12px; border-radius: var(--pill);
}

.intro { text-align: center; padding: 0; margin-bottom: 28px; }
.intro h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 48px; line-height: 1.1; letter-spacing: 0;
  text-transform: uppercase; color: var(--blue);
}
.intro .lede {
  color: var(--ink-2); font-size: 16px; font-weight: 500;
  max-width: 640px; margin: 14px auto 0; line-height: 1.75;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
.step {
  justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 6px;
  border-radius: var(--pill); border: 1px solid #CFCFCF;
  background: var(--surface); color: var(--ink-2);
  font-weight: 600; font-size: 15px;
}
.step-dot { width: 26px; height: 26px; background: var(--bg); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.step.is-current { border: 2px solid var(--blue); color: var(--blue); background: var(--surface); }

/* his gray form panel, one per section */
.card {
  background: var(--bg); border: 0; box-shadow: none;
  border-radius: 10px; padding: 30px 30px 32px; margin-bottom: 18px;
}
.card-title {
  gap: 12px; margin-bottom: 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.2; letter-spacing: 0;
  text-transform: uppercase; color: var(--blue);
}
.card-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-family: var(--font); font-size: 17px; font-weight: 700;
}

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field-row { column-gap: 32px; row-gap: 20px; align-items: start; }
.field-row .field { margin-bottom: 0; }
.card > .field-row + .hint { margin-top: 8px; }
label { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.req { margin-left: 4px; color: #E2001A; }

input[type=text], input[type=tel], input[type=email],
input[type=date], input[type=search], select, textarea {
  min-height: var(--tap);
  border: 1px solid var(--field-line);
  border-radius: 50px;
  background-color: var(--surface);
  font-family: var(--font); font-weight: 500; font-size: 16px; color: #333;
  padding: 0 18px;
}
input[type=date] { padding-top: 0; padding-bottom: 0; }
textarea { min-height: 130px; border-radius: 24px; padding: 14px 18px; line-height: 1.5; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%237a7a7a' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
  background-position: right 18px center; background-size: 10px 16px;
  padding-right: 44px;
}
input::placeholder, textarea::placeholder { color: #9A9A9A; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(78, 174, 225, .25); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible { outline: 3px solid rgba(28, 111, 163, .55); outline-offset: 2px; }
.hint { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.err { font-size: 14px; }

/* buttons: his full pills */
.btn {
  border-radius: var(--pill); border-width: 2px;
  min-height: 52px; padding: 0 26px;
  font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.2;
  text-align: center;
}
.btn-ghost { background: var(--surface); border-color: var(--blue); color: var(--blue); }
.btn-ghost:hover { background: var(--blue-wash); }
.btn-lg { min-height: 56px; font-size: 17px; }
.btn-submit {
  background: var(--orange); color: #fff; box-shadow: none;
  font-family: var(--font-cta); font-weight: 500; font-size: 20px;
  min-height: 62px; margin-top: 8px;
}
.btn-submit:hover { background: var(--orange-dark); }
.btn-submit[disabled] { background: #F9B47F; }
.stop-remove, .line-btn, .back-btn, .edit-option, .step-btn { font-family: var(--font); }

/* the photo block (TODO 00217), in his panel */
.photo-block { background: var(--surface); border: 1px solid #D9E9F3; border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; }
.photo-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: 0; }
.photo-line, .photo-tip { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.photo-actions { gap: 10px; margin-top: 14px; }
.photo-or { font-size: 14px; color: var(--ink-2); margin-top: 12px; }

.basket { margin: 14px 0; }
.basket-empty {
  border: 1.5px dashed #C4C4C4; border-radius: 16px; background: var(--surface);
  padding: 20px; color: var(--ink-2); font-weight: 500; font-size: 15px;
}
.basket-row { background: var(--surface); }

.err-submit { margin-top: 4px; }
.fineprint { text-align: center; font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
.contact { text-align: center; font-size: 15px; color: var(--ink); margin-top: 22px; font-weight: 500; }
.contact a { color: var(--blue-dark); font-weight: 600; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

.receipt { background: var(--bg); margin-top: 0; }
.receipt h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2;
  text-transform: uppercase; color: var(--blue);
}
.reference { background: var(--surface); }

.sheet-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; color: var(--blue); letter-spacing: 0;
}
.variant-title { font-family: var(--font-display); text-transform: uppercase; color: var(--blue); }
#search { padding-left: 42px; background-color: var(--bg); }
.item-row { border-radius: var(--radius); }

/* ---------- his footer ---------- */
.site-footer { background: var(--surface); padding: 60px 0 0; }
.ftr { max-width: 1360px; margin: 0 auto; padding: 0 80px; }
.ftr-title {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  color: var(--blue); line-height: 1.2; margin-bottom: 28px;
}
.ftr-title::after { content: ""; flex: 1; height: 1px; background: var(--blue); }
.ftr-cols { display: grid; grid-template-columns: 1fr 1.05fr 1.05fr 1.1fr 1.05fr; gap: 24px; }
.ftr-col h3 { font-family: var(--font); font-weight: 800; font-size: 20px; color: var(--blue); margin-bottom: 14px; line-height: 1.3; }
.ftr-col li { font-weight: 600; font-size: 15px; color: #333; line-height: 1.5; margin-bottom: 12px; }
.ftr-col li a { color: inherit; text-decoration: none; }
.ftr-col li a:hover { color: var(--blue-dark); }
.ftr-social { display: flex; gap: 18px; margin-top: 6px; color: var(--blue); }
.ftr-social svg { display: block; width: 20px; height: 22px; fill: currentColor; }
.ftr-social .ftr-social-wide { width: 22px; }
.ftr-bottom { border-top: 1px solid var(--blue); margin-top: 36px; padding: 24px 0 20px; display: flex; align-items: center; gap: 24px; }
.ftr-logo { display: block; flex: none; }
.ftr-logo img { display: block; width: 192px; height: auto; }
.ftr-legal {
  margin-left: auto; color: var(--blue); font-weight: 500; font-size: 15px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end;
}
.ftr-legal a { color: inherit; text-decoration: none; }
.ftr-legal a:hover { text-decoration: underline; }

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .hdr { padding: 0 24px; }
  .hdr-menu { gap: 18px; }
  .ftr-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .hdr { flex-wrap: wrap; padding: 12px 24px 14px; gap: 10px; }
  .hdr-logo img { width: 107px; }
  .hdr-nav { display: none; }
  .hdr-burger { display: flex; }
  .hdr-ctas { width: 100%; margin: 0; justify-content: center; }
  .pill-cta { height: 40px; font-size: 14px; padding: 0 18px; gap: 6px; }
  .pill-cta svg { width: 11px; height: 14px; }
  .pill-phone { height: 42px; }
  .quote-card { padding: 48px 40px 40px; }
}
@media (min-width: 1025px) {
  .hdr-mobile { display: none !important; }
}
@media (max-width: 700px) {
  .hdr { padding: 12px 16px 14px; }
  .hdr-logo { margin-left: 38px; }
  .hdr-burger { margin-right: 10px; }
  .band { padding: 110px 0 0; }
  .quote-card { border-radius: 12px 12px 0 0; box-shadow: none; padding: 40px 16px 32px; }
  .truck { margin-bottom: 24px; }
  .intro h1 { font-size: 34px; }
  .intro .lede { font-size: 15px; line-height: 1.65; }
  .steps { gap: 6px; }
  .step { min-height: 46px; font-size: 14px; gap: 6px; }
  .step-dot { width: 22px; height: 22px; font-size: 12px; }
  .card { padding: 22px 16px 24px; }
  .card-title { font-size: 21px; }
  .photo-block { padding: 16px; }
  .ftr { padding: 0 16px; }
  .ftr-title { font-size: 34px; flex-direction: column; align-items: stretch; gap: 16px; }
  .ftr-title::after { flex: none; width: 100%; }
  .ftr-cols { grid-template-columns: 1fr; gap: 24px; }
  .ftr-col h3 { font-size: 18px; }
  .ftr-col li { font-size: 14px; }
  .ftr-bottom { flex-direction: column; align-items: center; margin-top: 60px; }
  .ftr-logo img { width: 170px; }
  .ftr-legal { margin-left: 0; justify-content: center; text-align: center; font-size: 14px; }
}
@media (max-width: 360px) {
  .pill-cta { padding: 0 14px; font-size: 15px; }
}

/* ---------- the staff phone-in variant ---------- */
/* TODO 00226.g: /intake/phone carries this same quote form (Calvin's form A layout)
   inside its own staff chrome: the masthead with the Phone intake badge and a plain
   footer, both scoped to html.is-phone. Until 00226.g it loaded intake-phone.css. */
html.is-phone .wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
html.is-phone .masthead { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
html.is-phone .masthead-inner { display: flex; align-items: center; gap: 10px; min-height: 60px; }
html.is-phone .logo { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--blue-dark); color: #fff; }
html.is-phone .brand { font-size: 1.05rem; letter-spacing: -.01em; margin: 0; }
html.is-phone .brand strong { color: var(--blue-dark); font-weight: 800; }
html.is-phone .mode-badge {
  margin: 0 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue-dark); background: var(--blue-wash); border: 1px solid var(--blue-line);
  padding: 5px 10px; border-radius: 999px;
}
html.is-phone .footer { padding: 24px 16px 40px; text-align: center; font-size: .85rem; color: var(--ink-2); }
html.is-phone .footer a { color: var(--blue-dark); font-weight: 600; }
/* the staff parts inside the form: two fields side by side where there is room */
.qf-staff { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 640px) { .qf-staff { grid-template-columns: 1fr 1fr; } }
.qf-staff .field { margin-bottom: 0; }
.qf-other-end { margin-top: 16px; }
html.is-phone .receipt { text-align: center; }
html.is-phone .receipt .qf-soft { margin-top: 20px; }

/* ================================================== TODO 00173: EMBED == */
/*
  /intake?embed=1, the page inside an iframe on jumpstartmoving.com. The server
  marks <html class="is-embed">. Band and card only: no header, no footer, and no
  scrollbar of its own, because the frame is always exactly as tall as the form
  (intake.js posts the height to the parent page).

  The picker sheet cannot be `position: fixed` here: in a frame as tall as the form,
  "the viewport" is the whole form, so a fixed sheet would cover thousands of
  pixels starting at the top. It is placed instead, in the frame's own coordinates,
  over the part of the frame the parent page is showing (--sheet-top, --sheet-h,
  set from the parent's viewport messages).
*/
html.is-embed, html.is-embed body { height: auto; }
/* CEO ruling s300 R2-1: the frame stops scrolling on its own only once a parent has
   said hello (intake.js adds is-embed-linked). Before that, or with no parent at all,
   it scrolls like any page and the customer can still reach the whole form. */
html.is-embed-linked, html.is-embed-linked body { overflow: hidden; }
html.is-embed .site-header,
html.is-embed .site-footer,
html.is-embed .skip-link { display: none; }
html.is-embed .band { padding: 48px 20px 54px; }
html.is-embed-linked .sheet {
  position: absolute; inset: auto 0 auto 0;
  top: var(--sheet-top, 0px);
  height: var(--sheet-h, 640px);
}
html.is-embed-linked .sheet-panel { max-height: 100%; }
@media (min-width: 820px) {
  html.is-embed-linked .sheet-panel { max-height: min(calc(var(--sheet-h, 640px) - 48px), 820px); }
}
@media (max-width: 700px) {
  html.is-embed .band { padding: 16px 0 0; }
}

/* ============================================= TODO 00226.e: HIS FORM A == */
/*
  The customer quote form in Calvin's own form A layout and look (white page,
  sections split by thin rules, his toggles and tiles), coloured with his website's
  palette: the operator-approved mockup, deliverables/00226-intake-redesign/mockup
  (primary rendering, DECISIONS s310, s311, s314). Every class is new and starts
  `qf-`, so nothing above changes meaning; where an older component sits inside the
  new form (the photo block, the basket, the picker) it is restyled here under
  `.qf` / `.qf-sheet`, later and more specific, never edited in place.
  Breakpoints: 560 phone, 640 / 900 / 1024 columns (his), 820 the house tablet line.
*/
.qf-page {
  --qf-blue: #1C72D2;        /* his site kit blue, the closest to his form's blue */
  --qf-blue-hover: #165EAE;
  --qf-blue-deep: #173E6E;
  --qf-blue-wash: #EEF4FC;
  --qf-blue-line: #D3E3F7;
  --qf-ink: #0F172A;
  --qf-ink-2: #334155;
  --qf-ink-3: #1E293B;
  --qf-muted: #64748B;
  --qf-faint: #94A3B8;
  --qf-line: #E2E8F0;
  --qf-line-2: #F1F5F9;
  --qf-ok: #047857;
  --qf-ok-wash: #ECFDF5;
  --qf-ok-line: #D1FAE5;
  --qf-bad: #DC2626;
  --qf-bad-wash: #FEF2F2;
  --qf-bad-line: #FECACA;
  --qf-bad-ring: #FEE2E2;
}
.qf { background: var(--surface); color: var(--qf-ink); overflow-x: hidden; }
.qf-wrap { max-width: 1120px; margin: 0 auto; padding: 36px 16px 64px; }
@media (min-width: 820px) { .qf-wrap { padding-left: 32px; padding-right: 32px; } }
.qf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qf-nowrap { white-space: nowrap; }
.qf-grow { flex: 1; min-width: 0; }
.qf-dim { opacity: .55; }

.qf-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; letter-spacing: -.01em;
  color: var(--qf-ink); text-align: center; margin: 0 0 22px;
}
.qf-brand { color: var(--qf-blue); }

/* date + time tiles (his) */
.qf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qf-tile {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: 16px;
  background: var(--qf-blue-wash); border: 1px solid var(--qf-blue-line);
}
.qf-tile svg { flex: none; color: var(--qf-blue); }
.qf-tile:focus-within { box-shadow: 0 0 0 3px rgba(28, 114, 210, .35); }
.qf-tile-k, .qf-tile-k label {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--qf-blue-deep); margin: 0; line-height: 1.4;
}
.qf-tile-v { font-size: 20px; font-weight: 700; color: var(--qf-blue); margin: 0; line-height: 1.3; }
.qf-tile input[type=date] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  opacity: 0; cursor: pointer; z-index: 1; border: 0; padding: 0;
}
.qf-tile select {
  width: 100%; min-height: 32px; border: 0; border-radius: 0; background: transparent;
  font-size: 20px; font-weight: 700; color: var(--qf-blue); padding: 0; cursor: pointer;
  box-shadow: none;
}
.qf-tile select:focus { box-shadow: none; }
.qf-tile.qf-bad { background: var(--qf-bad-wash); border-color: var(--qf-bad-line); box-shadow: 0 0 0 3px var(--qf-bad-ring); }
.qf-tile.qf-bad .qf-tile-k, .qf-tile.qf-bad .qf-tile-k label, .qf-tile.qf-bad .qf-tile-v,
.qf-tile.qf-bad svg, .qf-tile.qf-bad select { color: var(--qf-bad); }
.qf-timeok {
  margin-top: 16px; display: flex; gap: 8px; align-items: center;
  background: var(--qf-ok-wash); border: 1px solid var(--qf-ok-line); color: var(--qf-ok);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700;
}
.qf-intro { color: var(--qf-muted); font-size: 14px; font-weight: 500; margin: 14px 0 0; }

/* sections: his are open, separated by a thin rule (no cards) */
.qf-form { margin-top: 36px; }
.qf-sec { padding: 28px 0 8px; border-top: 1px solid var(--qf-line-2); }
.qf-sec:first-child { border-top: 0; padding-top: 0; }
.qf-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.qf-sec-head h2, .qf-h2 {
  margin: 0; font-family: var(--font); font-size: 21px; font-weight: 700; line-height: 1.3;
  color: var(--qf-ink-3); display: flex; align-items: center; gap: 9px;
  text-transform: none; letter-spacing: 0;
}
.qf-sec-head h2 svg, .qf-h2 svg, .qf-sub-head h3 svg { color: var(--qf-blue); flex: none; }
.qf-sub-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--qf-line-2);
}
.qf-sub-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--qf-ink-2); display: flex; align-items: center; gap: 8px; }
.qf-sub-head h3 small { font-weight: 500; color: var(--qf-faint); font-size: 13px; margin-left: 4px; }

.qf-g3 { display: grid; gap: 18px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qf-g3 { grid-template-columns: 1fr 1fr; } .qf-g3 .qf-span2 { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .qf-g3 { grid-template-columns: 1.4fr 1fr 1fr; } .qf-g3 .qf-span2 { grid-column: auto; } }
/* TODO 00226.g (s316 UI audit 2): the phone page's phone-or-email line sits under those two fields. */
.qf-g3 .qf-contact-err { grid-column: 1 / -1; margin: 0; }
@media (min-width: 1024px) { .qf-g3 .qf-contact-err { grid-column: 2 / -1; } }
.qf .qf-lab {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--qf-muted); margin: 0 0 6px; line-height: 1.4;
}
.qf .qf-lab.qf-sm { font-size: 11px; letter-spacing: .1em; color: var(--qf-muted); }
.qf-opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--qf-blue); }
.qf input[type=text], .qf input[type=email], .qf input[type=tel], .qf input[type=number],
.qf select.qf-f, .qf textarea {
  width: 100%; min-height: 48px; border: 1px solid var(--qf-line); border-radius: 12px;
  background-color: #fff; padding: 12px 16px; font-family: var(--font); font-size: 16px;
  font-weight: 500; color: var(--qf-ink-2); box-shadow: none;
}
.qf input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.qf input::placeholder, .qf textarea::placeholder { color: var(--qf-faint); }
.qf .qf-addr { border-width: 2px; border-color: var(--qf-line-2); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.qf select.qf-f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px;
  padding-right: 36px; font-weight: 600; font-size: 15px;
}
.qf textarea { min-height: 0; resize: vertical; background: #F8FAFC; line-height: 1.5; }
.qf input:focus, .qf select:focus, .qf textarea:focus { outline: 3px solid rgba(28, 114, 210, .18); outline-offset: 0; border-color: var(--qf-blue); box-shadow: none; }
.qf button:focus-visible, .qf a:focus-visible, .qf-qq button:focus-visible { outline: 3px solid rgba(28, 114, 210, .45); outline-offset: 2px; }
.qf input.qf-bad-field, .qf select.qf-bad-field, .qf textarea.qf-bad-field { border-color: #FCA5A5; background-color: var(--qf-bad-wash); }
.qf-errline { color: var(--qf-bad); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: -6px 0 8px; text-align: right; }

/* buttons: his are rounded-xl, light-blue fill with a blue line */
.qf-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; font-family: var(--font); font-weight: 600; font-size: 14px;
  border: 1px solid var(--qf-blue-line); background: var(--qf-blue-wash); color: var(--qf-blue);
  padding: 7px 14px; min-height: 40px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); cursor: pointer;
}
.qf-soft:hover { background: #E0ECFA; }
.qf-soft.qf-xs { font-size: 12px; font-weight: 700; padding: 6px 12px; letter-spacing: .03em; }
.qf-iconbtn {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid var(--qf-blue-line); background: var(--qf-blue-wash); color: var(--qf-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
}
.qf-del {
  width: 36px; height: 36px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--qf-line); background: #fff; color: var(--qf-muted);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.qf-del:hover { color: var(--qf-bad); border-color: #FCA5A5; }

/* big yes / no (packing, own truck), his */
.qf-yn { display: flex; gap: 14px; }
.qf-yn button {
  flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid var(--qf-line);
  background: #fff; font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--qf-ink-2); cursor: pointer;
}
.qf-yn button:hover { border-color: #BFD5F2; }
.qf-yn button[aria-pressed="true"] { background: var(--qf-blue); border-color: var(--qf-blue); color: #fff; box-shadow: 0 8px 18px rgba(28, 114, 210, .18); }
/* small YES / NO (stairs) and LOAD / UNLOAD, his */
.qf-yn-s { display: flex; gap: 8px; border-radius: 10px; }
.qf-yn-s button {
  min-width: 54px; min-height: 40px; border-radius: 8px; border: 1px solid var(--qf-line);
  background: #fff; font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--qf-muted); padding: 0 14px; cursor: pointer;
}
.qf-yn-s button[aria-pressed="true"] { background: var(--qf-blue); border-color: var(--qf-blue); color: #fff; }
.qf-yn-s.qf-bad button { border-color: #FCA5A5; }
.qf-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #F8FAFC; border: 1px solid var(--qf-line-2); }
.qf-seg button {
  border: 0; background: transparent; border-radius: 8px; padding: 7px 16px; min-height: 36px;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--qf-muted); cursor: pointer;
}
.qf-seg button[aria-pressed="true"] { background: var(--qf-blue); color: #fff; box-shadow: 0 4px 10px rgba(28, 114, 210, .25); }
.qf-seg.qf-bad { border-color: #FCA5A5; background: var(--qf-bad-wash); box-shadow: 0 0 0 3px var(--qf-bad-ring); }

/* touch screens get the house 48px tap height on his small controls */
@media (pointer: coarse) {
  .qf-yn-s button, .qf-seg button, .qf-soft, .qf-soft.qf-xs { min-height: 44px; }
  .qf-iconbtn, .qf-del { width: 44px; height: 44px; }
}

.qf-contacts { display: grid; gap: 14px; margin-top: 16px; }
.qf-contacts:empty { display: none; }
.qf-contact {
  position: relative; border: 1px solid var(--qf-line-2); border-radius: 16px; padding: 16px;
  background: #FBFCFE; display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 640px) { .qf-contact { grid-template-columns: 1fr 1fr; } }
.qf-contact .qf-del, .qf-loc > .qf-del { position: absolute; top: -12px; right: -10px; }

/* location cards (his white cards with a soft shadow); two across on wide screens */
.qf-locs { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1024px) {
  .qf-locs { grid-template-columns: 1fr 1fr; }
  .qf-locs > .qf-loc.qf-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 24px; align-items: start; }
  .qf-loc.qf-wide > .qf-loc-top, .qf-loc.qf-wide > .qf-errline,
  .qf-loc.qf-wide > .qf-stairs-row, .qf-loc.qf-wide > .qf-flights { grid-column: 1 / -1; }
  .qf-loc.qf-wide > .qf-lab { grid-column: 1; grid-row: 3; }
  .qf-loc.qf-wide > .qf-addr { grid-column: 1; grid-row: 4; }
  .qf-loc.qf-wide > .qf-two { grid-column: 2; grid-row: 3 / span 2; margin-top: 0; }
}
.qf-loc {
  position: relative; border: 1px solid var(--qf-line-2); border-radius: 24px;
  padding: 20px 20px 18px; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .05); min-width: 0;
}
.qf-loc.qf-bad { border-color: var(--qf-bad-line); background: #FFFBFB; box-shadow: 0 0 0 3px var(--qf-bad-ring); }
.qf-loc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.qf-loc-name { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--qf-muted); display: flex; align-items: center; gap: 6px; }
.qf-loc-name svg { color: var(--qf-blue); }
.qf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.qf-stairs-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--qf-line-2); padding-top: 14px; margin-top: 16px;
}
.qf-q2 { font-size: 14px; font-weight: 600; color: var(--qf-ink-2); margin: 0 0 8px; }
.qf .qf-check {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--qf-ink-2); min-height: 40px; cursor: pointer; letter-spacing: 0;
}
.qf-check input { width: 20px; height: 20px; accent-color: var(--qf-blue); margin: 0; }
.qf-flights { margin-top: 14px; }

/* packing + truck boxes, side by side on wide screens */
.qf-pair { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; align-items: stretch; }
@media (min-width: 900px) { .qf-pair { grid-template-columns: 1fr 1fr; } }
.qf-box { border: 1px solid var(--qf-line-2); border-radius: 20px; padding: 20px; background: #FBFCFE; min-width: 0; }
.qf-box.qf-bad { border-color: var(--qf-bad-line); box-shadow: 0 0 0 3px var(--qf-bad-ring); }
.qf-q { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--qf-ink-2); margin: 0 0 14px; }
.qf-q svg { color: var(--qf-blue); flex: none; }
.qf-fine { font-size: 12px; line-height: 1.35; color: var(--qf-blue); font-weight: 500; margin: 8px 0 0; }
.qf-fine.qf-grey { color: var(--qf-muted); font-style: italic; }
.qf-trucks { margin-top: 16px; border-top: 1px solid var(--qf-line-2); padding-top: 14px; }
.qf-trucks .qf-sub-head { margin: 0 0 4px; padding: 0; border: 0; }
.qf-trucks .qf-sub-head h3 { font-size: 15px; }
.qf-truck-line { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.qf-truck-line select { flex: 1; min-width: 0; }

/* section 3: photos left, + ADD ITEMS and the list right (the photo block is drawn
   by intake.js right after #h-items, only when the photo feature is on) */
.qf-inv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; }
.qf-inv > .qf-h2 { margin-bottom: -2px; }
@media (min-width: 900px) {
  .qf-inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qf-inv > * { grid-column: 1 / -1; }
  .qf-inv > .photo-block { grid-column: 1; }
  .qf-inv > .photo-block + .qf-items-col { grid-column: 2; }
}
.qf .photo-block {
  border: 1px solid var(--qf-blue-line); background: var(--qf-blue-wash); border-radius: 20px;
  padding: 18px 20px; margin: 0; display: flex; flex-direction: column;
}
.qf .photo-title { font-size: 16px; font-weight: 700; color: var(--qf-ink-2); display: flex; align-items: center; gap: 8px; }
.qf .photo-title::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C72D2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qf .photo-line { font-size: 14px; color: var(--qf-muted); margin: 6px 0 0; }
.qf .photo-actions { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.qf .photo-actions .btn {
  min-height: 50px; border-radius: 12px; border: 1px solid var(--qf-blue-line); background: #fff;
  color: var(--qf-blue); font-family: var(--font); font-weight: 700; font-size: 14px; padding: 0 12px; width: 100%;
}
.qf .photo-actions #video-add { order: -1; }  /* his order: Take a video, then Add photos */
.qf .photo-tip { order: 2; font-size: 12px; color: var(--qf-muted); margin: 12px 0 0; }
.qf .photo-live { order: 3; }
.qf .photo-live .photo-status { color: var(--qf-ok); font-weight: 700; font-size: 14px; margin-top: 10px; }
.qf .photo-or { display: none; }
.qf-items-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qf-additems {
  width: 100%; min-height: 60px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--qf-blue); color: #fff; font-family: var(--font); font-size: 17px; font-weight: 700; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 24px rgba(28, 114, 210, .22);
}
.qf-additems:hover { background: var(--qf-blue-hover); }
.qf-plus { font-size: 22px; line-height: 1; }
.qf .qf-basket { flex: 1; display: flex; flex-direction: column; margin: 0; }
.qf .basket-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed var(--qf-line-2); border-radius: 16px; background: #fff;
  padding: 22px; color: var(--qf-muted); font-size: 14px; font-weight: 500; text-align: center;
}
.qf .basket-empty svg { color: #CBD5E1; }
.qf .basket-row { background: #fff; border: 1px solid var(--qf-line-2); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.qf .basket-icon, .qf-sheet .icon { color: var(--qf-blue); }
.qf .step-btn { border-color: var(--qf-blue-line); color: var(--qf-blue); }
.qf .line-btn { color: var(--qf-blue); }
.qf .line-btn.line-remove { color: var(--danger); }
.qf-notes { margin-top: 8px; }
.qf-nh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--qf-line-2); margin-bottom: 12px; }
.qf-nh h3 { margin: 0; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; color: var(--qf-ink-3); }
.qf-nh svg { color: var(--qf-blue); flex: none; }

/* agreement + submit */
.qf-agree-sec { padding-top: 24px; }
.qf .qf-agree {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 16px; margin: 0;
  cursor: pointer; font-size: 16px; font-weight: 500; color: var(--qf-ink-2); letter-spacing: 0; line-height: 1.5;
}
.qf-agree input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--qf-blue); flex: none; }
.qf .qf-agree.qf-bad { background: var(--qf-bad-wash); border: 1px solid var(--qf-bad-line); box-shadow: 0 0 0 3px var(--qf-bad-ring); color: #7F1D1D; font-weight: 700; }
.qf-banner {
  background: var(--qf-bad-wash); border: 1px solid var(--qf-bad-line); color: #B91C1C;
  border-radius: 12px; padding: 14px 16px; font-weight: 700; font-size: 14px; margin: 14px 0;
}
.qf-submit {
  width: 100%; min-height: 66px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--orange); color: #fff; font-family: var(--font); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 14px 28px rgba(247, 120, 23, .22); margin-top: 14px; padding: 0 18px; text-align: center;
}
.qf-submit:hover { background: var(--orange-dark); }
.qf-submit[disabled] { background: #F9B47F; cursor: default; }

.qf-foot { text-align: center; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--qf-line-2); }
.qf-foot-k { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qf-muted); }
.qf-foot-links { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: center; margin: 12px 0 18px; }
.qf-foot-link { display: inline-flex; align-items: center; gap: 8px; color: var(--qf-blue); }
.qf-foot a { color: var(--qf-blue); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.qf-foot a:hover { text-decoration: underline; }
.qf-foot small { color: var(--qf-muted); font-size: 13px; }

/* thank-you page: his layout (centred, white) */
.qf-thanks { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; text-align: center; background: var(--surface); }
.qf-thanks:focus { outline: none; }
.qf-ty-tick { width: 96px; height: 96px; border-radius: 50%; background: var(--qf-blue-wash); color: var(--qf-blue); display: inline-flex; align-items: center; justify-content: center; }
.qf-thanks .qf-ty-h { font-family: var(--font-display); font-weight: 700; color: var(--qf-ink); margin: 18px 0 10px; font-size: clamp(30px, 5vw, 38px); line-height: 1.12; text-transform: none; }
.qf-ty-text { color: #475569; line-height: 1.7; margin: 0 auto 18px; max-width: 560px; }
/* TODO 00226.h3: the estimate line under his thank-you copy. */
.qf-ty-estimate { color: #0f172a; font-size: 1.125rem; font-weight: 700; line-height: 1.5; margin: 0 auto 16px; max-width: 560px; overflow-wrap: anywhere; }
.qf-ref { display: inline-block; border: 1px dashed var(--qf-blue-line); background: var(--qf-blue-wash); border-radius: 10px; padding: 8px 16px; color: var(--qf-blue); font-weight: 700; margin-bottom: 8px; }
.qf-ref strong { font-weight: 700; }
.qf-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--qf-muted) !important; font-weight: 500 !important; font-size: 14px; }

/* the picker, his "Inventory List" modal */
.qf-sheet { background: rgba(15, 23, 42, .6); }
.qf-sheet .sheet-head { padding-left: 16px; padding-right: 16px; border-bottom-color: var(--qf-line-2); }
.qf-m-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qf-m-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--qf-blue-wash); color: var(--qf-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.qf-sheet .sheet-head h2 { font-family: var(--font); font-size: 20px; font-weight: 700; color: var(--qf-ink-3); text-transform: none; letter-spacing: 0; }
.qf-m-sub { font-size: 12px; color: var(--qf-muted); font-weight: 500; }
.qf-sheet #search { border: 1px solid var(--qf-line); border-radius: 12px; background-color: #F8FAFC; padding-left: 42px; }
.qf-sheet .room-title { color: var(--qf-blue); font-size: 13px; font-weight: 700; letter-spacing: .1em; position: sticky; top: -14px; background: rgba(255, 255, 255, .96); padding: 6px 0; z-index: 1; }
.qf-sheet .item-row { border: 1px solid var(--qf-line-2); border-radius: 12px; min-height: 50px; color: var(--qf-ink-2); }
.qf-sheet button.item-row:hover { border-color: var(--qf-blue-line); background: var(--qf-blue-wash); }
.qf-sheet .item-row.is-chosen { background: var(--qf-blue-wash); border-color: var(--qf-blue-line); }
.qf-sheet .item-name { font-size: 14px; font-weight: 500; }
.qf-sheet .item-plus { background: #F8FAFC; border: 1px solid var(--qf-line); color: var(--qf-muted); width: 32px; height: 32px; font-size: 17px; font-weight: 700; }
.qf-sheet .step-btn { border-color: var(--qf-blue-line); color: var(--qf-blue); border-radius: 50%; }
.qf-sheet .no-results { background: var(--qf-blue-wash); border: 1px solid var(--qf-blue-line); border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; text-align: left; }
.qf-sheet .no-results p { margin: 0; font-size: 12px; color: var(--qf-blue); }
.qf-sheet .no-results p strong { font-size: 14px; color: var(--qf-blue-deep); }
.qf-sheet .no-results .btn { margin-top: 10px; min-height: 44px; }
.qf-sheet .sheet-foot { background: #F8FAFC; border-top-color: var(--qf-line-2); }
.qf-sheet .sheet-count { color: var(--qf-muted); font-size: 14px; }
.qf-sheet .btn-primary:not([disabled]) { background: var(--qf-blue); border-color: var(--qf-blue); color: #fff; border-radius: 12px; box-shadow: 0 8px 18px rgba(28, 114, 210, .2); }
.qf-sheet .btn-primary:not([disabled]):hover { background: var(--qf-blue-hover); }
.qf-sheet .back-btn, .qf-sheet .variant-title { color: var(--qf-blue); }
.qf-sheet .variant-title { font-family: var(--font); text-transform: none; color: var(--qf-ink-3); }
@media (min-width: 820px) { .qf-sheet .sheet-panel { border-radius: 24px; } }

/* the Quick Question (his) */
.qf-scrim {
  position: fixed; inset: 0; z-index: 70; padding: 16px;
  background: rgba(15, 23, 42, .6); display: flex; align-items: center; justify-content: center;
}
.qf-qq {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 24px; padding: 34px 26px 26px; text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.qf-qq::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--qf-blue); }
.qf-qq h2 { margin: 0 0 10px; font-family: var(--font); font-size: 25px; font-weight: 700; color: var(--qf-ink); }
.qf-qq-body { color: #475569; line-height: 1.65; margin: 0 0 22px; }
.qf-qq-body b { color: var(--qf-blue); }
.qf-qq-final { font-size: 18px; color: var(--qf-ink-2); font-weight: 500; }
.qf-qq-btns { display: grid; gap: 12px; }
.qf-qq-yes, .qf-qq-no { min-height: 56px; border: 0; border-radius: 12px; font-family: var(--font); font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 14px; }
.qf-qq-yes { background: var(--qf-blue); color: #fff; box-shadow: 0 8px 18px rgba(28, 114, 210, .2); }
.qf-qq-no { background: var(--qf-line-2); color: var(--qf-ink-2); }
.qf-qq-no.qf-dark { background: var(--qf-ink); color: #fff; }
.qf-qq button[disabled] { opacity: .6; cursor: default; }
.qf-okdot { width: 56px; height: 56px; border-radius: 50%; background: var(--qf-ok-wash); color: #10B981; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
/* Inside the WordPress frame the pop-up is placed like the picker (intake.js placeQuick). */
html.is-embed-linked .qf-scrim { position: absolute; inset: auto 0 auto 0; top: var(--sheet-top, 0px); height: var(--sheet-h, 640px); }

@media (max-width: 559px) {
  .qf-tiles, .qf .photo-actions, .qf-two { grid-template-columns: 1fr; }
  .qf-submit { font-size: 16px; }
  .qf-loc { padding: 18px 14px 16px; }
  .qf-contact .qf-del, .qf-loc > .qf-del { right: -6px; }
  .qf-qq { padding: 30px 18px 20px; }
}

/* ===== TODO 00230: the three ways + Request a Call (approved mockup, DECISIONS s326b) ===== */
.qf-ways { margin: 0 0 32px; padding-top: 16px; }
.qf-ways-h { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--qf-ink); text-align: center; margin: 0 0 16px; text-transform: none; }
.qf-ways-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .qf-ways-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.qf-way { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border: 2px solid var(--qf-blue-line); border-radius: var(--radius); background: #fff; color: var(--qf-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); }
.qf-way:hover { border-color: var(--qf-blue); }
.qf-way:focus-visible { outline: 3px solid var(--qf-blue); outline-offset: 2px; }
.qf-way[aria-pressed="true"] { border-color: var(--qf-blue); background: var(--qf-blue-wash); }
.qf-way-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--qf-blue-wash); color: var(--qf-blue); }
.qf-way[aria-pressed="true"] .qf-way-ico { background: var(--qf-blue); color: #fff; }
#way-phone .qf-way-ico { background: var(--orange); color: #fff; }
.qf-way-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qf-way-k { font-weight: 700; font-size: 16px; color: var(--qf-ink); }
.qf-way-v { font-size: 14px; color: var(--qf-muted); }
#way-phone .qf-way-v { color: var(--qf-blue); font-weight: 700; font-size: 16px; }

.qf-call { max-width: 760px; margin: 0 auto; padding: 12px 0 38px; }
.qf-call:not([hidden]) ~ .qf-foot { margin-top: 0; padding-top: 12px; }
.qf-call-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 30px); color: var(--qf-ink); margin: 0 0 8px; text-transform: none; }
.qf-call-lede { color: var(--qf-ink-2); margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.qf-call-grid { display: grid; gap: 18px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .qf-call-grid { grid-template-columns: 1fr 1fr; } }
/* TODO 00232: three fields since the address left (DECISIONS s330b): the name takes the
   whole first row so phone and email pair under it, no empty cell. */
@media (min-width: 640px) { .qf-call-grid > :first-child { grid-column: 1 / -1; } }
.qf-call-submit { margin-top: 26px; width: 100%; }

/* ===== TODO 00231: nothing open on landing; the call calendar to the right (Calvin 2026-10-16) ===== */
#call-title, #quote-title { scroll-margin-top: 16px; }
.qf-call-h:focus, #quote-title:focus { outline: none; }
/* The headings take focus only from script (tabindex=-1, a tap or a deep link), so no ring:
   Chrome paints :focus-visible on a load-time .focus(). Controls keep their rings. */
.qf-call-h:focus-visible, #quote-title:focus-visible { outline: none; }
.qf-call-cols { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.qf-cal { border: 1px solid var(--qf-blue-line); border-radius: var(--radius); background: #fff; padding: 18px 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.qf-cal.qf-bad { border-color: var(--qf-bad-line); box-shadow: 0 0 0 3px var(--qf-bad-ring); }
.qf-cal-title { margin: 0 0 12px; }
.qf-cal-asap { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 8px 14px; border: 2px solid var(--qf-blue-line); border-radius: 999px; background: #fff; color: var(--qf-blue-deep); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.qf-cal-asap[aria-pressed="true"] { border-color: var(--qf-blue); background: var(--qf-blue-wash); color: var(--qf-blue); }
.qf-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 6px; }
.qf-cal-month { margin: 0; font-weight: 700; font-size: 16px; color: var(--qf-ink); text-align: center; flex: 1; }
.qf-cal-nav { flex: none; width: 44px; height: 44px; border: 1px solid var(--qf-line); border-radius: 50%; background: #fff; color: var(--qf-blue); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.qf-cal-nav:disabled { color: var(--qf-faint); cursor: default; opacity: .5; }
.qf-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.qf-cal-wd { text-align: center; font-size: 12px; font-weight: 700; color: var(--qf-muted); padding: 4px 0; }
.qf-cal-day { min-height: 44px; min-width: 0; border: 1px solid transparent; border-radius: 10px; background: var(--qf-blue-wash); color: var(--qf-ink); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; padding: 0; }
.qf-cal-day:hover:not(:disabled) { border-color: var(--qf-blue); }
.qf-cal-day:disabled { background: transparent; color: var(--qf-faint); cursor: default; }
.qf-cal-day.qf-cal-today:not(:disabled) { border-color: var(--qf-blue-line); }
.qf-cal-day[aria-pressed="true"] { background: var(--qf-blue); color: #fff; border-color: var(--qf-blue); }
.qf-cal-day:focus-visible, .qf-cal-nav:focus-visible, .qf-cal-asap:focus-visible { outline: 3px solid var(--qf-blue); outline-offset: 2px; }
/* Phones 360 to 419 wide: the day grid reaches 5px from the card edge with a 1px gap, so
   every day stays at least 44px wide (s328 look: 43px at 390). */
@media (max-width: 419px) { .qf-cal-days { margin-left: -11px; margin-right: -11px; gap: 4px 1px; } }
.qf-cal-times[hidden] { display: none; }
.qf-cal-times { margin-top: 16px; }
.qf-cal-times-title { margin: 0 0 8px; }
.qf-cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.qf-cal-slot { position: relative; display: block; }
.qf-cal-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.qf-cal-slot span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--qf-line); border-radius: 10px; background: #fff; font-weight: 600; font-size: 14px; color: var(--qf-ink-2); cursor: pointer; white-space: nowrap; }
.qf-cal-slot input:checked + span { background: var(--qf-blue); border-color: var(--qf-blue); color: #fff; }
.qf-cal-slot input:focus-visible + span { outline: 3px solid var(--qf-blue); outline-offset: 2px; }
.qf-cal-pick { margin: 14px 0 0; font-weight: 600; font-size: 15px; color: var(--qf-blue-deep); }
.qf-cal.qf-bad .qf-cal-pick { color: var(--qf-bad); }
.qf-cal-zone { margin: 4px 0 0; font-size: 13px; color: var(--qf-muted); }
/* Fields left, calendar right once there is room for both (his iframe is about 1100px
   wide on a laptop); below that the calendar stacks under the fields. Not the old
   tablet default (responsive-design-standard.md section 2). */
@media (min-width: 1024px) {
  .qf-call { max-width: 1040px; }
  .qf-call-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .qf-call-cols .qf-call-grid { grid-template-columns: 1fr; }
  /* TODO 00232 (audit MAJOR-1): three fields since the address left, so the column is
     given the calendar's weight (gap gate column ratio >= 0.65): taller fields, a wider
     rhythm between them, the whole column centred against the calendar. */
  .qf-call-cols .qf-call-grid { row-gap: 48px; align-self: center; }
  .qf-call-cols .qf-call-grid input { min-height: 56px; }
}
/* Landing (nothing open): the cards sit their own gap above the contact block. */
#quote-view[hidden] ~ .qf-foot { margin-top: 0; padding-top: 16px; }

/* TODO 00234: the "Truck/pod not needed" box, under the question and above the Yes/No
   (a 44px touch row). The -6px collapses into the question's 14px, so the truck Yes/No sits
   8 + 44 + 8 = 60px under its question. */
.qf .qf-check.qf-no-truck { display: flex; min-height: 44px; margin: -6px 0 8px; }
.qf-no-truck input { width: 22px; height: 22px; flex: none; }
/* Side by side (>=900px): the packing Yes/No sits that same 60px under its question (the
   margin collapses with the question's 14px), so both questions
   and both Yes/No rows line up and the packing box no longer ends in a tall empty band.
   Ticked, the truck Yes/No is gone, so the packing one goes back under its question. */
@media (min-width: 900px) {
  .qf-pair #packing-box > .qf-yn { margin-top: 60px; }
  .qf-pair:has(#truck_not_needed:checked) #packing-box > .qf-yn { margin-top: 0; }
}