/* Fjalla One 400 normal latin-ext */
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fjalla-one-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fjalla One 400 normal latin */
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fjalla-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Readex Pro 160 700 normal latin-ext */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url(/assets/fonts/readex-pro-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Readex Pro 160 700 normal latin */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url(/assets/fonts/readex-pro-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tasman Arborist (tasmanarborist.co.nz). Ported from the hero mock Steve saw on 3 Nov 2026
   (_builders/tasman-arborist/hero-mock.html): Fjalla One headings, Readex Pro text, deep navy ink, apple red as the one
   accent, white and warm grey grounds. The signature is the LINZ map with town pins ("Your place on the bay").
   build_site.py writes public/assets/site.css = _build/fonts.css + this file. */
:root{
  --ink:#13243A;      /* deep navy: headings, header button, footer */
  --ink-2:#3D4A5E;    /* body text: 9.1:1 on white, 8.2:1 on warm */
  --ink-3:#5D6878;    /* small print: 5.9:1 on white */
  --red:#D62839;      /* apple red, fills only: white on it 4.97:1 */
  --red-ink:#B21E2D;  /* red for text on white or warm: 6.4:1 / 5.8:1 */
  --paper:#FFFFFF;
  --warm:#F4F1EC;
  --line:#E4DED4;
  --sea:#1D4F78;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:'Readex Pro',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--ink-2);background:var(--paper);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
h1,h2,h3{color:var(--ink);margin:0}
h2{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-.003em;text-wrap:balance}
h3{font-size:19px;font-weight:600;line-height:1.3}
p{margin:0 0 1em}
.wrap{max-width:1440px;margin:0 auto;padding:0 64px}
.ico{width:1.1em;height:1.1em;flex:none}
.skip{position:absolute;left:16px;top:-80px}.skip:focus{top:12px;z-index:50;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.x[hidden],[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:8px;font:inherit;font-weight:600;
  text-decoration:none;line-height:1.15;cursor:pointer;white-space:nowrap}
.btn-quote{background:var(--red);color:#fff;padding:18px 26px;font-size:18px}
.btn-quote:hover{background:#BF2133}
.btn-sm{padding:13px 18px;font-size:16px}
.btn-call{background:var(--ink);color:#fff;padding:14px 18px;font-size:15.5px}
.btn-call .m-only{display:none}
.or-call{font-size:17px;color:var(--ink-2)}
.or-call a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:1px;white-space:nowrap}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--red-ink);text-decoration:none;margin-top:4px}
.more:hover{text-decoration:underline}

/* header */
.site-head{background:var(--paper);border-bottom:1px solid #ECE7DF;position:relative;z-index:20}
.hbar{display:flex;align-items:center;height:96px;gap:28px}
.brand{display:block;flex:none}
.brand img{height:78px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-size:15.5px;font-weight:500;color:var(--ink);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--red)}
.btn-menu{display:none}

/* breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 auto;padding:16px 64px 0;max-width:1440px;font-size:14px;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:#A6AEB9}
.crumbs a{color:var(--ink-3)}

/* hero */
.hero{padding:30px 0 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) min(660px,50%);grid-template-areas:"copy visual" "facts visual";column-gap:56px;row-gap:28px}
.copy{grid-area:copy;padding-top:14px}
.facts{grid-area:facts;align-self:end}
.visual{grid-area:visual;min-width:0}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink);margin:0 0 14px}
h1{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:clamp(42px,4.6vw,66px);line-height:1.03;letter-spacing:-.005em;color:var(--ink);max-width:9em;text-wrap:balance}
h1 em{font-style:normal;color:var(--red-ink)}
.lede{margin:22px 0 0;font-size:18.5px;line-height:1.6;color:var(--ink-2);max-width:34em}
.cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:30px}
.facts dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.facts dl div{background:var(--warm);border-radius:8px;padding:14px 18px 15px}
.facts dt{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.facts dd{font-size:16px;line-height:1.4;color:var(--ink-2);margin:3px 0 0}

/* the map */
.mapwrap{position:relative}
.mapfig{position:relative}
.mappanel{position:relative;border-radius:12px;overflow:hidden;background:#B9DDF1;aspect-ratio:1220/1190}
.mappanel picture,.map-img{display:block;width:100%;height:100%}
.map-img{object-fit:cover}
.pins{list-style:none;margin:0;padding:0}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2}
.pin>*{position:absolute;top:0;display:flex;align-items:center;gap:6px;transform:translateY(-50%);white-space:nowrap;min-height:24px;
  padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-decoration:none;cursor:default}
.pin--r>*{left:-9px}
.pin--l>*{right:-9px;flex-direction:row-reverse}
.pin button,.pin a{cursor:pointer}
.dot{width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(4,10,22,.45);flex:none;transition:transform .15s}
.pl{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.2;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.88);
  box-shadow:0 1px 2px rgba(4,10,22,.12)}
.pin button:hover .dot,.pin a:hover .dot{transform:scale(1.18)}
.pin button:hover .pl,.pin a:hover .pl{background:#fff;text-decoration:underline}
.pin.is-on{z-index:3}
.pin.is-on .dot{background:var(--red);transform:scale(1.25)}
.pin.is-on .pl,.pin.is-on button:hover .pl,.pin.is-on a:hover .pl{background:var(--red);color:#fff;box-shadow:0 3px 10px rgba(4,10,22,.3)}
.bay{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font-family:'Fjalla One',Impact,sans-serif;font-size:24px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sea);text-align:center;line-height:1.1;pointer-events:none;z-index:1}
.bay small{display:block;font-family:'Readex Pro',sans-serif;font-size:12.5px;letter-spacing:.06em;text-transform:none;margin-top:4px}
.map-credit{margin:10px 2px 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.map-credit a{color:var(--ink-3)}

/* cards over the sea */
.mapcard{position:absolute;left:46%;top:2%;width:52%;background:#fff;border-radius:10px;padding:18px 18px 16px;
  box-shadow:0 14px 34px rgba(4,10,22,.32);z-index:4}
.mapcard h2{font-size:26px;line-height:1.1}
.mapcard--static .ready,.mapcard--static .glance{margin-top:12px}
.mapcard p{font-size:15px;margin:10px 0 0}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;font-size:15.5px;color:var(--red-ink);text-decoration:none}
.card-link:hover{text-decoration:underline}
.ready{list-style:none;margin:0;padding:0}
.ready li{position:relative;padding-left:18px;font-size:15px;line-height:1.4;color:var(--ink-2);margin-top:6px}
.ready li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--red)}
.glance{margin:0;display:grid;gap:0}
.glance div{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.glance div:last-child{border-bottom:0}
.glance dt{font-size:13.5px;font-weight:600;color:var(--ink)}
.glance dd{margin:0;font-size:14.5px;line-height:1.4}
.mapwrap .bay{display:none}   /* hidden while a card sits on the sea; shown at 1340 and below */

/* the picker card */
.pick h2{margin-bottom:12px}
.pick-sum{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ps{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:8px;
  padding:7px 10px;font:inherit;cursor:pointer;min-width:0}
.ps-k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ps-v{font-size:15px;font-weight:600;color:var(--ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ps.is-empty .ps-v{color:var(--ink-3);font-weight:500}
.ps[aria-current="step"]{border-color:var(--ink)}
.ps.is-done .ps-k::after{content:" \2713";color:var(--red-ink)}
.pick-q{margin-top:12px}
.pq-h{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin:0 0 8px}
#pk-town{width:100%;font:inherit;font-size:15.5px;padding:10px 12px;border:1.5px solid #B9C0CA;border-radius:8px;background:#fff;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);background:var(--warm);border:1.5px solid transparent;border-radius:999px;
  padding:7px 13px;cursor:pointer;line-height:1.2}
.chip:hover{border-color:#C8C0B2}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.pick-ready .ready li:first-child{margin-top:0}
.pick-go{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pk-status{margin:0;font-size:14px;font-weight:600;color:var(--red-ink)}

/* sections */
.sec{padding:80px 0}
.sec--warm{background:var(--warm)}
.sec>.wrap>h2{max-width:22em;margin-bottom:28px}
.sec-lede{font-size:18px;max-width:40em;margin:-12px 0 28px}
.sec--narrow .wrap>*{max-width:46em}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:72px;align-items:start}
.split-copy h2{margin-bottom:22px}
.split-copy p{max-width:38em}
.split-side .ph{max-width:400px;margin-left:auto}
.split--flip .split-side .ph{margin-left:0;margin-right:auto}
.split-side .ph img{aspect-ratio:4/5}
.split--drawing{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sub-h{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:28px;line-height:1.1;margin:30px 0 12px}
.ticks{list-style:none;margin:0 0 1.2em;padding:0;max-width:40em}
.ticks li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:8px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}

/* photos */
.ph{margin:0}
.ph img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:var(--warm)}
.ph--wide img{aspect-ratio:4/3}
.ph figcaption,.drawing figcaption,.tall figcaption{margin-top:9px;font-size:14px;line-height:1.45;color:var(--ink-3)}
.gallery{display:grid;gap:22px;margin:8px 0 34px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.drawing{margin:0}
.drawing svg{display:block;width:100%;height:auto;border-radius:8px}

/* big-tree band */
.band{background:var(--warm);padding:84px 0 88px}
.band-grid{display:grid;grid-template-columns:410px minmax(0,1fr);column-gap:72px}
.tall{margin:0}
.tall img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.band-copy{display:flex;flex-direction:column;justify-content:space-between;gap:34px;padding-bottom:30px}
.band-copy h2{font-size:clamp(36px,3.9vw,54px);max-width:11em;margin-bottom:22px}
.band-copy p{font-size:18px;line-height:1.65;max-width:34em}
.creds{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);max-width:36em}
.creds li{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.creds b{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:30px;line-height:1;color:var(--ink)}
.creds span{font-size:16px}
.creds--wide{margin-top:26px}

/* jobs (home) */
.jobs{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:64px;align-items:start}
.job-lead h3{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:34px;margin:22px 0 10px}
.job-lead h3 a{text-decoration:none}
.job-lead p{max-width:36em}
.job-more-h{font-size:15px;font-weight:600;color:var(--ink-2,var(--ink));margin:0 0 4px}
.job-more ul,.town-jobs{list-style:none;margin:0;padding:0}
.job-more li a,.town-jobs li a{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.job-more li:first-child a{border-top:2px solid var(--ink)}
.job-more h3,.town-jobs h3{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:28px;line-height:1.1;grid-column:1}
.job-more p,.town-jobs p{grid-column:1;margin:6px 0 0;max-width:30em}
.go{grid-column:2;grid-row:1/span 2;align-self:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--red-ink)}
.job-more li a:hover .go,.town-jobs li a:hover .go{background:var(--red);border-color:var(--red);color:#fff}
.job-more li a:hover h3,.town-jobs li a:hover h3{text-decoration:underline}
.town-jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:2px solid var(--ink)}

/* who you deal with */
.who{display:grid;grid-template-columns:380px minmax(0,1fr);column-gap:72px;align-items:center}
.who-copy h2{margin-bottom:18px}
.who-name{display:flex;flex-direction:column;margin:0 0 18px}
.who-name b{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:30px;color:var(--ink);line-height:1.1}
.who-name span{font-size:16px;font-weight:600;color:var(--red-ink)}
.who-copy p{font-size:18px;max-width:34em}

/* steps (red band) */
.steps-band{background:var(--red);color:#fff;padding:78px 0 84px}
.steps-band h2{color:#fff;margin-bottom:34px;max-width:20em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:st}
.steps li{counter-increment:st;border-top:2px solid rgba(255,255,255,.75);padding-top:18px}
.steps li::before{content:counter(st);display:block;font-family:'Fjalla One',Impact,sans-serif;font-size:44px;line-height:1;color:#fff;margin-bottom:12px}
.steps h3{color:#fff;font-size:20px;margin-bottom:8px}
.steps p{color:#fff;font-size:16px;margin:0}


/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.reviews--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.review{margin:0;background:#fff;border-radius:10px;padding:24px 24px 20px;border:1px solid var(--line);display:flex;flex-direction:column}
.sec--warm .review{border-color:transparent}
.review blockquote{margin:0 0 16px;font-size:17px;line-height:1.6;color:var(--ink)}
.review blockquote p{margin:0 0 .6em}
.review figcaption{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px;color:var(--ink-3)}
.review figcaption b{color:var(--ink);font-size:15.5px}
.stars{color:var(--red-ink);letter-spacing:.12em;font-size:14px;margin-left:auto}

/* tips (town pages) */
.tips{list-style:none;margin:0;padding:0;counter-reset:tp;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tips li{counter-increment:tp;background:#fff;border-radius:10px;padding:22px 22px 20px;font-size:16px;line-height:1.55}
.tips li::before{content:counter(tp);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  font-family:'Fjalla One',Impact,sans-serif;font-size:18px;margin-bottom:12px}
.nearby{margin:26px 0 0;font-size:16px}
.nearby a{font-weight:600}

/* about */
.hero--about .hero-grid{grid-template-columns:minmax(0,1fr) min(440px,40%)}
.hero--about .ph img{border-radius:12px}
.sec--creds .wrap>p{max-width:40em;font-size:18px}
.creds-row{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:2px solid var(--ink)}
.creds-row li{padding-top:18px;display:flex;flex-direction:column;gap:6px}
.creds-row b{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:44px;line-height:1;color:var(--ink)}
.creds-row span{font-size:16px}
.split--flip .split-copy{order:2}
.split--flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.reviews--1{grid-template-columns:minmax(0,1fr);max-width:640px}

/* towns hub */

/* price */
.price{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:72px;align-items:start}
.price h2{margin-bottom:22px}
.price-cta{background:var(--ink);color:#fff;border-radius:12px;padding:30px 30px 26px}
.price-cta p{color:#D7DEE8}
.price-cta .price-big{font-family:'Fjalla One',Impact,sans-serif;font-size:32px;line-height:1.1;color:#fff;margin-bottom:12px}
.price-cta .or-call{color:#D7DEE8;margin:14px 0 0}
.price-cta .or-call a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:72px;align-items:start}
.faq-grid h2{margin-bottom:16px}
.faq-call{font-size:16px}
.faq-call a{font-weight:600}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:2px solid var(--ink)}
.faq-list summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:600;font-size:17.5px;color:var(--ink);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:26px;font-weight:400;color:var(--red-ink)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{margin:0 0 18px;max-width:42em}

/* quote form */
.quote{background:var(--warm);padding:84px 0 92px}
.quote-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:72px;align-items:start}
.quote-side h2{margin-bottom:16px}
.quote-side .lede{margin:0 0 26px}
.ready-box{background:#fff;border-radius:10px;padding:22px 24px}
.ready-box h3{font-size:17px;margin-bottom:6px}
.next{margin:24px 0 0;font-size:16px}
.next a{font-weight:600}
.form-card{background:#fff;border-radius:12px;padding:32px 32px 26px;box-shadow:0 10px 30px rgba(19,36,58,.07)}
.form{display:grid;gap:18px}
.f-group{border:0;margin:0;padding:0;min-width:0}
.f-group legend,.field label{display:block;font-weight:600;font-size:15.5px;color:var(--ink);margin-bottom:8px;padding:0}
.optional{font-weight:400;color:var(--ink-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex;align-items:center;gap:8px;border:1.5px solid #CFC8BC;border-radius:8px;padding:9px 13px;font-size:15.5px;cursor:pointer;background:#fff;color:var(--ink)}
.opt input{margin:0;accent-color:var(--red);width:17px;height:17px}
.opt:has(input:checked){border-color:var(--ink);background:#F6F7F9}
.field input,.field select,.field textarea{display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);padding:12px 13px;border:1.5px solid #B9C0CA;border-radius:8px;background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(214,40,57,.35);outline-offset:1px;border-color:var(--ink)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wg-photos input[type=file]{font-size:15px}
.wg-photos-list{list-style:none;margin:8px 0 0;padding:0;font-size:14px}
.btn-send{justify-self:start;margin-top:4px}
.cf-turnstile{justify-self:start;max-width:100%}
form[data-site-key^="0x"] .cf-turnstile{min-height:65px}
.small{font-size:13.5px;color:var(--ink-3);margin:0}
.small a{color:var(--ink-3)}
[data-wg-status]{margin:0;font-size:15px;color:var(--ink)}
[data-wg-error]{background:#FBEAEC;border-left:4px solid var(--red);padding:12px 14px;border-radius:6px;color:var(--ink)}
.success{padding:10px 0}
.success h3{font-family:'Fjalla One',Impact,sans-serif;font-weight:400;font-size:32px;margin-bottom:10px}
.wg-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* site map, policies, 404 */
.sitemap h1,.notfound h1{margin-bottom:28px}
.sitemap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.sitemap-grid h2{font-size:28px;margin-bottom:12px}
.sitemap-grid ul{margin:0;padding-left:18px}
.sitemap-grid li{margin:6px 0}
.prose .wrap{max-width:860px;overflow-wrap:anywhere}
.prose h1{font-size:clamp(38px,4vw,54px);margin-bottom:24px}
.prose h2{font-size:28px;margin:32px 0 12px}
.nf-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* footer */
.ftr{background:var(--ink);color:#C9D2DE;padding:56px 0 40px}
.ftr a{color:#fff}
.ftr-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:36px;padding-bottom:32px;border-bottom:1px solid #2E4058}
.ftr-logo img{height:96px;width:auto}
.ftr-line{margin:0;font-size:17px;color:#E3E8EF;max-width:34em}
.ftr-call{display:inline-flex;align-items:center;gap:10px;font-family:'Fjalla One',Impact,sans-serif;font-size:28px;text-decoration:none;white-space:nowrap}
.ftr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:32px 0}
.ftr h2{font-family:'Readex Pro',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#AEB9C8;margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:7px 0}
.ftr li a{text-decoration:none;font-size:15.5px}
.ftr li a:hover{text-decoration:underline}
.ftr-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:20px;border-top:1px solid #2E4058;font-size:14px}
.ftr-legal span:last-child a{margin-left:16px}

.mbar{display:none}

/* ---------- 1180 and below: the picker card leaves the sea and sits under the map ---------- */
/* 1340 and below: the cards leave the sea and sit under the map, so they never cover a pin (qa/card_cover.js) */
/* Town lists: name + postcode (home: five across); the hub adds one short line per town */
.tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px}
.tgrid li{border-bottom:2px solid var(--ink)}
.tgrid a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding:16px 0 12px;text-decoration:none;color:var(--ink)}
.tg-n{font-family:'Fjalla One',Impact,sans-serif;font-size:24px;line-height:1.15}
.tg-pc{font-size:14px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tg-x{flex-basis:100%;font-size:15.5px;line-height:1.45;color:var(--ink-2);margin-top:4px}
.tgrid a:hover .tg-n,.tgrid a:focus-visible .tg-n{color:var(--red-ink);text-decoration:underline}
.tgrid--lines{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px}
.tgrid--lines li{border-bottom:1px solid var(--line)}
.tgrid--lines a{padding:18px 0 20px}
.tgrid--hub li{border-bottom-style:dashed}
.tgrid-more{margin:22px 0 0;font-size:16px}
.tgrid-more a{font-weight:600}
@media (max-width:1060px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.tgrid--lines{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.tgrid--lines{grid-template-columns:1fr}.tg-n{font-size:22px}}
@media (max-width:1340px){
  .mapcard{position:static;width:auto;margin-top:12px;box-shadow:none;border:1px solid var(--line)}
  .mapwrap .bay{display:block}
}
@media (max-width:1180px){
  .wrap{padding:0 40px}
  .crumbs ol{padding:16px 40px 0}
  .hbar{gap:20px}
  .nav ul{gap:18px}
  .nav a{font-size:15px}
  .hero-grid{column-gap:36px;grid-template-columns:minmax(0,1fr) 54%}
  .band-grid{grid-template-columns:340px minmax(0,1fr);column-gap:48px}
  .who{grid-template-columns:320px minmax(0,1fr);column-gap:48px}
  .split,.jobs,.price,.faq-grid,.quote-grid{column-gap:48px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .creds-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
}
@media (max-width:1060px){
  .nav{display:none}
  .btn-menu{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;height:48px;padding:0 14px;border:1.5px solid var(--line);
    border-radius:8px;color:var(--ink);background:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer;order:3}
  .btn-call{order:2;margin-left:auto}
  .btn-menu{margin-left:0}
  .nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(19,36,58,.12)}
  .nav.is-open ul{flex-direction:column;gap:0;padding:8px 40px 18px}
  .nav.is-open a{display:block;padding:13px 0;font-size:17px;border-bottom:1px solid var(--line)}
}
/* ---------- 980 and below: the hero stacks ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "visual" "facts";row-gap:26px}
  h1{max-width:12em}
  .hero--about .visual{max-width:520px}
  .split,.split--drawing,.jobs,.price,.faq-grid,.quote-grid{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .split-side{max-width:560px}
  .split-side .ph{margin-left:0;max-width:440px}
  .band-grid,.who{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .tall,.who-photo{max-width:420px}
  .reviews,.tips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sitemap-grid{grid-template-columns:1fr 1fr}
  .hero--about .hero-grid{grid-template-columns:minmax(0,1fr)}
  .split--flip .split-copy{order:0}
}
/* ---------- phones ---------- */
@media (max-width:760px){
  body{font-size:16px;padding-bottom:76px}
  .wrap{padding:0 16px}
  .crumbs ol{padding:12px 16px 0;font-size:13px}
  .hbar{height:70px;gap:10px}
  .brand img{height:56px}
  .btn-call{padding:12px 14px;font-size:15px}
  .btn-call .num{display:none}
  .btn-call .m-only{display:inline}
  .btn-menu{height:46px;padding:0 12px}
  .nav.is-open ul{padding:6px 16px 14px}
  .hero{padding:20px 0 44px}
  .copy{padding-top:0}
  h1{font-size:clamp(36px,10.4vw,44px);line-height:1.05}
  .lede{font-size:16.5px;margin-top:16px}
  .cta{margin-top:22px;gap:12px}
  .btn-quote{width:100%;padding:17px 20px}
  .btn-sm{width:auto;padding:13px 16px}
  .btn-send{width:100%}
  .or-call{width:100%;text-align:center}
  .price-cta .or-call,.nf-links .or-call{text-align:left}
  .facts dl div{padding:12px 14px}
  .facts dd{font-size:15px}
  .pl{font-size:13.5px;padding:2px 6px}
  .dot{width:16px;height:16px}
  .bay{font-size:19px}
  .bay small{font-size:11.5px}
  .sec{padding:52px 0}
  .band,.quote{padding:52px 0 58px}
  .steps-band{padding:52px 0 56px}
  .sec>.wrap>h2{margin-bottom:22px}
  .band-copy h2{font-size:36px}
  .creds li{grid-template-columns:104px 1fr;gap:14px}
  .creds b{font-size:24px}
  .g3,.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .g3 .ph:first-child{grid-column:span 2}
  .g3 .ph:first-child img{aspect-ratio:4/3}
  .reviews,.reviews--1,.reviews--2,.tips,.town-jobs,.steps,.sitemap-grid,.ftr-grid{grid-template-columns:minmax(0,1fr)}
  .creds-row b{font-size:34px}
  .steps{row-gap:0}
  .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:16px 0 18px}
  .steps li::before{grid-row:1/span 2;font-size:34px;margin:0}
  .steps h3{font-size:18px;margin-bottom:4px}
  .steps p{font-size:15.5px}
  .who-name b{font-size:26px}
  .form-card{padding:22px 18px 20px}
  .opt{font-size:14.5px;padding:8px 10px;gap:6px}
  .f-row{grid-template-columns:minmax(0,1fr)}
  .ftr{padding:40px 0 28px}
  .ftr-top{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .ftr-logo img{height:84px}
  .ftr-grid{gap:20px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;padding:10px 16px 12px;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(19,36,58,.08);z-index:30}
  .mbar .btn{padding:15px 8px;font-size:15.5px}
  .m-call{background:var(--ink);color:#fff}
  .m-quote{background:var(--red);color:#fff}
}
@media (min-width:601px) and (max-width:1340px){
  .pin--mid-r>*{left:-9px;right:auto;flex-direction:row}
  .pin--mid-l>*{right:-9px;left:auto;flex-direction:row-reverse}
}
/* the phone map frame (data/map.json crops.m): pins move to their phone positions and label sides */
@media (max-width:600px){
  .mappanel{aspect-ratio:757/1095}
  .pin{left:var(--mx);top:var(--my)}
  .pin--mr>*{left:-8px;right:auto;flex-direction:row}
  .pin--ml>*{right:-8px;left:auto;flex-direction:row-reverse}
  .bay{left:var(--mx);top:var(--my)}
}
@media (max-width:440px){
  .menu-label{display:none}
  .btn-menu{width:46px;padding:0}
  .brand img{height:50px}
  .chip{font-size:14px;padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dot{transition:none}}