section{padding:clamp(64px,9vw,112px) 0}
.section-head{max-width:42em;margin:0 0 clamp(30px,4vw,48px)}
.section-head .eyebrow{color:var(--forest-soft)}
.section-head h2{font-size:clamp(30px,3.6vw,42px)}
.section-head p{color:var(--muted);font-size:18px;margin-top:.4em}
/* Credentials zone (dark), directly under the hero: accreditation badge row,
   a hairline, then the four trust statements. One cohesive section, not two
   stacked logo walls. */
.trust{background:var(--forest-deep);color:var(--cream);padding:clamp(56px,7vw,88px) 0}
.cred-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:36px 72px;padding-bottom:clamp(34px,4vw,48px);margin-bottom:clamp(34px,4vw,48px);border-bottom:1px solid rgba(var(--lime-rgb),.2)}
.cred-logos img{height:auto;width:auto;max-height:64px;max-width:188px;display:block}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 52px}
/* No floating lime rule above each heading: four detached hairlines under the
   accreditation divider read as stray marks (client feedback). The lime accent
   motif is kept where it belongs (quote top-border, price figure). The height
   equalisation on the heading (min-height) is the four-column alignment fix and
   stays. */
.trust-item{position:relative}
.trust-item b{display:flex;align-items:flex-start;min-height:2.6em;font-family:var(--fdisp);font-size:18px;line-height:1.16;font-weight:700;color:var(--lime);margin:0 0 10px;text-transform:uppercase;letter-spacing:.02em}
.trust-item span{display:block;font-size:14px;line-height:1.55;color:rgba(250,248,245,.82)}
/* Commercial-client logo wall (dark), one row, before the footer. Logos only. */
.logorail{background:var(--forest-deep);color:var(--cream);padding:clamp(44px,5.5vw,64px) 0}
.logorail .rail-head{text-align:center;font-size:13px;letter-spacing:.04em;color:rgba(250,248,245,.62);margin:0 0 26px}
.logorail .rail{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 60px}
.logorail img{height:auto;width:auto;max-height:44px;max-width:160px;display:block;opacity:.9}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.card{background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) * 2);padding:clamp(22px,2.4vw,30px)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{margin:0;color:var(--muted);font-size:15px}
.pricewrap{overflow-x:auto}
table.price{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
table.price th,table.price td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--border)}
table.price thead th{background:var(--forest);color:var(--cream);font-weight:600}
table.price tbody tr:nth-child(even){background:#fff}
table.price .from{font-weight:700;color:var(--forest-deep);white-space:nowrap}
.price-note{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 26px;max-width:58em}
/* Price callout: the clean stat block used when a service has exactly one real
   price row (a one-row table is the wrong component). A large "from" figure with
   the job label, and the caveat note beside it. Stacks on mobile. */
.price-callout{display:grid;grid-template-columns:auto 1fr;gap:32px 56px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) * 3);padding:clamp(30px,4vw,48px)}
.price-figure{position:relative;padding-top:20px}
.price-figure::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--forest-soft);border-radius:2px}
.price-figure .plabel{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--forest-soft);margin-bottom:8px}
.price-figure .pamount{display:block;font-family:var(--fdisp);font-weight:700;font-size:clamp(46px,6vw,66px);line-height:1;color:var(--forest-deep)}
.price-figure .pjob{display:block;margin-top:14px;font-size:15.5px;line-height:1.4;color:var(--muted);max-width:15em}
.price-callout-note{margin:0;color:#2B2B29;font-size:16.5px;line-height:1.62;max-width:42em}
.tpo{background:#eef3ee;border-left:5px solid var(--forest-soft);border-radius:var(--radius);padding:clamp(30px,3.6vw,48px)}
.tpo h2{font-size:clamp(26px,3vw,34px);margin-bottom:14px}
.tpo p{color:#2B2B29;max-width:60em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);counter-reset:step}
.step{position:relative;padding-top:8px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--forest-deep);font-family:var(--fdisp);font-weight:700;font-size:20px;margin-bottom:12px}
.step h3{font-size:18px;margin-bottom:6px}
.step p{margin:0;color:var(--muted);font-size:15px}
.reviews-rating{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--forest-deep);font-weight:700;font-size:15px;margin-top:2px}
.reviews-rating .stars{display:inline-flex;gap:2px}
.reviews-rating .stars svg{width:17px;height:17px;display:block}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,44px);margin-top:8px}
.quote{padding-top:16px;border-top:2px solid var(--forest-soft)}
.quote q{quotes:"\201C" "\201D";display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.5;color:var(--forest-deep);margin-bottom:16px}
.quote .who{font-size:13.5px;color:var(--muted)}
.quote .who b{display:block;font-family:var(--fdisp);font-weight:700;font-size:17px;color:var(--forest-deep);margin-bottom:1px;text-transform:uppercase;letter-spacing:.015em}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;border-radius:calc(var(--radius) * 1.5);border:1px solid var(--border)}
.gallery figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
.faq details{border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin-bottom:14px;padding:0 22px}
.faq summary{cursor:pointer;font-weight:600;padding:20px 0;list-style:none;font-size:16.5px;color:var(--forest-deep);position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:18px;font-size:22px;color:var(--forest-soft);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq .ans{padding:16px 0 22px;color:var(--muted);font-size:15.5px;line-height:1.6}
.areas .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.chip{background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 18px;font-weight:500;font-size:14.5px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,4vw,56px);align-items:start}
.contact-lines{list-style:none;padding:0;margin:18px 0 0}
.contact-lines li{padding:13px 0;border-bottom:1px solid var(--border);font-size:16px}
.contact-lines b{font-family:var(--fdisp);font-weight:700;color:var(--forest-deep);text-transform:uppercase;letter-spacing:.02em}
.contact-lines a{color:var(--forest-soft);text-decoration:none;font-weight:600}
.ftr{background:var(--forest-deep);color:rgba(250,248,245,.82);padding:clamp(56px,7vw,88px) 0 40px;font-size:14px}
.ftr a{color:var(--lime);text-decoration:none}
.ftr-main{display:grid;grid-template-columns:1fr auto;gap:40px 56px;align-items:start;padding-bottom:clamp(30px,3.6vw,44px);border-bottom:1px solid rgba(250,248,245,.15)}
.ftr-brand{height:58px;width:auto;margin:0 0 24px;display:block}
/* .ftr a sets link colour to lime; the primary call button needs dark text on
   its lime fill, so re-assert forest-deep with higher specificity (a contrast
   fix: lime-on-lime would be invisible and fail WCAG). */
.ftr .ftr-call,.ftr .ftr-call:visited,.ftr .ftr-call:hover,.ftr .ftr-call:focus{margin:0;color:var(--forest-deep);-webkit-text-fill-color:var(--forest-deep)}
.ftr-contact-head{font-family:var(--fdisp);color:var(--cream);font-size:17px;font-weight:700;margin:0 0 14px;text-transform:uppercase;letter-spacing:.03em}
.ftr-contact-lines{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:15.5px}
.ftr-contact-lines li{display:flex;align-items:center;gap:10px}
.ftr-contact-lines a{display:inline-flex;align-items:center;gap:10px;color:var(--lime);text-decoration:none;font-weight:600}
.ftr-contact-lines a:hover{text-decoration:underline;text-underline-offset:2px}
.ftr-contact-lines .ftr-ic{flex-shrink:0;display:block;color:inherit}
.ftr-contact-lines li.ftr-addr{align-items:flex-start}
.ftr-contact-lines li.ftr-addr .ftr-ic{margin-top:.15em}
/* Legal small print spacing (Jefferson 15 Aug: the block read cramped against the
   divider). Three gaps opened up, comfortable at both breakpoints: divider to the
   company line (margin-top), the company/registered-office line to the Privacy /
   Terms / Cookie row (legal-small margin-bottom), and below the links row
   (legal-links margin-bottom, on top of the footer's 40px bottom padding). */
.legal-footer{margin-top:clamp(30px,3.6vw,40px);color:rgba(250,248,245,.6);font-size:12.5px;line-height:1.6}
.legal-footer p{margin:0 0 8px}
.legal-footer .legal-small{max-width:64em;margin:0 0 clamp(24px,2.6vw,30px)}
.legal-footer .legal-links{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 clamp(10px,1.4vw,16px)}
.legal-footer .legal-links a{display:inline-flex;align-items:center;min-height:44px;color:rgba(250,248,245,.75);text-decoration:none}
.legal-footer .legal-links a:hover{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
/* One mid-dot between adjacent links (never before the first): restores the
   separation that was lost with the old inline separators, with generous
   spacing so the three links never concatenate. Links are 44px tall for a
   comfortable tap target. */
.legal-footer .legal-links a:not(:first-child)::before{content:"\00B7";margin:0 14px;color:rgba(250,248,245,.5);font-weight:700}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.hub-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) * 2);padding:clamp(24px,2.6vw,32px);transition:border-color .15s,transform .15s}
.hub-card:hover{border-color:var(--forest-soft);transform:translateY(-2px)}
.hub-card h3{font-size:20px;margin-bottom:6px}
.hub-card p{color:var(--muted);margin:0;font-size:15px}
.hub-card .go{color:var(--forest-soft);font-weight:700;font-size:14px;margin-top:12px;display:inline-block}
.legal-body{max-width:60em}
.legal-body h1{font-size:clamp(28px,4vw,40px)}
.legal-body h2{font-size:22px;margin-top:1.6em}
.legal-body table{border-collapse:collapse;width:100%;margin:1em 0;font-size:14.5px}
.legal-body th,.legal-body td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.legal-body a{color:var(--forest-soft)}
.cookie-banner{position:fixed;left:16px;right:auto;bottom:16px;z-index:170;background:var(--forest-deep);color:var(--cream);border:1px solid var(--lime);border-radius:calc(var(--radius) * 2);padding:20px 22px;max-width:400px;margin:0;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.cookie-banner a{color:var(--lime)}
.cookie-banner-actions{display:flex;gap:10px;margin-top:12px}
.cookie-banner-actions button{flex:1;min-height:46px;border-radius:var(--radius);font-weight:700;font-family:var(--fbody);font-size:15px;cursor:pointer;border:2px solid var(--lime)}
.cookie-accept{background:var(--lime);color:var(--forest-deep)}
.cookie-reject{background:transparent;color:var(--cream)}
.thanks{min-height:52vh;display:flex;align-items:center;text-align:center}
.thanks .tick{width:76px;height:76px;border-radius:50%;background:var(--lime);margin:0 auto 22px;display:flex;align-items:center;justify-content:center}
/* /before-your-visit/: Ben's pre-visit video (portrait) beside a four-point checklist. */
.previsit .wrap{max-width:980px;margin:0 auto}
.previsit .eyebrow{color:var(--forest-soft)}
.previsit-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;align-items:start;margin-top:28px}
.previsit-player{position:relative;border-radius:calc(var(--radius) * 2);overflow:hidden;background:#0E1B0A;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.previsit video{width:100%;aspect-ratio:9/16;background:#0E1B0A;display:block}
/* Autoplay is only allowed muted, so the video starts silent and a full-size tap target turns the sound on (and restarts from the top). The pill sits at the top because Ben's captions are burned into the bottom third. Removed once sound is on so the native controls work. */
.previsit-sound{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:flex-start;justify-content:center;padding:18px 0 0}
.previsit-sound span{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#0E1B0A;font-weight:700;font-size:16px;padding:12px 20px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.previsit-player.sound-on .previsit-sound{display:none}
.previsit ol{margin:0 0 24px;padding:0;list-style:none;counter-reset:pv}
.previsit li{counter-increment:pv;position:relative;padding:0 0 18px 52px;font-size:17px;line-height:1.5}
.previsit li::before{content:counter(pv);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--lime);color:#0E1B0A;font-weight:700;display:flex;align-items:center;justify-content:center}
.previsit li strong{display:block}
.previsit .note{color:var(--muted);font-size:16px}
@media(max-width:760px){.previsit-grid{grid-template-columns:1fr;gap:28px}.previsit-player{max-width:340px;margin:0 auto}}
/* Hub hero opening-hours line, under the rating strip near the CTAs. Muted cream
   so it reads as an availability note beside the Call button, not a headline. */
.hero-hours{margin:10px 0 0;font-size:14px;font-weight:500;color:rgba(250,248,245,.72)}
/* Hub H1 carries the tri-county coverage. It is set as a two-part stack: a cream
   lead line ("Professional tree surgery across") over the lime county line, which
   is forced onto its own line so the whole H1 holds exactly two lines at 1280 in
   the condensed Big Shoulders Display face (re-measured for this face: the lead
   holds one line and the full tri-county phrase holds one line at these sizes; the
   stack keeps the lead prominent above the emphasised counties). A resolved
   ?loc/?kw town still replaces the whole county span, rendered on that second
   line. */
.hero h1.hub-h1{font-size:clamp(32px,3.7vw,46px)}
.hero h1.hub-h1 .hl{display:block;font-size:clamp(24px,2.9vw,35px);margin-top:.06em}
/* "Quill Hall in action" dark band: a left intro column (heading, the client's
   own copy, a phone CTA) beside three tall portrait action photos. */
.in-action{background:var(--forest-deep);color:var(--cream)}
.in-action .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,4vw,56px);align-items:center}
.in-action-head h2{color:var(--cream);font-size:clamp(30px,3.6vw,42px)}
.in-action-head p{color:rgba(250,248,245,.82);font-size:16.5px;max-width:34em;margin-bottom:22px}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.action-shot{margin:0}
.action-shot img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--radius) * 1.5);box-shadow:0 14px 34px rgba(0,0,0,.32)}
/* "Meet the team": five-across portrait grid, name and role under each square. */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.2vw,30px)}
.team-member{margin:0;text-align:center}
.team-member img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--radius) * 1.5);border:1px solid var(--border)}
.team-member figcaption{margin-top:12px}
.team-member b{display:block;font-family:var(--fdisp);font-weight:700;font-size:18px;color:var(--forest-deep);line-height:1.12;text-transform:uppercase;letter-spacing:.015em}
.team-member span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
@media(max-width:860px){
.trust-grid{grid-template-columns:1fr 1fr;gap:32px 40px}
.cards{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.gallery{grid-template-columns:1fr}
.quote-grid{grid-template-columns:1fr;gap:24px}
.contact-grid{grid-template-columns:1fr}
.hub-grid{grid-template-columns:1fr}
.price-callout{grid-template-columns:1fr;gap:22px}
.ftr-main{grid-template-columns:1fr;gap:30px}
.cookie-banner{left:8px;right:8px;bottom:80px;max-width:none}
}
@media(max-width:480px){.trust-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:860px){
.in-action .wrap{grid-template-columns:1fr;gap:26px}
.team-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
.action-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:20px}
.action-shot{scroll-snap-align:start}
}
@media(max-width:480px){
.team-grid{grid-template-columns:repeat(2,1fr);gap:22px}
}