/* Responsive fixes (28 Oct 2026 client feedback).
   Loaded last on every page, after the page <style> blocks, so it can override
   the inline layout styles. Breakpoints match the /*RESP*/ layer:
   480 small phones, 767 phones, 1020 tablet/mobile menu, plus 600 and 1100 for card grids. */

/* Section spacing: also capped by viewport height so short screens do not get huge gaps */
:root{--sec-y:clamp(44px,min(6.5vw,10vh),96px);--sec-y-lg:clamp(52px,min(7.5vw,11vh),110px)}

/* ---------- Hero: keep all hero info above the fold ---------- */
#top h1{font-size:clamp(30px,min(3.4vw + 14px,7.6vh),66px)!important;line-height:1.02!important}
#top h1+p{font-size:clamp(16px,min(.9vw + 7px,2.6vh),19px)!important;line-height:1.5!important}
#top [style*="justify-content:center;gap:24px"],#top div:has(>.tcs-cta-row){gap:clamp(14px,2.6vh,22px)!important}
/* hero copy sits above the decorative circles of the hero image (on phones they overlapped the USPs) */
#top div:has(>.tcs-cta-row){position:relative;z-index:1}
#top .tcs-cta-row>a{padding:15px 26px!important;font-size:16px!important}
section#top[data-screen-label="01 Hero"]>div[style*="min-height"]{min-height:calc(100svh - 84px - 56px)!important}
@media (max-width:767px){section#top[data-screen-label="01 Hero"]>div[style*="min-height"]{min-height:0!important}}
/* hero USPs: always one row, never a single item dropping to its own line */
#top [style*="minmax(150px,1fr)"]{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px!important;padding-top:16px!important;font-size:13px!important}
#top [style*="minmax(150px,1fr)"]>*{gap:7px!important}
#top [style*="minmax(150px,1fr)"] i{width:36px!important;height:36px!important;font-size:19px!important}
@media (max-width:600px){
#top [style*="minmax(150px,1fr)"]>*{flex-direction:column;text-align:center;justify-content:flex-start}
#top [style*="minmax(150px,1fr)"]{font-size:12px!important;gap:6px!important}
}

/* ---------- Card grids: 4 -> 2 -> 1, 3 -> 2 + full-width -> 1, 6 -> 3x2 / 2x3 -> 1 ---------- */
[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):not([style*="minmax(140px"]):has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:1099px){[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):not([style*="minmax(140px"]):has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:599px){[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):not([style*="minmax(140px"]):has(>:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)!important}}

@media (min-width:1021px){[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (min-width:600px) and (max-width:1020px){
[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):has(>:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):has(>:nth-child(3):last-child)>:nth-child(3){grid-column:1/-1}
}
@media (max-width:599px){[style*="grid-template-columns:repeat(auto-fit"]:not([style*="minmax(150px"]):has(>:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)!important}}

@media (min-width:600px) and (max-width:1099px){[style*="minmax(min(100%,360px),1fr)"]:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:1100px){[style*="minmax(min(100%,360px),1fr)"]:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* client logos: 6 in a row, 3x2 below desktop, 2x3 on small phones */
@media (max-width:1099px){[style*="minmax(140px,1fr)"]:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:767px){[style*="minmax(140px,1fr)"]>div{height:72px!important;padding:10px 12px!important}}
@media (max-width:420px){[style*="minmax(140px,1fr)"]:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---------- Section heading rows: heading and intro side by side instead of leaving an empty column ---------- */
section [style*="align-items:flex-end;justify-content:space-between"]>h2,
section [style*="align-items:flex-end;justify-content:space-between"]>div:first-child{flex:1 1 480px;max-width:660px!important}
section [style*="align-items:flex-end;justify-content:space-between"]>p{flex:0 1 400px}
/* heading + intro paragraph: two equal halves with a small gap, the paragraph fills its half */
@media (min-width:768px){
section [style*="align-items:flex-end;justify-content:space-between"]:has(>p:last-child){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px clamp(24px,3vw,48px)!important;align-items:end}
section [style*="align-items:flex-end;justify-content:space-between"]:has(>p:last-child)>*{max-width:none!important}
}

/* ---------- Homepage: services picker ---------- */
#services [style*="align-items:flex-end;justify-content:space-between"]>div:first-child{flex-basis:420px}
@media (max-width:1199px),(max-height:820px){
#services .tcs-svc{padding:8px 14px!important;gap:14px!important}
#services .tcs-svc>span:first-child{width:44px!important;height:44px!important;font-size:24px!important}
#services .tcs-svc>span:nth-child(2)>span:first-child{font-size:18px!important}
#services .tcs-svc>span:nth-child(2)>span:last-child{font-size:13.5px!important}
#services div:has(>#svc-img){min-height:clamp(240px,40vw,380px)!important}
}
/* the image card's text cannot be read on phones: hide it, the list links straight to each service */
@media (max-width:767px){#services div:has(>#svc-img){display:none!important}}

/* ---------- Reviews ---------- */
#reviews h2{font-size:clamp(28px,2.4vw + 12px,54px)!important}
#reviews blockquote{font-size:clamp(15px,.4vw + 11.5px,18px)!important;line-height:1.45!important}
#reviews .tcs-greview,#reviews .tcs-review{padding:clamp(18px,1.6vw,26px)!important;gap:14px!important}
#reviews a:has(>span+span){padding:16px 20px!important}
#reviews a:has(>span+span)>span:first-child{font-size:clamp(34px,2.6vw + 10px,48px)!important}
@media (max-width:767px){
/* the two rating boxes side by side */
#reviews div:has(>a:has(>span+span)){flex-wrap:nowrap!important;justify-content:stretch!important;gap:10px!important}
#reviews a:has(>span+span){flex:1 1 0!important;min-width:0;max-width:none!important;padding:12px 14px!important;gap:10px!important;border-radius:18px!important}
#reviews a:has(>span+span)>span:first-child{font-size:30px!important}
#reviews a:has(>span+span) span{font-size:12.5px!important}
#reviews a:has(>span+span) [style*="color:var(--c-star)"]{font-size:13px!important}
/* review cards swipe sideways so the whole section fits one screen */
#reviews div:has(>.tcs-greview){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
#reviews div:has(>.tcs-greview)::-webkit-scrollbar{display:none}
#reviews div:has(>.tcs-greview)>.tcs-greview{flex:0 0 86%;scroll-snap-align:start}
#reviews .tcs-greview{grid-column:auto!important}
#reviews{padding-top:40px!important;padding-bottom:40px!important}
#reviews>div[style*="max-width:1320px"]{gap:22px!important}
#reviews blockquote{font-size:14.5px!important}
#reviews p{font-size:13px!important}
#reviews div:has(>a+a):not(:has(>a>span+span)){width:100%;flex-wrap:nowrap!important}
#reviews div:has(>a+a):not(:has(>a>span+span))>a{flex:1 1 0;justify-content:center;text-align:center;padding:12px 12px!important;font-size:13.5px!important;line-height:1.25}
}

/* ---------- FAQ: the two buttons side by side on phones ---------- */
@media (max-width:767px){
#faqs div:has(>a[href^="tel:"]+a){width:100%;flex-wrap:nowrap!important}
#faqs div:has(>a[href^="tel:"]+a)>a{flex:1 1 0;justify-content:center;padding:11px 12px!important;font-size:14px!important;white-space:nowrap}
}

/* ---------- Subpages: long two-column text blocks stack on tablet ---------- */
@media (max-width:1099px){
[data-screen-label="02 Introduction"]>div,[data-screen-label="02 Our story"]>div{grid-template-columns:minmax(0,1fr)!important}
[data-screen-label="02 Introduction"]>div>div:first-child,[data-screen-label="02 Our story"]>div>div:first-child{min-height:0!important;width:100%;height:clamp(260px,42vw,420px)}
}

/* ---------- Footer ---------- */
/* eDirect and The Network logos: show at their real pixel size so they stay sharp */
footer .tcs-credits img[alt*="eDirect"]{width:71px!important;height:10px!important;image-rendering:pixelated}
footer .tcs-credits img[alt^="The Network"]{width:16px!important;height:16px!important}
footer .tcs-credits{gap:10px!important}
/* tablet: one compact row of columns instead of a tall wrapped layout */
@media (min-width:768px) and (max-width:1199px){
footer{padding-top:44px!important;padding-bottom:104px!important}
footer>div{gap:28px!important}
footer>div>div:first-child{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.7fr) max-content;gap:24px 28px!important}
/* the address keeps its two lines: never break "Bourne Avenue" onto its own line */
footer span:has(>br){white-space:nowrap}
footer>div>div:first-child>div:first-child{max-width:none!important}
footer>div>div:first-child a{overflow-wrap:anywhere}
}
@media (min-width:768px) and (max-width:999px){
footer>div>div:first-child{grid-template-columns:minmax(0,1fr) minmax(0,.7fr) max-content}
footer>div>div:first-child>div:first-child{grid-column:1/-1;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:14px 24px!important}
footer>div>div:first-child>div:first-child>p{flex:1 1 260px}
}

/* ---------- Subpages: tighter type and cards so sections are not taller than they need to be ---------- */
:root{--fs-lead:clamp(15.5px,.3vw + 13px,17px)}
section:not(#top) h2[style*="font-size:clamp"]{font-size:clamp(26px,2vw + 14px,48px)!important}
[style*="minmax(min(100%,360px),1fr)"]:has(>:nth-child(6):last-child)>*{padding:clamp(20px,1.8vw,26px)!important;gap:10px!important}
[style*="minmax(min(100%,360px),1fr)"]:has(>:nth-child(6):last-child) h3{font-size:clamp(18px,.5vw + 14px,21px)!important}
[style*="minmax(min(100%,360px),1fr)"]:has(>:nth-child(6):last-child) p{font-size:15px!important;line-height:1.5!important}
[style*="minmax(min(100%,360px),1fr)"]:has(>:nth-child(6):last-child)>*>span:first-child{width:48px!important;height:48px!important;font-size:25px!important}
[data-screen-label^="05 Domestic"] [style*="height:260px"]{height:clamp(160px,16vw,220px)!important}
[data-screen-label^="05 Domestic"] p{font-size:15.5px!important;line-height:1.55!important}
[data-screen-label^="05 Domestic"] [style*="padding:clamp(26px,3vw,40px)"]{padding:clamp(20px,2.2vw,30px)!important;gap:12px!important}
[data-screen-label="04 How it works"] p{line-height:1.5!important}
[data-screen-label="04 How it works"] h3{font-size:20px!important}
@media (min-width:1100px){
/* long intro text gets the wider column so it is not a tall narrow block */
[data-screen-label="02 Introduction"]>div,[data-screen-label="02 Our story"]>div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important}
}
[data-screen-label="02 Introduction"] p,[data-screen-label="02 Our story"] p{line-height:1.5!important}
[data-screen-label="02 Introduction"] [style*="gap:18px"],[data-screen-label="02 Our story"] [style*="gap:18px"]{gap:14px!important}
.faq-item button{padding:16px 20px!important}
.faq-item [role="region"]{font-size:15.5px!important;padding:0 20px 18px!important}
.tcs-gallery>figure{height:clamp(150px,15vw,210px)!important}
#results [style*="min-height:clamp(240px,62vw,420px)"]{min-height:clamp(240px,50vw,380px)!important}
[data-screen-label="04 How it works"] [style*="minmax(min(100%,240px),1fr)"]>div{padding:18px 20px!important;gap:8px!important}
[data-screen-label="04 How it works"] [style*="minmax(min(100%,240px),1fr)"] i{width:44px!important;height:44px!important;font-size:24px!important}
[data-screen-label="04 How it works"] h4{font-size:18px!important}
[data-screen-label="04 How it works"] [style*="minmax(min(100%,240px),1fr)"] p{font-size:14.5px!important}
/* services overview image cards: shorter so two rows fit closer to one screen */
[data-screen-label="02 Services"] a:has(>img){min-height:clamp(240px,25vw,330px)!important}
[data-screen-label="02 Services"] a:has(>img)>span:last-child{padding:20px 22px!important}
/* two audience cards stay side by side on tablet instead of stacking into one tall column */
@media (min-width:768px){[data-screen-label^="05 Domestic"] [style*="minmax(min(100%,460px),1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}}
/* phones: hero buttons side by side to keep the USPs above the fold */
@media (min-width:360px) and (max-width:767px){
#top .tcs-cta-row{flex-wrap:nowrap!important;gap:8px!important}
#top .tcs-cta-row>a{flex:1 1 0!important;justify-content:center;padding:14px 8px!important;font-size:14.5px!important;gap:6px!important;white-space:nowrap;text-align:center}
#top .tcs-cta-row>a i{font-size:16px!important}
}

/* ---------- Touch targets: 48x48px minimum on phones ---------- */
@media (max-width:767px){
section a[href]:not(p a),section button,nav[aria-label="Breadcrumb"] a{min-height:48px}
nav[aria-label="Breadcrumb"] a{min-width:48px}
/* footer links keep the same even spacing as desktop (client request), so no 48px rows there */
footer .tcs-credits a[aria-label]{min-height:48px!important}
}
@media (max-width:359px){footer>div>div:first-child{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 16px!important}}
/* small phones: rating number on top, stars and label on the line below */
@media (max-width:480px){
#reviews a:has(>span+span){flex-direction:column;align-items:flex-start!important;justify-content:center;gap:6px!important}
#reviews a:has(>span+span)>span:last-child{flex-direction:column;gap:3px!important}
#reviews a:has(>span+span)>span:last-child>span{flex-wrap:wrap}
}

/* ---------- Desktop: hero and the trust strip below it both fit in the first screen ---------- */
@media (min-width:1100px){
:root{--trust-h:56px}
section#top[data-screen-label="01 Hero"]>div[style*="min-height"]{min-height:calc(100svh - 85px - var(--trust-h) - clamp(28px,4vh,56px))!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
section#top[data-screen-label="01 Hero"]:has(>div[style*="min-height"]){padding-top:clamp(14px,2vh,28px)!important;padding-bottom:clamp(14px,2vh,28px)!important}
[data-screen-label="02 Trust strip"]{padding-top:0!important;padding-bottom:0!important}
[data-screen-label="02 Trust strip"]>div{min-height:var(--trust-h);flex-wrap:nowrap!important;gap:10px 32px!important}
[data-screen-label="02 Trust strip"]>div>div:first-child{font-size:clamp(16px,.6vw + 9px,20px)!important;white-space:nowrap}
[data-screen-label="02 Trust strip"]>div>div:last-child{flex-wrap:nowrap!important;gap:8px clamp(14px,1.4vw,28px)!important;font-size:clamp(13px,.3vw + 10px,15px)!important;white-space:nowrap}
[data-screen-label="02 Trust strip"]>div>div:last-child i{font-size:20px!important}
}

/* ---------- Image service cards (services overview, related services) ---------- */
/* text sits in the normal flow, so the card grows to fit it instead of cutting off the icon */
section a[href]:has(>img):has(>span:last-child>span:first-child[style*="border-radius"]){display:flex!important;flex-direction:column;justify-content:flex-end}
section a[href]:has(>img)>span:last-child:has(>span:first-child[style*="border-radius"]){position:relative!important;inset:auto!important;z-index:1}
@media (max-width:767px){
section a[href]:has(>img)>span:last-child:has(>span:first-child[style*="border-radius"]){padding:120px 20px 22px!important}
/* darker overlay behind the text so it reads on any photo */
section a[href]:has(>img):has(>span:last-child>span:first-child[style*="border-radius"])>span:nth-of-type(1){background:linear-gradient(180deg,rgba(14,47,94,.05) 0%,rgba(14,47,94,.6) 38%,rgba(14,47,94,.96) 70%)!important}
}

/* ---------- Buttons: label on one line, smaller text on small screens ---------- */
/* (the side-by-side pairs in the hero, FAQ and reviews keep their own sizing) */
:where(section a[style*="border-radius:999px"],section a[style*="border-radius: 999px"],.tcs-tabs>button,[style*="position:fixed"] a):not(:where(#top .tcs-cta-row>a,#faqs a,#reviews a)){white-space:nowrap}
@media (max-width:1099px){
:where(section a[style*="border-radius:999px"],section a[style*="border-radius: 999px"]):not(:where(#top .tcs-cta-row>a,#faqs a,#reviews a)){font-size:clamp(13px,1.1vw + 9.5px,16px)!important;padding-left:clamp(14px,2.4vw,24px)!important;padding-right:clamp(14px,2.4vw,24px)!important;gap:6px!important;max-width:100%}
/* long audience-card CTAs (up to ~23em): full card width, no arrow, text sized to the card */
[data-screen-label^="05 Domestic"] a[style*="border-radius"]{align-self:stretch!important;justify-content:center;padding-left:8px!important;padding-right:8px!important;letter-spacing:-.01em;font-size:clamp(12px,calc((50vw - 100px) / 22.7),15px)!important}
[data-screen-label^="05 Domestic"] a[style*="border-radius"] i{display:none}
}
@media (max-width:767px){
[data-screen-label^="05 Domestic"] [style*="padding:clamp(26px,3vw,40px)"]{padding:20px 16px!important}
[data-screen-label^="05 Domestic"] a[style*="border-radius"]{font-size:clamp(10.5px,calc((100vw - 84px) / 22.7),15px)!important}
}
@media (max-width:480px){
.tcs-tabs>button{font-size:13px!important;padding:12px 8px!important;gap:6px!important}
.tcs-tabs>button i{font-size:17px!important}
/* results CTA: full width, no arrow */
#results a[style*="border-radius"]{align-self:stretch!important;justify-content:center;padding-left:10px!important;padding-right:10px!important;font-size:clamp(12px,calc((100vw - 52px) / 19.3),16px)!important}
#results a[style*="border-radius"] i{display:none}
/* floating quote bar */
[style*="position:fixed"] a{font-size:15px!important}
}
@media (max-width:360px){.tcs-tabs>button i{display:none}.tcs-tabs>button{min-width:0}}
/* hero button pair stays side by side; slightly smaller text so both fit at 360-380px */
@media (min-width:360px) and (max-width:380px){#top .tcs-cta-row>a{font-size:13px!important;padding-left:6px!important;padding-right:6px!important;gap:5px!important;min-width:0}}
/* FAQ button pair stays side by side; below 380px drop the icons so both fit inside the card */
@media (max-width:380px){#faqs div:has(>a[href^="tel:"]+a)>a{min-width:0;font-size:13px!important;padding:11px 8px!important}#faqs div:has(>a[href^="tel:"]+a)>a i{display:none}}