/* ==========================================================================
   Hyderabad Septic Tank Cleaning Service
   style.css — design system + components
   Palette / type scale reproduced 1:1 from the reference design.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --navy:#01306E;
  --coral:#EA4B43;
  --amber:#FFC752;
  --amber-sh:#FFC853;          /* offset shadow on framed images */
  --text:#3A3A42;
  --ink:#11121A;
  --muted:#777787;
  --white:#FFFFFF;
  --white-c7:rgba(255,255,255,.78);
  --white-47:rgba(255,255,255,.28);
  --line:#D2D2E4;
  --sky:#EAF3FF;
  --pink:#FEEDEB;
  --cream:#FEF5DF;

  --container:1240px;
  --radius:6px;
  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font:400 15px/1.5em var(--ff);
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border:0;border-radius:6px}
svg{display:block}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
a{color:var(--navy);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--coral)}
b,strong{font-weight:700}

/* --- 3. Base typography ------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-family:var(--ff)}
h1{font-size:40px;font-weight:800;line-height:1.2em}
h2{font-size:28px;font-weight:800;line-height:1.3em}
h3{font-size:20px;font-weight:700;line-height:1.3em}
h4{font-size:17px;font-weight:700;line-height:1.2em}
h5{font-size:15px;font-weight:700;line-height:1.5em;letter-spacing:0}
h6{font-size:13px;font-weight:700;line-height:1.2em;letter-spacing:0}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
.t-big{font-size:100px;font-weight:800;line-height:1.2em}
.t17-500{font-size:17px;font-weight:500;line-height:1.5em}
.t16-700{font-size:16px;font-weight:700;line-height:1.4em;color:var(--ink)}
.t13-400{font-size:13px;font-weight:400;line-height:1.3em}
/* --- 4. Layout ---------------------------------------------------------- */
.sec{position:relative}
/* Elementor's boxed container: 10px gutter on the outer element, inner content
   capped at --container, so the usable width is the full 1240 (not 1200). */
.con{width:100%;max-width:calc(var(--container) + 20px);margin:0 auto;padding:0 10px}
.con--narrow{max-width:680px}
.con--1029{max-width:1049px}
.con--700{max-width:720px}
.con--540{max-width:560px}
.con--900{max-width:920px}
.row{display:flex;flex-wrap:wrap;align-items:flex-start}
.row--center{align-items:center}
.row--between{justify-content:space-between}
.row--middle{justify-content:center}
.col{display:flex;flex-direction:column;min-width:0}
.stack{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.gap-24{gap:24px}.gap-28{gap:28px}.gap-32{gap:32px}.gap-40{gap:40px}
.gap-60{gap:60px}
.center{text-align:center}
.mt-40{margin-top:40px}.mt-80{margin-top:80px}.mt-100{margin-top:100px}

/* background bands */
.bg-navy{background:var(--navy)}
.bg-coral{background:var(--coral)}
.bg-amber{background:var(--amber)}
.bg-ink{background:var(--ink)}
.bg-sky{background:var(--sky)}
.bg-cream{background:var(--cream)}
.bg-pink{background:var(--pink)}
.bg-white{background:var(--white)}
.on-dark,.on-dark p{color:var(--white-c7)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5,.on-dark h6{color:var(--white)}

/* --- 5. Eyebrow (icon + uppercase label) -------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:7px;
  font-size:15px;font-weight:800;line-height:1.5em;
  letter-spacing:.2px;text-transform:uppercase;color:var(--navy);
}
.eyebrow--center{justify-content:center}
.eyebrow svg{width:18px;height:18px;flex:0 0 auto;color:var(--coral)}
.eyebrow--light{color:var(--amber)}
.eyebrow--light svg{color:var(--amber)}
.eyebrow--white{color:var(--white)}
.eyebrow--white svg{color:var(--amber)}
.meta-label{
  font-size:12px;font-weight:600;line-height:1.3em;
  text-transform:uppercase;color:var(--muted);
}

/* --- 6. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 14px/1em var(--ff);text-transform:uppercase;
  background:var(--navy);color:var(--white);
  border:0;border-radius:var(--radius);padding:14px 32px;
  cursor:pointer;text-align:center;transition:background .25s ease,color .25s ease;
}
.btn:hover,.btn:focus{background:var(--coral);color:var(--white)}
.btn svg{width:14px;height:14px;flex:0 0 auto}
.btn--coral{background:var(--coral)}
.btn--coral:hover{background:var(--navy)}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:var(--navy);color:var(--white)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--coral);color:var(--white)}
.btn--white{background:var(--white);color:var(--navy)}
.btn--white:hover{background:var(--coral);color:var(--white)}
.btn--block{display:flex;width:100%}
.btn--lg{padding:18px 32px;font-size:15px}
.link-u{
  font-size:15px;font-weight:600;line-height:1em;
  text-transform:capitalize;text-decoration:underline;color:var(--navy);
}
.link-u:hover{color:var(--coral)}
/* --- 7. Header ---------------------------------------------------------- */
/* the white header box stops at 148.8 while the navy bar hangs below it, and
   the banner that follows starts 25.4 higher still — the reference's geometry */
.site-head{
  position:relative;z-index:99;
  background:var(--white);
  padding:20px 0 0;
  margin-bottom:-25.4px;
}
.head-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.logo{width:40%;max-width:40%;text-align:left}
/* 48.63% not 42.1%: the artwork is 3.00:1 where the old wordmark was 2.60:1, so
   the width is compensated to keep the rendered height - and with it the
   header's load-bearing 148.8px - exactly as it was. */
.logo img{width:48.63%;border-radius:0}
.head-ib{display:flex;align-items:center;gap:12px}
.head-ib .ic{
  flex:0 0 auto;width:48px;height:48px;border-radius:6px;
  background:var(--sky);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.head-ib .ic svg{width:24px;height:24px}
.head-ib b{display:block;font-size:15px;font-weight:700;line-height:1.5em;color:var(--navy);margin-bottom:4px}
.head-ib span{
  display:block;font-size:12px;font-weight:600;line-height:1.3em;
  text-transform:uppercase;color:var(--muted);
}
/* header info block that links out to locations.html */
.head-ib--link .ic,.head-ib--link b{transition:background .25s ease,color .25s ease}
.head-ib--link:hover .ic{background:var(--coral);color:var(--white)}
.head-ib--link:hover b{color:var(--coral)}
.socials{display:flex;align-items:center;gap:8px}
.socials a{
  width:32px;height:32px;border-radius:4px;background:var(--sky);color:var(--navy);
  display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease;
}
.socials a svg{width:16px;height:16px}
.socials a:hover{background:var(--navy);color:var(--white)}

.head-bar{display:flex;align-items:stretch;width:100%;margin-top:12px;border-radius:6px}
.head-nav{
  width:81.962%;background:var(--navy);
  border-radius:6px 0 0 6px;margin:4.5px 0;
}
.menu{display:flex;flex-wrap:wrap}
.menu li{position:relative}
.menu > li > a{
  display:block;padding:13px 12px;color:var(--white);
  font-size:15px;font-weight:600;line-height:1em;white-space:nowrap;
}
.menu > li > a:hover,.menu > li.current > a{color:var(--amber)}
.menu .has-sub > a::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.menu ul.sub{
  position:absolute;top:100%;left:0;min-width:250px;
  background:var(--navy);border-radius:0 0 6px 6px;
  box-shadow:0 4px 24px 0 rgba(0,0,0,.06);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:20;
}
.menu li:hover > ul.sub{opacity:1;visibility:visible;transform:translateY(0)}
.menu ul.sub li:not(:last-child){border-bottom:1px dotted var(--white-47)}
.menu ul.sub a{
  display:block;padding:12px 32px;color:var(--white);
  font-size:14px;font-weight:500;line-height:1.5em;
}
.menu ul.sub a:hover{color:var(--amber)}
.menu ul.sub li:last-child a{border-radius:0 0 6px 6px}
.head-phone{
  flex:1 1 auto;width:18%;white-space:nowrap;
  font-size:15px;font-weight:800;letter-spacing:.2px;
  padding:22px 32px;box-shadow:0 4px 16px 0 rgba(0,0,0,.08);
}
/* desktop: the white box ends at 148.8 and the navy bar overhangs it */
@media (min-width:1025px){.site-head{height:148.8px}}
.nav-toggle{
  display:none;background:transparent;border:0;padding:10px 12px;
  color:var(--white);cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px}
/* --- 8. Icon list ------------------------------------------------------- */
.ilist{display:flex;flex-direction:column}
.ilist li{display:flex;align-items:flex-start;gap:7px;padding:4px 0}
.ilist li > svg{flex:0 0 auto;width:18px;height:18px;color:var(--coral);margin-top:2px}
.ilist span{color:var(--text)}
.ilist--navy span{color:var(--navy)}
.ilist--inline{flex-direction:row;flex-wrap:wrap;gap:0 32px}
.ilist--big li > svg{width:24px;height:24px}
.ilist--check li > svg{color:var(--coral)}
.ilist--amber li > svg{color:var(--amber)}
.ilist--amber span{color:var(--amber);font-size:15px;font-weight:800;letter-spacing:.2px;text-transform:uppercase}
.ilist--amber li:hover > svg,.ilist--amber li:hover span{color:var(--white)}
.ilist--light span{color:var(--white-c7)}
.ilist--light li > svg{color:var(--amber)}
.ilist--links a{color:var(--white-c7);font-size:15px}
.ilist--links a:hover{color:var(--amber)}

/* --- 9. Icon box ------------------------------------------------------- */
.ibox{display:flex;flex-direction:column}
.ibox__t{margin:0 0 16px}
.ibox__d{margin:0;color:var(--text)}
.ibox--lead .ibox__t{margin-bottom:20px}
.ibox--lead .ibox__d{font-size:17px;font-weight:500;line-height:1.5em}
.ibox--side{flex-direction:row;align-items:flex-start;gap:20px}
.ibox .ic{
  flex:0 0 auto;width:52px;height:52px;border-radius:4px;
  background:var(--sky);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.ibox .ic svg{width:26px;height:26px}
.ibox--side .ibox__t{
  font-size:17px;font-weight:700;line-height:1.2em;color:var(--navy);margin-bottom:8px;
}
.ibox--center{text-align:center;align-items:center}
.ibox--center .ic{margin-bottom:20px}
.ibox--amber .ic{background:rgba(255,255,255,.35);color:var(--navy)}
.ibox--navy .ic{background:var(--navy);color:var(--amber)}

/* avatar-style icon (testimonials) */
/* quote mark beside the reviewer name — the reference uses a 48px fa-quote-left
   glyph tinted with the same light rule colour, not a photo avatar */
.avatar{
  flex:0 0 auto;width:48px;height:48px;color:var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.avatar svg{width:48px;height:48px}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* --- 10. Dividers / framed images -------------------------------------- */
.div-dot{border:0;border-top:1px dotted var(--line);margin:20px 0;width:100%}
.div-line{border:0;border-top:1px solid var(--line);margin:24px 0;width:100%}
.framed{box-shadow:-12px -12px 0 0 var(--amber-sh)}
.framed--r{box-shadow:12px -12px 0 0 var(--amber-sh)}
/* --- 11. Service card (image + copy + link) ----------------------------- */
.svc-card{
  display:block;border-radius:6px;overflow:hidden;
  box-shadow:0 4px 16px 0 rgba(0,0,0,.04);background:var(--white);
}
.svc-card__img{
  min-height:200px;background-size:cover;background-position:center center;
  background-repeat:no-repeat;transition:transform 1.5s ease;
}
.svc-card:hover .svc-card__img{transform:scale(1.06)}
.svc-card__body{text-align:center;padding:24px 20px 16px;background:var(--white)}
.svc-card__t{font-size:20px;font-weight:700;line-height:1.3em;color:var(--ink);margin:0 0 16px}
.svc-card:hover .svc-card__t{color:var(--navy)}
.svc-card__d{color:var(--text);margin:0 0 8px}
.svc-card__l{
  display:inline-block;font-size:15px;font-weight:600;line-height:1em;
  text-transform:capitalize;text-decoration:underline;color:var(--navy);
}
.svc-card:hover .svc-card__l{color:var(--coral)}

/* --- 12. Counters ------------------------------------------------------- */
.counter{display:flex;flex-direction:column;gap:4px}
.counter b{font-size:28px;font-weight:800;line-height:1.3em;color:var(--navy)}
.counter span{
  font-size:12px;font-weight:600;line-height:1.3em;
  text-transform:uppercase;color:var(--muted);
}
.counter--light b{color:var(--amber)}
.counter--light span{color:var(--white-c7)}

/* --- 13. Testimonial / quote card --------------------------------------- */
.tcard{
  border:1px solid var(--line);border-radius:6px;padding:32px;background:var(--white);
}
.tcard__head{display:flex;align-items:flex-start;gap:24px}
.tcard__name{font-size:17px;font-weight:700;line-height:1.2em;color:var(--navy);margin:0 0 4px}
.tcard__role{
  font-size:12px;font-weight:600;line-height:1.3em;
  text-transform:uppercase;color:var(--muted);
}
.tcard__quote{font-size:15px;font-weight:400;line-height:1.5em;color:var(--text);margin:0}
/* the card's divider widget carries 16px block padding, not the 20px default */
.tcard .div-dot{margin:16px 0}
.stars{display:flex;gap:3px;margin-bottom:12px}
.stars svg{width:15px;height:15px;color:var(--amber)}

/* --- 14. Forms ---------------------------------------------------------- */
.form{display:flex;flex-wrap:wrap;margin:0 -8px -16px}
.form .fg{padding:0 8px;margin-bottom:16px;width:100%}
.form .fg--half{width:50%}
.form .fg--third{width:33.3333%}
.form label{
  display:block;font:700 15px/1.5em var(--ff);color:var(--text);margin-bottom:6px;
}
.form input:not([type=submit]),.form select,.form textarea{
  width:100%;font:400 15px/1.5em var(--ff);color:var(--text);
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:12px 16px;outline:0;
}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy)}
.form ::placeholder{color:var(--muted);opacity:1}
.form .btn{background:var(--coral)}
.form .btn:hover{background:var(--amber);color:var(--ink)}
.form-note{font-size:13px;line-height:1.3em;color:var(--muted);margin-top:12px}
.form--dark label{color:var(--white-c7)}

/* titled column of checkboxes (booking's Required Services) */
.form .fg--set .fg__lab{
  display:block;font:700 15px/1.5em var(--ff);color:var(--text);margin-bottom:8px;
}
.fgopts{display:flex;flex-direction:column}
.form .fgopt{
  display:flex;align-items:flex-start;gap:6px;font-weight:400;margin:0;
}
.form .fgopt input{width:auto;flex:0 0 auto;margin:4px 0 0;padding:0}

/* WordPress form plumbing: spam honeypot (never shown) and submit feedback */
.hs-hp{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.form-ok,.form-bad{
  width:100%;margin:0 8px 16px;padding:12px 16px;border-radius:var(--radius);
  font:700 15px/1.5em var(--ff);
}
.form-ok{background:var(--sky);color:var(--navy);border:1px solid var(--line)}
.form-bad{background:var(--pink);color:var(--coral);border:1px solid var(--coral)}

/* dotted rule broken by a centred icon square — the kit's divider widget */
.divicon{display:flex;align-items:center;gap:20px;padding:40px 0}
.divicon::before,.divicon::after{
  content:"";flex:1 1 auto;border-top:1px dotted var(--line);
}
.divicon__ic{
  flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--sky);border-radius:4px;color:var(--navy);
}
.divicon__ic svg{width:20px;height:20px}
/* --- 15. Flip box ------------------------------------------------------- */
.flip{height:360px;perspective:1600px}
.flip__in{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .6s ease;
}
.flip:hover .flip__in{transform:rotateY(180deg)}
.flip__face{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.flip__front{
  background:var(--sky) center center/cover no-repeat;
  padding:24px;
}
.flip__back{
  background:var(--navy);color:var(--white);
  padding:32px 24px 8px;transform:rotateY(180deg);
}
.flip__back h4{color:var(--white);font-size:17px;font-weight:700;line-height:1.2em;margin:0 0 16px}
.flip__back p{font-size:13px;font-weight:400;line-height:1.3em;color:var(--white);margin:0 0 8px}
.flip__back a{
  font-size:15px;font-weight:600;line-height:1em;text-transform:capitalize;
  text-decoration:underline;color:var(--amber);
}
.flip__back a:hover{color:var(--white)}

/* --- 16. Post card ------------------------------------------------------ */
.posts{display:flex;flex-wrap:wrap;margin:0 -12px;row-gap:32px}
.posts > *{width:25%;padding:0 12px}
.post{text-align:center}
.post__thumb{
  display:block;position:relative;padding-bottom:66%;
  border-radius:4px;overflow:hidden;margin-bottom:16px;
}
.post__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px;transition:filter .3s ease}
.post:hover .post__thumb img{filter:brightness(88%)}
.post__t{font-size:17px;font-weight:700;line-height:1.2em;margin:0 0 12px}
.post__t a{color:var(--navy)}
.post__t a:hover{color:var(--coral)}
.post__meta{font-size:13px;font-weight:400;line-height:1.3em;color:var(--muted);margin:0}
.post__meta span + span::before{content:"/";margin:0 6px}

/* --- 17. Trusted-by strip ----------------------------------------------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.trust li{flex:1 1 0;text-align:center}
.trust img{width:46%;margin:0 auto;opacity:.6;border-radius:0}
/* --- 18. Page title band (inner pages) ---------------------------------- */
.ptitle{
  position:relative;padding:136px 0 80px;
  background:var(--amber) center center/cover no-repeat;
  display:flex;justify-content:center;
}
@media (min-width:1025px){.ptitle{background-attachment:fixed}}
.ptitle::before{
  content:"";position:absolute;inset:0;background:var(--amber);opacity:.88;
}
.ptitle .con{position:relative;z-index:1}
/* 66% not 48%: the reference h1 was two short words, but a real page title
   ("Professional Septic Tank Cleaning Services in Hyderabad") wrapped onto a
   third line at 48%. Wider box, same centring, same padding - so the band
   height only changes if the title genuinely needs fewer lines. */
.ptitle__in{width:66%;margin:0 auto;text-align:center}
.ptitle h1{margin:0 0 28px}
.ptitle p:not(.eyebrow){font-size:17px;font-weight:500;line-height:1.5em;color:var(--text);margin:0}

/* --- 19. Big CTA band --------------------------------------------------- */
/* the amber sits on the full-bleed section; the 1029 row lives inside .con */
.ctaband{margin-top:100px;background:var(--amber)}
.ctaband__in{display:flex;align-items:stretch}
.ctaband__img{
  width:42%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:48px;position:relative;z-index:1;text-align:right;
}
/* the cutout is pulled up 17px so its bottom sits flush with the band while it
   overflows the top edge — that is what fixes the band at the reference's 434 */
.ctaband__img img{width:80%;margin:-17px 0 0 auto;border-radius:0}
.ctaband__card{
  width:58%;background:var(--navy);border-radius:8px;
  margin-left:-60px;padding:68px 60px 68px 80px;
  display:flex;flex-direction:column;justify-content:center;
}
.ctaband__card h2{color:var(--white);margin:0 0 20px}
.ctaband__card p{font-size:17px;font-weight:500;line-height:1.5em;color:var(--white-c7);margin:0}
.ctaband__card .btn{                    /* Elementor "justify" alignment: full width */
  margin-top:32px;align-self:stretch;
  font-size:17px;line-height:1.2em;font-weight:700;padding:16px 60px;background:var(--coral);
}
.ctaband__card .btn svg{width:17px;height:17px}
.ctaband__card .btn:hover{background:var(--amber);color:var(--ink)}
.ctaband__links{
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
  gap:0 16px;margin-top:24px;
}
.ctaband__links li{display:flex;align-items:center;gap:6px;padding:0}
.ctaband__links svg{width:16px;height:16px;color:var(--amber)}
.ctaband__links a{font-size:15px;font-weight:700;color:var(--white-c7)}
.ctaband__links a:hover{color:var(--amber)}
/* --- 20. Footer --------------------------------------------------------- */
.site-foot{background:var(--ink);padding:80px 0}
.foot-cols{display:flex;column-gap:64px;row-gap:64px}
/* column widths read off the reference footer: 265 / 225 / 245 / 311 inside the
   1240 content box, so the Information links never wrap to a second line */
.foot-col{flex:0 1 auto;min-width:0}
.foot-col--about{flex-basis:265px}
.foot-col--contact{flex-basis:227px}
.foot-col--info{flex-basis:245px}
.foot-col--insta{flex-basis:311px}
/* 93.56%: same height-preserving compensation as .logo img. */
.foot-logo{width:93.56%;border-radius:0;margin-bottom:4px}
.foot-tag{
  font-size:15px;font-weight:800;line-height:1.3em;letter-spacing:.2px;
  text-transform:uppercase;color:var(--amber);margin:0 0 12px;
}
.foot-about{font-size:15px;line-height:1.5em;color:var(--white-c7);margin:0}
.foot-col h4{color:var(--white);margin:0}
.foot-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}
/* Elementor's icon box is 1.25em wide (17.5 at 14px) plus 8px padding-inline-end,
   so the text column starts 25.5 from the icon's left edge */
.foot-list li{display:flex;align-items:flex-start;gap:11.5px}
.foot-list svg{flex:0 0 auto;width:14px;height:14px;color:var(--white);margin-top:4px}
.foot-list span,.foot-list a{font-size:15px;line-height:1.5em;color:var(--white-c7)}
.foot-list li:hover svg{color:var(--amber)}
.foot-list li:hover span,.foot-list a:hover{color:var(--amber)}
.foot-links{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.foot-links li{display:flex;align-items:flex-start;gap:11.5px}
.foot-links svg{flex:0 0 auto;width:14px;height:14px;color:var(--white);margin-top:4px}
.foot-links a{font-size:15px;line-height:1.5em;color:var(--white-c7)}
.foot-links a:hover{color:var(--amber)}
.foot-head-ig{display:flex;align-items:center;gap:8px}
.foot-head-ig svg{width:18px;height:18px;color:var(--amber)}
.foot-head-ig h4{font-size:17px;font-weight:700;color:var(--white)}
.insta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.insta a{width:calc((100% - 16px)/3);display:block;border-radius:4px;overflow:hidden}
.insta img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;transition:transform .8s ease}
.insta a:hover img{transform:scale(1.08)}
.site-foot .socials{margin-top:28px;gap:11px}
/* the reference's footer button carries elementor-align-justify → full column width */
.foot-col--contact .btn{width:100%}

.copybar{background:var(--navy);padding:20px 0}
/* both halves are declared 50% but share a 12px gap, so they must shrink
   (Elementor behaviour) rather than wrap onto two lines */
.copybar .con{display:flex;justify-content:space-between;align-items:center;gap:12px}
.copybar__links{display:flex;flex-wrap:wrap;gap:0 20px;width:50%;max-width:50%}
/* the reference lists are inline (elementor-inline-items), so each row sits in a
   line box governed by the inherited 15px/1.5em strut, not by the 13px text */
.copybar__links li{display:flex;align-items:center;gap:3px;padding:0;min-height:22.5px}
.copybar__links svg{width:12px;height:12px;color:var(--white-c7)}
.copybar__links a{font-size:13px;line-height:1.3em;color:var(--white-c7)}
.copybar__links li:hover svg{color:var(--amber)}
.copybar__links a:hover{color:var(--amber)}
.copybar__note{
  width:50%;max-width:50%;text-align:right;
  font-size:13px;line-height:1.3em;color:var(--white-c7);margin:0;
}
/* --- 21. Bordered split card (team / locations) -------------------------- */
.scard{
  display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;
  background:var(--white);transition:transform .6s ease,border-color .6s ease;
}
.scard:hover{border-color:var(--amber)}
.scard--lift:hover{transform:translateY(-4px)}
.scard__media{width:44%;flex:0 0 44%}
.scard__media img{width:100%;height:340px;object-fit:cover;object-position:center center;border-radius:6px}
.scard__body{width:56%;flex:0 0 56%;padding:40px}
.scard__body h3{margin:0 0 8px}
.scard__role{
  font-size:12px;font-weight:600;line-height:1.3em;
  text-transform:uppercase;color:var(--navy);margin:0 0 16px;
}
.scard__body p{margin:0}

/* locations variant */
.lcard__media{width:40%;flex:0 0 40%;padding:16px;text-align:center}
.lcard__media img{width:88%;margin:0 auto;opacity:.4;transition:opacity .8s ease;border-radius:0}
.lcard:hover .lcard__media img{opacity:.7}
.lcard__body{width:60%;flex:0 0 60%;padding:32px}
.lcard__body h3{margin:0 0 8px}
.lcard__body p{margin:0}
.lcard .ilist li > svg{width:12px;height:12px;color:var(--navy)}
.lcard .ilist span,.lcard .ilist a{color:var(--ink)}
.lcard .ilist li:hover > svg,.lcard .ilist li:hover span,
.lcard .ilist a:hover{color:var(--coral)}
/* the whole card links to that locality's page. Only the h3 carries the
   anchor - its ::after is stretched over the card - so the phone and mail
   links inside stay usable and the markup keeps no nested <a>. */
.lcard{position:relative}
.lcard__body h3 a{color:inherit;text-decoration:none}
.lcard:hover .lcard__body h3 a{color:var(--coral)}
.lcard__body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.lcard .ilist a{position:relative;z-index:2}

/* --- 22. Price list ----------------------------------------------------- */
.plist > li{margin-bottom:32px}
.plist__row{display:flex;align-items:center;gap:8px}
.plist__h{font-size:17px;font-weight:700;line-height:1.2em;color:var(--ink)}
.plist__sep{flex:1 1 auto;border-bottom:1px dotted var(--line);margin:0 24px 4px}
.plist__p{font-size:17px;font-weight:500;line-height:1.5em;color:var(--navy);white-space:nowrap}
.plist__d{font-size:15px;line-height:1.5em;color:var(--text);margin:4px 0 0}

/* --- 23. FAQ item ------------------------------------------------------- */
.faq{display:flex;align-items:flex-start;gap:16px}
.faq + .faq{margin-top:32px}
.faq__ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:4px;
  background:var(--amber);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.faq__ic svg{width:16px;height:16px}
.faq h4{font-size:17px;font-weight:700;line-height:1.2em;margin:0 0 12px}
.faq p{margin:0}
/* --- 24. Column widths (collapse in responsive.css) --------------------- */
.w-24{width:24%}.w-28{width:28%}.w-30{width:30%}.w-32{width:32%}
.w-36{width:36%}.w-40{width:40%}.w-42{width:42%}.w-44{width:44%}
.w-46{width:46%}.w-48{width:48%}.w-50{width:50%}.w-54{width:54%}
.w-56{width:56%}.w-58{width:58%}.w-60{width:60%}.w-64{width:64%}
.w-72{width:72%}.w-100{width:100%}
.w-68{width:68%}.w-52{width:52%}.w-66{width:66%}.w-34{width:34%}
.gap-64{gap:64px}
/* the reference's two-column body rows declare row 60 / column 80 separately */
.gap-60-80{row-gap:60px;column-gap:80px}
/* Elementor shrinks the flexible column, so the fixed one keeps its declared % */
.grow{flex:1 1 auto;min-width:0}
.noshrink{flex-shrink:0}
/* text-editor paragraphs are spaced by the editor's own 1.5em bottom margin */
.tx > p + p{margin-top:22.5px}
.con--1080{max-width:1100px}
.gap-80{gap:80px}.gap-40-100{gap:40px 100px}
.pad-b-40{padding-bottom:40px}
.push-100{margin-bottom:-100px}

/* --- 37. Pricing, team, careers, job details --------------------------- */
/* the navy middle package sits above its neighbours */
.pkg--navy{background:var(--navy);border-color:transparent;z-index:2}
.pkg--navy .pkg__n,.pkg--navy .pkg__p{color:var(--white)}
.pkg--navy .pkg__d,.pkg--navy .pkg__per{color:var(--white-c7)}
.pkg--navy .ilist span{color:var(--white-c7)}
.pkg--navy .div-dot{border-color:var(--white-47)}
/* add-on price list: photo panel with the white card lapping over it */
.addrow{display:flex;align-items:stretch}
.addrow__img{
  width:44%;min-height:320px;border-radius:10px;
  background:var(--line) center center/cover no-repeat;
}
.addrow__card{
  width:66%;margin:4% 0 4% -10%;padding:48px;position:relative;z-index:1;
  background:var(--white);border-radius:10px;
}
/* cream invitation card (team page and job details) */
.joincard{
  display:flex;align-items:center;justify-content:space-between;gap:32px 80px;
  background:var(--cream);border-radius:10px;padding:48px;
}
.joincard .ibox{flex:1 1 auto}
.joincard .ibox__t{margin-bottom:12px}
.joincard .btn{flex:0 0 auto}
/* careers: vacancy cards and the tall dark banner between them */
.joblist{display:flex;flex-direction:column;gap:40px}
.jobcard{
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:40px;
}
.jobcard h3{margin:0 0 20px}
.jobcard .ibox__t{
  font-size:15px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
  color:var(--coral);margin-bottom:12px;
}
/* the reference apply link is plain navy text, not a filled button */
.jobcard .btn{
  margin-top:20px;background:none;padding:0;color:var(--navy);
  font-size:15px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;
}
.jobcard .btn:hover{background:none;color:var(--coral)}
.gallery-wide img{
  width:100%;height:420px;object-fit:cover;object-position:center center;
  border-radius:var(--radius);
}
/* careers: the four-up square gallery the quote band laps over */
.gallery-4{display:flex;gap:10px}
.gallery-4 img{
  width:calc((100% - 30px)/4);height:300px;object-fit:cover;
  object-position:center center;border-radius:var(--radius);
}
/* doubled class so these beat the later .quoteband base rule */
.quoteband.quoteband--tall{padding:280px 0 208px}
.quoteband.quoteband--ink{background-color:var(--ink)}
.quoteband.quoteband--ink::before{background:var(--ink);opacity:.6}
/* job details: the sky application panel */
.applybox{
  display:flex;flex-direction:column;gap:40px;
  background:var(--sky);border-radius:8px;padding:40px;
}
.applybox .ibox__d{margin-top:12px}
/* job-details left column: widget margins 48/20, list spacings 12/16/24 laid
   out as row gaps so the spacing falls only between items, as Elementor does */
.jd-list > h4{margin:48px 0 20px}
.jd-list .ilist--meta{gap:12px}
.jd-list .ilist--meta li{padding:0}
.jd-list .ilist--meta li > svg{width:18px;height:18px;color:var(--navy);margin-top:0}
.jd-list .ilist--meta span{
  font-size:14px;font-weight:700;line-height:1em;
  letter-spacing:.2px;text-transform:uppercase;color:var(--navy);
}
.jd-list .ilist--navy{gap:16px}
.jd-list .ilist--navy li{padding:0}
.jd-list .ilist--inline{gap:0 24px}
.jd-list .ilist--inline li{padding:0}

/* --- 25. Hero (home) ---------------------------------------------------- */
.hero{
  position:relative;z-index:1;display:flex;align-items:stretch;
  background:var(--amber) center center/cover no-repeat;
}
@media (min-width:1025px){.hero{background-attachment:fixed}}
.hero__card{
  background:var(--amber);padding:148px 60px 120px;
  display:flex;flex-direction:column;gap:24px;
}
.hero__card h1{margin:0 0 24px}
.hero__card .ibox__d{font-size:17px;font-weight:500;line-height:1.5em}
.hero__card .btn{align-self:flex-start}

/* --- 26. Booking card (navy form panel) --------------------------------- */
.bookcard{
  background:var(--navy);border-radius:6px;padding:32px;
  margin:-120px 0 0 80px;position:relative;z-index:2;
}
.bookcard__h{text-align:center;margin-bottom:32px}
.bookcard__h h3{color:var(--amber);margin:0 0 8px}
.bookcard__h p{color:var(--white);margin:0}
.bookcard .form{margin-top:0}
.bookcard__foot{margin-top:24px;display:flex;justify-content:center}

/* --- 27. Framed image pair ---------------------------------------------- */
.imgpair{position:relative;z-index:1}
.imgpair__main{margin-right:60px}
.imgpair__main img{width:100%;height:540px;object-fit:cover;object-position:center center}
.imgpair__inset{margin-top:-220px;text-align:right;position:relative;z-index:1}
.imgpair__inset img{display:inline-block}
.imgpair--r .imgpair__main{margin-right:0;margin-left:60px}
.imgpair--r .imgpair__inset{margin-top:-188px;text-align:left}

/* --- 28. Amber feature panel -------------------------------------------- */
.apanel{
  background:var(--amber);border-radius:6px;padding:40px;
  margin-top:-100px;display:flex;flex-direction:column;justify-content:center;gap:32px;
}
.apanel .ibox--side .ic{background:var(--navy);color:var(--amber)}
.apanel .ibox--side .ibox__t{color:var(--ink);margin-bottom:12px}

/* --- 29. Emergency band + strip ----------------------------------------- */
.emg{
  display:flex;margin-top:100px;
  background:var(--ink) center center/cover no-repeat;
}
@media (min-width:1025px){.emg{background-attachment:fixed}}
.emg__card{background:var(--navy);border-radius:6px;padding:80px 60px}
.emg__card h2{color:var(--white);margin:24px 0 32px}
.emg__card p{color:var(--white-c7);margin:0}
.emg__card .btn{margin-top:40px;align-self:flex-start;background:var(--amber);color:var(--ink)}
.emg__card .btn:hover{background:var(--white);color:var(--navy)}
.emgstrip{background:var(--navy);padding:24px 0}
.emgstrip .con{
  max-width:700px;display:flex;justify-content:space-between;
  align-items:center;gap:0 32px;flex-wrap:wrap;
}
.emgstrip h3{color:var(--white);margin:0}
.emgstrip__tel{display:flex;align-items:center;gap:8px}
.emgstrip__tel svg{width:24px;height:24px;color:var(--amber)}
.emgstrip__tel a{font-size:20px;font-weight:700;line-height:1.3em;color:var(--amber)}
.emgstrip__tel:hover svg,.emgstrip__tel a:hover{color:var(--white)}
.trustband{background:var(--sky);padding:48px 0}
.trustband__h{
  text-align:center;font-size:28px;font-weight:800;line-height:1.3em;
  color:var(--navy);margin:0 0 16px;
}
.trustband__t{
  text-align:center;font-size:17px;font-weight:500;line-height:1.5em;
  color:var(--muted);margin:0 auto 32px;max-width:840px;
}
/* --- 30. Heading bands + pull-ups --------------------------------------- */
.headband{padding:80px 0 160px}
.headband .con{max-width:700px}
.sechead{display:flex;flex-direction:column;align-items:center;text-align:center}
.sechead > *{margin:0 0 20px}
.sechead h2{margin:0 0 16px}
.sechead > *:last-child{margin-bottom:0}
.sechead p:not(.eyebrow){font-size:17px;font-weight:500;line-height:1.5em}
.pull-60{margin-top:-60px}
.pull-100{margin-top:-100px}
.pull-120{margin-top:-120px}
.pull-144{margin-top:-144px}
.mt-0{margin-top:0}
.grid-2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.grid-2 > *{width:48%}
.grid-3{display:flex;flex-wrap:wrap;gap:24px}
.grid-3 > *{width:calc((100% - 48px)/3)}
.grid-4{display:flex;flex-wrap:wrap;gap:24px}
.grid-4 > *{width:calc((100% - 72px)/4)}
.cards-2{display:flex;flex-wrap:wrap;gap:40px}
.cards-2 > *{width:48%}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.tel-strip{display:flex;align-items:center;gap:8px}
.img-cover-540 img{width:100%;height:540px;object-fit:cover;object-position:center center}
.img-cover-400 img{width:100%;height:400px;object-fit:cover;object-position:center center}
.img-cover-340 img{width:100%;height:340px;object-fit:cover;object-position:center center}
.pad-b-140{padding-bottom:140px}
.pad-t-100{padding-top:100px}
.pad-y-80{padding:80px 0}
.pad-y-24{padding:24px 0}
.introrow{display:flex;flex-wrap:wrap;align-items:center;gap:48px 80px}
.introrow > :first-child{width:540px;max-width:100%}
.introrow > :last-child{width:620px;max-width:100%}
.pad-y-100{padding:100px 0}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-60{margin-top:60px}
.mb-40{margin-bottom:40px}
.ml-80{margin-left:80px}
.ml-60{margin-left:60px}
.ml-100{margin-left:100px}

/* --- 31. Page compositions --------------------------------------------- */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}
.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-28{margin-top:28px}
.mt-48{margin-top:48px}.mt-120{margin-top:120px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}.mb-60{margin-bottom:60px}
.pad-b-100{padding-bottom:100px}.pad-b-160{padding-bottom:160px}
.pad-t-80{padding-top:80px}.pad-y-60{padding:60px 0}
.pad-t-60{padding-top:60px}
.jc-end{justify-content:flex-end}
.jc-center{justify-content:center}
/* columns whose declared widths + gap exceed 100% shrink instead of wrapping,
   the way the reference's flex containers do */
.row--fit{flex-wrap:nowrap}
.grid-2 > .w-100{width:100%}
.ilist--cap span{
  font-size:15px;font-weight:800;letter-spacing:.2px;
  text-transform:uppercase;color:var(--navy);
}
.ilist--cap li > svg{color:var(--navy)}
.ibox--lg .ibox__d{font-size:17px;font-weight:500;line-height:1.5em}
.head-info{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
/* the reference row holds two bordered cards, each with a 24px margin, so the
   card box is (1240 - 4x24)/2 = 572 measured against the 1288-wide bleed row */
/* only the side gutters are cancelled — a negative vertical margin here would
   collapse out through the section and steal 24px from the next band */
.rev2{display:flex;flex-wrap:wrap;margin:0 -24px}
.rev2 > *{width:calc((100% - 144px)/2);margin:24px}
.tcard--lg{padding:40px}
.ilist--ink li > svg{width:16px;height:16px;color:var(--navy)}
.ilist--ink span{color:var(--ink)}
.ilist--ink li:hover > svg,.ilist--ink li:hover span{color:var(--coral)}
.imgpair__inset img{width:64%}
.sechead--start{align-items:flex-start;text-align:left}
.grid-2--28{gap:28px}
.grid-2--32{gap:32px}
.num{
  font-size:100px;font-weight:800;line-height:1em;color:var(--line);
  display:block;margin-bottom:8px;
}
.step{position:relative}
.step__n{
  font-size:15px;font-weight:800;letter-spacing:.2px;color:var(--amber);
  background:var(--navy);border-radius:4px;padding:6px 12px;display:inline-block;
}
.step h4{margin:16px 0 12px}
.step p{margin:0}
.pkg{
  border:1px solid var(--line);border-radius:6px;background:var(--white);
  padding:32px 24px;text-align:center;transition:border-color .5s ease,transform .5s ease;
}
.pkg:hover{border-color:var(--amber);transform:translateY(-4px)}
.pkg__ic{
  display:inline-flex;align-items:center;justify-content:center;width:56px;
  height:56px;background:var(--sky);color:var(--navy);border-radius:4px;
  margin-bottom:12px;
}
.pkg__ic svg{width:24px;height:24px}
.pkg__n{font-size:20px;font-weight:700;line-height:1.3em;color:var(--navy);margin:0 0 8px}
.pkg__d{font-size:13px;margin:0}
.pkg__p{font-size:28px;font-weight:800;line-height:1.3em;color:var(--navy);margin:0 0 4px}
.pkg__per{font-size:13px;margin:0 0 20px}
.pkg .ilist{margin:0 16px;text-align:left}
.pkg .div-dot{margin:32px 0}
.jobrow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;border:1px solid var(--line);border-radius:6px;padding:28px 32px;
  background:var(--white);transition:border-color .5s ease;
}
.jobrow:hover{border-color:var(--amber)}
.jobrow h4{margin:0 0 8px}
.jobrow__meta{display:flex;flex-wrap:wrap;gap:0 20px}
.jobrow__meta span{font-size:13px;color:var(--muted)}
.err{text-align:center;padding:120px 0}
.err__code{
  font-size:160px;font-weight:800;line-height:1em;color:var(--navy);margin:0;
}
.side{display:flex;flex-direction:column;gap:32px}
.side__box{border:1px solid var(--line);border-radius:6px;padding:32px}
.side__box h4{margin:0 0 20px}
.entry p{margin:0 0 1.5em}
.entry h3{margin:32px 0 16px}
.entry blockquote{
  margin:32px 0;padding:32px;background:var(--sky);border-radius:6px;
  border-left:4px solid var(--amber);font-size:17px;font-weight:500;line-height:1.5em;
  color:var(--navy);
}

/* --- 32. Inner-page compositions --------------------------------------- */
.img-cover-380 img{
  width:100%;height:380px;object-fit:cover;object-position:center center;
  border-radius:var(--radius);
}
.img-cover-260 img{
  width:100%;height:260px;object-fit:cover;object-position:center center;
  border-radius:var(--radius);
}
.img-cover-600 img{
  width:100%;height:600px;object-fit:cover;object-position:center center;
  border-radius:var(--radius);
}
/* the emergency page's white card: amber top edge, two columns of icon boxes */
.wpanel{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;
  background:var(--white);border-top:6px solid var(--amber);border-radius:12px;
  box-shadow:0 4px 40px 0 rgba(0,0,0,.08);padding:48px;
}
.wpanel > *{width:48%}
.wpanel .ibox--side{gap:24px}
.wpanel .ibox__t{margin-bottom:8px}
/* the maintenance page's benefits panel: no amber edge, 20px shell and the six
   icon boxes half-width with a 32px inset all round (so 64 between them) */
.bpanel{
  display:flex;flex-wrap:wrap;
  background:var(--white);border-radius:12px;
  box-shadow:0 4px 40px 0 rgba(0,0,0,.08);padding:20px;
}
.bpanel > *{width:50%;padding:32px}
.bpanel .ibox--side{gap:24px}
.bpanel .ic{width:64px;height:64px}
.bpanel .ic svg{width:32px;height:32px}
/* the 12-up service grid: 31% columns on a 40px gutter, as the reference */
.svcgrid{display:flex;flex-wrap:wrap;gap:40px}
.svcgrid > *{width:calc((100% - 80px)/3)}
.svcgrid .svc-card__img{min-height:240px}
.svcgrid .svc-card__body{padding-top:32px}
.blk h2{margin:0 0 20px}
.blk p{margin:0}
.blk--start{text-align:left}
.con--660{max-width:680px}

/* --- 33. Single service: banner variant, sidebar, promise band ---------- */
.ptitle--start{padding:148px 0 120px}
.ptitle--start .ptitle__in{width:54%;margin:0;text-align:left}
.ptitle--start .eyebrow{margin:0 0 20px}
.ptitle--start h1{margin:0 0 20px}
/* four evenly spaced promise boxes on the amber band */
.pband{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
.pband > *{width:calc((100% - 108px)/4)}
.side--pull{margin-top:-160px}
.side__box--sky{background:var(--sky);border-color:transparent}
.side__box--navy{background:var(--navy);border-color:transparent;border-radius:8px;padding:40px 28px}
.minibox{
  display:flex;align-items:center;gap:20px;border:1px solid var(--line);
  border-radius:4px;padding:20px;
}
.minibox .ic{
  flex:0 0 auto;width:56px;height:56px;border-radius:4px;background:var(--coral);
  color:var(--white);display:flex;align-items:center;justify-content:center;
}
.minibox .ic svg{width:24px;height:24px}
.minibox h4{margin:0 0 6px;font-size:17px;font-weight:700;line-height:1.2em}
.minibox p{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);
}
.minirow{display:flex;flex-direction:column;gap:20px}
.carousel{position:relative;overflow:hidden;border-radius:6px}
.carousel__track{display:flex;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.carousel__track > *{flex:0 0 100%;min-width:0}
/* the reference carousel shows one slide, stretched to the column width */
.carousel img{width:100%;aspect-ratio:738/433;object-fit:cover;border-radius:6px}
.carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;padding:0;cursor:pointer;color:rgba(238,238,238,.9);
}
.carousel__nav:hover{color:var(--white)}
.carousel__nav svg{width:26px;height:26px}
.carousel__nav--prev{left:10px}
.carousel__nav--next{right:10px}
.ibox--32 .ic{width:72px;height:72px}
.ibox--32 .ic svg{width:32px;height:32px}
.ibox--32 .ibox__t{
  font-size:20px;font-weight:700;line-height:1.3em;color:var(--navy);margin-bottom:8px;
}
.pband .ic{width:64px;height:64px}
.pband .ic svg{width:32px;height:32px}
.pband .ibox__t{
  font-size:17px;font-weight:700;line-height:1.2em;color:var(--ink);margin-bottom:12px;
}
.pband .ibox__d{color:var(--text)}

/* --- 34. Projects grid, locality cards, process rows -------------------- */
/* twelve flip boxes, three up on a 32px gutter, taller than the home four */
.flipgrid{display:flex;flex-wrap:wrap;gap:32px}
.flipgrid > *{width:calc((100% - 64px)/3)}
.flipgrid .flip{height:440px}
.grid-2--40{gap:40px}
/* work process: image and sky panel butted together, mirrored on even rows */
.prow{display:flex;align-items:stretch}
.prow__img{width:44%}
.prow__img img{
  width:100%;height:340px;object-fit:cover;object-position:center center;
  border-radius:6px 0 0 6px;
}
.prow__body{
  width:56%;background:var(--sky);padding:40px;border-radius:0 6px 6px 0;
}
.prow--rev{flex-direction:row-reverse}
.prow--rev .prow__img img{border-radius:0 6px 6px 0}
.prow--rev .prow__body{border-radius:6px 0 0 6px}
.pdiv{max-width:500px;margin:24px auto;padding:32px 0}
/* the cream satisfaction band that closes the process page */
.satrow{display:flex;align-items:stretch}
.satrow__img{width:46%}
.satrow__img img{
  width:100%;height:500px;object-fit:cover;object-position:center center;
  border-radius:var(--radius);
}
.satrow__body{width:54%;padding:60px}

/* --- 35. About page: note card, quote band, mission cards --------------- */
/* narrow amber card sitting on a full-bleed photo band */
.notecard{background:var(--amber);border-radius:6px;padding:80px}
.notecard .ibox__t{margin-bottom:32px}
/* four stacked promise boxes, icon above the title */
.qgrid{display:flex;flex-wrap:wrap;gap:48px}
.qgrid > *{width:calc((100% - 144px)/4)}
.ibox--stack{align-items:flex-start}
.ibox--stack .ic{margin-bottom:24px}
.ibox--stack .ibox__t{
  font-size:20px;font-weight:700;line-height:1.3em;color:var(--navy);margin-bottom:12px;
}
/* the pull-quote band, navy over a photo at 48% opacity */
.quoteband{
  position:relative;padding:260px 0 208px;
  background:var(--navy) center center/cover no-repeat;
}
@media (min-width:1025px){.quoteband{background-attachment:fixed}}
.quoteband::before{
  content:"";position:absolute;inset:0;background:var(--navy);opacity:.48;
}
.quoteband .con{position:relative;z-index:1;max-width:800px}
.quoteband h2{color:var(--white);text-align:center;margin:0}
.mvcard{
  background:var(--white);border-radius:8px;padding:40px 40px 0;
  box-shadow:0 4px 19px 0 rgba(0,0,0,.06);
}
/* the reference card stacks a 76px sky icon square above centred text and lets
   the description run flush to the card's bottom edge */
.mvcard .ibox{flex-direction:column;align-items:center;text-align:center;gap:16px}
.mvcard .ic{width:76px;height:76px;border-radius:4px}
.mvcard .ic svg{width:36px;height:36px}
.mvcard .ibox__t{margin-bottom:16px}
.mvcard .ibox__d{padding-bottom:0}

/* --- 36. Booking page form card ---------------------------------------- */
.formcard{
  background:var(--white);border-radius:10px;padding:60px;
  box-shadow:0 4px 19px 0 rgba(0,0,0,.08);
}
.formcard h2{margin:0;text-align:center}
/* the booking form runs on a 12px gutter with 32px between rows */
.formcard .form{margin:0 -6px -32px}
.formcard .form .fg{padding:0 6px;margin-bottom:32px}
.formcard .form .fg > label,.formcard .form .fg__lab{margin-bottom:8px}
.formcard .form input:not([type=submit]),
.formcard .form select{padding:8px 14px;line-height:1.4em}
.formcard .form textarea{min-height:150px}
.fg--check{flex-direction:row;align-items:flex-start;gap:10px}
.fg--check input{width:auto;margin-top:5px;flex:0 0 auto}
.fg--check label{
  font-size:14px;font-weight:500;line-height:1.6em;color:var(--text);
  text-transform:none;letter-spacing:0;margin:0;
}
.formcard .form-note{font-size:14px;line-height:1.6em;margin:24px 0 0}
/* the four reassurance boxes beside the booking form */
.side-4{display:flex;flex-direction:column;gap:48px;margin-left:80px}

/* --- 38. Blog index, single post, contact, 404 -------------------------- */
/* the archive: two post columns beside the standard service sidebar */
.archhead{padding:108px 0 80px;text-align:center}
.archhead h1{margin:0}
.bloggrid{display:flex;flex-wrap:wrap;gap:48px 40px}
.bloggrid > *{width:calc((100% - 40px)/2)}
.post--full{text-align:left}
.post--full .post__t{font-size:19px;line-height:1.3em;margin:0 0 8px}
.post--full .post__meta{margin-bottom:16px}
.post__ex{font-size:15px;line-height:1.6em;color:var(--text);margin:0 0 16px}
.post__more{
  font-size:15px;font-weight:600;line-height:1.4em;color:var(--navy);
  text-decoration:underline;
}
.post__more:hover{color:var(--coral)}
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;margin-top:60px;font-size:15px;font-weight:600;
}
.pager a{color:var(--muted)}
.pager a:hover{color:var(--navy)}
.pager .is-current{color:var(--navy);font-weight:700}
.pager svg{width:16px;height:16px}
/* the single post: left-aligned amber banner, article beside a pulled sidebar */
.ptitle--post{padding:192px 0 180px}
.ptitle--post .ptitle__in{width:60%;margin:0;text-align:left}
.ptitle--post h1{margin:0 0 20px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none}
.postmeta li{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  line-height:1.3em;letter-spacing:.6px;text-transform:uppercase;color:var(--ink);
}
.postmeta svg{width:15px;height:15px;color:var(--navy)}
.side--pull-180{margin-top:-180px}
.entry h3{font-size:26px}
.entry__pair{display:flex;gap:16px;margin:32px 0}
.entry__pair > *{width:calc(50% - 8px)}
.entry__pair img{
  width:100%;height:280px;object-fit:cover;object-position:center center;
  border-radius:var(--radius);
}
.tagrow{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:48px 0 0;font-size:15px;color:var(--text);
}
.tagrow svg{width:16px;height:16px;color:var(--navy)}
.tagrow a{color:var(--text)}
.tagrow a:hover{color:var(--coral)}
.sharerow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.sharerow a{
  width:40px;height:40px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;color:var(--white);background:var(--navy);
  transition:background-color .4s ease;
}
.sharerow a svg{width:17px;height:17px}
.sharerow a:hover{background:var(--coral)}
.sh-fb{background:#3B5998}.sh-tw{background:#1DA1F2}.sh-in{background:#0077B5}
.sh-pi{background:#BD081C}.sh-tg{background:#0088CC}.sh-wa{background:#25D366}
/* "More Posts & News" — the heading with a dotted rule either side */
.morehead{display:flex;align-items:center;gap:24px;margin:0 0 32px}
.morehead::before,.morehead::after{
  content:"";flex:1 1 auto;border-bottom:1px dotted var(--muted);
}
.morehead h3{margin:0;white-space:nowrap;font-size:17px;line-height:1.2em}
.replybox{border:1px solid var(--line);border-radius:8px;padding:60px}
.replybox h3{margin:0 0 12px}
.replybox > p{font-size:15px;color:var(--muted);margin:0 0 24px}
/* contact: three bordered detail boxes beside the sky message panel */
.cbox{
  border:1px solid var(--line);border-radius:4px;padding:20px;
  background:var(--white);transition:border-color .5s ease;
}
.cbox:hover{border-color:var(--amber)}
.cbox .ic{background:var(--coral);color:var(--white);width:56px;height:56px}
.cbox .ibox--side .ic{margin-right:16px}
.cstack{display:flex;flex-direction:column;gap:40px}
.cbtns{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cbtns .socials a{background:var(--sky);border-radius:4px}
.cbtns .socials a:hover{background:var(--navy);color:var(--white)}
.msgbox{background:var(--sky);border-radius:8px;padding:40px}
.msgbox .ibox{margin-bottom:40px}
.msgbox .ic{background:var(--white);color:var(--navy)}
.mapbox{margin-top:80px}
.mapbox img,.mapbox iframe{
  display:block;width:100%;height:400px;border:0;object-fit:cover;
  border-radius:var(--radius);
}
/* 404: the dark photo band the reference uses in place of a page title */
.err--dark{
  position:relative;padding:190px 0;text-align:center;
  background:var(--ink) center center/cover no-repeat;
}
.err--dark::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:.82}
.err--dark .con{position:relative;z-index:1;max-width:700px}
.err--dark .err__code{color:var(--white)}
.err__t{color:var(--white);margin:0 0 20px}
.err__face{font-size:34px;line-height:1em;margin:0;color:var(--amber)}
.err__rule{border:0;border-top:1px solid var(--white-47);margin:28px 0}
.err__p{
  color:var(--white-c7);font-size:19px;font-weight:500;line-height:1.6em;
  margin:0 0 32px;
}


/* Floating quick-contact buttons, bottom-right on every page. Fixed to the
   viewport, so their position in the markup (inside the footer) is irrelevant. */
.hs-float{
  position:fixed;right:20px;bottom:20px;z-index:900;
  display:flex;flex-direction:column;gap:12px;
}
.hs-float__btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;color:var(--white);
  box-shadow:0 4px 16px rgba(17,18,26,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.hs-float__btn svg{width:26px;height:26px;position:relative;z-index:1}
.hs-float__btn--call{background:var(--coral)}
.hs-float__btn--wa{background:#25D366}
.hs-float__btn:hover,.hs-float__btn:focus-visible{
  transform:translateY(-3px);box-shadow:0 8px 22px rgba(17,18,26,.34);
}
.hs-float__btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* The label slides out of the button on hover; hidden but readable to AT. */
.hs-float__tip{
  position:absolute;right:calc(100% + 10px);white-space:nowrap;
  padding:7px 12px;border-radius:var(--radius);background:var(--ink);
  color:var(--white);font-size:13px;font-weight:700;line-height:1.3em;
  opacity:0;visibility:hidden;transform:translateX(6px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.hs-float__btn:hover .hs-float__tip,
.hs-float__btn:focus-visible .hs-float__tip{
  opacity:1;visibility:visible;transform:translateX(0);
}
/* A steady pulse so the pair reads as a live call-to-action, not decoration. */
.hs-float__btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:inherit;opacity:.55;animation:hs-float-pulse 2.4s ease-out infinite;
}
.hs-float__btn--wa::after{animation-delay:1.2s}
@keyframes hs-float-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hs-float__btn::after{animation:none;opacity:0}
  .hs-float__btn{transition:none}
}

/* A second banner paragraph, for pages whose lead needs more than one line.
   Slightly smaller than the lead so the two read as heading -> detail. */
.ptitle__p2{
  font-size:15px;font-weight:400;line-height:1.6em;color:var(--text);
  margin:14px auto 0;max-width:760px;
}

/* Centre a block's inline content - used for the locality services button. */
.ta-center{text-align:center}

/* ---------------------------------------------------------------------------
   Services mega-panel. The Services dropdown lists all fifteen services plus
   three more entries; as one column that is an 18-row menu taller than a
   laptop viewport. Three columns keep it on screen without scrolling.

   Anchored to .head-nav rather than to the <li>, so the panel can be wider
   than the menu item it hangs from without running off the right edge.
   --------------------------------------------------------------------------- */
.menu ul.sub--mega{
  left:auto;right:auto;width:min(760px,calc(100vw - 60px));
  min-width:0;padding:12px 8px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 4px;
  border-radius:0 0 6px 6px;
}
.menu ul.sub--mega li{border-bottom:0}
.menu ul.sub--mega li:not(:last-child){border-bottom:0}
.menu ul.sub--mega a{
  padding:9px 16px;border-radius:4px;font-size:14px;line-height:1.35em;
  transition:background-color .15s ease,color .15s ease;
}
.menu ul.sub--mega a:hover{background:rgba(255,255,255,.08);color:var(--amber)}
.menu ul.sub--mega li:last-child a{border-radius:4px}
/* The first entry is "All Services" and the last two are whole pages of their
   own, so both are set off from the fifteen service rows between them. */
.menu ul.sub--mega li:first-child a{font-weight:700}
.menu ul.sub--mega li:nth-last-child(2){
  border-top:1px dotted var(--white-47);margin-top:6px;padding-top:6px;
}
.menu ul.sub--mega li:last-child{
  border-top:1px dotted var(--white-47);margin-top:6px;padding-top:6px;
}
/* Keep the panel inside the viewport: the Services item sits second in the bar,
   so a left-anchored panel is safe, but pin it to the nav's left edge. */
.menu > li.has-mega{position:relative}
.menu > li.has-mega > ul.sub--mega{left:0}

/* ---------------------------------------------------------------------------
   Home page: the about summary that replaced the testimonial card. Reuses the
   .tcard frame so the row's geometry is unchanged.
   --------------------------------------------------------------------------- */
.tcard--about .tcard__t{
  font-size:20px;font-weight:800;line-height:1.3em;color:var(--navy);margin:0;
}
.tcard--about .tcard__body{
  font-size:15px;font-weight:400;line-height:1.5em;color:var(--text);margin:0;
}
.tcard--about .tcard__body + .tcard__body{margin-top:12px}

/* ---------------------------------------------------------------------------
   Per-service page: the single wide photo in the body column, in place of the
   demo page's three-slide carousel. One service has one photo.
   --------------------------------------------------------------------------- */
.svcfig{border-radius:6px;overflow:hidden}
.svcfig img{display:block;width:100%;height:auto}

/* Body copy inside a lead box, at the site's normal 15/400 rather than 17/500.
   Locality and service write-ups are several paragraphs long; at lead size they
   read as a different font from the rest of the site. */
.ibox--body .ibox__d{font-size:15px;font-weight:400;line-height:1.5em}

/* ---------------------------------------------------------------------------
   Locality pages: every service as a small card, four visible and the rest
   revealed by the Show More button. The cards are always in the markup, so
   with JavaScript off all fifteen are present and every link works.
   --------------------------------------------------------------------------- */
.asvc__grid{display:flex;flex-wrap:wrap;gap:28px}
.asvc__grid > .asvc__i{width:calc((100% - 84px)/4)}
.asvc__i.is-more{display:none}
.asvc__grid.is-open > .asvc__i.is-more{display:block}
.asvc .svc-card__img{min-height:170px}
.asvc .svc-card__body{padding:20px 16px 14px}
.asvc .svc-card__t{font-size:17px;margin-bottom:10px}
.asvc .svc-card__d{font-size:14px;line-height:1.5em}