/* SITE LOOK for every page except the homepage (2026-09-20). It carries the homepage's locked design onto the
   inner pages without touching their sentences: navy header with the white logo and phone, a photograph hero with
   the tinted liquid-glass card, the heavy type system, FPT-red actions, a navy closing band and the navy footer.
   Loaded after site.css by tools/apply-site-look.py. The homepage keeps its own assets/home-presentation.css. */
/* --navy, --navy-deep and every card value now live in assets/card.css, loaded before this file. */
:root { --hero-red: var(--red,#B7352D); --ink: #0C141C; }

/* Header: solid navy, white logo, light links, phone on the right. Dropdown and the phone menu stay light sheets. */
.hdr { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; box-shadow: 0 2px 16px rgba(8,14,17,.28); }
.hdr-in { min-height: clamp(78px,4.8vw,92px); }
.hdr-logo img { height: clamp(52px,3.6vw,68px); }   /* vector lockup: taller than the old PNG, which was 3:1 */
.nav { margin-left: auto; }
.nav-link, .nav-btn { color: #f2f5f6; font-weight: 600; }
.nav-link:hover, .nav-btn:hover, .nav-item.open > .nav-btn { color: #fff; }
.nav-link.on { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.menu .nav-link, .menu a { color: #1b2428; }
.hdr :is(a,button):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }
.hdr-right { margin-left: 0; }
.hdr-phone { color: #fff; font-weight: 700; font-size: clamp(14px,.95vw,17px); text-decoration: none; padding: 10px 6px; white-space: nowrap; }
.hdr-phone:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.menu-btn { color: #f2f5f6; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.menu-btn:hover { border-color: #fff; }
.nav.open .nav-link, .nav.open .nav-btn { color: #1b2428; }
@media (min-width:981px) { .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); } }

/* Type system: heavy near-black headlines, eyebrow with the red dash, one reading size. */
h1, h2, h3 { font-weight: 800; color: var(--ink); }
h1 { letter-spacing: -.025em; line-height: 1.06; }
h2 { letter-spacing: -.025em; line-height: 1.06; }
h3 { letter-spacing: -.02em; }
.eyebrow { font-weight: 700; letter-spacing: .09em; color: #1b1b1b; gap: 12px; }
.eyebrow::before { width: clamp(22px,1.6vw,32px); height: 2px; border-radius: 0; background: var(--red); }
.spoke-body .sec-head .no { font-size: clamp(22px,1.6vw,30px); font-weight: 800; letter-spacing: -.02em; color: var(--red-ink,#93281F); padding-top: 0; }
.spoke-body .sec-head h2 { font-size: clamp(28px,2.1vw,42px); }
.faq summary, details > summary { font-weight: 700; }

/* Actions: the homepage's large FPT-red button. */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { background: var(--hero-red); border-color: var(--hero-red); box-shadow: 0 6px 18px rgba(120,20,16,.22); }
.btn-primary:hover { background: var(--red-ink,#93281F); border-color: var(--red-ink,#93281F); }
.hero-simple .btn-primary, .close .btn-primary { min-height: clamp(54px,3.4vw,66px); padding-inline: clamp(30px,3.2vw,60px); font-size: clamp(17px,1.2vw,22px); }

/* Hero: the page's photograph (or plain navy) behind one tinted liquid-glass card, as on the homepage. */
/* The photograph is lifted toward white first: the homepage's site photograph is bright, and the black headline on
   the navy tint only reads over a bright ground. Darker interiors get the same footing this way. */
.hero-simple { border-bottom: 0; color: #fff;
  background: var(--card-ground-lift), var(--hero-photo, none) center / cover no-repeat var(--navy); }
/* Pages with no hero photograph (contact, the estimator) used to get a navy band and a nearly invisible card.
   They now get the same pale ground, so the one card reads the same there as everywhere else. */
.hero-simple:not([data-photo]) { background: linear-gradient(180deg,#E9EEEF,#DCE4E7); }
.hero-simple .hero-texture { display: none; }
.hero-simple .wrap { padding-top: clamp(28px,3vw,56px); padding-bottom: clamp(40px,4.6vw,88px); }
.hero-simple[data-photo] .wrap { min-height: min(62svh,640px); display: flex; align-items: center; box-sizing: border-box; }
/* The same card as the homepage's, built from the shared names in card.css — same tint, blur, corner,
   padding and shadow. It used to carry its own copies of those values and had drifted. */
.hero-card { width: 100%; box-sizing: border-box; padding: var(--card-pad); border-radius: var(--card-radius);
  background: var(--card-tint);
  -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow); }
.hero-card .crumb { margin-bottom: clamp(14px,1.4vw,24px); font-size: clamp(12px,.9vw,15px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hero-card .crumb, .hero-card .crumb a, .hero-card .crumb span, .hero-card .crumb span:last-child { color: var(--card-ink-soft); }
.hero-card .crumb a:hover { color: var(--card-ink); text-decoration-color: var(--red); }
.hero-card .eyebrow { color: var(--card-eyebrow-ink); margin-bottom: 0; }
.hero-card h1 { margin-top: clamp(10px,.9vw,18px); font-size: clamp(34px,3.1vw,60px); color: var(--card-head-ink); max-width: 22ch; text-wrap: balance; }
.hero-card .lead, .hero-card .lead-support { margin-top: clamp(12px,1vw,20px); font-size: clamp(17px,1.25vw,22px); line-height: 1.45; color: var(--card-ink); max-width: 40em; text-shadow: none; text-wrap: pretty; }
.hero-card .acts { margin-top: clamp(22px,1.9vw,36px); }
.hero-card .acts a:not(.btn) { color: var(--card-ink); font-weight: 700; }
.hero-card :is(a,button):focus-visible { outline: 3px solid #8fd0e6; outline-offset: 3px; }

/* Closing band on the inner pages: navy, white type, the red action, the second action as a light outline. */
.close { background: linear-gradient(180deg,#223052,#141C33); border: 0; border-radius: clamp(24px,2vw,36px); padding: clamp(32px,3.4vw,64px); box-shadow: var(--card-shadow); }
.close h2 { color: #fff; font-size: clamp(28px,2.4vw,46px); }
.close .lead, .close .note { color: #e4ebef; font-size: clamp(16px,1.15vw,20px); }
.close .note a, .close .acts a.text, .close .acts a:not(.btn) { color: #fff; }
.close .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); box-shadow: none; }
.close .btn-secondary:hover { border-color: #fff; }

/* Contact page form section and the estimator keep their layouts; they take the type, buttons and corners. */
.form-card { border-radius: var(--card-light-radius); }

/* Footer: the header's navy, a shade deeper. */
.foot { background: var(--navy-deep); }

@media (max-width:767px) {
  .hdr-phone { display: none; }
  .hero-simple[data-photo] .wrap { min-height: 0; }
}

/* Estimator: its three-step strip sits inside the navy hero card. */
.hero-card .funnel { border-top-color: var(--card-rule); }
.hero-card .funnel li { color: var(--card-ink-soft); }
.hero-card .funnel li.is-done, .hero-card .funnel li.is-current { color: var(--card-ink); }
.hero-card .funnel .fs-line { color: var(--card-ink-soft); }

/* ============================================================================================================
   THE SECTION RULES ON THE INNER PAGES (Eugene, 2026-09-22). assets/look.css PART 2 holds the rules and the
   names; this block applies them here. The page bodies had drifted into a different design from the homepage:
   red 01/02/03 numbering the homepage never had, small grey type on hairlines, a 1280px column against the
   homepage's 1700px, and five different section paddings per page.
   ============================================================================================================ */

/* RULE 4 — one reading column, the homepage's. Header, body and footer all sit on it. */
.wrap, .wrap-narrow { max-width: var(--page-max); padding-inline: var(--page-inset); }
.hdr-in { max-width: var(--page-max); padding-inline: var(--page-inset); }
.foot > .wrap { max-width: var(--page-max); padding-inline: var(--page-inset); }

/* RULE 2 — one rhythm. One hairline between sections, no per-section exceptions. */
.spoke-body { padding-top: 0; }
.spoke-body .sec, .chapters .chapter { padding: var(--sec-pad) 0; border-top: 1px solid var(--band-rule); }
.spoke-body .sec:first-child, .chapters .chapter:first-child { border-top: 0; }
.spoke-body .sec.last { padding-bottom: var(--sec-pad-lg); }
.chapters { padding-top: 0; padding-bottom: var(--sec-pad); }
.contact .wrap { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.faq-sec { padding-bottom: var(--sec-pad); }
.ik-main { padding: var(--sec-pad) 0; }
#calc { padding: var(--sec-pad) 0 var(--sec-pad-lg); }

/* RULE 3 — one section head everywhere: red dash, heavy headline, optional intro. The numbering goes: the
   homepage never numbered its sections, and the site follows the homepage. */
.spoke-body .sec-head { display: block; margin-bottom: var(--head-bottom); }
.spoke-body .sec-head .no, .chapters .chapter .label { display: none; }
.spoke-body .sec-head::before, .chapters .chapter h2::before, .contact > .wrap > div:first-child h2::before {
  content: ""; display: block; width: var(--head-dash); height: 2px; background: var(--red); margin-bottom: var(--head-gap);
}
.spoke-body .sec-head h2, .chapters .chapter h2, .contact h2, .faq-sec h2 {
  margin: 0; font-size: var(--head-size); font-weight: 800; letter-spacing: -.025em; line-height: 1.06;
  color: var(--ink); max-width: 26ch; text-wrap: balance;
}
.spoke-body .sec-head .intro, .chapters .chapter .p, .contact .lead {
  grid-column: auto; margin-top: var(--head-intro-gap); font-size: var(--head-intro); line-height: 1.45;
  color: var(--body-ink-2); max-width: var(--measure); text-wrap: pretty;
}
.spoke-body .sec > :not(.sec-head) { margin-left: 0; }   /* the 80px indent under the old numbering */

/* RULE 1 — bands. The statement band joins the site's navy; it was the only charcoal surface. */
.stmt-band { background: var(--band-navy); padding: var(--sec-pad-lg) 0; }
.contact, #calc, .ik-main { background: var(--band-pale); }
.contact { border-top: 1px solid var(--band-rule); }

/* Body blocks read at the homepage's weight, plain on the page ground — no cards (Eugene: "it doesn't all
   have to be these fancy cards"). Bigger type, near-black titles, charcoal copy, more air, one divider. */
.row { padding: clamp(20px,1.7vw,30px) 0; border-top-color: var(--band-rule); }
.row .t { font-size: var(--body-title); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.row .d { font-size: var(--body-text); line-height: 1.5; color: var(--body-ink-2); max-width: var(--measure); }
.row .d a, .row .go { color: var(--ink); font-weight: 600; }
.row .no { display: none; }                               /* the small red 01–06 counters inside the lists */
/* With the counter gone the list is two columns: the title, then the sentence. */
@media (min-width:768px) {
  .row.seq { grid-template-columns: minmax(0,22em) minmax(0,1fr); gap: 6px clamp(28px,3vw,64px); }
  .row.two { grid-template-columns: minmax(0,1fr); }
}
.rows.cards { gap: clamp(14px,1.4vw,22px); }
.rows.cards .row { padding: clamp(22px,1.9vw,32px) clamp(22px,2vw,34px); border-color: var(--band-rule); border-radius: var(--card-light-radius); background: var(--band-pale); }
.rows.cards .row .t { font-size: var(--body-title); }
.rows.cards .row .d { margin-top: 8px; font-size: var(--body-text); }
table.tbl { font-size: var(--body-text); }
table.tbl th { font-size: clamp(11px,.8vw,13px); letter-spacing: .09em; color: var(--body-ink-2); }
table.tbl td { color: var(--body-ink-2); }
table.tbl td:first-child { color: var(--ink); font-weight: 600; }
.faq summary, details > summary { font-size: var(--body-title); font-weight: 700; color: var(--ink); }
.faq-block { grid-template-columns: 1fr; gap: 0; margin-top: var(--head-bottom); }
.faq-block .label { display: none; }