/* Kitchens MK site.css. Design owns this file.

   Typeface: Plus Jakarta Sans (variable, weights 200 to 800, roman and italic), self-hosted, SIL OFL 1.1
   (licence: /assets/fonts/OFL-plus-jakarta-sans.txt).

   TOKENS (custom properties on :root, for every owner):
     --c-bg (white), --c-ink (near black), --c-ink-2 (body grey), --c-muted, --c-line,
     --c-teal (bright teal, decoration and large bold text only, 3.2:1 on white),
     --c-teal-strong (teal behind white text: buttons, the hero band; white on it is 4.9:1 or better),
     --c-teal-deep (teal safe for small text, 7:1 on white), --c-teal-bright (light accent, decoration only),
     --c-teal-soft (pale teal fill), --c-grey-50 .. --c-grey-900 (50,100,200,300,400,500,600,700,800,900),
     --font, --radius, --radius-lg, --shadow, --shadow-lg, --shadow-teal, --space-1 .. --space-8, --max.
   THE GLOW (V2, item 3). Use on every clickable button and every selectable box:
     --c-teal-dim (teal at reduced strength),
     --glow (rest: box-shadow: var(--glow)),
     --glow-strong (hover, focus-visible, checked or selected: box-shadow: var(--glow-strong)).
     Keep a visible focus ring for keyboard users as well (outline, or --focus).

   VOCABULARY (classes any owner may use):
     .container  .container--narrow  .section  .section--tight  .eyebrow  .lead
     .btn  .btn--primary  .btn--ghost  .btn--small  .btn--large  .btn--light (white button on teal or dark)
     .card  .grid  .grid--2  .grid--3  .grid--4  .stack  .cluster  .prose
     .field  .field__label  .field__hint  .input  .select  .textarea  .check
     .notice  .notice--error  .notice--ok  .draft-mark  .example-label  .visually-hidden
     .badge  .swatch-grid  .swatch  .breadcrumbs
   Extras: .section-head (+ --center), .section-title, .stars, .icon, .muted, .text-center,
     .section--grey (pale grey band), .section--ink (dark band), .section--deep (deep teal band, light text),
     light from different angles, one per section: .light-a .light-b .light-c .light-d .light-e
     (add to any .section; purely decorative, behind the content).
   .draft-mark is hidden since V2 (nothing may say "Draft for review").
   Layout parts (layout.js): .bg-swirl (the fixed background) .skip-link .site-header .site-nav .menu .phone-bar
     .van-lane .van .site-footer
   Home parts: .hero__band .hero__media .home-offer .offer-card .stages .stage (connected steps, site.js draws them)
*/

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),
       url('/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
}
/* A fallback sized to Plus Jakarta Sans (its average width, ascent and descent), so text does not shift
   when the web font arrives. */
@font-face {
  font-family: 'Jakarta Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 103.6%;
  ascent-override: 100.2%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2-variations'),
       url('/assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2');
}

:root {
  --c-bg: #ffffff;
  --c-ink: #0f1513;
  --c-ink-2: #36403d;
  --c-muted: #56615d;
  --c-line: #dde4e1;
  --c-teal: #10a38a;
  --c-teal-strong: #0b7865;
  --c-teal-deep: #0a5c50;
  --c-teal-bright: #3cc4aa;
  --c-teal-soft: #e3f5f0;
  --c-teal-dim: rgba(16, 163, 138, .5);
  --glow: 0 0 0 1px var(--c-teal-dim), 0 0 14px -2px var(--c-teal-dim);
  --glow-strong: 0 0 0 1px var(--c-teal), 0 0 18px -2px var(--c-teal);
  --c-grey-50: #f6f8f7;
  --c-grey-100: #eef2f0;
  --c-grey-200: #dde4e1;
  --c-grey-300: #c4cdc9;
  --c-grey-400: #9aa5a1;
  --c-grey-500: #737e7a;
  --c-grey-600: #56615d;
  --c-grey-700: #3c4643;
  --c-grey-800: #252d2b;
  --c-grey-900: #141a18;
  --font: 'Plus Jakarta Sans', 'Jakarta Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 10px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(15, 21, 19, .06), 0 4px 14px rgba(15, 21, 19, .06);
  --shadow-lg: 0 2px 6px rgba(15, 21, 19, .06), 0 18px 48px rgba(15, 21, 19, .12);
  --shadow-teal: 0 1px 2px rgba(15, 21, 19, .05), 0 16px 36px -16px rgba(8, 90, 76, .32);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --max: 1200px;
  --header-h: 72px;
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--c-teal-deep);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-bg);
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-ink-2);
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }
h1, h2, h3, h4, h5, h6 {
  color: var(--c-ink);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 760; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); letter-spacing: -.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
em { font-style: italic; }
strong { font-weight: 700; color: var(--c-ink); }
a { color: var(--c-teal-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-teal-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-teal-soft); color: var(--c-ink); }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-6) 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--c-ink); color: #fff; padding: .7rem 1rem; border-radius: var(--radius);
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }
.muted { color: var(--c-muted); }
.text-center { text-align: center; }

/* Layout vocabulary */
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter, 1.25rem)); margin-inline: auto; padding-inline: var(--gutter, 1.25rem); }
@media (min-width: 768px) { .container { --gutter: 2rem; } }
.container--narrow { max-width: calc(760px + 2 * var(--gutter, 1.25rem)); }
.section { position: relative; isolation: isolate; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section--grey { background: linear-gradient(180deg, rgba(240, 246, 244, .88), rgba(244, 248, 247, .88)); }
.section--deep {
  color: #d9e6e2;
  background:
    radial-gradient(60% 80% at 92% 0%, rgba(60, 196, 170, .22), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(16, 163, 138, .2), transparent 70%),
    linear-gradient(140deg, #0b3e37 0%, #0c2a26 55%, #0f1a18 100%);
}
.section--deep h2, .section--deep h3, .section--deep strong { color: #fff; }
.section--deep .eyebrow, .section--deep .section-title em { color: #8fe6d3; }
.section--deep .eyebrow::before { background: var(--c-teal-bright); }
.section--deep .lead, .section--deep p { color: #d9e6e2; }
.section--deep a:not(.btn) { color: #8fe6d3; }
.section--ink { background: var(--c-ink); color: var(--c-grey-200); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: #8fe0cf; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-teal-deep); margin: 0 0 var(--space-3);
}
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: var(--c-teal); border-radius: 2px; }
.section--ink .eyebrow { color: #8fe0cf; }
.lead { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); line-height: 1.55; color: var(--c-ink-2); max-width: 62ch; }
.section-head { margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 3rem); max-width: 760px; }
.section-head .lead { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-title { margin-bottom: var(--space-4); }
.section-title em { font-style: italic; font-weight: 500; color: var(--c-teal-deep); }

.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.stack > * { margin-bottom: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--space-3)); align-items: center; }
.grid { display: grid; gap: var(--grid-gap, clamp(1rem, .6rem + 1.2vw, 1.75rem)); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Cards (V2, item 2): not a flat white box. A teal accent along the top, a white-to-pale-teal wash,
   a soft teal edge and depth. Cards that are links carry the glow. The accent is a background layer,
   so ::before and ::after stay free for other owners. */
.card {
  position: relative;
  background:
    linear-gradient(90deg, var(--c-teal), var(--c-teal-bright) 55%, rgba(60, 196, 170, 0)) top left / 100% 3px no-repeat,
    radial-gradient(120% 90% at 100% 0%, rgba(60, 196, 170, .10), transparent 60%),
    linear-gradient(170deg, #ffffff 0%, #ffffff 55%, #eff8f5 100%);
  border: 1px solid rgba(16, 163, 138, .22); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); box-shadow: var(--shadow-teal);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: var(--space-2); }
a.card { display: block; color: inherit; text-decoration: none; box-shadow: var(--glow), var(--shadow-teal); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.card:hover, a.card:focus-visible { transform: translateY(-3px); box-shadow: var(--glow-strong), 0 22px 44px -18px rgba(8, 90, 76, .4); border-color: var(--c-teal); color: inherit; }
a.card:focus-visible { outline: 3px solid var(--c-teal-deep); outline-offset: 4px; border-radius: var(--radius-lg); }

.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose img, .prose picture { border-radius: var(--radius); margin-block: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { margin: var(--space-5) 0; padding-left: var(--space-5); border-left: 3px solid var(--c-teal); color: var(--c-ink); }

/* Buttons */
/* Buttons (V2, item 3): every variant carries the teal glow at rest and a stronger glow on hover and focus.
   Keyboard focus also gets a solid outline, so it never relies on the glow alone.
   White text sits on --c-teal-strong or darker (4.9:1 or better). */
.btn {
  --btn-bg: linear-gradient(180deg, #0b7f6b, var(--c-teal-strong)); --btn-fg: #fff; --btn-bd: var(--c-teal-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.35rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--glow);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .2s ease;
}
.btn:hover { --btn-bg: linear-gradient(180deg, #0a7362, #08604f); --btn-bd: #08604f; color: var(--btn-fg); box-shadow: var(--glow-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--c-teal-deep); outline-offset: 3px; box-shadow: var(--glow-strong); }
.btn--primary { --btn-bg: linear-gradient(180deg, #0b7f6b, var(--c-teal-strong)); --btn-fg: #fff; --btn-bd: var(--c-teal-strong); }
.btn--ghost { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: rgba(16, 163, 138, .6); }
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--c-teal-deep); --btn-bd: var(--c-teal); box-shadow: var(--glow-strong); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--c-teal-deep); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: #f0fbf8; --btn-fg: #07463d; --btn-bd: #fff; }
.section--ink .btn--ghost, .section--deep .btn--ghost, .site-footer .btn--ghost, .cta-band__panel .btn--ghost { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #fff; --btn-bd: rgba(143, 230, 211, .7); }
.section--ink .btn--ghost:hover, .section--deep .btn--ghost:hover, .site-footer .btn--ghost:hover, .cta-band__panel .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .14); --btn-fg: #fff; --btn-bd: #fff; }
.section--ink .btn:focus-visible, .section--deep .btn:focus-visible, .site-footer .btn:focus-visible, .cta-band__panel .btn:focus-visible { outline-color: #fff; }
.btn--small { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.btn--large { min-height: 56px; padding: .95rem 1.7rem; font-size: 1.0625rem; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn .icon { flex: none; }

/* Forms */
.field { display: grid; gap: .4rem; margin-bottom: var(--space-5); }
.field__label { font-weight: 650; color: var(--c-ink); font-size: .975rem; }
.field__hint { font-size: .9rem; color: var(--c-muted); margin: 0; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; font: inherit; font-size: 1rem; color: var(--c-ink);
  background: #fff; border: 1.5px solid var(--c-grey-300); border-radius: var(--radius);
  box-shadow: var(--glow);
  transition: border-color .15s ease, box-shadow .2s ease;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141a18' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-teal); box-shadow: var(--glow-strong); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--c-teal-deep); outline-offset: 2px; border-color: var(--c-teal-deep); box-shadow: var(--glow-strong); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: #8a1c1c; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .975rem; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--c-teal-deep); }

/* Notices and labels */
.notice {
  padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--c-line); border-left: 4px solid var(--c-grey-500);
  background: var(--c-grey-50); color: var(--c-ink); margin-bottom: var(--space-5);
}
.notice > :last-child { margin-bottom: 0; }
.notice--ok { border-left-color: var(--c-teal); background: var(--c-teal-soft); }
.notice--error { border-left-color: var(--c-ink); background: #f3f1f1; }
.draft-mark { display: none !important; }
.draft-mark-v1-unused {
  display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase;
  color: var(--c-ink); background: repeating-linear-gradient(135deg, #fff 0 6px, var(--c-grey-100) 6px 12px);
  border: 1.5px dashed var(--c-grey-600); border-radius: 6px; padding: .3rem .5rem; margin: 0 .4rem;
  white-space: nowrap; font-style: normal;
}
h1 .draft-mark, h2 .draft-mark, h3 .draft-mark { font-size: .75rem; letter-spacing: .04em; }
.example-label {
  display: inline-block; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  color: #fff; background: rgba(15, 21, 19, .82); border-radius: 999px; padding: .4rem .7rem;
}
.badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 650; line-height: 1;
  color: var(--c-teal-deep); background: var(--c-teal-soft); border-radius: 999px; padding: .4rem .7rem;
}
.stars { display: inline-flex; gap: 2px; color: var(--c-teal); }
.stars svg { width: 18px; height: 18px; }
.icon { display: inline-block; flex: none; }

/* Swatches */
.swatch-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.swatch { display: block; color: var(--c-ink); text-decoration: none; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.swatch img, .swatch picture { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); margin-bottom: .5rem; background: var(--c-grey-50); }
a.swatch img { box-shadow: var(--glow); transition: box-shadow .2s ease; }
a.swatch:hover img, a.swatch:focus-visible img { box-shadow: var(--glow-strong); }
.swatch[aria-pressed='true'] img, .swatch[aria-current] img, .swatch.is-selected img { outline: 3px solid var(--c-teal-deep); outline-offset: 2px; box-shadow: var(--glow-strong); }

/* Breadcrumbs */
.breadcrumbs { font-size: .9rem; margin-bottom: var(--space-5); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-muted); }
.breadcrumbs li + li::before { content: '/'; color: var(--c-grey-400); }
.breadcrumbs a { color: var(--c-ink-2); }
.breadcrumbs [aria-current] { color: var(--c-ink); font-weight: 600; }

/* Teal light from different angles. Decorative layer behind each section's content.
   Peak tint stays under about 10 per cent teal, so text keeps its contrast. */

.light-a, .light-b, .light-c, .light-d, .light-e { position: relative; isolation: isolate; }
.light-a::before, .light-b::before, .light-c::before, .light-d::before, .light-e::before {
  content: ''; position: absolute; inset: -96px 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.light-a::before {
  background:
    radial-gradient(52% 70% at 88% 18%, rgba(16, 163, 138, .13), transparent 70%),
    linear-gradient(118deg, transparent 52%, rgba(16, 163, 138, .055) 60%, transparent 71%),
    radial-gradient(30% 40% at 6% 92%, rgba(115, 126, 122, .09), transparent 70%);
}
.light-b::before {
  background:
    radial-gradient(45% 60% at 4% 30%, rgba(16, 163, 138, .11), transparent 72%),
    linear-gradient(64deg, transparent 30%, rgba(16, 163, 138, .045) 38%, transparent 47%);
}
.light-c::before {
  background:
    radial-gradient(40% 55% at 96% 82%, rgba(16, 163, 138, .12), transparent 70%),
    linear-gradient(-28deg, transparent 18%, rgba(115, 126, 122, .06) 26%, transparent 34%),
    radial-gradient(28% 36% at 30% 0%, rgba(16, 163, 138, .06), transparent 70%);
}
.light-d::before {
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(16, 163, 138, .10), transparent 72%),
    linear-gradient(152deg, transparent 58%, rgba(16, 163, 138, .05) 64%, transparent 72%);
}
.light-e::before {
  background:
    radial-gradient(38% 60% at 14% 76%, rgba(16, 163, 138, .12), transparent 70%),
    linear-gradient(200deg, transparent 40%, rgba(16, 163, 138, .045) 47%, transparent 55%),
    radial-gradient(30% 40% at 92% 8%, rgba(115, 126, 122, .08), transparent 70%);
}

/* The background (V2, item 1): white, with soft grey and teal swirls fixed behind everything (layout.js draws
   them). The strongest tint under any text is about 20 per cent teal on white, so body text stays above 7:1.
   A slow drift where motion is welcome; still under reduced motion. */
.bg-swirl { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-swirl__art { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; }
.bg-swirl__art--tall { display: none; }
@media (max-aspect-ratio: 4/5) {
  .bg-swirl__art--wide { display: none; }
  .bg-swirl__art--tall { display: block; }
}
.sw-line { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sw-line--t { stroke: rgba(16, 163, 138, .26); }
.sw-line--g { stroke: rgba(115, 126, 122, .22); }
@keyframes swirl-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-1.5%, 1.2%, 0) rotate(.6deg); }
  100% { transform: translate3d(1%, -1%, 0) rotate(-.4deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .bg-swirl__art { animation: swirl-drift 48s ease-in-out infinite alternate; will-change: transform; }
}
.bg-field { display: none; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(16, 163, 138, .18);
  box-shadow: 0 6px 24px -18px rgba(8, 90, 76, .5);
}
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
/* His name, prominent (his review call, 18 October 2026): the logo is noticeably bigger at every width.
   To make room, the phone shows as an icon until 900px (on phones the phone bar carries the number too),
   the menu button is an icon on narrow phones, and the visit button is shorter until 1440px. */
.brand { display: block; flex: none; margin-right: auto; padding-block: .5rem; }
.brand img { width: min(236px, calc(100vw - 166px)); height: auto; }
@media (min-width: 480px) { .brand img { width: clamp(200px, calc(100vw - 430px), 290px); } }
.site-nav { display: none; }
.site-nav ul, .menu ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .5rem .5rem; border-radius: 8px;
  color: var(--c-ink-2); text-decoration: none; font-size: .9rem; font-weight: 560; white-space: nowrap;
}
.site-nav a:hover { color: var(--c-ink); background: var(--c-grey-100); }
.site-nav a[aria-current='page'] { color: var(--c-teal-deep); font-weight: 700; box-shadow: inset 0 -2px 0 var(--c-teal); border-radius: 8px 8px 0 0; }
.header-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem; color: var(--c-ink); text-decoration: none;
  font-weight: 700; font-size: 1rem; letter-spacing: -.005em; padding: .5rem .25rem; white-space: nowrap; min-height: 44px;
}
.header-phone .icon { color: var(--c-teal-deep); }
.header-phone:hover { color: var(--c-teal-deep); }
.header-cta { display: none; }
@media (max-width: 899px) { .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .header-phone { padding: .6rem; border: 1px solid rgba(16, 163, 138, .45); border-radius: 999px; box-shadow: var(--glow); } }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
.header-cta__short { display: none; }
@media (max-width: 479px) {
  .menu > summary { padding: .6rem; }
  .menu > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Menu: details and summary, works with no script. site.js closes it on Escape, outside click and link click. */
.menu { position: static; }
.menu > summary {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem;
  border: 1.5px solid rgba(16, 163, 138, .55); border-radius: 999px; cursor: pointer; list-style: none;
  font-weight: 650; color: var(--c-ink); font-size: .95rem; user-select: none; background: #fff;
  box-shadow: var(--glow); transition: box-shadow .2s ease, border-color .2s ease;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu > summary:hover, .menu[open] > summary { border-color: var(--c-teal); box-shadow: var(--glow-strong); }
.menu > summary:focus-visible { outline: 3px solid var(--c-teal-deep); outline-offset: 3px; box-shadow: var(--glow-strong); }
.menu .icon--close, .menu[open] .icon--menu { display: none; }
.menu[open] .icon--close { display: inline-block; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 24px 40px rgba(15, 21, 19, .12);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
}
.menu:not([open]) .menu__panel { display: none; } /* a closed menu's buttons stayed laid out, 1px past a phone's edge */
.menu__panel .container { padding-block: .75rem 1.5rem; }
.menu__panel li + li { border-top: 1px solid var(--c-grey-100); }
.menu__panel a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between; padding: .9rem .25rem;
  color: var(--c-ink); text-decoration: none; font-size: 1.125rem; font-weight: 600;
}
.menu__panel a[aria-current='page'] { color: var(--c-teal-deep); }
.menu__panel a:not(.btn)::after { content: ''; width: .5rem; height: .5rem; border-right: 2px solid var(--c-grey-400); border-top: 2px solid var(--c-grey-400); transform: rotate(45deg); }
.menu__actions { display: grid; gap: .6rem; margin-top: 1rem; }
.menu__actions .btn { width: 100%; }
@media (min-width: 1180px) {
  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: .1rem; }
  .menu { display: none; }
  .brand { margin-right: 0; }
  .site-nav { margin-inline: auto; }
  .brand img { width: 214px; }
}
@media (min-width: 1280px) { .brand img { width: 262px; } }
@media (min-width: 1440px) { .brand img { width: 284px; } }
@media (min-width: 1180px) and (max-width: 1439px) {
  .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-phone { padding: .6rem; border: 1px solid rgba(16, 163, 138, .45); border-radius: 999px; box-shadow: var(--glow); }
  .site-nav a { padding-inline: .4rem; }
  .header-cta__long { display: none; }
  .header-cta__short { display: inline; }
}
.site-header .container { max-width: 1440px; }

/* Phone bar: Call and Free home visit, phones only */
.phone-bar { display: none; }
@media (max-width: 639px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .phone-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--c-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px rgba(15, 21, 19, .08);
  }
  .phone-bar .btn { width: 100%; padding-inline: .75rem; }
}

/* The van that drives in, just above the footer */
.van-lane {
  position: relative; overflow-x: clip; overflow-y: visible;
  padding-top: clamp(2.5rem, 2rem + 4vw, 5rem);
  view-timeline: --van-lane block;
}
.van-lane::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 80% at 22% 100%, rgba(16, 163, 138, .10), transparent 70%);
}
.van-lane__inner { display: flex; align-items: flex-end; gap: clamp(1rem, 4vw, 3rem); }
/* His van, from his photo, big enough on a phone for the livery to read. */
.van { position: relative; width: min(92vw, 420px); flex: none; margin-bottom: 2px; will-change: transform; }
@media (min-width: 760px) { .van { width: clamp(420px, 46vw, 600px); } }
.van picture, .van img { display: block; width: 100%; height: auto; }
.van img { position: relative; z-index: 1; filter: drop-shadow(0 6px 10px rgba(15, 21, 19, .16)); }
.van::after {
  content: ''; position: absolute; left: 4%; right: 3%; bottom: -5px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 21, 19, .28), rgba(15, 21, 19, 0)); pointer-events: none;
}
.van-lane__note { display: none; padding-bottom: 1.6rem; color: var(--c-ink); }
.van-lane__note p { margin: 0; }
.van-lane__note a { font-weight: 750; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); color: var(--c-ink); text-decoration: none; letter-spacing: -.01em; }
.van-lane__note a:hover { color: var(--c-teal-deep); }
@media (min-width: 760px) { .van-lane__note { display: block; } }

@keyframes van-drive-in { from { transform: translateX(calc(-100vw - 100%)); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .van { animation: van-drive-in linear both; animation-timeline: --van-lane; animation-range: entry 0% entry 100%; }
  }
  /* Fallback driven by site.js with IntersectionObserver */
  .van-lane.is-waiting .van { transform: translateX(calc(-100vw - 100%)); }
  .van-lane.is-driving .van { animation: van-drive-in 2.4s cubic-bezier(.22, .7, .2, 1) both; }
}

/* Footer */
.site-footer { background: var(--c-grey-900); color: var(--c-grey-300); font-size: .975rem; position: relative; }
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 85% 0%, rgba(16, 163, 138, .16), transparent 70%);
}
.site-footer .container { position: relative; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #9fe6d6; text-decoration: underline; }
.site-footer :focus-visible { outline-color: #9fe6d6; }
.footer-main { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .footer-main { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-main { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.footer-brand { font-size: 1.5rem; font-weight: 780; letter-spacing: -.02em; color: #fff; margin-bottom: .35rem; }
.footer-tagline { color: #9fe6d6; font-weight: 600; margin-bottom: 1.25rem; }
.footer-title { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-grey-400); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .5rem; }
.footer-contact li { display: flex; gap: .65rem; align-items: flex-start; }
.footer-contact .icon { color: #9fe6d6; margin-top: .2rem; }
.footer-contact address { font-style: normal; }
.footer-phone { font-size: 1.35rem; font-weight: 750; letter-spacing: -.01em; }
.footer-cta { margin-top: 1.5rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.25rem; font-size: .875rem; color: var(--c-grey-400); }
.footer-bottom .cluster { justify-content: space-between; }
.footer-bottom p { margin: 0; }

/* Shared figure treatment */
.photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--c-grey-100); }
.photo picture, .photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .example-label { position: absolute; top: .9rem; left: .9rem; z-index: 1; }
.photo__caption { position: absolute; left: .9rem; bottom: .9rem; z-index: 1; background: rgba(255, 255, 255, .94); color: var(--c-ink); font-size: .875rem; font-weight: 650; border-radius: 999px; padding: .4rem .8rem; }

/* Home (V2) */
.hero { padding-block: clamp(1.75rem, 1rem + 3vw, 4.25rem) clamp(1.5rem, 1rem + 2vw, 3rem); overflow-x: clip; } /* its photos' glow ran a few px past a phone's edge */
.hero__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); } }
.hero h1 { margin-bottom: 0; max-width: 16ch; font-size: clamp(2.2rem, 1.35rem + 3.1vw, 3.9rem); line-height: 1.04; }

/* The teal band under the headline (item 7). On a wide screen it runs out to the left edge of the page;
   on a phone it runs edge to edge. White on --c-teal-strong and darker, 4.9:1 or better. */
.hero__band {
  position: relative; isolation: isolate; overflow: visible;
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0; padding: 1.05rem 1.6rem 1.1rem 0;
  color: #fff; font-weight: 760; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1.22; letter-spacing: -.018em;
  background: linear-gradient(100deg, #09685a 0%, var(--c-teal-strong) 55%, #0b7f6b 100%);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 18px 40px -20px rgba(8, 100, 85, .7), 0 0 22px -6px rgba(16, 163, 138, .55);
  max-width: 34ch; text-wrap: balance;
}
.hero__band::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; z-index: -1;
  background: #09685a;
}
.hero__band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
}
.hero__band span { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .hero__band::after { animation: band-sheen 2.4s .6s cubic-bezier(.3, .6, .3, 1) both; }
}
@keyframes band-sheen { from { background-position: 130% 0; } to { background-position: -40% 0; } }
@media (max-width: 639px) {
  .hero__band {
    margin-inline: calc(-1 * var(--gutter, 1.25rem)); padding: 1rem var(--gutter, 1.25rem);
    border-radius: 0; max-width: none;
  }
  .hero__band::before { display: none; }
}
.hero__actions { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); --cluster: .85rem; }
@media (max-width: 519px) { .hero__actions .btn { flex: 1 1 100%; } }
.hero__phone { margin: 1rem 0 0; font-size: 1rem; color: var(--c-muted); }
.hero__phone a { color: var(--c-ink); font-weight: 700; text-decoration: none; }
.hero__phone a:hover { color: var(--c-teal-deep); text-decoration: underline; }

/* Photos of his work (item 8): three real jobs, one large and two small. */
.hero__media { position: relative; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__media::before {
  content: ''; position: absolute; inset: 8% -6% -6% 10%; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(60% 60% at 60% 50%, rgba(16, 163, 138, .28), transparent 70%);
  filter: blur(18px);
}
.hero__photo { margin: 0; border: 1px solid rgba(16, 163, 138, .25); box-shadow: 0 0 0 5px #fff, var(--shadow-lg); }
.hero__photo--main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.hero__photo--a, .hero__photo--b { aspect-ratio: 4 / 3; }
.hero__photo .photo__caption { font-size: .8125rem; padding: .3rem .65rem; left: .55rem; bottom: .55rem; }
.hero__photo--main .photo__caption { font-size: .875rem; padding: .4rem .8rem; left: .9rem; bottom: .9rem; }
@media (min-width: 960px) {
  .hero__media { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1rem; min-height: 470px; }
  .hero__photo--main { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; }
  .hero__photo--a { grid-column: 1; grid-row: 1; aspect-ratio: auto; margin-top: 2.5rem; }
  .hero__photo--b { grid-column: 1; grid-row: 2; aspect-ratio: auto; margin-bottom: 2.5rem; }
}

/* We supply and fit (item 9), straight under the hero, then the visualiser with no empty gap. */
.home-offer { padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.home-offer + .section, .home-offer + #visualiser { padding-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.offer { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.offer .section-head { margin-bottom: 1rem; }
.offer__lead { color: var(--c-ink); font-weight: 560; }
.offer-card { padding: 0; overflow: hidden; }
.offer-card__photo { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.offer-card .chips { padding: clamp(1.1rem, .9rem + .8vw, 1.5rem); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(16, 163, 138, .3); border-radius: 999px;
  padding: .45rem .85rem .45rem .7rem; font-weight: 620; color: var(--c-ink); font-size: .975rem;
}
.chips .icon { color: var(--c-teal); }

/* Kept for other pages that may use it. */
.teaser { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .teaser { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.teaser .photo { aspect-ratio: 3 / 2; }

.service-card .icon-dot { width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; background: var(--c-teal-soft); color: var(--c-teal-deep); margin-bottom: 1rem; }
.service-card p { color: var(--c-ink-2); font-size: 1rem; }
.service-card__num { display: block; font-weight: 780; font-size: 1.05rem; letter-spacing: .02em; color: var(--c-teal-strong); margin-bottom: .55rem; }
.home-services .service-card { display: flex; flex-direction: column; }
.service-card--more {
  display: flex !important; flex-direction: column; justify-content: space-between; color: #fff !important;
  background: radial-gradient(90% 80% at 100% 0%, rgba(60, 196, 170, .35), transparent 65%), linear-gradient(150deg, var(--c-teal-strong), #08493f);
  border-color: transparent;
}
.service-card--more h3 { color: #fff; }
.service-card--more .more { color: #fff; }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-list li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-content: start; }
.feature-list .icon { grid-row: span 2; color: var(--c-teal-deep); margin-top: .2rem; }
.feature-list strong { display: block; }
.feature-list span { color: var(--c-ink-2); font-size: .975rem; }
.section--deep .feature-list li { padding: 1.1rem 1.15rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(143, 230, 211, .18); }
.section--deep .feature-list .icon { color: #0c2a26; background: var(--c-teal-bright); border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
.section--deep .feature-list span { color: #d9e6e2; }

/* The old numbered steps, kept for any page that still uses .steps. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.steps li { counter-increment: step; position: relative; background: rgba(255, 255, 255, .9); border: 1px solid rgba(16, 163, 138, .22); border-radius: var(--radius-lg); padding: 1.35rem 1.25rem 1.25rem; box-shadow: var(--shadow-teal); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-weight: 780; font-size: 1.6rem; letter-spacing: -.03em; color: var(--c-teal); margin-bottom: .6rem; line-height: 1; }
.steps h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.steps p { font-size: .975rem; margin: 0; }

/* How it works as connected stages (item 12). Down the page on a phone, across on a wide screen.
   Without scripts every line shows drawn. site.js adds .is-armed, then .is-in to each stage in turn. */
.stages { --node: 64px; --stage-gap: 1.5rem; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.stage { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 1.1rem; padding-bottom: 2.4rem; align-content: start; }
.stage:last-child { padding-bottom: 0; }
.stage__node {
  position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center; color: var(--c-teal-deep);
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #e6f7f2 70%, #d3f0e8 100%);
  border: 1.5px solid rgba(16, 163, 138, .55);
  box-shadow: var(--glow), 0 12px 26px -12px rgba(8, 90, 76, .5);
}
.stage__num {
  position: absolute; top: -5px; right: -7px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: .85rem; font-weight: 780; line-height: 1;
  color: #fff; background: var(--c-teal-strong); box-shadow: 0 0 0 3px #fff;
}
.stage__body { padding-top: .2rem; }
.stage__body h3 { font-size: clamp(1.15rem, 1.08rem + .3vw, 1.3rem); margin: .55rem 0 .35rem; }
.stage__body p { margin: 0; font-size: 1rem; color: var(--c-ink-2); }
/* The connector: from under this node down to the next node, ending in an arrow head. */
.stage__link { position: absolute; left: calc(var(--node) / 2 - 1.5px); top: calc(var(--node) + 6px); bottom: 6px; width: 3px; }
.stage__line {
  position: absolute; inset: 0 0 7px 0; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, var(--c-teal), var(--c-teal-bright));
  transform-origin: 50% 0;
}
.stage__arrow {
  position: absolute; left: 50%; bottom: 1px; width: 13px; height: 13px;
  border-right: 3px solid var(--c-teal-bright); border-bottom: 3px solid var(--c-teal-bright); border-radius: 0 0 3px 0;
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 1000px) {
  .stages { grid-template-columns: repeat(var(--stage-count, 5), minmax(0, 1fr)); column-gap: var(--stage-gap); }
  .stage { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .stage__body { padding-top: 1rem; padding-right: .25rem; }
  .stage__link { left: calc(var(--node) + 10px); right: calc(-1 * var(--stage-gap) + 8px); top: calc(var(--node) / 2 - 1.5px); bottom: auto; width: auto; height: 3px; }
  .stage__line { inset: 0 7px 0 0; transform-origin: 0 50%; background: linear-gradient(90deg, var(--c-teal), var(--c-teal-bright)); }
  .stage__arrow { left: auto; right: 1px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
}
/* Animated: hidden first, then each stage pops in and its line draws towards the next. */
.stages.is-armed .stage__node { opacity: 0; transform: scale(.55); transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.stages.is-armed .stage__body { opacity: 0; transform: translateY(12px); transition: opacity .45s ease .12s, transform .5s ease .12s; }
.stages.is-armed .stage__line { transform: scaleY(0); transition: transform .5s cubic-bezier(.5, 0, .3, 1) .22s; }
.stages.is-armed .stage__arrow { opacity: 0; transition: opacity .2s ease .62s; }
@media (min-width: 1000px) { .stages.is-armed .stage__line { transform: scaleX(0); } }
.stages.is-armed .stage.is-in .stage__node { opacity: 1; transform: none; }
.stages.is-armed .stage.is-in .stage__body { opacity: 1; transform: none; }
.stages.is-armed .stage.is-in .stage__line { transform: none; }
.stages.is-armed .stage.is-in .stage__arrow { opacity: 1; }
/* Once drawn, a soft light runs along each line now and then, pointing the way to the next step. */
.stages.is-armed .stage.is-in .stage__line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95), transparent) no-repeat;
  background-size: 100% 40%; background-position: 0 -60%;
  animation: stage-flow-y 2.8s 1s ease-in-out infinite;
}
@keyframes stage-flow-y { 0% { background-position: 0 -60%; } 60%, 100% { background-position: 0 160%; } }
@keyframes stage-flow-x { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
@media (min-width: 1000px) {
  .stages.is-armed .stage.is-in .stage__line::after {
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    background-size: 40% 100%; background-position: -60% 0; animation-name: stage-flow-x;
  }
}
.stages.is-armed .stage.is-in .stage__node { animation: stage-ping .9s ease-out .1s 1; }
@keyframes stage-ping { 0% { box-shadow: var(--glow), 0 0 0 0 rgba(16, 163, 138, .45); } 100% { box-shadow: var(--glow), 0 0 0 16px rgba(16, 163, 138, 0); } }
@media (prefers-reduced-motion: reduce) {
  .stages .stage__node, .stages .stage__body, .stages .stage__line, .stages .stage__arrow { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .stages .stage__line::after { display: none; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .stages .stage__arrow { transform: translateY(-50%) rotate(-45deg) !important; }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  .stages .stage__arrow { transform: translateX(-50%) rotate(45deg) !important; }
}

.quotes { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote-card {
  position: relative; display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--radius-lg); border: 1px solid rgba(16, 163, 138, .22); box-shadow: var(--shadow-teal);
  background:
    linear-gradient(90deg, var(--c-teal), var(--c-teal-bright) 55%, rgba(60, 196, 170, 0)) top left / 100% 3px no-repeat,
    linear-gradient(170deg, #ffffff 0%, #ffffff 55%, #eff8f5 100%);
}
.quote-card::after {
  content: '\201C'; position: absolute; top: .2rem; right: 1rem; font-size: 5rem; line-height: 1; font-weight: 700;
  color: var(--c-teal); opacity: .22; pointer-events: none;
}
.quote-card blockquote { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--c-ink); font-style: italic; font-weight: 450; flex: 1; }
.quote-card figcaption { font-size: .95rem; color: var(--c-muted); }
.quote-card figcaption strong { display: block; color: var(--c-ink); }

.counts { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.count-card { text-decoration: none; color: var(--c-ink); display: flex !important; flex-direction: column; justify-content: flex-end; min-height: 9rem; }
.count-card .count { display: block; font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3rem); font-weight: 780; letter-spacing: -.03em; line-height: 1; color: var(--c-teal-strong); margin-bottom: .45rem; }
.count-card .label { font-weight: 680; display: inline-flex; align-items: center; gap: .4rem; }
.count-card--example { padding: 0; overflow: hidden; justify-content: flex-start; }
/* Worktops: no count, the word and his "any worktop" line. */
.count-card--word .count { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.02em; }
.count-card--word .label { font-weight: 560; font-size: .95rem; line-height: 1.4; color: var(--c-ink-2); }
.count-card__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.count-card__img picture, .count-card__img img { width: 100%; height: 100%; object-fit: cover; }
.count-card__img .example-label { position: absolute; top: .55rem; left: .55rem; font-size: .7rem; padding: .32rem .55rem; }
.count-card--example .label { padding: .8rem 1rem .9rem; color: var(--c-teal-deep); }
.count-card--example .icon { color: var(--c-teal); }

.faq-list { border-top: 1px solid rgba(16, 163, 138, .25); }
.faq-list details { border-bottom: 1px solid rgba(16, 163, 138, .25); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; font-weight: 650; color: var(--c-ink); font-size: 1.075rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; color: var(--c-teal-deep); font-weight: 500; background: #fff; box-shadow: var(--glow);
  transition: box-shadow .2s ease;
}
.faq-list summary:hover::after, .faq-list details[open] summary::after { box-shadow: var(--glow-strong); }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details > div { padding: 0 0 1.25rem; max-width: 68ch; }

.section-actions { margin-top: 2rem; }
.section-actions--center { justify-content: center; }
figure.photo { margin: 0; }
.cta-band { text-align: center; }
.cta-band .cluster { justify-content: center; margin-top: 1.75rem; }
.cta-band h2 { max-width: 24ch; margin-inline: auto; }
.cta-band p { max-width: 56ch; margin-inline: auto; }
.cta-band__panel {
  position: relative; overflow: hidden; border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 1rem + 3vw, 4rem);
  color: #e3f3ef;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(60, 196, 170, .45), transparent 65%),
    radial-gradient(50% 80% at 0% 100%, rgba(8, 73, 63, .9), transparent 70%),
    linear-gradient(135deg, var(--c-teal-strong), #075347);
  box-shadow: 0 30px 60px -30px rgba(8, 90, 76, .7), 0 0 0 1px rgba(16, 163, 138, .4);
}
.cta-band__panel h2 { color: #fff; }
.cta-band__panel .lead { color: #e3f3ef; }

/* Our work (testimonials) */
.work-intro { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.work-intro h1 { max-width: 20ch; }
.job { padding-block: clamp(2.5rem, 1.8rem + 3vw, 5rem); }
.job__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .job__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .job:nth-of-type(even) .job__media { order: 2; }
}
.job__media .photo { aspect-ratio: 4 / 3; }
.job__place { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: .35rem; }
.job__work { color: var(--c-teal-deep); font-weight: 650; margin-bottom: 1.5rem; }
.review { margin: 0; position: relative; padding-top: 2.75rem; }
.review::before {
  content: '\201C'; position: absolute; top: -.6rem; left: -.3rem; z-index: -1;
  font-size: 6.5rem; line-height: 1; font-weight: 700; color: var(--c-teal); opacity: .28;
}
.review blockquote { margin: 0 0 1.25rem; }
.review blockquote p {
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.45; font-weight: 380; font-style: italic;
  color: var(--c-ink); letter-spacing: -.01em; margin-bottom: .8rem;
}
.review--long blockquote p { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.review__name { font-weight: 720; color: var(--c-ink); font-size: 1.05rem; }
.review__source { font-size: .9rem; }
.review__source a { font-weight: 600; }

/* Print */
@media print {
  .site-header, .phone-bar, .van-lane, .bg-field, .bg-swirl, .menu { display: none !important; }
  .site-footer { background: none; color: #000; }
  .site-footer a { color: #000; }
}