/* ==========================================================================
   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}
.logo img{width:42.1%;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);
}
.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}

/* 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}
.ptitle__in{width:48%;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}
.foot-logo{width:88%;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)}

/* --- 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__t{
  text-align:center;font-size:17px;font-weight:500;line-height:1.5em;
  color:var(--muted);margin:0 0 32px;
}
/* --- 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;
}