:root {
  --space-xs: clamp(0.5rem, 0.4452rem + 0.2247vw, 0.625rem); --space-s: clamp(0.75rem, 0.6405rem + 0.4494vw, 1rem);
  --space-m: clamp(1rem, 0.7809rem + 0.8989vw, 1.5rem); --space-l: clamp(1.5rem, 1.2809rem + 0.8989vw, 2rem);
  --space-xl: clamp(2.5rem, 1.8427rem + 2.6966vw, 4rem); --space-2xl: clamp(3.5rem, 1.9663rem + 6.2921vw, 7rem);
  --tap: 2.75rem; 
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block: 5rem; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--lh-body); background: var(--bg-canvas); color: var(--ink-dark); }
h1, h2, h3 { margin: 0 0 var(--space-s); font-family: var(--font-display); overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--step-5); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); }

h1, h2, h3, h4, .lead { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
p, li { max-width: var(--measure); }
h1, h2, h3, .display { text-transform: var(--display-case); line-height: var(--lh-heading); }
h1, h2, .display { letter-spacing: var(--tracking-display); }
h3, h4 { letter-spacing: var(--tracking-heading); }
.eyebrow, .label-caps { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-feature-settings: "case" 1; }
.tel, .price, .hours, .stat__num, td, [data-numeric] { font-variant-numeric: var(--num-data); }
.display-num { font-variant-numeric: var(--num-display); }
.tel, .price, .cert-no, .postcode { white-space: nowrap; }
.pull-quote { hanging-punctuation: first last; }
@supports not (hanging-punctuation: first) { .pull-quote > p:first-child { text-indent: -0.42em; } }
body { font-optical-sizing: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
a[href^="tel:"] { font-variant-numeric: var(--num-data); white-space: nowrap; } 
.eyebrow { margin: 0 0 var(--space-xs); font-weight: 600; color: var(--sec-mark); }

:root, .sec--canvas, .sec--tint { --sec-ink: var(--ink-dark); --sec-ink-muted: var(--ink-muted); --sec-border: var(--border-light);
  --sec-card: var(--card-light); --sec-mark: var(--brand-primary); }
.sec--deep { --sec-ink: var(--ink-light); --sec-ink-muted: var(--ink-muted-deep); --sec-border: var(--border-deep);
  --sec-card: var(--card-deep); --sec-mark: var(--brand-on-deep); }
.sec--canvas { background: var(--bg-canvas); } .sec--tint { background: var(--bg-tint); } .sec--deep { background: var(--bg-deep); }
.sec--canvas, .sec--tint, .sec--deep { color: var(--sec-ink); }

.wrap { width: min(100% - 2 * clamp(1.25rem, 4vw, 4rem), 84rem); margin-inline: auto; }

section { padding-block: var(--space-xl); }
.hero { min-height: clamp(34rem, 78svh, 52rem); display: grid; align-items: stretch; position: relative; isolation: isolate; padding-block: 0; border-bottom: 1px solid var(--sec-border); }
.page-head { padding-block: var(--space-xl); }

.seam { position: relative; background: linear-gradient(var(--from, transparent) 50%, var(--to, transparent) 50%); }
.sec--canvas + [data-bridge] { --from: var(--bg-canvas); } .sec--tint + [data-bridge] { --from: var(--bg-tint); } .sec--deep + [data-bridge] { --from: var(--bg-deep); }
:is([data-bridge]:has(+ .sec--canvas), [data-hero]:has(+ .sec--canvas) > [data-bridge]) { --to: var(--bg-canvas); }
:is([data-bridge]:has(+ .sec--tint), [data-hero]:has(+ .sec--tint) > [data-bridge]) { --to: var(--bg-tint); }
:is([data-bridge]:has(+ .sec--deep), [data-hero]:has(+ .sec--deep) > [data-bridge]) { --to: var(--bg-deep); }
[data-hero]:has(> .seam) { grid-template-rows: 1fr auto; padding-block-end: 0; }
svg.edge { display: block; width: 100%; height: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--to); color: var(--from); }

.grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid > *, .row > * { min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
img, svg, video { display: block; max-width: 100%; height: auto; }
.media { aspect-ratio: var(--ratio, 4 / 3); overflow: hidden; }
.media > picture { display: block; width: 100%; height: 100%; }
.media img, .media > img { width: 100%; height: 100%; object-fit: cover; }

.btn, .tap, nav a, footer a, .callbar a { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); }
input, select, textarea, button { font: inherit; font-size: max(1rem, var(--step-0)); min-height: var(--tap); }
.btn { padding-inline: var(--space-m); border: 1px solid transparent; border-radius: 2px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-out-expo); }
@media (hover: hover) { .btn:hover { opacity: 0.88; } a:not(.btn):hover { text-decoration-thickness: 2px; } }
.btn:active { transform: translateY(1px); }
:is(.btn, button, input, select, textarea):disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
:focus-visible { outline: 3px solid var(--sec-ink); outline-offset: 2px; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--sec-ink); border-width: 2px; box-shadow: inset 0.25rem 0 0 var(--sec-mark); }
.skip-link { position: absolute; z-index: 100; left: var(--space-s); top: var(--space-s); padding: var(--space-xs) var(--space-m);
  background: var(--card-light); color: var(--ink-dark); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: var(--dur-fast) !important; animation-iteration-count: 1 !important;
    transition-duration: var(--dur-fast) !important; scroll-behavior: auto !important; }
}