/* builtcorrect.com's homepage, the Built Correct suite (index.html), and each tool's landing page in the same flow: the
   Build Room's (business-apps/index.html), Electrical's (electrical/index.html) and Steel's (steel/index.html; Vincent, Homepage
   Build Room message 6365: "Make electrical and build room follow the same flow so it is all uniformed"). The brand
   direction (Vincent, Homepage Build Room message 6358: "professional credible, modern and tech driven with industrial precise
   feel ... darker colors strong typography ... a single brand with three distinct tools room for expansion"): the brand's
   green-black, lime for the brand and the Build Room, the estimating apps' copper for Electrical and Steel, heavy DM Sans
   with DM Mono for labels and numbers, hairlines, and the logo's corners (rounded top left and bottom right). The Build Room
   itself keeps its own page and styles (build-room/index.html, style.css and room.css). */
@font-face{font-family:DM Sans;src:url(fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:DM Mono;src:url(fonts/dm-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{--sans:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --bg:#0c110e;--bg-2:#101612;--panel:#141b16;--panel-2:#18211b;--line:#232d26;--line-2:#34413a;
  --text:#eef2ea;--text-2:#b2bdae;--muted:#8a9686;--lime:#d6f681;--lime-2:#e6fba8;--copper:#d9a77e;
  --accent:var(--lime);--accent-soft:rgba(214,246,129,.1);--accent-edge:rgba(214,246,129,.3)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;color-scheme:dark}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font:16px/1.55 var(--sans);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
svg{width:20px;height:20px;display:block;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
@media (min-width:720px){.wrap{padding:0 40px}}

/* the bar */
.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(12,17,14,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top-in{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-.025em;color:var(--text);white-space:nowrap}
.brand svg{width:26px;height:29px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.nav a{padding:8px 14px;border:1px solid transparent;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav .nav-room{border-color:var(--accent-edge);color:var(--lime)}
.nav .nav-room:hover{border-color:var(--lime);background:var(--accent-soft);color:var(--lime)}
/* the page you're on lights up in lime (Scott, Homepage Build Room message 6199) */
.nav a[aria-current=page]{background:var(--lime);border-color:var(--lime);color:#111a12}

/* the opening: a drawing grid, the headline, and on the suite the mark drawn to spec */
main{flex:1}
.hero-band{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(214,246,129,.055) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(214,246,129,.055) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 72% 40%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 70% 85% at 72% 40%,#000 25%,transparent 80%)}
.hero-band::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 76% 44%,rgba(214,246,129,.07),transparent 42%)}
.hero{position:relative;padding-top:clamp(52px,9vh,112px);padding-bottom:clamp(52px,9vh,104px)}
.hero:not(.hero--suite)>*{max-width:1100px}
.hero:not(.hero--suite) h1 em{display:block}
.hero--suite{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px;font:500 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.eyebrow::before{content:'';width:28px;height:1px;flex:none;background:currentColor}
.eyebrow svg{width:22px;height:22px;color:var(--copper)}
.eyebrow:has(svg)::before{display:none}
h1{margin:0;font-size:clamp(44px,6.9vw,92px);line-height:.98;letter-spacing:-.05em;font-weight:780;color:var(--text);text-wrap:balance}
h1 em{font-style:normal;color:var(--lime)}
.lede{max-width:600px;margin:28px 0 0;font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--text-2);text-wrap:pretty}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid var(--lime);border-radius:12px 2px 12px 2px;
  background:var(--lime);color:#111a12;font-size:15.5px;font-weight:700;letter-spacing:-.01em;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--lime-2);border-color:var(--lime-2)}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(2px)}
.btn--line{background:none;border-color:var(--line-2);color:var(--text)}
.btn--line:hover{background:rgba(255,255,255,.05);border-color:#56665b}
.btn--line:hover svg{transform:translateY(2px)}
.tag{display:flex;align-items:center;gap:9px;margin:28px 0 0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.tag svg{width:14px;height:14px;color:var(--lime)}

/* the mark, drawn to spec: drawn in once, then still */
.spec{width:100%;height:auto;max-width:520px;justify-self:end;overflow:visible}
.spec-tile{fill:rgba(214,246,129,.035);stroke:var(--lime);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.65,0,.35,1) .15s forwards}
.spec-b{fill:url(#hatch);fill-opacity:0;stroke:var(--lime);stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 1.7s cubic-bezier(.65,0,.35,1) .45s forwards,hatch .8s ease 1.8s forwards}
.spec-cons{fill:none;stroke:rgba(214,246,129,.32);stroke-width:1;stroke-dasharray:3 5;opacity:0;animation:show .9s ease 1.1s forwards}
.spec-cons .spec-center{stroke-dasharray:16 5 2 5}
.spec-dim{fill:none;stroke:#7f8c7b;stroke-width:1;opacity:0;animation:show .9s ease 1.35s forwards}
.spec-dim text{fill:#9aa795;stroke:none;font:500 13px var(--mono);letter-spacing:.08em}
.spec-dim .spec-title{fill:var(--text);font-size:14px;letter-spacing:.14em}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes hatch{to{fill-opacity:.42}}
@keyframes show{to{opacity:1}}

/* sections */
.sec{padding-top:clamp(64px,10vh,112px)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vh,44px)}
.label{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:500 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.label::before{content:'';width:28px;height:1px;background:currentColor}
h2{margin:0;font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-.045em;font-weight:760;color:var(--text);text-wrap:balance}
.sec-lede{max-width:640px;margin:18px 0 0;font-size:clamp(16px,1.4vw,18px);color:var(--text-2);text-wrap:pretty}

/* the suite: a card for each tool, the whole card a link, then the open bay for the next one */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px 26px 22px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel);
  transition:border-color .2s,background .2s,transform .2s}
.tool::before{content:'';position:absolute;top:-1px;left:26px;width:44px;height:2px;background:var(--accent);transition:width .25s}
.tool--copper{--accent:var(--copper);--accent-soft:rgba(217,167,126,.1);--accent-edge:rgba(217,167,126,.32)}
.tool-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mark{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid var(--accent-edge);border-radius:14px 2px 14px 2px;background:var(--accent-soft);color:var(--accent)}
.mark svg{width:24px;height:24px}
.name{margin:0;font-size:21px;line-height:1.1;font-weight:720;letter-spacing:-.03em;color:var(--text)}
.name small{display:block;margin-top:5px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.no{margin-left:auto;align-self:flex-start;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.tool h3{margin:0;font-size:23px;line-height:1.18;letter-spacing:-.03em;font-weight:700;color:var(--text);text-wrap:balance}
.tool>p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.tool-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.fact{font:500 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--accent)}
.go::after{content:'';position:absolute;inset:0;border-radius:18px 4px 18px 4px}
.go svg{width:18px;height:18px;transition:transform .2s}
@media (hover:hover){
  .tool:hover{border-color:var(--accent-edge);background:var(--panel-2);transform:translateY(-3px)}
  .tool:hover::before{width:88px}
  .tool:hover .go svg{transform:translateX(3px)}
}
.next{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 22px;border:1px dashed var(--line-2);border-radius:18px 4px 18px 4px;color:var(--text-2)}
.next .mark{--accent:var(--muted);width:40px;height:40px;border-style:dashed;border-color:var(--line-2);background:none}
.next .mark svg{width:20px;height:20px}
.next p{margin:0;font-size:15.5px}
.next b{color:var(--text);font-weight:650}
.next .no{align-self:center}

/* from the drawings: the two estimating apps' own pictures, side by side at one height, then one real set's numbers */
.frames{display:grid;grid-template-columns:minmax(0,2.105fr) minmax(0,1.6fr);gap:16px}
.frame{margin:0;min-width:0}
.frame img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:14px 3px 14px 3px;background:#1d221e;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.frame figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.frame figcaption span{display:block;margin-bottom:4px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(32px,5vh,48px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.specs p{margin:0;padding:22px 24px 22px 0}
.specs p+p{padding-left:24px;border-left:1px solid var(--line)}
.specs b{display:block;font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.specs p:nth-child(2) b{color:var(--lime)}
.specs span{display:block;margin-top:8px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* the closing line (Scott, Homepage Build Room message 6189), set like the headline, and under it Veteran owned (message 6191) */
.seal{margin-top:clamp(72px,11vh,120px);padding:clamp(64px,10vh,104px) 0;border-top:1px solid var(--line);text-align:center;
  background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(214,246,129,.06),transparent 70%)}
.motto{margin:0;font-size:clamp(32px,5vw,64px);line-height:1.02;letter-spacing:-.05em;font-weight:780;color:var(--text);text-wrap:balance}
.motto em{font-style:normal;color:var(--lime)}
.vet{margin:28px 0 0}
.vet span{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 14px;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.vet svg{width:15px;height:15px;color:var(--lime)}

/* The tools' landing pages (Steel's first, Scott, Homepage Build Room message 6194; then the Build Room's and Electrical's,
   message 6365): the bar, opening and foot above, then two doors into the tool, its numbers, how it works, its pictures, and a
   closing band. Electrical's four steps take a row of four; the Build Room's marks are lime, the estimating apps' copper. */
.aside{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:20px 0 0;font-size:14px;color:var(--muted)}
.aside a{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--lime)}
.aside a:hover{text-decoration:underline;text-underline-offset:4px}
.aside svg{width:16px;height:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.stat{margin:0;padding:22px 24px 22px 0}
.stat+.stat{padding-left:24px;border-left:1px solid var(--line)}
.stat b{display:block;font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.stat:nth-child(2) b{color:var(--lime)}
.stat span{display:block;margin-top:8px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.say{max-width:660px;margin:20px 0 0;color:var(--text-2);text-wrap:pretty}
.steps,.shots{padding-top:clamp(64px,10vh,104px)}
.steps h2,.shots h2{margin-bottom:28px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
.steps li{padding:24px 26px 26px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel);font-size:15.5px;color:var(--text-2);counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--copper)}
.steps li b{display:block;margin-bottom:6px;font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--text)}
.steps ol.steps--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-room .eyebrow svg,.page-room .steps li::before{color:var(--lime)}
/* Steel's pictures: a wide one under the opening and What comes back, two to a row (one on a phone) */
.shot{margin:0;min-width:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:14px 3px 14px 3px;background:#1d221e;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.shot figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.shot figcaption b{color:var(--text)}
.shot--wide{margin:clamp(40px,6vh,64px) 0}
.shot--wide img{border-radius:18px 4px 18px 4px}
.shots-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
.close{position:relative;overflow:hidden;margin:clamp(64px,10vh,104px) 0 clamp(64px,10vh,104px);padding:clamp(30px,4.5vw,56px);border:1px solid var(--line-2);border-radius:22px 4px 22px 4px;background:var(--panel)}
.close::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(214,246,129,.045) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(214,246,129,.045) 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)}
.close>*{position:relative}
.close h2+p{max-width:620px;margin:14px 0 0;font-size:clamp(16px,1.4vw,18px);color:var(--text-2)}

/* the foot */
.foot{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding-top:28px;padding-bottom:max(30px,env(safe-area-inset-bottom));font-size:14px;color:var(--muted)}
.foot .brand{font-size:16px}
.foot .brand svg{width:22px;height:25px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot nav:first-of-type{margin-left:auto}
.foot nav a:hover{color:var(--text)}
.foot .copy{width:100%;padding-top:16px;border-top:1px solid var(--line);font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}

@media (max-width:1099px){
  .tools{grid-template-columns:1fr 1fr}
  .tools .tool:first-child{grid-column:1/-1}
  .steps ol.steps--four{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .hero--suite{grid-template-columns:1fr}
  .hero--suite .spec{display:none}
  .frames{grid-template-columns:1fr;gap:28px}
}
@media (max-width:719px){
  .top{position:static;background:var(--bg)}
  .top-in{flex-wrap:wrap;gap:10px 16px;padding-top:14px;padding-bottom:12px}
  .nav{margin-left:0;width:100%}
  .hero{padding-top:44px;padding-bottom:52px}
  .eyebrow{margin-bottom:20px;font-size:11.5px;letter-spacing:.1em}
  .eyebrow::before{display:none}
  .lede{margin-top:20px}
  .acts{margin-top:28px}
  .btn{width:100%}
  .tools{grid-template-columns:1fr;gap:12px}
  .tool{padding:22px 20px 20px}
  .tool h3{font-size:21px}
  .next{padding:14px 16px;gap:14px}
  .next .no{display:none}
  .specs,.stats{grid-template-columns:1fr}
  .specs p,.specs p+p,.stat,.stat+.stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px 0;border-left:0}
  .specs p+p,.stat+.stat{border-top:1px solid var(--line)}
  .specs b,.stat b{font-size:30px}
  .specs span,.stat span{margin-top:0}
  .motto em{display:block}
  .steps ol,.steps ol.steps--four{grid-template-columns:1fr;gap:12px}
  .shots-grid{grid-template-columns:1fr;gap:28px}
  .shot img,.shot--wide img,.frame img{border-radius:12px 3px 12px 3px}
  .steps li{padding:20px}
  .close{padding:28px 20px}
  .foot nav:first-of-type{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .spec-tile,.spec-b{animation:none;stroke-dashoffset:0}
  .spec-b{fill-opacity:.42}
  .spec-cons,.spec-dim{animation:none;opacity:1}
}