/* ============================================================
   Ankersen Drake - Client Forms
   Presentation layer V5. Design-system tokens (Parchment / Chalk /
   Ink Olive / Stone), Cormorant + sans. One question per page inside
   the real Schema v1 steps; the final step is a single form page.
   Shared by every route; do not fork.
   ============================================================ */

:root {
  --parchment: #F1F0EB;
  --chalk: #F6F5F0;
  --ink: #232427;
  --ink-70: #3D3F44;
  --ink-50: #5C5C57;
  --ink-30: #9D9FA4;
  --umber: #3E4046;
  --moss: #3A3D2E;
  --stone: #ADA89C;
  --rule-12: rgba(35, 36, 39, 0.12);
  --rule-20: rgba(35, 36, 39, 0.20);
  --field: #FFFFFF;
  --error: #7A3527;
  --disabled: #EBE9E3;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --rule: 1px solid var(--rule-12);
  --radius: 0px;
  --focus-ring: 0 0 0 2px rgba(35, 36, 39, 0.16);
  --ease: cubic-bezier(0.22, 0.6, 0.32, 1);

  --shell-form: 1180px;
  --shell-wide: 1320px;
  --col-form: 800px;
  --pad-x: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #F3F1EC; }

body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: #F3F1EC; color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-20); text-underline-offset: 3px; transition: text-decoration-color 180ms var(--ease); }
a:hover { text-decoration-color: var(--ink); }

/* ---------- Shell ------------------------------------------ */

.shell { width: 100%; max-width: calc(var(--shell-form) + var(--pad-x) * 2); margin: 0 auto; padding: 0 var(--pad-x); }
body > .shell { flex: 1; display: flex; flex-direction: column; }
.shell--wide { max-width: calc(var(--shell-wide) + var(--pad-x) * 2); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

/* ---------- Masthead --------------------------------------- */

.masthead { background: var(--ink); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: calc(var(--col-form) + var(--pad-x) * 2); }
.masthead a { display: inline-flex; align-items: center; height: 44px; text-decoration: none; }
/* Official horizontal wordmark. Never crop, mask, stretch or recreate it. */
.mark-img { width: auto; height: 14px; }
.masthead__util {
  font-size: 10.5px; line-height: 1; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--parchment); white-space: nowrap;
}

/* House rule: a paragraph must never end with a one-to-three-word last
   line. text-wrap: pretty makes the engine reflow the closing lines to
   avoid short orphans; hyphens fill the last line where it cannot. */
.lede, .note, .contact, .field__hint, .splash__tagline, p { text-wrap: pretty; }

/* ---------- Type --------------------------------------------- */

h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; text-wrap: pretty; letter-spacing: -0.003em; }
h1 { font-size: 34px; line-height: 1.1; }
h2 { font-size: 26px; line-height: 1.15; }

.eyebrow { display: block; margin: 0 0 12px; font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-50); }
.step__eyebrow { display: none; }

.lede { font-family: var(--sans); font-size: 12.5px; line-height: 1.65; color: var(--ink-70); margin: 12px 0 0; max-width: 520px; text-wrap: pretty; }
.note { font-size: 12.5px; line-height: 1.5; color: var(--ink-50); margin: 14px 0 0; max-width: 560px; text-wrap: pretty; }

h3 { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-50); margin: 0 0 8px; }

/* ---------- Focused form column ----------------------------- */

.form-col { width: 100%; max-width: var(--col-form); margin: 0 auto; padding: 0; flex: 1; display: flex; flex-direction: column; }
.form-col > form { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 32px 0; }
.form-col > form > .step { flex: none; }
/* The intro is shorter than the form area; centre it so the padding above
   and below the image reads as equal. */
.form-col > form:has(.step--intro.is-active) { justify-content: center; }

/* ---------- Progress --------------------------------------- */

/* Progress lives in a full-bleed white strip beneath the masthead */
.progress { position: relative; isolation: isolate; width: 100%; max-width: var(--col-form); margin: 0 auto; padding: 40px 0 0; }
.progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--parchment); z-index: -1; }
.progress:empty { display: none; }
.progress__track, .progress__segments { position: relative; z-index: 1; }

.progress__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

.progress__node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; min-width: 0; }
/* Numbered circles, titled beneath; no connecting lines. */
.progress__dot {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--stone); background: var(--parchment); color: var(--ink-50);
  font-family: var(--serif); font-size: 14px; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums; padding: 0 0 1px;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.progress__node.is-done .progress__dot { border-color: var(--stone); color: var(--ink-50); }
.progress__node.is-current .progress__dot { background: var(--ink); border-color: var(--ink); color: var(--parchment); }

.progress__label { margin-top: 10px; font-family: var(--serif); font-size: 9.5px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); opacity: 1; max-width: 100%; transition: opacity 200ms var(--ease), color 200ms var(--ease); }
.progress__node.is-done .progress__label { color: var(--ink-70); }
.progress__node.is-current .progress__label { color: var(--ink); opacity: 1; }

.progress__segments { display: none; gap: 6px; }
.progress__segments span { flex: 1; height: 1px; background: var(--rule-20); transition: background-color 200ms var(--ease); }
.progress__segments span.is-done, .progress__segments span.is-current { background: var(--ink); }

/* ---------- Steps + pages ---------------------------------- */

.step { display: none; padding: 0; }
.step.is-active { display: block; }
.step__head { padding-bottom: 24px; }

/* Paged steps: the section name becomes a quiet italic running line
   with a short rule beneath; the question itself is the heading. */
/* Each question step opens with a quiet serif lead-in, above the question */
.step__intro { font-family: var(--serif); font-style: normal; font-size: 15px; line-height: 1.5; color: var(--ink-50); margin: 0 0 20px; }
.step.has-pages .step__head { display: block; }
.step.has-pages .step__head h2, .step.has-pages .step__head .step__eyebrow { display: none; }
.step.has-pages .step__head:not(:has(.step__intro)) { display: none; }
.step.has-pages h2 { font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 500; line-height: 1.3; color: var(--ink-50); letter-spacing: 0.22em; text-transform: uppercase; }
.page__count { display: none; }

/* Intro step: image beside the greeting so the opening page carries the
   same weight as the landing. */
.step--intro.is-active { display: grid; grid-template-columns: 7fr 6fr; grid-template-rows: auto auto; column-gap: 0; align-items: stretch; align-content: center; padding: 0;
  border: 0; background: #FFFFFF; box-shadow: 0 18px 48px rgba(35,36,39,0.10); overflow: hidden; }
.step--intro .step__media { margin: 0; min-width: 0; align-self: stretch; }
.step--intro .step__media { position: relative; }
.step--intro .step__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.step--intro .step__media { grid-area: 1 / 1 / 3 / 2; }
.step--intro .step__head { grid-area: 1 / 2 / 2 / 3; }
.step--intro .step__body { grid-area: 2 / 2 / 3 / 3; }
.step--intro .step__head { align-self: end; padding: 40px 44px 0; }
.step--intro .step__head .lede { margin: 14px 0 0; max-width: 420px; }
.step--intro .step__body { align-self: start; }
.step--intro .step__body .note { font-family: var(--sans); font-style: italic; font-size: 12.5px; line-height: 1.65; color: var(--ink-70); margin: 10px 0 28px; }
/* Title page: route name in serif caps, italic tagline beneath */
.splash__title { font-size: 30px; line-height: 1.14; letter-spacing: 0.1em; text-transform: uppercase; max-width: none; }
.splash__tagline { font-family: var(--serif); font-style: normal; font-size: 17px; line-height: 1.3; color: var(--ink); margin: 12px 0 0; max-width: 330px; text-wrap: pretty; }
.step--intro .step__head .lede { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--rule-20); max-width: 330px; text-align: justify; text-wrap: auto; hyphens: auto; }
.step--intro .step__body { padding: 34px 44px 44px; }
.step--intro .step__body .actions--start { justify-content: center !important; }
.greeting { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; color: var(--ink-50); margin: 0 0 14px; }

.step.is-active .step__head, .step.is-active .step__body, .page { animation: rise 200ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page.is-off { display: none !important; }

/* ---------- Fields ----------------------------------------- */

.field { margin: 0 0 18px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.field--inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }

.field__label { display: block; font-size: 9px; line-height: 1.4; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; white-space: nowrap; overflow: visible; }
.field__label:focus { outline: none; }
.field-row .field__label,
.step[data-single-page] .step__body > .field .field__label { white-space: normal; text-wrap: pretty; }
.field__label .optional { font-weight: 400; font-style: italic; color: var(--ink-30); letter-spacing: 0.04em; text-transform: none; font-size: 10px; margin-left: 6px; }
.field__hint--after { margin: 8px 0 0; }
.field__label .req { margin-left: 4px; color: var(--ink-70); font-style: normal; }
.page > .field__label .req, .page > fieldset > legend.field__label .req { font-size: 0.7em; vertical-align: 0.35em; }
/* Dialling code and number read as one control */
.field__combo { display: flex; align-items: stretch; border: 1px solid var(--rule-20); background: var(--field); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.field__combo:hover { border-color: var(--stone); }
.field__combo:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.field__combo > select.field__combo-code { width: auto; flex: none; border: 0; border-right: 1px solid var(--rule-20); background-color: transparent; box-shadow: none; padding-right: 34px; padding-left: 14px; }
.field__combo > select.field__combo-code:hover, .field__combo > select.field__combo-code:focus { border-color: var(--rule-20); box-shadow: none; }
.field__combo > input { border: 0; background: transparent; box-shadow: none; }
.field__combo > input:hover, .field__combo > input:focus { border: 0; box-shadow: none; }
.field.has-error .field__combo { border-color: var(--error); }
.field.has-error .field__combo > input { border-color: transparent; }
.field__hint { display: block; font-family: var(--sans); font-style: italic; font-size: 12.5px; line-height: 1.6; color: var(--ink-50); margin: -2px 0 10px; max-width: 560px; text-wrap: pretty; }

/* The single question on a page is the heading */
.page > .field__label, .page > fieldset > legend.field__label, .page__title {
  font-family: var(--serif); font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -0.003em; text-transform: none; color: var(--ink); margin-bottom: 10px; max-width: none; white-space: normal; overflow: visible; text-wrap: pretty;
}
.page > .field__label .optional, .page > fieldset > legend.field__label .optional { display: block; margin-top: 8px; font-family: var(--sans); font-style: italic; font-size: 11.5px; font-weight: 400; color: var(--ink-30); margin-left: 0; letter-spacing: 0; }
.page > .field__label + input, .page > .field__label + select, .page > .field__label + textarea,
.page > fieldset > legend.field__label + .choices { margin-top: 0; }
.page > .field__label, .page > fieldset > legend.field__label { margin-bottom: 20px; }
.page > .field__hint, .page > fieldset > .field__hint { margin: -8px 0 20px; max-width: none; }
.page__title { display: block; }
.page__title + .field-row { margin-top: 22px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  display: block; width: 100%; height: 44px;
  font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--ink);
  background: var(--field); border: 1px solid var(--rule-20); border-radius: var(--radius); padding: 0 14px;
  appearance: none; -webkit-appearance: none;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
textarea { height: auto; min-height: 104px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C5C57' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer;
}
input::placeholder, textarea::placeholder { color: var(--ink-30); opacity: 1; }
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="url"]:hover, select:hover, textarea:hover { border-color: var(--stone); }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--disabled); color: var(--ink-30); }
button:focus-visible, a:focus-visible, .choice input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Choice lists ----------------------------------- */

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; display: block; float: none; width: 100%; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0 0 0 1px; }
.choices--single { grid-template-columns: minmax(0, 1fr); }

.choice { display: flex; align-items: flex-start; gap: 12px; min-height: 32px; padding: 6px 0; font-size: 13px; line-height: 1.45; color: var(--ink-70); cursor: pointer; text-wrap: pretty; transition: color 140ms var(--ease); }
.choice:hover { color: var(--ink); }
.choice input:not(.choice__custom) {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 15px; height: 15px; margin: 2px 0 0;
  border: 1px solid var(--stone); border-radius: 50%; background: transparent; cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}
.choice input[type="radio"] { border-radius: 50%; }
.choice:hover input { border-color: var(--ink); }
.choice input:checked { background-color: var(--ink); border-color: var(--ink); }
.choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' fill='none' stroke='%23F1F0EB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px 7px;
}
.choice input[type="radio"]:checked { background-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--field); }
.choice.is-disabled { color: var(--ink-30); cursor: default; }
.choice.is-disabled input { border-color: var(--rule-20); background: var(--disabled); cursor: default; }

.field[data-validate="consent"] .choice { font-size: 13px; color: var(--ink-70); align-items: flex-start; }

/* ---------- Single-page (form-style) step ------------------ */

.step[data-single-page] .step__head { padding-bottom: 28px; }
.step[data-single-page] .step__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.step[data-single-page] .step__body > .field { margin-bottom: 18px; }
.step[data-single-page] .step__body > .field-row,
.step[data-single-page] .step__body > .reveal,
.step[data-single-page] .step__body > .field:has(textarea),
.step[data-single-page] .step__body > .field:has(fieldset),
.step[data-single-page] .step__body > .field:has([data-upload]),
.step[data-single-page] .step__body > .field[data-validate="consent"],
.step[data-single-page] .step__body > .actions,
.step[data-single-page] .step__body > .field:has(#source),
.step[data-single-page] .step__body > .field:has(#project_location),
.step[data-single-page] .step__body > .field:has(#client_reference) { grid-column: 1 / -1; }
.step[data-single-page] .step__body > .field:has(fieldset) .field__label { margin-bottom: 4px; }
/* A radio group sharing a row with an input: align both to the same baseline */
.step[data-single-page] .field-row { align-items: start; }
.step[data-single-page] .field-row .field:has(fieldset) .choices--single { display: flex; gap: 0 28px; }
.step[data-single-page] .field-row .field:has(fieldset) .choice { min-height: 44px; align-items: center; padding: 0; }
.step[data-single-page] .field__hint { font-family: var(--sans); font-style: normal; font-size: 12px; margin: 0 0 8px; }
.step[data-single-page] input[type="text"], .step[data-single-page] input[type="email"], .step[data-single-page] input[type="tel"], .step[data-single-page] select { height: 38px; font-size: 13px; }
.step[data-single-page] select { background-size: 10px 7px; }
.step[data-single-page] .choices--single { display: flex; gap: 0 36px; }
.step[data-single-page] .choices--single { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step[data-single-page] .field[data-validate="consent"] .choices--single { grid-template-columns: minmax(0, 1fr); }
.step[data-single-page] .field[data-validate="consent"] { margin: 6px 0 0; padding: 18px 0; border-top: var(--rule); border-bottom: var(--rule); }
.step[data-single-page] .field[data-validate="consent"] + .actions { margin-top: 24px; }


/* Question steps sit on the same white card as the splash and thank-you
   panels, at every width. */
.form-col > form > .step.is-active:not(.step--intro) { background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(35,36,39,0.10); padding: 44px 56px;
  display: flex; flex-direction: column; justify-content: center; }
.form-col > form > .step.is-active:not(.step--intro) .step__body > .page:first-child,
.form-col > form > .step.is-active:not(.step--intro) .page:first-child > .page__title { margin-top: 0; }

.choice-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.choice-stack { display: flex; flex-direction: column; gap: 20px; }
.choices--tail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--rule-20); }
.choice-group__name { font-family: var(--sans); font-size: 8.5px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-50); margin: 0 0 8px; }
.choices--group { display: grid; grid-template-columns: minmax(0, 1fr); columns: auto; }
.choice--custom { align-items: center; }
.choice input.choice__custom, .choice__custom { flex: 1 1 auto; appearance: auto; border-radius: 0; width: auto; height: auto; min-height: 0; padding: 0; border: 0; background: transparent;
  font-family: var(--sans); font-size: inherit; line-height: inherit; color: var(--ink); box-shadow: none; }
.choice input.choice__custom:focus, .choice__custom:focus { outline: none; box-shadow: none; border: 0; }
.choice__custom::placeholder { color: var(--ink-50); }

/* ---------- Date range calendar ----------------------------- */

.cal { margin: 0; }
.cal__bar { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 18px; }
.cal__centre { flex: 0 1 auto; text-align: center; }
.cal__hint { font-family: var(--sans); font-style: italic; font-size: 12px; line-height: 1.5; color: var(--ink-50); margin: 10px 0 14px; }
.cal__summary { font-family: var(--serif); font-size: 14px; line-height: 1.4; color: var(--ink-70); margin: 0; text-align: center; flex: 1 1 auto; }
.cal__nav { appearance: none; background: transparent; border: var(--rule); width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 13px; color: var(--ink); cursor: pointer; flex: none; }
.cal__nav:disabled { color: var(--ink-30); cursor: default; }
.cal__months { display: grid; grid-template-columns: minmax(0, 1fr); }
.cal__name { font-family: var(--serif); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; text-align: center; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__dow { font-family: var(--sans); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-30); text-align: center; padding-bottom: 4px; }
.cal__pad { display: block; }
.cal__day { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-70); height: 30px;
  transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.cal__day:hover:not(:disabled) { background: var(--rule-12); color: var(--ink); }
.cal__day.is-today { text-decoration: underline; text-underline-offset: 3px; }
.cal__day.is-past { color: var(--ink-30); cursor: default; }
.cal__day.is-in { background: var(--rule-12); color: var(--ink); }
.cal__day.is-edge { background: var(--ink); color: var(--parchment); }
.cal__clear { appearance: none; background: transparent; border: 0; padding: 10px 0 0; cursor: pointer; display: block; margin-inline: auto; text-align: center;
  font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-50); }
.cal__clear:hover { color: var(--ink); }
.field__label--quiet { font-family: var(--serif); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-70); margin-top: 22px; }

/* ---------- Actions + buttons ------------------------------ */

/* 26px + the last choice's 6px padding reads as the same 32px gap that sits
   above the first option, so the question sits centred between the two. */
.actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; padding-top: 0; border-top: 0; }
.actions--start { justify-content: flex-start !important; margin-top: 0; padding-top: 0; border-top: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1;
  height: 40px; min-width: 120px; padding: 2px 22px 0;
  font-family: var(--sans); font-size: 9.5px; font-weight: 400; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--parchment); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover { background: var(--umber); border-color: var(--umber); color: var(--parchment); }
.btn:disabled { background: var(--disabled); border-color: var(--disabled); color: var(--ink-30); cursor: default; }
.btn[hidden] { display: none; }
.btn .arrow { display: inline-flex; align-items: center; width: 14px; height: 8px; flex: none; position: relative; top: -0.5px; }
.btn .arrow svg { display: block; width: 14px; height: 8px; }

.btn--quiet { background: transparent; border-color: var(--rule-20); color: var(--ink-50); }
.btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* ---------- Upload ----------------------------------------- */

.upload-wrap { display: block; }
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 140px; padding: 24px;
  border: 1px dashed var(--stone); border-radius: var(--radius); background: var(--field);
  text-align: center; color: var(--ink-50); cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.upload:hover, .upload.is-over { border-color: var(--ink); }
.upload.is-over { background: #EDEBE4; }
.upload:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.upload.is-full { display: none; }
.upload__icon { display: block; width: 20px; height: 20px; color: var(--ink); margin-bottom: 6px; }
.upload__icon svg { display: block; width: 20px; height: 20px; }
.upload__title { display: block; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.upload__note { display: block; max-width: 100%; font-size: 12px; line-height: 1.4; color: var(--ink-50); }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Populated: thumbnails with the remove control attached inside the image corner */
.upload-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 20px 14px; }
.upload-list:not(:empty) { margin-top: 12px; }
.upload-list li { position: relative; width: 140px; animation: rise 200ms var(--ease) both; }
.upload-list img { width: 140px; height: 100px; object-fit: cover; border-radius: var(--radius); border: var(--rule); background: var(--disabled); }
.upload-list .upload__name { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list .upload__size { display: block; font-size: 11px; line-height: 1.4; color: var(--ink-50); }
.upload-list .upload__remove {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--rule-20); background: var(--field); color: var(--ink);
  font: inherit; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.upload-list .upload__remove:hover { background: var(--ink); border-color: var(--ink); color: var(--parchment); }
.upload-list .upload__add {
  width: 140px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--stone); border-radius: var(--radius); background: var(--field); color: var(--ink-50); font-size: 12px; cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.upload-list .upload__add:hover { border-color: var(--ink); color: var(--ink); }
.upload-list .upload__add svg { width: 14px; height: 14px; }
.upload-list .upload__add[hidden] { display: none; }

/* Guidance sits beneath the drop zone; the duplicate aside is retired. */
.field__aside { display: none !important; }
.upload-inline { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-50); }

/* ---------- Validation ------------------------------------- */

.field.has-error input:not([type="checkbox"]):not([type="radio"]), .field.has-error select, .field.has-error textarea, .field.has-error .upload { border-color: var(--error); }
.field__error { display: none; font-size: 12.5px; line-height: 1.5; color: var(--error); margin: 8px 0 0; }
.field.has-error .field__error { display: block; }

/* ---------- Conditional reveals ---------------------------- */

.reveal { display: none; }
.reveal.is-open { display: block; }

/* ---------- Editorial landing ------------------------------ */

/* Landing mirrors the intro step: same column, same split, same cap */
.landing { display: grid; grid-template-columns: 5fr 7fr; column-gap: 44px; align-items: center; width: 100%; max-width: var(--col-form); margin-inline: auto; padding: 32px 0; }
.landing__media { margin: 0; min-width: 0; }
.landing__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: min(440px, calc(100vh - 300px)); object-fit: cover; object-position: 50% 45%; }
.landing__body { align-self: center; max-width: 420px; }
.landing__body h1 { font-size: 42px; line-height: 1.05; max-width: 480px; }
.landing__body .lede { margin-top: 18px; max-width: 440px; }
.landing__body .actions--start { margin-top: 28px; }
.graded { filter: saturate(0.85) contrast(1.08) brightness(0.94) sepia(0.08); }
.graded--deep { filter: saturate(0.85) contrast(1.08) brightness(0.94) sepia(0.08); }

/* ---------- Terminal / thank-you --------------------------- */

/* No imagery: a single quiet column on the same grid as the form */
.terminal { display: flex; flex-direction: column; justify-content: center; flex: 1;
  width: 100%; max-width: var(--col-form); margin-inline: auto; padding: 32px 0; }
.terminal__side { display: none; }
/* Same treatment as the title page: framed panel, image bleeding to the edge */
.terminal .shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; align-items: stretch; padding: 0;
  background: #FFFFFF; box-shadow: 0 18px 48px rgba(35,36,39,0.10); overflow: hidden; }
.terminal__body { grid-area: 1 / 1 / 2 / 2; max-width: none; padding: 44px; align-self: center; }
.terminal__media { grid-area: 1 / 2 / 2 / 3; position: relative; margin: 0; min-width: 0; }
.terminal__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.terminal h1 { font-size: 30px; line-height: 1.14; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.terminal .lede { margin: 30px auto 0; padding-top: 0; border-top: 0; max-width: 330px; text-align: justify; hyphens: manual; }
.terminal .lede + .lede { margin-top: 12px; padding-top: 0; border-top: 0; }
.terminal .actions--start { justify-content: center !important; margin-top: 38px; }
.terminal .contact { margin: 22px auto 0; padding-top: 0; border-top: 0; max-width: 340px; text-align: left; text-wrap: balance; }
.terminal .note { text-align: center; }
.terminal .eyebrow { margin-bottom: 18px; }
.terminal h1 { font-size: 34px; line-height: 1.1; }
.terminal .lede { margin-top: 26px; max-width: 460px; }
.terminal .lede + .lede { margin-top: 12px; }
.terminal .actions--start { margin-top: 32px; }
.contact { display: block; margin: 28px 0 0; padding-top: 18px; border-top: var(--rule); font-size: 13px; line-height: 1.5; color: var(--ink-50); max-width: 420px; text-wrap: pretty; }
.contact a { color: var(--ink); }

/* ---------- Footer · Ink Olive band, monogram only ---------- */

.foot { margin-top: auto; background: var(--ink); color: var(--parchment); }
.foot__inner { display: flex; align-items: center; justify-content: center; gap: 24px; height: 56px; max-width: calc(var(--col-form) + var(--pad-x) * 2); }
.foot a { display: inline-flex; align-items: center; text-decoration: none; }
.foot__mark { height: 26px; width: auto; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 0; padding: 0; list-style: none; font-size: 9px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; }
.foot__links a { color: var(--parchment); transition: color 160ms var(--ease); }
.foot__links a:hover { color: var(--parchment); }

/* ---------- Utility ---------------------------------------- */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.garden-gate { position: absolute; left: -6000px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1279px) {
  :root { --pad-x: 40px; --col-form: 760px; --shell-wide: 1180px; }
}

@media (max-width: 1023px) {
  :root { --pad-x: 32px; --col-form: 680px; }
  .landing { max-width: var(--col-form); margin-inline: auto; padding-top: 32px; }
  .terminal { max-width: var(--col-form); margin-inline: auto; padding-top: 32px; }
  .landing { grid-template-columns: minmax(0, 1fr); }
  .landing__media { grid-column: 1 / -1; }
  .landing__body { grid-column: 1 / -1; max-width: 600px; padding-top: 32px; }
  .landing__media img { aspect-ratio: 16 / 9; max-height: 340px; }
  .landing__body h1, .terminal h1 { font-size: 32px; }
  .field--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; }
  .masthead__inner { height: 56px; }
  .mark-img { height: 12px; }
  .masthead__util { display: none; }

  h1 { font-size: 30px; }
  h2 { font-size: 24px; line-height: 1.18; }
  .page > .field__label, .page > fieldset > legend.field__label, .page__title { font-size: 22px; line-height: 1.2; }
  .landing__body h1, .terminal h1 { font-size: 24px; line-height: 1.14; }

  .progress { padding: 24px 0 0; }
  .progress__track { display: none; }
  .progress__segments { display: flex; }
  .step { padding-top: 0; }
  .form-col > form > .step.is-active:not(.step--intro) { background: #FFFFFF; box-shadow: 0 18px 48px rgba(35,36,39,0.10); padding: 24px; }
  /* The splash card sits in an even surround: the same beige above, below
     and at its sides. */
  .form-col > form { padding: var(--pad-x) 0; }
  .form-col > form:has(.step--intro.is-active) { justify-content: flex-start; padding: var(--pad-x) 0; }
  /* the card stays content-height; a close-crop image fills whatever is left
     between it and the pinned footer, at any height */
  body::after { content: ""; order: 1; flex: 1 1 auto; min-height: 130px;
    background: url("../img/mobile-band-form.jpg") 50% 0% / cover no-repeat; filter: saturate(0.85) contrast(1.08) brightness(0.94) sepia(0.08); }
  .foot { order: 2; }
  body:has(.terminal)::after { background-image: url("../img/mobile-band-thanks.jpg"); background-position: 50% 50%; }
  body > .shell, .landing, .terminal { flex: none; align-items: stretch; }
  .terminal { justify-content: flex-start; }
  .terminal .shell, .form-col > form > .step--intro.is-active { flex: none; }
  .terminal__body { align-self: start; text-align: center; }
  .terminal h1 { max-width: 250px; margin-inline: auto; }
  .terminal .lede { max-width: 250px; margin: 16px auto 0; padding-top: 0; border-top: 0; font-size: 14.5px;
    line-height: 1.6; text-align: justify; hyphens: none; }
  .terminal .lede + .lede { padding-top: 0; border-top: 0; margin-top: 16px; }
  .terminal .contact { max-width: 250px; margin: 18px auto 0; padding-top: 0; border-top: 0; font-style: italic;
    font-size: 14.5px; line-height: 1.6; text-align: justify; hyphens: none; }
  .terminal .actions--start { max-width: 250px; margin: 24px auto 0; }
  .landing, .terminal { padding: var(--pad-x) 0 !important; }
  .step--intro.is-active { grid-template-columns: minmax(0, 1fr); }
  .step--intro .step__media { display: none; }
  .step--intro .step__head { grid-area: auto; }
  .step--intro .step__body { grid-area: auto; }
  .step--intro .step__head { padding: 24px 24px 0; }
  .step--intro .step__body { padding: 16px 24px 24px; }
  .step--intro .step__body .actions--start { max-width: 250px; margin-inline: auto; }
  .step--intro .step__body .note { margin: 0 auto 16px; max-width: 250px; text-align: justify; hyphens: auto; }
  .step--intro.is-active { grid-template-rows: auto; }
  .step--intro .step__head { padding: 24px 24px 0; }
  .step--intro .step__head { padding-bottom: 0; }
  .field-row, .field--inline { grid-template-columns: minmax(0, 1fr); }
  .step[data-single-page] .step__body { grid-template-columns: minmax(0, 1fr); }
  .step[data-single-page] .choices--single { grid-template-columns: minmax(0, 1fr); }
  .choices { grid-template-columns: minmax(0, 1fr); }
  /* Typing targets stay at the 44px minimum (the single-page base rule is 38px) */
  .step[data-single-page].is-active input[type="text"], .step[data-single-page].is-active input[type="email"],
  .step[data-single-page].is-active input[type="tel"], .step[data-single-page].is-active select { height: 44px; font-size: 14px; }
  /* The short hint sits clear of the lead-in, as at the larger sizes */
  .field__hint--inline,
  .page > fieldset > .field__hint--inline, .page > .field > .field__hint--inline { margin: 12px 0 0; }
  /* Splash body copy matches the rest of the mobile body type */
  .step--intro .step__head .lede, .step--intro .step__body .note { font-size: 12px; line-height: 1.62; }
  /* Options: hairline rows and balanced space, as on the larger screens */
  .step.is-active:not(.step--intro) .field .choice { min-height: 48px; align-items: center; gap: 14px;
    padding: 4px 2px; border-bottom: 1px solid var(--rule-12); }
  .step.is-active:not(.step--intro) .field[data-validate="consent"] .choice { border-bottom: 0; align-items: flex-start; }
  .step.is-active:not(.step--intro) .field:has(.choices) .choices { margin: 12px 0 0; padding-bottom: 0; }
  .step.is-active:not(.step--intro) .field:has(.choices) .step__intro { margin-bottom: 0; }
  .step.is-active:not(.step--intro) .field:has(.choices) > .field__error { margin: 14px 0 0; }
  /* Single-page steps: same heading rhythm as the question pages */
  .step[data-single-page].is-active > .step__head h2 { font-size: 24px; line-height: 1.2; margin: 0 0 16px; }
  .step[data-single-page].is-active > .step__head { padding-bottom: 24px; }
  .step[data-single-page].is-active .step__body { row-gap: 18px; }
  .step[data-single-page].is-active .field__label { margin-bottom: 8px; }
  .step[data-single-page].is-active .field[data-validate="consent"] { margin-top: 14px; }
  /* Date picking needs a real touch target, and the grid keeps its box */
  .cal { border: 1px solid var(--rule-20); padding: 16px 14px 12px; }
  .cal__day { height: 44px; font-size: 14px; }
  .cal__nav { width: 44px; height: 44px; }
  .cal__clear { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; }
  .choice { min-height: 44px; padding: 6px 0; }

  .btn { height: 48px; }
  .actions { gap: 12px; }
  .actions .btn:not(.btn--quiet) { flex: 1; }
  .actions--start .btn { flex: 1; }
  .btn--quiet { flex: none; }

  .upload { min-height: 130px; padding: 20px; }
  .upload__drag { display: none; }
  .upload-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .upload-list li, .upload-list img, .upload-list .upload__add { width: 100%; }
  .upload-list img, .upload-list .upload__add { height: auto; aspect-ratio: 4 / 3; }

  .landing__body { padding-top: 28px; }
  .landing__media { display: none; }
  .landing__body .btn, .terminal .btn { width: 100%; }

  .foot { margin-top: 0; flex: 0 0 auto; order: 2; display: flex; background: var(--ink); color: var(--parchment); }
  .foot__inner { min-height: 90px; flex: 1 1 auto; height: auto; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding-top: 18px; padding-bottom: 18px; }
  .foot__links { flex-direction: column; align-items: center; text-align: center; gap: 9px; font-size: 8.5px; letter-spacing: 0.2em; border-top: 0; padding-top: 0; width: 100%; }
  .foot__links a { color: var(--parchment); }
}

@media (prefers-reduced-motion: reduce) {
  .step.is-active .step__head, .step.is-active .step__body, .page, .upload-list li { animation: none; }
  .progress__dot, .progress__segments span { transition: none; }
}

/* ---------- Progress presentations (QA switcher) -----------
   #progress[data-variant] selects the treatment. "nodes" is the
   default shipped behaviour; the others avoid the uneven column
   widths caused by very different label lengths. */

/* B · Numbered circles only, with the current section named once beneath */
.progress[data-variant="numbers"] .progress__track { grid-auto-columns: max-content; justify-content: center; gap: 0 26px; }
.progress[data-variant="numbers"] .progress__label { display: none; }
.progress[data-variant="numbers"]::after { content: attr(data-current); display: block; margin-top: 12px; text-align: center; font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-50); }

/* C · Quiet dots, current section named once beneath */
.progress[data-variant="dots"] .progress__track { grid-auto-columns: max-content; justify-content: center; gap: 0 14px; }
.progress[data-variant="dots"] .progress__label { display: none; }
.progress[data-variant="dots"] .progress__dot { width: 6px; height: 6px; font-size: 0; padding: 0; border-color: var(--stone); background: transparent; }
.progress[data-variant="dots"] .progress__node.is-done .progress__dot { background: var(--stone); border-color: var(--stone); }
.progress[data-variant="dots"] .progress__node.is-current .progress__dot { background: var(--ink); border-color: var(--ink); }
.progress[data-variant="dots"]::after { content: attr(data-current); display: block; margin-top: 14px; text-align: center; font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--ink-50); }

/* D · Section name in serif italic, tick-marked hairline, serif count */
.progress { display: flex; flex-direction: column; }
.progress .progress__track { display: none; }
/* Name above the rule: order:-1 lifts the pseudo above the segments */
.progress::after {
  content: attr(data-count) "  •  " attr(data-current);
  order: -1; display: block; text-align: center; margin-bottom: 18px;
  font-family: var(--serif); font-weight: 500; font-size: 13.5px; line-height: 1.3; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
/* Count is a real element so it aligns with the name, not the rule */
.progress .progress__count { display: none;
  position: absolute; right: 0; top: 34px;
  font-family: var(--serif); font-size: 10px; line-height: 1.3; letter-spacing: 0.12em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-30);
}
.progress .progress__segments { display: flex; gap: 6px; }
.progress .progress__segments span { height: 1.5px; background: var(--rule-20); transition: background-color 260ms var(--ease); }
.progress .progress__segments span.is-done { background: var(--ink); }
.progress .progress__segments span.is-current { background: var(--ink); }

/* E · Evenly spaced numerals, no circles, current in Ink */
.progress[data-variant="numerals"] .progress__track { grid-auto-columns: max-content; justify-content: center; gap: 0 30px; }
.progress[data-variant="numerals"] .progress__label { display: none; }
.progress[data-variant="numerals"] .progress__dot { width: auto; height: auto; border: 0; background: transparent; font-family: var(--serif); font-size: 15px; color: var(--ink-30); padding: 0; }
.progress[data-variant="numerals"] .progress__node.is-done .progress__dot { color: var(--ink-50); }
.progress[data-variant="numerals"] .progress__node.is-current .progress__dot { color: var(--ink); }
.progress[data-variant="numerals"] .progress__node.is-current .progress__dot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink); }
.progress[data-variant="numerals"] .progress__dot { position: relative; }
.progress[data-variant="numerals"]::after { content: attr(data-current); display: block; margin-top: 16px; text-align: center; font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-50); }

/* A/B/C/E re-enable the node track when selected in the QA switcher */
.progress[data-variant="nodes"] .progress__track,
.progress[data-variant="numbers"] .progress__track,
.progress[data-variant="dots"] .progress__track,
.progress[data-variant="numerals"] .progress__track { display: grid; }
.progress[data-variant="nodes"]::after,
.progress[data-variant="numbers"]::after,
.progress[data-variant="dots"]::after,
.progress[data-variant="numerals"]::after { padding-right: 0; }
.progress[data-variant="nodes"]::after { content: none; }
.progress[data-variant="nodes"] .progress__segments,
.progress[data-variant="numbers"] .progress__segments,
.progress[data-variant="dots"] .progress__segments,
.progress[data-variant="numerals"] .progress__segments { display: none; }
.progress[data-variant="nodes"] .progress__label { display: block; }
.progress[data-variant="nodes"] .progress__count,
.progress[data-variant="numbers"] .progress__count,
.progress[data-variant="dots"] .progress__count,
.progress[data-variant="numerals"] .progress__count { display: none; }

/* The intro is a title page, not a step: hide the progress strip on it */
body:has(.step--intro.is-active) .progress { display: none; }
/* The title page already names itself, so the utility label is redundant there */
body:has(.step--intro.is-active) .masthead__util { display: none; }

@media (max-width: 767px) {
  .terminal .shell { grid-template-columns: minmax(0, 1fr); width: calc(100% - var(--pad-x) * 2); margin-inline: auto; }
  .terminal__body { grid-area: auto; padding: 24px; }
  .terminal__media { display: none; }
}

@media (max-width: 767px) {
  .splash__title { font-size: 24px; letter-spacing: 0.09em; max-width: 250px; margin-left: auto; margin-right: auto; padding-left: 0.09em; }
  .splash__tagline { font-size: 16px; margin-top: 16px; padding-bottom: 0; border-bottom: 0; max-width: 250px; }
  .step--intro .step__head { text-align: center; }
  .step--intro .step__head .splash__tagline { margin-inline: auto; }
  .step--intro .step__head .lede { padding-top: 0; margin: 26px auto 0; text-align: justify; hyphens: none; max-width: 250px; border-top: 0; }
}

/* ============================================================
   Tablet · 768-1023px. Text card inside an equal 32px surround,
   photograph as a band beneath it, above the footer.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {
  :root { --pad-x: 32px; --col-form: none; }
  .shell, .masthead__inner, .foot__inner, .progress { max-width: none; }
  .form-col { max-width: none; }
  body > .shell, .landing, .terminal { flex: none; }
  /* The splash card sits in an even surround: the same beige above, below
     and at its sides; the photograph takes whatever is left. */
  .form-col > form { padding: var(--pad-x) 0; }
  .form-col > form:has(.step--intro.is-active) { justify-content: flex-start; padding: var(--pad-x) 0; }
  .form-col > form > .step.is-active { flex: none; }

  /* Photograph band: fills whatever height is left, never touches the card */
  body::after { content: ""; order: 1; flex: 1 1 auto; min-height: min(220px, 20vh); margin-bottom: -1px;
    background: url("../img/mobile-band-form.jpg") 50% 0% / cover no-repeat;
    filter: saturate(0.85) contrast(1.08) brightness(0.94) sepia(0.08); }
  body:has(.terminal)::after { background-image: url("../img/mobile-band-thanks.jpg"); background-position: 50% 50%; }
  .foot { order: 2; margin-top: 0; }
  .foot__inner { justify-content: space-between; }
  .foot__links { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px; }
  .foot__links li:first-child { justify-self: start; }
  .foot__links li:nth-child(2) { justify-self: center; }
  .foot__links li:last-child { justify-self: end; }

  /* Splash card: text only, and a little shorter so the photograph reads taller */
  .step--intro.is-active { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    box-shadow: 0 18px 48px rgba(35,36,39,0.10); }
  .step--intro .step__head { padding: 40px 56px 0; }
  .step--intro .step__body { padding: 30px 56px 30px; }
  .step--intro .step__head .lede { margin-top: 32px; }
  .step--intro .step__body .note { margin-bottom: 22px; }
  .step--intro .step__media { display: none; }
  .step--intro .step__head { grid-area: 1 / 1 / 2 / 2; align-self: start; padding: 44px 56px 0; text-align: center; }
  .step--intro .step__body { grid-area: 2 / 1 / 3 / 2; padding: 40px 56px 34px; text-align: center; }
  .splash__title { font-size: 35px; line-height: 1.14; letter-spacing: 0.13em; max-width: 330px; margin-inline: auto;
    white-space: normal; padding-left: 0.13em; }
  .splash__tagline { font-size: 20px; line-height: 1.3; white-space: normal; width: auto; max-width: 330px;
    margin: 18px auto 0; padding-bottom: 0; border-bottom: 0; text-wrap: balance; }
  .cal { border: 1px solid var(--rule-20); padding: 18px 20px 14px; }
  .cal__day { height: 44px; font-size: 14px; }
  .cal__nav { width: 44px; height: 44px; }
  .step--intro .step__head .lede { font-size: 15px; line-height: 1.62; max-width: 330px; margin: 44px auto 0;
    padding-top: 0; border-top: 0; text-align: justify; hyphens: none; text-wrap: auto; }
  .step--intro .step__body > .note:first-child { margin-top: -10px; }
  .step--intro .step__body .note { font-size: 15px; line-height: 1.62; max-width: 330px; margin: 0 auto 34px;
    text-align: justify; hyphens: none; }
  .step--intro .step__body .actions--start { max-width: 330px; margin-inline: auto; justify-content: center !important; }
  .step--intro .step__body .actions--start .btn { width: auto; flex: none; min-width: 0; height: 43px; padding: 2px 46px 0; }

  /* Question cards */
  .form-col > form > .step.is-active:not(.step--intro) { background: #FFFFFF; padding: 44px 56px;
    box-shadow: 0 18px 48px rgba(35,36,39,0.10); }
  .form-col > form > .step.is-active:not(.step--intro) .step__body > .page:first-child,
  .form-col > form > .step.is-active:not(.step--intro) .page:first-child > .page__title { margin-top: 0; }
  .form-col > form > .step.is-active:not(.step--intro) { display: flex; flex-direction: column; justify-content: center; }
  .form-col > form > .step.is-active:not(.step--intro) .step__body { display: flex; flex-direction: column; }
  .page > .field__label, .page > fieldset > legend.field__label, .page__title { font-size: 28px; }
  .field__hint, .choice { font-size: 15px; }
  .choice { min-height: 44px; padding: 6px 0; }
  /* Same lead-in treatment as the web layout, scaled down */
  .step__intro { font-size: 17px; line-height: 1.55; max-width: none; margin-bottom: 20px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .step__intro { margin-bottom: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices { margin-block: auto; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) > .field__error { margin: 14px 0 22px; }
  /* Calendar left, the optional note right, as on the web layout */
  .step.is-active:not(.step--intro) .field:has(.cal) { display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-content: start;
    grid-template-rows: auto auto auto auto 1fr; }
  .field:has(.cal) > .field__label:first-child, .field:has(.cal) > .step__intro,
  .field:has(.cal) > .field__hint--inline { grid-column: 1 / -1; }
  .field:has(.cal) .cal { grid-column: 1; grid-row: 3 / span 3; margin: 8px 0;
    border: 1px solid var(--rule-20); padding: 12px 18px 8px; }
  .field:has(.cal) .cal__day { height: 40px; font-size: 14px; }
  .field:has(.cal) .field__label--quiet { grid-column: 2; grid-row: 3; align-self: start; margin: 16px 0 0;
    font-family: var(--serif); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .field:has(.cal) .cal__hint { grid-column: 2; grid-row: 4; align-self: start; margin: 8px 0 12px; }
  .field:has(.cal) #specific_dates_note { grid-column: 2; grid-row: 5; align-self: start; height: 200px;
    min-height: 0; max-width: none; margin-block: 0; }

  /* Thank-you card: text only, same surround */
  .terminal { max-width: none; padding: var(--pad-x) 0; }
  .terminal .shell { grid-template-columns: minmax(0, 1fr); width: calc(100% - var(--pad-x) * 2); margin-inline: auto; }
  .terminal__media { display: none; }
  .terminal__body { grid-area: auto; padding: 44px 56px; text-align: center; }
  .terminal h1 { font-size: 27px; max-width: 620px; margin-inline: auto; }
  .terminal .lede { font-size: 15px; max-width: 560px; margin: 24px auto 0; padding-top: 0;
    border-top: 0; text-align: center; hyphens: manual; }
  .terminal .lede + .lede { margin-top: 14px; padding-top: 0; border-top: 0; }
  .terminal .contact { font-size: 15px; max-width: 560px; margin: 24px auto 0; font-style: italic; text-align: center; }
  .terminal .actions--start { max-width: 620px; margin: 28px auto 0; }
  .actions--start { justify-content: center !important; }
  .actions--start .btn { flex: none; min-width: 0; padding: 2px 34px 0; }
}

/* ============================================================
   Desktop · 1280px+. Same architecture as tablet landscape:
   the card fills the screen inside an even surround, photograph
   left, copy centred in the right half.
   ============================================================ */

@media (min-width: 1280px) {
  :root { --pad-x: 48px; --col-form: 1180px; }
  /* Masthead and footer are fixed furniture; the content column between
     them is the scroll container, so a tall step can never push the
     footer below the fold. */
  body { height: 100vh; min-height: 0; overflow: hidden; }
  body > .shell { min-height: 0; overflow-y: auto; }
  .shell, .masthead__inner, .foot__inner, .progress { max-width: calc(var(--col-form) + var(--pad-x) * 2); }
  body > .shell { flex: 1 1 auto; }
  /* Ink gutters framing the page, same weight as the gap under the masthead */
  body::before, body::after { content: ""; position: fixed; top: 0; bottom: 0;
    width: max(40px, calc((100vw - var(--col-form)) / 2 - 40px));
    background: var(--ink); z-index: 5; pointer-events: none; }
  body::before { left: 0; }
  body::after { right: 0; left: auto; flex: none; min-height: 0; margin: 0; filter: none; }
  .shell, .progress { padding-left: max(var(--pad-x), 40px); padding-right: max(var(--pad-x), 40px); }
  /* Masthead and footer content align to the card edges, clear of the gutters */
  .masthead__inner, .foot__inner { max-width: var(--col-form); padding-left: 0; padding-right: 0; margin-inline: auto; }
  .foot__inner { justify-content: space-between; }
  .foot__links { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px; }
  .foot__links li:first-child { justify-self: start; }
  .foot__links li:nth-child(2) { justify-self: center; }
  .foot__links li:last-child { justify-self: end; }
  .form-col { max-width: var(--col-form); }
  /* Card framing: 40px of parchment left, right and bottom; on top the 40px is
     measured from the progress bar, so the progress strip adds no extra space. */
  .form-col > form { padding: 40px 0; flex: 1 1 auto; }
  .progress { padding-bottom: 0; }
  .form-col > form > .step.is-active { flex: 1 1 auto; }

  /* Deeper lift so the card and its photograph sit above the page */
  .step--intro.is-active,
  .form-col > form > .step.is-active:not(.step--intro),
  .terminal .shell { box-shadow: 0 28px 72px rgba(35,36,39,0.22), 0 6px 18px rgba(35,36,39,0.10); }

  /* Splash: photograph fills the left half, copy centred in the right */
  .step--intro.is-active { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr; align-content: stretch; }
  .step--intro .step__media { grid-area: 1 / 1 / 5 / 2; align-self: stretch; min-height: 0;
    background: url("../img/splash-desktop.jpg") 50% 50% / cover no-repeat;
    filter: saturate(0.85) contrast(1.08) brightness(0.94) sepia(0.08); }
  .step--intro .step__media img { display: none; }
  .step--intro .step__head { grid-area: 2 / 2 / 3 / 3; align-self: end; padding: 0 72px; text-align: center; }
  .step--intro .step__head { padding-bottom: 0; }
  .step--intro .step__body { grid-area: 3 / 2 / 4 / 3; align-self: start; padding: 40px 72px 0; text-align: center; }
  .splash__title { font-size: 35px; line-height: 1.14; letter-spacing: 0.13em; max-width: 330px;
    margin-left: auto; margin-right: auto; padding-left: 0.13em; text-indent: 0; }
  /* Balanced wrap keeps both lines of the tagline a similar length:
     never a short three-word orphan beneath a full line. */
  .splash__tagline { font-size: 20px; margin: 18px auto 0; padding-bottom: 0;
    border-bottom: 0; max-width: 330px; text-wrap: balance; }
  .step--intro .step__head .splash__tagline::after { content: none; }
  .step--intro .step__head .lede { font-size: 15px; line-height: 1.62; max-width: 330px;
    margin: 44px auto 0; padding-top: 0; border-top: 0; text-align: justify; hyphens: none; text-wrap: auto; }
  .step--intro .step__body > .note:first-child { margin-top: -10px; }
  .step--intro .step__body .note { font-size: 15px; line-height: 1.62; max-width: 330px;
    margin: 0 auto 26px; text-align: justify; hyphens: none; }
  /* Button shares the body copy's measure */
  .step--intro .step__body .actions--start { max-width: 330px; margin-inline: auto; justify-content: center !important; }
  .step--intro .step__body .actions--start .btn { width: auto; flex: none; min-width: 0; height: 43px; padding: 2px 46px 0; }

  /* Question cards fill the same frame */
  /* Fixed skeleton: question title always at the same top, Back/Continue always
     at the same bottom; whatever sits between them takes the remaining height. */
  .form-col > form > .step.is-active:not(.step--intro) { padding: 60px 72px 60px; justify-content: flex-start;
    flex: 1 1 0; min-height: 0; overflow: hidden; }
  /* The card is the fixed frame: nothing inside it may change the page height */
  body > .shell { overflow: hidden; }
  /* Validation messages occupy their line whether shown or not */
  .field__error { min-height: 17px; margin-top: 18px; }
  .form-col, .form-col > form { min-height: 0; }
  .step.is-active:not(.step--intro) > .step__head { flex: none; padding-bottom: 26px; }
  .step__intro { font-size: 19px; line-height: 1.55; max-width: none; margin-bottom: 56px; }
  /* Only the answer area scrolls, so the title and the buttons never move */
  .step.is-active:not(.step--intro) > .step__body,
  .step.is-active:not(.step--intro) > .page { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
    overflow-y: auto; }
  .step.is-active:not(.step--intro) .actions:not(.actions--start) { flex: none; margin-top: auto;
    padding-top: 0; position: sticky; bottom: 0; background: #FFFFFF; }
  /* All free height is split evenly above and below the answer block */
  .step.is-active:not(.step--intro):not([data-single-page]) > .step__body > .field,
  .step.is-active:not(.step--intro):not([data-single-page]) > .step__body .field.page { margin-bottom: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea) > textarea { margin-block: 32px; }
  /* Calendar: one month on the left, the optional note beside it, so the whole
     answer sits inside the fixed card with nothing to scroll. */
  /* Calendar left, the optional note right, divided by a hairline */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.cal) { flex: 1 1 auto; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-content: start; min-height: 0;
    grid-template-rows: auto auto auto auto 1fr; }
  .field:has(.cal) > .field__label:first-child, .field:has(.cal) > .step__intro { grid-column: 1 / -1; }
  .field:has(.cal) .cal { grid-column: 1; grid-row: 3 / span 3; padding: 18px 26px 14px; border: 1px solid var(--rule-20);
    max-width: none; margin: 14px 0 14px; }
  .field:has(.cal) .field__label--quiet { grid-column: 2; grid-row: 3; align-self: start; margin: 4px 0 0;
    font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .field:has(.cal) #specific_dates_note { grid-column: 2; grid-row: 5; align-self: start; height: 229px; min-height: 0;
    max-width: none; margin-block: 0; }
  .field:has(.cal) .cal__hint { grid-column: 2; grid-row: 4; align-self: start; margin: 8px 0 14px; }
  .cal__bar { margin-bottom: 14px; }
  .cal__nav { width: 32px; height: 32px; font-size: 14px; }
  .cal__name { font-size: 17px; letter-spacing: 0.14em; }
  .cal__summary { font-size: 14px; margin-top: 4px; }
  .cal__grid { gap: 2px; }
  .cal__day { height: 30px; font-size: 13.5px; }
  .cal__dow { font-size: 10px; padding-bottom: 8px; }
  .cal__clear { padding-top: 12px; }
  /* Upload target takes the height left between the intro and the buttons */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) { flex: 1 1 auto; display: flex;
    flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) .upload-wrap { flex: 1 1 auto;
    display: flex; margin-block: 32px; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) .step__intro { margin-bottom: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) .upload { flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea) .step__intro { margin-bottom: 0; }
  .step[data-single-page] .actions:not(.actions--start) { padding-top: 56px; }
  /* Final step: everything visible at once in a three-column grid, nothing
     tucked behind the buttons. */
  .step[data-single-page].is-active > .step__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px; row-gap: 16px; align-content: center; overflow: visible; position: relative;
    padding-bottom: 124px; }
  .step[data-single-page].is-active > .step__body > .field-row { display: contents !important; }
  .step[data-single-page].is-active > .step__body > .field,
  .step[data-single-page].is-active > .step__body > .field-row > .field { margin-bottom: 0; }
  /* Match the question pages: same serif size, same position, same gap to the intro */
  .step[data-single-page].is-active > .step__head { padding-top: 10px; padding-bottom: 0; }
  .step[data-single-page].is-active > .step__head h2 { font-size: 36px; line-height: 1.14; margin: 0 0 20px; }
  .step[data-single-page].is-active > .step__head .step__intro { margin-bottom: 34px; }
  .step[data-single-page].is-active .field__label { font-size: 9px; margin-bottom: 8px; }
  .step[data-single-page].is-active input[type="text"], .step[data-single-page].is-active input[type="email"],
  .step[data-single-page].is-active input[type="tel"], .step[data-single-page].is-active select { height: 44px; font-size: 14px; }
  /* Rows share the leftover height evenly rather than stacking at the top */
  .step[data-single-page].is-active > .step__body { align-content: space-between; row-gap: 16px; }
  /* The contact step carries more fields, so it runs three columns */
  .step[data-single-page].is-active:has(#email) > .step__body { grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px; }
  .step[data-single-page].is-active:has(#email) .field[data-validate="consent"] { grid-column: 1 / -1; margin-top: 14px; }
  /* Keep an authored row of three together by starting it in the first column */
  .step[data-single-page].is-active .field-row--three > .field:first-child { grid-column-start: 1; }
  .step[data-single-page].is-active .field:has(> textarea),
  .step[data-single-page].is-active .field:has(> select) { grid-column: span 1; display: block; }
  .step[data-single-page].is-active .field:has(> textarea) > textarea { min-height: 72px; margin-block: 0; }
  .step[data-single-page].is-active .reveal { grid-column: 1 / -1; }
  /* A closed conditional block must not occupy a grid row */
  .step[data-single-page].is-active .reveal:not(.is-open) { display: none; }
  .step[data-single-page].is-active .field[data-validate="consent"] { grid-column: span 1; margin: 0; padding: 0;
    border: 0; align-self: end; }
  .step[data-single-page].is-active .field[data-validate="consent"] .choice { font-size: 12.5px; min-height: 0;
    line-height: 1.45; align-items: flex-start; }
  /* Buttons sit at the foot of the card, level with every other step */
  .step[data-single-page].is-active .actions:not(.actions--start) { position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 auto; padding-top: 0; }
  .step[data-single-page].is-active .field__error { min-height: 0; margin-top: 4px; font-size: 11px; }
  /* Single-page steps keep the same clearance above the buttons as every other step */
  .step[data-single-page] .field[data-validate="consent"] + .actions { margin-top: auto; padding-top: 56px; }
  .page > .field__label, .page > fieldset > legend.field__label, .page__title { font-size: 36px; max-width: 900px; }
  .field__hint { font-size: 14.5px; }
  /* Short hints ride on the question's line, set to the right */
  fieldset:has(> .field__hint--inline) { position: relative; }
  fieldset:has(> .field__hint--inline) > legend.field__label { padding-right: 0; }
  .field__hint--inline,
  .page > fieldset > .field__hint--inline, .page > .field > .field__hint--inline { position: static; width: auto;
    margin: 12px 0 0; text-align: left; font-style: italic; }
  .step__intro { max-width: none; }

  /* The answers were reading as footnotes against a 36px question spread
     across the full card. Cap the block to a measured width, give each
     option a real row height with a hairline beneath it, and scale the
     control and label to sit with the question. */
  /* Multi-select lists run in three balanced columns, filled top-to-bottom, so
     trailing options such as "Other" and "Not yet decided" stay last. */
  /* Balanced columns, filled top to bottom, at most three options per column:
     three or fewer stay in one column, four to six take two, seven or more three. */
  .page > fieldset > .choices, .page > .field > .choices, .choices,
  .page > fieldset > .choices--single, .page > .field > .choices--single, .choices--single {
    max-width: none; margin-inline: 0; display: block; columns: 1; column-gap: 48px; }
  .page > fieldset > .choices:has(.choice:nth-child(4)), .page > .field > .choices:has(.choice:nth-child(4)),
  .choices:has(.choice:nth-child(4)) { columns: 2; }
  .page > fieldset > .choices:has(.choice:nth-child(7)), .page > .field > .choices:has(.choice:nth-child(7)),
  .choices:has(.choice:nth-child(7)) { columns: 3; }
  .choice { break-inside: avoid; }
  /* The option block sits with equal space above and below it */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) { flex: 1 1 auto; display: flex;
    flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) > fieldset { flex: 1 1 auto;
    display: flex; flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices { margin-block: auto; }
  /* Let the auto margins do all the work: no fixed gap under the intro, and an
     empty validation line takes no height (the card is a fixed frame anyway). */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .step__intro { margin-bottom: 0; }
  /* Services grouped by category, one column per group */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choice-groups) { flex: 1 1 auto; display: flex;
    flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choice-groups) > fieldset { flex: 1 1 auto;
    display: flex; flex-direction: column; min-height: 0; }
  /* Five category columns on one baseline: a hairline under each category name,
     quiet 32px rows with no per-row rules, and the catch-all answers beneath. */
  .choice-stack { gap: 20px; }
  .choice-groups { grid-template-columns: 1.06fr 0.97fr 0.97fr; gap: 0 44px; margin-block: auto;
    align-items: start; padding-bottom: 0; }
  .choice-group__name { font-size: 8.5px; letter-spacing: 0.2em; margin: 0 0 6px; padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-20); }
  .step.is-active:not(.step--intro) .field .choices--group .choice { min-height: 0; padding: 1px 0; gap: 12px;
    border-bottom: 0; font-size: 14px; line-height: 1.5; align-items: flex-start; }
  .step.is-active:not(.step--intro) .field .choices--group .choice input { margin-top: 3px; }
  .step.is-active:not(.step--intro) .field .choices--tail { display: grid; columns: auto;
    grid-template-columns: repeat(2, minmax(0, 200px)); gap: 0 32px; margin: 8px 0 18px; padding-top: 12px;
    border-top: 1px solid var(--rule-20); }
  .step.is-active:not(.step--intro) .field .choices--tail .choice { min-height: 0; padding: 2px 0; gap: 12px;
    border-bottom: 0; font-size: 14px; }
  .choice-group__name { font-size: 9px; margin-bottom: 6px; }
  .page > fieldset > .choices--group, .choices--group { display: grid; grid-template-columns: minmax(0, 1fr);
    columns: auto; }
  .step.is-active:not(.step--intro) .field .choices--group .choice { min-height: 35px; }
  /* Options left, a free-text answer of matching height right */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.field__side) > fieldset { display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-content: start; }
  .field:has(.field__side) > fieldset > legend.field__label,
  .field:has(.field__side) > fieldset > .step__intro,
  .field:has(.field__side) > fieldset > .field__hint--inline { grid-column: 1 / -1; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.field__side) .choices--stack { grid-column: 1;
    columns: 1; margin-block: 0; padding-bottom: 0; }
  .field:has(.field__side) .field__side { grid-column: 2; display: flex; flex-direction: column; }
  .field:has(.field__side) .field__side .field__label--quiet { font-family: var(--serif); font-size: 15.5px;
    letter-spacing: 0; text-transform: none; color: var(--ink-70); margin: 0 0 12px; }
  .field:has(.field__side) .field__side textarea { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; }
  /* A custom answer revealed under the options gets its own even spacing */
  .step.is-active:not(.step--intro) .reveal--inline { margin: 28px 0 28px; }
  .step.is-active:not(.step--intro) .reveal--inline .field { margin: 0; }
  .step.is-active:not(.step--intro) .reveal--inline .field__label { font-size: 9px; margin-bottom: 10px; }
  .step.is-active:not(.step--intro) .reveal--inline input[type="text"] { height: 46px; max-width: 520px; }
  /* Validation sits under the options, clear of the button row */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) > .field__error { margin: 14px 0 22px; }
  .field__error:empty { display: none; }
  /* Short lists take taller rows so the answer block still fills the card */
  .choices:not(:has(.choice:nth-child(10))) .choice { min-height: 62px; }
  .choices:not(:has(.choice:nth-child(7))) .choice { min-height: 76px; }
  /* Each row centres its label, so there is blank row above the first label and
     none below the last hairline. Padding the block's foot by that same amount
     makes the two visible gaps identical once the auto margins split the rest. */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices { padding-bottom: 15px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices:not(:has(.choice:nth-child(10))) { padding-bottom: 20px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices:not(:has(.choice:nth-child(7))) { padding-bottom: 27px; }
  .choices--single { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field[data-validate="consent"] .choices--single { grid-template-columns: minmax(0, 1fr); }
  .choice { font-size: 15.5px; line-height: 1.4; min-height: 52px; align-items: center; gap: 16px;
    padding: 4px 2px; border-bottom: 1px solid var(--rule-12); }
  .choice input:not(.choice__custom) { width: 17px; height: 17px; margin: 0; }
  .choices .choice:last-child, .choices--single .choice:last-child { border-bottom: 1px solid var(--rule-12); }
  .field[data-validate="consent"] .choice { font-size: 15px; align-items: flex-start; border-bottom: 0; min-height: 0; }
  .step[data-single-page] .choice { font-size: 15px; min-height: 44px; border-bottom: 0; padding: 0; }

  /* Actions relate to the answer block, not the whole card */
  .actions:not(.actions--start) { max-width: 860px; margin-top: 52px; margin-inline: auto; gap: 20px; justify-content: center; flex: none; }
  .actions--start { margin-top: 0; }
  .actions .btn { height: 52px; min-width: 190px; font-size: 10px; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select { max-width: none; margin-inline: 0; }
  textarea { max-width: none; margin-inline: 0; min-height: 132px; }
  /* A textarea takes the height left between its label and the buttons */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea) { flex: 1 1 auto; display: flex;
    flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea) > textarea { flex: 1 1 auto; }

  /* Thank-you: same split, same frame */
  .terminal { max-width: var(--col-form); flex: 1 1 auto; padding: 40px 0; }
  .terminal .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 auto; max-width: none; }
  .terminal__media { grid-area: 1 / 1 / 2 / 2; min-height: 0; }
  .terminal__body { grid-area: 1 / 2 / 2 / 3; align-self: center; padding: 56px 72px; text-align: center; }
  .terminal h1 { font-size: 38px; }
  .terminal .lede { font-size: 14.5px; line-height: 1.7; max-width: 420px; margin: 30px auto 0; }
  .terminal .lede + .lede { margin-top: 16px; }
  .terminal .contact { font-size: 14.5px; max-width: 420px; margin: 30px auto 0; font-style: italic; text-align: center; }
  .terminal .actions--start { justify-content: center !important; margin-top: 34px; }
  .terminal .actions--start .btn { min-width: 300px; }
}

/* Tablet landscape · photograph left, copy right, card fills the screen */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: landscape) {
  body::after { display: none; }
  body > .shell, .terminal { flex: 1 1 auto; }
  .form-col, .form-col > form { flex: 1 1 auto; }
  .form-col > form > .step.is-active { flex: 1 1 auto; }

  /* Splash: photo fills the left half; the copy group is centred in the right */
  .step--intro.is-active { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr; align-content: stretch; }
  .step--intro .step__media { display: block; grid-area: 1 / 1 / 5 / 2; position: relative; min-height: 0;
    background: url("../img/splash-desktop.jpg") 50% 50% / cover no-repeat;
    filter: saturate(0.85) contrast(1.08) brightness(0.94) sepia(0.08); }
  .step--intro .step__media img { display: none; }
  .step--intro .step__head { grid-area: 2 / 2 / 3 / 3; align-self: end; padding: 0 56px; text-align: center; }
  .step--intro .step__body { grid-area: 3 / 2 / 4 / 3; align-self: start; padding: 40px 56px 0; text-align: center; }
  .splash__title { font-size: 35px; line-height: 1.14; letter-spacing: 0.13em; max-width: 330px;
    margin-inline: auto; padding-left: 0.13em; white-space: normal; }
  .splash__tagline { font-size: 20px; line-height: 1.3; max-width: 330px; margin: 18px auto 0; padding-bottom: 0;
    border-bottom: 0; text-wrap: balance; }
  .step--intro .step__head .lede, .step--intro .step__body .note { font-size: 15px; line-height: 1.62;
    max-width: 330px; margin-inline: auto; text-align: justify; hyphens: none; }
  .step--intro .step__head .lede { margin-top: 44px; }
  .step--intro .step__body .actions--start { max-width: 330px; margin-inline: auto; justify-content: center !important; }
  .step--intro .step__body .actions--start .btn { width: auto; flex: none; min-width: 0; height: 43px; padding: 2px 46px 0; }
  .step--intro .step__body > .note:first-child { margin-top: -10px; }
  .step--intro .step__body .note { margin: 0 auto 34px; }

  .form-col > form > .step.is-active:not(.step--intro) { justify-content: center; }

  /* Thank-you: same split */
  .terminal .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 auto; }
  .terminal__media { display: block; grid-area: 1 / 1 / 2 / 2; position: relative; min-height: 0;
    background: url("../img/mobile-band-thanks.jpg") 50% 50% / cover no-repeat; }
  .terminal__media img { display: none; }
  .terminal__body { grid-area: 1 / 2 / 2 / 3; align-self: center; padding: 44px 48px; text-align: center; }
  .terminal h1 { font-size: 34px; }
  .terminal .lede, .terminal .contact { font-size: 16.5px; max-width: 340px; }
  .terminal .lede { margin-top: 30px; }
  .terminal .lede + .lede { margin-top: 18px; }
  .terminal .contact { margin-top: 30px; }
  .terminal .actions--start { margin-top: 34px; }
  .terminal .actions--start .btn { min-width: 340px; }
}

/* ============================================================
   iPad landscape · the final steps fit without much scrolling
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Calendar page: trim the chrome so the month fits beside the note */
  .step.is-active:not(.step--intro) .field:has(.cal) .step__intro { margin-bottom: 0; }
  .cal__summary { display: none; }
  .cal__day { height: 40px; font-size: 14px; }
  .cal__nav { width: 40px; height: 40px; }
  .cal__bar { margin-bottom: 10px; }
  .cal__dow { padding-bottom: 6px; }
  .cal__clear { padding-top: 8px; }
  .field:has(.cal) .cal { margin: 8px 0; padding: 14px 18px 10px; }
  /* Calendar box with real breathing room: the month sits clear of its frame and
     CLEAR DATES sits inside the box with a full touch target. */
  .field:has(.cal) .cal { margin: 16px 0 0; padding: 12px 20px 6px; position: relative; }
  .cal__day { height: 34px; }
  .cal__nav { width: 44px; height: 44px; }
  .cal__bar { margin-bottom: 6px; }
  .cal__dow { padding-bottom: 2px; }
  .cal__clear { position: static; display: flex; align-items: center; justify-content: center; min-height: 40px;
    width: 100%; padding: 0; margin: 0; }
  .step.is-active:not(.step--intro) > .step__head { padding-bottom: 16px; }
  /* Right column starts level with the calendar box */
  .field:has(.cal) .field__label--quiet { margin: 16px 0 0; }
  .field:has(.cal) .cal__hint { margin: 8px 0 12px; }
  .field:has(.cal) #specific_dates_note { margin-bottom: 0; align-self: stretch; height: 219px; min-height: 0; }
  .field:has(.cal) .cal__day { height: 34px; font-size: 13.5px; }
  .step.is-active:not(.step--intro) .field:has(.cal) .step__intro { margin-bottom: 0; font-size: 15.5px; }
  .field:has(.cal) .field__label--quiet { margin: 18px 0 0; font-size: 22px; }
  .field:has(.cal) .cal__hint { margin: 8px 0 14px; }
  /* Longer lists take an extra column so the card still fits the screen */
  .form-col > form > .step.is-active .choices:has(.choice:nth-child(10)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-col > form > .step.is-active .choices--single:has(.choice:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Same as the web layout: two columns, three on the contact step */
  /* Same heading rhythm as the question pages */
  .step[data-single-page].is-active > .step__head { padding-bottom: 30px; }
  .step[data-single-page].is-active > .step__head h2 { font-size: 28px; line-height: 1.2; margin: 0 0 20px; }
  .step[data-single-page].is-active > .step__head .step__intro { font-size: 17px; line-height: 1.55; margin-bottom: 0; }
  .form-col > form > .step[data-single-page].is-active > .step__body { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 16px; align-content: start;
    position: relative; padding-bottom: 76px; }
  .step[data-single-page].is-active .field__label { margin-bottom: 10px; }
  .step[data-single-page].is-active .field[data-validate="consent"] { margin-top: 18px; }
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body {
    grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; }
  .step[data-single-page].is-active .field:has(> select) { grid-column: span 1; }
  .step[data-single-page].is-active .actions:not(.actions--start) { position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 auto; padding-top: 0; }
  .step[data-single-page] .step__body > .field-row { display: contents; }
  .step[data-single-page] .step__body > .field,
  .step[data-single-page] .step__body > .field-row > .field { margin-bottom: 0; }
  .step[data-single-page] .field-row--three > .field:first-child { grid-column-start: 1; }
  .step[data-single-page] .field:has(> textarea) { grid-column: span 1; }
  .step[data-single-page] .field:has(> textarea) > textarea { min-height: 72px; }
  .step[data-single-page] .reveal { grid-column: 1 / -1; }
  .step[data-single-page] .reveal:not(.is-open) { display: none; }
  .step[data-single-page] .field[data-validate="consent"] { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; border: 0; }
  .step[data-single-page] .field[data-validate="consent"] .choice { min-height: 44px; align-items: center; font-size: 13px; }
  .step[data-single-page] .actions:not(.actions--start) { grid-column: 1 / -1; margin: 14px auto 0; padding-top: 0; }
}

/* ============================================================
   iPad · same locked card as desktop: masthead, progress and footer
   stay put, the card fills the screen and only the answers scroll.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {
  /* One button size across every step */
  .step.is-active .actions .btn { height: 52px; }
  /* Typing targets stay at the 44px minimum (the single-page base rule is 38px) */
  .step[data-single-page].is-active input[type="text"], .step[data-single-page].is-active input[type="email"],
  .step[data-single-page].is-active input[type="tel"], .step[data-single-page].is-active select { height: 44px; font-size: 14px; }
  body { height: 100vh; min-height: 0; overflow: hidden; }
  body > .shell { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .form-col, .form-col > form { flex: 1 1 auto; }
  .form-col > form > .step.is-active,
  .form-col > form > .step--intro.is-active { flex: 1 1 auto; }
  .terminal { flex: 1 1 auto; }
  .terminal .shell { flex: 1 1 auto; }
  .form-col, .form-col > form { min-height: 0; }
  .form-col > form > .step.is-active:not(.step--intro) { flex: 1 1 0; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start; }
  .step.is-active:not(.step--intro) > .step__head { flex: none; }
  .step.is-active:not(.step--intro) > .step__body { flex: 1 1 0; min-height: 0; display: flex;
    flex-direction: column; overflow-y: auto; }
  .step.is-active:not(.step--intro) .actions:not(.actions--start) { flex: none; margin-top: auto; padding-top: 24px;
    position: sticky; bottom: 0; background: #FFFFFF; }
  .step.is-active:not(.step--intro) > .step__body > .field,
  .step.is-active:not(.step--intro) > .step__body .field.page { margin-bottom: 0; }
  .field__error:empty { display: none; }

  /* Single-page steps: buttons pinned at the foot, fields above them */
  .form-col > form > .step[data-single-page].is-active > .step__body { display: grid; overflow: visible;
    position: relative; padding-bottom: 68px; align-content: center; }
  .step[data-single-page].is-active .actions:not(.actions--start) { position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 auto; padding-top: 0; }
}

/* ============================================================
   iPad · question cards use the same option treatment as the web
   layout: balanced columns filled top to bottom, hairline rows,
   and the block centred between the lead-in and the buttons.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {
  .page > fieldset > .choices, .page > .field > .choices, .choices,
  .page > fieldset > .choices--single, .page > .field > .choices--single, .choices--single {
    max-width: none; margin-inline: 0; display: block; columns: 1; column-gap: 40px; }
  .page > fieldset > .choices:has(.choice:nth-child(4)), .page > .field > .choices:has(.choice:nth-child(4)),
  .choices:has(.choice:nth-child(4)) { columns: 2; }
  .page > fieldset > .choices:has(.choice:nth-child(7)), .page > .field > .choices:has(.choice:nth-child(7)),
  .choices:has(.choice:nth-child(7)) { columns: 3; }
  .step.is-active:not(.step--intro) .field[data-validate="consent"] .choices--single { columns: 1; }

  .choice { break-inside: avoid; }
  .step.is-active:not(.step--intro) .field .choice { min-height: 48px; align-items: center; gap: 14px;
    padding: 4px 2px; border-bottom: 1px solid var(--rule-12); font-size: 15px; line-height: 1.4; }
  .step.is-active:not(.step--intro) .field .choices:not(:has(.choice:nth-child(10))) .choice { min-height: 56px; }
  .step.is-active:not(.step--intro) .field .choices:not(:has(.choice:nth-child(7))) .choice { min-height: 66px; }
  .step.is-active:not(.step--intro) .field[data-validate="consent"] .choice { border-bottom: 0; min-height: 44px; }

  /* Equal space above and below the block, with the row's own top padding
     compensated so the two visible gaps read the same. */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) { flex: 1 1 auto; display: flex;
    flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) > fieldset { flex: 1 1 auto;
    display: flex; flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices { margin-block: auto;
    padding-bottom: 40px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices:not(:has(.choice:nth-child(10))) { padding-bottom: 46px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices:not(:has(.choice:nth-child(7))) { padding-bottom: 52px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .step__intro { margin-bottom: 0; }
  .field__hint--inline,
  .page > fieldset > .field__hint--inline, .page > .field > .field__hint--inline { margin: 16px 0 0; }

  /* Text answers and the upload target fill the height between the lead-in and
     the buttons, with equal space above and below — the web treatment. */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea):not(:has(.cal)) { flex: 1 1 auto;
    display: flex; flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea):not(:has(.cal)) > textarea {
    flex: 1 1 auto; min-height: 0; max-width: none; margin-block: 32px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea):not(:has(.cal)) .step__intro { margin-bottom: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) { flex: 1 1 auto; display: flex;
    flex-direction: column; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) .upload-wrap { flex: 1 1 auto;
    display: flex; margin-block: 32px; min-height: 0; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) .upload { flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) .step__intro { margin-bottom: 0; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select { max-width: none; }
}

/* ============================================================
   iPad portrait · the card is shorter here (the photo band takes
   the rest), so the long steps scroll inside it rather than clip.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* A narrower card reads better at this width: one column of options, less
     stranded white space, and the masthead/footer rules follow the card edges. */
  .shell, .masthead__inner, .foot__inner, .progress { max-width: 664px; margin-inline: auto; }
  /* The title page is not a question card: it keeps the full width so its
     beige surround is the same 32px on every side. */
  body:has(.step--intro.is-active) .shell,
  body:has(.step--intro.is-active) .masthead__inner,
  body:has(.step--intro.is-active) .foot__inner { max-width: none; }
  .form-col > form > .step.is-active:not(.step--intro) { flex: 0 0 auto; height: 800px; margin-block: auto;
    padding: 56px; }
  .page > fieldset > .choices, .page > .field > .choices, .choices { columns: 1; column-gap: 0; }
  .step.is-active:not(.step--intro) .field .choice,
  .step.is-active:not(.step--intro) .field .choices:not(:has(.choice:nth-child(10))) .choice,
  .step.is-active:not(.step--intro) .field .choices:not(:has(.choice:nth-child(7))) .choice { min-height: 44px; }
  /* One column in the narrower card; only the long lists take two */
  .page > fieldset > .choices:has(.choice:nth-child(4)), .page > .field > .choices:has(.choice:nth-child(4)),
  .choices:has(.choice:nth-child(4)),
  .page > fieldset > .choices:has(.choice:nth-child(7)), .page > .field > .choices:has(.choice:nth-child(7)),
  .choices:has(.choice:nth-child(7)) { columns: 1; column-gap: 0; }
  .page > fieldset > .choices:has(.choice:nth-child(8)), .page > .field > .choices:has(.choice:nth-child(8)),
  .choices:has(.choice:nth-child(8)) { columns: 2; column-gap: 32px; }
  .step.is-active:not(.step--intro) .field .choice { min-height: 48px; }
  .step.is-active:not(.step--intro) .field .choices:not(:has(.choice:nth-child(10))) .choice { min-height: 52px; }
  .step.is-active:not(.step--intro) .field .choices:not(:has(.choice:nth-child(7))) .choice { min-height: 58px; }
  .step.is-active:not(.step--intro) .field[data-validate="consent"] .choice { min-height: 44px; }
  /* Row padding compensated so the space above and below the block reads equal */
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices { padding-bottom: 12px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices:not(:has(.choice:nth-child(10))) { padding-bottom: 15px; }
  .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) .choices:not(:has(.choice:nth-child(7))) { padding-bottom: 18px; }
  /* Field rhythm matched to the landscape layout */
  .form-col > form > .step[data-single-page].is-active > .step__body { row-gap: 22px; column-gap: 32px; }
  .step[data-single-page].is-active .field[data-validate="consent"] { margin-top: 18px; }
  /* Single-page steps share the question pages' heading rhythm */
  .step[data-single-page].is-active > .step__head h2 { font-size: 28px; line-height: 1.2; margin: 0 0 20px; }
  .step[data-single-page].is-active > .step__head { padding-bottom: 30px; }
  .step[data-single-page].is-active > .step__head .step__intro { font-size: 17px; line-height: 1.55; margin-bottom: 0; }
  .step[data-single-page].is-active .field__label { margin-bottom: 10px; }
  /* On the question steps the card takes the full height, as on the web layout;
     the cropped photo band stays only behind the title and thank-you pages. */
  body:has(.form-col > form > .step.is-active:not(.step--intro))::after { display: none; }
  /* Single-page steps: top-aligned, scrollable, buttons sticky over the content */
  .form-col > form > .step[data-single-page].is-active > .step__body { align-content: start; overflow-y: auto;
    position: relative; padding-bottom: 76px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px;
    column-gap: 32px; }
  .step[data-single-page].is-active .field:has(> textarea) > textarea { min-height: 64px; }
  .step[data-single-page].is-active .actions:not(.actions--start) { position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 auto; padding-top: 0; }
  .form-col > form > .step[data-single-page].is-active > .step__body > .field-row { display: contents; }
  .step[data-single-page].is-active .field-row--three > .field:first-child { grid-column-start: 1; }
  /* The contact step carries nine fields; three columns keeps it on one screen */
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body {
    grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  /* Buttons pinned to the foot of the card, exactly as on the question steps */
  .form-col > form > .step[data-single-page].is-active > .step__body { position: relative; padding-bottom: 78px; }
  .step[data-single-page].is-active .actions:not(.actions--start) { position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 auto; padding-top: 0; background: #FFFFFF; }
  .step[data-single-page].is-active .field-row--three > .field:first-child { grid-column-start: 1; }
  .step[data-single-page].is-active .field:has(> textarea) { grid-column: 1 / -1; }

  /* Calendar stays side by side with its note, and the date cells keep the
     44px touch target; the note box takes the shorter card's leftover height. */
  .step.is-active:not(.step--intro) .field:has(.cal) { column-gap: 28px; }
  .field:has(.cal) .cal { grid-column: 1; grid-row: 3 / span 3; margin: 10px 0; padding: 12px 14px 8px; }
  .field:has(.cal) .cal__day { height: 44px; font-size: 14px; }
  .field:has(.cal) .cal__bar { margin-bottom: 10px; }
  .field:has(.cal) .field__label--quiet { grid-column: 2; grid-row: 3; margin: 10px 0 0; font-size: 20px; }
  .field:has(.cal) .cal__hint { grid-column: 2; grid-row: 4; margin: 6px 0 10px; }
  .field:has(.cal) #specific_dates_note { grid-column: 2; grid-row: 5; height: auto; align-self: stretch;
    margin-bottom: 8px; }
  .cal__clear { min-height: 44px; padding-top: 10px; }
}


/* ==================================================================
   QA REFINEMENT PASS (test only — not in the live flow)
   Everything below overrides the live rules above; delete this block
   to return to the live design.
   ================================================================== */

/* 1 · Alignment: body copy left-aligned, no justification or hyphenation;
   short contact notes stay centred */
.step--intro .step__head .lede, .step--intro .step__body .note, .terminal .lede {
  text-align: left !important; hyphens: manual !important; text-wrap: pretty !important; }
.terminal .contact { text-align: center !important; hyphens: manual !important; text-wrap: balance !important; }

/* 2 · Splash: equal space above and below the body paragraph */
@media (min-width: 768px) { .step--intro .step__head .lede { margin-bottom: 4px !important; } }
@media (max-width: 767px) { .step--intro .step__head .lede { margin-bottom: 10px !important; } }

/* 5 · Mobile field labels: +1px, slightly looser tracking reduced */
@media (max-width: 767px) {
  .step[data-single-page].is-active .field__label:not(.field__label--quiet),
  .reveal--inline .field__label { font-size: 10px !important; letter-spacing: 0.16em !important; }
}

/* 6 · Vertical rhythm, fixed-frame sizes (iPad + desktop):
   helper/intro → first control is always 24px; the space the old centring
   distributed now sits above the pinned buttons */
@media (min-width: 768px) {
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) fieldset > .field__hint--inline { margin-bottom: 0 !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) fieldset > .field__hint--inline + :is(.choices, .choice-groups) {
    margin-top: 24px !important; margin-bottom: 0 !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field > .step__intro:has(+ :is(textarea, .upload-wrap)) { margin-bottom: 0 !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field > .step__intro + :is(textarea, .upload-wrap) { margin-top: 22px !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.cal) > .step__intro { margin-bottom: 0 !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.cal) .cal { margin-top: 22px !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.cal) .field__label--quiet { margin-top: 22px !important; }
  /* Single-page steps: intro → first field 24px */
  .form-col > form > .step[data-single-page].is-active > .step__head { padding-bottom: 0 !important; }
  .form-col > form > .step[data-single-page].is-active > .step__head .step__intro { margin-bottom: 0 !important; }
  .form-col > form > .step[data-single-page].is-active > .step__body { padding-top: 24px !important; }
}
/* Mobile: single-page steps share the question pages' rhythm */
@media (max-width: 767px) {
  .step[data-single-page].is-active > .step__head h2 { margin-bottom: 20px !important; }
  .step[data-single-page].is-active > .step__head { padding-bottom: 0 !important; }
  .step[data-single-page].is-active > .step__head .step__intro { margin-bottom: 0 !important; }
  .form-col > form > .step[data-single-page].is-active > .step__body { padding-top: 20px !important; }
  .step[data-single-page].is-active .actions:not(.actions--start) { margin-top: 26px !important; padding-top: 0 !important; }
}

/* 7 · About You, iPad portrait: two columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 32px !important; }
  .step[data-single-page].is-active:has(#email) .field-row--three > .field:first-child { grid-column-start: auto !important; }
}

/* 8 · Timing dates, iPad portrait: calendar above the note */
@media (min-width: 768px) and (max-width: 1023px) {
  .step.is-active:not(.step--intro) .field:has(.cal) { grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important; }
  .field:has(.cal) > * { grid-column: 1 !important; grid-row: auto !important; }
  .field:has(.cal) .cal { margin-bottom: 0 !important; }
  .field:has(.cal) #specific_dates_note { height: 64px !important; min-height: 64px !important; align-self: stretch !important; margin-bottom: 0 !important; }
  /* The stacked calendar page and the two-column contact step need more than the
     800px frame: on these two pages only, the card takes the full available height */
  .form-col > form > .step.is-active:has(.field.page:not(.is-off) .cal),
  .form-col > form > .step[data-single-page].is-active:has(#email) { height: auto !important; flex: 1 1 auto !important; margin-block: 0 !important; }
}
/* Desktop calendar page has no spare height: keep its live spacing */
@media (min-width: 1280px) {
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.cal) .cal { margin-top: 14px !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.cal) .field__label--quiet { margin-top: 14px !important; }
  .form-col > form > .step.is-active:not(.step--intro) .field:has(.cal) #specific_dates_note { height: 219px !important; }
}

/* ==== QA GLOBAL CLEAN-UP (2026-10-04) ==================================
   Restrained systemic fixes only. Saved editor values (inline) still win.
   ======================================================================== */

/* 1 · Calendar: primary-control scale, same structure and logic */
.cal__name { font-size: 16px !important; letter-spacing: 0.12em !important; }
.cal__summary { font-size: 15px !important; }
.cal__dow { font-size: 10.5px !important; letter-spacing: 0.12em !important; color: var(--ink-50) !important; }
.cal__day { font-size: 15px !important; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.cal__day.is-past { color: var(--ink-30) !important; }
.cal__day.is-edge { color: var(--parchment) !important; font-weight: 500; }
.cal__nav { font-size: 16px !important; }
.cal__clear { font-size: 10px !important; letter-spacing: 0.18em !important; }
@media (min-width: 1280px) {
  .cal__name { font-size: 18px !important; }
  .field:has(.cal) .cal__day { font-size: 15.5px !important; }
  .cal__dow { font-size: 11px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cal__name { font-size: 17px !important; }
  .field:has(.cal) .cal__day { height: 37px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* stacked: the calendar uses the full width of the card */
  .field:has(.cal) .cal { width: 100% !important; max-width: none !important; box-sizing: border-box; }
  .cal__name { font-size: 18px !important; }
  .field:has(.cal) .cal__day { font-size: 16px !important; }
  .cal__dow { font-size: 11px !important; }
}
@media (max-width: 767px) {
  .field:has(.cal) .cal { width: 100% !important; max-width: none !important; box-sizing: border-box; }
}

/* 2 · Borders: one hairline weight; equivalent separators share one tone */
.choice input:not(.choice__custom) { border-width: 1px !important; }
.step[data-single-page] .field[data-validate="consent"] { border-color: var(--rule-12) !important; }

/* 3 · Rhythm: the Rooms textarea sits as close to its tick box as other control groups */
#rooms-field textarea { margin-bottom: 0 !important; }
#rooms-field textarea + .choices { margin: 16px 0 0 !important; padding-top: 0 !important; flex: none !important; }
@media (max-width: 767px) { #rooms-field textarea + .choices { margin-top: 12px !important; } }

/* 4 · Field labels on Property / About You: readable minimum, same discreet caps */
@media (min-width: 768px) {
  .step[data-single-page] .step__body .field__label:not(.field__label--quiet) { font-size: 10px !important; line-height: 1.4 !important; letter-spacing: 0.16em !important; }
}

/* 5 · Multi-column grids: a wrapped label never pushes its input below its neighbours.
   Fields in a shared row stretch to the row height and their labels take up the
   difference, so every control in the row starts on the same line. Single column
   on mobile is untouched. */
@media (min-width: 768px) {
  .form-col > form > .step[data-single-page].is-active > .step__body,
  .form-col > form > .step[data-single-page].is-active > .step__body > .field-row { align-items: stretch !important; }
  .form-col > form > .step[data-single-page].is-active > .step__body > .field:not(:has(input[name="consent"])),
  .form-col > form > .step[data-single-page].is-active > .step__body > .field-row > .field { display: flex !important; flex-direction: column; }
  .form-col > form > .step[data-single-page].is-active > .step__body > .field-row > .field > .field__label,
  .form-col > form > .step[data-single-page].is-active > .step__body > .field:not(:has(input[name="consent"])) > .field__label {
    flex: 1 0 auto; display: flex !important; align-items: flex-end; }
}

/* About You on the fixed desktop / landscape frame: the readable labels need a
   little height back so the consent line keeps clear of the pinned buttons */
@media (min-width: 768px) {
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body { row-gap: 10px !important; }
  .form-col > form > .step[data-single-page].is-active:has(#email) .field:has(input[name="consent"]) { margin-top: 6px !important; }
}
@media (min-width: 1024px) {
  .form-col > form > .step[data-single-page].is-active .field:has(input[name="consent"]) .choice { min-height: 0 !important; }
}

/* 6 · Upload zone: enough presence across a wide card, same footprint and design */
.upload__icon, .upload__icon svg { width: 24px !important; height: 24px !important; }
.upload__title { font-size: 14px !important; }
.upload__note { font-size: 12.5px !important; }
@media (min-width: 1024px) {
  .upload { gap: 6px !important; }
  .upload__icon { margin-bottom: 8px !important; }
}

/* ==== DESKTOP QUESTION-PAGE GRID (fixed anchors) =========================
   On desktop every paged question sits on the same lines: the heading, the
   intro, the helper line and the start of the answer area are at fixed
   positions on every page; the buttons stay pinned at the foot of the card.
   Only the answer area itself varies with the type of question.
   iPad landscape (1024–1279) mirrors the desktop treatment. */
@media (min-width: 1024px) {
  .step.has-pages.is-active .page > .field__label:first-child,
  .step.has-pages.is-active .page > fieldset > legend.field__label { margin: 0 !important; padding: 0 !important; }
  .step.has-pages.is-active .page .step__intro { font-size: 21px !important; line-height: 1.45 !important; font-style: normal !important;
    margin: 14px 0 0 !important; padding: 0 !important; min-height: calc(3 * 1.45em); }
  .step.has-pages.is-active .page .field__hint--inline { display: block !important; margin: 10px 0 0 !important; padding: 0 !important;
    font-style: italic !important; line-height: 20px !important; min-height: 20px; }
  /* pages without a helper line keep its slot so the answers still start on the same line */
  .step.has-pages.is-active .page:not(:has(.field__hint--inline)) .step__intro { margin-bottom: 30px !important; }
  .step.has-pages.is-active .page > fieldset > .choices,
  .step.has-pages.is-active .page > fieldset > .choice-stack,
  .step.has-pages.is-active .page > textarea,
  .step.has-pages.is-active .page > .cal-wrap,
  .step.has-pages.is-active .page .upload-wrap,
  .step.has-pages.is-active .page > .step__intro + * { margin-top: 22px !important; }
  .step.has-pages.is-active .page .field__hint--inline + * { margin-top: 22px !important; }
  /* the question starts at the top of the card (not centred on its own height); buttons pinned at the foot */
  .step.has-pages.is-active > .step__body { justify-content: flex-start !important; align-content: start !important; }
  .step.has-pages.is-active > .step__body > .page,
  .step.has-pages.is-active > .step__body > .reveal,
  .step.has-pages.is-active > .step__body > .reveal > .page { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; }
  .step.has-pages.is-active > .step__body > .page { flex: 0 0 auto !important; }
  .step.has-pages.is-active .actions { margin-top: auto !important; }
  .step.has-pages.is-active > .step__body > .reveal.is-open,
  .step.has-pages.is-active > .step__body > .reveal.is-open > .field { margin: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
  /* pages without a helper line: answers start on the same line as on helper pages */
  .step.has-pages.is-active .page:not(:has(.field__hint--inline)):not(:has(.cal)) .step__intro + * { margin-top: 55px !important; }
  .step.has-pages.is-active .page:has(.cal) .step__intro { min-height: 0 !important; }
  /* single-choice option rows: one row height everywhere (from the Timing page) */
  .step.has-pages.is-active .page .choices--single > .choice { height: 62px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; }
  /* open text pages share one box height (from What would you like to change) */
  .step.has-pages.is-active .page > textarea:not(#areas):not(#specific_dates_note) { height: 240px !important; min-height: 0 !important; flex: 0 0 auto !important; }
  .step.has-pages.is-active .page > textarea#areas { height: 120px !important; min-height: 0 !important; flex: 0 0 auto !important; }
  /* project notes page has no intro: its box starts on the same line as the other text pages */
  .step.has-pages.is-active .page > label.field__label:first-child + textarea#notes { margin-top: 64px !important; height: 240px !important; }
  .step.has-pages.is-active .page .upload-wrap .upload { height: 248px !important; min-height: 0 !important; }
  /* Flexibility: the timing note sits beside the three options */
  .step.has-pages.is-active .page:has([name="flexibility"]) { position: relative !important; }
  .step.has-pages.is-active .page:has([name="flexibility"]) .choices { width: calc(50% - 24px) !important; }
  .step.has-pages.is-active .page:has([name="flexibility"]) > .field__label--quiet { position: absolute !important; right: 0; top: 203px; width: calc(50% - 24px); margin: 0 !important;
    font-size: 21px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; font-family: var(--serif) !important; color: var(--ink) !important; }
  .step.has-pages.is-active .page:has([name="flexibility"]) > #specific_dates_note { position: absolute !important; right: 0; top: 245px; width: calc(50% - 24px) !important; height: 170px !important; min-height: 0 !important; margin: 0 !important; }
  /* Dates: calendar only, so it can be larger */
  .step.has-pages.is-active .page:has(.cal) .cal { width: 560px !important; max-width: 100% !important; height: auto !important; margin: 22px auto 0 !important; }
  .step.has-pages.is-active .page:has(.cal) .cal__day { height: 32px !important; font-size: 16px !important; }
  .step.has-pages.is-active .page:has(.cal) .cal__name { font-size: 19px !important; }
  /* Timing: five rows sit in two columns, like Investment */
  .step.has-pages.is-active .page:has([name="preferred_timing"]) .choices--single { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 48px !important; }
  /* helper line and its options read as one unit */
  .step.has-pages.is-active .page .field__hint--inline ~ .choices { margin-top: 8px !important; }
  /* Rooms: the single tick box is a compact row so the page fits */
  .step.has-pages.is-active #rooms-field .choices--single > .choice { height: 44px !important; }
  .step.has-pages.is-active .page > textarea#areas { height: 100px !important; }
  .step.has-pages.is-active .page:not(.is-off) .field__hint--inline ~ .choices.choices.choices { margin-top: 8px !important; }
  /* Equal space above and below the answer block (helper line + answers = one block), measured per page */
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="services"]) .field__hint--inline { margin-top: 27px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="change_summary"]) .step__intro + textarea { margin-top: 32px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="areas"]) .step__intro + textarea { margin-top: 59px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="preferred_timing"]) .field__hint--inline { margin-top: 31px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="flexibility"]) .field__hint--inline { margin-top: 31px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="professional_budget"]) .field__hint--inline { margin-top: 35px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="photo_1"]) .step__intro + * { margin-top: 27px !important; }
  .form-col > form > .step.has-pages.is-active .page:not(.is-off):has([name="notes"]) .step__intro + textarea { margin-top: 32px !important; height: 194px !important; min-height: 0 !important; max-height: 194px !important; flex: 0 0 auto !important; margin-bottom: 0 !important; }
  /* Dates: copy on the left, a large calendar on the right */
  .step.has-pages.is-active .page:not(.is-off):has(.cal) { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start; }
  .step.has-pages.is-active .page:has(.cal) > :not(.cal):not(input) { grid-column: 1; }
  .step.has-pages.is-active .page:has(.cal) .cal { grid-column: 2; grid-row: 1 / span 6; width: 100% !important; margin: 0 !important; height: auto !important; }
  .step.has-pages.is-active .page:has(.cal) .cal__day { height: 40px !important; font-size: 17px !important; }
  .step.has-pages.is-active .page:has(.cal) .step__intro { min-height: 0 !important; }
  /* date page: the calendar is the one answer area that needs to be a little more compact to fit */
  .step.has-pages.is-active .page:has(.cal) .cal__day { }
  .step.has-pages.is-active .page:has(.cal) .cal { padding-top: 10px !important; padding-bottom: 6px !important; }
}

/* Dates page: optional deadline note under the intro, in the left column (desktop + iPad landscape) */
@media (min-width: 1024px) {
  .step.has-pages.is-active .page:has(.cal) > .field__label--quiet { margin: 28px 0 0 !important; font-family: var(--serif) !important; font-size: 19px !important;
    line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
  .step.has-pages.is-active .page:has(.cal) > textarea#deadline_details#deadline_details { margin: 12px 0 0 !important; height: 144px !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .step.has-pages.is-active .page:has(.cal) > textarea#deadline_details#deadline_details { height: 184px !important; }
}
/* Thank-you contact note: same serif as the rest of the copy, not the sans italic */
.terminal .contact { font-family: var(--serif) !important; font-style: italic !important; font-size: 17px !important; line-height: 1.5 !important; }
.terminal .contact a { font-style: italic; }
@media (max-width: 767px) { .terminal .contact { font-size: 16px !important; } }

/* iPad landscape: the card is ~80px shorter than desktop, so the mirrored grid is a touch more compact */
@media (min-width: 1024px) and (max-width: 1279px) {
  .step.has-pages.is-active .page .step__intro { font-size: 19px !important; }
  .step.has-pages.is-active .page .choices--single > .choice { height: 50px !important; }
  .step.has-pages.is-active .page:has([name="services"]) .choices { row-gap: 0 !important; }
  .step.has-pages.is-active .page:has([name="services"]) .choices > .choice { min-height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .step.has-pages.is-active .page:has([name="flexibility"]) > .field__label--quiet { font-size: 19px !important; }
}

/* ==== LOCKED · splash page visual adjustments (approved 2026-10-04) ==== */
/* Written exactly from the QA editor export; splash-only selectors. */
/* Desktop 1440 × 900 only */
@media (min-width: 1280px) {
  .step--intro .step__head p.splash__tagline { line-height: 1.15 !important; margin-bottom: 0px !important; margin-top: 18px !important; text-align: left !important; margin-left: 104px !important; }
  .step--intro .step__head p.lede { text-align: left !important; margin-left: 106px !important; margin-top: 24px !important; font-size: 14px !important; width: 323px !important; max-width: none !important; min-width: 0 !important; }
  .step--intro figure.step__media { width: 715px !important; max-width: none !important; min-width: 0 !important; }
  .step--intro .step__body .actions button.btn { margin-left: -24px !important; margin-top: -18px !important; }
  .step--intro .step__head h1.splash__title { text-align: left !important; margin-left: 100px !important; margin-top: -116px !important; line-height: 1.24 !important; }
  .step--intro div.step__head { margin-top: 97px !important; margin-left: 24px !important; }
  body:has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: -38px !important; }
  body:has(.step--intro.is-active) .foot div.shell { margin-left: 91px !important; width: 1258px !important; max-width: none !important; min-width: 0 !important; font-size: 17px !important; }
  body:has(.step--intro.is-active) .foot .shell ul.foot__links { font-size: 10px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { font-style: italic !important; width: 272px !important; max-width: none !important; min-width: 0 !important; hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; margin-top: 37px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.lede { margin-top: 17px !important; }
}

/* iPad landscape 1180 × 820 only */
@media (min-width: 1024px) and (max-width: 1279px) {
  .step--intro .step__head p.splash__tagline { text-align: left !important; line-height: 1.15 !important; margin-bottom: 0px !important; margin-top: 12px !important; margin-left: 131px !important; font-size: 19px !important; }
  .step--intro .step__head p.lede { text-align: left !important; margin-left: 157px !important; margin-top: 11px !important; font-size: 14px !important; width: 326px !important; max-width: none !important; min-width: 0 !important; }
  .step--intro figure.step__media { width: 676px !important; max-width: none !important; min-width: 0 !important; }
  .step--intro .step__body .actions button.btn { text-align: center !important; justify-content: center !important; margin-left: -67px !important; margin-top: -18px !important; font-size: 10px !important; padding-top: 0px !important; padding-bottom: 0px !important; width: 142px !important; max-width: none !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; max-height: none !important; }
  .step--intro .step__head h1.splash__title { text-align: left !important; margin-left: 98px !important; margin-top: -113px !important; line-height: 1.24 !important; font-size: 34px !important; }
  .step--intro div.step__head { margin-top: 97px !important; margin-left: 23px !important; }
  body:has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: 0px !important; }
  body:has(.step--intro.is-active) .foot div.shell { margin-left: 0px !important; width: 1258px !important; max-width: none !important; min-width: 0 !important; font-size: 17px !important; }
  body:has(.step--intro.is-active) .foot .shell ul.foot__links { font-size: 10px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { font-style: italic !important; width: 273px !important; max-width: none !important; min-width: 0 !important; hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; margin-top: 34px !important; margin-left: 104px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.lede { margin-top: 15px !important; margin-left: 104px !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-left: -44px !important; }
}

/* iPad portrait 820 × 1180 only */
@media (min-width: 768px) and (max-width: 1023px) {
  .step--intro .step__head p.splash__tagline { width: 515px !important; max-width: none !important; min-width: 0 !important; }
  .step--intro .step__head p.lede { width: 513px !important; max-width: none !important; min-width: 0 !important; text-align: center !important; margin-top: 41px !important; }
  .step--intro .step__body .actions button.btn { height: 42px !important; min-height: 0 !important; max-height: none !important; }
  .step--intro .step__head h1.splash__title { margin-top: -128px !important; width: 547px !important; max-width: none !important; min-width: 0 !important; }
  .shell .form-col section.step:nth-of-type(1) { margin-top: -2px !important; }
  body:has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: 0px !important; }
  body:has(.step--intro.is-active) .foot .shell ul.foot__links { margin-left: 3px !important; font-size: 10px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { font-style: italic !important; margin-top: 14px !important; font-size: 21px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.lede { margin-top: 14px !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -1px !important; }
  body:has(.step--intro.is-active) .form-col section.step--intro { margin-bottom: 2px !important; padding-bottom: 0px !important; flex: 0 0 auto !important; height: 349px !important; min-height: 0 !important; max-height: none !important; margin-top: -28px !important; }
  body:has(.step--intro.is-active) .shell main.form-col { margin-top: 28px !important; flex: 0 0 auto !important; height: 558px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step--intro.is-active) .step--intro div.step__head { margin-top: 119px !important; }
  body:has(.step--intro.is-active)::after { margin-top: -822px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head h1.splash__title { margin-top: -122px !important; font-size: 34px !important; }
}

/* Mobile 390 × 844 only */
@media (max-width: 767px) {
  body:has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: 69px !important; }
  body:has(.step--intro.is-active) .foot .shell ul.foot__links { letter-spacing: 0.2em !important; line-height: 1.3 !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { margin-top: 18px !important; font-style: italic !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.lede { text-align: center !important; margin-top: 10px !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { height: 26px !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; width: 108px !important; max-width: none !important; min-width: 0 !important; font-size: 9px !important; margin-top: -15px !important; }
  body:has(.step--intro.is-active) .step--intro div.step__head { margin-top: -17px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head h1.splash__title { margin-top: 26px !important; }
}
/* Mobile-only line break in the splash body copy */
.br-mobile { display: none; }
@media (max-width: 767px) { .br-mobile { display: inline; } }


/* No Inter italic anywhere: italic helper copy is set in Cormorant italic, matched to Inter's x-height so sizes stay as tuned */
.field__hint, .field__hint--inline, .cal__hint, .field__label .optional, .page > .field__label .optional,
.page > fieldset > legend.field__label .optional, .step--intro .step__body .note {
  font-family: var(--serif) !important; font-size-adjust: 0.53; }
/* Wordmark a touch smaller */
html body .masthead img.mark-img { height: 13px !important; width: auto !important; }
@media (max-width: 767px) { html body .masthead img.mark-img { height: 11px !important; } }
/* Header label: natural width, right-aligned inside the bar so it never runs off the page */
html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell span.masthead__util { width: auto !important; max-width: none !important; min-width: 0 !important; margin-left: auto !important; flex: 0 0 auto !important; }

/* ==== LOCKED · approved editor export (2026-10-04, desktop + iPad landscape + iPad portrait) ==== */


/* Desktop 1440 × 900 only */
@media (min-width: 1280px) {
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .foot div.shell { width: 1257px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .masthead .shell img.mark-img { margin-left: -41px !important; }
  .masthead .shell img.mark-img { margin-left: -41px !important; }
  .foot div.shell { width: 1257px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { margin-top: -3px !important; flex: 0 0 auto !important; height: 272px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { margin-top: -41px !important; flex: 0 0 auto !important; height: 238px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { margin-left: 24px !important; margin-top: 33px !important; align-self: start !important; height: 361px !important; min-height: 0 !important; max-height: none !important; width: 473px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step--intro.is-active) .step--intro div.step__head { margin-top: 95px !important; }
  body:has(.step--intro.is-active) .step--intro div.step__body { margin-top: 20px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { margin-top: -17px !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -17px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step .step__body .field span.field__hint--inline { margin-top: 8px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field p.step__intro { width: 482px !important; max-width: none !important; min-width: 0 !important; margin-top: 21px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field span.field__label { width: 450px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field span.field__hint--inline { margin-top: 26px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field label.field__label--quiet { margin-top: -29px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { margin-top: -26px !important; }
  body:has(.step[data-step="5"].is-active .page:not(.is-off) [name="professional_budget"]) .step .step__body .field span.field__hint--inline { margin-top: 18px !important; }
  body:has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { margin-top: -37px !important; height: 282px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .step .step__body .field textarea[name="notes"] { margin-top: -13px !important; flex: 0 0 auto !important; height: 247px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { width: 1036px !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; height: 109px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="9"].is-active) .step__body .field-row--three .field div.field:nth-of-type(1) > label.field__label:nth-of-type(1) { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; text-align: center !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { text-align: center !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede { text-align: center !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.contact { margin-top: 11px !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__media img { width: 590px !important; max-width: none !important; min-width: 0 !important; }
}

/* iPad landscape 1180 × 820 only */
@media (min-width: 1024px) and (max-width: 1279px) {
  .masthead .shell img.mark-img { margin-left: 0px !important; }
  .foot div.shell { margin-left: 75px !important; width: 1030px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { margin-top: -4px !important; flex: 0 0 auto !important; height: 248px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { margin-top: -37px !important; flex: 0 0 auto !important; height: 185px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { margin-left: 112px !important; margin-top: 33px !important; align-self: start !important; height: 345px !important; min-height: 0 !important; max-height: none !important; width: 374px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="5"].is-active .page:not(.is-off) [name="professional_budget"]) .step .step__body .field p.step__intro { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; width: 1004px !important; max-width: none !important; min-width: 0 !important; font-weight: 400 !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { margin-top: 20px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step .step__body .field span.field__hint--inline { margin-top: 19px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field p.step__intro { width: 547px !important; max-width: none !important; min-width: 0 !important; margin-top: 19px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field span.field__label { width: 538px !important; max-width: none !important; min-width: 0 !important; hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field span.field__hint--inline { margin-top: 19px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field label.field__label--quiet { margin-top: -54px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { margin-top: -52px !important; flex: 0 0 auto !important; height: 134px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="5"].is-active .page:not(.is-off) [name="professional_budget"]) .step .step__body .field span.field__hint--inline { margin-top: 22px !important; }
  body:has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { margin-top: -31px !important; height: 260px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .step .step__body .field textarea[name="notes"] { margin-top: -7px !important; flex: 0 0 auto !important; height: 269px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { width: 1004px !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; height: 99px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="9"].is-active) .step__body .field-row--three .field div.field:nth-of-type(1) > label.field__label:nth-of-type(1) { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; text-align: center !important; font-size: 16px !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { text-align: center !important; font-size: 16px !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede { text-align: center !important; font-size: 14px !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.contact { margin-top: 10px !important; font-size: 14px !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__media img { width: 483px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: 0px !important; }
  body:has(.step--intro.is-active) .foot .shell .foot__links li:nth-of-type(1) > a:nth-of-type(1) { margin-left: -72px !important; }
  body:has(.step--intro.is-active) .foot div.shell { margin-left: 75px !important; }
  body:has(.step--intro.is-active) .foot .shell .foot__links li:nth-of-type(3) > a:nth-of-type(1) { margin-left: 149px !important; width: 84px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.contact { font-size: 16px !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .shell .terminal__body .actions--start a.btn { flex: 0 0 auto !important; width: 249px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field textarea[name="deadline_details"] { width: 506px !important; max-width: none !important; min-width: 0 !important; }
  .foot .shell .foot__links li:nth-of-type(1) > a:nth-of-type(1) { margin-left: -72px !important; }
  .foot .shell .foot__links li:nth-of-type(3) > a:nth-of-type(1) { margin-left: 149px !important; width: 84px !important; max-width: none !important; min-width: 0 !important; }
  .foot .shell ul.foot__links { font-size: 10px !important; }
}

/* iPad portrait 820 × 1180 only */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { font-size: 16px !important; font-size-adjust: none !important; text-align: left !important; font-family: "Cormorant Garamond", Georgia, serif !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -15px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { margin-top: 25px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .form-col section.step { margin-top: 14px !important; flex: 0 0 auto !important; height: 888px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field div.choices { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: repeat(7, 62px) !important; grid-auto-flow: column !important; align-items: stretch !important; row-gap: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; column-gap: 30px !important; margin-bottom: -12px !important; margin-left: 0px !important; margin-top: 6px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step__body .field .choices label.choice { font-weight: 400 !important; font-size: 14px !important; }
}



/* ==== LOCKED · iPad portrait editor export (2026-10-04) ==== */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { font-size: 16px !important; text-align: left !important; font-family: "Cormorant Garamond", Georgia, serif !important; margin-top: 49px !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -15px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { margin-top: 25px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .form-col section.step { margin-top: 14px !important; flex: 0 0 auto !important; height: 888px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field div.choices { column-gap: 30px !important; margin-bottom: -12px !important; margin-left: 0px !important; margin-top: 6px !important; flex: 0 0 auto !important; height: 530px !important; min-height: 0 !important; max-height: none !important; row-gap: 2px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step__body .field .choices label.choice { font-weight: 400 !important; font-size: 14px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .foot div.shell { margin-left: 0px !important; width: 820px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .masthead .shell img.mark-img { margin-left: -75px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .masthead .shell span.masthead__util { margin-left: 341px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .form-col section.step { margin-top: -1px !important; flex: 0 0 auto !important; height: 890px !important; min-height: 0 !important; max-height: none !important; }
  /* Every question page (no photograph) uses the "What would you most like to change?" card, header and footer */
  html body:not(#_a#_b#_c#_d#_e#_f):has(.form-col > form > .step.is-active:not(.step--intro)) .form-col > form > section.step.is-active { margin-top: -1px !important; margin-bottom: 0 !important; flex: 0 0 auto !important; height: 890px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.form-col > form > .step.is-active:not(.step--intro)) .foot div.shell { margin-left: 0px !important; width: 820px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.form-col > form > .step.is-active:not(.step--intro)) .masthead .shell img.mark-img { margin-left: -75px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.form-col > form > .step.is-active:not(.step--intro)) .masthead .shell span.masthead__util { margin-left: 341px !important; }
}

/* ==== LOCKED · iPad portrait editor export v2 (2026-10-04) ==== */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { flex: 0 0 auto !important; height: 534px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { flex: 0 0 auto !important; height: 476px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field label.field__label--quiet { font-size: 17px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { align-self: start !important; height: 373px !important; min-height: 0 !important; max-height: none !important; width: 488px !important; max-width: none !important; min-width: 0 !important; margin-left: 0px !important; font-size: 13px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { font-size: 16px !important; text-align: left !important; font-family: "Cormorant Garamond", Georgia, serif !important; margin-top: 49px !important; }
  body:has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -15px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step .step__body .field span.field__hint--inline { font-size: 13px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field label.field__label--quiet { margin-top: 86px !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { margin-top: -6px !important; flex: 0 0 auto !important; height: 185px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { height: 532px !important; min-height: 0 !important; max-height: none !important; }
  body:has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { flex: 0 0 auto !important; height: 289px !important; min-height: 0 !important; max-height: none !important; margin-top: 9px !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { margin-top: 18px !important; text-align: center !important; width: 460px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { margin-top: 32px !important; hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; font-weight: 400 !important; text-align: center !important; width: 452px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.contact { margin-top: 28px !important; width: 410px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field textarea[name="deadline_details"] { align-self: start !important; height: 81px !important; min-height: 0 !important; max-height: none !important; margin-top: 9px !important; }
  body:has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { margin-top: 25px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field div.choices { column-gap: 30px !important; margin-bottom: -12px !important; margin-left: 0px !important; margin-top: 6px !important; flex: 0 0 auto !important; height: 530px !important; min-height: 0 !important; max-height: none !important; row-gap: 2px !important; }
  body:has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step__body .field .choices label.choice { font-weight: 400 !important; font-size: 14px !important; }
  body:has(.step[data-step="9"].is-active) .step .step__body div.field:nth-of-type(6) { margin-top: -34px !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell .terminal__body h1 { margin-top: -16px !important; }
  body:has(.terminal [data-booking-cta]) .shell .terminal__body .actions--start a.btn { margin-top: 22px !important; flex: 0 0 auto !important; width: 275px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal [data-booking-cta]) .terminal div.shell { flex: 0 0 auto !important; height: 515px !important; min-height: 0 !important; max-height: none !important; margin-top: -165px !important; }
  body:has(.terminal [data-booking-cta])::after { margin-top: -165px !important; }
  body:has(.terminal [data-booking-cta]) .terminal .shell div.terminal__body { margin-top: 22px !important; }
  /* Return thank-you copies the request-a-date thank-you */
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede:nth-of-type(2) { margin-top: 18px !important; text-align: center !important; width: 460px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede:nth-of-type(1) { margin-top: 32px !important; hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; font-weight: 400 !important; text-align: center !important; width: 452px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.contact { margin-top: 28px !important; width: 410px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body h1 { margin-top: -16px !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .shell .terminal__body .actions--start a.btn { margin-top: 22px !important; flex: 0 0 auto !important; width: 275px !important; max-width: none !important; min-width: 0 !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal div.shell { flex: 0 0 auto !important; height: 515px !important; min-height: 0 !important; max-height: none !important; margin-top: -165px !important; }
  body:has(.terminal):not(:has([data-booking-cta]))::after { margin-top: -165px !important; }
  body:has(.terminal):not(:has([data-booking-cta])) .terminal .shell div.terminal__body { margin-top: 22px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .step.is-active .field:has(.choices--single) span.field__hint--inline { font-size: 13px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot div.shell { margin-left: 0px !important; width: 820px !important; max-width: none !important; min-width: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body:not(#_a#_b#_c#_d#_e#_f) #referred_by::placeholder { font-size: 13px !important; }
}
/* iPad portrait: header and footer from the question pages on every page */
@media (min-width: 768px) and (max-width: 1023px) {
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell img.mark-img { margin-left: -75px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell span.masthead__util { margin-left: 341px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .masthead .shell span.masthead__util { display: inline-block !important; visibility: visible !important; opacity: 1 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot .shell .foot__links li > a { margin-left: 0 !important; width: auto !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: 3px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .masthead .shell span.masthead__util { margin-left: 339px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .foot .shell .foot__links a { font-size: 9px !important; letter-spacing: 1.98px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .masthead .shell span.masthead__util { position: relative !important; left: -2px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .foot .foot__links li:nth-of-type(1) > a { position: relative !important; left: -3px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .foot .foot__links li:nth-of-type(2) > a { position: relative !important; left: -1px !important; }
}

/* "Other" choice with inline text box (Timing, Investment) */
html body .choices label.choice.choice--other { display: flex !important; align-items: center; gap: 12px; flex-wrap: nowrap; }
html body .choices label.choice.choice--other input.choice__other-text { flex: 1 1 auto; min-width: 0; width: auto; height: 32px !important; min-height: 0 !important; padding: 0 10px !important; margin: 0 !important; font: inherit; font-size: 0.95em; border: 0 !important; border-bottom: 1px solid currentColor !important; border-radius: 0 !important; background: transparent !important; opacity: .75; }
html body .choices label.choice.choice--other input.choice__other-text:focus { outline: none; opacity: 1; }

/* Mobile pass: no photo band on question pages, smaller buttons, longer text boxes, darker greys */
@media (max-width: 767px) {
  html body:has(.form-col > form > .step.is-active:not(.step--intro))::after,
  html body:has(.form-col > form > .step.is-active:not(.step--intro)) .qa-photo-band { display: none !important; }
  html body:has(.form-col > form > .step.is-active:not(.step--intro)) > .shell { flex: 1 1 auto !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .form-col .step.is-active:not(.step--intro) .actions .btn { height: 44px !important; min-height: 0 !important; flex: 0 0 auto !important; min-width: 128px !important; padding: 2px 24px 0 !important; font-size: 10px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .form-col .step.is-active:not(.step--intro) .actions { justify-content: space-between !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .form-col .step.is-active:not(.step--intro) textarea { min-height: 200px !important; height: 200px !important; max-height: none !important; flex: 0 0 auto !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .form-col .step.is-active:not(.step--intro) .field__hint,
  html body:not(#_a#_b#_c#_d#_e#_f) .form-col .step.is-active:not(.step--intro) .step__intro { color: var(--ink-70) !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .form-col .step.is-active:not(.step--intro) :is(.choice, .choice span, input, textarea, select) { font-weight: 300 !important; }
}

/* Mobile: splash header and footer on every page — centred wordmark, no header label */
@media (max-width: 767px) {
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell { justify-content: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell img.mark-img { margin-left: 0 !important; margin-right: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell span.masthead__util { display: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot .shell ul.foot__links { letter-spacing: 0.2em !important; line-height: 1.3 !important; }
}

/* ==== LOCKED · editor export 13 (2026-10-04) — all four views ==== */
@media (min-width: 1280px) {
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .foot div.shell { width: 1257px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .masthead .shell img.mark-img { margin-left: -41px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell img.mark-img { margin-left: -41px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot div.shell { width: 1257px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { margin-top: -3px !important; flex: 0 0 auto !important; height: 272px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { margin-top: -41px !important; flex: 0 0 auto !important; height: 238px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { margin-left: 24px !important; margin-top: 33px !important; align-self: start !important; height: 361px !important; min-height: 0 !important; max-height: none !important; width: 473px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .step--intro div.step__head { margin-top: 95px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .step--intro div.step__body { margin-top: 20px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { margin-top: -17px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -17px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step .step__body .field span.field__hint--inline { margin-top: 8px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field p.step__intro { width: 482px !important; max-width: none !important; min-width: 0 !important; margin-top: 21px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field span.field__label { width: 450px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field span.field__hint--inline { margin-top: 26px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field label.field__label--quiet { margin-top: -29px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { margin-top: -26px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="5"].is-active .page:not(.is-off) [name="professional_budget"]) .step .step__body .field span.field__hint--inline { margin-top: 18px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { margin-top: -37px !important; height: 282px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .step .step__body .field textarea[name="notes"] { margin-top: -13px !important; flex: 0 0 auto !important; height: 247px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { width: 1036px !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; height: 109px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="9"].is-active) .step__body .field-row--three .field div.field:nth-of-type(2) > label.field__label:nth-of-type(1) { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede { text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.contact { margin-top: 11px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__media img { width: 590px !important; max-width: none !important; min-width: 0 !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html body:not(#_a#_b#_c#_d#_e#_f) .masthead .shell img.mark-img { margin-left: 0px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot div.shell { margin-left: 75px !important; width: 1030px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { margin-top: -4px !important; flex: 0 0 auto !important; height: 248px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { margin-top: -37px !important; flex: 0 0 auto !important; height: 185px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { margin-left: 112px !important; margin-top: 33px !important; align-self: start !important; height: 345px !important; min-height: 0 !important; max-height: none !important; width: 374px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="5"].is-active .page:not(.is-off) [name="professional_budget"]) .step .step__body .field p.step__intro { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; width: 1004px !important; max-width: none !important; min-width: 0 !important; font-weight: 400 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { margin-top: 20px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step .step__body .field span.field__hint--inline { margin-top: 19px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field p.step__intro { width: 547px !important; max-width: none !important; min-width: 0 !important; margin-top: 19px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field span.field__label { width: 538px !important; max-width: none !important; min-width: 0 !important; hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field span.field__hint--inline { margin-top: 19px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field label.field__label--quiet { margin-top: -54px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { margin-top: -52px !important; flex: 0 0 auto !important; height: 134px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="5"].is-active .page:not(.is-off) [name="professional_budget"]) .step .step__body .field span.field__hint--inline { margin-top: 22px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { margin-top: -31px !important; height: 260px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .step .step__body .field textarea[name="notes"] { margin-top: -7px !important; flex: 0 0 auto !important; height: 269px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { width: 1004px !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; height: 99px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="9"].is-active) .step__body .field-row--three .field div.field:nth-of-type(2) > label.field__label:nth-of-type(1) { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; text-align: center !important; font-size: 15px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { text-align: center !important; font-size: 15px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede { text-align: center !important; font-size: 14px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.contact { margin-top: 10px !important; font-size: 14px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__media img { width: 483px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .masthead .shell img.mark-img { margin-left: 0px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .foot .shell .foot__links li:nth-of-type(1) > a:nth-of-type(1) { margin-left: -72px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .foot div.shell { margin-left: 75px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .foot .shell .foot__links li:nth-of-type(3) > a:nth-of-type(1) { margin-left: 149px !important; width: 84px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.contact { font-size: 17px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .shell .terminal__body .actions--start a.btn { flex: 0 0 auto !important; width: 249px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field textarea[name="deadline_details"] { width: 506px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot .shell .foot__links li:nth-of-type(1) > a:nth-of-type(1) { margin-left: -72px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot .shell .foot__links li:nth-of-type(3) > a:nth-of-type(1) { margin-left: 149px !important; width: 84px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f) .foot .shell ul.foot__links { font-size: 10px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { flex: 0 0 auto !important; height: 534px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { flex: 0 0 auto !important; height: 476px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field label.field__label--quiet { font-size: 17px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { align-self: start !important; height: 373px !important; min-height: 0 !important; max-height: none !important; width: 488px !important; max-width: none !important; min-width: 0 !important; margin-left: 0px !important; font-size: 13px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field span.field__hint--inline { font-size: 16px !important; text-align: left !important; font-family: "Cormorant Garamond", Georgia, serif !important; margin-top: 49px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .step--intro .step__body .actions--start button.btn { margin-top: -15px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step .step__body .field span.field__hint--inline { font-size: 13px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field label.field__label--quiet { margin-top: 86px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { margin-top: -6px !important; flex: 0 0 auto !important; height: 185px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { height: 532px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { flex: 0 0 auto !important; height: 289px !important; min-height: 0 !important; max-height: none !important; margin-top: 9px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { margin-top: 18px !important; text-align: center !important; width: 460px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { margin-top: 32px !important; hyphens: manual !important; white-space: normal !important; text-wrap: pretty !important; font-weight: 400 !important; text-align: center !important; width: 452px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.contact { margin-top: 28px !important; width: 410px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field textarea[name="deadline_details"] { align-self: start !important; height: 81px !important; min-height: 0 !important; max-height: none !important; margin-top: 9px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="preferred_timing"]) .step__body .field .choices--single label.choice:nth-of-type(1) { row-gap: 20px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .step--intro .step__head p.splash__tagline { margin-top: 25px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step .step__body .field div.choices { column-gap: 30px !important; margin-bottom: -12px !important; margin-left: 0px !important; margin-top: 6px !important; flex: 0 0 auto !important; height: 530px !important; min-height: 0 !important; max-height: none !important; row-gap: 2px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="services"]) .step__body .field .choices label.choice { font-weight: 400 !important; font-size: 14px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="9"].is-active) .step .step__body div.field:nth-of-type(6) { margin-top: -34px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body h1 { margin-top: -16px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .shell .terminal__body .actions--start a.btn { margin-top: 22px !important; flex: 0 0 auto !important; width: 275px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal div.shell { flex: 0 0 auto !important; height: 515px !important; min-height: 0 !important; max-height: none !important; margin-top: -165px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta])::after { margin-top: -165px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell div.terminal__body { margin-top: 22px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="9"].is-active) .step__body .field .choices--single label.choice { margin-top: -1px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="9"].is-active) .step div.step__body { margin-top: 25px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .terminal div.shell { flex: 0 0 auto !important; height: 447px !important; min-height: 0 !important; max-height: none !important; }
}
@media (max-width: 767px) {
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { height: 291px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="3"].is-active .page:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { height: 263px !important; min-height: 0 !important; max-height: none !important; margin-top: 12px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field label.field__label--quiet { hyphens: manual !important; white-space: normal !important; text-wrap: wrap !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field div.cal { height: 384px !important; min-height: 0 !important; max-height: none !important; width: 306px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="flexibility"]) .step .step__body .field textarea[name="specific_dates_note"] { height: 149px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { height: 297px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .step .step__body .field textarea[name="notes"] { height: 293px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="8"].is-active) .step__body .field-row .field textarea[name="property_notes"] { height: 110px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(2) { text-align: center !important; margin-top: 8px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.lede:nth-of-type(1) { text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal):not(:has([data-booking-cta])) .terminal .shell .terminal__body p.lede { font-weight: 400 !important; text-align: center !important; margin-top: 18px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.terminal [data-booking-cta]) .terminal .shell .terminal__body p.contact { width: 272px !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="4"].is-active .page:not(.is-off) [name="specific_dates"]) .step .step__body .field textarea[name="deadline_details"] { margin-top: -11px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step--intro.is-active) .step--intro .step__head p.lede { font-weight: 400 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .form-col section.step { flex: 0 0 auto !important; height: 592px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step .step__body .field--contextual span.field__label { margin-top: -7px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .form-col section.step { flex: 0 0 auto !important; height: 598px !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="7"].is-active .page:not(.is-off) [name="notes"]) .step .step__body .field label.field__label { margin-top: -5px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f):has(.step[data-step="8"].is-active) .step .step__body div.actions { margin-top: -10px !important; }
}