/* Self-hosted fonts (latin subset) -- were loaded from Google Fonts until 2026-10-01 */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ink:#0f1114; --ink2:#171a1f; --ink3:#1f242b; --line:#2b3038;
  --yellow:#ffd21e; --yellow2:#f0b800; --orange:#f7a51b;
  --paper:#eef0f3; --muted:#98a0ac; --red:#e0452b;
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:Barlow,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px; line-height:1.6; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:Anton,Impact,sans-serif; font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; line-height:.98; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.eyebrow{font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; font-size:.85rem; color:var(--yellow)}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(15,17,20,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr{display:flex; align-items:center; gap:18px; height:66px}
.brand{font-family:Anton,sans-serif; font-size:1.15rem; text-transform:uppercase;
  letter-spacing:.02em; white-space:nowrap; text-decoration:none}
.brand b{color:var(--yellow); font-weight:400}
nav{margin-left:auto; display:flex; gap:22px; font-family:"Barlow Condensed",sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem}
nav a{text-decoration:none; color:var(--muted)}
nav a:hover{color:var(--yellow)}
.hdr-call{background:var(--yellow); color:#161206; padding:9px 16px; border-radius:5px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.06em;
  text-decoration:none; white-space:nowrap; font-size:1.05rem}
@media(max-width:900px){nav{display:none}}

/* ---------- storm banner ---------- */
#stormbar{display:none; background:linear-gradient(90deg,var(--red),#b8331d);
  border-bottom:2px solid #000; position:relative; z-index:59}
#stormbar.on{display:block; animation:slideDown .45s ease}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.stormrow{display:flex; align-items:center; gap:14px; padding:11px 0; flex-wrap:wrap}
.stormrow .pulse{width:12px;height:12px;border-radius:50%;background:#fff;flex:0 0 auto;
  animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.stormrow strong{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:1.05rem}
.stormrow .st-txt{flex:1 1 260px; font-size:.97rem}
.stormrow a{background:#fff; color:#8e2415; padding:8px 16px; border-radius:5px;
  text-decoration:none; font-weight:700; white-space:nowrap}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end;
  overflow:hidden}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover}
.hero-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,17,20,.72) 0%, rgba(15,17,20,.45) 35%, rgba(15,17,20,.96) 100%)}
.hero-in{position:relative; width:100%; padding-top:90px; padding-bottom:46px}
.hero h1{font-size:clamp(2.6rem,7.4vw,5.6rem); max-width:15ch;
  text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal; color:var(--yellow)}
.hero-sub{font-size:clamp(1.05rem,2.3vw,1.35rem); color:#d5dae1; max-width:46ch; margin:18px 0 0}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0}
.badge{border:1px solid var(--line); background:rgba(23,26,31,.75); border-radius:100px;
  padding:7px 15px; font-family:"Barlow Condensed",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; font-size:.85rem; color:#cdd3db}
.badge b{color:var(--yellow); font-weight:700}

/* two doors */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:30px 0 0; max-width:720px}
.door{display:block; text-decoration:none; padding:20px 22px; border-radius:9px;
  background:rgba(31,36,43,.86); border:1px solid var(--line); transition:.16s}
.door:hover{border-color:var(--yellow); transform:translateY(-2px); background:rgba(38,44,53,.94)}
.door .k{font-family:Anton,sans-serif; text-transform:uppercase; font-size:1.32rem;
  color:var(--yellow); line-height:1.05}
.door .d{font-size:.95rem; color:var(--muted); margin-top:6px}
@media(max-width:640px){.doors{grid-template-columns:1fr}}

/* ---------- generic section ---------- */
section{padding:clamp(56px,8vw,104px) 0; border-top:1px solid var(--line)}
.sec-head{max-width:60ch; margin-bottom:34px}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,3.1rem); margin:10px 0 0}
.sec-head p{color:var(--muted); margin:14px 0 0; font-size:1.06rem}

/* trust strip */
.trust{background:var(--ink2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.trust .t{background:var(--ink2); padding:26px 18px; text-align:center}
.trust .n{font-family:Anton,sans-serif; font-size:clamp(1.5rem,3.4vw,2.3rem); color:var(--yellow)}
.trust .l{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:.82rem; color:var(--muted); margin-top:3px}
@media(max-width:720px){.trust .wrap{grid-template-columns:1fr 1fr}}

/* services */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:980px){.svc{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc{grid-template-columns:1fr}}
.card{position:relative; border-radius:10px; overflow:hidden; min-height:230px; display:flex;
  align-items:flex-end; text-decoration:none; border:1px solid var(--line)}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease}
.card:hover img{transform:scale(1.06)}
.card::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(15,17,20,0) 30%,rgba(15,17,20,.93) 100%)}
.card .cin{position:relative; padding:18px; width:100%}
.card h3{font-size:1.35rem}
.card p{margin:5px 0 0; font-size:.93rem; color:#b9c0c9}
.card .who{position:absolute; top:14px; left:14px; z-index:2; font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700;
  background:rgba(15,17,20,.8); border:1px solid var(--line); color:var(--yellow);
  padding:4px 9px; border-radius:4px}

/* job story stepper */
.story{display:grid; grid-template-columns:1.25fr .75fr; gap:30px; align-items:center}
@media(max-width:900px){.story{grid-template-columns:1fr}}
.frame{position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:#000; aspect-ratio:3/4; max-height:640px}
.frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease}
.frame img.on{opacity:1}
.frame .stamp{position:absolute; left:14px; top:14px; z-index:3;
  font-family:Anton,sans-serif; text-transform:uppercase; font-size:1rem; letter-spacing:.06em;
  background:var(--yellow); color:#161206; padding:6px 13px; border-radius:4px}
.steps{list-style:none; margin:0; padding:0}
.steps li{border-left:3px solid var(--line); padding:14px 0 14px 20px; cursor:pointer;
  transition:.18s; color:var(--muted)}
.steps li:hover{border-color:#4b535f; color:#cdd3db}
.steps li.on{border-color:var(--yellow); color:var(--paper)}
.steps b{display:block; font-family:Anton,sans-serif; text-transform:uppercase;
  font-size:1.16rem; color:inherit}
.steps span{font-size:.96rem}

/* tools */
.tools{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:900px){.tools{grid-template-columns:1fr}}
.tool{background:var(--ink2); border:1px solid var(--line); border-radius:10px; padding:26px}
.tool h3{font-size:1.45rem; color:var(--yellow)}
.tool p.lede{color:var(--muted); margin:8px 0 18px; font-size:.98rem}
.fld{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.fld label{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:.78rem; color:var(--muted); display:block; margin-bottom:5px}
.fld input,.fld select{background:var(--ink3); border:1px solid var(--line); color:var(--paper);
  border-radius:6px; padding:11px 12px; font:inherit; font-size:1rem; width:110px}
.fld input:focus,.fld select:focus{outline:2px solid var(--yellow); outline-offset:1px}
.btn{background:var(--yellow); color:#161206; border:0; border-radius:6px; padding:12px 20px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:1.02rem; cursor:pointer}
.btn:hover{background:#ffe266}
.out{margin-top:18px; padding:16px 18px; border-radius:8px; background:var(--ink3);
  border:1px solid var(--line); min-height:60px; font-size:1rem}
.out .big{font-family:Anton,sans-serif; font-size:1.6rem; color:var(--yellow); line-height:1.1}
.out .note{color:var(--muted); font-size:.88rem; margin-top:7px}

/* costs */
.costs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:900px){.costs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.costs{grid-template-columns:1fr}}
.cost{background:var(--ink2); border:1px solid var(--line); border-radius:9px; padding:20px}
.cost .t{font-family:Anton,sans-serif; text-transform:uppercase; font-size:1.12rem}
.cost .r{font-family:Anton,sans-serif; color:var(--yellow); font-size:1.85rem; margin:6px 0 4px}
.cost .w{color:var(--muted); font-size:.9rem}

/* map */
.mapwrap{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
@media(max-width:900px){.mapwrap{grid-template-columns:1fr}}
.townlist{display:flex; flex-wrap:wrap; gap:8px}
.town{border:1px solid var(--line); background:var(--ink2); border-radius:5px; padding:7px 13px;
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:.86rem; color:#c3cad3}
.town.hq{border-color:var(--yellow); color:var(--yellow)}

/* 811 */
.flags{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:22px}
.flag{border:1px solid var(--line); border-radius:8px; padding:13px; background:var(--ink2)}
.flag .sw{height:8px; border-radius:4px; margin-bottom:9px}
.flag b{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:.86rem; display:block}
.flag span{font-size:.85rem; color:var(--muted)}

/* text-a-photo CTA */
.snap{background:linear-gradient(135deg,#1c2027,#12151a); border:1px solid var(--line);
  border-radius:14px; padding:clamp(28px,5vw,52px); text-align:center}
.snap h2{font-size:clamp(1.8rem,4.6vw,3rem)}
.snap p{color:var(--muted); max-width:52ch; margin:14px auto 0}
.snapbtns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.big-btn{display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  padding:16px 28px; border-radius:8px; font-family:"Barlow Condensed",sans-serif;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:1.2rem;
  border:2px solid #000}
.big-btn.y{background:var(--yellow); color:#161206; box-shadow:0 5px 0 #8c6c00}
.big-btn.o{background:var(--ink3); color:var(--yellow); box-shadow:0 5px 0 #000}
.big-btn:active{transform:translateY(3px); box-shadow:none}

/* footer */
footer{background:#0b0d10; border-top:1px solid var(--line); padding:44px 0 110px}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr}}
footer h2.fh{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.12em;
  color:var(--yellow); font-size:.9rem; margin:0 0 12px}
footer a{color:#b9c0c9; text-decoration:none; display:block; padding:3px 0; font-size:.96rem}
footer a:hover{color:var(--yellow)}
.fine{color:#8a929d; font-size:.85rem; margin-top:26px}

/* sticky mobile call bar */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(15,17,20,.97); border-top:1px solid var(--line); padding:9px;
  gap:9px; backdrop-filter:blur(8px)}
.callbar a{flex:1; text-align:center; padding:14px 6px; border-radius:7px; text-decoration:none;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.05rem}
.callbar .c{background:var(--yellow); color:#161206}
.callbar .t{background:var(--ink3); color:var(--yellow); border:1px solid var(--line)}
@media(max-width:820px){.callbar{display:flex}}

/* ============================================================
   Added for service pages, gallery, forms and Mike's photo drop
   ============================================================ */

.hero-sm{min-height:min(58vh,470px)}
.hero-sm .hero-in{padding-top:70px; padding-bottom:38px}
.hero-sm h1{font-size:clamp(2.2rem,6vw,4.2rem); max-width:18ch}

ul.tick{list-style:none; padding:0; margin:22px 0 0}
ul.tick li{position:relative; padding:8px 0 8px 30px; border-bottom:1px solid var(--line);
  color:#cdd3db}
ul.tick li:before{content:""; position:absolute; left:4px; top:16px; width:10px; height:10px;
  background:var(--yellow); transform:rotate(45deg); border-radius:2px}

.steps-static li{cursor:default}
.steps-static li,.steps-static li.on{border-color:var(--line); color:var(--muted)}
.steps-static li b{color:var(--paper)}
.steps-static li:hover{border-color:var(--yellow)}

details.faq{border-bottom:1px solid var(--line); padding:2px 0}
details.faq summary{cursor:pointer; padding:14px 0; font-family:"Barlow Condensed",sans-serif;
  font-weight:600; font-size:1.1rem; letter-spacing:.02em; list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:before{content:"+"; color:var(--yellow); font-weight:700; margin-right:10px}
details.faq[open] summary:before{content:"\2212"}
details.faq p{margin:0 0 16px; color:var(--muted); font-size:.98rem}

/* gallery */
.grid-g{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.gt{padding:0; border:1px solid var(--line); background:#000; border-radius:8px;
  overflow:hidden; cursor:zoom-in; aspect-ratio:1; display:block}
.gt img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.gt:hover img{transform:scale(1.07)}
#lb{position:fixed; inset:0; z-index:120; background:rgba(6,7,9,.95); display:none;
  align-items:center; justify-content:center; padding:20px; cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:100%; max-height:100%; border-radius:6px}
#lbx{position:fixed; top:14px; right:18px; background:none; border:0; color:var(--paper);
  font-size:2.6rem; line-height:1; cursor:pointer}

/* forms */
.form{background:var(--ink2); border:1px solid var(--line); border-radius:12px;
  padding:clamp(22px,4vw,38px)}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
@media(max-width:680px){.frow{grid-template-columns:1fr}}
.f label{display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:.78rem; color:var(--muted); margin-bottom:6px}
.f input,.f select,.f textarea{width:100%; background:var(--ink3); border:1px solid var(--line);
  color:var(--paper); border-radius:7px; padding:13px 14px; font:inherit; font-size:1rem}
.f textarea{min-height:130px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--yellow); outline-offset:1px}
.req{color:var(--yellow)}
.drop{border:2px dashed var(--line); border-radius:10px; padding:28px 20px; text-align:center;
  cursor:pointer; transition:.15s; background:var(--ink3)}
.drop:hover,.drop.hot{border-color:var(--yellow); background:#22262d}
.drop b{display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.15rem; color:var(--yellow)}
.drop span{color:var(--muted); font-size:.92rem}
.thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.thumbs figure{margin:0; position:relative; width:78px; height:78px; border-radius:6px;
  overflow:hidden; border:1px solid var(--line)}
.thumbs img{width:100%; height:100%; object-fit:cover}
.thumbs button{position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  border:0; background:rgba(0,0,0,.75); color:#fff; cursor:pointer; line-height:1; font-size:14px}
.formnote{color:var(--muted); font-size:.9rem; margin-top:14px}
.okbox{background:#16301c; border:1px solid #2f6b3d; color:#c9f0d4; border-radius:9px;
  padding:16px 18px; margin-bottom:20px}
.errbox{background:#33161a; border:1px solid #7a2b30; color:#f3ccd0; border-radius:9px;
  padding:16px 18px; margin-bottom:20px}
.bar{height:7px; background:var(--ink3); border-radius:4px; overflow:hidden; margin-top:14px;
  display:none}
.bar.on{display:block}
.bar i{display:block; height:100%; width:0; background:var(--yellow); transition:width .25s}

/* pull quote */
.quote{background:var(--ink2); border:1px solid var(--line); border-left:4px solid var(--yellow);
  border-radius:10px; padding:clamp(26px,4vw,44px); max-width:900px; margin:0 auto}
.quote p{font-family:"Barlow Condensed",sans-serif; font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.35; margin:0; color:var(--paper)}
.quote footer{background:none; border:0; padding:16px 0 0; margin:0}
.quote cite{font-style:normal; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:.9rem; color:var(--yellow)}
.stars{color:var(--yellow); letter-spacing:3px; font-size:1.1rem; margin-bottom:14px}

/* tap targets -- 44px minimum on phones */
@media(max-width:700px){
  footer a{padding:10px 0}
  .town{min-height:44px; display:inline-flex; align-items:center}
  .btn{min-height:44px}
  a.tap{display:inline-block; padding:12px 0}
}

/* gallery: two across on phones instead of one 65-photo column */
@media(max-width:560px){.grid-g{grid-template-columns:1fr 1fr; gap:8px}}