/* Homepage glass treatment. Shared navigation markup and copy stay intact. */
.home { --presentation-inset: clamp(24px,2.5vw,64px); }
.home .hdr {
  position: fixed; top: 16px; left: var(--presentation-inset); right: var(--presentation-inset); width: auto;
  border: 1px solid rgba(255,255,255,.5); border-radius: 18px;
  background: linear-gradient(120deg,rgba(255,255,255,.66),rgba(239,247,248,.36));
  -webkit-backdrop-filter: var(--liquid-filter,blur(0px)) blur(6px) saturate(1.15); backdrop-filter: var(--liquid-filter,blur(0px)) blur(6px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.2), 0 6px 24px rgba(24,42,46,.1);
}
.home .hdr-in { width: 100%; max-width: none; min-height: 72px; padding: 0 20px; gap: 32px; }
.home .hdr-logo img { height: 54px; }
.home .nav { margin-left: 0; gap: 8px; font-size: 14px; }
.home .nav-link, .home .nav-btn { padding: 11px 13px; border-radius: 12px; color: #263b42; transition: background .18s ease; }
.home .nav-link:hover, .home .nav-btn:hover, .home .nav-item.open > .nav-btn { background: rgba(255,255,255,.65); }
.home .hdr-right { margin-left: 0; }
.home .hdr .btn-primary { min-height: 46px; padding: 0 20px; border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 3px 8px rgba(120,36,31,.12); }
.home .hdr :is(a,button):focus-visible { outline: 3px solid #246a83; outline-offset: 3px; }
.home .hdr .menu { top: calc(100% + 18px); left: 0; border-radius: 18px; padding: 12px 0; background: #f6f9f9; border-color: #d8e2e4; box-shadow: 0 16px 40px rgba(22,42,48,.18); }
.home .hdr .menu a:hover { background: #e5eef0; }
.home .hp-scroll-story { --story-header: 0px; }
.home .hp-scroll-copy-flow .hp-flow-content { padding-top: 132px; }
.home .hp-flow-intro { position: relative; min-height: calc(100svh - 132px); }
.home .hp-flow-intro > .wrap { width: 100%; max-width: none; padding: 0 var(--presentation-inset); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message,
.home main > .hp-hero-background .hp-hero-in {
  width: 100%; margin: 0; padding: 30px 34px; border-radius: 24px;
  border: 1px solid rgba(255,255,255,.42);
  background: linear-gradient(125deg,rgba(248,253,255,.53),rgba(240,248,250,.18) 62%,rgba(255,255,255,.27));
  -webkit-backdrop-filter: var(--liquid-filter,blur(0px)) blur(1.3px) saturate(1.08) brightness(1.08);
  backdrop-filter: var(--liquid-filter,blur(0px)) blur(1.3px) saturate(1.08) brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 1px 0 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.2), 0 12px 32px rgba(18,36,43,.1);
}
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message::before { opacity: .8; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message::after { background: radial-gradient(ellipse at var(--glass-light-x,8%) var(--glass-light-y,0%),rgba(255,255,255,.16),transparent 60%); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1,
.home main > .hp-hero-background .hp-hero-in h1 { font-size: clamp(38px,3.3vw,50px); line-height: 1.04; letter-spacing: -.035em; margin-top: 12px; max-width: none; text-wrap: balance; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-eyebrow { color: #304b54; font-size: 10px; letter-spacing: .15em; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body { font-size: 18px; line-height: 1.5; margin-top: 20px; color: #213c47; max-width: 740px; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .btn { min-height: 54px; border-radius: 12px; padding-inline: 24px; font-size: 16px; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-act-note { font-size: 11px; line-height: 1.45; max-width: 180px; margin: 0; color: #304b54; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(51,77,85,.18); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-support { font-size: 12px; line-height: 1.5; color: #30454c; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message h1 { text-wrap: balance; }
/* Static/reduced-motion version uses the same presentation. */
.home main > .hp-hero-background { padding-top: 132px; min-height: 100svh; grid-template-rows: max-content max-content; align-content: start; }
.home main > .hp-hero-background .hp-hero-in { width: calc(100% - 2*var(--presentation-inset)); margin-left: var(--presentation-inset); min-height: 0; height: auto; flex: none; align-self: start; justify-content: flex-start; }
/* One reading sequence on the shared glass surface. */
@media(min-width:1100px) {
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message {
    display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: 'eyebrow' 'title' 'body' 'actions' 'foot';
    row-gap: 18px; align-items: start;
  }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-eyebrow { grid-area: eyebrow; margin: 0; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1 { grid-area: title; margin: 0; max-width: none; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body { grid-area: body; margin: 0; max-width: 760px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-actions {
    grid-area: actions; margin: 4px 0 0;
  }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-act-note { max-width: 230px; font-size: 12px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-foot { grid-area: foot; margin-top: 10px; padding-top: 20px; }
}
.home .hp-hero-support { width: 100%; }
.home .hp-hero-support > span { display: inline-flex; gap: 10px; align-items: center; }
.home .hp-hero-support svg { width: 20px; height: 20px; flex: none; color: #a6332c; }
@media(min-width:768px) {
  .home .hp-hero-support { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .home .hp-hero-support > span + span { border-left: 1px solid rgba(51,77,85,.18); padding-left: 24px; }
}
@media(max-width:767px) {
  .home .hp-hero-support { display: flex; flex-direction: column; gap: 9px; }
}
@media (min-width:981px) {
  .home .hdr-in { display: grid; grid-template-columns: minmax(160px,1fr) auto minmax(200px,1fr); gap: 16px; padding: 0 20px; min-height: 72px; }
  .home .hdr-logo { justify-self: start; }
  .home .hdr-right { justify-self: end; }
}
/* The next chapter supplies the scroll link's accessible name. */
.home .hp-scene-scroll-cue { position: absolute; bottom: 28px; right: var(--presentation-inset); width: 44px; height: 64px; border-radius: 22px; border: 1px solid rgba(255,255,255,.55); background: rgba(239,248,250,.3); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.65); pointer-events: auto; }
.home .hp-scene-scroll-cue:hover { background: rgba(239,248,250,.65); }
.home .hp-scene-scroll-cue:focus-visible { outline: 3px solid #246a83; outline-offset: 4px; }
.home .hp-scene-scroll-cue::before { content: ''; position: absolute; left: 19px; top: 14px; width: 1px; height: 29px; background: #253e47; }
.home .hp-scene-scroll-cue::after { content: ''; position: absolute; left: 15px; top: 34px; width: 9px; height: 9px; border-right: 1px solid #253e47; border-bottom: 1px solid #253e47; transform: rotate(45deg); }
@media (min-width:981px) and (max-width:1180px) {
  .home .hdr-in { gap: 12px; padding-inline: 14px; }
  .home .nav { gap: 0; }
  .home .nav-link, .home .nav-btn { padding-inline: 8px; font-size: 13px; }
  .home .hdr-logo img { height: 40px; }
  .home .hdr .btn-primary { padding-inline: 14px; font-size: 13px; }
}
@media (max-width:980px) {
  .home .hdr { top: 12px; left: 16px; right: 16px; border-radius: 18px; }
  .home .hdr-in { min-height: 64px; padding-inline: 14px; gap: 12px; }
  .home .hdr-logo img { height: 40px; }
  .home .hdr-right { margin-left: auto; gap: 8px; }
  .home .menu-btn { min-height: 44px; border-radius: 11px; background: rgba(255,255,255,.5); border-color: rgba(49,73,83,.22); }
  .home .nav.open { top: calc(100% + 10px); left: -1px; right: -1px; margin: 0; padding: 12px 24px; max-height: calc(100dvh - 108px); border: 1px solid #d5e0e2; border-radius: 18px; background: #f6f9f9; }
  .home .nav.open .menu { padding: 0 0 8px; box-shadow: none; background: transparent; }
  .home .nav.open .nav-link { border-radius: 0; }
  .home .hp-scroll-copy-flow .hp-flow-content { padding-top: 100px; }
  .home .hp-flow-intro { min-height: calc(100svh - 100px); }
  .home .hp-flow-intro > .wrap { padding-inline: 24px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message { width: 100%; }
}
@media (max-width:767px) {
  .home .hp-scene-scroll-cue { bottom: 16px; right: 16px; height: 56px; }
  .home .hp-hero-background .hp-opening-photo { background: #dce6e8; }
  .home .hdr { top: 10px; left: 12px; right: 12px; }
  .home .hdr-in { min-height: 60px; padding-inline: 12px; }
  .home .hdr-logo img { height: 34px; }
  .home .hdr-right > .btn { display: none; } /* Primary action remains in the hero. */
  .home .menu-btn { min-height: 40px; padding-inline: 14px; font-size: 13px; }
  .home .hp-scroll-copy-flow .hp-flow-content { padding-top: 88px; }
  .home .hp-flow-intro { min-height: calc(100svh - 88px); }
  .home .hp-flow-intro > .wrap { padding-inline: 16px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message,
  .home main > .hp-hero-background .hp-hero-in { width: 100%; padding: 22px; border-radius: 24px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1 { font-size: clamp(32px,8.5vw,42px); margin-top: 10px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body { font-size: 14px; margin-top: 14px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-actions { margin-top: 18px; gap: 9px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-act-note { max-width: none; font-size: 11px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-foot { margin-top: 14px; padding-top: 12px; }
  .home main > .hp-hero-background { padding: 88px 16px 20px; }
  .home main > .hp-hero-background .hp-hero-in { width: 100%; margin: 0; }
  .home main > .hp-hero-background .hp-hero-in h1 { font-size: clamp(32px,8.5vw,42px); }
  .home main > .hp-hero-background .hp-hero-foot { margin: 14px 0 0; padding: 14px; border-radius: 16px; align-self: start; background: rgba(238,245,247,.85); }
  .home .hp-intro-drawing-note { color: #526a73; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home .hdr { background: #eaf1f3; } /* the cards fall back through --card-tint in card.css */
}
@media (prefers-reduced-motion: reduce) {
  .home .nav-link, .home .nav-btn { transition: none; }
}

/* The opening two chapters form one visible reading sequence over the scene. */
.home .hp-scroll-copy-flow .hp-flow-intro { min-height: 0; }
.home .hp-scroll-copy-flow .hp-flow-estimate { margin-top: calc(24px - clamp(120px,24svh,240px)); }
.home .hp-scroll-copy-flow .hp-flow-estimate > .wrap { width: 100%; max-width: none; padding: 0 var(--presentation-inset); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message {
  width: min(960px,78vw); margin-left: 0; padding: 28px 34px; border-radius: 24px;
  border-color: rgba(255,255,255,.45);
  background: linear-gradient(125deg,rgba(246,252,255,.68),rgba(229,242,246,.42));
  -webkit-backdrop-filter: var(--liquid-filter,blur(0px)) blur(4px) saturate(1.1);
  backdrop-filter: var(--liquid-filter,blur(0px)) blur(4px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),0 10px 28px rgba(18,36,43,.1);
}
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate h2 { font-size: clamp(28px,2.5vw,36px); }
.home .hp-flow-intro .hp-scene-scroll-cue { display: none; }
/* From the operation chapter onward, keep a single left-aligned reading column. */
.home .hp-scroll-copy-flow .hp-flow-content > .hp-flow-chapter:not(.hp-story-close) > .wrap {
  width: 100%; max-width: none; padding-inline: var(--presentation-inset); display: block;
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) {
  width: min(960px,78vw); margin-left: 0; margin-right: auto;
}
@media(max-width:980px) {
  .home .hp-scroll-copy-flow .hp-flow-estimate > .wrap { padding-inline: 24px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message { width: 100%; }
  .home .hp-scroll-copy-flow .hp-flow-content > .hp-flow-chapter:not(.hp-story-close) > .wrap { padding-inline: 24px; }
  .home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) { width: 100%; }
}
@media(max-width:767px) {
  .home .hp-scroll-copy-flow .hp-flow-estimate { margin-top: calc(16px - clamp(120px,24svh,240px)); }
  .home .hp-scroll-copy-flow .hp-flow-estimate > .wrap { padding-inline: 16px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message { padding: 22px; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate h2 { font-size: 28px; }
  .home .hp-scroll-copy-flow .hp-flow-content > .hp-flow-chapter:not(.hp-story-close) > .wrap { padding-inline: 16px; }
}

/* Frost the reading surfaces while the photograph supplies colour and depth. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message,
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card),
.home main > .hp-hero-background .hp-hero-in {
  background: linear-gradient(125deg,rgba(248,252,254,.76),rgba(236,245,248,.58));
  -webkit-backdrop-filter: var(--liquid-filter,blur(0px)) blur(16px) saturate(1.08);
  backdrop-filter: var(--liquid-filter,blur(0px)) blur(16px) saturate(1.08);
}

/* First screen (2026-09-20, Eugene's mockup): one wide glass card across the top of the photograph,
   a heavy one-line headline, one large red action. Later chapters start below the fold. */
.home { --page-max: 1700px; --presentation-inset: max(clamp(24px,2.5vw,64px), calc((100vw - var(--page-max)) / 2)); --hero-red: var(--red,#B7352D); }
.home .hp-scroll-copy-flow .hp-flow-intro { min-height: calc(100svh - 132px); display: flex; align-items: flex-start; }
.home .hp-scroll-copy-flow .hp-flow-estimate { margin-top: 24px; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-actions { flex-direction: column; align-items: flex-start; gap: clamp(18px,2.4vw,44px); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-act-note { max-width: none; font-size: clamp(14px,1.15vw,22px); color: #111; }
/* The supporting line is not shown in this first screen; its point now sits in the body sentence. */
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-foot,
.home main > .hp-hero-background > .hp-hero-foot { display: none; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-eyebrow { font-size: clamp(12px,1.05vw,20px); font-weight: 600; letter-spacing: .01em; color: #111; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-eyebrow::before { display: none; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1,
.home main > .hp-hero-background .hp-hero-in h1 { font-weight: 700; color: #0b0b0b; letter-spacing: -.01em; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body { color: #111; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .btn-primary,
.home main > .hp-hero-background .hp-hero-in .btn-primary { background: var(--hero-red); border-color: var(--hero-red); font-weight: 700; }
/* Type and rhythm for the first screen. Spacing is set per element, so the grid adds none.
   Eyebrow sits tight to the headline; the note belongs to the button, so it sits close under it. */
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message { row-gap: 0; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-eyebrow { margin: 0; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; color: #1b1b1b; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1,
.home main > .hp-hero-background .hp-hero-in h1 { margin: clamp(12px,1vw,20px) 0 0; font-weight: 800; letter-spacing: -.025em; line-height: 1.03; color: #0C141C; } /* same blue-black family as the header */
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body { margin: clamp(14px,1.15vw,22px) 0 0; color: #161616; text-wrap: balance; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-actions { margin: clamp(24px,2.1vw,40px) 0 0; gap: clamp(12px,.9vw,16px); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-act-note { font-size: clamp(14px,1vw,18px); line-height: 1.4; color: #2a2a2a; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .btn-primary { box-shadow: 0 6px 18px rgba(170,8,8,.28); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
@media (min-width:981px) {
  .home .hdr-in { grid-template-columns: auto minmax(0,1fr) auto; gap: 24px; }
  .home .nav { justify-self: end; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message {
    width: 100%; padding: var(--card-pad); border-radius: var(--card-radius);
    background: linear-gradient(125deg,rgba(255,255,255,.66),rgba(255,255,255,.52));
    -webkit-backdrop-filter: var(--liquid-filter,blur(0px)) blur(.6px) saturate(1.05);
    backdrop-filter: var(--liquid-filter,blur(0px)) blur(.6px) saturate(1.05);
  }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1 { font-size: clamp(40px,4vw,80px); max-width: none; text-wrap: balance; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body { font-size: clamp(18px,1.5vw,28px); line-height: 1.35; max-width: none; }
  .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .btn { min-height: clamp(56px,3.7vw,72px); padding-inline: clamp(32px,3.6vw,68px); font-size: clamp(17px,1.25vw,24px); border-radius: 12px; margin-top: 0; }
  /* Wide screens crop the photograph top and bottom: keep the forklift, give up skyline. */
  .home .hp-opening-photo img { object-position: 70% 88%; }
}
@media (max-width:980px) {
  .home .hp-scroll-copy-flow .hp-flow-intro { min-height: calc(100svh - 100px); }
}
@media (max-width:767px) {
  .home .hp-scroll-copy-flow .hp-flow-intro { min-height: calc(100svh - 88px); }
  .home .hp-scroll-copy-flow .hp-flow-estimate { margin-top: 16px; }
}

/* Header (Eugene, 2026-09-20): solid dark, full width, flush to the top, white logo. Its content keeps the page
   column, so the logo and the button land on the opening card's outer edges. */
.home .hdr {
  top: 0; left: 0; right: 0; border: 0; border-radius: 0;
  background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 16px rgba(8,14,17,.28);
}
.home .hdr-in { padding-inline: var(--presentation-inset); }
.home .nav-link, .home .nav-btn { color: #f2f5f6; font-weight: 600; }
.home .nav-link:hover, .home .nav-btn:hover, .home .nav-item.open > .nav-btn { background: rgba(255,255,255,.12); }
.home .hdr :is(a,button):focus-visible { outline-color: #8fd0e6; }
.home .menu-btn { color: #f2f5f6; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
/* The open phone menu is a light sheet: its links go back to dark. */
.home .nav.open .nav-link, .home .nav.open .nav-btn { color: #1b2428; }
.home .hdr .btn-primary { border-radius: 12px; font-weight: 700; }
@media (min-width:981px) {
  .home .hdr-in { min-height: clamp(72px,4.4vw,84px); }
  .home .hdr-logo img { height: clamp(48px,3.1vw,60px); }
  .home .nav { font-size: clamp(14px,.95vw,17px); gap: clamp(4px,.6vw,14px); }
  .home .hdr .btn-primary { min-height: clamp(44px,2.7vw,52px); padding-inline: clamp(18px,1.5vw,28px); font-size: clamp(14px,.95vw,17px); }
  .home .hp-scroll-copy-flow .hp-flow-content { padding-top: calc(clamp(72px,4.4vw,84px) + 28px); }
  .home .hp-scroll-copy-flow .hp-flow-intro { min-height: calc(100svh - clamp(72px,4.4vw,84px) - 28px); }
}
@media (min-width:981px) and (max-width:1180px) {
  .home .nav-link, .home .nav-btn { font-size: 13px; }
  .home .hdr-logo img { height: 40px; }
}
@media (max-width:980px) {
  .home .hdr { top: 0; left: 0; right: 0; border-radius: 0; }
  .home .hdr-in { padding-inline: 24px; }
  .home .hp-scroll-copy-flow .hp-flow-content { padding-top: 84px; }
}
@media (max-width:767px) {
  .home .hdr { top: 0; left: 0; right: 0; }
  .home .hdr-in { padding-inline: 16px; }
  .home .hp-scroll-copy-flow .hp-flow-content { padding-top: 76px; }
}

/* Opening photograph (Eugene, 2026-09-20): full screen at rest; the first scroll zooms it out and
   pushes it right. --opening-zoom (0 to 1, set by hero-scroll.js) drives one composited transform and
   the feather, so nothing re-lays-out while it moves and every edge melts into the scene's own
   background colour. The registered camera reads the transformed box, so the model follows it. */
@media (min-width:981px) {
  .home .hp-hero-background .hp-opening-photo { background: #E9EEEF; }
  .home .hp-opening-photo::after { background: none; }
  .home .hp-opening-photo img {
    --z: var(--opening-zoom,0);
    transform-origin: 100% 50%; will-change: transform;
    transform: translate3d(calc(max(0px, var(--presentation-inset) - 64px) * -1 * var(--z)), calc(36px * var(--z)), 0) scale(calc(1 - .27 * var(--z)));
    -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 calc(20% * var(--z)),#000 calc(100% - 10% * var(--z)),transparent 100%), linear-gradient(180deg,transparent 0,#000 calc(16% * var(--z)),#000 calc(100% - 16% * var(--z)),transparent 100%);
    mask-image: linear-gradient(90deg,transparent 0,#000 calc(20% * var(--z)),#000 calc(100% - 10% * var(--z)),transparent 100%), linear-gradient(180deg,transparent 0,#000 calc(16% * var(--z)),#000 calc(100% - 16% * var(--z)),transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .home .hp-intro-drawing-note { color: #526a73; }
}

/* Second message (Eugene, 2026-09-20): the hero's pattern on tinted glass. Same eyebrow, heavy
   headline, large red action and close note; the surface is the header's charcoal blue, translucent,
   still refracting the scene behind it. */
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message {
  /* Same box as the hero card: full page column, same side padding, so the two text edges line up. */
  width: 100%; padding: var(--card-pad); border-radius: var(--card-radius);
  border: 1px solid rgba(255,255,255,.16);
  background: var(--card-tint); /* the header's navy, lifted and more chromatic so it stays blue when thin */
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--card-shadow);
}
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-eyebrow { margin: 0; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; color: #c9d6de; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-eyebrow::before { display: none; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate h2 { margin: clamp(10px,.9vw,18px) 0 0; font-size: clamp(32px,3vw,58px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; color: #fff; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .promise { margin: clamp(12px,1vw,20px) 0 0; font-size: clamp(17px,1.3vw,24px); line-height: 1.4; color: #e4ebef; max-width: 34em; text-wrap: balance; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-est-intro-actions { margin: clamp(22px,1.9vw,36px) 0 0; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .btn-primary {
  min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); font-weight: 700; border-radius: 12px;
  background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-estimate-note { margin: clamp(12px,.9vw,16px) 0 0; font-size: clamp(14px,1vw,18px); line-height: 1.4; color: #dbe5ea; text-shadow: 0 1px 2px rgba(10,18,26,.35); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate :is(a,button):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }
@media (max-width:980px) { .home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message { width: 100%; } }
/* Gap between the hero card and the second card (Eugene, 2026-09-20): a set distance, not a full
   screen. The second card now shows its top edge above the fold on tall screens. */
@media (min-width:981px) {
  .home .hp-scroll-copy-flow .hp-flow-intro { min-height: 0; }
  .home .hp-scroll-copy-flow .hp-flow-estimate { margin-top: clamp(96px,18svh,220px); }
  /* Every following card keeps the same distance as the first pair (Eugene, 2026-09-20). */
  .home .hp-scroll-copy-flow .hp-flow-content > .hp-flow-chapter:not(.hp-story-close) { margin-top: clamp(96px,18svh,220px); }
}

/* No pointer effects on the glass cards (Eugene, 2026-09-20): the highlight stays where it rests.
   !important because liquid-glass.js writes these as inline custom properties on pointer move. */
.home :is(.hp-flow-message,.hp-plan-summary,.hp-story-card) { --glass-light-x: 18% !important; --glass-light-y: 0% !important; --glass-light-angle: 135deg !important; }

/* Hero card on the same tinted glass as the second card (Eugene, 2026-09-20): one surface for both.
   Covers the scroll-story card and the static (no-scene / reduced-motion) card. */
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message,
.home main > .hp-hero-background .hp-hero-in {
  border: 1px solid rgba(255,255,255,.16);
  background: var(--card-tint);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--card-shadow);
}
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-eyebrow,
.home main > .hp-hero-background .hp-hero-in .hp-eyebrow { color: #dbe5ea; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro h1,
.home main > .hp-hero-background .hp-hero-in h1 { color: #fff; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-hero-body,
.home main > .hp-hero-background .hp-hero-in .hp-hero-body { color: #eef3f6; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-act-note,
.home main > .hp-hero-background .hp-hero-in .hp-act-note { color: #dbe5ea; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .btn-primary { box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro :is(a,button):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }
/* Both tinted cards: a soft shadow keeps white type readable where the glass runs thin over bright panels. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message :is(h1,h2,p),
.home main > .hp-hero-background .hp-hero-in :is(h1,p) { text-shadow: 0 1px 3px rgba(10,18,40,.45); }
/* Type colours on both tinted cards (Eugene, 2026-09-20): eyebrow FPT red, headline black,
   subheader white, action FPT red (via --hero-red above). */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message .hp-eyebrow,
.home main > .hp-hero-background .hp-hero-in .hp-eyebrow { color: var(--red,#B7352D); text-shadow: none; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message h1,
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message h2,
.home main > .hp-hero-background .hp-hero-in h1 { color: #0b0b0b; text-shadow: none; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message .hp-hero-body,
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-estimate .hp-flow-message .promise,
.home main > .hp-hero-background .hp-hero-in .hp-hero-body { color: #fff; }

/* Tinted cards (Eugene, 2026-09-20): no outline of any kind (border, bright rim, inner edge glow);
   only the soft drop shadow lifts them. Eyebrows are white with the brand's red dash in front. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message,
.home main > .hp-hero-background .hp-hero-in { border: 0; box-shadow: var(--card-shadow); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message::before { opacity: 0; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message::after { box-shadow: none; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message .hp-eyebrow,
.home main > .hp-hero-background .hp-hero-in .hp-eyebrow { color: #fff; display: inline-flex; align-items: center; gap: 12px; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate) .hp-flow-message .hp-eyebrow::before,
.home main > .hp-hero-background .hp-hero-in .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }

/* Third and fourth cards on the same tinted glass (Eugene, 2026-09-20): same box, no outline,
   white eyebrow with red dash, black headline, white text, FPT red action. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) {
  width: 100%; padding: var(--card-pad); border-radius: var(--card-radius); border: 0;
  background: var(--card-tint);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow); color: #fff;
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card)::before { opacity: 0; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card)::after { box-shadow: none; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) .hp-eyebrow { color: #fff; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) h2 { font-size: clamp(32px,3vw,58px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; color: #0b0b0b; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) :is(p,li,dd,dt,summary,.lbl,.d) { color: #fff; text-shadow: 0 1px 3px rgba(10,18,40,.45); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) :is(.promise,.intro) { font-size: clamp(17px,1.3vw,24px); line-height: 1.4; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) :is(h3,h3 a,.t) { color: #0b0b0b; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) a.go { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) :is(.hp-estimate-note,.lbl) { color: #dbe5ea; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-plan-summary .hp-plan-benefits li { border-color: rgba(255,255,255,.45); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card :is(.hp-room,.hp-part,.hp-room-parts) { background: transparent; border-color: rgba(255,255,255,.3); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) .btn-primary {
  min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); font-weight: 700; border-radius: 12px;
  background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) :is(a,button,summary):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }
/* Closing scroll room (Eugene, 2026-09-20): a little shorter than the shared 280svh / 1500px. */
.home .hp-finish-runway { height: 70svh; min-height: 480px; } /* only a hold on the finished photograph now */

/* Card 4, the delivery beat: same tinted card as the others; its one text link reads white. */
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card .hp-est-intro-actions { margin: clamp(22px,1.9vw,36px) 0 0; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card .promise { margin: clamp(12px,1vw,20px) 0 0; max-width: 34em; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card h2 { margin: clamp(10px,.9vw,18px) 0 0; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card .hp-estimate-note { margin: clamp(12px,.9vw,16px) 0 0; font-size: clamp(14px,1vw,18px); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card .hp-estimate-note a.go { color: #fff; }

/* SCENE TWO (Eugene, 2026-09-20): the static, convincing half of the page. It carries the story's type
   system (heavy black headlines, eyebrow with red dash, large FPT-red action) on plain light ground:
   no glass, because there is no scene behind it to look through. Static images only. */
.home .hp-two { background: #F3F6F7; padding-block: clamp(72px,8vw,136px); }
.home .hp-two + .hp-two { border-top: 1px solid #E1E7EA; }
.home .hp-two.hp-build-sec, .home .hp-two.hp-contact { background: #E9EEEF; }
.home .hp-two > .wrap { width: 100%; max-width: none; padding-inline: var(--presentation-inset); }
.home .hp-two .hp-eyebrow { margin: 0; color: #1b1b1b; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; }
.home .hp-two .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home .hp-two h2 { margin: clamp(10px,.9vw,18px) 0 0; font-size: clamp(32px,3vw,58px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; color: #0C141C; max-width: 18em; text-wrap: balance; }
.home .hp-two h3 { font-size: clamp(21px,1.6vw,30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #0C141C; margin: 0; }
.home .hp-two h3 a { color: inherit; text-decoration: none; }
.home .hp-two h3 a:hover { text-decoration: underline; text-decoration-color: var(--red,#B7352D); text-underline-offset: 4px; }
.home .hp-two p { color: #25343d; font-size: clamp(16px,1.1vw,20px); line-height: 1.5; }
.home .hp-two .hp-two-intro { margin: clamp(12px,1vw,20px) 0 0; font-size: clamp(17px,1.3vw,24px); line-height: 1.4; max-width: 34em; }
.home .hp-two .hp-two-action { margin-top: clamp(36px,3.4vw,64px); }
.home .hp-two .btn-primary {
  min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); font-weight: 700; border-radius: 12px;
  background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(120,20,16,.22);
}
.home .hp-two .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
.home .hp-two a.go { color: #0C141C; font-weight: 700; }

/* Proof: the two records are the biggest thing in the section. */
.home .hp-two.hp-work .hp-recs { margin-top: clamp(32px,3.2vw,60px); gap: 0 clamp(32px,4vw,80px); }
.home .hp-two.hp-work .hp-rec { padding: clamp(24px,2.2vw,40px) 0; }
.home .hp-two.hp-work .hp-rec .n { font-size: clamp(64px,7vw,132px); font-weight: 800; letter-spacing: -.04em; line-height: .95; color: #0C141C; }
.home .hp-two.hp-work .hp-rec .n small { font-size: .2em; font-weight: 700; letter-spacing: .04em; margin-left: .5em; color: #4a5a64; }
.home .hp-two.hp-work .hp-rec dt { font-size: clamp(11px,.8vw,14px); letter-spacing: .09em; text-transform: uppercase; color: #5a6a74; }
.home .hp-two.hp-work .hp-rec dd { font-size: clamp(16px,1.15vw,21px); font-weight: 600; color: #0C141C; }
.home .hp-two-operators { margin-top: clamp(36px,3.4vw,64px); padding-top: clamp(28px,2.6vw,48px); border-top: 1px solid #D5DEE2; max-width: 46em; }
.home .hp-two-operators p { margin: 12px 0 0; }

/* What we build: three image cards linking to the spoke pages. */
.home .hp-build-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,2.2vw,40px); margin-top: clamp(32px,3.2vw,60px); }
.home .hp-build { display: flex; flex-direction: column; }
.home .hp-build-img { display: block; border-radius: clamp(16px,1.4vw,26px); overflow: hidden; aspect-ratio: 4 / 3; background: #d9e1e4; }
.home .hp-build-img picture { display: block; width: 100%; height: 100%; }
.home .hp-build-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.home .hp-build:hover .hp-build-img img { transform: scale(1.03); }
.home .hp-build .lbl { margin-top: clamp(18px,1.6vw,28px); font-size: clamp(11px,.8vw,14px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red,#B7352D); }
.home .hp-build h3 { margin-top: 8px; }
.home .hp-build p { margin: 10px 0 0; flex: 1; }
.home .hp-build a.go { margin-top: 16px; align-self: flex-start; }
.home .hp-two-parts { margin-top: clamp(48px,4.6vw,88px); padding-top: clamp(28px,2.6vw,48px); border-top: 1px solid #CBD6DB; }
.home .hp-two-parts > p { margin: 10px 0 clamp(20px,2vw,36px); }
.home .hp-two-parts .hp-part .t { font-weight: 800; }

/* FAQ and contact take the same headline; their inner layouts stay as they were. */
.home .hp-two.hp-faq .faq summary { font-size: clamp(17px,1.25vw,22px); font-weight: 700; color: #0C141C; }

@media (max-width:980px) {
  .home .hp-two > .wrap { padding-inline: 24px; }
  .home .hp-build-grid { grid-template-columns: 1fr; gap: 40px; }
  .home .hp-build-img { aspect-ratio: 16 / 10; }
}
@media (max-width:767px) {
  .home .hp-two > .wrap { padding-inline: 16px; }
  .home .hp-two.hp-work .hp-recs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .home .hp-build-img img { transition: none; } .home .hp-build:hover .hp-build-img img { transform: none; } }

/* Four service cards (Eugene, 2026-09-20): hero = system design, then equipment specification, installation,
   service. Cards 3 and 4 share one inner rhythm; every card carries the action, 2 and 3 add a spoke link. */
.home .hp-scroll-copy-flow .hp-flow-content .hp-plan-summary h2 { margin: clamp(10px,.9vw,18px) 0 0; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-plan-summary .promise { margin: clamp(12px,1vw,20px) 0 0; max-width: 40em; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-plan-summary .hp-est-intro-actions { margin: clamp(22px,1.9vw,36px) 0 0; }
.home .hp-scroll-copy-flow .hp-flow-content .hp-plan-summary .hp-estimate-note { margin: clamp(12px,.9vw,16px) 0 0; font-size: clamp(14px,1vw,18px); }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) .hp-estimate-note a.go { color: #fff; font-weight: 700; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) .promise { max-width: 40em; }

/* ONE TYPE SYSTEM FOR THE FOUR STORY CARDS (Eugene, 2026-09-20). The hero and the three cards below it had
   drifted into different sizes, weights and measures. Everything here is set once, for all four, and comes
   last so it wins: eyebrow, headline, body, action, note, and the space between them. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) {
  --card-eyebrow: clamp(12px,.95vw,17px); --card-head: clamp(34px,3.1vw,60px); --card-body: clamp(17px,1.3vw,24px);
  --card-note: clamp(14px,1vw,18px); --card-action: clamp(17px,1.2vw,22px);
  display: block; row-gap: 0;
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) .hp-eyebrow {
  margin: 0; font-size: var(--card-eyebrow); font-weight: 700; letter-spacing: .09em; line-height: 1.3; color: #fff;
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) :is(h1,h2) {
  margin: clamp(10px,.9vw,18px) 0 0; font-size: var(--card-head); font-weight: 800; letter-spacing: -.025em; line-height: 1.06;
  color: #0b0b0b; max-width: none; text-wrap: balance; text-shadow: none;
}
/* One reading measure (about 75 characters) and no stranded last word. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) :is(.hp-hero-body,.promise) {
  margin: clamp(12px,1vw,20px) 0 0; font-size: var(--card-body); font-weight: 400; line-height: 1.45; color: #fff;
  max-width: 38em; text-wrap: pretty;
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) :is(.hp-hero-actions,.hp-est-intro-actions) {
  margin: clamp(22px,1.9vw,36px) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px,.9vw,16px);
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) .btn-primary {
  min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); margin: 0; font-size: var(--card-action); font-weight: 700;
  border-radius: 12px; background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) :is(.hp-act-note,.hp-estimate-note) {
  margin: clamp(12px,.9vw,16px) 0 0; font-size: var(--card-note); font-weight: 400; line-height: 1.4; color: #dbe5ea; max-width: 38em;
}
.home .hp-scroll-copy-flow .hp-flow-content .hp-flow-intro .hp-flow-message .hp-act-note { margin-top: 0; } /* already spaced by the actions gap */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card) :is(.hp-act-note,.hp-estimate-note) a.go {
  color: #fff; font-weight: 700; font-size: inherit;
}

/* HOLD-BACK CARDS (Eugene, 2026-09-20): ten side-scrolling answers right after the story. The reverse of the
   story cards: a dark navy ground (a static photograph under the header's navy) with LIGHT liquid-glass cards.
   Native horizontal scrolling with snap; the arrow buttons are a convenience, the track is keyboard scrollable. */
.home .hp-holds {
  --hold-gap: clamp(16px,1.6vw,28px); position: relative; padding-block: clamp(72px,8vw,136px); overflow: hidden; color: #fff;
  background: linear-gradient(180deg,rgba(30,42,71,.70),rgba(22,31,56,.82)), url(/images/concept-v4/cold-hall-800.webp) center / cover no-repeat var(--navy);
}
.home .hp-holds-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px 32px; padding-inline: var(--presentation-inset); }
.home .hp-holds .hp-eyebrow { grid-column: 1 / -1; margin: 0; color: #fff; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; }
.home .hp-holds .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home .hp-holds h2 { margin: 0; font-size: clamp(34px,3.1vw,60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: #fff; max-width: 16em; text-wrap: balance; }
.home .hp-holds-nav { display: flex; gap: 10px; }
.home .hp-holds-btn { width: clamp(44px,3vw,56px); height: clamp(44px,3vw,56px); border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.home .hp-holds-btn:hover { background: rgba(255,255,255,.18); }
.home .hp-holds-btn[disabled] { opacity: .35; cursor: default; }
.home .hp-holds-track {
  list-style: none; margin: clamp(32px,3.2vw,60px) 0 0; padding: 8px var(--presentation-inset) 28px; display: flex; gap: var(--hold-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--presentation-inset);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.home .hp-holds-track::-webkit-scrollbar { display: none; }
.home .hp-holds-track:focus-visible { outline: 3px solid #8fd0e6; outline-offset: -3px; }
.home .hp-hold {
  flex: 0 0 min(430px, 82vw); scroll-snap-align: start; box-sizing: border-box; min-height: clamp(300px,24vw,380px);
  padding: var(--card-light-pad); border-radius: var(--card-light-radius);
  background: var(--card-light-tint);
  -webkit-backdrop-filter: var(--card-light-blur); backdrop-filter: var(--card-light-blur);
  box-shadow: var(--card-light-shadow); display: flex; flex-direction: column;
  --glass-light-x: 18% !important; --glass-light-y: 0% !important; --glass-light-angle: 135deg !important;
}
.home .hp-hold .hp-hold-q { margin: 0; font-size: clamp(12px,.9vw,15px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red-ink,#93281F); display: inline-flex; align-items: center; gap: 10px; }
.home .hp-hold .hp-hold-q::before { content: ""; flex: none; width: 20px; height: 2px; background: currentColor; }
.home .hp-hold h3 { margin: clamp(14px,1.2vw,22px) 0 0; font-size: clamp(23px,1.75vw,32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #0b0b0b; text-wrap: balance; }
.home .hp-hold p:not(.hp-hold-q) { margin: clamp(12px,1vw,18px) 0 0; font-size: clamp(16px,1.1vw,19px); line-height: 1.5; color: #1f2c35; text-wrap: pretty; }
.home .hp-holds-action { margin-top: clamp(20px,2vw,40px); padding-inline: var(--presentation-inset); }
.home .hp-holds-action .btn-primary {
  min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); font-weight: 700; border-radius: 12px;
  background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.home .hp-holds-action .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
@media (max-width:980px) { .home .hp-holds-head, .home .hp-holds-action { padding-inline: 24px; } .home .hp-holds-track { padding-inline: 24px; scroll-padding-inline: 24px; } }
@media (max-width:767px) { .home .hp-holds-head, .home .hp-holds-action { padding-inline: 16px; } .home .hp-holds-track { padding-inline: 16px; scroll-padding-inline: 16px; } .home .hp-holds-nav { display: none; } }

/* Review cards (placeholders until real quotes exist): same light glass, quote-led. */
.home .hp-holds [hidden] { display: none !important; }
.home .hp-review blockquote { margin: clamp(14px,1.2vw,22px) 0 0; padding: 0; border: 0; flex: 1; }
.home .hp-review blockquote p { margin: 0 !important; font-size: clamp(18px,1.3vw,23px) !important; line-height: 1.42 !important; font-weight: 600; color: #0b0b0b !important; letter-spacing: -.01em; }
.home .hp-review blockquote p::before { content: "\201C"; }
.home .hp-review blockquote p::after { content: "\201D"; }
.home .hp-review footer { margin-top: clamp(18px,1.6vw,28px); padding-top: 14px; border-top: 1px solid rgba(20,32,50,.16); display: grid; gap: 2px; }
.home .hp-review footer .who { font-size: clamp(14px,1vw,17px); font-weight: 700; color: #0b0b0b; }
.home .hp-review footer .where { font-size: clamp(13px,.9vw,15px); color: #1c2830; }
.home .hp-placeholder-tag { margin-top: 12px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #FFE9A8; color: #5b4300; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Review cards with a picture on top. The picture bleeds to the card's edges and takes its top corners. */
.home .hp-review { --hold-pad: var(--card-light-pad); overflow: hidden; min-height: 0; }
.home .hp-review-img { position: relative; flex: none; min-height: 0; overflow: hidden; margin: calc(var(--hold-pad) * -1) calc(var(--hold-pad) * -1) clamp(18px,1.6vw,28px); aspect-ratio: 16 / 9; background: #cfd8dd; }
.home .hp-review-img picture { position: absolute; inset: 0; display: block; }
.home .hp-review-img img { display: block; width: 100%; height: 100%; }
.home .hp-review-img img { object-fit: cover; }

/* Review cards: the business line carries no dash (Eugene, 2026-09-20); the answer cards keep theirs. */
.home .hp-review .hp-hold-q { gap: 0; }
.home .hp-review .hp-hold-q::before { content: none; display: none; }

/* REST OF THE PAGE (Eugene, 2026-09-20), in the locked style: dark navy bands carry light liquid-glass cards,
   light bands carry none; one eyebrow, one heavy headline, one large FPT-red action everywhere. */

/* Real project records, as a strip under the reviews. */
.home .hp-holds-records { margin: clamp(8px,1vw,20px) var(--presentation-inset) 0; padding: clamp(18px,1.6vw,28px) 0 0; border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; gap: 14px clamp(28px,4vw,80px); }
.home .hp-holds-records > div { display: grid; gap: 4px; }
.home .hp-holds-records dt { font-size: clamp(20px,1.6vw,30px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.home .hp-holds-records > div:first-child dt { font-size: clamp(12px,.9vw,15px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #c9d4e6; align-self: end; }
.home .hp-holds-records dd { margin: 0; font-size: clamp(14px,1vw,17px); color: #dbe5ea; }
.home .hp-holds-records + .hp-holds-action { margin-top: clamp(28px,2.6vw,48px); }

/* What we build: wide banner above the three room cards. */
.home .hp-build-banner { margin: clamp(32px,3.2vw,60px) 0 0; border-radius: clamp(20px,1.8vw,34px); overflow: hidden; aspect-ratio: 21 / 9; background: #d9e1e4; }
.home .hp-build-banner picture, .home .hp-build-banner img { display: block; width: 100%; height: 100%; }
.home .hp-build-banner img { object-fit: cover; object-position: 50% 58%; }
.home .hp-build-banner + .hp-build-grid { margin-top: clamp(24px,2.4vw,44px); }

/* How it works: four numbered light-glass cards on the dark band. */
.home .hp-steps { padding-block: clamp(72px,8vw,136px); color: #fff;
  background: linear-gradient(180deg,rgba(30,42,71,.74),rgba(22,31,56,.86)), url(/images/concept-v4/processing-room-1200.webp) center / cover no-repeat var(--navy); }
.home .hp-steps-head, .home .hp-steps-action { padding-inline: var(--presentation-inset); }
.home .hp-steps .hp-eyebrow { margin: 0; color: #fff; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; }
.home .hp-steps .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home .hp-steps h2 { margin: clamp(10px,.9vw,18px) 0 0; font-size: clamp(34px,3.1vw,60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: #fff; max-width: 16em; text-wrap: balance; }
.home .hp-steps-grid { list-style: none; margin: clamp(32px,3.2vw,60px) 0 0; padding: 0 var(--presentation-inset); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(16px,1.6vw,28px); }
.home .hp-step {
  box-sizing: border-box; padding: var(--card-light-pad); border-radius: var(--card-light-radius);
  background: var(--card-light-tint);
  -webkit-backdrop-filter: var(--card-light-blur); backdrop-filter: var(--card-light-blur);
  box-shadow: var(--card-light-shadow);
  --glass-light-x: 18% !important; --glass-light-y: 0% !important; --glass-light-angle: 135deg !important;
}
.home .hp-step-n { display: block; font-size: clamp(44px,3.6vw,68px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--red-ink,#93281F); }
.home .hp-step h3 { margin: clamp(14px,1.2vw,22px) 0 0; font-size: clamp(22px,1.6vw,30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: #0b0b0b; text-wrap: balance; }
.home .hp-step p { margin: clamp(10px,.9vw,16px) 0 0; font-size: clamp(16px,1.1vw,19px); line-height: 1.5; color: #1c2830; text-wrap: pretty; }
.home .hp-steps-action { margin-top: clamp(32px,3vw,56px); }
.home .hp-steps-action .btn-primary, .home .hp-close-action .btn-primary {
  min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); font-weight: 700; border-radius: 12px;
  background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.home .hp-steps-action .btn-primary:hover, .home .hp-close-action .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }

/* FAQ head in the type system; the list stays the existing disclosure pattern. */
.home .hp-two.hp-faq .hp-faq-head h2 { margin-top: clamp(10px,.9vw,18px); }

/* The close: dark band, two ways in. Estimator on the left, the form on a light glass card on the right. */
.home .hp-close { padding-block: clamp(72px,8vw,136px); color: #fff;
  background: linear-gradient(180deg,rgba(30,42,71,.78),rgba(18,26,48,.92)), url(/images/reviews/10-manufacturer-2000.webp) center / cover no-repeat var(--navy); }
.home .hp-close > .wrap { width: 100%; max-width: none; padding-inline: var(--presentation-inset); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(32px,5vw,96px); align-items: start; }
.home .hp-close .hp-eyebrow { margin: 0; color: #fff; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; }
.home .hp-close .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home .hp-close h2 { margin: clamp(10px,.9vw,18px) 0 0; font-size: clamp(34px,3.1vw,60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: #fff; text-wrap: balance; }
.home .hp-close .hp-close-body { margin: clamp(12px,1vw,20px) 0 0; font-size: clamp(17px,1.3vw,24px); line-height: 1.45; color: #eef3f6; max-width: 26em; }
.home .hp-close-action { margin-top: clamp(22px,1.9vw,36px); }
.home .hp-close-phone { display: inline-block; margin-top: clamp(22px,2vw,36px); font-size: clamp(26px,2.2vw,42px); font-weight: 800; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.home .hp-close-phone:hover { text-decoration: underline; text-decoration-color: var(--red,#B7352D); text-underline-offset: 6px; }
.home .hp-close .hp-ledger { margin-top: clamp(18px,1.6vw,28px); border-top: 1px solid rgba(255,255,255,.22); }
.home .hp-close .hp-ledger > div { border-color: rgba(255,255,255,.22); }
.home .hp-close .hp-ledger, .home .hp-close .hp-ledger a, .home .hp-close .hp-ledger span { color: #eef3f6; }
.home .hp-close .hp-ledger .k { color: #c9d4e6; }
.home .hp-close .form-card {
  padding: var(--card-light-pad); border-radius: var(--card-light-radius); border: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.90),rgba(244,248,251,.80));
  -webkit-backdrop-filter: var(--card-light-blur); backdrop-filter: var(--card-light-blur);
  box-shadow: var(--card-light-shadow); color: #1c2830;
  --glass-light-x: 18% !important; --glass-light-y: 0% !important; --glass-light-angle: 135deg !important;
}
.home .hp-close .hp-form-title { margin: 0; font-size: clamp(24px,1.9vw,36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #0b0b0b; }
.home .hp-close .form-card .invite { margin: 10px 0 clamp(18px,1.6vw,28px); font-size: clamp(16px,1.1vw,19px); color: #25343d; }
.home .hp-close :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }

/* Footer in the header's navy, a shade deeper. */
.home .foot { background: #141C33; }

/* Header phone (the header has room since its button came out). */
.home .hdr-phone { color: #fff; font-weight: 700; font-size: clamp(14px,.95vw,17px); text-decoration: none; padding: 10px 6px; white-space: nowrap; }
.home .hdr-phone:hover { text-decoration: underline; text-decoration-color: var(--red,#B7352D); text-underline-offset: 5px; }
@media (min-width:981px) { .home .hdr-right { display: flex; align-items: center; gap: 8px; padding-left: clamp(8px,1vw,20px); margin-left: clamp(4px,.6vw,12px); border-left: 1px solid rgba(255,255,255,.2); } }

@media (max-width:767px) {
  .home .hdr-phone { display: none; }
}
@media (max-width:1180px) { .home .hp-steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:980px) {
  .home .hp-steps-head, .home .hp-steps-action, .home .hp-steps-grid { padding-inline: 24px; }
  .home .hp-holds-records { margin-inline: 24px; }
  .home .hp-close > .wrap { grid-template-columns: 1fr; padding-inline: 24px; }
  .home .hp-build-banner { aspect-ratio: 16 / 9; }
}
@media (max-width:767px) {
  .home .hp-steps-head, .home .hp-steps-action, .home .hp-steps-grid { padding-inline: 16px; }
  .home .hp-steps-grid { grid-template-columns: 1fr; }
  .home .hp-holds-records { margin-inline: 16px; }
  .home .hp-close > .wrap { padding-inline: 16px; }
}

/* Alignment: the close's left column and the footer sit on the same page column as everything above. */
.home .hp-close .hp-close-copy { padding: 0; margin: 0; max-width: none; }
.home .foot > .wrap { width: 100%; max-width: none; padding-inline: var(--presentation-inset); box-sizing: border-box; }
@media (max-width:980px) { .home .foot > .wrap { padding-inline: 24px; } }
@media (max-width:767px) { .home .foot > .wrap { padding-inline: 16px; } }

/* WHAT WE BUILD, in the hero's look (Eugene, 2026-09-20): a full photograph behind, three tinted liquid-glass
   cards in front, each with a smaller picture inside. Same navy tint, type and action as the story cards. */
.home .hp-rooms-photo { position: relative; padding-block: clamp(48px,4.4vw,84px); min-height: min(100svh,1100px); box-sizing: border-box; display: flex; align-items: center; color: #fff;
  background: linear-gradient(180deg,rgba(18,26,48,.62) 0,rgba(18,26,48,.18) 34%,rgba(18,26,48,.10) 60%,rgba(18,26,48,.45) 100%), url(/images/reviews/10-manufacturer-2000.webp) center / cover no-repeat var(--navy); }
.home .hp-rooms-photo > .wrap { width: 100%; max-width: none; padding-inline: var(--presentation-inset); box-sizing: border-box; }
.home .hp-rooms-photo .hp-eyebrow { margin: 0; color: #fff; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; text-shadow: 0 1px 4px rgba(8,14,30,.55); }
.home .hp-rooms-photo .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home .hp-rooms-photo h2 { margin: clamp(10px,.9vw,18px) 0 0; font-size: clamp(34px,3.1vw,60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: #fff; text-wrap: balance; text-shadow: 0 2px 10px rgba(8,14,30,.55); }
.home .hp-rooms-photo .hp-two-intro { margin: clamp(12px,1vw,20px) 0 0; font-size: clamp(17px,1.3vw,24px); line-height: 1.4; color: #fff; text-shadow: 0 1px 6px rgba(8,14,30,.6); }
.home .hp-rooms-photo .hp-build-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,1.8vw,32px); margin-top: clamp(24px,2.2vw,40px); }
.home .hp-rooms-photo .hp-build {
  display: flex; flex-direction: column; box-sizing: border-box; padding: clamp(18px,1.5vw,28px); border-radius: clamp(24px,2.2vw,40px); border: 0;
  background: var(--card-tint);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  --glass-light-x: 18% !important; --glass-light-y: 0% !important; --glass-light-angle: 135deg !important;
}
.home .hp-rooms-photo .hp-build-img { display: block; border-radius: clamp(14px,1.3vw,24px); overflow: hidden; aspect-ratio: 21 / 9; background: #cfd8dd; }
.home .hp-rooms-photo .hp-build-img picture { display: block; width: 100%; height: 100%; }
.home .hp-rooms-photo .hp-build-img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
.home .hp-rooms-photo .hp-build .lbl { margin: clamp(18px,1.6vw,28px) clamp(6px,.6vw,12px) 0; font-size: clamp(12px,.9vw,15px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.home .hp-rooms-photo .hp-build .lbl::before { content: ""; flex: none; width: 20px; height: 2px; background: var(--red,#B7352D); }
.home .hp-rooms-photo .hp-build h3 { margin: 10px clamp(6px,.6vw,12px) 0; font-size: clamp(24px,1.9vw,36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #0b0b0b; }
.home .hp-rooms-photo .hp-build h3 a { color: inherit; text-decoration: none; }
.home .hp-rooms-photo .hp-build h3 a:hover { text-decoration: underline; text-decoration-color: var(--red,#B7352D); text-underline-offset: 4px; }
.home .hp-rooms-photo .hp-build p { margin: 12px clamp(6px,.6vw,12px) 0; flex: 1; font-size: clamp(16px,1.1vw,20px); line-height: 1.45; color: #fff; text-shadow: 0 1px 3px rgba(10,18,40,.45); text-wrap: pretty; }
.home .hp-rooms-photo .hp-build a.go { margin: 16px clamp(6px,.6vw,12px) clamp(6px,.6vw,12px); align-self: flex-start; color: #fff; font-weight: 700; font-size: clamp(15px,1.05vw,19px); }
.home .hp-rooms-photo .hp-two-action { margin-top: clamp(22px,2vw,36px); }
.home .hp-rooms-photo .btn-primary { min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); font-weight: 700; border-radius: 12px; background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.home .hp-rooms-photo .btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
.home .hp-rooms-photo :is(a,button):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }
@media (max-width:980px) { .home .hp-rooms-photo > .wrap { padding-inline: 24px; } .home .hp-rooms-photo .hp-build-grid { grid-template-columns: 1fr; } .home .hp-rooms-photo { min-height: 0; } }
@media (max-width:767px) { .home .hp-rooms-photo > .wrap { padding-inline: 16px; } }
/* The close now sits over the site photograph the page opened on, so the plant photograph is not used twice. */
.home .hp-close { background: linear-gradient(180deg,rgba(30,42,71,.80),rgba(18,26,48,.93)), url(/images/hero-scroll/layout-matched-site-v8-1200.webp?v=20260922a) center / cover no-repeat var(--navy); }

/* THE COLD SIDE on white (Eugene, 2026-09-20): the photograph is gone; the ground is white with a very light
   blueprint: a fine drafting grid plus the project-plan sheet, both barely there. The three tinted-glass cards
   and their pictures stay; the heading turns dark because it now sits on white. */
.home .hp-rooms-photo {
  overflow: hidden; color: #0C141C; min-height: 0;
  background:
    linear-gradient(rgba(30,42,71,.055) 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(90deg, rgba(30,42,71,.055) 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(rgba(30,42,71,.028) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(30,42,71,.028) 1px, transparent 1px) 0 0 / 32px 32px,
    #FFFFFF;
}
.home .hp-rooms-photo::before {
  content: ""; position: absolute; inset: -4% -6% -4% 38%; pointer-events: none;
  background: url(/images/hero-scroll/project-plan-background.svg) right center / contain no-repeat;
  opacity: .10; filter: grayscale(1) contrast(1.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.home .hp-rooms-photo > .wrap { position: relative; z-index: 1; }
.home .hp-rooms-photo .hp-eyebrow { color: #1b1b1b; text-shadow: none; }
.home .hp-rooms-photo h2 { color: #0C141C; text-shadow: none; }
.home .hp-rooms-photo .hp-two-intro { color: #25343d; text-shadow: none; }

/* Cold-side cards take their picture the way the review cards do (Eugene, 2026-09-20): edge to edge across the
   top of the card, taking the card's top corners, 16:9, with the text below on the card's own padding. */
.home .hp-rooms-photo .hp-build { --hold-pad: var(--card-light-pad); padding: var(--hold-pad); overflow: hidden; border-radius: var(--card-light-radius); }
.home .hp-rooms-photo .hp-build-img { position: relative; flex: none; margin: calc(var(--hold-pad) * -1) calc(var(--hold-pad) * -1) clamp(18px,1.6vw,28px); border-radius: 0; aspect-ratio: 16 / 9; }
.home .hp-rooms-photo .hp-build-img picture { position: absolute; inset: 0; }
.home .hp-rooms-photo .hp-build .lbl, .home .hp-rooms-photo .hp-build h3, .home .hp-rooms-photo .hp-build p { margin-inline: 0; }
.home .hp-rooms-photo .hp-build .lbl { margin-top: 0; }
.home .hp-rooms-photo .hp-build a.go { margin: 16px 0 0; }

/* Review cards: the business line is white (Eugene, 2026-09-20). A soft shadow keeps it readable on the light glass. */
.home .hp-review .hp-hold-q { color: #fff; text-shadow: 0 1px 3px rgba(10,18,40,.6), 0 0 1px rgba(10,18,40,.5); }

/* STILL VERSION OF THE STORY (phones, reduced motion, no WebGL): whenever the scroll film is not mounted, the three
   service sections are direct children of <main>. Each becomes a photograph band with the tinted glass card over its
   lower part: the locked look, as still pictures. The card is a pseudo-element so the markup stays as it is. */
.home main > .hp-est, .home main > .hp-deliver { padding: 0; background: none; border: 0; }
.home main > .hp-est > .wrap, .home main > .hp-deliver > .wrap { width: 100%; max-width: none; padding: 0; display: block; }
.home main > .hp-est .hp-est-plan-background { display: none; }
.home main > .hp-est .hp-est-lead, .home main > .hp-est .hp-plan-summary, .home main > .hp-deliver .hp-story-card {
  --still-top: clamp(190px,30vw,460px); --still-pad: clamp(16px,2.5vw,64px); --still-in: clamp(22px,2.4vw,56px);
  position: relative; display: block; box-sizing: border-box; width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: calc(var(--still-top) + var(--still-in)) calc(var(--still-pad) + var(--still-in)) calc(var(--still-pad) + var(--still-in));
  background: linear-gradient(rgba(233,238,239,.30),rgba(233,238,239,.30)), var(--still-photo, none) center / cover no-repeat var(--navy);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The pictures are named only under .fpt-still (set in <head> for reduced motion, and by hero-scroll.js when the film
   cannot mount): before the film mounts these sections briefly match, and the browser would fetch all three for nothing. */
.fpt-still .home main > .hp-est .hp-est-lead { --still-photo: url(/images/reviews/05-produce-1100.webp); }
.fpt-still .home main > .hp-est .hp-plan-summary { --still-photo: url(/images/concept-v4/workmanship-800.webp); background-position: center 30%; }
.fpt-still .home main > .hp-deliver .hp-story-card { --still-photo: url(/images/reviews/10-manufacturer-1200.webp); }
.home main > .hp-est .hp-est-lead::before, .home main > .hp-est .hp-plan-summary::before, .home main > .hp-deliver .hp-story-card::before {
  content: ""; position: absolute; inset: var(--still-top) var(--still-pad) var(--still-pad); border-radius: var(--card-radius); opacity: 1; padding: 0;
  background: var(--card-tint); -webkit-mask: none; mask: none;
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur); box-shadow: var(--card-shadow);
}
.home main > .hp-est .hp-est-lead::after, .home main > .hp-est .hp-plan-summary::after, .home main > .hp-deliver .hp-story-card::after { content: none; }
.home main > .hp-est .hp-est-lead > *, .home main > .hp-est .hp-plan-summary > *, .home main > .hp-deliver .hp-story-card > * { position: relative; }
.home main > :is(.hp-est,.hp-deliver) .hp-eyebrow { margin: 0; color: #fff; font-size: clamp(12px,.95vw,17px); font-weight: 700; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 12px; }
.home main > :is(.hp-est,.hp-deliver) .hp-eyebrow::before { content: ""; display: block; flex: none; width: clamp(22px,1.6vw,32px); height: 2px; background: var(--red,#B7352D); }
.home main > :is(.hp-est,.hp-deliver) h2 { margin: clamp(10px,.9vw,18px) 0 0; font-size: clamp(30px,3.1vw,60px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: #0b0b0b; text-wrap: balance; }
.home main > :is(.hp-est,.hp-deliver) .promise { margin: clamp(12px,1vw,20px) 0 0; font-size: clamp(16px,1.3vw,24px); line-height: 1.45; color: #fff; max-width: 38em; text-shadow: 0 1px 3px rgba(10,18,40,.45); }
.home main > :is(.hp-est,.hp-deliver) .hp-est-intro-actions { margin: clamp(20px,1.9vw,36px) 0 0; }
.home main > :is(.hp-est,.hp-deliver) .btn-primary { min-height: clamp(52px,3.4vw,66px); padding-inline: clamp(28px,3.2vw,60px); font-size: clamp(16px,1.2vw,22px); font-weight: 700; border-radius: 12px; background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.home main > :is(.hp-est,.hp-deliver) .hp-estimate-note { display: none; }
/* Phone hero: the photograph shows under the card, not just behind it. */
@media (max-width:767px) {
  .home main > .hp-hero-background { min-height: 0; padding: 76px 16px clamp(200px,58vw,300px); }
  .home main > .hp-hero-background .hp-opening-photo img { object-position: 72% 100%; }
  .home .hp-intro-drawing-note { display: none; }
}

/* PHONES (Eugene, 2026-09-20): the scroll film runs full screen behind the cards. The scene keeps its desktop scale and
   its sides are cropped by the screen; it is not squeezed between the cards, resized while scrolling, or hidden. */
@media (max-width:767px) {
  .home .hp-scroll-story .hp-hero-background .hp-scene-frame {
    position: absolute; inset: 0; top: 0; right: 0; left: 0; width: 100%; height: 100%; transform: none;
    opacity: calc(1 - var(--closing-settle,0)); -webkit-mask-image: none; mask-image: none;
  }
  .home .hp-scroll-story .hp-hero-background::after { background: none; }
  .home .hp-scroll-story .hp-hero-background::before { background: none; }
  .home .hp-scroll-story .hp-opening-photo img {
    left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%;
    -webkit-mask-image: none; mask-image: none; transform: none;
  }
  .home .hp-scroll-story .hp-hero-plan { inset: 0; }
  /* Let more of the scene show between the cards. */
  .home .hp-scroll-copy-flow .hp-flow-estimate,
  .home .hp-scroll-copy-flow .hp-flow-content > .hp-flow-chapter:not(.hp-story-close) { margin-top: 62svh; }
  .home .hp-scroll-copy-flow .hp-flow-intro { min-height: 0; }
}

/* FOCUS RHYTHM (Eugene, 2026-09-21). The scene fills the screen on every width and sits centred, so the main event
   between two cards (the transformation, the layout, the evaporator) lands in the middle of the gap. A pale veil
   fades the scene back while a card is centred; hero-background.js drives it and the cards' own strength. */
.home .hp-scroll-story .hp-hero-background .hp-scene-frame {
  position: absolute; inset: 0; top: 0; right: 0; left: 0; width: 100%; height: 100%; transform: none;
  opacity: calc(1 - var(--closing-settle,0)); -webkit-mask-image: none; mask-image: none;
}
.home .hp-focus-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #E9EEEF; opacity: 0; transition: opacity .35s ease-out; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-message,.hp-plan-summary,.hp-story-card) { transition: opacity .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .home .hp-focus-veil, .home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-message,.hp-plan-summary,.hp-story-card) { transition: none; } }

/* TYPE ON EVERY TINTED CARD (Eugene, 2026-09-22). One rule for all of them: white label, near-black headline,
   dark charcoal-blue copy, no text shadow. The colours are the shared names from card.css, so the inner pages
   read the same values from site-look.css. This covers the four story cards, their still/phone variant, and the
   three room cards further down — the white copy used to be written out separately for each. */
.home :is(.hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card),
          main > .hp-hero-background .hp-hero-in,
          main > :is(.hp-est,.hp-deliver) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card),
          .hp-rooms-photo .hp-build) {
  color: var(--card-ink);
}
.home :is(.hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card),
          main > .hp-hero-background .hp-hero-in,
          main > :is(.hp-est,.hp-deliver) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card),
          .hp-rooms-photo .hp-build) :is(.hp-hero-body,.promise,.intro,p,li,dd,dt,summary,.d,a.go,a:not(.btn)) {
  color: var(--card-ink); text-shadow: none;
}
.home :is(.hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card),
          main > .hp-hero-background .hp-hero-in,
          main > :is(.hp-est,.hp-deliver) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card),
          .hp-rooms-photo .hp-build) :is(.hp-act-note,.hp-estimate-note,.lbl) {
  color: var(--card-ink-soft); text-shadow: none;
}
/* Headline and label keep their own colours; the label is white so it reads as a tag above the headline. */
.home :is(.hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card),
          main > .hp-hero-background .hp-hero-in,
          main > :is(.hp-est,.hp-deliver) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card),
          .hp-rooms-photo .hp-build) :is(h1,h2,h3,.t) { color: var(--card-head-ink); text-shadow: none; }
.home :is(.hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro .hp-flow-message,.hp-flow-estimate .hp-flow-message,.hp-plan-summary,.hp-story-card),
          main > .hp-hero-background .hp-hero-in,
          main > :is(.hp-est,.hp-deliver) :is(.hp-est-lead,.hp-plan-summary,.hp-story-card),
          .hp-rooms-photo .hp-build) :is(.hp-eyebrow,.hp-build .lbl) { color: var(--card-eyebrow-ink); text-shadow: none; }
/* Hairlines inside a tinted card, the link underline, and the red button's white type. */
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-plan-summary,.hp-story-card) a.go { text-decoration-color: var(--card-rule); }
.home .hp-scroll-copy-flow .hp-flow-content .hp-plan-summary .hp-plan-benefits li,
.home .hp-scroll-copy-flow .hp-flow-content .hp-story-card :is(.hp-room,.hp-part,.hp-room-parts) { border-color: var(--card-rule); }
.home :is(.hp-flow-content,.hp-rooms-photo) .btn-primary { color: #fff; }
.home .hp-scroll-copy-flow .hp-flow-content :is(.hp-flow-intro,.hp-flow-estimate,.hp-plan-summary,.hp-story-card) :is(a,button,summary):focus-visible { outline-color: #1d5f8a; }

/* CLOSING SECTION (Eugene, 2026-09-22): it was the one band where copy sat bare on a darkened photograph while
   the form beside it sat in a card — the page ended in a style it used nowhere else. It now follows the site
   rule: a photograph is lifted toward white and everything on it sits in a card. The copy takes the standard
   tinted card (same tint, corner, padding and type as the hero), the form keeps the light card beside it. */
.home .hp-close {
  background: var(--card-ground-lift), url(/images/hero-scroll/layout-matched-site-v8-1200.webp?v=20260922a) center / cover no-repeat var(--navy);
  color: var(--card-ink);
}
.home .hp-close .hp-close-copy {
  box-sizing: border-box; padding: var(--card-pad); border-radius: var(--card-radius); border: 0;
  background: var(--card-tint);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow); color: var(--card-ink);
}
.home .hp-close .hp-close-copy .hp-eyebrow { color: var(--card-eyebrow-ink); }
.home .hp-close .hp-close-copy h2 { color: var(--card-head-ink); }
.home .hp-close .hp-close-copy :is(.hp-close-body,.hp-close-phone) { color: var(--card-ink); }
.home .hp-close .hp-close-copy .hp-ledger,
.home .hp-close .hp-close-copy .hp-ledger > div { border-color: var(--card-rule); }
.home .hp-close .hp-close-copy :is(.hp-ledger,.hp-ledger a,.hp-ledger span) { color: var(--card-ink); }
.home .hp-close .hp-close-copy .hp-ledger .k { color: var(--card-ink-soft); }
.home .hp-close > .wrap { align-items: stretch; }

/* THE SHARED SECTION RULES ON THE HOMEPAGE (Eugene, 2026-09-22). The rules and the names are in
   assets/look.css PART 2. The homepage is where they came from, so this mostly points its own values at the
   shared names: the reading column, the inset and the feature-band rhythm are now one source for the site. */
.home { --presentation-inset: var(--page-inset); }
.home :is(.hp-holds,.hp-close) { padding-block: var(--sec-pad-lg); }
.home .hp-rooms-photo { padding-block: var(--sec-pad-lg); }
/* A warm hairline from the retired .hp-contact band was still drawing across the top of the closing
   section — the only border on the homepage, on a band that is now a photograph. */
.home .hp-close { border-top: 0; }