:root {
  --ink: #17201f;
  --paper: #f4f0e7;
  --paper-2: #e9e2d4;
  --orange: #f05a28;
  --orange-dark: #c83d14;
  --teal: #0d5c57;
  --lime: #d7ee62;
  --line: rgba(23, 32, 31, .2);
  --shadow: 8px 8px 0 var(--ink);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image: linear-gradient(rgba(23,32,31,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(23,32,31,.18) 1px, transparent 1px);
  background-size: 48px 48px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-shell { max-width: 1440px; margin: 0 auto; overflow: hidden; background: var(--paper); border-inline: 1px solid var(--line); }

.site-header {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(22px, 4vw, 64px);
  border-bottom: 2px solid var(--ink);
  background: rgba(244,240,231,.96);
  position: relative;
  z-index: 50;
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-size: 13px; font-weight: 800; line-height: .95; letter-spacing: .12em; }
.brand img { border-radius: 10px; }
.brand b { color: var(--orange); }
.primary-nav { display: flex; align-items: center; gap: 34px; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; font-weight: 800; }
.primary-nav a { border-bottom: 2px solid transparent; }
.primary-nav a:hover, .primary-nav a:focus-visible { border-color: var(--orange); }
.header-cta { justify-self: end; color: white; background: var(--ink); padding: 12px 16px; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.header-cta span { color: var(--lime); margin-left: 8px; }
.nav-toggle { display: none; }

.hero { min-height: 760px; display: grid; grid-template-columns: 1.08fr .92fr; border-bottom: 2px solid var(--ink); }
.hero-copy { padding: clamp(70px, 9vw, 138px) clamp(28px, 6vw, 88px) 60px; position: relative; }
.hero-copy::after { content: "ONSITE / 001"; position: absolute; left: 22px; bottom: 210px; transform: rotate(-90deg); transform-origin: left; font: 800 9px/1 monospace; letter-spacing: .2em; color: rgba(23,32,31,.45); }
.eyebrow { display: flex; gap: 12px; align-items: center; margin: 0 0 24px; text-transform: uppercase; font: 800 11px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .16em; }
.eyebrow span { color: var(--orange); }
.eyebrow.light { color: white; }
.eyebrow.light span { color: var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 28px; font-family: Impact, "Arial Narrow", "Avenir Next Condensed", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .91; }
h1 { font-size: clamp(64px, 7.2vw, 108px); }
h2 { font-size: clamp(48px, 5.4vw, 78px); }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-lede { max-width: 620px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 30px; padding: 0 20px; border: 2px solid var(--ink); text-transform: uppercase; font: 900 11px/1 monospace; letter-spacing: .1em; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translate(-3px,-3px); box-shadow: 4px 4px 0 var(--ink); }
.button-primary { background: var(--orange); color: white; }
.button-ghost { background: transparent; }
.button-light { border-color: white; background: white; color: var(--ink); }
.button-light:hover { box-shadow: 4px 4px 0 var(--lime); }
.proof-strip { list-style: none; padding: 0; margin: 64px 0 0; display: flex; flex-wrap: wrap; gap: 0; border-block: 1px solid var(--line); }
.proof-strip li { padding: 13px 22px 13px 0; margin-right: 22px; text-transform: uppercase; font: 700 10px/1 monospace; letter-spacing: .11em; }
.proof-strip b { color: var(--teal); }
.hero-visual { position: relative; min-height: 760px; overflow: hidden; background: var(--teal); border-left: 2px solid var(--ink); }
.hero-visual::before { content:""; position: absolute; inset:0; opacity:.22; background-image: linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size: 36px 36px; }
.measure-line { height: 40px; display: flex; position: relative; z-index:2; align-items: end; justify-content: space-between; padding: 0 18px 8px; color: white; border-bottom:1px solid rgba(255,255,255,.5); font:700 9px/1 monospace; }
.measure-line i { width:1px; height:12px; background:rgba(255,255,255,.7); }
.blueprint-stage { height: calc(100% - 40px); display:grid; place-items:center; position:relative; padding:70px 45px 45px; }
.blueprint-card { width:min(520px,88%); position:relative; z-index:3; color:var(--ink); background:var(--paper); border:2px solid var(--ink); transform:rotate(1.5deg); box-shadow:18px 22px 0 rgba(0,0,0,.22); }
.blueprint-card-top,.blueprint-status { display:flex; justify-content:space-between; padding:13px 16px; font:900 9px/1 monospace; letter-spacing:.12em; }
.blueprint-card-top { border-bottom:2px solid var(--ink); }
.blueprint-card-top span:last-child,.blueprint-status b { color:var(--orange); }
.blueprint-answer { padding:30px 28px 24px; color:white; background:var(--ink); }
.blueprint-answer small { color:var(--orange); font:900 10px/1 monospace; letter-spacing:.14em; }
.blueprint-answer strong { display:block; margin:12px 0 18px; color:var(--paper); font:900 clamp(48px,6vw,80px)/.92 Impact,sans-serif; letter-spacing:.01em; }
.blueprint-answer div { display:flex; gap:30px; color:rgba(255,255,255,.58); font:800 8px/1 monospace; letter-spacing:.1em; }
.blueprint-answer b { display:block; margin-top:5px; color:var(--lime); font-size:13px; }
.roof-plan { height:250px; position:relative; overflow:hidden; background-image:linear-gradient(rgba(13,92,87,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(13,92,87,.12) 1px,transparent 1px); background-size:24px 24px; border-bottom:2px solid var(--ink); }
.roof-plan i { position:absolute; display:block; background:var(--teal); transform-origin:left center; }
.plan-run { width:68%; height:4px; left:16%; bottom:48px; }
.plan-rise { width:4px; height:126px; left:84%; bottom:48px; }
.plan-rafter { width:72%; height:5px; left:16%; bottom:48px; transform:rotate(-29deg); }
.roof-plan span { position:absolute; padding:5px 8px; color:var(--ink); background:var(--lime); border:1px solid var(--ink); font:900 9px/1 monospace; }
.run-label { left:38%; bottom:20px; }.rise-label { right:1%; top:42%; transform:rotate(-90deg); }.pitch-label { left:43%; top:38%; }
.field-note { position:absolute; z-index:4; padding:7px 11px; color:var(--ink); background:var(--lime); border:2px solid var(--ink); font:900 12px/1 monospace; box-shadow:4px 4px 0 var(--ink); }
.note-a { top:19%; left:6%; transform:rotate(-4deg); }
.note-b { bottom:22%; right:5%; transform:rotate(5deg); }
.angle-stamp { position:absolute; right:5%; top:7%; width:100px; height:100px; display:grid; place-content:center; text-align:center; color:white; border:2px solid white; border-radius:50%; transform:rotate(8deg); }
.angle-stamp span { font:900 30px/1 Impact,sans-serif; }
.angle-stamp small { margin-top:5px; font:700 7px/1 monospace; letter-spacing:.08em; }

.marquee { overflow:hidden; border-bottom:2px solid var(--ink); background:var(--lime); white-space:nowrap; }
.marquee div { width:max-content; padding:15px 0; font:900 13px/1 monospace; letter-spacing:.1em; animation: crawl 24s linear infinite; }
.marquee b { color:var(--orange); padding:0 22px; }
@keyframes crawl { to { transform:translateX(-50%); } }
.section { padding: clamp(74px, 10vw, 140px) clamp(24px, 6vw, 86px); border-bottom: 2px solid var(--ink); }
.section-heading { display:grid; grid-template-columns:1.25fr .75fr; column-gap:70px; align-items:end; margin-bottom:60px; }
.section-heading .eyebrow { grid-column:1/-1; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p:last-child { max-width:470px; font-size:18px; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
.tool-card { min-height:320px; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); background:var(--paper); position:relative; }
.tool-card-featured { grid-row:span 2; min-height:642px; justify-content:space-between; background:var(--orange); color:white; }
.tool-number { position:absolute; top:22px; right:22px; font:700 9px/1 monospace; letter-spacing:.12em; }
.tool-icon { display:block; margin-bottom:30px; font:400 58px/1 Georgia,serif; color:var(--orange); }
.tool-card-featured .tool-icon { color:var(--lime); font-size:90px; }
.tool-card h3 { margin-bottom:12px; text-transform:uppercase; font:900 24px/1 "Arial Narrow",sans-serif; }
.tool-card p { margin:0; font-size:14px; }

.demo-section { display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(50px,9vw,130px); background:var(--ink); color:white; }
.demo-copy h2 em { color:var(--lime); }
.demo-copy > p:not(.eyebrow) { max-width:520px; font-size:18px; color:rgba(255,255,255,.72); }
.demo-presets { display:flex; flex-direction:column; margin-top:36px; border-top:1px solid rgba(255,255,255,.25); }
.demo-presets button { padding:16px 4px; border:0; border-bottom:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.55); background:transparent; text-align:left; text-transform:uppercase; font:800 11px/1 monospace; letter-spacing:.12em; cursor:pointer; }
.demo-presets button::before { content:"○"; margin-right:14px; color:var(--lime); }
.demo-presets button.is-active { color:white; }
.demo-presets button.is-active::before { content:"●"; }
.field-calculator { align-self:center; background:#202d2b; border:2px solid white; box-shadow:12px 12px 0 var(--orange); }
.calc-top { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.35); font:800 9px/1 monospace; letter-spacing:.13em; }
.calc-top span:last-child { color:var(--lime); }
.calc-display { min-height:290px; padding:36px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; }
.calc-display small { align-self:flex-start; color:rgba(255,255,255,.55); font:800 10px/1 monospace; letter-spacing:.14em; }
.calc-display div { margin-top:auto; font-size:clamp(20px,2.1vw,30px); color:rgba(255,255,255,.62); }
.calc-display strong { display:block; margin-top:12px; color:var(--lime); font:900 clamp(44px,6vw,80px)/.95 "Arial Narrow",sans-serif; letter-spacing:-.03em; }
.calc-display p { margin:10px 0 0; color:var(--orange); font:700 15px/1 monospace; }
.calc-ruler { height:34px; display:flex; justify-content:space-around; align-items:flex-end; border-top:1px solid rgba(255,255,255,.35); }
.calc-ruler i { width:1px; height:12px; background:white; }
.calc-ruler i:nth-child(odd) { height:20px; }
.copy-result { width:100%; padding:17px; border:0; border-top:1px solid rgba(255,255,255,.35); color:var(--ink); background:var(--lime); text-transform:uppercase; font:900 10px/1 monospace; letter-spacing:.12em; cursor:pointer; }

.workflow-list { list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.workflow-list li { min-height:170px; display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:25px; border-bottom:2px solid var(--ink); overflow:hidden; }
.workflow-list li > span { align-self:start; padding-top:28px; color:var(--orange); font:800 11px/1 monospace; }
.workflow-list h3 { margin:0 0 9px; text-transform:uppercase; font:900 32px/1 "Arial Narrow",sans-serif; }
.workflow-list p { max-width:540px; margin:0; }
.workflow-list li > b { padding:10px 13px; color:var(--teal); border:1px solid var(--ink); font:900 9px/1 monospace; letter-spacing:.1em; }
.trust-section { display:grid; grid-template-columns:1.25fr .75fr; color:white; background:var(--teal); border-bottom:2px solid var(--ink); }
.trust-copy { padding:clamp(74px,9vw,125px) clamp(24px,6vw,86px); }
.trust-copy h2 em { color:var(--lime); }
.trust-copy > p:not(.eyebrow) { max-width:620px; font-size:18px; color:rgba(255,255,255,.76); }
.trust-copy > a { display:inline-block; margin-top:18px; padding-bottom:3px; border-bottom:1px solid var(--lime); color:var(--lime); font:800 11px/1 monospace; letter-spacing:.08em; text-transform:uppercase; }
.verification-card { padding:70px 45px; display:flex; flex-direction:column; justify-content:center; border-left:2px solid var(--ink); background:var(--lime); color:var(--ink); }
.verification-card > span { font:900 10px/1 monospace; letter-spacing:.13em; }
.verification-card strong { margin-top:22px; color:var(--orange); font:900 clamp(68px,8vw,115px)/.9 Impact,sans-serif; }
.verification-card p { max-width:240px; margin:12px 0 45px; text-transform:uppercase; font:800 13px/1.3 monospace; }
.verification-bars { display:flex; gap:8px; align-items:end; height:70px; }
.verification-bars i { flex:1; height:32%; background:var(--teal); }
.verification-bars i:nth-child(2) { height:58%; }.verification-bars i:nth-child(3) { height:78%; }.verification-bars i:nth-child(4) { height:92%; }.verification-bars i:nth-child(5) { height:100%; background:var(--orange); }
.global-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:center; }
.global-mark { color:transparent; -webkit-text-stroke:3px var(--orange); font:900 clamp(210px,27vw,390px)/.75 Impact,sans-serif; letter-spacing:-.08em; }
.global-copy { max-width:670px; }
.language-list { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.language-list li { padding:8px 11px; border:1px solid var(--ink); text-transform:uppercase; font:800 9px/1 monospace; letter-spacing:.09em; }
.faq-section .section-heading { grid-template-columns:1fr; }
.faq-list { max-width:950px; margin-left:auto; }
.faq-list details { border-top:2px solid var(--ink); }
.faq-list details:last-child { border-bottom:2px solid var(--ink); }
.faq-list summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 0; cursor:pointer; text-transform:uppercase; font:900 20px/1.2 "Arial Narrow",sans-serif; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color:var(--orange); font:400 30px/1 monospace; transition:transform .2s ease; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list details p { max-width:760px; padding:0 0 24px; color:rgba(23,32,31,.72); }
.site-footer { padding:60px clamp(24px,6vw,86px) 28px; color:white; background:var(--ink); }
.footer-brand b { color:var(--lime); }
.site-footer > p { max-width:410px; margin:30px 0; color:rgba(255,255,255,.62); }
.site-footer > nav { display:flex; flex-wrap:wrap; gap:25px; text-transform:uppercase; font:800 10px/1 monospace; letter-spacing:.12em; }
.site-footer > nav a:hover { color:var(--lime); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:65px; padding-top:18px; border-top:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.5); font:700 9px/1 monospace; letter-spacing:.1em; }

.legal-main { max-width:900px; margin:0 auto; padding:90px 28px 120px; }
.legal-main h1 { font-size:clamp(54px,9vw,94px); }
.legal-main h2 { margin:48px 0 14px; font-size:28px; line-height:1; }
.legal-main p,.legal-main li { color:#39403f; }
.legal-meta { padding:12px 0; margin-bottom:45px; border-block:1px solid var(--line); font:700 10px/1.4 monospace; letter-spacing:.08em; }
.support-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:38px 0; }
.support-card { min-height:170px; padding:24px; border:2px solid var(--ink); background:var(--paper-2); }
.support-card h2 { margin:0 0 12px; }
.support-card a { color:var(--orange-dark); font-weight:800; }
.error-page { min-height:calc(100vh - 80px); display:grid; place-items:center; text-align:center; padding:30px; }
.error-code { color:transparent; -webkit-text-stroke:2px var(--orange); font:900 clamp(130px,28vw,340px)/.7 Impact,sans-serif; }

.js .reveal.is-visible { animation: reveal-in .6s ease both; }
.delay-1 { animation-delay:.1s!important; }.delay-2 { animation-delay:.2s!important; }
@keyframes reveal-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.js .reveal.is-visible{animation:none}.marquee div{animation:none} }

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; }
  .header-cta { display:none; }
  .nav-toggle { display:grid; width:42px; height:42px; padding:11px; border:2px solid var(--ink); background:transparent; gap:5px; align-content:center; }
  .nav-toggle i { height:2px; background:var(--ink); }
  .primary-nav { display:none; position:absolute; top:78px; inset-inline:0; padding:24px; flex-direction:column; align-items:flex-start; background:var(--paper); border-bottom:2px solid var(--ink); }
  .primary-nav.is-open { display:flex; }
  .hero,.demo-section,.trust-section,.global-section { grid-template-columns:1fr; }
  .hero-visual { border-left:0; border-top:2px solid var(--ink); }
  .hero-copy::after { display:none; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading > p:last-child { margin-top:24px; }
  .tool-grid { grid-template-columns:repeat(2,1fr); }
  .tool-card-featured { grid-row:auto; min-height:320px; }
  .verification-card { border-left:0; border-top:2px solid var(--ink); }
  .global-mark { text-align:center; }
}
@media (max-width: 600px) {
  .site-header { height:68px; padding-inline:16px; }
  .primary-nav { top:66px; }
  .hero { min-height:0; }
  .hero-copy { padding:60px 22px 45px; }
  h1 { font-size:55px; }
  .hero-visual { min-height:590px; }
  .blueprint-stage { padding:60px 18px 35px; }
  .blueprint-card { width:88%; }
  .blueprint-answer strong { font-size:50px; }
  .proof-strip { margin-top:42px; }
  .section { padding:70px 22px; }
  .tool-grid { grid-template-columns:1fr; }
  .tool-card { min-height:270px; }
  .workflow-list li { grid-template-columns:45px 1fr; padding:20px 0; }
  .workflow-list li > b { grid-column:2; justify-self:start; }
  .global-section { gap:30px; }
  .support-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}