/* Barnes Scaffolding Wiltshire
   Blue and white, as the client asked (18 Sep 2026: "not keen on the yellow").
   Navy is sampled from their logo (#364d81). --hi is a pale sky blue accent
   used only on navy ground; on light ground the accent is the brand navy. */
:root{
  --navy:#364d81;
  --navy-d:#1b2748;
  --navy-dd:#121a33;
  --hi:#a9c8ff;
  --hi-d:#364d81;
  --ink:#151b2c;
  --body:#3f475a;
  --line:#dde1ea;
  --ground:#f6f7fa;
  --tint:#eaedf4;
  --white:#fff;
  --steel:#b9c0cf;
  --timber:#e4ebf8;
  --wrap:1200px;
  --r:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --disp:'Barlow Condensed','Arial Narrow',sans-serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--ground);color:var(--body);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--disp);color:var(--ink);line-height:1.02;margin:0 0 .5em;font-weight:700;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:1.45rem;font-weight:600;letter-spacing:.01em}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.narrow{max-width:800px}
.skip{position:absolute;left:-999px;top:0;background:var(--hi);color:var(--navy-dd);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px}
.sec :focus-visible,.form :focus-visible{outline-color:var(--navy)}
.sec--navy :focus-visible{outline-color:var(--hi)}

.eyebrow{font:600 .85rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin:0 0 1.1em;display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:28px;height:4px;background:var(--navy);border-radius:2px}
.eyebrow--hi{color:var(--hi)}
.eyebrow--hi::before{background:var(--hi)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;max-width:38em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1.05rem/1 var(--sans);padding:1em 1.5em;border-radius:var(--r);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--hi{background:var(--white);color:var(--navy-dd)}
.btn--hi:hover{background:var(--hi)}
.btn--navy{background:var(--navy-d);color:var(--white)}
.btn--navy:hover{background:var(--navy)}
.btn--ghost-light{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn--ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.1)}
.link{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:3px solid var(--navy);padding-bottom:2px}
.link:hover{color:var(--navy-d);border-color:var(--navy-d)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--navy-d);color:var(--white);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr__in{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font:700 1.3rem/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.brand__txt i{font:600 .8rem/1 var(--sans);letter-spacing:.4em;text-transform:uppercase;font-style:normal;margin-top:5px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:var(--white);text-decoration:none;font-weight:500;padding:8px 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--hi)}
.hdr__tel,.hdr__quote{padding:.7em 1.1em;font-size:1rem;white-space:nowrap}
.hdr__quote{border-width:1.5px}
@media (min-width:861px){.hdr__quote{margin-right:-14px}}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:3px;background:var(--white);margin:5px 0;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0;transform:scaleX(0)}   /* iOS showed the middle bar through the X (Mary, 22 Sep 2026) */
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* the scaffold tube divider: a steel tube with couplers */
.tube{height:10px;background:linear-gradient(#e9edf4,#aab2c3 45%,#7d869b);position:relative}
.tube::after{content:"";position:absolute;inset:-4px 0;background:repeating-linear-gradient(90deg,transparent 0 172px,#5d667c 172px 176px,var(--navy) 176px 190px,#5d667c 190px 194px,transparent 194px 360px);pointer-events:none}
.tube--bottom{position:absolute;left:0;right:0;bottom:0}

/* hero */
.hero{position:relative;background:var(--navy-dd);color:var(--white);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 45%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,26,51,.92) 0%,rgba(18,26,51,.78) 34%,rgba(18,26,51,.28) 66%,rgba(18,26,51,.08) 100%)}
.hero__in{display:flex;align-items:center;min-height:min(78vh,760px);padding:clamp(56px,8vw,110px) 0 clamp(70px,9vw,120px)}
.hero__copy{max-width:640px}
.hero h1{color:var(--white)}
.hero .lede{color:#d5dbea}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:2em}
.hero h1{text-shadow:0 2px 24px rgba(12,17,34,.45)}
.hero__ticks{list-style:none;padding:0;margin:1.6em 0 0;display:grid;gap:12px}
.hero__ticks li{position:relative;padding-left:40px;font:600 1.12rem/1.35 var(--sans);color:var(--white)}
.hero__ticks li::before{content:"";position:absolute;left:0;top:-.05em;width:26px;height:26px;border:2px solid var(--white);border-radius:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/18px no-repeat}

/* the band under the hero: the scaffold drawing beside the at-a-glance facts.
   The client asked for the drawing to stay near the top, under the photo and ticks. */
.intro{background:var(--navy-dd);color:#d5dbea;padding:clamp(40px,6vw,80px) 0}
.intro__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.intro__art{min-width:0;order:2}
.intro__facts{display:grid;grid-template-columns:1fr 1fr;gap:0}
.intro__facts>div{padding:26px 24px 26px 0;border-top:1px solid rgba(255,255,255,.16)}
.intro__facts>div:nth-child(even){padding-left:24px;border-left:1px solid rgba(255,255,255,.16)}
.intro__facts>div:nth-child(-n+2){border-top:0}
.intro__facts b{display:block;font:700 1.7rem/1.05 var(--disp);text-transform:uppercase;color:var(--white);margin-bottom:4px}
.intro__facts span{font-size:.95rem}
/* .wait removes the animation entirely (not just pauses it), so the drawing starts from nothing the moment
   site.js lets it go, rather than having quietly run while the visitor was still reading the hero. */
.scaf-wrap.wait .s,.scaf-wrap.wait .banner{animation:none}

.scaf{width:100%;height:auto;overflow:visible}
.scaf .s{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--t,.6s) var(--ease) var(--d,0s) forwards}
.scaf .h{stroke:rgba(255,255,255,.9);stroke-width:2.5}
.scaf .g{stroke:rgba(255,255,255,.35);stroke-width:2}
.scaf .t{stroke:var(--steel);stroke-width:4}
.scaf .b{stroke:#8e97ab;stroke-width:3}
.scaf .p{stroke:var(--timber);stroke-width:6;stroke-linecap:butt}
.scaf .w{stroke:var(--timber);stroke-width:6;stroke-linecap:butt}
.scaf .l{stroke:var(--hi);stroke-width:2.5}
.scaf .banner{opacity:0;transform:translateY(-8px);animation:drop .5s var(--ease) var(--d) forwards}
.scaf .banner rect{fill:var(--navy);stroke:var(--white);stroke-width:1.5}
.scaf .banner text{fill:var(--white);font:700 8.5px var(--disp);letter-spacing:.04em}
.scaf .banner .sm{font:500 5px var(--sans);letter-spacing:.2em}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drop{to{opacity:1;transform:none}}

/* facts strip */
.facts{background:var(--white);border-bottom:1px solid var(--line)}
.facts__in{display:grid;grid-template-columns:repeat(4,1fr)}
.facts__in>div{padding:30px 24px;border-left:1px solid var(--line)}
.facts__in>div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font:700 1.7rem/1.05 var(--disp);text-transform:uppercase;color:var(--navy-d)}
.facts span{font-size:.95rem}

/* sections */
.sec{padding:clamp(64px,9vw,120px) 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--navy{background:var(--navy-d);color:#d5dbea}
.sec--navy h2,.sec--navy h3{color:var(--white)}
.sec__head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.sec__head--row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.sec__head--row h2{margin:0;max-width:16em}
.sec__more{margin:40px 0 0}

/* page heads */
.phead{position:relative;background:var(--navy-d);color:#d5dbea;padding:clamp(56px,8vw,104px) 0 clamp(64px,8vw,110px);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px}
.phead h1{color:var(--white);max-width:14em}
.plain{padding:clamp(56px,8vw,100px) 0}
.plain h1{font-size:clamp(2.4rem,5vw,3.6rem)}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
.svc img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .6s var(--ease)}
.svc>div{padding:22px 22px 24px;border-top:5px solid var(--navy);position:relative}
.svc>div::before{content:"";position:absolute;top:-5px;left:22px;width:36px;height:5px;background:var(--hi)}
.svc h3{margin-bottom:.35em}
.svc p{margin:0;font-size:1rem}
.svc>div{display:flex;flex-direction:column;flex:1}
.svc__more{margin-top:auto;padding-top:18px;font:600 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.svc__more::after{content:"";display:inline-block;width:18px;height:2px;background:currentColor;margin-left:10px;vertical-align:middle;transition:width .3s var(--ease)}
.svc:hover .svc__more::after{width:32px}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(27,39,72,.35)}
.svc:hover img{transform:scale(1.04)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--top{align-items:start}
.split__media img{border-radius:var(--r);width:100%}
.split__media--stack{display:grid;gap:22px}
.fam{background:var(--navy-d);color:#d5dbea;border-radius:var(--r);padding:clamp(28px,4vw,48px);position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px}
.fam__mark{width:84px;height:auto;margin-bottom:22px}
.fam blockquote{margin:0 0 1.2em;font:700 clamp(2rem,3.4vw,2.9rem)/1.02 var(--disp);text-transform:uppercase;color:var(--white);text-wrap:balance}
.fam ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fam li{padding:18px 0;border-top:1px solid rgba(255,255,255,.16);font-size:1rem;line-height:1.55}
.fam li b{display:block;font:600 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--hi);margin-bottom:8px}
.ticks{list-style:none;padding:0;margin:0 0 2em;display:grid;gap:16px}
.ticks li{padding-left:40px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:24px;border-radius:3px;background:var(--hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121a33' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/18px no-repeat}
.ticks b{color:var(--white)}
.prose h2{margin-top:1.4em;font-size:clamp(1.7rem,3vw,2.3rem)}
.prose h2:first-child{margin-top:0}

/* gallery */
/* Justified rows, like a photo book: every tile in a row shares one height, widths follow each photo's
   shape (--ar, set by build.py), and each row runs edge to edge, so there are no holes (client, 21 Sep 2026).
   A partial last row stretches to fill; max-height caps how tall it can get and object-fit crops the rest.
   Keep sections to counts whose rows fill: on a desktop three landscapes, or two landscapes plus two portraits,
   make a full row, and a row of two landscapes plus one portrait fills without cropping. Avoid one photo alone. */
.gal{display:flex;flex-wrap:wrap;gap:12px}
.gal__h{margin-top:2.2em;font-size:clamp(1.7rem,3vw,2.4rem)}
.gal__h:first-child{margin-top:0}
.gal__p{max-width:44em;margin-bottom:1.6em}
.shot{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--navy-d);--ar:1.3333;flex:var(--ar) 1 calc(var(--ar) * 250px);aspect-ratio:var(--ar);max-height:380px;min-width:0}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .3s}
.shot__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;color:var(--white);font-size:.92rem;font-weight:500;line-height:1.3;background:linear-gradient(transparent,rgba(18,26,51,.88));transform:translateY(8px);opacity:0;transition:opacity .3s,transform .3s var(--ease)}
.shot:hover img,.shot:focus-visible img{transform:scale(1.05)}
.shot:hover .shot__cap,.shot:focus-visible .shot__cap{opacity:1;transform:none}
@media (hover:none){.shot__cap{opacity:1;transform:none}}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{margin:0;background:var(--white);border-radius:var(--r);padding:30px 28px;border-top:5px solid var(--navy);display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line)}
.rev blockquote{margin:0 0 1.4em;color:var(--ink);font-size:1.1rem;line-height:1.55;flex:1}
.rev figcaption{font-weight:700;color:var(--navy-d)}
.rev figcaption span{display:block;font-weight:400;font-size:.88rem;color:var(--body)}
.revs__meta{margin:.2em 0 0;font-weight:500}
.revs__meta .stars{color:#e8a712;letter-spacing:.08em;font-size:1.05em;margin-right:.25em}
.sec__head .revs__meta{max-width:none}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:25px;height:8px;background:linear-gradient(#e9edf4,#aab2c3 45%,#7d869b);border-radius:4px}
.steps li{padding:0 28px 0 0;position:relative}
.steps__n{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--navy-d);color:var(--white);font:700 1.7rem/1 var(--disp);margin-bottom:22px;border:5px solid var(--ground);position:relative}
.steps h3{margin-bottom:.3em}
.steps p{font-size:1rem;margin:0}

/* values */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.16)}
.vals>div{padding:30px 28px 0 0;border-left:1px solid rgba(255,255,255,.16);padding-left:28px}
.vals>div:first-child{border-left:0;padding-left:0}
.vals h3{color:var(--hi)}
.vals p{margin:0;font-size:1rem}

/* service rows */
.svc-list{display:grid;gap:clamp(56px,8vw,110px)}
.row{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.row--flip .row__media{order:2}
.row__media{position:relative}
.row__media img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.row__media::after{content:"";position:absolute;left:-12px;bottom:-12px;width:96px;height:96px;border-left:6px solid var(--navy);border-bottom:6px solid var(--navy);pointer-events:none}
.row--flip .row__media::after{left:auto;right:-12px;border-left:0;border-right:6px solid var(--navy)}
.dots{list-style:none;padding:0;margin:1.4em 0 0;display:flex;flex-wrap:wrap;gap:8px}
.dots li{font-size:.92rem;font-weight:600;color:var(--navy-d);background:var(--tint);padding:.45em .9em;border-radius:99px}

/* cta band */
.cta-band{position:relative;background:var(--navy);color:#e6eaf4;padding:clamp(56px,7vw,92px) 0 clamp(66px,8vw,102px)}
.cta-band h2{color:var(--white);margin-bottom:.3em}
.cta-band p{margin:0;max-width:36em;font-size:1.12rem}
.cta-band__in{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.cta-band__btns{display:flex;gap:14px;flex-wrap:wrap}

/* contact */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
.contact__ways{display:grid;gap:14px}
.way{display:block;background:var(--white);border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:var(--r);padding:20px 22px;text-decoration:none;transition:transform .25s var(--ease),border-color .2s}
a.way:hover{transform:translateX(4px);border-left-color:var(--hi-d)}
.way span{display:block;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--body);margin-bottom:6px}
.way b{font:700 1.9rem/1.1 var(--disp);color:var(--navy-d);text-transform:uppercase}
.way .way__sm{font:600 1.02rem/1.4 var(--sans);text-transform:none;overflow-wrap:anywhere}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,44px);border-top:6px solid var(--navy)}
.form h2{font-size:2rem}
.form label{display:block;font-weight:600;color:var(--ink);margin-bottom:18px;font-size:.98rem}
.form small{font-weight:400;color:var(--body);margin-left:.4em}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;padding:.85em .9em;font:400 1rem var(--sans);color:var(--ink);background:var(--ground);border:1.5px solid #c4cad8;border-radius:var(--r)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(54,77,129,.35);border-color:var(--navy);background:var(--white)}
.form [aria-invalid=true]{border-color:#b3261e}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__err{color:#b3261e;font-weight:600}
.form__note{font-size:.92rem;margin:1.2em 0 0}
.form .btn{width:100%}
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
.faq summary{cursor:pointer;padding:18px 52px 18px 22px;font-weight:600;color:var(--ink);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font:600 1.7rem/1 var(--disp);color:var(--navy);transition:rotate .25s var(--ease)}
.faq[open] summary::after{rotate:45deg}
.faq p{padding:0 22px 20px;margin:0}

/* footer */
.ftr{background:var(--navy-dd);color:#b9c1d6;padding:64px 0 28px;font-size:.98rem}
.ftr a{color:#e6eaf4;text-decoration:none}
.ftr a:hover{color:var(--hi)}
.ftr__grid{display:grid;grid-template-columns:1.3fr 1.2fr .7fr 1fr;gap:36px}
.ftr h2{font:600 .82rem/1 var(--sans);letter-spacing:.16em;color:var(--hi);margin-bottom:1.2em}
.ftr__tag{margin-top:16px}
.ftr__grid p{overflow-wrap:anywhere}
.ftr__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem}
.ftr__legal p{margin:0}
.callbar{display:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(12,17,34,.95);display:grid;place-items:center;padding:20px}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1400px,100%);text-align:center}
.lb img{max-height:82vh;max-width:100%;margin:0 auto;border-radius:var(--r)}
.lb figcaption{color:#e6eaf4;margin-top:14px}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:var(--white);border:0;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer}
.lb button:hover{background:var(--white);color:var(--navy-dd)}
.lb__x{top:18px;right:18px}
.lb__prev{left:18px;top:50%;translate:0 -50%}
.lb__next{right:18px;top:50%;translate:0 -50%}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .svc-grid,.revs{grid-template-columns:repeat(2,1fr)}
  .shot{flex-basis:calc(var(--ar) * 180px);max-height:320px}
  .vals,.steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .steps::before{display:none}
  .vals>div:nth-child(3){border-left:0;padding-left:0}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .facts__in>div:nth-child(3){border-left:0;padding-left:0}
  .facts__in>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:860px){
  .nav{position:fixed;inset:72px 0 auto 0;background:var(--navy-d);flex-direction:column;gap:0;padding:8px 20px 24px;margin:0;transform:translateY(-130%);transition:transform .35s var(--ease);box-shadow:0 30px 40px rgba(0,0,0,.35)}
  .nav.open{transform:none}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.15rem}
  .burger{display:block}
  .hdr__in{gap:12px}
  .hdr__tel{margin-left:auto}
  .split,.row,.contact,.intro__in{grid-template-columns:1fr}
  .intro__art{order:0;max-width:520px}
  .recent{display:none}
  .hdr__quote{display:none}
  .hero__in{min-height:0}
  .hero__bg::after{background:linear-gradient(180deg,rgba(18,26,51,.9) 0%,rgba(18,26,51,.8) 55%,rgba(18,26,51,.55) 100%)}
  .row--flip .row__media{order:0}
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);color:var(--white);text-align:center;font-weight:700;padding:15px 12px;text-decoration:none;box-shadow:0 -6px 20px rgba(0,0,0,.2)}
  body{padding-bottom:54px}
}
@media (max-width:600px){
  .svc-grid,.revs,.vals,.steps,.ftr__grid,.form__row{grid-template-columns:1fr}
  .vals>div{border-left:0;padding-left:0}
  /* service cards keep their full-size photos on phones (client, 21 Sep 2026: "prefer the original larger photos") */
  /* Our Work on a phone: a tidy two-column grid of equal square tiles, no caption overlays (the lightbox still shows
     the full photo and its caption). Ollie's screenshots, 22 Sep 2026: the justified rows looked uneven and cluttered
     at phone width. Desktop and tablet keep the justified rows. */
  .gal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .shot{flex:none;aspect-ratio:1;max-height:none}
  /* an odd number of photos would leave one empty cell (Mary, 22 Sep 2026): the last photo spans both columns
     at the same height as the squares, so the grid ends flush */
  .shot:nth-child(odd):last-child{grid-column:1/-1;aspect-ratio:2.05}
  .shot__cap{display:none}
  .hdr__tel-lbl{display:none}
  .brand__txt i{font-size:.66rem;letter-spacing:.34em;margin-top:4px}
  .brand__txt b{font-size:1.05rem}
  .brand img{width:36px;height:auto}
  .hdr__tel{padding:.6em .7em;font-size:.88rem}
  .hdr__in{gap:8px}
  .brand{gap:8px}
  .hero__btns .btn,.cta-band__btns .btn{width:100%}
  .cta-band__btns{width:100%}
  .lb__prev,.lb__next{top:auto;bottom:18px;translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  /* the scaffold drawing keeps its pace: a slow line drawing, no movement of the page, and it is the client's
     logo idea. Haydn's laptop has Reduce Motion on, which made it appear fully drawn (22 Sep 2026). */
  .scaf .s{animation-duration:var(--t,.6s)!important;animation-delay:var(--d,0s)!important}
  .scaf .banner{animation-duration:.5s!important;animation-delay:var(--d,0s)!important}
}