/* Pro Printer Repairs — design system. Built 20 September 2026.
   Brief: beat gom.com.au. Deep charcoal + PPR red, fluid type, generous rhythm, soft depth. */

:root{
  --red:#e01e26; --red-dk:#b3141a; --red-lt:#ff3b43;
  --ink:#101114; --ink-2:#1b1d22; --ink-3:#2b2f38;
  --text:#2b2f38; --muted:#6a7180; --line:#e6e8ec; --line-2:#d7dae1;
  --paper:#ffffff; --mist:#f6f7f9; --mist-2:#eef0f4;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --r:12px; --r-sm:8px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(16,17,20,.04),0 2px 8px rgba(16,17,20,.04);
  --sh-2:0 4px 12px rgba(16,17,20,.06),0 12px 32px rgba(16,17,20,.07);
  --sh-3:0 12px 28px rgba(16,17,20,.10),0 32px 64px rgba(16,17,20,.12);
  --wrap:1220px;
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:88px; --s7:120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dk);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1.1em}
p strong{font-weight:600;color:var(--ink)}
ul,ol{padding-left:1.25em}
hr{border:0;border-top:1px solid var(--line);margin:var(--s4) 0}
h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;font-weight:700;
  color:var(--ink);line-height:1.02;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,5.2vw,4.4rem)}
h2{font-size:clamp(2rem,3.4vw,3rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.6rem)}
h4{font-size:1.2rem}
h2 em,h3 em{font-style:normal;color:var(--red)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6em 1.2em;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0;top:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.035em;font-weight:700;
  font-size:1.16rem;padding:.86em 1.7em;border-radius:var(--r-sm);border:2px solid transparent;
  cursor:pointer;line-height:1.1;text-align:center;text-decoration:none!important;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-call{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(224,30,38,.28)}
.btn-primary:hover,.btn-call:hover{background:var(--red-dk);color:#fff;box-shadow:0 10px 26px rgba(224,30,38,.36);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.ico-phone{width:1.05em;height:1.05em;display:inline-block;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/></svg>") center/contain no-repeat}

/* ---------- Utility bar + header ---------- */
.util{background:var(--ink);color:rgba(255,255,255,.72);font-size:.86rem}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:20px}
.util a{color:#fff}
.util .areas b{color:#fff;font-weight:600}
.util .areas{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(16,17,20,.03)}
.header-row{display:flex;align-items:center;gap:22px;min-height:88px}
.brand{flex:0 0 auto;width:168px;display:block}
.brand img{width:168px;max-width:none;height:auto;display:block}
.site-nav{flex:1}
.menu,.submenu,.submenu-2{list-style:none;margin:0;padding:0}
.menu{display:flex;gap:2px;justify-content:center}
.menu-item{position:relative}
.menu-item>a,.menu-parent{display:flex;align-items:center;padding:.62em .72em;color:var(--ink);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-weight:600;font-size:1.05rem;
  background:none;border:0;font-family:var(--display);cursor:pointer;border-radius:var(--r-sm);white-space:nowrap;
  text-decoration:none!important;position:relative;transition:color .15s}
.menu-item>a::after,.menu-parent::after{content:"";position:absolute;left:.72em;right:.72em;bottom:.22em;height:3px;
  background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.menu-item>a:hover::after,.menu-parent:hover::after,.menu-item.current>a::after{transform:scaleX(1)}
.menu-item>a:hover,.menu-parent:hover,.menu-item.current>a{color:var(--red)}
.chev{width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin:0 0 .22em .45em;display:inline-block}
.submenu{position:absolute;top:100%;left:0;min-width:286px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:10px;display:none;z-index:95;overflow:hidden}
.submenu::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red)}
.menu-item.open>.submenu,.menu-item:hover>.submenu,.menu-item:focus-within>.submenu{display:block}
.submenu li a{display:block;padding:.58em .8em;color:var(--text);border-radius:var(--r-sm);font-size:.97rem;text-decoration:none!important;transition:background .14s,color .14s}
.submenu li a:hover,.submenu li.current>a{background:var(--mist);color:var(--red-dk)}
.submenu-2{padding-left:.8em}
.submenu-2 li a{font-size:.9rem;color:var(--muted)}
.nav-toggle{display:none;background:none;border:2px solid var(--line-2);border-radius:var(--r-sm);padding:.5em .8em;
  font-family:var(--display);text-transform:uppercase;font-weight:700;color:var(--ink);cursor:pointer;align-items:center;gap:.55em;margin-left:auto}
.bars{display:inline-block;width:18px;height:2px;background:currentColor;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.bars::before{top:-6px}.bars::after{top:6px}
.header-call{font-size:1.02rem;padding:.72em 1.15em}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero.photo{background:var(--ink) url(/static/img/hero.jpg?v=202609250224) center right/cover no-repeat;min-height:clamp(480px,66vh,720px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(11,12,14,.96) 0%,rgba(11,12,14,.9) 34%,rgba(11,12,14,.6) 56%,rgba(11,12,14,.18) 78%,rgba(11,12,14,.05) 100%)}
.hero::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--red),var(--red-dk))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero-box{max-width:740px}
.hero-box h1,.hero-box h2,.hero-box>h2:first-child{font-size:clamp(2.7rem,5.6vw,4.9rem);margin-bottom:.22em;letter-spacing:-.005em}
.hero-box h1::after,.hero-box h2::after{content:"";display:block;width:84px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--red-lt));margin:.34em 0 0}
.hero-sub{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.55;color:rgba(255,255,255,.88);margin:1.15em 0 0;max-width:600px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s4)}
.hero-cta .btn{font-size:1.24rem;padding:1em 1.9em}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(4px);background:rgba(255,255,255,.06)}
.hero .btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.trust{list-style:none;padding:var(--s3) 0 0;margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;gap:12px 30px;
  border-top:1px solid rgba(255,255,255,.16)}
.trust li{position:relative;padding-left:26px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.045em;font-size:1.06rem;color:rgba(255,255,255,.94)}
.trust li::before{content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;background:var(--red-lt);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}

/* page head (inner pages without a photo hero) */
.page-head{position:relative;background:var(--ink) url(/static/img/hero.jpg?v=202609250224) center 35%/cover no-repeat;color:#fff;
  padding:clamp(56px,7vw,96px) 0 clamp(52px,6vw,84px);overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(11,12,14,.96) 0%,rgba(11,12,14,.9) 40%,rgba(11,12,14,.66) 70%,rgba(11,12,14,.4) 100%)}
.page-head::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--red),var(--red-dk))}
.page-head .wrap{position:relative;z-index:2}
.page-head h1,.page-head h2{color:#fff;font-size:clamp(2.3rem,4.4vw,3.8rem);margin-bottom:.3em;max-width:900px}
.page-head h1::after,.page-head h2::after{content:"";display:block;width:84px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--red-lt));margin:.34em 0 0}
.page-head p{color:rgba(255,255,255,.86);max-width:780px}
.page-head .date{color:rgba(255,255,255,.7)}
.page-head .btn-outline{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.page-head .btn-outline:hover{background:#fff;color:var(--ink)}
.page-head .hero-cta{margin-top:var(--s3)}

/* ---------- Sections ---------- */
.sec{padding:clamp(56px,7.5vw,110px) 0;position:relative}
.sec.alt{background:var(--mist)}
.sec>.wrap>h2{text-align:center;max-width:980px;margin-left:auto;margin-right:auto}
.sec>.wrap>h2:first-child::after{content:"";display:block;width:72px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--red-lt));margin:.48em auto 0}
.sec>.wrap>p{max-width:960px;margin-left:auto;margin-right:auto;font-size:1.06rem}
.sec>.wrap>p.lead{text-align:center;max-width:860px;font-size:1.2rem;color:var(--muted);line-height:1.62}
.sec>.wrap>h2+.cols,.sec>.wrap>p.lead+.cols,.sec>.wrap>h2+.service-grid{margin-top:var(--s5)}
.sec-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1.04;color:var(--ink);text-align:center;max-width:980px;margin:0 auto 1em}
.sec-title::after{content:"";display:block;width:64px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--red-lt));margin:.5em auto 0}
.sec.band .sec-title,.sec.band .sec-title strong{color:#fff}

/* dark bands */
.sec.band{background:var(--ink);color:#fff;padding:clamp(52px,6.5vw,92px) 0;position:relative;overflow:hidden}
.sec.band::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--red) 0,var(--red-lt) 34%,transparent 34%)}
.sec.band h1,.sec.band h2,.sec.band h3{color:#fff}
.sec.band p,.sec.band li,.sec.band p strong{color:rgba(255,255,255,.88)}
.sec.band a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.sec.band>.wrap>h2:first-child::after{background:linear-gradient(90deg,var(--red),var(--red-lt))}
.sec.band.red{background:linear-gradient(120deg,var(--red-dk),var(--red))}
.sec.band.red::before{background:rgba(255,255,255,.4)}
.sec.band.red .btn-primary{background:#fff;color:var(--red-dk);box-shadow:none}

/* proof band: the GOM-beating stats strip */
.sec.band.proof{padding:clamp(60px,7vw,100px) 0}
.sec.band.proof>.wrap>h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.4em}
.sec.band.proof>.wrap>p{text-align:center;color:rgba(255,255,255,.72)}
.sec.band.proof .cols.icons{background:transparent;border:0;gap:0;margin-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.sec.band.proof .cols.icons .col{background:transparent;border-left:1px solid rgba(255,255,255,.12);
  padding:var(--s4) var(--s3);transition:background .18s}
.sec.band.proof .cols.icons .col:first-child{border-left:0}
.sec.band.proof .cols.icons .col:hover{background:rgba(255,255,255,.04)}
.sec.band.proof .cols.icons .col h2{color:#fff;font-size:clamp(1.3rem,1.8vw,1.75rem)}
.sec.band.proof .cols.icons .cap{color:rgba(255,255,255,.7)}
.sec.band.proof .ico svg{fill:var(--red-lt)}

/* ---------- Columns ---------- */
.cols{display:grid;gap:var(--s4);align-items:center;margin:0 0 1rem}
.cols.n1{grid-template-columns:1fr}
.cols.n2{grid-template-columns:repeat(2,1fr)}
.cols.n3{grid-template-columns:repeat(3,1fr)}
.cols.n4{grid-template-columns:repeat(4,1fr)}
.cols.n5{grid-template-columns:repeat(5,1fr)}
.cols.n6{grid-template-columns:repeat(6,1fr)}
.col>*:last-child{margin-bottom:0}
.col>h2{font-size:clamp(1.4rem,2vw,1.9rem)}
.cols.balanced{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.cols.balanced .col p{font-size:1.06rem}

/* proof / feature cards */
.cols.icons{align-items:stretch;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line)}
.cols.icons .col{background:#fff;border:0;padding:var(--s5) var(--s3);text-align:center;height:100%;
  display:flex;flex-direction:column;align-items:center;transition:background .2s}
.cols.icons .col:hover{background:var(--mist)}
.cols.icons .col h2{font-size:clamp(1.2rem,1.7vw,1.6rem);margin:.6em 0 .35em;line-height:1.06}
.cols.icons .ico{width:66px;height:66px;margin:0 auto;display:grid;place-items:center}
.cols.icons .ico svg{width:66px;height:66px;fill:var(--red);display:block}
.cols.icons .cap{font-size:.98rem;color:var(--muted);margin:0;max-width:250px;line-height:1.55}

/* intent tiles */
.cols.buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s2);margin-top:var(--s5);align-items:stretch}
.cols.buttons .col{display:block}
.cols.buttons .btn{width:100%;background:var(--ink);color:#fff;border:0;border-radius:var(--r);
  padding:1.7em 1.2em;font-size:1.32rem;display:flex;position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.cols.buttons .btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red);transition:height .18s}
.cols.buttons .btn:hover{background:var(--ink-2);color:#fff;transform:translateY(-4px);box-shadow:var(--sh-3)}
.cols.buttons .btn:hover::after{height:100%;background:linear-gradient(180deg,rgba(224,30,38,0),rgba(224,30,38,.22))}
.sec.band .cols.buttons .btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}

/* product + media cards */
.cols.products{align-items:stretch}
.cols.products .col{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s}
.cols.products .col:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cols.products .col figure.image img{max-height:230px;width:auto;margin:0 auto var(--s2)}
.cols.products .col p{margin:.25em 0;font-size:.96rem}
.cols.media .col figure.image img{border-radius:var(--r);box-shadow:var(--sh-2)}
.cols.logos .col figure.image img{max-height:56px;width:auto;filter:grayscale(1);opacity:.78}
.cols.n2 .col figure.image img{max-height:none}

/* ---------- Figures, galleries, logo strip ---------- */
figure.image{margin:var(--s3) 0}
figure.image img{margin:0 auto;border-radius:var(--r-sm)}
figure.image.banner{margin:var(--s3) auto;max-width:1000px}
figure.image.banner img{width:100%;border-radius:var(--r);box-shadow:var(--sh-2)}
figcaption{font-size:.95rem;color:var(--muted);text-align:center;margin-top:.7em}
.gallery,.slideshow{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s2);align-items:center;margin:var(--s3) 0}
.gallery figure,.slideshow figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px;display:flex;align-items:center;justify-content:center;min-height:92px;transition:box-shadow .18s,transform .18s}
.gallery figure:hover,.slideshow figure:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.gallery img,.slideshow img{max-height:48px;width:auto;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.gallery figure:hover img,.slideshow figure:hover img{filter:none;opacity:1}
.gallery.logostrip{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--line);margin-top:var(--s5)}
.gallery.logostrip figure{border:0;border-radius:0;min-height:110px}
.slideshow.cards{grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.slideshow.cards figure{min-height:220px;padding:var(--s3);border-radius:var(--r);box-shadow:var(--sh-1)}
.slideshow.cards img{max-height:180px;filter:none;opacity:1}

/* ---------- Tick lists ---------- */
.ticks{list-style:none;padding:0;margin:0 0 1.3em;display:grid;grid-template-columns:1fr 1fr;gap:8px var(--s3)}
.ticks li{padding:.34em 0 .34em 1.85em;position:relative;font-weight:500}
.ticks li em,.ticks li strong{font-style:normal}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:16px;background:var(--red);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.col>.ticks{grid-template-columns:1fr}
.sec.band .ticks li{color:#fff}

/* ---------- The near-me service block (the volume we are chasing) ---------- */
.service-section{background:var(--mist)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s3) var(--s3);
  box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.service-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--red),var(--red-dk))}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.service-card p{margin:0;font-size:1rem;line-height:1.62}
.service-card strong{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:1.35rem;letter-spacing:.02em;margin-bottom:.4em;color:var(--ink);line-height:1.08}
.service-links{margin-top:var(--s5);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.near-me{margin:1.6em 0 0;padding:var(--s3) var(--s4);background:var(--mist);border-radius:var(--r);
  border-left:5px solid var(--red)}
.sec.alt .near-me{background:#fff}
.near-me p{font-size:1.02rem;margin:0 0 .6em}
.near-me p:last-child{margin:0}

/* ---------- Steps, areas, FAQ ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s5)}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s3);
  box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.step .num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(140deg,var(--red),var(--red-dk));color:#fff;font-family:var(--display);
  font-size:1.5rem;font-weight:800;line-height:1;margin-bottom:.7em;box-shadow:0 6px 16px rgba(224,30,38,.3)}
.step h3{font-size:1.3rem;margin-bottom:.45em}
.step p{margin:0;font-size:.98rem;line-height:1.6}
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s5)}
.area{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);box-shadow:var(--sh-1);
  border-top:4px solid var(--red);transition:transform .18s,box-shadow .18s}
.area:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.area h3{font-size:1.2rem;margin-bottom:.35em}
.area p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.58}
.sec .cols.n3 .col{background:var(--mist);border-radius:var(--r);padding:var(--s4) var(--s3);border-left:4px solid var(--red)}
.sec.alt .cols.n3 .col{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);box-shadow:var(--sh-1)}
.sec .cols.n3 .col h3{font-size:1.28rem}
.faq{max-width:940px;margin:var(--s5) auto 0}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;
  box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .18s}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{cursor:pointer;padding:20px 56px 20px 24px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.02em;font-size:1.25rem;color:var(--ink);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:14px;height:14px;margin-top:-7px;
  border-right:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(45deg) translateY(-25%);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.faq details p{margin:0;padding:0 24px 22px;color:var(--text)}

/* ---------- Hero detail band (the original hero copy, re-homed) ---------- */
.hero-detail{background:var(--ink);color:#fff;padding:clamp(52px,6.5vw,92px) 0;position:relative;overflow:hidden}
.hero-detail::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--red) 0,var(--red-lt) 34%,transparent 34%)}
.hero-detail h2,.hero-detail h3{color:#fff}
.hero-detail p,.hero-detail li{color:rgba(255,255,255,.86)}
.hero-detail a{color:#fff}
.hero-detail .cols{gap:var(--s5);align-items:center}
.hero-detail .cols.n2{grid-template-columns:1.3fr .7fr}
.hero-detail .col.text{order:1}
.hero-detail .col.visual{order:2}
.hero-detail .col.visual figure{margin:0}
.hero-detail .col.visual img{max-height:290px;width:auto;margin:0 auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
.hero-detail .tagline{font-family:var(--display);text-transform:uppercase;letter-spacing:.025em;
  font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.08;color:#fff;margin:0 0 .6em}
.hero-detail .tagline br{display:none}
.hero-detail .tagline strong{font-weight:700;color:#fff}
.hero-detail .tagline::after{content:"";display:block;width:72px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--red-lt));margin:.42em 0 0}
.hero-detail .quote{font-style:italic;color:rgba(255,255,255,.78);border-left:4px solid var(--red);
  padding-left:18px;margin:0 0 1.5em;font-size:1.12rem}
.hero-detail .chips{line-height:2.1;font-size:.93rem}
.hero-detail .chips .dot{display:none}
.hero-detail .chip{display:inline-block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.24em .9em;margin:0 .35em .45em 0;color:#fff;white-space:nowrap;transition:background .16s}
.hero-detail .chip:hover{background:rgba(224,30,38,.24);border-color:rgba(224,30,38,.5)}
.hero-detail .ticks{columns:2;column-gap:var(--s4);display:block}
.hero-detail .ticks li{break-inside:avoid;color:#fff}
.hero-detail>.wrap>p:last-child{font-family:var(--display);letter-spacing:.07em;font-size:1.05rem;
  color:rgba(255,255,255,.7);margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14)}

/* ---------- Forms ---------- */
.site-form-section{background:var(--mist);padding:clamp(56px,7vw,100px) 0;border-top:1px solid var(--line)}
.form-intro{max-width:800px;margin:0 auto var(--s4);text-align:center}
.form-heading{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,3vw,2.7rem);
  font-weight:700;color:var(--ink);line-height:1.04;margin:0 0 .4em}
.form-heading::after{content:"";display:block;width:64px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--red-lt));margin:.46em auto 0}
.site-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s4);
  max-width:900px;margin:0 auto;box-shadow:var(--sh-3);position:relative;overflow:hidden}
.site-form::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--red),var(--red-lt))}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s3)}
.field{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:.95rem;color:var(--ink)}
.field.wide{grid-column:1/-1}
.field em{color:var(--red);font-style:normal}
.field input,.field textarea{font:inherit;font-weight:400;padding:.85em .95em;border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);background:#fff;color:var(--text);width:100%;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(224,30,38,.13)}
.field input.invalid,.field textarea.invalid{border-color:var(--red)}
.field textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.form-or{color:var(--muted)}
.form-status{margin:var(--s2) 0 0;font-weight:600;min-height:1em}
.form-status.ok{color:#0f7a3d}
.form-status.err{color:var(--red-dk)}
.form-fallback{font-size:.86rem;color:var(--muted);margin:12px 0 0}
.site-form.sent .form-grid,.site-form.sent .form-actions{display:none}
.form-slot-wrap{margin:var(--s3) 0}
.map-slot{margin:var(--s3) 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--mist-2);min-height:280px}
.map-slot iframe{width:100%;height:320px;border:0;display:block}

/* ---------- Blog ---------- */
.post,.post-summary{max-width:860px;margin:0 auto}
.post-summary{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.post-summary h2 a{color:var(--ink)}
.post .date,.post-summary .date{color:var(--muted);font-size:.92rem}
.post figure.image img,.post-summary figure.image img{border-radius:var(--r);box-shadow:var(--sh-1)}
.blog-pager{max-width:860px;margin:var(--s4) auto 0;display:flex;justify-content:space-between}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.76);padding:clamp(56px,6vw,88px) 0 0;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--red),var(--red-lt) 40%,var(--red-dk))}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s5)}
.footer-h{color:#fff;font-size:1.25rem;letter-spacing:.04em;margin-bottom:.9em}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:0 0 .55em}
.site-footer a{color:rgba(255,255,255,.82);transition:color .15s}
.site-footer a:hover{color:#fff}
.footer-brand img{width:200px;max-width:none;margin-bottom:var(--s3)}
.footer-lead{font-size:1rem;color:rgba(255,255,255,.86)}
.footer-address{color:rgba(255,255,255,.6);font-size:.94rem}
.social{display:flex;gap:12px;margin-top:var(--s3)}
.social a{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.34em .95em;font-size:.88rem}
.social a:hover{background:var(--red);border-color:var(--red);color:#fff;text-decoration:none}
.footer-base{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s5);padding-top:var(--s3);
  padding-bottom:calc(var(--s4) + 60px);font-size:.88rem;color:rgba(255,255,255,.55)}
.footer-base a{margin-left:.5em}

/* ---------- Sticky call bar ---------- */
.tel-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,17,20,.1);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
.tel-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.95em .6em;
  border-radius:var(--r-sm);font-family:var(--display);text-transform:uppercase;font-weight:700;
  font-size:1.14rem;letter-spacing:.03em;text-decoration:none!important}
.tel-bar-call{background:var(--red);color:#fff}
.tel-bar-book{background:var(--ink);color:#fff}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%;margin:var(--s3) 0;font-size:.98rem}
td,th{border:1px solid var(--line);padding:.7em .9em;vertical-align:top}
.embed iframe{width:100%;min-height:380px;border:0;border-radius:var(--r)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .menu-item>a,.menu-parent{padding:.55em .5em;font-size:.96rem}
  .header-call .call-label{display:none}
  .brand,.brand img{width:148px}
  .cols.n4,.cols.n5,.cols.n6{grid-template-columns:repeat(2,1fr)}
  .steps,.areas{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  body{font-size:16px}
  .util .areas{display:none}
  .util .wrap{justify-content:center}
  .header-row{min-height:70px;gap:12px}
  .brand,.brand img{width:140px}
  .nav-toggle{display:inline-flex}
  .header-call{display:none}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-3);max-height:calc(100vh - 70px);overflow:auto}
  .site-nav.open{display:block}
  .menu{flex-direction:column;padding:12px 16px 20px;gap:0}
  .menu-item>a,.menu-parent{width:100%;justify-content:space-between;padding:.9em .6em;font-size:1.1rem;
    border-bottom:1px solid var(--line);border-radius:0}
  .menu-item>a::after,.menu-parent::after{display:none}
  .submenu{position:static;display:none;box-shadow:none;border:0;background:var(--mist);margin:6px 0 10px;border-radius:var(--r-sm)}
  .menu-item:hover>.submenu{display:none}
  .menu-item.open>.submenu{display:block}
  .hero.photo{min-height:0;background-image:url(/static/img/hero-800.jpg?v=202609250224);background-position:72% center}
  .hero .wrap{padding-top:44px;padding-bottom:44px}
  .hero-box h1,.hero-box h2,.hero-box>h2:first-child{font-size:clamp(2.2rem,9vw,3rem)}
  .hero-sub{font-size:1.04rem}
  .hero-cta{gap:10px}
  .hero-cta .btn{font-size:1.1rem;padding:.9em 1.3em;flex:1 1 auto}
  .trust{gap:8px 18px;padding-top:var(--s2);margin-top:var(--s3)}
  .trust li{font-size:.94rem;padding-left:22px}
  .page-head{background-image:url(/static/img/hero-800.jpg?v=202609250224)}
  .cols,.cols.n2,.cols.n3,.cols.n4,.cols.n5,.cols.n6,.cols.balanced{grid-template-columns:1fr;gap:var(--s3)}
  .cols.icons{grid-template-columns:1fr 1fr}
  .cols.icons .col{padding:var(--s3) var(--s2)}
  .sec.band.proof .cols.icons .col{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .sec.band.proof .cols.icons .col:nth-child(-n+2){border-top:0}
  .steps,.areas,.service-grid,.slideshow.cards{grid-template-columns:1fr}
  .ticks,.hero-detail .ticks{grid-template-columns:1fr;columns:1}
  .hero-detail .cols.n2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .site-form{padding:var(--s4) var(--s3);border-radius:var(--r)}
  .footer-grid{grid-template-columns:1fr;gap:var(--s4)}
  .tel-bar{display:flex}
  .faq summary{font-size:1.1rem;padding:16px 46px 16px 18px}
}
@media (max-width:460px){
  .cols.icons{grid-template-columns:1fr}
  .sec.band.proof .cols.icons .col{border-top:1px solid rgba(255,255,255,.12)}
  .sec.band.proof .cols.icons .col:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.site-header,.util,.tel-bar,.site-form-section{display:none}}

/* ---- Brand strip: the inherited logo sheet, given a band of its own ---- */
.sec.brandband{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:var(--s5)}
.sec.brandband > .wrap > p.lead{max-width:60ch;margin:0 auto var(--s4);text-align:center;
  font-family:var(--display);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);color:var(--ink);line-height:1.25}
.sec.brandband > .wrap > p.lead::after{content:"";display:block;width:54px;height:3px;margin:var(--s2) auto 0;
  background:var(--red);border-radius:2px}
figure.image.brandstrip{margin:0 auto;max-width:1040px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--s4) var(--s3)}
figure.image.brandstrip img{display:block;width:100%;height:auto;max-width:none}
@media (max-width:640px){
  figure.image.brandstrip{padding:var(--s3) var(--s2)}
}

/* ---- Who we look after: named organisations. Content supplied by Stuart; band hidden until then ---- */
.sec.clients{background:var(--paper);padding-block:var(--s6)}
.sec.clients .clients-head{text-align:center;max-width:62ch;margin:0 auto var(--s5)}
.sec.clients .clients-head h2{margin:0 0 var(--s2)}
.sec.clients .clients-head p{color:var(--muted);margin:0}
.client-names{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s3);
  max-width:960px;margin:0 auto;list-style:none;padding:0}
.client-names li{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1rem,.9rem + .45vw,1.3rem);color:var(--ink);padding:var(--s1) var(--s2);
  border-bottom:3px solid var(--line);transition:border-color .2s,color .2s}
.client-names li:hover{border-bottom-color:var(--red)}
.client-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);
  max-width:1040px;margin:var(--s5) auto 0;align-items:center}
.client-logos img{max-height:56px;width:auto;margin:0 auto;display:block;
  filter:grayscale(1);opacity:.68;transition:filter .2s,opacity .2s}
.client-logos img:hover{filter:none;opacity:1}
.sec.clients .clients-note{text-align:center;color:var(--muted);font-size:.92rem;margin:var(--s4) 0 0}

/* ---- Intro row: tick list beside the machine shots. Stop the images floating in dead space ---- */
.cols.n2.media{align-items:start;gap:var(--s5)}
.cols.n2.media .col:last-child .slideshow,
.cols.n2.media .col:last-child .gallery{grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:0}
.cols.n2.media .col:last-child figure{min-height:0;padding:var(--s2);display:grid;place-items:center;
  aspect-ratio:1/1}
.cols.n2.media .col:last-child figure img{max-height:100%;max-width:100%;width:auto;height:auto;
  filter:none;opacity:1;object-fit:contain}
/* the keyword tick list runs long: two columns once there is room */
.sec .ticks{list-style:none;padding:0;margin:0 0 var(--s3)}
@media (min-width:860px){
  .cols.n2.media .col:first-child > .ticks{display:grid;grid-template-columns:1fr 1fr;
    column-gap:var(--s4);columns:auto}
}

/* the phone callout runs the full width under the row, where it can be seen */
.sec .near-me.fullwidth{margin:var(--s4) 0 0;max-width:none;background:var(--paper);
  border:1px solid var(--line);border-left:5px solid var(--red);box-shadow:var(--sh-1);
  padding:var(--s4);display:grid;grid-template-columns:1fr auto;gap:0 var(--s4);align-items:center}
.sec .near-me.fullwidth > p{margin:0 0 .5em;grid-column:1;align-self:end}
.sec .near-me.fullwidth > p:last-of-type{margin:0;align-self:start}
@media (max-width:860px){.sec .near-me.fullwidth{grid-template-columns:1fr;padding:var(--s3) var(--s3) var(--s3) var(--s4)}}
.near-me-act{grid-column:2;grid-row:1/-1;display:flex;flex-direction:column;gap:10px;align-self:center}
.near-me-act .btn{white-space:nowrap;justify-content:center}
@media (max-width:860px){.near-me-act{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap}}

/* Band sections: the lead paragraph rule outranked the band colour rule and left text dark on
   dark or dark on red. Restated here at matching specificity. Found 20 September 2026. */
.sec.band>.wrap>p.lead{color:rgba(255,255,255,.92)}
.sec.band>.wrap>p.lead a{color:#fff}
.sec.band.red>.wrap>p.lead{color:#fff}
.sec.band.red>.wrap>p.lead:last-child{font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);letter-spacing:.02em;margin-top:var(--s3)}
.sec.band.red>.wrap>p.lead:last-child a{text-decoration:none;border-bottom:3px solid rgba(255,255,255,.55);
  padding-bottom:2px;transition:border-color .2s}
.sec.band.red>.wrap>p.lead:last-child a:hover{border-bottom-color:#fff}

/* subheadings recovered from the old single paragraph blocks */
.sec h3.sub{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1rem,.94rem + .3vw,1.2rem);color:var(--ink);margin:var(--s4) 0 var(--s2);
  padding-bottom:.4em;border-bottom:2px solid var(--line);position:relative}
.sec h3.sub::after{content:"";position:absolute;left:0;bottom:-2px;width:40px;height:2px;background:var(--red)}
.sec h3.sub em{font-style:normal}

/* card rows: equal height, tops aligned. The default centre alignment staggered them. */
.cols.n3,.cols.n4,.cols.n5,.cols.n6,.cols.products,.cols.icons{align-items:stretch}
.cols.n3>.col,.cols.n4>.col,.cols.n5>.col,.cols.n6>.col{height:100%}
.service-grid{align-items:stretch}
.service-grid .service-card{height:100%}

/* the fixed call bar must not wrap its number on a narrow phone */
@media (max-width:420px){
  .tel-bar-call,.tel-bar-book{font-size:.82rem;letter-spacing:.01em;padding-inline:10px}
  .tel-bar-call{white-space:nowrap}
}

/* =====================================================================================
   v11 LAYER, 21 September 2026. Brief (Stuart): "it looks like shit ... beat Global Office
   Machines ... we cannot lose any ranking". Everything below is presentation only: no word,
   heading, link or image changes here. It overrides the v5 to v10 rules above by cascade.
   Direction: premium trade service. Red, black and white (the PPR colours), sentence case
   display type (Outfit) instead of condensed capitals, photographic tiles, pill buttons,
   calmer long text, bigger and fewer accents.
   ===================================================================================== */
:root{
  --display:"Outfit","Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --red:#e3161f; --red-dk:#b40f17; --red-lt:#ff4a50;
  --ink:#0d0e11; --ink-2:#16181d; --ink-3:#23262e;
  --text:#363b46; --muted:#6b7280; --line:#e7e9ee; --mist:#f5f6f8; --mist-2:#eceef2;
  --r:18px; --r-sm:12px; --r-lg:28px;
  --sh-1:0 1px 2px rgba(13,14,17,.05),0 4px 14px rgba(13,14,17,.05);
  --sh-2:0 8px 24px rgba(13,14,17,.08),0 18px 44px rgba(13,14,17,.08);
  --sh-3:0 18px 40px rgba(13,14,17,.14),0 40px 90px rgba(13,14,17,.14);
  --wrap:1240px;
}
body{font-size:17px;line-height:1.7;color:var(--text)}
h1,h2,h3,h4{font-family:var(--display);text-transform:none;font-weight:800;letter-spacing:-.022em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.4rem,4.6vw,4rem)}
h2{font-size:clamp(1.75rem,2.7vw,2.55rem)}
h3{font-size:clamp(1.15rem,1.4vw,1.35rem);font-weight:700;letter-spacing:-.012em}
h2.caps,h1.caps{font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:.02em;line-height:1.25}
a{color:var(--red-dk)}

/* buttons: pills, sentence case */
.btn{font-family:var(--display);text-transform:none;letter-spacing:0;font-weight:700;font-size:1.02rem;
  padding:.95em 1.7em;border-radius:999px;border-width:2px}
.btn-primary,.btn-call{background:var(--red);box-shadow:0 10px 24px rgba(227,22,31,.28)}
.btn-outline{border-color:#d5d8df;color:var(--ink);background:#fff}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* header */
.util{background:var(--ink);font-size:.84rem;letter-spacing:.01em}
.util .wrap{min-height:36px}
.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(13,14,17,.06);box-shadow:0 6px 24px rgba(13,14,17,.05)}
.header-row{min-height:84px}
.menu-item>a,.menu-parent{font-family:var(--display);text-transform:none;letter-spacing:0;font-weight:600;font-size:1rem;color:var(--ink);padding:.6em .8em}
.menu-item>a::after,.menu-parent::after{height:2px;bottom:.3em}
.submenu{border-radius:16px;padding:12px}
.submenu li a{font-size:.95rem;padding:.55em .8em}
.nav-toggle{font-family:var(--display);text-transform:none;border-radius:999px}
.header-call{font-size:.98rem;padding:.8em 1.3em}

/* hero: full bleed photograph, big sentence case heading, glass trust panel */
.hero.photo{min-height:clamp(560px,78vh,780px);background-position:center right}
.hero::before{background:
  radial-gradient(1200px 600px at 12% 60%,rgba(13,14,17,.94),rgba(13,14,17,.55) 55%,rgba(13,14,17,.12) 100%),
  linear-gradient(0deg,rgba(13,14,17,.55),rgba(13,14,17,0) 40%)}
.hero::after{display:none}
.hero .wrap{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(140px,13vw,190px)}
.hero-box{max-width:720px}
.hero-box h1,.hero-box h2,.hero-box>h2:first-child{font-size:clamp(2.8rem,6vw,5.2rem);letter-spacing:-.035em;line-height:1;margin-bottom:.18em}
.hero-box h1::after,.hero-box h2::after{display:none}
.hero-box h1::before,.hero-box h2::before{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--red);margin:0 0 .5em}
.hero-sub{font-size:clamp(1.08rem,1.3vw,1.28rem);color:rgba(255,255,255,.86);max-width:590px}
.hero-cta .btn{font-size:1.08rem;padding:1.05em 1.9em}
.hero .btn-outline{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-outline:hover{background:transparent;color:#fff}
.trust{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-radius:16px;padding:16px 22px;gap:10px 26px;margin-top:clamp(28px,4vw,48px);display:inline-flex}
.trust li{font-family:var(--display);text-transform:none;letter-spacing:0;font-weight:600;font-size:.98rem}
.trust li::before{background:var(--red-lt);top:.34em}

/* inner page heads: same language as the hero */
.page-head{padding:clamp(72px,8vw,120px) 0 clamp(64px,7vw,104px)}
.page-head::before{background:radial-gradient(1100px 520px at 10% 60%,rgba(13,14,17,.95),rgba(13,14,17,.62) 60%,rgba(13,14,17,.35) 100%)}
.page-head::after{display:none}
.page-head h1,.page-head h2{font-size:clamp(2.2rem,4.4vw,3.8rem);letter-spacing:-.03em;line-height:1.04}
.page-head h1::after,.page-head h2::after{display:none}
.page-head h1::before,.page-head h2::before{content:"";display:block;width:52px;height:5px;border-radius:3px;background:var(--red);margin:0 0 .55em}
.page-head .btn-outline{background:#fff;color:var(--ink);border-color:#fff}

/* section rhythm and headings: small red bar ABOVE the heading, never under */
.sec{padding:clamp(64px,8vw,120px) 0}
.sec.alt{background:var(--mist)}
.sec>.wrap>h2:first-child::after,.sec-title::after,.form-heading::after{display:none}
.sec>.wrap>h2:first-child::before,.sec-title::before,.form-heading::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--red);margin:0 auto .8em}
.sec>.wrap>h2{max-width:900px}
.sec>.wrap>p,.sec .col p{color:var(--text)}
.sec>.wrap>p{max-width:760px}
.sec>.wrap>p.lead{font-size:1.14rem;max-width:720px}
.sec-title,.form-heading{font-family:var(--display);text-transform:none;letter-spacing:-.02em;font-weight:800}
h3.sub,.sec h3.sub{font-family:var(--display);text-transform:none;letter-spacing:-.01em;font-size:1.2rem;border-bottom:0;padding-bottom:0}
.sec h3.sub::after{display:none}

/* intent tiles: photographic cards like the gom row, links unchanged */
.cols.buttons{grid-template-columns:repeat(4,1fr);gap:18px}
.cols.buttons .btn{position:relative;min-height:230px;align-items:flex-end;justify-content:flex-start;text-align:left;
  padding:24px 24px 22px;border-radius:20px;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;color:#fff;
  background:var(--ink) url(/static/img/tile-1.jpg?v=202609250224) center/cover no-repeat;box-shadow:var(--sh-2);white-space:normal}
.cols.buttons .col:nth-child(2) .btn{background-image:url(/static/img/tile-2.jpg?v=202609250224)}
.cols.buttons .col:nth-child(3) .btn{background-image:url(/static/img/tile-3.jpg?v=202609250224)}
.cols.buttons .col:nth-child(4) .btn{background-image:url(/static/img/tile-4.jpg?v=202609250224)}
.cols.buttons .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(13,14,17,.05) 20%,rgba(13,14,17,.82) 100%);transition:background .2s}
.cols.buttons .btn::after{content:"";position:absolute;right:20px;bottom:20px;left:auto;top:auto;width:40px;height:40px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/20px no-repeat;
  transition:transform .2s}
.cols.buttons .btn{isolation:isolate}
.cols.buttons .btn>*{position:relative;z-index:1}
.cols.buttons .btn:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.cols.buttons .btn:hover::before{background:linear-gradient(180deg,rgba(227,22,31,.12) 0%,rgba(13,14,17,.86) 100%)}
.cols.buttons .btn:hover::after{transform:translateX(3px);height:40px}
/* on the home page the tile row lifts up into the hero, the way gom's does */
.home .hero+.sec{padding-top:0;background:transparent}
.home .hero+.sec>.wrap{position:relative;z-index:3;margin-top:-104px}
.home .hero+.sec>.wrap>h2{font-size:clamp(1.1rem,1.3vw,1.3rem);letter-spacing:0;margin:34px auto 0;order:2;color:var(--muted);font-weight:600}
.home .hero+.sec>.wrap>h2::before{display:none}
.home .hero+.sec>.wrap{display:flex;flex-direction:column}
.home .hero+.sec .cols.buttons{order:1;margin-top:0}

/* cards */
.service-card,.step,.area,.cols.products .col{border-radius:18px;border-color:var(--line)}
.service-card::before{width:0}
.service-card{padding:30px 28px;border-top:4px solid var(--red)}
.service-card strong{font-family:var(--display);text-transform:none;letter-spacing:-.01em;font-size:1.22rem;font-weight:700}
.step .num{font-family:var(--display)}
.area{border-top:0;border-left:4px solid var(--red)}
.sec .cols.n3 .col{border-radius:18px}
.cols.products .col{padding:28px 22px;background:#fff}
.cols.icons{border-radius:22px}

/* proof band: dark, with the red glow, big confident headings */
.sec.band{background:radial-gradient(900px 480px at 85% 0%,rgba(227,22,31,.22),transparent 60%),var(--ink)}
.sec.band::before{display:none}
.sec.band.proof .cols.icons{border:0;gap:16px;background:transparent;margin-top:48px}
.sec.band.proof .cols.icons .col{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 24px}
.sec.band.proof .cols.icons .col:first-child{border-left:1px solid rgba(255,255,255,.1)}
.sec.band.proof .cols.icons .col h2{font-family:var(--display);font-size:1.3rem;letter-spacing:-.01em}
.sec.band.proof .ico svg{fill:#fff}
.sec.band.proof .cols.icons .ico{width:64px;height:64px;border-radius:18px;background:var(--red);box-shadow:0 12px 28px rgba(227,22,31,.35)}
.sec.band.proof .cols.icons .ico svg{width:34px;height:34px}
.sec.band.red{background:linear-gradient(125deg,#9e0c13 0%,var(--red) 58%,#f0333a 100%)}
.sec.band.red>.wrap>p.lead:last-child{font-family:var(--display);letter-spacing:-.01em}
.hero-detail{background:radial-gradient(900px 480px at 10% 100%,rgba(227,22,31,.18),transparent 60%),var(--ink)}
.hero-detail::before{display:none}
.hero-detail .tagline{font-family:var(--display);text-transform:none;letter-spacing:-.02em;font-weight:800}
.hero-detail .tagline::after{height:4px;width:44px}
.hero-detail>.wrap>p:last-child{font-family:var(--display);letter-spacing:.01em}

/* brand band */
.sec.brandband{background:#fff}
.sec.brandband>.wrap>p.lead{font-family:var(--display);text-transform:none;letter-spacing:-.01em;font-weight:700;color:var(--ink)}
figure.image.brandstrip{border-radius:22px;box-shadow:none;border-color:var(--line)}

/* long reading copy stays readable */
.cols.balanced{gap:clamp(32px,5vw,72px)}
.sec .col>p{max-width:68ch}
.ticks li::before{background:var(--red);border-radius:2px}

/* near me call-out */
.sec .near-me.fullwidth{border-radius:22px;border:1px solid var(--line);border-left:0;box-shadow:var(--sh-2);
  background:linear-gradient(135deg,#fff 0%,#fff 60%,#fff1f1 100%);position:relative;overflow:hidden}
.sec .near-me.fullwidth::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red)}

/* forms */
.site-form-section{background:linear-gradient(180deg,var(--mist),#fff)}
.site-form{border-radius:26px;border-color:var(--line)}
.site-form::before{height:0}
.field input,.field textarea{border-radius:12px;border-color:#dcdfe5;background:#fbfbfc}
.field{font-family:var(--display);font-weight:600;font-size:.96rem}

/* FAQ, footer, call bar */
.faq summary{font-family:var(--display);text-transform:none;letter-spacing:-.01em;font-weight:700;font-size:1.12rem}
.faq details{border-radius:16px}
.footer-h{font-family:var(--display);text-transform:none;letter-spacing:0;font-size:1.08rem}
.site-footer::before{height:4px;background:var(--red)}
.tel-bar a{font-family:var(--display);text-transform:none;letter-spacing:0;border-radius:999px;font-size:1.02rem}
.client-names li{font-family:var(--display);text-transform:none}

@media (max-width:1100px){
  .cols.buttons{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero.photo{min-height:0}
  .hero .wrap{padding-top:52px;padding-bottom:120px}
  .hero-box h1,.hero-box h2,.hero-box>h2:first-child{font-size:clamp(2.4rem,11vw,3.2rem)}
  .trust{display:flex;padding:14px 16px}
  .cols.buttons{grid-template-columns:1fr 1fr;gap:12px}
  .cols.buttons .btn{min-height:150px;font-size:1.05rem;padding:16px 16px 14px;border-radius:16px}
  .cols.buttons .btn::after{width:32px;height:32px;right:12px;bottom:12px;background-size:16px}
  .cols.buttons .btn:hover::after{height:32px}
  .home .hero+.sec>.wrap{margin-top:-78px}
  .sec{padding:56px 0}
  .sec.band.proof .cols.icons{grid-template-columns:1fr 1fr;gap:12px}
  .sec.band.proof .cols.icons .col{border-top:1px solid rgba(255,255,255,.1)!important}
}
/* v11 fixes after the first screenshot: the tile label is a bare text node, so the overlay must be a
   background layer, not a pseudo element above it; the header must fit at 1366 */
.cols.buttons .btn::before{display:none}
.cols.buttons .btn{background-image:linear-gradient(180deg,rgba(13,14,17,0) 30%,rgba(13,14,17,.86) 100%),url(/static/img/tile-1.jpg?v=202609250224);
  color:#fff!important;font-size:1.12rem;letter-spacing:.04em;padding-right:76px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.cols.buttons .col:nth-child(2) .btn{background-image:linear-gradient(180deg,rgba(13,14,17,0) 30%,rgba(13,14,17,.86) 100%),url(/static/img/tile-2.jpg?v=202609250224)}
.cols.buttons .col:nth-child(3) .btn{background-image:linear-gradient(180deg,rgba(13,14,17,0) 30%,rgba(13,14,17,.86) 100%),url(/static/img/tile-3.jpg?v=202609250224)}
.cols.buttons .col:nth-child(4) .btn{background-image:linear-gradient(180deg,rgba(13,14,17,0) 30%,rgba(13,14,17,.86) 100%),url(/static/img/tile-4.jpg?v=202609250224)}
.util .wrap{flex-wrap:nowrap}
.util .areas{flex:1 1 auto;min-width:0}
.header-row{gap:14px}
.brand,.brand img{width:150px}
.menu{gap:0}
.menu-item>a,.menu-parent{padding:.6em .62em;font-size:.97rem}
.header-call{flex:0 0 auto}
@media (max-width:1240px){.header-call .call-label{display:none}.menu-item>a,.menu-parent{font-size:.93rem;padding:.6em .5em}}
/* v11 pass 2 */
.sec>.wrap>h2.caps,.sec.band.proof>.wrap>h2.caps,.sec .col>h2.caps{font-size:clamp(1.25rem,1.7vw,1.65rem);letter-spacing:.035em;line-height:1.3}
h2.caps .accent,h1.caps .accent{color:inherit}
.sec.band>.wrap>h2.caps{color:#fff}
.sec .near-me.fullwidth{align-content:center}
.sec .near-me.fullwidth>p{align-self:auto}
.hero-detail strong,.hero-detail p.lead strong{color:#fff}
.hero-detail p.lead{color:rgba(255,255,255,.8);text-align:left;max-width:none;font-family:var(--display);letter-spacing:.04em;font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.14);padding-top:24px;margin-top:40px}
.hero-detail .tagline{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.2}
.hero-detail .tagline br{display:inline}
.hero-detail .quote{color:rgba(255,255,255,.85)}
.hero-detail .chips{color:rgba(255,255,255,.8)}
/* brand column: logos in a tidy grid, the plain brand list set small in columns, the links as pills */
.cols.n2.media .col:last-child>.slideshow:not(.cards){grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.cols.n2.media .col:last-child>.slideshow:not(.cards) figure{aspect-ratio:16/10;padding:14px;border-radius:14px}
.cols.n2.media .col:last-child>.slideshow:not(.cards) img{filter:grayscale(1);opacity:.75}
.col>p:has(+ .slideshow){columns:3;column-gap:18px;font-size:.92rem;color:var(--muted);line-height:1.7}
.col>ul:not(.ticks):not(.trust){list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.col>ul:not(.ticks):not(.trust) li a{display:inline-block;padding:.45em 1em;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink);text-decoration:none}
.col>ul:not(.ticks):not(.trust) li a:hover{border-color:var(--red);color:var(--red-dk)}
.col>ul:not(.ticks):not(.trust) li br{display:none}
@media (max-width:860px){.cols.n2.media .col:last-child>.slideshow:not(.cards){grid-template-columns:repeat(3,1fr)}.col>p:has(+ .slideshow){columns:2}}
figure.image.banner{max-width:760px}
.page-head+.sec{padding-top:clamp(56px,6vw,88px)}
/* v11 pass 3: BRIGHT hero. Stuart: "dark and gloomy ... needs to be bright airy". The new photograph is
   high key with the technician on the right, so the heading sits on a white wash over the open left side. */
.hero.photo{background-color:#f4f5f7;background-position:right center}
.hero::before{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 36%,rgba(255,255,255,.55) 56%,rgba(255,255,255,0) 74%)}
.hero,.hero h1,.hero h2,.hero h3{color:var(--ink)}
.hero-sub{color:var(--text)}
.hero .btn-outline{background:#fff;color:var(--ink);border-color:#d5d8df}
.hero .btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.trust{background:rgba(255,255,255,.75);border-color:var(--line);box-shadow:var(--sh-1)}
.trust li{color:var(--ink)}
.trust li::before{background:var(--red)}
.page-head{background-color:#f4f5f7;background-position:right 30%}
.page-head::before{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.6) 64%,rgba(255,255,255,.15) 100%)}
.page-head,.page-head h1,.page-head h2{color:var(--ink)}
.page-head p{color:var(--text)}
.page-head .date{color:var(--muted)}
.page-head .btn-outline{background:#fff;color:var(--ink);border-color:#d5d8df}
.util{background:#fff;color:var(--muted);border-bottom:1px solid var(--line)}
.util a,.util .areas b{color:var(--ink)}
@media (max-width:860px){
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 55%,rgba(255,255,255,.4) 100%)}
  .hero.photo{background-position:78% center}
}
/* phone: the photograph shows as its own band under the words instead of a wash behind them */
@media (max-width:860px){
  .hero.photo{background-image:url(/static/img/hero-800.jpg?v=202609250224);background-size:180% auto;background-position:78% 100%;background-repeat:no-repeat}
  .hero::before{background:linear-gradient(180deg,#fff 0%,#fff 58%,rgba(255,255,255,.6) 66%,rgba(255,255,255,0) 76%)}
  .hero .wrap{padding-bottom:300px}
  .page-head{background-size:auto 100%;background-position:right center}
  .page-head::before{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 60%,rgba(255,255,255,.55) 100%)}
}
.hero.photo{min-height:clamp(560px,72vh,720px)}
/* Stuart: "a bit too white at the top". Lighter, narrower wash so the photograph carries the hero */
.hero::before{background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.78) 30%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 64%)}
.hero-box{max-width:620px}
.page-head::before{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.35) 60%,rgba(255,255,255,0) 80%)}
.hero-box h1,.hero-box h2{text-shadow:0 1px 18px rgba(255,255,255,.6)}
/* v12 phone: the desktop wash above was overriding the phone one and leaving a blank band over the photo.
   Photo band is 180% of the width at 3:2, so about 1.2 x viewport width tall. Fade only its top edge. */
@media (max-width:860px){
  .hero::before{background:linear-gradient(to top,rgba(255,255,255,0) 0,rgba(255,255,255,0) calc(120vw - 70px),#fff 120vw)}
  .hero > .wrap{padding-bottom:calc(120vw - 40px)}
  .hero .wrap.hero-inner{padding-bottom:24px}
  .hero-box h1,.hero-box h2{text-shadow:none}
}
/* v13: Stuart, 21 September: "The tiles, no ... I think we should use icons there more than pictures."
   Photo tiles replaced by white icon cards. Same four links, same anchor text; the label is only set in capitals by CSS. */
.cols.buttons .btn,.cols.buttons .col:nth-child(n) .btn{background:#fff;color:var(--ink)!important;text-shadow:none;
  min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;
  padding:26px 26px 24px;border:1px solid rgba(16,17,20,.08);border-radius:20px;box-shadow:0 18px 40px -18px rgba(16,17,20,.28);
  font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.cols.buttons .btn::before{display:block;content:"";position:static;width:76px;height:76px;border-radius:20px;
  background:#fdecee url(/static/img/icon-printer.svg?v=202609250224) center/50px no-repeat;transition:background-color .2s,transform .2s}
.cols.buttons .col:nth-child(2) .btn::before{background-image:url(/static/img/icon-copier.svg?v=202609250224)}
.cols.buttons .col:nth-child(3) .btn::before{background-image:url(/static/img/icon-plotter.svg?v=202609250224)}
.cols.buttons .col:nth-child(4) .btn::before{background-image:url(/static/img/icon-fax.svg?v=202609250224)}
.cols.buttons .btn::after{right:22px;bottom:auto;top:42px;width:38px;height:38px;background-size:18px}
.cols.buttons .btn:hover{transform:translateY(-6px);box-shadow:0 26px 50px -20px rgba(16,17,20,.35);border-color:rgba(227,22,31,.35)}
.cols.buttons .btn:hover::before{background-color:#fbd9dc;transform:scale(1.04)}
.cols.buttons .btn:hover::after{height:38px}
@media (max-width:860px){
  .cols.buttons{grid-template-columns:1fr 1fr;gap:12px}
  .cols.buttons .btn,.cols.buttons .col:nth-child(n) .btn{padding:18px 16px 16px;gap:12px;font-size:.86rem;letter-spacing:.05em}
  .cols.buttons .btn::before{width:58px;height:58px;border-radius:16px;background-size:38px}
  .cols.buttons .btn::after{right:14px;top:28px;width:32px;height:32px;background-size:16px}
  .cols.buttons .btn:hover::after{height:32px}
}
.cols.buttons .col{display:flex}
.cols.buttons .col>.btn{flex:1 1 auto;width:100%}
/* ===== v14: the war chest home page. Service first, calls and forms first (Stuart, 21 Sep 2026) ===== */
.ic{display:inline-block;width:52px;height:52px;border-radius:14px;background:#fdecee center/26px no-repeat;flex:0 0 auto}
.ic-brands{background-image:url(/static/img/ic-brands.svg?v=202609250224)}.ic-urgent{background-image:url(/static/img/ic-urgent.svg?v=202609250224)}
.ic-office{background-image:url(/static/img/ic-office.svg?v=202609250224)}.ic-calendar{background-image:url(/static/img/ic-calendar.svg?v=202609250224)}
.ic-phone{background-image:url(/static/img/ic-phone.svg?v=202609250224)}.ic-headset{background-image:url(/static/img/ic-headset.svg?v=202609250224)}
.ic-van{background-image:url(/static/img/ic-van.svg?v=202609250224)}.ic-tick{background-image:url(/static/img/ic-tick.svg?v=202609250224)}
.ic-pin{background-image:url(/static/img/ic-pin.svg?v=202609250224)}
p.price-badge{display:table;margin:26px auto 0!important;padding:.55em 1.25em;border-radius:999px;background:var(--ink);color:#fff!important;
  font-family:var(--display);font-weight:700;letter-spacing:.01em;font-size:1.02rem}
p.price-badge *{color:#fff!important}
/* service showcase */
.service-section .svc-top{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.service-section .svc-text h2{text-align:left;margin-left:0}
.service-section .svc-text h2::before{margin-left:0!important}
.service-section .svc-text p.lead{text-align:left;margin:18px 0 0;max-width:none;font-size:1.14rem}
.service-section .service-links{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.svc-photo{margin:0;position:relative}
.svc-photo img{width:100%;height:auto;border-radius:24px;box-shadow:0 30px 60px -28px rgba(16,17,20,.45);display:block}
.svc-photo::after{content:"";position:absolute;left:-18px;bottom:-18px;width:120px;height:120px;border-radius:24px;background:var(--red);z-index:-1;opacity:.9}
.service-section .service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.service-section .service-card{background:#fff;border:1px solid var(--line);border-top:0;border-radius:20px;padding:26px 24px;
  box-shadow:0 14px 34px -22px rgba(16,17,20,.35);display:flex;flex-direction:column;gap:16px}
.service-section .service-card::before{display:none}
.service-section .service-card p{margin:0;font-size:.98rem;line-height:1.6;color:var(--text)}
.service-section .service-card strong{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.3;color:var(--ink);margin-bottom:8px;letter-spacing:-.005em}
/* four steps */
.steps-section{background:linear-gradient(180deg,#f6f7f9,#fff)}
.steps-section p.lead{margin-left:auto;margin-right:auto}
ol.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:none;position:relative}
ol.steps::before{content:"";position:absolute;left:12%;right:12%;top:52px;border-top:2px dashed rgba(227,22,31,.35);z-index:0}
.step{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px 26px;text-align:center;
  box-shadow:0 14px 34px -24px rgba(16,17,20,.35)}
.step .ic{width:64px;height:64px;border-radius:50%;background-size:30px;margin:0 auto 16px;box-shadow:0 0 0 8px #fff}
.step-n{position:absolute;top:16px;left:18px;font-family:var(--display);font-weight:800;font-size:.85rem;color:#fff;background:var(--red);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.step h3{font-family:var(--display);text-transform:none;letter-spacing:-.01em;font-size:1.18rem;margin:0 0 8px;color:var(--ink)}
.step h3::after{display:none}
.step p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}
.steps-cta{text-align:center;margin-top:36px!important;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* cities */
.cities-section{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cities-section::before{content:"";position:absolute;right:-140px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(227,22,31,.38),rgba(227,22,31,0));pointer-events:none}
.cities-section h2{color:#fff}
.cities-section p.lead{color:rgba(255,255,255,.72)!important;margin-left:auto;margin-right:auto}
ul.city-grid{list-style:none;padding:0;margin:40px auto 0;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;max-width:1100px;position:relative}
ul.city-grid a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 10px;border-radius:18px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:#fff;font-family:var(--display);font-weight:700;font-size:1.02rem;text-decoration:none;text-align:center;
  transition:background .2s,transform .2s,border-color .2s}
ul.city-grid a:hover{background:rgba(227,22,31,.18);border-color:rgba(227,22,31,.6);transform:translateY(-4px)}
ul.city-grid .ic{width:44px;height:44px;border-radius:50%;background-color:rgba(255,255,255,.95);background-size:22px}
.city-note{text-align:center;color:rgba(255,255,255,.7);margin:26px auto 0;position:relative}
/* booking: form and call side by side */
.booking{background:linear-gradient(180deg,#fff,#f6f7f9)}
.booking .cols.n2{grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.call-panel{background:var(--ink);color:#fff;border-radius:24px;padding:34px 32px;margin-bottom:18px;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(16,17,20,.6)}
.call-panel::after{content:"";position:absolute;right:-60px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(227,22,31,.45),rgba(227,22,31,0))}
.call-panel p{color:rgba(255,255,255,.8);margin:0 0 14px;position:relative}
.call-panel .call-label-sm{font-family:var(--display);font-weight:700;color:#fff;font-size:1.1rem;margin:0 0 6px}
.call-panel a.call-big{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,3.4vw,2.9rem);color:#fff;
  letter-spacing:-.01em;text-decoration:none;margin:0 0 14px;position:relative;border-bottom:3px solid var(--red);line-height:1.15}
.call-panel a.call-big:hover{color:#ffd9db}
.call-panel ul.ticks{margin:0;padding:0;list-style:none;position:relative}
.call-panel ul.ticks li{padding-left:26px;position:relative;margin:6px 0;color:#fff;font-weight:600}
.call-panel ul.ticks li::before{content:"";position:absolute;left:0;top:.25em;width:16px;height:16px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12 4 4 8-8'/></svg>") center/10px no-repeat}
.booking .map-slot iframe{border-radius:18px}
@media (max-width:1100px){
  .service-section .service-grid{grid-template-columns:1fr 1fr}
  ol.steps{grid-template-columns:1fr 1fr}
  ol.steps::before{display:none}
  ul.city-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .service-section .svc-top{grid-template-columns:1fr;gap:28px}
  .svc-photo::after{width:80px;height:80px;left:-10px;bottom:-10px}
  .service-section .service-grid{grid-template-columns:1fr;gap:12px;margin-top:36px}
  .service-section .service-card{flex-direction:row;align-items:flex-start;padding:20px 18px}
  .service-section .service-card .ic{width:44px;height:44px;background-size:22px}
  ol.steps{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .step{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:16px;padding:20px 18px}
  .step .ic{grid-row:span 2;margin:0;width:52px;height:52px;background-size:24px;box-shadow:none}
  .step-n{top:10px;left:auto;right:12px}
  ul.city-grid{grid-template-columns:repeat(2,1fr)}
  ul.city-grid li:last-child{grid-column:span 2}
  .booking .cols.n2{grid-template-columns:1fr}
  .booking .cols.n2 .col:last-child{order:-1}
  .call-panel{padding:26px 22px}
}
.sec .price-badge,.sec>.wrap>h2.price-badge{display:table;margin:30px auto 0!important;padding:.6em 1.4em;border-radius:999px;background:var(--ink);color:#fff!important;
  font-family:var(--display);font-weight:600;letter-spacing:.01em;font-size:1.05rem!important;line-height:1.3;text-transform:none;box-shadow:0 14px 30px -16px rgba(16,17,20,.5)}
.sec .price-badge strong{color:#fff;font-weight:800}
.sec .price-badge::before,.sec .price-badge::after{display:none!important}
.sec.booking .call-panel p{color:rgba(255,255,255,.82)!important}
.sec.booking .call-panel p.call-label-sm{color:#fff!important}
.sec.booking .call-panel ul.ticks{display:block!important;columns:auto!important;grid-template-columns:none!important}
.sec.booking .call-panel ul.ticks li{color:#fff!important;padding-left:28px!important;background:none!important}
.sec.booking .call-panel ul.ticks li::before{content:""!important;color:transparent!important;width:18px;height:18px;left:0;top:.2em}
.sec.booking .map-slot{display:none}
.sec.booking .cols.n2 .col:last-child>p{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;color:var(--text)}
@media (max-width:860px){
  .step h3{padding-right:30px}
  ul.city-grid{gap:10px;margin-top:28px}
  ul.city-grid a{flex-direction:row;justify-content:flex-start;padding:12px 14px;gap:10px;font-size:.98rem}
  ul.city-grid .ic{width:30px;height:30px;background-size:16px}
  ul.city-grid li:last-child{grid-column:auto}
  ul.city-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){ul.city-grid a{text-align:left}}
/* v14: a call panel beside every generic booking form */
.site-form-section .form-pair{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start;max-width:1100px;margin:0 auto}
.site-form-section .form-pair>form,.site-form-section .form-pair>*:first-child{margin:0!important;max-width:none!important}
.site-form-section .call-panel p{color:rgba(255,255,255,.82)}
.site-form-section .call-panel p.call-label-sm{color:#fff}
.site-form-section .call-panel ul.ticks{list-style:none;padding:0;margin:0}
.site-form-section .call-panel ul.ticks li{color:#fff;padding-left:28px;position:relative;margin:8px 0;font-weight:600}
.site-form-section .call-panel ul.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12 4 4 8-8'/></svg>") center/10px no-repeat}
@media (max-width:860px){.site-form-section .form-pair{grid-template-columns:1fr}.site-form-section .call-panel{order:-1}}
.call-panel ul.ticks{display:block!important}
.call-panel ul.ticks li::before{-webkit-mask:none!important;mask:none!important}
.call-panel ul.ticks li::before{clip-path:none!important}
/* v14: text on dark bands was inheriting the body text colour (1.7:1 contrast). Light text on every dark band. */
.sec.band:not(.red) :is(p,li,em,span,strong,blockquote,small,div),.hero-detail :is(p,li,em,span,strong,blockquote,small,div),.cities-section :is(p,em,strong){color:rgba(255,255,255,.84)}
.sec.band:not(.red) :is(h1,h2,h3,h4),.hero-detail :is(h1,h2,h3,h4){color:#fff}
.sec.band:not(.red) a:not(.btn),.hero-detail a:not(.btn),.cities-section a:not(.btn){color:#fff}
.sec.band:not(.red) a.tel,.hero-detail a.tel,.cities-section .city-note a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.sec.band:not(.red) .quote,.hero-detail .quote{color:rgba(255,255,255,.78)}
.sec.band:not(.red) .chip,.hero-detail .chip{color:#fff}
.sec.band:not(.red) form :is(p,span,div,li),.sec.band:not(.red) .btn *{color:inherit}
.hero-detail :is(p,li,em,span,small),.sec.band:not(.red) .col :is(p,li,em,span,small){color:rgba(255,255,255,.84)!important}
.hero-detail :is(strong,h1,h2,h3,h4),.sec.band:not(.red) .col :is(strong,h3,h4){color:#fff!important}
.hero-detail .btn,.hero-detail .btn *{color:inherit!important}
.gallery.logostrip{background:#fff}
.h1-sub{display:block;font-size:.36em;line-height:1.25;letter-spacing:0;font-weight:700;color:var(--red);margin-top:.35em}
.page-head .h1-sub{font-size:.5em}
@media (max-width:860px){.h1-sub{font-size:.5em}}
.page-head h1.long,.hero-box h1.long{font-size:clamp(1.9rem,3.2vw,2.8rem)!important;line-height:1.1;max-width:760px}
.service-section .svc-text p.service-links{justify-content:flex-start;text-align:left;margin-left:0;max-width:none}

/* v16, 25 September 2026: conversion. The number is one tap away in the header on a phone too, not only in the
   bottom bar, and the utility bar leads with the phone number instead of the email address. */
.util-contact{display:flex;gap:18px;align-items:center;white-space:nowrap}
.util-contact .util-tel{font-weight:700;color:var(--red)}
@media (max-width:860px){
  .util-contact .util-mail{display:none}
  .util-contact .util-tel{font-size:.95rem}
  .header-row .header-call{display:inline-flex;margin-left:auto;padding:.62em 1em;font-size:.98rem;box-shadow:none}
  .header-row .header-call .call-label{display:inline}
  .header-row .header-call .call-num{display:none}
  .header-row .nav-toggle{order:3}
}
/* v16: on a phone the inner page photograph sat behind the heading at almost full strength (the HP page heading ran
   across the technician's face). A near white wash on phones only, so the words read first. */
@media (max-width:860px){.page-head::before{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 65%,rgba(255,255,255,.72) 100%)}}