/* Nonodon LLC | nscc.nonodon.com | assets/nscc.css | REV 1.1 | 20261108 */
/* Layout: a field book page turning into a finished sheet. Iso dot grid ground, title-block header,
   a carousel of sample sheets up top, then ledger rows. Opens light; Dark mode button flips it. */
:root{
  --ground:#EEF0F3; --surface:#FFFFFF; --paper:#FBFAF4; --ink:#1E232A; --muted:#57606B; --line:#C8CED6;
  --dot:rgba(30,35,42,.13); --pencil:#4F5661; --sig:#0D6B57; --sig-soft:#DCE1E8;
  --brand:#F24F00; --on-brand:#111111; --accent-text:#B83B00; --band:#1E232A; --band-ink:#E6E9EE; --band-muted:#A8B0BA; --band-lab:#7FD9C0; --band-rule:rgba(230,233,238,.18);
  --cta:#20262E; --cta-ink:#E6E9EE; --cta-muted:#B3BBC5; --redline:#C62828; --print:#F3F1E8; --print-ink:#4B515A;
  --display:'Barlow Condensed','Arial Narrow',sans-serif-condensed,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --hand:'Architects Daughter','Comic Neue','Segoe Print',cursive;
}
:root[data-theme="dark"]{
  --ground:#13171C; --surface:#1A1F25; --paper:#1E232A; --ink:#E5E8ED; --muted:#9CA4AF; --line:#323A44;
  --dot:rgba(229,232,237,.10); --pencil:#BAC1CA; --sig:#57C9AB; --sig-soft:#2A313A;
  --brand:#F24F00; --on-brand:#111111; --accent-text:#FF7A3D; --band:#0D1014; --band-ink:#E5E8ED; --band-muted:#97A0AA; --band-lab:#7FD9C0; --band-rule:rgba(229,232,237,.16);
  --cta:#1C2128; --cta-ink:#E6E9EE; --cta-muted:#B3BBC5; --redline:#FF6B6B; --print:#1F242A; --print-ink:#B0B7C0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:92px}
body{background:var(--ground);color:var(--ink);font:16px/1.6 var(--sans);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px),radial-gradient(var(--dot) 1px,transparent 1.2px);
  background-size:34.64px 20px;background-position:0 0,17.32px 10px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--surface)}
a{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.in{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lab{font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:.005em}
h2{font-size:clamp(32px,4.4vw,48px)}
h3{font-size:24px;font-weight:600}
p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:3px;
  font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;border:1.5px solid transparent}
.btn-p{background:var(--brand);color:var(--on-brand)}
.btn-p:hover{filter:brightness(1.08)}
.btn-g{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-g:hover{border-color:var(--sig);color:var(--sig)}

/* Header: a drawing title block strip, slides away while scrolling down */
.ns-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--surface);border-bottom:1.5px solid var(--ink);
  transition:transform .28s ease,opacity .28s ease}
.ns-head.is-up{transform:translateY(calc(-100% - 8px));opacity:0;pointer-events:none}
.ns-head-in{display:flex;align-items:stretch;gap:20px;min-height:68px}
.ns-brand{display:flex;align-items:stretch;text-decoration:none;color:var(--ink);border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);flex:none}
.ns-brand span{display:flex;flex-direction:column;justify-content:center;padding:6px 14px}
.ns-brand span+span{border-left:1.5px solid var(--ink)}
.ns-brand small{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.ns-brand b{font:700 22px/1.05 var(--display);letter-spacing:.04em}
.ns-brand .ns-n{width:25px;height:24px;display:inline-block;margin-right:7px;vertical-align:-4px}
.ns-nav{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}
.ns-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}
.ns-nav a:hover{color:var(--sig)}
.ns-nav .ns-home{font:500 13px/1 var(--mono);color:var(--muted)}
.theme-toggle{font:500 13px/1 var(--mono);background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:3px;min-height:38px;padding:0 12px;cursor:pointer}
.theme-toggle:hover{border-color:var(--ink)}
.ns-tools{display:none;align-items:center;gap:10px;margin-left:auto}
.ns-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font:600 15px/1 var(--sans);color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:3px;cursor:pointer}
.ns-menu .x{display:none}
.ns-head.is-open .ns-menu .bars{display:none}
.ns-head.is-open .ns-menu .x{display:block}
@media (max-width:1079.98px){
  .ns-tools{display:flex}
  .ns-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:4px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:3px solid var(--brand)}
  .ns-head.is-open .ns-nav{display:flex}
  .ns-nav>a{display:flex;align-items:center;min-height:48px;font-size:17px;border-bottom:1px solid var(--line)}
  .ns-nav>.theme-toggle{align-self:flex-start;margin-top:14px;min-height:44px}
  .ns-nav>.btn{display:none}
}
@media (max-width:599.98px){
  .ns-tools .btn{display:none}
  .ns-nav>.btn{display:flex;order:-1;margin:12px 0 8px}
  .ns-brand span{padding:6px 10px}
  .ns-brand b{font-size:19px}
  .ns-brand .ns-dwg{display:none}
  .ns-head-in{gap:10px}
}
@media (prefers-reduced-motion:reduce){.ns-head{transition:none}}

/* Hero */
.hero{padding-block:56px 64px}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(46px,6.4vw,84px);margin:14px 0 18px}
.hero h1 em{font-style:normal;font-family:var(--hand);font-weight:400;color:var(--pencil);font-size:.82em;letter-spacing:0}
.lead{font-size:19px;color:var(--muted);max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font:500 13px/1.4 var(--mono);color:var(--muted)}
.facts span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--sig);margin-right:8px;vertical-align:1px}
@media (max-width:899.98px){.hero-in{grid-template-columns:minmax(0,1fr);gap:36px}.hero{padding-block:36px 48px}}

/* Sample carousel: one compare sheet per discipline */
.fig{margin:0;min-width:0}
.car-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-width:0}
.car-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1;padding:3px}
.car-tabs::-webkit-scrollbar{display:none}
.car-tabs button{flex:none;min-height:38px;padding:0 12px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border:1.5px solid var(--line);border-radius:2px;cursor:pointer}
.car-tabs button:hover{color:var(--ink);border-color:var(--ink)}
.car-tabs button[aria-selected="true"]{color:var(--surface);background:var(--ink);border-color:var(--ink)}
.car-nav{display:flex;gap:6px;flex:none}
.car-nav button{width:40px;height:40px;display:grid;place-items:center;background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);border-radius:2px;cursor:pointer}
.car-nav button:hover{background:var(--ink);color:var(--surface)}
.cmp{position:relative;width:100%;max-width:100%;aspect-ratio:640/420;border:1.5px solid var(--ink);background:var(--surface);overflow:hidden;--x:50%;touch-action:pan-y}
.cmp svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cmp .clean{clip-path:inset(0 0 0 var(--x))}
.cmp .split{position:absolute;top:0;bottom:0;left:var(--x);width:0;border-left:2px solid var(--brand);pointer-events:none}
.cmp .split i{position:absolute;top:50%;left:-17px;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;color:var(--on-brand);font:700 14px/1 var(--mono)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:3px}
.cmp-tags{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none}
.cmp-tags b{font:500 11px/1 var(--mono);letter-spacing:.1em;padding:6px 8px;background:var(--ink);color:var(--surface)}
.cmp-tags b+b{background:var(--sig);color:var(--surface)}
.car-cap{margin-top:10px;display:grid;gap:4px;font:400 13px/1.45 var(--mono);color:var(--muted);touch-action:pan-y}
.car-cap b{font-weight:500;color:var(--ink)}
.car-cap .cnt{color:var(--sig)}
/* sample sheet styling via tokens: k = finished drawing, p = pencil sketch, q = printed sheet under redlines */
.k-sheet{fill:var(--surface)} .k-frame{fill:none;stroke:var(--ink);stroke-width:1.2}
.k-pipe{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linejoin:round}
.k-pipe2,.k-thick{fill:none;stroke:var(--ink);stroke-width:2.4} .k-med{fill:none;stroke:var(--ink);stroke-width:1.5}
.k-thin,.k-solidc{fill:none;stroke:var(--ink);stroke-width:.9} .k-dim{fill:none;stroke:var(--ink);stroke-width:.7}
.k-center{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:14 3 2 3} .k-hidden{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:6 4}
.k-wall{fill:none;stroke:var(--ink);stroke-width:6} .k-bus{fill:none;stroke:var(--ink);stroke-width:4}
.k-solid{fill:var(--ink)} .k-hatch{fill:url(#nsHatch)} .ns-hl{stroke:var(--ink);stroke-width:.8}
.kt{font-family:var(--mono);fill:var(--ink)} .kb{font-weight:600} .ks{fill:var(--muted)}
.k-stamp,.p-stamp{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:var(--accent-text)}
.p-paper{fill:var(--paper)} .p-grid{fill:none;stroke:var(--sig);stroke-opacity:.18;stroke-width:.8}
.p-pipe,.p-thick,.p-wall,.p-bus{fill:none;stroke:var(--pencil);stroke-width:2.4;stroke-linecap:round}
.p-pipe2,.p-med,.p-solidc{fill:none;stroke:var(--pencil);stroke-width:1.7;stroke-linecap:round}
.p-thin,.p-dim,.p-center{fill:none;stroke:var(--pencil);stroke-width:1.1;stroke-linecap:round}
.p-hidden{fill:none;stroke:var(--pencil);stroke-width:1.1;stroke-dasharray:6 5}
.p-red{fill:none;stroke:var(--redline);stroke-width:1.8;stroke-linecap:round}
.ph{font-family:var(--hand);fill:var(--pencil)} .ph.red{fill:var(--redline)}
.q-paper{fill:var(--print)} .q-frame,.q-sheet{fill:none;stroke:var(--print-ink);stroke-width:1}
.q-pipe{fill:none;stroke:var(--print-ink);stroke-width:3} .q-pipe2,.q-thick{fill:none;stroke:var(--print-ink);stroke-width:2.2}
.q-med{fill:none;stroke:var(--print-ink);stroke-width:1.4} .q-thin,.q-dim{fill:none;stroke:var(--print-ink);stroke-width:.8}
.q-solid{fill:var(--print-ink)} .qt{font-family:var(--mono);fill:var(--print-ink)}

/* Sections */
.sec{padding-block:72px}
.sec-head{display:grid;gap:12px;max-width:62ch;margin-bottom:36px}
.sec-head p{color:var(--muted);font-size:17px}
@media (max-width:640px){.sec{padding-block:52px}}

/* Send / get ledger */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1.5px solid var(--ink);background:var(--surface)}
.ledger>div{padding:26px 28px;min-width:0}
.ledger>div+div{border-left:1.5px solid var(--ink)}
.ledger h3{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.ledger h3 small{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--sig);text-transform:uppercase}
.ledger ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ledger li{padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.ledger li::before{content:"";width:12px;height:12px;margin-top:7px;border:1.5px solid var(--pencil);border-radius:50%}
.ledger .get li::before{border:0;background:var(--sig);border-radius:0;transform:rotate(45deg) scale(.8)}
.ledger li b{font-weight:600}
@media (max-width:760px){.ledger{grid-template-columns:minmax(0,1fr)}.ledger>div+div{border-left:0;border-top:1.5px solid var(--ink)}.ledger>div{padding:22px 18px}}

/* Disciplines */
.disc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.disc>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.disc h3{font-size:22px}
.disc p{grid-column:1/-1;color:var(--muted);font-size:15px}
.chip{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:2px;white-space:nowrap;border:1px solid var(--line);color:var(--muted)}
.chip.prog{border-color:var(--sig);color:var(--sig)}
.chip.now{background:var(--sig);border-color:var(--sig);color:var(--surface)}
.note{margin-top:24px;font:400 14px/1.5 var(--mono);color:var(--muted);max-width:80ch}
@media (max-width:760px){.disc{grid-template-columns:minmax(0,1fr)}}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:1.5px solid var(--ink)}
.steps li{padding:20px 0 22px;display:grid;gap:8px;align-content:start}
.steps li:nth-child(n+4){border-top:1px solid var(--line)}
.steps .n{font:700 40px/1 var(--display);color:var(--sig)}
.steps p{color:var(--muted);font-size:15px}
@media (max-width:899.98px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:519.98px){.steps{grid-template-columns:minmax(0,1fr)}.steps li+li{border-top:1px solid var(--line)}}

/* Who it's for */
.who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.who-list{display:grid;gap:18px}
.who-list div{display:grid;gap:8px}
.who-list .tags{display:flex;flex-wrap:wrap;gap:8px}
.who-list .tags span{font:500 13px/1 var(--mono);padding:8px 10px;border:1px solid var(--line);background:var(--surface);border-radius:2px}
.probs{list-style:none;margin:0;padding:0;display:grid;border-top:1.5px solid var(--ink)}
.probs li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.probs .n{grid-row:span 2;font:700 34px/1 var(--display);color:var(--accent-text)}
.probs b{font:600 22px/1.15 var(--display)}
.probs span{color:var(--muted);font-size:15px}
@media (max-width:899.98px){.who{grid-template-columns:minmax(0,1fr);gap:28px}}
.ctaband{background:var(--cta);color:var(--cta-ink);border-block:1.5px solid var(--ink)}
.ctaband .lab{color:var(--band-lab)} .ctaband .mail{color:var(--cta-ink)}
.ctaband-in{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between;padding-block:44px}
.ctaband p{color:var(--cta-muted);margin-top:8px}
.ctaband h2{margin-top:10px}
.ctaband .cta{margin-top:0;align-items:center;gap:16px}
.ledger .lnote{margin-top:14px;font:400 13px/1.5 var(--mono);color:var(--muted)}

/* Privacy band */
.band{background:var(--band);color:var(--band-ink)}
.band .lab{color:var(--band-lab)}
.band-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;padding-block:72px}
.band ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.band li{padding:16px 0;border-top:1px solid var(--band-rule);display:grid;gap:4px}
.band li b{font:600 22px/1.15 var(--display);letter-spacing:.01em}
.band li span{color:var(--band-muted);font-size:15px}
.band h2{margin-top:12px}
@media (max-width:899.98px){.band-in{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:52px}}

/* About */
.about p{font:600 clamp(24px,3vw,34px)/1.2 var(--display);max-width:34ch;text-wrap:balance}
.about a{font:500 14px/1 var(--mono)}

/* Quote */
.quote{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start}
.quote .side{display:grid;gap:14px}
.quote .side p{color:var(--muted)}
.mail{font:500 15px/1.4 var(--mono);color:var(--ink);user-select:all}
form{background:var(--surface);border:1.5px solid var(--ink);padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.f{display:grid;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
label{font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:2px;padding:10px 12px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--sig);outline:none;box-shadow:0 0 0 3px var(--sig-soft)}
textarea{min-height:110px;resize:vertical}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.form-foot small{color:var(--muted);font-size:13px}
#qstatus{grid-column:1/-1;font:500 14px/1.4 var(--mono);color:var(--sig)}
@media (max-width:899.98px){.quote{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:560px){form{grid-template-columns:minmax(0,1fr);padding:18px}}

/* Footer */
.foot{border-top:1.5px solid var(--ink);background:var(--surface)}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding-block:24px;font-size:14px;color:var(--muted)}
.foot a{color:var(--ink)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:-10000px;top:8px;z-index:90;background:var(--surface);color:var(--ink);padding:10px 14px;border:1.5px solid var(--ink)}
.skip:focus{left:16px}
.page{max-width:720px;padding-block:96px;display:grid;gap:18px}
.page p{color:var(--muted);font-size:17px}