/* ===========================================================================
   Dynamic Plumbing Works — Homepage
   Built from Figma "Final UI → Homepage 2/9" (node 105:169), 1460px frame.
   Design tokens, type and spacing taken directly from the Figma variables.
   =========================================================================== */

/* ---------------------------------------------------------------- Tokens -- */
:root{
  /* Brand + neutrals (Figma variables) */
  --white:#FFFFFF;
  --green:#6DBE45;          /* Brand/Green      */
  --green-deep:#3C8A22;     /* Brand/Green Deep */
  --green-tint:#E6F3DD;     /* Brand/Green Tint */
  --green-soft:#7CB351;     /* hero accent rule */
  --ink:#141614;            /* Neutral/Ink / Text/Primary */
  --muted:#5F665B;          /* Text/Muted */
  --stone-line:#D5D9CF;     /* Neutral/Stone Line */
  --charcoal-line:#3B4139;  /* Neutral/Charcoal Line */
  --on-dark:#FFFFFF;
  --on-dark-muted:#B7BEB1;
  --on-dark-faint:#7C857A;
  --body-grey:#434343;
  --stone-bg:#EEF0EA;

  /* Type */
  --font:'Geist','Geist Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-barlow:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Layout — the design frame is 1460 wide with 25px gutters */
  --maxw:1460px;
  --pad:25px;
  --pad-hero:82px;
  /* Sticky header: dark grey bar. --header-h is its *condensed* height —
     everything that reads it (anchor jumps, the pinned services stage) only
     matters once the page is scrolled and the logo has already shrunk. */
  --nav-dark:#262923;
  --header-h:115px;

  /* Fluid type scale: exact design size at >=1460px, shrinking below */
  --fs-h1:clamp(40px,5.48vw,80px);
  --fs-h2:clamp(28px,2.88vw,42px);
  --fs-h3:clamp(23px,2.05vw,30px);
  --fs-quote:clamp(20px,1.99vw,29px);
  --fs-lead:clamp(17px,1.37vw,20px);
  --fs-faq:clamp(19px,1.64vw,24px);
  --fs-phone:clamp(32px,2.74vw,40px);
  --fs-formtitle:clamp(26px,2.19vw,32px);
}

/* ----------------------------------------------------------------- Reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h)}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* Wide content must scroll inside itself, never the page body */
.scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ------------------------------------------------------- Section headers -- */
.eyebrow{
  font-weight:600;font-size:12px;line-height:1.5;
  text-transform:uppercase;color:var(--green);white-space:nowrap;
}
.eyebrow-row{display:flex;align-items:center;gap:16px}
.eyebrow-row .rule{flex:1;height:1px;background:var(--green)}
.eyebrow-row.on-light .rule{background:var(--green)}

.h2{
  font-weight:300;font-size:var(--fs-h2);line-height:1.2;margin:0;
}
.h2 .em{font-weight:500;color:var(--green)}
.lead{
  font-weight:300;font-size:var(--fs-lead);line-height:1.5;
  color:var(--body-grey);max-width:660px;
}
.sec-dark .lead{color:var(--white)}

/* ---------------------------------------------------------------- Button -- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:8px;
  background:var(--green);
  border-bottom:1px solid rgba(255,255,255,.22);
  filter:drop-shadow(0 7px 6.55px rgba(102,206,50,.51));
  font-weight:600;font-size:20px;line-height:1.2;color:var(--white);
  transition:transform .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-1px);filter:drop-shadow(0 9px 9px rgba(102,206,50,.62))}
.btn .arw{width:12.728px;height:12.728px;flex:none}
.btn--ghost{
  background:transparent;padding:14px 20px;border-bottom:0;filter:none;
}
.btn--ghost:hover{filter:none;transform:translateY(-1px)}
.btn--dark{background:var(--ink)}
.btn--block{width:100%;justify-content:space-between}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:16px;line-height:1.2;color:var(--green);
}
.link-arrow .arw{width:25px;height:25px;flex:none}

/* Decorative half-disc notch that straddles two section edges */
.notch{position:absolute;width:86.965px;height:27px;pointer-events:none;z-index:2}

/* ========================================================== UTILITY BAR == */
.utility-bar{position:relative;z-index:21;background:var(--green);color:var(--ink)}
.utility-bar__inner{
  max-width:var(--maxw);margin-inline:auto;padding:13px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:14px;line-height:1;letter-spacing:-.14px;
}
.utility-bar p{margin:0}
.utility-bar a{color:inherit;text-decoration:none}
.utility-bar a:hover{text-decoration:underline}
/* Narrow screens: centre and wrap rather than squashing the two lines together */
@media (max-width:1100px){
  .utility-bar__inner{
    flex-wrap:wrap;justify-content:center;text-align:center;
    gap:6px 18px;font-size:13px;padding-block:10px;
  }
}
@media (max-width:620px){
  .utility-bar__left{display:none}
}

/* ================================================================ HEADER == */
.site-header{
  position:fixed;top:var(--utility-h,40px);left:0;right:0;z-index:20;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease,top .25s ease;
}
/* Transparent over the first fold — the hero keeps the design's own top
   gradient — then the grey bar comes in as soon as the page moves. The utility
   bar scrolls away at the same time, so the header takes the top of the screen. */
.site-header.is-scrolled{
  background:var(--nav-dark);border-bottom-color:var(--charcoal-line);top:0;
}
.site-header .bar{
  max-width:var(--maxw);margin-inline:auto;padding:15px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{width:209px;height:104.88px;flex:none;transition:width .25s ease,height .25s ease}
/* condensed once you scroll, so the bar takes less of the screen */
.site-header.is-scrolled .logo{width:167.2px;height:83.904px}
.logo img{width:100%;height:100%;object-fit:contain}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:18px;line-height:1.2;color:var(--white);
  display:flex;flex-direction:column;gap:1px;justify-content:center;
}
.nav a::after{content:"";display:block;height:2px;width:1px;background:var(--white);opacity:0}
.nav a.is-active{color:var(--green-soft)}
.nav a.is-active::after{width:100%;background:var(--green-soft);opacity:1}
.nav a:hover::after{width:100%;opacity:.7}
.header-cta{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;color:var(--white)}
.header-cta .arw{width:25px;height:25px;flex:none}
.nav-toggle{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:#fff;
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}

/* ================================================================== HERO == */
.hero{position:relative;height:821px;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-3;background:#0b0d0b}
.hero__media video,
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
/* design scrim: flat 40% black over the footage */
.hero__scrim{position:absolute;inset:0;background:#000;opacity:.4;z-index:-2}
/* extra 10% black, for legibility over the moving footage */
.hero__overlay{position:absolute;inset:0;background:#000;opacity:.1;z-index:-2;pointer-events:none}
.hero__fade-top{
  position:absolute;left:0;right:0;top:0;height:211px;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.5657) 0%,rgba(0,0,0,0) 86.73%);
}
.hero__fade-bottom{
  position:absolute;left:0;right:0;top:721px;height:100px;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.5657) 0%,rgba(0,0,0,0) 86.73%);
}
.hero__tint{position:absolute;left:0;right:0;top:731px;height:89px;background:rgba(0, 0, 0, 0);z-index:-1}

.hero__inner{
  position:relative;height:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--pad-hero);
}
.hero__kicker{
  position:absolute;top:201px;display:flex;align-items:center;gap:14px;
  font-size:20px;line-height:1.2;color:var(--white);
}
.hero__kicker .rule{width:90px;height:2px;background:var(--green-soft);flex:none}
.hero h1{
  position:absolute;top:237px;margin:0;
  font-weight:600;font-size:var(--fs-h1);line-height:1;color:var(--white);
}
.hero h1 .em{color:var(--green)}
.hero__sub{
  position:absolute;top:417px;max-width:633px;
  font-size:20px;line-height:1.2;color:var(--white);
}
.hero__actions{position:absolute;top:519px;display:flex;align-items:center;gap:33px}
/* Google rating, on the hero footage — same block as the testimonials one,
   recoloured for a dark background */
.hero__rating{position:absolute;top:651px}
.hero__rating .rating__score,
.hero__rating .rating__sub{color:var(--white)}
.hero__badges{
  position:absolute;top:754px;left:var(--pad-hero);right:var(--pad-hero);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hero__badges .tagline{font-size:18px;color:var(--white);white-space:pre-wrap}
.accreds{display:flex;align-items:center;gap:25px;flex:none}
.accreds img{height:40px;width:auto;object-fit:contain}
.accreds img.sitewise{height:42px}

/* ================================================================= ABOUT == */
.about{position:relative;padding:89px 0 71px;overflow:hidden}
.about .disc{
  position:absolute;right:-117px;top:427px;width:301px;height:301px;
  pointer-events:none;
}
.about__statement{
  margin-top:42px;font-weight:300;font-size:var(--fs-h2);line-height:1.2;
  max-width:1158px;color:#000;
}
.about__statement .em{font-weight:500;color:var(--green)}
.about__cols{
  margin-top:30px;display:grid;grid-template-columns:660px 660px;
  justify-content:space-between;gap:40px;
}
.about__cols p{font-weight:300;font-size:var(--fs-lead);line-height:1.5;color:var(--body-grey)}
.about__more{margin-top:36px;display:inline-flex}

/* =============================================================== MISSION == */
.mission{position:relative;height:326px;overflow:hidden;isolation:isolate}
.mission__strip{position:absolute;inset:0;display:flex;z-index:-2}
.mission__strip img{height:100%;width:auto;flex:none;object-fit:cover}
.mission__wash{position:absolute;inset:0;background:var(--green-deep);opacity:.8;z-index:-1}
.mission__inner{
  position:relative;height:100%;max-width:var(--maxw);margin-inline:auto;padding:0 85px;
}
.mission__quote-mark{position:absolute;top:80px;left:85px;width:32px;height:30px}
/* Closing mark hangs just off the right edge of the quote block, level with the
   last line — Figma puts it at x1167/y168, i.e. 6px past the 1020 box, 20px up. */
.mission__quote-mark--close{
  position:absolute;left:100%;bottom:19px;margin-left:6px;
  width:32px;height:30px;transform:rotate(180deg);
}
.mission p{
  position:absolute;top:86px;left:141px;max-width:1020px;
  font-size:var(--fs-quote);line-height:1.5;color:var(--white);
}

/* ============================================================== SERVICES == */
/* The entire section is one 1460x1239 canvas — the Figma frame — scaled to fit
   a single pinned viewport. Offsets are that frame's pixels as percentages of
   the canvas; type uses cqw so everything scales together. */
.services{position:relative;background:var(--ink);color:var(--white)}

.svc-pin{position:relative;height:400vh}
.svc-sticky{
  position:sticky;top:0;height:100vh;padding-top:var(--header-h);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.svc-canvas{
  position:relative;
  /* capped by width, by height (so the whole section always fits), and by the
     design's own size — 1460/1239 = 1.17836 */
  width:min(1460px, calc(100vw - 48px), calc((100vh - var(--header-h) - 48px) * 1.17836));
  aspect-ratio:1460 / 1239;
  container-type:inline-size;
}

/* -- section header: eyebrow + rule (y80 of 1239) -------------------------- */
.svc-head{
  position:absolute;left:1.7123%;right:1.7123%;top:6.4568%;
  display:flex;align-items:center;gap:1.3699cqw;
}
.svc-head .eyebrow{font-size:.8219cqw}
.svc-head .rule{flex:1;height:1px;background:var(--green)}

/* -- heading + subheading (y140 and y220 of 1239) -------------------------- */
.svc-title{
  position:absolute;left:1.7123%;top:11.2994%;width:79.3151%;   /* 25 / 140 / 1158 */
  margin:0;font-weight:300;font-size:2.8767cqw;line-height:1.2;color:var(--white);
}
.svc-title .em{font-weight:500;color:var(--green)}
.svc-sub{
  position:absolute;left:1.7123%;top:17.7563%;width:45.2055%;    /* 25 / 220 / 660 */
  font-weight:300;font-size:1.3699cqw;line-height:1.5;color:var(--white);
}

/* -- centre: design rings with the scroll animation on top (730x730) ------- */
.svc-center{position:absolute;left:25%;top:22.1953%;width:50%;height:58.9184%}
.svc-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Scroll progress for the services section, drawn as a wedge sweeping clockwise
   from 12 o'clock. --svc-progress (0..1) is set by services-animation.js; the
   circle is complete by the time the last scene is on screen. */
.svc-progress{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  --svc-sweep:calc(var(--svc-progress,0) * 360deg);
  background:conic-gradient(from 0deg,
    rgba(109,190,69,.13) 0deg var(--svc-sweep),
    rgba(109,190,69,0)   var(--svc-sweep) 360deg);
}
@media (prefers-reduced-motion:reduce){
  .svc-progress{transition:none}
}
.svc-anim{position:absolute;inset:0}
.svc-anim svg{width:100%;height:100%}

/* -- the four services ------------------------------------------------------ */
.svc-band{display:contents}
.svc-grid{display:contents}
.svc-item{position:absolute;inset:0;opacity:.3;pointer-events:none;transition:opacity .45s ease}
.svc-item.is-active{opacity:1}
.svc-item__text,.svc-item__line{pointer-events:auto}
.svc-item__text{
  position:absolute;width:22.4658%;              /* 328 / 1460 */
  display:flex;flex-direction:column;gap:.274cqw;
}
/* Sizes switch straight over rather than tweening: font-size relayouts on
   every frame, and against the scroll scrub the transition stalls and strands
   items at the wrong size. The .45s opacity fade on .svc-item covers the swap. */
.svc-item__text h3{
  margin:0;font-weight:300;line-height:1.2;color:var(--white);
  font-size:2.0548cqw;                           /* 30 / 1460 — resting size */
}
.svc-item__text p{
  font-size:1.0959cqw;                           /* 16 / 1460 — resting size */
  line-height:1.5;color:var(--white);opacity:.5;
}
/* Figma sizes the live service up while the other three stay at rest:
   title 30 -> 50, body 16 -> 20. Only applies to the radial layout, where all
   four are on screen together and cqw is measured against the 1460 canvas. */
@media (min-width:1024px){
  .svc-item.is-active .svc-item__text h3{font-size:3.4247cqw}   /* 50 / 1460 */
  .svc-item.is-active .svc-item__text p{font-size:1.3699cqw}    /* 20 / 1460 */
}
/* Connector lines are trimmed to 60% of the Figma length so they stop short of
   the scene artwork, which fills most of the ring (the tanker spans nearly the
   full width). Each one keeps the end that meets its text and loses length at
   the end that points into the circle, so the offsets below shift by whatever
   the box gave up: 4.5673% across, 3.6481% down. */
.svc-item__line{position:absolute;width:6.851%;height:5.4722%}
.svc-item__line img{width:100%;height:100%}

.svc-item--plumbing .svc-item__text{left:4.1781%;top:34.8668%;text-align:right;align-items:flex-end}
.svc-item--plumbing .svc-item__line{left:27.9452%;top:36.1582%;transform:rotate(180deg) scaleY(-1)}
.svc-item--gas      .svc-item__text{left:73.3562%;top:34.8668%;text-align:left;align-items:flex-start}
.svc-item--gas      .svc-item__line{left:65.2522%;top:36.1582%}
.svc-item--drainage .svc-item__text{left:4.1781%;top:65.9403%;text-align:right;align-items:flex-end}
.svc-item--drainage .svc-item__line{left:27.9452%;top:62.3245%;transform:rotate(180deg)}
.svc-item--waste    .svc-item__text{left:73.3562%;top:65.9403%;text-align:left;align-items:flex-start}
.svc-item--waste    .svc-item__line{left:65.2522%;top:62.2437%;transform:scaleY(-1)}

/* -- bottom row: "Explore more services" links, then the CTA on the right --- */
.svc-more{
  position:absolute;left:2.3973%;right:2.1918%;top:90.3148%;   /* 35 .. 1428 */
  display:flex;align-items:center;gap:2.6027cqw;
  font-size:1.3699cqw;white-space:nowrap;
}
.svc-more a{font-weight:300;line-height:1.5;color:var(--white)}
.svc-more a:hover{color:var(--green)}
.svc-more a.svc-more__label{
  flex:none;font-weight:600;line-height:1.2;color:var(--green);
  text-decoration-thickness:1px;text-underline-offset:.35em;
}
.svc-more a.svc-more__label:hover{color:var(--green-soft);text-decoration:underline}

/* -- marquee: the services run right to left past the label ---------------- */
/* The track holds two copies of the list, so -50% lands exactly on the copy
   and the loop has no seam. Every item is a link, so hover (and keyboard
   focus) parks it long enough to click one. */
.svc-marquee{
  flex:1 1 auto;min-width:0;overflow:hidden;
  /* wider fade on the left, where items exit right next to the label */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 52px,#000 calc(100% - 32px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 52px,#000 calc(100% - 32px),transparent 100%);
}
.svc-marquee__track{
  display:flex;width:max-content;
  animation:svc-marquee 60s linear infinite;
}
.svc-marquee:hover .svc-marquee__track,
.svc-marquee:focus-within .svc-marquee__track{animation-play-state:paused}
.svc-marquee__list{
  display:flex;align-items:center;
  gap:2.6027cqw;padding-right:2.6027cqw;      /* the join spaces like the rest */
}
@keyframes svc-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}


/* ============================================================== EMERGENCY == */
.emergency{position:relative;background:var(--green);color:var(--ink);overflow:hidden}
.emergency .disc{position:absolute;left:-106px;top:27px;width:391px;height:391px;pointer-events:none}
.emergency__inner{
  position:relative;max-width:var(--maxw);margin-inline:auto;
  padding:60px var(--pad);min-height:522px;
}
.emergency .eyebrow{color:var(--ink)}
.emergency .rule{background:var(--ink);opacity:.35}
.emergency h2{
  margin:42px 0 0;font-weight:300;font-size:var(--fs-h2);line-height:1.2;max-width:928px;
}
/* Figma: 20px copy, 660 wide, sitting between the heading and the hours */
.emergency__lead{
  margin-top:29px;font-weight:300;font-size:var(--fs-lead);line-height:1.5;
  max-width:660px;
}
.emergency__hours{
  margin-top:54px;font-weight:300;font-size:var(--fs-lead);line-height:1.5;
  max-width:798px;white-space:pre-wrap;
}
.emergency__actions{
  position:absolute;right:var(--pad);top:122px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.emergency__pay{
  position:absolute;right:var(--pad);top:421px;margin:0;
  display:flex;align-items:center;gap:8px;
  font-weight:300;font-size:16px;line-height:1.5;color:var(--ink);
}
.pay-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:93px;height:34px;border-radius:6px;background:#B2FCE4;flex:none;
}
.pay-badge img{width:78px;height:auto;display:block}

/* =========================================================== HOW IT WORKS == */
.how{position:relative;padding:80px 0 0;background:var(--white);overflow:hidden}
.how .disc{position:absolute;right:-167px;top:22px;width:277px;height:277px;pointer-events:none}
.how .h2{margin-top:40px;color:#000}
.how .lead{margin-top:22px}
.steps{
  margin-top:66px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
  position:relative;
}
.step{position:relative;padding-left:19px}
/* The design dims the label and the text of an inactive step, but leaves the
   dot at full strength — the dot carries its own active/inactive artwork. */
.step__no,.step__body{opacity:.3;transition:opacity .5s ease}
.step.is-active .step__no,
.step.is-active .step__body{opacity:1}
.step__no{font-size:16px;line-height:1.5;color:var(--ink)}
.step__dot{display:block;position:relative;margin:20px 0 0;width:16px;height:16px}
.step__dot img{position:absolute;inset:0;width:16px;height:16px;transition:opacity .5s ease}
.step__dot .dot-on{opacity:0}
.step.is-active .step__dot .dot-off{opacity:0}
.step.is-active .step__dot .dot-on{opacity:1}
.step__connector{
  position:absolute;left:35px;right:-30px;top:53px;height:1px;background:var(--stone-line);
}
.step:last-child .step__connector{display:none}
.step h3{margin:26px 0 10px;font-weight:300;font-size:var(--fs-h3);line-height:1.2;color:var(--ink)}
.step__body p{font-size:16px;line-height:1.5;color:var(--ink);opacity:.5;max-width:280px}

/* ================================================================= AREAS == */
.areas{position:relative;background:var(--ink);color:var(--white);padding:80px 0 0;margin-top:82px}
.areas .h2{margin-top:40px}
.areas__lead{margin-top:22px;font-weight:300;font-size:var(--fs-lead);color:var(--white);max-width:660px}
.areas__grid{
  margin-top:60px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,418px);
  gap:119px;align-items:start;
  /* Figma insets the whole block inside the section gutters:
     30 lead + 715 list + 119 gap + 418 map + 128 trail = 1410 */
  padding-left:30px;padding-right:128px;
}
.area-row{
  display:flex;align-items:center;gap:30px;padding:20px 0;
  border-bottom:1px solid var(--charcoal-line);
}
.area-row__no{font-weight:600;font-size:12px;line-height:1.5;color:var(--green);text-transform:uppercase}
.area-row__name{font-weight:300;font-size:var(--fs-h3);line-height:1.2;width:250px;flex:none}
.area-row__subs{flex:1;min-width:0;font-size:16px;line-height:1.5;opacity:.5}
.area-row__arw{font-family:var(--font-barlow);font-weight:600;font-size:15px;color:var(--green);flex:none}
.areas__map{position:relative;width:100%;aspect-ratio:418/496.616;margin-top:-30px}
.areas__map .map-svg{width:100%;height:100%;display:block}

/* Hover link between the area list and the map: whichever one you point at,
   that area stays lit and everything else drops to 26% — measured off the
   reference recording (0.97 -> 0.26 over ~0.32s, ease-out). */
.area-row,.map-region{transition:opacity .3s ease}
.map-region{cursor:pointer}
.areas.is-hovering .area-row:not(.is-active),
.areas.is-hovering .map-region:not(.is-active){opacity:.26}
.areas__note{margin-top:38px;font-weight:300;font-size:14px;line-height:1.5;color:var(--on-dark-faint);padding-bottom:100px}
.areas__note .em{font-weight:500;color:var(--green)}

/* ========================================================== TESTIMONIALS == */
.testimonials{padding:80px 0 0;background:var(--white)}
.testimonials__top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:40px}
.testimonials .h2{color:#000;max-width:1158px}
.rating{display:flex;align-items:center;gap:10px;flex:none}
.rating>div{display:flex;flex-direction:column;gap:3px}
.rating img{width:48px;height:48px}
.rating__score{font-family:var(--font-barlow);font-weight:500;font-size:16px;line-height:1.5;color:var(--green-deep)}
.rating__score .stars{color:#FFC107}
.rating__sub{font-family:var(--font-barlow);font-size:14px;line-height:1.5;color:var(--muted)}
.rating__sub a{text-decoration:underline}
.tcards{margin-top:69px;display:flex;gap:32px;padding-bottom:4px}
.tcard{
  flex:none;width:384px;min-height:231px;background:var(--white);
  border:1px solid var(--stone-line);padding:24px 23px;position:relative;
}
.tcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tcard__stars{font-family:var(--font-barlow);font-size:14px;line-height:1.5;color:var(--green-deep)}
.tcard__tag{
  font-size:11px;line-height:1.4;letter-spacing:.66px;text-transform:uppercase;
  color:var(--green-deep);text-align:right;
}
.tcard__quote{margin-top:14px;font-size:16px;line-height:1.5;color:var(--ink)}
.tcard__foot{
  position:absolute;left:23px;right:23px;bottom:25px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.tcard__name{font-weight:500;font-size:16px;line-height:1.5;color:var(--ink)}
.tcard__loc{font-size:14px;line-height:1.5;color:var(--muted);text-align:right}

/* ================================================================== BLOG == */
.journal{position:relative;background:var(--stone-bg);margin-top:80px;padding:80px 0 96px}
.journal__top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:40px}
.journal .h2{color:#000}
/* Figma: centred under the book, 50px clear of it */
.journal__actions{margin-top:50px;display:flex;justify-content:center}

/* Figma: 20px Light, 810 wide, 30 under the heading and 40 above the book */
.journal__lead{
  margin-top:30px;font-weight:300;font-size:var(--fs-lead);line-height:1.5;
  max-width:810px;color:var(--body-grey);
}
.journal__nav{display:flex;gap:20px;flex:none}
/* Figma draws these as a 1px #D5D9CF ring, which is all but invisible against
   the section's #EEF0EA. Same shape, enough contrast to be found and used. */
.jnav{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--stone-line);background:var(--white);color:var(--ink);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.jnav::before{
  content:"";width:9px;height:9px;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
}
.jnav--next::before{transform:rotate(45deg);margin-left:-3px}
.jnav--prev::before{transform:rotate(-135deg);margin-right:-3px}
.jnav:hover:not([disabled]){background:var(--green);border-color:var(--green);color:var(--white)}
.jnav:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.jnav[disabled]{opacity:.3;cursor:default}
/* padding leaves room for the rotated green backing; the negative bottom
   margin keeps the section's spacing exactly as before */
/* ---- Journal: an open book -----------------------------------------------
   Figma (1460 canvas): 7 sheets at x25..43, photo 684x504 at x46, article page
   684x504 at x730, 7 sheets at x1397..1415. Each sheet is a 20px sliver, 3px
   apart, so 21px of stack shows past each outer edge. */
.jbook{
  margin-top:40px;display:flex;gap:0;align-items:stretch;
  padding:0 21px;                      /* the 21px of sheets on each side */
}

/* sliver stacks, mirrored on the two outer edges */
.jbook__sheets{position:absolute;top:0;bottom:0;width:0;z-index:0;pointer-events:none}
.jbook__sheets i{
  position:absolute;top:0;bottom:0;display:block;width:20px;
  background:var(--white);border:1px solid #E6E6E6;
}
.jbook__sheets--left{left:0}
.jbook__sheets--right{right:0}
/* Figma paints the outermost sliver at the bottom of the stack and the one
   nearest the page on top, so each sheet's edge sits over the one behind it.
   First child is therefore the furthest out. */
.jbook__sheets--left i:nth-child(1){left:-21px}
.jbook__sheets--left i:nth-child(2){left:-18px}
.jbook__sheets--left i:nth-child(3){left:-15px}
.jbook__sheets--left i:nth-child(4){left:-12px}
.jbook__sheets--left i:nth-child(5){left:-9px}
.jbook__sheets--left i:nth-child(6){left:-6px}
.jbook__sheets--left i:nth-child(7){left:-3px}
.jbook__sheets--right i:nth-child(1){right:-21px}
.jbook__sheets--right i:nth-child(2){right:-18px}
.jbook__sheets--right i:nth-child(3){right:-15px}
.jbook__sheets--right i:nth-child(4){right:-12px}
.jbook__sheets--right i:nth-child(5){right:-9px}
.jbook__sheets--right i:nth-child(6){right:-6px}
.jbook__sheets--right i:nth-child(7){right:-3px}

.jbook__media{
  position:relative;flex:1 1 50%;min-width:0;aspect-ratio:684/504;
  /* contain the photo's z-index, otherwise it outranks the page stack and
     the turning page renders behind the picture it should be covering */
  isolation:isolate;z-index:0;
}
.jbook__photo{
  position:relative;z-index:1;width:100%;height:100%;
  overflow:hidden;background:#d9d9d9;
}
.jbook__photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;
}
.jbook__photo img.is-active{opacity:1}

.jbook__pages{
  position:relative;flex:1 1 50%;min-width:0;
  /* vanishing point sits on the spine, where the page is hinged, otherwise the
     turn projects away from the book and skews off the top */
  perspective:2200px;perspective-origin:0 50%;z-index:1;
}
.jpage{
  position:absolute;top:0;left:0;width:100%;height:100%;
  /* both states list the same transform functions, otherwise the browser
     decomposes the matrix and a 180 degree rotation collapses to identity */
  transform:rotateY(0deg);
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.36,.06,.2,1);
}
/* the article swings left across the photo; its reverse carries the next
   article's picture, so it reads as a real page rather than a blank sheet */
.jpage.is-turned{transform:rotateY(-180deg)}

.jpage__face{
  position:absolute;inset:0;
  background:var(--white);border:1px solid #E6E6E6;
  backface-visibility:hidden;overflow:hidden;
}
.jpage__face--back{transform:rotateY(180deg);background:#d9d9d9}
.jpage__face--back img{width:100%;height:100%;object-fit:cover;display:block}
/* light rakes across the front as it lifts off the stack */
.jpage__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0) 45%);
  opacity:0;transition:opacity .9s cubic-bezier(.36,.06,.2,1);
}
.jpage.is-turned .jpage__face--front::after{opacity:1}

.jpage__inner{
  display:flex;flex-direction:column;height:100%;
  padding:56px 66px 30px;color:#1E221D;    /* Figma: content inset 66px */
}
.jpage__inner h3{
  margin:10px 0 0;font-weight:300;font-size:30px;line-height:1.2;
  max-width:470px;color:inherit;
}
.jpage__inner p{
  margin:21px 0 0;font-weight:300;font-size:16px;line-height:1.5;
  max-width:461px;color:inherit;opacity:.8;
}
.jpage__kicker,.jpage__loc{
  font-size:11px;line-height:1.4;letter-spacing:.66px;text-transform:uppercase;color:inherit;
}
.jpage__loc{margin-top:21px}
.jpage__tag{
  margin-top:auto;align-self:flex-start;
  display:inline-block;background:var(--green-tint);color:var(--ink);
  font-size:11px;line-height:1.4;letter-spacing:.66px;text-transform:uppercase;padding:4.5px 8px;
}

@media (prefers-reduced-motion:reduce){
  .jpage{transition:none}
}

@media (max-width:1199px){
  .jbook{flex-direction:column;padding:0}
  .jbook__sheets{display:none}
  .jbook__media{flex:none;width:100%;aspect-ratio:835/504}
  .jbook__pages{flex:none;width:100%;height:auto;aspect-ratio:auto;perspective:none}
  /* stacked, the page has to size to its own copy: both it and its front face
     come out of absolute positioning, and the reverse side is not needed */
  .jpage{position:relative;height:auto;translate:none;transform:none;border-top:0;transition:opacity .35s ease}
  .jpage__face{position:relative;inset:auto;height:auto}
  .jpage__face--back{display:none}
  .jpage__face::after{display:none}
  .jpage:not(.is-current){display:none}
}

/* ================================================================== FAQS == */
.faqs{padding:80px 0 96px;background:var(--white)}
.faqs__grid{display:grid;grid-template-columns:minmax(0,538px) minmax(0,808px);gap:88px;justify-content:space-between}
.faqs .h2{margin-top:40px;color:#000}
.faqs .lead{margin-top:22px}
.faq-list{margin-top:35px}
.faq{border-top:1px solid var(--stone-line)}
.faq:first-child{border-top:0}
.faq:last-child{border-bottom:1px solid var(--stone-line)}
.faq__q{
  display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:20px;font-weight:300;font-size:var(--fs-faq);line-height:1.2;color:var(--ink);
}
.faq__q span{flex:1;min-width:0}
.faq__icon{width:21px;height:21px;flex:none;position:relative}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;background:var(--green);transition:opacity .2s ease,transform .2s ease;
}
.faq__icon::before{left:0;top:10px;width:21px;height:1px}
.faq__icon::after{left:10px;top:0;width:1px;height:21px}
.faq[open] .faq__icon::after{opacity:0;transform:scaleY(0)}
.faq__a{
  overflow:hidden;max-height:0;transition:max-height .35s ease;
}
.faq[open] .faq__a{max-height:400px}
.faq__a p{padding:0 20px 20px;font-size:16px;line-height:1.5;color:var(--ink);opacity:.5;max-width:649px}

/* =============================================================== CONTACT == */
.contact{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.contact__bg{
  position:absolute;inset:0;opacity:.2;mix-blend-mode:luminosity;pointer-events:none;
}
.contact__bg img{width:100%;height:100%;object-fit:cover}
.contact__inner{position:relative;max-width:var(--maxw);margin-inline:auto;padding:80px var(--pad) 107px}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) 488px;gap:60px;align-items:start}
.contact .h2{margin-top:40px}
.contact__lead{margin-top:22px;font-weight:300;font-size:var(--fs-lead);line-height:1.5;color:var(--white);max-width:660px}
.contact__actions{margin-top:60px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}

.quote-form{background:var(--white);color:var(--ink);padding:40px;margin-top:52px}
.quote-form h3{margin:0;font-weight:600;font-size:var(--fs-formtitle);line-height:1.1;color:var(--ink)}
.quote-form__sub{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
.quote-form__sub a{color:var(--green);font-weight:500}
.quote-form__sub strong{color:var(--ink);font-weight:500}

/* Service picker: 16px radio + 14px label, 9px apart (Figma) */
.qopts{margin-top:18px;margin-bottom:18px;display:flex;flex-direction:column;gap:9px}
.qopt{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-weight:300;font-size:14px;line-height:1.5;color:var(--muted)}
.qopt input{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:16px;height:16px;border-radius:50%;border:1px solid var(--stone-line);background:var(--white)}
.qopt input:checked{background:var(--green);border-color:var(--green)}
.qopt input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.qopt:hover{color:var(--ink)}
.quote-form__grid{margin-top:29px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field label{
  font-size:11px;line-height:1.4;letter-spacing:.66px;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  font:400 14px/1.5 var(--font);color:var(--ink);
  border:1px solid var(--stone-line);background:var(--white);
  padding:12px 15px;width:100%;border-radius:0;
}
.field textarea{height:96px;resize:vertical;padding-top:13px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field select{color:var(--muted);appearance:none;height:48px}
.quote-form .btn{margin-top:20px}
.quote-form__note{
  margin-top:16px;
  font-size:11px;line-height:1.5;color:var(--muted);
  white-space:pre-wrap;
}

/* ================================================================ FOOTER == */
.footer{background:var(--ink);color:var(--on-dark-muted)}
.footer__inner{max-width:1266px;margin-inline:auto;padding:90px 25px 78px}
/* Figma places the footer columns at x 0/416/624/832/1040 inside 1216, i.e.
   32px gaps. gap:40px forced 1248px into a 1216px box, so the footer stuck
   out at every desktop width and scrolled the page below ~1300px. */
.footer__grid{
  display:grid;justify-content:space-between;gap:32px;
  grid-template-columns:minmax(0,384px) repeat(4,minmax(0,176px));
}
.footer__brand img{width:176px;height:auto}
.footer__brand p{margin-top:24px;font-size:14px;line-height:1.5;max-width:344px}
.footer__phone{margin-top:24px}
.footer__phone .lbl{font-size:11px;line-height:1.4;letter-spacing:.66px;text-transform:uppercase;color:var(--on-dark-faint)}
.footer__phone .num{
  display:block;margin-top:6px;font-weight:600;font-size:var(--fs-phone);line-height:1;
  letter-spacing:-.2px;color:var(--white);
}
.footer__addr{margin-top:24px;font-size:14px;line-height:1.5}
.footer__social{margin-top:24px;display:flex;gap:20px}
.footer__social img{width:24px;height:24px}
.footer__col h4{
  margin:0 0 39px;font-weight:400;font-size:11px;line-height:1.4;
  letter-spacing:.66px;text-transform:uppercase;color:var(--on-dark-faint);
}
.footer__col li+li{margin-top:12px}
.footer__col a{font-size:14px;line-height:1.5;color:var(--on-dark-muted)}
.footer__col a:hover{color:var(--white)}
.footer__badges{
  max-width:1266px;margin-inline:auto;padding:0 25px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
/* The source PNG ships with a wide transparent margin, which left the pill
   rendering ~23px tall inside a 40px box with unreadable type. afterpay-badge.png
   is that same art cropped to the pill (1058x181), matching the crop Figma
   applies, so it now fills the 234x40 the design specifies. */
.footer__badges .mark{width:234px;height:40px;object-fit:contain;object-position:left center}
.footer__legal{
  max-width:1266px;margin-inline:auto;padding:24px 25px 40px;margin-top:42px;
}
.footer__legal .rule{height:1px;background:var(--charcoal-line);margin-bottom:24px}
.footer__legal .row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:11px;line-height:1.4;letter-spacing:.66px;text-transform:uppercase;color:var(--on-dark-faint);
}

/* ===========================================================================
   RESPONSIVE
   The 1460px frame is reproduced exactly at desktop; below that the grid
   collapses in stages. Nothing about the design's type, colour or spacing
   ratios changes — only how many columns fit and how the services stage packs.
   =========================================================================== */

/* ---- <=1400px : ease the hero gutter in ---------------------------------- */
@media (max-width:1400px){
  :root{--pad-hero:clamp(25px,5.86vw,82px)}
  .about__cols{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
  .faqs__grid{gap:clamp(32px,6vw,88px)}
}

/* ---- <=1200px : hero text blocks stop being absolutely pinned ------------- */
@media (max-width:1200px){
  /* .hero__inner must stretch to the hero's min-height, otherwise it collapses
     to content height and margin-top:auto on the badges has no space to take */
  .hero{height:auto;min-height:760px;display:flex}
  .hero__inner{
    flex:1;height:auto;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding-block:150px 44px;
  }
  .hero__kicker,.hero h1,.hero__sub,.hero__actions,
  .hero__rating{position:static;top:auto}
  .hero h1{margin-top:22px}
  .hero__sub{margin-top:26px}
  .hero__actions{margin-top:44px;flex-wrap:wrap;gap:16px}
  .hero__rating{margin-top:36px}
  .hero__fade-bottom,.hero__tint{top:auto;bottom:0}
  /* margin-top:auto takes the leftover column space, so the tagline and the
     three accreditations sit on the hero's bottom edge at any height */
  .hero__badges{
    position:static;margin-top:auto;padding:56px 0 0;
    flex-wrap:wrap;gap:24px;align-items:flex-end;
  }
  .emergency__actions{position:static;margin-top:36px;flex-wrap:wrap}
  .emergency__pay{position:static;margin-top:22px;flex-wrap:wrap;row-gap:4px}
  .contact__grid{grid-template-columns:minmax(0,1fr) 430px;gap:40px}
}

/* ---- <=1023px : tablet — nav collapses, services stage stacks ------------- */
@media (max-width:1023px){
  :root{--header-h:81px}
  .nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .site-header .bar{padding-block:10px}
  .logo{width:150px;height:75px}
  .site-header.is-scrolled .logo{width:120px;height:60px}

  .nav.is-open{
    display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink);padding:8px var(--pad) 20px;
  }
  .nav.is-open a{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav.is-open a::after{display:none}

  /* Services: the canvas unpacks into a column that still fits one viewport —
     header, animation, the four services, the links row, then the CTA. The
     pinned scroll and scene-by-scene highlighting are unchanged. */
  .svc-pin{height:360vh}
  .svc-sticky{height:100svh;padding:calc(var(--header-h) + 20px) 20px 20px;align-items:stretch}
  .svc-canvas{
    width:100%;max-width:640px;aspect-ratio:auto;container-type:normal;
    align-self:stretch;
    display:flex;flex-direction:column;justify-content:space-between;
    gap:clamp(12px,2vh,24px);
  }
  /* three bands: header pinned top, animation + services filling the middle,
     the links row and CTA pinned to the bottom */
  .svc-band{display:flex;flex-direction:column}
  .svc-band--top{gap:clamp(8px,1.4vh,14px);flex:none}
  .svc-band--mid{
    flex:1 1 auto;min-height:0;justify-content:center;align-items:center;
    gap:clamp(14px,2.6vh,28px);
  }
  .svc-band--mid .svc-grid{width:100%}
  .svc-band--bot{gap:clamp(10px,1.6vh,18px);flex:none}
  .svc-head{position:static;gap:16px}
  .svc-head .eyebrow{font-size:12px}
  .svc-title{position:static;width:100%;font-size:clamp(21px,3.4vw,30px)}
  .svc-sub{position:static;width:100%;font-size:clamp(12px,1.9vw,15px)}
  /* must stay positioned: .svc-rings and .svc-anim are inset:0 inside it, and
     with position:static they escape to the whole canvas and cover the text */
  .svc-center{
    position:relative;left:auto;top:auto;transform:none;
    align-self:center;flex:none;
    width:min(72vw,46vh,400px);height:min(72vw,46vh,400px);
  }
  .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)}
  .svc-item{position:static;inset:auto;width:100%;pointer-events:auto}
  .svc-item__line{display:none}
  .svc-item__text{
    position:static;width:100%;gap:4px;
    text-align:left !important;align-items:flex-start !important;
  }
  .svc-item__text h3{font-size:clamp(21px,2.9vw,26px)}
  .svc-item__text p{font-size:15px}
  .svc-more{
    position:static;font-size:14px;gap:18px;
    flex-wrap:nowrap;white-space:nowrap;overflow:visible;
  }
  .svc-more__label{flex:none}
  .svc-marquee__list{gap:22px;padding-right:22px}

  .areas__grid{grid-template-columns:1fr;gap:48px;padding-left:0;padding-right:0}
  .areas__map{max-width:418px;margin-inline:auto;margin-top:0}
  .faqs__grid{grid-template-columns:1fr;gap:44px}
  .faq-list{margin-top:0}
  .contact__grid{grid-template-columns:1fr;gap:48px}
  .quote-form{margin-top:0}
  .quote-form{max-width:560px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:44px}
  .footer__brand{grid-column:1 / -1}
  /* keep the arrows beside the heading rather than stacking under it */
  .journal__top{
    display:flex;flex-direction:row;align-items:center;
    justify-content:space-between;gap:16px;margin-top:28px;
  }
  .journal__top .h2{min-width:0}
  .journal__nav{display:flex;gap:12px;flex:none}
}

/* ---- <=767px : phone ------------------------------------------------------ */
@media (max-width:767px){
  :root{--pad:20px;--pad-hero:20px}
  .hero{min-height:640px}
  .hero__inner{padding-block:120px 32px}
  .hero__kicker{flex-wrap:wrap;font-size:16px;gap:10px}
  .hero__kicker .rule{width:56px}
  .hero__sub{font-size:17px}
  /* stack the four points above the three accreditations, both flush left */
  .hero__badges{
    flex-direction:column;align-items:flex-start;justify-content:flex-end;
    gap:16px;padding-top:40px;
  }
  .hero__badges .tagline{font-size:14px;line-height:1.6}
  .accreds{gap:16px}
  .accreds img{height:32px}
  .accreds img.sitewise{height:34px}

  .about{padding-top:60px;padding-bottom:52px}
  .about__cols{grid-template-columns:1fr}
  .about .disc{right:-160px;top:520px}
  .mission{height:auto}
  .mission__inner{padding:56px 24px 48px}
  .mission p{position:static;left:auto;top:auto;max-width:none}
  .mission__quote-mark--close{
    position:static;display:inline-block;left:auto;bottom:auto;
    margin-left:10px;vertical-align:-4px;
  }
  .mission__quote-mark{top:24px;left:24px}

  .svc-pin{height:320vh}
  .svc-canvas{max-width:none;gap:clamp(12px,2.1vh,22px)}
  .svc-title{font-size:clamp(18px,4.6vw,24px)}
  .svc-sub{font-size:12px}

  /* One service at a time, centred under the animation and with its sub-text.
     The four stack in a single grid cell, so the card is as tall as the longest
     of them and nothing reflows as the scroll moves between scenes. */
  .svc-grid{display:grid;grid-template-columns:1fr;gap:0;flex:none}
  .svc-item{
    grid-area:1 / 1;opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility 0s linear .2s;
  }
  /* the incoming one waits for the outgoing one to clear, so two centred
     service names never sit on top of each other mid-change */
  .svc-item.is-active{
    opacity:1;visibility:visible;
    transition:opacity .28s ease .18s,visibility 0s;
  }
  .svc-item__text{
    align-items:center !important;text-align:center !important;
    gap:6px;max-width:32ch;margin-inline:auto;
  }
  .svc-item__text h3{font-size:clamp(23px,6.2vw,30px);line-height:1.25}
  .svc-item__text p{display:block;font-size:clamp(15px,3.9vw,17px);line-height:1.5;opacity:.55}
  /* the animation gives up whatever height the service card needs, and stays
     square so the ring artwork is never stretched */
  .svc-center{
    flex:1 1 auto;width:auto;height:auto;aspect-ratio:1;
    min-height:120px;max-width:min(72vw,400px);max-height:min(72vw,400px);
  }
  .svc-rings{object-fit:contain}
  /* Stacked on mobile: the label centres over the marquee, which still runs
     the full width beneath it. */
  .svc-more{flex-direction:column;align-items:center;gap:6px;font-size:12px}
  .svc-marquee{flex:none;width:100%}
  .svc-marquee__list{gap:18px;padding-right:18px}
  .svc-marquee__track{animation-duration:40s}

  .emergency__inner{padding:52px var(--pad)}
  .how{padding-top:60px}
  .steps{grid-template-columns:1fr;gap:36px;margin-top:44px}
  .step__connector{display:none}
  .step__body p{max-width:none}

  .areas{padding-top:60px;margin-top:60px}
  .area-row{flex-wrap:wrap;gap:8px 16px;padding:18px 0}
  .area-row__name{width:auto;flex:1 0 auto}
  .area-row__subs{flex:1 0 100%;order:3}
  .areas__note{padding-bottom:64px}

  .testimonials{padding-top:60px}
  .testimonials__top{flex-direction:column;align-items:flex-start;gap:24px}
  .tcards{margin-top:40px;gap:16px}
  .tcard{width:min(85vw,384px)}

  .journal{padding:60px 0 72px;margin-top:60px}
  .jbook{margin-top:24px}
  .jpage__inner{padding:28px 20px 24px}
  .jpage__inner h3{font-size:22px;margin-top:16px}
  .jpage__inner p{font-size:15px;margin-top:12px}

  .faqs{padding:60px 0 72px}
  .faq__q{padding:18px 0;gap:14px}
  .faq__a p{padding:0 0 18px}

  .contact__inner{padding:60px var(--pad) 72px}
  .contact__actions{margin-top:40px;gap:14px}
  .quote-form{padding:28px 22px}
  .quote-form__grid{grid-template-columns:1fr}

  .footer__inner{padding:64px 20px 56px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer__col h4{margin-bottom:20px}
  .footer__badges{padding-inline:20px;gap:18px}
  .footer__badges .accreds{gap:14px}
  .footer__legal{padding:24px 20px 36px;margin-top:32px}
  .footer__legal .row{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
  .btn{font-size:17px;padding:13px 24px}
  .btn--ghost{padding:13px 14px}
}

@media (max-width:420px){
  .footer__grid{grid-template-columns:1fr}
}

/* ---- Reduced motion: no pinned scroll, first scene shown statically ------- */
@media (prefers-reduced-motion:reduce){
  .svc-pin{height:auto}
  .svc-sticky{position:static;height:auto;padding-block:40px}
  .btn,.svc-item,.faq__a{transition:none}
  .svc-marquee{overflow-x:auto}
  .svc-marquee__track{animation:none}
  .hero__media video{display:none}      /* hold the poster frame instead */
  .hero__media{background:#0b0d0b url(../assets/hero.jpg) center/cover no-repeat}
  .step__no,.step__body,.step__dot img{transition:none}
  .step__no,.step__body{opacity:1}      /* no cycle, so show all four steps */
}
/* Same on mobile: with the pinned scroll gone nothing would ever advance past
   Plumbing, so the four services stack instead of taking turns. */
@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .svc-grid{gap:26px}
  .svc-item{grid-area:auto;opacity:1;visibility:visible}
}

/* ---- Print ---------------------------------------------------------------- */
@media print{
  .svc-pin{height:auto}
  .svc-sticky{position:static;height:auto}
  .site-header{position:static}
}