/*! cbbuildersandson.co.uk | Design and code (c) 2026 PageLaunch | https://pagelaunch.co.uk/
    Licensed to CB Builders & Son for use on cbbuildersandson.co.uk only. Build PL-cbbuildersandson-co-uk-20260829-6402. */
/* CB Builders & Son. Palette, type and spacing tokens, then components.
   Warm stone ground and deep navy from the client's own logo artwork;
   orange is reserved for actions and dimension marks. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-100_900-62_125.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('/assets/fonts/firasans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('/assets/fonts/firasans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('/assets/fonts/firasans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Mono';
  src: url('/assets/fonts/firamono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Brand, sampled from the supplied logo artwork. */
  --navy:        oklch(28.5% 0.074 259.5);   /* #12294E */
  --navy-deep:   oklch(21.5% 0.062 261);
  --navy-lift:   oklch(35.5% 0.078 258);
  --orange:      oklch(68.9% 0.167 53);      /* #E8781A */
  --orange-deep: oklch(60.5% 0.158 48);
  --wa:          oklch(58% 0.155 149.7);

  /* Warm stone ground, client instruction. Neutrals tinted to the navy hue. */
  --stone:    oklch(96.6% 0.008 78);
  --stone-2:  oklch(93.4% 0.011 76);
  --stone-3:  oklch(89.6% 0.013 74);
  --paper:    oklch(99.1% 0.004 80);

  --ink:      oklch(24% 0.028 262);
  --ink-2:    oklch(42% 0.024 262);
  --ink-3:    oklch(55% 0.020 262);

  --line:       color-mix(in oklch, var(--navy) 14%, transparent);
  --line-soft:  color-mix(in oklch, var(--navy) 8%, transparent);
  --line-dark:  color-mix(in oklch, white 16%, transparent);

  --on-navy:    oklch(98% 0.004 80);
  --on-navy-2:  oklch(91% 0.010 250);

  /* One radius system: soft. Interactive controls take the same scale. */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  /* Shadows tinted to the navy hue, each with an offset and a soft blur. */
  --shadow-1: 0 1px 2px color-mix(in oklch, var(--navy) 10%, transparent),
              0 4px 14px color-mix(in oklch, var(--navy) 8%, transparent);
  --shadow-2: 0 2px 4px color-mix(in oklch, var(--navy) 10%, transparent),
              0 14px 40px color-mix(in oklch, var(--navy) 14%, transparent);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 74px;
  --logo-h: 52px;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Fira Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

@media (min-width: 700px)  { :root { --header-h: 86px; --logo-h: 64px; } }
@media (min-width: 1060px) { :root { --header-h: 96px; --logo-h: 74px; } }
/* Compacts once the page scrolls, so a tall confident header does not keep
   eating the viewport on the way down. */
@media (min-width: 700px) {
  :root:has(.header[data-stuck="true"]) { --header-h: 74px; --logo-h: 56px; }
}

/* ----------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 768px) { body { font-size: 1.125rem; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
/* Placeholder tint while a photograph loads. Never on the logo, which is a
   transparent PNG and would otherwise sit in a visible box. */
.feat__img img, .seq__img img, .gallery__img img, .split__media img,
.hero__media img, .phead__media img { background: var(--stone-3); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.7vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.85rem); }
h3 { font-size: clamp(1.22rem, 1.06rem + 0.72vw, 1.6rem); letter-spacing: -0.014em; }
h4 { font-size: 1.06rem; letter-spacing: -0.008em; font-weight: 600; }

p { margin: 0 0 1.1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: color-mix(in oklch, var(--orange) 34%, transparent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 0.5rem; top: -100%; z-index: 200;
  background: var(--orange); color: #fff; padding: 0.7rem 1rem;
  border-radius: var(--r); font-weight: 600; font-size: 0.95rem;
}
.skip:focus { top: 0.5rem; }

/* -------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

section { position: relative; }

.band { padding-block: clamp(3.5rem, 2.4rem + 5vw, 7rem); }
.band--tight { padding-block: clamp(2.5rem, 1.9rem + 3vw, 4.25rem); }
.band--stone2 { background: var(--stone-2); }
.band--paper  { background: var(--paper); }
/* Hairline between two adjacent light grounds, so the change of surface reads. */
.band--paper + .band--stone2,
.band--stone2 + .band--paper,
.band + .band--paper { border-top: 1px solid var(--line-soft); }

.band--navy {
  background: var(--navy);
  color: var(--on-navy);
  border-top: 3px solid var(--orange);
}
.band--deep { border-top: 3px solid var(--orange); }
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--on-navy); }
.band--navy p { color: var(--on-navy-2); }
.band--navy a { color: var(--on-navy); }

.band--deep { background: var(--navy-deep); color: var(--on-navy); }
.band--deep h2, .band--deep h3 { color: var(--on-navy); }
.band--deep p { color: var(--on-navy-2); }

.lede {
  font-size: clamp(1.08rem, 1rem + 0.42vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}
.band--navy .lede, .band--deep .lede { color: var(--on-navy-2); }

/* Dimension rule. A drawing dimension line with tick ends, used under a section
   heading. This is the site's one recurring graphic device. */
.dim {
  --dim-w: 104px;
  position: relative;
  height: 2px;
  width: var(--dim-w);
  background: var(--orange);
  margin: 1.15rem 0 1.6rem;
  flex: none;
}
.dim::before, .dim::after {
  content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: var(--orange);
}
.dim::before { left: 0; }
.dim::after { right: 0; }
.band--navy .dim, .band--deep .dim { background: var(--orange); }

/* Small drawing annotation. Used for dimension figures, stage marks and grid
   references only, never as a label above a heading. */
.note {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band--navy .note, .band--deep .note { color: color-mix(in oklch, var(--on-navy) 62%, transparent); }

/* Paragraphs used as UI labels never carry the prose bottom margin, because
   inside a centred flex row it shifts the text off centre. */
.util__inner p, .header__inner p, .footer__meta p, .proof__cell p,
.mega__foot p, .stage p, .actions p, .callbar p { margin-block: 0; }

/* ------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0.85rem 1.5rem;
  font-family: var(--f-body); font-size: 1.0125rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; text-wrap: balance;
  max-width: 100%;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
              transform 140ms var(--ease), box-shadow 140ms var(--ease), color 140ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }

.btn--wa { background: var(--wa); color: #fff; box-shadow: var(--shadow-1); }
.btn--wa:hover { background: color-mix(in oklch, var(--wa) 88%, black); }

.btn--primary { background: var(--orange); color: #251200; box-shadow: var(--shadow-1); }
.btn--primary:hover { background: color-mix(in oklch, var(--orange) 90%, black); }

.btn--navy { background: var(--navy); color: var(--on-navy); }
.btn--navy:hover { background: var(--navy-lift); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: color-mix(in oklch, var(--navy) 5%, transparent); border-color: color-mix(in oklch, var(--navy) 26%, transparent); }

.band--navy .btn--ghost, .band--deep .btn--ghost, .hero .btn--ghost {
  color: #fff;
  background: color-mix(in oklch, white 12%, transparent);
  border-color: color-mix(in oklch, white 46%, transparent);
  backdrop-filter: blur(6px);
}
.band--navy .btn--ghost:hover, .band--deep .btn--ghost:hover, .hero .btn--ghost:hover {
  background: color-mix(in oklch, white 22%, transparent);
  border-color: #fff;
}

.btn--block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.actions--stack { flex-direction: column; align-items: stretch; }
@media (min-width: 560px) { .actions--stack { flex-direction: row; align-items: center; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 2px solid color-mix(in oklch, var(--orange) 55%, transparent);
  padding-bottom: 2px;
  transition: border-color 140ms var(--ease), gap 140ms var(--ease), color 140ms var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform 160ms var(--ease); }
.link-arrow:hover { border-color: var(--orange); }
.link-arrow:hover::after { transform: translateX(3px); }
.band--navy .link-arrow, .band--deep .link-arrow { color: var(--on-navy); }

/* ---------------------------------------------------------------- header */

/* The supplied logo is drawn for a light ground: a navy plate, an orange swoosh
   and an orange strapline, all on white. Sitting it on a navy bar buried half of
   the mark and boxed the rest. So the header carries the logo on warm paper, and
   the brand colour arrives in the utility strip above it and the action beside
   it. The mark itself is untouched. */

.util {
  background: var(--navy);
  color: var(--on-navy-2);
  font-size: 0.86rem;
}
.util__inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  min-height: 42px;
  display: flex; align-items: center; gap: 1.25rem;
}
.util__where { display: none; margin: 0; }
@media (min-width: 760px) { .util__where { display: flex; align-items: center; gap: 0.5rem; } }
.util__where svg { width: 15px; height: 15px; fill: var(--orange); flex: none; }
.util__links { margin-left: auto; display: flex; align-items: center; gap: 0.2rem; }
.util__links a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.7rem; min-height: 42px;
  color: var(--on-navy); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-radius: var(--r-sm);
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.util__links a:hover { background: color-mix(in oklch, white 12%, transparent); color: #fff; }
.util__links svg { width: 16px; height: 16px; fill: var(--orange); flex: none; }
.util__links .util__wa svg { fill: var(--wa); }
@media (max-width: 519px) { .util__links .util__label { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 220ms var(--ease);
}
.header[data-stuck="true"] {
  box-shadow: 0 1px 2px color-mix(in oklch, var(--navy) 8%, transparent),
              0 10px 30px color-mix(in oklch, var(--navy) 12%, transparent);
}
.header__sentinel { position: absolute; top: 0; left: 0; height: 1px; width: 1px; }

.header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--header-h);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}

.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img {
  height: var(--logo-h); width: auto;
  transition: height 220ms var(--ease);
}

.nav { display: none; margin-left: auto; }
@media (min-width: 1060px) { .nav { display: flex; align-items: center; gap: 0.1rem; } }

.nav__item { position: relative; display: flex; }

.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.72rem 0.8rem;
  color: var(--ink); text-decoration: none;
  font-size: 0.965rem; font-weight: 500; white-space: nowrap;
  border-radius: var(--r-sm);
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.nav__link:hover { background: var(--stone-2); color: var(--navy); }
.nav__link[aria-current] { color: var(--navy); font-weight: 600; }
.nav__link[aria-current]::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.3rem;
  height: 2px; background: var(--orange); border-radius: 2px;
}
.nav__chev { width: 12px; height: 12px; fill: currentColor; opacity: 0.65; transition: transform 180ms var(--ease); }
.nav__item[data-open="true"] .nav__chev { transform: rotate(180deg); }
.nav__item[data-open="true"] > .nav__link { background: var(--stone-2); color: var(--navy); }

.mega {
  position: absolute; top: calc(100% + 0.6rem); left: 50%; translate: -50% 0;
  width: min(800px, calc(100vw - 3rem));
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 1.45rem 1.45rem 1.15rem;
  display: none;
}
.nav__item[data-open="true"] .mega { display: block; }
.mega::before {
  content: ""; position: absolute; top: -7px; left: 50%; translate: -50% 0;
  width: 12px; height: 12px; rotate: 45deg;
  background: var(--paper);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 2px;
}
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 1.9rem; }
.mega__group + .mega__group { margin-top: 0.8rem; }
.mega__head {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 0.6rem 0.4rem; margin: 0.4rem 0 0.35rem;
  border-bottom: 1px solid var(--line-soft);
}
.mega a {
  display: block; padding: 0.5rem 0.6rem; border-radius: var(--r-sm);
  text-decoration: none; font-size: 0.965rem; font-weight: 500; color: var(--ink);
  transition: background-color 120ms var(--ease), color 120ms var(--ease), padding-left 140ms var(--ease);
}
.mega a:hover { background: var(--stone-2); color: var(--navy); padding-left: 0.95rem; }
.mega__foot {
  margin-top: 1.05rem; padding-top: 0.95rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center;
}
.mega__foot p { font-size: 0.9rem; color: var(--ink-3); margin: 0; max-width: 36ch; }

.header__cta { display: none; margin-left: 0.65rem; min-height: 46px; padding-inline: 1.2rem; }
@media (min-width: 1060px) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 46px; padding: 0.5rem 1rem;
  background: var(--navy); color: #fff;
  border: 0; border-radius: var(--r);
  font-family: var(--f-body); font-size: 0.94rem; font-weight: 600; cursor: pointer;
  transition: background-color 140ms var(--ease), transform 140ms var(--ease);
}
.burger:hover { background: var(--navy-lift); }
.burger:active { transform: translateY(1px); }
@media (min-width: 1060px) { .burger { display: none; } }
.burger svg { width: 20px; height: 20px; fill: currentColor; }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
@media (min-width: 1060px) { .header__actions { display: none; } }

.header__call {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r);
  border: 1px solid color-mix(in oklch, var(--navy) 22%, transparent); color: var(--navy);
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}
.header__call svg { width: 20px; height: 20px; fill: currentColor; }
.header__call:hover { background: var(--stone-2); border-color: color-mix(in oklch, var(--navy) 40%, transparent); }
@media (min-width: 700px) { .header__call { display: none; } }

/* Mobile menu, on the same warm ground as the header so the logo reads. */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--stone); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer__top {
  display: flex; align-items: center; min-height: var(--header-h);
  padding-inline: var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.drawer__close {
  margin-left: auto; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: var(--navy); border: 0;
  border-radius: var(--r); color: #fff; cursor: pointer;
  font-family: var(--f-body); font-size: 0.94rem; font-weight: 600; padding-inline: 1rem;
}
.drawer__close svg { width: 18px; height: 18px; fill: currentColor; }
.drawer__body { padding: 1.15rem var(--gutter) 0; }
.drawer__body > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.94rem 0; text-decoration: none;
  font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.014em;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.drawer__body > a:first-of-type { border-top: 1px solid var(--line-soft); }
.drawer__sub {
  padding: 0.25rem 0 0.75rem 1rem;
  border-left: 2px solid var(--orange);
  margin: 0.2rem 0 0.9rem;
}
.drawer__sub a {
  display: block; padding: 0.56rem 0; text-decoration: none;
  font-size: 1rem; font-weight: 400; color: var(--ink-2); border: 0;
}
.drawer__sub a:hover { color: var(--navy); }
.drawer__actions { margin-top: 1.7rem; display: grid; gap: 0.65rem; }
.drawer__foot {
  margin: 1.7rem 0 0; padding-top: 1.15rem; border-top: 1px solid var(--line-soft);
  font-size: 0.92rem; color: var(--ink-3);
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; background: var(--navy-deep); color: var(--on-navy); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, oklch(16% 0.05 260 / 0.90) 0%, oklch(16% 0.05 260 / 0.66) 38%,
                    oklch(16% 0.05 260 / 0.28) 68%, oklch(16% 0.05 260 / 0.16) 100%),
    linear-gradient(to right, oklch(16% 0.05 260 / 0.5) 0%, transparent 62%);
}
.hero__inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  min-height: 52dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(3rem, 8vh, 5.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
@media (min-width: 900px) {
  .hero__inner { min-height: min(74dvh, 680px); padding-bottom: clamp(3rem, 7vh, 5rem); }
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero__sub {
  color: oklch(98% 0.006 250); font-size: clamp(1.04rem, 0.97rem + 0.4vw, 1.28rem);
  max-width: 46ch; margin: 1rem 0 0;
}
.hero__actions { margin-top: 1.6rem; }
.hero__credit {
  position: absolute; right: var(--gutter); bottom: 0.6rem; z-index: 1;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.05em;
  color: oklch(88% 0.01 250 / 0.72);
}

/* Page header for interior pages: navy, compact, no photograph required. */
.phead { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.phead__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(2.6rem, 2rem + 3.4vw, 5rem) var(--gutter) clamp(2.4rem, 1.8rem + 3vw, 4.2rem);
  position: relative; z-index: 1;
  min-height: clamp(240px, 34vh, 400px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.phead h1 { color: #fff; max-width: 20ch; }
.phead .lede { margin-top: 1rem; color: oklch(97% 0.006 250); }
.phead--photo .lede { text-shadow: 0 1px 12px oklch(20% 0.05 260 / 0.5); }
.phead--photo .phead__inner { padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.phead__media { position: absolute; inset: 0; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; }
.phead--photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, oklch(16% 0.05 260 / 0.86) 0%, oklch(16% 0.05 260 / 0.52) 46%, oklch(16% 0.05 260 / 0.14) 100%),
    linear-gradient(to right, oklch(16% 0.05 260 / 0.62) 0%, oklch(16% 0.05 260 / 0.16) 58%, transparent 100%);
}

.crumbs {
  font-size: 0.85rem; color: oklch(88% 0.012 250); margin-bottom: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.crumbs a { color: var(--on-navy-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: #fff; border-bottom-color: var(--orange); }
.crumbs span[aria-hidden] { opacity: 0.45; }

/* ------------------------------------------------------------ proof band */

.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: color-mix(in oklch, white 13%, transparent); }
@media (min-width: 860px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof__cell { background: var(--navy); padding: 1.5rem clamp(1rem, 2.5vw, 1.75rem); }
.proof__cell {
  background: var(--navy);
  padding: 1.6rem clamp(1rem, 2.5vw, 1.75rem) 1.5rem;
  position: relative;
}
/* Orange keyline over each figure, from the logo. */
.proof__cell::before {
  content: ""; position: absolute; top: 0; left: clamp(1rem, 2.5vw, 1.75rem);
  width: 30px; height: 3px; background: var(--orange);
}
.proof__fig {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1;
  margin: 0;
}
.proof__fig .u { color: var(--orange); }
.proof__star { display: inline-flex; }
.proof__star svg { width: 0.62em; height: 0.62em; fill: var(--orange); }
.proof__label {
  font-family: var(--f-display); font-weight: 600; font-size: 0.98rem;
  color: #fff; margin: 0.5rem 0 0; letter-spacing: -0.008em;
}
.proof__cell > p:last-child { font-size: 0.92rem; color: var(--on-navy-2); margin: 0.3rem 0 0; max-width: 28ch; }

.proof__foot {
  background: var(--navy-deep);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem;
  max-width: none; padding: 1.1rem clamp(1rem, 2.5vw, 1.75rem);
}
.proof__foot > * { margin: 0; }
.proof__foot p { color: var(--on-navy-2); font-size: 0.98rem; }
.proof__foot strong { color: #fff; }
.proof__foot .link-arrow { color: #fff; margin-left: auto; font-size: 0.98rem; }
@media (max-width: 700px) { .proof__foot .link-arrow { margin-left: 0; } }

/* --------------------------------------------------------- section heads */

.shead { max-width: 62ch; }
.shead--wide { max-width: 74ch; }
.shead p { margin: 0.2rem 0 0; }

/* --------------------------------------------------- featured trio + list */

.trio { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.feat {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.feat__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-3); }
.feat__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 400ms var(--ease); }
.feat:hover .feat__img img { scale: 1.035; }
.feat__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.feat__body h3 { margin-bottom: 0.45rem; }
.feat__body p { font-size: 0.98rem; color: var(--ink-2); margin-bottom: 1rem; }
.feat__more { margin-top: auto; font-weight: 600; font-size: 0.95rem; color: var(--navy); display: inline-flex; gap: 0.4rem; align-items: center; }
.feat__more::after { content: "\2192"; transition: transform 160ms var(--ease); }
.feat:hover .feat__more::after { transform: translateX(3px); }

/* Compact index of the remaining services. Rows and rules, not more cards. */
.srv-index { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.srv-index__grid { display: grid; }
@media (min-width: 720px) { .srv-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.srv-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.95rem 0.2rem; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
  transition: padding-left 160ms var(--ease), color 160ms var(--ease);
}
.srv-row:hover { padding-left: 0.7rem; color: var(--navy); }
.srv-row__name { font-weight: 600; font-size: 1.03rem; }
.srv-row__note { margin: 0 0 0 auto; font-size: 0.88rem; color: var(--ink-3); text-align: right; }
.srv-row:hover .srv-row__name { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

/* --------------------------------------------------- asymmetric editorial */

.split { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.split--middle { align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}
.split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%; }
.split__media--tall img { aspect-ratio: 3 / 4; }
.split__media figcaption {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  color: var(--ink-3); padding: 0.6rem 0.15rem 0;
}

/* Itemised schedule of works. Borrowed from the day sheet: their own voice. */
.schedule__note {
  margin: 0.9rem 0 0; font-size: 0.96rem; color: var(--ink-2);
}
.schedule { margin: 0.9rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.schedule__foot {
  margin: 1.1rem 0 0; padding: 0.9rem 1rem;
  font-size: 0.9rem; line-height: 1.55; color: var(--ink-2);
  background: color-mix(in oklch, var(--navy) 4%, transparent);
  border-left: 2px solid color-mix(in oklch, var(--orange) 60%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.schedule li {
  display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.7rem;
  padding: 0.72rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: 1.01rem;
}
.schedule li::before {
  content: ""; width: 9px; height: 9px; margin-top: 0.52em; border-radius: 1px;
  background: var(--orange); transform: rotate(45deg);
}
.band--navy .schedule, .band--deep .schedule { border-top-color: var(--line-dark); }
.band--navy .schedule li, .band--deep .schedule li { border-bottom-color: color-mix(in oklch, white 9%, transparent); color: var(--on-navy-2); }

/* --------------------------------------------------------- sequence strip */

.seq { display: grid; gap: 0.9rem; }
@media (min-width: 700px) { .seq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } }
.seq--four { }
@media (min-width: 700px) { .seq--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seq figure { margin: 0; }
.seq__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--stone-3); }
.seq__img img { width: 100%; height: 100%; object-fit: cover; }
.seq figcaption { display: flex; gap: 0.6rem; align-items: baseline; padding-top: 0.6rem; font-size: 0.92rem; color: var(--ink-2); }
.seq__step {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-deep); flex: none; margin: 0;
}
.band--navy .seq figcaption, .band--deep .seq figcaption { color: var(--on-navy-2); }
.band--navy .seq__step, .band--deep .seq__step { color: var(--orange); }

/* -------------------------------------------------------------- reviews */

.reviews { display: grid; gap: 1.1rem; }
@media (min-width: 800px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; } }
.review {
  background: var(--paper); border-radius: var(--r-lg); padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-1); display: flex; flex-direction: column;
}
.review blockquote { margin: 0.85rem 0 0; font-size: 1.045rem; line-height: 1.55; color: var(--ink); }
.review figcaption { margin-top: auto; padding-top: 1.05rem; font-size: 0.92rem; color: var(--ink-3); }
.review figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 0.98rem; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; fill: var(--orange); }
.btn .stars svg, .btn > svg.star { fill: currentColor; }

.review--inline {
  background: transparent; box-shadow: none; padding: 0;
  border-left: 3px solid var(--orange); padding-left: 1.2rem;
}

/* ------------------------------------------------------ schedule of work */

.stages { border-top: 1px solid var(--line); }
.stage {
  display: grid; grid-template-columns: 1fr; gap: 0.35rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 760px) {
  .stage { grid-template-columns: 5.5rem 15rem 1fr; gap: 1.75rem; align-items: baseline; }
}
.stage__mark { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.09em; color: var(--orange-deep); margin: 0; }
.stage h3 { font-size: 1.14rem; }
.stage p { font-size: 1rem; color: var(--ink-2); margin: 0; }
.band--navy .stages { border-top-color: var(--line-dark); }
.band--navy .stage { border-bottom-color: color-mix(in oklch, white 9%, transparent); }
.band--navy .stage__mark { color: var(--orange); }

/* ------------------------------------------------------------ area index */

.areas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 1.5rem; }
@media (min-width: 700px) { .areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .areas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area-link {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.72rem 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; font-weight: 500; font-size: 1rem;
  transition: color 140ms var(--ease), padding-left 140ms var(--ease);
}
.area-link:hover { color: var(--navy); padding-left: 0.4rem; }
.area-link .note { font-size: 0.66rem; }
.band--navy .area-link { border-bottom-color: color-mix(in oklch, white 12%, transparent); }
.band--navy .area-link:hover { color: #fff; }

/* --------------------------------------------------------------- gallery */

.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1040px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery__img { aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--stone-3); }
.gallery__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 400ms var(--ease); }
.gallery figure:hover .gallery__img img { scale: 1.04; }
.gallery figcaption { font-size: 0.86rem; color: var(--ink-3); padding-top: 0.45rem; }
.gallery--tall .gallery__img { aspect-ratio: 3 / 4; }
/* Two up, wide crop. Used for the larger, higher resolution project images. */
.gallery--wide { grid-template-columns: 1fr; }
@media (min-width: 700px) { .gallery--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery--wide .gallery__img { aspect-ratio: 16 / 10; }

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; line-height: 1.32;
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none; margin-top: 0.42em;
  width: 12px; height: 12px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  rotate: 45deg; transition: rotate 200ms var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; }
.faq__body { padding: 0 0 1.3rem; }
.faq__body p { font-size: 1.02rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ form */

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.38rem; }
.field label { font-weight: 600; font-size: 0.96rem; }
.field .hint { font-size: 0.86rem; color: var(--ink-3); margin: 0; }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1.0125rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in oklch, var(--navy) 26%, transparent);
  border-radius: var(--r);
  padding: 0.82rem 0.9rem; min-height: 52px; width: 100%;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in oklch, var(--navy) 44%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--orange) 28%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: oklch(52% 0.19 27); }
.field__error { font-size: 0.88rem; color: oklch(44% 0.18 27); font-weight: 500; margin: 0; }
.field__error:empty { display: none; }

.form__status { font-size: 1rem; font-weight: 500; padding: 0.85rem 1rem; border-radius: var(--r); margin: 0; }
.form__status:empty { display: none; }
.form__status[data-state="error"] { background: oklch(94% 0.04 27); color: oklch(38% 0.16 27); }
.form__status[data-state="sending"] { background: var(--stone-2); color: var(--ink-2); }

.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- footer */

/* Warm ground on the main block so the logo sits on the light background it was
   drawn for, then a navy bar underneath so the page still closes on brand. */
.footer {
  background: var(--stone-2);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 2.4rem + 3vw, 4.75rem);
}
.footer__grid { display: grid; gap: 2.4rem; padding-bottom: clamp(2.4rem, 4vw, 3.5rem); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 2.5rem; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.35fr 0.85fr 0.85fr 1.05fr; gap: 3rem; } }

.footer__brand { max-width: 42ch; }
.footer__logo img { height: 74px; width: auto; }
@media (min-width: 760px) { .footer__logo img { height: 92px; } }

.footer__tag { margin: 1.15rem 0 0; color: var(--ink-2); font-size: 1rem; max-width: 36ch; }
.footer__motto {
  margin: 1.2rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: -0.014em; color: var(--navy); line-height: 1.35;
}
.footer__motto span { color: var(--orange-deep); }

.footer__head {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 0.9rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.footer__list a {
  display: block; padding: 0.3rem 0; color: var(--ink-2); text-decoration: none; font-size: 0.985rem;
  transition: color 140ms var(--ease), padding-left 140ms var(--ease);
}
.footer__list a:hover { color: var(--navy); padding-left: 0.3rem; }

.footer__contact { display: grid; gap: 0.5rem; }
.footer__contact a {
  display: flex; gap: 0.65rem; align-items: center;
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 1.02rem;
  padding: 0.3rem 0;
}
.footer__contact a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.footer__contact svg { width: 19px; height: 19px; fill: var(--orange); flex: none; }
.footer__contact .footer__wa svg { fill: var(--wa); }
.footer__note { margin: 1rem 0 0; font-size: 0.92rem; color: var(--ink-3); max-width: 32ch; }
.footer__note strong { color: var(--ink-2); }

.footer__bar { background: var(--navy-deep); color: color-mix(in oklch, white 74%, transparent); }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; align-items: center;
  padding-block: 1.35rem;
  font-size: 0.88rem;
}
.footer__meta a { color: inherit; text-decoration: none; }
.footer__meta a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.footer__meta p { margin: 0; }
.site-credit { margin-left: auto; }
.site-credit a { text-decoration: underline; text-decoration-thickness: 1px; }

/* -------------------------------------------------- persistent whatsapp */

.wa-fab {
  position: fixed; right: 1rem; z-index: 80;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: none;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 10px oklch(20% 0.05 260 / 0.24), 0 12px 34px oklch(20% 0.05 260 / 0.22);
  transition: transform 180ms var(--ease), background-color 140ms var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); background: color-mix(in oklch, var(--wa) 88%, black); }
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
@media (min-width: 720px) { .wa-fab { display: flex; } }

/* Mobile sticky bar: WhatsApp first, then call. Thumb zone. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1px;
  background: color-mix(in oklch, var(--navy) 30%, transparent);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 6px oklch(20% 0.05 260 / 0.12), 0 -10px 30px oklch(20% 0.05 260 / 0.16);
}
@media (min-width: 720px) { .callbar { display: none; } }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 58px; text-decoration: none; font-weight: 600; font-size: 1.02rem;
}
.callbar a svg { width: 21px; height: 21px; fill: currentColor; }
.callbar__wa { background: var(--wa); color: #fff; }
.callbar__call { background: var(--navy); color: #fff; }
body { padding-bottom: 0; }
@media (max-width: 719px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------ drawing linework */

/* The client asked for extremely faint architectural linework on selected warm
   sections only. Three instances site-wide, never behind body copy, always
   under 5% opacity. Decorative, so hidden from assistive technology. */
.linework {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  color: var(--navy);
  opacity: 0.11;
}
.linework svg { position: absolute; width: min(1500px, 128%); height: auto; }
.linework--plan svg  { right: -14%; top: 50%; translate: 0 -50%; }
.linework--elev svg  { left: -12%; bottom: -10%; }
.linework--detail svg{ right: -10%; top: -8%; }

/* Fades the drawing out where the text column sits, so it is present at the
   edges of a section and gone behind the words. */
.linework::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--ln-ground) 0%, var(--ln-ground) 30%,
    color-mix(in oklch, var(--ln-ground) 55%, transparent) 52%,
    transparent 78%);
}
.band--stone2 .linework { --ln-ground: oklch(93.4% 0.011 76); }
.band--paper  .linework { --ln-ground: oklch(99.1% 0.004 80); }
.linework { --ln-ground: oklch(96.6% 0.008 78); }

@media (max-width: 900px) {
  .linework { opacity: 0.075; }
  .linework::after { background: linear-gradient(to bottom,
    transparent 0%, color-mix(in oklch, var(--ln-ground) 70%, transparent) 100%); }
}

/* Diagonal hatch, from the drawing set. One panel treatment. */
.hatch {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in oklch, var(--navy) 7%, transparent) 0 1px,
    transparent 1px 9px
  );
}

/* ------------------------------------------------------------ utilities */

.stack > * + * { margin-top: var(--stack, 1.1rem); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: 2.5rem; }
.mt-4 { margin-top: 3.25rem; }
.center { text-align: center; }

.tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2); background: var(--stone-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 0.28rem 0.55rem;
}

.callout {
  border-left: 3px solid var(--orange);
  background: var(--stone-2);
  padding: 1.15rem 1.3rem;
  border-radius: 0 var(--r) var(--r) 0;
}
.callout p { font-size: 1rem; }
.callout__head { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.35rem; }

/* Two-column prose for long guidance sections, collapsing to one on mobile. */
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.5rem; }
.prose h2 + p, .prose h2 + .dim { margin-top: 0.9rem; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.45rem; max-width: 66ch; }
.prose li::marker { color: var(--orange); }

/* --------------------------------------------------------------- motion */

/* Dial 3: one scroll reveal on section entry, plus control feedback. Content is
   fully visible at rest. JS adds .reveal-on only when it can observe. */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .header, .callbar, .wa-fab, .drawer { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}

/* ------------------------------------------------------- cookie consent */

/* Only rendered when a GA measurement ID is configured. Google Analytics sets
   cookies, so under PECR it needs prior consent: Consent Mode defaults to
   denied and nothing loads until the visitor chooses. */
.consent {
  position: fixed; left: 0; right: 0; z-index: 130;
  bottom: 0;
  background: var(--paper);
  border-top: 3px solid var(--orange);
  box-shadow: 0 -2px 6px color-mix(in oklch, var(--navy) 10%, transparent),
              0 -14px 40px color-mix(in oklch, var(--navy) 16%, transparent);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 719px) {
  /* Sits above the sticky WhatsApp and call bar rather than over it. */
  .consent { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 0; }
}
.consent[hidden] { display: none; }
.consent__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 1.1rem var(--gutter);
  display: grid; gap: 1rem;
}
@media (min-width: 860px) {
  .consent__inner { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}
.consent h2 { font-size: 1.06rem; margin: 0 0 0.3rem; }
.consent p { font-size: 0.94rem; color: var(--ink-2); margin: 0; max-width: 72ch; }
.consent p a { color: var(--navy); font-weight: 600; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent__actions .btn { min-height: 46px; padding-inline: 1.25rem; font-size: 0.97rem; }