/* Cooper Jackson Surfacing — site stylesheet
   Palette sampled from the brand logo. */

:root{
  --ink:#1d2124;
  --charcoal:#2a2f32;
  --steel:#5e686e;
  --aggregate:#c9c6be;
  --limestone:#f2f1ee;
  --paper:#ffffff;
  --orange:#f96d0e;
  --orange-deep:#c4500a;
  --orange-hover:#a34208;
  --rule:rgba(29,33,36,.14);
  --rule-dark:rgba(255,255,255,.16);

  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;

  --shell:1240px;
  --gut:clamp(20px,5vw,48px);
  --section:clamp(56px,8vw,110px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--limestone);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-feature-settings:"kern","liga";padding-bottom:56px;
}
@media(min-width:1040px){body{padding-bottom:0}}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-variation-settings:"wdth" 112;margin:0;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.15rem,4.6vw,3.6rem);letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3vw,2.45rem);letter-spacing:-.02em}
h3{font-size:1.25rem;letter-spacing:-.01em;line-height:1.22}
h4{font-size:1.02rem}
p{margin:0 0 1rem;max-width:68ch}
ul,ol{max-width:68ch}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- mobile overflow guard ----------
   Anything wider than the screen makes the page pan sideways and the browser
   rescale. overflow-x:clip contains it without breaking the sticky header
   (unlike overflow:hidden, which turns the body into a scroll container). */
html{overflow-x:clip;overscroll-behavior-x:none}
body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none;width:100%}
img,svg,video,table,iframe{max-width:100%}
/* grid and flex children default to min-width:auto, which lets long words and
   wide tables blow the layout out */
.spec > *,.hero__grid > *,.lp-hero__grid > *,.lp-split > *,.lp-final > *,
.services > *,.projects > *,.coverage > *,.reasons > *,.grid2 > *,.starter__row > *{min-width:0}
p,li,h1,h2,h3,h4,dd,dt,td,th,summary{overflow-wrap:break-word}
/* wide tables scroll inside their own box rather than the page */
.prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:620px){
  .prose table{white-space:nowrap}
  .prose table td,.prose table th{white-space:normal;min-width:9rem}
}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange-deep);color:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:.95rem 1.5rem;border-radius:2px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;min-height:48px;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn--primary{background:var(--orange-deep);color:#fff}
.btn--primary:hover{background:var(--orange-hover)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--more{
  background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);
  min-width:min(100%,300px);padding:1.05rem 2rem;font-size:1rem;font-weight:600;
}
.btn--more:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.section--paper .btn--more{background:transparent}
.section--paper .btn--more:hover{background:var(--ink);color:var(--paper)}
.section__more{margin:2.25rem auto 0;text-align:center;max-width:none}
.btn--onDark{background:transparent;color:#fff;border-color:var(--rule-dark)}
.btn--onDark:hover{border-color:#fff}

/* ---------- header ---------- */
.masthead{
  background:var(--paper);color:var(--ink);position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--rule);will-change:transform;
}
/* compacts once you start scrolling, so it takes less of a phone screen */
.masthead__inner{display:flex;align-items:center;gap:clamp(.5rem,2vw,1.5rem);min-height:80px;flex-wrap:nowrap}
.masthead[data-scrolled="true"]{box-shadow:0 6px 20px rgba(29,33,36,.08)}
.masthead[data-scrolled="true"] .masthead__inner{min-height:60px}
.masthead[data-scrolled="true"] .logo img{height:34px}
/* slides away when reading down the page, comes straight back on scroll up */
.masthead[data-hidden="true"]{transform:translateY(-101%)}
.logo{display:block;flex:0 1 auto;min-width:0}
.logo img{height:40px;width:auto}
.logo__mark{display:none}
/* narrow phones: the icon only, so the phone number always fits */
@media(max-width:460px){
  .logo__full{display:none}
  .logo__mark{display:block;height:40px}
  .masthead__inner{min-height:68px}
  .masthead[data-scrolled="true"] .logo__mark{height:32px}
}
@media(max-width:360px){.logo__mark{height:34px}}
@media (prefers-reduced-motion: no-preference){
  .masthead{transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease}
  .masthead__inner{transition:min-height .2s ease}
  .logo img{transition:height .2s ease}
}
.logo--footer img{height:78px;width:auto}
.nav{margin-left:auto;display:none;gap:1.5rem}
.nav a{text-decoration:none;font-size:.97rem;font-weight:500;color:var(--ink);padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--orange)}
.nav a[aria-current="page"]{border-bottom-color:var(--orange)}
.masthead__actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:none}
.btn--tel{gap:.5rem;padding:.75rem 1rem;min-height:46px;white-space:nowrap;font-size:.98rem;letter-spacing:0;flex:none}
.btn--tel svg{width:17px;height:17px;fill:currentColor;flex:none}
.tel-note{display:none;font-size:.78rem;color:var(--steel);white-space:nowrap}
.masthead[data-scrolled="true"] .btn--tel{min-height:42px;padding:.6rem 1rem}
.drawer__cta{color:var(--orange-deep);font-weight:600}
@media(max-width:460px){
  .btn--tel{padding:.7rem .75rem;font-size:.92rem;gap:.4rem}
  .btn--tel svg{width:15px;height:15px}
  .navtoggle{width:44px;height:44px}
}
@media(max-width:340px){.btn--tel__num{font-size:.86rem}}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:1.5px solid var(--rule);color:var(--ink);cursor:pointer;width:48px;height:48px;padding:0;border-radius:2px}
.navtoggle__bars{display:block;width:22px;height:16px;position:relative}
.navtoggle__bars i{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s ease,opacity .15s ease,top .2s ease}
.navtoggle__bars i:nth-child(1){top:0}
.navtoggle__bars i:nth-child(2){top:7px}
.navtoggle__bars i:nth-child(3){top:14px}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3){top:7px;transform:rotate(-45deg)}
@media (prefers-reduced-motion: reduce){.navtoggle__bars i{transition:none}}
/* full-height panel below the bar, so a long menu scrolls instead of pushing the page */
.drawer{
  position:fixed;left:0;right:0;top:80px;bottom:0;z-index:29;
  background:var(--paper);border-top:1px solid var(--rule);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;
  padding-bottom:max(1.25rem, env(safe-area-inset-bottom));
}
.drawer[hidden]{display:none}
.drawer__nav{display:block;padding-top:.25rem}
.drawer a{display:flex;align-items:center;min-height:58px;padding:.35rem 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule);font-weight:500;font-size:1.06rem}
.drawer a[aria-current="page"]{color:var(--orange-deep)}
.drawer__foot{display:grid;gap:.6rem;padding-top:.5rem}
.drawer__foot a{border-bottom:0;justify-content:center;min-height:52px;font-size:1rem}
.drawer__foot .btn--primary{color:#fff}
.drawer__foot p{margin:.2rem 0 0;font-size:.85rem;color:var(--steel);text-align:center}
@media (prefers-reduced-motion: no-preference){
  .drawer{animation:drawerIn .18s ease-out}
  @keyframes drawerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media(min-width:1100px){
  .drawer{display:none}
  .nav{display:flex}
  .masthead__actions{margin-left:1.5rem}
  .tel-note{display:block;order:-1}
  .navtoggle{display:none}
  .logo img{height:52px}
  .masthead[data-scrolled="true"] .logo img{height:40px}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.85rem;color:var(--steel);padding-top:1.4rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;max-width:none}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--aggregate)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--steel)}
.crumbs [aria-current]{color:var(--ink)}
.crumbs--dark{color:#a9b3b8}
.crumbs--dark a{color:#a9b3b8}
.crumbs--dark [aria-current]{color:#fff}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:#fff;
  padding-block:clamp(36px,5vw,64px) 0;
}
/* aggregate texture — keeps the dark band from reading as a flat block,
   and sits behind a hero photograph once one is supplied */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.55'/></svg>");
}
/* warm floor light from the bottom left, picked up from the logo orange */
.hero::after{
  content:"";position:absolute;z-index:-1;left:-15%;bottom:-40%;width:70%;height:90%;
  background:radial-gradient(closest-side, rgba(249,109,14,.16), transparent 70%);
  pointer-events:none;
}
.hero__grid{display:grid;gap:clamp(28px,4vw,48px);position:relative}
.hero p.hero__lede{color:#e3e6e7;font-size:clamp(1.06rem,1.5vw,1.25rem);max-width:44ch;margin-bottom:0}
.hero h1{margin-bottom:1.1rem;font-size:clamp(2.3rem,5.2vw,4rem)}
.hero h1 .accent{color:var(--orange)}
/* controlled line breaks on phones only */
.br-sm{display:none}
@media(max-width:640px){.br-sm{display:inline}}
.hero__call{margin:1.15rem 0 0;font-size:.97rem;color:#b9c1c6;text-align:center}
.hero__call a{color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px;white-space:nowrap}
.hero__call a:hover{border-bottom-color:#fff}

/* media column bleeds to the right edge of the viewport on wide screens */
.hero__media{margin:0;position:relative}
.hero__plate{
  position:relative;background:var(--charcoal);border:1px solid var(--rule-dark);
  aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:1.5rem;
  background-image:linear-gradient(115deg, rgba(255,255,255,.04) 0%, transparent 55%);
}
.hero__plate span{font-size:.85rem;color:var(--aggregate)}
.hero__plate--photo{padding:0;place-items:stretch;background-image:none}
.hero__plate picture{display:block;height:100%}
.hero__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero__platecap{font-size:.78rem;margin-top:.6rem;color:#8d979d}
@media(min-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(40px,4vw,64px)}
  .hero__media{margin-right:calc(50% - 50vw);align-self:stretch}
  .hero__plate{aspect-ratio:auto;height:100%;min-height:440px;border-right:0}
  .hero__platecap{position:absolute;left:1rem;bottom:.6rem;margin:0;background:rgba(29,33,36,.7);padding:.3rem .55rem}
}

/* ---------- page hero (inner pages) ---------- */
.pagehead{background:var(--ink);color:#fff;padding-bottom:clamp(40px,6vw,72px)}
.pagehead h1{margin:1.2rem 0 1rem;max-width:20ch}
.pagehead p{color:#dfe2e3;font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:56ch}
.pagehead__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.pagehead__grid{display:grid;gap:2rem}
@media(min-width:960px){.pagehead__grid{grid-template-columns:1.15fr .85fr;align-items:end}}
.answerbox{background:var(--charcoal);border-left:3px solid var(--orange);padding:1.2rem 1.3rem;font-size:.99rem;color:#e6e9ea}
.answerbox p{margin:0;color:#e6e9ea}
.answerbox h2{font-family:var(--body);font-size:.82rem;font-weight:600;color:var(--aggregate);margin-bottom:.5rem;letter-spacing:.02em}

/* ---------- quote starter ---------- */
.starter{
  background:var(--paper);color:var(--ink);padding:1.35rem 1.35rem 1.45rem;margin-top:1.9rem;
  border-radius:2px;border-top:3px solid var(--orange);box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.starter h2{font-size:1.06rem;font-family:var(--body);font-weight:600;margin-bottom:.25rem}
.starter__sub{font-size:.88rem;color:var(--steel);margin:0 0 .95rem}
.starter__row{display:grid;gap:.75rem}
@media(min-width:560px){
  .starter__row{grid-template-columns:1fr 1.2fr auto;align-items:end}
  /* the button has a hidden label, so pin it to the bottom of its cell
     and match the input height exactly */
  .starter__row .field:last-child{justify-content:flex-end}
  .starter__row .btn{height:48px;min-height:48px;padding-inline:1.4rem}
}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.78rem;font-weight:600;color:var(--steel)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:.75rem .8rem;border:1.5px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);min-height:48px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field__label{font-size:.78rem;font-weight:600;color:var(--steel)}
.field .opt{font-weight:400;color:var(--steel)}
/* select needs an explicit arrow once appearance is normalised on mobile */
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e686e' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:18px;
}
/* file picker: a real tap target instead of the default control */
.filedrop__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filedrop{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.9rem 1rem;cursor:pointer;text-align:center;
  border:1.5px dashed var(--rule);border-radius:2px;background:rgba(249,109,14,.04);
  font-size:.95rem;font-weight:600;color:var(--ink);
}
.filedrop:hover{border-color:var(--orange-deep);background:rgba(249,109,14,.08)}
.filedrop svg{width:20px;height:20px;fill:none;stroke:var(--orange-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.filedrop__input:focus-visible + .filedrop,.filedrop:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.filedrop[data-chosen="true"]{border-style:solid;border-color:var(--orange-deep)}
/* validation feedback only after a submit attempt */
.quote.was-submitted :invalid,.lp-form.was-submitted :invalid{border-color:#b3261e}

@media(max-width:640px){
  .field input,.field select,.field textarea{min-height:52px;font-size:16px}
  .field label,.field__label{font-size:.82rem}
  .grid2{gap:.85rem}
  .pathway{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .pathway button{width:100%;padding:.7rem .5rem;font-size:.9rem}
  .quote{padding:18px 16px}
  .lp-card{padding:18px 16px}
  .quote__actions .btn,.lp-form__submit{width:100%}
}
.grid2{display:grid;gap:1rem}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.span2{grid-column:1/-1}
.hint{font-size:.82rem;color:var(--steel);margin:.6rem 0 0}
.quote{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--orange);padding:clamp(20px,4vw,36px)}
.pathway{display:flex;gap:.5rem;margin-bottom:1.75rem;flex-wrap:wrap}
.pathway button{font:inherit;font-weight:600;font-size:.95rem;padding:.7rem 1.1rem;min-height:46px;cursor:pointer;background:transparent;border:1.5px solid var(--rule);border-radius:2px;color:var(--steel)}
.pathway button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.commercial-only[hidden]{display:none}
.quote__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;margin-top:1.75rem}
.quote__actions .btn{min-width:200px}
@media(max-width:520px){.quote__actions{flex-direction:column;align-items:stretch}.quote__actions .btn{width:100%}}

/* ---------- spec strip ---------- */
.specstrip{background:var(--charcoal);color:#fff;border-top:1px solid var(--rule-dark)}
.specstrip .shell{padding-inline:0}
/* hairline separators come from the 1px grid gap showing through */
.specstrip ul{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule-dark);
}
.specstrip li{
  background:var(--charcoal);padding:1.35rem clamp(20px,5vw,32px);
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;align-items:start;
}
.specstrip svg{
  grid-row:1 / span 2;width:26px;height:26px;fill:none;stroke:var(--orange);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem;
}
.specstrip b{
  font-family:var(--display);font-variation-settings:"wdth" 116;
  font-size:1.18rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;
}
.specstrip small{color:#aab3b8;font-size:.86rem;line-height:1.45;display:block;max-width:none}
@media(min-width:620px){.specstrip ul{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .specstrip ul{grid-template-columns:repeat(4,1fr)}
  .specstrip li{padding:1.6rem clamp(20px,2.2vw,30px);column-gap:.75rem}
}

/* ---------- sections ---------- */
.section{padding-block:var(--section)}
.section--paper{background:var(--paper)}
.section--dark{background:var(--ink);color:#fff}
.section--dark p,.section--dark li{color:#d5d9db}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.spec{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:980px){
  .spec{grid-template-columns:minmax(220px,300px) 1fr;align-items:start}
  .spec__aside{position:sticky;top:84px}
}
.spec__aside h2{margin-bottom:.9rem}
/* keeps a short aside heading on a single line without risking overflow on phones */
.h2--oneline{font-size:clamp(1.65rem,2.6vw,2.15rem)}
@media(min-width:420px){.h2--oneline{white-space:nowrap}}
.spec__aside p{font-size:.98rem;color:var(--steel)}
.section--dark .spec__aside p{color:#a9b3b8}
.rule{height:2px;background:var(--orange);width:48px;margin-bottom:1.25rem}

/* ---------- prose ---------- */
.prose h2{margin:2.6rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.9rem 0 .5rem}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1.1rem}
.prose li{margin-bottom:.45rem}
.prose table{border-collapse:collapse;width:100%;max-width:68ch;margin:0 0 1.4rem;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-weight:600;background:rgba(29,33,36,.04)}
.prose blockquote{margin:1.4rem 0;padding:1rem 1.2rem;background:rgba(249,109,14,.07);border-left:3px solid var(--orange)}
.prose blockquote p:last-child{margin:0}

/* ---------- services grid ---------- */
.services{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:640px){.services{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.services{grid-template-columns:repeat(3,1fr)}}
.service{background:var(--paper);padding:1.6rem 1.4rem;text-decoration:none;display:flex;flex-direction:column;gap:.5rem;transition:background-color .16s ease}
.service:hover{background:#faf9f7}
.service h3{font-size:1.1rem}
.service p{font-size:.93rem;color:var(--steel);margin:0}
.service em{font-style:normal;font-size:.8rem;color:var(--orange-deep);font-weight:600;margin-top:auto;padding-top:.6rem}
.service--sub{background:#fbfaf8}
.service--sub:hover{background:var(--paper)}

/* ---------- sector / definition lists ---------- */
.sectors{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.sectors li{display:grid;gap:.35rem;padding:1.15rem 0;border-top:1px solid var(--rule-dark)}
.sectors li:last-child{border-bottom:1px solid var(--rule-dark)}
.sectors h3{font-size:1.05rem}
.sectors p{margin:0;font-size:.95rem}
@media(min-width:760px){.sectors li{grid-template-columns:250px 1fr;gap:1.5rem;align-items:baseline}}
.section--paper .sectors li{border-color:var(--rule)}

/* ---------- build-up diagram ---------- */
.buildup{
  background:var(--paper);border:1px solid var(--rule);padding:clamp(16px,3vw,28px);
  display:grid;gap:clamp(18px,2.5vw,30px);
}
.buildup__intro{max-width:none;margin-bottom:clamp(24px,3vw,38px)}
.buildup__intro h2{margin-bottom:.8rem}
.buildup__intro p{max-width:none}
.buildup__head{display:grid;gap:.8rem}
.preset{display:flex;gap:.4rem;flex-wrap:wrap}
.preset button{
  font:inherit;font-weight:600;font-size:.92rem;padding:.55rem 1rem;min-height:44px;cursor:pointer;
  background:transparent;border:1.5px solid var(--rule);border-radius:2px;color:var(--steel);
}
.preset button:hover{border-color:var(--ink);color:var(--ink)}
.preset button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.preset__note{margin:0;font-size:.9rem;color:var(--steel);max-width:62ch}
.preset__note b{display:block;color:var(--ink);font-weight:600;margin-top:.2rem}

.buildup__fig{margin:0}
.buildup svg{width:100%;height:auto;display:block}
.layer-label{font-family:var(--body);font-size:13px;font-weight:600;fill:var(--ink)}
.layer-dim{font-family:var(--body);font-size:12px;fill:var(--steel)}
.layer,#d3,#t3,#n3{transition:opacity .2s ease,y .25s ease,height .25s ease,y1 .25s ease,y2 .25s ease}
.buildup .layer{cursor:default}

.layers{list-style:none;margin:0;padding:0;max-width:none;align-self:center}
.layers li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.75rem .5rem;border-top:1px solid var(--rule);outline-offset:-2px}
.layers li:last-of-type{border-bottom:1px solid var(--rule)}
.layers b{display:block;font-family:var(--display);font-variation-settings:"wdth" 110;font-size:1rem;font-weight:600;margin-bottom:.1rem}
.layers small{font-size:.875rem;color:var(--steel);line-height:1.45;display:block}
.ld{font-style:normal;font-family:var(--body);font-size:.8rem;font-weight:600;color:var(--orange-deep);margin-left:.4rem;white-space:nowrap}
.swatch{width:14px;height:34px;margin-top:.25rem;border:1px solid rgba(29,33,36,.15)}
.s1{background:#1d2124}.s2{background:#2a2f32}.s3{background:#4c565c}.s4{background:#c9c6be}.s5{background:#8c8579}

/* hover or keyboard-focus a layer in the list and the drawing isolates it */
.buildup:has(.layers li:is(:hover,:focus)) .layer{opacity:.28}
.buildup:has(li[data-l="1"]:is(:hover,:focus)) .l1,
.buildup:has(li[data-l="2"]:is(:hover,:focus)) .l2,
.buildup:has(li[data-l="3"]:is(:hover,:focus)) .l3,
.buildup:has(li[data-l="4"]:is(:hover,:focus)) .l4,
.buildup:has(li[data-l="5"]:is(:hover,:focus)) .l5{opacity:1}
.layers li:is(:hover,:focus) b{color:var(--orange-deep)}
.buildup:has(.l1:hover) .layer:not(.l1),
.buildup:has(.l2:hover) .layer:not(.l2),
.buildup:has(.l3:hover) .layer:not(.l3),
.buildup:has(.l4:hover) .layer:not(.l4),
.buildup:has(.l5:hover) .layer:not(.l5){opacity:.28}
.buildup:has(.l1:hover) li[data-l="1"],
.buildup:has(.l2:hover) li[data-l="2"],
.buildup:has(.l3:hover) li[data-l="3"],
.buildup:has(.l4:hover) li[data-l="4"],
.buildup:has(.l5:hover) li[data-l="5"]{background:rgba(249,109,14,.07)}
.buildup:has(.l1:hover) li[data-l="1"] b,
.buildup:has(.l2:hover) li[data-l="2"] b,
.buildup:has(.l3:hover) li[data-l="3"] b,
.buildup:has(.l4:hover) li[data-l="4"] b,
.buildup:has(.l5:hover) li[data-l="5"] b{color:var(--orange-deep)}
.layers li:is(:hover,:focus){background:rgba(249,109,14,.05)}

.buildup__foot{
  grid-column:1/-1;margin:0;font-size:.9rem;color:var(--steel);
  border-top:1px solid var(--rule);padding-top:1rem;max-width:80ch;
}
.buildup[data-preset="driveway"] .layers li[data-l="3"]{opacity:.42}

@media(min-width:900px){
  .buildup{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;
           gap:clamp(24px,3vw,44px);padding:clamp(24px,3vw,40px)}
  .buildup__head{grid-column:1/-1}
  .layers{align-self:center}
}
@media(min-width:1180px){
  .buildup{grid-template-columns:minmax(0,1.68fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){.layer,#d3,#t3,#n3{transition:none}}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;margin:1.5rem 0 0;padding:0;display:grid;gap:0;max-width:none}
.steps li{counter-increment:s;padding:1.15rem 0 1.15rem 3.2rem;border-top:1px solid var(--rule);position:relative;margin:0}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.15rem;font-family:var(--display);font-variation-settings:"wdth" 120;font-weight:700;font-size:.95rem;color:var(--orange-deep)}
.steps h3{font-size:1.05rem;margin-bottom:.2rem}
.steps p{margin:0;font-size:.95rem;color:var(--steel)}

/* ---------- projects ---------- */
.projects{display:grid;gap:1.5rem}
@media(min-width:700px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.projects{grid-template-columns:repeat(3,1fr)}}
.projects[data-expanded="false"] .project--extra{display:none}
.projects__more{margin:2.25rem auto 0;text-align:center;max-width:none}
.projects__more button::after{content:"";display:inline-block;width:8px;height:8px;margin-left:.6rem;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:translateY(-2px) rotate(45deg)}
.projects__more button[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.project{background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column}
.project__plate{background:var(--aggregate);aspect-ratio:4/3;display:grid;place-items:center;color:#6c6a63;font-size:.82rem;text-align:center;padding:1rem;overflow:hidden}
.project__plate--photo{padding:0;place-items:stretch;background:var(--ink)}
.project__plate--photo picture{display:block;height:100%}
.project__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.project:has(.project__plate--photo){border-color:rgba(29,33,36,.22)}
.project__body{padding:1.25rem}
.project h3{font-size:1.05rem;margin-bottom:.6rem}
.project dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.88rem}
.project dt{color:var(--steel)}
.project dd{margin:0;font-weight:500}

/* ---------- reasons ---------- */
.reasons{display:grid;gap:0;margin-top:1rem}
.reasons > div{padding:1.2rem 0;border-top:1px solid var(--rule)}
.reasons > div:last-child{border-bottom:1px solid var(--rule)}
.reasons h3{font-size:1.05rem;margin-bottom:.3rem}
.reasons p{margin:0;color:var(--steel);font-size:.95rem}
@media(min-width:760px){.reasons{grid-template-columns:repeat(2,1fr);gap:0 2.5rem}}

/* ---------- coverage ---------- */
.coverage{display:grid;gap:1.5rem}
@media(min-width:700px){.coverage{grid-template-columns:repeat(3,1fr)}}
.coverage h3{font-size:1rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule-dark)}
.coverage ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.coverage li{padding:.22rem 0}
.coverage a{text-decoration:none;color:#d5d9db}
.coverage a:hover{color:#fff;text-decoration:underline}
.section--paper .coverage h3{border-color:var(--rule)}
/* coverage dropdowns */
.regions{border-top:1px solid var(--rule-dark)}
.section--paper .regions{border-top-color:var(--rule)}
.region{border-bottom:1px solid var(--rule-dark)}
.section--paper .region{border-bottom-color:var(--rule)}
.region summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 2.2rem .95rem 0;cursor:pointer;position:relative;min-height:54px;
  font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:600;font-size:1.04rem;
  list-style:none;
}
.region summary::-webkit-details-marker{display:none}
.region summary small{font-family:var(--body);font-weight:400;font-size:.8rem;color:#a9b3b8}
.section--paper .region summary small{color:var(--steel)}
.region summary::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:2px;background:var(--orange);transform:translateY(-50%)}
.region summary::before{content:"";position:absolute;right:.9rem;top:50%;width:2px;height:12px;background:var(--orange);transform:translateY(-50%);transition:opacity .16s ease}
.region[open] summary::before{opacity:0}
.region summary:hover{color:var(--orange)}
.section--paper .region summary:hover{color:var(--orange-deep)}
.region ul{
  list-style:none;margin:0 0 1.1rem;padding:0;max-width:none;font-size:.9rem;
  columns:1;column-gap:1.5rem;
}
@media(min-width:420px){.region ul{columns:2}}
.region li{padding:.2rem 0;break-inside:avoid}
.region a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cols2{columns:1;column-gap:2rem}
@media(min-width:520px){.cols2{columns:2}}
.coverage__key{margin:1.6rem auto 0;font-size:.86rem;color:#a9b3b8;max-width:60ch;text-align:center}
.section--paper .cols2{columns:1;column-gap:2rem}
@media(min-width:520px){.cols2{columns:2}}
.coverage__key{color:var(--steel)}
@media(min-width:620px){.region ul{columns:3}}
@media(min-width:1000px){.region ul{columns:4}}
.section--paper .coverage a{color:var(--ink)}

/* ---------- reviews ---------- */
.reviews{display:grid;gap:1.25rem}
@media(min-width:820px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--paper);border:1px solid var(--rule);padding:1.3rem;font-size:.95rem;margin:0}
.review footer{margin-top:.8rem;font-size:.85rem;color:var(--steel)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{width:100%;background:none;border:0;font:inherit;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:600;font-size:1.06rem;text-align:left;padding:1.1rem 2.5rem 1.1rem 0;cursor:pointer;position:relative;color:inherit;min-height:56px}
.faq__q::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:2px;background:var(--orange);transform:translateY(-50%)}
.faq__q::before{content:"";position:absolute;right:.9rem;top:50%;width:2px;height:12px;background:var(--orange);transform:translateY(-50%);transition:opacity .16s ease}
.faq__q[aria-expanded="true"]::before{opacity:0}
.faq__a{padding:0 0 1.2rem;max-width:70ch}
.faq__a[hidden]{display:none}
.faq__a p:last-child{margin-bottom:0}
.faq h3{margin:0}

/* ---------- related / link lists ---------- */
.related{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.25rem}
@media(min-width:700px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{background:var(--paper);padding:1.1rem 1.2rem;text-decoration:none;font-weight:600;font-size:.98rem}
.related a span{display:block;font-weight:400;font-size:.88rem;color:var(--steel);margin-top:.25rem}
.related a:hover{background:#faf9f7}

/* ---------- cta band ---------- */
.ctaband{background:var(--charcoal);color:#fff;padding-block:clamp(40px,5vw,68px)}
.ctaband__inner{display:grid;gap:1.5rem;align-items:center}
.ctaband h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ctaband p{color:#d5d9db;margin:.6rem 0 0}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.75rem}
@media(min-width:860px){.ctaband__inner{grid-template-columns:1.3fr auto}}

/* ---------- blog ---------- */
.postlist{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.postlist{grid-template-columns:repeat(2,1fr)}}
.postlist a{background:var(--paper);padding:1.5rem 1.4rem;text-decoration:none;display:block}
.postlist a:hover{background:#faf9f7}
.postlist h3{font-size:1.1rem;margin-bottom:.4rem}
.postlist p{font-size:.93rem;color:var(--steel);margin:0}
.meta{font-size:.85rem;color:var(--steel);margin-bottom:1rem}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#d5d9db;padding-block:clamp(48px,6vw,72px) 0;font-size:.94rem}
.footer__grid{display:grid;gap:2rem}
@media(min-width:860px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer h3{font-size:.95rem;color:#fff;margin-bottom:.8rem;font-family:var(--body);font-weight:600}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:.2rem 0}
.footer a{text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__legal{margin-top:2.5rem;padding:1.2rem 0;border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem}

/* ---------- sticky mobile bar ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);border-top:1px solid var(--rule-dark)}
.stickybar a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:56px;text-decoration:none;color:#fff;font-weight:600;font-size:.97rem}
.stickybar a+a{background:var(--orange-deep)}
@media(min-width:1040px){.stickybar{display:none}}

/* ---------- placeholders ---------- */
.ph{background:rgba(249,109,14,.08);border:1px dashed rgba(249,109,14,.5);padding:.15rem .4rem;border-radius:2px;font-size:.92em}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .reveal--2{animation-delay:.09s}
  .reveal--3{animation-delay:.18s}
  .reveal--4{animation-delay:.27s}
  @keyframes rise{to{opacity:1;transform:none}}
}


/* ---------- paid landing pages ---------- */
.lp-head{position:static}
.lp-hero{background:var(--ink);color:#fff;padding-block:clamp(28px,4vw,52px) clamp(32px,5vw,60px);position:relative;isolation:isolate;overflow:hidden}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.55'/></svg>")}
.lp-hero__grid{display:grid;gap:clamp(24px,3vw,44px)}
.lp-hero h1{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:.9rem}
.lp-hero__lede{color:#e3e6e7;font-size:clamp(1.02rem,1.4vw,1.16rem);max-width:46ch}
.lp-ticks{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.55rem}
.lp-ticks li{position:relative;padding-left:1.8rem;color:#e3e6e7;font-size:.99rem}
.lp-ticks li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.lp-proof{margin:1.3rem 0 0;padding:.75rem .9rem;background:rgba(249,109,14,.12);border-left:3px solid var(--orange);color:#f0f2f3;font-size:.93rem;max-width:48ch}
.lp-hero__call{margin:1.2rem 0 0;color:#b9c1c6;font-size:.97rem}
.lp-hero__call a{color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange);white-space:nowrap}
@media(min-width:900px){.lp-hero__grid{grid-template-columns:1fr minmax(380px,.85fr);align-items:start}}

.lp-card{background:var(--paper);color:var(--ink);padding:clamp(18px,2.5vw,26px);border-top:3px solid var(--orange);box-shadow:0 20px 44px rgba(0,0,0,.3)}
.lp-card h2{font-size:1.35rem;margin-bottom:.35rem}
.lp-card__sub{font-size:.88rem;color:var(--steel);margin-bottom:1.1rem}
.lp-form .grid2{gap:.8rem}
.lp-form .opt{font-weight:400;color:var(--steel)}
.lp-form__submit{width:100%;margin-top:1.1rem;font-size:1.05rem;min-height:54px}
.lp-form__note{font-size:.8rem;color:var(--steel);text-align:center;margin:.7rem 0 0}

.lp-h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:1.4rem}
.lp-grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lp-grid > div{background:var(--paper);padding:1.35rem 1.3rem}
.lp-grid h3{font-size:1.06rem;margin-bottom:.35rem}
.lp-grid p{font-size:.93rem;color:var(--steel);margin:0}
@media(min-width:680px){.lp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.lp-grid{grid-template-columns:repeat(3,1fr)}}
.lp-note{margin:1.2rem 0 0;font-size:.9rem;color:var(--steel)}
.lp-split{display:grid;gap:clamp(28px,4vw,52px)}
@media(min-width:900px){.lp-split{grid-template-columns:1fr 1fr}}
.lp-final{display:grid;gap:clamp(24px,3vw,44px);align-items:start}
.lp-final h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.7rem}
.lp-final__call{font-size:.97rem;color:var(--steel)}
.lp-final__call a{font-weight:600;color:var(--ink)}
@media(min-width:900px){.lp-final{grid-template-columns:1fr minmax(360px,.85fr)}}
.lp-foot{padding-block:2rem;font-size:.9rem}
.lp-foot p{max-width:none}
.lp-foot__legal{font-size:.82rem;color:#9aa5ab;margin:0}