/* ============================================================
   KILLER CURBZ — "The Unbroken Line"
   Brand: #1E6C93. Neutrals are the same hue desaturated, so the
   whole page reads as one material: wet concrete, and concrete
   at full saturation. No cream, no beige.
   Display: Archivo · Body + logo: Lato · Spec: IBM Plex Mono
   ============================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/archivo-variable.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/lato-900.woff2) format('woff2')}

:root{
  color-scheme: light;
  /* surfaces — cool blue-grey, drawn off the brand hue */
  --ink:#FFFFFF; --slab:#F2F6F9; --slab2:#E8EFF4; --sunk:#DCE6EE;
  --line:#CBD9E3; --line-soft:#E2EAF1;
  --chalk:#0B1E29; --zinc:#47606F; --zinc-dim:#52697A;
  /* brand */
  --brand:#1E6C93; --brand-hover:#175C7F; --on-brand:#FFFFFF;
  --brand-bright:#62B4E2;          /* only over photography */
  --accent:#1E6C93;                /* rules, spine, dimension lines */
  --accent-ink:#175C7F;            /* brand as small text */
  --accent-soft:#E4EFF6;
  --on-accent:#FFFFFF;
  --deep:#0E3A50;                  /* deepest brand shade, for inverted bands */
  --danger:#C2321F;
  --shadow:0 1px 2px rgba(11,30,41,.05), 0 12px 30px -14px rgba(11,30,41,.20);
  --shadow-lg:0 2px 6px rgba(11,30,41,.07), 0 34px 60px -28px rgba(11,30,41,.32);
  --scrim:linear-gradient(180deg, rgba(7,24,34,.74) 0%, rgba(7,24,34,.34) 44%, rgba(7,24,34,.88) 100%);
  --glass:rgba(255,255,255,.84);
  --stipple:rgba(11,30,41,.26);

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:2.5rem;
  --s6:3rem; --s8:4rem; --s10:5rem; --s12:6rem; --s16:8rem;
  --pad:clamp(1.25rem, 5vw, 3rem);
  --maxw:1360px;
  --hdr:76px;
  --r:8px; --r-lg:14px;
  --ease:cubic-bezier(.2,.7,.25,1);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --ink:#0A1219; --slab:#101B24; --slab2:#16232E; --sunk:#070E14;
  --line:#22343F; --line-soft:#182530;
  --chalk:#E8F0F6; --zinc:#93A8B8; --zinc-dim:#7F94A5;
  --brand:#1E6C93; --brand-hover:#2A83AF; --on-brand:#FFFFFF;
  --brand-bright:#7CC3EC;
  --accent:#3E96C8;
  --accent-ink:#5FB0DE;
  --accent-soft:#0E2A3A;
  --on-accent:#07131B;
  --deep:#0E2A3A;
  --danger:#FF6B57;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.72);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 34px 60px -28px rgba(0,0,0,.86);
  --scrim:linear-gradient(180deg, rgba(4,12,18,.70) 0%, rgba(4,12,18,.34) 44%, rgba(4,12,18,.92) 100%);
  --glass:rgba(10,18,25,.82);
  --stipple:rgba(232,240,246,.24);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ink); color:var(--chalk);
  font-family:var(--body); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
::selection{background:var(--brand); color:#fff}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:3px}

h1,h2,h3,h4{margin:0; font-weight:700; line-height:1}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.skip{position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:var(--on-brand); padding:.75rem 1.25rem; font-weight:700; border-radius:var(--r)}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- type roles ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); flex:none}
.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.1rem, 4.6vw, 3.5rem); line-height:1.04;
  letter-spacing:-.028em;
}
.h3{font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.18; letter-spacing:-.018em}
.lede{font-size:clamp(1.0625rem,1.5vw,1.1875rem); color:var(--zinc); max-width:62ch}
.small{font-size:.9375rem; color:var(--zinc)}
.mono{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--zinc-dim)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.5rem; border:1.5px solid transparent; border-radius:var(--r);
  font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.008em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand);
  box-shadow:0 1px 2px rgba(11,30,41,.12), 0 10px 24px -12px rgba(30,108,147,.55)}
.btn-primary:hover{background:var(--brand-hover); border-color:var(--brand-hover); transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,30,41,.14), 0 16px 34px -14px rgba(30,108,147,.62)}
.btn-ghost{background:transparent; color:var(--chalk); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand); color:var(--accent-ink); transform:translateY(-2px)}
.btn-onphoto{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn-onphoto:hover{background:rgba(255,255,255,.2); border-color:#fff; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- the unbroken line: page spine ---------- */
#spine{
  position:fixed; left:max(14px, calc((100vw - var(--maxw))/2 - 64px));
  top:calc(var(--hdr) + 18px); bottom:18px; width:34px;
  z-index:40; pointer-events:none; display:none;
}
@media (min-width:1240px){ #spine{display:block} }
#spine .rail{position:absolute; left:16px; top:0; bottom:0; width:2px; background:var(--line)}
#spine .fill{position:absolute; left:16px; top:0; width:2px; background:var(--accent);
  height:0; box-shadow:0 0 16px rgba(62,150,200,.45)}
#spine .nodes{position:absolute; inset:0}
#spine a{
  position:absolute; left:-5px; width:44px; height:44px; margin-top:-22px;
  display:grid; place-items:center; pointer-events:auto; text-decoration:none;
}
#spine a i{display:block; width:9px; height:9px; background:var(--ink); border-radius:2px;
  border:2px solid var(--line); transform:rotate(45deg); transition:all .25s var(--ease)}
#spine a:hover i, #spine a.on i{background:var(--accent); border-color:var(--accent); transform:rotate(45deg) scale(1.3)}
#spine a span{
  position:absolute; left:42px; white-space:nowrap; font-family:var(--mono);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--ink); border:1px solid var(--line); border-radius:5px; padding:.3rem .55rem;
  opacity:0; transform:translateX(-6px); transition:all .25s var(--ease); pointer-events:none;
  box-shadow:var(--shadow);
}
#spine a:hover span, #spine a:focus-visible span{opacity:1; transform:translateX(0)}
#topbar{position:fixed; left:0; top:0; height:3px; background:var(--accent); width:0; z-index:90}
@media (min-width:1240px){ #topbar{display:none} }

/* ---------- header ---------- */
header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hdr);
  display:flex; align-items:center;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.bar{background:var(--glass); border-bottom-color:var(--line);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%)}
header .wrap{display:flex; align-items:center; gap:var(--s3); width:100%}

/* logo — Lato, matching the existing Killer Curbz wordmark */
.logo{display:flex; align-items:center; gap:.7rem; width:fit-content;
  text-decoration:none; margin-right:auto; flex:none}
.logo .mark{width:44px; height:44px; border-radius:50%; flex:none; object-fit:cover;
  border:1.5px solid var(--line); background:#0F1518}
header.over .logo .mark{border-color:rgba(255,255,255,.34)}
.logo .lock{display:flex; flex-direction:column; gap:2px; min-width:0}
.logo .wm{
  font-family:var(--body); font-weight:900; font-size:1.25rem; line-height:1.05;
  letter-spacing:-.022em; text-transform:uppercase; color:var(--chalk);
  display:flex; align-items:baseline; gap:.4rem; white-space:nowrap;
}
.logo .wm em{font-family:var(--mono); font-style:normal; font-weight:500;
  font-size:.5625rem; letter-spacing:.18em; color:var(--zinc-dim); transform:translateY(-1px)}
.logo .tag{font-family:var(--mono); font-size:.5625rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-ink); white-space:nowrap}
header.over .logo .tag{color:var(--brand-bright)}
.logo .rule{height:3px; width:100%; background:var(--brand); border-radius:2px}
@media (max-width:420px){ .logo .tag{display:none} .logo .wm{font-size:1.0625rem} }
/* small phones: the logo + two 44px controls need more room than 320px gives,
   so the lockup shrinks rather than the touch targets */
@media (max-width:400px){
  header .wrap{gap:.75rem}
  .logo{gap:.45rem}
  .logo .mark{width:36px; height:36px}
  .logo .wm{font-size:.875rem; gap:.3rem}
  .logo .wm em{font-size:.5rem; letter-spacing:.12em}
  .hdr-actions{gap:.375rem}
}
header.over .logo .wm{color:#fff}
header.over .logo .wm em{color:rgba(255,255,255,.74)}
header.over .logo .rule{background:var(--brand-bright)}
header.over .navlink{color:rgba(255,255,255,.9)}
header.over .iconbtn{color:#fff; border-color:rgba(255,255,255,.34)}
header.over .iconbtn:hover{border-color:#fff}

nav.main{display:none; gap:.15rem}
@media (min-width:1200px){ nav.main{display:flex} }
.navlink{
  font-family:var(--display); font-size:.875rem; font-weight:500; letter-spacing:-.005em;
  color:var(--zinc); text-decoration:none;
  padding:.8rem .75rem; border-radius:var(--r); transition:color .2s, background-color .2s;
}
.navlink:hover{color:var(--accent-ink); background:var(--slab)}
header.over .navlink:hover{background:rgba(255,255,255,.14); color:#fff}
.hdr-actions{display:flex; align-items:center; gap:.5rem; flex:none}
.iconbtn{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  color:var(--chalk); transition:border-color .2s, color .2s, background-color .2s;
}
.iconbtn:hover{border-color:var(--brand); color:var(--accent-ink)}
.iconbtn svg{width:19px; height:19px}
.sun{display:none} html[data-theme="dark"] .sun{display:block}
html[data-theme="dark"] .moon{display:none}
.hdr-call{display:none}
@media (min-width:640px){ .hdr-call{display:inline-flex; min-height:44px; font-size:.9375rem; padding:0 1.05rem} }

/* mobile drawer */
#drawer{
  position:fixed; inset:0; z-index:110; background:var(--ink);
  padding:var(--s3) var(--pad) var(--s6); overflow-y:auto;
  transform:translateY(-100%); transition:transform .38s var(--ease);
}
#drawer.open{transform:translateY(0)}
#drawer .top{display:flex; align-items:center; justify-content:space-between; height:calc(var(--hdr) - 24px); margin-bottom:var(--s4)}
#drawer a.dl{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--display); font-size:1.5rem; font-weight:600; letter-spacing:-.022em;
  text-decoration:none; color:var(--chalk); padding:.75rem 0; border-bottom:1px solid var(--line-soft);
}
#drawer a.dl b{font-family:var(--mono); font-size:.625rem; font-weight:500; color:var(--zinc-dim); letter-spacing:.12em}
#drawer a.dl:hover{color:var(--accent-ink)}
@media (min-width:1200px){ .burger{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(100svh, 900px); display:flex; align-items:flex-end;
  padding-top:calc(var(--hdr) + var(--s6)); padding-bottom:var(--s6); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.hero-bg::after{content:""; position:absolute; inset:0; background:var(--scrim)}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-inner{max-width:min(1000px, 62vw)}
.hero .eyebrow{color:#A9D6EF}
.hero .eyebrow::before{background:var(--brand-bright)}
h1{margin:var(--s3) 0 0; color:#fff}
h1 .poster{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2.9rem, 8vw, 7.6rem); line-height:.96;
  letter-spacing:-.038em;
  text-shadow:0 4px 44px rgba(0,0,0,.4);
}
h1 .poster .amb{color:var(--brand-bright)}
h1 .sub{
  display:block; margin-top:var(--s3); max-width:44ch;
  font-family:var(--body); font-weight:400; font-size:clamp(1.0625rem,1.7vw,1.25rem);
  line-height:1.55; letter-spacing:0; color:rgba(255,255,255,.93);
}
.hero-line{display:block; width:100%; height:26px; margin:var(--s3) 0 0; overflow:visible}
.hero-line path{fill:none; stroke:var(--brand-bright); stroke-width:4; stroke-linecap:round}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--s4)}
.hero-trust{
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin-top:var(--s5);
  padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.24);
}
.hero-trust li{display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.92);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase}
.hero-trust svg{width:15px; height:15px; color:var(--brand-bright); flex:none}
.stars{display:inline-flex; gap:1px; color:#FFC24D}
.stars svg{width:14px; height:14px}

/* ---------- section frame ---------- */
section{position:relative}
.sec{padding-block:clamp(3.25rem, 5.2vw, 5.5rem)}
.sec.tint{background:var(--slab)}
.sec.sunk{background:var(--sunk)}
.sec-head{display:grid; gap:var(--s3); margin-bottom:clamp(2rem, 3.4vw, 3.25rem); max-width:70ch}
.sec-head.wide{max-width:none}
@media (min-width:1080px){
  .wrap > .sec-head{max-width:none; column-gap:clamp(2rem,4vw,4.5rem); align-items:end;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); row-gap:var(--s3)}
  .wrap > .sec-head > .eyebrow{grid-column:1 / -1}
  .wrap > .sec-head > .h2{grid-column:1; margin:0}
  .wrap > .sec-head > .lede{grid-column:2; max-width:48ch; padding-bottom:.35rem}
  .wrap > .sec-head:not(:has(.lede)) > .h2{grid-column:1 / -1}
}
.split{display:grid; gap:var(--s5)}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr; gap:clamp(2.5rem,4vw,4.5rem); align-items:center} }
.rule-h{height:1px; background:var(--line); border:0; margin:0}

/*----*/

/* ---------- spec bar ---------- */
.specbar{background:var(--deep); color:#EAF3F9}
.specbar .wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; padding-block:0}
@media (min-width:760px){ .specbar .wrap{grid-template-columns:repeat(4,1fr)} }
.spec{padding:var(--s5) var(--s2) var(--s5) 0; position:relative}
.spec + .spec::before{content:""; position:absolute; left:-.75rem; top:22%; bottom:22%; width:1px;
  background:rgba(234,243,249,.18)}
.spec b{display:block; font-family:var(--display); font-weight:700; font-size:clamp(2rem,4vw,2.9rem);
  line-height:1; letter-spacing:-.035em}
.spec b sup{font-size:.42em; vertical-align:super; letter-spacing:0; margin-left:.1em}
.spec span{display:block; margin-top:.6rem; font-family:var(--mono); font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(234,243,249,.68); line-height:1.6}
.spec .amb{color:#7CC3EC}

/* ---------- profile shop drawing ---------- */
.prof-grid{display:grid; gap:var(--s5)}
@media (min-width:980px){ .prof-grid{grid-template-columns:300px 1fr; gap:clamp(2.5rem,3.5vw,4rem); align-items:start} }
.prof-tabs{display:flex; flex-direction:column; gap:2px}
@media (max-width:979px){ .prof-tabs{flex-direction:row; overflow-x:auto; gap:.5rem; padding-bottom:.5rem; scrollbar-width:thin} }
.ptab{
  display:flex; align-items:baseline; gap:.75rem; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-left:3px solid var(--line-soft);
  padding:1rem 1rem 1rem 1.1rem; transition:all .22s var(--ease); border-radius:0 var(--r) var(--r) 0;
}
@media (max-width:979px){ .ptab{width:auto; flex:none; border-left:0; border-bottom:3px solid var(--line-soft); padding:.75rem 1rem; white-space:nowrap; border-radius:var(--r) var(--r) 0 0} }
.ptab .n{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; color:var(--zinc-dim); flex:none}
.ptab .t{font-family:var(--display); font-size:1.0625rem; font-weight:600; letter-spacing:-.015em; line-height:1.2; color:var(--zinc)}
.ptab:hover{background:var(--slab2)} .sec.tint .ptab:hover{background:var(--sunk)}
.ptab[aria-selected="true"]{border-color:var(--brand); background:var(--accent-soft)}
.ptab[aria-selected="true"] .t{color:var(--chalk)}
.ptab[aria-selected="true"] .n{color:var(--accent-ink)}

.draw{background:var(--slab2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.sec.tint .draw{background:var(--ink)}
.draw-top{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--line); font-family:var(--mono);
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--zinc-dim)}
.draw-top .tag{color:var(--accent-ink)}
.draw svg.cad{display:block; width:100%; height:auto; max-height:clamp(260px,30vh,390px); background:
  repeating-linear-gradient(0deg, transparent 0 31px, var(--line-soft) 31px 32px),
  repeating-linear-gradient(90deg, transparent 0 31px, var(--line-soft) 31px 32px)}
.cad .fillc{fill:var(--slab); stroke:var(--chalk); stroke-width:2.5; stroke-linejoin:round}
html[data-theme="dark"] .cad .fillc{fill:#1E2F3B}
.cad .dim{stroke:var(--accent); stroke-width:1.5; fill:none}
.cad .dimtxt{fill:var(--accent-ink); font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:.04em}
.cad .gnd{stroke:var(--zinc-dim); stroke-width:1.5}
.cad .hatch{stroke:var(--zinc-dim); stroke-width:1; opacity:.55}
.cad .agg{fill:var(--stipple)}
.cad .cable{fill:var(--accent); stroke:var(--chalk); stroke-width:1.5}
.cad .lbl{fill:var(--zinc); font-family:var(--mono); font-size:13px; letter-spacing:.06em}
.cad .lead{stroke:var(--zinc-dim); stroke-width:1; stroke-dasharray:3 3}
.arrowhead{fill:var(--accent)}
.draw-body{padding:var(--s4) var(--s4) var(--s5); border-top:1px solid var(--line)}
.draw-body h3{margin-bottom:.75rem}
.bul{display:grid; gap:.75rem; margin-top:var(--s3)}
.bul li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  font-size:.9375rem; line-height:1.55; color:var(--zinc)}
.bul li b{color:var(--chalk); font-weight:700}
.bul svg{width:16px; height:16px; margin-top:.28rem; color:var(--accent); flex:none}
.panel[hidden]{display:none}

/* ---------- pattern library ---------- */
.pat-head{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-end; justify-content:space-between; margin-bottom:clamp(2rem,3.4vw,3.25rem)}
.lvl-filter{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.6rem 1rem; border:1px solid var(--line); border-radius:100px; background:transparent;
  color:var(--zinc); cursor:pointer; transition:all .2s var(--ease); min-height:44px;
}
.chip:hover{border-color:var(--brand); color:var(--accent-ink)}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:500}
.pat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:var(--s2)}
.pat{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--slab2); cursor:pointer; padding:0; text-align:left; display:block; width:100%;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pat:hover{transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow)}
.pat img{aspect-ratio:1/1; object-fit:cover; width:100%; transition:transform .5s var(--ease)}
.pat:hover img{transform:scale(1.05)}
.pat figcaption{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.85rem 1rem}
.pat .nm{font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.015em; line-height:1.2}
.pat .lv{font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em; color:var(--zinc);
  border:1px solid var(--line); border-radius:100px; padding:.2rem .45rem; flex:none}
.pat[data-hide="1"]{display:none}

/* lightbox */
#lb{position:fixed; inset:0; z-index:130; background:rgba(4,12,18,.94); display:none;
  place-items:center; padding:var(--pad); backdrop-filter:blur(6px)}
#lb.open{display:grid}
#lb figure{margin:0; max-width:760px; width:100%}
#lb img{width:100%; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.16)}
#lb figcaption{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:var(--s2); color:#fff; font-family:var(--display); font-size:1.375rem;
  font-weight:600; letter-spacing:-.02em}
#lb figcaption b{font-family:var(--mono); font-size:.6875rem; font-weight:400;
  letter-spacing:.14em; color:rgba(255,255,255,.62)}
#lb .x{position:absolute; top:var(--pad); right:var(--pad); width:46px; height:46px;
  border:1px solid rgba(255,255,255,.32); background:transparent; color:#fff; border-radius:var(--r); cursor:pointer}
#lb .x:hover{border-color:#fff}

/* ---------- process ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:720px){ .steps{grid-template-columns:repeat(5,1fr)} }
.step{background:var(--ink); padding:var(--s4) var(--s3) var(--s5); position:relative}
.sec.tint .step{background:var(--slab)}
.step .num{font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); display:block; margin-bottom:var(--s3)}
.step h3{font-size:1.0625rem; margin-bottom:.6rem}
.step p{font-size:.9375rem; color:var(--zinc); line-height:1.55}
.step::after{content:""; position:absolute; left:var(--s3); bottom:0; height:3px; width:0;
  background:var(--brand); transition:width .7s var(--ease)}
.step.lit::after{width:calc(100% - var(--s3)*2)}

/* ---------- work gallery ---------- */
.work{display:grid; gap:var(--s2); grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){ .work{grid-template-columns:repeat(4,1fr)} }
.work figure{margin:0; position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--slab2)}
.work figure.tall{grid-row:span 2}
.work img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; transition:transform .6s var(--ease)}
.work figure.tall img{aspect-ratio:3/4}
.work figure:hover img{transform:scale(1.06)}
.work figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .85rem;
  background:linear-gradient(180deg, transparent, rgba(4,12,18,.88));
  color:#fff; font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase}

/* ---------- before / after ---------- */
.ba-hero{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--slab2)}
.sec.tint .ba-hero{background:var(--ink)}
.ba-grid{display:grid; gap:var(--s5); margin-top:var(--s5)}
@media (min-width:900px){ .ba-grid{grid-template-columns:1fr 1fr; gap:var(--s6)} }
.ba{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--slab2); touch-action:pan-y; user-select:none; cursor:ew-resize}
.ba-hero .ba{border:0; border-radius:0}
.ba .layer{position:relative; aspect-ratio:3/2}
.ba-hero .ba .layer{aspect-ratio:5/3}
.ba .layer img,.ba .layer svg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ba .after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--sp, 50%))}
.ba .tagL,.ba .tagR{position:absolute; top:.85rem; padding:.4rem .7rem; border-radius:100px;
  background:rgba(4,12,18,.88); color:#fff; font-family:var(--mono); font-size:.5625rem;
  letter-spacing:.14em; text-transform:uppercase; pointer-events:none; z-index:3}
.ba .tagL{left:.85rem} .ba .tagR{right:.85rem; background:var(--brand); color:#fff}
.ba .handle{position:absolute; top:0; bottom:0; left:var(--sp, 50%); width:3px; z-index:4;
  background:#fff; transform:translateX(-1.5px); pointer-events:none; box-shadow:0 0 12px rgba(4,12,18,.5)}
.ba .handle::after{content:""; position:absolute; top:50%; left:50%; width:46px; height:46px;
  margin:-23px 0 0 -23px; border-radius:50%; background:var(--brand); border:2px solid #fff;
  box-shadow:0 6px 20px rgba(4,12,18,.45)}
.ba .handle::before{content:""; position:absolute; top:50%; left:50%; width:16px; height:10px;
  margin:-5px 0 0 -8px; z-index:2; background:#fff;
  clip-path:polygon(0 50%,5px 0,5px 3px,11px 3px,11px 0,16px 50%,11px 100%,11px 7px,5px 7px,5px 100%)}
.ba input[type=range]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5}
.ba-cap{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:var(--s2)}
.ba-cap b{font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.015em}
.ba-cap span{font-family:var(--mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--zinc-dim)}
.ba-foot{display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-top:1px solid var(--line); font-family:var(--mono);
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--zinc-dim)}
.ba-foot .hint{display:flex; align-items:center; gap:.5rem; color:var(--accent-ink)}
.ba-foot svg{width:14px; height:14px}

/* ---------- reviews ---------- */
.rev-grid{display:grid; gap:var(--s2)}
@media (min-width:760px){ .rev-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .rev-grid{grid-template-columns:repeat(4,1fr)} }
.rev{background:var(--slab2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4) var(--s3); display:flex; flex-direction:column; gap:var(--s3)}
.sec.tint .rev{background:var(--ink)}
.rev p{font-size:.9375rem; line-height:1.6; color:var(--zinc); flex:1}
.rev .who{display:flex; align-items:center; gap:.65rem; padding-top:var(--s2); border-top:1px solid var(--line-soft)}
.rev .av{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:.9375rem; flex:none}
.rev .who b{display:block; font-size:.875rem; line-height:1.2}
.rev .who span span{font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zinc-dim)}

/* ---------- service area ---------- */
.towns{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--s4)}
.town{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem;
  border:1px solid var(--line); border-radius:100px; font-size:.875rem; color:var(--chalk); background:var(--ink)}
.sec.tint .town{background:var(--slab2)}
.town svg{width:13px; height:13px; color:var(--accent); flex:none}
.counties{display:grid; gap:var(--s2); margin-top:var(--s5)}
@media (min-width:680px){ .counties{grid-template-columns:repeat(3,1fr)} }
.county{border-left:3px solid var(--brand); padding:.4rem 0 .4rem 1rem}
.county b{display:block; font-family:var(--display); font-size:1.0625rem; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.county span{font-size:.875rem; color:var(--zinc)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:flex-start; gap:var(--s3); padding:1.5rem 0; cursor:pointer;
  list-style:none; font-family:var(--display); font-weight:600; letter-spacing:-.018em;
  font-size:clamp(1.0625rem,1.7vw,1.25rem); line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq .ic{flex:none; width:22px; height:22px; margin-top:.16rem; position:relative}
.faq .ic::before,.faq .ic::after{content:""; position:absolute; background:var(--accent); transition:transform .3s var(--ease)}
.faq .ic::before{left:0; top:10px; width:22px; height:2px}
.faq .ic::after{left:10px; top:0; width:2px; height:22px}
.faq details[open] .ic::after{transform:scaleY(0)}
.faq .ans{padding:0 0 1.6rem 46px; max-width:78ch; color:var(--zinc); font-size:1rem; line-height:1.7}

/* ---------- estimate form ---------- */
.est{display:grid; gap:var(--s6)}
@media (min-width:960px){ .est{grid-template-columns:1fr 1.15fr; gap:var(--s8); align-items:start} }
.form{background:var(--slab2); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4)}
.sec.tint .form{background:var(--ink)}
.fgrid{display:grid; gap:var(--s3)}
@media (min-width:560px){ .fgrid.two{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:.45rem}
.field label{font-family:var(--mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--zinc)}
.field label .req{color:var(--accent-ink)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--chalk); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r); padding:.85rem .9rem; width:100%;
  min-height:50px; transition:border-color .2s, box-shadow .2s; color-scheme:light;
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea{color-scheme:dark}
.sec.tint .field input,.sec.tint .field select,.sec.tint .field textarea{background:var(--slab)}
.field select option{background:var(--ink); color:var(--chalk)}
.field textarea{min-height:120px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent)}
.field .hint{font-size:.8125rem; color:var(--zinc-dim)}
.field .err{font-size:.8125rem; color:var(--danger); font-weight:700; display:none}
.field.bad input,.field.bad select{border-color:var(--danger)}
.field.bad .err{display:block}
.form .btn{width:100%; margin-top:var(--s2)}
.formnote{margin-top:var(--s3); font-size:.8125rem; color:var(--zinc-dim); text-align:center}
#formok{display:none; text-align:center; padding:var(--s6) var(--s2)}
#formok.show{display:block}
#formok .tick{width:56px; height:56px; margin:0 auto var(--s3); border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center}
#formok .tick svg{width:28px; height:28px}

.contact-list{display:grid; gap:var(--s2); margin-top:var(--s5)}
.cline{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line-soft); text-decoration:none}
.cline .ci{width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center; color:var(--accent-ink); flex:none; transition:all .2s var(--ease)}
.cline:hover .ci{background:var(--brand); border-color:var(--brand); color:#fff}
.cline svg{width:18px; height:18px}
.cline > span:last-child{min-width:0}
.cline .cv{display:block; font-family:var(--display); font-size:1.25rem; font-weight:600; line-height:1.25; letter-spacing:-.022em; overflow-wrap:anywhere}
@media (max-width:400px){ .cline .cv{font-size:1.0625rem} }
.cline .ck{display:block; font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--zinc-dim); margin-bottom:.15rem}

/* ---------- reseal ---------- */
.reseal-card{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--slab2)}
.sec.tint .reseal-card{background:var(--ink)}
.reseal-card img{width:100%; aspect-ratio:1/1; object-fit:cover}
.reseal-card .cap{padding:var(--s3); font-family:var(--mono); font-size:.625rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--zinc); border-top:1px solid var(--line)}

/* ---------- footer ---------- */
footer{background:var(--slab); border-top:1px solid var(--line); padding-block:var(--s8) var(--s5)}
.foot-grid{display:grid; gap:var(--s5)}
@media (min-width:820px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr; gap:var(--s6)} }
.foot h4{font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zinc-dim); font-weight:500; margin-bottom:var(--s3)}
.foot ul{display:grid; gap:.75rem}
.foot a{color:var(--zinc); text-decoration:none; font-size:.9375rem; display:inline-block; padding-block:4px}
.foot a:hover{color:var(--accent-ink)}
.foot-bot{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  align-items:center; margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--line)}
.foot-bot p{font-family:var(--mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--zinc-dim)}
.social{display:flex; gap:.5rem}
.social a{width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center; color:var(--zinc); transition:all .2s var(--ease)}
.social a:hover{border-color:var(--brand); color:var(--accent-ink)}
.social svg{width:17px; height:17px}

/* sticky mobile call bar */
#callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .35s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
#callbar.up{transform:translateY(0)}
#callbar a{flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:58px; text-decoration:none; font-family:var(--display); font-size:1rem;
  font-weight:600; letter-spacing:-.01em; background:var(--ink); color:var(--chalk)}
#callbar a.pri{background:var(--brand); color:#fff}
#callbar svg{width:18px; height:18px}
@media (min-width:980px){ #callbar{display:none} }
@media (max-width:979px){ body.hasbar{padding-bottom:58px} }

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.06s} .rv.d2{transition-delay:.12s} .rv.d3{transition-delay:.18s}
.rv.d4{transition-delay:.24s} .rv.d5{transition-delay:.30s}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  #spine .fill{transition:none}
}

/*----*/

/* ---------- before / after illustration ---------- */
.scene{display:block}
.sc-lawn{fill:#E9F1F7}
.sc-wall{fill:#D2E0EA}
.sc-ln{stroke:#B2C8D8; stroke-width:1.2; fill:none}
.sc-ln2{fill:#A8C0D2}
.sc-trim{fill:#9FBACD}
.sc-shadow{fill:rgba(11,30,41,.12)}
.sc-shadow2{fill:rgba(11,30,41,.13)}
.sc-mulch{fill:#A7BFD1}
.sc-chip{stroke:#7995AC; stroke-width:1.6; stroke-linecap:round; fill:none}
.sc-blade{stroke:#B7CCDA; stroke-width:1.4; stroke-linecap:round; fill:none}
.sc-shrub{fill:#6B92AC}
.sc-stem{stroke:#4C7288; stroke-width:2.5; stroke-linecap:round; fill:none}
.sc-spill{fill:#B6CAD9}
.sc-bare{fill:#D6E3EC}
.sc-edge-bad{stroke:#7793A7; stroke-width:2; fill:none; stroke-linejoin:round}
.sc-curb{fill:var(--brand)}
.sc-curb-top{stroke:#5FAED6; stroke-width:3; fill:none}
.sc-curb-shadow{fill:rgba(11,30,41,.16)}
.sc-joint{stroke:rgba(255,255,255,.42); stroke-width:2; fill:none}
.sc-mow{stroke:rgba(30,108,147,.3); stroke-width:2; stroke-dasharray:9 9; fill:none}
.sc-lead{stroke:var(--accent-ink); stroke-width:1.5; fill:none}
.sc-dot{fill:var(--accent-ink)}
.sc-txt{
  fill:var(--chalk); font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:.02em;
  paint-order:stroke; stroke:var(--ink); stroke-width:5px; stroke-linejoin:round;
}
html[data-theme="dark"] .sc-lawn{fill:#0D1821}
html[data-theme="dark"] .sc-wall{fill:#1B2C39}
html[data-theme="dark"] .sc-ln{stroke:#2C4454}
html[data-theme="dark"] .sc-ln2{fill:#33505F}
html[data-theme="dark"] .sc-trim{fill:#33505F}
html[data-theme="dark"] .sc-shadow{fill:rgba(0,0,0,.42)}
html[data-theme="dark"] .sc-shadow2{fill:rgba(0,0,0,.46)}
html[data-theme="dark"] .sc-mulch{fill:#263B4C}
html[data-theme="dark"] .sc-chip{stroke:#46697F}
html[data-theme="dark"] .sc-blade{stroke:#27414F}
html[data-theme="dark"] .sc-shrub{fill:#3A5E77}
html[data-theme="dark"] .sc-stem{stroke:#5A8099}
html[data-theme="dark"] .sc-spill{fill:#2B4356}
html[data-theme="dark"] .sc-bare{fill:#13212C}
html[data-theme="dark"] .sc-edge-bad{stroke:#527388}
html[data-theme="dark"] .sc-curb-top{stroke:#7CC3EC}
html[data-theme="dark"] .sc-curb-shadow{fill:rgba(0,0,0,.42)}
html[data-theme="dark"] .sc-mow{stroke:rgba(124,195,236,.34)}

/*----*/

/* ---------- about badges ---------- */
.badges{display:grid; gap:.9rem; margin-top:2rem}
.badge{display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:center}
.badge svg{width:22px; height:22px; color:var(--accent); flex:none}
.badge b{display:block; font-size:.9375rem; line-height:1.35}
.badge span{font-size:.875rem; color:var(--zinc); line-height:1.45}
.discount{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  margin-top:2rem; padding:1.1rem 1.25rem; border-radius:var(--r-lg);
  background:var(--accent-soft); border:1px solid var(--brand);
}
.discount svg{width:22px; height:22px; color:var(--accent-ink); margin-top:.15rem; flex:none}
.discount p{font-size:.9375rem; line-height:1.55; color:var(--zinc)}
.discount b{color:var(--chalk)}

/* ---------- color wall ---------- */
.sw-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(156px,1fr)); gap:.85rem; list-style:none}
.sw{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--slab2)}
.sec.tint .sw{background:var(--ink)}
.sw .chipc{display:block; height:96px; border-bottom:1px solid var(--line)}
.sw .meta{display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem;
  padding:.7rem .8rem .75rem; min-height:58px}
.sw .swn{font-family:var(--display); font-size:.9375rem; font-weight:600; letter-spacing:-.015em; line-height:1.25}
.sw .swc{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; color:var(--zinc-dim);
  flex:none; padding-top:.15rem}
.sw .swnote{display:block; font-family:var(--mono); font-size:.5625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zinc-dim); margin-top:.2rem}
.sw[data-hide="1"]{display:none}

/*----*/

/* the profile tab rail was leaving a tall void under four short tabs */
.prof-note{display:none}
@media (min-width:980px){
  .prof-note{display:block; margin-top:var(--s4); padding-top:var(--s4);
    border-top:1px solid var(--line)}
  .prof-note .bul li{font-size:.875rem; line-height:1.45}
  .prof-note .small{font-size:.875rem; line-height:1.55}
}

/*----*/

/* ================= multi-page shell ================= */
/* hidden must beat any author display rule (drawer, panels, form states) */
[hidden]{display:none !important}
/* overflow lives on html only - overflow on body would stop sticky rails working */
html{overflow-x:clip}
body{overflow-x:visible}
html.is-locked{overflow:hidden}
main{display:block}
/* grid children must be allowed to shrink below their content width */
.split > *, .est > *, .prof-grid > *, .ba-grid > *, .foot-grid > *, .ip-grid > *, .ip-2 > *, .ip-3 > *{min-width:0}

/* desktop nav: 7 page links + CTA need more room than the old anchor nav */
.foot-h{font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zinc-dim); font-weight:500; margin-bottom:var(--s3); line-height:1.4}
.navlink[aria-current="page"]{color:var(--accent-ink); background:var(--accent-soft)}
header.over .navlink[aria-current="page"]{color:#fff; background:rgba(255,255,255,.16)}
.hdr-phone{display:none}
@media (min-width:640px){ .hdr-phone{display:grid} }
.hdr-est{display:none}
@media (min-width:640px){ .hdr-est{display:inline-flex; min-height:44px; font-size:.9375rem; padding:0 1.05rem} }
.hdr-phone .num{display:none}
@media (min-width:1500px){
  .hdr-phone{width:auto; padding:0 .9rem; gap:.5rem; grid-auto-flow:column; font-family:var(--display); font-weight:600; font-size:.9375rem}
  .hdr-phone .num{display:inline}
}
#drawer a.dl[aria-current="page"]{color:var(--accent-ink)}
#drawer .dl-group{font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zinc-dim); margin:var(--s4) 0 .25rem}

/* ================= page hero ================= */
.hero.page{min-height:clamp(440px, 58vh, 600px); padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero.page h1{margin-top:var(--s2)}
.hero.page h1 .poster{font-size:clamp(2.5rem, 5.6vw, 5rem); line-height:1.0}
.hero.page h1 .sub{max-width:52ch}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .55rem; margin:0; padding:0; list-style:none;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase}
.crumbs li{display:flex; align-items:center; gap:.55rem; color:rgba(255,255,255,.78)}
.crumbs li + li::before{content:""; width:5px; height:5px; border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.7}
.crumbs a{color:#fff; text-decoration:none; padding:.35rem 0; border-bottom:1px solid rgba(255,255,255,.4)}
.crumbs a:hover{border-color:#fff}
.crumbs [aria-current="page"]{color:#A9D6EF}

/* ================= shared inner-page components ================= */
.more{display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--s4); font-family:var(--display);
  font-weight:600; font-size:1rem; color:var(--accent-ink); text-decoration:none; min-height:44px;
  border-bottom:1.5px solid transparent}
.more:hover{border-color:currentColor}
.more svg{width:17px; height:17px; transition:transform .2s var(--ease)}
.more:hover svg{transform:translateX(3px)}

.ip-2{display:grid; gap:var(--s4)}
@media (min-width:900px){ .ip-2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)} }
.ip-3{display:grid; gap:var(--s3)}
@media (min-width:760px){ .ip-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .ip-3{grid-template-columns:repeat(3,minmax(0,1fr))} }

.card{background:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4)}
.sec.tint .card{background:var(--ink)}
.sec:not(.tint) .card{background:var(--slab)}
.card .h3{margin-bottom:.6rem}
.card p{color:var(--zinc); font-size:.9688rem; line-height:1.6}
.card .kicker{font-family:var(--mono); font-size:.625rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent-ink); display:block; margin-bottom:var(--s2)}

.cta-band{background:var(--deep); color:#EAF3F9; border-radius:var(--r-lg); padding:clamp(1.75rem,4vw,3rem);
  display:grid; gap:var(--s3); align-items:center}
@media (min-width:900px){ .cta-band{grid-template-columns:minmax(0,1.3fr) auto} }
.cta-band .h2{color:#fff; font-size:clamp(1.75rem,3.2vw,2.5rem)}
.cta-band p{color:rgba(234,243,249,.82); margin-top:.6rem; max-width:56ch}
.cta-band .acts{display:flex; flex-wrap:wrap; gap:.75rem}
.cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.4)}
.cta-band .btn-ghost:hover{color:#fff; border-color:#fff}

/* comparison table */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; min-width:680px; font-size:.9375rem}
.tbl caption{text-align:left; padding:1rem 1.1rem; font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--zinc-dim); border-bottom:1px solid var(--line); caption-side:top}
.tbl th,.tbl td{padding:.95rem 1.1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft)}
.tbl thead th{font-family:var(--mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--zinc); font-weight:500; background:var(--slab2)}
.tbl tbody th{font-family:var(--display); font-weight:600; letter-spacing:-.015em; white-space:nowrap}
.tbl td{color:var(--zinc)}
.tbl tbody th a{display:inline-flex; align-items:center; min-height:32px; color:var(--chalk); text-decoration-color:var(--accent); text-underline-offset:3px}
.tbl tbody th a:hover{color:var(--accent-ink)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.sec.tint .tbl-wrap{background:var(--ink)}

/* profiles page: all four drawings at once */
.prof-all{display:grid; gap:var(--s4)}
@media (min-width:1000px){ .prof-all{grid-template-columns:repeat(2,minmax(0,1fr))} }
.prof-all .draw svg.cad{max-height:300px}
.prof-all .draw-body{padding:var(--s3) var(--s3) var(--s4)}

/* pattern detail cards */
.pdetail{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pcard{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--slab2);
  display:flex; flex-direction:column}
.sec.tint .pcard{background:var(--ink)}
.pcard .zoom{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; position:relative}
.pcard .zoom img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .5s var(--ease)}
.pcard .zoom:hover img{transform:scale(1.04)}
.pcard .body{padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.pcard .top{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem}
.pcard .nm{font-family:var(--display); font-weight:600; font-size:1.125rem; letter-spacing:-.018em}
.pcard .lv{font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em; color:var(--zinc);
  border:1px solid var(--line); border-radius:100px; padding:.2rem .5rem; flex:none}
.pcard p{font-size:.9063rem; color:var(--zinc); line-height:1.55; flex:1}
.pcard .go{align-self:flex-start; font-size:.9063rem; margin-top:.25rem}
.pcard[data-hide="1"]{display:none}

/* colors page preview */
.cprev{display:grid; gap:var(--s4); align-items:center; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem); background:var(--ink)}
@media (min-width:900px){ .cprev{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.cprev > svg{width:100%; height:auto; display:block}
.cprev .chip-name{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.03em; line-height:1.05}
.cprev .chip-code{font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--zinc-dim); margin-top:.35rem}
.cprev .swatch-big{height:14px; border-radius:100px; margin:1rem 0 1.1rem; border:1px solid var(--line)}
.sw.pick{cursor:pointer; padding:0; text-align:left; font:inherit; color:inherit; width:100%; display:block}
.sw.pick:hover{border-color:var(--brand)}
.sw.pick[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand)}
.pair{display:grid; gap:.65rem; margin-top:var(--s2)}
.pair li{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; font-size:.875rem; color:var(--zinc)}
.dot{display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:none; vertical-align:-2px}

/* side-rail layout for long reference pages (FAQ, warranty) */
.rail-layout{display:grid; gap:var(--s5)}
@media (min-width:1000px){ .rail-layout{grid-template-columns:260px minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); align-items:start} }
.siderail{display:none}
@media (min-width:1000px){
  .siderail{display:block; position:sticky; top:calc(var(--hdr) + 24px)}
}
.siderail h2{font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--zinc-dim);
  font-weight:500; margin-bottom:var(--s2)}
.siderail ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
.siderail ol a{display:block; padding:.55rem 0 .55rem 1rem; margin-left:-2px; border-left:2px solid transparent;
  text-decoration:none; color:var(--zinc); font-size:.9375rem; line-height:1.35}
.siderail ol a:hover{color:var(--accent-ink)}
.siderail ol a.on{color:var(--chalk); border-left-color:var(--brand); font-weight:700}
.siderail .btn{width:100%; margin-top:var(--s4)}

.faq-group + .faq-group{margin-top:clamp(2.5rem,4vw,3.5rem)}
.faq-group > .h3{margin-bottom:var(--s2); scroll-margin-top:calc(var(--hdr) + 24px)}
.faq-search{position:relative; margin-bottom:var(--s4)}
.faq-search input{font:inherit; font-size:1rem; width:100%; min-width:0; min-height:52px; padding:.85rem 1rem .85rem 2.9rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink); color:var(--chalk); color-scheme:light}
html[data-theme="dark"] .faq-search input{color-scheme:dark}
.faq-search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent)}
.faq-search svg{position:absolute; left:1rem; top:50%; width:18px; height:18px; margin-top:-9px; color:var(--zinc-dim); pointer-events:none}
.faq-empty{padding:var(--s4); border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--zinc)}
.faq details[data-hide="1"], .faq-group[data-hide="1"]{display:none}

/* warranty timeline */
.tline{list-style:none; margin:0; padding:0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:900px){ .tline{grid-template-columns:repeat(5,minmax(0,1fr))} }
.tline li{padding:var(--s4) var(--s3); background:var(--ink); border-bottom:1px solid var(--line); position:relative}
@media (min-width:900px){ .tline li{border-bottom:0; border-right:1px solid var(--line)} .tline li:last-child{border-right:0} }
.tline .when{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; display:block}
.tline .what{font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  display:block; margin:.35rem 0 .75rem}
.tline p{font-size:.9063rem; color:var(--zinc); line-height:1.55}
.tline li::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--brand)}
.policy article{padding-block:clamp(1.75rem,3vw,2.5rem); border-top:1px solid var(--line); scroll-margin-top:calc(var(--hdr) + 16px)}
.policy article:first-child{border-top:0; padding-top:0}
.policy h2{font-family:var(--display); font-weight:700; font-size:clamp(1.35rem,2.2vw,1.75rem); letter-spacing:-.022em; line-height:1.2; margin-bottom:.8rem}
.policy p{color:var(--zinc); line-height:1.7; max-width:72ch}
.policy p + p{margin-top:.8rem}
.policy .flag{display:flex; gap:.75rem; margin-top:1rem; padding:.9rem 1rem; border-radius:var(--r);
  background:var(--accent-soft); border-left:3px solid var(--brand); color:var(--chalk); font-size:.9375rem; line-height:1.55; max-width:72ch}
.policy .flag.warn{border-left-color:var(--danger)}

/* estimate page */
.est-page{display:grid; gap:var(--s5); grid-auto-columns:minmax(0,1fr)}
@media (min-width:1040px){ .est-page{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); align-items:start} }
.est-page .aside{display:grid; gap:var(--s3); grid-auto-columns:minmax(0,1fr)}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{font-family:var(--display); font-weight:700; font-size:1.125rem; letter-spacing:-.02em; padding:0; margin-bottom:var(--s2)}
.fs + .fs{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line)}
.check{display:flex; gap:.75rem; align-items:flex-start; font-size:.9375rem; color:var(--zinc); cursor:pointer; min-height:44px; padding-top:.2rem}
.check input{width:20px; height:20px; margin:.15rem 0 0; accent-color:var(--brand); flex:none}
.radios{display:flex; flex-wrap:wrap; gap:.5rem}
.radios label{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1rem; border:1px solid var(--line);
  border-radius:100px; cursor:pointer; font-size:.9375rem; color:var(--chalk); background:var(--ink)}
.radios input{accent-color:var(--brand); width:16px; height:16px; margin:0}
.radios label:has(input:checked){border-color:var(--brand); background:var(--accent-soft)}
.radios label:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}
.nextsteps{list-style:none; margin:0; padding:0; counter-reset:ns}
.nextsteps li{position:relative; padding:0 0 1.15rem 2.6rem; color:var(--zinc); font-size:.9375rem; line-height:1.5}
.nextsteps li b{display:block; color:var(--chalk); font-size:1rem; margin-bottom:.15rem}
.nextsteps li::before{counter-increment:ns; content:counter(ns); position:absolute; left:0; top:-.05rem; width:1.8rem; height:1.8rem;
  border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:.875rem}
.nextsteps li:last-child{padding-bottom:0}

/* contact map */
.map{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--slab2)}
.map svg{display:block; width:100%; height:auto}
.map-big{margin:0}
.map-big svg{max-height:min(74vh, 780px); margin-inline:auto}
.map .m-bg{fill:var(--slab2)}
.map .m-grid{stroke:var(--line-soft); stroke-width:1; fill:none}
.map .m-ring{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-dasharray:8 8; opacity:.55}
.map .m-ring1{fill:color-mix(in srgb, var(--brand) 13%, transparent); stroke:none}
.map .m-ring2{fill:color-mix(in srgb, var(--brand) 8%, transparent); stroke:none}
.map .m-ring3{fill:color-mix(in srgb, var(--brand) 4%, transparent); stroke:none}
.map .m-dot{fill:var(--brand); stroke:var(--slab2); stroke-width:3}
.map .m-dot2{fill:none; stroke:var(--zinc); stroke-width:3}
.map .m-hq{fill:var(--ink); stroke:var(--brand); stroke-width:5}
.map .m-lbl{fill:var(--chalk); font-family:var(--mono); font-size:19px; font-weight:500; letter-spacing:.02em;
  paint-order:stroke; stroke:var(--slab2); stroke-width:6px; stroke-linejoin:round}
.map .m-lbl2{fill:var(--zinc); font-size:17px; font-weight:400}
.map .m-hqlbl{font-size:24px; font-weight:700; fill:var(--accent-ink)}
.map .m-cty{fill:var(--zinc-dim); font-family:var(--mono); font-size:14px; letter-spacing:.22em; opacity:.75}
.map .m-state{fill:var(--zinc-dim); font-family:var(--mono); font-size:15px; letter-spacing:.3em; opacity:.6}
.map .m-mi{fill:var(--accent-ink); font-family:var(--mono); font-size:15px; letter-spacing:.12em;
  paint-order:stroke; stroke:var(--slab2); stroke-width:5px; stroke-linejoin:round}
.map-legend{display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; padding:.9rem 1.15rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--zinc)}
.map-legend .lg{display:flex; align-items:center; gap:.5rem}
.map-legend .note{color:var(--zinc-dim); margin-left:auto}
.map-legend .k{width:12px; height:12px; border-radius:50%; flex:none}
.map-legend .k1{background:var(--brand)}
.map-legend .k2{border:3px solid var(--zinc)}
.town.alt{color:var(--zinc); border-style:dashed}
.town.alt svg{color:var(--zinc-dim)}
@media (max-width:860px){
  /* the map scales with its viewBox, so labels need to grow back on small screens */
  .map .m-lbl{font-size:26px; stroke-width:8px}
  .map .m-hqlbl{font-size:30px}
  .map .m-lbl2, .map .m-cty, .map .m-state, .map .m-mi{display:none}
  .map .m-key{display:block}
}
/* tablets render the map big enough to carry every town name */
@media (min-width:601px) and (max-width:860px){
  .map .m-lbl{font-size:21px}
  .map .m-hqlbl{font-size:25px}
  .map .m-lbl2, .map .m-cty{display:block}
  .map .m-dot2{stroke-width:4}
  .map-legend .note{margin-left:0; width:100%}
}

/* gallery page */
.gal{columns:1; column-gap:var(--s2)}
@media (min-width:640px){ .gal{columns:2} }
@media (min-width:1000px){ .gal{columns:3} }
.gal .gi{break-inside:avoid; margin:0 0 var(--s2); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--slab2); position:relative}
.gal .gi button{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.gal .gi img{width:100%; height:auto; transition:transform .6s var(--ease)}
.gal .gi button:hover img{transform:scale(1.04)}
.gal .gi figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .75rem; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,12,18,.86)); color:#fff; font-family:var(--mono);
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase}

/* ---- phone layouts ---- */
@media (max-width:699px){
  .tbl-wrap{overflow:visible; border:0; background:none !important}
  .tbl{min-width:0}
  .tbl caption{display:block; width:100%; padding:0 0 .75rem; border:0}
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td{display:block; width:100%}
  .tbl tbody tr{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink); padding:.35rem 1rem .6rem; margin-bottom:.75rem}
  .sec.tint .tbl tbody tr{background:var(--ink)}
  .tbl tbody th{padding:.6rem 0 .4rem; border-bottom:1px solid var(--line-soft) !important; font-size:1.0625rem}
  .tbl td{padding:.55rem 0; border-bottom:1px solid var(--line-soft) !important; display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.75rem}
  .tbl tbody tr td:last-child{border-bottom:0 !important}
  .tbl td::before{content:attr(data-label); font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--zinc-dim); padding-top:.2rem}
  .sw-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
  .sw .chipc{height:60px}
  .sw .meta{flex-direction:column; gap:.1rem; padding:.5rem .55rem .6rem; min-height:0}
  .sw .swn{font-size:.8125rem}
  .sw .swc{padding-top:0}
  .gal{columns:2; column-gap:.6rem}
  .gal .gi{margin-bottom:.6rem}
  .gal .gi figcaption{padding:1rem .55rem .5rem; font-size:.5rem; letter-spacing:.1em}
}

/* print: warranty and FAQ are pages homeowners keep */
@media print{
  header, #drawer, #spine, #topbar, #callbar, #lb, footer, .siderail, .btn, .hero-bg, .cta-band, .no-print{display:none !important}
  .hero.page{min-height:0; padding:0 0 1rem; color:#000}
  .hero.page h1, .hero.page h1 .sub, .crumbs li, .crumbs a{color:#000 !important; text-shadow:none}
  body{background:#fff; color:#000}
  .sec{padding-block:1rem}
  .policy p, .tline p, .faq .ans{color:#222}
  .rv{opacity:1 !important; transform:none !important}
  details{display:block}
  details > .ans{display:block}
}

/*----*/

/* lightbox and form-success now toggle with the hidden attribute */
#lb{display:grid}
#formok,.formok{display:block; text-align:center; padding:var(--s6) var(--s2)}
.formok .tick{width:56px; height:56px; margin:0 auto var(--s3); border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center}
.formok .tick svg{width:28px; height:28px}
/* the range input is invisible, so show its keyboard focus on the slider frame */
.ba:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:3px}
.prefill{margin-bottom:var(--s3); padding:.75rem 1rem; border-radius:var(--r); background:var(--accent-soft);
  border-left:3px solid var(--brand); font-size:.9375rem; color:var(--chalk)}
.steps.three{grid-template-columns:1fr}
@media (min-width:720px){ .steps.three{grid-template-columns:repeat(3,minmax(0,1fr))} }
.policy .flag svg{width:18px; height:18px; flex:none; margin-top:.2rem; color:var(--accent-ink)}
.policy .flag.warn svg{color:var(--danger)}
.field > legend.flabel{font-family:var(--mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--zinc); font-weight:400; margin-bottom:.45rem; padding:0}
fieldset.field{display:grid; gap:0}
div.cline{cursor:default}
.hint a{color:var(--accent-ink)}
a.card{display:block; transition:border-color .2s var(--ease), transform .2s var(--ease)}
a.card:hover{border-color:var(--brand); transform:translateY(-2px)}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ============================================================
   WordPress additions
   ============================================================ */
.formfail{margin:1rem 0 0; padding:.75rem 1rem; border-radius:var(--r); border:1px solid var(--danger);
  color:var(--danger); font-size:.9375rem; font-weight:700}
.formfail[hidden]{display:none}
button[aria-busy="true"]{opacity:.7; cursor:progress}
.kc-prose{max-width:72ch; font-size:1.0625rem}
.kc-prose > * + *{margin-top:1.1rem}
.kc-prose h2{font-family:var(--display); font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; letter-spacing:-.02em; margin-top:2.5rem}
.kc-prose h3{font-family:var(--display); font-size:1.35rem; line-height:1.2; margin-top:2rem}
.kc-prose ul, .kc-prose ol{padding-left:1.25rem}
.kc-prose ul{list-style:disc}
.kc-prose ol{list-style:decimal}
.kc-prose a{color:var(--accent-ink)}
.kc-prose img{border-radius:var(--r)}
.kc-post + .kc-post{margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--line)}
.kc-post a{text-decoration:none}