/* Skin: trade. The familiar UK trade-site layout, played straight: trust bar, phone in the header,
   full-width film with a quote starter across its foot, logos, services, promises, three steps,
   proof, areas and a closing form. White page, cool grey bands, charcoal ink, AAA yellow for actions.
   Dark and yellow sections are inset rounded panels, never full-width bands. */
:root{
  --ink:#15191e; --dark:#1a2027; --deep:#11151a; --mid:#2a323c; --line:#3b4552; --on:#ffffff; --on2:#c8d0d8;
  --tint:#f2f4f6; --mute:#56616d; --rule:#dde2e7;
  --y:#ffd557; --y-hover:#ffe085;
  --pass:#0f7a47; --pass-bg:#dbf2e5; --adv:#7d5200; --adv-bg:#fff0c2; --act:#a3291a; --act-bg:#fbdcd6;
  --fd:"Bricolage Grotesque","Figtree",system-ui,sans-serif; --fb:"Figtree",system-ui,sans-serif;
  --display-weight:700; --display-track:-.03em;
  --pad:clamp(20px,5vw,56px); --max:1240px; --ease:cubic-bezier(.16,1,.3,1);
  --radius:22px; --btn-radius:999px; --pill:999px; --field-radius:12px; --img-radius:18px; --hd-h:80px; --btn-line:1.5px;
  --panel:clamp(22px,3vw,36px); --gut:clamp(8px,2vw,28px);
  --hd-bg:#fff; --hd-fg:var(--ink); --hd-line:var(--rule);
  --hero-shade:linear-gradient(90deg,rgba(17,21,26,.78) 0%,rgba(17,21,26,.6) 34%,rgba(17,21,26,0) 66%),linear-gradient(180deg,rgba(17,21,26,.3) 0%,rgba(17,21,26,.1) 32%,rgba(17,21,26,.84) 100%);
  --tier-bg:var(--mid); --tier-fg:#fff; --gold-bg:var(--y);
  --fact-line:var(--rule); --fact-fg:var(--mute); --fact-num:var(--ink);
  --lift:0 1px 2px rgba(21,25,30,.05),0 18px 40px -20px rgba(21,25,30,.28);
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body{font-size:1.0625rem}
.elementor-widget-heading .elementor-heading-title{line-height:1.05;font-variation-settings:"opsz" 60}
h1.elementor-heading-title{font-size:clamp(2.5rem,5.4vw,4.4rem)}
h2.elementor-heading-title{font-size:clamp(1.9rem,3.5vw,2.9rem)}
h3.elementor-heading-title{font-size:1.35rem;letter-spacing:-.02em}
.e-con.sec{--padding-top:clamp(56px,7.5vw,112px);--padding-bottom:clamp(56px,7.5vw,112px)}
.lede p{max-width:56ch}

/* buttons */
.elementor-widget-button .elementor-button,.btn{font-weight:700;padding:0 28px}
.btn svg.i{transition:transform .35s var(--ease)}
.btn:hover svg.i{transform:translateX(4px)}
.elementor-widget-button.more .elementor-button{padding:0 0 4px}

/* ---------- trust bar and header ---------- */
.util-t{background:var(--deep);color:#dfe5ea;font-size:.88rem}
.util-t .wrap{min-height:40px;gap:24px}
.util-t ul{display:flex;flex-wrap:wrap;gap:6px 26px;list-style:none;margin:0 auto 0 0;padding:0}
.util-t li{display:flex;align-items:center;gap:8px;font-weight:500}
.util-t li svg{width:15px;height:15px;color:var(--y)}
.util-t .wrap>span{margin-right:0;color:#aeb8c2}
.logo{padding:0;background:none;border-radius:0}
.logo img{height:48px}
.nav{gap:26px}
.nav .rc{background:var(--tint);color:var(--ink);padding:9px 16px 9px 30px;position:relative}
.nav .rc::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--y);box-shadow:0 0 0 1px rgba(21,25,30,.25)}
.nav .rc:hover{background:var(--y)}
.tel{gap:12px;font:700 1.12rem/1.15 var(--fd);letter-spacing:-.01em}
.tel>svg{width:42px;height:42px;padding:11px;border-radius:50%;background:var(--tint)}
.tel small{display:block;font:500 .76rem/1.3 var(--fb);letter-spacing:0;color:var(--mute)}
.tel:hover>svg{background:var(--y)}
.hd .btn-head{min-height:48px}

/* ---------- hero: full-width film, headline at its foot, quote starter across the lower edge ---------- */
.e-con.hero{min-height:min(78svh,760px);--justify-content:flex-end;--padding-top:88px;--padding-bottom:clamp(104px,10vw,132px);background-position:center 46%}
.e-con.hero.short{min-height:min(66svh,620px);--padding-top:56px;--padding-bottom:clamp(40px,5vw,64px);--justify-content:center}
.hero h1.elementor-heading-title{max-width:15ch;text-shadow:0 2px 28px rgba(0,0,0,.28)}
.hero .lede p{color:#e6ecf0;max-width:52ch}
.hero .btn-o .elementor-button{color:#fff}
.mark{display:none}
.e-con.hero-base{position:relative;z-index:2;margin-top:-64px}
.qstart{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) auto;gap:6px 16px;align-items:end;background:#fff;color:var(--ink);border-radius:var(--radius);padding:22px 24px 18px;box-shadow:0 2px 4px rgba(17,21,26,.06),0 34px 60px -30px rgba(17,21,26,.5);animation:rise .8s .22s var(--ease) both}
.qstart h2{font:700 1.5rem/1.05 var(--fd);letter-spacing:-.025em;max-width:9ch;align-self:center;padding-right:10px}
.qstart label{display:grid;gap:7px;font-weight:600;font-size:.9rem}
.qstart input,.qstart select{font:inherit;font-weight:400;font-size:1.03rem;height:56px;padding:0 16px;border:1.5px solid #a7b1ba;border-radius:var(--field-radius);background:#fff;color:var(--ink);width:100%}
.qstart input::placeholder{color:#68737e}
.qstart input:focus,.qstart select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,213,87,.7)}
.qstart .btn{height:56px;min-height:56px;white-space:nowrap}
.qstart-note{grid-column:2/-1;display:flex;gap:8px;align-items:center;margin-top:6px;font-size:.92rem;color:var(--mute)}
.qstart-note svg{width:16px;height:16px;flex:none;color:var(--pass)}
.qstart-note.yes{color:var(--pass);font-weight:600}
body.elementor-editor-active .qstart{animation:none}

/* ---------- accreditations ---------- */
.e-con.acc{border-bottom:1px solid var(--rule)}
.thero+.acc .acc-row{padding-block:34px 30px}
.acc-row p{color:var(--mute)}

/* ---------- section heads ---------- */
.e-con.head{border-bottom:0;padding-bottom:0;margin-bottom:clamp(26px,3.2vw,44px)}

/* ---------- services: three lead jobs, then the rest ---------- */
.svc-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .2s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:#c5ccd3}
.feat-pic{display:block;overflow:hidden}
.feat-pic img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform 1s var(--ease)}
.feat:hover .feat-pic img{transform:scale(1.045)}
.feat-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.feat b{font:700 1.55rem/1.1 var(--fd);letter-spacing:-.025em}
.feat-body>span:not(.go){color:var(--mute);margin-top:7px}
.feat ul{list-style:none;margin:18px 0 22px;padding:18px 0 0;border-top:1px solid var(--rule);display:grid;gap:9px;font-weight:500;font-size:.98rem}
.feat li{display:flex;gap:10px;align-items:flex-start}
.feat li svg{width:18px;height:18px;margin-top:.2em;color:var(--pass)}
.feat .go{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-weight:700;align-self:flex-start;padding-bottom:3px;box-shadow:inset 0 -2px 0 var(--y)}
.feat .go svg{transition:transform .35s var(--ease)}
.feat:hover .go svg{transform:translateX(5px)}
.svc-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:20px}
.svc-rest a:not(.svc-call){display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:18px;align-items:center;padding:10px 18px 10px 10px;border:1px solid var(--rule);border-radius:18px;background:#fff;text-decoration:none;color:var(--mute);font-size:.95rem;line-height:1.4;transition:border-color .2s,box-shadow .35s var(--ease)}
.svc-rest a:not(.svc-call):hover{border-color:#c5ccd3;box-shadow:var(--lift)}
.svc-rest img{width:76px;height:76px;border-radius:11px;object-fit:cover}
.svc-rest b{display:block;font:700 1.14rem/1.2 var(--fd);letter-spacing:-.015em;color:var(--ink);margin-bottom:2px}
.svc-rest .go{width:38px;height:38px;padding:10px;border-radius:50%;background:var(--tint);color:var(--ink);transition:background .2s,transform .35s var(--ease)}
.svc-rest a:hover .go{background:var(--y);transform:translateX(3px)}
.svc-call{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;background:var(--dark);color:var(--on2);border-radius:18px;padding:18px 18px 18px 26px;text-decoration:none}
.svc-call b{display:block;font:700 1.3rem/1.15 var(--fd);letter-spacing:-.02em;color:#fff}
.svc-call .num{display:inline-flex;align-items:center;gap:9px;background:var(--y);color:#141200;font-weight:700;font-size:1.08rem;padding:13px 22px;border-radius:var(--pill);transition:background .2s}
.svc-call:hover .num{background:var(--y-hover)}

.why-grid .portrait img{border-radius:clamp(18px,2.2vw,28px)}

/* ---------- process: three steps, then the questions ---------- */
.e-con.steps{--display:grid;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,52px);counter-reset:step}
.e-con.step{counter-increment:step}
.step h3.elementor-heading-title{position:relative;font-size:1.4rem}
.step h3.elementor-heading-title::before{content:counter(step);display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--y);color:#141200;font:800 1.3rem/1 var(--fd);margin-bottom:20px}
.step h3.elementor-heading-title::after{content:"";position:absolute;left:66px;right:calc(clamp(22px,3.4vw,52px) * -1 + 16px);top:24px;border-top:2px dashed #bfc8d0}
.step:last-child h3.elementor-heading-title::after{display:none}
.step .elementor-widget-text-editor{margin-top:10px;color:var(--mute);max-width:36ch}
.pay-head p{font:700 1.05rem var(--fd);margin-top:clamp(36px,4.5vw,60px)}
.e-con.pay{margin-top:14px;border-radius:16px}
.pay .elementor-widget-text-editor{padding:16px 18px}
.pay .elementor-widget-text-editor:nth-child(3){background:var(--tint);box-shadow:none}
.e-con.faq-wrap{margin-top:clamp(64px,8vw,116px)}
.faq .elementor-toggle-item:first-child{border-top:1px solid var(--rule)}
.faq .elementor-tab-title{padding-block:22px;font-size:1.18rem}

/* ---------- panels: dark and yellow sections sit inset with rounded corners ---------- */
.e-con.sec.dark,.e-con.sec.deep,.e-con.sec.yellow{background:none;--padding-top:clamp(14px,2.2vw,32px);--padding-bottom:clamp(14px,2.2vw,32px);--padding-left:var(--gut);--padding-right:var(--gut)}
.e-con.sec.dark>.e-con.wrap,.e-con.sec.deep>.e-con.wrap,.e-con.sec.yellow>.e-con.wrap{max-width:calc(var(--max) + 96px);border-radius:var(--panel);--padding-top:clamp(40px,6vw,92px);--padding-bottom:clamp(40px,6vw,92px);--padding-left:clamp(22px,5vw,76px);--padding-right:clamp(22px,5vw,76px)}
.e-con.sec.dark>.e-con.wrap{background:var(--dark)}
.e-con.sec.deep>.e-con.wrap{background:var(--deep)}
.e-con.sec.yellow>.e-con.wrap{background:var(--y)}
.e-con.sec.band>.e-con.wrap{--padding-top:clamp(28px,3.6vw,48px);--padding-bottom:clamp(28px,3.6vw,48px)}
.tint+.dark,.tint+.deep,.tint+.yellow{--padding-top:clamp(40px,5vw,72px)}
.dark:has(+.tint),.deep:has(+.tint),.yellow:has(+.tint){--padding-bottom:clamp(40px,5vw,72px)}
.e-con.sec.closing{--padding-bottom:clamp(40px,5vw,72px)}
.e-con.offer{background:rgba(255,255,255,.04)}

/* ---------- page heads ---------- */
.e-con.pagehead{--padding-top:clamp(32px,4vw,56px);--padding-bottom:clamp(40px,5vw,72px)}
.pagehead h1.elementor-heading-title{font-size:clamp(2.3rem,4.6vw,3.7rem);max-width:17ch}
.crumbs{color:var(--mute)}
.e-con.ph-grid{--display:grid;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center}
.ph-pic img{aspect-ratio:4/3;object-fit:cover;border-radius:clamp(20px,2.6vw,32px)}
.e-con.keyfacts-row{border-bottom:1px solid var(--rule)}

/* ---------- forms ---------- */
.aaa-form{box-shadow:0 2px 4px rgba(17,21,26,.05),0 30px 60px -34px rgba(17,21,26,.45)}
.aaa-form input,.aaa-form select,.aaa-form textarea{border-color:#a7b1ba}
.aaa-form .btn{justify-self:start}
.aaa-form.quick .btn{justify-self:stretch}
.e-con.care-grid:has(>.side-form){align-items:start}
.care-grid>.side-form{position:sticky;top:calc(var(--hd-h) + 24px)}
.side-form .aaa-form{border:1px solid var(--rule);box-shadow:var(--lift);padding:28px}
.care-grid:has(>.side-form) .cta{display:none}
.history .years{border-top-color:var(--rule)}
.history .years p{color:var(--mute)}
.history .years strong{color:var(--ink)}
.tint .aaa-form,.quote-top .aaa-form{border:1px solid var(--rule)}

/* ---------- reviews, projects, family, areas ---------- */
.e-con.revs{border-top:0;gap:18px;margin-top:0}
.e-con.rev{background:var(--tint);border-radius:var(--radius);--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px}
.e-con.rev+.e-con.rev{--padding-left:28px;border-left:0}
.tint .e-con.rev{background:#fff}
.rev .q p{font:500 1.16rem/1.45 var(--fb);letter-spacing:0}
.rev .by p{font-weight:600;color:var(--ink)}
.e-con.proj{margin-top:0}
.fam-grid .portrait img{border-radius:clamp(20px,2.6vw,32px)}
.wide img{border-radius:clamp(20px,2.6vw,32px)}
@media (min-width:1081px){.areas .e-con.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.towns{border-top:0;gap:10px;margin-top:26px}
.towns a{padding:14px 14px 14px 16px;border:1px solid var(--rule);border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .35s var(--ease)}
.towns a:hover{color:inherit;border-color:#c5ccd3;box-shadow:var(--lift)}
.towns a svg{color:var(--mute)}
.towns small{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--mute);background:var(--tint);padding:4px 10px;border-radius:var(--pill);white-space:nowrap}
.svc-links a{box-shadow:inset 0 0 0 1.5px var(--rule);background:#fff}
.svc-links a:hover{box-shadow:none}
.ig-nav button{border-radius:50%}
.ft{padding-top:72px}

@media (max-width:1180px){
  .util-t li:nth-child(2){display:none}
}
@media (max-width:1080px){
  .nav{background:#fff;color:var(--ink)}
  .nav a{border-bottom-color:var(--rule)}
  .nav .rc{text-align:left;padding-left:30px}
  .e-con.rev+.e-con.rev{--padding-left:28px;margin-top:0;border-top:0}
  .e-con.ph-grid{grid-template-columns:minmax(0,1fr)}
  .ph-pic img{aspect-ratio:16/9}
  .care-grid>.side-form{position:static}
  .qstart{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto}
  .qstart h2{grid-column:1/-1;max-width:none;padding:0 0 6px}
  .qstart-note{grid-column:1/-1}
}
@media (max-width:940px){
  .svc-feat{grid-template-columns:minmax(0,1fr);gap:14px}
  .feat{flex-direction:row}
  .feat-pic{flex:0 0 38%;position:relative;min-height:150px}
  .feat-pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .e-con.steps{grid-template-columns:minmax(0,1fr);gap:26px}
  .step h3.elementor-heading-title{padding-left:68px;min-height:50px;display:flex;align-items:center}
  .step h3.elementor-heading-title::before{position:absolute;left:0;top:0;margin:0}
  .step h3.elementor-heading-title::after{display:none}
  .step .elementor-widget-text-editor{padding-left:68px;margin-top:2px;max-width:none}
}
@media (max-width:760px){
  .util-t .wrap{justify-content:center;min-height:36px}
  .util-t ul{margin:0}
  .util-t li:nth-child(n+2),.util-t .wrap>span{display:none}
  :root{--hero-shade:linear-gradient(180deg,rgba(17,21,26,.5) 0%,rgba(17,21,26,.62) 40%,rgba(17,21,26,.9) 100%)}
  .e-con.hero{min-height:min(64svh,540px);--padding-top:40px;--padding-bottom:72px}
  .hero .rating{display:none}
  .e-con.hero.short{--padding-bottom:36px}
  .e-con.hero-base{margin-top:-44px}
  .qstart{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 18px 16px}
  .qstart h2{font-size:1.35rem;padding:0}
  .qstart-note{margin-top:0;align-items:flex-start}
  .qstart-note svg{margin-top:.2em}
  .svc-rest{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc-rest a:not(.svc-call){grid-template-columns:64px minmax(0,1fr) auto;gap:14px;padding:8px 14px 8px 8px}
  .svc-rest img{width:64px;height:64px}
  .svc-call{padding:20px}
  .svc-call .num{width:100%;justify-content:center}
  .towns{grid-template-columns:1fr}
  .e-con.sec.dark>.e-con.wrap,.e-con.sec.deep>.e-con.wrap,.e-con.sec.yellow>.e-con.wrap{--padding-left:20px;--padding-right:20px}
  .aaa-form .btn{justify-self:stretch}
}
@media (max-width:640px){
  /* lead services become compact rows so three of them fit in about one screen */
  .feat-pic{flex:0 0 34%}
  .feat ul{display:none}
  .feat-body{padding:16px 16px 18px}
  .feat b{font-size:1.25rem}
  .feat-body>span:not(.go){font-size:.95rem}
  .feat .go{margin-top:12px;font-size:.95rem}
}

/* yellow menu bar that fades into the hero photo below it */
.skin-trade{--hd-bg:var(--y);--hd-line:transparent}
.hd .btn-head{background:var(--ink);color:#fff}
.hd .btn-head:hover{background:#000;color:#fff}
.nav .rc{background:rgba(255,255,255,.55)}
.nav .rc::before{background:var(--ink);box-shadow:none}
.nav .rc:hover{background:#fff}
.tel small{color:rgba(21,25,30,.72)}
.hd .tel .ic,.hd .tel svg{color:var(--ink)}
.e-con.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(110px,13vw,190px);background:linear-gradient(180deg,color-mix(in srgb,var(--y) 100%,transparent) 0%,color-mix(in srgb,var(--y) 86%,transparent) 12%,color-mix(in srgb,var(--y) 66%,transparent) 26%,color-mix(in srgb,var(--y) 44%,transparent) 42%,color-mix(in srgb,var(--y) 26%,transparent) 58%,color-mix(in srgb,var(--y) 12%,transparent) 74%,color-mix(in srgb,var(--y) 4%,transparent) 88%,color-mix(in srgb,var(--y) 0%,transparent) 100%);pointer-events:none;z-index:0}
.e-con.hero>.e-con{position:relative;z-index:1}
@media (max-width:640px){.e-con.hero::after{height:90px}}
/* a shorter homepage hero, closer to site 1's; the transparent logo needs its white plate back in the dark footer */
.e-con.hero:not(.short){min-height:0;--padding-top:clamp(84px,7.4vw,108px);--padding-bottom:clamp(84px,7.5vw,104px);background-position:center 74%}
.e-con.hero:not(.short)::after{height:clamp(84px,7vw,104px)}
/* the photo's dark shade eases in below the fade, so the yellow meets a lighter photo and leaves no line */
.e-con.hero::before{background:linear-gradient(90deg,rgba(17,21,26,.7) 0%,rgba(17,21,26,.5) 34%,rgba(17,21,26,0) 66%),linear-gradient(180deg,rgba(17,21,26,0) 0,rgba(17,21,26,.12) 70px,rgba(17,21,26,.2) 32%,rgba(17,21,26,.84) 100%)}
@media (max-width:640px){.e-con.hero::before{background:linear-gradient(180deg,rgba(17,21,26,0) 0,rgba(17,21,26,.25) 60px,rgba(17,21,26,.6) 160px,rgba(17,21,26,.9) 100%)}}
.e-con.hero::after{background:linear-gradient(180deg,color-mix(in srgb,var(--y) 100.0%,transparent) 0.0%,color-mix(in srgb,var(--y) 99.9%,transparent) 5.0%,color-mix(in srgb,var(--y) 99.1%,transparent) 10.0%,color-mix(in srgb,var(--y) 97.3%,transparent) 15.0%,color-mix(in srgb,var(--y) 94.2%,transparent) 20.0%,color-mix(in srgb,var(--y) 89.6%,transparent) 25.0%,color-mix(in srgb,var(--y) 83.7%,transparent) 30.0%,color-mix(in srgb,var(--y) 76.5%,transparent) 35.0%,color-mix(in srgb,var(--y) 68.3%,transparent) 40.0%,color-mix(in srgb,var(--y) 59.3%,transparent) 45.0%,color-mix(in srgb,var(--y) 50.0%,transparent) 50.0%,color-mix(in srgb,var(--y) 40.7%,transparent) 55.0%,color-mix(in srgb,var(--y) 31.7%,transparent) 60.0%,color-mix(in srgb,var(--y) 23.5%,transparent) 65.0%,color-mix(in srgb,var(--y) 16.3%,transparent) 70.0%,color-mix(in srgb,var(--y) 10.4%,transparent) 75.0%,color-mix(in srgb,var(--y) 5.8%,transparent) 80.0%,color-mix(in srgb,var(--y) 2.7%,transparent) 85.0%,color-mix(in srgb,var(--y) 0.9%,transparent) 90.0%,color-mix(in srgb,var(--y) 0.1%,transparent) 95.0%,color-mix(in srgb,var(--y) 0.0%,transparent) 100.0%)}
.hd .tel>svg{background:rgba(255,255,255,.55)}
.ft .logo{background:#fff;padding:8px 12px;border-radius:10px}