/* Glenbright: site styles. Tokens first, then base, then sections in page order,
   then the booking, booked and legal pages.
   Direction: the glen at sunrise, with Draft 1's weekend story told across it. Colours come straight from the logo: deep glen green for text,
   sage for the quiet bands, and the amber sun for every action and the one rising sun in the hero.
   Instrument Serif set very large, Archivo Expanded for labels and buttons. Hairlines, no shadows. */

/* Self-hosted fonts (SIL Open Font License). Latin plus Latin Extended, so fadas and
   other accented names always render. Archivo is variable: weight 300-700, width 100-125. */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 300 700; font-stretch: 100% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 300 700; font-stretch: 100% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* colour: all from the logo */
  --paper: #FFFFFF;
  --wash: #EEF3F1;        /* pale sage: the quiet bands */
  --ink: #12282B;         /* deep glen green: text and the dark band */
  --graphite: #4E605D;    /* secondary text, AA on paper and wash */
  --line: #D9E3DF;        /* hairlines */
  --line-strong: #12282B; /* structural rules */
  --sun: #F4B942;         /* the amber sun: every action */
  --sun-deep: #E6A52A;    /* button hover */
  --sage: #8FA39E;
  --on-ink: #F5F7F6;
  --on-ink-muted: rgba(245, 247, 246, .7);
  --line-on-ink: rgba(245, 247, 246, .2);
  --error: #9A2C2C;

  /* type */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: "wdth" 118;     /* labels, buttons, navigation */
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-h1: clamp(3.25rem, 1rem + 8.2vw, 9rem);
  --fs-h2: clamp(2.5rem, 1.35rem + 3.6vw, 5rem);
  --fs-h3: clamp(1.625rem, 1.4rem + .8vw, 2.125rem);

  /* space */
  --gutter: 20px;
  --section: clamp(88px, 10vw, 160px);
  --header-h: 64px;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --fs-body: 1.0625rem; --header-h: 76px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: .9; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); line-height: .96; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.015em; }
p, li { text-wrap: pretty; }
/* optical kerning in display headlines: a low comma leaves empty space above it, so pull the next word in slightly */
.kc { margin-right: -0.035em; }
b, strong { font-weight: 600; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--graphite); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--sun); }

/* the wide "label" voice: nav, buttons, small headings, meta */
.btn, .link-call, .site-header__call, .brandlink__niche, .facts b,
.story__time, .story__wait, .slip__meta, .replay time, .replay__tag, .callback summary, .pillar__job, .calc__field label, .calc__per, .report__for,
.lead__field label, .mobile-bar a, .faq summary, .fit h3, .founder__sign, .book__facts b {
  font-variation-settings: var(--wide);
  letter-spacing: .005em;
}

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; }
.skip:focus { top: 12px; color: var(--paper); }
[hidden] { display: none !important; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px;
  background: var(--sun); color: var(--ink);
  border: 1px solid var(--sun); border-radius: 999px;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--sun-deep); border-color: var(--sun-deep); color: var(--ink); }
.btn--small { min-height: 42px; padding: 9px 18px; font-size: .875rem; }
@media (min-width: 720px) { .btn { white-space: nowrap; } }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.link-call { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 500; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brandlink { display: flex; align-items: center; gap: 0; text-decoration: none; }
/* The glen docks into the header: on the home page the small mark grows in as the hero's glen
   scrolls under the header (site.js sets --dock from 0 to 1). Everywhere else it's simply 1. */
.site-header { --dock: 1; }
.brandlink img { width: calc(28px * var(--dock)); height: 28px; object-fit: contain; margin-right: calc(10px * var(--dock)); opacity: var(--dock); transform: translateY(calc((1 - var(--dock)) * 6px)); }
.brandlink:hover { color: var(--ink); }
.brandlink__word { font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; }
.brandlink__niche { display: none; color: var(--graphite); font-size: .8125rem; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--line); }
.site-header__nav { display: flex; align-items: center; gap: 22px; }
.site-header__call { display: none; font-size: .875rem; font-weight: 500; text-decoration: none; }
.site-header__nav .btn { display: none; }
.site-header__logo { display: inline-flex; }
@media (min-width: 720px) {
  .site-header__nav .btn, .site-header__call { display: inline-flex; }
}
@media (min-width: 1000px) { .brandlink__niche { display: inline; } }

/* ---------- hero: the headline, and the logo's glen at sunrise ----------
   The glen sits right on the hero's horizon line (the top border of .hero__row).
   On load the sun rises from behind the peak: the one piece of motion on the page. */
.hero { padding: clamp(48px, 7vw, 112px) 0 0; overflow: hidden; }
.hero__top { display: grid; gap: 24px; align-items: end; }
.hero h1 { max-width: 13ch; font-size: clamp(3.25rem, 1rem + 6.6vw, 7.75rem); }
.glen { display: block; width: min(60%, 230px); height: auto; justify-self: end; overflow: visible; margin-bottom: -1px; }
.glen__range { fill: #8FA39E; stroke: #8FA39E; stroke-width: 20; stroke-linejoin: round; }
.glen__peak { fill: #12282B; stroke: #12282B; stroke-width: 20; stroke-linejoin: round; }
@media (min-width: 900px) {
  .hero__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; }
  .glen { width: 100%; max-width: 560px; }
}
@media (prefers-reduced-motion: no-preference) {
  .glen__sun { animation: glen-sun 2.4s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .glen__glow { animation: glen-glow 3.2s ease-out .3s both; transform-origin: 220px 60px; }
  @keyframes glen-sun { from { transform: translateY(210px); } to { transform: none; } }
  @keyframes glen-glow { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
}
.hero__row {
  display: grid; gap: 20px; grid-template-areas: "lead" "act" "detail";
  margin-top: 0; padding-top: 28px; border-top: 1px solid var(--line-strong);
  position: relative; z-index: 1; background: var(--paper);
}
.hero__lead { grid-area: lead; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.18; letter-spacing: -0.01em; max-width: 42ch; }
.hero__act { grid-area: act; }
.hero__detail { grid-area: detail; font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.55; color: var(--graphite); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.hero__note { margin-top: 14px; font-size: var(--fs-small); color: var(--graphite); }
.facts { list-style: none; padding: 0; margin-top: clamp(56px, 7vw, 104px); display: grid; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 2px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.facts b { font-size: .9375rem; font-weight: 500; }
.facts span { color: var(--graphite); font-size: var(--fs-small); }
@media (max-width: 719px) { .hero__actions .btn { width: 100%; } }
@media (min-width: 900px) {
  .hero__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "lead act" "detail act"; column-gap: 56px; row-gap: 16px; }
  .hero__act { align-self: end; justify-self: end; text-align: right; }
  .hero__actions { justify-content: flex-end; }
  .facts { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
  .facts li { padding: 26px 24px 30px; border-bottom: 0; border-left: 1px solid var(--line); }
  .facts li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- the story: one enquiry, one weekend (Draft 1's storytelling, in this page's style) ----------
   Without JavaScript it's a scene followed by four cards. With it (html.story-pin), the scene holds on
   screen while the cards scroll over it, and site.js runs the clock and sets the sun behind the glen. */
.story { padding-top: var(--section); }
.story__intro h2 { max-width: 16ch; }
.story__intro p { margin-top: 24px; color: var(--graphite); max-width: 46ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.story__body {
  --sky-top: #F6E7C8; --sky-bottom: #F3C878; --range: #8FA39E; --peak: #12282B;
  --hud: var(--ink); --hud-muted: var(--graphite);
  position: relative; margin-top: clamp(40px, 5vw, 64px);
}
.story__body.is-night { --hud: #F5F7F6; --hud-muted: rgba(245, 247, 246, .74); }
.story__scene { position: relative; height: clamp(440px, 72vh, 720px); overflow: hidden; background: linear-gradient(var(--sky-top), var(--sky-bottom)); }
.story__glen { position: absolute; right: 4%; bottom: -1px; width: min(92%, 760px); height: auto; overflow: visible; }
.story__range { fill: var(--range); stroke: var(--range); stroke-width: 20; stroke-linejoin: round; }
.story__peak { fill: var(--peak); stroke: var(--peak); stroke-width: 20; stroke-linejoin: round; }
.story__hud { position: relative; z-index: 1; padding-top: clamp(28px, 5vh, 56px); color: var(--hud); transition: color .6s ease; }
.story__clock { font-family: var(--serif); font-size: clamp(3.5rem, 2rem + 6vw, 8.5rem); line-height: .85; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.story__wait { margin-top: 12px; font-size: .9375rem; font-weight: 500; color: var(--hud-muted); transition: color .6s ease; }
.slip { margin-top: 20px; max-width: 320px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 16px 18px; }
.slip__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--graphite); }
.slip__title { margin-top: 8px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.slip__value { margin-top: 4px; font-size: .875rem; color: var(--graphite); }
.slip__status { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; font-size: .8125rem; font-weight: 600; }
.slip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); flex: none; }
.slip.is-cold { color: var(--graphite); }
.slip.is-cold .slip__dot { background: #9AA7A4; }
.story__steps { list-style: none; padding-top: 24px; padding-bottom: 0; display: grid; gap: 16px; }
.story__card { background: var(--paper); border: 1px solid var(--line-strong); padding: 24px 24px 26px; max-width: 460px; }
.story__time { font-size: .8125rem; font-weight: 500; color: var(--graphite); }
.story__card h3 { margin-top: 10px; }
.story__card p:not(.story__time) { margin-top: 10px; color: var(--graphite); }
.story__coda { padding-top: clamp(48px, 6vw, 88px); padding-bottom: var(--section); display: grid; gap: 16px; }
.story__sting { font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 26ch; }
.story__coda p:not(.story__sting) { color: var(--graphite); max-width: 52ch; }

/* pinned: the scene holds while the four moments scroll over it */
.story-pin .story__scene { position: sticky; top: 0; height: 100vh; height: 100svh; }
.story-pin .story__hud { padding-top: calc(var(--header-h) + clamp(20px, 4vh, 44px)); }
.story-pin .story__steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; padding-top: 62vh; padding-top: 62svh; padding-bottom: 30vh; padding-bottom: 30svh; gap: 0; }
.story-pin .story__step { min-height: 78vh; min-height: 78svh; }
@media (min-width: 900px) {
  .story-pin .story__card { margin-left: auto; }
  .story-pin .story__steps { padding-top: 40vh; padding-top: 40svh; }
}

/* ---------- money maths: the one black band ---------- */
.maths { background: var(--ink); color: var(--on-ink); padding-block: var(--section); }
.maths__grid { display: grid; gap: 40px; }
.maths__copy p { margin-top: 20px; color: var(--on-ink-muted); max-width: 40ch; }
.maths__note { color: var(--on-ink-muted); font-size: var(--fs-small); }
.calc { display: grid; gap: 24px; }
.calc__field label { display: block; font-size: .8125rem; font-weight: 500; color: var(--on-ink-muted); margin-bottom: 6px; }
.calc__input { position: relative; }
.calc__input input {
  width: 100%; min-height: 56px; padding: 8px 0;
  font-family: var(--serif); font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--on-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-on-ink); border-radius: 0;
  -moz-appearance: textfield;
}
.calc__input input::-webkit-outer-spin-button, .calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__input input:focus { outline: none; border-bottom-color: var(--on-ink); }
.calc__input--euro::before { content: "€"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 2.25rem; color: var(--on-ink-muted); pointer-events: none; }
.calc__input--euro input { padding-left: 26px; }
.calc__out { display: grid; gap: 6px; padding-top: 32px; border-top: 1px solid var(--line-on-ink); }
.calc__label { color: var(--on-ink-muted); font-size: var(--fs-small); }
.calc__sum { color: var(--sun); font-family: var(--serif); font-size: clamp(5rem, 2rem + 11vw, 12rem); line-height: .82; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.calc__per { font-size: .9375rem; font-weight: 500; }
.calc__year { color: var(--on-ink-muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .maths__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 80px; align-items: start; }
  .calc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: end; }
  .calc__out { grid-column: 1 / -1; }
  .maths__note { grid-column: 2; }
}

/* ---------- the free audit ---------- */
.audit { padding-block: var(--section); background: var(--wash); }
.audit__grid { display: grid; gap: 56px; }
.audit__lead { margin-top: 24px; color: var(--graphite); max-width: 52ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.audit__group { margin-top: 48px; }
.audit__group h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.audit__group ul { list-style: none; padding: 0; }
.audit__group li { padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); position: relative; color: var(--graphite); }
.audit__group li::before { content: ""; position: absolute; left: 1px; top: 1.2em; width: 11px; height: 6px; border-left: 2px solid var(--sun-deep); border-bottom: 2px solid var(--sun-deep); transform: rotate(-45deg); }
.ticks .audit__group li::before { transform: rotate(-45deg) scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.ticks .audit__group li.is-checked::before { transform: rotate(-45deg) scale(1); }
.audit__promise { margin: -12px 0 32px; padding: 20px 22px; background: var(--paper); border-left: 3px solid var(--sun); max-width: 56ch; color: var(--graphite); }
.audit__promise b { color: var(--ink); }
.audit__plus { margin: 36px 0 32px; font-family: var(--serif); font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; }

.report { background: var(--paper); border: 1px solid var(--line-strong); padding: 28px; align-self: start; }
.report__head { padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.report__title { font-family: var(--serif); font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
.report__for { color: var(--graphite); font-size: .8125rem; margin-top: 8px; }
.report__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.report__rows dd { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.report__rows .is-bad { color: var(--ink); }
.report__rows .is-ok { color: var(--graphite); font-weight: 600; }
.report__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 20px; }
.report__foot p:first-child { color: var(--graphite); font-size: var(--fs-small); }
.report__sum { font-family: var(--serif); font-size: 3rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.report__sum small { font-family: var(--sans); font-size: .8125rem; color: var(--graphite); letter-spacing: 0; }
.report__note { margin-top: 16px; font-size: .8125rem; color: var(--graphite); }
@media (min-width: 1000px) {
  .audit__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; }
  .report { position: sticky; top: calc(var(--header-h) + 32px); padding: 36px; }
}

/* ---------- the core offer: the sun comes back up, then the same weekend, answered ---------- */
.system { padding-block: 0 var(--section); }
.dawn { --dawn-top: #F6E7C8; --dawn-bottom: #FDF3DD; position: relative; height: clamp(220px, 34vw, 460px); overflow: hidden; background: linear-gradient(var(--dawn-top), var(--dawn-bottom)); border-bottom: 1px solid var(--line-strong); }
.dawn__glen { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: min(80%, 560px); height: auto; overflow: visible; }
.replay-head { padding-top: clamp(56px, 7vw, 104px); display: grid; gap: 24px; }
.replay-head h2 { max-width: 14ch; }
.replay-head p { color: var(--graphite); max-width: 50ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.replay { list-style: none; padding: 0; margin-top: 48px; border-top: 1px solid var(--line-strong); }
.replay li { display: grid; gap: 6px 32px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.replay time { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.replay p { color: var(--graphite); max-width: 62ch; }
.replay b { color: var(--ink); font-weight: 600; }
.replay__tag { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 500; color: var(--graphite); }
.replay__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); flex: none; }
.system__intro { margin-top: clamp(72px, 8vw, 120px); display: grid; gap: 24px; }
.system__h { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.025em; }
.system__intro p { color: var(--graphite); max-width: 44ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
@media (min-width: 900px) {
  .replay-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 80px; align-items: end; }
  .replay li { grid-template-columns: 9rem minmax(0, 1fr) 11rem; align-items: baseline; }
  .replay__tag { justify-self: end; }
}
.pillars { margin-top: 72px; display: grid; gap: 48px; }
.pillar { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.pillar__job { color: var(--graphite); font-size: .8125rem; font-weight: 500; }
.pillar h3 { margin-top: 14px; }
.pillar > p:not(.pillar__job) { margin-top: 14px; color: var(--graphite); }
.pillar ul { list-style: none; padding: 0; margin-top: 24px; }
.pillar li { padding: 11px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.scoreboard { margin-top: 72px; padding: 32px 0 0; border-top: 1px solid var(--line-strong); display: grid; gap: 12px; }
.scoreboard p { color: var(--graphite); max-width: 60ch; }
.system__price { margin-top: 28px; font-weight: 500; max-width: 60ch; }
@media (min-width: 900px) {
  .system__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 80px; align-items: end; }
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .scoreboard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; column-gap: 80px; }
}

/* ---------- how it works ---------- */
.steps { padding-block: var(--section); }
.steps__list { list-style: none; padding: 0; margin-top: 56px; display: grid; gap: 40px; }
.steps__list li { display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--line-strong); padding-top: 20px; }
.steps__n { font-family: var(--serif); font-size: 4.5rem; line-height: .85; letter-spacing: -0.04em; }
.steps__list p { color: var(--graphite); max-width: 40ch; }
@media (min-width: 900px) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---------- founder ---------- */
.founder { padding-block: var(--section); background: var(--wash); }
.founder__grid { display: grid; gap: 40px; }
.founder__photo {
  aspect-ratio: 4 / 5; max-width: 380px;
  border: 1px dashed var(--graphite); display: grid; place-items: center;
  color: var(--graphite); font-size: var(--fs-small); background: #EAEAE6;
}
.founder__lead { margin-top: 28px; font-family: var(--serif); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 30ch; }
.founder__copy p:not(.founder__lead) { margin-top: 20px; color: var(--graphite); max-width: 54ch; }
.founder__pillars { list-style: none; padding: 0; margin-top: 28px; max-width: 54ch; }
.founder__pillars li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--graphite); }
.founder__pillars li:last-child { border-bottom: 1px solid var(--line); }
.founder__pillars b { color: var(--ink); font-weight: 500; }
.founder__copy .founder__sign { color: var(--ink); font-size: var(--fs-small); font-weight: 500; }
@media (min-width: 900px) { .founder__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 96px; align-items: center; } }

/* ---------- FAQ ---------- */
.faq { padding-block: var(--section); background: var(--wash); }
.faq__wrap { display: grid; gap: 40px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative;
  font-size: 1rem; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: var(--ink); transition: transform .2s ease; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { padding: 0 0 26px; color: var(--graphite); max-width: 64ch; }
@media (min-width: 900px) { .faq__wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; align-items: start; } }

/* ---------- booking on the page: calendar first on phones ---------- */
.booking { padding-block: var(--section); background: var(--wash); }
.booking__grid { display: grid; gap: 32px; grid-template-areas: "head" "panel" "more"; }
.booking__head { grid-area: head; }
.booking__head h2 { max-width: 16ch; }
.booking__lead { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--graphite); max-width: 44ch; }
.booking__panel { grid-area: panel; display: grid; gap: 16px; align-content: start; }
.booking__more { grid-area: more; }
.booking__steps { list-style: none; padding: 0; border-top: 1px solid var(--line-strong); counter-reset: step; }
.booking__steps li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--line); color: var(--graphite); counter-increment: step; }
.booking__steps li::before { content: counter(step); position: absolute; left: 0; top: 11px; font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: var(--ink); }
.booking__steps b { color: var(--ink); font-weight: 600; }
.booking__talk { margin-top: 20px; font-weight: 500; }
.callback { background: var(--paper); border: 1px solid var(--line-strong); }
.callback summary { list-style: none; cursor: pointer; position: relative; min-height: 56px; display: flex; align-items: center; padding: 14px 52px 14px 20px; font-size: .9375rem; font-weight: 500; }
.callback summary::-webkit-details-marker { display: none; }
.callback summary::before, .callback summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 1px; background: var(--ink); transition: transform .2s ease; }
.callback summary::after { transform: rotate(90deg); }
.callback[open] summary::after { transform: rotate(0); }
.callback .lead, .callback .lead__done { padding: 4px 20px 24px; }
.lead { display: grid; gap: 18px; }
.lead h3, .lead__done h3 { font-size: 2rem; }
.lead__intro { color: var(--graphite); margin-top: -8px; }
.lead__field label { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: 6px; }
.lead__opt { color: var(--graphite); }
.lead__field input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid #C8C7C3; border-radius: 0;
}
.lead__field select {
  width: 100%; min-height: 50px; padding: 12px 40px 12px 14px;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid #C8C7C3; border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.lead__field select:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lead__field select[aria-invalid="true"] { border-color: var(--error); }
.booking__fit { margin-top: 14px; font-size: var(--fs-small); color: var(--graphite); max-width: 44ch; padding-left: 16px; border-left: 3px solid var(--sun); }
.lead__field input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lead__field input[aria-invalid="true"] { border-color: var(--error); }
.lead .calc__input--euro::before { font-family: var(--sans); font-size: 1rem; left: 14px; color: var(--graphite); }
.lead .calc__input--euro input { padding-left: 30px; }
.lead__hint, .lead__small { font-size: .8125rem; color: var(--graphite); margin-top: 6px; }
.lead__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__error { color: var(--error); font-weight: 600; font-size: var(--fs-small); }
.lead__done { display: grid; gap: 12px; }
.lead__done p { color: var(--graphite); }
.lead__done .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) {
  .booking__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head panel" "more panel"; column-gap: 80px; row-gap: 32px; align-items: start; }
  .callback .lead, .callback .lead__done { padding: 4px 28px 28px; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); padding: 72px 0 calc(40px + env(safe-area-inset-bottom)); }
.site-footer a { color: var(--on-ink); }
.site-footer a:hover { color: #fff; }
.site-footer__inner { display: grid; gap: 32px; }
.site-footer__brand .site-footer__word img { display: inline-block; width: .62em; height: .62em; margin-right: .18em; vertical-align: -0.02em; }
.site-footer__brand .site-footer__word { margin: 0; font-family: var(--serif); font-size: clamp(3.5rem, 2rem + 6vw, 8rem); line-height: .9; letter-spacing: -0.035em; color: var(--on-ink); max-width: none; }
.site-footer__brand p { margin-top: 16px; color: var(--on-ink-muted); font-size: var(--fs-small); max-width: 36ch; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.site-footer__copy { color: var(--on-ink-muted); font-size: .8125rem; }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
  .site-footer__copy { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-on-ink); }
}

/* ---------- mobile quick-contact bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 2fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .25s ease;
}
.mobile-bar a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 500; font-size: .875rem; text-decoration: none; }
.mobile-bar__call { border: 1px solid var(--ink); }
.mobile-bar__book { background: var(--sun); color: var(--ink); }
.mobile-bar__book:hover { color: var(--ink); }
.mobile-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 720px) { .mobile-bar { display: none; } }
@media (max-width: 719px) { body:not(.legal-page) { padding-bottom: 76px; } }

/* ---------- booking page ---------- */
.book { padding: clamp(40px, 6vw, 88px) 0 var(--section); }
.book__grid { display: grid; gap: 40px; }
.book h1 { font-size: clamp(3rem, 1.6rem + 4.5vw, 5.5rem); max-width: 12ch; }
.book__lead { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--graphite); max-width: 42ch; }
.book__facts { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.book__facts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.book__facts b { min-width: 7.5em; font-weight: 500; }
.book__facts span { color: var(--graphite); font-size: var(--fs-small); }
.book__h2 { margin-top: 40px; font-size: 2rem; }
.book__steps { margin: 16px 0 0; padding-left: 1.3em; display: grid; gap: 12px; max-width: 52ch; color: var(--graphite); }
.book__steps b { color: var(--ink); font-weight: 600; }
.calendar { background: var(--paper); border: 1px solid var(--line-strong); overflow: hidden; }
.calendar iframe { display: block; width: 100%; height: 760px; border: 0; }
.calendar__fallback { padding: 28px 24px; display: grid; gap: 14px; }
.calendar__title { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.calendar__fallback > p:not(.calendar__title) { color: var(--graphite); }
.calendar__sms { justify-self: center; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.book__alt { margin-top: 16px; font-size: var(--fs-small); color: var(--graphite); text-align: center; }
@media (min-width: 900px) {
  .book__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "intro cal" "next cal"; column-gap: 80px; row-gap: 0; align-items: start; }
  .book__intro { grid-area: intro; padding-top: 12px; }
  .book__next { grid-area: next; }
  .book__cal { grid-area: cal; }
}

/* ---------- booked page ---------- */
.booked { padding: clamp(48px, 7vw, 112px) 0 var(--section); }
.booked__inner { max-width: 760px; }
.booked__mark { width: 48px; height: 48px; margin-bottom: 24px; }
.booked h1 { font-size: clamp(3rem, 1.6rem + 4.5vw, 5.5rem); }
.booked__lead { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--graphite); max-width: 52ch; }
.booked h2 { margin-top: 48px; font-size: 2rem; }
.booked__list { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--graphite); max-width: 58ch; }
.booked__save { margin-top: 40px; padding: 24px 0; border-block: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.booked__save p { font-weight: 500; }
.booked__back { margin-top: 32px; }

/* ---------- legal pages ---------- */
.legal { padding-block: 48px var(--section); }
.legal h1 { font-size: clamp(3rem, 1.8rem + 3.5vw, 4.75rem); }
.legal h2 { font-size: 1.875rem; margin-top: 44px; }
.legal p, .legal ul { margin-top: 14px; max-width: 68ch; }
.legal li { margin-top: 6px; }
.legal .updated { color: var(--graphite); font-size: var(--fs-small); }
.draft-note { padding: 14px 18px; border: 1px dashed var(--ink); font-size: var(--fs-small); margin-bottom: 28px; }

/* ---------- cookie choice (only appears if analytics is ever added) ---------- */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  max-width: 560px; margin-inline: auto; padding: 18px 20px;
  background: var(--paper); border: 1px solid var(--ink);
  display: grid; gap: 14px; font-size: var(--fs-small);
}
.consent__actions { display: flex; gap: 10px; justify-content: flex-end; }
.consent button { min-height: 44px; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 500; cursor: pointer; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.consent button[data-c="yes"] { background: var(--sun); border-color: var(--sun); color: var(--ink); }

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

/* founder section without a photo: copy spans the row */
@media (min-width: 900px) { .founder__grid > .founder__copy:only-child { grid-column: 1 / -1; max-width: 46rem; } }