/* Supercanic Detroit.
   The design idea is a shop's paperwork, not a dashboard. The ground is gray
   photocopy stock, the panels are the white form laid on it, and the brand
   green and purple behave like ink and highlighter rather than neon on black.
   Big Shoulders Display does the signage. Public Sans is a government forms
   face and does the body. Courier Prime appears ONLY where the content is
   really data, which is part numbers, hours and money. */
:root{
  --paper:#E4E4E1;
  --paper-2:#D7D8D4;
  --doc:#FFFFFF;
  --ink:#14161A;
  --ink-soft:#3A414B;
  --steel:#5A6472;
  --rule:#C3C5C0;
  --rule-2:#E2E3E0;
  --green:#5BDB3E;
  --green-ink:#25701A;
  --highlight:rgba(91,219,62,.42);
  --purple:#7B2FBE;
  --purple-ink:#521A85;
  --shell:min(1200px,92vw);
  --gap:clamp(1.5rem,4vw,3rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.95rem + .22vw,1.09rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.sign{
  font-family:"Big Shoulders Display","Public Sans",system-ui,sans-serif;
  font-weight:800;line-height:.92;letter-spacing:.004em;
  text-transform:none;margin:0 0 .38em;
}
h1{font-size:clamp(2.9rem,1.7rem + 5.2vw,5.4rem);max-width:15ch}
h2{font-size:clamp(2.1rem,1.4rem + 3vw,3.5rem)}
h3{font-size:clamp(1.35rem,1.2rem + .7vw,1.7rem);font-weight:700}
h4{font-family:"Public Sans",sans-serif;font-size:1rem;font-weight:700;
  margin:0 0 .5rem}
p{margin:0 0 1.05em;max-width:74ch}
a{color:var(--green-ink)}
a:hover{color:var(--ink)}
img{max-width:100%;display:block;height:auto}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.shell{width:var(--shell);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--green);
  color:var(--ink);padding:.7rem 1rem;z-index:99;font-weight:700}
.skip:focus{left:0}
.num{font-family:"Courier Prime",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* the form rule. one solid bar with a tab at the left, like the head of a
   work order. it replaces the repeating dashed strip, which was decoration. */
.rule{height:3px;background:var(--ink);position:relative}
.rule::before{content:"";position:absolute;left:0;top:-4px;width:88px;height:11px;
  background:var(--green)}

/* header */
.dispatch{background:var(--ink);color:var(--paper);font-size:.86rem;
  padding:.5rem 0}
.dispatch .shell{display:flex;gap:.4rem 2rem;flex-wrap:wrap;align-items:center}
.dispatch b{color:var(--green);font-weight:700}
.dispatch a{color:var(--green);text-decoration:none;font-weight:700}
nav.bar{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:2px solid var(--ink)}
nav.bar .shell{display:flex;align-items:center;gap:1rem;min-height:76px;
  padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  color:var(--ink)}
.brand img{width:46px;height:46px;flex:none;background:#000;border-radius:3px}
.brand .wm{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:1.75rem;line-height:.85;letter-spacing:.005em;display:block}
.brand .pl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--green-ink);margin-top:.15rem}
footer .brand{color:var(--paper)}
footer .brand .pl{color:var(--green)}
.navlinks{display:flex;gap:.1rem;margin-left:auto;align-items:center}
.navlinks a{text-decoration:none;color:var(--ink);font-size:.96rem;
  font-weight:600;padding:.5rem .68rem;border-bottom:3px solid transparent}
.navlinks a:hover{border-bottom-color:var(--green)}
.navlinks a[aria-current="page"]{border-bottom-color:var(--ink)}
.navcall{background:var(--green);color:var(--ink)!important;font-weight:700;
  padding:.68rem 1rem!important;border-bottom:3px solid var(--ink)!important;
  white-space:nowrap;margin-left:.5rem}
.navcall:hover{background:#6FEC53}
.burger{display:none;margin-left:auto;background:var(--doc);
  border:2px solid var(--ink);color:var(--ink);width:48px;height:44px;
  font-size:1.15rem;cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:"Public Sans",sans-serif;font-weight:700;font-size:1rem;
  padding:.9rem 1.45rem;text-decoration:none;border:2px solid var(--ink);
  background:var(--doc);color:var(--ink);cursor:pointer;line-height:1.2;
  text-align:center}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-go{background:var(--green);color:var(--ink)}
.btn-go:hover{background:var(--ink);color:var(--green)}
.btn-purple{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-purple:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-line{background:transparent}
.btns{display:flex;gap:.7rem;flex-wrap:wrap}

/* hero */
.hero{padding:clamp(2.4rem,5vw,4rem) 0 clamp(2.6rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:var(--gap);align-items:start}
.hero h1{margin-bottom:.5rem}
.hero .lede{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--ink-soft);
  max-width:44ch}
.hero .mark{background:linear-gradient(transparent 62%,var(--highlight) 62%)}
.hero-shot{position:relative}
.hero-shot>img{width:100%;border:2px solid var(--ink);
  aspect-ratio:4/3;object-fit:cover}
.hero-note{font-size:.86rem;color:var(--steel);margin:.6rem 0 0;max-width:40ch}

/* the estimate. the one loud object on the page. */
.estimate{background:var(--doc);border:2px solid var(--ink);margin:0;
  box-shadow:10px 10px 0 rgba(20,22,26,.14)}
.hero .estimate{position:relative;margin:-4.5rem 0 0 -3.5rem;z-index:2}
.est-head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;
  background:var(--ink);color:var(--paper)}
.est-head img{width:34px;height:34px;flex:none;border-radius:2px}
.est-head b{font-family:"Big Shoulders Display",sans-serif;font-size:1.28rem;
  font-weight:800;display:block;line-height:1}
.est-head>span>span{font-size:.78rem;color:#9AA3B0;display:block;
  margin-top:.15rem}
.est-head .est-tag{margin-left:auto;background:var(--green);color:var(--ink);
  font-size:.68rem;font-weight:700;padding:.24rem .5rem;letter-spacing:.09em;
  margin-top:0;align-self:flex-start}
.est-meta{display:grid;grid-template-columns:repeat(3,1fr);margin:0;
  border-bottom:1px solid var(--rule)}
.est-meta div{padding:.7rem 1.1rem;border-right:1px solid var(--rule-2)}
.est-meta div:last-child{border-right:0}
.est-meta dt{font-size:.7rem;color:var(--steel);font-weight:700;
  letter-spacing:.06em;margin:0}
.est-meta dd{margin:.2rem 0 0;font-weight:700;font-size:.95rem}
.est-lines{width:100%;border-collapse:collapse;font-size:.93rem}
.est-lines th{text-align:left;font-size:.7rem;color:var(--steel);
  padding:.55rem 1.1rem;border-bottom:1px solid var(--rule);font-weight:700;
  letter-spacing:.06em}
.est-lines th.r,.est-lines td.r{text-align:right}
.est-lines td{padding:.62rem 1.1rem;border-bottom:1px solid var(--rule-2);
  vertical-align:top}
.est-lines td span{display:block;font-family:"Courier Prime",monospace;
  font-size:.79rem;color:var(--steel);margin-top:.15rem}
.est-lines td.r{font-family:"Courier Prime",monospace;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.est-total{display:flex;align-items:baseline;justify-content:space-between;
  padding:.85rem 1.1rem;background:var(--paper);border-bottom:2px solid var(--ink);
  border-top:1px solid var(--rule)}
.est-total span{font-weight:700;font-size:.92rem}
.est-total b{font-family:"Courier Prime",monospace;font-size:1.6rem;
  font-weight:700;font-variant-numeric:tabular-nums}
.est-sign{padding:.9rem 1.1rem 1.1rem}
.est-sign svg{width:170px;height:46px;display:block;color:var(--purple-ink)}
.est-sign hr{border:0;border-top:1px solid var(--ink);margin:.1rem 0 .5rem;
  width:230px;max-width:100%}
.est-sign p{font-size:.8rem;color:var(--steel);margin:0;max-width:42ch}
.sig path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:640;stroke-dashoffset:640;
  animation:sign 1.15s .45s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sign{to{stroke-dashoffset:0}}

/* sections */
section{padding:clamp(2.6rem,5.5vw,4.4rem) 0}
.sec-head{margin-bottom:2rem;max-width:64ch}
.sec-head p{color:var(--ink-soft)}
.ink{background:var(--ink);color:var(--paper)}
.ink h2,.ink h3{color:var(--paper)}
.ink p{color:#B7BEC8}
.ink a:not(.btn){color:var(--green)}
.band{background:var(--paper-2)}

/* the ruled service list. a menu on a shop wall, not a card grid. */
.ruled{border-top:2px solid var(--ink)}
.ruled a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1.5rem;
  align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink)}
.ruled a{position:relative;padding-left:0;transition:padding-left .12s ease}
.ruled a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--green);transition:width .12s ease}
.ruled a:hover::before,.ruled a:focus-visible::before{width:6px}
.ruled a:hover,.ruled a:focus-visible{padding-left:1rem}
.ruled .nm{font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);line-height:1}
.ruled .ds{grid-column:1;color:var(--ink-soft);font-size:.95rem;max-width:62ch}
.ruled .tag{grid-row:1;grid-column:2;font-family:"Courier Prime",monospace;
  font-size:.8rem;color:var(--ink-soft);white-space:nowrap}

/* cards, flattened. no shadow, no hover lift, no uniform radius. */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--doc);padding:1.5rem;text-decoration:none;color:inherit;
  display:block}
a.card:hover{background:var(--ink);color:var(--paper)}
a.card:hover .go,a.card:hover h3{color:var(--green)}
a.card:hover p{color:#B7BEC8}
.card h3{margin-bottom:.4rem}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem}
.card .go{display:inline-block;margin-top:.85rem;font-weight:700;
  color:var(--green-ink);font-size:.92rem}
.ink .cards{background:#2C333D;border-color:#2C333D}
.ink .card{background:#1B1F26;color:var(--paper)}
.ink .card p{color:#B7BEC8}
.icn{width:34px;height:34px;margin-bottom:.9rem;color:var(--green-ink)}
.ink .icn{color:var(--green)}
a.card:hover .icn{color:var(--green)}

/* three facts a local searcher decides on, above the fold on a phone */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  margin-top:1.9rem}
.proof div{border-top:3px solid var(--ink);padding-top:.6rem}
.proof b{display:block;font-family:"Big Shoulders Display",sans-serif;
  font-size:1.35rem;line-height:1.05}
.proof div>span{display:block;font-size:.85rem;color:var(--ink-soft);
  line-height:1.4;margin-top:.2rem}
.proof .stars{display:inline;font-size:.9em}
@media(max-width:520px){.proof{grid-template-columns:1fr;gap:.9rem}
  .proof div{padding-top:.45rem}}

/* the four reasons. no box, no shadow, no card. a rule and a sentence. */
.claims{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem var(--gap)}
.claim{border-top:4px solid var(--green);padding-top:1rem}
.claim h3{margin-bottom:.35rem}
.claim p{margin:0;color:var(--ink-soft);max-width:40ch}
@media(max-width:760px){.claims{grid-template-columns:1fr;gap:1.6rem}}

/* photos */
figure.shot{margin:0}
figure.shot img{width:100%;border:2px solid var(--ink);aspect-ratio:4/3;
  object-fit:cover;background:var(--ink)}
figure.shot figcaption{font-size:.85rem;color:var(--steel);margin-top:.5rem}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.figs.g3{grid-template-columns:repeat(3,1fr)}

/* bite snack meal */
.bite{background:var(--doc);border-left:10px solid var(--green);
  border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1.3rem 1.5rem;font-size:1.1rem;margin:0 0 1.4rem;max-width:none}
.bite b{background:linear-gradient(transparent 60%,var(--highlight) 60%)}
.snack{border:1px solid var(--rule);background:var(--doc);padding:1.3rem 1.5rem;
  margin:0 0 2rem}
.snack h2{font-family:"Public Sans",sans-serif;font-size:.95rem!important;
  font-weight:700;margin-bottom:.7rem;letter-spacing:0}
.snack ul{margin:0;padding-left:1.15rem}
.snack li{margin-bottom:.35rem}
.snack li:last-child{margin-bottom:0}

/* prose */
.prose{max-width:70ch}
.prose h2{margin-top:2.3rem}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:var(--gap);
  align-items:start}
.crumb{font-size:.88rem;color:var(--steel);margin-bottom:.7rem}
.crumb a{color:var(--steel);text-decoration:none}
.crumb a:hover{color:var(--ink)}
aside .box{border:1px solid var(--rule);background:var(--doc);padding:1.3rem;
  margin-bottom:1.1rem}
aside .box h3{font-size:1.2rem}
aside .box.dk{background:var(--ink);color:var(--paper);border-color:var(--ink)}
aside .box.dk h3{color:var(--paper)}
aside .box.dk p{color:#B7BEC8}
/* the sidebar link color must never reach a button inside the box. that bug
   put green text on a green fill and hid the phone number. */
aside .box.dk a:not(.btn){color:var(--green)}
aside ul{margin:0;padding-left:1.1rem;font-size:.95rem}
aside .list{list-style:none;padding:0;margin:0}
aside .list a{display:block;padding:.45rem 0;border-bottom:1px solid var(--rule-2);
  text-decoration:none;font-size:.95rem;color:var(--ink)}
aside .list a:last-child{border-bottom:0}
aside .list a:hover{color:var(--green-ink)}
.wide{width:100%}

/* spec strip. real tabular facts about a job, so it earns its rules. */
.spec{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);
  background:var(--doc);margin:0 0 1.8rem}
.spec div{padding:.85rem 1.1rem;border-right:1px solid var(--rule-2)}
.spec div:last-child{border-right:0}
.spec dt{font-size:.72rem;color:var(--steel);font-weight:700;margin:0}
.spec dd{margin:.15rem 0 0;font-weight:700;font-family:"Courier Prime",monospace;
  font-size:1rem}
.spec.side{grid-template-columns:1fr;margin-bottom:1.1rem}
.spec.side div{border-right:0;border-bottom:1px solid var(--rule-2);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.spec.side div:last-child{border-bottom:0}
.spec.side dd{margin:0}
.lead-shot{margin:1.8rem 0}

/* price table */
.prices{width:100%;border-collapse:collapse;margin:1.4rem 0;background:var(--doc)}
.prices th,.prices td{text-align:left;padding:.9rem 1rem;
  border-bottom:1px solid var(--rule)}
.prices th{font-size:.75rem;letter-spacing:.05em;color:var(--steel);
  border-bottom:2px solid var(--ink);font-weight:700}
.prices td.n{font-family:"Courier Prime",monospace;font-weight:700;
  white-space:nowrap;font-size:1.15rem;text-align:right}
.prices .sub{color:var(--steel);font-size:.88rem;display:block;margin-top:.15rem}

/* faq */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:1rem 0;font-weight:700;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green-ink);font-size:1.5rem;
  line-height:1;font-weight:400}
.faq details[open] summary::after{content:"‘2"}
.faq details p{padding-bottom:1rem;margin:0}

/* included checklist. replaces the five up dark feature strip. */
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--gap)}
/* the section link color turned every title acid green and put the page
   back in the near black plus neon cluster. titles stay paper, green is the
   hover. spend the boldness on the estimate, not on a list. */
.ink .incl a,.incl a{display:flex;gap:.85rem;align-items:flex-start;
  padding:.95rem 0;border-bottom:1px solid #2C333D;text-decoration:none;
  color:var(--paper)}
.incl a:hover{color:var(--green)}
.incl .icn{width:26px;height:26px;margin:.15rem 0 0;flex:none;color:var(--green)}
.incl a>span{display:block;color:inherit}
.incl b{display:block;font-size:1.02rem;color:inherit}
.incl a span span{display:block;color:#9AA3B0;font-size:.88rem;
  line-height:1.45;font-weight:400}
.incl a:hover span span{color:#B7BEC8}

/* super tech band */
.tech-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  border:2px solid var(--ink);background:var(--doc)}
.tech-band .side{padding:clamp(1.6rem,3vw,2.4rem);border-right:1px solid var(--rule)}
.tech-band .side img{border:1px solid var(--ink);aspect-ratio:4/3;
  object-fit:cover;width:100%;margin-bottom:1.1rem}
.tech-band .main{padding:clamp(1.6rem,3vw,2.4rem)}
.rate{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .3rem}
.rate b{font-family:"Big Shoulders Display",sans-serif;font-size:2.6rem;
  font-weight:800;line-height:.9}
.stars{color:#8A5E00;letter-spacing:.06em}

/* record card, used instead of big number stat tiles */
.record{border:1px solid var(--rule);background:var(--doc);margin:0 0 1.6rem}
.record div{display:flex;gap:1rem;justify-content:space-between;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--rule-2)}
.record div:last-child{border-bottom:0}
.record dt{color:var(--steel);font-size:.92rem;margin:0}
.record dd{margin:0;font-weight:700;text-align:right}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:inline-block;border:1px solid var(--ink);background:var(--doc);
  padding:.5rem .8rem;text-decoration:none;font-size:.93rem;color:var(--ink);
  font-weight:600}
.chips a:hover{background:var(--ink);color:var(--paper)}
.ink .chips a{background:transparent;border-color:#3A424D;color:var(--paper)}
.ink .chips a:hover{background:var(--green);color:var(--ink);border-color:var(--green)}
/* an outline button on the dark band inherits the ink text color and
   lands ink on ink. it needs the paper color explicitly. */
.ink .btn-line{color:var(--paper);border-color:var(--paper);background:transparent}
.ink .btn-line:hover{background:var(--paper);color:var(--ink)}

/* form */
form label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);
  margin-bottom:.35rem}
form input,form select,form textarea{width:100%;padding:.8rem .85rem;
  border:1px solid var(--ink);background:var(--doc);font:inherit;
  margin-bottom:1rem;color:var(--ink);border-radius:0}
form textarea{resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.hp{position:absolute;left:-9999px}

/* cta band */
.cta{background:var(--green);color:var(--ink);
  padding:clamp(2.4rem,5vw,3.6rem) 0;border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink)}
.cta h2{max-width:20ch}
.cta p{max-width:50ch;font-size:1.06rem}
.cta .btn{border-color:var(--ink);background:var(--ink);color:var(--green)}
.cta .btn:hover{background:var(--doc);color:var(--ink)}
.cta .btn-line{background:transparent;color:var(--ink)}
.cta .btn-line:hover{background:var(--ink);color:var(--green)}

/* the honest note about where the photos were taken */
.note{border:2px solid var(--ink);background:var(--doc);padding:1.2rem 1.4rem;
  margin:0 0 2rem}
.note p{margin:0;max-width:76ch}

/* footer */
footer{background:var(--ink);color:#B7BEC8;padding:3rem 0 6.5rem;font-size:.94rem}
footer h4{color:var(--paper);font-size:.8rem;letter-spacing:.08em;
  margin-bottom:.9rem}
footer a{color:#B7BEC8;text-decoration:none;display:block;padding:.24rem 0}
footer a:hover{color:var(--green)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2.2rem}
.fbot{border-top:1px solid #2C333D;margin-top:2.4rem;padding-top:1.4rem;
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  font-size:.86rem;color:#8B94A2}
.fbot a{display:inline;color:#8B94A2}
.fbot a:hover{color:var(--green)}
.fbot nav a{display:inline;margin-right:1rem}

/* mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:var(--ink);border-top:2px solid var(--green);padding:.5rem;gap:.5rem}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;
  padding:.85rem;text-decoration:none;font-weight:700;font-size:.98rem}
.callbar .a1{background:var(--green);color:var(--ink)}
.callbar .a2{background:transparent;color:var(--paper);
  border:2px solid var(--paper)}

@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero .estimate{margin:-2.5rem 0 0 0}
  .layout{grid-template-columns:1fr}
  aside .box{margin-bottom:1rem}
}
@media(max-width:900px){
  .figs{grid-template-columns:repeat(3,1fr)}
  .c3{grid-template-columns:repeat(2,1fr)}
  .tech-band{grid-template-columns:1fr}
  .tech-band .side{border-right:0;border-bottom:1px solid var(--rule)}
  .fgrid{grid-template-columns:1fr 1fr}
  .incl{grid-template-columns:1fr}
}
@media(max-width:760px){
  .navlinks{display:none;position:fixed;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:2px solid var(--ink);padding:.5rem;
    gap:0;align-items:stretch;max-height:72vh;overflow:auto}
  .navlinks.open{display:flex}
  .navlinks a{padding:.85rem;font-size:1.02rem;border-bottom:1px solid var(--rule)}
  .navcall{margin-left:0}
  .burger{display:block}
  .c2,.c3{grid-template-columns:1fr}
  .figs,.figs.g3{grid-template-columns:repeat(2,1fr)}
  .est-meta,.spec{grid-template-columns:1fr 1fr}
  .callbar{display:flex}
  .ruled a{grid-template-columns:1fr}
  .ruled .tag{grid-row:auto;grid-column:1}
}
@media(max-width:520px){
  .fgrid,.f2{grid-template-columns:1fr}
  .hero .estimate{box-shadow:6px 6px 0 rgba(20,22,26,.14)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  .sig path{stroke-dashoffset:0}
}
@media print{
  nav.bar,.callbar,.cta,footer,.dispatch{display:none}
  body{background:#fff}
}