/* ==========================================================================
   sections.css: the 10 folds of the landing page (the footer is in layout.css)
   Layer: sections. The whole file is one @layer block; do not split it.

   Index (page order; each fold starts with a banner, find them with: grep -n "===== FOLD" sections.css)
     FOLD  NAME              id          block class   background
     01    HERO              #top        .hero         ink-900 + video (estimate card, trust strip)
     02    RESULTS           #results    .results      dark (before/after, time-lapses)
     03    SERVICES          #services   .services     paper + ridge
     04    WHY US            #why-us     .why          sand-100 (reasons, stats, CTA card)
     05    INSURANCE         #insurance  .insurance    dark + ridge (claim steps)
     06    REVIEWS           #reviews    .reviews      paper + ridge (rating, carousel)
     07    OUR WORK          #work       .work         sand-100 (gallery, lightbox)
     08    FAQ               #faq        .faq          paper (accordion)
     09    URGENCY + AREAS   #areas      .urgency      ember gradient (urgency band, .areas chips)
     10    CONTACT           #contact    .contact      dark + ridge (intro, form card)
     Footer: styles live in layout.css.

   Where things sit
   - Each fold keeps its own rules and its own @keyframes (fold 01 holds the hero keyframes,
     fold 05 and fold 09 hold theirs inside their media query).
   - Rules for a fold's selectors live in that fold, even when they were once in a separate block:
     the mobile compare badges and results footer are in 02, the why CTA card rules are in 04.
   - One rule styles two folds: `.services, .reviews { overflow-x: clip }` sits at the end of 06.

   Conventions used in every fold
   - Mobile first. Breakpoints: phones up to 39.9375rem (640px); stacked layout below 64rem (1024px),
     two-column layout from 64rem.
   - Dark folds use the semantic variables from .section--dark, so components adapt.
   - Hover effects only inside @media (hover: hover); motion only inside
     @media (prefers-reduced-motion: no-preference). Reduced motion keeps every
     element at its final, readable state.
   - Cascade: later rules win at equal specificity, so keep the folds in page order.
   ========================================================================== */

@layer sections {
  /* ===== FOLD 01 · HERO · #top · .hero · ink-900 + video ===== */

  /* Phones and tablets (< 64rem): the text block starts at about 42% of the first
     viewport, so the house in the video stays visible. The rating row sits right under the buttons.
     Desktop (>= 64rem): two columns, glass card, trust strip pinned to the bottom. */

  .hero {
    --color-bg: var(--ink-900);
    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);
    --color-heading: var(--white);
    --color-border: var(--dark-border);
    --color-border-strong: rgb(255 255 255 / 0.22);
    --color-surface: var(--dark-surface);
    --color-accent: var(--amber-300);
    --color-focus: var(--color-focus-on-dark);
    --error-text: var(--danger-300);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100svh;
    overflow: clip;
    background: var(--ink-900);
    color: var(--dark-text);
    --hero-gap: 2.5rem;
  }

  /* One grain layer for the whole hero (above the media and scrims, below the copy and the strip). */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: var(--grain-dark);
    background-size: var(--grain-size);
    background-repeat: repeat;
  }

  .hero__media {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 100vh;
    block-size: 100svh;
    overflow: hidden;
    z-index: 0;
    background: var(--ink-900);
  }

  .hero__media picture,
  .hero__poster,
  .hero__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }

  .hero__video {
    opacity: 0;
    transition: opacity 900ms var(--ease-out);
  }

  .hero__video.is-playing {
    opacity: 1;
  }

  /* Scrim: dark where the copy sits (from ~42% down), clear above so the house stays visible. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
      linear-gradient(
        0deg,
        var(--ink-900) 0%,
        rgb(12 24 40 / 0.95) 14%,
        rgb(12 24 40 / 0.8) 40%,
        rgb(12 24 40 / 0.6) 50%,
        rgb(12 24 40 / 0.5) 60%,
        rgb(12 24 40 / 0.25) 70%,
        rgb(12 24 40 / 0.06) 80%,
        transparent 88%
      ),
      linear-gradient(
        180deg,
        rgb(7 15 28 / 0.72) 0,
        rgb(7 15 28 / 0.6) calc(var(--header-h) * 0.9),
        transparent calc(var(--header-h) * 2.4)
      );
  }

  /* Phones and tablets: the text column and the card form one flex column.
     Content starts at 42% of the first viewport; the rating row and the card follow the buttons. */
  .hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding-block: calc(var(--header-h) + 1rem) 1.75rem;
  }

  .hero__content {
    display: contents;
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.55rem;
    margin: 0 0 1.1rem;
    padding: 0.5rem 0.95rem 0.5rem 0.8rem;
    border: 1px solid rgb(255 255 255 / 0.24);
    border-radius: var(--r-pill);
    background: rgb(7 15 28 / 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    color: var(--white);
    font-size: var(--fs-eyebrow);
    font-weight: 650;
    letter-spacing: var(--tracking-eyebrow);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Very narrow phones (320px): keep the pill on one line. */
  @media (max-width: 22.4375rem) {
    .hero__eyebrow {
      gap: 0.4rem;
      padding: 0.45rem 0.7rem 0.45rem 0.6rem;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
    }
  }

  .hero__eyebrow-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--amber-400);
    box-shadow: 0 0 0 4px rgb(245 181 68 / 0.25);
  }

  .hero__title {
    margin: 0 0 0.8rem;
    color: var(--white);
    font-size: var(--fs-display);
    font-weight: var(--fw-black);
    font-stretch: var(--stretch-display);
    letter-spacing: var(--tracking-display);
    line-height: 1;
    text-shadow: 0 2px 28px rgb(7 15 28 / 0.35);
    text-wrap: balance;
  }

  .hero__title .accent {
    color: var(--amber-300);
  }

  .hero__lead {
    max-inline-size: 34em;
    margin: 0;
    color: var(--dark-text);
    font-size: 1rem;
    line-height: 1.5;
    text-shadow: 0 1px 14px var(--scrim-ink-50);
    text-wrap: pretty;
  }

  @media (max-width: 39.9375rem) {
    .hero__lead {
      text-wrap: balance;
    }
  }

  .hero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-start: 1.1rem;
  }

  .hero__actions > .btn {
    inline-size: 100%;
    min-block-size: 3.375rem;
  }

  /* Short phones (320x640 and similar): trim the heading and buttons so the block fits the first viewport. */
  @media (max-width: 63.9375rem) and (max-height: 43.75rem) {
    .hero__title {
      font-size: 2.2rem;
    }

    .hero__actions > .btn {
      min-block-size: 3.125rem;
    }
  }

  .hero__cta-work {
    display: none;
  }

  /* Rating row: stars + "4.8 Stars • 75 Google Reviews", directly under the buttons on every screen size. */
  .hero__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--dark-text);
    font-size: var(--fs-sm);
    font-weight: 550;
    line-height: 1.3;
  }

  /* ---- Estimate card ----
     Compact by design: at 1440x900 the whole card and the trust strip fit in one view. */
  .estimate-card {
    position: relative;
    z-index: 2;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    background: var(--ink-800);
    color: var(--dark-text);
  }

  /* Below the desktop breakpoint the card is not shown in the first fold. Every estimate link goes to the
     contact form in the last fold instead (forms.js routes them). */
  @media (max-width: 63.9375rem) {
    .estimate-card {
      display: none;
    }
  }

  .estimate-card__head {
    display: grid;
    justify-items: start;
    gap: 0.4rem;
    margin-block-end: 0.9rem;
  }

  .estimate-card__title {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h3);
    font-weight: 740;
    font-stretch: 96%;
    letter-spacing: -0.012em;
    line-height: 1.2;
  }

  .estimate-card__sub {
    margin: 0;
    color: var(--dark-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.4;
  }

  .estimate-card .field__required {
    color: var(--danger-300);
  }

  /* Form: one column; name and phone sit side by side once the card is >= 400px wide. */
  .estimate-card .lead-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.75rem;
  }

  .estimate-card .lead-form > * {
    grid-column: 1 / -1;
  }

  .estimate-card .field:has(> #hero-name),
  .estimate-card .field:has(> #hero-phone) {
    grid-column: auto;
  }

  .estimate-card .field {
    gap: 0.3rem;
  }

  .estimate-card .field__label {
    color: var(--white);
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .estimate-card .field__control {
    min-block-size: 2.875rem;
    padding: 0.55rem 0.85rem;
  }

  .estimate-card textarea.field__control {
    block-size: 4.75rem;
    min-block-size: 4.75rem;
    resize: none;
  }

  .estimate-card .field--check .check {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .estimate-card .lead-form > .btn {
    min-block-size: 3.25rem;
  }

  .estimate-card__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--dark-text);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
  }

  .estimate-card__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-inline-size: 0;
    white-space: nowrap;
  }

  .estimate-card__trust .icon {
    flex: none;
    color: var(--amber-400);
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }

  /* Fallback line under the form: a phone link for visitors who would rather talk. */
  .estimate-card__alt {
    margin: 0.75rem 0 0;
    color: var(--dark-text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
  }

  .estimate-card__alt .link {
    color: var(--amber-300);
    font-weight: 700;
  }

  /* Trust strip: 2 x 2 grid on phones and tablets, 4 equal columns on desktop. */
  .trust-strip {
    position: relative;
    z-index: 2;
    margin-block: 0.75rem var(--hero-gap);
    padding-inline: var(--container-pad);
  }

  .trust-strip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--r-lg);
    background: var(--white-a07);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }

  .trust-strip__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-inline-size: 0;
    padding: 1rem 1.1rem;
  }

  .trust-strip__item:nth-child(n + 2) {
    border-inline-start: 1px solid var(--white-a12);
  }

  .trust-strip__item:nth-child(n + 3) {
    border-block-start: 1px solid var(--white-a12);
  }

  .trust-strip__item > .icon {
    flex: none;
    color: var(--amber-400);
    inline-size: 1.4rem;
    block-size: 1.4rem;
  }

  .trust-strip__text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .trust-strip__value {
    color: var(--white);
    font-size: 1.0625rem;
    font-weight: 740;
    font-stretch: 94%;
  }

  .trust-strip__label {
    color: var(--dark-text-muted);
    font-size: var(--fs-xs);
    font-weight: 550;
  }

  /* Very narrow phones (320px): the four cells must fit without a word breaking ("Licensed"). */
  @media (max-width: 22.4375rem) {
    .trust-strip__item {
      gap: 0.45rem;
      padding: 0.85rem 0.6rem;
    }

    .trust-strip__value {
      font-size: 0.9375rem;
    }
  }

  /* ---- Tablet (48rem to 63.9rem): same stacking as phones, card centred and capped ---- */
  @media (min-width: 48rem) {
    .hero__lead {
      font-size: var(--fs-lead);
    }

    .hero__actions {
      flex-direction: row;
    }

    .hero__actions > .btn {
      inline-size: auto;
    }

    .trust-strip__item {
      padding: 1.1rem 1.25rem;
    }
  }

  /* ---- Desktop (>= 64rem): two columns, glass card, trust strip absolute at the bottom ---- */
  @media (min-width: 64rem) {
    /* Tall viewports (portrait tablets, tall monitors): the hero stops at 62rem so the next section peeks in
       instead of the two columns floating in a very tall screen. Normal laptops and monitors keep 100svh. */
    .hero {
      --hero-gap: clamp(2.5rem, 5vh, 4rem);
      --hero-solid: calc(var(--hero-gap) + 2.1rem);
      min-block-size: clamp(47.5rem, 100vh, 62rem);
      min-block-size: clamp(47.5rem, 100svh, 62rem);
    }

    /* Solid ink from the middle of the trust strip down to the end of the hero, fading up into the video.
       Below the scrim in paint order, under the grain (::after). */
    .hero::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: 1;
      pointer-events: none;
      block-size: calc(var(--hero-solid) + 16rem);
      background: linear-gradient(
        0deg,
        var(--ink-900) 0,
        var(--ink-900) var(--hero-solid),
        rgb(12 24 40 / 0.86) calc(var(--hero-solid) + 3rem),
        rgb(12 24 40 / 0.45) calc(var(--hero-solid) + 9rem),
        transparent 100%
      );
    }

    .hero__media {
      inset: 0;
      block-size: auto;
    }

    .hero__scrim {
      background-image:
        linear-gradient(
          90deg,
          var(--scrim-ink-88) 0%,
          rgb(7 15 28 / 0.74) 30%,
          rgb(7 15 28 / 0.58) 46%,
          rgb(7 15 28 / 0.28) 58%,
          transparent 70%
        ),
        linear-gradient(
          180deg,
          rgb(7 15 28 / 0.8) 0,
          rgb(7 15 28 / 0.68) calc(var(--header-h) * 0.9),
          transparent calc(var(--header-h) * 2.6)
        );
    }

    /* The grid takes the free height of the hero. Its top padding reserves the fixed header, the bottom padding
       matches the top gap, and align-items centres the taller column in the space between header and trust strip. */
    .hero__inner {
      display: grid;
      flex: 1 0 auto;
      min-block-size: 0;
      grid-template-columns: minmax(0, 1fr) 27.5rem;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: center;
      padding-block: calc(var(--header-h) + clamp(1.5rem, 3vh, 3rem)) var(--hero-gap);
    }

    .hero__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-inline-size: 40rem;
    }

    .hero__eyebrow {
      margin-block-end: 1.75rem;
    }

    .hero__title {
      margin-block-end: 1.25rem;
    }

    .hero__actions {
      margin-block-start: 2.25rem;
    }

    .hero__cta-estimate {
      display: none;
    }

    .hero__cta-work {
      display: inline-flex;
    }

    .hero__rating {
      margin-block-start: 1.75rem;
    }

    .estimate-card {
      border-color: rgb(255 255 255 / 0.16);
      background: rgb(10 20 35 / 0.78);
      -webkit-backdrop-filter: blur(22px) saturate(1.4);
      backdrop-filter: blur(22px) saturate(1.4);
      box-shadow:
        var(--shadow-xl),
        inset 0 1px 0 rgb(255 255 255 / 0.18);
    }

    /* Desktop: the strip sits in the flow at the bottom of the hero, under the centred columns.
       The bottom padding is the clear space between the strip and the start of the next fold. */
    .trust-strip {
      margin: 0;
      padding: 0 var(--container-pad) var(--hero-gap);
    }

    .trust-strip__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      max-inline-size: calc(var(--container-max) - 2 * var(--container-pad));
      margin-inline: auto;
    }

    .trust-strip__item:nth-child(n + 3) {
      border-block-start: 0;
    }

    .trust-strip__item {
      padding: 0.9rem 1.25rem;
    }
  }

  /* Short laptop screens (MacBook Air 1280x715, 1366x768): tighten the hero so the trust strip stays in the first view. */
  @media (min-width: 64rem) and (max-height: 50rem) {
    .hero {
      --hero-gap: 1.25rem;
      min-block-size: 100vh;
      min-block-size: 100svh;
    }
    .hero__inner {
      padding-block: calc(var(--header-h) + 0.25rem) var(--hero-gap);
    }
    .estimate-card {
      padding: 1rem 1.25rem;
    }
    .estimate-card__head {
      margin-block-end: 0.5rem;
      gap: 0.25rem;
    }
    .estimate-card .lead-form {
      gap: 0.4rem;
    }
    .estimate-card .field {
      gap: 0.15rem;
    }
    .estimate-card .field__control {
      min-block-size: 2.5rem;
      padding-block: 0.4rem;
    }
    .estimate-card textarea.field__control {
      block-size: 2.75rem;
      min-block-size: 2.75rem;
    }
    .estimate-card .lead-form > .btn {
      min-block-size: 3rem;
    }
    .estimate-card__trust {
      margin-block-start: 0.5rem;
    }
    .estimate-card__alt {
      margin-block-start: 0.4rem;
    }
    .trust-strip__item {
      padding-block: 0.7rem;
    }
  }

  /* ---- Hero entrance (runs once; not under reduced motion) ---- */
  @media (prefers-reduced-motion: no-preference) {
    .hero__media picture,
    .hero__video {
      animation: hero-scale-in 2400ms var(--ease-out) backwards;
    }

    .hero__eyebrow {
      animation: hero-rise 700ms var(--ease-out) 120ms backwards;
    }

    .hero__title {
      animation: hero-title-in 900ms var(--ease-out) 200ms backwards;
    }

    .hero__lead {
      animation: hero-rise 700ms var(--ease-out) 320ms backwards;
    }

    .hero__actions {
      animation: hero-rise 700ms var(--ease-out) 420ms backwards;
    }

    .hero__rating {
      animation: hero-rise 700ms var(--ease-out) 520ms backwards;
    }

    .estimate-card {
      animation: hero-card-in 900ms var(--ease-out) 380ms backwards;
    }

    .trust-strip {
      animation: hero-rise 700ms var(--ease-out) 760ms backwards;
    }

    /* Scroll-linked exit (desktop only, where the content column is a real box). */
    @supports (animation-timeline: view()) {
      @media (min-width: 64rem) {
        .hero__media {
          animation: hero-media-exit linear both;
          animation-timeline: view();
          animation-range: exit 0% exit 100%;
        }

        .hero__content {
          animation: hero-content-exit linear both;
          animation-timeline: view();
          animation-range: exit 0% exit 100%;
        }
      }
    }
  }

  /* Keyframes for the hero choreography. */
  @keyframes hero-scale-in {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

  @keyframes hero-rise {
    from {
      /* 0.01, not 0: Chromium does not count fully transparent text as an LCP candidate */
      opacity: 0.01;
      translate: 0 1.5rem;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  /* Title: rises and wipes in from the bottom edge, padding keeps descenders unclipped. */
  @keyframes hero-title-in {
    from {
      /* 0.01, not 0: Chromium does not count fully transparent text as an LCP candidate */
      opacity: 0.01;
      translate: 0 1.5rem;
      clip-path: inset(100% -1rem 0 -1rem);
    }

    to {
      opacity: 1;
      translate: 0 0;
      clip-path: inset(-0.2em -1rem -0.3em -1rem);
    }
  }

  @keyframes hero-card-in {
    from {
      opacity: 0;
      translate: 2rem 0;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes hero-media-exit {
    to {
      scale: 1.06;
    }
  }

  @keyframes hero-content-exit {
    to {
      translate: 0 -40px;
      opacity: 0.4;
    }
  }

  /* ===== FOLD 02 · RESULTS · #results · .results · dark ===== */

  /* Four portrait tiles (2 across on phones, 4 across on desktop). The compare
     figure uses --pos (set by compare.js) for the divider and the clipped "after". */

  /* The results fold follows the hero on the same dark ground, so its top padding is smaller than a normal fold. */
  .results {
    padding-block-start: clamp(3rem, 2rem + 4vw, 5rem);
    overflow-x: clip;
  }

  .results__glow {
    position: absolute;
    inset-block-start: -12%;
    inset-inline-end: -14%;
    inline-size: min(64rem, 120vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(245 181 68 / 0.4), rgb(232 102 44 / 0.12) 55%, transparent 100%);
    filter: blur(24px);
    opacity: 0.4;
    pointer-events: none;
  }

  .results > .container {
    position: relative;
    z-index: 1;
  }

  .results__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .results__grid > li {
    min-inline-size: 0;
  }

  .compare,
  .timelapse {
    position: relative;
    inline-size: 100%;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    background: var(--ink-800);
  }

  .compare__media {
    position: absolute;
    inset: 0;
  }

  .compare__img {
    position: absolute;
    inset: 0;
    margin: 0;
  }

  .compare__img--after {
    clip-path: inset(0 0 0 var(--pos, 50%));
  }

  .compare__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .compare__badge {
    position: absolute;
    inset-block-start: 0.6rem;
    z-index: 2;
    pointer-events: none;
  }

  .compare__badge--before {
    inset-inline-start: 0.6rem;
  }

  .compare__badge--after {
    inset-inline-end: 0.6rem;
  }

  .compare__divider {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--pos, 50%);
    z-index: 2;
    inline-size: 2px;
    translate: -50% 0;
    /* The line fades out above the caption zone so it never runs through the caption text. */
    background: linear-gradient(180deg, var(--white) calc(100% - 6.5rem), transparent calc(100% - 3.75rem));
    filter: drop-shadow(0 0 6px var(--scrim-ink-50));
    pointer-events: none;
  }

  .compare__handle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-900);
    box-shadow: var(--shadow-lg);
    translate: -50% -50%;
  }

  .compare__handle .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  /* The range covers the whole figure: it is the accessible control and the drag target.
     It is invisible; the figure shows the focus ring instead. */
  .compare__range {
    position: absolute;
    inset: 0;
    z-index: 3;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    touch-action: pan-y;
  }

  .compare:has(.compare__range:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .compare__caption,
  .timelapse__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 4;
    margin: 0;
    padding: 2.5rem 0.9rem 0.8rem;
    background: linear-gradient(0deg, var(--scrim-ink-88) 0, var(--scrim-ink-88) 50%, transparent 100%);
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: 1.3;
    pointer-events: none;
  }

  /* The time-lapse video stays hidden until it plays; the poster sits behind it as the background.
     lazy-video.js sets --poster when the video nears the viewport, so the poster is not fetched on page load. */
  .timelapse {
    background: var(--ink-800) var(--poster, none) center / cover no-repeat;
  }

  .timelapse__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
  }

  .timelapse__video.is-playing {
    opacity: 1;
  }

  .timelapse__badge {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
  }

  .timelapse__rec {
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    border-radius: 50%;
    background: var(--red-500);
    box-shadow: 0 0 0 3px rgb(237 28 36 / 0.3);
  }

  .results__footer {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    margin-block-start: clamp(2rem, 4vw, 3rem);
    text-align: center;
  }

  /* The reveal wrapper of the Results CTA keeps the button's size: full column width on phones (as before),
     content width from 40rem (as before, where the button itself was the grid item). */
  .results__cta {
    inline-size: 100%;
  }

  .results__cta > .btn {
    inline-size: 100%;
  }

  @media (min-width: 40rem) {
    .results__cta {
      inline-size: auto;
    }
  }

  .results__note {
    max-inline-size: 62ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
  }

  @media (min-width: 40rem) {
    .results__grid {
      gap: 1rem;
    }
  }

  @media (min-width: 64rem) {
    .results__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  /* Phones: two compare cards are about 170px wide, so the badges shrink to fit side by side. */
  @media (max-width: 39.9375rem) {
    .compare__badge {
      inset-block-start: 0.5rem;
      padding: 0.25rem 0.45rem;
      font-size: 0.6875rem;
      letter-spacing: 0.05em;
    }

    .compare__badge--before {
      inset-inline-start: 0.5rem;
    }

    .compare__badge--after {
      inset-inline-end: 0.5rem;
    }

    .results__footer .btn {
      inline-size: 100%;
      padding-inline: 1rem;
      font-size: 1rem;
    }
  }

  /* ===== FOLD 03 · SERVICES · #services · .services · paper + ridge ===== */

  /* Equal-height cards in a 1 / 2 / 3 column grid. Hover (pointer only) lifts the card,
     moves a soft spotlight with --mx / --my, draws the sunset top edge and swaps the tile. */

  .services__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .services__grid > li {
    display: flex;
    min-inline-size: 0;
  }

  .service-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.9rem;
    isolation: isolate;
    overflow: visible;
    transition:
      box-shadow var(--dur-3) var(--ease-out),
      translate var(--dur-3) var(--ease-out),
      border-color var(--dur-2) var(--ease-out);
  }

  /* Sunset top edge: hidden until hover or keyboard focus. */
  .service-card::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: -1px;
    z-index: 2;
    block-size: 2px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--gradient-sunset);
    transform-origin: left center;
    scale: 0 1;
    transition: scale var(--dur-3) var(--ease-out);
  }

  /* Spotlight follows the pointer (spotlight.js writes --mx / --my in px). */
  .service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(
      26.25rem circle at var(--mx, 50%) var(--my, 50%),
      rgb(232 102 44 / 0.09),
      transparent 60%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .service-card > * {
    position: relative;
    z-index: 1;
  }

  .service-card:focus-within::before {
    scale: 1 1;
  }

  .service-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .service-card__icon {
    transition:
      background-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out);
  }

  .service-card__index {
    color: var(--sand-300);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .service-card__title {
    margin: 0;
    color: var(--color-heading);
  }

  .service-card__text {
    flex: 1;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .service-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-border);
  }

  .service-card__estimate {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    inline-size: 100%;
    min-block-size: 2.75rem;
    white-space: nowrap;
    background-image: none;
  }

  .service-card__estimate:hover,
  .service-card__estimate:focus-visible {
    background-image: none;
  }

  .service-card__estimate .icon {
    transition: translate var(--dur-2) var(--ease-out);
  }

  /* The whole card is one link: the estimate link stretches over it. The actions row is not positioned,
     so the overlay sizes against the card. Keyboard focus shows as a ring on the card. */
  .service-card__actions {
    position: static;
  }

  .service-card__estimate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
  }

  @supports selector(:has(*)) {
    .service-card__estimate:focus-visible {
      outline: none;
    }
  }

  .service-card:has(:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  @media (hover: hover) {
    .service-card:hover {
      translate: 0 -4px;
      border-color: rgb(12 24 40 / 0.14);
      box-shadow: var(--shadow-lg);
    }

    .service-card:hover::before {
      scale: 1 1;
    }

    .service-card:hover::after {
      opacity: 1;
    }

    .service-card:hover .service-card__icon {
      background-color: var(--red-600);
      color: var(--white);
    }

    @media (prefers-reduced-motion: no-preference) {
      .service-card:hover .service-card__estimate .icon {
        translate: 0.25rem 0;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .service-card:has(.service-card__estimate:focus-visible) .service-card__estimate .icon {
      translate: 0.25rem 0;
    }
  }

  /* Compact cards below 640px: icon and title share the first row, index top-right, text below. */
  @media (max-width: 39.9375rem) {
    .services__grid {
      gap: 0.9rem;
    }

    .service-card {
      display: grid;
      grid-template-columns: 2.75rem minmax(0, 1fr) auto;
      grid-template-areas:
        "icon title index"
        "text text text"
        "actions actions actions";
      column-gap: 0.8rem;
      row-gap: 0.75rem;
      align-items: center;
      padding: 1.1rem;
    }

    .service-card__top {
      display: contents;
    }

    .service-card__icon {
      grid-area: icon;
      inline-size: 2.75rem;
      block-size: 2.75rem;
    }

    .service-card__title {
      grid-area: title;
      align-self: center;
    }

    .service-card__index {
      grid-area: index;
      align-self: start;
      justify-self: end;
    }

    .service-card__text {
      grid-area: text;
      font-size: 0.9375rem;
    }

    .service-card__actions {
      grid-area: actions;
    }
  }

  .services__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  }

  @media (min-width: 40rem) {
    .services__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .services__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Tablet: the odd 9th card sits centred under the two columns, at the same width as its row partners. */
  @media (min-width: 40rem) and (max-width: 63.9375rem) {
    .services__grid > li:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      justify-self: center;
      inline-size: calc(50% - 0.625rem);
    }
  }

  /* ===== FOLD 04 · WHY US · #why-us · .why · sand-100 ===== */

  /* Two columns on desktop: list and a crew photo with a floating call-to-action card.
     Stats: huge display numerals with serif-italic units, labels in eyebrow style. */

  .why__layout {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }

  .why__content {
    min-inline-size: 0;
  }

  .why__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none;
  }

  .why__item {
    display: grid;
    align-content: start;
    gap: 0.75rem;
  }

  .why__title {
    margin: 0;
    color: var(--color-heading);
  }

  .why__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.55;
  }

  .why__visual {
    position: relative;
    min-inline-size: 0;
  }

  .why__media {
    position: relative;
    inline-size: 100%;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--sand-200);
  }

  .why__media picture,
  .why__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .why__media img {
    object-fit: cover;
  }

  /* Phones: the card overlaps the photo's bottom edge, inset from the sides. */
  .why__cta {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.75rem;
    margin: -3.5rem 0 0 0.75rem;
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--ink-900);
    box-shadow: var(--shadow-xl);
    color: var(--dark-text);
    --color-heading: var(--white);
    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);
  }

  .why__cta-title {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h3);
    font-weight: 740;
    font-stretch: 96%;
    line-height: 1.2;
  }

  .why__cta-text {
    margin: 0;
    color: var(--dark-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .why__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: 0.25rem;
  }

  .why__cta-actions .btn--ghost {
    color: var(--white);
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
    padding: 0;
    border-block-start: 1px solid var(--color-border-strong);
  }

  .stats__item {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
    padding: 1.75rem 1rem 1.5rem 0;
    border-block-end: 1px solid var(--color-border);
  }

  .stats__item + .stats__item {
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--color-border);
  }

  .stats__value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    color: var(--color-heading);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: var(--fw-black);
    font-stretch: 82%;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .stats__unit {
    margin-inline-start: 0.08em;
    color: var(--terracotta-600);
    font-family: var(--font-serif);
    font-size: 0.6em;
    font-style: italic;
    font-stretch: 100%;
    font-weight: 400;
    letter-spacing: 0;
  }

  .stats__unit .icon {
    inline-size: 0.8em;
    block-size: 0.8em;
    color: var(--amber-500);
  }

  .stats__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 650;
    letter-spacing: var(--tracking-eyebrow);
    line-height: 1.3;
    text-transform: uppercase;
    text-wrap: balance;
  }

  @media (min-width: 64rem) {
    .why__layout {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 4rem;
    }

    .why__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem 1.75rem;
    }

    .why__cta {
      position: absolute;
      inset-block-end: -2.25rem;
      inset-inline-start: -2.5rem;
      inline-size: min(21.25rem, 80%);
      margin: 0;
    }

    .stats {
      margin-block-start: clamp(5rem, 7vw + 1rem, 6.5rem);
    }

    .stats__item {
      border-block-end: 0;
      padding: 2.25rem 1.5rem 0 0;
    }

    .stats__item + .stats__item {
      padding-inline-start: 1.5rem;
      border-inline-start: 1px solid var(--color-border);
    }
  }

  @media (min-width: 40rem) and (max-width: 63.9375rem) {
    .why__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Phones: each reason is icon tile + (title, text) side by side, so the list is much shorter. */
  @media (max-width: 39.9375rem) {
    .why__list {
      gap: 1.25rem;
    }

    .why__item {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "icon title"
        "icon text";
      column-gap: 0.9rem;
      row-gap: 0.3rem;
      align-items: center;
    }

    .why__item > .icon-tile {
      grid-area: icon;
    }

    .why__item > .why__title {
      grid-area: title;
    }

    .why__item > .why__text {
      grid-area: text;
      font-size: 0.9375rem;
    }
  }

  /* Desktop: the photo fills the whole height of the content column (no empty area under the list). */
  @media (min-width: 64rem) {
    .why__layout {
      align-items: stretch;
    }

    .why__visual {
      display: flex;
      flex-direction: column;
    }

    .why__media {
      flex: 1;
      aspect-ratio: auto;
      min-block-size: 32.5rem;
    }
  }

  /* The CTA card buttons stay on one row inside the 360px card. */
  .why__cta {
    max-inline-size: 100%;
  }

  .why__cta-actions .btn {
    padding-inline: 0.9rem;
    font-size: var(--fs-sm);
  }

  @media (min-width: 64rem) {
    .why__cta {
      inline-size: min(22.5rem, 84%);
    }
  }

  /* ===== FOLD 05 · INSURANCE · #insurance · .insurance · dark + ridge ===== */

  /* Four steps: horizontal timeline on desktop, vertical on phones. The sunset fill
     grows with scroll (view timeline) where supported; elsewhere it shows in full. */

  .insurance {
    overflow-x: clip;
  }

  /* Faint shingle scales, masked to a radial fade behind the content. */
  .insurance__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        circle at 50% 100%,
        transparent 0.8125rem,
        rgb(255 255 255 / 0.05) 0.875rem,
        transparent 1rem
      )
      0 0 / 2rem 1rem;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    pointer-events: none;
  }

  .insurance__glow {
    position: absolute;
    inset-block-end: -14rem;
    inset-inline-start: -12rem;
    z-index: 0;
    inline-size: 38rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(232 102 44 / 0.28), transparent 72%);
    pointer-events: none;
  }

  .insurance > .container {
    position: relative;
    z-index: 1;
  }

  .steps {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Track and fill: the line runs through the node centres (28px = half of a 56px node). */
  .steps::before,
  .steps::after {
    content: "";
    position: absolute;
    inset-inline-start: 1.6875rem;
    inline-size: 2px;
    inset-block: 1.75rem 1.75rem;
    border-radius: 2px;
    pointer-events: none;
  }

  .steps::before {
    background: var(--white-a12);
  }

  .steps::after {
    background: var(--gradient-sunset);
    transform-origin: top center;
  }

  .steps__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0;
    min-inline-size: 0;
    padding-inline-start: 4.5rem;
  }

  .steps__node {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border: 1.5px solid var(--amber-400);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: var(--fw-black);
    font-stretch: 88%;
    line-height: 1;
  }

  .steps__title {
    margin: 0 0 0.5rem;
    color: var(--color-heading);
  }

  .steps__text {
    max-inline-size: 30ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.55;
  }

  .insurance__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  }

  @media (min-width: 64rem) {
    .steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
    }

    .steps::before,
    .steps::after {
      inset-block: auto;
      inset-block-start: 1.75rem;
      inset-inline: 12.5% 12.5%;
      inline-size: auto;
      block-size: 2px;
      transform-origin: left center;
    }

    .steps__item {
      justify-items: center;
      padding-inline: 1.25rem;
      padding-block-start: 0;
      text-align: center;
      padding-inline-start: 1.25rem;
    }

    .steps__node {
      position: relative;
      inset: auto;
      box-shadow: 0 0 0 8px var(--color-bg);
    }

    .steps__text {
      margin-inline: auto;
    }
  }

  /* Tablet (640 to 1023px): a 2x2 grid of steps. The connecting line is dropped here; each node sits
     above its title and text. */
  @media (min-width: 40rem) and (max-width: 63.9375rem) {
    .steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.75rem 3rem;
    }

    .steps::before,
    .steps::after {
      display: none;
    }

    .steps__item {
      padding-inline-start: 0;
    }

    .steps__node {
      position: relative;
      inset: auto;
      margin-block-end: 1.25rem;
    }
  }

  /* Scroll-linked fill (where view timelines exist). Phones grow vertically, desktop horizontally. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes steps-grow-y {
        from {
          scale: 1 0;
        }

        to {
          scale: 1 1;
        }
      }

      @keyframes steps-grow-x {
        from {
          scale: 0 1;
        }

        to {
          scale: 1 1;
        }
      }

      .steps::after {
        animation: steps-grow-y linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 60%;
      }

      @media (min-width: 64rem) {
        .steps::after {
          animation-name: steps-grow-x;
        }
      }
    }
  }

  /* Without scroll-linked animation the fill is simply shown in full. */
  @supports not (animation-timeline: view()) {
    .steps::after {
      scale: 1 1;
    }
  }

  /* ===== FOLD 06 · REVIEWS · #reviews · .reviews · paper + ridge ===== */

  /* Header with the rating summary, then a horizontal scroll-snap carousel of review cards.
     The track is the only scroller; its scrollbar is hidden, the edges fade out. */

  .reviews__head {
    display: grid;
    gap: 2rem;
    align-items: end;
    margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
  }

  .reviews__intro {
    min-inline-size: 0;
  }

  .reviews__intro .section-lead {
    margin-block-start: 1.1rem;
  }

  .rating-summary {
    display: grid;
    justify-items: start;
    gap: 0.4rem;
    margin: 0;
  }

  .rating-summary__score {
    margin: 0;
    color: var(--color-heading);
    font-size: clamp(3.5rem, 8vw, 5rem);
    font-weight: var(--fw-black);
    font-stretch: 82%;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 0.9;
  }

  .rating-summary .stars {
    font-size: 1.25rem;
  }

  .rating-summary__count {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .rating-summary__controls {
    display: flex;
    gap: 0.75rem;
    margin-block-start: 0.6rem;
  }

  .carousel__button {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-heading);
    touch-action: manipulation;
    transition:
      background-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      opacity var(--dur-2) var(--ease-out);
  }

  .carousel__button .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .carousel__button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .carousel__button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  @media (hover: hover) {
    .carousel__button:not(:disabled):hover {
      background: var(--ink-900);
      border-color: var(--ink-900);
      color: var(--white);
    }
  }

  /* Carousel root: the edges fade out only when there is more content beyond them. */
  .carousel {
    position: relative;
    margin-inline: calc(-1 * var(--container-pad));
    --fade-l: 0px;
    --fade-r: 0px;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),
      transparent 100%
    );
  }

  .carousel:not(.is-start) {
    --fade-l: 2.5rem;
  }

  .carousel:not(.is-end) {
    --fade-r: 2.5rem;
  }

  .carousel__track {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0.5rem var(--container-pad) 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--container-pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
    touch-action: pan-x pan-y;
  }

  .carousel__track::-webkit-scrollbar {
    display: none;
  }

  .carousel__track:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
    border-radius: var(--r-lg);
  }

  .carousel__track > li {
    display: flex;
    flex: 0 0 auto;
    inline-size: 86vw;
    scroll-snap-align: start;
  }

  @media (min-width: 40rem) {
    .carousel__track > li {
      inline-size: 23.75rem;
    }
  }

  .review-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: clamp(1.4rem, 2.5vw, 1.85rem);
    min-inline-size: 0;
  }

  .review-card__quote {
    flex: 1;
    margin: 0;
  }

  .review-card__quote p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    text-wrap: pretty;
  }

  .review-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-border);
  }

  .review-card__avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--sand-100);
    color: var(--terracotta-600);
    font-size: 1.05rem;
    font-weight: 750;
  }

  .review-card__who {
    display: grid;
    min-inline-size: 0;
    line-height: 1.3;
  }

  .review-card__name {
    color: var(--color-heading);
    font-weight: 700;
  }

  .review-card__place {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }

  .reviews__footer {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  }

  @media (min-width: 64rem) {
    .reviews__head {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 3rem;
    }

    .rating-summary {
      justify-items: end;
      text-align: end;
    }

    .rating-summary__controls {
      justify-content: flex-end;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .carousel__track {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel__track {
      scroll-behavior: auto;
    }
  }

  /* Folds with a ridge (services, insurance, reviews, contact) clip only sideways, so the peak above them stays visible. */
  .services,
  .reviews {
    overflow-x: clip;
  }

  /* ===== FOLD 07 · OUR WORK · #work · .work · sand-100 ===== */

  /* Phones: two columns, the even tiles drop 1.25rem. From 48rem: four columns.
     From 64rem the 2nd and 4th columns drop 2.5rem (editorial stagger); the list keeps
     matching bottom padding so the drop never runs into the CTA. Each tile is one button:
     the photo zooms and the caption slides up on hover or keyboard focus. Touch screens
     have no hover, so there the caption stays visible. */

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding-block-end: 1.25rem;
  }

  .gallery > li {
    min-inline-size: 0;
  }

  .gallery > li:nth-child(even) {
    translate: 0 1.25rem;
  }

  @media (min-width: 48rem) {
    .gallery {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      padding-block-end: 0;
    }

    .gallery > li:nth-child(even) {
      translate: none;
    }
  }

  @media (min-width: 64rem) {
    .gallery {
      padding-block-end: 2.5rem;
    }

    .gallery > li:nth-child(even) {
      translate: 0 2.5rem;
    }
  }

  .gallery__item {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--sand-200);
    box-shadow: var(--shadow-md);
    color: var(--white);
    text-align: start;
    isolation: isolate;
  }

  .gallery__item:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .gallery__item picture {
    position: absolute;
    inset: 0;
  }

  .gallery__item img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .gallery__zoom {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    background: rgb(7 15 28 / 0.55);
  }

  .gallery__zoom .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  .gallery__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1;
    padding: 2.5rem 1rem 0.95rem;
    background: linear-gradient(0deg, rgb(7 15 28 / 0.9) 0%, rgb(7 15 28 / 0.82) 70%, transparent 100%);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
  }

  @media (hover: none) {
    .gallery__caption {
      padding-block: 1.25rem 0.85rem;
      line-height: 1.3;
      font-size: var(--fs-xs);
    }
  }

  .gallery__item:focus-visible .gallery__caption {
    translate: 0 0;
  }

  @media (hover: hover) {
    .gallery__caption {
      translate: 0 100%;
    }

    .gallery__item:hover .gallery__caption {
      translate: 0 0;
    }

    .gallery__item:hover img {
      scale: 1.05;
    }

    .gallery__item:hover .gallery__zoom {
      border-color: transparent;
      background: var(--red-600);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .gallery__item img {
      transition: scale var(--dur-4) var(--ease-out);
    }

    .gallery__caption {
      transition: translate var(--dur-2) var(--ease-out);
    }

    .gallery__zoom {
      transition:
        background-color var(--dur-1) var(--ease-out),
        border-color var(--dur-1) var(--ease-out);
    }
  }

  .work__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  }

  /* Lightbox: a dark full-screen stage built on the dialog shell (components.css). */
  .lightbox {
    inset: 0;
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100vh;
    block-size: 100dvh;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: radial-gradient(120% 90% at 50% 35%, var(--ink-850) 0%, var(--ink-950) 72%);
    color: var(--dark-text);
    box-shadow: none;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .lightbox__frame {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    min-block-size: 0;
    padding: 0.75rem 1rem 1rem;
  }

  .lightbox__close {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    background: rgb(255 255 255 / 0.1);
    color: var(--white);
  }

  .lightbox__close .icon {
    stroke-width: 2;
  }

  .lightbox__figure {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    gap: 0.85rem;
    min-block-size: 0;
    margin: 0;
  }

  .lightbox__image {
    display: block;
    align-self: center;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: min(82vh, 100%);
    max-block-size: min(82svh, 100%);
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.7);
  }

  .lightbox__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: min(100%, 64rem);
    margin: 0;
  }

  .lightbox__caption {
    min-inline-size: 0;
    margin: 0;
    color: var(--dark-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
  }

  .lightbox__counter {
    flex: none;
    margin: 0;
    color: var(--dark-text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
  }

  .lightbox__nav {
    display: inline-grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border: 1px solid var(--white-a20);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    color: var(--white);
    transition: background-color var(--dur-1) var(--ease-out);
  }

  .lightbox__nav .icon {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    stroke-width: 2;
  }

  .lightbox__nav--prev {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .lightbox__nav--next {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }

  @media (hover: hover) {
    .lightbox__close:hover,
    .lightbox__nav:hover {
      background: var(--white-a20);
    }
  }

  @media (min-width: 40rem) {
    .lightbox__frame {
      grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 1rem;
      padding: 1rem clamp(1rem, 2.5vw, 2rem) 1.5rem;
    }

    .lightbox__close {
      grid-column: 3;
      grid-row: 1;
    }

    .lightbox__figure {
      grid-column: 2;
      grid-row: 2;
    }

    .lightbox__nav {
      inline-size: 3.5rem;
      block-size: 3.5rem;
      align-self: center;
      justify-self: center;
    }

    .lightbox__nav--prev {
      grid-column: 1;
      grid-row: 2;
    }

    .lightbox__nav--next {
      grid-column: 3;
      grid-row: 2;
    }
  }

  /* ===== FOLD 08 · FAQ · #faq · .faq · paper ===== */

  /* Two columns from 64rem: the intro sticks under the header while the accordion scrolls.
     Native <details> with a name group: one item open at a time. The height animates
     with interpolate-size where supported; elsewhere the change is instant. */

  .faq__layout {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  @media (min-width: 64rem) {
    .faq__layout {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: 5rem;
      align-items: start;
    }

    .faq__intro {
      position: sticky;
      inset-block-start: calc(var(--header-h-condensed) + 2rem);
    }
  }

  .faq__call {
    margin: 1.5rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
  }

  .faq__call .link {
    font-weight: 700;
    white-space: nowrap;
  }

  .accordion {
    border-block-start: 1px solid var(--color-border);
  }

  .accordion__item {
    border-block-end: 1px solid var(--color-border);
  }

  .accordion__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 1.3rem;
    color: var(--color-heading);
    font-size: var(--fs-h4);
    font-weight: 650;
    line-height: 1.35;
    text-wrap: balance;
  }

  .accordion__question > span {
    min-inline-size: 0;
  }

  @media (min-width: 48rem) {
    .accordion__question {
      padding-block: 1.5rem;
      font-size: 1.125rem;
    }
  }

  .accordion__icon {
    flex: none;
    box-sizing: border-box;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent);
  }

  .accordion__item[open] > .accordion__question .accordion__icon {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--white);
    rotate: 45deg;
  }

  @media (hover: hover) {
    .accordion__question:hover .accordion__icon {
      border-color: var(--color-accent);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .accordion__icon {
      transition:
        rotate var(--dur-3) var(--ease-spring),
        background-color var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out);
    }
  }

  .accordion__panel {
    max-inline-size: 62ch;
    padding-block-end: 1.5rem;
    padding-inline-end: 2.5rem;
    color: var(--color-text-muted);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  .accordion__panel p {
    margin: 0;
  }

  /* Height animation: the content box is the ::details-content pseudo-element. */
  @supports (interpolate-size: allow-keywords) {
    .accordion {
      interpolate-size: allow-keywords;
    }

    .accordion__item::details-content {
      overflow: clip;
      contain: layout;
    }

    .accordion__item:not([open])::details-content {
      block-size: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      .accordion__item::details-content {
        transition-property: block-size, content-visibility, display;
        transition-duration: var(--dur-3);
        transition-timing-function: var(--ease-in-out);
        transition-behavior: allow-discrete;
      }
    }
  }

  /* ===== FOLD 09 · URGENCY + AREAS · #areas · .urgency · ember gradient ===== */

  /* Full-bleed ember band with a slow drifting chevron pattern (ridge motif, white 9%).
     Centered message and actions; the service areas sit below a hairline as glass chips. */

  .urgency {
    --color-text: var(--white);
    --color-text-muted: var(--white);
    --color-heading: var(--white);
    --color-accent: var(--amber-300);
    --color-surface: var(--white-a12);
    --color-border: var(--white-a20);
    --color-border-strong: rgb(255 255 255 / 0.28);
    overflow: hidden;
    isolation: isolate;
    background: var(--gradient-ember);
    background-image: var(--grain-dark), var(--gradient-ember);
    background-size: var(--grain-size), auto;
    background-repeat: repeat, repeat;
    color: var(--white);
  }

  .urgency__pattern {
    position: absolute;
    inset-block: 0;
    inset-inline: -120px;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56' viewBox='0 0 120 56'%3E%3Cpath d='M0 36 L60 6 L120 36 M0 52 L60 22 L120 52' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 7.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 30%, transparent 100%);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .urgency__pattern {
      animation: urgency-drift 60s linear infinite;
    }

    @keyframes urgency-drift {
      to {
        translate: -120px 0;
      }
    }
  }

  .urgency__inner {
    position: relative;
    z-index: 1;
  }

  .urgency__head {
    max-inline-size: 52rem;
    margin-inline: auto;
    text-align: center;
  }

  .urgency__title {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    font-stretch: var(--stretch-display);
    letter-spacing: var(--tracking-heading);
    line-height: 1.08;
    text-wrap: balance;
  }

  .urgency__title .accent {
    color: var(--amber-300);
  }

  .urgency__lead {
    max-inline-size: 46ch;
    margin: 1.25rem auto 0;
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
    line-height: 1.55;
    text-wrap: balance;
  }

  .urgency__actions {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 2rem;
  }

  .urgency__actions .btn {
    justify-content: center;
    inline-size: 100%;
  }

  @media (min-width: 40rem) {
    .urgency__actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.85rem;
    }

    .urgency__actions .btn {
      inline-size: auto;
    }
  }

  .areas {
    max-inline-size: 52rem;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    padding-block-start: clamp(2.5rem, 5vw, 3.5rem);
    border-block-start: 1px solid var(--white-a20);
    text-align: center;
  }

  .areas__title {
    margin: 0;
    color: var(--white);
    text-wrap: balance;
  }

  .areas__lead {
    margin: 0.6rem auto 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }

  .areas__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-block-start: 1.5rem;
  }

  .areas__list .chip {
    border-color: var(--color-border-strong);
    background: rgb(7 15 28 / 0.22);
    color: var(--white);
  }

  /* ===== FOLD 10 · CONTACT · #contact · .contact · dark + ridge ===== */

  /* Two columns from 64rem. Left: intro, icon-tile contact list and a big phone link.
     Right: a paper card with the form, so the inputs keep the light palette on a dark page. */

  .contact__layout {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
  }

  @media (min-width: 64rem) {
    .contact__layout {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 4rem;
      align-items: start;
    }
  }

  .contact__list {
    display: grid;
    gap: 1.5rem;
    margin: 0;
  }

  .contact__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-inline-size: 0;
  }

  .contact__item-body {
    display: grid;
    gap: 0.3rem;
    min-inline-size: 0;
  }

  .contact__item-title {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .contact__item-text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-body);
    line-height: 1.5;
  }

  .contact__phone {
    justify-self: start;
    padding-block: 0.4rem;
    color: var(--color-heading);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);
    font-weight: 760;
    font-stretch: 88%;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-decoration: none;
  }

  @media (hover: hover) {
    .contact__phone:hover {
      text-decoration: underline;
      text-decoration-thickness: 3px;
      text-underline-offset: 0.16em;
      text-decoration-color: var(--color-accent);
    }
  }

  /* The card is light even on the dark section: remap the semantic variables back. */
  .contact__card {
    --color-text: var(--ink-text);
    --color-text-muted: var(--ink-muted-light);
    --color-heading: var(--ink-900);
    --color-border: var(--sand-200);
    --color-border-strong: var(--sand-300);
    --color-surface: var(--white);
    --color-accent: var(--terracotta-600);
    --color-focus: var(--focus-blue);
    --error-text: var(--danger-600);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--r-xl);
    background: var(--paper);
    color: var(--color-text);
    box-shadow: var(--shadow-xl);
  }

  .contact__card .lead-form {
    gap: 1rem;
  }
}