/* ============================================================
   Flowsmart Electrical — design system
   Evolved from the extracted flowsmartelec.com.au DNA:
   volt green #86C049 kept as the single accent; flat #333 ink
   deepened to a green-cast near-black; Fira Sans/Roboto evolved
   to Space Grotesk / Inter; flat squares evolved to soft-radius
   cards with layered shadows. Fluid by construction: every
   gutter, gap, pad and type size is a clamp().
   ============================================================ */

:root{
  /* colour */
  --volt:       #86C049;   /* brand green — CTAs & key moments ONLY */
  --volt-deep:  #6FA53A;
  --spark:      #B7E36E;   /* gradient partner, highlights on dark */
  --ink:        #10160F;   /* hero, final CTA, footer */
  --ink-2:      #1B241A;   /* raised dark surface */
  --pine:       #2E3B2A;
  --body-c:     #3D463B;
  --mist:       #7C8676;
  --line:       #E3E8DE;
  --paper:      #FAFBF7;
  --card:       #FFFFFF;
  --wash:       #F1F4EC;
  --danger:     #C4452C;

  /* type */
  --f-head: "Space Grotesk", "Fira Sans", sans-serif;
  --f-body: "Inter", "Roboto", system-ui, sans-serif;

  /* fluid scale */
  --fs-hero:  clamp(2.6rem, 1.2rem + 5.4vw, 5.5rem);
  --fs-h2:    clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --fs-lede:  clamp(1.05rem, .95rem + .5vw, 1.3rem);
  --fs-body:  clamp(1rem, .95rem + .2vw, 1.125rem);

  /* rhythm */
  --sec-pad:  clamp(4.5rem, 3rem + 7vw, 10rem);   /* 72 → 160px */
  --gut:      clamp(1.25rem, .8rem + 2.5vw, 3rem);
  --gap:      clamp(1rem, .7rem + 1.5vw, 2rem);
  --r:        16px;
  --r-sm:     12px;

  /* shadow system: soft, layered, never harsh */
  --sh-1: 0 1px 2px rgba(16,22,15,.05), 0 8px 24px rgba(16,22,15,.06);
  --sh-2: 0 2px 4px rgba(16,22,15,.06), 0 12px 32px rgba(16,22,15,.10), 0 24px 64px rgba(16,22,15,.08);
  --glow: 0 0 0 0 rgba(134,192,73,.0);

  --maxw: 1280px;
  --head-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; font-family:var(--f-body); font-size:var(--fs-body); line-height:1.6;
  color:var(--body-c); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--f-head); color:var(--ink); line-height:1.12; margin:0 0 .5em; letter-spacing:-.015em; text-wrap:balance}
h1{font-size:var(--fs-hero); font-weight:700}
h2{font-size:var(--fs-h2); font-weight:700}
h3{font-size:var(--fs-h3); font-weight:600}
p{margin:0 0 1em}
a{color:var(--pine)}
a:focus-visible,button:focus-visible{outline:3px solid var(--volt); outline-offset:2px; border-radius:4px}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.wrap-narrow{max-width:780px; margin-inline:auto; padding-inline:var(--gut)}
.center{text-align:center; margin-top:clamp(2rem,4vw,3.5rem)}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; z-index:200; border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

.eyebrow{
  font-family:var(--f-head); font-size:clamp(.72rem,.68rem + .2vw,.85rem); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--volt-deep); margin:0 0 1rem;
}
.eyebrow-light{color:var(--spark)}
.lede{font-size:var(--fs-lede); color:var(--body-c); max-width:56ch}
.stars{color:var(--volt); letter-spacing:.12em; font-style:normal}

/* ---------------------------------------------------------- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-head); font-weight:600; font-size:1rem; line-height:1;
  padding:.95rem 1.7rem; border-radius:100px; border:0; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn-lg{padding:1.15rem 2.2rem; font-size:1.08rem}
.btn-volt{
  background:var(--volt); color:var(--ink);
  box-shadow:0 2px 6px rgba(134,192,73,.28), 0 0 0 0 rgba(134,192,73,0);
}
.btn-volt:hover,.btn-volt:focus-visible{
  transform:scale(1.02); filter:brightness(1.06);
  box-shadow:0 4px 14px rgba(134,192,73,.35), 0 0 0 10px rgba(134,192,73,.14);
}
.btn-ghost{background:transparent; color:inherit; border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--mist)}
.text-link{
  display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-head);
  font-weight:600; color:var(--pine); text-decoration:none;
  background-image:linear-gradient(var(--volt),var(--volt));
  background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%;
  transition:background-size .3s ease; padding-bottom:3px;
}
.text-link:hover{background-size:100% 2px}
.text-link svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.text-link:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------- wordmark ---- */
.wordmark{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none}
.wm-spark{width:clamp(20px,2vw,26px); height:auto; fill:var(--volt); flex:none}
.wm-text{font-family:var(--f-head); font-size:clamp(1.15rem,1rem + .6vw,1.45rem); letter-spacing:-.03em; line-height:1}
.wm-text b{font-weight:700; color:var(--ink)}
.wm-text i{font-style:normal; font-weight:700; color:var(--volt); margin-left:.28em}
.wm-rev .wm-text b{color:#fff}

/* ----------------------------------------------------------- header ---- */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--head-h);
  background:rgba(250,251,247,0); transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled{
  background:rgba(250,251,247,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(16,22,15,.06), 0 8px 24px rgba(16,22,15,.05);
}
.header-inner{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  height:100%; display:flex; align-items:center; gap:var(--gap)}
.main-nav{display:flex; gap:clamp(.9rem,.4rem + 1.4vw,2rem); margin-inline:auto}
.nav-link{
  font-family:var(--f-head); font-weight:500; font-size:.95rem; color:var(--ink);
  text-decoration:none; position:relative; padding:.4rem 0;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--volt); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav-link:hover::after{transform:scaleX(1)}
.header-actions{display:flex; align-items:center; gap:1rem}
.header-phone{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-head);
  font-weight:600; font-size:.92rem; color:var(--ink); text-decoration:none}
.header-phone svg{width:16px;height:16px;fill:var(--volt-deep)}
.btn-header{padding:.72rem 1.3rem; font-size:.92rem}
.nav-burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:10px; cursor:pointer}
.nav-burger span{width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-nav{
  position:fixed; inset:var(--head-h) 0 0 0; background:var(--paper); z-index:99;
  padding:clamp(1.5rem,5vw,3rem) var(--gut); overflow:auto;
}
.mobile-nav nav{display:flex; flex-direction:column; gap:1.1rem; max-width:420px; margin-inline:auto}
.mobile-nav .nav-link{font-size:1.35rem; padding:.55rem 0; border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:1rem}

/* ------------------------------------------------------------- hero ---- */
.hero{
  position:relative; overflow:hidden; background:var(--ink); color:#E7EDE3;
  padding:calc(var(--sec-pad)*1.05) 0 calc(var(--sec-pad)*.9);
  margin-top:calc(var(--head-h) * -1); padding-top:calc(var(--sec-pad) + var(--head-h));
}
.landing .site-header:not(.scrolled) .nav-link,
.landing .site-header:not(.scrolled) .header-phone{color:#E7EDE3}
.landing .site-header:not(.scrolled) .wm-text b{color:#fff}
.landing .site-header:not(.scrolled) .nav-burger span{background:#E7EDE3}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg::before{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(38% 46% at 72% 18%, rgba(134,192,73,.22), transparent 60%),
    radial-gradient(30% 40% at 12% 80%, rgba(183,227,110,.10), transparent 60%),
    radial-gradient(50% 60% at 50% 120%, rgba(46,59,42,.6), transparent 70%);
  animation:heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:translate3d(-2%, -1%, 0) scale(1)}
  to  {transform:translate3d(2.5%, 2%, 0) scale(1.06)}
}
.hero-grid{
  position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(231,237,227,.25) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(231,237,227,.25) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 30%, #000, transparent 75%);
  mask-image:radial-gradient(70% 70% at 60% 30%, #000, transparent 75%);
}
.hero-shape{position:absolute; border-radius:28% 72% 66% 34%/44% 36% 64% 56%; will-change:transform}
.hs-1{width:clamp(220px,26vw,420px); aspect-ratio:1; right:6%; top:12%;
  background:linear-gradient(135deg, rgba(134,192,73,.30), rgba(134,192,73,.04));
  animation:float1 11s ease-in-out infinite alternate}
.hs-2{width:clamp(90px,10vw,150px); aspect-ratio:1; right:30%; bottom:14%;
  background:linear-gradient(135deg, rgba(183,227,110,.35), rgba(183,227,110,.05));
  border-radius:60% 40% 35% 65%/55% 60% 40% 45%;
  animation:float2 9s ease-in-out infinite alternate}
.hs-3{width:clamp(50px,5vw,80px); aspect-ratio:1; left:3%; top:68%;
  border:2px solid rgba(134,192,73,.4); border-radius:50%;
  animation:float2 13s ease-in-out infinite alternate-reverse}
@keyframes float1{from{transform:translateY(-12px) rotate(-2deg)}to{transform:translateY(16px) rotate(3deg)}}
@keyframes float2{from{transform:translateY(10px)}to{transform:translateY(-14px)}}
.hero-inner{position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); max-width:min(var(--maxw), 100%);}
.hero-inner > *{max-width:820px}
.hero h1{color:#fff; margin-bottom:clamp(1rem,2vw,1.5rem)}
.hero h1 em{font-style:normal; color:var(--volt)}
.hero .eyebrow{color:var(--spark)}
.hero-sub{font-size:var(--fs-lede); color:#C9D3C3; max-width:54ch; margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.hero-cta{display:flex; align-items:center; gap:clamp(1rem,2vw,1.6rem); flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem)}
.hero-call{color:#C9D3C3; font-family:var(--f-head); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(201,211,195,.35); padding-bottom:2px}
.hero-call:hover{color:#fff; border-color:var(--volt)}
.proof-strip{display:flex; gap:clamp(1rem,2.5vw,2.2rem); flex-wrap:wrap; align-items:center;
  padding-top:clamp(1.2rem,2vw,1.8rem); border-top:1px solid rgba(231,237,227,.14)}
.proof{font-size:.92rem; color:#AEB9A8; display:inline-flex; gap:.5rem; align-items:center; font-weight:500}
[data-hero]{opacity:0; transform:translateY(26px)}
.no-motion [data-hero], .no-js [data-hero]{opacity:1; transform:none}

/* -------------------------------------------------------- reveal-ups ---- */
.rv{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.7,.3,1) var(--d,0ms), transform .7s cubic-bezier(.22,.7,.3,1) var(--d,0ms)}
.rv.in{opacity:1; transform:none}
.rv-clip{clip-path:inset(12% 10% 12% 10% round var(--r)); opacity:0; transition:clip-path .9s cubic-bezier(.22,.7,.3,1), opacity .6s ease}
.rv-clip.in{clip-path:inset(0 0 0 0 round var(--r)); opacity:1}
.no-js .rv,.no-js .rv-clip,.no-motion .rv,.no-motion .rv-clip{opacity:1; transform:none; clip-path:none}

/* ---------------------------------------------------------- problem ---- */
.problem{padding:var(--sec-pad) 0; background:var(--paper)}
.problem-line{
  font-family:var(--f-head); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.3rem, 1rem + 1.6vw, 2.1rem); line-height:1.35;
  color:var(--mist); margin-bottom:clamp(1.2rem,2vw,1.8rem); text-wrap:balance;
}
.problem-punch{color:var(--ink)}
.problem-punch em{font-style:normal; box-shadow:inset 0 -0.34em rgba(134,192,73,.35)}

/* ------------------------------------------------------------ shift ---- */
.shift{padding:var(--sec-pad) 0; background:var(--wash)}
.shift-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.shift-list{list-style:none; padding:0; margin:0 0 2rem}
.shift-list li{padding:.9rem 0 .9rem 2rem; position:relative; border-bottom:1px solid var(--line)}
.shift-list li::before{content:""; position:absolute; left:0; top:1.25rem; width:12px; height:12px;
  border-radius:3px; background:var(--volt); transform:rotate(45deg)}
.shift-list b{color:var(--ink)}
.shift-media{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap)}
.shift-img{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2)}
.shift-img img{width:100%; height:100%; object-fit:cover}
.si-1{grid-column:1/6; aspect-ratio:4/3}
.si-2{grid-column:4/7; margin-top:-22%; aspect-ratio:3/2; border:6px solid var(--wash)}
.si-3{grid-column:1/4; margin-top:-10%; aspect-ratio:3/2; border:6px solid var(--wash)}

/* -------------------------------------------------------------- how ---- */
.how{padding:var(--sec-pad) 0; background:var(--paper)}
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:clamp(2rem,4vw,3.5rem)}
.step-card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.4rem); padding-top:clamp(3.4rem,5vw,4.4rem);
  box-shadow:var(--sh-1); transition:transform .25s ease, box-shadow .25s ease; overflow:hidden;
}
.step-card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.step-num{
  position:absolute; top:-.18em; right:.05em; font-family:var(--f-head); font-weight:700;
  font-size:clamp(4.5rem, 3rem + 5vw, 7.5rem); line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(134,192,73,.45); user-select:none;
}
.step-ico{width:34px; height:34px; fill:none; stroke:var(--volt-deep); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:1rem;
  opacity:0; transform:scale(.5) rotate(-12deg); transition:opacity .5s ease .25s, transform .5s cubic-bezier(.34,1.56,.64,1) .25s}
.step-card.in .step-ico{opacity:1; transform:none}
.step-card .step-ico path{stroke-dasharray:80; stroke-dashoffset:80; transition:stroke-dashoffset 1s ease .35s}
.step-card.in .step-ico path{stroke-dashoffset:0}
.step-card h3{margin-bottom:.4rem}
.step-card p{margin:0; font-size:.98rem}
.no-js .step-ico,.no-motion .step-ico{opacity:1;transform:none}
.no-js .step-ico path,.no-motion .step-ico path{stroke-dashoffset:0}

/* ---------------------------------------------------------- reviews ---- */
.reviews{padding:var(--sec-pad) 0; background:var(--wash); overflow:hidden}
.pull-quote{max-width:900px; margin:clamp(2rem,4vw,3.5rem) auto; padding-inline:var(--gut); text-align:center}
.pull-quote blockquote{
  margin:0 0 1rem; font-family:var(--f-head); font-weight:500;
  font-size:clamp(1.35rem, 1rem + 1.9vw, 2.3rem); line-height:1.32; color:var(--ink); text-wrap:balance;
}
.pull-quote figcaption{color:var(--mist)}
.pull-quote b{color:var(--pine)}
.marquee{position:relative; margin-top:clamp(1.5rem,3vw,2.5rem);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.marquee-track{display:flex; gap:var(--gap); width:max-content; animation:marq 46s linear infinite; padding-block:1rem}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-card{
  width:clamp(280px, 30vw, 380px); flex:none; margin:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:.8rem;
}
.review-card blockquote{margin:0; font-size:.98rem; color:var(--body-c)}
.review-card figcaption b{display:block; color:var(--ink); font-family:var(--f-head)}
.review-card figcaption span{font-size:.85rem; color:var(--mist)}
.review-card .stars{font-size:.85rem}
.reviews-foot{text-align:center; color:var(--mist); margin-top:clamp(1.5rem,3vw,2.2rem); padding-inline:var(--gut)}

/* --------------------------------------------------------- services ---- */
.services{padding:var(--sec-pad) 0; background:var(--paper)}
.svc-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,5.5rem);
  align-items:center; margin-top:clamp(3rem,6vw,5.5rem);
}
.svc-flip .svc-media{order:2}
.svc-media{border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:4/3; position:relative}
.svc-media::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(134,192,73,.12), rgba(16,22,15,.16)); mix-blend-mode:multiply; pointer-events:none}
.svc-media img{width:100%; height:100%; object-fit:cover}
.svc-copy h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.ticks{list-style:none; padding:0; margin:1.2rem 0 1.4rem}
.ticks li{padding:.45rem 0 .45rem 1.9rem; position:relative}
.ticks li::before{
  content:""; position:absolute; left:0; top:.78em; width:14px; height:8px;
  border-left:2.5px solid var(--volt-deep); border-bottom:2.5px solid var(--volt-deep); transform:rotate(-45deg);
}

/* --------------------------------------------------------- benefits ---- */
.benefits{padding:var(--sec-pad) 0; background:var(--wash)}
.bene-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:clamp(2rem,4vw,3.5rem)}
.bene-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,2.5vw,2.2rem); box-shadow:var(--sh-1);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bene-card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.bene-card h3{font-size:1.18rem}
.bene-card p{margin:0; font-size:.96rem}
.bene-hero{
  grid-row:span 2; background:var(--ink); color:#C9D3C3; border-color:var(--ink);
  box-shadow:var(--sh-2), 0 0 60px rgba(134,192,73,.12);
  display:flex; flex-direction:column; gap:1rem; justify-content:center;
}
.bene-hero h3{color:#fff; font-size:1.5rem}
.bene-hero .btn{align-self:flex-start; margin-top:.5rem}

/* -------------------------------------------------------------- faq ---- */
.faq{padding:var(--sec-pad) 0; background:var(--paper)}
.faq-item{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card);
  margin-top:.9rem; box-shadow:var(--sh-1); overflow:hidden}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-head); font-weight:600; font-size:1.05rem; color:var(--ink);
  padding:1.15rem 1.4rem;
}
.faq-q .chev{width:20px; height:20px; flex:none; fill:none; stroke:var(--volt-deep); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .35s cubic-bezier(.22,.7,.3,1)}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,.7,.3,1)}
.faq-a p{padding:0 1.4rem 1.25rem; margin:0; color:var(--body-c)}
.no-js .faq-a{max-height:none}

/* -------------------------------------------------------- final CTA ---- */
.final-cta{
  position:relative; overflow:hidden; background:var(--ink); color:#C9D3C3;
  padding:var(--sec-pad) 0;
}
.final-cta::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(40% 55% at 30% 40%, rgba(134,192,73,.16), transparent 65%),
             radial-gradient(35% 45% at 80% 70%, rgba(183,227,110,.08), transparent 60%);
  animation:heroDrift 14s ease-in-out infinite alternate;
}
.glow-ring{
  position:absolute; width:min(58vw,680px); aspect-ratio:1; left:-12%; top:50%;
  transform:translateY(-50%); border-radius:50%;
  border:1.5px solid rgba(134,192,73,.35);
  box-shadow:0 0 90px rgba(134,192,73,.18), inset 0 0 90px rgba(134,192,73,.10);
  animation:pulse 3.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.5; transform:translateY(-50%) scale(.97)}50%{opacity:1; transform:translateY(-50%) scale(1.03)}}
.final-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center}
.final-copy h2{color:#fff; font-size:clamp(2.1rem,1.4rem + 2.8vw,3.6rem)}
.final-phone{
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem); color:#fff; text-decoration:none; margin:1rem 0 .4rem;
}
.final-phone svg{width:1em; height:1em; fill:var(--volt)}
.final-phone:hover{color:var(--spark)}
.final-fine{color:#8D9887; font-size:.95rem}
.final-fine a{color:#C9D3C3}

/* ------------------------------------------------------------ forms ---- */
.quote-form{
  background:var(--card); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.4rem);
  box-shadow:var(--sh-2); display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
}
.qf-field{display:flex; flex-direction:column; gap:.35rem}
.qf-wide,.qf-submit,.qf-note{grid-column:1/-1}
.quote-form label{font-family:var(--f-head); font-weight:600; font-size:.9rem; color:var(--ink)}
.quote-form label span{color:var(--mist); font-weight:400}
.quote-form input,.quote-form textarea{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:.8rem 1rem;
  transition:border-color .2s ease, box-shadow .2s ease; width:100%;
}
.quote-form input:focus,.quote-form textarea:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 4px rgba(134,192,73,.18)}
.qf-error{display:none; margin:0; color:var(--danger); font-size:.85rem}
.qf-field.invalid input,.qf-field.invalid textarea{border-color:var(--danger); box-shadow:0 0 0 4px rgba(196,69,44,.12)}
.qf-field.invalid .qf-error{display:block}
.qf-note{margin:0; font-size:.88rem; color:var(--mist); text-align:center}
.final-form .qf-note{color:var(--mist)}

/* --------------------------------------------------- subpage chrome ---- */
.subpage .site-header{background:rgba(250,251,247,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(16,22,15,.05)}
.breadcrumbs{
  max-width:var(--maxw); margin:calc(var(--head-h) * 0) auto 0; padding:1rem var(--gut) 0;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.85rem; color:var(--mist);
}
.breadcrumbs a{color:var(--mist); text-decoration:none}
.breadcrumbs a:hover{color:var(--pine); text-decoration:underline}
.breadcrumbs svg{width:14px; height:14px; fill:none; stroke:var(--line); stroke-width:2.4}
.breadcrumbs [aria-current]{color:var(--pine); font-weight:500}
.page-hero{padding:clamp(2.5rem,5vw,5rem) 0 clamp(2.5rem,5vw,4.5rem)}
.page-hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.9rem)}
.page-hero .hero-cta{margin-top:1.6rem; margin-bottom:0}
.page-hero .hero-call{color:var(--body-c); border-color:var(--line)}
.page-hero .hero-call:hover{color:var(--ink); border-color:var(--volt)}

.svc-detail{padding:clamp(2rem,4vw,4rem) 0 var(--sec-pad)}
.svc-detail-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); gap:clamp(2rem,4vw,4rem); align-items:start}
.svc-side{background:var(--wash); border-radius:var(--r); padding:clamp(1.4rem,2.5vw,2rem); position:sticky; top:calc(var(--head-h) + 16px)}
.side-promise{margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--mist)}

.gallery-sec{padding:var(--sec-pad) 0; background:var(--wash)}
.gallery-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:clamp(2rem,4vw,3rem)}
.g-item{margin:0; border-radius:var(--r); overflow:hidden; background:var(--card); box-shadow:var(--sh-1)}
.g-item img{aspect-ratio:3/2; object-fit:cover; width:100%; filter:saturate(.94) contrast(1.02)}
.g-item figcaption{padding:.8rem 1rem; font-size:.88rem; color:var(--mist)}

.related{padding:0 0 var(--sec-pad)}
.chips{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem}
.chip{
  display:inline-block; padding:.6rem 1.1rem; border-radius:100px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); color:var(--pine);
  font-family:var(--f-head); font-weight:500; font-size:.92rem;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.chip:hover{border-color:var(--volt); transform:translateY(-2px); box-shadow:var(--sh-1)}

.cta-band{padding:clamp(3rem,6vw,5rem) 0; background:var(--ink); color:#C9D3C3}
.cta-band-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.cta-band h2{color:#fff; margin-bottom:.3rem}
.cta-band p{margin:0}
.cta-band-actions{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.cta-band .hero-call{color:#C9D3C3}

.svc-hub{padding:0 0 var(--sec-pad)}
.svc-hub-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.svc-card{display:flex; flex-direction:column; text-decoration:none; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .25s ease, box-shadow .25s ease}
.svc-card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.svc-card-img img{aspect-ratio:16/9; object-fit:cover; width:100%}
.svc-card-body{padding:clamp(1.3rem,2.5vw,2rem)}
.svc-card-body h2{font-size:1.4rem}
.svc-card-body p{color:var(--body-c)}

.about-main{padding:0 0 var(--sec-pad)}
.about-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr); gap:clamp(2rem,4vw,4rem); align-items:start}
.about-copy h2{margin-top:2rem; font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.about-copy h2:first-child{margin-top:0}
.team-photo{margin:0 0 var(--gap); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2); background:var(--card)}
.team-photo img{width:100%; object-fit:cover}
.team-photo figcaption{padding:.9rem 1.1rem; font-size:.85rem; color:var(--mist)}
.fact-card{background:var(--wash); border-radius:var(--r-sm); padding:1.1rem 1.3rem; margin-top:.8rem;
  display:flex; align-items:baseline; gap:1rem}
.fact-card b{font-family:var(--f-head); font-size:1.6rem; color:var(--volt-deep); flex:none}
.fact-card span{font-size:.92rem; color:var(--body-c)}

.cs-list{padding:0 0 var(--sec-pad)}
.cs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(2rem,4vw,4rem);
  align-items:center; margin-top:clamp(3rem,5vw,4.5rem)}
.cs-flip .cs-media{order:2}
.cs-media{border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2)}
.cs-media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.cs-body h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem)}
.cs-body b{color:var(--ink)}

.post-list{padding:0 0 var(--sec-pad)}
.post-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.post-card{display:block; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(1.4rem,2.5vw,2.2rem); box-shadow:var(--sh-1);
  transition:transform .25s ease, box-shadow .25s ease}
.post-card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.post-card h2{font-size:1.35rem}
.post-card p{color:var(--body-c)}
.post-meta{font-size:.85rem; color:var(--mist); font-family:var(--f-head); letter-spacing:.02em}
.post-header{padding:clamp(2rem,4vw,3.5rem) 0 1rem}
.post-header h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem)}
.post-body h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.8rem); margin-top:2.2rem}
.post-body{padding-bottom:clamp(2rem,4vw,3rem)}
.post-cta{padding-bottom:var(--sec-pad)}
.post-cta-card{background:var(--ink); color:#C9D3C3; border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:var(--sh-2); display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center}
.post-cta-card h2{color:#fff; font-size:1.4rem; margin:0; flex-basis:100%}
.post-cta-card p{margin:0; flex:1 1 240px}
.post-cta-card .hero-call{color:#C9D3C3}

.contact-main{padding:0 0 var(--sec-pad)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:clamp(2rem,4vw,3.5rem); align-items:start}
.side-card{background:var(--wash); border-radius:var(--r); padding:clamp(1.3rem,2.5vw,1.9rem); margin-bottom:var(--gap)}
.big-tel a{font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); color:var(--ink); text-decoration:none}
.big-tel a:hover{color:var(--volt-deep)}
.side-hours{font-size:.95rem}
.map-wrap{margin-top:clamp(2rem,4vw,3.5rem)}
.map-wrap iframe{width:100%; height:clamp(280px,40vw,440px); border:0; border-radius:var(--r); box-shadow:var(--sh-1); filter:saturate(.85)}

.ty{padding:clamp(4rem,8vw,7rem) 0 var(--sec-pad)}
.ty-inner{text-align:left}
.ty-tick{width:64px; height:64px; padding:14px; border-radius:50%; background:rgba(134,192,73,.15);
  fill:none; stroke:var(--volt-deep); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1.4rem}
.ty-next{background:var(--wash); border-radius:var(--r); padding:clamp(1.4rem,2.5vw,2rem); margin:2rem 0}
.ty-next h2{font-size:1.25rem}
.ty-next ul{margin:0; padding-left:1.2rem}
.ty-next li{margin-bottom:.6rem}

.e404{padding:clamp(4rem,8vw,7rem) 0 var(--sec-pad); text-align:center}
.e404-inner .chips{justify-content:center; margin:1.6rem 0}
.e404-code{font-family:var(--f-head); font-weight:700; font-size:clamp(5rem,4rem + 8vw,10rem); line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(134,192,73,.55); margin:0 0 1rem;
  display:flex; justify-content:center; align-items:center; gap:.05em}
.e404-code svg{width:.62em; height:.62em; fill:var(--volt); animation:pulse404 2.4s ease-in-out infinite}
@keyframes pulse404{0%,100%{opacity:.5; transform:scale(.94)}50%{opacity:1; transform:scale(1.04)}}

.legal{padding:clamp(2.5rem,5vw,4.5rem) 0 var(--sec-pad)}
.legal h1{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.legal h2{font-size:1.35rem; margin-top:2rem}

/* --------------------------------------------------------- tooltips ---- */
.tip{position:relative; cursor:help; border-bottom:1.5px dotted var(--volt-deep)}
.tip::after{
  content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:#E7EDE3; font-size:.82rem; font-weight:400; font-family:var(--f-body);
  line-height:1.45; padding:.65rem .9rem; border-radius:var(--r-sm); width:max-content; max-width:260px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:50;
  box-shadow:var(--sh-2); text-transform:none; letter-spacing:0; white-space:normal; text-align:left;
}
.tip::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink); opacity:0; transition:opacity .25s ease; z-index:50;
}
.tip:hover::after,.tip:focus::after,.tip:hover::before,.tip:focus::before{opacity:1; transform:translateX(-50%) translateY(0)}

/* ----------------------------------------------------------- footer ---- */
.site-footer{background:var(--ink); color:#AEB9A8; padding:clamp(3rem,6vw,5rem) 0 0}
.footer-inner{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(1.5rem,3vw,3rem)}
.f-brand .f-tag{margin:.9rem 0 .5rem; color:#C9D3C3; font-family:var(--f-head)}
.f-meta{font-size:.85rem; line-height:1.7}
.f-col h3{color:#fff; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem}
.f-col a{display:block; color:#AEB9A8; text-decoration:none; padding:.28rem 0; font-size:.95rem}
.f-col a:hover{color:var(--spark)}
.f-hours,.f-pay{font-size:.85rem; margin:.6rem 0 0}
.f-social{display:flex; gap:.8rem; margin-top:1rem}
.f-social a{padding:0}
.f-social svg{width:22px; height:22px; fill:#AEB9A8; transition:fill .2s ease}
.f-social a:hover svg{fill:var(--spark)}
.footer-fine{margin-top:clamp(2rem,4vw,3rem); border-top:1px solid rgba(231,237,227,.12);
  padding:1.4rem var(--gut) calc(1.4rem + 64px)}
.footer-fine p{max-width:var(--maxw); margin:0 auto; font-size:.82rem; color:#7C8676}
.footer-fine a{color:#AEB9A8}
.site-footer .tip{border-color:rgba(134,192,73,.5)}

/* ------------------------------------------------- sticky mobile CTA ---- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  grid-template-columns:1fr 1fr; gap:1px; background:rgba(16,22,15,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta a{
  text-align:center; padding:1rem .5rem; font-family:var(--f-head); font-weight:600;
  font-size:.98rem; text-decoration:none;
}
.sc-call{color:#fff; background:var(--ink)}
.sc-quote{color:var(--ink); background:var(--volt)}

/* --------------------------------------------------------- cookies ---- */
.cookie-bar{
  position:fixed; z-index:120; left:50%; transform:translateX(-50%);
  bottom:clamp(12px, 2vw, 24px); width:min(680px, calc(100% - 2rem));
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-2); padding:1.1rem 1.3rem;
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.cookie-bar p{margin:0; flex:1 1 280px; font-size:.9rem}
.cookie-bar .btn{padding:.6rem 1.1rem; font-size:.88rem}
.cookie-bar > div{display:flex; gap:.6rem}

/* ------------------------------------------------------- responsive ---- */
@media (max-width: 1080px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .bene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bene-hero{grid-row:auto; grid-column:1/-1}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .main-nav{display:none}
  .header-phone span{display:none}
  .nav-burger{display:flex}
  .shift-grid,.final-grid,.svc-row,.svc-detail-grid,.about-grid,.cs,.contact-grid{grid-template-columns:1fr}
  .svc-flip .svc-media,.cs-flip .cs-media{order:0}
  .svc-side{position:static}
  .steps{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
  .svc-hub-grid,.post-grid{grid-template-columns:1fr}
  .sticky-cta{display:grid}
  body{padding-bottom:0}
  .shift-media{max-width:560px}
}
@media (max-width: 640px){
  .btn-header{display:none}
  .bene-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .quote-form{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .cta-band-actions{width:100%}
  .cta-band-actions .btn{flex:1}
}