@charset "UTF-8";
/* ==========================================================================
   Jolt Crest - site.css
   Design approach A2 "Bold Light Grotesque": light ground, very heavy
   grotesque display, pill buttons, two accents, cards without shadows.
   Palette: clouded grey with plum and antique brass - both themes, one set
   of tokens, no literal colour outside the two blocks below.
   Layout archetype 8: block mosaic. Detail system 4: underline accents.
   Literal colour values appear ONLY in the two theme blocks below.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
/* Local woff2 only. Drop the three files into assets/fonts/ - see
   assets/fonts/README.txt. Until then the fallback stack carries the page. */
@font-face {
  font-family: 'Jolt Display';
  src: url('fonts/display-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jolt Text';
  src: url('fonts/text-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jolt Text';
  src: url('fonts/text-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------- theme-free tokens --- */
:root {
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1800px;
  --maxw-text: 54rem;
  --radius: 4px;
  --radius-pill: 999px;
  --gap: clamp(16px, 2vw, 32px);
  --band-y: clamp(48px, 7vw, 120px);
  --font-head: 'Jolt Display', 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Jolt Text', 'Public Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* ------------------------------------------------------------ dark theme --- */
html[data-theme="dark"] {
  --bg:           #121016;
  --surface:      #1C1922;
  --surface-2:    #26222E;
  --text:         #F2F0F5;
  --muted:        #ADA8B6;
  --line:         #332E3C;
  --line-strong:  #6A6378;
  --accent:       #C2A6DB;
  --on-accent:    #130F18;
  --accent-2:     #D3BE92;
  --invert-bg:    #F2F0F5;
  --invert-fg:    #121016;
  --invert-line:  #D6D2DD;
  --invert-accent:#3A2A47;
  --shadow:       0 18px 48px rgba(0, 0, 0, .55);
  --backdrop:     rgba(18, 16, 22, .66);
  --scrim:        linear-gradient(90deg, rgba(18, 16, 22, .92) 0%, rgba(18, 16, 22, .70) 55%, rgba(18, 16, 22, 0) 100%);
  color-scheme: dark;
}

/* ----------------------------------------------------------- light theme --- */
html[data-theme="light"] {
  --bg:           #F4F3F6;
  --surface:      #FFFFFF;
  --surface-2:    #EAE8EE;
  --text:         #19161E;
  --muted:        #5E5967;
  --line:         #DEDAE2;
  --line-strong:  #8E8898;
  --accent:       #3A2A47;
  --on-accent:    #FFFFFF;
  --accent-2:     #A4794E;
  --invert-bg:    #19161E;
  --invert-fg:    #F4F3F6;
  --invert-line:  #3C3645;
  --invert-accent:#C9B3DE;
  --shadow:       0 12px 34px rgba(25, 22, 30, .12);
  --backdrop:     rgba(25, 22, 30, .55);
  --scrim:        linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .74) 55%, rgba(255, 255, 255, 0) 100%);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent-2); }

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

code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--surface-2);
  padding: .1em .35em;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ utilities --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

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

/* ---------------------------------------------------------------- bands --- */
.band { padding-block: var(--band-y); }
.band--bg { background: var(--bg); color: var(--text); }
.band--surface { background: var(--surface); color: var(--text); }
.band--invert { background: var(--invert-bg); color: var(--invert-fg); }
.band--invert a { color: var(--invert-accent); }
.band--invert .eyebrow { color: var(--invert-accent); }
.band--invert .lead,
.band--invert .note { color: var(--invert-fg); }

/* ----------------------------------------------------------- typography --- */
.h1, .h2, .h3, .h4 { margin: 0 0 .5em; font-weight: 900; line-height: 1.02; }

.h1 {
  font-family: var(--font-head);
  font-size: clamp(2.75rem, 7vw, 7rem);
  letter-spacing: -.02em;
  text-transform: none;
}
.h1--legal { font-size: clamp(2.25rem, 4.5vw, 4rem); }

.h2 {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3.6vw, 3.5rem);
  letter-spacing: -.015em;
}

.h3 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: .01em;
}

p { margin: 0 0 1em; max-width: var(--maxw-text); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
  line-height: 1.5;
  max-width: 44ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75em;
}

.note {
  font-size: .9375rem;
  color: var(--muted);
  border-left: 2px solid var(--line-strong);
  padding-left: 1rem;
  max-width: 60ch;
}
.band--invert .note { border-left-color: var(--invert-accent); }

.notelist { margin-top: 1.5rem; display: grid; gap: .5rem; }
.notelist li {
  font-size: .9375rem;
  color: var(--muted);
  padding-left: 1.25rem;
  position: relative;
  max-width: 70ch;
}
.notelist li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px;
  background: var(--accent-2);
  border-radius: 50%;
}

.hint { display: block; font-size: .875rem; color: var(--muted); margin-top: .35rem; }

.strip {
  display: inline-block;
  margin: 1.5rem 0 0;
  padding: .6rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
}
.band--invert .strip {
  color: var(--invert-fg);
  background: transparent;
  border-color: var(--invert-accent);
}

.tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag--accent {
  color: var(--on-accent);
  background: var(--accent);
  padding: .2rem .5rem;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* --------------------------------------------------------------- links ---- */
/* Detail system 4: the accent lives in underlines, not in blocks. */
.arrowlink {
  display: inline-block;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.arrowlink::after { content: " \2192"; }
.arrowlink:hover { border-bottom-color: var(--accent-2); color: var(--accent-2); }
.arrowlink--invert,
.band--invert .arrowlink {
  color: var(--invert-accent);
  border-bottom-color: var(--invert-accent);
}
.band--invert .arrowlink:hover { color: var(--invert-fg); border-bottom-color: var(--invert-fg); }

.linkbtn {
  background: none;
  border: 0;
  border-bottom: 2px solid var(--accent);
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.linkbtn:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* -------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-2); color: var(--on-accent); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: .7rem 1.2rem; font-size: .9375rem; }
.btn--lg { padding: 1.15rem 2.25rem; font-size: 1.0625rem; }

.band--invert .btn--accent { background: var(--invert-accent); color: var(--invert-bg); }
.band--invert .btn--accent:hover { background: var(--invert-fg); color: var(--invert-bg); }
.band--invert .btn--ghost { color: var(--invert-fg); border-color: var(--invert-line); }

/* --------------------------------------------------------------- header --- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: .9rem var(--pad);
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.brand { display: inline-flex; flex: 0 0 auto; }
.brand img { width: 156px; height: 32px; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.75rem); }
.nav__list a {
  display: inline-block;
  padding: .35rem 0;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.nav__list a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }

.site-head__actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }

.themebtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  padding: .55rem .9rem;
  cursor: pointer;
}
.themebtn:hover { border-color: var(--accent); color: var(--accent); }
.themebtn__icon {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}
.themebtn--foot { margin-top: 1rem; color: var(--text); }

.navtoggle {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  padding: .55rem .9rem;
  cursor: pointer;
}
.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  content: "";
}
.navtoggle__bars { position: relative; }
.navtoggle__bars::before { position: absolute; top: -6px; }
.navtoggle__bars::after { position: absolute; top: 6px; }

@media (max-width: 60rem) {
  .navtoggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--pad) 1.5rem;
  }
  .site-head { position: relative; }
  .site-head__in { flex-wrap: wrap; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__list a { padding: .85rem 0; font-size: 1.0625rem; }
  .site-head__actions { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------- breadcrumbs --- */
.crumbs { background: var(--bg); border-bottom: 1px solid var(--line); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: .75rem;
  font-size: .8125rem;
  color: var(--muted);
}
.crumbs li + li::before { content: "/ "; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------- hero (8) --- */
/* Mosaic: heading cell plus three photos of different heights. */
.hero { padding-block: clamp(32px, 5vw, 72px); }
.hero__mosaic {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
.hero__say { max-width: 46rem; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.75rem 0 0;
  max-width: none;
}
.hero__cell { overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
/* Uniform crop so a portrait and a square source do not produce wildly
   different tile heights, on mobile most of all. */
.hero__cell img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__facts > div { background: var(--surface); padding: 1rem 1.1rem; }
.hero__facts dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__facts dd {
  margin: .25rem 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
}

@media (min-width: 60rem) {
  /* Every cell is placed by name: nothing is left to auto-placement, which is
     what pushed the facts strip into a row of its own on the right. */
  .hero__mosaic {
    grid-template-columns: repeat(12, 1fr);
    /* Row 2 is a fixed band so the two lower photos and the tall one beside
       them all resolve to a known height and can be filled edge to edge. */
    grid-template-rows: auto clamp(12rem, 17vw, 17rem) auto;
    grid-template-areas:
      "say   say   say   say   say   say   say   tall tall tall tall tall"
      "wide  wide  wide  wide  short short short tall tall tall tall tall"
      "facts facts facts facts facts facts facts facts facts facts facts facts";
  }
  .hero__say { grid-area: say; align-self: center; }
  .hero__cell--tall { grid-area: tall; }
  .hero__cell--wide { grid-area: wide; }
  .hero__cell--short { grid-area: short; }
  .hero__facts { grid-area: facts; grid-template-columns: repeat(4, 1fr); }

  /* Each cell now has a resolved height, so the picture fills it instead of
     sitting in a letterbox. */
  .hero__cell img { height: 100%; aspect-ratio: auto; }
}

/* --------------------------------------------------------- page headers --- */
.pagehead__in { display: grid; gap: var(--gap); }
.pagehead__fig { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.pagehead__fig img { width: 100%; }
@media (min-width: 60rem) {
  .pagehead__in { grid-template-columns: 7fr 5fr; align-items: center; }
}
.legalhead { padding-bottom: clamp(24px, 3vw, 40px); }
.legalmeta { font-size: .875rem; color: var(--muted); }
.legalnote {
  font-size: .875rem;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  max-width: 60ch;
}

/* ----------------------------------------------------------- split rows --- */
.split { display: grid; gap: var(--gap); }
.split__fig { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.split__fig figcaption {
  font-size: .875rem;
  color: var(--muted);
  padding: .75rem 0 0;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 6fr 6fr; align-items: center; }
}

/* A standalone figure inside a text column - it must not stretch to the full
   container width the way a figure inside .split does. */
.fig--inline {
  max-width: 32rem;
  margin: var(--gap) 0;
}
.fig--inline img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.fig--inline figcaption {
  font-size: .875rem;
  color: var(--muted);
  padding: .75rem 0 0;
}

.feature { display: grid; gap: var(--gap); }
.feature__fig { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
@media (min-width: 60rem) {
  .feature { grid-template-columns: 7fr 5fr; align-items: center; }
}

.sechead { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.sechead__aside { color: var(--muted); font-size: .9375rem; }
.sechead__aside strong { color: var(--text); }
@media (min-width: 60rem) {
  .sechead { grid-template-columns: 1fr auto; align-items: end; }
  .sechead__aside { text-align: right; margin: 0; }
}

/* --------------------------------------------------- mosaic tiles (C8) --- */
.mosaic {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  /* Equal row heights: the tiles are a set, not a collage. */
  grid-auto-rows: 1fr;
}
/* Six tiles, so two then three columns - auto-fit left a 4 + 2 orphan row. */
@media (min-width: 40rem) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
.mosaic__tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.mosaic__fig { background: var(--surface-2); }
/* One crop for every tile, whatever shape the source file is. */
.mosaic__fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mosaic__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 auto;
}
.mosaic__body .h3 { margin: 0; }
.mosaic__body a { text-decoration-color: var(--line-strong); }
/* Pinned to the bottom so the meta lines up across tiles of unequal text. */
.mosaic__meta { font-size: .875rem; color: var(--muted); margin: auto 0 0; }

/* ---------------------------------------------------------------- cards --- */
.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.band--surface .card { background: var(--bg); }
.card p { margin: 0; }
.card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.card__price { font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; }
.card__count { font-size: .8125rem; color: var(--muted); }
.card__note { font-size: .875rem; color: var(--muted); }

/* ------------------------------------------------------- lists: in/out ---- */
.ticks, .crosses { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.ticks li, .crosses li { position: relative; padding-left: 1.9rem; max-width: 60ch; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.band--invert .ticks li::before { border-color: var(--invert-accent); }
.crosses li::before {
  content: "";
  position: absolute;
  left: 2px; top: .5em;
  width: 11px; height: 2px;
  background: var(--accent-2);
  transform: rotate(45deg);
}
.crosses li::after {
  content: "";
  position: absolute;
  left: 2px; top: .5em;
  width: 11px; height: 2px;
  background: var(--accent-2);
  transform: rotate(-45deg);
}

.twocol { display: grid; gap: var(--gap); }
.twocol__col > :last-child { margin-bottom: 0; }
@media (min-width: 52rem) {
  .twocol { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); }
}
.twocol--framed .twocol__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2vw, 2rem);
}

/* ----------------------------------------------- numbered: rhythm/steps --- */
.rhythm { display: grid; gap: var(--gap); }
.rhythm li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem 1rem;
  align-items: start;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.rhythm__n {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .9;
  color: var(--accent-2);
}
/* Heading and copy both belong in the second column, stacked. Without this
   the paragraph auto-placed into column one, under the number, and wrapped
   to the width of a single digit. */
.rhythm li > :not(.rhythm__n) { grid-column: 2; }
.rhythm li p { margin: 0; max-width: 60ch; }
.rhythm .h3 { margin-bottom: 0; }
@media (min-width: 60rem) {
  .rhythm { grid-template-columns: repeat(2, 1fr); gap: var(--gap) clamp(24px, 4vw, 64px); }
}

.steps { display: grid; gap: var(--gap); }
.steps li {
  border-top: 2px solid var(--line-strong);
  padding-top: 1rem;
}
.steps__n {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--accent-2);
  margin-bottom: .5rem;
}
.steps li p { margin: 0; }
@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 75rem) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps--plain { grid-template-columns: repeat(4, 1fr); }
}
.process__contact { font-size: .9375rem; color: var(--muted); }

.roles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.roles li { border-top: 1px solid var(--line); padding-top: 1rem; }
.roles p { margin: 0; }

/* --------------------------------------------------------- compliance ----- */
.comp { display: grid; gap: var(--gap); }
.comp__list { display: grid; gap: .6rem; }
.comp__list li { position: relative; padding-left: 1.9rem; max-width: 62ch; }
.comp__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px;
  border: 2px solid var(--invert-accent);
  border-radius: 50%;
}
.comp__cta { margin: 0; }
@media (min-width: 60rem) {
  .comp { grid-template-columns: 5fr 7fr; align-items: start; }
  .comp__cta { grid-column: 2; }
  .comp--short { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ atmosphere --- */
.atmo__head { margin-bottom: var(--gap); }
.atmo__fig { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
/* A 1600x1000 source across a 1800px container is far too tall: crop it to a
   band instead of letting it run to its natural height. */
.atmo__fig img {
  width: 100%;
  height: auto;
  max-height: clamp(14rem, 34vh, 26rem);
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.atmo__fig figcaption {
  font-size: .9375rem;
  color: var(--muted);
  padding: .75rem 0 0;
}
@media (min-width: 60rem) {
  /* Text over a photograph always sits on the scrim, never on bare image. */
  .atmo__fig figcaption {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    margin: 0;
    color: var(--text);
    font-weight: 600;
    background-image: var(--scrim);
  }
}
.atmo__list {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: var(--gap);
}
.atmo__list li { border-top: 1px solid var(--line); padding-top: .9rem; font-size: .9375rem; }

/* -------------------------------------------------------------- groups ---- */
.group { border-top: 1px solid var(--line); padding-top: var(--gap); margin-top: var(--gap); }
.group__head .h3 { margin-bottom: .35em; }
.group__meta { font-size: .875rem; color: var(--muted); }
.group__list { display: grid; gap: .75rem; margin: 1rem 0 1.25rem; }
.group__list li {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  align-items: baseline;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.group__facts { font-size: .8125rem; color: var(--muted); }
@media (min-width: 60rem) {
  .group { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); }
  .group__list { margin-top: 0; grid-template-columns: repeat(2, 1fr); gap: .75rem 2rem; }
  .group > p:last-child { grid-column: 2; }
}

/* --------------------------------------------------------- section nav ---- */
.sectionnav { padding-block: clamp(16px, 2vw, 28px); border-block: 1px solid var(--line); }
.sectionnav__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.sectionnav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.sectionnav a {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.sectionnav a:hover { color: var(--accent); border-bottom-color: var(--accent-2); }

/* ------------------------------------------------------- format details --- */
.fmt {
  border-top: 2px solid var(--line-strong);
  padding-top: clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 56px);
  scroll-margin-top: 6rem;
}
.fmt:first-of-type { margin-top: 0; }
.fmt__head { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 1rem; }
.fmt__n {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--accent-2);
  margin: 0;
}
.fmt__title { margin: 0; }
.fmt__body { display: grid; gap: var(--gap); }
.fmt__text .h4 { margin-top: 1.5rem; }
.fmt__side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--surface);
  align-self: start;
}
.band--surface .fmt__side { background: var(--bg); }
.fmt__price { margin: 1rem 0; }
.fmt__price .pricebig__v { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.fmt__actions { display: grid; gap: .75rem; margin: 0; }
@media (min-width: 60rem) {
  .fmt__body { grid-template-columns: 7fr 4fr; gap: clamp(24px, 4vw, 64px); }
}

/* --------------------------------------------------------------- meta ----- */
.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.meta li { background: var(--surface); padding: .75rem .9rem; display: grid; gap: .15rem; }
.band--surface .meta li { background: var(--bg); }
.meta__k {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta__v { font-weight: 600; }

.pricebig { display: grid; gap: .2rem; margin: 1.5rem 0; }
.pricebig__k {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pricebig__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: .95;
  letter-spacing: -.02em;
}
.pricebig__n { font-size: .875rem; color: var(--muted); max-width: 46ch; }

/* ---------------------------------------------------------- price list ---- */
.pricelist { display: grid; gap: 0; margin: var(--gap) 0; }
.pricelist__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.pricelist__row:first-child { border-top: 1px solid var(--line); }
.pricelist__name { display: grid; gap: .2rem; }
.pricelist__name a { font-weight: 600; font-size: 1.0625rem; }
.pricelist__meta { font-size: .8125rem; color: var(--muted); }
.pricelist__price { display: grid; gap: .2rem; text-align: right; }
.pricelist__price strong { font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; }
.pricelist__range { font-size: .8125rem; color: var(--muted); }

/* -------------------------------------------------------------- tables ---- */
.tablewrap { overflow-x: auto; margin: var(--gap) 0; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  text-align: left;
}
.table caption {
  text-align: left;
  font-size: .875rem;
  color: var(--muted);
  padding-bottom: .75rem;
  max-width: 70ch;
}
.table th, .table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}
.table tbody tr:nth-child(even) { background: var(--surface-2); }
.table tbody th { font-weight: 600; }
.table__sub { display: block; font-size: .8125rem; color: var(--muted); margin-top: .25rem; }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .act { white-space: nowrap; }
.pricetable { margin-top: clamp(28px, 4vw, 56px); scroll-margin-top: 6rem; }
.pricetable__lead { color: var(--muted); max-width: 60ch; }

@media (max-width: 52rem) {
  /* Tables become cards: each cell keeps its own label. */
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: auto; }
  .table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem .25rem;
    margin-bottom: 1rem;
    background: var(--surface);
  }
  .table tbody tr:nth-child(even) { background: var(--surface); }
  .table th, .table td { border-bottom: 1px dashed var(--line); padding: .6rem .9rem; }
  .table tr > :last-child { border-bottom: 0; }
  .table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .table td[data-label=""]::before { content: none; }
}

/* ----------------------------------------------------------- timelines ---- */
.timeline { display: grid; gap: 0; margin: var(--gap) 0; }
.timeline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.timeline li:first-child { border-top: 1px solid var(--line); }
.timeline__t {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--accent-2);
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}
.timeline .h3, .timeline .h4 { margin-bottom: .25em; }
.timeline p { margin: 0; }

/* ----------------------------------------------------------- scenarios ---- */
.scen {
  border-top: 2px solid var(--line-strong);
  padding-top: clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 56px);
  scroll-margin-top: 6rem;
}
.scen:first-of-type { margin-top: 0; }
.scen__body { display: grid; gap: var(--gap); }
.scen__side { align-self: start; display: grid; gap: 1rem; }
.scen__fig { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.scen__formats { display: grid; gap: .75rem; }
.scen__formats li { display: grid; gap: .15rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
@media (min-width: 60rem) {
  .scen__body { grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); }
}

/* ----------------------------------------------------------------- FAQ ---- */
.faq { display: grid; gap: 0; margin-top: var(--gap); max-width: 78rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute;
  right: .5rem; top: 1.6rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__q:hover { color: var(--accent); }
.faq__a { padding: 0 0 1.25rem; }
.faq__a p { margin: 0; max-width: 72ch; color: var(--muted); }

/* ---------------------------------------------------------------- forms --- */
.form-wrap { max-width: 60rem; }
.form-lead { max-width: 52ch; }
.band--invert .form-lead { color: var(--invert-fg); }

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

.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

.field { display: grid; gap: .35rem; margin: 0; max-width: none; }
.field label, .check label { font-weight: 600; font-size: .9375rem; }
.req { color: var(--accent-2); }
.opt { font-weight: 400; color: var(--muted); font-size: .875rem; }
.band--invert .opt, .band--invert .hint { color: var(--invert-fg); opacity: .8; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  min-height: 3rem;
}
textarea { min-height: 7rem; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
  border-color: var(--accent);
}
[aria-invalid="true"] { border-color: var(--accent-2); border-width: 2px; }

.fielderr {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent-2);
}
.band--invert .fielderr { color: var(--invert-accent); }

.formerr {
  border: 2px solid var(--accent-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.formerr__h { font-family: var(--font-head); font-weight: 900; font-size: 1.125rem; margin: 0 0 .5rem; }
.formerr ul { display: grid; gap: .35rem; }
.formerr a { color: var(--accent); }

.checks { display: grid; gap: 1rem; margin: 1.75rem 0; }
.check { margin: 0; max-width: 70ch; }
.check label { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-weight: 400; }
.check input[type="checkbox"] {
  width: 24px; height: 24px;
  margin: 0;
  accent-color: var(--accent);
  border: 1px solid var(--line-strong);
}
.band--invert .check input[type="checkbox"] { accent-color: var(--invert-accent); }

.form-note { font-weight: 600; font-size: .9375rem; }
.form-actions { margin: 1.5rem 0; }
.form-legal { font-size: .8125rem; color: var(--muted); max-width: 72ch; }
.band--invert .form-legal { color: var(--invert-fg); opacity: .85; }

.contactgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.contactgrid__col > :last-child { margin-bottom: 0; }
.contactgrid .h4 { margin-top: 1.25rem; }
.contactgrid .h4:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ CTA --- */
.cta__in { display: grid; gap: var(--gap); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }
@media (min-width: 60rem) {
  .cta__in { grid-template-columns: 7fr 5fr; align-items: center; }
  .cta__actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------- footer --- */
.site-foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 5vw, 80px);
  font-size: .9375rem;
}
.foot-grid { display: grid; gap: var(--gap); }
@media (min-width: 60rem) {
  .foot-grid { grid-template-columns: 2fr 1.2fr 1fr 1.2fr; }
}
.foot-col img { width: 156px; height: 32px; }
.foot-pitch { color: var(--muted); max-width: 36ch; margin-top: 1rem; }
.foot-h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
}
.foot-list { display: grid; gap: .55rem; }
.foot-list a { color: var(--text); text-decoration-color: var(--line-strong); }
.foot-list a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.foot-compliance {
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
  max-width: 100ch;
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  color: var(--muted);
  font-size: .8125rem;
}
.foot-bottom p { margin: 0; }
.totop { color: var(--muted); font-weight: 600; }

/* --------------------------------------------------------------- cookie --- */
.cookiebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  padding: 1.25rem var(--pad);
}
.cookiebar__in {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: var(--gap);
  align-items: start;
}
.cookiebar__h { font-family: var(--font-head); font-weight: 900; font-size: 1.125rem; margin: 0 0 .5rem; }
.cookiebar p { font-size: .875rem; margin: 0 0 .5rem; max-width: 86ch; }
.cookiebar__meta { color: var(--muted); font-size: .8125rem !important; }
.cookiebar__actions { display: grid; gap: .6rem; }
.cookiebar__actions .btn { width: 100%; }
@media (min-width: 60rem) {
  .cookiebar__in { grid-template-columns: 1fr auto; }
  .cookiebar__actions { grid-template-columns: repeat(3, minmax(9rem, 1fr)); align-self: center; }
}

.cookiedlg {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 44rem;
  width: calc(100% - 2rem);
  box-shadow: var(--shadow);
}
.cookiedlg::backdrop { background: var(--backdrop); }
.cookiedlg__h { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; margin: 0 0 .5rem; }
.cookiedlg__lead { font-size: .9375rem; color: var(--muted); }
.cookiedlg__set { border: 0; margin: 1.25rem 0; padding: 0; display: grid; gap: 1.25rem; }
.cookiedlg__row { border-top: 1px solid var(--line); padding-top: 1rem; }
.cookiedlg__desc { font-size: .875rem; color: var(--muted); margin: .5rem 0 0 2.25rem; }
.cookiedlg__note { font-size: .8125rem; color: var(--muted); }
.cookiedlg__actions { display: grid; gap: .6rem; margin-top: 1.5rem; }
@media (min-width: 40rem) {
  .cookiedlg__actions { grid-auto-flow: column; justify-content: start; }
}
.switch { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; font-weight: 600; }
.switch input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.switch input[disabled] + .switch__label { color: var(--muted); }

.cookienojs {
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  padding: 1rem var(--pad);
  font-size: .875rem;
}
.cookienojs p { max-width: 90ch; margin: 0 auto; }

/* ------------------------------------------------------------ legal body --- */
.legalbody h2 { margin-top: 2.5rem; }
.legalbody h2:first-child { margin-top: 0; }
.legalbody ul { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.legalbody ul li { position: relative; padding-left: 1.4rem; max-width: 80ch; }
.legalbody ul li::before {
  content: "";
  position: absolute; left: 0; top: .65em;
  width: 6px; height: 6px;
  background: var(--accent-2);
  border-radius: 50%;
}
.legalbody p, .legalbody li { max-width: 80ch; }
.legallinks { margin-top: 1rem; }

/* ------------------------------------------------------- anchor targets --- */
/* The header is sticky, so anchored sections need breathing room. */
:target { scroll-margin-top: 6rem; }
[id] { scroll-margin-top: 6rem; }