/* ==========================================================================
   Bristol Tree Fellas — treesurgeonbristol.co.uk
   Mobile-first. Written to be read: tokens, then base, then components.
   ========================================================================== */

:root{
  --ink:#0b1611;
  --green:#14301f;
  --green-2:#1d4229;
  --green-3:#2c6340;
  --amber:#e0651c;
  --amber-d:#b34d10;
  --amber-l:#fdf0e6;
  --sand:#f4f7ef;
  --paper:#fff;
  --line:#dde6d6;
  --line-2:#ebf0e7;
  --body:#4d5a50;
  --muted:#7a857c;

  --wrap:1200px;
  --gut:20px;
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;

  --sh-1:0 1px 2px rgba(11,22,15,.06), 0 2px 8px rgba(11,22,15,.05);
  --sh-2:0 6px 18px rgba(11,22,15,.09), 0 2px 6px rgba(11,22,15,.05);
  --sh-3:0 18px 46px rgba(11,22,15,.16);

  --f-head:"Barlow Condensed",'Helvetica Neue',Arial,sans-serif;
  --f-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  --hdr-h:66px;
}

*,*::before,*::after{box-sizing:border-box}

/* overflow-x:clip (not hidden) so the parked mobile nav panel can sit off-canvas
   without inflating the document width — and so position:sticky still works. */
html{
  overflow-x:clip;
  overflow-y:auto;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 12px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow-x:clip;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

img,svg,iframe{max-width:100%}
img{height:auto;display:block}
a{color:var(--amber-d);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--amber)}

h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.004em;
  color:var(--green);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.15rem,7.4vw,3.9rem)}
h2{font-size:clamp(1.75rem,5.3vw,2.85rem)}
h3{font-size:clamp(1.2rem,3.2vw,1.4rem);line-height:1.2}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
strong{color:var(--green);font-weight:700}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

.section{padding:clamp(52px,8vw,92px) 0}
.section--alt{background:var(--sand)}
.section--dark{background:var(--green);color:#c6d6c8}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark strong{color:#fff}
.section--dark a:not(.btn){color:#f4bd8b}

.section-head{max-width:62ch;margin:0 0 clamp(28px,4vw,44px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.lede{font-size:clamp(1.02rem,2.4vw,1.16rem);line-height:1.62;color:var(--body)}
.section--dark .lede{color:#b6c9b9}
.center{text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-head);font-weight:700;font-size:.95rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-d);margin-bottom:12px;
}
.eyebrow svg{width:17px;height:17px;flex:none}
.eyebrow--light{color:#f2ac6e}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 22px;
  font-family:var(--f-body);font-size:.97rem;font-weight:700;line-height:1.2;
  text-decoration:none;border:2px solid transparent;border-radius:var(--r-sm);
  cursor:pointer;transition:background-color .16s,color .16s,border-color .16s,transform .12s,box-shadow .16s;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
/* Explicit width on button icons — an SVG with no intrinsic size stretches to
   fill the flex line inside a dark section otherwise. */
.btn svg{width:19px;height:19px;flex:none}

.btn--primary{background:var(--amber);border-color:var(--amber);color:#fff}
.btn--primary:hover{background:var(--amber-d);border-color:var(--amber-d);color:#fff;box-shadow:var(--sh-2)}
.btn--brand{background:#fff;border-color:#fff;color:var(--amber-d)}
.btn--brand:hover{background:var(--amber-l);border-color:var(--amber-l);color:var(--amber-d)}
.btn--dark{background:var(--green);border-color:var(--green);color:#fff}
.btn--dark:hover{background:var(--green-2);border-color:var(--green-2);color:#fff}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn--ghost-dark{background:transparent;border-color:var(--line);color:var(--green)}
.btn--ghost-dark:hover{background:var(--green);border-color:var(--green);color:#fff}
.btn--glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px)}
.btn--glass:hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff}
.btn--lg{min-height:56px;padding:15px 26px;font-size:1.03rem}
.btn--block{display:flex;width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn-row--center{justify-content:center;margin-top:34px}
.inline-arrow{width:17px;height:17px}

.link-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
  font-weight:700;font-size:.94rem;color:var(--amber-d);
}
.link-more svg{transition:transform .16s}

.icon-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:12px;
  background:var(--amber-l);color:var(--amber-d);
}
.icon-badge svg{width:23px;height:23px}

/* ------------------------------------------------------------------ topbar */
.topbar{position:relative;z-index:96;background:var(--ink);color:#a2b7a5;font-size:.86rem}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:10px 28px;
  flex-wrap:wrap;min-height:40px;padding-top:7px;padding-bottom:7px}
.topbar-loc{display:none;align-items:center;gap:8px;margin:0}
.topbar-loc svg{width:16px;height:16px;color:var(--amber);flex:none}
.topbar-links{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;justify-content:center}
.topbar-links a{display:inline-flex;align-items:center;gap:7px;color:#ccdacf;
  text-decoration:none;font-weight:600;word-break:break-word}
.topbar-links a:hover{color:#fff}
.topbar-links svg{width:15px;height:15px;color:var(--amber);flex:none}

/* ------------------------------------------------------------------ header */
.site-header{
  position:sticky;top:0;z-index:96;
  background:#fff;border-bottom:1px solid var(--line-2);
  transition:box-shadow .18s;
}
.site-header.is-stuck{box-shadow:var(--sh-2)}
.site-header .wrap{display:flex;align-items:center;gap:14px;min-height:var(--hdr-h)}

.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:none}
.brand-lockup{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{
  font-family:var(--f-head);font-weight:700;font-size:1.42rem;
  letter-spacing:.055em;color:var(--green);
}
.brand-text small{
  font-size:.6rem;font-weight:700;letter-spacing:.185em;
  text-transform:uppercase;color:var(--amber-d);margin-top:3px;
}
.brand-lockup--light .brand-text strong{color:#fff}
.brand-lockup--light .brand-text small{color:#f2ac6e}
@media (max-width:400px){
  .brand-mark{width:34px;height:34px}
  .brand-text strong{font-size:1.24rem;letter-spacing:.04em}
  .brand-text small{font-size:.55rem;letter-spacing:.15em}
}

.nav-toggle{
  position:relative;z-index:95;
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:8px 13px;
  background:var(--green);color:#fff;border:0;border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:.85rem;font-weight:700;cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px;flex:none}   /* flex:none — the long brand
   lockup squeezes the header row, and without it the bars icon shrinks to a sliver */
.nav-toggle .ico-x{display:none}
.nav-toggle[aria-expanded="true"] .ico-bars{display:none}
.nav-toggle[aria-expanded="true"] .ico-x{display:inline-block}
.header-cta{display:none}

/* ---- mobile drawer -------------------------------------------------- */
.nav{
  position:fixed;top:0;right:0;z-index:94;
  width:min(340px,86vw);height:100%;
  padding:110px 20px 36px;
  background:#fff;border-left:1px solid var(--line);
  box-shadow:var(--sh-3);
  transform:translateX(102%);
  transition:transform .24s ease;
  overflow-y:auto;overscroll-behavior:contain;
}
.nav.is-open{transform:translateX(0)}
/* Scrim behind the open drawer. The document click handler closes on a tap
   anywhere outside the panel, so this needs no listener of its own. */
body.nav-is-open::before{
  content:"";position:fixed;inset:0;z-index:93;
  background:rgba(7,18,11,.5);backdrop-filter:blur(2px);
}
body.nav-is-open{overflow:hidden}
.nav>a,.nav-item-row>a{
  display:block;padding:14px 4px;
  font-family:var(--f-head);font-size:1.3rem;font-weight:600;
  color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--line-2);
}
.nav>a[aria-current="page"],.nav-item-row>a[aria-current="page"]{color:var(--amber-d)}
.nav-item-row{display:flex;align-items:center;border-bottom:1px solid var(--line-2)}
.nav-item-row>a{flex:1;border-bottom:0}
.mnav-toggle{
  flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--green);cursor:pointer;
}
.mnav-chev{width:20px;height:20px;transform:rotate(90deg);transition:transform .18s}
.mnav-toggle[aria-expanded="true"] .mnav-chev{transform:rotate(-90deg)}
.mnav-sub{display:none}
/* Deliberately NOT the same class the dropdown uses — reusing one "open" class
   for both the JS accordion and the desktop dropdown sticks the dropdown open. */
.mnav-sub.is-expanded{display:block}
.mnav-sub-inner{padding:6px 0 12px}
.mnav-sub-inner a{
  display:flex;align-items:center;gap:11px;padding:11px 8px;
  color:var(--body);text-decoration:none;font-size:.95rem;font-weight:600;
}
.mnav-sub-inner svg{width:19px;height:19px;color:var(--amber-d);flex:none}
.mnav-sub-inner a:hover{color:var(--amber-d)}
.nav-dropdown{display:none}

.mnav-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.mnav-action{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 4px;border-radius:var(--r-sm);
  background:var(--sand);color:var(--green);text-decoration:none;
  font-size:.76rem;font-weight:700;
}
.mnav-action svg{width:20px;height:20px;color:var(--amber-d)}

/* The nav's own link colour would otherwise win over .btn--primary and render
   this CTA as plain dark text on the clay fill. Restate it. */
.nav .nav-cta,.nav a.nav-cta{
  display:flex;margin-top:20px;
  color:#fff;font-family:var(--f-body);font-size:.97rem;
  border-bottom:0;padding:14px 22px;
}
.nav .nav-cta:hover{color:#fff}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;isolation:isolate;background:var(--green);color:#dde8df}
.hero-bg{position:absolute;inset:0;z-index:-2;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(7,18,11,.62) 0%,rgba(8,20,13,.72) 40%,rgba(7,18,11,.92) 100%);
}
.hero-wrap{padding-top:clamp(38px,7vw,74px);padding-bottom:clamp(38px,7vw,80px)}
.hero-txt{max-width:640px}
.hero h1{color:#fff;margin-bottom:.42em}
.hero-lede{color:#c8d6ca;font-size:clamp(1.02rem,2.5vw,1.14rem);max-width:58ch}
.hero-points{display:flex;flex-direction:column;gap:9px;margin:22px 0 4px}
.hero-points li{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:#e6eee7;font-size:.98rem}
.hero-points svg{width:20px;height:20px;color:#f2ac6e;flex:none;margin-top:2px}

/* ------------------------------------------------------------------ forms */
.enquiry{
  background:#fff;border-radius:var(--r-lg);padding:22px 20px 24px;
  box-shadow:var(--sh-3);color:var(--body);
}
.enquiry-head{margin-bottom:16px}
.enquiry-head h2{font-size:1.6rem;margin-bottom:.3em;color:var(--green)}
.enquiry-head p{font-size:.93rem;color:var(--muted);margin:0}
.form-grid{display:grid;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.86rem;font-weight:700;color:var(--green)}
.req{color:var(--amber-d)}
.opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:12px 14px;
  font-family:var(--f-body);font-size:1rem;color:var(--green);
  background:#fff;border:2px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .14s,box-shadow .14s;
}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313202f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:19px;
  padding-right:42px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,101,28,.16);outline:none;
}
.field input:user-invalid,.field select:user-invalid{border-color:#d1483f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{
  display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
  font-size:.8rem;line-height:1.5;color:var(--muted);
}
.form-note svg{width:16px;height:16px;color:var(--amber-d);flex:none;margin-top:2px}
.enquiry .btn{margin-top:18px}
.form-error{
  background:#fdecea;border:1px solid #f3bcb6;border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:16px;font-size:.9rem;color:#8f2419;font-weight:600;
}
.form-error a{color:#8f2419}

/* ------------------------------------------------------------------ trust */
.trust{background:var(--green-2);padding:26px 0}
.trust-grid{display:grid;gap:18px}
.trust-grid li{display:flex;align-items:center;gap:13px}
.trust-grid .icon-badge{background:rgba(255,255,255,.1);color:#f2ac6e}
.trust-grid div{display:flex;flex-direction:column;min-width:0}
.trust-grid strong{color:#fff;font-size:1rem;line-height:1.3}
.trust-grid span{color:#adc2b0;font-size:.87rem;line-height:1.45}

/* ------------------------------------------------------------------ service cards */
.svc-grid{display:grid;gap:22px}
.svc-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#d2d5c1}
.svc-card:hover .link-more svg{transform:translateX(4px)}
.svc-card-media{display:block;overflow:hidden;background:var(--sand)}
.svc-card-media img{width:100%;height:200px;object-fit:cover;transition:transform .4s}
.svc-card:hover .svc-card-media img{transform:scale(1.04)}
.svc-card-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.svc-card-body .icon-badge{margin-bottom:14px}
.svc-card h3{margin-bottom:.4em}
.svc-card h3 a{color:var(--green);text-decoration:none}
.svc-card h3 a:hover{color:var(--amber-d)}
.svc-card p{font-size:.95rem;line-height:1.62}

/* ------------------------------------------------------------------ split */
.split{display:grid;gap:clamp(28px,4.5vw,52px);align-items:center}
.split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.split-media img{width:100%;height:auto}
.split-badge{
  position:absolute;left:16px;bottom:16px;right:16px;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r);
  background:rgba(20,48,31,.93);backdrop-filter:blur(4px);color:#cdd9cf;
}
.split-badge-mark{width:26px;height:29px;color:var(--amber);flex:none}
.split-badge span{display:flex;flex-direction:column;font-size:.85rem;line-height:1.45}
.split-badge strong{color:#fff;font-size:.98rem}
.split-txt h2{margin-bottom:.42em}

.tick-list{display:flex;flex-direction:column;gap:13px;margin:22px 0 0}
.tick-list li{display:flex;align-items:flex-start;gap:11px;line-height:1.6}
.tick-list>li>svg{width:21px;height:21px;color:var(--amber-d);flex:none;margin-top:3px}
.tick-list--tight{gap:9px;margin-top:18px}
.tick-list--tight li{font-size:.95rem}
.section--dark .tick-list>li>svg{color:#f2ac6e}

.fact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fact-row li{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:.85rem;font-weight:700;color:var(--green);
}
.fact-row .icon-badge{width:32px;height:32px;border-radius:9px}
.fact-row .icon-badge svg{width:17px;height:17px}

/* ------------------------------------------------------------------ steps */
.steps{display:grid;gap:16px;counter-reset:step}
.step{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:22px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.step-num{
  position:absolute;top:-11px;left:20px;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;font-weight:800;font-size:.88rem;
}
.step .icon-badge{margin-top:6px}
.step h3{margin-bottom:.3em;margin-top:4px}
.step p{font-size:.93rem;line-height:1.6;margin:0}

/* ------------------------------------------------------------------ storm */
.storm{display:grid;gap:clamp(26px,4vw,48px);align-items:center}
.storm-list{display:grid;gap:11px;padding:24px 22px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg)}
.storm-list li{display:flex;align-items:flex-start;gap:11px;font-size:.96rem;line-height:1.5;color:#d7e3d9}
.storm-list svg{width:20px;height:20px;color:#f2ac6e;flex:none;margin-top:2px}

/* ------------------------------------------------------------------ FAQ */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .16s,box-shadow .16s;
}
.faq details[open]{border-color:#d3d6c2;box-shadow:var(--sh-1)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 18px;cursor:pointer;list-style:none;
  font-family:var(--f-head);font-size:1.16rem;font-weight:600;line-height:1.25;color:var(--green);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber-d)}
.faq-chev{width:21px;height:21px;flex:none;color:var(--amber-d);transition:transform .2s}
.faq details[open] .faq-chev{transform:rotate(180deg)}
.faq-a{padding:0 18px 18px}
.faq-a p{font-size:.96rem;line-height:1.68;margin:0}

/* ------------------------------------------------------------------ map */
.map-areas{margin:0 auto clamp(20px,3vw,28px);max-width:920px}
.map-areas-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.map-areas-row span,.map-areas-more{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;
  background:var(--sand);border:1px solid var(--line);color:var(--green);
}
.section--alt .map-areas-row span{background:#fff}
.map-areas-more{background:var(--green);border-color:var(--green);color:#fff;text-decoration:none}
.map-areas-more:hover{background:var(--amber);border-color:var(--amber);color:#fff}
.map-areas-more svg{width:15px;height:15px}

.map-shell{max-width:1020px;margin:0 auto}
.map-frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--sand);
  height:clamp(300px,52vw,440px);
}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
/* Fallback sits behind the iframe, so it only shows if the embed is blocked. */
.map-fallback{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:24px;text-align:center;
}
.map-fallback strong{font-family:var(--f-head);font-size:1.4rem;color:var(--green)}
.map-fallback span{font-size:.92rem;color:var(--muted);max-width:34ch}
.map-fallback a{font-weight:700;font-size:.92rem}

/* ------------------------------------------------------------------ page heads */
.pagehead{
  background:var(--green);color:#c6d4c8;
  padding:clamp(40px,6.5vw,72px) 0 clamp(44px,7vw,78px);
  position:relative;overflow:hidden;
}
.pagehead::after{
  content:"";position:absolute;right:-40px;top:-30px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(224,101,28,.34),transparent 68%);pointer-events:none;
}
.pagehead h1{color:#fff;max-width:20ch}
.pagehead .lede{color:#b7cbba;max-width:62ch}
.pagehead--tight{padding-bottom:clamp(36px,5vw,56px)}

.crumbs{padding:14px 0 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.83rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:#c5d3c7}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--amber-d);text-decoration:underline}
.crumbs [aria-current]{color:var(--green);font-weight:600}

/* ------------------------------------------------------------------ jumpbar */
.jumpbar{background:#fff;border-bottom:1px solid var(--line-2);position:relative;z-index:5}
.jumpbar-row{
  display:flex;gap:8px;overflow-x:auto;padding:12px 0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.jumpbar-row::-webkit-scrollbar{display:none}
.jumpbar-row a{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:.86rem;font-weight:700;color:var(--green);text-decoration:none;white-space:nowrap;
}
.jumpbar-row a:hover{background:var(--green);border-color:var(--green);color:#fff}
.jumpbar-row a:hover svg{color:#fff}
.jumpbar-row svg{width:17px;height:17px;color:var(--amber-d)}

/* ------------------------------------------------------------------ coverage */
.area-groups{display:grid;gap:26px}
.area-group{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px;box-shadow:var(--sh-1);
}
.area-group-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding-bottom:14px;margin-bottom:6px;border-bottom:2px solid var(--amber-l);
  font-size:clamp(1.25rem,3.4vw,1.5rem);
}
.area-count{
  font-family:var(--f-body);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber-d);background:var(--amber-l);
  padding:4px 10px;border-radius:999px;
}
.area-list{display:grid;gap:2px}
.area-item{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.area-item:last-child{border-bottom:0}
.area-pin{display:inline-flex;flex:none;margin-top:3px;color:var(--amber-d)}
.area-pin svg{width:19px;height:19px}
.area-item div{display:flex;flex-direction:column;gap:2px;min-width:0}
.area-item strong{font-size:1.01rem;color:var(--green)}
.area-item span{font-size:.9rem;line-height:1.55;color:var(--body)}

/* ------------------------------------------------------------------ cards */
.value-grid{display:grid;gap:18px}
.value-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;box-shadow:var(--sh-1);
}
.value-card .icon-badge{margin-bottom:16px}
.value-card h3{margin-bottom:.42em}
.value-card p{font-size:.94rem;line-height:1.65;margin:0}

.side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;box-shadow:var(--sh-1);
}
.side-card h3,.side-card-h{font-size:1.3rem;margin-bottom:.6em;color:var(--green)}
.side-links{display:grid;gap:2px;margin-bottom:20px}
.side-links a{
  display:flex;align-items:center;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--line-2);
  color:var(--green);text-decoration:none;font-weight:600;font-size:.95rem;
}
.side-links li:last-child a{border-bottom:0}
.side-links a:hover{color:var(--amber-d)}
.side-links svg{width:20px;height:20px;color:var(--amber-d);flex:none}
.side-card-foot{display:grid;gap:10px}
/* A dark card nested inside a light section: restate every colour, or the
   surrounding light rules leak in and the text disappears. */
.side-card--dark{background:var(--green);border-color:var(--green);color:#bdcfc0}
.side-card--dark h2,.side-card--dark h3,.side-card--dark .side-card-h,.side-card--dark strong{color:#fff}
.side-card--dark p{font-size:.94rem}
.side-card--dark .icon-badge{background:rgba(255,255,255,.12);color:#f2ac6e;margin-bottom:16px}
.side-card--dark .btn{margin-top:6px}

.contact-grid{display:grid;gap:28px}
.contact-list{display:grid;gap:20px}
.contact-list li{display:flex;align-items:flex-start;gap:14px}
.contact-list div{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-list strong{font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact-list a{font-size:1.06rem;font-weight:700;color:var(--green);text-decoration:none;word-break:break-word}
.contact-list a:hover{color:var(--amber-d)}
.contact-list span{font-size:.94rem;color:var(--body)}
.contact-list .muted{font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:3px}
.contact-side{display:grid;gap:20px;align-content:start}

/* ------------------------------------------------------------------ notices */
.narrow-page{background:var(--sand)}
.notice-card{
  max-width:720px;margin:0 auto;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(30px,5vw,48px) clamp(22px,4vw,44px);box-shadow:var(--sh-2);
}
.notice-mark{display:block;margin-bottom:16px}
.notice-shield{width:56px;height:63px}
.next-steps{display:grid;gap:14px;margin:28px 0 24px;text-align:left}
.next-steps li{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:18px 18px 18px 16px;background:var(--sand);border-radius:var(--r)}
.next-steps .step-num{position:static;flex:none;margin-top:2px}
.next-steps div{display:flex;flex-direction:column;gap:3px}
.next-steps span{font-size:.92rem;line-height:1.55}
.notice-urgent{
  display:flex;align-items:flex-start;gap:10px;text-align:left;
  background:var(--amber-l);border-radius:var(--r);padding:14px 16px;
  font-size:.92rem;line-height:1.55;color:#7a3a0c;
}
.notice-urgent svg{width:20px;height:20px;color:var(--amber-d);flex:none;margin-top:2px}
.notice-urgent a{color:#7a3a0c;font-weight:700}
.notice-card .btn-row{justify-content:center}
.notfound-links{display:grid;gap:2px;max-width:340px;margin:26px auto 0;text-align:left}
.notfound-links a{
  display:flex;align-items:center;gap:10px;padding:13px 4px;
  border-bottom:1px solid var(--line-2);color:var(--green);
  text-decoration:none;font-weight:600;
}
.notfound-links a:hover{color:var(--amber-d)}
.notfound-links svg{color:var(--amber-d);flex:none}

/* ------------------------------------------------------------------ CTA band */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-3) 100%);
  color:#c6d6c8;border-radius:var(--r-lg);
  padding:clamp(30px,5vw,52px) clamp(22px,4vw,48px);
}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{font-size:1.01rem;line-height:1.62;max-width:62ch;color:#b7cbba}
.cta-band-mark{
  position:absolute;right:-38px;bottom:-56px;z-index:-1;
  width:250px;height:280px;color:rgba(255,255,255,.05);
}
.cta-band .btn-row{margin-top:26px}

/* ------------------------------------------------------------------ footer */
.site-footer{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:#98ae9c;padding:clamp(44px,6vw,68px) 0 24px;
  font-size:.94rem;
}
.footer-mark{position:absolute;right:-60px;top:-40px;z-index:-1;
  width:300px;height:336px;color:rgba(255,255,255,.026)}
.footer-grid{display:grid;gap:32px}
.footer-brand .brand-lockup{margin-bottom:16px}
.footer-brand p{line-height:1.65;max-width:44ch}
.footer-contact{display:grid;gap:9px;margin-top:16px}
.footer-contact a{display:inline-flex;align-items:center;gap:9px;color:#fff;
  text-decoration:none;font-weight:700;word-break:break-word}
.footer-contact a:hover{color:#f2ac6e}
.footer-contact svg{width:18px;height:18px;color:var(--amber);flex:none}
.footer-h{
  font-family:var(--f-head);font-size:1.12rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:#fff;margin:0 0 14px;
}
.footer-list{display:grid;gap:9px}
.footer-list a{color:#9fb5a3;text-decoration:none}
.footer-list a:hover{color:#f2ac6e}
.footer-list strong{color:#fff;display:inline-flex;align-items:center;gap:6px}
.footer-list svg{width:15px;height:15px}
.footer-bottom{
  display:flex;flex-direction:column;gap:8px;
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);
  font-size:.84rem;color:#7d9581;
}

/* ------------------------------------------------------------------ sticky CTAs */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.callbar .btn{min-height:48px;padding:11px 12px;font-size:.9rem}
.callbar .btn--brand{background:var(--green);border-color:var(--green);color:#fff}
.side-cta{display:none}
body{padding-bottom:70px}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width:480px){
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:18px 26px}
}

@media (min-width:640px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .field--full{grid-column:1/-1}
  .enquiry{padding:26px 24px 28px}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center}
  .storm-list{grid-template-columns:repeat(2,1fr)}
  .next-steps{grid-template-columns:repeat(3,1fr)}
  .next-steps li{flex-direction:column}
}

@media (min-width:860px){
  .area-groups{grid-template-columns:repeat(2,1fr);gap:24px}
  .topbar-loc{display:flex}
  .topbar .wrap{justify-content:space-between}
  .split{grid-template-columns:1fr 1fr}
  .split--rev .split-media{order:2}
  .split--narrow{grid-template-columns:1.55fr 1fr;align-items:start}
  .storm{grid-template-columns:1.15fr .85fr}
  .contact-grid{grid-template-columns:1.25fr .75fr;align-items:start}
}

@media (min-width:1024px){
  :root{--hdr-h:78px;--gut:28px}
  body{padding-bottom:0}
  .callbar{display:none}

  .site-header .wrap{gap:22px}
  .brand-mark{width:40px;height:45px}
  .brand-text strong{font-size:1.68rem}
  .brand-text small{font-size:.66rem}
  .nav-toggle{display:none}
  .header-cta{display:inline-flex;flex:none}

  /* Desktop: the drawer becomes an inline row. Reset every mobile-only rule. */
  .nav{
    position:static;width:auto;height:auto;padding:0;
    display:flex;align-items:center;gap:4px;
    background:transparent;border:0;box-shadow:none;transform:none;overflow:visible;
  }
  .nav>a,.nav-item-row>a{
    padding:10px 14px;border-bottom:0;border-radius:var(--r-sm);
    font-family:var(--f-body);font-size:.97rem;font-weight:600;
  }
  .nav>a:hover,.nav-item-row>a:hover{background:var(--sand);color:var(--amber-d)}
  .nav>a[aria-current="page"],.nav-item-row>a[aria-current="page"]{
    color:var(--amber-d);background:var(--amber-l);
  }
  .mnav-actions,.mnav-toggle,.mnav-sub{display:none}
  .nav .nav-cta,.nav a.nav-cta{display:none}

  .nav-item{position:relative}
  .nav-item-row{border-bottom:0}
  .nav-dropdown{
    display:block;position:absolute;top:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(-8px);
    width:min(660px,88vw);padding:16px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-3);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .16s,transform .16s,visibility .16s;
  }
  .nav-item.has-drop:hover .nav-dropdown,
  .nav-item.has-drop:focus-within .nav-dropdown{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown::before{
    content:"";position:absolute;top:-10px;left:0;right:0;height:10px;
  }
  .nav-dropdown-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
  .nav-drop-link{
    display:flex;align-items:center;gap:12px;padding:11px 12px;
    border-radius:var(--r-sm);text-decoration:none;
  }
  .nav-drop-link:hover{background:var(--sand)}
  .nav-drop-link .icon-badge{width:38px;height:38px;border-radius:10px}
  .nav-drop-link .icon-badge svg{width:20px;height:20px}
  .nav-drop-txt{display:flex;flex-direction:column;min-width:0}
  .nav-drop-txt strong{font-family:var(--f-body);font-size:.94rem;line-height:1.3;color:var(--green)}
  .nav-drop-txt small{font-size:.78rem;color:var(--muted);line-height:1.35;margin-top:2px}
  .nav-drop-all{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin-top:10px;padding:12px;border-radius:var(--r-sm);
    background:var(--green);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;
  }
  .nav-drop-all:hover{background:var(--amber);color:#fff}
  .nav-drop-all svg{width:17px;height:17px}

  /* Directional scrim: heavy under the headline, light enough on the right that
     the photograph still reads in the gap beside the enquiry card. */
  .hero::after{
    background:linear-gradient(102deg,
      rgba(6,16,10,.92) 0%, rgba(6,16,10,.80) 26%,
      rgba(6,16,10,.42) 52%, rgba(6,16,10,.20) 100%);
  }
  .hero-bg img{object-position:62% 42%}
  .hero-wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;
    padding-top:clamp(48px,5.4vw,78px);padding-bottom:clamp(48px,5.4vw,84px)}
  .hero-txt{max-width:none}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  /* At four across the side-by-side icon leaves too little room for the heading,
     so stack it and give the text the full card width. */
  .step{flex-direction:column;gap:0}
  .step .icon-badge{margin:8px 0 14px}
  .value-grid{grid-template-columns:repeat(4,1fr)}
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
  .cta-band{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
  .cta-band .btn-row{margin-top:0;flex-direction:column}
  .cta-band .btn{width:100%}

  .side-cta{
    position:fixed;right:0;top:52%;z-index:70;
    display:flex;align-items:center;gap:9px;
    padding:13px 16px;border-radius:var(--r-sm) 0 0 var(--r-sm);
    background:var(--amber);color:#fff;text-decoration:none;
    font-weight:700;font-size:.9rem;
    transform:translateY(-50%) translateX(calc(100% - 46px));
    transition:transform .2s;box-shadow:var(--sh-2);
  }
  .side-cta:hover,.side-cta:focus-visible{transform:translateY(-50%) translateX(0);color:#fff}
  .side-cta svg{width:20px;height:20px;flex:none}
}

@media (min-width:1180px){
  .nav-dropdown-grid{grid-template-columns:repeat(3,1fr)}
  .nav-dropdown{width:min(880px,90vw)}
}

/* --------------------------------------------------------------------------
   Mobile hero: lift the enquiry card up under the H1 so it is above the fold,
   without reordering the source (which would put the form before the heading
   for screen readers and for search engines). display:contents promotes the
   hero text's children into the hero grid so they can be ordered around it.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .hero-wrap{display:grid;gap:0}
  .hero-txt{display:contents}
  .hero-txt>.eyebrow{order:1}
  .hero-txt>h1{order:2}
  .hero-txt>.hero-lede{order:3}
  /* The mobile hero is tall (it carries the form), so stretching the photo over
     all of it just crops into a patch of sky. Run it as a band across the
     headline instead and fade it into the hero's own navy behind the form. */
  .hero-bg{inset:0 0 auto;height:470px}
  .hero-bg img{object-position:center 58%}
  .hero::after{
    background:linear-gradient(180deg,
      rgba(7,18,11,.50) 0px, rgba(7,18,11,.66) 210px,
      rgba(14,34,22,.92) 380px, var(--green) 462px);
  }
  .hero-form{order:4;margin:22px 0 4px}
  .hero h1{font-size:clamp(2.05rem,8.2vw,2.9rem);margin-bottom:.34em}
  .hero-lede{font-size:1rem;line-height:1.55}
  .hero-txt>.hero-points{order:5;margin-top:4px}
  .hero-txt>.btn-row{order:6}
}