/* ==========================================================================
   Concept 11 — "Raw"  (brutalist web design)
   Hard 2px black borders everywhere. Zero border-radius. Zero soft shadow
   (one harsh offset shadow used sparingly as the only "decoration").
   Monospace-led type (Space Mono) with Inter for long-form paragraphs.
   Stark white / black, one green accent. Content laid out as bordered
   boxes and exposed data tables instead of glossy marketing cards.
   ========================================================================== */

:root{
  --mono: "Space Mono", "Courier New", monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink: var(--js-black);        /* #0A0A0A */
  --paper: #FFFFFF;
  --accent: var(--js-green);     /* #006B0A — AA on white */
  --accent-on-dark: var(--js-green-glow); /* #22B33A — AA on black */
  --bw: 2px;                     /* the one border weight in this system */
  --offset: 6px 6px 0 var(--ink);
}

/* ---------- nuke radius + soft shadow site-wide: raw is raw ---------- */
*,*::before,*::after{border-radius:0!important}
:focus-visible{border-radius:0}
.js-backpill,.jsform-status,.jsform-input,.jsform-select,.jsform-textarea,.skip-link{box-shadow:none}

html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--sans)}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,h4,.eyebrow,nav,.btn,.topbar,table,caption,label,.ticker,.spec-sheet,
.step-no,.footer-legal,.jsform-submit{font-family:var(--mono)}

a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--accent)}

/* ---------- top license bar ---------- */
.topbar{background:var(--ink);color:#fff;border-bottom:var(--bw) solid var(--ink)}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  padding-block:10px;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em}
.topbar-lic strong{color:var(--accent-on-dark)}

/* ---------- header ---------- */
.site-header{border-bottom:var(--bw) solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:var(--z-header)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand img{height:48px;width:auto}
.mainnav{display:none;gap:22px;font-size:.82rem;letter-spacing:.03em;font-weight:700}
.mainnav a{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.mainnav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
@media(min-width:900px){.mainnav{display:flex}}
.header-cta{flex:none}

/* ---------- buttons: raw rectangles, invert on hover ---------- */
.btn{border:var(--bw) solid var(--ink);font-family:var(--mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:.85rem;transition:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:var(--ink);color:#fff}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-lg{padding:16px 26px;font-size:.95rem}
.btn:active{transform:none}

/* root clip so the full-bleed ticker can never open a horizontal page scroll
   (clip, not hidden — leaves position:sticky/fixed intact) */
html{overflow-x:clip}
/* ---------- data ticker: plain scrolling text strip, no fancy marquee ---------- */
.ticker{background:var(--ink);color:var(--accent-on-dark);overflow:hidden;max-width:100%;
  border-bottom:var(--bw) solid var(--ink);font-family:var(--mono);font-size:.78rem;font-weight:700}
.ticker-track{display:flex;gap:1.2em;white-space:nowrap;padding-block:8px;
  width:max-content;animation:ticker-scroll 32s linear infinite}
.ticker-track span{letter-spacing:.04em}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion: reduce){.ticker-track{animation:none}}

/* ---------- layout helpers ---------- */
.section{border-bottom:var(--bw) solid var(--ink)}
.eyebrow{font-size:.78rem;color:var(--ink);letter-spacing:.14em}
.eyebrow::before,.eyebrow::after{display:none}
.section-title{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:700;
  text-transform:uppercase;margin-top:.4em;margin-bottom:.7em;letter-spacing:-.01em}
.section-sub{font-family:var(--sans);max-width:640px;margin-bottom:var(--sp-6);color:var(--js-gray)}
.table-wrap{width:100%;overflow-x:auto}

/* ---------- hero ---------- */
.hero{border-bottom:var(--bw) solid var(--ink)}
.hero-in{display:grid;gap:var(--sp-7);padding-block:clamp(32px,6vw,72px) clamp(40px,7vw,88px)}
@media(min-width:960px){.hero-in{grid-template-columns:1.3fr 1fr;align-items:start}}
.hero-main h1{font-family:var(--mono);font-size:clamp(2.4rem,1.3rem + 6vw,5rem);
  line-height:.98;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin-block:.3em .5em}
.hero-lead{font-family:var(--sans);font-size:var(--fs-lg);max-width:46ch;margin-bottom:var(--sp-6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.boot-console{margin-top:var(--sp-6);border:var(--bw) solid var(--ink);background:var(--ink);color:var(--accent-on-dark);
  font-family:var(--mono);font-size:.78rem;line-height:1.7;padding:14px 16px;min-height:9.4em}
.boot-console .bc-line{white-space:pre-wrap}
.boot-console .bc-caret{display:inline-block;width:.6em;background:var(--accent-on-dark)}
@media(prefers-reduced-motion: reduce){.boot-console .bc-caret{display:none}}

/* ---------- spec sheet: the signature bordered data block ---------- */
.spec-sheet{border:var(--bw) solid var(--ink);box-shadow:var(--offset);background:var(--paper)}
.spec-title{font-weight:700;font-size:.85rem;letter-spacing:.14em;padding:12px 16px;
  background:var(--ink);color:#fff;border-bottom:var(--bw) solid var(--ink)}
.spec-table{width:100%;border-collapse:collapse;font-size:1rem}
.spec-table th,.spec-table td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--js-stone);
  white-space:nowrap}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{font-weight:700;color:var(--js-gray);width:40%}
.spec-table td{font-weight:700}

/* ---------- generic data tables ---------- */
.data-table{width:100%;border-collapse:collapse;border:var(--bw) solid var(--ink);font-size:1rem;min-width:560px}
.data-table th,.data-table td{border:1px solid var(--ink);padding:14px 16px;text-align:left;vertical-align:top}
.data-table thead th{background:var(--ink);color:#fff;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.data-table tbody th{background:var(--js-paper);font-weight:700;white-space:nowrap}
.data-table tbody td{font-family:var(--sans)}
.data-table tbody tr:hover{background:var(--js-paper)}
.data-table a{font-family:var(--mono);font-weight:700;white-space:nowrap}
.row-ico{display:inline-flex;width:18px;height:18px;margin-right:8px;vertical-align:-3px}
.row-ico svg{width:100%;height:100%}

/* services table uses a touch less min-width so it still fits comfortably */
.services .data-table{min-width:620px}
.contact-table,.footer-table{min-width:340px}
.contact-table th,.footer-table th{width:30%}

/* ---------- process: numbered bordered steps ---------- */
.process-list{display:grid;gap:0;border:var(--bw) solid var(--ink)}
.process-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:start;
  padding:var(--sp-5) var(--sp-5);border-bottom:var(--bw) solid var(--ink)}
.process-list li:last-child{border-bottom:0}
.step-no{font-size:2rem;font-weight:700;color:var(--accent);line-height:1}
.process-list h3{font-family:var(--mono);font-size:1.05rem;text-transform:uppercase;margin-bottom:.4em}
.process-list p{font-family:var(--sans);max-width:56ch;color:var(--js-gray)}

/* ---------- project log: bordered placeholder boxes ---------- */
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
@media(min-width:640px){.project-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.project-grid{grid-template-columns:repeat(4,1fr)}}
.ph-box{border:var(--bw) solid var(--ink);min-height:160px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:10px;background:var(--js-paper);position:relative}
.ph-box-x{font-size:2.4rem;font-weight:700;color:var(--js-stone);line-height:1}
.ph-box figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;padding:0 10px;color:var(--js-gray)}

/* ---------- reviews ---------- */
.review-grid{display:grid;gap:var(--sp-4)}
@media(min-width:640px){.review-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.review-grid{grid-template-columns:repeat(3,1fr)}}
.review-box{border:var(--bw) solid var(--ink);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.review-box p{font-family:var(--sans);font-size:1rem}
.review-box footer{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--js-gray);text-transform:uppercase}

/* ---------- about ---------- */
.about-in{display:grid;gap:var(--sp-6)}
@media(min-width:860px){.about-in{grid-template-columns:1.2fr 1fr;align-items:start}}
.about-copy p{font-family:var(--sans);max-width:58ch;margin-bottom:var(--sp-4)}
.about-lic{font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:.82rem}
.about-box{min-height:260px}

/* ---------- estimate ---------- */
.estimate-in{display:grid;gap:var(--sp-7)}
@media(min-width:960px){.estimate-in{grid-template-columns:1fr 1.2fr;align-items:start}}
.estimate-info p{font-family:var(--sans);max-width:50ch;margin-bottom:var(--sp-5)}
.estimate-form{border:var(--bw) solid var(--ink);box-shadow:var(--offset);padding:var(--sp-6);background:var(--paper)}

/* form field overrides to match the raw system */
.jsform-field label{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.jsform-input,.jsform-select,.jsform-textarea{border:var(--bw) solid var(--ink);font-family:var(--sans)}
.jsform-input:focus,.jsform-select:focus,.jsform-textarea:focus{border-color:var(--accent);box-shadow:none}
.jsform-input[aria-invalid="true"],.jsform-select[aria-invalid="true"],.jsform-textarea[aria-invalid="true"]{border-color:#B91C1C;box-shadow:none}
.jsform-submit{text-transform:uppercase}
.jsform-status.is-success{border:var(--bw) solid var(--ink);background:var(--paper);color:var(--ink)}
.jsform-status.is-error{border:var(--bw) solid #B91C1C;background:var(--paper);color:#B91C1C}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#fff;border-top:var(--bw) solid var(--ink)}
.footer-in{display:grid;gap:var(--sp-6);padding-block:var(--sp-7)}
@media(min-width:860px){.footer-in{grid-template-columns:1fr 1.4fr auto}}
.footer-brand img{height:42px;width:auto;margin-bottom:var(--sp-3)}
.footer-brand p{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--js-gray-light)}
.footer-table{border-color:#fff}
.footer-table th,.footer-table td{border-color:rgba(255,255,255,.3)}
.footer-table thead{display:none}
.footer-table tbody th{background:transparent;color:var(--js-gray-light)}
.footer-table a{color:var(--accent-on-dark)}
.footer-legal{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-size:.82rem}
.footer-legal a{color:var(--accent-on-dark)}

/* ---------- honesty markers: keep legible against our black backgrounds too ---------- */
html.ph-show .topbar .ph,
html.ph-show .ticker .ph,
html.ph-show .site-footer .ph{outline-color:var(--accent-on-dark);background:rgba(34,179,58,.14)}

/* ---------- shared widget restyle: backpill / stickybar join the raw system ---------- */
.js-backpill{background:var(--ink);border:var(--bw) solid #fff;backdrop-filter:none}
.js-backpill:hover{background:var(--accent)}
.js-stickybar{box-shadow:none;border-top:var(--bw) solid #fff}