:root{
  /* Darius's card: crimson on black, saw-blade logo. Aggressive and square —
     the Wagner temperament, not the Blue Water one. */
  --gold:#D81E26; --gold-dk:#A8141B; --gold-lt:#FF4A52;
  --ink:#0E0E10; --ink-2:#1A1A1E; --body:#3A3A42; --mute:#6B6B76;
  --paper:#FFFFFF; --sand:#F4F4F5; --line:#DCDCE0; --hair:#EAEAEE;
  --ok:#1C7B57;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold-dk)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk)}
h1,h2,h3,.dsp{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.012em;color:var(--ink);line-height:1.08;
  margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(19px,2.1vw,24px)}
p{margin:0 0 15px}
.lead{font-size:19.5px;color:var(--ink-2)}

/* top strip + nav */
.strip{background:var(--gold);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.strip .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  padding:9px 22px}
.strip a{color:#fff;text-decoration:none;font-weight:500}
nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.3) blur(7px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;padding:13px 22px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{border-radius:7px;height:40px;width:auto}
.brand b{font-family:Oswald,sans-serif;font-weight:600;font-size:20px;
  text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.navlinks{display:flex;gap:22px}
.navlinks a{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.navlinks a:hover{color:var(--gold-dk)}
@media(max-width:900px){.navlinks{display:none}}

.btn{display:inline-block;font-family:Oswald,sans-serif;font-weight:600;font-size:15.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:14px 26px;border-radius:2px;
  text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-p{background:var(--gold);color:#fff}
.btn-p:hover{background:var(--gold-dk)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-w{background:#fff;color:var(--gold-dk)}

/* hero with the form */
.hero{background:var(--ink) url("/hero-mustang.jpg") center 52%/cover no-repeat;
  color:#DCE7EC;position:relative;overflow:hidden}
/* The Mustang IS the subject now, not texture. Scrim is much lighter than the
   old foam hero - just enough on the left to carry white type, lifting fast so
   the whole car reads. Driveway concrete is the only bright area the headline
   crosses, hence .88 rather than .60 at the far left. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,24,45,.90) 0%,rgba(9,24,45,.74) 32%,
    rgba(9,24,45,.46) 60%,rgba(9,24,45,.34) 100%),
    linear-gradient(0deg,rgba(9,24,45,.55) 0%,transparent 42%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 560px at 12% -10%,rgba(54,163,192,.18),transparent 60%)}
@media(max-width:1000px){
  /* stacked: copy runs the full width, so the scrim has to be even everywhere */
  .hero::before{background:linear-gradient(180deg,rgba(9,24,45,.90) 0%,
    rgba(9,24,45,.80) 48%,rgba(9,24,45,.92) 100%)}}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;
  gap:52px;align-items:start;padding:72px 22px 78px}
/* solo hero: no form beside the copy, so the column narrows and the photo
   carries the rest of the width. Copy stays left so the scrim only has to
   cover the side the headline sits on. */
.hero-solo .wrap{grid-template-columns:minmax(0,560px);padding:104px 22px 116px}
.hero-solo h1{font-size:clamp(2.5rem,5.2vw,4rem)}
.hero-solo .lead{max-width:50ch}
@media(max-width:1000px){.hero-solo .wrap{grid-template-columns:1fr;padding:64px 22px 72px}}
.hero h1{color:#fff}
.hero .lead{color:#B9CCD6}
.hero .eyebrow{color:var(--gold-lt)}
.hero ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:9px}
.hero li{padding-left:28px;position:relative;color:#CBDBE3}
.hero li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;
  border:2px solid var(--gold-lt);border-right:0;border-top:0;transform:rotate(-45deg)}
.herobtns{display:flex;flex-wrap:wrap;gap:13px}
@media(max-width:1000px){.hero .wrap{grid-template-columns:1fr;gap:38px;padding:52px 22px 58px}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 20px 46px -26px rgba(11,27,50,.45)}
.form{padding:26px}
.form h3{margin-bottom:4px}
.form .sm{font-size:14.5px;color:var(--mute);margin-bottom:17px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:11px 12px;width:100%}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form .btn{width:100%;text-align:center}
.hp{position:absolute;left:-9999px}

/* reviews under the hero */
.rev{background:var(--sand);padding:56px 0}
.revhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:26px}
.stars{color:var(--gold);font-size:21px;letter-spacing:3px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:18px}
.revcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:21px 22px}
.revcard .q{color:var(--ink-2);font-size:16px}
.revcard .who{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-top:12px}

section{padding:74px 0}
.sand{background:var(--sand)}
.band{background:var(--gold);color:#fff;padding:62px 0}
.band h2,.band .dsp{color:#fff}
.band p{color:#DFF1F6;margin:0}
.band .eyebrow{color:#C7E9F2}

/* numbered service scenes */
.scene{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.scene.flip > .scenetext{order:2}
.scenenum{font-family:Oswald,sans-serif;font-size:72px;font-weight:600;color:var(--gold);
  line-height:.8;opacity:.22;margin-bottom:8px}
.scenepic{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--ink-2);
  position:relative;border:1px solid var(--line)}
.scenepic img{width:100%;height:100%;object-fit:cover}
.scenepic.ph{background:
  linear-gradient(135deg,var(--ink) 0%,var(--gold-dk) 58%,var(--gold-lt) 140%)}
.scenepic.ph::after{content:attr(data-n);position:absolute;right:16px;bottom:8px;
  font-family:Oswald,sans-serif;font-size:96px;font-weight:600;color:rgba(255,255,255,.14);
  line-height:1}
@media(max-width:900px){.scene{grid-template-columns:1fr;gap:26px}.scene.flip > .scenetext{order:0}}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:4px;padding:23px}
.tile h3{margin-bottom:6px;font-size:19px}
.tile p{margin:0;font-size:15.5px;color:var(--body)}

.steps{counter-reset:s;display:grid;gap:18px;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:17px;align-items:start}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:Oswald,sans-serif;
  font-size:21px;font-weight:600;color:var(--gold);border:2px solid var(--gold);
  width:48px;height:48px;display:grid;place-items:center;border-radius:2px}
.steps b{font-family:Oswald,sans-serif;font-weight:600;font-size:18px;text-transform:uppercase;
  color:var(--ink);display:block}

.owner{display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center}
.ownerpic{aspect-ratio:1;border-radius:4px;background:
  linear-gradient(150deg,var(--ink-2),var(--gold-dk));overflow:hidden;position:relative}
.ownerpic img{width:100%;height:100%;object-fit:cover}
.ownerpic::after{content:"D";position:absolute;inset:0;display:grid;place-items:center;
  font-family:Oswald,sans-serif;font-size:140px;color:rgba(255,255,255,.16)}
.ownerpic.has::after{display:none}
@media(max-width:900px){.owner{grid-template-columns:1fr;gap:26px}}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px}
.gal img{aspect-ratio:1;object-fit:cover;border-radius:3px;border:1px solid var(--line)}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.07em;
  background:#fff;border:1px solid var(--line);border-radius:2px;padding:7px 12px;color:var(--ink-2)}
.band .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}

.phoneband{background:var(--ink);color:#fff;padding:62px 0;text-align:center}
.phoneband a.big{font-family:Oswald,sans-serif;font-weight:600;
  font-size:clamp(34px,6.4vw,66px);color:#fff;text-decoration:none;letter-spacing:.02em;
  display:inline-block;margin:10px 0 6px}
.phoneband a.big:hover{color:var(--gold-lt)}
.phoneband p{color:#AEC3CD}

details{border-bottom:1px solid var(--line);padding:16px 0}
details summary{font-family:Oswald,sans-serif;font-weight:600;font-size:18px;
  text-transform:uppercase;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:25px;color:var(--gold);line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:11px 0 0;color:var(--body)}

footer{background:var(--ink);color:#9FB6C2;padding:54px 0 96px;font-size:15px}
/* the lockup is white artwork, so it only lives on the dark surfaces */
.flogo{width:auto;height:92px;margin:0 0 34px;opacity:.95}
@media(max-width:600px){.flogo{height:70px;margin-bottom:26px}}
footer h4{font-family:Oswald,sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 13px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:30px}
footer a{color:#C5D7E0;text-decoration:none}
footer a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;
  font-size:13.5px;color:#7F97A4;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--gold);box-shadow:0 -6px 20px rgba(0,0,0,.2)}
.callbar a{display:block;text-align:center;padding:15px;color:#fff;text-decoration:none;
  font-family:Oswald,sans-serif;font-weight:600;font-size:18px;letter-spacing:.06em;
  text-transform:uppercase}
@media(max-width:760px){.callbar{display:block}footer{padding-bottom:104px}}

/* reveal: resting state is VISIBLE, so no-JS and failed observers still read */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

.legal{max-width:760px;margin:0 auto;padding:56px 22px 90px}
.legal h1{margin-bottom:8px}
.legal h2{font-size:21px;margin:30px 0 8px}
.legal p,.legal li{font-size:16.5px}

/* ---------- Custom Carpentry Solutions additions ---------- */
.hero{background:var(--ink) url("/hero.jpg") center 58%/cover no-repeat;color:#E8E8EA;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,12,.93) 0%,rgba(10,10,12,.80) 34%,
    rgba(10,10,12,.50) 62%,rgba(10,10,12,.38) 100%),
    linear-gradient(0deg,rgba(10,10,12,.60) 0%,transparent 44%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1000px 520px at 10% -10%,rgba(216,30,38,.16),transparent 62%)}
@media(max-width:1000px){
  .hero{background-position:center 56%}
  .hero::before{background:linear-gradient(180deg,rgba(10,10,12,.92) 0%,
    rgba(10,10,12,.68) 42%,rgba(10,10,12,.60) 70%,rgba(10,10,12,.90) 100%)}}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.14fr .86fr;
  gap:50px;align-items:start;padding:76px 22px 84px}
.hero h1{color:#fff}.hero .lead{color:#C6C6CC}.hero .eyebrow{color:var(--gold-lt)}
.hero ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:9px}
.hero li{padding-left:28px;position:relative;color:#D2D2D8}
.hero li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;
  background:var(--gold);clip-path:polygon(14% 44%,0 58%,42% 100%,100% 18%,86% 4%,42% 72%)}
.herobtns{display:flex;flex-wrap:wrap;gap:13px}
@media(max-width:1000px){.hero .wrap{grid-template-columns:1fr;gap:34px;padding:54px 22px 60px}}
.hero .form{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.4);
  box-shadow:0 28px 64px -26px rgba(0,0,0,.8);padding:26px}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bacard{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--sand)}
.bacard img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.batag{position:absolute;top:12px;left:12px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;
  background:var(--ink);color:#fff}
.bacard.after .batag{background:var(--gold)}
.bapair{margin-top:26px}
.bapair h3{margin-bottom:10px}
@media(max-width:620px){.ba{grid-template-columns:1fr}}

/* blog */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.post{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.post .pbody{padding:21px 22px}
.post h3{font-size:20px;margin-bottom:8px}
.post p{font-size:15.5px;color:var(--body);margin:0 0 14px}
.post .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.post a.more{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;color:var(--gold-dk);text-decoration:none}
.article{max-width:760px}
.article h2{font-size:clamp(22px,3vw,30px);margin:34px 0 12px}
.article h3{font-size:20px;margin:26px 0 9px}
.article p,.article li{font-size:17.5px}
.article ul{margin:0 0 16px 20px}
.article .meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}

/* service rows */
.srow{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.srow.flip .scopy{order:2}.srow.flip .spic{order:1}
.spic img{width:100%;height:auto;border:1px solid var(--line)}
@media(max-width:860px){.srow{grid-template-columns:1fr;gap:28px}
  .srow.flip .scopy,.srow.flip .spic{order:initial}}
.ticks{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:28px;color:var(--body)}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;
  background:var(--gold);clip-path:polygon(14% 44%,0 58%,42% 100%,100% 18%,86% 4%,42% 72%)}

/* ---------- layout primitives this build needs ---------- */
.sec{padding:76px 0}
.sec.sand{background:var(--sand)}
.phero{background:var(--ink);color:#DEDEE2;padding:70px 0 52px}
.phero h1{color:#fff;font-size:clamp(30px,4.6vw,52px)}
.phero .lead{color:#B4B4BC;margin-top:14px;max-width:62ch}
.phero .eyebrow{color:var(--gold-lt)}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8E8E99;margin-bottom:14px}
.crumb a{color:#B4B4BC;text-decoration:none}
.crumb a:hover{color:var(--gold-lt)}

.strip .mid{color:rgba(255,255,255,.82)}
@media(max-width:860px){.strip .mid{display:none}}
.navlinks a.on{color:var(--gold-dk);border-bottom:2px solid var(--gold)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tile{background:#fff;padding:26px 24px}
.tile .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  color:var(--gold-dk);margin-bottom:9px}
.tile h3{font-size:19px;margin-bottom:7px}
.tile p{font-size:15.5px;color:var(--body);margin:0 0 13px}
.tile a{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;color:var(--gold-dk);text-decoration:none}
.tiles.dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.tiles.dark .tile{background:rgba(14,14,16,.72)}
.tiles.dark .tile h3{color:#fff}
.tiles.dark .tile p{color:#C2C2CA}

.band{position:relative;background-size:cover;background-position:center;padding:66px 0;color:#fff}
.band .eyebrow{color:var(--gold-lt)}

.formwrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:start}
@media(max-width:860px){.formwrap{grid-template-columns:1fr;gap:30px}}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.form .two{grid-template-columns:1fr}}
.form label{display:grid;gap:6px;margin-bottom:13px;font-family:Oswald,sans-serif;
  text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--ink)}
.form input,.form select,.form textarea{font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--sand);border:1px solid var(--line);padding:12px 13px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;background:#fff}
.form .btn{width:100%;text-align:center}
.form h3{margin-bottom:4px}
.form .sm{font-size:14.5px;color:var(--mute);margin-bottom:16px}
.bignum{font-family:Oswald,sans-serif;font-weight:600;font-size:30px;color:var(--ink);
  text-decoration:none;letter-spacing:.01em}
.bignum:hover{color:var(--gold-dk)}
.btn-o.light{color:#fff;border-color:rgba(255,255,255,.55)}
.btn-o.light:hover{background:#fff;color:var(--ink);border-color:#fff}

.cta{background:var(--gold);color:#fff;padding:44px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:4px}
.cta p{margin:0;color:rgba(255,255,255,.9)}
.cta .right{text-align:right}
.cta .bignum{color:#fff;font-size:34px;display:block}
.cta .sub a{color:rgba(255,255,255,.92);font-size:15px}
@media(max-width:700px){.cta .wrap{flex-direction:column;align-items:flex-start}.cta .right{text-align:left}}

.foot{background:var(--ink);color:#A8A8B2;padding:56px 0 0}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.fbrand{font-family:Oswald,sans-serif;font-size:19px;text-transform:uppercase;color:#fff;
  display:block;margin-bottom:12px;letter-spacing:.02em}
.fcol h4{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;color:#fff;margin:0 0 12px}
.fcol p,.fcol a{font-size:15px;color:#A8A8B2;text-decoration:none}
.fcol a{display:block;padding:3px 0}
.fcol a:hover{color:var(--gold-lt)}
.fcol .towns{line-height:1.9;font-size:13.5px}
.foot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;
  padding:18px 22px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#7E7E88}
.foot .legal a{color:#7E7E88;text-decoration:underline}
@media(max-width:900px){.foot .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot .wrap{grid-template-columns:1fr}}

.mobilebar{display:none}
@media(max-width:1000px){
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;align-items:center;
    justify-content:center;height:56px;background:var(--gold);color:#fff;font-family:Oswald,sans-serif;
    text-transform:uppercase;letter-spacing:.06em;font-size:17px;font-weight:600;text-decoration:none;
    box-shadow:0 -2px 16px rgba(0,0,0,.35)}
  body{padding-bottom:56px}
}
nav .btn{white-space:nowrap}
@media(max-width:900px){.navlinks{display:none}nav .wrap{gap:12px;padding:11px 16px}
  .brand b{font-size:17px}nav .btn{font-size:13px;padding:11px 15px}}

/* strip must stay one line on a phone; the middle slogan is the droppable part */
@media(max-width:860px){.strip .wrap{justify-content:center;gap:0 16px;padding:8px 14px}}
@media(max-width:480px){.strip{font-size:11px;letter-spacing:.05em}
  .strip span:first-child{display:none}}

/* ============ BOLDER PASS + LOGO + DROPDOWN, 2026-11-06 ============
   Brycen: "the letters need to be more bold, just about everywhere —
   they're looking a little skinny." Weights go up across the board. */

body{font-weight:500}
p,li,td{font-weight:500}
h1,h2,h3,.dsp,.fbrand,.bignum,.btn{font-weight:700}
.lead{font-weight:600}
.eyebrow,.crumb,.meta,.batag,.strip,.tile .n{font-weight:600}
.navlinks a{font-weight:600}
.ticks li,.hero li{font-weight:600}
.tile h3,.post h3{font-weight:700}
.article p,.article li{font-weight:500}
.article h2,.article h3{font-weight:700}
.foot p,.fcol a{font-weight:500}
strong,b{font-weight:700}

/* --- the five tiles no longer leave grey holes ---
   the old grid painted its own background through the gaps, so a 5-item grid
   on a 4-wide row showed three empty grey cells. Borders live on the tiles. */
.tiles{background:transparent;border:0;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.tile{border:1px solid var(--line);background:#fff}
.tiles.dark{background:transparent;border:0}
.tiles.dark .tile{background:rgba(14,14,16,.78);border-color:rgba(255,255,255,.18)}
@media(min-width:1100px){.sec .tiles.five{grid-template-columns:repeat(5,1fr)}}

/* --- brand mark --- */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{width:38px;height:38px;color:var(--gold);flex:0 0 auto}
.brand b{font-family:Oswald,sans-serif;font-weight:700;font-size:19px;
  text-transform:uppercase;color:var(--ink);letter-spacing:.02em;line-height:1.05}
.foot .fbrand .mark{width:30px;height:30px;color:var(--gold);vertical-align:-7px;margin-right:9px}

/* --- services dropdown --- */
.navlinks .drop{position:relative}
.navlinks .drop>a::after{content:"";display:inline-block;margin-left:7px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;vertical-align:2px}
.navlinks .menu{position:absolute;top:100%;left:-14px;min-width:244px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--gold);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.34);padding:7px 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:80}
.navlinks .drop:hover .menu,.navlinks .drop:focus-within .menu{
  opacity:1;visibility:visible;transform:translateY(0)}
.navlinks .menu a{display:block;padding:10px 18px;border:0;font-size:14px;
  letter-spacing:.04em;color:var(--body);text-transform:uppercase}
.navlinks .menu a:hover{background:var(--sand);color:var(--gold-dk)}

/* ============ RED-LEVEL STRUCTURE PASS, 2026-11-06 ============ */

/* utility strip: badges left, socials right */
.strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 22px}
.strip .badges span{position:relative;padding-left:17px;margin-right:20px;white-space:nowrap}
.strip .badges span::before{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;
  background:var(--gold);clip-path:polygon(14% 44%,0 58%,42% 100%,100% 18%,86% 4%,42% 72%)}
.strip .utils a{margin-left:20px;color:#fff;text-decoration:none}
.strip .utils a:hover{color:#FFD9DB}
@media(max-width:1000px){.strip .badges span:nth-child(n+2){display:none}}
@media(max-width:600px){.strip .badges{display:none}.strip .wrap{justify-content:center}}

/* nav: logo dead centre, links either side */
nav .navgrid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:22px;padding:14px 22px}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks.left{justify-content:flex-end}
.navlinks.right{justify-content:flex-start}
.brand{flex-direction:column;gap:6px;text-align:center}
.brand .mark{width:44px;height:44px}
.brand b{font-size:15px;line-height:1.1;letter-spacing:.06em}
.brand b i{display:block;font-style:normal;font-size:12.5px;letter-spacing:.3em;color:var(--gold-dk)}
.navcall{display:none}
@media(max-width:1100px){.navlinks{gap:18px;font-size:12px}}
@media(max-width:900px){
  nav .navgrid{grid-template-columns:auto 1fr;gap:12px;padding:11px 16px}
  .navlinks{display:none}
  .brand{flex-direction:row;text-align:left;gap:10px}
  .brand .mark{width:34px;height:34px}
  .navcall{display:block;justify-self:end;font-family:Oswald,sans-serif;font-weight:700;
    font-size:15px;color:#fff;background:var(--gold);padding:11px 16px;text-decoration:none;
    letter-spacing:.03em;white-space:nowrap}
}

/* centred hero */
.hero-c{background-position:center 56%}
.hero-c .wrap{display:block;text-align:center;max-width:1000px;padding:132px 22px 124px}
.hero-c h1{font-size:clamp(28px,4.6vw,54px);line-height:1.08;text-transform:uppercase;
  max-width:none;color:#fff;text-wrap:balance}
.hero-c .serving{margin:18px 0 30px;font-family:Oswald,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:clamp(13px,1.5vw,16px);color:#D8D8DE}
.hero-c .herobtns{justify-content:center}
@media(max-width:800px){.hero-c .wrap{padding:84px 20px 86px}}

/* trust bar under the hero */
.trust{background:var(--ink);color:#C8C8D0;padding:46px 0;text-align:center}
.trust h2{color:#fff;text-transform:uppercase;font-size:clamp(19px,2.5vw,27px);margin-bottom:12px}
.trust p{max-width:74ch;margin:0 auto;font-size:17px}

/* service cards with an image */
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:18px;margin-top:28px}
.scard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .2s ease}
.scard:hover{transform:translateY(-3px);box-shadow:0 18px 38px -18px rgba(0,0,0,.3)}
.scard .spic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:0}
.scard .sbody{padding:20px 21px 23px}
.scard h3{font-size:19px;margin-bottom:8px}
.scard p{font-size:15.5px;color:var(--body);margin:0 0 14px}
.scard .more{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:13.5px;color:var(--gold-dk);text-decoration:none}

/* the deep repairs grid */
.reps{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:28px}
.rep{background:#fff;padding:22px 22px 24px}
.rep h3{font-size:15px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px;color:var(--gold-dk)}
.rep p{font-size:15px;color:var(--body);margin:0}
.sand .reps{background:var(--line)}
.sand .rep{background:var(--paper)}

/* ============ NO EMPTY CELLS, EVER — 2026-11-06 ============
   Grid leaves holes whenever the item count is not a multiple of the column
   count, and a grid that paints its own background shows those holes as grey
   blocks. Flex-wrap with flex-grow cannot do that: whatever is left on the
   last row simply widens to fill it. 5 cards read 3+2, 10 repairs read 5+5,
   and at every width in between the bottom row is always full. */

.scards{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px}
.scard{flex:1 1 calc(33.333% - 12px);min-width:272px}
@media(max-width:700px){.scard{flex:1 1 100%;min-width:0}}

.reps{display:flex;flex-wrap:wrap;gap:0;background:transparent;border:0;margin-top:28px}
.rep{flex:1 1 calc(20% - 1px);min-width:228px;
  border:1px solid var(--line);margin:-1px 0 0 -1px;background:#fff}
.sand .rep{background:var(--paper)}
@media(max-width:620px){.rep{flex:1 1 100%;min-width:0}}

/* the five promise tiles: same treatment */
.tiles{display:flex;flex-wrap:wrap;gap:14px}
.tile{flex:1 1 calc(33.333% - 10px);min-width:228px}
.tiles.five .tile{flex:1 1 calc(20% - 12px);min-width:206px}
@media(max-width:760px){.tile,.tiles.five .tile{flex:1 1 100%;min-width:0}}

/* chips rows should fill too rather than trailing off */
.chips{display:flex;flex-wrap:wrap;gap:9px}

/* a last-row card that grows to fill must not grow its photo with it */
.scard .spic img{aspect-ratio:4/3;max-height:268px;object-fit:cover}

/* service with no photograph yet */
.noimg{aspect-ratio:4/3;max-height:268px;display:grid;place-items:center;padding:18px;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 60%,var(--gold-dk) 220%);
  border-bottom:3px solid var(--gold)}
.noimg span{font-family:Oswald,system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.15rem;line-height:1.2;color:#fff;text-align:center}
/* a service page with no photo runs full width instead of leaving half a row */
.srow.solo{grid-template-columns:1fr}
.srow.solo .scopy{max-width:68ch}

/* footer service-area list + locality map */
.foot .fwide{grid-column:span 1}
.towns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.towns .t{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;
  padding:4px 8px;border-radius:2px;white-space:nowrap;
  background:#000;color:#E6E6EA;border:1px solid #2A2A30}
.towns a.t-key{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600}
.towns a.t-key:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
@media(max-width:900px){.foot .fwide{grid-column:1 / -1}}

.maprow{background:var(--sand);border-top:1px solid var(--line)}
.maprow .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;
  padding-top:64px;padding-bottom:64px}
.mapcopy h2{margin:6px 0 14px}
.mapnote{color:var(--mute);font-size:.96rem}
.mapbox{position:relative}
.mapbox iframe{width:100%;height:360px;border:1px solid var(--line);display:block;
  filter:saturate(.85) contrast(1.02)}
.maplink{display:inline-block;margin-top:10px;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.maplink:hover{text-decoration:underline}
@media(max-width:860px){.maprow .wrap{grid-template-columns:1fr;gap:28px;
  padding-top:48px;padding-bottom:48px}
  .mapbox iframe{height:300px}}