/* v8.0 extras: Elementor helpers, WhatsApp button, back-to-top, open badge, trust strip */
.elementor-widget-shortcode .elementor-shortcode{width:100%}
.elementor-widget-container>.hero,.elementor-widget-container>section,.elementor-widget-container>.stats{width:100%}
body.mz-canvas{margin:0}
.mz-wa{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:60;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s}
.mz-wa svg{width:30px;height:30px}.mz-wa:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 26px rgba(0,0,0,.32)}
.mz-wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:mzPing 2.4s ease-out infinite}
@keyframes mzPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.mz-top{position:fixed;right:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:59;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--green);font:800 1.2rem "Bricolage Grotesque",sans-serif;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.18);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.mz-top.show{opacity:1;transform:none}.mz-top:hover{border-color:var(--lime)}
@media(min-width:761px){.mz-wa{bottom:90px}}
@media(max-width:760px){.mz-top{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:16px;width:40px;height:40px}.mz-wa{bottom:calc(126px + env(safe-area-inset-bottom,0px))}}
.mz-open{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 10px;border-radius:99px;background:rgba(183,227,90,.14);font-size:.82rem;vertical-align:middle}
.mz-open i{width:8px;height:8px;border-radius:50%;background:#e0b100}.mz-open.is-open i{background:#3ddc84;animation:mzBlink 1.6s infinite}
.mz-open small{opacity:.8}@keyframes mzBlink{50%{opacity:.35}}
.mz-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0}
.mz-trust-i{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:600}
.mz-trust-i span{font-size:1.4rem}
.mz-svc-cards{margin:0}
@media(prefers-reduced-motion:reduce){.mz-wa::after,.mz-open i{animation:none}.mz-top{transition:none}}

/* ================= v10.23: speed and phone optimisation ================= */
/* skip link (keyboard and screen reader users) */
.mz-skip{position:fixed;left:12px;top:-64px;z-index:100000;padding:12px 18px;border-radius:10px;background:#b7e35a;color:#03150c;font-weight:800;text-decoration:none;transition:top .2s}
.mz-skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* repeat views and slow connections: no intro curtain, and the hero text appears straight away */
html.skip-intro .loader{display:none}
html.skip-intro.js.loaded header.nav{animation-delay:0s}
html.skip-intro.js.loaded .hero .eyebrow{animation-delay:.05s}
html.skip-intro.js.loaded .hero h1 .ln:nth-child(1)>span{animation-delay:.1s}
html.skip-intro.js.loaded .hero h1 .ln:nth-child(2)>span{animation-delay:.18s}
html.skip-intro.js.loaded .hero h1 .ln:nth-child(3)>span{animation-delay:.26s}
html.skip-intro.js.loaded .hero p.h-rise{animation-delay:.34s}
html.skip-intro.js.loaded .hero .row.h-rise>.btn:nth-child(1){animation-delay:.44s}
html.skip-intro.js.loaded .hero .row.h-rise>.btn:nth-child(2){animation-delay:.52s}
html.skip-intro.js.loaded .hero .ticks span:nth-child(1){animation-delay:.6s}
html.skip-intro.js.loaded .hero .ticks span:nth-child(2){animation-delay:.66s}
html.skip-intro.js.loaded .hero .ticks span:nth-child(3){animation-delay:.72s}
html.skip-intro.js.loaded .hero .ticks span:nth-child(4){animation-delay:.78s}
html.skip-intro .scrollcue{transition-delay:.8s}

/* touch: no double-tap delay, steady text size, calm tap colour */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
a,button{-webkit-tap-highlight-color:rgba(183,227,90,.28)}

@media(max-width:760px){
  /* fields never smaller than 16px, so iPhones do not zoom in when you tap them */
  input,select,textarea{font-size:max(16px,1rem)}
  /* bigger tap areas for footer links */
  .ft-links a,.ft-contact a,.ft-bottom a{display:inline-block;padding:8px 0}
  /* less GPU work while scrolling and animating */
  .mbar,.hero .btn.g,.eyebrow{-webkit-backdrop-filter:none;backdrop-filter:none}
  .glow{animation:none}
}

/* v12.1: city pages use the homepage hero look (photo background, animated headline) */
.hero.cityhero{min-height:clamp(560px,80vh,680px)}
.hero.cityhero .wrap{padding-top:96px;padding-bottom:72px}
@media(max-width:760px){.hero.cityhero{min-height:600px}.hero.cityhero .wrap{padding-top:72px;padding-bottom:64px}}

/* v12.2: city hero on phones. Taller hero, photo focus set so the van and crew stay visible, darker lower half for readable text */
@media(max-width:760px){
  .hero.cityhero{min-height:min(680px,94svh)}
  .hero.cityhero .hero-bg img{object-position:60% 35%}
  .hero.cityhero::after{background:linear-gradient(180deg,rgba(6,38,22,.42) 0%,rgba(6,38,22,.8) 42%,rgba(6,38,22,.97) 100%)}
  .hero.cityhero .wrap{padding-top:88px;padding-bottom:56px}
  .hero.cityhero h1{font-size:clamp(2.1rem,9.4vw,2.9rem);line-height:1.04}
  .hero.cityhero p.h-rise{font-size:1.02rem;line-height:1.55;margin-top:14px}
  .hero.cityhero .eyebrow{font-size:.78rem;max-width:100%;white-space:normal}
  .hero.cityhero .ticks{gap:8px}
  .hero.cityhero .ticks span{font-size:.8rem}
}
@media(max-width:380px){
  .hero.cityhero h1{font-size:1.95rem}
  .hero.cityhero .wrap{padding-left:16px;padding-right:16px}
}

/* v12.4: all areas page (page-areas.php), redesigned */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.areas-hero .hero-bg img{object-position:60% 40%}
.ap-stats{background:var(--deep);border-top:1px solid rgba(183,227,90,.2);border-bottom:1px solid rgba(183,227,90,.2)}
.ap-stats-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding-top:26px;padding-bottom:26px;gap:12px}
.ap-stats-in b{display:block;font:800 clamp(1.5rem,3.4vw,2.2rem)/1 "Bricolage Grotesque",sans-serif;color:var(--lime)}
.ap-stats-in span{display:block;margin-top:6px;color:#cfe2d2;font-size:.9rem;letter-spacing:.02em}
.ap-section{padding:clamp(56px,8vw,88px) 0}
.ap-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.ap-lead{max-width:680px;color:var(--muted);font-size:1.05rem;margin:6px 0 0}
.ap-section h2{margin-bottom:0}
.ap-cities{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:28px}
.ap-city{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}
.ap-city:hover{transform:translateY(-6px);border-color:var(--green);box-shadow:0 22px 40px rgba(10,50,28,.18)}
.ap-city-art{display:block;height:170px;background:radial-gradient(260px 140px at 80% 0%,rgba(183,227,90,.35),transparent 70%),linear-gradient(160deg,#0f5a33,#093d22);padding:14px 22px 0;overflow:hidden}
.ap-city-art svg{display:block;width:100%;height:100%;max-width:260px;margin:0 auto}
.ap-city-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.ap-city-name{font:800 1.5rem/1.1 "Bricolage Grotesque",sans-serif}
.ap-city-facts{display:flex;flex-wrap:wrap;gap:8px}
.ap-city-facts span{font-size:.85rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.ap-city-more{margin-top:6px;color:var(--green);font-weight:700}
.ap-city:hover .ap-city-more span{display:inline-block;transform:translateX(4px)}
.ap-search{position:relative;margin:28px 0 8px;max-width:620px}
.ap-search input{width:100%;padding:16px 18px 16px 50px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-size:1.02rem;color:var(--ink);box-shadow:0 8px 22px rgba(10,50,28,.06);outline:none;transition:border-color .2s,box-shadow .2s}
.ap-search input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(47,211,88,.18)}
.ap-search-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.7}
.ap-search-none{display:block;margin-top:10px;color:var(--muted);font-size:.95rem}
.ap-search-none[hidden]{display:none}
.ap-panels{display:grid;gap:22px;margin-top:26px}
.ap-panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 10px 26px rgba(10,50,28,.05)}
.ap-panel[hidden]{display:none}
.ap-panel-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.ap-panel-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(183,227,90,.2);color:var(--green);flex:none}
.ap-panel-ic svg{width:30px;height:30px}
.ap-panel-head h3{margin:0;font-size:1.35rem}
.ap-panel-count{font-size:.9rem;color:var(--muted)}
.ap-panel-link{margin-left:auto;color:var(--green);font-weight:700;text-decoration:none;padding:8px 14px;border-radius:999px;border:1.5px solid var(--green)}
.ap-panel-link:hover{background:var(--green);color:#fff}
.ap-chips{display:flex;flex-wrap:wrap;gap:10px}
.ap-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.94rem;text-decoration:none;transition:border-color .2s,background-color .2s,color .2s,transform .2s}
.ap-chip:hover{border-color:var(--green);background:var(--green);color:#fff;transform:translateY(-2px)}
.ap-chip[hidden]{display:none}
.ap-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.ap-box{border-radius:22px;padding:28px;background:var(--surface);border:1px solid var(--line)}
.ap-box h3{margin-top:0}
.ap-box-dark{background:linear-gradient(160deg,#0f5a33,#093d22);border-color:transparent;color:#fff}
.ap-box-dark h3{color:var(--lime)}
.ap-pcs{list-style:none;margin:0;padding:0}
.ap-pcs li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.ap-pcs li:last-child{border-bottom:0}
.ap-pc-name{font-weight:700}
.ap-pc-val{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--green);text-align:right}
.ap-note{color:var(--muted);font-size:.95rem;margin:16px 0 0}
.ap-box-dark .ap-note{color:#cfe2d2}
.ap-ticklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ap-ticklist li{position:relative;padding-left:32px;font-weight:600}
.ap-ticklist li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--deep);font-size:.8rem;display:grid;place-items:center;font-weight:800}
.ap-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none}
.ap-steps li{position:relative;padding:24px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.ap-steps h3{font-size:1.1rem;margin:14px 0 6px}
.ap-steps p{margin:0;color:var(--muted);font-size:.95rem}
.ap-num{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font:800 1.1rem "Bricolage Grotesque",sans-serif}
.ap-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:28px}
.ap-svc{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.ap-svc:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 16px 30px rgba(10,50,28,.14)}
.ap-svc-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.6rem;background:rgba(183,227,90,.2);margin-bottom:8px}
.ap-svc-title{font:700 1.15rem "Bricolage Grotesque",sans-serif}
.ap-svc-blurb{color:var(--muted);font-size:.95rem}
.ap-svc-more{margin-top:auto;padding-top:10px;color:var(--green);font-weight:700}
@media(max-width:960px){
  .ap-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ap-stats-in{grid-template-columns:repeat(2,1fr)}
  .ap-two{grid-template-columns:1fr}
  .ap-steps{grid-template-columns:1fr}
  .ap-panel{padding:18px}
  .ap-panel-link{margin-left:0}
  .ap-city-art{height:150px}
  .ap-chip{padding:8px 12px;font-size:.88rem}
  .ap-search input{font-size:16px}
}

/* v12.6: photo section on the all areas page */
.ap-photo{padding:clamp(40px,6vw,64px) 0 0}
.ap-photo-fig{margin:0;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 22px 44px rgba(10,50,28,.18);border:1px solid rgba(183,227,90,.35)}
.ap-photo-fig img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;transition:transform .8s ease}
.ap-photo-fig:hover img{transform:scale(1.03)}
.ap-photo-fig figcaption{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-radius:14px;background:rgba(6,38,22,.82);color:#fff;font-size:.95rem;backdrop-filter:blur(6px)}
.ap-photo-tag{padding:4px 12px;border-radius:999px;background:var(--lime);color:var(--deep);font-weight:700;font-size:.85rem}
@media(max-width:760px){
  .ap-photo-fig img{aspect-ratio:4/3}
  .ap-photo-fig figcaption{left:10px;right:10px;bottom:10px;font-size:.85rem}
}

/* v12.7: all areas hero uses the Midlands landmarks image. Keep the green left side behind the text. */
.areas-hero .hero-bg img{object-position:72% 50%}
@media(max-width:760px){.areas-hero .hero-bg img{object-position:68% 50%}}

/* v12.8: header and hero merged. On city and all areas pages the header floats over the photo at the top,
   with white text. When the visitor scrolls, nav.js turns it into the usual floating island (.scrolled). */
body.has-hero-top header.nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(6,38,22,.55) 0%,rgba(6,38,22,0) 100%);border-bottom-color:transparent;box-shadow:none;transition:background .3s,box-shadow .3s}
body.admin-bar.has-hero-top header.nav{top:32px}
@media(max-width:782px){body.admin-bar.has-hero-top header.nav{top:46px}}
body.has-hero-top header.nav:not(.scrolled) .logo{color:#fff}
body.has-hero-top header.nav:not(.scrolled) .logo small{color:#cfe2d2}
body.has-hero-top header.nav:not(.scrolled) nav a{color:#fff}
body.has-hero-top header.nav:not(.scrolled) nav a:hover,body.has-hero-top header.nav:not(.scrolled) nav a.on{background:rgba(255,255,255,.14);color:var(--lime)}
body.has-hero-top header.nav:not(.scrolled) .menu-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
body.has-hero-top header.nav:not(.scrolled) .hdr-call{color:#fff}
body.has-hero-top header.nav.open{background:var(--deep)}
/* the hero already has its own top padding, so it starts under the header */
.hero.cityhero .wrap{padding-top:calc(96px + env(safe-area-inset-top,0px))}
@media(max-width:760px){.hero.cityhero .wrap{padding-top:calc(92px + env(safe-area-inset-top,0px))}}

/* v12.9: real merge at the top of city and all areas pages.
   The header is taken out of the page flow and laid over the photo, its dark bar background,
   border and glow line are removed. Once the visitor scrolls (.scrolled), the normal island takes over. */
body.has-hero-top header.nav,
body.has-hero-top header.nav:not(.scrolled){position:fixed !important;top:0 !important;left:0;right:0;height:auto;padding:0 !important;margin:0;background:transparent !important;border:0 !important;box-shadow:none !important;z-index:60}
body.admin-bar.has-hero-top header.nav{top:32px !important}
@media(max-width:782px){body.admin-bar.has-hero-top header.nav{top:46px !important}}
body.has-hero-top header.nav:not(.scrolled) .wrap{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;height:84px;padding-top:0 !important;padding-bottom:0 !important}
body.has-hero-top header.nav:not(.scrolled) .wrap::after,body.has-hero-top header.nav:not(.scrolled) .wrap::before{display:none !important}
@media(max-width:760px){
  body.has-hero-top header.nav:not(.scrolled) .wrap{height:68px}
}
body.has-hero-top header.nav:not(.scrolled) .wrap{position:relative}
body.has-hero-top header.nav:not(.scrolled)::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(180deg,rgba(6,38,22,.6) 0%,rgba(6,38,22,0) 100%);pointer-events:none;z-index:-1}
body.has-hero-top header.nav.open{background:var(--deep) !important}

/* v12.10: phone version of the merged header (city and all areas pages). Explicit mobile rules
   so the header floats over the photo, with white logo and menu button. The scroll island is unchanged. */
@media(max-width:760px){
  body.has-hero-top header.nav:not(.scrolled){position:fixed !important;top:0 !important;height:auto !important;padding:env(safe-area-inset-top,0px) 0 0 !important;background:linear-gradient(180deg,rgba(3,21,12,.7) 0%,rgba(6,38,22,0) 100%) !important;border:0 !important;box-shadow:none !important}
  body.admin-bar.has-hero-top header.nav:not(.scrolled){top:46px !important}
  body.has-hero-top header.nav:not(.scrolled) .wrap{height:64px !important;padding-left:16px !important;padding-right:16px !important;background:transparent !important;border:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  body.has-hero-top header.nav:not(.scrolled) .logo{color:#fff !important}
  body.has-hero-top header.nav:not(.scrolled) .logo small{color:#cfe2d2 !important}
  body.has-hero-top header.nav:not(.scrolled) .menu-btn{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.5) !important;color:#fff !important}
  body.has-hero-top header.nav:not(.scrolled) .hdr-cta{box-shadow:0 6px 16px rgba(0,0,0,.25)}
  body.has-hero-top header.nav.open{background:linear-gradient(180deg,#0a2a19 0%,#062616 100%) !important}
  .hero.cityhero .wrap{padding-top:calc(84px + env(safe-area-inset-top,0px)) !important}
}

/* v12.11: header merge on the whole website.
   - Pages with a photo or dark block at the top (home, areas, services, city pages): header floats over it (.has-hero-top, rules above).
   - Other pages: header floats with its normal glass bar, and the page starts below it (.header-float). */
body.header-float{padding-top:84px}
@media(max-width:760px){body.header-float{padding-top:64px}}
body.header-float header.nav{position:fixed !important;top:0 !important;left:0;right:0;z-index:60}
body.admin-bar.header-float header.nav{top:32px !important}
@media(max-width:782px){body.admin-bar.header-float header.nav{top:46px !important}}
/* top-state merge: smooth, same timing as the island morph (.6s, same easing) */
@media(min-width:761px){
  body.has-hero-top header.nav:not(.scrolled) .wrap{transition:background-color var(--mz-dur) var(--mz-ease),border-color var(--mz-dur) var(--mz-ease),box-shadow var(--mz-dur) var(--mz-ease),width var(--mz-dur) var(--mz-ease),margin var(--mz-dur) var(--mz-ease),height var(--mz-dur) var(--mz-ease),border-radius var(--mz-dur) var(--mz-ease)}
  body.has-hero-top header.nav.scrolled .wrap{transition:width var(--mz-dur) var(--mz-ease),margin var(--mz-dur) var(--mz-ease),height var(--mz-dur) var(--mz-ease),border-radius var(--mz-dur) var(--mz-ease),border-color .4s ease,box-shadow .5s ease,background-color var(--mz-dur) var(--mz-ease)}
}
/* pages whose top is a dark block: leave room so the title is not under the header */
body.has-hero-top .pagehead{padding-top:calc(112px + env(safe-area-inset-top,0px))}
@media(max-width:760px){body.has-hero-top .pagehead{padding-top:calc(94px + env(safe-area-inset-top,0px))}}

/* v12.14: space between the merged header and the homepage hero label */
body.home .hero .hero-in{padding-top:calc(84px + 40px + env(safe-area-inset-top,0px)) !important}
@media(max-width:760px){body.home .hero .hero-in{padding-top:calc(64px + 28px + env(safe-area-inset-top,0px)) !important}}

/* v12.15: header entrance matches the hero animation (same easing curve, starts as the hero line rises) */
@keyframes mzHeaderIn{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.js.loaded body.has-hero-top header.nav,.js.loaded body.header-float header.nav{animation:mzHeaderIn 1s cubic-bezier(.2,.8,.2,1) .3s both}
@media(prefers-reduced-motion:reduce){.js.loaded body.has-hero-top header.nav,.js.loaded body.header-float header.nav{animation:none}}

/* v12.16: hero slider buttons removed (the dots and arrows). Photos still change by themselves. */
.hs-dots,.hs-arrow{display:none !important}

/* v12.16: prominent section headings across the site */
main section:not(.hero) > .wrap > h2,main section:not(.hero) h2{font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.06;letter-spacing:-.02em;font-weight:800;position:relative;padding-bottom:18px;margin-bottom:18px}
main section:not(.hero) h2::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--lime))}
@media(max-width:760px){main section:not(.hero) h2{font-size:clamp(1.85rem,8vw,2.5rem);padding-bottom:14px;margin-bottom:14px}main section:not(.hero) h2::after{width:64px;height:5px}}

/* v12.17: bigger header. Top state (merged) and the other pages. The scroll island keeps its own size. */
@media(min-width:761px){
  body.has-hero-top header.nav:not(.scrolled) .wrap,body.header-float header.nav:not(.scrolled) .wrap{height:100px !important}
  body.has-hero-top header.nav:not(.scrolled) .logo,body.header-float header.nav:not(.scrolled) .logo{font-size:1.9rem !important}
  body.has-hero-top header.nav:not(.scrolled) .logo small,body.header-float header.nav:not(.scrolled) .logo small{font-size:.8rem !important}
  body.has-hero-top header.nav:not(.scrolled) .logo-leaf,body.header-float header.nav:not(.scrolled) .logo-leaf{width:40px !important;height:40px !important}
  body.has-hero-top header.nav:not(.scrolled) nav a,body.header-float header.nav:not(.scrolled) nav a{font-size:1.14rem !important;padding:12px 18px !important}
  body.has-hero-top header.nav:not(.scrolled) .hdr-cta,body.header-float header.nav:not(.scrolled) .hdr-cta{font-size:1.1rem !important;padding:14px 26px !important}
  body.header-float{padding-top:100px}
  body.home .hero .hero-in{padding-top:calc(100px + 40px + env(safe-area-inset-top,0px)) !important}
  body.has-hero-top .pagehead{padding-top:calc(124px + env(safe-area-inset-top,0px))}
}
@media(max-width:760px){
  body.has-hero-top header.nav:not(.scrolled) .wrap,body.header-float header.nav:not(.scrolled) .wrap{height:76px !important}
  body.has-hero-top header.nav:not(.scrolled) .logo,body.header-float header.nav:not(.scrolled) .logo{font-size:1.5rem !important}
  body.has-hero-top header.nav:not(.scrolled) .logo small,body.header-float header.nav:not(.scrolled) .logo small{font-size:.7rem !important}
  body.has-hero-top header.nav:not(.scrolled) .menu-btn,body.header-float header.nav:not(.scrolled) .menu-btn{width:50px !important;height:50px !important}
  body.header-float{padding-top:76px}
  body.home .hero .hero-in{padding-top:calc(76px + 28px + env(safe-area-inset-top,0px)) !important}
  body.has-hero-top .pagehead{padding-top:calc(102px + env(safe-area-inset-top,0px))}
}

/* v12.18: header refinements. Thicker lime edge, neater buttons with a clear hover, and a header that fits on phones. */
:root{--mz-ring:3px}
header.nav .wrap::before{box-shadow:0 0 0 1px rgba(183,227,90,.18)}
header.nav nav .mz-lens{box-shadow:inset 0 0 0 2px rgba(183,227,90,.55)}
@media(min-width:761px){
  header.nav nav>a:not(.cta),header.nav nav>.dd>a{font-weight:700;letter-spacing:.01em;border-radius:999px;padding:10px 18px;transition:background-color .25s ease,color .25s ease,transform .25s var(--mz-ease)}
  header.nav nav>a:not(.cta):hover,header.nav nav>.dd>a:hover{background:rgba(183,227,90,.2);color:var(--lime);transform:translateY(-1px)}
  header.nav nav>a.on,header.nav nav>.dd>a.on{background:rgba(183,227,90,.14);color:var(--lime)}
  header.nav nav a.cta,header.nav .hdr-cta{border-radius:999px;font-weight:800;box-shadow:0 6px 16px rgba(47,211,88,.28);transition:background-color .25s ease,transform .25s var(--mz-ease),box-shadow .25s ease}
  header.nav nav a.cta:hover,header.nav .hdr-cta:hover{background:var(--lime);color:#0f2a1a;transform:translateY(-2px);box-shadow:0 10px 22px rgba(183,227,90,.4)}
}
@media(max-width:760px){
  header.nav .wrap{gap:8px;padding-left:12px !important;padding-right:12px !important;flex-wrap:nowrap}
  header.nav .logo{font-size:1.3rem;min-width:0;white-space:nowrap}
  header.nav .logo small{font-size:.62rem}
  header.nav .logo-leaf{width:24px !important;height:24px !important}
  header.nav .hdr-cta{min-height:40px;padding:0 13px;font-size:.88rem;flex:none}
  header.nav .menu-btn{width:44px;height:44px;flex:none}
  body.has-hero-top header.nav:not(.scrolled) .wrap,body.header-float header.nav:not(.scrolled) .wrap{height:72px !important}
  body.has-hero-top header.nav:not(.scrolled) .logo,body.header-float header.nav:not(.scrolled) .logo{font-size:1.3rem !important}
  body.has-hero-top header.nav:not(.scrolled) .logo small,body.header-float header.nav:not(.scrolled) .logo small{font-size:.62rem !important}
  body.has-hero-top header.nav:not(.scrolled) .menu-btn,body.header-float header.nav:not(.scrolled) .menu-btn{width:44px !important;height:44px !important}
  body.header-float{padding-top:72px}
  body.home .hero .hero-in{padding-top:calc(72px + 28px + env(safe-area-inset-top,0px)) !important}
  body.has-hero-top .pagehead{padding-top:calc(98px + env(safe-area-inset-top,0px))}
}

/* v12.20: scroll truck removed from the header (the lime progress line stays). */
.roadbar{display:none !important}

/* ================= v12.24: image logo + more solid island header ================= */
/* The dynamic island background is now almost solid, so page content no longer shows through it. */
:root{--mz-island-bg:linear-gradient(135deg,rgba(6,38,22,.98) 0%,rgba(3,21,12,.96) 100%)}

/* image logo (header + footer) */
.logo.logo-img{display:inline-flex;align-items:center;flex:none;line-height:0;background:none}
.logo.logo-img img{display:block;height:auto;width:auto;max-width:100%;object-fit:contain}
header.nav .logo.logo-img{flex-wrap:nowrap;min-width:0}
header.nav .logo.logo-img img{height:58px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:transform .4s var(--mz-ease)}
header.nav .logo.logo-img:hover img{transform:scale(1.04)}
/* top-of-page bar (taller, 100px) */
@media(min-width:761px){
  body.has-hero-top header.nav:not(.scrolled) .logo.logo-img img,body.header-float header.nav:not(.scrolled) .logo.logo-img img{height:66px}
  /* island (62px tall) */
  header.nav.scrolled .logo.logo-img img{height:40px}
}
@media(min-width:761px) and (max-width:1023px){
  header.nav .logo.logo-img img{height:46px}
  body.has-hero-top header.nav:not(.scrolled) .logo.logo-img img,body.header-float header.nav:not(.scrolled) .logo.logo-img img{height:50px}
  header.nav.scrolled .logo.logo-img img{height:36px}
}
/* phones: header bar is 72px */
@media(max-width:760px){
  header.nav .logo.logo-img img,
  body.has-hero-top header.nav:not(.scrolled) .logo.logo-img img,body.header-float header.nav:not(.scrolled) .logo.logo-img img{height:42px}
  header.nav.scrolled .logo.logo-img img{height:36px}
}
@media(max-width:360px){
  header.nav .logo.logo-img img,
  body.has-hero-top header.nav:not(.scrolled) .logo.logo-img img,body.header-float header.nav:not(.scrolled) .logo.logo-img img{height:36px}
}
/* footer */
.ft-brand .logo.logo-img img{height:auto;width:min(260px,100%)}
@media(prefers-reduced-motion:reduce){header.nav .logo.logo-img img{transition:none}}

/* ================= v12.28: card-style dropdown menus (icon tile + title + short text, "View all" bar) ================= */
@media(min-width:761px){
  header.nav .dd .sub.mz-mega{display:block;width:min(680px,calc(100vw - 32px));min-width:0;padding:14px;border-radius:22px;border:1.5px solid rgba(183,227,90,.5);
    background:linear-gradient(180deg,#0a2a19 0%,#062616 100%);
    box-shadow:0 26px 60px -12px rgba(0,0,0,.6),0 0 0 1px rgba(183,227,90,.06),0 0 40px -14px rgba(183,227,90,.4);
    transform-origin:var(--mz-arrow,40px) 0}
  header.nav .dd .sub.mz-mega.mz-areas{width:min(380px,calc(100vw - 32px))}
  header.nav .dd .sub.mz-mega::before{left:var(--mz-arrow,40px)}
  .mz-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
  .mz-areas .mz-mgrid{grid-template-columns:1fr}

  header.nav .dd .sub.mz-mega a.mz-mi{display:flex;align-items:flex-start;gap:14px;padding:12px;border-radius:14px;color:#fff;white-space:normal;font-weight:400;
    transition:background-color .2s ease,transform .2s ease}
  header.nav .dd .sub.mz-mega a.mz-mi::before{display:none}
  header.nav .dd .sub.mz-mega a.mz-mi:hover,header.nav .dd .sub.mz-mega a.mz-mi:focus-visible{background:rgba(183,227,90,.1);padding-left:12px;color:#fff;outline:none}
  header.nav .dd .sub.mz-mega a.mz-mi:focus-visible{box-shadow:0 0 0 2px var(--lime) inset}

  .mz-mic{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(145deg,#4fb67c 0%,#2a7a4c 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -6px rgba(63,157,104,.7);
    transition:transform .25s var(--mz-ease,ease),box-shadow .25s ease}
  .mz-mic svg{width:24px;height:24px;display:block}
  a.mz-mi:hover .mz-mic,a.mz-mi:focus-visible .mz-mic{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -6px rgba(183,227,90,.5)}

  .mz-mt{display:block;min-width:0}
  .mz-mt b{display:block;font:700 1rem/1.3 "Source Sans 3",system-ui,sans-serif;color:#fff;transition:color .2s ease}
  .mz-mt small{display:block;margin-top:3px;font-size:.86rem;line-height:1.45;color:#a9c2b0;font-weight:400}
  a.mz-mi:hover .mz-mt b,a.mz-mi:focus-visible .mz-mt b{color:var(--lime)}

  header.nav .dd .sub.mz-mega a.mz-mall{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:15px 20px;border-radius:14px;
    background:rgba(255,255,255,.05);border:1px solid rgba(183,227,90,.16);color:var(--lime);font-weight:700;font-size:1rem;
    transition:background-color .2s ease,border-color .2s ease}
  header.nav .dd .sub.mz-mega a.mz-mall::before{display:none}
  header.nav .dd .sub.mz-mega a.mz-mall:hover,header.nav .dd .sub.mz-mega a.mz-mall:focus-visible{background:rgba(183,227,90,.14);border-color:rgba(183,227,90,.45);color:#fff;padding-left:20px;outline:none}
  .mz-mall svg{width:20px;height:20px;flex:none;transition:transform .25s ease}
  a.mz-mall:hover svg,a.mz-mall:focus-visible svg{transform:translateX(4px)}
}
@media(min-width:761px) and (max-width:900px){
  .mz-mgrid{grid-template-columns:1fr}
}
@media(max-width:760px){
  header.nav nav .dd .sub.mz-mega .mz-mgrid{display:flex;flex-direction:column;gap:2px}
  header.nav nav .dd .sub.mz-mega a.mz-mi{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 10px;color:#dcebe0;font-weight:500;white-space:normal}
  .mz-mt{display:block;min-width:0;line-height:1.3}
  header.nav nav .dd .sub.mz-mega a.mz-mi::before,header.nav nav .dd .sub.mz-mega a.mz-mall::before{display:none}
  .mz-mic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(183,227,90,.14);color:var(--lime)}
  .mz-mic svg{width:18px;height:18px;display:block}
  .mz-mt b{font-weight:600;font-size:1rem;color:inherit}
  .mz-mt small{display:none}
  header.nav nav .dd .sub.mz-mega a.mz-mall{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:11px 12px;color:var(--lime);font-weight:700}
  .mz-mall svg{width:18px;height:18px;flex:none}
}

/* v12.30: breadcrumb in the photo heroes wraps on small phones */
.hero .crumbs{flex-wrap:wrap;margin-bottom:14px}