/* ============================================================
   STRONGBACK CONTRACTING - single file build
   Brand blue #46C4EF sampled from the original logo artwork.
   Shape lock: square corners everywhere. One documented
   exception: primary buttons and media frames carry a 14px
   bottom-right chamfer taken from the shield mark.
   ============================================================ */
@font-face{
  font-family:'Archivo';
  src:url(/assets/fonts/archivo.woff2) format('woff2');
  font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:block;
}
:root{
  --ink:#08090C; --ink2:#0E1116; --ink3:#141920; --ink4:#1B222B;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --fg:#F2F5F8; --fg2:#98A4B2; --fg3:#6B7785;
  --brand:#46C4EF; --brand2:#1C8CC8; --brandsoft:rgba(70,196,239,.14);
  --pad:clamp(20px,5vw,72px);
  --maxw:1400px;
  --chamfer:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(15px,.35vw + 14px,17px); line-height:1.62;
  font-variation-settings:'wdth' 100; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
::selection{background:var(--brand); color:#04121A}

h1,h2,h3,.dsp{
  font-weight:800; font-variation-settings:'wdth' 112; text-transform:uppercase;
  line-height:.96; letter-spacing:-.005em; margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.45rem,6.2vw,5.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.9rem)}
h3{font-size:clamp(1.22rem,1.9vw,1.75rem); line-height:1.02}
p{margin:0}
.lead{font-size:clamp(1.02rem,.5vw + .92rem,1.22rem); color:var(--fg2); line-height:1.6}
.muted{color:var(--fg2)}
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand); font-variation-settings:'wdth' 100;
}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
section{position:relative}
section[id],main[id]{scroll-margin-top:86px}
.sec{padding-block:clamp(66px,8.4vw,118px)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.02em 1.7em; font-weight:700; font-size:.88rem; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; border:1px solid transparent;
  cursor:pointer; position:relative; transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
  font-variation-settings:'wdth' 100;
}
.btn-primary{background:var(--brand); color:#04121A; clip-path:var(--chamfer)}
.btn-primary:hover{background:#6FD3F5; transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:.78em 1.25em; font-size:.76rem}

/* ---------- cursor ---------- */
.cur-dot,.cur-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  opacity:0; transition:opacity .25s; will-change:transform}
.cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--brand); border-radius:50%}
.cur-ring{width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(70,196,239,.55);
  border-radius:50%; transition:opacity .25s, width .22s var(--ease), height .22s var(--ease),
  margin .22s var(--ease), border-color .22s, background .22s}
html.cursor-on .cur-dot,html.cursor-on .cur-ring{opacity:1}
html.cursor-on.cur-hot .cur-ring{width:56px; height:56px; margin:-28px 0 0 -28px;
  border-color:var(--brand); background:rgba(70,196,239,.10)}
html.cursor-on.cur-hot .cur-dot{opacity:.35}
html.cursor-on,html.cursor-on body,html.cursor-on a,html.cursor-on button,
html.cursor-on input,html.cursor-on select,html.cursor-on textarea,
html.cursor-on label,html.cursor-on summary{cursor:none}

/* ---------- image fade in (opacity only, no curtain wipes) ---------- */
html.js img[data-fade]{opacity:0; transition:opacity .75s var(--ease); animation:imgSafety 0s linear 4s forwards}
html.js img[data-fade].shown{opacity:1}
@keyframes imgSafety{to{opacity:1}}

/* ---------- scroll reveal ---------- */
html.js [data-rv]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js [data-rv].in{opacity:1; transform:none}
html.js [data-rv-s]>*{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js [data-rv-s].in>*{opacity:1; transform:none}

/* ============ PRELOADER ============ */
#pre{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s;
}
#pre.done{opacity:0; visibility:hidden}
.pre-in{display:grid; justify-items:center; gap:30px; padding:24px; width:min(470px,88vw)}
.pre-logo{width:100%; max-width:390px; height:auto; animation:preShield 1s var(--ease) both}
.pre-track{width:100%; height:2px; background:rgba(255,255,255,.12); overflow:hidden}
.pre-bar{height:100%; background:var(--brand); transform-origin:left center; transform:scaleX(0);
  animation:preBar 2.05s cubic-bezier(.35,.9,.25,1) both}
.pre-note{font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--fg3);
  animation:preLogo .9s var(--ease) .32s both}
@keyframes preShield{from{opacity:0; transform:translateY(16px) scale(.86)} to{opacity:1; transform:none}}
@keyframes preLogo{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes preBar{0%{transform:scaleX(0)} 55%{transform:scaleX(.72)} 100%{transform:scaleX(1)}}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:900; height:74px;
  display:flex; align-items:center;
  background:rgba(8,9,12,.62); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s, height .3s;
}
header.solid{background:rgba(8,9,12,.92); border-bottom-color:var(--line)}
.navbar{display:flex; align-items:center; gap:26px; width:100%}
.brand{display:flex; align-items:center; flex:0 0 auto; margin-right:auto}
.brand img{width:auto; height:34px}
.nav{display:flex; align-items:center; gap:clamp(14px,1.7vw,30px); white-space:nowrap}
.nav a{font-size:.8rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--fg2);
  position:relative; padding-block:6px; transition:color .22s}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brand); transition:right .3s var(--ease)}
.nav a:hover{color:var(--fg)} .nav a:hover::after{right:0}
/* services dropdown: hover on the wrapper, padding (never margin) bridges label and panel */
.dd{position:relative; display:flex; align-items:center; align-self:stretch}
.nav .dd-panel{position:absolute; top:100%; left:-22px; min-width:260px; padding:14px 0 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s}
.nav .dd-panel::before{content:''; position:absolute; inset:14px 0 0 0; background:rgba(8,9,12,.97);
  border:1px solid var(--line); clip-path:var(--chamfer); z-index:-1}
.dd.open .dd-panel{opacity:1; visibility:visible; transform:none}
.nav .dd-panel a{display:block; padding:13px 22px; font-size:.74rem; color:var(--fg2)}
.nav .dd-panel a::after{display:none}
.nav .dd-panel a:hover{color:var(--brand)}
.nav .dd-panel a:first-child{margin-top:8px} .nav .dd-panel a:last-child{margin-bottom:8px}
.nav-cta{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.tel{font-size:.82rem; font-weight:700; letter-spacing:.06em; color:var(--fg)}
.tel:hover{color:var(--brand)}
.burger{display:none; width:44px; height:44px; background:none; border:1px solid var(--line2);
  cursor:pointer; position:relative; flex:0 0 auto}
.burger i{position:absolute; left:11px; width:22px; height:2px; background:var(--fg);
  transition:transform .3s var(--ease), opacity .2s}
.burger i:nth-child(1){top:15px} .burger i:nth-child(2){top:21px} .burger i:nth-child(3){top:27px}
body.menu .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sheet{
  position:fixed; inset:74px 0 0 0; z-index:880; background:#08090C;
  display:flex; flex-direction:column; padding:28px var(--pad) 34px;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
body.menu .sheet{opacity:1; visibility:visible; transform:none}
.sheet nav{display:flex; flex-direction:column; gap:2px}
.sheet nav a{font-size:1.45rem; font-weight:800; text-transform:uppercase;
  font-variation-settings:'wdth' 110; padding:13px 0; border-bottom:1px solid var(--line); color:var(--fg)}
.sheet-dd-row{display:flex; align-items:stretch; border-bottom:1px solid var(--line)}
.sheet .sheet-dd-row a{flex:1; border-bottom:0}
.sheet-dd-btn{width:52px; background:none; border:0; border-left:1px solid var(--line); cursor:pointer; position:relative}
.sheet-dd-btn::before{content:''; position:absolute; left:50%; top:50%; width:10px; height:10px;
  border-right:2px solid var(--fg); border-bottom:2px solid var(--fg); transform:translate(-50%,-70%) rotate(45deg);
  transition:transform .25s var(--ease)}
.sheet-dd.open .sheet-dd-btn::before{transform:translate(-50%,-30%) rotate(-135deg)}
.sheet-sub{display:none; padding:6px 0 10px 16px; border-bottom:1px solid var(--line)}
.sheet-dd.open .sheet-sub{display:block}
.sheet .sheet-sub a{display:block; font-size:1rem; padding:10px 0; border-bottom:0; color:var(--fg2)}
.sheet .sheet-foot{margin-top:auto; padding-top:26px; display:grid; gap:12px}
.sheet .sheet-foot .btn{width:100%}

/* ============ HERO ============ */
.hero{min-height:100dvh; display:flex; align-items:center; position:relative; overflow:hidden;
  padding-top:74px}
.hero-media{position:absolute; inset:-6% 0 -6% 0; z-index:0; will-change:transform}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 48%}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top,rgba(8,9,12,.96) 0%,rgba(8,9,12,.72) 30%,rgba(8,9,12,.12) 66%,rgba(8,9,12,.40) 100%),
    linear-gradient(to right,rgba(8,9,12,.80) 0%,rgba(8,9,12,.22) 56%,rgba(8,9,12,0) 100%);
}
.hero-in{position:relative; z-index:2; width:100%; padding-block:clamp(28px,5vh,64px)}
.hero h1{max-width:26ch; font-size:clamp(1.8rem,3.5vw,3.3rem); line-height:1.02}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.04em}
.hero h1 .w>span{display:inline-block; transform:translateY(112%);
  transition:transform .85s var(--ease) var(--d,0ms)}
html:not(.js) .hero h1 .w>span{transform:none}
body.ready .hero h1 .w>span{transform:none}
.hero h1 em{font-style:normal; color:var(--brand)}
.hero-sub{max-width:47ch; margin-top:22px; opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease) .62s, transform .8s var(--ease) .62s}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease) .74s, transform .8s var(--ease) .74s}
body.ready .hero-sub,body.ready .hero-cta{opacity:1; transform:none}
html:not(.js) .hero-sub,html:not(.js) .hero-cta{opacity:1; transform:none}

/* ============ CREDENTIALS ============ */
.creds{background:var(--ink2); border-block:1px solid var(--line)}
.creds-in{display:flex; flex-wrap:wrap; gap:10px 8px; align-items:stretch; padding-block:26px}
.cred{display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--ink3);
  border:1px solid var(--line); flex:1 1 200px; min-width:0}
.cred img{width:15px; height:auto; flex:0 0 auto; opacity:.95}
.cred b{font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.3}
.cred span{display:block; font-size:.7rem; letter-spacing:.06em; color:var(--fg3); font-weight:500;
  text-transform:none; letter-spacing:0}

/* ============ TOWN MARQUEE ============ */
.mq{overflow:hidden; border-bottom:1px solid var(--line); background:var(--ink);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex; width:max-content; animation:mqRun 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-half{display:flex; align-items:center; flex:0 0 auto}
.mq-half span{display:inline-flex; align-items:center; gap:clamp(22px,3vw,44px);
  padding:0 clamp(11px,1.5vw,22px); font-size:clamp(.82rem,1.5vw,1.05rem); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); padding-block:17px; white-space:nowrap}
.mq-half span::after{content:''; width:5px; height:5px; background:var(--brand); flex:0 0 auto}
@keyframes mqRun{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* ============ PINNED SERVICES ============ */
.svc{position:relative; background:var(--ink)}
.svc-rail{position:sticky; top:0; height:100dvh; overflow:hidden; display:flex; align-items:center}
.svc-bg{position:absolute; inset:0; z-index:0}
.svc-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to right,rgba(8,9,12,.97) 0%,rgba(8,9,12,.90) 42%,rgba(8,9,12,.55) 100%)}
.svc-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .85s var(--ease), transform 1.4s var(--ease); transform:scale(1.07)}
.svc-bg img.on{opacity:.55; transform:scale(1)}
.svc-grid{position:relative; z-index:2; width:100%; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(28px,4vw,72px); align-items:center}
.svc-head{position:absolute; top:clamp(92px,12vh,126px); left:0; right:0; z-index:3; pointer-events:none}
.svc-head-in{display:flex; align-items:baseline; gap:22px}
.svc-head h2{font-size:clamp(1.55rem,2.6vw,2.4rem)}
.svc-count{font-size:1rem; font-weight:800; letter-spacing:.16em; color:var(--fg3);
  font-variation-settings:'wdth' 108}
.svc-count b{color:var(--brand); font-size:1.35rem}
.svc-stack{position:relative; min-height:clamp(290px,44vh,400px)}
.svc-panel{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(26px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .55s var(--ease); visibility:hidden}
.svc-panel.on{opacity:1; transform:none; pointer-events:auto; visibility:visible}
.svc-num{font-size:.76rem; font-weight:700; letter-spacing:.24em; color:var(--brand); margin-bottom:16px}
.svc-panel h3{font-size:clamp(1.85rem,4.2vw,3.25rem); margin-bottom:18px}
.svc-panel p{max-width:48ch; color:var(--fg2); font-size:clamp(.96rem,.4vw + .88rem,1.1rem)}
.svc-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:24px}
.svc-more{display:inline-block; width:max-content; max-width:100%; margin-top:20px; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand); border-bottom:1px solid currentColor; padding-bottom:3px}
.svc-more:hover{color:var(--fg)}
.svc-tags i{font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:7px 12px; border:1px solid var(--line2); color:var(--fg2)}
.svc-media{position:relative; aspect-ratio:1/1; height:min(58vh,540px); width:auto; margin-left:auto;
  clip-path:var(--chamfer); background:var(--ink3); border:1px solid var(--line)}
.svc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .6s var(--ease), transform 1.1s var(--ease)}
.svc-media img.on{opacity:1; transform:scale(1)}
.svc-ticks{position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); z-index:4;
  display:grid; gap:10px; padding:16px 14px; background:rgba(8,9,12,.58);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line)}
.svc-ticks b{display:flex; align-items:center; gap:11px; font-size:.7rem; font-weight:800;
  letter-spacing:.12em; color:var(--fg3); transition:color .35s var(--ease)}
.svc-ticks b::before{content:attr(data-n); order:1}
.svc-ticks b::after{content:''; order:2; display:block; width:7px; height:46px;
  background-color:rgba(255,255,255,.26);
  background-image:linear-gradient(var(--brand),var(--brand));
  background-repeat:no-repeat; background-size:100% var(--f,0%)}
.svc-ticks b.on{color:var(--brand)}
@media (min-width:901px){
  .svc-grid{padding-right:124px}
  .svc-ticks{right:calc(var(--pad) - 14px)}
}
.svc-fallback{display:none}

/* ============ WHY ============ */
.why{background:var(--ink2); border-block:1px solid var(--line)}
.why-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,86px); align-items:center}
.why-fig{position:relative; clip-path:var(--chamfer); aspect-ratio:5/6; overflow:hidden}
.why-fig img{width:100%; height:100%; object-fit:cover; object-position:50% 28%}
.why-badge{position:absolute; left:0; bottom:0; background:var(--brand); color:#04121A;
  padding:20px 26px 18px; max-width:72%}
.why-badge b{display:block; font-size:clamp(2.1rem,3.4vw,3rem); font-weight:800;
  font-variation-settings:'wdth' 112; line-height:.9}
.why-badge span{display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-top:8px}
.why-body p+p{margin-top:18px}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:38px;
  background:var(--line); border:1px solid var(--line)}
.stat{background:var(--ink2); padding:22px 20px}
.stat b{display:block; font-size:clamp(1.35rem,2vw,1.8rem); font-weight:800;
  font-variation-settings:'wdth' 110; color:var(--brand); line-height:1}
.stat span{display:block; font-size:.74rem; letter-spacing:.04em; color:var(--fg2); margin-top:9px; line-height:1.4}

/* ============ WORK GALLERY ============ */
.work-head{display:grid; gap:16px; margin-bottom:clamp(30px,4vw,54px); max-width:62ch}
.gal{display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,14px)}
.gal::after{content:""; flex:999 1 0}
.gal button{border:0; padding:0; background:var(--ink3); position:relative; overflow:hidden;
  cursor:pointer; display:block; width:100%; clip-path:var(--chamfer)}
.gal button{flex:var(--r) 1 calc(var(--r) * clamp(150px,20vw,280px)); aspect-ratio:var(--r); height:auto}
.gal button img{width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease)}
.gal button::after{content:''; position:absolute; inset:0; background:rgba(8,9,12,.30);
  transition:background .4s; pointer-events:none}
.gal button:hover img{transform:scale(1.05)}
.gal button:hover::after{background:rgba(8,9,12,.02)}
.gal-cap{display:flex; align-items:center; gap:14px; margin-top:28px; color:var(--fg3); font-size:.8rem}

/* ============ PROCESS ============ */
.proc{background:var(--ink2); border-block:1px solid var(--line); overflow:hidden}
.proc-rail{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:clamp(28px,4vw,50px)}
.proc-card{background:var(--ink2); padding:clamp(24px,2.6vw,38px); position:relative;
  transition:background .35s var(--ease)}
.proc-card:hover{background:var(--ink3)}
.proc-card em{font-style:normal; display:block; font-size:2.6rem; font-weight:800;
  font-variation-settings:'wdth' 112; color:rgba(255,255,255,.07); line-height:.8; margin-bottom:18px}
.proc-card:hover em{color:var(--brandsoft)}
.proc-card h3{font-size:1.12rem; margin-bottom:12px}
.proc-card p{font-size:.92rem; color:var(--fg2)}

/* ============ AREA ============ */
.area-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,80px); align-items:start}
.towns{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.town{background:var(--ink); padding:17px 20px; display:flex; align-items:center; gap:12px;
  font-weight:600; font-size:.94rem; transition:background .3s, color .3s}
.town:hover{background:var(--ink3); color:var(--brand)}
.town::before{content:''; width:6px; height:6px; background:var(--brand); flex:0 0 auto; opacity:.55}
.area-note{margin-top:22px; font-size:.9rem; color:var(--fg3)}

/* ============ CONTACT ============ */
.ct{position:relative; overflow:hidden}
.ct-bg{position:absolute; inset:0; z-index:0}
.ct-bg img{width:100%; height:100%; object-fit:cover; opacity:.22}
.ct-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,var(--ink) 0%,rgba(8,9,12,.90) 40%,var(--ink) 100%)}
.ct-in{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,80px); align-items:start}
.ct-info{display:grid; gap:26px}
.ct-line{display:grid; gap:5px; padding-top:18px; border-top:1px solid var(--line)}
.ct-line b{font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3)}
.ct-line a,.ct-line span{font-size:clamp(1rem,1.3vw,1.16rem); font-weight:600; color:var(--fg)}
.ct-line a:hover{color:var(--brand)}
form{background:var(--ink2); border:1px solid var(--line); padding:clamp(24px,3vw,42px); clip-path:var(--chamfer)}
.fg{display:grid; gap:7px; margin-bottom:16px}
.fg label{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2)}
.fg input,.fg select,.fg textarea{
  width:100%; background:var(--ink); border:1px solid var(--line2); padding:14px 15px;
  color:var(--fg); font-size:.96rem; transition:border-color .25s, background .25s}
.fg textarea{min-height:118px; resize:vertical}
.fg input::placeholder,.fg textarea::placeholder{color:#7D8894}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none; border-color:var(--brand); background:#0A0E13}
.fg select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),linear-gradient(135deg,var(--brand) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px,6px 6px;
  background-repeat:no-repeat; padding-right:44px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.f-note{font-size:.78rem; color:var(--fg3); margin-top:14px; line-height:1.5}
.f-ok{display:none; text-align:center; padding:12px 0}
form.sent .f-hide{display:none}
form.sent .f-ok{display:block}
.f-ok b{display:block; font-size:1.3rem; font-weight:800; font-variation-settings:'wdth' 110;
  text-transform:uppercase; margin-bottom:10px; color:var(--brand)}
.f-check{width:68px; height:68px; display:block; margin:0 auto 18px}
.f-check circle{fill:none; stroke:var(--brand); stroke-width:2.5; stroke-dasharray:151; stroke-dashoffset:151}
.f-check path{fill:none; stroke:var(--brand); stroke-width:3.5; stroke-linecap:square; stroke-dasharray:36; stroke-dashoffset:36}
form.sent .f-check circle{animation:fDraw .6s var(--ease) forwards}
form.sent .f-check path{animation:fDraw .4s .5s var(--ease) forwards}
@keyframes fDraw{to{stroke-dashoffset:0}}

/* ============ FOOTER ============ */
footer{background:var(--ink2); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,76px) 28px}
.ft-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(26px,4vw,60px); align-items:start}
.ft-logo{height:38px; width:auto; margin-bottom:20px}
.ft-grid h4{font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg3); margin:0 0 16px}
.ft-list{display:grid; gap:9px; font-size:.92rem; color:var(--fg2)}
.ft-list a:hover{color:var(--brand)}
.ft-bot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top:clamp(36px,5vw,60px); padding-top:24px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--fg3)}

/* ============ LIGHTBOX ============ */
#lb{position:fixed; inset:0; z-index:9500; background:rgba(5,6,8,.985); display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,60px); opacity:0;
  transition:opacity .3s var(--ease)}
#lb.open{display:flex} #lb.vis{opacity:1}
#lb img{max-width:100%; max-height:86vh; object-fit:contain; width:auto}
#lb .lb-x,#lb .lb-p,#lb .lb-n{position:absolute; background:rgba(255,255,255,.06);
  border:1px solid var(--line2); width:50px; height:50px; cursor:pointer; color:var(--fg);
  display:grid; place-items:center; transition:background .25s, border-color .25s}
#lb .lb-x:hover,#lb .lb-p:hover,#lb .lb-n:hover{background:var(--brand); border-color:var(--brand); color:#04121A}
#lb .lb-x{top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); font-size:1.5rem; line-height:1}
#lb .lb-p{left:clamp(10px,2vw,26px); top:50%; margin-top:-25px}
#lb .lb-n{right:clamp(10px,2vw,26px); top:50%; margin-top:-25px}
#lb .lb-p::before,#lb .lb-n::before{content:''; width:11px; height:11px; border-top:2px solid currentColor;
  border-right:2px solid currentColor}
#lb .lb-p::before{transform:rotate(-135deg); margin-left:4px}
#lb .lb-n::before{transform:rotate(45deg); margin-right:4px}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:block}
  .tel{display:none}
  .nav-cta .btn{display:none}
  .why-grid,.area-grid,.ct-in{grid-template-columns:1fr}
  .why-fig{aspect-ratio:4/3; max-height:52vh}
  .proc-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr; gap:20px}
  .svc-media{aspect-ratio:16/10; order:-1; height:auto; width:100%; margin-left:0;
    max-height:28vh}
  .svc-media img{object-position:50% 45%}
  .svc-stack{min-height:clamp(282px,40vh,368px)}
  .svc-tags{margin-top:18px; gap:6px}
  .svc-tags i{font-size:.63rem; padding:6px 9px; letter-spacing:.1em}
  .svc-head{position:static; margin-bottom:14px; width:100%}
  .svc-head-in{justify-content:space-between}
  .svc-head h2{font-size:clamp(1.3rem,5.4vw,1.8rem)}
  .svc-panel h3{font-size:clamp(1.6rem,6.4vw,2.2rem)}
  .svc-panel p{font-size:.95rem}
  .svc-rail{align-items:flex-start; padding-top:92px; flex-direction:column; justify-content:center}
  .svc-ticks{right:var(--pad); left:var(--pad); top:auto; bottom:18px; transform:none;
    grid-auto-flow:column; grid-auto-columns:1fr; gap:7px; padding:11px 12px}
  .svc-ticks b::before{display:none}
  .svc-ticks b::after{width:100%; height:6px; background-size:var(--f,0%) 100%}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr}
  .town{padding:14px 15px; font-size:.88rem; gap:9px}
  .proc-rail{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .creds-in{gap:8px}
  .cred{flex:1 1 100%}
  .hero-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html.js [data-rv],html.js [data-rv-s]>*{opacity:1 !important; transform:none !important}
  html.js img[data-fade]{opacity:1 !important}
  .svc-rail{position:static; height:auto; display:block; padding:clamp(60px,8vw,110px) 0}
  .svc{height:auto !important}
  .svc-head{position:static; margin-bottom:26px}
  .svc-count{display:none}
  .svc-stack{position:static; min-height:0}
  .svc-panel{position:static; opacity:1; visibility:visible; transform:none; pointer-events:auto;
    padding-block:26px; border-top:1px solid var(--line)}
  .svc-media,.svc-ticks,.svc-bg{display:none}
  .svc-fallback{display:block}
}
@media (hover:none),(pointer:coarse){
  .cur-dot,.cur-ring{display:none}
}

/* ============ INNER PAGES (service and city pages) ============ */
.pg-hero{position:relative; overflow:hidden; padding-top:74px; min-height:min(78vh,720px); display:flex; align-items:flex-end}
.pg-hero .hero-media{inset:0}
.pg-hero .hero-in{padding-block:clamp(40px,7vh,84px)}
.pg-hero h1{font-size:clamp(2.3rem,5.6vw,4.9rem); max-width:16ch; margin-top:14px}
.pg-hero .lead{max-width:56ch; margin-top:20px; color:var(--fg)}
.pg-hero .hero-cta{opacity:1; transform:none}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg2)}
.crumbs a:hover{color:var(--brand)}
.crumbs span[aria-hidden]{color:var(--fg3)}
.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,84px); align-items:start}
.prose p{color:var(--fg2); max-width:62ch}
.prose p+p{margin-top:16px}
.prose h2{margin-bottom:24px}
.fact-list{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.fact-list div{background:var(--ink2); padding:18px 22px}
.fact-list b{display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:6px}
.fact-list span{color:var(--fg2); font-size:.95rem}
.sec-head{max-width:62ch; margin-bottom:clamp(30px,4vw,54px)}
.sec-head p{margin-top:16px}
.opt-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.opt{background:var(--ink); padding:clamp(24px,2.8vw,40px)}
.opt h3{font-size:clamp(1.12rem,1.6vw,1.4rem); margin-bottom:14px}
.opt p{color:var(--fg2); font-size:.95rem}
.opt dl{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:18px 0 0; font-size:.9rem}
.opt dt{color:var(--brand); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding-top:3px}
.opt dd{margin:0; color:var(--fg2)}
.drivers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.drivers li{background:var(--ink2); padding:22px 24px}
.drivers b{display:block; margin-bottom:6px}
.drivers span{color:var(--fg2); font-size:.94rem}
.city-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px)}
.city{background:var(--ink2); border:1px solid var(--line); display:flex; flex-direction:column}
.city img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
/* placeholder until the client supplies a photo */
.city-ph{aspect-ratio:4/3; background:var(--ink3); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.city-ph img{width:auto; height:28%; opacity:.18}
.city-body{padding:clamp(22px,2.4vw,32px)}
.city h3{font-size:clamp(1.15rem,1.6vw,1.45rem); margin-bottom:12px}
.city p{color:var(--fg2); font-size:.95rem}
.city .eyebrow{display:block; margin-bottom:10px}
.also{margin-top:clamp(26px,3vw,40px); color:var(--fg2); font-size:.95rem}
.also b{color:var(--fg); margin-right:8px}
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-weight:700; font-size:clamp(1rem,.4vw + .92rem,1.15rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--brand); font-size:1.5rem; font-weight:400}
.faq details[open] summary::after{content:'\2212'}
.faq details p{color:var(--fg2); padding:0 0 24px; max-width:70ch}
.cta-band{background:var(--ink2); border-top:1px solid var(--line)}
.cta-band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.cta-band h2{font-size:clamp(1.6rem,3.2vw,2.8rem); max-width:20ch}
.cta-band p{color:var(--fg2); margin-top:12px; max-width:52ch}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .city-grid{grid-template-columns:1fr}
  .pg-hero{min-height:auto}
}
@media (max-width:640px){
  .opt-grid,.drivers{grid-template-columns:1fr}
}