/* STL Structural: the drafting table. Paper white, deep ink navy, a faint drafting grid on the
   dark bands, and a red pencil kept for what you act on. Drawings and numbers are in ink or in
   blue pencil, never red. Loaded after app.css and the site's tokens, so it states only what
   differs. */
.site-stlstructural{
  --navy:#13223a;
  --navy-2:#0e1a2d;
  --navy-line:#2b3c57;
  --navy-text:#a9b4c4;
  --blue-pencil:#2d5ea6;
  --blue-pencil-lit:#8aa9da;
  --mono:'Red Hat Mono',ui-monospace,Menlo,monospace;
  /* drafting film: a minor grid every 12px, a major line every 60px */
  --grid:linear-gradient(rgba(169,180,196,.10) 1px,transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg,rgba(169,180,196,.10) 1px,transparent 1px) 0 0 / 60px 60px,
    linear-gradient(rgba(169,180,196,.045) 1px,transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg,rgba(169,180,196,.045) 1px,transparent 1px) 0 0 / 12px 12px;
}

/* type: semi-condensed and exact; labels set like drawing annotations */
.site-stlstructural h1,.site-stlstructural h2,.site-stlstructural h3{font-weight:700;letter-spacing:-.01em}
.site-stlstructural .kicker{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;color:var(--ink-2)}
.site-stlstructural .sec .kicker{color:var(--ink-3)}
.site-stlstructural .sec h2,.site-stlstructural .closer h2{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.4rem);font-weight:800;line-height:1;letter-spacing:-.015em}

/* header: solid paper, no blur */
.site-stlstructural .top{background:var(--paper);backdrop-filter:none;border-bottom-color:var(--rule-2)}
.site-stlstructural .brand-mark{background:var(--navy);color:#fff;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em}
.site-stlstructural .brand-word{border-color:var(--navy);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.1em}
.site-stlstructural .top-nav > a.on,.site-stlstructural .nav-group > a.on{box-shadow:inset 0 -2px 0 var(--accent)}
.site-stlstructural .nav-menu{border-radius:3px;box-shadow:0 18px 40px -24px rgba(19,34,58,.45)}
.site-stlstructural .nav-menu a{border-radius:2px}
.site-stlstructural .nav-label{font-family:var(--mono);font-weight:500;letter-spacing:.06em}

/* buttons: the red pencil for the act, ink outlines for the rest */
.site-stlstructural .btn{border-radius:3px;font-weight:600}
.site-stlstructural .btn-solid{background:var(--accent);color:#fff}
.site-stlstructural .btn-solid:hover{background:var(--accent-deep)}
.site-stlstructural .btn-line{border-color:var(--navy);color:var(--navy)}
.site-stlstructural .btn-line:hover{background:var(--navy);color:#fff}
.site-stlstructural .closer .btn-light{background:var(--accent);color:#fff}
.site-stlstructural .closer .btn-light:hover{background:var(--accent-deep)}
.site-stlstructural .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.site-stlstructural .btn-ghost:hover{border-color:#fff}

/* links: ink text, red pencil underline */
.site-stlstructural .more{border-bottom-width:2px;padding-bottom:3px}
.site-stlstructural .sec-sub a,.site-stlstructural .sec-cta a,.site-stlstructural .signs a,.site-stlstructural .qa a,
.site-stlstructural .hero-call a,.site-stlstructural .proof a,.site-stlstructural .sec-head a.inline,.site-stlstructural .steps a{text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}

/* hero: the house at dusk edge to edge, a navy shade only behind the words */
.site-stlstructural .hero-warm{background:var(--navy);padding:clamp(56px,7.5vw,112px) 0 clamp(72px,8.5vw,128px)}
.site-stlstructural .hero-warm::before{background:linear-gradient(90deg,rgba(12,22,38,.9) 0%,rgba(12,22,38,.72) 32%,rgba(12,22,38,.16) 58%,rgba(12,22,38,.4) 100%)}
.site-stlstructural .hero-warm .kicker{color:var(--navy-text)}
.site-stlstructural .hero-warm h1{font-size:clamp(2.6rem,1.3rem + 4.4vw,4.9rem);font-weight:800;line-height:.98;letter-spacing:-.02em;text-shadow:0 2px 28px rgba(8,16,30,.7)}
.site-stlstructural .hero-warm .lede{color:#e3e8ef;text-shadow:0 1px 14px rgba(8,16,30,.9)}
.site-stlstructural .hero-warm .hero-call{color:var(--navy-text)}
.site-stlstructural .hero-warm .hero-call a{color:#fff}
/* ticks: a small dimension mark, not a checkmark disc */
.site-stlstructural .hero-ticks li{padding-left:30px}
.site-stlstructural .hero-ticks li::before{top:.75em;left:0;width:16px;height:2px;border-radius:0;background:#fff}
.site-stlstructural .hero-ticks li::after{left:0;top:calc(.75em - 4px);width:16px;height:10px;border:0;border-left:2px solid #fff;border-right:2px solid #fff;transform:none}
.site-stlstructural .hero-warm .form-card{box-shadow:0 30px 70px -30px rgba(6,12,24,.9)}

/* form */
.site-stlstructural .form-card{border-radius:3px}
.site-stlstructural .form-card .form-head h2{font-size:1.6rem;font-weight:800}
.site-stlstructural .fld label{font-weight:600}
.site-stlstructural .fld input,.site-stlstructural .fld select,.site-stlstructural .fld textarea{border-radius:2px}
.site-stlstructural .check-opts span{border-radius:2px}

/* fact strip: navy on the grid */
.site-stlstructural .facts-band{background:var(--grid),var(--navy);color:#fff;border-top:1px solid var(--navy-line)}
.site-stlstructural .facts>div{padding:var(--s5) var(--s5) var(--s6);border-left-color:var(--navy-line)}
.site-stlstructural .facts>div:first-child{padding-left:0}
.site-stlstructural .facts dt{font-weight:800;font-size:clamp(26px,2.3vw,34px);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.site-stlstructural .facts dd{margin-top:8px;color:var(--navy-text);opacity:1;font-size:15px}

/* inner page heads: navy on the grid */
.site-stlstructural .page-head,.site-stlstructural .hero-request{background:var(--grid),var(--navy)}
.site-stlstructural .page-head h1{font-size:clamp(2.3rem,1.4rem + 3vw,3.8rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.site-stlstructural .page-head .lede{color:#d5dce6}
.site-stlstructural .page-head .crumbs,.site-stlstructural .hero-request .crumbs{font-family:var(--mono);font-size:13px;color:#8d9aad}
.site-stlstructural .page-head .crumbs a,.site-stlstructural .hero-request .crumbs a{color:var(--navy-text)}
.site-stlstructural .page-head .guide-updated{font-family:var(--mono);font-size:13px;color:#8d9aad}

/* sections */
.site-stlstructural .sec-tint{background:var(--paper-2);border-color:var(--rule)}
.site-stlstructural .photo{border-radius:3px}
.site-stlstructural .paths{border-radius:3px}
.site-stlstructural .path:hover{background:var(--paper)}
.site-stlstructural .path h3,.site-stlstructural .tile h3{font-size:1.3rem}
.site-stlstructural .lend h3{font-size:1.15rem}
.site-stlstructural .path-go span,.site-stlstructural .tile-ask > span span,.site-stlstructural .svc-go{color:var(--accent)}

/* ruled lists: each item marked by a short dimension line */
.site-stlstructural .signs li::before,.site-stlstructural .ticks li::before{top:1.05em;width:12px;height:1.5px;background:var(--ink-2)}
.site-stlstructural .signs li::after,.site-stlstructural .ticks li::after{content:"";position:absolute;left:4px;top:calc(1.05em - 4px);width:12px;height:9px;border-left:1.5px solid var(--ink-2);border-right:1.5px solid var(--ink-2);box-sizing:border-box}
.site-stlstructural .ticks li::before{top:.9em;left:2px}
.site-stlstructural .ticks li::after{top:calc(.9em - 4px);left:2px}
.site-stlstructural .signs strong{font-weight:700;color:var(--ink)}

/* steps: numbered like detail callouts on a sheet */
.site-stlstructural .steps li{border-top:1px solid var(--navy)}
.site-stlstructural .step-n{display:inline-grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--navy);border-radius:50%;font-family:var(--mono);font-weight:500;font-size:1.15rem;color:var(--navy)}
.site-stlstructural .steps h2,.site-stlstructural .steps h3{font-size:1.5rem}
.site-stlstructural .qa-3 > div{border-top:1px solid var(--navy)}

/* crack figure and drawings: ink lines with blue pencil, never red */
.site-stlstructural .crack-line{stroke:var(--navy);stroke-width:3}
.site-stlstructural .crack figcaption .crack-verdict{font-family:var(--mono);font-weight:500;letter-spacing:.04em;text-transform:none;font-size:13px;color:var(--blue-pencil)}
.site-stlstructural .crack figcaption strong{font-size:1.3rem}
.site-stlstructural .fig{--fig-accent:var(--blue-pencil)}
.site-stlstructural .fig svg,.site-stlstructural .crack svg{border-radius:3px}
.site-stlstructural .fig figcaption li span{font-family:var(--mono);font-weight:500}

/* the crack patterns on the home page: drawn on the navy sheet, like a print */
.site-stlstructural .sec-tint:has(.cracks){background:var(--grid),var(--navy);color:#fff;border-color:var(--navy)}
.site-stlstructural .sec-tint:has(.cracks) .kicker{color:var(--navy-text)}
.site-stlstructural .sec-tint:has(.cracks) .sec-head p:not(.kicker),.site-stlstructural .sec-tint:has(.cracks) .sec-cta,
.site-stlstructural .sec-tint:has(.cracks) .crack figcaption span:not(.crack-verdict){color:var(--navy-text)}
.site-stlstructural .sec-tint:has(.cracks) .sec-cta a{color:#fff}
.site-stlstructural .sec-tint:has(.cracks) .crack-wall{fill:rgba(255,255,255,.03);stroke:rgba(169,180,196,.55)}
.site-stlstructural .sec-tint:has(.cracks) .crack-joint{stroke:rgba(169,180,196,.3)}
.site-stlstructural .sec-tint:has(.cracks) .crack-line{stroke:#fff}
.site-stlstructural .sec-tint:has(.cracks) .crack figcaption .crack-verdict{color:var(--blue-pencil-lit)}

/* lenders band: navy on the grid; the lenders card a shade deeper, its link underlined in red pencil */
.site-stlstructural .sec-ink{background:var(--grid),var(--navy)}
.site-stlstructural .sec-ink .kicker{color:var(--navy-text)}
.site-stlstructural .sec-ink .signs li::before,.site-stlstructural .sec-ink .ticks li::before{background:#fff}
.site-stlstructural .sec-ink .signs li::after{border-color:#fff}
.site-stlstructural .sec-ink .fig{--fig-accent:var(--blue-pencil-lit)}
.site-stlstructural .lend{border-radius:3px;background:var(--navy-line);border-color:var(--navy-line)}
.site-stlstructural .lend a{background:var(--navy)}
.site-stlstructural .lend a:hover{background:#1a2c48}
.site-stlstructural .lend p{color:var(--navy-text)}
.site-stlstructural .lend .lend-all{background:var(--navy-2)}
.site-stlstructural .lend .lend-all:hover{background:#1a2c48}
.site-stlstructural .lend .lend-all p{color:var(--navy-text)}
.site-stlstructural .lend .lend-all > span{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}

/* services and guides */
.site-stlstructural .svc-rows,.site-stlstructural .cond,.site-stlstructural .guide-list-all,.site-stlstructural .link-rows-2{border-top-color:var(--navy)}
.site-stlstructural .svc-row h3{font-size:1.6rem}
.site-stlstructural .svc-group h2{font-size:clamp(1.8rem,1.3rem + 1.4vw,2.4rem);font-weight:800}
.site-stlstructural .guide-card{border-radius:3px}
.site-stlstructural .guide-card h2,.site-stlstructural .guide-card h3{font-size:1.25rem;line-height:1.12}
.site-stlstructural .guide-list-all .guide-card h3{font-size:1.45rem}
.site-stlstructural .guide-list-photos .guide-card h3{font-size:1.15rem;padding-inline:var(--s4)}
.site-stlstructural .guide-list-photos .guide-card p{padding-inline:var(--s4)}
.site-stlstructural .guide-card:hover{border-color:var(--navy)}
.site-stlstructural .tile-ask{border-radius:3px}
.site-stlstructural .link-rows strong{font-size:1.18rem}

/* service and guide pages */
.site-stlstructural .answer{background:var(--card);border:1px solid var(--rule-2);border-radius:3px}
.site-stlstructural .answer h2{font-size:1.55rem}
.site-stlstructural .answer .answer-where{border-top-color:var(--rule)}
.site-stlstructural .block h2{font-size:1.65rem;border-bottom-color:var(--navy)}
.site-stlstructural .qa h3{font-size:1.25rem}
.site-stlstructural .side-box{border-radius:3px}
.site-stlstructural .side-box h2{font-size:1.35rem}
.site-stlstructural .prose h2{font-size:1.85rem}
.site-stlstructural .prose h3{font-size:1.35rem}
.site-stlstructural .prose a{text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
.site-stlstructural .prose li::marker{color:var(--ink-2)}
.site-stlstructural .area h2,.site-stlstructural .area h3{border-bottom-width:1px;border-bottom-color:var(--navy);font-size:1.3rem}

/* closing band and footer */
.site-stlstructural .closer{background:var(--grid),var(--navy);color:#fff}
.site-stlstructural .closer p{color:var(--navy-text)}
.site-stlstructural .foot{background:var(--navy-2);color:var(--navy-text);border-top:1px solid var(--navy-line)}
.site-stlstructural .foot h2{font-family:var(--mono);font-weight:500;letter-spacing:.06em;color:#8d9aad}
.site-stlstructural .foot a{color:#e3e8ef}
.site-stlstructural .foot .brand-mark{background:#fff;color:var(--navy)}
.site-stlstructural .foot .brand-word{border-color:#fff;color:#fff}
.site-stlstructural .foot-phone{color:#fff}
.site-stlstructural .foot-fine{border-top-color:var(--navy-line);color:#8d9aad}
.site-stlstructural .foot-fine a{color:var(--navy-text)}

/* focus stays visible on the navy */
.site-stlstructural .hero-warm :focus-visible,.site-stlstructural .page-head :focus-visible,.site-stlstructural .closer :focus-visible,
.site-stlstructural .sec-ink :focus-visible,.site-stlstructural .foot :focus-visible,.site-stlstructural .sec-tint:has(.cracks) :focus-visible{outline-color:#fff}

@media (max-width:980px){
  .site-stlstructural .hero-warm::before{background:linear-gradient(180deg,rgba(12,22,38,.68) 0%,rgba(12,22,38,.88) 55%,rgba(12,22,38,.95) 100%)}
}
@media (max-width:900px){
  .site-stlstructural .facts>div{padding:var(--s4) var(--s4) var(--s5) 0;border-top-color:var(--navy-line)}
  .site-stlstructural .facts>div:nth-child(even){padding-left:var(--s4);border-left:1px solid var(--navy-line)}
  .site-stlstructural .lend h3{font-size:1.05rem}
}
@media (max-width:620px){
  .site-stlstructural .hero-warm h1{font-size:clamp(2.3rem,1.5rem + 4vw,2.8rem)}
  .site-stlstructural .facts dt{font-size:24px}
  /* lender cards go text-only on a phone so their long names keep to one line */
  .site-stlstructural .lend a:not(.lend-all){display:flex}
  .site-stlstructural .lend a .photo{display:none}
  .site-stlstructural .lend h3{font-size:1.2rem}
  .site-stlstructural .tile h3{font-size:1.1rem}
  .site-stlstructural .svc-row h3{font-size:1rem}
  .site-stlstructural .guide-list-all .guide-card h3{font-size:1.25rem}
  .site-stlstructural .sec h2,.site-stlstructural .closer h2{font-size:clamp(2rem,1.4rem + 3vw,2.4rem)}
}