/* STS Plumbing — site styles. Brand: /brand/colours.md, /brand/tokens.md, /brand/typography.md
   The look follows the old site: blue top bar, gold and blue bands, chunky Raleway headings,
   gold-ringed icons, photo heroes with gold capitals. Change a colour here and every page follows. */
:root{
  --gold:#F8CA24; --gold-dark:#E0B412; --blue:#1F669E; --blue-dark:#17507C; --blue-deep:#123F63;
  --red:#E81A22; --red-dark:#C4141B;
  --ink:#231F20; --text:#34343C; --muted:#5E5E66; --line:#E1E5E9; --wash:#F4F7FA; --paper:#FFFFFF;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --font:"Raleway",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bar:64px;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V22C240 0 480 44 720 30S1200 0 1440 18V60z' fill='%23000'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.65;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
body.no-scroll{overflow:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--blue)}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--s4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s2);z-index:90;background:var(--paper);padding:var(--s3);border:2px solid var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Type — chunky and blue, like the old site */
h1,h2,h3{color:var(--blue);margin:0 0 var(--s3);text-wrap:balance;line-height:1.15;font-weight:800}
h1{font-size:clamp(30px,5.2vw,46px)}
h2{font-size:clamp(25px,3.4vw,36px)}
h3{font-size:20px;font-weight:700;line-height:1.3}
p{margin:0 0 var(--s4);max-width:68ch}
.lead{font-size:19px;color:var(--muted)}
.eyebrow{font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 var(--s2)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* Top bar */
.topbar{background:var(--blue);color:#fff;font-size:14px}
.topbar-in{display:flex;justify-content:flex-end;align-items:center;gap:var(--s5);min-height:38px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{color:var(--gold)}
.topbar .stars{color:var(--gold);letter-spacing:2px}
.topbar .rating{margin-right:auto}
@media (min-width:861px){.topbar .rating{margin-right:0}}

/* Header */
.head{background:var(--paper);position:sticky;top:0;z-index:40;box-shadow:0 2px 14px rgba(0,0,0,.07)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4)}
.head .logo{display:block;width:210px}
.head-right{display:flex;align-items:center;gap:var(--s4)}
.head-tel{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--blue);font-weight:800;font-size:21px;white-space:nowrap}
.tel-icon{width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;flex:none}
.tel-text small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.menu-toggle{display:none}

/* Main menu — desktop */
nav.main{border-top:1px solid var(--line)}
.menu{display:flex;flex-wrap:wrap;gap:0 var(--s2);list-style:none;margin:0;padding:0}
.menu > li{position:relative;display:flex;align-items:center}
.menu > li > a{display:block;padding:14px 10px;font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent}
.menu > li > a:hover,.menu > li > a[aria-current="page"],.menu > li.is-current > a{color:var(--blue);border-bottom-color:var(--gold)}
.sub-toggle{background:none;border:0;padding:6px 6px 6px 0;margin-left:-6px;cursor:pointer;color:var(--ink)}
.sub-toggle::after{content:"";display:block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{display:none;position:absolute;top:100%;left:0;z-index:50;background:var(--paper);border-top:4px solid var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.14);padding:var(--s5)}
.has-sub:hover > .sub,.has-sub:focus-within > .sub,.has-sub.open > .sub{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:var(--s5);width:min(760px,90vw)}
.sub ul{list-style:none;margin:0 0 var(--s4);padding:0}
.sub li a{display:block;padding:5px 0;font-size:15px;font-weight:600;color:var(--text);text-decoration:none}
.sub li a:hover,.sub li a[aria-current="page"]{color:var(--blue)}
.sub-head{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-decoration:none;margin-bottom:var(--s2);padding-bottom:6px;border-bottom:2px solid var(--gold)}
.suburbs{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:0 var(--s5);width:min(700px,90vw)}
.sub-all{display:inline-block;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:0 var(--s5);
  font:800 15px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;border-radius:3px;cursor:pointer;white-space:nowrap}
.btn-call{background:var(--red);color:#fff}
.btn-call:hover{background:var(--red-dark)}
.btn-quote{background:var(--blue);color:#fff}
.btn-quote:hover{background:var(--blue-dark)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-dark)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0 0 var(--s4)}
.center .btns{justify-content:center}

/* Page hero — old-site style: photo (optional), dark veil, small white kicker, gold capitals.
   Set a photo with style="--hero-img:url('/assets/img/x.jpg')" on the section. */
.hero{position:relative;overflow:hidden;background:var(--blue-deep);color:#fff;text-align:center;padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,90px)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-img,none);background-size:cover;background-position:var(--hero-pos,50% 50%);filter:grayscale(1) contrast(1.05) brightness(.7)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,63,99,.62),rgba(20,18,18,.8))}
.hero .wrap{position:relative;z-index:1}
.hero .kicker{color:#fff;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin:0 auto var(--s3)}
.hero .kicker::before{content:"\2013\00a0"}.hero .kicker::after{content:"\00a0\2013"}
.hero h1{color:var(--gold);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.4);max-width:22ch;margin-left:auto;margin-right:auto}
.hero p{color:#EEF2F5;margin-left:auto;margin-right:auto}
.hero .lead{color:#F4F7F9;font-weight:400;font-size:clamp(18px,2.2vw,22px);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero .btns{margin-top:var(--s5);justify-content:center}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--blue)}

/* Home hero with photograph */
.hero-photo{position:relative;overflow:hidden;background:var(--ink);padding:0}
.hero-photo .bg{position:absolute;inset:0;
  background-image:url('/assets/img/hero-team-harbour.jpg');
  background-size:cover;background-position:50% 40%;
  filter:grayscale(1) contrast(1.22) brightness(.97)}
.hero-photo .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,18,.10) 0%,rgba(20,18,18,.20) 40%,rgba(20,18,18,.72) 100%)}
.hero-photo .wrap{position:relative;text-align:center;padding-top:clamp(170px,21vw,290px);padding-bottom:clamp(110px,15vw,210px)}
.hero-photo h1{color:var(--gold);text-shadow:0 2px 20px rgba(0,0,0,.55);margin-left:auto;margin-right:auto}
.hero-photo h1 .line{display:inline-block}
.hero-photo h1 .since{display:block;margin-top:.12em}
@media (min-width:861px){.hero-photo h1 .line{white-space:nowrap}}
.hero-photo .btns{margin:var(--s5) 0 0;justify-content:center}
@media (max-width:860px){
  .hero-photo .bg{background-image:url('/assets/img/hero-team-harbour-1000.jpg');background-position:56% 42%}
  .hero-photo .wrap{padding-top:clamp(150px,40vw,230px);padding-bottom:clamp(90px,22vw,150px)}
}

/* Proof strip — the gold bar */
.proof{background:var(--gold)}
.proof ul{list-style:none;margin:0 auto;padding:var(--s4) var(--s4);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s7);max-width:1160px}
.proof li{font-size:15px;font-weight:600;color:var(--ink)}
.proof li b{font-weight:800}

/* Sections and bands */
section{padding:var(--s8) 0}
section.tight{padding:var(--s6) 0}
.band-wash{background:var(--wash)}
.band-gold{background:var(--gold)}
.band-gold h2,.band-gold h3{color:var(--ink)}
.band-blue,.cta-band{position:relative;background:var(--blue);color:#fff;margin-top:30px}
.band-blue::before,.cta-band::before{content:"";position:absolute;left:0;right:0;top:-29px;height:30px;background:var(--blue);-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat}
.band-blue h2,.band-blue h3,.cta-band h2{color:var(--gold)}
.band-blue p,.cta-band p{color:#EAF1F7}
.band-blue a:not(.btn){color:#fff}
.band-blue .panel{background:rgba(255,255,255,.08)}
.band-blue .eyebrow{color:var(--gold)}
.band-blue .chips a{color:var(--blue)}

.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{border:1px solid var(--line);border-top:4px solid var(--gold);padding:var(--s5);background:var(--paper);box-shadow:0 4px 18px rgba(0,0,0,.04)}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:16px;margin-bottom:var(--s3)}
.more{font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.more::after{content:" \203A"}
/* Service cards with a photo */
.card-shot{padding:0;display:flex;flex-direction:column;overflow:hidden}
.card-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--wash)}
.card-shot .card-body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.card-shot .card-body p{flex:1}
.card-shot .more{align-self:flex-start}
@media (max-width:560px){
  .card-shot img{aspect-ratio:16/9}
  .card-shot .card-body{padding:var(--s4) var(--s5) var(--s5)}
}
.panel{background:var(--wash);padding:var(--s6);border-left:5px solid var(--gold)}
.icon-ring{width:84px;height:84px;border-radius:50%;border:4px solid var(--gold);display:grid;place-items:center;color:var(--blue);margin:0 auto var(--s3)}
.icon-ring svg{width:38px;height:38px}
.feature{text-align:center}
.feature h3{color:var(--gold-dark)}
.feature p{margin-left:auto;margin-right:auto;font-size:16px}

.steps{counter-reset:s;list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s4)}
.steps li{counter-increment:s;position:relative;padding-left:60px;min-height:44px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-4px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink);font-weight:800}
.steps b{display:block;color:var(--ink)}
.ticks{list-style:none;margin:0 0 var(--s4);padding:0}
.ticks li{padding-left:30px;position:relative;margin-bottom:var(--s2)}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:14px;height:8px;border-left:3px solid var(--gold-dark);border-bottom:3px solid var(--gold-dark);transform:rotate(-45deg)}
.band-blue .ticks li::before{border-color:var(--gold)}
.quote{background:var(--paper);border-left:5px solid var(--gold);padding:var(--s4) var(--s5);margin:0 0 var(--s4);box-shadow:0 4px 18px rgba(0,0,0,.05)}
.quote .stars{color:var(--gold-dark);letter-spacing:2px;font-size:15px}
.quote p{font-style:italic;margin-bottom:var(--s2)}
.quote cite{font-style:normal;font-weight:700;font-size:14px;color:var(--muted)}
.faq{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--blue);font-size:18px;list-style:none;padding-right:28px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:24px;color:var(--gold-dark)}
.faq[open] summary::after{content:"\2212"}
.faq p{margin:var(--s3) 0 0}

/* Link tiles for hub pages */
.tiles{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{display:block;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gold);padding:var(--s5);text-decoration:none;color:var(--text);transition:box-shadow .15s,transform .15s}
.tile:hover{box-shadow:0 10px 26px rgba(0,0,0,.1);transform:translateY(-2px)}
.tile h3{margin-bottom:var(--s2)}
.tile p{font-size:16px;margin:0 0 var(--s3)}
.tile .more{color:var(--blue)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips a{display:block;padding:8px 14px;background:var(--paper);border:1px solid var(--line);border-radius:30px;text-decoration:none;font-weight:600;font-size:15px}
.chips a:hover{border-color:var(--gold);background:#FFF9E0}

/* Blog */
.post{max-width:760px;margin:0 auto}
.post h2{font-size:clamp(23px,3vw,28px);margin-top:var(--s6)}
.post h3{margin-top:var(--s5)}
.post ul,.post ol{padding-left:22px;margin:0 0 var(--s4)}
.post li{margin-bottom:6px}
.post-meta{font-size:14px;color:var(--muted);margin-bottom:var(--s5)}
.post-meta a{color:var(--muted)}
.post-list{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-top:4px solid var(--gold);background:var(--paper);text-decoration:none;color:var(--text)}
.post-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card div{padding:var(--s4) var(--s5) var(--s5)}
.post-card h3{font-size:18px}
.post-card time{font-size:13px;color:var(--muted)}

/* Form */
.form{border:1px solid var(--line);border-top:5px solid var(--gold);padding:var(--s5);background:var(--paper);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.form h2{font-size:26px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{font:400 17px/1.4 var(--font);color:var(--text);padding:14px;border:1px solid #B9C0C6;border-radius:3px;background:var(--paper);min-height:52px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:13px;color:var(--muted)}
.form .btn{width:100%}
.form-note{font-size:14px;color:var(--muted);margin:var(--s3) 0 0}

/* Call-to-action band above the footer */
.cta-band{padding:var(--s7) 0}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5)}
.cta-in h2{margin-bottom:var(--s2)}
.cta-in p{margin:0}
.cta-in .btns{margin:0}

/* Mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;
  background:var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
.callbar a{display:flex;align-items:center;justify-content:center;min-height:var(--bar);
  font:800 15px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#fff}
.callbar a.call{background:var(--red)}
.callbar a.quote{background:var(--blue)}

/* Footer */
footer.foot{background:var(--blue-deep);color:#C9D6E2;padding:var(--s7) 0 var(--s6);font-size:15px}
footer.foot a{color:#fff;text-decoration:none}
footer.foot a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:var(--s6);grid-template-columns:1.3fr 1fr 1fr 1fr}
footer.foot h3{color:var(--gold);font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s3)}
footer.foot ul{list-style:none;margin:0;padding:0}
footer.foot li{margin-bottom:var(--s2)}
.foot-logo{width:190px;margin-bottom:var(--s4)}
.foot-small{font-size:13px;color:#9FB3C6}
.foot-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s6);padding-top:var(--s4);font-size:13px;color:#9FB3C6;max-width:none}

/* Breadcrumb */
.crumb{font-size:14px;color:var(--muted);padding:var(--s3) var(--s4) 0}
.crumb a{color:var(--muted)}

/* Photography */
figure.shot{margin:0 0 var(--s5)}
figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{font-size:14px;color:var(--muted);padding-top:var(--s2)}
.bio{align-items:start}
.bio .portrait{display:block;width:100%;max-width:300px;height:auto;border-bottom:6px solid var(--gold)}
.bio h3{margin-bottom:var(--s2)}
.job-shot{display:block;width:100%;height:auto;margin-bottom:var(--s2)}

/* ---------- Tablets and phones ---------- */
@media (max-width:960px){
  .head-quote{display:none}
  .tel-text small{display:none}
  .menu-toggle{display:grid;place-items:center;width:50px;height:50px;background:var(--gold);border:0;border-radius:3px;cursor:pointer}
  .menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{display:block;width:24px;height:3px;background:var(--ink);position:relative;transition:transform .2s}
  .menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0}
  .menu-toggle .bars::before{top:-8px}.menu-toggle .bars::after{top:8px}
  .menu-open .menu-toggle .bars{background:transparent}
  .menu-open .menu-toggle .bars::before{transform:translateY(8px) rotate(45deg)}
  .menu-open .menu-toggle .bars::after{transform:translateY(-8px) rotate(-45deg)}

  nav.main{display:none;border-top:1px solid var(--line);max-height:calc(100vh - 80px);overflow-y:auto;background:var(--paper)}
  .menu-open nav.main{display:block}
  .menu{flex-direction:column;padding:var(--s2) 0 var(--s5)}
  .menu > li{flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .menu > li > a{flex:1;padding:14px 0;font-size:16px;border-bottom:0}
  .menu > li > a[aria-current="page"],.menu > li.is-current > a{border-bottom:0}
  .sub-toggle{width:52px;height:48px;margin:0;display:grid;place-items:center;border-left:1px solid var(--line)}
  .has-sub.open .sub-toggle::after{transform:rotate(225deg) translateY(-2px)}
  .sub{position:static;box-shadow:none;border-top:0;padding:0 0 var(--s4);width:100%}
  .has-sub:hover > .sub,.has-sub:focus-within > .sub{display:none}
  .has-sub.open > .sub{display:block}
  .mega-grid{grid-template-columns:1fr 1fr;width:auto;gap:var(--s4)}
  .suburbs{grid-template-columns:1fr 1fr;width:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .head .logo{width:160px}
  section{padding:var(--s7) 0}
  .panel{padding:var(--s5)}
  .bio .portrait{max-width:220px}
}
@media (max-width:560px){
  body{font-size:16px}
  .head-in{gap:var(--s2)}
  .head .logo{width:140px}
  .head-tel{font-size:18px;gap:var(--s2)}
  .tel-icon{width:40px;height:40px}
  .tel-icon svg{width:19px;height:19px}
  .topbar-in{gap:var(--s4);font-size:13px}
  .btns .btn{width:100%}
  .mega-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-in .btns{width:100%}
}
@media (max-width:380px){ .tel-text{display:none} }
/* The call bar is for phones and small tablets only */
@media (min-width:861px){
  .callbar{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
figure.shot img.crop{aspect-ratio:4/3;object-fit:cover}
.timeline{list-style:none;margin:8px 0 20px;padding:0 0 0 22px;border-left:3px solid var(--gold)}
.timeline li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;padding:8px 0}
.timeline li::before{content:"";position:absolute;left:-30px;top:13px;width:13px;height:13px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.timeline b{color:var(--ink)}

/* 1950s reviews band ---------------------------------------------------- */
/* 1950s band — gold, cut-out figure, big slab headline */
.band-retro{position:relative;overflow:hidden;background:var(--gold);color:var(--ink);
  padding:clamp(48px,6vw,76px) 0 0;margin-top:clamp(28px,4vw,48px);
  clip-path:polygon(0 clamp(20px,3vw,40px),100% 0,100% 100%,0 100%)}
/* sunburst behind the figure */
.band-retro::before{content:"";position:absolute;right:-6%;top:-40%;width:78%;height:180%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.34) 0deg 5deg,rgba(255,255,255,0) 5deg 14deg);
  mask-image:radial-gradient(60% 60% at 50% 50%,#000 20%,transparent 72%)}
/* halftone dots over the whole band */
.band-retro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(35,31,32,.16) 1px,transparent 1.7px);background-size:8px 8px;opacity:.5}
.band-retro .wrap{position:relative;z-index:1}
.retro-inner{display:grid;grid-template-columns:1fr minmax(300px,46%);gap:clamp(16px,3vw,32px);align-items:end}
.retro-copy{padding-bottom:clamp(40px,5vw,64px)}
.retro-kicker{margin:0 0 14px;font-weight:800;font-size:clamp(14px,1.5vw,17px);letter-spacing:.18em;text-transform:uppercase;color:var(--red-dark)}
.band-retro h2{margin:0;font-size:clamp(32px,5vw,58px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--blue-deep);text-shadow:clamp(1px,.22vw,3px) clamp(1px,.28vw,4px) 0 rgba(255,255,255,.92)}
.retro-lead{max-width:34ch;margin:clamp(16px,2vw,24px) 0 0;font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ink);font-weight:500}
.band-retro .btns{margin-top:clamp(20px,2.5vw,30px)}
/* the cut-out, standing on the bottom edge of the band */
.retro-figure{position:relative;align-self:end;margin-bottom:-2px}
.retro-figure img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06)}
/* red stamp */
.retro-stamp{position:absolute;left:-6%;bottom:8%;z-index:2;display:grid;place-content:center;text-align:center;
  width:clamp(96px,11vw,132px);aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;
  transform:rotate(-11deg);box-shadow:0 0 0 5px var(--gold),0 0 0 9px var(--red),0 10px 22px rgba(0,0,0,.22)}
.retro-stamp b{display:block;font-size:clamp(30px,3.6vw,42px);font-weight:800;line-height:1}
.retro-stamp i{display:block;color:var(--gold);font-style:normal;font-size:12px;letter-spacing:1px;line-height:1.4}
.retro-stamp em{display:block;font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
@media (max-width:820px){
  .retro-inner{grid-template-columns:1fr;gap:0}
  .retro-copy{padding-bottom:clamp(20px,4vw,32px)}
  .retro-lead{max-width:44ch}
  .band-retro h2{line-height:1.06}
  .retro-figure{max-width:340px;margin:0 auto -2px}
  .retro-stamp{left:auto;right:-4px;bottom:30%;width:clamp(84px,22vw,104px)}
}

/* 1950s pop-art panel — deep blue, gold halftone, comic speech bubble, drawn figure */
.band-pop{position:relative;overflow:hidden;background:var(--blue-deep);color:#fff;
  padding:clamp(40px,5vw,66px) 0 0;border-top:6px solid var(--gold);border-bottom:6px solid var(--gold)}
/* halftone dots */
.band-pop::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(248,202,36,.3) 1.3px,transparent 2px);background-size:10px 10px}
/* sunburst behind the figure */
.band-pop::after{content:"";position:absolute;right:-4%;top:-45%;width:72%;height:190%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(248,202,36,.18) 0deg 5deg,rgba(248,202,36,0) 5deg 14deg);
  mask-image:radial-gradient(60% 60% at 50% 50%,#000 20%,transparent 72%)}
.band-pop .wrap{position:relative;z-index:1}
.pop-inner{display:grid;grid-template-columns:1fr minmax(260px,40%);gap:clamp(16px,3vw,40px);align-items:end}
.pop-copy{padding-bottom:clamp(36px,5vw,60px)}
/* Comic speech balloon: a proper oval with a long tapered tail, drawn as two
   stacked triangles so the tail gets the same ink outline as the balloon. */
.pop-bubble{position:relative;display:inline-block;max-width:min(100%,380px);
  background:#FFFDF6;color:var(--ink);text-align:center;
  border:3px solid var(--ink);border-radius:50%;
  padding:clamp(34px,4.2vw,54px) clamp(30px,3.6vw,48px);
  box-shadow:6px 7px 0 rgba(35,31,32,.35);transform:rotate(-1.5deg);margin-bottom:56px}
.pop-bubble p{margin:0;max-width:none;font-weight:800;line-height:1.2;letter-spacing:-.01em;
  font-size:clamp(20px,2.7vw,30px);color:var(--blue-deep)}
/* ::before is the ink outline, ::after the cream fill sitting just inside it.
   The tail points at whoever is talking: on a phone she is stacked underneath,
   so it drops straight down; side by side she is off to the right. */
.pop-bubble::before,.pop-bubble::after{content:"";position:absolute}
.pop-bubble::before{clip-path:polygon(0 0,100% 0,46% 100%);
  right:42%;bottom:-54px;width:92px;height:70px;background:var(--ink)}
.pop-bubble::after{clip-path:polygon(0 0,100% 0,42% 100%);
  right:calc(42% + 9px);bottom:-43px;width:74px;height:59px;background:#FFFDF6}
@media (max-width:820px){
  /* Stacked on a phone, so drop the balloon to the bottom of the copy block -
     that puts it directly over her head with the tail pointing down at her. */
  .pop-copy{display:flex;flex-direction:column}
  .pop-bubble{order:2;margin:clamp(22px,6vw,34px) auto 30px}
}
@media (min-width:821px){
  /* Slide the balloon over to her side of the panel so it reads as her voice. */
  .pop-bubble{display:block;width:fit-content;margin-left:auto;margin-bottom:0;
    margin-right:calc(-1 * clamp(36px,11vw,170px))}
  /* The long tapered tail hangs off the balloon's underside and points down at
     her. It is a drawn shape, not two overlapping triangles: filled cream and
     stroked on its two long edges only, so the top edge has no line and melts
     into the balloon, breaking its outline at the join like an inked one. It
     starts well to the right of centre so the tip stays clear of the headline
     even on a wide screen where the headline runs on one line. */
  .pop-bubble{--tw:clamp(130px,12vw,190px);--th:clamp(96px,9vw,140px)}
  .pop-bubble::before{content:none}
  .pop-bubble::after{clip-path:none;right:16%;bottom:calc(14px - var(--th));
    width:var(--tw);height:var(--th);background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20190%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M-6%20-8%20L62%20-8%20L190%20140%20Z'%20fill='%23FFFDF6'/%3E%3Cpath%20d='M62%20-8%20L190%20140%20L-6%20-8'%20fill='none'%20stroke='%23231F20'%20stroke-width='4'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    background-size:100% 100%}
}
.pop-tag{margin:clamp(26px,3.4vw,40px) 0 0;max-width:none;font-weight:800;text-transform:uppercase;
  line-height:1.04;letter-spacing:-.01em;font-size:clamp(26px,4.2vw,50px);color:var(--gold);
  text-shadow:clamp(1px,.2vw,3px) clamp(1px,.26vw,4px) 0 rgba(35,31,32,.55)}
.pop-tag span{display:block}
.pop-since{margin:clamp(10px,1.4vw,16px) 0 0;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(13px,1.4vw,16px);color:#fff}
.band-pop .btns{margin-top:clamp(20px,2.6vw,30px)}
.band-pop .btn-call{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.band-pop .btn-call:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:var(--ink)}
.band-pop .btn-ghost{color:#fff;border-color:#fff}
.band-pop .btn-ghost:hover{background:#fff;color:var(--blue-deep)}
.pop-figure{position:relative;align-self:end;margin-bottom:-2px}
.pop-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(240px,32vw,430px);margin-left:auto}
@media (max-width:820px){
  .pop-inner{grid-template-columns:1fr;gap:0}
  .pop-copy{padding-bottom:clamp(18px,4vw,28px)}
  .pop-bubble{max-width:100%}
  .pop-figure{max-width:420px;margin:0 auto -2px}
}

/* The STS Guarantee band */
.band-guarantee{background:var(--blue-deep);color:#fff;padding:clamp(44px,6vw,72px) 0;border-top:6px solid var(--gold)}
.band-guarantee h2{color:#fff;margin-bottom:clamp(20px,3vw,32px)}
.band-guarantee .eyebrow{color:var(--gold)}
.guarantee-list{counter-reset:g;list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.guarantee-list li{counter-increment:g;position:relative;padding:var(--s4) var(--s4) var(--s4) 62px;
  background:rgba(255,255,255,.06);border-left:3px solid var(--gold);border-radius:3px}
.guarantee-list li::before{content:counter(g);position:absolute;left:16px;top:16px;width:32px;height:32px;
  border-radius:50%;background:var(--gold);color:var(--blue-deep);font-weight:800;display:grid;place-items:center;font-size:16px}
.guarantee-list b{display:block;font-size:17px;margin-bottom:4px}
.guarantee-list span{display:block;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}

/* Numbered process list — gold discs, same family as the guarantee band */
.process{counter-reset:p;list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Three across at desktop: five steps plus a sticker fills two full rows,
   instead of four across leaving step five alone beside a white hole. */
@media (min-width:900px){.process{grid-template-columns:repeat(3,1fr)}}
.process li.p-stick{background:none;border-left:0;padding:0;counter-increment:none;
  display:grid;place-items:center}
.process li.p-stick::before{content:none}
.process li{counter-increment:p;position:relative;padding:var(--s4) var(--s4) var(--s4) 58px;
  background:var(--wash);border-left:3px solid var(--gold);border-radius:3px}
.process li::before{content:counter(p);position:absolute;left:14px;top:16px;width:30px;height:30px;
  border-radius:50%;background:var(--gold);color:var(--blue-deep);font-weight:800;
  display:grid;place-items:center;font-size:15px}
.process h3{font-size:17px;margin:0 0 5px}
.process p{margin:0;font-size:15px;line-height:1.55;max-width:none}
.small{font-size:14px;color:var(--muted);margin-top:var(--s3)}

/* Suburb page: case study, reviews, FAQs */
.casestudy{display:grid;grid-template-columns:minmax(260px,42%) 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.casestudy img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block}
.cs-steps{display:grid;gap:var(--s4);margin:var(--s4) 0 0}
.cs-steps h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-dark);margin-bottom:6px}
.cs-steps p{margin:0}
@media (max-width:760px){.casestudy{grid-template-columns:1fr}}

/* Suburb page: about the suburb, long copy left, map right */
.about-grid{display:grid;grid-template-columns:1fr minmax(280px,42%);gap:clamp(24px,4vw,56px);align-items:start;margin-top:var(--s4)}
.about-copy p{max-width:62ch}
.about-copy p:last-child{margin-bottom:0}
.about-map{position:sticky;top:156px;margin:0}
.about-map img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--ink);border-radius:3px;box-shadow:6px 7px 0 rgba(35,31,32,.35);background:var(--wash)}
.about-map figcaption{margin-top:var(--s3);font-size:14px;color:var(--muted)}
.about-map figcaption a{font-weight:700}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr}
  .about-map{position:static;order:-1;max-width:520px}
}

.quotes{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gold);padding:var(--s5);border-radius:3px}
.quote p{font-size:16px;margin-bottom:var(--s3)}
.quote cite{font-style:normal;font-weight:800;font-size:14px;color:var(--blue)}
.quote .stars{color:var(--gold-dark);letter-spacing:2px;font-size:14px;display:block;margin-bottom:var(--s2)}

.faq{margin:0}
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--blue);font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-dark);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:var(--s3) 0 0;max-width:70ch}

/* Gold-circle service icons */
.svc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:clamp(14px,2vw,24px);margin-top:var(--s5)}
/* the full-width row on the home page: a fixed count so it never leaves one icon on its own */
.svc-row-8{grid-template-columns:repeat(4,1fr)}
@media (min-width:900px){.svc-row-8{grid-template-columns:repeat(8,1fr)}}
@media (max-width:420px){.svc-row-8{grid-template-columns:repeat(2,1fr)}}
.svc{display:block;text-align:center;text-decoration:none;color:var(--blue)}
.svc .ring{width:84px;height:84px;margin:0 auto 10px;border-radius:50%;background:var(--gold);color:var(--blue-deep);
  display:grid;place-items:center;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.svc .ring svg{width:42px;height:42px}
.svc b{display:block;font-size:14px;font-weight:800;line-height:1.3}
.svc:hover .ring{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.svc:hover b{color:var(--blue-deep)}
@media (max-width:560px){.svc .ring{width:64px;height:64px}.svc .ring svg{width:32px;height:32px}.svc b{font-size:13px}}

/* Guarantee seal */
.seal{width:132px;height:132px;flex:none;border-radius:50%;background:var(--gold);color:var(--blue-deep);
  display:grid;place-items:center;text-align:center;line-height:1.15;
  box-shadow:0 0 0 5px var(--blue-deep),0 0 0 9px var(--gold);transform:rotate(-7deg)}
.seal span{display:block}
.seal>span{padding:0 8px}
.seal .s1{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.seal .s2{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin:3px 0}
.seal .s3{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.guarantee-head{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.guarantee-head h2{margin:0}
@media (max-width:560px){.seal{width:108px;height:108px}.seal .s2{font-size:13px}}

/* ══ Character: stickers, polaroids, marker pen ═══════════════════════════
   The old site used stock photos and little graphics to stop a page being a
   wall of type. Same job here, drawn ourselves so it is ours and it loads
   in a few kilobytes. All of it is decoration: every sticker repeats
   something the text already says, so a screen reader loses nothing. */

/* A sticker sitting in the flow — safe at any width, so this is the default */
.stick{display:block;width:var(--w,150px);margin:var(--mt,0) auto 0;
  transform:rotate(var(--r,-6deg));transform-origin:50% 50%}
.stick-l{margin-left:0;margin-right:auto}
.stick-r{margin-left:auto;margin-right:0}

/* A sticker stuck over the edge of a band. Absolute, so it is hidden on
   narrow screens where there is no spare space for it to sit in. */
.stick-abs{display:none}
@media (min-width:1000px){
  .has-stick{position:relative}
  .stick-abs{display:block;position:absolute;z-index:3;pointer-events:none;
    width:var(--w,150px);left:var(--x,auto);right:var(--rt,auto);
    top:var(--y,auto);bottom:var(--b,auto);transform:rotate(var(--r,-6deg))}
}

/* A row of stickers used as a divider, for the wide empty spots */
.stickrow{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:center;
  justify-content:center;margin:var(--mt,8px) 0 0}
.stickrow .stick{margin:0}

/* Marker-pen highlight behind a few words. The gradient stops partway up so
   it reads as a highlighter stroke rather than a filled box. */
.hl{background-image:linear-gradient(transparent 55%,rgba(248,202,36,.9) 55%,rgba(248,202,36,.9) 94%,transparent 94%);
  padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Photo strip — job photos pinned up, not a neat grid */
.band-strip{background:var(--blue-deep);color:#fff;overflow:hidden}
.band-strip h2{color:#fff}
.band-strip .eyebrow{color:var(--gold)}
.band-strip .lead{color:#CFE0EE}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(26px,3vw,38px)}
.strip figure{margin:0;background:#FFFDF6;padding:9px 9px 0;
  box-shadow:0 8px 22px rgba(0,0,0,.28);transform:rotate(var(--r,0deg))}
.strip figure:nth-child(odd){--r:-2.2deg}
.strip figure:nth-child(even){--r:1.9deg}
.strip figure:nth-child(3n){--r:3deg}
.strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e7ecf1}
.strip figcaption{color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.35;
  padding:8px 2px 10px;min-height:44px}
@media (max-width:1100px){
  .strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70vw,260px);
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
    margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);
    padding-left:var(--s4);padding-right:var(--s4)}
  .strip figure{scroll-snap-align:center;--r:0deg}
}

/* Halftone fade at the top of a wash band, so the sections are not all
   flat white boxes stacked on each other */
.band-wash{position:relative}
.band-wash::before{content:"";position:absolute;left:0;right:0;top:0;height:74px;
  pointer-events:none;background-image:radial-gradient(var(--blue) 1.5px,transparent 1.6px);
  background-size:14px 14px;opacity:.15;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.band-wash > *{position:relative}

/* A drawn quote mark on the review card */
.quote{position:relative}
.quote::before{content:"\201C";position:absolute;right:14px;top:-6px;
  font-size:86px;line-height:1;font-weight:800;color:var(--gold);opacity:.5;pointer-events:none}

/* The Google seal sits beside the read-more link, under the review card */
.seal-row{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s4);flex-wrap:wrap}
.seal-row p{margin:0}

/* Colour photo strip near the foot of a page, to break up the text before the form.
   Flat cream panel with the words on the left, the photo filling the right. */
.band-photo{display:grid;grid-template-columns:minmax(320px,40%) 1fr;padding:0;background:#FFFDF6;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.band-photo-card{align-self:center;padding:clamp(36px,5vw,72px) clamp(24px,4vw,56px) clamp(36px,5vw,72px) max(var(--s4),calc((100vw - 1160px) / 2 + var(--s4)))}
.band-photo-card .eyebrow{color:var(--red)}
.band-photo-line{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.2;color:var(--blue-deep);letter-spacing:-.01em;max-width:18ch}
.band-photo-card .btns{margin-top:var(--s5)}
.band-photo-pic{position:relative;min-height:clamp(320px,34vw,500px);background:var(--ink) var(--band-img) no-repeat;background-size:cover;background-position:var(--band-pos,50% 30%)}
.band-photo-pic::before{content:"";position:absolute;inset:0 auto 0 0;width:clamp(40px,8vw,120px);background:linear-gradient(90deg,#FFFDF6,rgba(255,253,246,0))}
@media (max-width:760px){
  .band-photo{grid-template-columns:1fr}
  .band-photo-pic{order:-1;min-height:0;aspect-ratio:3/2;background-image:var(--band-img-s,var(--band-img))}
  .band-photo-pic::before{inset:auto 0 0 0;width:auto;height:48px;background:linear-gradient(0deg,#FFFDF6,rgba(255,253,246,0))}
  .band-photo-card{padding:24px var(--s4) 32px}
  .band-photo-line{font-size:22px;max-width:none}
}

/* Banner with one of the people photos: taller, words on the left, the person on the right.
   Behind everything is the old site's touched-up kitchen, in black and white, so the photo
   continues across the whole banner instead of stopping at a block of colour. */
.hero.hero-people{text-align:left;min-height:clamp(420px,42vw,640px);display:flex;align-items:center;padding:clamp(48px,7vw,90px) 0;
  background:#2a2a2c url('/assets/img/people/kitchen-bg.webp') center/cover no-repeat}
.hero.hero-people::before{filter:grayscale(1) contrast(1.05) brightness(.9)}
@media (min-width:761px){
  .hero.hero-people::before{background-size:auto 100%;background-repeat:no-repeat;background-position:var(--hero-pos,100% 50%);
    mask-image:linear-gradient(90deg,transparent 0,#000 34%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
}
.hero.hero-people::after{background:linear-gradient(90deg,rgba(18,18,20,.93) 0%,rgba(18,18,20,.86) 44%,rgba(18,18,20,.4) 70%,rgba(18,18,20,.18) 100%)}
.hero.hero-people .wrap{width:100%;max-width:none;padding-left:clamp(16px,4.5vw,88px)}
.hero.hero-people .kicker,.hero.hero-people h1,.hero.hero-people p{margin-left:0;margin-right:0}
.hero.hero-people .kicker::before{content:none}.hero.hero-people .kicker::after{content:"\00a0\2013"}
.hero.hero-people h1{max-width:13ch;font-size:clamp(34px,4.4vw,68px);line-height:1.02}
.hero.hero-people .lead{max-width:min(38ch,44vw);font-size:clamp(18px,1.7vw,26px)}
.hero.hero-people .kicker{font-size:clamp(14px,1.1vw,17px)}
.hero.hero-people .btns{justify-content:flex-start}
@media (max-width:760px){
  .hero.hero-people{min-height:0;text-align:center}
  .hero.hero-people::after{background:linear-gradient(180deg,rgba(18,18,20,.82),rgba(18,18,20,.86))}
  .hero.hero-people .kicker,.hero.hero-people h1,.hero.hero-people p{margin-left:auto;margin-right:auto}
  .hero.hero-people .kicker::before{content:"\2013\00a0"}
  .hero.hero-people .btns{justify-content:center}
}

/* Band variant for the old home-page composite: one wide picture, dark on the left, the words straight on it */
.band-photo.band-photo-full{position:relative;display:flex;align-items:center;min-height:clamp(360px,34vw,520px);
  background:#2a2a2c var(--band-img) center/cover no-repeat;background-position:var(--band-pos,50% 50%);border:0}
.band-photo.band-photo-full::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,18,20,.93) 0%,rgba(18,18,20,.86) 44%,rgba(18,18,20,.4) 70%,rgba(18,18,20,.15) 100%)}
.band-photo.band-photo-full .band-photo-card{position:relative;max-width:min(620px,46vw);padding:clamp(36px,5vw,72px) 0 clamp(36px,5vw,72px) clamp(16px,4.5vw,88px)}
.band-photo.band-photo-full .eyebrow{color:var(--gold)}
.band-photo.band-photo-full .band-photo-line{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);font-size:clamp(24px,2.7vw,40px);max-width:16ch}
.band-photo.band-photo-full .btn-ghost{color:#fff;border-color:#fff}
.band-photo.band-photo-full .btn-ghost:hover{background:#fff;color:var(--blue)}
.band-photo.band-photo-full .band-photo-pic{display:none}
@media (max-width:760px){
  .band-photo.band-photo-full{display:grid;background:none;min-height:0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
  .band-photo.band-photo-full::before{content:none}
  .band-photo.band-photo-full .band-photo-card{max-width:none;padding:24px var(--s4) 32px}
  .band-photo.band-photo-full .eyebrow{color:var(--red)}
  .band-photo.band-photo-full .band-photo-line{color:var(--blue-deep);text-shadow:none}
  .band-photo.band-photo-full .btn-ghost{color:var(--blue);border-color:var(--blue)}
  .band-photo.band-photo-full .band-photo-pic{display:block;background-image:var(--band-img)}
}

/* Badges taken from the old site: the workmanship rosette in the guarantee heading,
   and the framed pop-art poster on the service pages (the picture has its own bubble) */
.rosette{display:block;width:clamp(120px,14vw,176px);height:auto;flex:none;filter:drop-shadow(0 0 14px rgba(255,255,255,.4)) drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.band-pop-poster .pop-copy{padding-bottom:clamp(36px,5vw,60px)}
.band-pop-poster .pop-tag{margin-top:0}
.band-pop-poster .pop-inner{align-items:center}
.pop-poster{align-self:center;margin-bottom:0;padding:clamp(20px,3vw,36px) 0}
.pop-poster img{max-height:clamp(260px,34vw,440px);border:4px solid #FFFDF6;border-radius:3px;box-shadow:10px 11px 0 rgba(35,31,32,.45);transform:rotate(2deg)}
@media (max-width:820px){
  .band-pop-poster .pop-copy{order:2;padding-top:18px}
  .pop-poster{max-width:360px;margin:0 auto;padding:10px 0 0}
  .pop-poster img{margin:0 auto}
}

/* Spam trap on the enquiry form: people never see it, bots fill it in and get binned */
.form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}