/* Conventional MFG: lender grade. Banker's green bands, a bone ground ruled faintly like a ledger,
   and brass for anything you act on. Mona Sans set semi-expanded for the headings gives a steady,
   well-founded voice without the starch of a bank serif. Loaded after app.css and the config
   tokens (paper, ink, accent, fonts), so it states only what differs. */
.site-conventionalmfg {
  --on-green: oklch(0.965 0.012 88);
  --on-green-2: oklch(0.85 0.025 120);
  --green-line: oklch(0.42 0.045 163);
  --green-deep: oklch(0.225 0.045 163);
  --brass-ink: oklch(0.24 0.05 163);
  --ledger: color-mix(in oklch, var(--rule-2) 24%, transparent);

  & h1, & h2, & h3 { font-weight: 650; letter-spacing: -.02em; }
  & :focus-visible { outline-color: var(--ink); }
  & .sec-ink :focus-visible, & .top :focus-visible, & .closer :focus-visible, & .facts-band :focus-visible { outline-color: var(--accent); }

  /* Header: a green bar, the brand set as a bone plate */
  & .top { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; color: var(--on-green); }
  & .brand-mark { font-weight: 700; font-stretch: 112.5%; letter-spacing: .01em; border-radius: 3px 0 0 3px; }
  & .brand-word { font-weight: 600; letter-spacing: .14em; border-radius: 0 3px 3px 0; }
  & .top .brand-mark { background: var(--on-green); color: var(--ink); font-weight: 700; font-stretch: 112.5%; letter-spacing: .01em; border-radius: 3px 0 0 3px; }
  & .top .brand-word { border-color: var(--on-green); color: var(--on-green); }
  & .top-nav a, & .sub-nav a { color: var(--on-green-2); }
  & .top-nav a:hover, & .top-nav a.on { color: var(--on-green); }
  & .top-nav > a.on, & .nav-group > a.on { box-shadow: inset 0 -2px 0 var(--accent); }
  & .nav-menu { border-radius: 6px; border-color: var(--rule-2); }
  & .nav-menu a { color: var(--ink); }
  & .nav-menu a:hover { background: var(--paper-2); color: var(--ink); }
  & .top-phone { color: var(--on-green); font-variant-numeric: tabular-nums; }
  & .sub-nav { border-top-color: var(--green-line); }

  /* Buttons: brass plates with green lettering */
  & .btn { border-radius: 4px; font-weight: 650; letter-spacing: .005em; }
  & .btn-solid, & .closer .btn-light { background: var(--accent); color: var(--brass-ink); border-color: color-mix(in oklch, var(--accent) 70%, var(--ink)); }
  & .btn-solid:hover, & .closer .btn-light:hover { background: oklch(0.81 0.11 82); }
  & .btn-line { border-color: var(--ink); color: var(--ink); }
  & .btn-ghost { border-color: color-mix(in oklch, var(--on-green) 45%, transparent); color: var(--on-green); }
  & .btn-ghost:hover { border-color: var(--on-green); background: oklch(1 0 0 / .06); }

  /* Hero: the house at dusk, a green-black shade on the side the words sit */
  & .hero-warm { background: var(--green-deep); }
  & .hero-warm::before { background: linear-gradient(90deg, oklch(0.19 0.035 163 / .92) 0%, oklch(0.19 0.035 163 / .76) 38%, oklch(0.19 0.035 163 / .22) 66%, oklch(0.19 0.035 163 / .42) 100%); }
  & .hero-warm .kicker { color: var(--accent); font-size: 12.5px; letter-spacing: .16em; }
  & .hero-warm h1 { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4rem); font-weight: 700; line-height: 1.03; letter-spacing: -.028em; text-shadow: 0 2px 24px oklch(0.12 0.03 163 / .7); }
  & .hero-warm .lede { color: var(--on-green-2); }
  /* the fact strip directly below says these */
  & .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 30px 60px -30px oklch(0.1 0.03 163 / .9); }

  /* The form */
  & .form-card { border-radius: 8px; border-color: var(--rule-2); box-shadow: 0 1px 0 var(--rule); }
  & .form-card .form-head h2 { font-size: 1.4rem; font-stretch: 112.5%; }
  & .fld input, & .fld select, & .fld textarea { border-radius: 4px; border-color: var(--rule-2); }
  & .fld input:focus, & .fld select:focus, & .fld textarea:focus { outline-color: var(--ink); border-color: var(--ink); }
  & .form-errors { border-color: var(--accent-deep); }

  /* Fact strip: brass figures on the deepest green */
  & .facts-band { background: var(--green-deep); color: var(--on-green); border-bottom: 1px solid var(--green-line); }
  & .facts > div { padding: 26px 24px 28px; border-left: 1px solid var(--green-line); }
  & .facts > div:first-child { padding-left: 0; border-left: 0; }
  & .facts dt { font-family: var(--display); font-stretch: 112.5%; font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -.02em; color: var(--accent); }
  & .facts dd { margin-top: 8px; font-size: 14px; color: var(--on-green-2); opacity: 1; }

  /* Sections */
  & .sec h2, & .closer h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.06; }
  & .sec .kicker { font-size: 12px; letter-spacing: .16em; color: var(--ink-2); }
  & .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, & .prose a, & .block-text a, & .ticks a { text-decoration-color: var(--accent-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  & .more { border-bottom-color: var(--accent-deep); }
  & .more span, & .path-go span, & .svc-go { color: var(--accent-deep); }

  /* Light bands ruled like a ledger page: faint lines, one every 32px */
  & .sec-tint { background-color: var(--paper-2); background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--ledger) 31px 32px); border-block-color: var(--rule-2); }

  & .photo { border-radius: 6px; }

  /* Where to start */
  & .paths { border-radius: 8px; border-color: var(--rule-2); background: var(--card); }
  & .path { border-color: var(--rule); }
  & .path:hover { background: var(--paper-2); }
  & .path .photo { border-radius: 4px; }
  & .path h3 { font-size: 1.2rem; }
  & .path-go { font-size: 14px; }

  /* List markers: a small green diamond */
  & .signs li::before, & .ticks li::before { width: 7px; height: 7px; background: var(--ink); transform: rotate(45deg); }
  & .signs li::before { top: 23px; left: 3px; }
  & .ticks li::before { top: 17px; left: 3px; }
  & .signs li, & .signs li:first-child { border-color: var(--rule-2); }
  & .signs strong { font-weight: 650; }

  /* Steps: a green band with large brass numerals (the steps page opens straight under its green
     head, so there they stay on bone) */
  & .sec:has(> .wrap > .steps):not(.sec-flush) { background: var(--ink); color: var(--on-green); }
  & .sec:has(> .wrap > .steps):not(.sec-flush) h2, & .sec:has(> .wrap > .steps):not(.sec-flush) h3 { color: var(--on-green); }
  & .sec:has(> .wrap > .steps):not(.sec-flush) .kicker { color: var(--on-green-2); }
  & .sec:has(> .wrap > .steps):not(.sec-flush) .sec-head p:not(.kicker), & .sec:has(> .wrap > .steps):not(.sec-flush) .steps p { color: var(--on-green-2); }
  & .sec:has(> .wrap > .steps):not(.sec-flush) .sec-head a.inline { color: var(--on-green); text-decoration-color: var(--accent); }
  & .sec:has(> .wrap > .steps):not(.sec-flush) .steps li { border-top-color: var(--green-line); }
  & .sec:has(> .wrap > .steps):not(.sec-flush) .step-n { color: var(--accent); }
  & .steps li { border-top: 1px solid var(--ink); }
  & .step-n { display: block; font-stretch: 112.5%; font-weight: 700; font-size: 3.4rem; letter-spacing: -.04em; }
  & .step-n::before { content: "0"; }
  & .steps h2, & .steps h3 { font-size: 1.3rem; font-weight: 650; }

  /* Guides */
  & .guide-card { border-radius: 8px; border-color: var(--rule-2); }
  & .guide-card:hover { border-color: var(--ink); }
  & .guide-card h2, & .guide-card h3 { font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; }
  & .guide-list-all { border-top-color: var(--ink); }
  & .guide-list-all .guide-card { border-radius: 0; }
  & .guide-list-all .guide-card h3 { font-size: 1.25rem; }
  & .guide-list-all .guide-card:hover h3, & .tile:hover h3, & .link-rows a:hover strong { text-decoration-color: var(--accent-deep); }

  /* Inner page heads on green */
  & .page-head, & .hero-request { background: var(--ink); }
  & .page-head h1 { font-size: clamp(2rem, 1rem + 2.3vw, 3rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.05; }
  & .page-head .lede, & .hero-request .lede { color: var(--on-green-2); }
  & .page-head .crumbs, & .hero-request .crumbs { color: var(--on-green-2); }
  & .page-head .crumbs a, & .hero-request .crumbs a { color: var(--on-green); }
  & .page-head .guide-updated { color: var(--on-green-2); }
  & .page-head-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  & .page-head-grid h1 { max-width: none; }
  & .hero-request .proof span { color: var(--on-green-2); }

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

  /* Service page */
  & .answer { background: var(--card); border: 1px solid var(--rule-2); border-radius: 8px; }
  & .answer h2 { font-size: 1.3rem; }
  & .answer .answer-where { border-top-color: var(--rule); }
  & .block h2 { font-size: 1.3rem; border-bottom-color: var(--ink); }
  & .qa h3 { font-size: 1.08rem; font-weight: 650; }
  & .qa-3 > div { border-top-width: 1px; }
  & .link-rows strong { font-stretch: 100%; font-weight: 650; }

  /* Guide page */
  & .side-box { border-radius: 8px; border-color: var(--rule-2); }
  & .prose h2 { font-size: 1.45rem; }
  & .prose h3 { font-size: 1.12rem; }

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

  /* Closing band and footer */
  & .closer { background: var(--ink); color: var(--on-green); }
  & .closer p { color: var(--on-green-2); }
  & .foot { background: var(--paper-2); border-top-color: var(--rule-2); }
  & .foot h2 { color: var(--ink-2); letter-spacing: .14em; }
  & .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.035 163 / .62) 0%, oklch(0.19 0.035 163 / .9) 52%, var(--green-deep) 100%); }
  }
  @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(--green-line); }
    & .facts > div:nth-child(-n+2) { border-top: 0; }
    & .facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--green-line); }
  }
  @media (max-width: 620px) {
    & .hero-warm h1 { font-size: 2.1rem; }
    & .sec h2, & .closer h2 { font-size: 1.8rem; }
    & .page-head h1 { font-size: 1.9rem; }
    & .path h3, & .svc-row h3 { font-size: 1.05rem; }
    & .svc-row h3 { font-size: 1.05rem; font-stretch: 87.5%; }
    & .step-n { font-size: 2.7rem; }
    & .facts dt { font-size: 20px; }
    & .facts dd { font-size: 13.5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    & .btn, & .path, & .guide-card, & .svc-row { transition: none; }
  }
}