/* =========================================================
   MASTER ROOFING — Roof Replacement PPC Landing Page
   OPTION 2 — warm theme: subtle shades of red throughout.
   Same light base, red primary accent, oxblood dark sections,
   blush-tinted backgrounds and warm shadows.
   ========================================================= */

:root{
  --bg:#fffcfb;
  --bg-alt:#fbf4f2;
  --navy:#2a1416;
  --navy-2:#361a1d;
  --ink:#241519;
  --text:#574a4c;
  --text-dim:#867a7b;
  --text-dimmer:#a99e9f;
  --line:#f1e6e3;
  --line-2:#e7d8d4;

  --blurple:#d63a2e;      /* primary accent — brand red */
  --blurple-lt:#e85c50;
  --blurple-dk:#a3251c;
  --cyan:#ff9a5c;         /* warm secondary (was cyan) */
  --coral:#ff7a59;
  --pink:#ff5996;
  --gold:#ffcf8a;
  --red:#df1b41;          /* danger / form-error only */

  /* accent gradient shorthand */
  --hot:linear-gradient(90deg,#d63a2e,#ff9a5c);
  --blurple-soft:rgba(214,58,46,.10);

  --pad:clamp(64px,9vw,120px);
  --angle:min(3vw,44px);

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:.32s;

  --wrap:1180px;
  /* warm layered shadows */
  --sh-1:0 2px 5px -1px rgba(70,30,26,.14),0 1px 3px -1px rgba(0,0,0,.07);
  --sh-2:0 13px 27px -5px rgba(70,30,26,.20),0 8px 16px -8px rgba(0,0,0,.16);
  --sh-3:0 50px 100px -20px rgba(70,30,26,.20),0 30px 60px -30px rgba(0,0,0,.22);
  --sh-blurple:0 12px 34px -10px rgba(214,58,46,.42);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:clip;               /* clip (not hidden) so position:sticky keeps working */
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;height:auto}
h1,h2,h3{font-family:inherit;font-weight:700;line-height:1.12;letter-spacing:-.021em;margin:0;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}

:focus-visible{outline:2px solid var(--blurple);outline-offset:3px;border-radius:4px}
.sr-only,.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;margin:0;padding:12px 18px;background:var(--blurple);color:#fff;font-weight:700;border-radius:8px;z-index:1000}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.wrap-narrow{max-width:820px}
.muted{color:var(--text-dimmer)}

/* ---------- Buttons ---------- */
.btn{
  --bx:var(--sh-1);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;font-weight:600;font-size:15px;letter-spacing:0;
  border-radius:999px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
  box-shadow:var(--bx);white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-cta{background:var(--blurple);color:#fff;box-shadow:var(--sh-blurple)}
.btn-cta:hover{background:var(--blurple-lt);box-shadow:0 16px 40px -10px rgba(214,58,46,.55)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2)}
.btn-ghost{background:#fff;color:var(--blurple);border:1px solid var(--line);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-block{width:100%}
.btn-lg{padding:16px 34px;font-size:16px}

/* CTA idle pulse-glow */
.pulse{position:relative;animation:pulseGlow 2.6s var(--ease) infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 10px 30px -10px rgba(214,58,46,.5),0 0 0 0 rgba(214,58,46,.45)}
  50%{box-shadow:0 10px 30px -10px rgba(214,58,46,.5),0 0 0 14px rgba(214,58,46,0)}
}

/* ---------- Header ---------- */
.lp-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,252,251,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:16px}
.brand{display:flex;align-items:center}
.brand img{height:38px;width:auto;display:block}
.header-actions{display:flex;align-items:center;gap:14px}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)}
.header-phone svg{width:17px;height:17px;color:var(--blurple)}
.header-phone:hover{color:var(--blurple)}

@media (max-width:640px){
  .brand img{height:26px}
  .header-phone{font-size:14px}
  .header-cta{display:none}
}
@media (max-width:380px){ .brand img{height:23px} }

/* ---------- Hero ---------- */
.hero{position:relative;z-index:1;isolation:isolate;overflow:hidden;padding:clamp(72px,10vw,140px) 0;background:#140c0d;color:#fff}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:center 40%;max-width:none}
/* after roofingdept.co.nz: near-black on the left behind the copy, easing to a warm wash on the right */
.hero-overlay{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,8,8,.88) 0%,rgba(12,8,8,.72) 34%,rgba(20,12,10,.42) 64%,rgba(40,24,16,.30) 100%),
    linear-gradient(0deg,rgba(12,8,8,.45),rgba(12,8,8,0) 40%)}

.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;min-height:min(66vh,600px)}
.hero-copy{max-width:620px}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blurple);margin-bottom:18px;
}
.eyebrow::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--hot)}
.eyebrow-steel{color:#ffb27a}
.eyebrow-steel::before{background:linear-gradient(90deg,#ff9a5c,#d63a2e)}

.hero-h1{font-size:clamp(33px,5.4vw,58px);font-weight:800;letter-spacing:-.028em;color:#fff}
.hero .eyebrow{color:#ffb27a}
.hero-h1 .mask{display:block;overflow:hidden;padding-bottom:.04em}
.hero-h1 .mask-i{display:block}
.js .hero-h1 .mask-i{transform:translateY(115%);opacity:0}
.hero-h1 .mask-i.accent{background:linear-gradient(90deg,#d63a2e,#ff9a5c);-webkit-background-clip:text;background-clip:text;color:transparent}
body.is-loaded .hero-h1 .mask-i{transform:translateY(0);opacity:1;transition:transform .7s var(--ease),opacity .7s var(--ease)}
body.is-loaded .hero-h1 .mask:nth-child(2) .mask-i{transition-delay:.07s}
body.is-loaded .hero-h1 .mask:nth-child(3) .mask-i{transition-delay:.14s}
body.is-loaded .hero-h1 .mask:nth-child(4) .mask-i{transition-delay:.21s}

.hero-sub{margin:20px 0 28px;color:rgba(255,255,255,.86);font-size:clamp(15px,1.8vw,18px);max-width:48ch}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);border-radius:6px;box-shadow:none}
.btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-call{font-size:15px;color:rgba(255,255,255,.9)}
.hero-call a{color:#ffb27a;font-weight:600}
.hero-call a:hover{text-decoration:underline}
.hero .google-badge{background:rgba(255,255,255,.95)}
/* hero form sits straight on the photo — no card */
.lead-form.onphoto{padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.lead-form.onphoto .form-head h2{color:#fff;font-size:24px}
.lead-form.onphoto .form-head p{color:rgba(255,255,255,.78)}
.lead-form.onphoto .field label{color:rgba(255,255,255,.88)}
.lead-form.onphoto .field label span{color:#ffb27a}
.lead-form.onphoto .field input,.lead-form.onphoto .field select{border-color:rgba(255,255,255,.6);border-radius:10px;padding:14px;background-color:rgba(255,255,255,.96)}
.lead-form.onphoto .form-fine{color:rgba(255,255,255,.7)}
.lead-form.onphoto .form-success h3{color:#fff}
.lead-form.onphoto .form-success p{color:rgba(255,255,255,.82)}
.lead-form.onphoto .form-success .ok-phone{color:#fff}

.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ink);
  padding:8px 15px;background:#fff;border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--sh-1);
}

/* Hero form layer + parallax */
.hero-form-layer{perspective:1200px}

/* ---------- Lead form ---------- */
.lead-form{position:relative;padding:28px;border-radius:var(--r-xl);will-change:transform}
.lead-form.glass,.lead-form.solid{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3)}
.form-head h2,.form-head h3{font-size:20px;color:var(--ink)}
.form-head p{color:var(--text-dim);font-size:13px;margin-top:4px}
.form-body{margin-top:18px;display:flex;flex-direction:column;gap:13px}
.field{display:flex;flex-direction:column;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{font-size:12px;font-weight:600;color:var(--text-dim);letter-spacing:.01em}
.field label span{color:var(--blurple)}
.field input,.field select{
  width:100%;padding:12px 13px;font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23867a7b' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field input:focus,.field select:focus{outline:none;border-color:var(--blurple);box-shadow:0 0 0 3px rgba(214,58,46,.18)}
.field select.err,.field input.err,.field input:user-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(214,58,46,.16)}
.form-error{color:#b0231a;font-size:12.5px;background:#fdeee9;border:1px solid #f3ccc2;padding:8px 11px;border-radius:6px}
.form-fine{font-size:11px;color:var(--text-dimmer);text-align:center;margin-top:2px}

.form-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 6px 8px}
.form-success .tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--blurple);color:#fff;box-shadow:var(--sh-blurple)}
.form-success .tick svg{width:28px;height:28px}
.form-success h3{font-size:19px;color:var(--ink)}
.form-success p{color:var(--text-dim);font-size:14px}
.form-success .ok-phone{color:var(--ink)}

/* ---------- Trust strip ---------- */
.trust-strip{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.marquee{overflow:hidden;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:22px;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite;font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}
.marquee-track .dot{color:var(--blurple)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Fixed architectural roof-plan backdrop ---------- */
/* One roof framing plan, pinned to the viewport: it stays put while the page
   scrolls over it, showing through the transparent content sections. */
.plans-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../images/roof-plan.svg") center center / clamp(1100px,130vw,2200px) auto no-repeat;
  opacity:.072;           /* 40% more transparent than the original .12 */
}

/* keep all page content above the fixed backdrop */
main{position:relative;z-index:1}

/* ---------- Sections ---------- */
.section{position:relative;z-index:1;padding:var(--pad) 0;background:transparent}
.section.alt{background:rgba(251,244,242,.72)}
.section.steel{background:var(--navy)}
.section.steel .section-head h2{color:#fff}
.section.steel .section-lead{color:#c9b3b1}
.section.steel .muted{color:#a58c8a}
.angle-top{margin-top:calc(var(--angle) * -1)}
.angle-top:not(.angle-bottom){clip-path:polygon(0 var(--angle),100% 0,100% 100%,0 100%);padding-top:calc(var(--pad) + var(--angle))}
.angle-bottom:not(.angle-top){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--angle)),0 100%);padding-bottom:calc(var(--pad) + var(--angle))}
.angle-top.angle-bottom{clip-path:polygon(0 var(--angle),100% 0,100% calc(100% - var(--angle)),0 100%);padding-top:calc(var(--pad) + var(--angle));padding-bottom:calc(var(--pad) + var(--angle))}

.section-head{max-width:660px;margin:0 auto clamp(38px,6vw,64px);text-align:center}
.section-head h2{font-size:clamp(27px,4.2vw,44px);letter-spacing:-.025em}
.section-lead{margin-top:14px;color:var(--text-dim);font-size:16.5px}

/* ---------- Why choose us (single-column slide-show) ---------- */
#why{overflow:hidden}
.why-grid{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto}
.facet-card{
  position:relative;padding:26px 28px 28px;
  display:flex;flex-direction:column;

  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transform-style:preserve-3d;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.facet-card:hover,.facet-card:focus-within{box-shadow:0 22px 48px -16px rgba(214,58,46,.28),var(--sh-1);border-color:rgba(214,58,46,.34);transform:translateY(-4px)}
.card-ico{display:grid;place-items:center;width:50px;height:50px;margin-bottom:16px;color:var(--blurple);background:var(--blurple-soft);border-radius:12px;transition:transform .3s var(--ease)}
.card-ico svg{width:25px;height:25px}
.facet-card:hover .card-ico{transform:translateZ(34px)}
.facet-card h3{font-size:18px;margin-bottom:8px;letter-spacing:-.015em}
.facet-card p{color:var(--text);font-size:14.5px}

/* ---------- Materials (light section — same white as the quote forms) ---------- */
.section.light{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mat-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.mat-ranges{display:flex;flex-direction:column;gap:14px}
.range{padding:18px 20px;background:var(--bg-alt);border:1px solid var(--line);border-left:3px solid var(--blurple);border-radius:10px}
.range h3{font-size:16px;color:var(--ink);letter-spacing:.01em}
.range p{margin-top:5px;color:var(--text);font-size:14px}

.mat-preview{perspective:1100px}
.panel-stage{position:relative;padding:22px 6px 0}

.panel-sheen{position:absolute;top:-60%;left:-30%;width:55%;height:240%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);opacity:0;pointer-events:none;z-index:2}
.sheet.sweep .panel-sheen{animation:sheen 1s var(--ease) 1}
@keyframes sheen{0%{left:-40%;opacity:0}20%{opacity:.75}100%{left:130%;opacity:0}}
/* Real ribbed long-run sheet, recoloured live: flat swatch colour clipped to the sheet outline,
   then the photo's greyscale shading (centred on 50% grey) hard-light blended on top. */
/* the source photo crops the sheet at its top and right edges, so those edges fade out */
.sheet{
  --swatch:#3c4247;
  -webkit-mask:linear-gradient(to left,transparent 0,#000 16%),linear-gradient(to bottom,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;
          mask:linear-gradient(to left,transparent 0,#000 16%),linear-gradient(to bottom,transparent 0,#000 12%);
          mask-composite:intersect;
  position:relative;z-index:1;aspect-ratio:1481/878;isolation:isolate;
  width:116%;margin-left:-6%;          /* a little zoomed in */
  transform-style:preserve-3d;
  transition:transform .35s var(--ease);
  filter:drop-shadow(0 14px 14px rgba(30,20,20,.22));
}
.sheet-color{
  position:absolute;inset:0;background:var(--swatch);
  -webkit-mask:url("../images/roof-sheet-mask.png") center/100% 100% no-repeat;
          mask:url("../images/roof-sheet-mask.png") center/100% 100% no-repeat;
  transition:background-color .45s var(--ease);
}
.sheet-shade{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:hard-light;pointer-events:none}
.sheet .panel-sheen{
  -webkit-mask:url("../images/roof-sheet-mask.png") center/100% 100% no-repeat;
          mask:url("../images/roof-sheet-mask.png") center/100% 100% no-repeat;
  top:0;left:0;width:100%;height:100%;transform:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%) -100% 0/200% 100% no-repeat;
}
.sheet.sweep .panel-sheen{animation:sheetSheen 1s var(--ease) 1}
@keyframes sheetSheen{0%{opacity:0;background-position:-100% 0}25%{opacity:1}100%{opacity:0;background-position:200% 0}}
.panel-label{position:relative;z-index:2;padding:14px 18px 0;text-align:center}
.panel-label span{font-weight:700;font-size:15px;color:var(--ink);display:block}
.panel-label small{color:var(--text-dim);font-size:11.5px;letter-spacing:.03em}

.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.swatch{width:40px;height:40px;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2);border-radius:9px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.swatch:hover{transform:translateY(-3px)}
.swatch.is-active{border-color:#fff;transform:translateY(-3px) scale(1.06);box-shadow:0 0 0 3px var(--blurple)}

/* ---------- Project slideshow — full-bleed, top of page ---------- */
.slides-band{
  position:relative;z-index:1;overflow:hidden;background:#0b0b0d;color:#fff;
  min-height:480px;height:calc(100vh - 66px);height:calc(100dvh - 66px);
  touch-action:pan-y;
}
@media (max-width:640px){ .slides-band{min-height:440px;height:min(78dvh,640px)} }
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;margin:0;overflow:hidden;visibility:hidden;z-index:1}
.slide.is-active{visibility:visible;z-index:2}
.slide-media{position:absolute;inset:0;will-change:transform}
.slide-media img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%}
/* no-GSAP fallback: simple crossfade */
html:not(.gs) .slide{visibility:visible;opacity:0;transition:opacity .6s var(--ease)}
html:not(.gs) .slide.is-active{opacity:1}
/* legibility scrims (top for heading, bottom for controls) */
.slides-band::before,.slides-band::after{content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none}
.slides-band::before{top:0;height:42%;background:linear-gradient(180deg,rgba(8,6,8,.62),rgba(8,6,8,0))}
.slides-band::after{bottom:0;height:46%;background:linear-gradient(0deg,rgba(8,6,8,.72),rgba(8,6,8,0))}
.slides-head{
  position:absolute;z-index:4;pointer-events:none;
  left:clamp(18px,5vw,64px);right:clamp(18px,5vw,64px);top:clamp(20px,4.5vw,48px);
}
.slides-head .eyebrow{color:#fff;opacity:.92}
.slides-head h2{color:#fff;font-weight:300;font-size:clamp(28px,5vw,64px);letter-spacing:-.03em;line-height:1.05;max-width:14ch;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.slides-ui{
  position:absolute;z-index:4;left:clamp(18px,5vw,64px);right:clamp(18px,5vw,64px);bottom:clamp(18px,4vw,40px);
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px 24px;
}
.slides-meta{display:flex;align-items:flex-end;gap:clamp(14px,2.4vw,28px);min-width:0}
.slides-count{font-weight:200;font-size:clamp(34px,4.6vw,64px);line-height:.9;letter-spacing:-.04em;color:rgba(255,255,255,.55);white-space:nowrap}
.slides-count b{font-weight:200;color:#fff}
.slides-cap{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden;padding-bottom:4px}
.slides-cap strong{font-weight:600;font-size:clamp(15px,1.6vw,19px);letter-spacing:-.01em;display:block}
.slides-cap small{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);display:block}
.slides-ctrl{display:flex;gap:10px}
.slides-btn{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;
  border:1px solid rgba(255,255,255,.28);background:rgba(10,8,10,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.slides-btn:hover{background:var(--blurple);border-color:var(--blurple);transform:translateY(-2px)}
.slides-btn svg{width:20px;height:20px}
.slides-btn .i-play{display:none}
.slides-btn[aria-pressed="true"] .i-play{display:block}
.slides-btn[aria-pressed="true"] .i-pause{display:none}
.slides-bars{grid-column:1/-1;display:flex;gap:6px}
.slides-bar{flex:1;height:22px;position:relative;padding:0}
.slides-bar::before,.slides-bar i{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.slides-bar::before{background:rgba(255,255,255,.26)}
.slides-bar i{background:#fff;transform:scaleX(0);transform-origin:left center}
.slides-bar.is-done i{transform:scaleX(1)}
.slides-bar.is-active i{animation:slideFill var(--slide-dur,4s) linear forwards}
.slides-band.is-paused .slides-bar.is-active i{animation-play-state:paused}
@keyframes slideFill{to{transform:scaleX(1)}}
@media (max-width:640px){
  .slides-ui{grid-template-columns:1fr}
  .slides-ctrl{position:absolute;right:0;top:-62px}
  .slides-btn{width:42px;height:42px}
}

/* ---------- How it works — process (modelled on Forge "A considered process") ---------- */
.process{
  position:relative;z-index:2;overflow:clip;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vw,120px);
  min-height:120vh;min-height:120dvh;
  margin-top:calc(var(--angle) * -1);
  padding-top:calc(clamp(72px,9vw,128px) + var(--angle));
  background:#120a0b;color:#fff;
}
.process-bg{position:absolute;inset:0;z-index:-1;overflow:clip;filter:brightness(.5)}
.process-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,10,11,.55),rgba(18,10,11,.15) 40%,rgba(18,10,11,.35))}
.process-bg-parallax{position:absolute;top:-20%;left:0;right:0;height:140%;transform:translateZ(0)}
.process-bg-parallax img{width:100%;height:100%;object-fit:cover;display:block}
.process-top,.process-bottom{padding:0 clamp(18px,5vw,72px)}
.process-top{max-width:1200px}
.process-top h2{font-weight:200;font-size:clamp(36px,6.2vw,88px);line-height:1.08;letter-spacing:-.04em;color:#fff;text-wrap:balance;max-width:13ch}
.process-bottom{padding-bottom:clamp(40px,6vw,88px);background:linear-gradient(to top,rgba(18,10,11,.6),transparent)}
.process-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.process-step{
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  aspect-ratio:5/6;min-width:0;padding:clamp(18px,1.8vw,28px);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
}
.process-step em{
  display:block;font-style:normal;font-weight:200;color:#fff;
  font-size:clamp(64px,8.4vw,140px);line-height:1;letter-spacing:-.06em;margin-left:-.06em;
}
.process-step hgroup{display:flex;flex-direction:column;gap:8px}
.process-step h3{font-weight:300;font-size:clamp(19px,1.7vw,24px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.process-step p{font-size:clamp(13px,1vw,14.5px);line-height:1.35;color:rgba(255,255,255,.8);text-wrap:balance}
@media (max-width:1100px){
  .process{min-height:0}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-step{aspect-ratio:auto;min-height:230px}
  .process-step:last-child{grid-column:1/-1;min-height:200px}
}
@media (max-width:560px){
  .process-bg{filter:brightness(.42)}
  .process-steps{grid-template-columns:1fr}
  .process-step{min-height:0;flex-direction:row;align-items:flex-start;gap:18px}
  .process-step em{font-size:64px;flex-shrink:0;width:1.35em}
  .process-step hgroup{padding-top:8px}
}

/* ---------- Recent Work — horizontal project swipe ---------- */
/* Base = a swipeable snap carousel (works with no JS, on mobile, and under reduced-motion) */
.hswipe{position:relative}
.hswipe-sticky{
  position:static;display:flex;gap:0;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hswipe-sticky::-webkit-scrollbar{display:none}
.hswipe-track{display:flex}
.hs-panel{
  flex:0 0 88vw;max-width:640px;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:20px;
  padding:26px 5vw 40px;
}
.hs-media{
  position:relative;aspect-ratio:16/11;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-3);
}
.hs-media img{width:100%;height:100%;object-fit:cover;display:block}
.hs-tag{
  position:absolute;top:16px;left:16px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 13px;background:var(--blurple);color:#fff;border-radius:999px;box-shadow:var(--sh-1);
}
.hs-num{font-weight:800;font-size:14px;letter-spacing:.12em;color:var(--blurple)}
.hs-num i{font-style:normal;color:var(--text-dimmer)}
.hs-info h3{font-size:clamp(22px,3.4vw,38px);letter-spacing:-.025em;margin:10px 0 6px}
.hs-loc{color:var(--text-dim);font-weight:600;font-size:15px;margin-bottom:18px}
.hs-info dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14px;max-width:360px}
.hs-info dt{color:var(--text-dim);font-weight:600}
.hs-info dd{margin:0;color:var(--text)}
.hswipe-foot{display:flex;align-items:center;gap:18px;margin:4px 5vw 0;padding-top:6px}
.hswipe-progress{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.hswipe-progress span{display:block;height:100%;width:8%;background:linear-gradient(90deg,#d63a2e,#ff9a5c);border-radius:2px;transition:width .15s linear}
.hswipe-hint{flex-shrink:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dimmer)}

/* Enhanced = scroll-jacked pinned strip on comfortable desktop widths (JS toggles nothing;
   this only applies while JS has NOT forced the static fallback) */
@media (min-width:1024px){
  .js .hswipe:not(.hswipe-static){height:calc(100vh + (var(--slides,8) - 1) * 60vh)}
  .js .hswipe:not(.hswipe-static) .hswipe-sticky{
    position:sticky;top:0;height:100vh;overflow:hidden;
    flex-direction:column;justify-content:center;scroll-snap-type:none;
  }
  .js .hswipe:not(.hswipe-static) .hswipe-track{will-change:transform}
  .js .hswipe:not(.hswipe-static) .hs-panel{
    flex:0 0 100vw;max-width:none;
    display:grid;grid-template-columns:1.12fr .88fr;align-items:center;
    gap:clamp(28px,5vw,72px);padding:0 clamp(28px,7vw,110px);scroll-snap-align:none;
  }
  .js .hswipe:not(.hswipe-static) .hs-media{aspect-ratio:4/3}
  .js .hswipe:not(.hswipe-static) .hswipe-foot{
    position:absolute;left:clamp(28px,7vw,110px);right:clamp(28px,7vw,110px);
    bottom:clamp(26px,5vh,52px);margin:0;
  }
  .js .hswipe:not(.hswipe-static) .hswipe-progress span{width:0;transition:none}
}

/* ---------- Partners — fixed logo grid ---------- */
.partner-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1120px;margin:0 auto}
.partner-card{flex:0 0 calc((100% - 4 * 18px) / 5);height:clamp(118px,10vw,140px)}
.partner-inner{
  position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.partner-logo{display:block;width:auto;height:auto;max-width:82%;max-height:calc(100% - 8px);object-fit:contain}
.partner-logo-wide{max-width:88%;max-height:46%}
.partner-logo-tall{max-height:100%}
.partner-card-dark .partner-inner{background:#000;border-color:#000}   /* Marley's lockup is designed for black */
.partner-card-dark .partner-logo{max-height:52%}
.partner-tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffe100}
@media (max-width:960px){ .partner-card{flex-basis:calc((100% - 2 * 18px) / 3)} }
@media (max-width:560px){ .partner-grid{gap:12px} .partner-card{flex-basis:calc((100% - 12px) / 2);height:112px} }

/* ---------- Testimonials — drifting loop ---------- */
.testimonials{overflow:hidden}
.loop{position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.loop-row{display:flex;overflow:hidden;padding:14px 0 26px}
.loop-track{display:flex;flex-shrink:0;gap:22px;padding-right:22px;will-change:transform}
html:not(.gs) .loop-track{animation:pmScroll 60s linear infinite}
html:not(.gs) .loop-row:hover .loop-track{animation-play-state:paused}
@keyframes pmScroll{to{transform:translateX(-100%)}}
.review{flex:0 0 clamp(290px,30vw,400px)}
.review figure{
  margin:0;height:100%;display:flex;flex-direction:column;gap:16px;padding:28px 28px 24px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);
  transition:transform .45s var(--easing-bezzy2,var(--ease)),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.review:hover figure{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(214,58,46,.38),var(--sh-1);border-color:rgba(214,58,46,.25)}
.review-stars{color:#fbb400;letter-spacing:2px;font-size:15px}
.review blockquote{margin:0;flex:1;font-size:16px;line-height:1.55;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.review figcaption{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.review-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--hot);color:#fff;font-weight:700}
.review figcaption strong{display:block;font-size:14px;color:var(--ink)}
.review figcaption small{display:block;font-size:12.5px;color:var(--text-dim)}
.sample-note{margin-top:6px;text-align:center;font-size:12px;color:var(--text-dimmer)}

/* ---------- Services we offer ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.svc-card{grid-column:span 3;position:relative;overflow:hidden;border-radius:var(--r-xl);aspect-ratio:4/5;background:#1a0f10;color:#fff;isolation:isolate;box-shadow:var(--sh-2)}
.svc-card:nth-child(n+5){grid-column:span 4;aspect-ratio:4/3.4}
.svc-media{position:absolute;inset:0;z-index:-1}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--easing-bezzy2,var(--ease))}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,8,9,.05) 30%,rgba(14,8,9,.86) 100%);transition:background .5s var(--ease)}
.svc-card:hover .svc-media img{transform:scale(1.07)}
.svc-card:hover .svc-media::after{background:linear-gradient(180deg,rgba(14,8,9,.15) 10%,rgba(60,14,12,.9) 100%)}
.svc-body{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 24px}
.svc-num{font-weight:200;font-size:44px;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.55);display:block;margin-bottom:8px}
.svc-card h3{color:#fff;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.015em}
.svc-card p{margin-top:6px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.8);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease)}
.svc-card:hover p,.svc-card:focus-within p{max-height:80px;opacity:1}
.svc-arrow{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;
  transition:background .35s var(--ease),transform .45s var(--easing-bezzy2,var(--ease))}
.svc-arrow svg{width:18px;height:18px}
.svc-card:hover .svc-arrow{background:var(--blurple);transform:rotate(45deg)}
@media (hover:none){ .svc-card p{max-height:none;opacity:1} }
@media (max-width:960px){ .svc-card,.svc-card:nth-child(n+5){grid-column:span 6;aspect-ratio:4/3.2} }
@media (max-width:560px){ .svc-card,.svc-card:nth-child(n+5){grid-column:1/-1;aspect-ratio:4/3} }

/* ---------- Service areas ---------- */
.areas-layout{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.areas-title{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px}
.zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zone{display:flex;gap:14px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform .4s var(--easing-bezzy2,var(--ease)),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.zone:last-child{grid-column:1/-1}
.zone:hover{transform:translateY(-4px);border-color:rgba(214,58,46,.3);box-shadow:0 20px 40px -20px rgba(214,58,46,.35),var(--sh-1)}
.zone-pin{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blurple-soft);color:var(--blurple)}
.zone-pin svg{width:21px;height:21px}
.zone h4{margin:0;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.zone p{margin-top:4px;font-size:13.5px;color:var(--text-dim);line-height:1.5}
.route-cap{font-size:12px;color:var(--text-dimmer);margin:-10px 0 14px}
.route{position:relative;padding-left:34px}
.route::before,.route::after{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:2px;border-radius:2px}
.route::before{background:var(--line-2)}
.route::after{background:linear-gradient(180deg,#d63a2e,#ff9a5c);transform-origin:top;transform:scaleY(var(--route,1))}
.stop{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:12px 0}
.stop-dot{position:absolute;left:-30px;top:17px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blurple);z-index:1}
.stop strong{font-size:19px;color:var(--ink);letter-spacing:-.015em}
.stop small{font-size:12.5px;color:var(--text-dim);letter-spacing:.02em}
.stop.is-home strong{color:var(--blurple)}
.stop.is-home .stop-dot{width:22px;height:22px;left:-34px;top:13px;background:var(--blurple);border-color:#fff;box-shadow:0 0 0 4px rgba(214,58,46,.22)}
.stop.is-home .stop-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(214,58,46,.45);animation:homePulse 2.4s ease-out infinite}
@keyframes homePulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
@media (max-width:960px){ .areas-layout{grid-template-columns:1fr} }
@media (max-width:560px){ .zone-grid{grid-template-columns:1fr} }

/* ---------- Health & Safety ---------- */
.safety-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,56px);align-items:start}
.safety-list{display:grid;gap:20px}
.safety-list li{display:flex;gap:15px}
.safety-tick{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--blurple-soft);color:var(--blurple)}
.safety-tick svg{width:18px;height:18px}
.safety-list h3{font-size:16px;margin-bottom:3px;letter-spacing:-.01em}
.safety-list p{color:var(--text);font-size:14px}
.safety-card{
  position:relative;padding:30px 28px;border-radius:var(--r-xl);
  background:linear-gradient(165deg,#361a1d,#2a1416);color:#fff;
  box-shadow:var(--sh-2);transform-style:preserve-3d;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.safety-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 60% at 85% 0%,rgba(214,58,46,.42),transparent 60%)}
.safety-shield{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:linear-gradient(150deg,#d63a2e,#ff9a5c);color:#fff;margin-bottom:16px;box-shadow:var(--sh-blurple)}
.safety-shield svg{width:30px;height:30px}
.safety-card h3{position:relative;font-size:19px;color:#fff}
.safety-card>p{position:relative;margin-top:8px;color:#d6c1bf;font-size:14px}
.safety-badges{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.safety-badges li{font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#f2e7e5}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden}
.faq-q{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;text-align:left;font-weight:600;font-size:15.5px;color:var(--ink)}
.faq-q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blurple);transition:width .3s var(--ease)}
.faq-item.open .faq-q::before{width:4px}
.faq-ico{position:relative;flex-shrink:0;width:16px;height:16px}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--blurple);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.faq-ico::before{top:7px;left:0;width:16px;height:2px;border-radius:2px}
.faq-ico::after{left:7px;top:0;width:2px;height:16px;border-radius:2px}
.faq-item.open .faq-ico::after{transform:rotate(90deg);opacity:0}
.faq-a{overflow:hidden;transition:max-height .4s var(--ease)}
.js .faq-a{max-height:0}
.js .faq-item.open .faq-a{max-height:280px}
.faq-a p{padding:0 22px 20px;color:var(--text);font-size:14.5px}

/* ---------- Final CTA (dark section) ---------- */
.final-cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:calc(var(--pad) + var(--angle)) 0 var(--pad)}
.final-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 70% at 88% 0%,rgba(214,58,46,.45),transparent 60%),
    radial-gradient(38% 65% at 8% 100%,rgba(255,150,100,.30),transparent 60%);
}
.final-cta-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center}
.final-cta-copy h2{font-size:clamp(29px,4.4vw,46px);color:#fff;letter-spacing:-.025em}
.final-cta-copy p{margin-top:14px;font-size:16.5px;color:#d6c1bf;max-width:46ch}
.fcta-points{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 26px;font-weight:600;font-size:13.5px;color:#f2e7e5}
.fcta-points li{display:flex;align-items:center;gap:8px}
.fcta-points li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--cyan);transform:rotate(45deg)}
.fcta-addr{margin-top:16px;font-size:13px;color:#c9b3b1;letter-spacing:.01em}
.final-cta .lead-form.solid{background:#fff;color:var(--text)}
.final-cta .btn-dark{background:#fff;color:var(--navy)}
.final-cta .btn-dark:hover{background:var(--bg-alt)}
.mobile-jump{display:none}

/* ---------- Footer ---------- */
.lp-footer{position:relative;z-index:1;background:#fff;color:var(--text-dim);padding:52px 0 96px;text-align:center;border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-brand{display:inline-flex;margin-bottom:6px}
.footer-brand img{height:72px;width:auto;display:block}
.footer-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;color:var(--ink);font-size:14px;font-weight:500}
.footer-contact a:hover{color:var(--blurple)}
.footer-legal{color:var(--text-dim);font-size:12.5px;max-width:60ch}
.footer-copy{color:var(--text-dimmer);font-size:12.5px}
.to-top{margin-top:10px;padding:10px 22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:640px){ .footer-brand img{height:52px} }

/* ---------- Sticky mobile bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,252,251,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -6px 20px -10px rgba(70,30,26,.2)}
.mobile-bar .btn{flex:1;padding:14px 12px}

/* ---------- Scroll reveal (only hidden when JS is present) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Sequential "slide-show" reveal (why / how / gallery) ---------- */
.js .seq > .seq-item{
  opacity:0;transform:translateY(44px) scale(.965);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  will-change:opacity,transform;
}
.js .seq > .seq-item.seq-in{opacity:1;transform:none}
/* alternating slide-in for the single-column "Why" section */
.js .seq.seq-alt > .seq-item:nth-child(odd){transform:translateX(-64px) scale(.97)}
.js .seq.seq-alt > .seq-item:nth-child(even){transform:translateX(64px) scale(.97)}
.js .seq.seq-alt > .seq-item.seq-in{transform:none}

/* ---------- Google rating badge (hero) ---------- */
.google-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:13.5px;color:var(--text-dim);
}
.google-badge .g-logo{flex-shrink:0;display:block}
.google-badge .g-stars{color:#fbb400;letter-spacing:1px;font-size:14px;line-height:1}
.google-badge .g-text strong{color:var(--ink);font-weight:800;margin-right:2px}

/* =========================================================
   MOTION — ported from forgeautomotive.co.uk (GSAP + SplitText + Lenis)
   ========================================================= */
:root{
  --easing-bezzy:cubic-bezier(.8,0,0,1);
  --easing-bezzy2:cubic-bezier(.43,.195,.02,1);
}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* Split headings stay hidden until SplitText has measured them (Forge: visibility:hidden) */
.motion .split-fill,.motion .section-head h2,.motion .grow-words{visibility:hidden}
.sf-line{font-kerning:none;white-space:nowrap}

/* Image blur-up while loading (Forge LQIP: blur(24px) -> sharp) */
.gs img.lqip{filter:blur(24px);transition:filter .6s ease-in-out}
.gs img.lqip.is-loaded{filter:none}

/* Buttons — per-letter roll on hover: each letter carries a copy of itself 4em above
   (text-shadow); hovering drops the letters 4em so the copy rolls into place. */
.btn .roll{display:inline-block;position:relative;z-index:1;overflow:clip;line-height:1.25;white-space:nowrap;vertical-align:middle}
.btn .roll > span{display:inline-block;text-shadow:currentColor 0 -4em 0;transition:transform .5s var(--easing-bezzy2);transition-delay:calc(var(--ci,0) * .02s)}
.btn:hover .roll > span,.btn:focus-visible .roll > span{transform:translateY(4em)}
/* rotating conic shine around the border */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
.btn .shine{
  position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:conic-gradient(from var(--ga),transparent 15%,rgba(255,255,255,.95) 25%,transparent 35%,transparent 65%,rgba(255,255,255,.95) 75%,transparent 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  mix-blend-mode:screen;opacity:.85;animation:shineSpin 5s linear infinite;
}
.btn-ghost .shine{mix-blend-mode:normal;background:conic-gradient(from var(--ga),transparent 15%,rgba(214,58,46,.7) 25%,transparent 35%,transparent 65%,rgba(214,58,46,.7) 75%,transparent 85%)}
@keyframes shineSpin{to{--ga:360deg}}
.btn{position:relative}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{max-width:none}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .mat-layout{grid-template-columns:1fr}
  .final-cta-inner{grid-template-columns:1fr}
  .safety-layout{grid-template-columns:1fr}
}
@media (max-width:820px){
  .mobile-bar{display:flex}
  body{padding-bottom:76px}
  .desktop-only{display:none}
  .mobile-jump{display:inline-flex}
}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .why-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .hero-h1{font-size:clamp(30px,8.4vw,44px)}
  .flip-back{padding:14px}
  .flip-back h3{font-size:13.5px;margin-bottom:8px}
  .flip-back dl{font-size:11px;gap:3px 8px}
  .section-lead .muted{display:none}
}
@media (max-width:400px){ .gallery{grid-template-columns:1fr} }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-media::before{animation:none}
  .js .hero-h1 .mask-i,.hero-h1 .mask-i{transform:none!important;opacity:1!important}
  .marquee-track{animation:none;white-space:normal;flex-wrap:wrap;justify-content:center;width:auto}
  .js .reveal,.reveal{opacity:1!important;transform:none!important}
  .js .seq > .seq-item{opacity:1!important;transform:none!important}
  .loop{-webkit-mask-image:none;mask-image:none}
  .loop-row{overflow-x:auto}
  .loop-track{animation:none!important}
  .route::after{transform:none}
  .pulse{animation:none}
  .hero-video{display:none}
  .btn .shine{display:none}
}

/* ---------- Edits 2026-10-08 ---------- */
/* Why Master Roofing: cards 50% taller than the How It Works cards (5/6 -> 5/9) */
#why .process-step{aspect-ratio:5/9}
@media (max-width:1100px){
  #why .process-step{aspect-ratio:auto;min-height:345px}
  #why .process-step:last-child{min-height:300px}
}
@media (max-width:560px){ #why .process-step{min-height:150px} }

/* Testimonials: fixed grid, no drifting loop */
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;max-width:1040px;margin:0 auto;padding:14px 0 6px}
.review-grid .review{flex:none;display:flex}
.review-grid .review figure{width:100%}
@media (max-width:640px){ .review-grid{grid-template-columns:1fr;gap:16px} }

/* Services: use the full section width with slim side margins */
.services .wrap{max-width:none;padding:0 clamp(12px,1.6vw,24px)}
.services .svc-grid{gap:12px}

/* ---------- Edits 2026-10-09: wider sections, new order ---------- */
/* Wide sections use the side margins (same idea as Services), keeping a comfortable gutter */
.wrap-wide{max-width:1680px;padding:0 clamp(16px,3vw,56px)}
@media (min-width:961px){ .hero-grid{grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,96px)} }
.hero-copy{max-width:720px}
@media (min-width:961px){ .final-cta-inner{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,96px)} }

/* Partners: ten logos in two even rows of five */
.partner-grid{max-width:none;gap:16px}
.partner-card{flex-basis:calc((100% - 4 * 16px) / 5);height:clamp(120px,10vw,156px)}
@media (max-width:960px){ .partner-card{flex-basis:calc((100% - 2 * 16px) / 3)} }
@media (max-width:560px){ .partner-grid{gap:12px} .partner-card{flex-basis:calc((100% - 12px) / 2);height:112px} }

/* Materials: more room for the sheet */
@media (min-width:961px){ #materials .mat-layout{grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,96px)} }

/* Health & safety: checklist in two columns beside the compliance card */
@media (min-width:961px){ .safety-layout{grid-template-columns:1.6fr 1fr;gap:clamp(28px,4vw,72px)} }
.safety-list{grid-template-columns:1fr 1fr;gap:26px 36px}
@media (max-width:960px){ .safety-list{grid-template-columns:1fr} }

/* Service areas: three zones per row, short Orewa → Hamilton route */
@media (min-width:961px){ .areas-layout{grid-template-columns:2fr 1fr} }
.zone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.zone:last-child{grid-column:auto}
.route .stop{padding:18px 0}
@media (max-width:1100px){ .zone-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .zone-grid{grid-template-columns:1fr} }

/* FAQ: two columns so lines stay readable at full width */
#faq .faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;align-items:start}
@media (max-width:820px){ #faq .faq{grid-template-columns:1fr} }

/* Client reviews: Google badge + Google-coloured initials */
.reviews-badge{margin-top:22px}
.review-grid{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
#reviews .wrap{max-width:1680px;padding:0 clamp(16px,3vw,56px)}
@media (max-width:1100px){ .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .review-grid{grid-template-columns:1fr} }
.review-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review-stars{color:#FBBC05}
.review-g{flex-shrink:0}
.review-avatar.g-blue{background:#4285F4}
.review-avatar.g-red{background:#EA4335}
.review-avatar.g-yellow{background:#FBBC05}
.review-avatar.g-green{background:#34A853}

/* How it works: "Free roof report" tag */
.process-tag{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:10px 18px 10px 14px;border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:.02em;color:#fff;
  background:rgba(214,58,46,.9);box-shadow:0 12px 30px -10px rgba(214,58,46,.6)}
.process-tag svg{width:18px;height:18px}

/* ---------- Edits 2026-10-11 ---------- */
/* Roof sheet: high-resolution render (2731 x 1405) */
.sheet{aspect-ratio:2731/1405}

/* Services: eight cards, two even rows of four */
.svc-card:nth-child(n+5){grid-column:span 3;aspect-ratio:4/5}
@media (max-width:960px){ .svc-card,.svc-card:nth-child(n+5){grid-column:span 6;aspect-ratio:4/4.4} }
@media (max-width:560px){ .svc-card,.svc-card:nth-child(n+5){grid-column:1/-1;aspect-ratio:4/3.6} }

/* Why Master Roofing: line-only icon in the top-right of each card */
#why .process-step{position:relative}
.step-ico{position:absolute;top:clamp(18px,1.8vw,28px);right:clamp(18px,1.8vw,28px);
  width:clamp(42px,3.6vw,56px);height:clamp(42px,3.6vw,56px);color:rgba(255,255,255,.92)}
.step-ico svg{width:100%;height:100%;display:block}
@media (max-width:560px){ .step-ico{width:38px;height:38px} }

/* Final CTA: lead line + phone / email buttons */
.fcta-lead{margin-top:16px;font-size:clamp(16px,1.4vw,18.5px);line-height:1.55;color:#e6d6d4;max-width:46ch}
.fcta-contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fcta-contact .btn svg{flex-shrink:0}
.final-cta .fcta-contact .btn-outline{border-radius:999px}
@media (max-width:560px){ .fcta-contact .btn{width:100%} }

/* Why Master Roofing: icon centred under the number (overrides the top-right placement) */
#why .step-ico{position:static;align-self:center;margin:auto 0;width:clamp(56px,4.6vw,76px);height:clamp(56px,4.6vw,76px)}
@media (max-width:560px){
  #why .process-step{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start}
  #why .process-step em{grid-column:1;grid-row:1}
  #why .step-ico{grid-column:1;grid-row:2;justify-self:center;margin:8px 0 0;width:40px;height:40px}
  #why .process-step hgroup{grid-column:2;grid-row:1 / span 2}
}

/* ---------- Recently completed — project gallery (masonry) ---------- */
.gal-grid{columns:4 280px;column-gap:14px}
.gal-item{break-inside:avoid;margin-bottom:14px}
.gal-link{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:#1a0f10;box-shadow:var(--sh-1);isolation:isolate}
.gal-link img{width:100%;height:auto;display:block;transition:transform 1s var(--easing-bezzy2,var(--ease)),filter .6s var(--ease)}
.gal-link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,8,9,0) 45%,rgba(14,8,9,.78));opacity:0;transition:opacity .45s var(--ease)}
.gal-tag{position:absolute;top:14px;left:14px;z-index:2;padding:5px 12px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(14,8,9,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2)}
.gal-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#fff;font-weight:600;font-size:15px;letter-spacing:-.01em;transform:translateY(10px);opacity:0;transition:transform .45s var(--easing-bezzy2,var(--ease)),opacity .45s var(--ease)}
.gal-cap svg{width:18px;height:18px;flex-shrink:0}
.gal-link:hover img,.gal-link:focus-visible img{transform:scale(1.06)}
.gal-link:hover::after,.gal-link:focus-visible::after,.gal-link:hover .gal-cap,.gal-link:focus-visible .gal-cap{opacity:1}
.gal-link:hover .gal-cap,.gal-link:focus-visible .gal-cap{transform:none}
@media (hover:none){ .gal-link::after,.gal-cap{opacity:1;transform:none} .gal-cap{font-size:13.5px} }
@media (max-width:560px){ .gal-grid{columns:2 150px;column-gap:10px} .gal-item{margin-bottom:10px} .gal-tag{display:none} .gal-cap{left:10px;right:10px;bottom:9px;font-size:12px} .gal-cap svg{display:none} }

/* Lightbox */
.lb{position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:clamp(12px,3vw,40px);
  background:rgba(10,6,6,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--ease)}
.lb.is-open{opacity:1}
.lb[hidden]{display:none!important}
.lb-fig{margin:0;grid-column:2;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;height:100%;justify-content:center}
.lb-img{max-width:100%;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  transition:opacity .3s var(--ease),transform .45s var(--easing-bezzy2,var(--ease))}
.lb-img.is-swapping{opacity:0;transform:scale(.98)}
.lb-cap{display:flex;gap:16px;align-items:baseline;color:#fff;font-weight:600;font-size:15px}
.lb-count{color:rgba(255,255,255,.6);font-weight:500;font-size:13px;letter-spacing:.08em}
.lb-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.lb-btn:hover{background:var(--blurple);border-color:var(--blurple);transform:scale(1.06)}
.lb-btn svg{width:22px;height:22px}
.lb-close{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px)}
@media (max-width:640px){
  .lb{grid-template-columns:1fr;padding:60px 10px 90px}
  .lb-fig{grid-column:1}
  .lb-prev,.lb-next{position:absolute;bottom:20px;width:48px;height:48px}
  .lb-prev{left:calc(50% - 60px)} .lb-next{right:calc(50% - 60px)}
}

/* Final CTA on mobile: phone, email and quote buttons stacked full-width with even spacing */
@media (max-width:820px){
  .final-cta-copy{display:flex;flex-direction:column;align-items:stretch}
  .fcta-contact{flex-direction:column;gap:12px;margin-top:24px}
  .fcta-contact .btn,.final-cta-copy .mobile-jump{width:100%;min-height:56px;padding:14px 20px;font-size:16px;margin:0}
  .final-cta-copy .mobile-jump{margin-top:12px}
}
/* keep the smooth hover zoom when the blur-up loader class is present */
.gs .gal-link img.lqip,.gs .svc-media img.lqip{transition:transform 1s var(--easing-bezzy2,var(--ease)),filter .6s ease-in-out}

/* ---------- Gallery v2: strict, symmetrical grid (overrides the masonry above) ---------- */
/* Contained section: own white background, nothing from the next section overlaps it */
#gallery{position:relative;z-index:2;overflow:hidden}
#gallery + .angle-top{margin-top:0}
.gal-grid{columns:auto;column-gap:normal;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.gal-item{margin:0;break-inside:auto}
.gal-link{aspect-ratio:4/3;height:100%}
.gal-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:1100px){ .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .gal-link{border-radius:10px} }

/* ---------- Edits 2026-10-12 ---------- */
/* Services: six cards, an even 3 x 2 grid */
.svc-card,.svc-card:nth-child(n+5){grid-column:span 4;aspect-ratio:4/3.6}
@media (max-width:960px){ .svc-card,.svc-card:nth-child(n+5){grid-column:span 6;aspect-ratio:4/4} }
@media (max-width:560px){ .svc-card,.svc-card:nth-child(n+5){grid-column:1/-1;aspect-ratio:4/3.6} }

/* Forms: notes, uploads */
.field label small{font-weight:500;color:var(--text-dimmer)}
.field textarea{width:100%;padding:12px 13px;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);resize:vertical;min-height:84px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.field textarea:focus{outline:none;border-color:var(--blurple);box-shadow:0 0 0 3px rgba(214,58,46,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dimmer)}
.upload{position:relative;display:flex!important;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;
  border:1.5px dashed var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--text-dim)!important;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.upload:hover,.upload.is-over{border-color:var(--blurple);background:#fff7f5}
.upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload:focus-within{border-color:var(--blurple);box-shadow:0 0 0 3px rgba(214,58,46,.18)}
.upload svg{width:26px;height:26px;flex-shrink:0;color:var(--blurple)}
.upload-txt{display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:500;letter-spacing:0}
.upload-txt strong{color:var(--ink);font-weight:700}
.upload-txt small{font-size:12px;color:var(--text-dimmer)}
.upload-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.upload-list:empty{display:none}
.upload-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:var(--bg-alt);font-size:12.5px;color:var(--ink)}
.upload-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-list li small{color:var(--text-dim);flex-shrink:0}
.upload-list button{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--text-dim)}
.upload-list button:hover{background:var(--blurple);color:#fff}
.upload-list button svg{width:12px;height:12px}
/* hero form sits on the photo — keep the new fields legible there */
.lead-form.onphoto .field label small{color:rgba(255,255,255,.65)}
.lead-form.onphoto .field textarea{border-color:rgba(255,255,255,.6);border-radius:10px;background:rgba(255,255,255,.96)}
.lead-form.onphoto .upload{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.75);border-radius:10px}
.lead-form.onphoto .upload-list li{background:rgba(255,255,255,.92)}
/* upload box text: not the red asterisk colour, and readable on the hero photo */
.field label .upload-txt,.lead-form.onphoto .field label .upload-txt{color:var(--text-dim)}
.field label .upload-txt small,.lead-form.onphoto .field label .upload-txt small{color:var(--text-dimmer)}
.lead-form.onphoto .field label .upload-txt strong{color:var(--ink)}
.upload-list li span{flex:1;min-width:0}
.form-success .ok-files{font-size:13px;color:var(--text-dim)}
.form-success .ok-files a{color:var(--blurple);font-weight:600}
.lead-form.onphoto .form-success .ok-files{color:rgba(255,255,255,.85)}
.lead-form.onphoto .form-success .ok-files a{color:#ffb27a}
.lead-form button[type="submit"]:disabled{opacity:.7;cursor:progress}

/* Repairs page: 12 service cards (4 per row on desktop) + Procoat note */
/* 10 repair services: an even 5 x 2 grid on desktop */
.svc-grid:has(.svc-card:nth-child(10)){grid-template-columns:repeat(5,minmax(0,1fr))}
.svc-grid:has(.svc-card:nth-child(10)) .svc-card{grid-column:auto;aspect-ratio:4/5.2}
@media (max-width:1100px){ .svc-grid:has(.svc-card:nth-child(10)){grid-template-columns:repeat(2,minmax(0,1fr))} .svc-grid:has(.svc-card:nth-child(10)) .svc-card{aspect-ratio:4/4} }
@media (max-width:560px){ .svc-grid:has(.svc-card:nth-child(10)){grid-template-columns:1fr} .svc-grid:has(.svc-card:nth-child(10)) .svc-card{aspect-ratio:4/3.4} }
.range-note{margin-top:4px;font-size:13.5px;color:var(--text-dim);padding-left:4px}
/* 5-tile gallery: 3 on the first row, 2 centred on the second (6-column grid, each tile spans 2) */
.gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))){grid-template-columns:repeat(6,minmax(0,1fr))}
.gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))) .gal-item{grid-column:span 2}
.gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))) .gal-item:nth-child(4){grid-column:2 / span 2}
@media (max-width:560px){
  .gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))){grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))) .gal-item{grid-column:auto}
  .gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))) .gal-item:last-child{grid-column:1/-1}
  .gal-grid:has(.gal-item:nth-child(5)):not(:has(.gal-item:nth-child(6))) .gal-item:last-child .gal-link{aspect-ratio:16/9}
}

/* ---------- Services: 8 cards, 4 x 2 (2026-10-13) ---------- */
.svc-grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-grid-8 .svc-card,.svc-grid-8 .svc-card:nth-child(n+5){grid-column:auto;aspect-ratio:4/4.6}
@media (max-width:1100px){ .svc-grid-8{grid-template-columns:repeat(2,minmax(0,1fr))} .svc-grid-8 .svc-card,.svc-grid-8 .svc-card:nth-child(n+5){aspect-ratio:4/4} }
@media (max-width:560px){ .svc-grid-8{grid-template-columns:1fr} .svc-grid-8 .svc-card,.svc-grid-8 .svc-card:nth-child(n+5){aspect-ratio:4/3.4} }