/* Ankersen Drake · consultation enquiry · fit to the window
   (client desktop QA handoff, 6 October 2026, items A5 and M).

   Not part of the signed-off stylesheet, which is untouched and pinned
   by digest (tests/consultation.test.ts); this file loads after it.
   It replaces the 900px floor of the pre-QA fixes. Four things, and
   nothing that restyles the product:

   1. ONE PROPORTIONAL SCALE. The signed-off desktop composition is
      1440 x 900, the iPad landscape one 1180 x 820. When the window is
      smaller than its composition in either direction, the small script
      in each page's head sets --ad-fit to the ratio and the class
      ad-fit on the root, and the whole page is zoomed by that one
      factor: header, card, type, fields, buttons and footer together,
      so a laptop window shows the signed-off layout at a smaller size
      instead of a squeezed or clipped one. At the signed-off size and
      larger, nothing is set and the page renders exactly as supplied.
      Below 1024px wide the existing tablet and mobile layouts take over
      unchanged.
   2. THE SAME HEADER AND FOOTER ON EVERY STEP. The opening step carried
      its own footer offsets (a fixed 91px left margin and larger link
      type), so on a window wider than 1440 its email slid under the ink
      gutter. It now takes the footer every other step uses.
   3. THE HEADER LABEL ENDS AT THE CARD'S EDGE. Letter-spacing trails
      the last letter, so "Enquiry" stopped one tracking unit short of
      the card's right edge; the label is pulled out by that unit.
   4. VALIDATION MESSAGES BESIDE THE BUTTONS, NEVER UNDER THEM. The
      message line sat in the same band as Back and Continue, which
      covered it when it was long. On the question steps the message is
      now held in the free space to the left of the buttons, level with
      them; on About You the consent message does the same and the
      field messages are set a little tighter so the grid keeps clear of
      the buttons. The opened "Who recommended us?" field takes the
      empty cell beside "How did you hear about Ankersen Drake?" rather
      than a new row.
   5. THE PRODUCTS QUESTION (correction pass, 6 October). A new page
      for physical-space enquiries, whose optional note opens under its
      options. Its own heading runs to two lines, so the intro's
      three-line reserve is let go (as the calendar page already does)
      and the note's box is a shorter one, so the opened note stays
      clear of the buttons; the note's label is set as the timing
      note's is. Layout only. On the portrait tablet, where the signed-
      off sheet fixes each answer box's height to its page's copy, the
      two pages whose guidance the client lengthened (What would you
      most like to change; Photographs) take back exactly the extra
      lines from their boxes, so the boxes end where they did.
   6. THE SERVICES LIST KEEPS ITS FAMILIES (photography pass).
   7-10. RESPONSIVE FIXES (photography pass, part two, 7 October): the
      validation message beside the buttons on the iPad landscape too;
      a window between 768 and 819px wide holds the portrait tablet's
      header and footer inside it; a short landscape phone (844 x 390,
      932 x 430) scrolls the page instead of clipping it; and on both
      iPads no message is left under the buttons. */

/* 1 · one proportional scale ----------------------------------------- */

@media (min-width: 1024px) {
  html.ad-fit { zoom: var(--ad-fit); overflow: hidden; }
  /* The signed-off body is one window tall (100vh). Under the zoom a
     window is 100vh / --ad-fit layout pixels tall, so the composition
     keeps its full height and fills the window exactly. */
  html.ad-fit body { height: calc(100vh / var(--ad-fit)); }
  html.ad-fit .progress::before { width: calc(100vw / var(--ad-fit)); }
}
@media (min-width: 1280px) {
  /* The ink gutters measure the window too. */
  html.ad-fit body::before,
  html.ad-fit body::after { bottom: auto; height: calc(100vh / var(--ad-fit));
    width: max(40px, calc((100vw / var(--ad-fit) - var(--col-form)) / 2 - 40px)); }
}

/* 2 · the same footer on every step ------------------------------------ */

@media (min-width: 1280px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g):has(.step--intro.is-active) .foot div.shell {
    margin-left: auto !important; margin-right: auto !important; font-size: inherit !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g):has(.step--intro.is-active) .foot .shell ul.foot__links {
    font-size: 9px !important; }
}

/* 3 · the header label ends at the card's right edge ------------------- */

@media (min-width: 1024px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g) .masthead .shell span.masthead__util { margin-right: -0.24em !important; }
}

/* 4 · validation messages beside the buttons --------------------------- */

@media (min-width: 1280px) {
  /* Question steps: the card is the reference, so the message can sit in
     the button band (card padding 60px, buttons 52px tall) at the card's
     left padding, as wide as the space before Back allows. */
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) { position: relative; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) fieldset:has(> .field__hint--inline) { position: static; }
  /* The finished entrance animation still holds its end state on the
     body and page (fill both), which makes them the reference instead of
     the card. Its end state is no transform and full opacity, so letting
     go of the fill changes nothing visible, and nothing restarts. */
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]):has(.field.has-error) :is(.step__body, .page) { animation-fill-mode: none !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field.has-error .field__error {
    position: absolute; left: 72px; bottom: 86px; transform: translateY(50%);
    width: auto; max-width: calc(50% - 72px - 200px - 24px); min-height: 0; margin: 0; }

  /* About You: the consent message goes to the same place (the step body
     is the reference here, its buttons at its foot) ... */
  .step[data-single-page].is-active .field[data-validate="consent"].has-error .field__error {
    position: absolute; z-index: 1; left: 0; bottom: 26px; transform: translateY(50%);
    width: auto; max-width: calc(50% - 200px - 24px); min-height: 0; margin: 0; }
  /* ... the field messages take a tighter line, and the rows close up a
     little while one is showing, so the grid stays clear of the buttons */
  .step[data-single-page].is-active .field:not([data-validate="consent"]) .field__error { margin-top: 2px; line-height: 14px; }
  .form-col > form > .step[data-single-page].is-active:has(#email):has(.field.has-error:not([data-validate="consent"])) > .step__body { row-gap: 6px !important; }
  /* ... and "Who recommended us?" opens into the empty third cell of its
     row instead of adding a row. */
  /* QA correction, 13 October: the third cell of that row now holds the
     professional-organisers question, so "Who recommended us?" opens in
     the consent row's third cell instead (the consent line keeps the
     first two), and the row's gap closes a little while it shows. */
  .step[data-single-page].is-active:has(#email) .reveal.is-open { grid-column: 3 / 4; grid-row: 4; align-self: end; }
  .step[data-single-page].is-active:has(#email):has(.reveal.is-open) .field[data-validate="consent"] { grid-column: 1 / 3; margin-top: 0; }
}

/* 5 · the storage and organisation products page ------------------------
   Final handover, 13 October: the optional note beneath the question
   ("Is there anything else you would like us to know about the storage or
   organisation products you may need?") is removed entirely, with its
   field, its reveal, its server allowlist entry and its static Netlify
   declaration; the question and its four answers are unchanged. */

@media (min-width: 1024px) {
  .step.has-pages.is-active .page:has([name="storage_products"]) .step__intro { min-height: 0 !important; }
  .step.has-pages.is-active .page:has([name="storage_products"]) fieldset > .choices { padding-bottom: 0 !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* one more line of guidance (26px): the box gives it back */
  html body:not(#_a#_b#_c#_d#_e#_f#_g):has(.step[data-step="2"].is-active .page:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { height: 508px !important; }
  /* two more lines of guidance (52px): the upload box gives them back */
  html body:not(#_a#_b#_c#_d#_e#_f#_g):has(.step[data-step="6"].is-active .page:not(.is-off) [name="photo_1"]) .step__body .field--contextual .upload-wrap label.upload { height: 480px !important; }
}

/* 6 · the services list keeps its families ----------------------------
   Photography pass, 7 October: with Workspace Solutions and Styling
   withdrawn the list is twelve options, four to a column, one family
   to a column. Opening Other's field adds a thirteenth block, which
   the balanced columns would otherwise redistribute five, five and
   three; a break before the first option of the second and third
   families keeps every column where it was, and the field opens
   directly under Other. Layout only. */
@media (min-width: 1024px) {
  .choices > label.choice:has(> input[name="services"][value="Decluttering"]),
  .choices > label.choice:has(> input[name="services"][value="Household Manuals"]) {
    break-before: column; }
}

/* 7 · validation messages beside the buttons on the iPad landscape ------
   At 1024 to 1279px the button band runs the card's width on a white
   ground and is pinned to the card's foot, so a message above it was
   half covered (1180 x 820). The message goes where it goes at 1280 and
   wider: in the band, level with the buttons, in the free space before
   Back (card padding 56px; the band's centre 70px above the card's
   foot; the buttons 272px wide together, centred). Layout only. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) { position: relative; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) fieldset:has(> .field__hint--inline) { position: static; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]):has(.field.has-error) :is(.step__body, .page) { animation-fill-mode: none !important; }
  .form-col > form > .step.is-active:not(.step--intro):not([data-single-page]) .field.has-error .field__error {
    position: absolute; z-index: 1; left: 56px; bottom: 70px; transform: translateY(50%);
    width: auto; max-width: calc(50% - 136px - 56px - 24px); min-height: 0; margin: 0; }
}

/* 8 · a tablet window narrower than 820px ------------------------------
   The portrait tablet's header and footer are set for exactly 820px (the
   footer 820px wide, the header label 339 to 341px from the mark), so a
   768px window scrolled sideways by 52px. Below 820 they take the
   window's width instead. */
@media (min-width: 768px) and (max-width: 819px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g) .foot div.shell { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g) .masthead .shell span.masthead__util { margin-left: auto !important; left: 0 !important; }
}

/* 9 · a short landscape phone -------------------------------------------
   An iPhone held sideways (844 x 390, 932 x 430) is 768 to 1023px wide,
   so it took both the portrait tablet's fixed composition and the
   landscape tablet's window-tall frame: the opening's words ran 150 to
   210px past the card, the endings started above the window and the
   question cards scrolled inside a 274px slot. Here the page simply
   scrolls, at the signed-off type sizes. Layout only. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) and (max-width: 1023px) {
  /* the page scrolls: the window-tall frame, the card's own scroll and
     the portrait tablet's fixed heights are let go */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) { height: auto !important; min-height: 100vh !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) > .shell { flex: 1 0 auto !important; min-height: 0 !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .shell main.form-col,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .form-col > form { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin-top: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .form-col > form > section.step.is-active { height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; flex: 0 0 auto !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.is-active:not(.step--intro) > .step__body { flex: 0 0 auto !important; overflow: visible !important; }
  /* the buttons at the card's foot, in the flow, as on the phone layout:
     pinned to a 390px window they covered the options as it scrolled */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.is-active:not(.step--intro) .actions:not(.actions--start) { position: static !important; }
  /* the header and footer inside the window (the portrait tablet's
     offsets are measured for 820px) */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .masthead .shell img.mark-img { margin-left: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .masthead .shell span.masthead__util { margin-left: auto !important; left: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .foot div.shell { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .foot .shell ul.foot__links { margin-left: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .foot .foot__links li > a { left: 0 !important; }
  /* the opening: the signed-off landscape split, photograph left, its
     words centred in the right half, without the portrait tablet's
     offsets (which set the title 547px wide in a 422px column) */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step--intro div.step__head { margin: 0 !important; padding-top: 40px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step--intro .step__head h1.splash__title { width: auto !important; max-width: 330px !important; margin: 0 auto !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step--intro .step__head p.splash__tagline { width: auto !important; max-width: 330px !important; margin: 18px auto 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step--intro .step__head p.lede { width: auto !important; max-width: 330px !important; margin: 24px auto 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step--intro .step__body { padding-bottom: 40px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step--intro .step__body .actions--start button.btn { margin: 0 !important; }
  /* the endings: the same split, at their own height */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .terminal div.shell { height: auto !important; min-height: 0 !important; margin-top: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .terminal .shell div.terminal__body { margin-top: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .terminal .shell .terminal__body h1 { margin-top: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .terminal .shell .terminal__body p.lede,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .terminal .shell .terminal__body p.contact { width: auto !important; max-width: 340px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .terminal .shell .terminal__body .actions--start a.btn { width: auto !important; min-width: 0 !important; max-width: 100% !important; }
}

/* 10 · no message under the buttons on either iPad -----------------------
   Measured with every message showing: at 1180 x 820 About You's consent
   line ran 11px into the buttons and its message 38px; at 820 x 1180 the
   change and rooms messages ran 22px and 3px under them (hidden by the
   button band) and About You's consent line 55px. */
@media (min-width: 768px) and (max-width: 1279px) {
  /* About You: field messages on a tighter line, and the rows closer
     while one is showing, as at 1280 and wider */
  .step[data-single-page].is-active .field:not([data-validate="consent"]) .field__error { margin-top: 2px; line-height: 14px; }
  .form-col > form > .step[data-single-page].is-active:has(#email):has(.field.has-error:not([data-validate="consent"])) > .step__body { row-gap: 6px !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* ... and when the messages still make About You taller than its card
     (every field left empty), the card's body scrolls under the buttons
     pinned at its foot, exactly as every question page already does at
     these sizes, instead of the last rows sliding under the buttons. The
     fields stay centred while they fit. Only while a message shows. */
  .form-col > form > .step[data-single-page].is-active:has(#email):has(.field.has-error) > .step__body {
    overflow-y: auto !important; padding-bottom: 0 !important; align-content: safe center !important; }
  .form-col > form > .step[data-single-page].is-active:has(#email):has(.field.has-error) > .step__body > .actions:not(.actions--start) {
    position: sticky !important; left: auto !important; right: auto !important; bottom: 0 !important;
    grid-column: 1 / -1; margin: 0 !important; padding-top: 16px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* The portrait tablet fixes each answer box's height to its page, so
     while its message shows the box gives back the message's room, and
     the message ends 16px clear of the buttons, as the boxes already do
     for the longer guidance (section 5). */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h):has(.step[data-step="2"].is-active .page.has-error:not(.is-off) [name="change_summary"]) .step .step__body .field textarea[name="change_summary"] { height: 470px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h):has(.step[data-step="3"].is-active .page.has-error:not(.is-off) [name="areas"]) .step .step__body .field textarea[name="areas"] { height: 456px !important; }
}

/* 11 · the Photographs step's re-enabled zone (functional completion
   pass, 10 October). Photographs are sent one at a time to a private
   store by assets/js/ad-photos.js; the zone, list and messages are the
   signed-off ones. Two layout-only additions: the status line under the
   list sits at the list's own spacing, and a failed photograph's "Try
   again" takes the signed-off "Add another" style at a shorter height. No colour,
   typeface, ground, border or shadow of its own. */
#photo-upload-status { margin: 10px 0 0; }
/* On a desktop or tablet the signed-off zone fills the height between
   the introduction and the buttons, and its own `.upload.is-full
   { display: none }` is outranked there by the rule that makes it fill.
   Once photographs are in the list the zone gives way to the list, as
   it does on a phone and as `is-full` intends: the list's own "Add
   another" tile takes more. Layout only. */
@media (min-width: 1024px) {
  .step.is-active .field:has(.upload-list:not(:empty)) .upload-wrap { flex: 0 0 auto !important; margin-block: 0 !important; }
  .step.is-active .field:has(.upload-list:not(:empty)) .upload { display: none !important; }
  .step.is-active .field:has(.upload-list:not(:empty)) .upload-list { margin-top: 24px; }
}
.upload-list .upload__retry { height: auto; min-height: 0; margin-top: 6px; padding: 6px 0; }
#photo-submit-message { display: none; margin: 0 0 12px; }
#photo-submit-message[style*="block"] { display: block; }

/* 12 · twelve photographs and the hold notice (client QA, 11 October) ----
   Layout only; the signed-off sheet is untouched.
   a) The Photographs step with photographs in its list: the list and its
      status line scroll INSIDE the field, and Back / Continue sit beneath
      the field, always in view and never over a thumbnail, a Remove button
      or the status line (the pinned band used to float over the last row
      until the answer area was scrolled). The look is unchanged while the
      photographs fit; with twelve, the field scrolls and the buttons stay
      put beneath it. From 768px, where the buttons are pinned; never on a
      short landscape phone (768 to 1023 wide, 500 tall or less), whose
      page scrolls as a whole (section 9): there the rule collapsed the
      field to a few pixels (found in the final QA of 11 October).
   b) About You's hold notice ("Your photographs are still uploading …")
      is a full-width line of its own above the buttons: at 1280 and wider
      it spans the three columns (it wrapped in one and ran under the
      buttons); on either iPad, while it shows, the buttons leave the foot
      of the card and follow the notice in the flow, so the notice always
      reads above them (the room the card reserved for the pinned buttons
      is given back, and the body scrolls only if it must). */
/* 14 October 2026 (final functional correction pass): (a) is for the PINNED
   desktop card alone, 1280px and wider with a fine pointer. Everywhere
   else the card is content-led (the iPads by section 19, the 768 to 1279
   laptop window by section 23 below): there the rule collapsed the field
   to a few pixels once a photograph was in the list, so the tiles painted
   outside the white card and, after a removal, scrolled off its top. */
@media (min-width: 1280px) and (hover: hover) and (min-height: 501px) {
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body {
    overflow: visible !important; }
  /* 14 October: the LIST alone scrolls (it was the whole field), so the
     status line and the reason a photograph was not sent stay in view
     beneath the thumbnails instead of scrolling off with them. */
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body > .reveal {
    flex: 1 1 0; min-height: 0; overflow: visible; display: flex; flex-direction: column; padding-bottom: 0; }
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body > .reveal > .field {
    flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body > .reveal > .field > .upload-list {
    flex: 1 1 auto; min-height: 192px; overflow-y: auto; padding-bottom: 6px; }
  /* one full row, thumbnail, name, state and Try again, always in view;
     with more the list scrolls and the buttons may sit a little lower in
     the card's own foot */
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body > .reveal > .field > #photo-upload-status,
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body > .reveal > .field > #photo-upload-message {
    flex: none; }
  .form-col > form > .step.is-active[data-label="Photographs"]:has(.upload-list:not(:empty)) > .step__body > .actions:not(.actions--start) {
    position: static !important; flex: none; margin-top: 24px !important; }
}
@media (min-width: 1280px) {
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body > #photo-submit-message[style*="block"] {
    grid-column: 1 / -1; margin: 0; align-self: end; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body > #photo-submit-message[style*="block"] {
    grid-column: 1 / -1; margin: 0; }
  .form-col > form > .step[data-single-page].is-active:has(#email):has(#photo-submit-message[style*="block"]) > .step__body {
    overflow-y: auto !important; padding-top: 6px !important; padding-bottom: 0 !important; align-content: safe center !important; row-gap: 6px !important; }
  .form-col > form > .step[data-single-page].is-active:has(#email):has(#photo-submit-message[style*="block"]) > .step__body > .actions:not(.actions--start) {
    position: static !important; grid-column: 1 / -1; margin: 0 !important; padding-top: 8px !important; }
  /* ... and the consent row closes up to the fields, so the whole card
     still fits the iPad held landscape (it ran 21px over at 1180 x 820). */
  .form-col > form > .step[data-single-page].is-active:has(#email):has(#photo-submit-message[style*="block"]) .field[data-validate="consent"] {
    margin-top: 4px !important; }
}

/* 13 · the final pack of 13 October 2026 (layout only; the signed-off
   sheet is untouched) --------------------------------------------------
   a) The wordmark is a link home on every page. The anchor is laid out
      exactly as the image was (inline-flex, the image's own size), so the
      masthead's geometry is unchanged; it shows the keyboard focus.
   b) The deadline page (QA correction, 13 October: the first form of this
      rule forced the page to display whether or not it was the current
      page, so choosing the deadline option painted the calendar under the
      Timing question and every later page of the step). It now applies
      ONLY to the page the engine has switched on (:not(.is-off)), and the
      page is composed to fit the card at 1440 x 900 with nothing under
      the buttons: the question across the width, then the calendar at the
      left and, at the right, the guidance above the "anything driving the
      timing" box, the box as tall as the calendar so both end together.
      Stacked below 1024px as before. The signed-off sheet pins the box's
      size and margins with six ids, so these rules carry eight. */
.masthead .mark-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* QA correction, 13 October: the anchor let the image's "max-width: 100%"
   resolve against the anchor's own width, which squeezed the wordmark
   narrower than its proportions (188 x 13 at 1440, 78 x 13 on an iPad
   held portrait); the image keeps its intrinsic ratio at every width. */
.masthead .mark-link img.mark-img { max-width: none !important; width: auto !important; flex: 0 0 auto; }
/* c) "Return to Ankersen Drake": the button's 2px top padding (set for
      the form's <button>s) sat the label a pixel low in the anchor;
      centred at every width. */
.terminal .shell .terminal__body .actions--start a.btn { padding-top: 0 !important; }
.masthead .mark-link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

@media (min-width: 1024px) {
  /* Final handover, 13 October (owner QA 29): the third row takes the
     calendar's remaining height (1fr), so the note box starts directly
     under the guidance and still ends where the calendar ends; with three
     auto rows the calendar's spare height was shared with the guidance row,
     which opened the exaggerated gap above the box. */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 40px; align-items: start; align-content: start; flex: none; }
  /* The question runs the card's full width (the signed-off 900px measure
     would break it onto two lines), so the calendar ends well clear of the
     buttons at 1440 x 900. */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .field__label { grid-column: 1 / -1; grid-row: 1; width: auto !important; max-width: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .step__intro {
    grid-column: 2; grid-row: 2; margin: 24px 0 14px !important; min-height: 0 !important; }
  /* The calendar spans the two rows beside it, so the rows together are
     exactly its height and the note box, stretched over the second, ends
     where the calendar ends; nothing runs on beneath the buttons. */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .cal {
    grid-column: 1; grid-row: 2 / span 2; margin-top: 24px !important; align-self: start; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > textarea#deadline_details {
    grid-column: 2; grid-row: 3; align-self: stretch !important; width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 120px !important; max-height: none !important; margin: 0 !important; resize: none; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .field__error { grid-column: 1 / -1; }
}

/* On the iPad held landscape the sticky button band carries 24px of top
   padding, so the calendar sits a little higher there (its top margin 12px,
   the guidance's too), ending 8px clear of the band. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .cal { margin-top: 12px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .step__intro { margin-top: 12px !important; }
}

/* 14 · the photographs the signed-off sheet paints itself (QA correction,
   13 October). From 768px the opening's <img> is hidden by the signed-off
   sheet and the figure shows splash-desktop.jpg as a background; on an
   iPad held landscape the endings do the same with mobile-band-thanks.jpg;
   below 768px the band under the card is mobile-band-form.jpg or
   mobile-band-thanks.jpg. That is why the hosted preview still showed the
   old photographs although index.html named the jars. The sheet may not
   carry a background property, so: (a) the <img> elements are shown again
   wherever the sheet hides them (they already cover their figure), and (b)
   those three files now hold the client's jars and hangers, so the ground
   beneath and the band agree with the <img> and nothing old can show. */
@media (min-width: 768px) {
  .step--intro .step__media img { display: block !important; }
  .terminal__media img { display: block !important; }
}

/* 15 · About You with the professional-organisers question in its third
   row (QA correction, 13 October). "Who recommended us?" now opens in the
   consent row's third cell (section 4), and the step is composed so the
   consent line and that field stay clear of the buttons at 1440 x 900
   and 1180 x 820. */
@media (min-width: 1024px) {
  /* The whole step sits a little tighter at every state (no jump when the
     field opens): the head's 10px top padding and 8px of the title's
     margin go, and the rows close from 16px to 10px. */
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__head { padding-top: 0; }
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__head h2 { margin-bottom: 12px; }
  .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) #referrer-field .field { margin-bottom: 0; }
}
/* On a tablet the grid is two columns, so the organisers question (and an
   open "Who recommended us?") add rows the fixed card cannot hold: About
   You's body scrolls under its buttons, as it already does there while a
   validation message shows (section 10). */
@media (min-width: 768px) and (max-width: 1279px) {
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body {
    overflow-y: auto !important; padding-bottom: 0 !important; align-content: safe center !important; }
  .form-col > form > .step[data-single-page].is-active:has(#email) > .step__body > .actions:not(.actions--start) {
    position: sticky !important; left: auto !important; right: auto !important; bottom: 0 !important;
    grid-column: 1 / -1; margin: 0 !important; padding-top: 16px !important; }
}

/* 16 · the phone's deadline page (QA correction, 13 October): the
   signed-off sheet fixes the calendar at 384px and tucks the note box 11px
   up under it, which laid the box over "Clear dates"; the calendar takes
   its own height and the box follows 14px beneath it. */
@media (max-width: 767px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > .cal { height: auto !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has(.cal):not(.is-off) > textarea#deadline_details { margin-top: 14px !important; }
}

/* 17 · two validation messages in the flow (final handover, 13 October;
   owner QA 29). The signed-off sheet and section 4 put a question step's
   message in the button band, absolutely positioned from the field's
   foot; on "How flexible is this timing?" the field is as tall as its
   two columns, so the message landed over the answer choices. There the
   message sits in the flow, directly under the options and before Back
   and Continue, in the choices' own column. On About You the consent
   message sat in the button band at the bottom left; it now follows the
   acknowledgment sentence directly, in its cell, leaving the other field
   messages where they are (under their own fields). Layout only. */
@media (min-width: 1024px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has([name="flexibility"]):not(.is-off) > .field__error {
    position: static !important; left: auto !important; bottom: auto !important; transform: none !important;
    width: auto !important; max-width: calc(50% - 20px) !important; min-height: 0 !important; margin: 12px 0 0 !important; z-index: auto; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step[data-single-page].is-active .field[data-validate="consent"].has-error .field__error {
    position: static !important; left: auto !important; bottom: auto !important; transform: none !important;
    width: auto !important; max-width: none !important; min-height: 0 !important; margin: 6px 0 0 !important; z-index: auto; }
}
/* On the iPad held landscape the card is shorter and its button band is
   sticky, so the message closes up to the options (no top margin) and still
   ends above the band at 1180 x 820. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h) .step.has-pages.is-active .page:has([name="flexibility"]):not(.is-off) > .field__error { margin-top: 2px !important; }
}

/* 18 · the phone's About You and the two long questions (final responsive
   and photography pass, 14 October 2026, B06; layout only, the signed-off
   sheet still pinned). On a phone held portrait: the Project Investment and
   Anything Else guidance takes the card's full measure; the closed "Who
   recommended us?" block no longer holds a grid row of its own after "Have
   you worked with professional organisers before?" (the gap it opened); and
   the consent line carries no rule above or below it. */
@media (max-width: 767px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page p.step__intro,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) > .step__head p.step__intro,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page > .field__label,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page > fieldset > legend.field__label {
    width: auto !important; max-width: none !important; min-width: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .step__body > .reveal:not(.is-open) { display: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field[data-validate="consent"] {
    margin: 2px 0 0 !important; padding: 0 !important; border-top: 0 !important; border-bottom: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field[data-validate="consent"] + .actions { margin-top: 20px !important; }
}

/* 19 · the content-led tablet card (final responsive and photography pass,
   14 October 2026, C08 and D07; layout only, the signed-off sheet still
   pinned). On an iPad held either way the signed-off composition fixes the
   card to the window (the body one window tall, the card 890px on the
   portrait, the question card stretched to the frame on the landscape, the
   answer boxes at fixed heights, the fields spread or centred and the
   buttons pinned to the card's foot), which left enormous white regions
   above and below short answers and a photograph band too short to read.
   Here the card is as tall as its content: the page scrolls as a whole; the
   question, guidance, answer and the buttons follow each other at the
   card's own spacing; a text answer has a comfortable fixed minimum and
   grows; the photograph takes whatever height is left above the footer,
   never less than about a quarter of the window, on both orientations; the
   opening's copy and Begin button are centred in a shorter card; and the
   two single-page steps (Your Property, About You) keep their grids with
   every cell starting level and a line reserved under each field for its
   message, so a validation message changes nothing but the message.
   Nothing about the questions, their order, optionality, conditions,
   validation or submission changes. A short landscape phone (768 to 1023
   wide, 500 tall or less) keeps section 9. The iPad Pro held landscape is
   1376px wide and takes the desktop composition; where the device has a
   coarse pointer and no hover, the same content-led card applies there
   (the desktop's ink gutters and three-column About You unchanged). */
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 501px), (min-width: 1280px) and (hover: none) and (pointer: coarse) {
  /* the page scrolls; nothing is one window tall */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active) { height: auto !important; min-height: calc(100vh / var(--ad-fit, 1)) !important; overflow: visible !important; }
  html.ad-fit:has(.form-col > form > .step.is-active) { overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active) > .shell { flex: 0 0 auto !important; min-height: 0 !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active) .shell main.form-col,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active) .form-col > form { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; }
  /* the question card at its content's height */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active:not(.step--intro) { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; position: relative !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) > .step__head { flex: none !important; padding-bottom: 18px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) > .step__body,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) > .step__body > .page { flex: 0 0 auto !important; min-height: 0 !important; overflow: visible !important; margin-top: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page .field,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices),
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.choices) > fieldset,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro):not([data-single-page]) .field:has(> textarea),
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro):not([data-single-page]) .field:has(.upload-wrap) { flex: 0 0 auto !important; min-height: 0 !important; }
  /* the buttons follow the answer in the flow */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .actions:not(.actions--start) { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; flex: none !important; margin: 36px auto 0 !important; padding-top: 0 !important; grid-column: 1 / -1; }
  /* guidance and hints at the card's own spacing, no reserved lines */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page p.step__intro { min-height: 0 !important; margin-bottom: 0 !important; margin-top: 0 !important; width: auto !important; max-width: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page span.field__hint--inline { position: static !important; margin: 14px 0 0 !important; }
  /* answer lists: no centring margins or compensating padding */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page div.choices { margin: 18px 0 0 !important; padding-bottom: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page .reveal--inline { margin: 20px 0 0 !important; }
  /* text answers: a comfortable minimum, then their own height */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro):not([data-single-page]) .page textarea:not(#deadline_details):not(#specific_dates_note) { flex: 0 0 auto !important; height: auto !important; min-height: 220px !important; max-height: none !important; margin: 22px 0 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; resize: vertical; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) label.field__label--quiet { position: static !important; margin: 26px 0 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) textarea#specific_dates_note { position: static !important; top: auto !important; right: auto !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 150px !important; max-height: none !important; margin: 12px 0 0 !important; }
  /* the photographs zone at its own height */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page .upload-wrap { flex: 0 0 auto !important; margin: 22px 0 0 !important; min-height: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page .upload-wrap label.upload { flex: 0 0 auto !important; height: auto !important; min-height: 230px !important; max-height: none !important; margin-top: 0 !important; }
  /* the calendar at its own size (section 13 still composes the deadline
     page from 1024px: calendar left, guidance and the box right) */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page div.cal { height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; }
  /* the single-page steps: a grid whose cells start level, with a line
     under each field reserved for its message */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > .step[data-single-page].is-active > .step__body { display: grid !important; align-content: start !important; align-items: start !important; row-gap: 16px !important; padding: 0 !important; margin-top: 0 !important; overflow: visible !important; position: static !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active > .step__body > .field,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active > .step__body > .field-row > .field,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active > .step__body .reveal .field { margin: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .step__body > .reveal:not(.is-open) { display: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field:not([data-validate="consent"]) > p.field__error { display: block !important; position: static !important; min-height: 15px !important; margin: 4px 0 0 !important; font-size: 11px !important; line-height: 15px !important; visibility: hidden; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field.has-error:not([data-validate="consent"]) > p.field__error { visibility: visible; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field textarea { flex: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 120px !important; max-height: none !important; margin: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field[data-validate="consent"] { margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; align-self: start !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field[data-validate="consent"].has-error > p.field__error { position: static !important; margin: 4px 0 0 !important; max-width: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field[data-validate="consent"] + .actions,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .step__body > .actions:not(.actions--start) { margin-top: 28px !important; padding-top: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active > .step__body > #photo-submit-message[style*="block"] { grid-column: 1 / -1; margin: 0 !important; }
}

/* 19a · the iPads alone (768 to 1279): the photograph band beneath the
   card on both orientations, the opening centred in a shorter card, the
   single-page grids' row rhythm, and the landscape header label ending at
   the card's right edge (it ran 2.5px past it at 1180). */
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 501px) {
  /* the band takes the height left above the footer, never less than about
     a quarter of the window; its photograph is the signed-off sheet's own */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active)::after { content: "" !important; display: block !important; order: 1; position: static !important; width: auto !important; flex: 1 1 auto !important; min-height: min(300px, 26vh) !important; margin: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active) .foot { order: 2; margin-top: 0 !important; }
  /* the opening: copy and Begin centred in a card of its own height */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.step--intro.is-active) .form-col section.step--intro { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; flex: 0 0 auto !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro figure.step__media { display: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro div.step__head { margin: 0 !important; padding: 52px 56px 0 !important; text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__head h1.splash__title { width: auto !important; max-width: 440px !important; min-width: 0 !important; margin: 0 auto !important; text-align: center !important; font-size: 34px !important; line-height: 1.2 !important; padding-left: 0.13em !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__head p.splash__tagline { width: auto !important; max-width: 440px !important; min-width: 0 !important; margin: 20px auto 0 !important; text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__head p.lede { width: auto !important; max-width: 400px !important; min-width: 0 !important; margin: 26px auto 0 !important; text-align: center !important; hyphens: manual !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro div.step__body { margin: 0 !important; padding: 26px 56px 48px !important; text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__body .note { width: auto !important; max-width: 400px !important; margin: 0 auto 26px !important; text-align: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__body .actions--start { max-width: none !important; margin: 0 !important; justify-content: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__body .actions--start button.btn { margin: 0 !important; width: auto !important; min-width: 0 !important; height: 44px !important; padding: 2px 46px 0 !important; font-size: 10px !important; }
  /* the card's own surround on the portrait opening (the pinned sheet lifted
     the card 28px and dropped the band 822px) */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.step--intro.is-active) .shell main.form-col { margin: 0 !important; height: auto !important; }
  /* the single-page steps on an iPad: two columns at the signed-off gap */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field[data-validate="consent"],
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .step__body > .reveal.is-open { grid-column: 1 / -1 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .step__body > .reveal.is-open { grid-row: auto !important; align-self: start !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 501px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .masthead .shell span.masthead__util { margin-right: 0 !important; }
  /* the deadline page keeps section 13's composition; its guidance sits in
     the right column at the calendar's top */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.has-pages.is-active .page:has(.cal):not(.is-off) > p.step__intro { margin: 12px 0 14px !important; }
}

/* 20 · the header label ends at the beige sheet's edge (owner QA correction,
   14 October 2026, A9; layout only). On a desktop and on an iPad Pro held
   landscape the beige sheet (body > .shell) stands 48px (--pad-x) wider than
   the card each side; the owner's "right edge of the form container" is the
   sheet's. The ink gutters (the signed-off body::before/::after, 1280px and
   wider) overlap the sheet's padding by 8px, so the VISIBLE beige edge is
   40px beyond the card, not 48 (the gutter is (window - card) / 2 - 40px
   wide); the label ends there, the trailing letter-space still taken off.
   Where the sheet is the whole window (1024 to 1279) the label keeps the
   card's edge (sections 3 and 19a). */
@media (min-width: 1280px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .masthead .shell span.masthead__util { margin-right: calc(-40px - 0.24em) !important; }
}

/* 21 · the iPad Pro 13 held portrait (owner QA correction, 14 October,
   C5; layout only): the opening's heading, copy and Begin take a wider
   measure in the wide white card (they sat in a 400px column), and the
   photograph band beneath the card is taller and steadier across the
   opening and the steps (a floor of 44% of the window, growing only where
   a short card leaves more). The 820 and 768 iPads keep section 19a. */
@media (min-width: 1000px) and (max-width: 1279px) and (orientation: portrait) and (min-height: 501px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__head h1.splash__title { max-width: 680px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__head p.splash__tagline { max-width: 620px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__head p.lede { max-width: 620px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro .step__body .note { max-width: 620px !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active)::after { min-height: clamp(400px, 44vh, 640px) !important; }
}

/* 22 · the iPad Pro 13 held landscape, 1280px and wider with a coarse
   pointer and no hover (owner QA correction, 14 October, D4; layout only).
   Section 19's content-led card applied here but its band (19a) stopped at
   1279px, and the opening was held to a 309px card with its title cut off
   at the top: a short white panel over an empty beige sheet. Now: the
   opening keeps the designed split composition (the photograph at the left,
   the words at the right), unclipped, at a proper height and centred in the
   window; every question step keeps the content-led card and gets the
   photograph band beneath it (figure.band-photo in index.html), which takes
   the height left above the footer and never less than about 30% of the
   window; "Is there anything else we should know about timings?" sits at
   the RIGHT of the flexibility options with its rows level; "Is there
   anything else we should know about the property?" is a full-width row. */
@media (min-width: 1280px) and (hover: none) and (pointer: coarse) {
  /* the opening: window composition, the card unclipped and centred */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > section.step--intro.is-active) { height: auto !important; min-height: calc(100vh / var(--ad-fit, 1)) !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > section.step--intro.is-active) > .shell { flex: 1 1 auto !important; min-height: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > section.step--intro.is-active) .shell main.form-col,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > section.step--intro.is-active) .form-col > form { flex: 1 1 auto !important; min-height: 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form:has(> section.step--intro.is-active) { justify-content: center !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step--intro.is-active { position: relative !important; height: auto !important; min-height: min(640px, 64vh) !important; max-height: none !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step--intro.is-active figure.step__media { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: calc(100% * 7 / 13) !important; height: auto !important; margin: 0 !important; grid-area: auto !important; }
  /* the question steps: the band beneath the card, the footer after it */
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active:not(.step--intro)) > .shell { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i):has(.form-col > form > .step.is-active:not(.step--intro)) figure.band-photo { display: block !important; flex: 1 1 auto !important; min-height: clamp(220px, 30vh, 380px) !important; margin: 28px calc(-1 * var(--pad-x)) 0 !important; position: relative !important; overflow: hidden !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) figure.band-photo img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 35% !important; display: block !important; }
}

/* 22a · the iPads held landscape (1024px and wider, coarse pointer, no
   hover: the iPad Pro 13 at 1376 and the iPad at 1180): the timings note
   at the right of the flexibility options with level rows; the property
   note across the whole row. */
@media (min-width: 1024px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 40px !important; align-items: start !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > fieldset { display: contents !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > fieldset > legend.field__label,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > fieldset > p.step__intro { grid-column: 1 / -1 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > fieldset > span.field__hint--inline { grid-column: 1 !important; grid-row: 3 !important; align-self: end !important; margin: 14px 0 0 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > fieldset > div.choices { grid-column: 1 !important; grid-row: 4 !important; margin: 18px 0 0 !important; width: auto !important; max-width: none !important; justify-self: stretch !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > label.field__label--quiet { grid-column: 2 !important; grid-row: 3 !important; align-self: end !important; margin: 14px 0 0 !important; position: static !important; width: auto !important; max-width: none !important; justify-self: stretch !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > textarea#specific_dates_note { grid-column: 2 !important; grid-row: 4 !important; align-self: stretch !important; margin: 18px 0 0 !important; min-height: 140px !important; height: auto !important; position: static !important; width: auto !important; max-width: none !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step.is-active:not(.step--intro) .page:not(.is-off):has([name="flexibility"]) > p.field__error { grid-column: 1 / -1 !important; grid-row: 5 !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field-row:has(#property_notes) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 23 · the photographs step on every content-led card and the upload
   list's states (final functional correction pass, 14 October 2026;
   layout only, the signed-off sheet still pinned).
   a) Between 768 and 1279px, and on a coarse-pointer device of any width,
      the Photographs step is content-led: the field holds its list in
      the flow, the card grows with it and Back / Continue follow beneath
      (the owner's "tiles beyond the white card" and "only the buttons
      left" were the pinned-card rule of section 12 applied to a card with
      no height of its own).
   b) "Try again" takes the signed-off "Add another" tile's own style
      (its class, set by ad-photos.js) at a text button's height, the
      width of its tile, never the tile's 4:3 box on a phone.
   c) On Your Property the Property Type and Approximate Property Size
      cells stretch to the row and set their controls at the foot, so the
      two inputs sit level whether or not the longer label wraps (it did
      at 820px). */
@media (min-width: 768px) and (max-width: 1279px), (min-width: 1280px) and (hover: none) and (pointer: coarse) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active[data-label="Photographs"] { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active[data-label="Photographs"] > .step__body { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active[data-label="Photographs"] > .step__body > .reveal,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active[data-label="Photographs"] > .step__body > .reveal > .field,
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active[data-label="Photographs"] .upload-wrap { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .form-col > form > section.step.is-active[data-label="Photographs"] > .step__body > .actions:not(.actions--start) { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; flex: none !important; margin: 32px auto 0 !important; padding-top: 0 !important; }
}
.upload-list .upload__retry { display: flex !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 8px 0 0 !important; padding: 8px 0 !important; }
.upload-list li { min-width: 0; }
#photo-upload-message { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field:has(> #property_type),
  html body:not(#_a#_b#_c#_d#_e#_f#_g#_h#_i) .step[data-single-page].is-active .field:has(> #property_size) { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-self: stretch !important; }
}