/* ============================================================================
   FoodProTec homepage — estimator-led (content/design-notes/estimator-led-review.md, 2026-09-08; supersedes the
   composition in homepage-concept-review.md). Loaded only by index.html, after site.css. Everything here is
   prefixed hp- so the 11 other pages, which share site.css, are untouched. Header, buttons, form controls, FAQ
   disclosures and the footer shell come from site.css.
   Palette: warm off-white, deep ink, white, the FoodProTec red, fine neutral lines. Photography does the physical
   explaining; the type is broad and open; surfaces are mostly unboxed.
   Vertical budget: the hero is tight enough that the primary action clears a common phone viewport, and the
   catalogue/gallery below the estimator carries far less height than the pre-estimator-led version did.
   ============================================================================ */

.home {
  --hp-warm: #F5F3EF; --hp-warm-2: #ECE9E3; --hp-ink: #17272E; --hp-ink-2: #46555C; --hp-ink-3: #75838A;
  --hp-line: #E1DDD6; --hp-line-ink: rgba(255,255,255,.16);
  --hp-inset: 32px;
  color: var(--hp-ink);
}
@media (min-width: 1280px) { .home { --hp-inset: 72px; } }
@media (max-width: 767px) { .home { --hp-inset: 20px; } }
@media (max-width: 400px) { .home { --hp-inset: 16px; } }
.home .wrap { max-width: 1440px; padding-left: var(--hp-inset); padding-right: var(--hp-inset); }
.home h1, .home h2, .home h3 { color: var(--hp-ink); }
.home h2 { font-size: clamp(34px, 2.4vw + 18px, 58px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; }
.home p { font-size: 18px; line-height: 1.55; }
.home .hp-eyebrow { font: 600 13px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--hp-ink-2); display: inline-flex; align-items: center; gap: 12px; }
.home .hp-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); flex: none; }
.home .go { font-size: 16px; }
.home .go::after { transition: transform .15s; display: inline-block; }
.home .go:hover::after { transform: translateX(3px); }
.home .btn-primary { background: var(--red); border-color: var(--red); }
.home .hp-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.home .hp-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.home .hp-caption { font: 500 12px/1.3 var(--font); letter-spacing: .02em; color: var(--hp-ink-3); }
.home img.hp-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.home picture { display: block; }
.home .ph picture { height: 100%; }

/* ---- Header additions: phone number beside the red action on wide screens ---- */
.home .hdr-in { min-height: 80px; }
.home .hp-phone { display: none; text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--hp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home .hp-phone:hover { color: var(--red); }
@media (min-width: 1100px) { .home .hp-phone { display: inline-block; } }
@media (max-width: 980px) { .home .hdr-in { min-height: 68px; } }
@media (max-width: 400px) {
  .home .hdr-logo img { height: 34px; }
  .home .hdr .btn-sm { padding: 0 9px; font-size: 13px; }
  .home .menu-btn { padding: 0 8px; }
}

/* ============================================================================
   Hero: one full-bleed photograph, dark left, bright aisle right; three-line heading kept off the monumental end
   of the scale so the estimator offer, the buttons and the "see it before you share an email" note all sit above
   the fold on a phone. The photograph is never cropped away to buy that space.
   ============================================================================ */
.hp-hero { position: relative; isolation: isolate; background: #1a2229; color: #fff; display: grid; min-height: 600px; overflow: hidden; }
.hp-hero-media { position: absolute; inset: 0; z-index: -2; }
.hp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; display: block; }
/* The horizontal scrim is anchored in PIXELS, not percentages, because the thing it has to cover is a fixed-width
   text column (h1 max-width 640px, body 600px, plus --hp-inset), not a fraction of the viewport. Authored in
   percentages it held at 1440 and at phone widths but collapsed in between: at 808px the paragraph's last words
   sit at ~78% of the viewport, where the old 58%→82% ramp had already faded to ~.08, and white type crossed the
   bright aisle at 1.98:1 (reference screenshot; measured by tools/review-hero-contrast.mjs).
   --hp-scrim-x is the gutter left of the 1440px .wrap, so the stops below are distances from the text column's own
   left edge and the dark plateau tracks the copy at every width instead of drifting off it above 1440.
   The plateau ends past the widest text run, then falls away so the room is still read as a room on the right. */
.hp-hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --hp-scrim-x: max(0px, (100% - 1440px) / 2);
  background:
    linear-gradient(90deg,
      rgba(12,20,26,.84) 0,
      rgba(12,20,26,.76) calc(var(--hp-scrim-x) + 420px),
      rgba(12,20,26,.66) calc(var(--hp-scrim-x) + 700px),
      rgba(12,20,26,.30) calc(var(--hp-scrim-x) + 880px),
      rgba(12,20,26,.08) calc(var(--hp-scrim-x) + 1090px),
      rgba(12,20,26,0)   calc(var(--hp-scrim-x) + 1320px)),
    linear-gradient(180deg, rgba(12,20,26,.18) 0%, rgba(12,20,26,0) 30%, rgba(12,20,26,0) 62%, rgba(12,20,26,.62) 100%); }
/* Top-anchored, not flex-centred: centring content taller than the frame would spill the eyebrow off the top. The hero grows with its content. */
.hp-hero-in { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 40px; padding-bottom: 66px; }
.hp-hero .hp-eyebrow { color: rgba(255,255,255,.86); }
.hp-hero .hp-eyebrow::before { background: var(--red); }
/* ~82px at 1440, ~60px at 1024, 42px at 390: the review's 80–96 / 42–48 window without a fixed step per breakpoint. */
.hp-hero h1 { color: #fff; margin-top: 16px; font-weight: 700; font-size: clamp(42px, 5.1vw + 8px, 82px); line-height: 1.0; letter-spacing: -0.035em; max-width: 640px; text-wrap: initial; }
/* Opaque white, not .9: the supporting paragraph is the longest run and the one that reaches furthest into the
   photograph, so it gets the full value rather than a tint of the surface underneath it. */
.hp-hero .hp-hero-body { margin-top: 10px; max-width: 600px; font-size: 18px; line-height: 1.5; color: #fff; }
.hp-hero .hp-acts { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 22px; }
.hp-hero .btn { min-height: 52px; padding: 0 26px; font-size: 16.5px; }
.hp-hero .hp-act-note { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.78); max-width: 52ch; }
.hp-hero-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--hp-inset) 22px; pointer-events: none; }
.hp-hero .hp-hero-support { font: 600 15px/1.4 var(--font); color: rgba(255,255,255,.88); letter-spacing: .01em; }
@media (max-width: 1279px) { .hp-hero { min-height: 560px; } .hp-hero-in { padding-top: 36px; padding-bottom: 64px; } }
@media (max-width: 1023px) { .hp-hero .hp-hero-body { font-size: 17.5px; } }
@media (max-width: 767px) {
  .hp-hero { min-height: 0; }
  .hp-hero-media img { object-position: 66% 50%; }
  /* Phone: the copy occupies nearly the whole frame, so there is no bright side to protect — the veil is carried
     across the full width and the horizontal component only shades it, rather than clearing to nothing on the right. */
  .hp-hero-scrim { background:
    linear-gradient(180deg, rgba(12,20,26,.44) 0%, rgba(12,20,26,.50) 45%, rgba(12,20,26,.84) 100%),
    linear-gradient(90deg, rgba(12,20,26,.36) 0%, rgba(12,20,26,.20) 60%, rgba(12,20,26,.14) 100%); }
  .hp-hero-in { padding-top: 32px; padding-bottom: 66px; }
  .hp-hero h1 { margin-top: 14px; }
  .hp-hero .hp-hero-body { margin-top: 14px; font-size: 16.5px; line-height: 1.45; }
  .hp-hero .hp-acts { margin-top: 12px; gap: 10px 14px; }
  .hp-hero .btn { min-height: 48px; }
  .hp-hero .hp-act-note { margin-top: 10px; font-size: 13.5px; }
  .hp-hero-foot { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 18px; }
  .hp-hero .hp-hero-support { font-size: 13.5px; }
}
@media (max-width: 480px) { .hp-hero .hp-acts .btn { width: 100%; } }
@media (max-width: 400px) { .hp-hero .hp-hero-body { font-size: 16.5px; } .hp-hero .hp-eyebrow { font-size: 11.5px; letter-spacing: .06em; gap: 10px; } .hp-hero .hp-eyebrow::before { width: 14px; } }

/* ---- Experience strip: slim, open, delicate separators. Sits after the project records, not under the hero. ---- */
.hp-figs { border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); background: #fff; }
.hp-figs .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-figs .wrap > div { padding: 26px 28px; border-left: 1px solid var(--hp-line); min-width: 0; }
.hp-figs .wrap > div:first-child { border-left: 0; padding-left: 0; }
.hp-figs .v { font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hp-figs .k { margin-top: 8px; font-size: 14px; color: var(--hp-ink-2); }
@media (max-width: 767px) {
  .hp-figs .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hp-figs .wrap > div { padding: 14px 16px; }
  .hp-figs .wrap > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hp-figs .wrap > div:nth-child(n+3) { border-top: 1px solid var(--hp-line); }
  .hp-figs .v { font-size: 30px; overflow-wrap: anywhere; }
}

/* ---- Section rhythm ---- */
.hp-sec { padding: 56px 0; }
.hp-sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px 32px; align-items: end; margin-bottom: 28px; }
.hp-sec-head .hp-eyebrow { margin-bottom: 8px; }
.hp-sec-head .intro { color: var(--hp-ink-2); max-width: 48ch; }
@media (max-width: 1023px) { .hp-sec { padding: 48px 0; } }
@media (max-width: 767px) { .hp-sec { padding: 28px 0; } .hp-sec-head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 22px; } }

/* ============================================================================
   Room gallery: three photographic entries, 6/3/3, no card outlines
   ============================================================================ */
.hp-rooms { background: #fff; }
.hp-room-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; }
.hp-room { display: flex; flex-direction: column; min-width: 0; }
.hp-room.store { grid-column: span 6; }
.hp-room.freeze, .hp-room.work { grid-column: span 3; }
.hp-room figure { margin: 0; position: relative; }
.hp-room .ph { height: 300px; overflow: hidden; border-radius: 3px; background: var(--hp-warm-2); }
.hp-room.store .ph img { object-position: 100% 50%; }
.hp-room.freeze .ph img { object-position: 50% 45%; }
.hp-room.work .ph img { object-position: 50% 50%; }
.hp-room figcaption { margin-top: 10px; }
.hp-room .lbl { margin-top: 12px; font: 600 12px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.hp-room h3 { margin-top: 8px; font-size: 25px; line-height: 1.15; letter-spacing: -0.02em; }
.hp-room h3 a { text-decoration: none; }
.hp-room h3 a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.hp-room p { margin-top: 10px; color: var(--hp-ink-2); font-size: 17px; max-width: 46ch; }
.hp-room .go { margin-top: 16px; }
@media (max-width: 1279px) { .hp-room-grid { gap: 32px 24px; } .hp-room .ph { height: 272px; } }
@media (max-width: 1023px) {
  .hp-room-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 28px; }
  .hp-room.store { grid-column: 1 / -1; }
  .hp-room.freeze, .hp-room.work { grid-column: span 1; }
  .hp-room.store .ph { height: 300px; }
  .hp-room .ph { height: 232px; }
  .hp-room h3 { font-size: 23px; }
}
/* Phone: a compact row per entry (thumbnail + text), never a stack of full-width slides. */
@media (max-width: 767px) {
  .hp-room-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hp-line); }
  .hp-room.freeze, .hp-room.work, .hp-room.store { grid-column: 1 / -1; }
  .hp-room { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--hp-line); }
  .hp-room figure { grid-column: 1; grid-row: 1 / span 4; }
  .hp-room .lbl, .hp-room h3, .hp-room p, .hp-room .go { grid-column: 2; }
  .hp-room.store .ph, .hp-room .ph { height: 104px; }
  .hp-room .lbl { margin-top: 0; font-size: 11.5px; }
  .hp-room h3 { margin-top: 5px; font-size: 20px; }
  .hp-room p { margin-top: 6px; font-size: 15.5px; }
  .hp-room .go { margin-top: 10px; font-size: 15px; }
}

/* ============================================================================
   Operator chapter: warm ground, tactile workmanship photograph, three principles
   ============================================================================ */
.hp-op { background: var(--hp-warm); }
.hp-op .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: 0 72px; align-items: start; }
.hp-op-fig { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.hp-op-fig .ph { height: 360px; overflow: hidden; border-radius: 3px; background: var(--hp-warm-2); }
.hp-op-fig .ph img { object-position: 50% 42%; }
.hp-op-fig figcaption { margin-top: 10px; }
.hp-op-head { grid-column: 2; grid-row: 1; }
.hp-op-head h2 { margin-top: 0; max-width: 18ch; }
.hp-op-body { grid-column: 2; grid-row: 2; }
.hp-op-body p { margin-top: 12px; color: var(--hp-ink-2); max-width: 52ch; }
.hp-op-body p:first-child { margin-top: 14px; color: var(--hp-ink); }
.hp-principles { margin-top: 36px; border-top: 1px solid var(--hp-line); }
.hp-principles li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--hp-line); }
.hp-principles .no { font: 600 13px/1.3 var(--font); color: var(--red); letter-spacing: .06em; font-variant-numeric: tabular-nums; padding-top: 6px; position: relative; }
.hp-principles .no::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: var(--red); }
.hp-principles h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.hp-principles p { grid-column: 2; margin: 0; color: var(--hp-ink-2); font-size: 16.5px; max-width: 48ch; }
.hp-op-body .go { margin-top: 28px; }
@media (max-width: 1279px) { .hp-op .wrap { gap: 0 48px; } }
@media (max-width: 1023px) { .hp-op-head h2 { max-width: 16ch; } }
@media (max-width: 767px) {
  .hp-op .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .hp-op-head { grid-column: 1; grid-row: auto; order: 1; }
  .hp-op-fig { grid-column: 1; grid-row: auto; order: 2; margin-top: 12px; }
  .hp-op-fig .ph { height: 220px; }
  .hp-op-body { grid-column: 1; grid-row: auto; order: 3; }
  .hp-op-body p { margin-top: 16px; }
  .hp-op-body p:first-child { margin-top: 12px; }
  .hp-principles { margin-top: 24px; }
  .hp-principles li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
  .hp-op-body .go { margin-top: 12px; }
}
@media (max-width: 400px) { .hp-op-fig .ph { height: 200px; } }

/* ============================================================================
   Components: compact open three-column link row
   ============================================================================ */
.hp-parts { background: #fff; padding: 48px 0; border-bottom: 1px solid var(--hp-line); }
.hp-parts .hp-sec-head { margin-bottom: 32px; }
.hp-parts h2 { font-size: clamp(30px, 1.6vw + 18px, 44px); }
.hp-part-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hp-line); }
.hp-part { display: block; text-decoration: none; padding: 26px 32px 28px 0; border-left: 1px solid var(--hp-line); padding-left: 28px; color: var(--hp-ink); transition: background .12s; }
.hp-part:first-child { border-left: 0; padding-left: 0; }
.hp-part .t { display: block; font-weight: 600; font-size: 21px; letter-spacing: -0.015em; line-height: 1.25; }
.hp-part .t::after { content: " →"; color: var(--red); display: inline-block; transition: transform .15s; }
.hp-part:hover .t { text-decoration: underline; text-decoration-color: var(--red); }
.hp-part:hover .t::after { transform: translateX(3px); }
.hp-part .d { display: block; margin-top: 8px; color: var(--hp-ink-2); font-size: 16px; max-width: 34ch; }
@media (max-width: 767px) {
  .hp-parts { padding: 36px 0; }
  .hp-parts .hp-sec-head { margin-bottom: 22px; }
  .hp-part-row { grid-template-columns: minmax(0, 1fr); }
  .hp-part, .hp-part:first-child { border-left: 0; padding: 16px 0; border-bottom: 1px solid var(--hp-line); }
  .hp-part .d { max-width: none; }
}

/* ============================================================================
   Selected work: typographic records, fine red rule, no imagery
   ============================================================================ */
.hp-work { background: #fff; }
.hp-recs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; }
.hp-rec { border-top: 2px solid var(--red); padding: 28px 0 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hp-rec .n { font-size: clamp(48px, 4vw + 10px, 72px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-rec .n small { font: 500 15px/1 var(--font); color: var(--hp-ink-2); margin-left: 12px; letter-spacing: .02em; }
.hp-rec dl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 17px; }
.hp-rec dt { color: var(--hp-ink-3); font-size: 14px; padding-top: 3px; }
.hp-rec dd { margin: 0; }
.hp-rec dd:first-of-type { font-weight: 600; font-size: 19px; }
.hp-work .go { margin-top: 32px; }
@media (max-width: 767px) { .hp-recs { grid-template-columns: minmax(0, 1fr); } .hp-rec { padding: 22px 0 28px; } .hp-rec + .hp-rec { margin-top: 8px; } }

/* ============================================================================
   Estimator: the one deep-ink chapter, directly under the hero. One cohesive invitation, not a card collection:
   the offer and the two preselected branches above a full-width planning sheet, then what the three
   outputs mean and how the email follow-up continues the same document.
   ============================================================================ */
.hp-est { background: var(--hp-ink); color: #fff; }
.hp-est .wrap {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 36px; align-items: start;
  grid-template-areas: "lead lead" "preview preview" "outputs outputs" "follow follow";
}
.hp-est-lead { grid-area: lead; }
.hp-est-preview { grid-area: preview; margin: 0; min-width: 0; }
.hp-est-outputs { grid-area: outputs; }
.hp-est-follow { grid-area: follow; }
.hp-est .hp-eyebrow { color: rgba(255,255,255,.7); }
.hp-est h2 { color: #fff; margin-top: 8px; }
.hp-est .promise { margin-top: 12px; color: rgba(255,255,255,.8); max-width: 44ch; }
.hp-est .prompt { margin-top: 32px; font: 600 13px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.hp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hp-choice { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 4px 24px; align-items: center; background: #fff; color: var(--hp-ink); text-decoration: none; border-radius: 8px; padding: 22px 24px; transition: transform .15s, box-shadow .15s; }
.hp-choice:hover { transform: translateX(4px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hp-choice .t { grid-column: 1; font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.hp-choice .d { grid-column: 1; color: var(--hp-ink-2); font-size: 15.5px; }
.hp-choice .a { grid-column: 1; margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--red); }
.hp-choice .arr { grid-column: 2; grid-row: 1 / span 3; width: 32px; height: 32px; color: var(--red); transition: transform .15s; }
.hp-choice:hover .arr { transform: translateX(4px); }
.hp-choice:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Full-width technical sheet. Keep the side schedule legible and pan inside the
   focusable region on narrow screens, matching the calculator's drawing behavior. */
.hp-est-preview h3 { color: #fff; margin-top: 8px; font-size: clamp(22px, 1vw + 14px, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.hp-est-sheet { margin-top: 10px; background: #fdfdfb; border: 1px solid #b8c0c2; border-radius: 2px; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.hp-est-sheet img { display: block; width: 100%; min-width: 1120px; height: auto; }
.hp-est-sheet:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hp-est-hint { margin-top: 8px; font: 500 13px/1.4 var(--font); letter-spacing: .01em; color: rgba(255,255,255,.62); }
.hp-est-hint::before { content: "↔"; margin-right: 8px; color: rgba(255,255,255,.5); }
.hp-est-preview figcaption { margin-top: 14px; }
.hp-est-inputs { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); font-weight: 500; }
.hp-est-inputs .k { display: inline-block; font: 600 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-right: 10px; }
.hp-est-preview .hp-caption { margin-top: 6px; color: rgba(255,255,255,.6); }

.hp-est-outputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 64px; border-top: 1px solid var(--hp-line-ink); padding-top: 30px; }
.hp-est-outputs h3 { color: #fff; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.hp-est-outputs p { margin-top: 8px; font-size: 16px; color: rgba(255,255,255,.72); }

.hp-est-follow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 36px; border-top: 1px solid var(--hp-line-ink); padding-top: 30px; }
.hp-est-follow h3 { grid-column: 1; color: #fff; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.hp-est-follow p { grid-column: 2; color: rgba(255,255,255,.8); font-size: 17px; }
.hp-est .caveat { margin-top: 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 68ch; }
@media (max-width: 1023px) {
  .hp-est .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; grid-template-areas: "lead" "preview" "outputs" "follow"; }
  .hp-est-outputs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hp-est-outputs li { padding: 18px 0; border-bottom: 1px solid var(--hp-line-ink); }
  .hp-est-outputs li:first-child { padding-top: 0; }
  .hp-est-follow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hp-est-follow h3, .hp-est-follow p { grid-column: 1; }
}
@media (max-width: 767px) {
  .hp-est .wrap { gap: 28px; }
  .hp-choice { padding: 18px; } .hp-choice .t { font-size: 20px; }
  .hp-est-sheet { margin-top: 14px; }
  .hp-choices { grid-template-columns: minmax(0, 1fr); }
  .hp-est .prompt { margin-top: 22px; }
  .hp-est-outputs { padding-top: 22px; }
  .hp-est-outputs li { padding: 14px 0; }
  .hp-est-follow { padding-top: 22px; }
}

/* The technical sheet becomes an atmospheric layer; foreground controls remain opaque. */
.hp-est-with-plan { position: relative; isolation: isolate; overflow: hidden; background: #142b35; }
.hp-est-plan-background { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hp-est-plan-background img {
  position: absolute; width: min(1240px, 98vw); max-width: none; height: auto; top: 26px; right: -18px;
  filter: invert(1) grayscale(1); mix-blend-mode: screen; opacity: .4;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 78%, transparent);
}
.hp-est-with-plan::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #142b35 0%, rgba(20,43,53,.96) 24%, rgba(20,43,53,.68) 44%, rgba(20,43,53,.08) 72%),
    linear-gradient(180deg, rgba(20,43,53,.2), transparent 18%, transparent 30%, rgba(20,43,53,.94) 60%, #142b35 78%);
}
.hp-est-with-plan > .wrap { grid-template-areas: "lead ." "preview ." "outputs outputs" "follow follow"; row-gap: 36px; }
.hp-est-with-plan .hp-est-lead { padding: 12px 0 0; }
.hp-est-with-plan .hp-choices { grid-template-columns: minmax(0, 1fr); }
.hp-est-with-plan .hp-choice { background: #f3f6f5; border: 1px solid #d8e1e2; border-radius: 4px; }
.hp-est-with-plan .hp-est-preview { justify-self: start; margin: 0 0 20px; max-width: 380px; }
.hp-est-with-plan .hp-est-preview .hp-eyebrow { font-size: 11px; }
.hp-est-with-plan .hp-est-preview h3 { font-size: 22px; }
.hp-est-plan-link { color: #fff; text-decoration: none; text-underline-offset: 5px; }
.hp-est-plan-link:hover { text-decoration: underline; }
.hp-est-plan-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.hp-est-with-plan .hp-est-preview figcaption { margin-top: 10px; }
.hp-est-with-plan .hp-est-outputs { padding-top: 26px; }
@media (max-width: 1023px) {
  .hp-est-with-plan > .wrap { grid-template-areas: "lead" "preview" "outputs" "follow"; row-gap: 32px; }
  .hp-est-with-plan .hp-est-lead { max-width: 520px; padding-bottom: 0; }
  .hp-est-plan-background img { width: 1120px; right: -240px; top: 70px; opacity: .4; }
  .hp-est-with-plan::before {
    background: linear-gradient(90deg, rgba(20,43,53,.94), rgba(20,43,53,.45) 65%, rgba(20,43,53,.2)),
      linear-gradient(180deg, #142b35, transparent 14%, transparent 34%, #142b35 68%);
  }
  .hp-est-with-plan .hp-est-preview { justify-self: end; margin: 70px 0 32px; }
}
@media (max-width: 767px) {
  .hp-est-plan-background img { width: 920px; top: 45px; right: -295px; opacity: .34; }
  .hp-est-with-plan::before {
    background: linear-gradient(90deg, rgba(20,43,53,.82), rgba(20,43,53,.3)),
      linear-gradient(180deg, #142b35, transparent 15%, transparent 32%, #142b35 65%);
  }
  .hp-est-with-plan .hp-est-preview { justify-self: start; margin: 48px 0 28px; }
  .hp-est-with-plan .hp-est-preview h3 { font-size: 21px; }
}

/* ============================================================================
   Buyer questions: left heading, right disclosures (details.faq styles from site.css)
   ============================================================================ */
.hp-faq { background: #fff; }
.hp-faq .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; align-items: start; }
.hp-faq h2 { font-size: clamp(30px, 1.6vw + 18px, 44px); max-width: 12ch; }
.hp-faq details.faq { border-color: var(--hp-line); }
.hp-faq details.faq summary { font-size: 19px; padding: 22px 0; }
.hp-faq details.faq p { font-size: 17px; color: var(--hp-ink-2); padding-bottom: 26px; }
@media (max-width: 1023px) { .hp-faq .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; } .hp-faq h2 { max-width: none; } }

/* ============================================================================
   Contact: warm two-column close; quiet white form
   ============================================================================ */
.hp-contact { background: var(--hp-warm); border-top: 1px solid var(--hp-line); }
.hp-contact .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px 48px; align-items: start; }
.hp-contact h2 { margin-top: 10px; max-width: 12ch; }
.hp-contact .invite { margin-top: 12px; color: var(--hp-ink-2); max-width: 44ch; }
.hp-ledger { margin-top: 36px; border-top: 1px solid var(--hp-line); max-width: 460px; }
.hp-ledger div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0 16px; padding: 14px 0; border-bottom: 1px solid var(--hp-line); font-size: 17px; overflow-wrap: anywhere; }
.hp-ledger .k { color: var(--hp-ink-3); font-size: 14px; padding-top: 3px; }
.hp-ledger a { text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-ledger a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.hp-contact .form-card { border-color: var(--hp-line); box-shadow: none; border-radius: 8px; padding: 36px; }
.hp-contact .frow label { font-size: 15px; }
.hp-contact .field { border-color: #D6D1C9; }
.hp-contact .note { margin-top: 12px; text-align: center; font-size: 14px; color: var(--hp-ink-2); }
.hp-contact .success h3 { font-size: 30px; }
@media (max-width: 1023px) { .hp-contact .wrap { gap: 36px 48px; } }
@media (max-width: 900px) { .hp-contact .wrap { grid-template-columns: minmax(0, 1fr); } .hp-contact h2 { max-width: none; } }
@media (max-width: 480px) { .hp-contact .form-card { padding: 22px 18px; } }

/* ---- Footer ----
   Homepage only: site.css collapses the three link columns into one stack below 480px, which on a phone made the
   footer the third-tallest thing on the page. Two columns here; the other 11 pages keep the shared behaviour. */
@media (max-width: 480px) {
  .home .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .home .foot .about { grid-column: 1 / -1; }
  .home .foot .col a { padding: 4px 0; }
}
.home .foot .about p { max-width: 34ch; }
.home .foot .lines a { display: inline; padding: 0; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.home .foot .lines div { padding: 4px 0; }
.home .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.home .foot-bottom .disc { max-width: 70ch; }

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) { .home .go::after, .hp-part .t::after, .hp-choice, .hp-choice .arr { transition: none; } .hp-choice:hover { transform: none; } }