/* Self-hosted fonts (SIL Open Font License, from Google Fonts): no requests to third parties */
@font-face { font-family: 'Inclusive Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inclusive-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inclusive Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inclusive-sans-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: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/lexend-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/lexend-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: 'Tilt Warp'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tilt-warp-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tilt Warp'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tilt-warp-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; }

/* ==========================================================================
   Design tokens — 8px spacing grid, 12-col layout, one type family
   ========================================================================== */
:root {
  /* Color · primitives */
  --sand-50:  #F7F6F0;
  --sand-100: #F2F1E8;
  --sand-200: #ECEBE0;
  --sand-300: #E8E4B6;
  --sand-400: #E2DC9C;
  --green-50:  #EEF5EA;
  --green-100: #D8E8D0;
  --green-500: #38812B;
  --green-600: #2E6E23;
  --green-700: #245A1B;
  --green-900: #163A10;
  --ink-900: #2F1E0D;
  --ink-600: #5B5747;
  --ink-500: #827D6C;
  --purple-500: #8E2BA8;
  --teal-500: #2F8585;
  --amber-500: #C98A12;

  /* Color · semantic */
  --bg-base: var(--sand-200);
  --bg-accent: var(--sand-300);
  --bg-inverse: var(--green-900);
  --surface: var(--sand-50);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --border: rgba(47, 30, 13, .08);
  --border-strong: rgba(47, 30, 13, .16);
  --border-control: var(--ink-500); /* ≥3:1 on every background, for non-text UI */
  --brand: var(--green-500);
  --brand-hover: var(--green-600);
  --brand-press: var(--green-700);
  --brand-soft: var(--green-100);
  --brand-text: var(--green-700);   /* small green text + links, ≥4.5:1 */
  --highlight: var(--sand-400);
  --focus: #1F6FEB;

  /* Spacing · 8px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px;
  --s-11: 96px; --s-12: 128px;

  /* Type scale */
  --font: "Lexend", system-ui, -apple-system, sans-serif;
  --t-display: clamp(56px, 7.6vw, 112px);
  --t-display-sm: clamp(36px, 4.4vw, 56px);
  --t-price: 32px;
  --t-h2: clamp(32px, 3.4vw, 48px);
  --t-h3-lg: 28px;
  --t-h3: 22px;
  --t-lead: clamp(18px, 1.6vw, 22px);
  --t-body-lg: 20px;
  --t-body: 18px;
  --t-small: 16px;
  --t-micro: 14px;

  /* Shape + elevation */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(47,30,13,.04), 0 2px 8px rgba(47,30,13,.04);
  --shadow-2: 0 12px 32px rgba(47,30,13,.10), 0 2px 6px rgba(47,30,13,.04);
  --shadow-brand: 0 8px 24px rgba(56,129,43,.28);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 160ms; --d-med: 320ms; --d-slow: 800ms;

  /* Layout */
  --container: 1200px;
  --gutter: var(--s-6);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s-4)); }
body {
  margin: 0; font-family: var(--font); font-size: var(--t-body); line-height: 1.5;
  color: var(--text); background: var(--bg-base); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
strong { font-weight: 600; color: var(--text); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-12); }
.section--accent { background: var(--bg-accent); }
.section--base { background: var(--bg-base); }
.eyebrow { font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); }
.h2 { margin-top: var(--s-3); font-family: var(--font-display, var(--font)); font-size: var(--t-h2); font-weight: var(--display-weight, 800); letter-spacing: var(--display-tracking-sm, -.02em); line-height: 1.1; }
.section-head { max-width: 680px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--s-4); color: var(--text-muted); font-size: var(--t-lead); }
.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; }

/* ==========================================================================
   Components
   ========================================================================== */
/* Buttons: primary / secondary / inverse — sizes md (48) + lg (64) */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 64px; padding: 0 var(--s-6); border: 0; border-radius: var(--btn-radius, var(--r-md));
  background: var(--brand); color: #fff; font: 500 20px/1 var(--font); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-brand); overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-med) var(--ease-out), background var(--d-fast), color var(--d-fast);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 700ms var(--ease-out);
}
.btn:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(56,129,43,.34); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { background: var(--brand-press); transform: scale(.98); box-shadow: 0 4px 12px rgba(56,129,43,.24); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--d-med) var(--ease-spring); }
.btn:hover svg.i-phone { transform: rotate(-12deg) scale(1.1); }
.btn:hover svg.i-arrow { transform: translateX(4px); }
.btn--md { min-height: 48px; padding: 0 var(--s-5); font-size: var(--t-small); box-shadow: none; }
.btn--block { width: 100%; }
.btn--secondary { background: rgba(47,30,13,.06); color: var(--text); box-shadow: none; }
.btn--secondary:hover { background: rgba(47,30,13,.10); box-shadow: none; }
.btn--secondary:active { background: rgba(47,30,13,.14); box-shadow: none; }
.btn--inverse { background: var(--sand-300); color: var(--green-900); box-shadow: 0 8px 24px rgba(47,30,13,.25); }
.btn--inverse:hover { background: #fff; color: var(--green-900); box-shadow: 0 12px 32px rgba(47,30,13,.3); }
.btn--inverse:active { background: var(--sand-400); }
.btn[data-state="loading"] { pointer-events: none; }
.btn[data-state="loading"] .btn__label, .btn[data-state="loading"] svg { opacity: 0; }
.btn[data-state="loading"]::before {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite;
}
:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-md); }

.cta { display: inline-grid; gap: var(--s-3); justify-items: center; }
.meta { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); color: var(--text-muted); }
.meta--brand { color: var(--brand-text); }
.meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.badge { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 500; background: var(--brand); color: #fff; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med) var(--ease-out), border-color var(--d-med), background var(--d-med);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags li { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--bg-base); font-size: var(--t-micro); }

.checks { display: grid; gap: var(--s-3); }
.checks li { display: flex; align-items: center; gap: var(--s-3); }
.checks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }

.swipe { position: relative; z-index: 0; white-space: nowrap; }
.swipe::before {
  content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: 4%; height: 36%;
  background: var(--highlight); border-radius: 40% 8px 40% 8px / 60% 8px 60% 8px;
  transform: rotate(-2deg) scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-out) 300ms;
}
.is-in .swipe::before, .swipe.is-in::before { transform: rotate(-2deg) scaleX(1); }

/* Segmented tabs */
.segmented {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: var(--s-1); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong);
}
.segmented__thumb {
  position: absolute; top: var(--s-1); bottom: var(--s-1); left: var(--s-1); width: calc(50% - var(--s-1));
  border-radius: var(--r-pill); background: var(--ink-900); transition: transform var(--d-med) var(--ease-out);
}
.segmented[data-active="1"] .segmented__thumb { transform: translateX(100%); }
.segmented button {
  position: relative; z-index: 1; min-height: 48px; padding: 0 var(--s-6); border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer; font-weight: 500; font-size: var(--t-small); color: var(--text-muted); white-space: nowrap;
  transition: color var(--d-med);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"] { color: #fff; }

/* ==========================================================================
   Nav (appears after the hero CTA scrolls away)
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav-h);
  background: color-mix(in srgb, var(--bg-base) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--border);
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--d-med) var(--ease-out), visibility 0s linear var(--d-med);
}
.nav.is-visible { transform: none; visibility: visible; transition: transform var(--d-med) var(--ease-out), visibility 0s; }
.nav .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.brand { text-decoration: none; line-height: 1.2; }
.brand b { display: block; font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.brand span { font-size: var(--t-micro); color: var(--text-muted); }
.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); font-weight: 500; text-decoration: none; color: var(--text-muted); transition: color var(--d-fast); position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform var(--d-med) var(--ease-out); }
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Hero
   ========================================================================== */
.rotator { display: inline-grid; vertical-align: bottom; }
.rotator > span { grid-area: 1 / 1; justify-self: start; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.rotator > .swipe::before { transition-delay: 150ms; }
.rotator > span:not(.is-active) { opacity: 0; transform: translateY(40%); }
.rotator > span.is-leaving { opacity: 0; transform: translateY(-40%); }
.fade-in { opacity: 0; transform: translateY(16px); animation: fadeUp 800ms var(--ease-out) forwards; }
.d1 { animation-delay: 350ms; } .d2 { animation-delay: 500ms; }


@keyframes rise { to { transform: translateY(0); } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes talk { to { transform: scaleY(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Services
   ========================================================================== */
.services { margin-top: var(--s-8); display: grid; gap: var(--s-4); }
.service { --c: var(--brand); display: flex; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--s-7); }
.service__icon {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--c);
  transition: transform var(--d-med) var(--ease-spring), background var(--d-med);
}
.service__icon svg { width: 32px; height: 32px; }
.service:hover .service__icon { transform: scale(1.1) rotate(-6deg); background: color-mix(in srgb, var(--c) 12%, transparent); }
.service h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.service p { color: var(--text-muted); }

/* ==========================================================================
   About + logos
   ========================================================================== */
.about { text-align: center; }
.about__text { margin: var(--s-5) auto 0; max-width: 34em; font-size: var(--t-body-lg); color: var(--text-muted); }
.logos { margin-top: var(--s-10); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); align-items: center; }
.logo { height: 80px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--t-h3-lg); border-radius: var(--r-lg); transition: transform var(--d-med) var(--ease-out), background var(--d-med); }
.logo:hover { transform: translateY(-4px); background: var(--surface); }
.logo svg { height: 40px; width: auto; }

/* ==========================================================================
   How it works + pricing
   ========================================================================== */
.plans__tabs { margin-top: var(--s-6); display: flex; justify-content: center; }
.panels { margin-top: var(--s-7); display: grid; }
.panel { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity var(--d-med) var(--ease-out), transform var(--d-med) var(--ease-out); }
.panel:not(.is-active) { visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; }
.vat { margin-top: var(--s-4); font-size: var(--t-micro); color: var(--text-muted); text-align: center; }
.num {
  position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-control); color: var(--text-muted); font-weight: 600; font-size: var(--t-micro);
  transition: background var(--d-med), color var(--d-med), border-color var(--d-med), transform var(--d-med) var(--ease-spring);
}
.num { width: 44px; height: 44px; font-size: var(--t-body); }
.price { display: flex; align-items: baseline; gap: var(--s-2); }
.price b { font-size: var(--t-price); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.price span { font-size: var(--t-small); color: var(--text-muted); }

/* 1-2-3 sits on each card's top edge; grey connectors run between the cards */
.step3__head { display: flex; align-items: center; gap: var(--s-3); }
.step3__head .num { position: absolute; top: -22px; left: 50%; translate: -50% 0; background: var(--brand); border-color: var(--brand); color: #fff; }
/* Cards arrive one by one; an animation (not a transition delay) so hover stays instant afterwards */
.step3.reveal { transition-delay: 0ms; }
.step3.reveal.is-in { animation: cardIn 700ms var(--ease-out) calc(var(--i, 0) * 220ms) backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(32px); } }
.step3 + .step3::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--s-5) - 1px); width: var(--s-5); height: 1px; background: var(--border-control); }

/* Step cards */
.steps3 { flex: 1; margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.step3 { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7) var(--s-5) var(--s-6); }
.step3 h3 { font-size: var(--t-body-lg); font-weight: 600; line-height: 1.25; }
.step3 .lede { color: var(--text-muted); font-size: var(--t-small); }
.step3 > .btn { margin-top: auto; }
.step3--start { background: var(--start-bg, var(--green-100)); border: 2px solid var(--brand); box-shadow: 0 16px 40px rgba(56,129,43,.14); }
.step3--start:hover { box-shadow: 0 24px 56px rgba(56,129,43,.2); }
.reveal.is-in.step3--start:hover { transform: translateY(-4px); transition-delay: 0ms; }

/* Example plan: a small sheet of paper */
.doc {
  position: relative; margin: var(--s-5) var(--s-2) var(--s-1); padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(47,30,13,.06), 0 8px 20px rgba(47,30,13,.06); display: grid; gap: var(--s-3);
  transform: rotate(-2deg); transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med);
}
.step3:hover .doc { transform: rotate(0) translateY(-2px); box-shadow: var(--shadow-2); }
.doc__head b { display: block; font-size: var(--t-small); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc__head span { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--brand-text); }
.doc__foot { display: flex; justify-content: center; }
.doc > .example-tag { position: absolute; top: -10px; left: 50%; translate: -50% 0; background: var(--sand-300); border: 1px solid var(--border); }
.shuffle { white-space: nowrap; }
.example-tag { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--bg-accent); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.doc ul { display: grid; gap: 6px; align-content: start; min-height: calc(4 * 21px + 3 * 6px); font-size: var(--t-micro); }
.doc li { display: flex; align-items: center; gap: var(--s-2); line-height: 21px; animation: slideIn 360ms var(--ease-out) both; animation-delay: calc(var(--n) * 80ms); }
.doc li svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
@keyframes slideIn { from { opacity: 0; transform: translateY(6px); } }
.shuffle {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--border-control); border-radius: var(--r-pill); background: var(--surface); cursor: pointer;
  font-size: var(--t-micro); font-weight: 500; transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.shuffle:hover { background: var(--green-50); border-color: var(--brand); }
.shuffle:active { transform: scale(.96); }
.shuffle svg { width: 16px; height: 16px; color: var(--brand-text); }

/* Groups: header + focus areas on the left, rates + CTA on the right */
.groups { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-7); align-items: center; padding: var(--s-8); }
.groups__body { grid-column: span 7; display: grid; gap: var(--s-3); }
.groups__body h3 { font-size: var(--t-body-lg); font-weight: 600; line-height: 1.25; }
.groups__body .lede { color: var(--text-muted); font-size: var(--t-small); }
.groups__body .label { margin-top: var(--s-4); font-size: var(--t-micro); color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chips li {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--bg-base); font-size: var(--t-small); transition: background var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.chips li:hover { background: var(--bg-accent); transform: translateY(-1px); }
.chips svg { width: 20px; height: 20px; color: var(--c, var(--brand)); }
.chips .more { background: none; border: 1px dashed var(--border-control); color: var(--text-muted); }
.groups__aside { grid-column: 9 / span 4; display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-lg); background: var(--green-50); border: 2px solid var(--brand); }
.groups__aside .lede { color: var(--text-muted); font-size: var(--t-small); }


/* ==========================================================================
   Quotes
   ========================================================================== */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.quote { padding: var(--s-8); display: flex; flex-direction: column; }
.quote__mark { font-size: 72px; line-height: .6; height: 32px; font-weight: 800; color: var(--brand); transition: transform var(--d-med) var(--ease-spring); }
.quote:hover .quote__mark { transform: translateY(-4px) rotate(-8deg); }
.quote p { margin-top: var(--s-5); font-size: var(--t-h3); line-height: 1.4; color: var(--text-muted); }
.quote cite { margin-top: auto; padding-top: var(--s-5); font-style: normal; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); color: var(--text-muted); }
.quote cite b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-accent); color: var(--text); font-weight: 600; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.final { position: relative; overflow: hidden; background: var(--bg-inverse); color: var(--sand-100); text-align: center; }
.final .h2 { color: #fff; font-size: var(--t-display-sm); }
.final .swipe::before { background: var(--final-hl, var(--green-600)); }
.final .doodle { stroke: rgba(255,255,255,.5); }
.final .cta { margin-top: var(--s-8); }
.final .meta { color: rgba(242,241,232,.78); }

.footer { padding-block: var(--s-4); background: var(--bg-inverse); color: rgba(242,241,232,.6); font-size: var(--t-micro); border-top: 1px solid rgba(242,241,232,.1); }
.footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.footer nav { display: flex; gap: var(--s-5); }
.footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color var(--d-fast); }
.footer a:hover { color: #fff; }

.dock { display: none; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), box-shadow var(--d-med), border-color var(--d-med), background var(--d-med); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in.card--hover:hover { transform: translateY(-4px); transition-delay: 0ms; }

.toast {
  position: fixed; left: 50%; bottom: var(--s-6); z-index: 60; transform: translate(-50%, 24px); opacity: 0;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--ink-900); color: #fff; font-size: var(--t-small);
  box-shadow: var(--shadow-2); pointer-events: none; transition: opacity var(--d-med), transform var(--d-med) var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
}
@media (max-width: 860px) {
  .nav__link { display: none; }
  .quotes { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .steps3 { grid-template-columns: 1fr; align-content: start; }
  .steps3 { row-gap: var(--s-8); }
  .step3 + .step3::before { left: 50%; top: calc(-1 * var(--s-8) - 1px); width: 1px; height: calc(var(--s-8) - 22px); }
  .panel:not(.is-active) { display: none; }
  .groups { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-6) var(--s-5); }
  .groups__body, .groups__aside { grid-column: 1 / -1; }
  .chips { gap: var(--s-2); }
  .chips li { min-height: 40px; padding: 0 var(--s-4); }
  .panel, .groups { min-width: 0; }
}
@media (max-width: 760px) {
  :root { --gutter: var(--s-4); --nav-h: 64px; --t-display: clamp(44px, 13.6vw, 64px); --t-display-sm: clamp(28px, 8.4vw, 36px); --t-h3-lg: 24px; }
  .section { padding-block: var(--s-10); }

  /* Hero: Alex sits behind/right of the copy instead of stacking under it */

  .btn { min-height: 56px; font-size: 18px; padding: 0 var(--s-5); }
  .nav__cta { display: none; }
  .service { padding: var(--s-5); gap: var(--s-4); align-items: flex-start; }
  .service__icon { width: 48px; height: 48px; }
  .service h3 { font-size: var(--t-body-lg); }
  .service p { font-size: var(--t-small); }
  .segmented button { padding: 0 var(--s-5); }
  .quote { padding: var(--s-6); }
  .quote p { font-size: var(--t-body-lg); }
  .logo svg { height: 32px; }
  .logo { font-size: var(--t-h3); }
  .dock {
    display: flex; position: fixed; z-index: 45; left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
    transform: translateY(140%); transition: transform var(--d-med) var(--ease-out);
  }
  .dock.show { transform: none; }
  .dock .btn { width: 100%; }
  .footer { padding-bottom: calc(var(--s-4) + 80px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   CLEAN — gradient field + soft cursor glow.
   ========================================================================== */
.brand b { font-family: var(--font-display, var(--font)); font-weight: 700; letter-spacing: .1em; font-size: 17px; }
.brand span { letter-spacing: .02em; }

/* Gradient field + a very soft pulse that drifts after the cursor */
.fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx__field { position: absolute; inset: -10%; will-change: transform; }
.fx__blob { position: absolute; border-radius: 50%; filter: blur(90px); animation: drift 28s ease-in-out infinite alternate; }
.fx__blob.b1 { width: 54vw; height: 54vw; left: 46%; top: -6%; background: var(--fx1); }
.fx__blob.b2 { width: 42vw; height: 42vw; left: 2%; top: 44%; background: var(--fx2); animation-duration: 32s; animation-delay: -6s; }
.fx__blob.b3 { width: 36vw; height: 36vw; left: 70%; top: 58%; background: var(--fx3); animation-duration: 36s; animation-delay: -12s; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, -3vw) scale(1.08); } 100% { transform: translate(-3vw, 4vw) scale(.95); } }
.fx__focus { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.fx__focus::before { content: ""; position: absolute; left: -220px; top: -220px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, var(--fx-focus), transparent 65%); animation: breathe 9s ease-in-out infinite; }
.fx__focus i { display: none; }
@keyframes breathe { 50% { transform: scale(1.06); } }



/* Clean highlight: a straight marker band */
.swipe::before { height: 32%; bottom: 6%; left: -2%; right: -2%; border-radius: 3px; transform: scaleX(0); }
.is-in .swipe::before, .swipe.is-in::before { transform: scaleX(1); }
.final .swipe::before { background: var(--final-hl); }
.rotator > span { font-style: var(--word-style, normal); font-family: var(--font-word, inherit); }

/* Buttons stay solid green; secondary adapts to light/dark */
.btn--secondary { background: var(--btn2-bg, rgba(47,30,13,.06)); color: var(--text); }
.btn--secondary:hover { background: var(--btn2-hover, rgba(47,30,13,.1)); }

/* How I've helped clients: 2×2 with animated scenes */
.services { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.service { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.service__icon { display: none; }
.service__art { display: grid; place-items: center; height: 232px; padding: var(--s-5) var(--s-5) var(--s-2); background: linear-gradient(160deg, var(--art-bg), var(--surface)); border-bottom: 1px solid var(--border); transition: background var(--d-med); }
.service__art .il { width: 100%; height: 100%; max-width: 300px; }
.service > div:last-child { padding: var(--s-5) var(--s-6) var(--s-6); }
.service h3 { font-size: var(--t-body-lg); }

.il { fill: none; stroke: var(--il-stroke, var(--text)); stroke-width: var(--il-width, 2.2); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.il * { transform-box: fill-box; }
.il .hl { fill: var(--il-hl, var(--highlight)); stroke: none; }
.il .fill-hl { fill: var(--il-accent, var(--highlight)); }
.il .paper { fill: var(--il-paper, #fff); }
.il .solid { fill: var(--il-solid, var(--il-stroke, var(--text))); stroke: none; }

/* Illustration styles */
[data-illus="line"] { --il-hl: color-mix(in srgb, var(--highlight) 70%, transparent); }
[data-illus="duo"] { --il-stroke: var(--brand); --il-width: 2; --il-paper: color-mix(in srgb, var(--brand) 10%, var(--surface)); --il-hl: color-mix(in srgb, var(--brand) 14%, transparent); --il-accent: var(--brand); --il-solid: var(--brand); }
[data-illus="thin"] { --il-stroke: var(--text-muted); --il-width: 1.3; --il-paper: var(--surface); --il-hl: transparent; --il-accent: color-mix(in srgb, var(--highlight) 80%, transparent); }
[data-illus="thin"] .il .hl { stroke: var(--border-strong); stroke-width: 1.2; stroke-dasharray: 3 6; }
[data-illus="inverse"] { --il-stroke: #fff; --il-width: 2; --il-paper: rgba(255,255,255,.08); --il-hl: rgba(255,255,255,.1); --il-accent: color-mix(in srgb, var(--brand) 55%, #fff); --il-solid: #fff; }
[data-illus="inverse"] .service__art { background: linear-gradient(160deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #2F1E0D)); border-bottom-color: transparent; }

/* speaking */
.il-wave { opacity: .3; }
.service:hover .il-wave { animation: ilWave 1.4s ease-in-out infinite; }
.service:hover .il-wave.w2 { animation-delay: .18s; } .service:hover .il-wave.w3 { animation-delay: .36s; }
@keyframes ilWave { 0%, 100% { opacity: .2; transform: translateX(-2px); } 50% { opacity: 1; transform: translateX(3px); } }
.il-mic { transform-origin: 100% 100%; transition: transform .5s var(--ease-spring); }
.service:hover .il-mic { transform: rotate(-8deg) translateY(-3px); }
.il-person { transition: transform .5s var(--ease-out); }
.service:hover .il-person { transform: translateY(-3px); }
/* storyboard */
.il-panel { transition: transform .5s var(--ease-spring); transform-origin: 50% 100%; }
.service:hover .il-panel.p1 { transform: rotate(-4deg) translateY(-4px); }
.service:hover .il-panel.p2 { transform: translateY(-8px); transition-delay: .06s; }
.service:hover .il-panel.p3 { transform: rotate(4deg) translateY(-4px); transition-delay: .12s; }
.il-pencil { transition: transform .9s var(--ease-out); }
.service:hover .il-pencil { transform: translateX(-56px) translateY(4px) rotate(-4deg); }
.il-scribble { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-out), opacity .2s; }
.service:hover .il-scribble { opacity: 1; stroke-dashoffset: 0; }
/* growth */
.il-bar { transform-origin: 50% 100%; }
.service:hover .il-bar { animation: barUp .7s var(--ease-spring) both; }
.service:hover .il-bar.b2 { animation-delay: .08s; } .service:hover .il-bar.b3 { animation-delay: .16s; } .service:hover .il-bar.b4 { animation-delay: .24s; }
@keyframes barUp { from { transform: scaleY(.55); } }
.il-flag { transform-origin: 0% 100%; }
.service:hover .il-flag { animation: wave 1s ease-in-out infinite; }
@keyframes wave { 50% { transform: skewY(-8deg); } }
/* video call */
.il-bubble { transition: transform .5s var(--ease-spring); }
.service:hover .il-bubble { transform: translate(-4px, -6px) rotate(-3deg); }
.service:hover .il-dot { animation: blink 1.1s ease-in-out infinite; }
.service:hover .il-dot.d2 { animation-delay: .18s; } .service:hover .il-dot.d3 { animation-delay: .36s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.il-mouth { transform-origin: center; }
.service:hover .il-mouth { animation: talk .35s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scaleY(1.9); } }

/* Example plan sheet stays clean (no tilt) */
.doc { transform: none; }
.step3:hover .doc { transform: translateY(-2px); }

/* ---------- Palettes — built from the slate jacket + espresso shirt, always with a green CTA ---------- */
[data-style] { --display-tracking: -.04em; --display-tracking-sm: -.03em; --btn-radius: 12px; --surface: #FFFFFF; }
.btn:not(.btn--secondary):not(.btn--inverse) { background: var(--brand); }
.btn:not(.btn--secondary):not(.btn--inverse):hover { background: var(--brand-hover); }

/* P1 · Slate mist: cool, airy blue-grey with a forest green CTA */
/* P2 · Cocoa & slate: warm greige that echoes the espresso shirt, slate accents */
/* P3 · Midnight slate: dark mode in the jacket's slate, bright green CTA */
/* P4 · Stone & sage: neutral stone, soft slate highlight, sage-green CTA */
/* P5 · Denim & espresso: crisp white, denim-blue bands and highlight, espresso type, deep green CTA */

/* ---------- Type options ---------- */

/* Review panel (remove before launch) */

@media (max-width: 760px) {
  .services { grid-template-columns: 1fr; }
  .service__art { height: 196px; }
  .service > div:last-child { padding: var(--s-4) var(--s-5) var(--s-5); }
  .dock { bottom: 64px !important; }
  .dock:not(.show) { transform: translateY(260%); }


  /* Stacked: copy and CTA first, then Alex in a rounded panel */

  /* Photo first: Alex fills a panel at the top, copy underneath */

  /* Arch portrait: a centered arch-shaped portrait above centered copy */
}

/* ==========================================================================
   V6 — draft-3 hero, matched to the mockup: Tilt Warp display, Lexend text, Inclusive Sans name.
   Palette: espresso + cream, a silvery periwinkle page border (a nod to the jacket), a warm yellow highlighter,
   green for the CTA and attention.
   ========================================================================== */
:root { --font: "Lexend", system-ui, -apple-system, sans-serif; --font-display: "Tilt Warp", system-ui, sans-serif; --display-weight: 400; }
[data-style] { --display-tracking: -.04em; --display-tracking-sm: -.03em; }
.doodle, .brand .brand__sig { display: none; }
.brand b { font-family: "Inclusive Sans", var(--font); font-weight: 700; letter-spacing: 0; font-size: 24.6px; line-height: 1; color: var(--ink); }
.brand span { display: block; margin-top: 1px; font-size: 12.75px; line-height: 1.2; letter-spacing: 0; color: var(--ink); }

/* Every hero measure comes from the 1404×864 desktop frame: 1 mockup px = var(--px).
   Widths use container units (the hero's content box), so a visible scrollbar can't push the layout off-centre. */
.hx {
  --fh: clamp(600px, calc(100svh - 36px), calc(100cqw * .6154));
  --cw: min(100cqw, var(--fh) * 1.625);
  --px: calc(var(--cw) / 1404);
  container-type: inline-size;
  position: relative; padding: 18px; background: var(--page); overflow-x: clip;
}
.hx__frame { position: relative; height: var(--fh); }
.hx__bg { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; background: var(--frame); }
.hx__brand { position: absolute; z-index: 4; top: 24.5px; left: 22px; }
.hx__brand .brand { display: block; }

/* ---------- Background: cream drift — warm whites and butter drifting slowly across the cream ---------- */
.hx .fx__field { inset: -15%; }
.hx .fx__focus { display: none; }
.hx .fx__blob { filter: blur(calc(var(--px) * 80)); animation: meshA 28s ease-in-out infinite alternate; }
.hx .fx__blob.b1 { width: 52%; aspect-ratio: 1; height: auto; left: 50%; top: -12%; background: var(--mesh1); }
.hx .fx__blob.b2 { width: 48%; aspect-ratio: 1; height: auto; left: -8%; top: 44%; background: var(--mesh2); animation-name: meshB; animation-duration: 32s; animation-delay: 0s; }
.hx .fx__blob.b3 { width: 42%; aspect-ratio: 1; height: auto; left: 10%; top: -20%; background: var(--mesh3); animation-name: meshC; animation-duration: 26s; animation-delay: 0s; }
.hx .fx__blob.b4 { width: 36%; aspect-ratio: 1; height: auto; left: 36%; top: 40%; background: var(--mesh4); animation-name: meshB; animation-duration: 36s; animation-delay: -10s; }
.hx .fx__blob.b5 { width: 42%; aspect-ratio: 1; height: auto; left: 72%; top: 50%; background: var(--mesh5); animation-name: meshC; animation-duration: 30s; animation-delay: -6s; }
@keyframes meshA { 50% { transform: translate(-8%, 10%) scale(1.12); } 100% { transform: translate(6%, -4%) scale(.94); } }
@keyframes meshB { 50% { transform: translate(14%, -10%) scale(1.1); } 100% { transform: translate(-6%, 8%) scale(1.04); } }
@keyframes meshC { 50% { transform: translate(-10%, 12%) scale(.92); } 100% { transform: translate(12%, 6%) scale(1.14); } }

/* Voice rings, as in the mockup: flat, sharp-edged bands at very low contrast, drifting slowly outward.
   A faint warm-grey band (rather than white) so they still read over the near-white mesh. */
@property --o { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hx__rings {
  --ring-gap: calc(var(--px) * 44);
  position: absolute; z-index: 1; left: calc(50% - var(--cw) / 2 + var(--px) * 931); top: calc(100% - var(--px) * 412);
  width: calc(var(--px) * 1500); aspect-ratio: 1; translate: -50% -50%;
  background: repeating-radial-gradient(circle,
    var(--ring-band) var(--o), var(--ring-band) calc(var(--o) + var(--ring-gap) * .45),
    transparent calc(var(--o) + var(--ring-gap) * .45), transparent calc(var(--o) + var(--ring-gap)));
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
          mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: ringsOut 10s linear infinite;
}
@keyframes ringsOut { to { --o: var(--ring-gap); } }

/* Composition: headline wraps around Alex. The comp clips at the card's bottom edge so Alex's photo never shows its cut-off end. */
.hx__comp {
  position: absolute; z-index: 2; bottom: 0; left: calc(50% - var(--cw) / 2); width: var(--cw); height: calc(var(--px) * 864);
  clip-path: inset(-100vh -100vw 0 -100vw);
  /* The mockup's group runs 120px from the left edge but 128px from the right; shift 4px so it sits centred */
  translate: calc(var(--px) * 4) 0;
}
.hx__alexm, .hx__alexl { position: absolute; inset: 0; transform-origin: calc(var(--px) * 941) 100%; }
.hx__alex {
  position: absolute; left: calc(var(--px) * 637); top: calc(var(--px) * 50); height: calc(var(--px) * 832); width: auto; max-width: none;
  transform: scaleX(-1);
}
/* Headline: -6% tracking as in the mockup; "Command" baseline at 279 (mockup px) */
.hx__title { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--px) * 160); line-height: 1; letter-spacing: -.06em; color: var(--ink); }
.hx__w { position: absolute; top: calc(var(--px) * 279 - .86em); padding: .14em .04em; margin: -.14em -.04em 0; }
.hx__w > span { display: block; }
.hx__w1 { left: calc(var(--px) * 120); }
/* "any" sits as far past Alex's head as "Command" ends before it (set in JS) */
.hx__w2 { left: var(--any-x, calc(var(--px) * 1027)); }
.hx__w i { font-style: normal; }
.hx__w, .hx__w > span, .hx__pill, .hx__copy, .hx__alexl { will-change: transform; }

/* ---------- Highlighted word: hand-drawn marker stroke, redrawn for every word ----------
   Geometry in em so the word sits identically at every size. Tilt Warp: ascenders .73em (i-dot .78), descender .17em.
   The band is 1em tall with the baseline at .82em; it starts 14 mockup px under "Command". */
.hx__pill {
  position: absolute; left: calc(var(--px) * 94); top: calc(var(--px) * 293); height: 1em;
  width: calc(var(--pill-w, 2.2em) + .44em); padding-inline: .22em;
  color: var(--ink); transition: width 450ms var(--ease-out);
}
.hx__pill .rotator { display: grid; position: relative; margin-top: -.04em; transform-origin: 0 .54em; scale: var(--fit, 1); transition: scale 450ms var(--ease-out); }
.hx__pill .rotator > span { transition: none; transform: none; white-space: nowrap; }
.hx__pill .rotator > span:not(.is-active) { opacity: 0; }
.hx__pill .rotator > span::before { display: none; }
.hx__marker { position: absolute; left: -.05em; top: .02em; width: calc(100% + .1em); height: .98em; overflow: visible; }
.hx__marker path { fill: var(--pill); }
/* Word, then highlight: the word arrives (always espresso), then the stroke sweeps in left→right behind it.
   On change the stroke wipes away to the right while the word lifts out. */
.hx__marker { clip-path: inset(-10% 100% -10% -2%); transition: clip-path 560ms cubic-bezier(.6, 0, .3, 1); }
.hx__pill.is-lit .hx__marker { clip-path: inset(-10% -4% -10% -2%); }
.hx__pill.is-out .hx__marker { clip-path: inset(-10% -4% -10% 100%); transition-duration: 380ms; }
.hx__pill.is-out .rotator { opacity: 0; translate: 0 -.12em; transition: opacity 260ms ease, translate 300ms ease, scale 450ms var(--ease-out); }
.hx__pill.no-t, .hx__pill.no-t .hx__marker, .hx__pill.no-t .rotator { transition: none; }
.hx__pill .rotator.is-enter { animation: wordIn 560ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes wordIn { from { opacity: 0; translate: 0 .22em; } }

/* ---------- Copy ---------- */
.hx .fade-in { opacity: 1; transform: none; animation: none; }
.hx__copy { position: absolute; z-index: 3; left: calc(18px + (100% - 36px - var(--cw)) / 2 + var(--px) * 128); top: calc(18px + var(--fh) - var(--px) * 376); width: calc(var(--px) * 560); min-width: 340px; }
.hx__lead { max-width: calc(var(--px) * 470); font-size: max(15px, calc(var(--px) * 24)); line-height: 1.28; color: var(--text-muted); }
.hx__lead .br-m { display: none; }
.hx__lead strong { color: var(--ink); font-weight: 600; }
.hx__actions { margin-top: calc(var(--px) * 30); display: flex; gap: calc(var(--px) * 12); align-items: flex-start; }
.hx__actions .btn { min-height: max(48px, calc(var(--px) * 64)); padding-inline: max(22px, calc(var(--px) * 34)); font-size: max(16px, calc(var(--px) * 20)); border-radius: max(10px, calc(var(--px) * 14)); }
:is(.hx__actions, .dock) .btn--secondary { background: var(--btn2-bg); color: var(--ink); box-shadow: none; }
:is(.hx__actions, .dock) .btn--secondary:hover { background: var(--btn2-hover); }
.hx__actions .cta { gap: calc(var(--px) * 14); }
.hx__actions .meta { font-size: max(13px, calc(var(--px) * 16)); }

/* ---------- Load-in: sides, staggered — "Command" + Alex, then "any", then the word, then its highlight (JS), then subtitle, then CTAs ---------- */
.hx { --pill-delay: 1500; }
@keyframes hxUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes hxFromL { from { opacity: 0; transform: translateX(-1.1em); } }
@keyframes hxFromR { from { opacity: 0; transform: translateX(1.1em); } }
@keyframes hxPillL { from { opacity: 0; translate: -1.1em 0; } }
@keyframes hxAlexUp { from { transform: translateY(24%); } }
.hx.is-play .hx__w1 > span { animation: hxFromL 1.2s cubic-bezier(.16, 1, .3, 1) both; }
.hx.is-play .hx__alexl { animation: hxAlexUp 1.3s cubic-bezier(.16, 1, .3, 1) both; }
.hx.is-play .hx__w2 > span { animation: hxFromR 1.2s cubic-bezier(.16, 1, .3, 1) 250ms both; }
.hx.is-play .hx__pill { animation: hxPillL 1.2s cubic-bezier(.16, 1, .3, 1) 500ms both; }
.hx.is-play .hx__lead { animation: hxUp 1s cubic-bezier(.16, 1, .3, 1) 1800ms both; }
.hx.is-play .hx__actions { animation: hxUp 1s cubic-bezier(.16, 1, .3, 1) 2050ms both; }

/* ---------- Sticky CTA footer (phone): takes over from the hero buttons as they scroll up to it ---------- */

@media (max-width: 760px) {
  /* Phone (draft-4 mockup): logo above; one full-height cream card — the portrait with the headline breaking out of it,
     a hairline, then copy + full-width buttons */
  .hx { --cw: 100cqw; --px: calc(var(--cw) / 366); --fh: calc(var(--px) * 504); padding: 86px 18px 20px; }
  .hx__bg { border-radius: 16px 16px 0 0; }
  .hx__brand { top: -58px; left: 0; right: 0; text-align: center; }
  .hx__comp { left: 0; height: 100%; translate: none; }
  .hx__alexm, .hx__alexl { transform-origin: 50% 100%; }
  .hx__alex { left: 50%; translate: -50% 0; top: calc(var(--px) * 79); height: calc(var(--px) * 440); }
  .hx__rings { left: 50%; top: calc(var(--px) * 230); width: calc(var(--px) * 760); --ring-gap: calc(var(--px) * 22); }
  .hx__title { font-size: calc(var(--px) * 74); }
  .hx__w { top: calc(var(--px) * 89 - .86em); }
  .hx__w1 { left: calc(var(--px) * -10); }
  .hx__w2 { left: calc(var(--px) * 254); top: calc(var(--px) * 194 - .86em); }
  .hx__pill { left: calc(var(--px) * 23); top: calc(var(--px) * 234); --pill: rgba(246, 216, 99, .7); }  /* stronger over Alex's jacket for contrast */
  .hx__copy { position: static; width: auto; min-width: 0; padding: 22px 20px 20px; text-align: center; background: var(--frame); border-top: 1px solid var(--page); border-radius: 0 0 16px 16px; }
  .hx__lead { font-size: 18px; max-width: none; }
  .hx__lead .br-m { display: inline; }
  .hx__actions .cta .meta { display: none; }
  .hx__actions { margin-top: 26px; flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .hx__actions .cta { display: grid; gap: var(--s-2); }
  :is(.hx__actions, .dock) .btn { width: 100%; min-height: 58px; font-size: 17px; }
  /* Full-width, slightly see-through frosted bar with just the booking button */
  .dock {
    left: 0; right: 0; bottom: 0 !important; flex-direction: column; gap: var(--s-2);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-base) 70%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: 0 -1px 0 var(--border);
  }
  .dock:not(.show) { transform: translateY(100%); }
  .footer { padding-bottom: calc(var(--s-4) + 92px); }
}

/* ---------- Palette · Espresso & cream, periwinkle border, yellow highlighter, green CTA ---------- */
[data-style="a"] {
  --page: #DADCE2; --frame: #EEEDE4; --ink: #2F1E0D; --ink-900: #2F1E0D; --pill: rgba(246, 216, 99, .5); --ring-band: rgba(120, 104, 78, .02);
  --mesh1: rgba(255, 254, 247, .95); --mesh2: rgba(236, 228, 198, .6); --mesh3: rgba(244, 238, 216, .7); --mesh4: rgba(255, 255, 250, .8); --mesh5: rgba(230, 223, 200, .55);
  --btn2-bg: rgba(47, 30, 13, .07); --btn2-hover: rgba(47, 30, 13, .12);
  --bg-base: #F4F2EA; --bg-accent: #ECE8DD; --surface: #FFFDF8; --text: #2F1E0D; --text-muted: #685A4F; --border-control: #8A7D72;
  --brand: #3D7A25; --brand-hover: #346A1F; --brand-press: #2B5919; --brand-text: #336A1E; --brand-soft: #E0ECD6; --shadow-brand: 0 10px 24px rgba(61,122,37,.25);
  --start-bg: #E4EDDC; --highlight: #C3C8DA; --final-hl: rgba(167,174,198,.35); --art-bg: #F7F5EF;
  --fx-focus: transparent;
  --bg-inverse: #2F1E0D;
  --border: rgba(47, 30, 13, .08); --border-strong: rgba(47, 30, 13, .16);
  --shadow-1: 0 1px 2px rgba(47, 30, 13, .04), 0 2px 8px rgba(47, 30, 13, .04); --shadow-2: 0 12px 32px rgba(47, 30, 13, .10), 0 2px 6px rgba(47, 30, 13, .04);
}


/* ==========================================================================
   Service illustrations — one hand-drawn style: espresso outlines with round caps and joins, a single corner
   radius, flat palette fills and offset shadows. Each SVG is framed to its own content; --k (set per SVG at build,
   viewBox height ÷ 600) scales stroke widths and corner radii so they render identically in every illustration.
   Hover (or in view on touch screens, .is-live) plays bouncy motion only — the mic's sound waves are the one pulse.
   ========================================================================== */
.il2 {
  --il2-ink: #2F1E0D; --il2-paper: #FFFDF8; --il2-light: #DADCE2; --il2-shade: #A9AEC2;
  --il2-hair: #5E6580; --il2-yellow: #F6D863; --il2-accent: #3D7A25;
  --sw: 12; --sw-thin: 7.5;   /* stroke weights in units of a 600-tall drawing */
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  width: 100%; height: 100%; overflow: visible;
}
.il2 .o { fill: none; stroke: var(--il2-ink); stroke-width: calc(var(--sw) * var(--k, 1) * 1px); stroke-linecap: round; stroke-linejoin: round; }
.il2 .thin { stroke-width: calc(var(--sw-thin) * var(--k, 1) * 1px); }
.il2 .f-paper { fill: var(--il2-paper); } .il2 .f-light { fill: var(--il2-light); } .il2 .f-shade { fill: var(--il2-shade); }
.il2 .f-hair { fill: var(--il2-hair); } .il2 .f-yellow { fill: var(--il2-yellow); } .il2 .f-green { fill: var(--il2-accent); }
.il2 .ink { fill: var(--il2-ink); }
/* Animated parts transform around their own box; static shapes keep their drawn transforms */
.il2 :is(.lt-wave, .lt-mic, .lt-laptop, .st-card, .st-say, .st-star, .st-pencil, .gr-col, .gr-flag, .gr-arrowhead, .gr-pennant, .gr-spark,
         .ca-talk, .ca-eyes, .ca-person, .ca-bubble, .ca-dot, .ca-live) { transform-box: fill-box; }

/* Illustration panels: a warm cream that sits between the espresso lines and the hero's cream */
#services .service__art { background: linear-gradient(160deg, #FAF3E6, #FDFAF4); }

/* Modern lectern — the mic bobs, its sound waves pulse, the laptop gives a little hop */
.lt-wave { stroke: var(--il2-accent); transform-origin: 0% 50%; }
.lt-mic { transform-origin: 68% 100%; }
.lt-laptop { transform-origin: 50% 100%; }
/* Storytelling — the cards lift on their string; the pencil, tip up toward them, draws the line beneath */
.st-card { transition: transform 600ms var(--bounce); transform-origin: 50% 0%; }
.st-squiggle { stroke: var(--il2-accent); stroke-dasharray: 100; stroke-dashoffset: 0; }
.st-say, .st-star { transform-origin: 50% 50%; }
/* Advance your career — bars rise from behind the baseline in turn, the trend line draws, then the flag pops up */
.gr-col { transform-origin: 50% 100%; }
.gr-arrow, .gr-arrowhead { stroke: var(--il2-accent); }
.gr-arrow { stroke-dasharray: 100; stroke-dashoffset: 0; }
.gr-flag { transform-origin: 0% 100%; }
.gr-arrowhead { transform-origin: 100% 0%; }
.gr-pennant { transform-origin: 0% 50%; }
.gr-spark { transform-origin: 50% 50%; }
/* No script, no problem — the person on screen talks and nods, the reply bubble bounces up and types */
.ca-talk { opacity: 0; transform-origin: 50% 0%; stroke: var(--il2-ink); stroke-width: calc(var(--sw-thin) * var(--k, 1) * .5px); stroke-linejoin: round; }
.ca-eyes { transform-origin: 50% 50%; }
.ca-person { transform-origin: 50% 100%; }
.ca-bubble { transform-origin: 10% 100%; transition: transform 500ms var(--bounce); }
.ca-dot, .ca-live { transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
  :is(.service:hover, .service.is-live) .lt-wave { animation: il2Wave 1.1s ease-in-out infinite; }
  :is(.service:hover, .service.is-live) .lt-wave.w2 { animation-delay: .18s; }
  :is(.service:hover, .service.is-live) .lt-mic { animation: il2Bob 1.1s var(--bounce) infinite; }
  :is(.service:hover, .service.is-live) .lt-laptop { animation: il2Hop 1.6s var(--bounce) 200ms infinite; }

  :is(.service:hover, .service.is-live) .st-card.c1 { transform: translateY(-14px) rotate(-3deg); }
  :is(.service:hover, .service.is-live) .st-card.c2 { transform: translateY(-22px); transition-delay: 70ms; }
  :is(.service:hover, .service.is-live) .st-card.c3 { transform: translateY(-14px) rotate(3deg); transition-delay: 140ms; }
  :is(.service:hover, .service.is-live) .st-say { animation: il2Pop 1.6s var(--bounce) 300ms infinite; }
  :is(.service:hover, .service.is-live) .st-star { animation: il2Spin 1.6s var(--bounce) 300ms infinite; }
  /* The line draws left→right at an even pace while the pencil tip rides along it, rising and falling with each wave */
  :is(.service:hover, .service.is-live) .st-squiggle { animation: il2Sketch 1.2s linear 150ms both; }
  :is(.service:hover, .service.is-live) .st-pencil { animation: il2Pencil 1.2s linear 150ms both; }

  :is(.service:hover, .service.is-live) .gr-col { animation: il2RiseUp 650ms var(--bounce) both; }
  :is(.service:hover, .service.is-live) .gr-col.b2 { animation-delay: 120ms; }
  :is(.service:hover, .service.is-live) .gr-col.b3 { animation-delay: 240ms; }
  :is(.service:hover, .service.is-live) .gr-col.b4 { animation-delay: 360ms; }
  :is(.service:hover, .service.is-live) .gr-arrow { animation: il2Draw 800ms var(--ease-out) 250ms both; }
  :is(.service:hover, .service.is-live) .gr-arrowhead { animation: il2PopIn 450ms var(--bounce) 950ms both; }
  :is(.service:hover, .service.is-live) .gr-flag { animation: il2PopIn 500ms var(--bounce) 780ms both; }
  :is(.service:hover, .service.is-live) .gr-pennant { animation: il2Flag 900ms var(--bounce) 1300ms infinite; }
  :is(.service:hover, .service.is-live) .gr-spark { animation: il2Twinkle 1.4s var(--bounce) 1300ms infinite both; }
  :is(.service:hover, .service.is-live) .gr-spark.s2 { animation-delay: 1.5s; }
  :is(.service:hover, .service.is-live) .gr-spark.s3 { animation-delay: 1.7s; }

  :is(.service:hover, .service.is-live) .ca-smile { opacity: 0; }
  :is(.service:hover, .service.is-live) .ca-talk { opacity: 1; animation: il2Talk 280ms ease-in-out infinite alternate; }
  :is(.service:hover, .service.is-live) .ca-person { animation: il2Nod 1.4s var(--bounce) infinite; }
  :is(.service:hover, .service.is-live) .ca-eyes { animation: il2Blink 2.4s ease-in-out 500ms infinite; }
  :is(.service:hover, .service.is-live) .ca-bubble { transform: translate(-6px, -10px) rotate(-3deg); }
  :is(.service:hover, .service.is-live) .ca-dot { animation: il2Dot 1s var(--bounce) infinite; }
  :is(.service:hover, .service.is-live) .ca-dot.d2 { animation-delay: .15s; }
  :is(.service:hover, .service.is-live) .ca-dot.d3 { animation-delay: .3s; }
  :is(.service:hover, .service.is-live) .ca-live { animation: il2Beat 1s var(--bounce) infinite; }
}
@keyframes il2Wave { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .35; transform: translateX(10px) scale(1.06); } }
@keyframes il2Bob { 50% { transform: rotate(-5deg); } }
@keyframes il2Hop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-10px); } }
@keyframes il2Pop { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.08); } }
@keyframes il2Spin { 0%, 100% { transform: none; } 50% { transform: rotate(18deg) scale(1.12); } }
@keyframes il2Sketch { from { stroke-dashoffset: 100; } }
/* The pencil tip follows the drawn line exactly — five quadratic arcs, 76 units wide, alternating up and down (three humps,
   two dips) — sampled 10× per arc. The line draws at the same even pace, so each bump in the pencil matches the line. */
@keyframes il2Pencil {
  0.00% { translate: -380.0px 0.0px; }
  2.00% { translate: -372.4px -6.1px; }
  4.00% { translate: -364.8px -10.9px; }
  6.00% { translate: -357.2px -14.3px; }
  8.00% { translate: -349.6px -16.3px; }
  10.00% { translate: -342.0px -17.0px; }
  12.00% { translate: -334.4px -16.3px; }
  14.00% { translate: -326.8px -14.3px; }
  16.00% { translate: -319.2px -10.9px; }
  18.00% { translate: -311.6px -6.1px; }
  20.00% { translate: -304.0px 0.0px; }
  22.00% { translate: -296.4px 6.1px; }
  24.00% { translate: -288.8px 10.9px; }
  26.00% { translate: -281.2px 14.3px; }
  28.00% { translate: -273.6px 16.3px; }
  30.00% { translate: -266.0px 17.0px; }
  32.00% { translate: -258.4px 16.3px; }
  34.00% { translate: -250.8px 14.3px; }
  36.00% { translate: -243.2px 10.9px; }
  38.00% { translate: -235.6px 6.1px; }
  40.00% { translate: -228.0px 0.0px; }
  42.00% { translate: -220.4px -6.1px; }
  44.00% { translate: -212.8px -10.9px; }
  46.00% { translate: -205.2px -14.3px; }
  48.00% { translate: -197.6px -16.3px; }
  50.00% { translate: -190.0px -17.0px; }
  52.00% { translate: -182.4px -16.3px; }
  54.00% { translate: -174.8px -14.3px; }
  56.00% { translate: -167.2px -10.9px; }
  58.00% { translate: -159.6px -6.1px; }
  60.00% { translate: -152.0px 0.0px; }
  62.00% { translate: -144.4px 6.1px; }
  64.00% { translate: -136.8px 10.9px; }
  66.00% { translate: -129.2px 14.3px; }
  68.00% { translate: -121.6px 16.3px; }
  70.00% { translate: -114.0px 17.0px; }
  72.00% { translate: -106.4px 16.3px; }
  74.00% { translate: -98.8px 14.3px; }
  76.00% { translate: -91.2px 10.9px; }
  78.00% { translate: -83.6px 6.1px; }
  80.00% { translate: -76.0px 0.0px; }
  82.00% { translate: -68.4px -6.1px; }
  84.00% { translate: -60.8px -10.9px; }
  86.00% { translate: -53.2px -14.3px; }
  88.00% { translate: -45.6px -16.3px; }
  90.00% { translate: -38.0px -17.0px; }
  92.00% { translate: -30.4px -16.3px; }
  94.00% { translate: -22.8px -14.3px; }
  96.00% { translate: -15.2px -10.9px; }
  98.00% { translate: -7.6px -6.1px; }
  100.00% { translate: 0.0px 0.0px; }
}
@keyframes il2RiseUp { from { transform: translateY(100%); } }
@keyframes il2Draw { from { stroke-dashoffset: 100; } }
@keyframes il2PopIn { from { transform: scale(0); } }
@keyframes il2Flag { 0%, 100% { transform: none; } 50% { transform: skewY(-8deg) scaleX(.9); } }
@keyframes il2Twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(.55) rotate(45deg); } }
@keyframes il2Talk { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes il2Nod { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes il2Blink { 0%, 90%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
@keyframes il2Dot { 0%, 100% { transform: none; } 40% { transform: translateY(-10px); } }
@keyframes il2Beat { 0%, 100% { transform: none; } 30% { transform: scale(1.5); } }

/* ==========================================================================
   Services section — side-by-side cards: art on the left, words on the right, two per row.
   Short enough to fit under the sticky header on a 14" MacBook (≈1512×860 browser window).
   ========================================================================== */
#services { padding-block: var(--s-10); background: var(--page); }  /* the hero's periwinkle border carried down */
#services .services { margin-top: var(--s-6); }
#services .service { flex-direction: row; align-items: stretch; }
#services .service h3 { font-size: var(--t-body-lg); line-height: 1.3; }
#services .service p { margin-top: 4px; line-height: 1.3; }
/* Every illustration is framed to its own content (see the viewBoxes), so filling the box leaves it centred
   with the same padding on all sides */
#services .service__art { flex: 0 0 44%; height: auto; min-height: 196px; padding: var(--s-5); border-bottom: 0; border-right: 1px solid var(--border); }
#services .service__art .il2 { width: 100%; height: 100%; max-width: none; max-height: none; }
#services .service > div:last-child { display: flex; flex-direction: column; justify-content: center; padding: var(--s-5) var(--s-6); }

@media (max-width: 760px) {
  /* Phone: compact rows — small art on the left, words on the right */
  #services { padding-block: var(--s-9); }
  #services .services { grid-template-columns: 1fr; gap: var(--s-3); }
  #services .service__art { flex-basis: 120px; min-height: 112px; padding: var(--s-3); }
  #services .service > div:last-child { padding: var(--s-3) var(--s-4); }
}


/* ==========================================================================
   About — Alex's photo full-bleed beside a tabbed carousel of cards (Background · Experience · Approach).
   The next card peeks in from the right; drag, click a card, or hover a tab to move. It also switches on its own at a calm pace.
   ========================================================================== */
#about { text-align: left; padding-block: 0; overflow: hidden; }
.ab { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: stretch; min-height: min(780px, 100svh); }
/* The photo fills its half of the section, edge to edge and top to bottom */
.ab__media { position: relative; overflow: hidden; margin-left: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); }
.ab__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 44% 30%; }
.ab__body { min-width: 0; align-self: center; padding-block: var(--s-11); }
.ab__lead { margin-top: var(--s-3); font-size: var(--t-lead); color: var(--text-muted); max-width: 26em; }
.ab__car { margin-top: var(--s-8); container-type: inline-size; }

/* Tabs — underline; one indicator glides (with a little bounce) to whichever tab is active */
.ab__tabs { position: relative; display: flex; gap: var(--s-7); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.ab__tab { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--t-body-lg); font-weight: 600; color: var(--text-muted); transition: color 250ms; }
.ab__tab[aria-selected="true"] { color: var(--text); }
.ab__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.ab__ink { position: absolute; bottom: -1px; left: 0; height: 2px; width: var(--ink-w, 0); border-radius: 2px; background: var(--brand);
  transform: translateX(var(--ink-x, 0)); transition: transform 550ms cubic-bezier(.34, 1.4, .64, 1), width 550ms cubic-bezier(.34, 1.4, .64, 1); }

/* Cards in a row running from the photo's edge off the right of the page: the active card lines up with the heading,
   the previous one peeks out from beside the photo and the next one from the right. Drag to move (vertical scrolling still works on touch). */
.ab__deck { --peek-l: var(--s-10); margin-top: var(--s-6); margin-left: calc(-1 * var(--peek-l)); margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ab__deck.is-dragging { cursor: grabbing; }
.ab__track { display: flex; gap: var(--s-4); padding-left: var(--peek-l); align-items: stretch; transform: translateX(var(--peek-x, 0)); transition: transform 650ms cubic-bezier(.34, 1.3, .64, 1); }
.ab__deck.is-dragging .ab__track { transition: none; }
.ab__panel { --pad: var(--s-6); display: flex; flex-direction: column; min-width: 0; flex: 0 0 min(520px, 100cqw); padding: var(--pad); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); opacity: .5; transition: opacity 400ms; }
.ab__panel.is-on { opacity: 1; }
.ab__panel:not(.is-on) { cursor: pointer; }
.ab__panel p { font-size: var(--t-body-lg); color: var(--text-muted); line-height: 1.55; }
.ab__panel p strong { color: var(--text); font-weight: 600; }

/* Proof sits at the foot of its card, so the cards share one height without a gap under the proof */
.ab__quote { margin-top: auto; }
/* The logos and the move illustration sit centred in the blank space between the text and the card's bottom edge */
.ab__logos, .ab__move { flex: 1; display: flex; align-items: center; margin-bottom: calc(-1 * var(--pad)); }
.ab__panel p:has(+ .ab__quote) { margin-bottom: var(--s-6); }

/* Background: the US flag, a dotted line arcing over, then the Dutch flag. Plays each time the card comes forward in view. */
.ab__move { justify-content: center; min-height: 104px; }
.ab__move svg { width: min(100%, 300px); overflow: visible; }
.ab__arc { stroke: var(--border-control); }
.ab__flag-edge { fill: none; stroke: rgba(47, 30, 13, .14); }
.ab__flag { transform-box: fill-box; transform-origin: 50% 100%; }
/* Both flags pop in the same way: the US first, then the line, then the Netherlands */
.ab__car.is-inview .ab__panel.is-on .ab__flag.us { animation: abPop 650ms cubic-bezier(.34, 1.56, .64, 1) 400ms both; }
.ab__car.is-inview .ab__panel.is-on .ab__arc { animation: abDraw 1100ms cubic-bezier(.45, 0, .25, 1) 900ms both; }
.ab__car.is-inview .ab__panel.is-on .ab__flag.nl { animation: abPop 650ms cubic-bezier(.34, 1.56, .64, 1) 1850ms both; }
@keyframes abPop { from { opacity: 0; scale: .4; } }
@keyframes abDraw { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@media (prefers-reduced-motion: reduce) { .ab__move * { animation: none !important; } }

/* The companies: a slow, endless strip that fades in and out at the card's edges */
.ab__logos { min-height: 72px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.ab__strip { flex: none; display: flex; width: max-content; animation: abStrip 22s linear infinite; }
.ab__logos .logos { margin: 0; padding-right: var(--s-7); display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-7); }
.ab__logos .logo { height: auto; flex: none; }
.ab__logos .logo img { display: block; height: var(--h); width: auto; translate: 0 var(--y, 0); }
.ab__logos .logo:hover { transform: none; background: none; }
.ab__logos img, .ab__logos svg { pointer-events: none; }
@keyframes abStrip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ab__strip { animation: none; } }

/* Lorenzo — set apart from the card's text: a small cream testimonial with his initial and a one-line byline */
.ab__quote { position: relative; margin-bottom: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: #FAF3E6; }
.ab__mark { position: absolute; top: -14px; left: -10px; font-size: 52px; font-weight: 800; line-height: 1; height: 30px; color: var(--brand); pointer-events: none; }
.ab__quote blockquote { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--text); }
.ab__quote figcaption { margin-top: var(--s-2); display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-micro); color: var(--text-muted); }
.ab__quote figcaption b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #F6D863; color: var(--text); font-size: 12px; font-weight: 600; }
.ab__quote figcaption span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab__quote figcaption strong { color: var(--text); font-weight: 600; }

@media (max-width: 760px) {
  /* Phone: the photo edge to edge on top, then the heading and carousel. Cards run edge to edge; the last one
     stops at the right margin rather than leaving a blank space after it. */
  .ab { grid-template-columns: 1fr; gap: var(--s-6); min-height: 0; }
  .ab__media { height: 400px; margin-inline: calc(-1 * var(--gutter)); }
  .ab__body { padding-block: 0 var(--s-9); }
  .ab__car { margin-top: var(--s-6); }
  .ab__tabs { gap: 20px; }
  .ab__tab { font-size: 18px; }
  .ab__deck { --peek-l: var(--gutter); margin-right: calc(-1 * var(--gutter)); }
  .ab__track { padding-right: var(--gutter); }
  .ab__panel { --pad: var(--s-5); flex-basis: 88%; }
  .ab__panel p { font-size: var(--t-body); }
  .ab__logos .logos { gap: var(--s-5); padding-right: var(--s-5); }
  .ab__logos .logo img { height: calc(var(--h) * .85); }
  /* Too narrow for the byline on one line: let the role wrap rather than cut it off */
  .ab__quote { padding: var(--s-4); }
}


/* ==========================================================================
   Polish (Oct 29)
   ========================================================================== */
/* Nav links land each section's top edge right under the sticky nav; the booking card keeps room for its step number */
html { scroll-padding-top: var(--nav-h); }
#book { scroll-margin-top: calc(var(--nav-h) + var(--s-7)); }

/* Services: as much periwinkle below the cards as above the heading */
#services { padding-bottom: var(--s-11); }

/* Example plan: a sheet of paper with a slight tilt; on hover it lifts and tips the other way, with a little bounce */
.doc { border-radius: var(--r-md); transform: rotate(-2deg); transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--d-med); }
.step3:hover .doc { transform: rotate(1deg) translateY(-3px); box-shadow: var(--shadow-2); }

/* Final CTA: cream headline; "Let's talk it through." gets the hero's hand-drawn yellow marker (in its on-cream shade, so
   it reads the same on espresso), sweeping in once the headline is in view; the words on it switch to espresso */
.final .h2 { color: var(--frame); }
.fin-hl { position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: var(--ink); }
.fin-hl > span { position: relative; }
.fin-hl__marker { position: absolute; z-index: -1; left: -.2em; top: .06em; width: calc(100% + .32em); height: 1.02em; overflow: visible; rotate: -.8deg;
  clip-path: inset(-10% 100% -10% -2%); transition: clip-path 700ms cubic-bezier(.6, 0, .3, 1) 450ms; }
.fin-hl__marker path { fill: #F2E3A4; }
.is-in .fin-hl__marker { clip-path: inset(-10% -4% -10% -2%); }
@media (prefers-reduced-motion: reduce) { .fin-hl__marker { clip-path: none; transition: none; } }
/* The button is the site's green, a shade brighter to stand clear of the espresso (3.5:1) while white text still reads (4.5:1).
   It keeps its colour on hover. */
.final .btn--inverse, .final .btn--inverse:hover, .final .btn--inverse:active { background: #43852A; color: #fff; }

/* One size for body copy in subtitles and cards (18px on larger screens, 17px on phones); only the hero subtitle
   and the About intro run larger */
#services .service p, .ab__panel p, .step3 .lede, .groups .lede { font-size: 18px; }
#services .service p { margin-top: 8px; }
.ab__panel p { line-height: 1.6; }

/* Pricing fits in one laptop screen (1512×860 window) under the nav: tighter padding and gaps around the cards */
@media (min-width: 861px) {
  /* Roomier padding, but the nav still lands just above the heading (the extra top padding tucks under the nav),
     so everything from the heading to the VAT note fits in view */
  #pricing { padding-block: var(--s-10); scroll-margin-top: calc(var(--s-7) - var(--s-10)); }
  #pricing .vat { margin-top: var(--s-5); }
  #pricing .step3 .lede { font-size: 17px; }
  /* Same height as the site's other main buttons */
  #pricing .step3 > .btn { min-height: 64px; font-size: 18px; }
  #pricing .doc { gap: 10px; padding-top: 20px; padding-bottom: var(--s-5); }
  #pricing .plans__tabs { margin-top: 28px; }
  #pricing .panels { margin-top: 44px; }
  /* The hidden "For groups" panel steps out of the layout, so the cards are only as tall as the tallest card */
  #pricing .panels { position: relative; }
  #panel-grp:not(.is-active) { position: absolute; inset: 0 0 auto; }
  #pricing .step3 { padding-top: var(--s-6); }
  #pricing .doc { margin-top: var(--s-4); }
}

/* Prices: just before the cards stack (861–990px) they are too narrow for the price and its unit on one line,
   so the unit drops to its own line on both priced cards */
@media (min-width: 861px) and (max-width: 990px) {
  .step3 .price { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Groups: a smaller "Group rates" headline */
.groups__aside .price b { font-size: 24px; }

/* Evaluation call: the button sits as far from the card's bottom as from its sides */
.step3--start { padding-bottom: var(--s-5); }

/* ---------- Phone menu ---------- */
.menu-btn { display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-md); background: none; color: var(--ink); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-btn i { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.mnav { position: fixed; inset: 0; z-index: 60; background: rgba(47, 30, 13, 0); transition: background 300ms ease; cursor: pointer; }
.mnav.is-open { background: rgba(47, 30, 13, .4); }
/* A drawer from the right, not full width: the dimmed page beside it closes it on tap */
.mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 76vw); display: flex; flex-direction: column; cursor: auto;
  padding: 14px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--bg-base); box-shadow: var(--shadow-2);
  transform: translateX(104%); transition: transform 420ms cubic-bezier(.34, 1.2, .64, 1); }
.mnav.is-open .mnav__panel { transform: none; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; }
.mnav__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink); cursor: pointer; }
.mnav__close svg { width: 24px; height: 24px; }
/* Links and the booking button sit in the middle of the screen, where a thumb reaches easily */
.mnav__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); }
.mnav__links { display: grid; }
.mnav__links a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 22px; font-weight: 500; color: var(--ink); text-decoration: none; }
.mnav .btn { width: 100%; }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav__panel { transition: none; } }

@media (max-width: 860px) {
  .nav__menu, .hx__menu { display: flex; }
  .nav__menu { margin-right: -10px; }
  .hx__menu { position: absolute; z-index: 4; top: 16px; right: 16px; }
}

@media (max-width: 860px) {
  /* The Pricing and For groups links land with "How it works" just under the nav */
  #pricing { scroll-margin-top: calc(var(--s-5) - var(--s-10)); }
  /* Stacked pricing cards stay put on hover, so they stay joined to the line between them */
  #pricing .step3:hover { transform: none; }
}

@media (max-width: 860px) {
  /* Stacked pricing: the example sheet keeps a paper-like width rather than stretching across a wide card */
  #pricing .doc { width: 100%; max-width: 380px; margin-inline: auto; }
}

@media (max-width: 760px) {
  #services .service p, .ab__panel p, .step3 .lede, .groups .lede { font-size: 16px; }
  /* Subtitles a touch smaller than the About card text, with slightly tighter line spacing */
  #services .service p { margin-top: 2px; font-size: 15px; line-height: 1.4; }
  #services .service__art { flex-basis: 108px; }
  /* Focus-area pills: smaller, so most rows hold two */
  .groups { padding-inline: var(--s-4); }
  .chips { gap: 6px; }
  .chips li { min-height: 36px; padding: 0 9px; gap: 5px; font-size: 12.5px; }
  .chips svg { width: 13px; height: 13px; }
  /* Shorter portrait card (Alex is cropped at the chest) and a tighter copy block, so both hero buttons sit above
     Safari's toolbar on a standard iPhone (393×659 visible) */
  /* The hero fills exactly the first screen (browser toolbars showing), with the same 18px grey border at the bottom as at the
     sides: the portrait card takes whatever height the copy and buttons leave, cropping Alex lower on taller phones */
  .hx { --lift: 14px; padding: calc(68px + var(--lift)) 18px 18px; min-height: 100svh; display: flex; flex-direction: column; }
  /* The card's top edge sits --lift lower (more room under the logo) while the headline, Alex and the rings stay put
     (less cream above "Command"): the composition extends upward by the same amount */
  .hx__comp { height: calc(100% + var(--lift)); }
  .hx__rings { top: calc(var(--px) * 230 - var(--lift)); }
  .hx__frame { flex: 1 1 auto; height: auto; min-height: calc(var(--px) * 330); max-height: calc(var(--px) * 519); }
  .hx__copy { flex: none; }
  /* A smaller gap between the hero and the services */
  #services { padding-top: var(--s-7); }
  /* Lorenzo's byline on one line: "Sr" instead of "Senior" */
  .ab__quote figcaption .role-full { display: none; }
  .ab__quote figcaption .role-short { display: inline; }
  .ab__quote figcaption { font-size: 13px; }
  /* Footer: the copyright line sits close to the links */
  .footer .container { flex-direction: column; justify-content: center; gap: 0; text-align: center; }
  .footer nav { justify-content: center; }
  .footer a { min-height: 32px; }
  .footer .container > span, .footer__credit { padding-block: 3px; }
  .hx__copy { padding: 14px 20px 16px; }
  .hx__actions { margin-top: 24px; }
  .hx__actions .btn { min-height: 52px; }
  /* Logo on the left, menu on the right */
  .hx__brand { top: calc(-48px - var(--lift)); right: auto; text-align: left; }
  .hx__menu { top: calc(-50px - var(--lift)); right: -10px; }
  .hx__lead { font-size: 17px; line-height: 1.3; }
  #services .service h3 { font-size: 17px; }
  #services { padding-bottom: calc(var(--s-9) + var(--s-3)); }
}


/* Lorenzo's role: "Senior" on larger screens, "Sr" on phones */
.role-short { display: none; }

/* Evaluation call: a little room between the description and the button when the card is only as tall as its content */
.step3--start .lede { margin-bottom: var(--s-4); }

/* Footer credit, on its own line under the copyright and links */
.footer__credit { margin: 0; }

/* Touch screens: no grey tap flash, and hover looks don't stay stuck after a tap */
a, button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .shuffle:hover { background: var(--surface); border-color: var(--border-control); }
  .step3:hover .doc { transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(47, 30, 13, .06), 0 8px 20px rgba(47, 30, 13, .06); }
}