/* =====================================================================
   Black Diamond Claims Solutions — temporary housing landing page
   Built from the Photoshop mockup (1366 px artboard).

   Scaling model:
     1rem == 1 design pixel of the 1366-wide artboard on desktop.
     html { font-size: 100vw / 1366 }  (capped at a 1920 px page)
     On phones (<= 760px) the unit switches to a 430-wide mobile artboard.
   Every size below is written in rem so the whole page scales like the
   artboard. main.js refines the unit with the real client width.
   ===================================================================== */

:root {
  --black: #000;
  --white: #fff;
  --green: #16c776;
  --green-dark: #1aa666;
  --gray: #eaeaea;
  --gray-fade: #ececec;
  --blue-border: #3f86d2;
  --error: #b3261e;
  --font-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --x0: calc(50% - 683rem);   /* left edge of the 1366 design box inside a full-width section */
  --vw: 100vw;                /* viewport width without the scrollbar; main.js keeps it exact */
}

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

html {
  font-size: calc(100vw / 1366);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 1921px) { html { font-size: 1.4056px; } }   /* 1920 / 1366 */
@media (max-width: 760px)  { html { font-size: calc(100vw / 430); } }

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  line-height: 1;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; }
figure { margin: 0; }
address { font-style: normal; }

html { scroll-padding-top: calc(var(--topbar-h) + 16rem); }   /* anchor targets land below the fixed top bar */
.page { position: relative; width: 100%; overflow: clip; }
.in   { position: relative; width: 1366rem; margin: 0 auto; }

/* line-mask wrappers for headline reveals */
.l { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.l > span { display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--white);
  font-family: var(--font-display); font-size: 24rem; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  border-radius: 5rem;
  transition: filter .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.08); box-shadow: 0 10rem 30rem rgba(22, 199, 118, .35); outline: none; }
.btn:active { filter: brightness(.94); }
.btn--sm { font-size: 24rem; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; height: 823rem; overflow: hidden;
  background: #0b0f12; color: var(--white);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__video {
  position: absolute; left: 0; top: -7%; width: 100%; height: 114%;
  object-fit: cover; object-position: 50% 45%;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%);
}
.hero .in { height: 100%; }
.hero__title {
  position: absolute; left: 124rem; top: 296rem;
  font-size: 100rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 4rem 30rem rgba(0,0,0,.35);
}
.hero__band {
  position: absolute; left: 120rem; top: 605rem; width: 618rem; height: 47rem;
  display: flex; align-items: center; padding-left: 24rem;
  background: var(--black); font-size: 30rem; letter-spacing: .03em; text-transform: uppercase;
  transform-origin: left center;
}
.hero__btn { position: absolute; left: 120rem; top: 667rem; width: 332rem; height: 50rem; }   /* "Click here for an expedited request" is ~290rem of text */

/* =====================================================================
   INTRO — displaced home + family
   ===================================================================== */
.intro { position: relative; height: 1065rem; margin-top: -55rem; z-index: 2; }
.intro__band {
  position: absolute; left: 0; right: 0; top: 0; height: 528rem; background: var(--black);
  clip-path: polygon(0 55rem, 100% 0, 100% 473rem, 0 528rem);
}
.intro .in { height: 100%; }
.intro__house { position: absolute; left: -161rem; top: -36rem; width: 928rem; z-index: 2; }
.intro__text { position: absolute; left: 801rem; top: 85rem; width: 435rem; color: var(--white); z-index: 3; }
.intro__h2 { font-size: 50rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 50rem; }
.intro__p  { font-size: 30rem; line-height: 35rem; letter-spacing: .03em; text-transform: uppercase; }

.intro__bar { position: absolute; left: 120rem; top: 620rem; width: 1127rem; height: 273rem; background: var(--black); transform-origin: left center; }
.intro__family { position: absolute; left: 134rem; top: 260rem; width: 626rem; z-index: 2; will-change: transform; }
.intro__family img { width: 100%; will-change: transform, opacity; }
.intro__bartext {
  position: absolute; left: 801rem; top: 671rem; width: 385rem; color: var(--white);
  font-size: 30rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; z-index: 2;
}
.ale { position: absolute; left: 809rem; top: 933rem; width: 360rem; height: 110rem; }
.ale__icon { position: absolute; left: 0; top: 4rem; width: 93rem; }
.ale__q { position: absolute; left: 119rem; top: 0; font-size: 26.7rem; line-height: 1.01; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ale__btn { position: absolute; left: 174rem; top: 64rem; width: 182rem; height: 37rem; }

/* =====================================================================
   MIDWAY — here is how we help / call
   ===================================================================== */
.midway { position: relative; z-index: 3; }
.midway .in { height: 1016rem; }
/* phone hand: positioned against .midway (full viewport width), flush with the right edge of the screen.
   Size and top come from the mockup (653 x 1161 placed, 647 visible on the artboard). */
.midway__hand {
  position: absolute; right: 0; top: -13rem; width: 647rem; z-index: 2;
  pointer-events: none; will-change: transform;
}
.midway__hand img { width: 100%; }
.midway__h2 { position: absolute; left: 172rem; top: 276rem; font-size: 77rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
.midway__sub { position: absolute; left: 170rem; top: 454rem; font-size: 40rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); }
.midway__phone { position: absolute; left: 171rem; top: 551rem; font-size: 77rem; line-height: 1; letter-spacing: .05em; }
.midway__btn { position: absolute; left: 170rem; top: 651rem; width: 269rem; height: 37rem; }

/* =====================================================================
   STEPS
   ===================================================================== */
.steps { position: relative; z-index: 1; }
.steps .in { height: 3527rem; }
.steps__fade { position: absolute; left: 0; right: 0; pointer-events: none; }
.steps__fade--top    { top: 85rem;  height: 264rem; background: linear-gradient(180deg, var(--gray-fade) 0%, rgba(236,236,236,0) 100%); }
.steps__fade--bottom { top: 2543rem; height: 515rem; background: linear-gradient(180deg, rgba(236,236,236,0) 0%, var(--gray-fade) 45%, var(--gray-fade) 100%); }

.step { position: absolute; left: 0; width: 100%; }
.step__bar   { position: absolute; top: 0; background: var(--black); }
.step__title { position: absolute; color: #f2f2f2; font-size: 38.8rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; z-index: 2; }
.step__title span { display: block; }
.step__title--dark { color: var(--black); }
/* Figures sit at the smart object's full placed rect from the mockup. Busts (steps 1-6) are clipped
   at the bottom edge of their black bar, exactly as the mockup cuts them, so they rise out of the bar
   on entrance and never drift away from it. */
.step__top { display: contents; }   /* phones: the clip box for figure + title bar (steps 1-6) */
.step__figure { position: absolute; z-index: 3; overflow: hidden; }
.step__figure img { width: 100%; }
.step__body { position: absolute; font-size: 25rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; z-index: 2; }
.step__body--justify { text-align: justify; }
.step__body p + p { margin-top: 25rem; }
.step__list { margin-top: 29rem; }
.step__list li { position: relative; padding-left: 14rem; line-height: 29rem; }
.step__list li::before { content: "\2022"; position: absolute; left: 0; }
.step__list--plus li { padding-left: 24rem; margin-top: 25rem; line-height: 25rem; }
.step__list--plus li::before { content: "+"; left: 8rem; }
.step__list--plus li br + * { display: block; }

/* bars: left ones run flush to the viewport's left edge, right ones to the right edge, at any width.
   Positions are relative to .in (the centred 1366rem design box), so the viewport edge sits at
   683rem - half the viewport width. The centred bar (step 7) spans the viewport up to 2495px. */
.step--left  .step__bar { left: calc(683rem - var(--vw) / 2); right: 661rem; }
.step--right .step__bar { left: 707rem; right: calc(683rem - var(--vw) / 2); }
.step--full  .step__bar { left: 50%; width: min(var(--vw), 2495px); margin-left: calc(min(var(--vw), 2495px) / -2); }

/* step 1 */
.step--1 { top: 0; height: 320rem; }
.step--1 .step__bar { height: 170rem; }
.step--1 .step__title { left: 135rem; top: 46rem; }
.step--1 .step__figure { left: 405rem; top: -113rem; width: 252rem; height: 295rem; }   /* bar bottom 170 + fade tail */
.step--1 .step__body { left: 120rem; top: 186rem; width: 455rem; }

/* step 2 */
.step--2 { top: 256rem; height: 340rem; }
.step--2 .step__bar { height: 195rem; }
.step--2 .step__title { left: 980rem; top: 20rem; }
.step--2 .step__figure { left: 708rem; top: -104rem; width: 239rem; height: 299rem; }  /* Marty headset, full image width, head 86rem; bar bottom 195 */
.step--2 .step__body { left: 782rem; top: 211rem; width: 463rem; }

/* step 3 */
.step--3 { top: 550rem; height: 420rem; }
.step--3 .step__bar { height: 170rem; }
.step--3 .step__title { left: 143rem; top: 25rem; }
.step--3 .step__figure { left: 325rem; top: -179rem; width: 326rem; height: 361rem; }  /* bar bottom 170 + fade tail */
.step--3 .step__body { left: 121rem; top: 186rem; width: 560rem; }

/* step 4 */
.step--4 { top: 825rem; height: 340rem; }
.step--4 .step__bar { height: 195rem; }
.step--4 .step__title { left: 980rem; top: 19rem; }
.step--4 .step__figure { left: 670rem; top: -148rem; width: 324rem; height: 343rem; }  /* Marty keys, full image width, head 86rem; bar bottom 195 */
.step--4 .step__body { left: 782rem; top: 211rem; width: 463rem; }

/* step 5 */
.step--5 { top: 1216rem; height: 300rem; }
.step--5 .step__bar { height: 170rem; }
.step--5 .step__title { left: 143rem; top: 25rem; }
.step--5 .step__figure { left: 399rem; top: -207rem; width: 342rem; height: 377rem; }  /* bar bottom 170 */
.step--5 .step__body { left: 120rem; top: 186rem; width: 485rem; }

/* step 6 */
.step--6 { top: 1496rem; height: 340rem; }
.step--6 .step__bar { height: 195rem; }
.step--6 .step__title { left: 980rem; top: 37rem; }
.step--6 .step__figure { left: 664rem; top: -149rem; width: 275rem; height: 344rem; }  /* Marty tablet, full image width, head 86rem; bar bottom 195 */
.step--6 .step__body { left: 782rem; top: 212rem; width: 463rem; }

/* step 7 */
.step--7 { top: 2019rem; height: 520rem; }
.step--7 .step__bar { height: 114rem; }
.step--7 .step__title { left: 764rem; top: 36rem; }
.step--7 .step__figure { left: 1rem; top: -241rem; width: 730rem; overflow: visible; }
.step--7 .step__body { left: 771rem; top: 136rem; width: 300rem; }

/* step 8 */
.step--8 { top: 2471rem; height: 1056rem; }
.step--8 .step__title { left: 190rem; top: 176rem; }
.step--8 .step__body { left: 188rem; top: 283rem; width: 507rem; }
.step--8 .step__figure { left: 565rem; top: -27rem; width: 832rem; height: 1083rem; }   /* Marty standing (1086x1448): 832rem wide = 1110rem tall, so his shoes meet the section bottom; centre kept at ~973rem */
.step--8 .step__closing { left: 192rem; top: 690rem; }

/* =====================================================================
   COVERAGE CHECK (AI tool)
   ===================================================================== */
.coverage { position: relative; background: var(--black); color: var(--white); z-index: 4; }
.coverage .in { height: 806rem; }
.coverage__h2 { position: absolute; left: 118rem; top: 101rem; font-size: 100rem; line-height: 1.01; letter-spacing: .05em; text-transform: uppercase; }
.coverage__band {
  position: absolute; left: 112rem; top: 411rem; width: 1142rem; height: 80rem;
  background: var(--white); color: var(--black); transform-origin: left center;
}
.coverage__band p { position: absolute; left: 30rem; top: 8rem; font-size: 30rem; line-height: 1.01; letter-spacing: .03em; text-transform: uppercase; }
.coverage__body { position: absolute; left: 120rem; top: 537rem; width: 579rem; font-size: 20rem; line-height: 25rem; letter-spacing: .03em; text-transform: uppercase; }
.coverage__body p + p { margin-top: 25rem; }
.coverage__shot {
  position: absolute; left: 744rem; top: 117rem; width: 472rem;
  border: 3rem solid var(--blue-border); overflow: hidden;
  box-shadow: 0 30rem 80rem rgba(0,0,0,.6);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.coverage__shot img { width: 100%; }
.coverage__shot:hover { border-color: #5aa0ea; box-shadow: 0 30rem 90rem rgba(63,134,210,.35); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { position: relative; background: var(--white); overflow: hidden; font-family: var(--font-display); }
/* 2026-10-08 layout from the user's Photoshop mockup: mission statement / logo / social + notifications on the
   top row, four link columns with hairline dividers, the contact form folded at the right; the beach panorama
   (3252 x 725, fitted to the viewport width = 0.2229 x vw tall) starts at 510rem, right under the columns. */
.footer .in { height: calc(510rem + var(--vw) * 0.2229); }
.footer__beach {
  position: absolute; bottom: 0; z-index: 0; max-width: none;
  width: var(--vw); left: 50%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 3%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 3%);   /* just the top edge; the palm fronds stay solid */
}

/* top row */
/* desktop footer sits on the site's 120rem margins (same as the top bar): mission flush left, logo centred, social flush right */
.footer__mission { position: absolute; left: 120rem; top: 178rem; width: 290rem; z-index: 2; text-transform: uppercase; letter-spacing: .03em; }
.footer__mission-p { font-size: 15.5rem; line-height: 17rem; }
.footer__mission-band { display: inline-block; margin-top: 9rem; padding: 3rem 8rem 1rem; background: var(--black); color: var(--white); font-size: 15.5rem; line-height: 17rem; }
.footer__mission-s { margin-top: 5rem; font-size: 11rem; line-height: 13rem; }
.footer__logo { position: absolute; left: 578rem; top: 44rem; width: 210rem; z-index: 2; }   /* centred on 683rem */
.footer__social { position: absolute; right: 120rem; top: 170rem; width: 260rem; z-index: 2; text-align: right; }
.social { display: flex; justify-content: flex-end; gap: 13rem; }
.social a { display: block; width: 43rem; height: 43rem; color: var(--black); transition: color .2s ease, transform .2s ease; }
.social a:hover, .social a:focus-visible { color: var(--green-dark); transform: translateY(-2rem); outline: none; }
.social svg { display: block; width: 100%; height: 100%; }
.notify { margin-top: 12rem; text-transform: uppercase; letter-spacing: .04em; }
.notify__band { display: inline-flex; align-items: center; gap: 6rem; padding: 3rem 10rem 1rem; border: 0; background: var(--black); color: var(--white); font-family: var(--font-display); font-size: 15rem; line-height: 17rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s ease; }
.notify__band svg { width: 13rem; height: 13rem; }
.notify__band:hover, .notify__band:focus-visible { background: var(--green-dark); outline: none; }
.notify__sub { margin-top: 4rem; font-size: 11rem; line-height: 13rem; }
.notify__accept { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #555; cursor: pointer; }
.notify__accept:hover, .notify__accept:focus-visible { color: var(--green-dark); outline: none; }
.notify__status { margin-top: 4rem; font-family: var(--font-body); font-weight: 500; font-size: 13rem; line-height: 16rem; letter-spacing: 0; text-transform: none; color: #0b7a48; }
.notify__status:empty { display: none; }
.notify.is-on .notify__band { background: var(--green-dark); }

/* link columns with hairline dividers */
.footer__cols { position: absolute; left: 120rem; top: 331rem; z-index: 2; display: grid; grid-template-columns: repeat(3, 281.5rem); text-transform: uppercase;   /* 4 equal columns across 120..1246rem; the contact panel is the 4th */ letter-spacing: .03em; }
.footer__col { position: relative; padding-right: 16rem; min-height: 172rem; }
.footer__col + .footer__col { padding-left: 24rem; border-left: max(1px, 1rem) solid var(--black); }
.footer__col--3 { padding-left: 28rem; border-right: max(1px, 1rem) solid var(--black); }   /* divider before the contact column */
.footer h4 { position: relative; padding-left: 12rem; font-family: var(--font-display); font-weight: 400; font-size: 15.5rem; line-height: 20rem; }
.footer h4::before { content: "\2022"; position: absolute; left: 0; top: 0; }
.footer h4 + h4 { margin-top: 14rem; }
.footer__col ul { margin: 0 0 14rem; padding-left: 26rem; }
.footer__col li { position: relative; padding-left: 10rem; font-size: 14rem; line-height: 20rem; }
.footer__col li::before { content: "-"; position: absolute; left: 0; top: 0; }
.footer__col a { transition: color .2s ease; }
.footer__col a:hover { color: var(--green-dark); }
.footer__col address { margin: 0 0 14rem; padding-left: 12rem; }
.footer__col address p { font-size: 14rem; line-height: 20rem; }

/* contact form: folded by default (js/footer.js); unfolds over the panorama, so it keeps a white panel */
.contact { position: absolute; left: 974.5rem; top: 306rem; width: 285.5rem; padding: 12rem 14rem 14rem; background: rgba(255,255,255,.94); z-index: 3; font-family: var(--font-body); }   /* heading lands at 1002/318 like the mockup; the padding only shows once the panel sits over the panorama */
.contact__head { position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.contact__head h4 { padding: 0; font-family: var(--font-body); font-weight: 700; font-size: 22rem; line-height: 26rem; text-transform: none; letter-spacing: 0; }
.contact__head h4::before { content: none; }
.contact__toggle { width: 26rem; height: 26rem; border: 0; background: none; cursor: pointer; position: relative; }
.contact__toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 8rem solid transparent; border-right: 8rem solid transparent; border-top: 9rem solid var(--green); transform: translate(-50%, -50%); transition: transform .25s ease; }
.contact.is-collapsed .contact__toggle::before { transform: translate(-50%, -50%) rotate(180deg); }
.contact__lead { margin-top: 4rem; font-size: 17rem; font-weight: 500; line-height: 22rem; }
.contact__fields { margin-top: 14rem; }
.contact.is-collapsed .contact__fields { display: none; }
.contact__field { margin-bottom: 10rem; }
.contact label { display: block; font-size: 15rem; font-weight: 700; line-height: 20rem; letter-spacing: .02em; }
.contact__opt { font-weight: 500; }
.contact input, .contact textarea {
  display: block; width: 100%; height: 34rem; padding: 0 10rem;
  border: max(1px, 1rem) solid #a9a9a9; border-radius: 5rem; background: var(--white); color: var(--black);
  font-family: var(--font-body); font-size: 17rem; font-weight: 500; line-height: 1.2;
  transition: border-color .2s ease;
}
.contact textarea { height: 88rem; padding: 8rem 10rem; resize: none; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: max(2px, 2rem) solid var(--green); outline-offset: 0; border-color: var(--green-dark); }
.contact [aria-invalid="true"] { border-color: var(--error); }
.contact__err { margin-top: 3rem; font-size: 14rem; font-weight: 500; line-height: 17rem; color: var(--error); }
.contact__err:empty, .contact__status:empty { display: none; }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__btn { display: flex; width: 100%; height: 36rem; margin: 10rem 0 0; border: 0; cursor: pointer; }
.contact.is-collapsed .contact__btn { margin-top: 30rem; width: 200rem; margin-left: 29rem; }
.contact__btn[disabled] { filter: grayscale(1); opacity: .6; cursor: default; box-shadow: none; }
.contact__status { margin-top: 10rem; font-size: 16rem; font-weight: 700; line-height: 20rem; }
.contact__status.is-ok { color: #0b7a48; }
.contact__status.is-error { color: var(--error); }
.contact__note { margin-top: 10rem; font-size: 13rem; font-weight: 500; line-height: 16rem; color: #444; }
.contact.is-collapsed .contact__note { margin-left: 29rem; width: 200rem; }

/* =====================================================================
   MOBILE (<= 760px): 1rem == 1px of a 430-wide artboard. Free-flow layout.
   ===================================================================== */
@media (max-width: 760px) {
  .in { width: 100%; padding: 0 22rem; }
  .l { padding-bottom: .06em; }

  /* hero */
  .hero { height: min(100svh, 860px); min-height: 640rem; }
  .hero__video { object-position: 55% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.72) 100%); }
  .hero .in { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: 96rem; }
  .hero__title { position: static; font-size: 62rem; letter-spacing: .04em; margin-bottom: 18rem; }
  .hero__band { position: static; width: auto; max-width: 100%; height: auto; padding: 11rem 14rem; font-size: 16rem; white-space: normal; line-height: 1.1; }
  .hero__btn { position: static; margin-top: 14rem; width: auto; height: 46rem; padding: 0 22rem; font-size: 20rem; }
  .btn { font-size: 20rem; }

  /* intro */
  .intro { height: auto; margin-top: 0; background: var(--black); color: var(--white); padding: 0 0 60rem; }
  .intro__band { display: none; }
  .intro .in { height: auto; display: flex; flex-direction: column; }
  .intro__house { position: relative; left: auto; top: auto; width: 100%; margin: 24rem 0 -4rem; order: 1; }
  .intro__text { position: relative; left: auto; top: auto; width: 100%; order: 2; }
  .intro__h2 { font-size: 38rem; margin-bottom: 22rem; }
  .intro__p { font-size: 20rem; line-height: 24rem; }
  .intro__family { position: relative; left: auto; top: auto; width: 94%; margin: 24rem auto 0; order: 3; }   /* 2026-10-09 notes: larger */
  .intro__bar { display: none; }
  .intro__bartext { position: relative; left: auto; top: auto; width: 100%; margin-top: 28rem; font-size: 20rem; line-height: 1.05; order: 4; }
  .ale { position: relative; left: auto; top: auto; width: 100%; height: auto; order: 5; margin-top: 40rem; display: grid; grid-template-columns: 64rem 1fr; column-gap: 16rem; align-items: center; background: var(--white); color: var(--black); padding: 18rem; }
  .ale__icon { position: static; width: 64rem; grid-row: 1 / span 2; }
  .ale__q { position: static; font-size: 20rem; white-space: normal; }
  .ale__btn { position: static; width: auto; height: 36rem; margin-top: 10rem; padding: 0 18rem; justify-self: start; }

  /* midway */
  .midway { display: flex; flex-direction: column; }
  .midway .in { height: auto; padding-top: 70rem; display: flex; flex-direction: column; align-items: center; text-align: center; }   /* 2026-10-09 notes: centred block */
  .midway__h2 { position: static; font-size: 50rem; }
  .midway__sub { position: static; font-size: 26rem; margin-top: 14rem; }
  .midway__phone { position: static; font-size: 54rem; margin-top: 12rem; }
  .midway__btn { position: static; width: auto; height: 40rem; padding: 0 24rem; margin-top: 12rem; }
  .midway__hand { position: relative; right: auto; top: auto; width: 78%; margin: 10rem 0 -40rem auto; -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,0) 96%); mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,0) 96%); }

  /* steps 1-6: the bust rises out of the black title bar and is cut at the bar's bottom edge, in the vacant
     space beside the title (text-left steps carry the figure on the right, text-right steps on the left), the
     same clip-box pattern as the invoice page: .step__top = --rise of white for the head + the bar; the figure
     is anchored to the bottom of that box and --sink pushes a baked-in fade tail below the bar. */
  .steps .in { height: auto; padding: 0; display: flex; flex-direction: column; }
  .steps__fade { display: none; }
  .step { position: relative; top: auto !important; height: auto !important; display: flex; flex-direction: column; margin-top: 28rem; }
  .step__bar { display: none; }
  .step__top { display: block; position: relative; overflow: hidden; padding-top: var(--rise, 70rem); }
  .step__figure { position: absolute !important; top: auto !important; bottom: calc(-1 * var(--sink, 0rem)); left: auto !important; right: auto; width: var(--fw, 190rem) !important; height: auto !important; margin: 0; overflow: visible; z-index: 3; transform: scaleX(var(--flip, 1)); }
  .step--left  .step__figure { right: var(--fx, 6rem); }
  .step--right .step__figure { left: var(--fx, 6rem); }
  .step__title { position: relative; left: auto !important; top: auto !important; min-height: 150rem; display: flex; flex-direction: column; justify-content: center; background: var(--black); font-size: 30rem; padding: 24rem 22rem; margin: 0; z-index: 2; }
  .step--left  .step__title { padding-right: calc(var(--fw, 190rem) + var(--fx, 6rem) + 12rem); }
  .step--right .step__title { padding-left: calc(var(--fw, 190rem) + var(--fx, 6rem) + 12rem); text-align: right; }
  /* --rise = (image height - --sink) - 150rem (the bar's min-height), so the whole head is always inside the box;
     a taller bar only adds white above the head, it can never crop it (2026-10-09: two Marty heads were cut) */
  .step--1 { --fw: 190rem; --rise: 60rem; --sink: 26.8rem; }    /* 504x630, body cut at row 558: 237 - 26.8 - 150 */
  .step--2 { --fw: 210rem; --rise: 113rem; }                    /* 478x598: 263 - 150 */
  .step--3 { --fw: 220rem; --rise: 84rem; --sink: 41.5rem; }    /* 652x815, body cut at row 691: 275 - 41.5 - 150 */
  .step--4 { --fw: 230rem; --fx: -10rem; --rise: 94rem; }       /* 648x686: 243 - 150 */
  .step--5 { --fw: 196rem; --fx: -8rem; --rise: 65rem; --flip: -1; }   /* faces the title (2026-10-09 note) */        /* 684x750: 215 - 150; slightly bigger per the notes */
  .step--6 { --fw: 200rem; --rise: 100rem; }                    /* 550x688: 250 - 150 */
  .step__body { position: relative; left: auto !important; top: auto !important; width: auto !important; padding: 24rem 22rem 20rem; font-size: 19rem; line-height: 1.1; text-align: left; }
  .step__list li { line-height: 24rem; }

  /* step 7: family in front of the house above a centred full-width bar; copy centred, the three points in columns */
  .step--7 .step__top { display: contents; }
  .step--7 .step__figure { position: relative !important; bottom: auto; width: 100% !important; margin-bottom: -24rem; order: 1; }
  .step--7 .step__title { order: 2; text-align: center; padding: 40rem 22rem 26rem; min-height: 0; display: block; }
  .step--7 .step__body { order: 3; text-align: center; }
  .step--7 .step__body > p br { display: none; }
  .step--7 .step__list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12rem; margin-top: 22rem; }
  .step--7 .step__list--plus li { margin-top: 0; padding-left: 0; line-height: 22rem; }
  .step--7 .step__list--plus li::before { position: static; display: block; margin-bottom: 4rem; color: var(--green-dark); }

  /* step 8: everything centred (2026-10-09 notes), Marty in the middle, closing line under him */
  .step--8 { background: linear-gradient(180deg, #fff 0%, var(--gray-fade) 30%, var(--gray-fade) 100%); padding-top: 50rem; margin-top: 30rem; }
  .step--8 .step__title { background: none; color: var(--black); font-size: 28rem; padding: 0 22rem; min-height: 0; display: block; order: 1; text-align: center; }
  .step--8 .step__body { order: 2; padding-bottom: 10rem; text-align: center; }
  .step--8 .step__figure { position: relative !important; bottom: auto; order: 3; width: 70% !important; margin: 10rem auto 0; }
  .step--8 .step__closing { order: 4; margin: 10rem 0 50rem; text-align: center; }

  /* coverage */
  .coverage .in { height: auto; padding-top: 70rem; padding-bottom: 70rem; display: flex; flex-direction: column; }
  .coverage__h2 { position: static; font-size: 62rem; }
  .coverage__band { position: static; width: auto; height: auto; margin: 24rem -22rem 0 0; padding: 14rem 18rem; }
  .coverage__band p { position: static; font-size: 19rem; }
  .coverage__body { position: static; width: auto; margin-top: 28rem; font-size: 16rem; line-height: 21rem; }
  .coverage__body p + p { margin-top: 18rem; }
  .coverage__shot { position: static; width: 100%; margin-top: 36rem; }

  /* footer */
  .footer .in { height: auto; padding: 50rem 0 calc(var(--vw) * 3 * 0.2229 * 0.85); display: block; }   /* room for the 300%-wide panorama */
  .footer__beach { left: 50%; bottom: 0; width: 300%; transform: translateX(-50%); }   /* the 3252-wide panorama: 300% keeps the house readable on phones */
  .footer__logo { position: static; display: block; width: 150rem; margin: 0 auto 26rem; }
  .footer__mission { position: static; width: auto; text-align: center; padding: 0 22rem; }
  .footer__mission-p { font-size: 17rem; line-height: 19rem; }
  .footer__mission-band { font-size: 17rem; line-height: 19rem; }
  .footer__mission-s { font-size: 12rem; line-height: 15rem; }
  .footer__social { position: static; width: auto; margin: 26rem auto 0; text-align: center; }
  .social { justify-content: center; }
  .social a { width: 40rem; height: 40rem; }
  .footer__cols { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10rem; margin: 34rem 0 0; padding: 0 22rem; }
  .footer__col { min-height: 0; padding-right: 0; }
  .footer__col + .footer__col { padding-left: 14rem; border-left: 1px solid var(--black); }
  .footer__col.footer__col--3 { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-right: 0; margin-top: 10rem; padding-top: 14rem; border-top: 1px solid var(--black); }
  .footer h4 { font-size: 16rem; line-height: 22rem; }
  .footer__col li, .footer__col address p { font-size: 15rem; line-height: 22rem; }
  .contact { position: relative; left: auto; top: auto; width: auto; margin: 30rem 22rem 0; padding: 18rem 16rem 16rem; background: rgba(255,255,255,.96); border: 1px solid #ddd; }
  .contact__lead { font-size: 17rem; line-height: 22rem; }
  .contact label { font-size: 16rem; line-height: 22rem; }
  .contact input, .contact textarea { height: 44rem; font-size: max(16px, 17rem); }   /* 16px floor: no zoom-on-focus in iOS */
  .contact textarea { height: 110rem; }
  .contact__btn, .contact.is-collapsed .contact__btn { width: 100%; height: 44rem; margin: 12rem 0 0; }
  .contact.is-collapsed .contact__note { margin-left: 0; width: auto; }
  .contact__err, .contact__note { font-size: 15rem; line-height: 19rem; }
}

/* =====================================================================
   Reduced motion: everything static and visible
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__video { display: none; }
  .hero__media { background: url("../assets/img/storm-poster.jpg?v=7bbd62cf") center / cover no-repeat; }
}