/* Structural Integrity Report: the report itself. A sheet-white ground, deep navy bands, a serif
   set like a sealed document, numbered section kickers, and 1px hairlines in place of boxes and
   shadows. Seal red is the one signal color and marks only what you act on. Loaded after app.css
   and the config tokens (paper, ink, accent, fonts), so it states only what differs. */
.site-structuralintegrityreport {
  --on-navy: oklch(0.975 0.005 250);
  --on-navy-2: oklch(0.84 0.022 255);
  --navy-line: oklch(0.42 0.05 262);
  --navy-deep: oklch(0.205 0.055 262);
  counter-reset: sir-sec;

  /* Type: a serif with optical sizes, set tight, wrapping so no word is left alone */
  & h1, & h2, & h3 { font-weight: 600; letter-spacing: -.012em; font-optical-sizing: auto; text-wrap: balance; }
  /* the display cut for anything set large: sharper, and a touch narrower */
  & h1, & h2:not(.foot h2), & .facts dt, & .step-n { font-variation-settings: "opsz" 60; }
  & :focus-visible { outline-color: var(--accent); }

  /* Header: the sheet's title line */
  & .top { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--ink); }
  & .brand-mark { padding: 7px 9px 6px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .05em; }
  & .brand-word { padding-inline: 11px; font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .22em; }
  & .top-nav { font-size: 14.5px; }
  & .top-nav > a.on, & .nav-group > a.on { box-shadow: inset 0 -1px 0 var(--ink); }
  & .nav-menu { border-radius: 2px; border-color: var(--rule-2); box-shadow: 0 14px 30px -22px oklch(0.2 0.05 262 / .45); }
  & .nav-menu a { border-radius: 0; }
  & .nav-label { letter-spacing: .16em; font-size: 11.5px; }
  & .top-phone { font-variant-numeric: tabular-nums; }

  /* Buttons: square-cut, seal red for the action, navy hairline for the alternative */
  & .btn { border-radius: 2px; font-size: 15.5px; letter-spacing: .01em; }
  & .btn-solid { background: var(--accent); color: oklch(1 0 0); }
  & .btn-solid:hover { background: var(--accent-deep); }
  & .btn-line { border-color: var(--ink); }
  & .btn-ghost { border-color: color-mix(in oklch, var(--on-navy) 50%, transparent); color: var(--on-navy); }
  & .btn-ghost:hover { border-color: var(--on-navy); background: oklch(1 0 0 / .06); }
  & .closer .btn-light, & .closer .btn-light:hover { background: var(--accent); color: oklch(1 0 0); }
  & .closer .btn-light:hover { background: var(--accent-deep); }

  /* Hero: the report photo under a navy shade that leaves the lamp and the window readable */
  & .hero-warm { background: var(--ink); }
  & .hero-warm::before { background: linear-gradient(90deg, oklch(0.19 0.055 262 / .93) 0%, oklch(0.19 0.055 262 / .80) 36%, oklch(0.19 0.055 262 / .24) 64%, oklch(0.19 0.055 262 / .32) 100%); }
  & .hero-warm .kicker { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; color: var(--on-navy-2); }
  & .hero-warm .kicker::before { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; }
  & .hero-warm h1 { font-size: clamp(2.6rem, 1.3rem + 4.2vw, 4.75rem); font-weight: 600; line-height: 1.01; letter-spacing: -.022em; text-shadow: 0 2px 24px oklch(0.15 0.05 262 / .7); }
  & .hero-warm .lede { color: var(--on-navy-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); }
  /* the fact strip directly below says these three things */
  & .hero-warm .hero-ticks { display: none; }
  & .hero-warm .hero-call { margin-top: var(--s5); }
  & .hero-warm .hero-call a { text-decoration-color: var(--accent); text-underline-offset: 3px; }
  & .hero-warm .form-card, & .hero-request .form-card { box-shadow: 0 28px 60px -30px oklch(0.1 0.05 262 / .9); }

  /* The form: a cover sheet, ruled, with square fields */
  & .form-card { border-radius: 2px; border-color: var(--rule-2); box-shadow: none; }
  & .form-card .form-head { padding-bottom: var(--s4); border-bottom: 1px solid var(--ink); }
  & .form-card .form-head h2 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; }
  & .fld label { font-size: 13.5px; letter-spacing: .01em; }
  & .fld input, & .fld select, & .fld textarea { border-radius: 2px; border-color: var(--rule-2); }
  & .form-errors { border-radius: 2px; }

  /* Fact strip: four cells of the cover page, hairline ruled */
  & .facts-band { background: var(--navy-deep); color: var(--on-navy); border-top: 1px solid var(--navy-line); }
  & .facts > div { padding: 26px 24px 28px; border-left: 1px solid var(--navy-line); }
  & .facts > div:first-child { padding-left: 0; border-left: 0; }
  & .facts dt { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -.01em; line-height: 1.1; }
  & .facts dd { margin-top: 8px; font-size: 14px; color: var(--on-navy-2); opacity: 1; }

  /* Sections: each opens on a navy hairline with a numbered kicker, like a report section */
  & .sec h2, & .closer h2 { font-size: clamp(2rem, 1.25rem + 2.5vw, 3.15rem); font-weight: 600; letter-spacing: -.018em; line-height: 1.05; }
  & .sec-head, & .split > div:first-child:has(> .kicker) { padding-top: var(--s4); border-top: 1px solid var(--ink); }
  /* the section rule runs the full measure; the words under it keep their line length */
  & .sec-head:not(.sec-head-row) { max-width: none; }
  & .sec-head:not(.sec-head-row) > :not(.kicker) { max-width: 62ch; }
  & .sec-head:has(a.inline) > p { max-width: none; }
  & .sec .kicker { counter-increment: sir-sec; display: flex; align-items: center; margin-bottom: var(--s4); font-size: 12px; letter-spacing: .18em; color: var(--ink-2); }
  & .sec .kicker::before { content: counter(sir-sec) ".0"; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--rule-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--ink); }
  & .sec-head p:not(.kicker), & .sec-sub { color: var(--ink-2); }
  & .sec-sub a, & .sec-cta a, & .sec-head a.inline, & .signs a, & .qa a, & .steps a { text-decoration-color: var(--accent); text-underline-offset: 3px; }
  & .more { border-bottom-width: 1px; padding-bottom: 3px; }
  & .more span, & .path-go span, & .svc-go { color: var(--accent); }

  /* Photos: plates in the report, square and framed by a hairline */
  & .photo { border-radius: 0; outline: 1px solid oklch(0.2 0.05 262 / .12); outline-offset: -1px; }

  /* Where to start: three options in one ruled frame */
  & .paths { border-radius: 0; border-color: var(--rule-2); }
  & .path { border-color: var(--rule); }
  & .path:hover { background: var(--paper-2); }
  & .path .photo { border-radius: 0; }
  & .path h3 { font-size: 1.32rem; }
  & .path-go { font-size: 14px; letter-spacing: .01em; }

  /* The navy band: what is in the report, and what to have ready, numbered as clauses */
  & .sec-tint:has(> .split) { background: var(--ink); color: var(--on-navy); border-block: 0; }
  & .sec-tint:has(> .split) h2 { color: var(--on-navy); }
  & .sec-tint:has(> .split) .split > div:first-child { border-top-color: var(--navy-line); }
  & .sec-tint:has(> .split) .kicker { color: var(--on-navy-2); }
  & .sec-tint:has(> .split) .kicker::before { color: var(--on-navy); border-right-color: var(--navy-line); }
  & .sec-tint:has(> .split) .sec-sub { color: var(--on-navy-2); }
  & .sec-tint:has(> .split) .sec-sub a { color: var(--on-navy); }
  & .sec-tint:has(> .split) .photo { outline-color: oklch(1 0 0 / .14); }
  & .sec-tint:has(> .split) .signs { counter-reset: sir-item; }
  & .sec-tint:has(> .split) .signs li { counter-increment: sir-item; padding-left: 52px; border-color: var(--navy-line); color: var(--on-navy-2); }
  & .sec-tint:has(> .split) .signs li strong { color: var(--on-navy); font-weight: 600; }
  & .sec-tint:has(> .split) .signs li::before { content: counter(sir-item, decimal-leading-zero); left: 0; top: 15px; width: auto; height: auto; background: none; font-size: 13px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--on-navy-2); }

  /* List markers: a hairline box, like a checklist on the form */
  & .signs li::before, & .ticks li::before { width: 9px; height: 9px; background: none; border: 1px solid var(--ink); }
  & .signs li::before { top: 22px; left: 2px; }
  & .ticks li::before { top: 16px; left: 2px; }
  & .signs li, & .signs li:first-child { border-color: var(--rule-2); }

  /* Steps: large serif numerals over a navy hairline */
  & .steps li { padding-top: var(--s4); border-top: 1px solid var(--ink); }
  & .step-n { font-family: var(--display); font-weight: 500; font-size: 3rem; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
  & .steps h2, & .steps h3 { font-size: 1.38rem; font-weight: 600; }

  /* Guides: a light grey sheet, the cards ruled not rounded */
  & .sec-tint { background: var(--paper-2); border-block-color: var(--rule); }
  & .guide-card { border-radius: 0; border-color: var(--rule-2); }
  & .guide-card:hover { border-color: var(--ink); transform: none; }
  & .guide-card h2, & .guide-card h3 { font-size: 1.2rem; font-weight: 600; }
  & .guide-list-all { border-top-color: var(--ink); }
  & .guide-list-all .guide-card h3 { font-size: 1.35rem; }
  & .guide-list-all .guide-card:hover h3, & .tile:hover h3, & .link-rows a:hover strong { text-decoration-color: var(--accent); }

  /* Inner page heads on navy */
  & .page-head { background: var(--ink); border-bottom: 1px solid var(--navy-line); }
  & .page-head h1 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; }
  /* a wider text column, so a three-word service name sets on one line */
  & .page-head-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  & .page-head-grid h1 { max-width: none; }
  & .page-head .lede, & .hero-request .lede { color: var(--on-navy-2); }
  & .page-head .crumbs, & .hero-request .crumbs { font-size: 13px; letter-spacing: .02em; color: var(--on-navy-2); }
  & .page-head .crumbs a, & .hero-request .crumbs a { color: var(--on-navy); }
  & .page-head .guide-updated { color: var(--on-navy-2); }
  & .page-head-grid .photo { box-shadow: none; outline-color: oklch(1 0 0 / .16); }
  & .hero-request { background: var(--ink); }
  & .hero-request .proof span { color: var(--on-navy-2); }

  /* Services list */
  & .svc-rows { border-top-color: var(--ink); }
  & .svc-row h3 { font-size: 1.5rem; }
  & .svc-row:hover { background: var(--paper-2); }
  & .svc-group h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }

  /* Service page: the short answer as a ruled abstract, blocks under navy hairlines */
  & .answer { background: var(--paper-2); border: 1px solid var(--rule-2); border-top-color: var(--ink); border-radius: 0; }
  & .answer h2 { font-size: 1.45rem; }
  & .answer .answer-where { border-top-color: var(--rule-2); }
  & .block h2 { font-size: 1.4rem; border-bottom-color: var(--ink); }
  & .qa h3 { font-family: var(--display); font-size: 1.18rem; }
  & .qa-3 > div { border-top-width: 1px; }
  & .link-rows a { border-color: var(--rule); }

  /* Guide page */
  & .side-box { border-radius: 0; border-color: var(--rule-2); }
  & .side-cta { border-top-color: var(--ink); }
  & .prose h2 { font-size: 1.65rem; font-weight: 600; }
  & .prose h3 { font-size: 1.22rem; }
  & .prose a, & .block-text a, & .ticks a { text-decoration-color: var(--accent); }

  /* Service area */
  & .area h2, & .area h3 { border-bottom-width: 1px; }

  /* Closing band and footer */
  & .closer { background: var(--ink); color: var(--on-navy); }
  & .closer p { color: var(--on-navy-2); }
  & .foot { border-top: 1px solid var(--ink); background: var(--paper); }
  & .foot h2 { font-size: 11.5px; letter-spacing: .18em; color: var(--ink-2); }
  & .foot-fine { border-top-color: var(--rule-2); color: var(--ink-3); }

  @media (max-width: 980px) {
    & .hero-warm::before { background: linear-gradient(180deg, oklch(0.19 0.055 262 / .70) 0%, oklch(0.19 0.055 262 / .90) 52%, var(--ink) 100%); }
  }
  @media (min-width: 981px) and (max-width: 1100px) {
    & .guide-list-photos .guide-card h3 { padding-inline: 20px; font-size: 1.05rem; }
    & .guide-list-photos .guide-card p { padding-inline: 20px; }
  }
  @media (max-width: 900px) {
    & .page-head-grid { grid-template-columns: 1fr; }
    & .facts > div { padding: 20px 16px 22px 0; border-left: 0; border-top: 1px solid var(--navy-line); }
    & .facts > div:nth-child(-n+2) { border-top: 0; }
    & .facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--navy-line); }
  }
  @media (max-width: 620px) {
    & .hero-warm h1 { font-size: clamp(2.3rem, 1.2rem + 5vw, 2.6rem); }
    & .sec h2, & .closer h2 { font-size: 2rem; }
    /* sized to the column so a three-word service name still sets on one line */
    & .page-head h1 { font-size: min(2.1rem, calc((100vw - 34px) / 12.7)); }
    & .path h3, & .svc-row h3 { font-size: 1.05rem; }
    & .step-n { font-size: 2.4rem; }
    & .facts dt { font-size: 20px; }
    & .facts dd { font-size: 13.5px; }
    & .sec-tint:has(> .split) .signs li { padding-left: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    & .btn, & .path, & .guide-card, & .svc-row { transition: none; }
  }
}