@charset "utf-8";
/* ==========================================================================
   Taste The Night — one stylesheet.
   Design approach A3 "Poster Colour-Block": the page is built from horizontal
   bands, each one a flat colour from a four-colour poster palette, with a
   condensed 800-weight display face set almost to the edge of the band.
   Detail system F2 "Soft cards": 14px radius, short soft shadows.

   Colour is declared ONLY in the two theme token blocks below. No component
   rule contains a literal colour value.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------- theme-independent tokens */
:root {
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1800px;
  --docw: 900px;
  --radius: 14px;
  --radius-sm: 8px;
  --gap: clamp(18px, 2.4vw, 34px);
  --bandpad: clamp(52px, 7vw, 124px);
  --font-head: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --headh: 76px;
  color-scheme: light;
}

/* Anchors clear the sticky header rather than hiding under it. */
[id] { scroll-margin-top: calc(var(--headh) + 10px); }

/* ------------------------------------------------------------- LIGHT THEME */
html[data-theme="light"] {
  color-scheme: light;

  --bg:          #FFF4EC;
  --surface:     #FFFFFF;
  --surface-2:   #FFE3D2;
  --text:        #221008;
  --muted:       #70503F;
  --line:        #F2C9AE;
  --field-line:  #B87850;
  --accent:      #F04E23;
  --accent-ink:  #C9340F;
  --on-accent:   #FFFFFF;
  --accent-2:    #0E7C6B;
  --accent-2-ink:#0B6054;
  --accent-3:    #C9177A;
  --accent-3-ink:#AD1068;
  --accent-bright:#FF8A5C;
  --on-bright:   #2A1105;
  --invert-bg:   #221008;
  --invert-fg:   #FFF4EC;

  --band-cream-bg:   #FFF4EC;
  --band-cream-fg:   #221008;
  --band-paper-bg:   #FFFFFF;
  --band-paper-fg:   #221008;
  --band-coral-bg:   #F04E23;
  --band-coral-fg:   #221008;
  --band-teal-bg:    #0E7C6B;
  --band-teal-fg:    #FFF9F4;
  --band-magenta-bg: #C9177A;
  --band-magenta-fg: #FFF9F4;
  --band-ink-bg:     #221008;
  --band-ink-fg:     #FFF4EC;

  --shadow:    0 10px 30px rgba(34, 16, 8, .12);
  --shadow-sm: 0 4px 14px rgba(34, 16, 8, .10);
  --scrim: linear-gradient(90deg, rgba(255, 244, 236, .94) 0%, rgba(255, 244, 236, .72) 48%, rgba(255, 244, 236, .18) 100%);
  --focus-ring: #0B6054;
  --backdrop: rgba(34, 16, 8, .58);
  --on-coral-btn-bg: #221008;
  --on-coral-btn-fg: #FFF4EC;
}

/* -------------------------------------------------------------- DARK THEME */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #1A0F0C;
  --surface:     #27140F;
  --surface-2:   #35201A;
  --text:        #FFF1E8;
  --muted:       #D0AD99;
  --line:        #4A2C22;
  --field-line:  #8A5B45;
  --accent:      #FF7A4D;
  --accent-ink:  #FF7A4D;
  --on-accent:   #2A1105;
  --accent-2:    #2FD9B4;
  --accent-2-ink:#2FD9B4;
  --accent-3:    #FF5FAE;
  --accent-3-ink:#FF5FAE;
  --accent-bright:#FF9166;
  --on-bright:   #2A1105;
  --invert-bg:   #FFF1E8;
  --invert-fg:   #1A0F0C;

  --band-cream-bg:   #1A0F0C;
  --band-cream-fg:   #FFF1E8;
  --band-paper-bg:   #27140F;
  --band-paper-fg:   #FFF1E8;
  --band-coral-bg:   #C13A12;
  --band-coral-fg:   #FFF1E8;
  --band-teal-bg:    #0B5F52;
  --band-teal-fg:    #FFF1E8;
  --band-magenta-bg: #A01161;
  --band-magenta-fg: #FFF1E8;
  --band-ink-bg:     #0D0705;
  --band-ink-fg:     #FFF1E8;

  --shadow:    0 14px 36px rgba(0, 0, 0, .55);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .45);
  --scrim: linear-gradient(90deg, rgba(26, 15, 12, .92) 0%, rgba(26, 15, 12, .68) 48%, rgba(26, 15, 12, .14) 100%);
  --focus-ring: #2FD9B4;
  --backdrop: rgba(0, 0, 0, .66);
  --on-coral-btn-bg: #FFF1E8;
  --on-coral-btn-fg: #27140F;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  overflow-wrap: break-word;
  transition: background-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
p a, li a, dd a, caption a, address a, .doc a { color: var(--accent-ink); }
p a:hover, li a:hover, dd a:hover, .doc a:hover { color: var(--text); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  overflow-wrap: anywhere;
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: .96;
  margin: 0 0 .4em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
dl { margin: 0; }
strong { font-weight: 600; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; }

.h1 { font-size: clamp(38px, 4.6vw, 70px); max-width: 17ch; text-transform: none; }
.h1--doc { font-size: clamp(38px, 5.4vw, 74px); }
.h2 { font-size: clamp(28px, 3.6vw, 54px); max-width: 20ch; }
.h3 { font-size: clamp(24px, 2.4vw, 36px); }
.h4 { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.04; }
.h5 { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.1; }

.lead { font-size: clamp(17px, 1.35vw, 22px); line-height: 1.55; max-width: 62ch; }
.lead--tight { font-size: clamp(16px, 1.15vw, 19px); }
.lead--wide { max-width: 72ch; }
.lead--doc { max-width: 68ch; }
.micro { font-size: .9rem; color: var(--muted); max-width: 78ch; }
.centertext { max-width: 70ch; margin-inline: auto; text-align: center; font-size: clamp(16px, 1.15vw, 19px); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 .5em;
}
.eyebrow--big { font-size: clamp(15px, 1.2vw, 19px); }

.u-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--accent-ink);
  color: var(--on-accent);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ bands */
.band {
  padding-block: var(--bandpad);
  background: var(--band-cream-bg);
  color: var(--band-cream-fg);
}
.band--cream   { background: var(--band-cream-bg);   color: var(--band-cream-fg); }
.band--paper   { background: var(--band-paper-bg);   color: var(--band-paper-fg); }
.band--coral   { background: var(--band-coral-bg);   color: var(--band-coral-fg); }
.band--teal    { background: var(--band-teal-bg);    color: var(--band-teal-fg); }
.band--magenta { background: var(--band-magenta-bg); color: var(--band-magenta-fg); }
.band--ink     { background: var(--band-ink-bg);     color: var(--band-ink-fg); }

/* On a saturated band every colour is re-pointed at the band foreground:
   a tinted link on a tinted ground never clears 4.5:1, so links there carry
   an underline and the colour accent moves into the buttons. */
.band--coral, .band--teal, .band--magenta, .band--ink { --line: currentColor; }
.band--teal .eyebrow, .band--magenta .eyebrow, .band--ink .eyebrow { color: currentColor; opacity: .82; }
.band--coral .eyebrow { color: currentColor; }
.band--coral .micro, .band--teal .micro,
.band--magenta .micro, .band--ink .micro { color: currentColor; opacity: .86; }
.band--coral p a:not(.btn):not(.arrowlink), .band--teal p a:not(.btn):not(.arrowlink),
.band--magenta p a:not(.btn):not(.arrowlink), .band--ink p a:not(.btn):not(.arrowlink),
.band--coral li a:not(.btn):not(.arrowlink), .band--teal li a:not(.btn):not(.arrowlink),
.band--magenta li a:not(.btn):not(.arrowlink), .band--ink li a:not(.btn):not(.arrowlink),
.band--coral dd a:not(.btn), .band--teal dd a:not(.btn),
.band--magenta dd a:not(.btn), .band--ink dd a:not(.btn) {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.band--teal, .band--magenta, .band--ink { --focus-ring: var(--accent-bright); }
.band--coral { --focus-ring: var(--band-coral-fg); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sechead { max-width: 74ch; margin-bottom: clamp(26px, 3.4vw, 54px); }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead .lead { margin-top: .8em; }

.rule {
  margin: 1.1em 0 0;
  padding-top: .7em;
  border-top: 2px solid var(--line);
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--muted);
  max-width: 70ch;
}
.rule--compliance { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.band--coral .rule, .band--teal .rule,
.band--magenta .rule, .band--ink .rule { color: currentColor; opacity: .9; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .7em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(16px, 1.15vw, 19px);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn--sm { min-height: 44px; padding: .5em 1.1em; font-size: 15px; }
.btn--lg { min-height: 56px; padding: .8em 1.8em; }

.btn--accent { background: var(--accent-ink); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn--ink    { background: var(--text); color: var(--bg); box-shadow: var(--shadow-sm); }

.band--coral .btn--accent { background: var(--on-coral-btn-bg); color: var(--on-coral-btn-fg); }
.band--teal .btn--accent,
.band--magenta .btn--accent,
.band--ink .btn--accent { background: var(--accent-bright); color: var(--on-bright); }
.band--coral .btn--ink { background: var(--on-coral-btn-bg); color: var(--on-coral-btn-fg); }
.band--teal .btn--ink,
.band--magenta .btn--ink,
.band--ink .btn--ink { background: var(--band-teal-fg); color: var(--band-ink-bg); }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}
.btn:active { transform: translateY(0); }

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(16px, 1.1vw, 18px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 3px solid currentColor;
}
.arrowlink::after { content: "\2197"; font-size: 1.05em; }
.arrowlink--on { color: currentColor; }
.band--coral .arrowlink, .band--teal .arrowlink,
.band--magenta .arrowlink, .band--ink .arrowlink { color: currentColor; }
@media (hover: hover) { .arrowlink:hover { color: var(--text); } }
.band--coral .arrowlink:hover, .band--teal .arrowlink:hover,
.band--magenta .arrowlink:hover, .band--ink .arrowlink:hover { opacity: .78; color: currentColor; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin: 1.6em 0 0;
}
.actions--center { justify-content: center; }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  cursor: pointer;
  min-height: 44px;
}
.band--ink .linkbtn, .site-foot .linkbtn { color: currentColor; }

.pill {
  display: inline-block;
  padding: .1em .6em;
  border-radius: 999px;
  background: var(--accent-3-ink);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: .72em;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: .18em;
}

/* ----------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 2px solid var(--line);
}
.site-head__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 10px var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand burger" "nav nav";
  align-items: center;
  gap: 8px 16px;
}
.brandmark {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-height: 48px;
}
.brandmark__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.burger {
  grid-area: burger;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.burger__bars { display: grid; gap: 3px; }
.burger__bars span { display: block; width: 18px; height: 2px; background: currentColor; }

.mainnav { grid-area: nav; display: none; padding-bottom: 10px; }
.mainnav.is-open { display: block; }
.mainnav__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.mainnav__list a {
  display: block;
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--line);
}
.mainnav__list a[aria-current="page"] { color: var(--accent-ink); }
.mainnav__tail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.themeswitch {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: .4em 1em;
  background: transparent;
  color: inherit;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.themeswitch__icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-2-ink);
  box-shadow: inset -4px -2px 0 0 var(--accent-3-ink);
}
.themeswitch--foot { margin-top: 1em; }

/* ------------------------------------------------------------------- hero */
.hero { padding-block: clamp(24px, 2.6vw, 44px) clamp(32px, 3.6vw, 64px); }
.hero__grid { display: grid; gap: var(--gap); grid-template-areas: "head" "fig" "list"; }
.hero__head { grid-area: head; min-width: 0; }
.hero__fig { grid-area: fig; margin: 0; min-width: 0; }
.hero__list { grid-area: list; min-width: 0; }

.hero__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: clamp(16rem, 42vh, 34rem);
}
.hero__cta { margin: 1.4em 0 0; }
.hero__list .ticklist { margin-top: .5em; margin-bottom: 0; }

.ticklist, .crosslist, .plainlist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .6em; }
.ticklist > li, .crosslist > li { position: relative; padding-left: 1.7em; }
.ticklist > li::before,
.crosslist > li::before {
  position: absolute;
  left: 0;
  top: .05em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1.2;
}
.ticklist > li::before { content: "\2713"; color: var(--accent-2-ink); }
.crosslist > li::before { content: "\2014"; color: var(--accent-3-ink); }
.ticklist--on > li::before, .band--teal .ticklist > li::before,
.band--magenta .ticklist > li::before, .band--ink .ticklist > li::before,
.band--coral .ticklist > li::before { color: currentColor; }
.band--teal .crosslist > li::before, .band--magenta .crosslist > li::before,
.band--ink .crosslist > li::before, .band--coral .crosslist > li::before { color: currentColor; }
.ticklist--lg > li { font-size: clamp(16px, 1.1vw, 18px); }
.plainlist > li { padding: 0; }
.plainlist--links { gap: .3em; }

/* --------------------------------------------------------------- flagship */
.flag { display: grid; gap: var(--gap); grid-template-areas: "fig" "body"; }
.flag__fig { grid-area: fig; margin: 0; }
.flag__body { grid-area: body; min-width: 0; }
.flag__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.factgrid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.4em 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.factgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.factgrid__cell { padding: .8em 1em; background: var(--surface-2); }
.band--teal .factgrid__cell, .band--magenta .factgrid__cell,
.band--ink .factgrid__cell, .band--coral .factgrid__cell { background: transparent; }
.factgrid dt {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .2em;
}
.band--teal .factgrid dt, .band--magenta .factgrid dt,
.band--ink .factgrid dt, .band--coral .factgrid dt { color: currentColor; opacity: .8; }
.factgrid dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1;
}

/* ------------------------------------------------------- claim / tile grids */
.claimgrid, .tilegrid, .cardgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
.claimgrid__item {
  padding: clamp(18px, 1.8vw, 28px);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
}
.band--cream .claimgrid__item, .band--paper .claimgrid__item { background: var(--surface-2); border-color: transparent; }
.claimgrid__item > :last-child { margin-bottom: 0; }
.claimgrid__item p { font-size: .98rem; }

.tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num head" "num text" "num meta";
  gap: .2em 1em;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
}
.band--teal .tile, .band--magenta .tile, .band--ink .tile, .band--coral .tile {
  background: transparent;
  color: currentColor;
  border: 2px solid currentColor;
}
.tile__num {
  grid-area: num;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 44px);
  line-height: .9;
  color: var(--accent-3-ink);
}
.band--teal .tile__num, .band--magenta .tile__num,
.band--ink .tile__num, .band--coral .tile__num { color: currentColor; opacity: .75; }
.tile__h { grid-area: head; margin: 0; }
.tile__h a { text-decoration: none; }
.tile__h a:hover { text-decoration: underline; }
.tile__text { grid-area: text; margin: .3em 0 0; font-size: .97rem; }
.tile__meta {
  grid-area: meta;
  margin: .6em 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .86rem;
}

/* ------------------------------------------------------------- card grids */
.card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.band--paper .card { background: var(--bg); }
.card__fig { margin: 0; }
.card__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.card__body {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.6vw, 24px);
}
.card__body > :last-child { margin-bottom: 0; }
.card__motif {
  margin: 0 0 .4em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.card__h { margin: 0 0 .4em; }
.card__h a { text-decoration: none; }
.card__h a:hover { text-decoration: underline; }
.card__text { font-size: .95rem; }
.card__note { font-size: .88rem; color: var(--muted); }
.card__meta {
  margin-top: auto;
  padding-top: .8em;
  border-top: 2px solid var(--line);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.card--plain { box-shadow: none; border: 2px solid var(--line); background: transparent; }

/* ----------------------------------------------------------------- mosaic */
.mosaic { display: grid; gap: var(--gap); grid-template-areas: "a" "b" "c" "d"; }
.mosaic figure { margin: 0; min-width: 0; display: grid; grid-template-rows: auto auto; gap: .6em; }
.mosaic__a { grid-area: a; }
.mosaic__b { grid-area: b; }
.mosaic__c { grid-area: c; }
.mosaic__d { grid-area: d; }
.mosaic img {
  width: 100%;
  min-width: 0;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mosaic__a img { aspect-ratio: 8 / 5; max-height: clamp(14rem, 34vh, 26rem); }
.mosaic__b img, .mosaic__c img, .mosaic__d img { aspect-ratio: 1 / 1; max-height: clamp(12rem, 26vh, 20rem); }
.mosaic figcaption { font-size: .9rem; color: var(--muted); }
.band--paper .mosaic figcaption { color: var(--muted); }

/* ------------------------------------------------------------ price lists */
.pricelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pricelist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4em 1.5em;
  padding: 1em 0;
  border-top: 2px solid var(--line);
}
.pricelist__row:last-child { border-bottom: 2px solid var(--line); }
.pricelist__name { display: block; min-width: 0; }
.pricelist__name a {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 27px);
  text-decoration: none;
  color: inherit;
}
.pricelist__name a:hover { text-decoration: underline; }
.pricelist__meta { display: block; font-size: .88rem; color: var(--muted); }
.pricelist__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em; }
.pricelist__from { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pricelist__price strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 30px);
  color: var(--accent-ink);
}
.pricelist__range { font-size: .86rem; color: var(--muted); width: 100%; }

.pricebox {
  padding: clamp(20px, 2vw, 30px);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.pricebox__big {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 58px);
  line-height: .95;
  color: var(--accent-ink);
}
.pricebox__range { margin: .2em 0 1em; font-size: .92rem; color: var(--muted); }
.pricebox__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8em;
  margin: 0 0 1em;
}
.pricebox__facts dt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pricebox__facts dd { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.pricebox__note { font-size: .88rem; color: var(--muted); }

.pricegroup { margin-bottom: clamp(32px, 4vw, 60px); }
.pricegroup:last-child { margin-bottom: 0; }
.pricegroup h3 a { text-decoration: none; color: inherit; }
.pricegroup h3 a:hover { text-decoration: underline; }
.pricegroup__lead { max-width: 70ch; color: var(--muted); }

/* ----------------------------------------------------------------- tables */
.tablehint { display: none; font-size: .86rem; color: var(--muted); margin-bottom: .6em; }
.tablehint::after { content: " \2192"; }
@media (min-width: 768px) and (max-width: 1279px) { .tablehint { display: block; } }
.tablewrap { overflow-x: auto; border-radius: var(--radius); }
.tablewrap:focus-visible { outline: 3px solid var(--focus-ring); }
.datatable { width: 100%; border-collapse: collapse; font-size: .97rem; }
.datatable caption {
  text-align: left;
  font-size: .9rem;
  color: var(--muted);
  padding: 0 0 .8em;
}
.datatable th, .datatable td {
  text-align: left;
  padding: .8em .9em;
  border-bottom: 2px solid var(--line);
  vertical-align: top;
}
.datatable thead th {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--surface-2);
  white-space: nowrap;
}
.datatable tbody tr:nth-child(even) th,
.datatable tbody tr:nth-child(even) td { background: var(--surface-2); }
.datatable tbody th { font-size: 1.02rem; }
.datatable tbody th a { color: var(--accent-ink); text-decoration: none; border-bottom: 2px solid currentColor; }
.datatable__sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: .84rem; color: var(--muted); margin-top: .25em; }
.datatable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.band--teal .datatable thead th, .band--magenta .datatable thead th,
.band--ink .datatable thead th, .band--coral .datatable thead th { background: transparent; }

/* ------------------------------------------------------- steps / timeline */
.steps, .rhythm, .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num body";
  gap: 0 clamp(14px, 1.4vw, 24px);
  align-items: start;
}
.steps__num {
  grid-area: num;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 56px);
  line-height: .85;
  color: var(--accent-3-ink);
}
.band--teal .steps__num, .band--magenta .steps__num,
.band--ink .steps__num, .band--coral .steps__num { color: currentColor; opacity: .72; }
.steps__body { grid-area: body; min-width: 0; }
.steps__body > :last-child { margin-bottom: 0; }
.steps__body p { font-size: .98rem; }

.rhythm__stage {
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--radius);
  border: 2px solid var(--line);
}
.rhythm__tag {
  margin: 0 0 .5em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.rhythm__stage > :last-child { margin-bottom: 0; }

.timeline__row {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  grid-template-areas: "time body";
  gap: 0 clamp(12px, 1.2vw, 20px);
  padding-bottom: 1em;
  border-bottom: 2px solid var(--line);
}
.timeline__row:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline__time {
  grid-area: time;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.band--teal .timeline__time, .band--magenta .timeline__time,
.band--ink .timeline__time, .band--coral .timeline__time { color: currentColor; }
.timeline__body { grid-area: body; min-width: 0; }
.timeline__body > :last-child { margin-bottom: 0; }
.timeline__body p { font-size: .97rem; }

.contactline { margin-top: 1.6em; font-size: 1rem; }

/* ------------------------------------------------------------- split list */
.splitlist { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.splitlist__col { min-width: 0; }
.splitlist__col h3 { margin-bottom: .7em; }

.speclist { display: grid; gap: 0; }
.speclist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2em 1.5em;
  padding: .9em 0;
  border-top: 2px solid var(--line);
}
.speclist__row:last-child { border-bottom: 2px solid var(--line); }
.speclist dt {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.speclist dd { margin: 0; min-width: 0; }
.speclist--tight .speclist__row { padding: .7em 0; }

/* ---------------------------------------------------------- page headings */
.pagehead { padding-block: clamp(30px, 4vw, 72px) var(--bandpad); }
.pagehead__grid { display: grid; gap: var(--gap); grid-template-areas: "text" "fig"; }
.pagehead__text { grid-area: text; }
.pagehead__fig { grid-area: fig; margin: 0; }
.pagehead__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: clamp(14rem, 36vh, 28rem);
}

.crumbs { margin-bottom: 1.2em; font-size: .9rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.crumbs li + li::before { content: "/"; margin-right: .5em; opacity: .6; }
.crumbs a { color: var(--accent-ink); }

.anchornav {
  margin-top: 1.8em;
  padding: clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.anchornav--wide { margin-bottom: clamp(26px, 3vw, 44px); }
.anchornav__h {
  margin: 0 0 .6em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.anchornav ul, .anchornav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em 1.4em; }
.anchornav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .02em;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* ------------------------------------------------------------ format rows */
.fmt { display: grid; gap: var(--gap); grid-template-areas: "fig" "body"; }
.fmt__fig { grid-area: fig; margin: 0; }
.fmt__body { grid-area: body; min-width: 0; }
.fmt__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.feature { display: grid; gap: var(--gap); grid-template-areas: "fig" "body"; }
.feature__fig { grid-area: fig; margin: 0; }
.feature__body { grid-area: body; min-width: 0; }
.feature__fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.feature__price { display: grid; gap: .2em; margin: 1em 0 0; }
.feature__price strong { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); color: var(--accent-ink); }
.feature__price span { font-size: .9rem; color: var(--muted); }

.group { padding: clamp(22px, 2.4vw, 36px) 0; border-top: 3px solid var(--line); }
.group:last-child { border-bottom: 3px solid var(--line); }
.group__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(14px, 1.4vw, 24px); align-items: start; }
.group__num {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: .85;
  color: var(--accent-3-ink);
}
.group__head h3 { margin-bottom: .3em; }
.group__head h3 a { text-decoration: none; color: inherit; }
.group__head h3 a:hover { text-decoration: underline; }
.group__lead { max-width: 74ch; color: var(--muted); }
.group__list { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 2px; }
.group__fmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2em 1.5em;
  padding: .9em 1em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
}
@media (hover: hover) { .group__fmt:hover { background: var(--accent-bright); color: var(--on-bright); } }
.group__fmtname { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; }
.group__fmtmeta { font-size: .88rem; }
.group__foot { margin: 0; }

.scen { display: grid; gap: var(--gap); grid-template-areas: "intro" "plan"; }
.scen__intro { grid-area: intro; min-width: 0; }
.scen__plan {
  grid-area: plan;
  min-width: 0;
  padding: clamp(18px, 2vw, 30px);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.scen__planh { margin-bottom: 1em; }
.scen__fig { margin: 1.4em 0; }
.scen__fig img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  max-height: clamp(12rem, 30vh, 22rem);
}

.twocol { display: grid; gap: var(--gap); grid-template-areas: "main" "aside"; }
.twocol__main { grid-area: main; min-width: 0; }
.twocol > .pricebox { grid-area: aside; }

.ctaband { display: grid; gap: var(--gap); grid-template-areas: "text" "acts"; align-items: center; }
.ctaband > div { grid-area: text; min-width: 0; }
.ctaband > .actions { grid-area: acts; margin: 0; }

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0; max-width: 80ch; }
.faq__item { border-top: 2px solid var(--line); }
.faq__item:last-child { border-bottom: 2px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 1em;
  min-height: 56px;
  padding: .8em 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(19px, 1.6vw, 25px);
  line-height: 1.1;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  margin-left: auto;
  font-size: 1.2em;
  line-height: 1;
  color: var(--accent-ink);
}
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__a { padding-bottom: 1.2em; max-width: 72ch; }
.faq__a p { margin: 0; }

/* ----------------------------------------------------------- legal / docs */
.doc {
  width: 100%;
  max-width: calc(var(--docw) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.doc__toc {
  padding: clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: clamp(26px, 3vw, 44px);
}
.doc__toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: .3em; }
.doc__toc a { color: var(--accent-ink); }
.doc__sec { padding-bottom: clamp(22px, 2.4vw, 34px); }
.doc__h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6em; align-items: baseline; margin-bottom: .7em; }
.doc__num { color: var(--accent-3-ink); }
.doc__sec p, .doc__sec li { font-size: 1rem; }
.doc__sec ul, .doc__sec ol { display: grid; gap: .5em; }
.doc__sec--contact { border-top: 3px solid var(--line); padding-top: clamp(22px, 2.4vw, 34px); }
.doc__related { font-size: .95rem; }
.doc .tablewrap { margin-bottom: 1.2em; }

/* ------------------------------------------------------------------- form */
.enqwrap, .contact { display: grid; gap: var(--gap); grid-template-areas: "intro" "form"; }
.enqwrap__intro, .contact__aside { grid-area: intro; min-width: 0; }
.enqwrap__form, .contact__form { grid-area: form; min-width: 0; }
.contact { grid-template-areas: "form" "intro"; }

.enqwrap__form {
  padding: clamp(20px, 2.4vw, 38px);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.contact__aside {
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: var(--radius);
  background: var(--surface-2);
  align-self: start;
}

.enq__grid { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: minmax(0, 1fr); }
.field { margin: 0; display: grid; gap: .35em; min-width: 0; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.field__opt { font-family: var(--font-body); font-weight: 400; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.field__hint { font-size: .86rem; color: var(--muted); }
.field__err { font-size: .9rem; font-weight: 600; color: var(--accent-ink); }
.req { color: var(--accent-ink); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: .6em .8em;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--field-line);
  border-radius: var(--radius-sm);
}
textarea { min-height: 7em; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--accent-ink); border-width: 3px; }
.enqwrap__form input, .enqwrap__form select, .enqwrap__form textarea { background: var(--bg); }

.enq__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq__summary {
  margin: 0 0 1.4em;
  padding: 1em 1.2em;
  border: 3px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.enq__summaryh { font-size: 1.1rem; margin-bottom: .5em; }
.enq__summary ul { margin: 0; padding-left: 1.2em; display: grid; gap: .3em; }
.enq__checks { display: grid; gap: .8em; margin: 1.6em 0; align-items: start; }
.enq__note { font-size: .9rem; color: var(--muted); }
.enq__submit { margin: 1.2em 0; }
.enq__legal { font-size: .86rem; color: var(--muted); max-width: 76ch; }

.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2em .8em;
  align-items: start;
  padding: .7em .9em;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.choice input { width: 22px; height: 22px; margin: .15em 0 0; accent-color: var(--accent-ink); }
.choice__body { min-width: 0; display: grid; gap: .2em; }
.choice__t { font-weight: 600; }
.choice__d { font-size: .88rem; color: var(--muted); }
.choice--locked { opacity: .9; cursor: default; }
.choice--bad { border-color: var(--accent-ink); border-width: 3px; }


/* ---------------------------------------------- horizontal enquiry band */
/* The form sits directly under the hero and runs across the full width:
   intro across the top, fields in one four-column block, consents and the
   button closing it off. */
.enqband__head {
  display: grid;
  gap: clamp(10px, 1.2vw, 20px) var(--gap);
  grid-template-areas: "intro" "lead" "contacts";
  margin-bottom: clamp(22px, 2.6vw, 40px);
}
.enqband__intro { grid-area: intro; min-width: 0; }
.enqband__intro .h2 { margin-bottom: 0; }
.enqband__lead { grid-area: lead; margin: 0; max-width: 56ch; font-size: clamp(16px, 1.1vw, 18px); }
.enqband__contacts {
  grid-area: contacts;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.6em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(16px, 1.1vw, 19px);
  letter-spacing: .02em;
}

.enq--row .enq__grid { grid-template-columns: minmax(0, 1fr); }
.enq--row .enq__checks { margin: 1.4em 0 1.2em; }
.enq--row textarea { min-height: 5.4em; }
.enq--row .enq__foot { display: grid; gap: .8em; grid-template-areas: "note" "submit" "legal"; }
.enq--row .enq__note { grid-area: note; margin: 0; align-self: center; }
.enq--row .enq__submit { grid-area: submit; margin: 0; }
.enq--row .enq__legal { grid-area: legal; margin: 0; }

/* On a saturated band the fields keep their own surface, and every piece of
   small print switches to the band foreground so it stays readable. */
.band--teal .enq__note, .band--teal .enq__legal, .band--teal .field__hint,
.band--teal .field__opt, .band--teal .choice__d,
.band--coral .enq__note, .band--coral .enq__legal, .band--coral .field__hint,
.band--coral .field__opt, .band--coral .choice__d,
.band--magenta .enq__note, .band--magenta .enq__legal, .band--magenta .field__hint,
.band--magenta .field__opt, .band--magenta .choice__d {
  color: currentColor;
  opacity: .88;
}
.band--teal .req, .band--coral .req, .band--magenta .req { color: currentColor; }
.band--teal .field__err, .band--coral .field__err, .band--magenta .field__err {
  color: currentColor;
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
}
.band--teal .field__err::before, .band--coral .field__err::before,
.band--magenta .field__err::before { content: "\2014\00a0"; }
.band--teal .enq__summary, .band--coral .enq__summary, .band--magenta .enq__summary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--accent-ink);
}
.band--teal .enq__summary a, .band--coral .enq__summary a, .band--magenta .enq__summary a { color: var(--accent-ink); }
.band--teal .choice, .band--coral .choice, .band--magenta .choice { border-color: currentColor; }
.band--teal input[type="checkbox"], .band--coral input[type="checkbox"], .band--magenta input[type="checkbox"] { accent-color: var(--band-ink-bg); }

/* ----------------------------------------------------------------- footer */
.site-foot {
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding-block: clamp(40px, 5vw, 80px) 0;
}
.site-foot__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
.site-foot__brand, .site-foot__col { min-width: 0; }
.site-foot__claim { max-width: 46ch; font-size: .98rem; }
.site-foot__h {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8em;
  opacity: .8;
}
.site-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.site-foot__list a, .site-foot a { color: currentColor; }
.site-foot__list li { font-size: .98rem; }
.site-foot address { font-style: normal; }
.site-foot .themeswitch { border-color: currentColor; }
.site-foot__legal {
  max-width: var(--maxw);
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: clamp(20px, 2vw, 30px) var(--pad) clamp(28px, 3vw, 44px);
  border-top: 2px solid currentColor;
}
.disclaimer { font-size: .95rem; max-width: 92ch; }
.copy { font-size: .88rem; margin: 0; opacity: .85; }
.totop { margin-left: .6em; }

/* --------------------------------------------------------- cookie banner */
.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--surface);
  color: var(--text);
  border-top: 3px solid var(--accent-ink);
  box-shadow: var(--shadow);
  max-height: 80vh;
  overflow-y: auto;
}
.cookiebar--static { position: static; max-height: none; margin-top: 2px; }
.cookiebar__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(16px, 2vw, 26px) var(--pad);
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
.cookiebar__h { font-size: clamp(19px, 1.7vw, 25px); }
.cookiebar__text p { font-size: .93rem; margin-bottom: .6em; max-width: 86ch; }
.cookiebar__text p:last-child { margin-bottom: 0; }
.cookiebar__acts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.cookiebar__acts .btn { width: 100%; }

.cookiedialog {
  width: min(640px, calc(100vw - 2 * var(--pad)));
  max-height: 86vh;
  padding: 0;
  border: 3px solid var(--accent-ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.cookiedialog::backdrop { background: var(--backdrop); }
.cookiedialog__form { padding: clamp(20px, 2.4vw, 34px); }
.cookiedialog__h { font-size: clamp(22px, 2vw, 30px); }
.cookiedialog__lead, .cookiedialog__note { font-size: .92rem; color: var(--muted); }
.cookiedialog__set { border: 0; padding: 0; margin: 1.2em 0; display: grid; gap: .7em; }
.cookiedialog__acts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

/* =======================================================================
   TABLET — 768px and up. A third layout, not a stretched phone.
   ======================================================================= */
@media (min-width: 768px) {
  :root { --pad: 32px; }

  .hero__grid { grid-template-areas: "head head" "fig fig" "list list"; }
  .hero__list .ticklist { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; gap: .6em 2em; }

  .claimgrid, .tilegrid, .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cardgrid { grid-auto-rows: 1fr; }
  .splitlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .mosaic { grid-template-areas: "a a" "b c" "d d"; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pricelist__row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .pricelist__price { justify-content: flex-end; text-align: right; }
  .pricelist__range { width: auto; }

  .speclist__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .group__fmt { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .enq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enq--row .enq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enq--row .enq__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enqband__head { grid-template-areas: "intro lead" "contacts contacts"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .cookiebar__in { grid-template-columns: minmax(0, 1fr) minmax(220px, auto); }
  .cookiebar__acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cookiedialog__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em 2em; }
  .steps--four, .steps--seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctaband { grid-template-areas: "text" "acts"; }
  .pagehead__grid { grid-template-areas: "text" "fig"; }
}

/* ------------------------------------------- tablet landscape, 1024-1279 */
@media (min-width: 1024px) {
  :root { --pad: 48px; --headh: 86px; }

  .site-head__in {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand nav";
    gap: 24px;
  }
  .burger { display: none; }
  .mainnav {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-bottom: 0;
  }
  .mainnav__list { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
  .mainnav__list a { border-bottom: 0; font-size: 16px; padding: 6px 0; }
  .mainnav__list a[aria-current="page"] { border-bottom: 3px solid currentColor; }

  .claimgrid--3, .cardgrid--3, .tilegrid, .claimgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .claimgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cardgrid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flag { grid-template-areas: "fig body"; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .feature { grid-template-areas: "fig body"; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .fmt { grid-template-areas: "fig body"; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .fmt--flip { grid-template-areas: "body fig"; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .twocol { grid-template-areas: "main aside"; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: start; }
  .scen { grid-template-areas: "intro plan"; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .enqwrap { grid-template-areas: "intro form"; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .contact { grid-template-areas: "form intro"; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; }
  .ctaband { grid-template-areas: "text acts"; grid-template-columns: minmax(0, 1.4fr) auto; }
  .pagehead__grid { grid-template-areas: "text fig"; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
  .pagehead--text .wrap { max-width: calc(1100px + 2 * var(--pad)); margin-inline: auto; }
  .site-foot__in { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .steps--seven { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rhythm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic { grid-template-areas: "a b c" "a d d"; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mosaic__a img { aspect-ratio: 4 / 5; max-height: none; }
  .scen__plan { position: sticky; top: 92px; }
  .enq--row .enq__checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .enq--row .enq__foot {
    grid-template-areas: "note submit" "legal legal";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1em var(--gap);
  }
}

/* ------------------------------------------------------- desktop, 1280+ */
@media (min-width: 1280px) {
  :root { --pad: clamp(56px, 5vw, 88px); }

  .hero__grid {
    grid-template-areas: "fig head" "fig list";
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
  }
  .hero__fig { align-self: stretch; display: grid; }
  .h1 { letter-spacing: -.015em; }
  .hero__fig img { aspect-ratio: auto; height: 100%; min-height: 0; max-height: none; }
  .hero__list .ticklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em 1.8em; font-size: .95rem; }
  .hero__list {
    padding: clamp(18px, 1.8vw, 26px);
    border-radius: var(--radius);
    background: var(--band-teal-bg);
    color: var(--band-teal-fg);
    align-self: stretch;
  }
  .hero__list .ticklist > li::before { color: currentColor; }

  .claimgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .claimgrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .claimgrid--6, .claimgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ticklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twocol__main { padding-right: clamp(10px, 2vw, 40px); }
  .pricebox { position: sticky; top: 92px; }
  .enq--row .enq__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .enq--row .field--wide { grid-column: span 2; }
  .enqband__head { grid-template-areas: "intro lead contacts"; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; }
  .enqband__contacts { flex-direction: column; gap: .2em; text-align: right; }
}

/* ------------------------------------------------- phone table fallback */
@media (max-width: 767px) {
  .datatable, .datatable thead, .datatable tbody, .datatable tr, .datatable th, .datatable td { display: block; width: 100%; }
  .datatable thead { display: none; }
  .datatable tr {
    margin-bottom: 14px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .datatable th, .datatable td { border-bottom: 1px solid var(--line); padding: .7em .9em; }
  .datatable tr > :last-child { border-bottom: 0; }
  .datatable td[data-label]::before,
  .datatable th[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .datatable .num { white-space: normal; }
  .tablewrap { overflow-x: visible; }
}

/* ------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .site-head, .cookiebar, .cookiedialog, .burger, .themeswitch { display: none !important; }
  .band { padding-block: 18px; }
}