@layer families {
  .m-quote {
    border-block-start: var(--border-hairline) solid var(--color-brand-muted);
    padding-block: var(--space-8) var(--space-24);
  }

  .m-step {
    min-block-size: 28rem;
  }

  .m-step__heading {
    margin-block-end: var(--space-6);
    max-inline-size: 48rem;
  }

  .m-step__actions {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    margin-block-start: var(--space-6);
  }

  .m-step__heading :is(h1, h2) {
    color: var(--color-brand);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: var(--tracking-landing-display);
    line-height: 1;
    max-inline-size: 16ch;
  }

  .m-results__lead h2 {
    color: var(--color-brand);
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    letter-spacing: var(--tracking-landing-display);
    line-height: 1;
    max-inline-size: 16ch;
  }

  /* Each step moves focus to its heading for announcement; headings are not
     controls, so programmatic focus does not draw a control-style ring. */
  .m-quote :is(h1, h2)[tabindex="-1"]:focus {
    outline: 0 solid var(--color-transparent);
  }

  .m-back,
  .m-restart {
    justify-self: start;
    background: var(--color-canvas);
    border: var(--border-hairline) solid var(--color-transparent);
    color: var(--color-ink);
    margin-block-end: var(--space-8);
    padding: var(--space-2) 0;
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard),
      transform var(--motion-instant) var(--ease-standard);
  }

  .m-back::before {
    content: "←";
    display: inline-block;
    margin-inline-end: var(--space-2);
    transition: transform var(--motion-fast) var(--ease-enter);
  }

  .m-back:hover {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: var(--space-2);
  }

  .m-back:hover::before {
    transform: translateX(calc(var(--motion-distance-xs) * -1));
  }

  .m-choice-list,
  .m-house-grid,
  .m-motive-grid,
  .m-scope-list {
    display: grid;
    gap: var(--space-3);
  }

  .m-choice-list {
    max-inline-size: 54rem;
  }

  .m-choice-list button,
  .m-house-grid button,
  .m-motive-grid button,
  .m-scope-list button,
  .m-room-row > button,
  .m-room-selector > button,
  .m-question-list fieldset button,
  .m-follow button {
    background: var(--color-surface);
    border: var(--border-hairline) solid var(--color-brand-muted);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    min-block-size: 3.5rem;
    padding: var(--space-4);
    text-align: start;
    transition: background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard),
      transform var(--motion-instant) var(--ease-standard);
  }

  .m-choice-list button,
  .m-house-grid button,
  .m-room-row > button,
  .m-scope-list button {
    align-items: start;
    display: grid;
    gap: var(--space-1);
  }

  .m-choice-list button:hover,
  .m-house-grid button:hover,
  .m-motive-grid button:hover,
  .m-scope-list button:hover,
  .m-room-row > button:hover,
  .m-room-selector > button:hover,
  .m-question-list fieldset button:hover,
  .m-follow button:hover {
    background: var(--color-surface-solid);
    border-color: var(--color-brand);
  }

  .m-choice-list button[aria-pressed="true"],
  .m-motive-grid button[aria-pressed="true"],
  .m-scope-list button[aria-pressed="true"],
  .m-room-row > button[aria-pressed="true"],
  .m-room-selector > button[aria-pressed="true"],
  .m-question-list button[aria-pressed="true"],
  .m-follow button[aria-pressed="true"] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-canvas);
  }

  .m-house-grid button[aria-pressed="true"] {
    background: var(--color-surface-solid);
    border-color: var(--color-brand);
    box-shadow: inset 0 0 0 var(--border-hairline) var(--color-brand);
    color: var(--color-ink);
  }

  .m-choice-list button:hover,
  .m-house-grid button:hover,
  .m-motive-grid button:hover,
  .m-scope-list button:hover,
  .m-room-row > button:hover,
  .m-room-selector > button:hover,
  .m-question-list fieldset button:hover,
  .m-follow button:hover {
    transform: translateY(calc(var(--border-hairline) * -2));
  }

  .m-choice-list button:active,
  .m-house-grid button:active,
  .m-motive-grid button:active,
  .m-scope-list button:active,
  .m-room-row > button:active,
  .m-room-selector > button:active,
  .m-question-list fieldset button:active,
  .m-follow button:active,
  .m-stepper button:active {
    transform: translateY(var(--border-hairline));
  }

  .m-choice-list button span,
  .m-house-grid button span,
  .m-room-row button span {
    font-size: 0.9rem;
  }

  .m-house-grid {
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .m-house-grid button {
    grid-template-rows: auto auto 1fr;
    min-block-size: 12rem;
  }

  /* The drawings are painted on paper white. Multiplying them onto a ground
     the same colour as the card dissolves that rectangle, so the house sits
     on the page instead of in a lighter box. The ground is set here, and the
     group isolated, so a pressed (dark green) card cannot bleed through. */
  .m-house-thumb {
    background: var(--color-surface-solid);
    border-radius: calc(var(--radius-card) - var(--border-hairline));
    display: block;
    block-size: clamp(7rem, 11vw, 9.5rem);
    inline-size: 100%;
    isolation: isolate;
    margin-block-end: var(--space-3);
    /* The sprite quarter is square and the stage is wide, so the crop can cut
       through the hedges. Fading the edges lets them dissolve into the card. */
    mask-image:
      linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
      linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect;
    overflow: hidden;
    position: relative;
  }

  .m-house-thumb img {
    block-size: 300%;
    filter: saturate(0.88) contrast(1.02);
    inline-size: auto;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    max-inline-size: none;
    mix-blend-mode: multiply;
    position: absolute;
  }

  .m-house-thumb--semi img {
    clip-path: inset(0 50% 50% 0);
    transform: translate(-25%, -25%);
  }

  .m-house-thumb--terrace img {
    clip-path: inset(0 0 50% 50%);
    transform: translate(-75%, -25%);
  }

  .m-house-thumb--detached img {
    clip-path: inset(50% 50% 0 0);
    transform: translate(-25%, -75%);
  }

  .m-house-thumb--garden-office img {
    clip-path: inset(50% 0 0 50%);
    transform: translate(-75%, -75%);
  }

  .m-follow {
    background: var(--color-surface-solid);
    margin-block-start: var(--space-8);
    max-inline-size: 54rem;
    padding: var(--space-6);
  }

  .m-follow fieldset,
  .m-room-selector,
  .m-question-list fieldset {
    border-width: var(--public-border-none);
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .m-follow fieldset {
    display: grid;
    gap: var(--space-4);
  }

  .m-follow legend {
    font-family: var(--font-display);
    font-size: var(--text-landing-feature);
    letter-spacing: var(--tracking-display);
    line-height: 1.15;
    padding: 0;
  }

  .m-follow fieldset > div,
  .m-question-list fieldset > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .m-room-layout {
    align-items: start;
    display: grid;
    gap: var(--layout-gap);
    grid-template-columns: minmax(18rem, 20rem) minmax(20rem, 1fr);
  }

  /* A garden office has one selectable room, so the controls stay compact. */
  .m-room-layout[data-rooms-single] {
    grid-template-columns: minmax(18rem, 0.85fr) minmax(16rem, 0.65fr);
  }

  .m-house-media {
    display: grid;
    margin: 0;
    padding: 0;
  }

  /* Same trick as the thumbnails: the cutaway's white paper multiplies away
     against the page, leaving the drawing with no visible edge. */
  .m-house-picture {
    aspect-ratio: 1;
    background: var(--color-canvas);
    isolation: isolate;
    overflow: hidden;
    position: relative;
  }

  .m-house-picture img {
    block-size: 100%;
    inline-size: 100%;
    mix-blend-mode: multiply;
    object-fit: contain;
  }

  .m-room-lights {
    block-size: 100%;
    inline-size: auto;
    inset-block: 0;
    inset-inline-start: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
  }

  .m-room-light {
    fill: var(--color-room-glow, var(--color-canvas));
    filter: drop-shadow(0 0 0.6rem var(--color-room-glow, var(--color-canvas)));
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.92);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity var(--public-card-reveal-duration) var(--public-card-reveal-easing),
      transform var(--public-card-reveal-duration) var(--public-card-reveal-easing);
  }

  .m-room-light.is-on {
    opacity: 0.52;
    transform: scale(1);
  }

  /* Loft warmth follows the roof instead of reading as another filled room. */
  .m-room-light--loft {
    fill: rgb(237 182 84 / 14%);
    filter: drop-shadow(0 0 0.24rem rgb(237 182 84 / 72%));
    mix-blend-mode: multiply;
    stroke: #bd7825;
    stroke-linejoin: round;
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
  }

  .m-room-light--loft.is-on {
    opacity: 0.9;
  }

  .m-house-media figcaption {
    color: var(--color-label);
    font-size: 0.9rem;
    padding: var(--space-3) 0 0;
  }

  .m-house-media[data-image-failed="true"] img {
    min-block-size: 8rem;
    mix-blend-mode: normal;
  }

  .m-house-media[data-image-failed="true"] .m-room-lights {
    display: none;
  }

  .m-room-selector,
  .m-room-selector > div {
    display: grid;
    gap: var(--space-2);
  }

  @media (min-width: 52.001rem) {
    .m-room-selector,
    .m-room-selector > div {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-room-selector > div {
      display: contents;
    }
  }

  .m-room-selector > button {
    display: grid;
    gap: var(--space-1);
  }

  .m-step[data-step="1"] .m-room-row > button,
  .m-step[data-step="1"] .m-room-selector > button {
    min-block-size: 3rem;
    padding: var(--space-3);
  }

  .m-room-row {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr;
    inline-size: 100%;
    justify-self: stretch;
    min-inline-size: 0;
  }

  .m-room-row:has(.m-stepper) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .m-room-row:has(> button:focus-visible) {
    border-radius: var(--radius-card);
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }

  .m-room-row > button:focus-visible {
    outline: 0 solid var(--color-transparent);
  }

  .m-stepper {
    align-items: stretch;
    border: var(--border-hairline) solid var(--color-ink);
    border-radius: var(--radius-card);
    display: grid;
    grid-template-columns: 2.75rem 2.75rem 2.75rem;
    overflow: hidden;
  }

  .m-stepper button,
  .m-stepper output {
    align-items: center;
    background: var(--color-surface-solid);
    border: var(--public-border-none);
    color: var(--color-ink);
    display: flex;
    font: inherit;
    justify-content: center;
    transition: background-color var(--public-card-reveal-duration) var(--public-card-reveal-easing),
      color var(--public-card-reveal-duration) var(--public-card-reveal-easing);
  }

  .m-stepper > :not(:first-child) {
    border-inline-start: var(--border-hairline) solid var(--color-ink);
  }

  .m-stepper button:not(:disabled):hover {
    background: var(--color-brand);
    color: var(--color-canvas);
  }

  .m-stepper button:disabled {
    background: var(--color-transparent);
  }

  [data-room-tally] {
    margin-block: var(--space-4);
  }

  .m-motive-grid {
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-end: var(--space-8);
    max-inline-size: 54rem;
  }

  .m-motive-grid button {
    min-block-size: 7rem;
  }

  .m-results {
    display: grid;
    gap: var(--space-12);
  }

  .m-results__hero > .m-back {
    grid-area: back;
    margin-block-end: 0;
  }

  .m-results__lead {
    max-inline-size: 58rem;
  }

  .m-results__lead > p:last-child {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    max-inline-size: 50rem;
  }

  .m-results__hero {
    align-items: start;
    display: grid;
    gap: var(--space-6) var(--layout-gap);
    grid-template-areas:
      "back back"
      "lead visual"
      "plan visual";
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.85fr);
  }

  .m-results__lead { grid-area: lead; }

  .m-result-visual {
    grid-area: visual;
    justify-self: end;
    margin: 0;
    max-inline-size: 34rem;
    padding: 0;
  }

  .m-plan-summary {
    border-block-start: var(--border-hairline) solid var(--color-ink);
    grid-area: plan;
    max-inline-size: 42rem;
    padding-block-start: var(--space-4);
  }

  .m-plan-summary h3 {
    font-size: 1.15rem;
    margin-block-end: var(--space-1);
  }

  .m-plan-summary p {
    color: var(--color-label);
    margin: 0;
  }

  /* The reason before the number: what the work gives you, read before the
     guide price rather than after it. */
  .m-value-band {
    align-items: start;
    border-block-start: var(--border-hairline) solid var(--color-ink);
    display: grid;
    gap: var(--layout-gap);
    grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1fr);
    padding-block-start: var(--space-8);
  }

  .m-value-band h3 {
    color: var(--color-brand);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.05;
  }

  .m-value-band > .u-stack > p {
    color: var(--color-label);
  }

  .m-value-list {
    display: grid;
    gap: var(--space-5) var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .m-value-list li {
    display: grid;
    gap: var(--space-2);
  }

  .m-value-list strong {
    font-family: var(--font-label);
  }

  .m-value-list span {
    color: var(--color-label);
    font-size: 0.95rem;
  }

  .m-price {
    background: var(--color-brand);
    color: var(--color-canvas);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-10);
  }

  .m-price h3 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    line-height: 0.95;
  }

  .m-price p {
    max-inline-size: 52rem;
  }

  .m-price__label {
    font-family: var(--font-label);
    font-weight: var(--font-weight-bold);
  }

  .m-price__note {
    color: var(--color-canvas);
    font-family: var(--font-label);
    font-size: var(--text-label);
  }

  .m-result-block {
    align-items: start;
    border-block-start: var(--border-hairline) solid var(--color-ink);
    display: grid;
    gap: var(--layout-gap);
    grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1fr);
    padding-block-start: var(--space-8);
  }

  .m-scope-list button {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .m-question-list {
    display: grid;
    gap: var(--space-6);
  }

  .m-question-list fieldset {
    display: grid;
    gap: var(--space-3);
  }

  .m-question-list legend {
    font-family: var(--font-label);
    font-size: var(--text-body);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-body);
    padding: 0;
  }

  .m-question-list fieldset button {
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
  }

  .m-area-field {
    grid-column: 2;
    margin-block-start: var(--space-8);
    max-inline-size: 18rem;
  }

  .m-area-field label span {
    color: var(--color-label);
    font-weight: var(--font-weight-regular);
  }

  .m-list form {
    display: grid;
    gap: var(--space-4);
    max-inline-size: 38rem;
  }

  .m-terminal {
    background: var(--color-surface-solid);
    border-inline-start: var(--space-1) solid var(--color-brand);
    display: grid;
    gap: var(--space-4);
    grid-column: 2;
    padding: var(--space-6);
  }

  .m-terminal h4 {
    font-size: 1.5rem;
  }

  .m-restart {
    grid-column: 2;
    justify-self: start;
    margin: 0;
  }

  @media (max-width: 52rem) {
    .p-quote .c-site-header,
    .p-quote .c-site-header__inner {
      block-size: 72px;
    }

    .p-quote .c-site-header__logo,
    .p-quote .c-site-header__logo img {
      inline-size: 150px;
    }

    .p-quote .c-site-header__logo img {
      block-size: auto;
    }

    .p-quote .c-site-footer__calculator {
      display: none;
    }

    .m-house-grid,
    .m-motive-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-room-layout,
    .m-room-layout[data-rooms-single],
    .m-result-block,
    .m-value-band {
      grid-template-columns: 1fr;
    }

    .m-results__hero {
      grid-template-areas:
        "back"
        "lead"
        "visual"
        "plan";
      grid-template-columns: 1fr;
    }

    .m-result-visual {
      justify-self: stretch;
      max-inline-size: none;
    }

    .m-house-media {
      /* Keep the room cutaway large enough to read without stretching the
         drawing into a full-width band above the controls. */
      inline-size: clamp(11rem, 44vw, 24rem);
      justify-self: center;
    }

    .m-house-media:not([data-image-failed="true"]) .m-house-picture img {
      transform: scale(1.1);
    }

    .m-house-media:not([data-image-failed="true"]) .m-room-lights {
      transform: translateX(-50%) scale(1.1);
    }

    .m-area-field,
    .m-terminal,
    .m-restart {
      grid-column: 1;
    }

    .m-step__actions {
      inline-size: 100%;
      justify-items: stretch;
      padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    }

    .m-step__actions .c-button {
      inline-size: 100%;
      min-block-size: 52px;
    }

    .m-step__actions [data-room-tally] {
      margin: 0;
    }
  }

  @media (min-width: 40.001rem) and (max-width: 52rem) {
    .m-room-layout,
    .m-room-layout[data-rooms-single] {
      gap: var(--space-4);
      grid-template-columns: minmax(15rem, 0.8fr) minmax(20rem, 1.2fr);
    }

    .m-house-media {
      inline-size: 100%;
      justify-self: start;
    }

    .m-room-selector,
    .m-room-selector > div {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-room-selector > div {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 34rem) {
    .m-quote {
      padding-block-start: var(--space-6);
    }

    .m-house-grid,
    .m-motive-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-house-grid button {
      min-block-size: 7.5rem;
      padding: var(--space-2);
    }

    .m-house-grid button > span:last-child {
      display: none;
    }

    .m-house-thumb {
      block-size: 4.5rem;
      margin-block-end: var(--space-1);
    }

    .m-motive-grid button {
      min-block-size: 4rem;
      padding: var(--space-3);
    }

    .m-motive-grid {
      margin-block-end: 0;
    }

    .m-step__heading :is(h1, h2),
    .m-results__lead h2 {
      font-size: 2.5rem;
    }

    .m-step[data-step="2"] .m-step__heading h2 {
      font-size: 2.25rem;
    }

    .m-step__heading {
      margin-block-end: var(--space-4);
    }

    .m-back,
    .m-restart {
      margin-block-end: var(--space-4);
    }

    .m-step[data-step="1"] .m-back,
    .m-step[data-step="1"] .m-step__heading {
      margin-block-end: var(--space-3);
    }

    .m-house-media .m-house-picture {
      inline-size: 100%;
    }

    .m-step[data-step="1"] .m-room-layout {
      gap: var(--space-2);
    }

    .m-step[data-step="1"] .m-step__actions {
      margin-block-start: var(--space-3);
    }

    .m-house-media figcaption {
      display: none;
    }

    .m-step[data-step="1"] .m-house-media {
      inline-size: 100%;
    }

    .m-step[data-step="1"] .m-house-picture {
      aspect-ratio: auto;
      block-size: 4.5rem;
      inline-size: 100%;
    }

    .m-result-visual .m-house-picture {
      block-size: 11rem;
    }

    .m-room-selector {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .m-room-selector > div {
      display: contents;
    }

    .m-step[data-step="1"] .m-step__heading > p:last-child,
    .m-room-row > button span,
    .m-room-selector > button span {
      display: none;
    }

    .m-room-row {
      grid-template-columns: minmax(0, 1fr) auto;
      position: static;
    }

    .m-room-row:has(.m-stepper) {
      grid-column: 1 / -1;
    }

    .m-stepper {
      grid-template-columns: repeat(3, 2.25rem);
      position: static;
    }

    .m-price {
      margin-inline: calc(var(--layout-gutter) * -1);
      padding: var(--space-8) var(--layout-gutter);
    }

    .m-scope-list button {
      grid-template-columns: 1fr;
    }

    .m-value-list {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .m-quote *,
    .m-quote *::before,
    .m-quote *::after {
      scroll-behavior: auto;
      transition-duration: 0.001ms !important;
    }
  }
}