@font-face{font-family:'Ambler Cy';src:url('/assets/fonts/ambler-cy.woff2') format('woff2');font-display:swap}
/* Ambler Group – Central Scotland drainage pages. Mirrors ambler-group.co.uk (Salient theme):
   green top bar, white header, photo hero with quote card, framed photos, purple uppercase buttons,
   dark photo accordions, van CTA band, dark footer. Single light theme, same as the main site. */
:root{
  color-scheme:light;
  --purple:#2a2265; --frame:#5a4fa5; --green:#8bc53f; --green-hi:#81d742;
  --ink:#000; --text:#4b4b55; --on-green:#1b1840; --green-text:#3f6f14; --soft:#f6f6f6; --line:#e4e4e4; --white:#fff;
  --footer:#252525; --copy:#1a1a1a; --footer-text:#ccc;
  --font:'Ambler Cy','Lexend',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1100px; --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--white);color:var(--text);font:400 17px/1.65 var(--font)}
/* The Ambler font joins "oo", "48" and similar pairs into decorative glyphs that read as glitches – switch those off everywhere */
html,body,button,input,select,textarea{font-feature-settings:"liga" 0,"clig" 0,"calt" 0,"dlig" 0;font-variant-ligatures:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple)}
a:hover{color:var(--frame)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
h1,h2,h3{font-family:var(--font);color:var(--ink);line-height:1.15;margin:0 0 .6em;text-wrap:balance}
h3{font-size:1.2rem;font-weight:600;line-height:1.3}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
.narrow{max-width:860px}
.center{text-align:center}
.small{font-size:.9rem}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:200}

/* ---------- top bar + header (as ambler-group.co.uk) */
.topbar{background:var(--green);color:var(--on-green);font-size:.88rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
.topbar a{color:var(--on-green);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.topbar svg{width:14px;height:14px;fill:currentColor}
.tb-social,.tb-contact{display:flex;gap:16px;align-items:center}
.site-header{background:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:50;box-shadow:0 0 3px rgba(0,0,0,.12)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.logo img{width:200px;height:auto}
.mainnav>ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
.mainnav>ul>li>a,.mainnav summary{display:block;padding:8px 10px;color:var(--ink);text-decoration:none;font-size:1.05rem;font-weight:500;cursor:pointer;list-style:none;position:relative}
.mainnav summary::-webkit-details-marker{display:none}
.mainnav summary::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.mainnav>ul>li>a::before,.mainnav summary::before{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.mainnav>ul>li>a:hover::before,.mainnav summary:hover::before,.mainnav .on::before{transform:scaleX(1)}
.drop{position:relative}
.drop ul{position:absolute;top:calc(100% + 14px);left:0;min-width:290px;background:#fff;list-style:none;margin:0;padding:10px 0;box-shadow:0 18px 40px rgba(0,0,0,.14);border-top:3px solid var(--purple)}
.drop ul a{display:block;padding:8px 22px;color:var(--ink);text-decoration:none;font-size:.95rem}
.drop ul a:hover,.drop ul a[aria-current]{background:var(--soft);color:var(--purple)}
.drop .sep{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.burger{display:none}

/* ---------- buttons */
.btn{display:inline-block;font:700 .9rem/1.3 var(--font);letter-spacing:2px;text-transform:uppercase;padding:16px 34px;border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;transition:opacity .2s,transform .2s}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{color:#fff}
.btn-green{background:var(--green);color:var(--on-green)}
.btn-green:hover{color:var(--on-green)}
.btn-block{display:block;width:100%;text-transform:none;letter-spacing:.5px}

/* ---------- headings with small green rule, as on the main site */
.h2{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:600;padding-bottom:18px;position:relative;margin-bottom:24px}
.h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:2px;background:var(--green)}
.h2.center::after{left:50%;transform:translateX(-50%)}
.h2.light{color:#fff}
.lede{max-width:760px;margin-inline:auto}
.kicker{display:flex;align-items:center;gap:10px;color:var(--green-text);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.95rem;margin:0 0 8px}
.kicker::before{content:"";width:34px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor;margin-top:-5px}

/* ---------- hero (photo + white quote card, like the Nottingham page) */
.hero{position:relative;background:#333 var(--hero) center/cover no-repeat;color:#fff;padding:70px 0}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.45))}
.hero-copy h1,.hero-copy p,.hero-call,.hero-points{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.hero .btn{text-shadow:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media (max-width:900px){.hero::before{background:rgba(0,0,0,.62)}}
.hero-grid{position:relative;display:block}
.hero-copy{max-width:760px}
.hero{padding:110px 0}
.hero-btn{margin:0 0 24px}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:600;margin-bottom:18px}
.hero-copy p{font-size:1.1rem;max-width:620px}
.hero-call{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;margin:6px 0 22px}
.hero-call svg{width:24px;height:24px}
.hero-call:hover{color:var(--green-hi)}
.hero-points{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hero-points li{padding-left:28px;position:relative}
.hero-points li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--green)}
.hero-points li::after{content:"";position:absolute;left:5px;top:7px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-card{background:#fff;color:var(--text);border-radius:6px;padding:34px 34px 28px;box-shadow:0 20px 50px rgba(0,0,0,.3);scroll-margin-top:120px}
.hero-card h2{font-size:1.9rem;font-weight:500;text-align:center;margin-bottom:8px}
.hero-card>p{text-align:center;font-size:.9rem;margin-bottom:18px}

/* ---------- forms (underline fields as on ambler-group.co.uk) */
.qform{display:grid;gap:14px}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qform label{display:block;font-size:.85rem;color:var(--text)}
.qform label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qform label.file>span{position:static;width:auto;height:auto;display:block;margin-bottom:4px}
.qform input,.qform select,.qform textarea{width:100%;font:400 .95rem var(--font);color:var(--ink);background:transparent;border:0;border-bottom:1px solid #cfcfcf;padding:10px 2px;border-radius:0}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:0;border-bottom:2px solid var(--purple)}
.qform input[type=file]{border:1px dashed #cfcfcf;padding:10px;font-size:.85rem}
.qform textarea{resize:vertical}
.qform .consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;line-height:1.45}
.qform .consent input{width:auto;margin-top:3px}
.qform .consent span{position:static;width:auto;height:auto;clip:auto}
.hp{display:none}

/* ---------- breadcrumbs */
.crumbs{background:var(--soft);font-size:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0 auto;padding-block:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:#999}
.crumbs a{color:var(--text);display:inline-block;padding:6px 0}

/* ---------- sections */
.sec{padding:90px 0}
.grey{background:var(--soft)}
.arcs{background:#fff var(--arcs) center/cover no-repeat}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.top{align-items:start}
.split.wide-left{grid-template-columns:1.5fr 1fr}
.copy{min-width:0}

/* framed photos: offset outline square like the main site */
.framed{position:relative;margin:0;padding:34px 0 0 34px}
.framed::before{content:"";position:absolute;left:0;top:0;width:78%;height:80%;border:7px solid var(--green)}
.framed-purple::before{border-color:var(--frame);left:auto;right:0;width:85%}
.framed-purple{padding:34px 34px 0 0}
.framed img{position:relative;width:100%;aspect-ratio:4/3.1;object-fit:cover;max-width:100%}
.faq-split .framed img{aspect-ratio:3/3.6}

/* square bullet lists */
.sq{list-style:none;padding:0;margin:0 0 1.4em}
.sq li{position:relative;padding:5px 0 5px 28px}
.sq li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:12px;border:2px solid var(--purple)}
.sq li::after{content:"";position:absolute;left:4px;top:16px;width:4px;height:4px;background:var(--purple)}

.panel{background:#fff;padding:32px;box-shadow:0 10px 30px rgba(0,0,0,.06);border-top:4px solid var(--green)}
.places{list-style:none;padding:0;margin:0;columns:2;column-gap:20px;font-size:.97rem}
.places li{break-inside:avoid;padding:5px 0 5px 18px;position:relative;color:var(--ink)}
.places li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--green)}

/* cards (white with shadow, as the "Why choose" cards) */
.cards{display:grid;gap:24px;margin-top:40px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border-radius:6px;padding:30px 26px;box-shadow:0 8px 30px rgba(0,0,0,.07);display:flex;flex-direction:column;min-width:0}
a.card{text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(42,34,101,.15);color:var(--text)}
.card h3{font-size:1.12rem;color:var(--ink);margin-bottom:10px;text-wrap:pretty}
.card p{font-size:1rem;flex:1;margin-bottom:16px}
.more{display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-weight:600;font-size:.9rem}
.more svg{width:18px;height:18px}
.why{text-align:center;align-items:center}
.circle{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--frame);color:#fff;font-size:1.3rem;font-weight:600;box-shadow:0 0 0 5px rgba(90,79,165,.25);margin-bottom:18px}
.small-line{margin-top:34px;font-size:.95rem}

/* accordions */
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-size:1.1rem;font-weight:500;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:0 0 26px;height:26px;border:1.5px solid #999;border-radius:50%;display:grid;place-items:center;color:#999;font-size:1.05rem;line-height:1}
.acc details[open] summary{color:var(--purple)}
.acc details[open] summary::after{content:"–";border-color:var(--green);color:var(--green)}
.acc details p{padding:0 40px 14px 0}

/* dark photo section */
.darkphoto{position:relative;background:#222 var(--bg) center/cover no-repeat;color:#e8e8e8}
.darkphoto::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72)}
.darkphoto .wrap{position:relative}
.darkphoto .h2::after{background:#fff}
.acc-dark details{border-color:rgba(255,255,255,.22)}
.acc-dark summary{color:#fff}
.acc-dark details[open] summary{color:#fff}
.acc-dark summary::after{border-color:rgba(255,255,255,.7);color:#fff}
.acc-dark{margin-bottom:30px}

/* process steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.steps li{display:flex;gap:18px;align-items:flex-start}
.num{flex:0 0 46px;height:46px;border-radius:50%;background:var(--frame);color:#fff;display:grid;place-items:center;font-weight:600;box-shadow:0 0 0 4px rgba(90,79,165,.22)}
.steps h3{margin:6px 0 4px;font-size:1.08rem}
.steps p{margin:0;font-size:1rem}

/* van CTA band */
.vanband{position:relative;background:#1f1a4a var(--bg) center/cover no-repeat;color:#fff}
.vanband::before{content:"";position:absolute;inset:0;background:rgba(20,16,50,.82)}
.vb{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:44px;flex-wrap:wrap}
.vb-h{margin:0;font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:600;line-height:1.2;max-width:720px;color:#fff}
.vb-h a{color:#fff;text-decoration:none;white-space:nowrap}
.vb-h a:hover{color:var(--green-hi)}

/* testimonial */
.quote-sec{background:var(--soft)}
blockquote{margin:0 0 20px}
blockquote p{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.55;color:var(--ink)}
cite{font-style:normal;color:var(--purple);font-weight:600}

/* contact */
.contact .qform{background:#fff;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.cinfo{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.cinfo li{display:flex;gap:18px;align-items:flex-start}
.ci{flex:0 0 54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--frame),var(--green));display:grid;place-items:center}
.ci svg{width:24px;height:24px;fill:#fff}
.cinfo h3{margin:4px 0 4px;font-size:1.05rem}
.cinfo p{margin:0 0 8px}
.cinfo a{color:var(--text);text-decoration:none}

/* footer */
.site-footer{background:var(--footer);color:var(--footer-text);font-size:.92rem}
.fcols{display:grid;grid-template-columns:1.2fr 1.3fr .9fr 1.2fr 1.1fr;gap:34px;padding-block:70px 50px}
.site-footer h2{color:#fff;font-size:1rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding-bottom:12px;margin-bottom:18px;position:relative}
.site-footer h2::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--green)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{padding:3px 0}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--green-hi)}
.site-footer strong{color:#fff}
.fsoc{display:flex;gap:14px}
.fsoc svg{width:16px;height:16px;fill:var(--green)}
.copyright{background:var(--copy);color:#aaa;font-size:.9rem;text-align:center}
.copyright .wrap{padding-block:26px}
.copyright a{color:#ccc}
.mobile-bar{display:none}
h1.plain{font-size:2.5rem}

/* ---------- responsive */
@media (max-width:1060px){
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .burger{display:block}
  .burger summary{list-style:none;cursor:pointer;display:grid;gap:5px;padding:10px}
  .burger summary::-webkit-details-marker{display:none}
  .burger span{display:block;width:26px;height:2px;background:var(--ink)}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 18px 30px rgba(0,0,0,.12);max-height:75vh;overflow:auto}
  .nav-open .mainnav{display:block}
  .mainnav>ul{flex-direction:column;align-items:stretch;padding:10px 20px 20px;gap:0}
  .mainnav>ul>li{border-bottom:1px solid var(--line)}
  .drop ul{position:static;box-shadow:none;border:0;padding:0 0 8px;min-width:0}
  .hero-grid,.split,.split.wide-left{grid-template-columns:1fr;gap:40px}
  .cards.three{grid-template-columns:1fr 1fr}
  .sec{padding:64px 0}
}
@media (max-width:640px){
  .topbar .tb-social,.topbar .tb-contact a+a{display:none}
  .topbar .wrap{justify-content:center}
  .logo img{width:160px}
  .hero{padding:44px 0}
  .hero-card{padding:26px 20px}
  .qform .row,.cards.three,.cards.four,.fcols{grid-template-columns:1fr}
  .places{columns:1}
  .framed{padding:20px 0 0 20px}
  .framed-purple{padding:20px 20px 0 0}
  .framed::before{border-width:5px}
  .acc details p{padding-right:0}
  body{padding-bottom:56px}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--purple)}
  .mobile-bar a{display:flex;justify-content:center;align-items:center;gap:8px;padding:16px;color:#fff;text-decoration:none;font-weight:600}
  .mobile-bar a+a{background:var(--green);color:var(--on-green)}
  .mobile-bar a+a svg{fill:var(--on-green)}
  .mobile-bar svg{width:16px;height:16px;fill:#fff}
}

.fcontact a{word-break:break-all}

/* ---------- phone / email enquiries */
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn-ghost:hover{background:#fff;color:var(--purple)}
.btn-ghost-dark{background:transparent;color:var(--purple);box-shadow:inset 0 0 0 2px var(--purple)}
.cta-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:0 0 30px}
.cta-card{flex-direction:row;align-items:center;gap:16px;padding:22px}
.cta-card strong{display:block;color:var(--ink);font-size:1.15rem;margin-bottom:2px}
.cta-card span:last-child{min-width:0;overflow-wrap:anywhere;color:var(--purple);font-weight:500}

/* ---------- guides */
.hero-short{padding:80px 0 70px}
.tag{display:inline-block;align-self:flex-start;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple);background:rgba(90,79,165,.1);padding:4px 10px;border-radius:20px;margin-bottom:12px}
.article{max-width:720px}
.article h2{font-size:1.65rem;font-weight:600;margin:1.6em 0 .6em}
.article h2:first-of-type{margin-top:.4em}
.article .meta{font-size:.9rem;color:#5e5e66}
.article-cta{background:var(--soft);border-left:4px solid var(--green);padding:20px 24px;margin-top:30px}
.article-cta p{margin:0}
.article-split{grid-template-columns:1.7fr 1fr}
.sticky{position:sticky;top:110px}
.sticky h3+ul{margin-bottom:24px}
.fgap{margin-top:26px}

/* ---------- cookie banner (only when tracking is switched on) */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.25);border-radius:6px;padding:20px 22px;font-size:.9rem}
.cookie p{margin:0 0 12px}
.cookie div{display:flex;gap:10px}
.cookie .btn{padding:10px 20px;font-size:.8rem}
@media (max-width:900px){.article-split{grid-template-columns:1fr}.sticky{position:static}}
@media (max-width:640px){.cta-cards{grid-template-columns:1fr}.cookie{bottom:70px}}

/* service cards: 7 items, centre the last row */
.cards.flexrow{display:flex;flex-wrap:wrap;justify-content:center}
.cards.flexrow>.card{flex:0 1 calc(25% - 18px)}
@media (max-width:1060px){.cards.flexrow>.card{flex-basis:calc(50% - 12px)}}
@media (max-width:640px){.cards.flexrow>.card{flex-basis:100%}}
.nowrap{white-space:nowrap}

/* surveying-services.com additions */
.qlt{overflow-x:auto;margin:1.2em 0}
.qlt table{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff}
.qlt th,.qlt td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.qlt th{background:var(--purple);color:#fff;font-weight:600}
.qlt tr:nth-child(even) td{background:var(--soft)}
.card.guide[aria-current]{outline:3px solid var(--green)}
.small-line a{white-space:nowrap}
.qlt td:first-child{white-space:nowrap}