/* ==========================================================================
   JM Plumbing, Heating & Cooling LLC — Design System
   Palette derived from the company logo.
   ========================================================================== */

:root{
  /* Brand */
  --navy:#16265C;
  --navy-700:#1B2A63;
  --navy-500:#27408B;
  --navy-300:#4C68B5;
  --red:#E01B22;
  --red-600:#C1141B;
  --blue:#1877D4;
  --blue-600:#1263B4;
  --gray:#8A8D91;

  /* Neutrals */
  --ink:#0E1631;
  --body:#40485F;
  --muted:#6B7285;
  --line:#E4E8F0;
  --bg:#FFFFFF;
  --bg-soft:#F6F8FC;
  --bg-tint:#EEF3FB;

  /* Type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Barlow Condensed',var(--font);

  /* Fluid type scale */
  --fs-hero:clamp(2.6rem,7vw,5.2rem);
  --fs-h1:clamp(2.1rem,4.6vw,3.5rem);
  --fs-h2:clamp(1.75rem,3.4vw,2.7rem);
  --fs-h3:clamp(1.2rem,1.9vw,1.5rem);
  --fs-body:clamp(1rem,1.05vw,1.075rem);

  /* Space */
  --sp-section:clamp(3.25rem,5.5vw,5.5rem);
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 2px 8px rgba(14,22,49,.06);
  --shadow:0 12px 34px -12px rgba(14,22,49,.18);
  --shadow-lg:0 30px 70px -25px rgba(14,22,49,.32);
  --ring:0 0 0 4px rgba(24,119,212,.28);

  --wrap:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.7;
  color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* MUST be `clip`, never `hidden`. `overflow-x:hidden` coerces overflow-y from
     `visible` to `auto`, which turns BODY into a scroll container with zero
     scroll range - and then the mouse wheel has nowhere to go. `clip` is not a
     scroll container, so overflow-y stays `visible` and the wheel reaches the
     viewport. Dragging the scrollbar hid this bug because it targets the
     viewport directly. */
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue-600);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--red)}
h1,h2,h3,h4{color:var(--ink);line-height:1.12;margin:0 0 .55em;font-weight:800;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin-bottom:.45em}
button{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--navy);color:#fff;padding:.9rem 1.4rem;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0;color:#fff}

/* Drives the mobile drawer with no JavaScript. Kept focusable (not
   display:none) so keyboard users can toggle it with Space. */
.nav-toggle{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;z-index:-1}
.nav-toggle:focus-visible ~ .header .burger{outline:3px solid var(--blue);outline-offset:2px;border-radius:12px}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 2rem,var(--wrap))}}
.section{padding-block:var(--sp-section);position:relative}
.section--soft{background:var(--bg-soft)}
.section--soft + .section--soft,
.section--tint + .section--tint{padding-top:0}
.section--soft + .section--soft > .wrap > .center:first-child,
.section--tint + .section--tint > .wrap > .center:first-child{padding-top:1rem}
.section--tint{background:linear-gradient(170deg,var(--bg-tint),#fff 70%)}
.grid{display:grid;gap:clamp(1.25rem,2.4vw,2rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.center{text-align:center}
.lead{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--muted);max-width:62ch}
.center .lead{margin-inline:auto}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--blue))}
.center .eyebrow::after{content:"";width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--red))}
.gradient-text{
  background:linear-gradient(105deg,var(--navy) 10%,var(--blue) 55%,var(--red) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--navy);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.85rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:1rem;letter-spacing:.01em;line-height:1;
  text-align:center;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 24px -10px rgba(22,38,92,.55);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  min-height:52px;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.28),transparent 75%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-3px);color:#fff;box-shadow:0 18px 34px -12px rgba(22,38,92,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(-1px)}
.btn--red{--btn-bg:linear-gradient(120deg,var(--red),#F2452C);box-shadow:0 10px 24px -10px rgba(224,27,34,.6)}
.btn--blue{--btn-bg:linear-gradient(120deg,var(--blue),#3E9BEE);box-shadow:0 10px 24px -10px rgba(24,119,212,.55)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);border:2px solid rgba(22,38,92,.22);box-shadow:none}
.btn--ghost:hover{--btn-fg:var(--navy);border-color:var(--navy);background:rgba(22,38,92,.05)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--navy)}
.btn--light:hover{color:var(--navy)}
.btn--lg{padding:1.15rem 2.3rem;font-size:1.07rem;min-height:60px}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.center .btn-row{justify-content:center}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-500) 45%,var(--blue-600) 100%);
  color:#fff;font-size:.9rem;position:relative;z-index:60;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding-block:.4rem}
.topbar a{color:#fff;font-weight:700}
.topbar a:hover{color:#FFD9DA}
.topbar__pulse{display:inline-flex;align-items:center;gap:.5rem}
.dot{width:9px;height:9px;border-radius:50%;background:#4ADE80;position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4ADE80;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.topbar__right{display:flex;gap:1.4rem;align-items:center}
@media(max-width:860px){.topbar .hide-sm{display:none}}
@media(max-width:560px){.topbar{font-size:.82rem}.topbar .wrap{justify-content:center}}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.header.is-stuck{box-shadow:0 10px 30px -18px rgba(14,22,49,.4);background:rgba(255,255,255,.96)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:86px}
.logo{display:flex;align-items:center;gap:.75rem;flex:none}
.logo img{height:60px;width:auto;max-width:min(260px,52vw);object-fit:contain}
@media(max-width:520px){.logo img{height:46px}}
.nav__links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav__links a{
  color:var(--ink);font-weight:600;font-size:.97rem;padding:.65rem .85rem;border-radius:10px;
  position:relative;display:block;
}
.nav__links a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--blue));transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--navy)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{display:flex;align-items:center;gap:.7rem;flex:none}
.nav__phone{display:flex;flex-direction:column;line-height:1.1;font-weight:800;color:var(--navy);font-size:1.05rem}
.nav__phone small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);font-weight:700}

.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 6px);left:0;min-width:255px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:.55rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.25s var(--ease);
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{padding:.6rem .8rem;border-radius:10px;font-size:.94rem}
.sub a::after{display:none}
.sub a:hover{background:var(--bg-tint)}

.burger{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;padding:10px;border-radius:12px;-webkit-tap-highlight-color:transparent;align-items:center;justify-content:center;flex-direction:column}
.burger span{display:block;width:26px;height:2.5px;border-radius:3px;background:var(--navy);margin:2.5px 0;transition:.3s var(--ease)}
#nav-toggle:checked ~ .header .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
#nav-toggle:checked ~ .header .burger span:nth-child(2){opacity:0}
#nav-toggle:checked ~ .header .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:1040px){
  /* .header must NOT have backdrop-filter here: it establishes a containing
     block for fixed descendants, which traps the drawer inside the header. */
  /* Two separate things the header does to the drawer at this width:
     1. backdrop-filter establishes a containing block for fixed descendants,
        which traps the drawer inside the 87px header box.
     2. z-index:100 makes the header a STACKING CONTEXT, so the drawer's
        z-index:140 only competes INSIDE it - the whole header subtree painted
        below the scrim (135). The scrim covered the menu, swallowed every tap,
        and while it had a blur it visibly blurred the menu.
     Raising the header above the scrim fixes paint order and hit-testing. */
  .header{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;
    z-index:150;
  }
  .header.is-stuck{background:#fff}

  /* ---- slide-out panel ---- */
  .nav__panel{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(90vw,400px);height:100vh;height:100dvh;
    background:#fff;display:flex;flex-direction:column;
    box-shadow:-24px 0 70px -22px rgba(14,22,49,.45);
    /* translate3d promotes this to its own compositing layer. A plain 2D
       transform can land on a fractional pixel in WebKit and render the text
       softly - that is the "fuzzy" nav on iOS. */
    -webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    visibility:hidden;
    /* visibility deliberately NOT transitioned - it must flip instantly */
    transition:-webkit-transform .38s var(--ease),transform .38s var(--ease);
    z-index:140;
  }
  #nav-toggle:checked ~ .header .nav__panel,
  .nav__panel.is-open{
    -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
    visibility:visible;
  }
  @media (prefers-reduced-motion:reduce){
    .nav__panel{transition:none}
  }

  /* panel header: logo + close */
  .nav__panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
    padding:calc(.9rem + env(safe-area-inset-top)) 1.15rem .9rem 1.25rem;
    border-bottom:1px solid var(--line);
  }
  .nav__panel-head img{height:44px;width:auto;max-width:60%;object-fit:contain}
  .nav__close{
    width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;background:var(--bg-soft);color:var(--navy);
    transition:.2s var(--ease);
  }
  .nav__close:hover,.nav__close:active{background:var(--bg-tint);color:var(--red);transform:rotate(90deg)}
  .nav__close svg{width:20px;height:20px}

  /* scrolling link list */
  .nav__links{
    position:static;flex:1 1 auto;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    display:flex;flex-direction:column;align-items:stretch;gap:.15rem;
    padding:.6rem .9rem .8rem;margin:0;list-style:none;
    background:#fff;box-shadow:none;transform:none;width:auto;
  }
  .nav__links > li > a{
    display:flex;align-items:center;justify-content:space-between;
    padding:.82rem .95rem;border-radius:12px;border-bottom:0;
    font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  }
  .nav__links > li > a::after{
    content:"";display:block;width:8px;height:8px;flex:none;
    border-right:2.5px solid #C3CAD9;border-bottom:2.5px solid #C3CAD9;
    transform:rotate(-45deg);transition:.2s var(--ease);position:static;
    background:none;border-radius:0;
  }
  .nav__links > li > a:hover,.nav__links > li > a:active{background:var(--bg-tint);color:var(--navy)}
  .nav__links > li > a:hover::after{border-color:var(--blue);transform:rotate(-45deg) translate(2px,2px)}
  .nav__links > li > a[aria-current="page"]{
    background:var(--bg-tint);color:var(--navy);
    box-shadow:inset 3px 0 0 var(--red);
  }

  /* nested services group */
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:var(--bg-soft);border-radius:14px;
    padding:.35rem;margin:.25rem 0 .5rem .35rem;list-style:none;min-width:0;
    display:grid;grid-template-columns:1fr 1fr;gap:.15rem;
  }
  .sub li{margin:0}
  .sub a{
    display:block;padding:.7rem .75rem;border-radius:10px;border-bottom:0;
    font-size:.88rem;font-weight:600;color:var(--muted);line-height:1.3;
  }
  .sub a::after{display:none}
  .sub a:hover,.sub a:active{background:#fff;color:var(--navy)}
  .sub a[aria-current="page"]{background:#fff;color:var(--navy)}

  /* sticky action footer */
  .nav__panel-foot{
    flex:none;border-top:1px solid var(--line);background:#fff;
    padding:.85rem 1.15rem calc(.85rem + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:.55rem;
  }
  .nav__panel-foot .btn{min-height:50px;font-size:1rem}
  .nav__text-btn{
    background:linear-gradient(120deg,#25A55A,#1E8A4A);
    box-shadow:0 10px 22px -10px rgba(30,138,74,.6);
  }
  .nav__meta{
    margin:.2rem 0 0;font-size:.75rem;line-height:1.5;color:var(--muted);text-align:center;
  }
  .nav__meta .dot{display:inline-block;vertical-align:middle}

  .burger{display:flex;z-index:95}
  .nav__phone{display:none}
  .nav__cta .btn{display:none}
}

/* Desktop: the panel wrapper collapses so the <ul> lays out inside .nav */
@media(min-width:1041px){
  .nav__panel{display:contents}
  .nav__panel-head,.nav__panel-foot{display:none}
  /* the drawer does not exist up here, so neither should its backdrop */
  .scrim{display:none!important}
}

/* No backdrop-filter here: on iOS it blurs content above it and is
   expensive to composite. A translucent fill reads the same. */
.scrim{position:fixed;inset:0;display:block;margin:0;background:rgba(10,17,40,.58);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease);z-index:135}
#nav-toggle:checked ~ .scrim,
.scrim.is-open{opacity:1;visibility:visible;pointer-events:auto}

/* iOS-safe scroll lock while the drawer is open */
body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--red),var(--blue));transition:width .1s linear}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0E1B44 0%,var(--navy) 38%,var(--navy-500) 100%);
  padding-block:clamp(3.5rem,7vw,6.5rem) clamp(6rem,10vw,9rem);
}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;z-index:-1;animation:float 18s ease-in-out infinite}
.hero__blob--red{width:min(46vw,520px);aspect-ratio:1;background:var(--red);top:-12%;right:-8%}
.hero__blob--blue{width:min(42vw,470px);aspect-ratio:1;background:var(--blue);bottom:-18%;left:-10%;animation-delay:-7s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(24px,-30px) scale(1.08)}66%{transform:translate(-20px,22px) scale(.95)}}
.hero__grid-lines{
  position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 75% 62% at 50% 42%,#000 35%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 42%,#000 35%,transparent 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(max-width:960px){.hero__inner{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.hero .btn-row{justify-content:center}}
.hero h1{color:#fff;font-size:var(--fs-hero);margin-bottom:.35em;letter-spacing:-.035em}
.hero__lead{color:rgba(255,255,255,.86);font-size:clamp(1.08rem,1.6vw,1.3rem);max-width:56ch;margin-bottom:2rem}
.hero__badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.9rem}
@media(max-width:960px){.hero__badges{justify-content:center}}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  font-size:.87rem;font-weight:600;color:#fff;
}
.chip svg{width:16px;height:16px;flex:none}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:960px){.hero__trust{justify-content:center}}
.hero__trust div{line-height:1.25}
.hero__trust b{display:block;font-family:var(--display);font-size:1.95rem;font-weight:700;color:#fff}
.hero__trust span{font-size:.83rem;color:rgba(255,255,255,.72);letter-spacing:.04em}

.quote-card{
  background:rgba(255,255,255,.97);border-radius:var(--radius-lg);padding:clamp(1.6rem,2.6vw,2.1rem);
  box-shadow:var(--shadow-lg);color:var(--body);position:relative;overflow:hidden;text-align:left;
}
.quote-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--red),var(--gray),var(--blue))}
.quote-card h2{font-size:1.42rem;margin-bottom:.3em}
.quote-card p.small{font-size:.9rem;color:var(--muted);margin-bottom:1.25rem}

.wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1;pointer-events:none}
.wave svg{width:100%;height:clamp(50px,7vw,105px);display:block}

/* ---------- Forms ---------- */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;font-size:.87rem;color:var(--ink);margin-bottom:.4rem}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:.92rem 1.05rem;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;transition:.2s var(--ease);
}
.field textarea{min-height:128px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:var(--ring);outline:0}
.field input::placeholder,.field textarea::placeholder{color:#A6ADBD}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.8rem;color:var(--muted);margin:.85rem 0 0;line-height:1.5}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-status{padding:.85rem 1.1rem;border-radius:12px;font-weight:600;font-size:.93rem;margin-bottom:1rem;display:none}
.form-status.ok{display:block;background:#E7F7EE;color:#12784A;border:1px solid #A6E4C4}
.form-status.err{display:block;background:#FDEDEE;color:#B31D22;border:1px solid #F6BFC2}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,2.4vw,2rem);
  position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  height:100%;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,var(--navy));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.card--plumb{--accent:linear-gradient(90deg,var(--navy),var(--navy-300))}
.card--heat{--accent:linear-gradient(90deg,var(--red),#F2452C)}
.card--cool{--accent:linear-gradient(90deg,var(--blue),#4FA6F2)}
.card__icon{
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.15rem;
  background:var(--bg-tint);color:var(--navy);flex:none;transition:transform .35s var(--ease);
}
.card:hover .card__icon{transform:scale(1.08) rotate(-4deg)}
.card__icon svg{width:30px;height:30px}
.card--heat .card__icon{background:#FDECEC;color:var(--red)}
.card--cool .card__icon{background:#E8F2FD;color:var(--blue)}
.card__list{list-style:none;padding:0;margin:1.1rem 0 0;font-size:.94rem}
.card__list li{padding-left:1.6rem;position:relative;margin-bottom:.4em;color:var(--muted)}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.card__link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;margin-top:1.2rem;font-size:.94rem;min-height:44px}
.card__link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.card__link:hover svg{transform:translateX(4px)}

.step{position:relative;padding-left:4.6rem}
.step__num{
  position:absolute;left:0;top:0;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  font-family:var(--display);font-size:1.6rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 10px 22px -10px rgba(22,38,92,.6);
}
.step h3{font-size:1.15rem;margin-bottom:.35em}
.step p{font-size:.95rem;margin:0}

.stat{text-align:center;padding:1.6rem 1rem;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.3rem,4.6vw,3.4rem);font-weight:700;line-height:1;
  background:linear-gradient(120deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.87rem;color:var(--muted);font-weight:600;letter-spacing:.03em}

.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;position:relative;height:100%}
.quote::before{content:"\201C";position:absolute;top:.1em;right:.35em;font-size:6rem;line-height:1;color:var(--bg-tint);font-family:Georgia,serif;pointer-events:none}
.stars{display:flex;gap:3px;margin-bottom:.9rem;color:#F5A623}
.stars svg{width:19px;height:19px}
.quote p{font-size:1rem;color:var(--ink);position:relative;z-index:1}
.quote footer{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));flex:none;font-size:1rem}
.quote cite{font-style:normal;font-weight:700;color:var(--ink);display:block;font-size:.95rem}
.quote small{color:var(--muted);font-size:.83rem}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.checklist{list-style:none;padding:0;margin:1.5rem 0 0}
.checklist li{padding-left:2.15rem;position:relative;margin-bottom:.85em;font-weight:500;color:var(--ink)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.15em;width:24px;height:24px;border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}

.split__media{position:relative}
.art-frame--offset{transform:rotate(-1.6deg)}
@media(max-width:900px){.art-frame--offset{transform:none}}
.art-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--navy),var(--blue));aspect-ratio:4/3}
.art-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),transparent 55%)}
.art-frame img{width:100%;height:100%;object-fit:cover}
.art-badge{
  position:absolute;bottom:-22px;left:-18px;background:#fff;border-radius:18px;padding:1rem 1.35rem;
  box-shadow:var(--shadow);z-index:3;display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);
}
@media(max-width:900px){.art-badge{left:12px;bottom:-18px}}
.art-badge b{font-family:var(--display);font-size:1.7rem;color:var(--navy);line-height:1;display:block}
.art-badge span{font-size:.78rem;color:var(--muted);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:.75rem;overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s}
.faq details[open]{box-shadow:var(--shadow-sm);border-color:var(--blue)}
.faq summary{
  padding:1.15rem 3.2rem 1.15rem 1.35rem;font-weight:700;color:var(--ink);cursor:pointer;position:relative;
  list-style:none;font-size:1.02rem;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:hover{color:var(--blue)}
.faq .faq__body{padding:0 1.35rem 1.35rem;color:var(--muted)}
.faq .faq__body p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-500) 50%,var(--blue-600) 100%);
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.cta-band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--red);opacity:.24;filter:blur(90px);top:-45%;left:8%}
.cta-band::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:var(--blue);opacity:.3;filter:blur(90px);bottom:-50%;right:6%}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{color:rgba(255,255,255,.85);max-width:56ch;margin-inline:auto;margin-bottom:1.9rem;font-size:1.1rem}

/* ---------- Areas ---------- */
.town-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));gap:.65rem;list-style:none;padding:0;margin:0}
.town-grid a{
  display:flex;align-items:center;gap:.55rem;padding:.85rem 1rem;background:#fff;border:1px solid var(--line);
  border-radius:12px;font-weight:600;font-size:.94rem;color:var(--ink);transition:.25s var(--ease);
}
.town-grid a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;transition:.25s}
.town-grid a:hover{border-color:var(--blue);background:var(--bg-tint);transform:translateX(3px);color:var(--navy)}
.town-grid a:hover::before{background:var(--red);transform:scale(1.4)}
.town-plain{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0}
.town-plain li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;font-size:.88rem;color:var(--muted);margin:0}

.crumbs{font-size:.85rem;color:var(--muted);padding-block:1rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;list-style:none;margin:0;padding-left:0}
.crumbs li{display:flex;align-items:center;gap:.45rem;margin:0}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

.phero{
  position:relative;overflow:hidden;color:#fff;padding-block:clamp(2.8rem,5vw,4.6rem) clamp(4.5rem,8vw,6.5rem);
  background:linear-gradient(125deg,#0E1B44,var(--navy) 45%,var(--navy-500));
}
.phero::before{content:"";position:absolute;width:min(46vw,480px);aspect-ratio:1;border-radius:50%;background:var(--blue);opacity:.32;filter:blur(80px);top:-30%;right:-6%}
.phero::after{content:"";position:absolute;width:min(34vw,340px);aspect-ratio:1;border-radius:50%;background:var(--red);opacity:.22;filter:blur(80px);bottom:-45%;left:-4%}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;max-width:22ch}
.phero .crumbs,.phero .crumbs a{color:rgba(255,255,255,.72)}
.phero .crumbs [aria-current]{color:#fff}
.phero .crumbs li+li::before{color:rgba(255,255,255,.35)}
.phero p{color:rgba(255,255,255,.85);max-width:62ch;font-size:1.1rem}
.phero .chip{margin-top:.4rem}

.prose{max-width:76ch}
.prose h2{margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em}
.prose ul{padding-left:1.3em}

.panel{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:14px;padding:1.4rem 1.6rem;margin:1.8rem 0}
.panel--red{border-left-color:var(--red)}
.panel h3{font-size:1.08rem;margin-bottom:.4em;margin-top:0}
.panel p:last-child{margin-bottom:0}

.with-side{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(max-width:980px){.with-side{grid-template-columns:1fr}}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);position:sticky;top:100px}
@media(max-width:980px){.side-card{position:static}}
.side-card h3{font-size:1.15rem}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,#0C1533,#0E1B44);color:rgba(255,255,255,.7);padding-block:clamp(3.5rem,6vw,5rem) 2rem;position:relative}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(1.8rem,3.5vw,3rem)}
@media(max-width:1000px){.footer__grid{grid-template-columns:1fr 1fr;gap:2.2rem}}
.footer h4{color:#fff;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;font-family:var(--display);font-weight:600}
.footer a{color:rgba(255,255,255,.7)}
.footer a:hover{color:#fff}
.footer ul{list-style:none;padding:0;margin:0;font-size:.94rem}
.footer li{margin-bottom:.55em}
.footer .hrow{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.footer .hrow span:last-child{color:rgba(255,255,255,.55);white-space:nowrap}
@media(max-width:768px){.footer li{margin-bottom:.2em}.footer li a{display:inline-block;padding:.45rem 0}}
.footer__logo{height:64px;width:auto;margin-bottom:1.2rem}

.footer__bottom{
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem;
}
.footer__bottom p{margin:0}
.footer__nap{font-size:.94rem;line-height:1.8}
.footer__nap strong{color:#fff}

/* Mobile footer: single column, fully centred. Placed after the base
   footer rules so it wins the cascade at equal specificity. */
@media(max-width:768px){
  .footer__grid{grid-template-columns:1fr;text-align:center;gap:2.6rem}
  .footer__grid > div{display:flex;flex-direction:column;align-items:center}
  .footer__logo{margin-inline:auto}
  .footer h4{width:100%}
  .footer ul{width:100%;max-width:280px}
  .footer__nap{max-width:320px}
  .footer .hrow{justify-content:center;gap:.75rem}
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:.6rem}
}

/* ---------- Floating actions ---------- */
.to-top{
  position:fixed;right:clamp(1rem,2.2vw,1.9rem);bottom:clamp(1rem,2.2vw,1.9rem);z-index:120;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;
  box-shadow:0 14px 30px -10px rgba(22,38,92,.65);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);
  transition:.38s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.to-top:hover{transform:translateY(-5px) scale(1.06)}
.to-top svg{width:24px;height:24px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:768px){.to-top{bottom:84px;width:50px;height:50px}}

.text-bubble{
  position:fixed;right:clamp(1rem,2.2vw,1.9rem);bottom:calc(clamp(1rem,2.2vw,1.9rem) + 66px);z-index:120;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#25A55A,#1E8A4A);color:#fff;
  box-shadow:0 14px 30px -10px rgba(30,138,74,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.text-bubble:hover{transform:translateY(-5px) scale(1.06);color:#fff}
.text-bubble svg{width:25px;height:25px}
.text-bubble::after{
  content:"Text us";position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;padding:.4rem .7rem;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.text-bubble:hover::after{opacity:1}
@media(max-width:768px){.text-bubble{bottom:calc(84px + 62px);width:50px;height:50px}.text-bubble::after{display:none}}

/* ---- contact form: request type chips ---- */
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.6rem;margin:.15rem 0 .3rem}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label{
  display:flex;align-items:center;gap:.6rem;margin:0;padding:.85rem 1rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-size:.93rem;font-weight:600;color:var(--ink);line-height:1.3;
  transition:.2s var(--ease);min-height:52px;
}
.choice label::before{
  content:"";width:19px;height:19px;border-radius:50%;border:2px solid #C3CAD9;flex:none;transition:.2s var(--ease);
}
.choice label:hover{border-color:var(--blue-600);background:var(--bg-tint)}
.choice input:checked + label{border-color:var(--blue);background:var(--bg-tint);color:var(--navy)}
.choice input:checked + label::before{border-color:var(--blue);border-width:6px}
.choice input:focus-visible + label{outline:3px solid var(--blue);outline-offset:2px}
.field > .choice-legend{display:block;font-weight:700;font-size:.87rem;color:var(--ink);margin-bottom:.4rem}
fieldset.field{border:0;padding:0;margin:0 0 1rem}

/* ---- commercial client strip ---- */
.clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem)}
.client-logo{
  display:grid;place-items:center;padding:1rem 1.4rem;background:#fff;border:1px solid var(--line);
  border-radius:16px;min-height:96px;min-width:170px;box-shadow:var(--shadow-sm);
}
.client-logo img{max-height:64px;max-width:190px;width:auto;height:auto;object-fit:contain}
.client-logo span{font-weight:700;color:var(--muted);font-size:.95rem;text-align:center;line-height:1.35}

.call-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:115;display:none;
  background:#fff;border-top:1px solid var(--line);
  padding:.6rem .8rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px -14px rgba(14,22,49,.3);
}
.call-bar__inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.call-bar .btn{padding:.8rem .5rem;font-size:.88rem;gap:.35rem}
.call-bar .btn{padding:.85rem 1rem;font-size:.95rem;min-height:48px}
@media(max-width:768px){.text-bubble{
  position:fixed;right:clamp(1rem,2.2vw,1.9rem);bottom:calc(clamp(1rem,2.2vw,1.9rem) + 66px);z-index:120;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#25A55A,#1E8A4A);color:#fff;
  box-shadow:0 14px 30px -10px rgba(30,138,74,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.text-bubble:hover{transform:translateY(-5px) scale(1.06);color:#fff}
.text-bubble svg{width:25px;height:25px}
.text-bubble::after{
  content:"Text us";position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;padding:.4rem .7rem;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.text-bubble:hover::after{opacity:1}
@media(max-width:768px){.text-bubble{bottom:calc(84px + 62px);width:50px;height:50px}.text-bubble::after{display:none}}

/* ---- contact form: request type chips ---- */
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.6rem;margin:.15rem 0 .3rem}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label{
  display:flex;align-items:center;gap:.6rem;margin:0;padding:.85rem 1rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-size:.93rem;font-weight:600;color:var(--ink);line-height:1.3;
  transition:.2s var(--ease);min-height:52px;
}
.choice label::before{
  content:"";width:19px;height:19px;border-radius:50%;border:2px solid #C3CAD9;flex:none;transition:.2s var(--ease);
}
.choice label:hover{border-color:var(--blue-600);background:var(--bg-tint)}
.choice input:checked + label{border-color:var(--blue);background:var(--bg-tint);color:var(--navy)}
.choice input:checked + label::before{border-color:var(--blue);border-width:6px}
.choice input:focus-visible + label{outline:3px solid var(--blue);outline-offset:2px}
.field > .choice-legend{display:block;font-weight:700;font-size:.87rem;color:var(--ink);margin-bottom:.4rem}
fieldset.field{border:0;padding:0;margin:0 0 1rem}

/* ---- commercial client strip ---- */
.clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem)}
.client-logo{
  display:grid;place-items:center;padding:1rem 1.4rem;background:#fff;border:1px solid var(--line);
  border-radius:16px;min-height:96px;min-width:170px;box-shadow:var(--shadow-sm);
}
.client-logo img{max-height:64px;max-width:190px;width:auto;height:auto;object-fit:contain}
.client-logo span{font-weight:700;color:var(--muted);font-size:.95rem;text-align:center;line-height:1.35}

.call-bar{display:block}body{padding-bottom:76px}}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(1.4rem,3vw,2.6rem);transform:translateX(-50%);z-index:3;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.08);
  animation:bob 2.6s ease-in-out infinite;
}
.scroll-cue:hover{color:#fff;background:rgba(255,255,255,.2)}
.scroll-cue svg{width:20px;height:20px}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
@media(max-width:960px){.scroll-cue{display:none}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}
.reveal:nth-child(5){transition-delay:.32s}
.reveal:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

@media print{
  .header,.topbar,.to-top,.call-bar,.cta-band,.scroll-cue,.burger,.scrim,.progress{display:none!important}
  body{color:#000;padding:0}
  .hero,.phero{background:#fff;color:#000}
  .hero h1,.phero h1,.hero p,.phero p{color:#000}
  a{text-decoration:underline;color:#000}
}

/* ---------- Blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.25rem,2.4vw,1.9rem)}
.post-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,2.2vw,1.85rem);position:relative;overflow:hidden;height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.post-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy),var(--blue),var(--red));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.post-card:hover::before{transform:scaleX(1)}
.post-card h2,.post-card h3{font-size:1.24rem;margin:.55rem 0 .5rem;line-height:1.25}
.post-card h3{font-size:1.08rem}
.post-card h2 a,.post-card h3 a{color:var(--ink)}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--blue-600)}
.post-card p{font-size:.95rem;color:var(--muted);margin-bottom:0}
.post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.79rem;color:var(--muted)}
.post-card__meta > *+*::before{content:"·";margin-right:.55rem;color:var(--line)}
.post-card__cat{
  background:var(--bg-tint);color:var(--navy);font-weight:700;letter-spacing:.04em;
  padding:.3rem .68rem;border-radius:999px;font-size:.76rem;text-transform:uppercase;
}
.post-card__meta .post-card__cat+*::before{content:""}
.post-meta{color:rgba(255,255,255,.75);font-size:.92rem;margin-top:.4rem}
.post-updated{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.1rem;margin-top:2.4rem}
.toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;margin:0 0 2.4rem}
.toc ol{margin:0;padding-left:1.1rem;font-size:.95rem}
.toc li{margin-bottom:.4em}
.toc a{color:var(--body);font-weight:500}
.toc a:hover{color:var(--blue-600)}
.prose h2[id]{scroll-margin-top:110px}

/* CTA band buttons must centre with the text above them */
.btn-row.center{justify-content:center}

/* ---------- Photos ---------- */
.service-photo,.post-photo{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);margin:0 0 2rem;box-shadow:var(--shadow);
}
.post-card__img{
  width:calc(100% + 2 * clamp(1.4rem,2.2vw,1.85rem));
  margin:calc(-1 * clamp(1.4rem,2.2vw,1.85rem)) calc(-1 * clamp(1.4rem,2.2vw,1.85rem)) 1.1rem;
  max-width:none;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;
}
.art-frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* ---------- Photo upload ---------- */
.field-hint{font-weight:500;color:var(--muted);font-size:.82rem}
.filedrop{position:relative}
.filedrop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.filedrop__face{
  display:flex;align-items:center;gap:.85rem;margin:0;cursor:pointer;
  padding:1rem 1.1rem;border:1.5px dashed var(--line);border-radius:12px;
  background:var(--bg-soft);transition:.2s var(--ease);min-height:64px;
}
.filedrop:hover .filedrop__face,
.filedrop input[type=file]:focus-visible + .filedrop__face{border-color:var(--blue);background:var(--bg-tint)}
.filedrop.is-active .filedrop__face{border-color:var(--blue);border-style:solid;background:var(--bg-tint)}
.filedrop__icon{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:#fff;color:var(--blue);border:1px solid var(--line);
}
.filedrop__icon svg{width:20px;height:20px}
.filedrop__text{font-size:.93rem;color:var(--ink);line-height:1.35;font-weight:500}
.filedrop__text small{color:var(--muted);font-weight:500;font-size:.79rem}
.filelist{list-style:none;padding:0;margin:.6rem 0 0;font-size:.86rem}
.filelist li{
  display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;margin-bottom:.35rem;
  background:var(--bg-tint);border-radius:9px;color:var(--ink);
}
.filelist li span:last-child{margin-left:auto;color:var(--muted);font-size:.79rem;white-space:nowrap}
.filelist li.is-bad{background:#FDEDEE;color:#B31D22}


/* ---------- Card thumbnails and full-width photo bands ---------- */
.card__img{
  width:calc(100% + 2 * clamp(1.5rem,2.4vw,2rem));
  margin:calc(-1 * clamp(1.5rem,2.4vw,2rem)) calc(-1 * clamp(1.5rem,2.4vw,2rem)) 1.25rem;
  max-width:none;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0;
}
.card:hover .card__img{filter:saturate(1.06)}
.band-photo{
  width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-lg);
  margin:0 0 2.5rem;box-shadow:var(--shadow);
}
@media(max-width:640px){
  .band-photo{aspect-ratio:16/9;margin-bottom:1.8rem}
}


/* ======================================================================
   DESIGN LAYER v2
   Richer type, real depth, considered motion.
   ====================================================================== */

:root{
  /* deeper, warmer palette */
  --navy-900:#0A1330;
  --navy-850:#0E1B44;
  --ink:#0A1226;
  --body:#454D64;
  --muted:#6E7689;
  --line:#E6EAF2;
  --line-soft:#EFF2F8;
  --bg-soft:#F7F9FC;
  --bg-tint:#EDF3FC;
  --cream:#FBFCFE;

  --display:'Sora',var(--font);

  /* layered shadows read as real depth; a single blur reads as cheap */
  --shadow-xs:0 1px 2px rgba(10,18,38,.04),0 1px 1px rgba(10,18,38,.03);
  --shadow-sm:0 2px 4px rgba(10,18,38,.04),0 4px 12px -4px rgba(10,18,38,.08);
  --shadow:0 4px 8px -2px rgba(10,18,38,.06),0 16px 32px -12px rgba(10,18,38,.16);
  --shadow-lg:0 8px 16px -4px rgba(10,18,38,.08),0 32px 64px -24px rgba(10,18,38,.28);
  --shadow-glow:0 0 0 1px rgba(24,119,212,.14),0 12px 40px -12px rgba(24,119,212,.34);

  --radius:20px;
  --radius-lg:28px;
  --radius-sm:12px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --fs-hero:clamp(2.7rem,6.4vw,5rem);
  --fs-h1:clamp(2.15rem,4.4vw,3.4rem);
  --fs-h2:clamp(1.8rem,3.2vw,2.6rem);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  letter-spacing:-.035em;
  font-weight:700;
  text-wrap:balance;
}
h1{line-height:1.04}
h2{line-height:1.1}
h3{letter-spacing:-.02em;line-height:1.22}
p{text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.65;color:var(--muted)}
body{font-feature-settings:"cv05" 1,"cv11" 1,"ss01" 1;letter-spacing:-.005em}
::selection{background:var(--navy);color:#fff}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.2em;gap:.7rem;margin-bottom:1.1rem;color:var(--blue-600);
}
.eyebrow::before,.center .eyebrow::after{
  width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--blue));
  animation:eyebrowGrow 1s var(--ease-out) both;
}
@keyframes eyebrowGrow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}

/* ---------- Grain: stops flat colour reading as cheap ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn{
  border-radius:14px;font-weight:600;letter-spacing:-.01em;
  padding:1.05rem 1.9rem;min-height:54px;
  box-shadow:0 1px 2px rgba(10,18,38,.08),0 8px 20px -8px rgba(22,38,92,.45);
  transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-out),filter .3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(10,18,38,.1),0 16px 32px -10px rgba(22,38,92,.5)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--red{box-shadow:0 1px 2px rgba(10,18,38,.08),0 8px 22px -8px rgba(224,27,34,.55)}
.btn--red:hover{box-shadow:0 2px 4px rgba(10,18,38,.1),0 18px 36px -10px rgba(224,27,34,.6)}
.btn--ghost{border:1.5px solid var(--line);background:#fff;box-shadow:var(--shadow-xs)}
.btn--ghost:hover{border-color:var(--blue);background:#fff;box-shadow:var(--shadow-glow)}
.btn--lg{padding:1.2rem 2.4rem;min-height:62px;border-radius:16px}

/* ---------- Hero ---------- */
.hero{background:var(--navy-900)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(39,64,139,.85), transparent 60%),
    radial-gradient(50% 45% at 88% 12%, rgba(224,27,34,.30), transparent 62%),
    radial-gradient(65% 60% at 72% 92%, rgba(24,119,212,.42), transparent 60%),
    linear-gradient(165deg,#0A1330 0%,#12224F 55%,#0C1636 100%);
}
.hero__blob{filter:blur(90px);opacity:.34;animation-duration:24s}
.hero__grid-lines{
  opacity:.1;background-size:74px 74px;
  mask-image:radial-gradient(ellipse 70% 58% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 40%,#000 30%,transparent 100%);
}
.hero h1{letter-spacing:-.042em}
.hero__lead{color:rgba(255,255,255,.8);font-size:clamp(1.06rem,1.5vw,1.24rem)}
.hero__trust{gap:2.2rem;border-top:1px solid rgba(255,255,255,.13);padding-top:2rem}
.hero__trust b{
  font-family:var(--display);font-weight:700;font-size:2.1rem;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff 20%,#9FC8F2 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__trust span{font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.62)}

.chip{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  border-radius:999px;font-size:.83rem;font-weight:500;padding:.52rem 1.05rem;
  transition:background .3s var(--ease-out),transform .3s var(--ease-out);
}
.chip:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}

/* form card: animated gradient edge */
.quote-card{
  border-radius:24px;background:var(--cream);
  box-shadow:0 24px 70px -28px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.1);
}
.quote-card::before{
  height:4px;
  background:linear-gradient(90deg,var(--red),#F2452C,var(--blue),var(--navy),var(--red));
  background-size:300% 100%;animation:edgeSlide 8s linear infinite;
}
@keyframes edgeSlide{to{background-position:300% 0}}
.quote-card h2{font-size:1.5rem;letter-spacing:-.03em}

/* ---------- Cards ---------- */
.card{
  border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card::before{height:3px}
.card__img{transition:transform .7s var(--ease-out),filter .5s}
.card:hover .card__img{transform:scale(1.045)}
.card__icon{
  border-radius:16px;background:linear-gradient(140deg,var(--bg-tint),#fff);
  border:1px solid var(--line-soft);box-shadow:var(--shadow-xs);
  transition:transform .5s var(--ease-spring),box-shadow .4s;
}
.card:hover .card__icon{transform:translateY(-2px) rotate(-5deg) scale(1.06);box-shadow:var(--shadow-sm)}
.card h3{font-size:1.2rem}
.card__link{gap:.45rem;font-weight:600}
.card__link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:currentColor;transition:width .4s var(--ease-out);
}
.card__link{position:relative}
.card:hover .card__link::after{width:calc(100% - 22px)}

/* ---------- Sections ---------- */
.section--soft{background:linear-gradient(180deg,var(--bg-soft),#fff)}
.section--tint{background:
  radial-gradient(70% 60% at 15% 0%, rgba(24,119,212,.07), transparent 60%),
  linear-gradient(175deg,var(--bg-tint) 0%,#fff 70%)}

/* ---------- Stats band ---------- */
.stat{
  border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--cream));box-shadow:var(--shadow-xs);
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat b{font-family:var(--display);letter-spacing:-.04em}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;position:relative;padding:1.1rem 0;
  border-block:1px solid var(--line-soft);background:#fff;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;gap:3rem;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.02em;color:var(--muted);
}
.marquee span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Quotes ---------- */
.quote{
  border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--cream));box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.quote::before{color:var(--bg-tint);font-size:7rem}

/* ---------- FAQ ---------- */
.faq details{
  border-radius:16px;border:1px solid var(--line-soft);background:#fff;
  box-shadow:var(--shadow-xs);transition:box-shadow .35s,border-color .35s,transform .35s var(--ease-out);
}
.faq details:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.faq details[open]{box-shadow:var(--shadow);border-color:rgba(24,119,212,.35)}
.faq summary{font-family:var(--display);font-weight:600;letter-spacing:-.015em;font-size:1.03rem}
.faq details[open] summary{color:var(--navy)}
.faq .faq__body{animation:faqIn .45s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Panels, prose ---------- */
.panel{
  border-radius:16px;border:1px solid var(--line-soft);border-left-width:3px;
  background:linear-gradient(180deg,#fff,var(--bg-soft));box-shadow:var(--shadow-xs);
}
.prose h2{letter-spacing:-.03em}
.prose p{line-height:1.75}
.prose a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out);
}
.prose a:hover{background-size:100% 1.5px}

/* ---------- Page hero ---------- */
.phero{background:var(--navy-900)}
.phero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(55% 60% at 82% 10%, rgba(24,119,212,.38), transparent 62%),
    radial-gradient(45% 50% at 8% 95%, rgba(224,27,34,.22), transparent 60%),
    linear-gradient(160deg,#0A1330,#14264F 60%,#0C1636);
  filter:none;border-radius:0;opacity:1;width:auto;
}
.phero::after{display:none}
.phero h1{letter-spacing:-.04em}
.phero p{color:rgba(255,255,255,.78)}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,#0A1330,#070E22)}
.footer h4{font-family:var(--display);font-size:.76rem;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.footer a{transition:color .25s,transform .25s}
.footer li a:hover{color:#fff}

/* ---------- Reveal system ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal--scale{transform:translateY(16px) scale(.97)}
.js .reveal--scale.is-in{transform:none}
.js .reveal--left{transform:translateX(-24px)}
.js .reveal--left.is-in{transform:none}
.js .reveal--right{transform:translateX(24px)}
.js .reveal--right.is-in{transform:none}
.js [data-stagger] > *{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js [data-stagger].is-in > *{opacity:1;transform:none}
.js [data-stagger].is-in > *:nth-child(1){transition-delay:.03s}
.js [data-stagger].is-in > *:nth-child(2){transition-delay:.09s}
.js [data-stagger].is-in > *:nth-child(3){transition-delay:.15s}
.js [data-stagger].is-in > *:nth-child(4){transition-delay:.21s}
.js [data-stagger].is-in > *:nth-child(5){transition-delay:.27s}
.js [data-stagger].is-in > *:nth-child(6){transition-delay:.33s}
.js [data-stagger].is-in > *:nth-child(7){transition-delay:.39s}
.js [data-stagger].is-in > *:nth-child(8){transition-delay:.45s}

/* headline word reveal */
.word-reveal{display:inline-block;overflow:hidden;vertical-align:bottom}
.js .word-reveal > span{display:inline-block;transform:translateY(105%);transition:transform .85s var(--ease-out)}
.js .is-in .word-reveal > span,.js .word-reveal.is-in > span{transform:none}
.js .word-reveal:nth-child(2) > span{transition-delay:.06s}
.js .word-reveal:nth-child(3) > span{transition-delay:.12s}
.js .word-reveal:nth-child(4) > span{transition-delay:.18s}
.js .word-reveal:nth-child(5) > span{transition-delay:.24s}
.js .word-reveal:nth-child(6) > span{transition-delay:.3s}

/* ---------- Floating controls ---------- */
.to-top,.text-bubble{border-radius:16px;box-shadow:var(--shadow)}
.to-top{background:linear-gradient(140deg,var(--navy),var(--navy-500))}
.to-top:hover,.text-bubble:hover{transform:translateY(-3px) scale(1.04)}

/* ---------- Client logos ---------- */
.client-logo{
  border-radius:18px;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--cream));box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.client-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.client-logo img{filter:saturate(.95)}

/* ---------- Town chips ---------- */
.town-grid a{
  border-radius:14px;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--cream));box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease-out),box-shadow .35s,border-color .35s;
}
.town-grid a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:rgba(24,119,212,.4)}
.town-plain li{border-radius:999px;border:1px solid var(--line-soft);background:#fff;box-shadow:var(--shadow-xs)}

/* ---------- Steps ---------- */
.step__num{
  border-radius:16px;font-family:var(--display);
  background:linear-gradient(140deg,var(--navy),var(--blue));
  box-shadow:0 8px 20px -8px rgba(22,38,92,.55);
  transition:transform .45s var(--ease-spring);
}
.step:hover .step__num{transform:translateY(-3px) scale(1.06)}

/* ---------- Forms ---------- */
.field input,.field select,.field textarea{
  border-radius:12px;border-color:var(--line);background:#fff;
  transition:border-color .25s,box-shadow .25s,transform .25s var(--ease-out);
}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--shadow-glow);border-color:var(--blue)}
.choice label{border-radius:14px;border-color:var(--line);box-shadow:var(--shadow-xs);transition:.3s var(--ease-out)}
.choice label:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.filedrop__face{border-radius:14px}

/* ---------- Blog ---------- */
.post-card{
  border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--cream));box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease-out),box-shadow .45s;
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post-card__img{transition:transform .8s var(--ease-out)}
.post-card:hover .post-card__img{transform:scale(1.05)}
.post-card h2,.post-card h3{letter-spacing:-.025em}
.post-card__cat{background:linear-gradient(120deg,var(--bg-tint),#E4EEFB);border:1px solid rgba(24,119,212,.16)}
.toc{border-radius:16px;background:linear-gradient(180deg,var(--bg-soft),#fff);border-color:var(--line-soft)}

/* ---------- Images ---------- */
.service-photo,.post-photo{border-radius:var(--radius);box-shadow:var(--shadow)}
.band-photo{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.art-frame{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}

/* ---------- Section divider ---------- */
.divider{position:relative;height:0}
.divider svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(40px,5vw,80px);display:block}

/* ---------- Scrollbar ---------- */
@media(min-width:1041px){
  ::-webkit-scrollbar{width:11px}
  ::-webkit-scrollbar-track{background:var(--bg-soft)}
  ::-webkit-scrollbar-thumb{background:#C6CFE0;border-radius:99px;border:3px solid var(--bg-soft)}
  ::-webkit-scrollbar-thumb:hover{background:var(--navy-300)}
}

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .quote-card::before{animation:none}
  .eyebrow::before,.center .eyebrow::after{animation:none}
  .word-reveal > span{transform:none!important}
  [data-stagger] > *{opacity:1!important;transform:none!important}
  .faq .faq__body{animation:none}
}

/* keep the print sheet clean */
@media print{ body::after{display:none} .marquee{display:none} }


/* Tilt needs perspective on the GRID, never on an ancestor of .nav__panel:
   a perspective/transform ancestor creates a containing block for fixed
   children and would trap the mobile drawer inside it again. */
@media(hover:hover) and (min-width:1041px){
  .grid.g-2,.grid.g-3,.post-grid{perspective:1200px}
  .card,.post-card{transform-style:preserve-3d;will-change:transform}
}


/* noscript-safety: nothing is ever hidden without JavaScript */
html:not(.js) .reveal,
html:not(.js) [data-stagger] > *,
html:not(.js) .word-reveal > span{opacity:1!important;transform:none!important}


/* ======================================================================
   iOS / iPhone layer
   ====================================================================== */

:root{
  /* one source of truth for the sticky call bar's real height */
  --callbar-h:68px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --float-gap:14px;
}

@media(max-width:768px){
  /* Reserve the call bar's true height, inset included, so the last of the
     page content is never hidden behind it. */
  body{padding-bottom:calc(var(--callbar-h) + var(--safe-b) + 8px)}

  /* Stack the floating controls ABOVE the call bar, measured from it. */
  .to-top{
    bottom:calc(var(--callbar-h) + var(--safe-b) + var(--float-gap));
    right:14px;width:48px;height:48px;
  }
  .text-bubble{
    bottom:calc(var(--callbar-h) + var(--safe-b) + var(--float-gap) + 48px + 10px);
    right:14px;width:48px;height:48px;
  }
  .text-bubble::after{display:none}

  .call-bar{
    padding:.55rem .7rem;
    padding-bottom:calc(.55rem + var(--safe-b));
  }
  .call-bar__inner{gap:.45rem}
  .call-bar .btn{
    padding:.8rem .4rem;font-size:.9rem;min-height:48px;border-radius:12px;
    box-shadow:none;
  }
  .call-bar .btn:hover{transform:none}
}

/* Small iPhones (SE / mini): tighten so nothing crowds */
@media(max-width:380px){
  .call-bar .btn{font-size:.84rem;gap:.28rem;padding:.75rem .3rem}
  .to-top,.text-bubble{width:44px;height:44px}
  .text-bubble{bottom:calc(var(--callbar-h) + var(--safe-b) + var(--float-gap) + 44px + 8px)}
}

/* ---------- Touch-device behaviour ----------
   Hover effects stick on touch after a tap, which looks broken. Only apply
   them where a real pointer exists. */
@media(hover:none){
  .card:hover,.post-card:hover,.quote:hover,.stat:hover,
  .client-logo:hover,.town-grid a:hover,.faq details:hover{
    transform:none;box-shadow:var(--shadow-xs);
  }
  .card:hover .card__img,.post-card:hover .post-card__img{transform:none}
  .card:hover .card__icon{transform:none}
  .btn:hover{transform:none}
  .card:active,.post-card:active{transform:scale(.995)}
  .btn:active{transform:scale(.98)}
}

/* No rubber-band chaining out of the drawer.
   This deliberately does NOT go on `body`: an unscrollable body plus
   `overscroll-behavior-y:none` blocks the wheel from ever chaining to the
   viewport, which kills mouse-wheel scrolling on desktop entirely.
   The drawer's own list already sets `overscroll-behavior:contain`. */
body.nav-open{overscroll-behavior-y:none}

/* iOS zooms the page in when a focused input is under 16px. Never let that
   happen - it is the single most common "the site is broken" report. */
@media(max-width:768px){
  .field input,.field select,.field textarea{font-size:16px}
  .choice label{font-size:.95rem}
}

/* Safari sometimes leaves a grey flash on tap */
a,button,label,input,select,textarea{-webkit-tap-highlight-color:rgba(24,119,212,.12)}

/* The grain overlay is a fixed layer; keep it off the compositor on phones
   where it buys the least and costs the most. */
@media(max-width:768px){ body::after{opacity:.02} }

/* Respect the notch on landscape iPhones */
@media(max-width:1040px) and (orientation:landscape){
  .wrap{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
  .nav__panel{padding-right:env(safe-area-inset-right,0)}
}


/* ======================================================================
   Sticky bottom bar: iOS viewport hardening
   ====================================================================== */

/* Reveal animations translate horizontally, so the page needs sideways
   clipping. `clip` on both html and body: neither becomes a scroll container,
   so nothing intercepts the wheel. See the note in the reset above. */
body{overflow-x:clip}

@media(max-width:768px){
  .call-bar{
    /* Bleed the bar's background well past the viewport bottom. If Safari
       mispositions it while the toolbar animates, the gap fills with the
       bar's own background rather than page content showing through. */
    padding-bottom:calc(.55rem + var(--safe-b));
  }
  .call-bar::after{
    content:"";position:absolute;left:0;right:0;top:100%;
    height:140px;background:#fff;pointer-events:none;
  }
  /* the top hairline should stay put even while the bar is translated */
  .call-bar{border-top:1px solid var(--line)}
}


/* Bottom bar: Call (red) / Text (green) / Contact (blue) */
@media(max-width:768px){
  .call-bar .btn--blue{
    background:linear-gradient(120deg,var(--blue),#3E9BEE);
    color:#fff;border:0;
  }
  .call-bar .btn--blue:hover,.call-bar .btn--blue:active{color:#fff}
}


/* ======================================================================
   Hero photo slideshow
   ====================================================================== */
.hero--photos{isolation:isolate}

.hero__media{
  position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  background:#0A1330;                       /* covers the gap before first paint */
}
/* ---- crossfading photo slideshow ---- */
.hero__slides{position:absolute;inset:0}

/* Every slide is stacked in the same box. Only opacity animates, so the
   crossfade stays on the compositor and never triggers layout. */
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.2s var(--ease-out);
  will-change:opacity;
}
.hero__slide.is-active{opacity:1}

/* The global reset sets img{height:auto}; the slides must fill their box. */
.hero__slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:58% center;
}

/* A slow drift so a still photograph still feels alive. It restarts each time
   a slide becomes active, which is why it lives on .is-active. */
/* Starts at exactly 1 so the framed crop is fully visible the moment a slide
   appears; the drift is deliberately small because the container already
   crops these photographs and every extra percent of zoom costs context. */
.hero__slide.is-active img{animation:heroDrift 13s linear both}
@keyframes heroDrift{
  from{transform:scale(1)}
  to{transform:scale(1.055)}
}

/* The scrim is what keeps the headline readable over moving footage.
   Heavier on the left where the text sits, lighter on the right. */
.hero__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  /* Only as dark as the text actually needs. Measured, not guessed: the
     headline sits over the left ramp at roughly 8:1 contrast, comfortably
     past AAA, while the centre and right stay light enough that six
     different photographs still look like six different photographs. */
  background:
    linear-gradient(100deg, rgba(10,19,48,.72) 0%, rgba(10,19,48,.44) 30%,
                    rgba(12,22,54,.10) 56%, rgba(10,19,48,.18) 100%),
    linear-gradient(180deg, rgba(10,19,48,.28) 0%, transparent 22%,
                    transparent 72%, rgba(10,19,48,.46) 100%);
}

/* the decorative mesh still shows, just dialled back so it does not fight
   the footage */
.hero--photos::before{opacity:.16}
.hero--photos .hero__blob{opacity:.08}
.hero--photos .hero__grid-lines{opacity:.03}

@media(max-width:960px){
  /* the phone files are already cropped to portrait around the subject */
  .hero__slide img{object-position:center}
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(10,19,48,.50) 0%, rgba(10,19,48,.26) 40%,
                      rgba(10,19,48,.50) 72%, rgba(10,19,48,.70) 100%);
  }
}

/* No motion: hold the first photograph, no drift and no crossfade. The script
   also refuses to start, so nothing ever changes underneath the headline. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide.is-active img{animation:none;transform:none}
}


/* ======================================================================
   Scroll-lock hardening
   ====================================================================== */

/* The drawer control must not exist above the nav breakpoint. Left in the
   tab order it can be toggled with the keyboard on desktop, which locks the
   body with no visible menu to explain the frozen page. */
@media(min-width:1041px){
  .nav-toggle{display:none!important}
  /* and even if it were somehow checked, never freeze the page up here */
  body.nav-open{position:static!important;top:auto!important;overflow:visible!important}
}

/* Painted before the first photograph decodes, and still there if an image
   fails outright - the headline stays readable either way. */
.hero__media{background:#0A1330}


/* Less scrim means the type does its own lifting. A soft shadow keeps the
   headline legible over moving footage without darkening the whole frame. */
.hero--photos h1{text-shadow:0 2px 24px rgba(6,12,30,.55),0 1px 3px rgba(6,12,30,.4)}
.hero--photos .hero__lead{text-shadow:0 1px 14px rgba(6,12,30,.6)}
.hero--photos .chip{
  background:rgba(10,19,48,.42);border-color:rgba(255,255,255,.28);
  text-shadow:0 1px 6px rgba(6,12,30,.5);
}
.hero--photos .hero__trust b,.hero--photos .hero__trust span{text-shadow:0 1px 10px rgba(6,12,30,.55)}


/* ======================================================================
   Hero video: occupy the top of the hero only
   On phones the form card sits BELOW the copy, so running footage behind it
   hurt both readability and sharpness. The video now covers the upper band
   and dissolves into the gradient before the form begins.
   ====================================================================== */
@media(max-width:960px){
  .hero__media{
    inset:0 0 auto 0;
    height:clamp(340px,54%,600px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  }
  /* the scrim stays full-height so the copy below still reads on gradient */
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(10,19,48,.5) 0%, rgba(10,19,48,.34) 30%,
                      rgba(10,19,48,.6) 58%, rgba(10,19,48,.88) 78%,
                      rgba(10,19,48,.95) 100%);
  }
}

/* Desktop keeps the full-bleed frame - the form sits beside the copy there,
   not beneath it - but the lower edge still softens into the section below. */
@media(min-width:961px){
  .hero__media{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.6) 90%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.6) 90%,transparent 100%);
  }
}