/* ==========================================================================
   Vibex website — shared stylesheet
   Design tokens and rules: /design-system/MASTER.md
   Colours and typography: the original Vibex web palette (mint, blue, navy)
   with Jost headings and DM Sans body. All hover and state changes are
   instant; the only motion on the site is the homepage circles.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --blue: #263AF7;
  --blue-700: #1B2BD6;
  --blue-50: #EEF0FF;
  --mint: #00FFBB;
  --mint-300: #7DFFDB;
  --mint-100: #CCFFF0;
  --mint-50: #EEFFF9;
  --ink: #11153D;
  --ink-2: #4A4E75;
  --line: #D5D8EC;
  --grey-50: #F2F3F7;
  --white: #FFFFFF;
  /* Dark sections and footer use Vibex blue */
  --night: #263AF7;
  --night-2: #1B2BD6;            /* cards on blue sections */
  --night-text: #FFFFFF;         /* 6.9:1 on blue */
  --night-muted: #DCE1FF;        /* secondary text on blue, 5.4:1 */

  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-body: 1.0625rem;          /* 17px */
  --fs-small: .9375rem;          /* 15px */
  --fs-xs: .8125rem;             /* 13px */
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2.3vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-section: clamp(72px, 9vw, 132px);

  --container: 1200px;
  --gutter: 20px;
  --radius: 0px;
  --radius-pill: 999px;
  --offset: 12px;

  --z-header: 100;
  --z-drawer: 200;
}

@media (min-width: 768px) { :root { --gutter: 32px; --offset: 14px; } }

/* ---------- Instant states everywhere ----------
   Hover, focus, open and active states change in one frame. No transitions,
   fades or scroll reveals. The homepage circles opt back in below (.orbit--live). */
*, *::before, *::after {
  box-sizing: border-box;
  transition: none !important;
  animation: none !important;
}

/* ---------- Reset ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.section--night :focus-visible { outline-color: var(--mint); }
::selection { background: var(--mint); color: var(--ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .5em; text-wrap: balance; }
h1, .h1 {
  font-size: var(--fs-h1); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; color: var(--blue);
}
h2, .h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.06; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--blue);
}
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; color: var(--ink); }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.h2--sm { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.prose { max-width: 68ch; }
.prose > :last-child { margin-bottom: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul li { margin-bottom: .4em; }
.center { text-align: center; }
.center .lead, .center .prose { margin-inline: auto; }

.hl {
  background: linear-gradient(transparent 62%, var(--mint) 62%, var(--mint) 92%, transparent 92%);
  padding: 0 .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section--night .hl { background: none; color: var(--mint); padding: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--sp-4);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--mint); box-shadow: 0 0 0 1px var(--blue) inset; }
.section--night .eyebrow { color: var(--mint); }
.section--night .eyebrow::before { box-shadow: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--grey { background: var(--grey-50); }
.section--mint { background: var(--mint-50); }
.section--night { background: var(--night); color: var(--night-text); }
.section--night h2, .section--night h3, .section--night .h2, .section--night .h3 { color: var(--white); }
.section--night .muted, .section--night .lead { color: var(--night-muted); }
.section--night .lead { color: var(--night-text); }
.section--night a:not(.btn) { color: var(--mint); }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 780px; }
.section-head.center { margin-inline: auto; }
.section-head > :last-child { margin-bottom: 0; }

.stack > * + * { margin-top: var(--sp-5); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.split { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--top { align-items: start; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--blue); color: var(--white); padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* ---------- Buttons ---------- */
/* Pill stack from the old site: three pills stacked straight down (front mint with the
   label, then white, then mint), each a step lower. On hover the colours swap to
   white / mint / white in one frame. The two back pills are box-shadows: a colour fill
   with -1.5px spread over a ring-colour shadow, which draws a bordered pill below. */
.btn {
  --btn-bg: var(--mint); --btn-l1: var(--white); --btn-l2: var(--mint);
  --btn-fg: var(--blue); --btn-ring: var(--blue); --step: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 28px; margin-bottom: calc(var(--step) * 2);
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.1; letter-spacing: .01em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1.5px solid var(--btn-ring); border-radius: var(--radius-pill);
  box-shadow:
    0 var(--step) 0 -1.5px var(--btn-l1), 0 var(--step) 0 0 var(--btn-ring),
    0 calc(var(--step) * 2) 0 -1.5px var(--btn-l2), 0 calc(var(--step) * 2) 0 0 var(--btn-ring);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
}
.btn:hover, .btn:focus-visible { --btn-bg: var(--white); --btn-l1: var(--mint); --btn-l2: var(--white); color: var(--btn-fg); }
.btn:active { transform: translateY(calc(var(--step) * .5)); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { --btn-bg: var(--white); --btn-l1: var(--mint); --btn-l2: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible { --btn-bg: var(--mint); --btn-l1: var(--white); --btn-l2: var(--mint); }
/* Wireframe button on blue sections: three white outline pills, label in white.
   The front pill is see-through (outer shadows never paint under it); the back pills
   are filled with the surface colour so only their outlines show. Hover fills the
   front pill mint with a blue label, instantly like every other button. */
.btn--dark, .section--night .btn {
  --btn-surface: var(--night);
  --btn-bg: transparent; --btn-l1: var(--btn-surface); --btn-l2: var(--btn-surface);
  --btn-fg: var(--white); --btn-ring: var(--white);
}
.section--night .card .btn { --btn-surface: var(--night-2); }
.btn--dark:hover, .btn--dark:focus-visible,
.section--night .btn:hover, .section--night .btn:focus-visible {
  --btn-bg: var(--mint); --btn-l1: var(--btn-surface); --btn-l2: var(--btn-surface);
  --btn-fg: var(--blue); --btn-ring: var(--white);
}
.btn--sm { --step: 6px; min-height: 44px; padding: 8px 20px; font-size: .975rem; }
.drawer-foot .btn { margin-bottom: 0; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: var(--sp-6); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; text-decoration: none; color: var(--blue);
  padding-block: 10px;
}
.link-arrow::after { content: "→"; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* Home page, top of the page: the header is see-through, so the hero circles float behind the menu.
   Once the page scrolls (.is-scrolled), the white background comes back. */
body:has(.hero--orbit) .site-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo { display: inline-flex; align-items: center; flex: none; padding: 8px 0; }
.logo img { width: 104px; height: auto; }

/* Header alignment: logo, menu text and button label share one optical centre line.
   - The button's pill stack hangs 2 x --step below it, so on desktop the whole row is lifted by
     --hdr-lift; that leaves equal space above the button and below its stack.
   - The wordmark's lowercase letters sit low inside the logo image (the "b" and the "i" dot add
     height on top), so the logo gets an extra 3px lift to line its letters up with the menu text.
   Bottom margins are used for the lift: a flex item centred with margin-bottom M moves up M/2. */
.site-header { --hdr-lift: 0px; }
.header-inner > .logo { margin-bottom: calc(6px + var(--hdr-lift) * 2); }
.drawer-head > .logo { margin-bottom: 6px; }
@media (min-width: 1100px) {
  .site-header { --hdr-lift: 4px; }
  .nav { margin-bottom: calc(var(--hdr-lift) * 2); }
  .header-cta .btn { --step: var(--hdr-lift); margin-bottom: calc(var(--step) * 2); }
}

.nav { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 12px;
  font-family: var(--font-display); font-size: .98rem; font-weight: 500; color: var(--ink);
  text-decoration: none; background: none; border: 0; border-radius: 6px;
}
.nav-link:hover, .nav-toggle:hover, .nav-item:focus-within > .nav-link { color: var(--blue); }
.nav-link[aria-current="page"], .nav-item.is-active > .nav-link, .nav-item.is-active > .nav-toggle { color: var(--blue); box-shadow: inset 0 -3px 0 var(--mint); border-radius: 0; }
.nav-split { display: inline-flex; align-items: center; }
.nav-split .nav-link { padding-right: 2px; }
.nav-split .nav-toggle { padding-left: 4px; padding-right: 8px; }
.chev { width: 12px; height: 12px; }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px;
  background: var(--white); border: 1px solid var(--blue); box-shadow: 10px 10px 0 var(--mint);
  list-style: none; margin: 0; padding: 10px;
  display: none;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item.is-open > .dropdown { display: block; }
@media (hover: hover) and (min-width: 1100px) { .nav-item:hover > .dropdown { display: block; } }
.dropdown a {
  display: block; padding: 10px 12px; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 500; line-height: 1.3;
}
.dropdown a small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--mint-50); color: var(--blue); }

.header-cta { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 14px;
  background: var(--white); border: 1.5px solid var(--blue); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; color: var(--blue);
}
.menu-btn svg { width: 20px; height: 20px; }

@media (min-width: 1100px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-btn { display: none; }
}
@media (min-width: 1100px) and (max-width: 1240px) {
  .nav-link, .nav-toggle { padding-inline: 9px; font-size: .94rem; }
  .header-cta .btn { padding-inline: 18px; }
}

/* Mobile drawer: opens and closes in one frame */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--white); overflow-y: auto; overscroll-behavior: contain;
  display: none; flex-direction: column;
}
.drawer.is-open { display: flex; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 76px; padding-inline: var(--gutter); border-bottom: 1px solid var(--line); flex: none; }
.drawer-body { padding: 16px var(--gutter) 40px; flex: 1; }
.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-list > li { border-bottom: 1px solid var(--line); }
.drawer-list a, .drawer-list summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 0;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
}
.drawer-list summary::-webkit-details-marker { display: none; }
.drawer-list details[open] summary .chev { transform: rotate(180deg); }
.drawer-list .chev { width: 16px; height: 16px; }
.drawer-sub { list-style: none; margin: 0 0 12px; padding: 0 0 0 16px; border-left: 3px solid var(--mint); }
.drawer-sub a { font-size: 1.05rem; min-height: 48px; color: var(--ink-2); }
.drawer-sub a[aria-current="page"], .drawer-list a[aria-current="page"] { color: var(--blue); }
.drawer-foot { margin-top: 32px; display: grid; gap: 16px; }
body.no-scroll { overflow: hidden; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--sp-5); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--blue); font-weight: 500; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 120px); overflow: hidden; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { margin-bottom: 24px; }
.hero .lead { margin-bottom: 1em; }
.hero-art { position: relative; justify-self: center; width: min(100%, 520px); }
.hero--center { text-align: center; }
.hero--center .lead { margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }
.hero-note { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); }

/* Home hero: rings with headline inside, like the old site */
.hero-rings { position: relative; display: grid; place-items: center; min-height: clamp(400px, 50vw, 580px); }
.hero-rings .rings { position: absolute; left: 50%; top: 50%; width: clamp(540px, 62vw, 760px); max-width: none; height: auto; transform: translate(-50%, -50%); }
.hero-rings__text { position: relative; max-width: 700px; text-align: center; padding: 0 12px; }

/* ---------- Orbit: the old site's drifting hero circles ----------
   Rebuilt from the 2018 theme (.hero__ellipse4-9): six equal white discs with a
   2px 40%-blue border, stacked 5% apart with the front disc on the right. Desktop:
   each disc follows its own 10s looping path and returns to the stack. Phones:
   three discs unfold downward once over 2s. Old keyframes animated top/left in
   px and %; here they are transforms, with % of page width as cqw and px scaled
   to the disc size (old disc = 754px). The motion runs while .orbit has the
   .orbit--live class; without it the stack is static. */
.hero--orbit { container-type: inline-size; overflow: visible; clip-path: inset(-100vh 0 0 0); }
/* Desktop: the circle stack is scaled to the screen height, and the headline (three lines), intro and
   buttons sit on top of it, so the buttons are visible without scrolling. Text may overlap the circles. */
.hero--orbit { padding-block: clamp(20px, 2.5vw, 40px) clamp(40px, 5vw, 72px); }
.hero--orbit .hero-rings {
  --d: clamp(320px, min(46vw, calc(100vh - 220px)), 660px);
  --u: calc(var(--d) / 754);
  position: relative; min-height: calc(var(--d) + 40px); height: auto;
}
@supports (height: 100svh) { .hero--orbit .hero-rings { --d: clamp(320px, min(46vw, calc(100svh - 220px)), 660px); } }
.hero--orbit .hero-rings__text { z-index: 1; max-width: 1040px; padding: 20px 0 0; }
.hero--orbit h1 { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.2rem); line-height: 1.04; max-width: 16.5em; margin: 0 auto 22px; }
.hero--orbit .lead { max-width: 58ch; margin: 0 auto; text-wrap: balance; }
.hero--orbit .btn-row { margin-top: clamp(24px, 2.6vw, 36px); }
.hero--orbit .reveal { position: relative; z-index: 1; }
.orbit { position: absolute; inset: 20px 0 auto 0; height: var(--d); z-index: 0; pointer-events: none; }
.orbit__c {
  position: absolute; top: 0; left: 50%;
  width: var(--d); height: var(--d); border-radius: 50%;
  background: var(--white); border: 2px solid rgba(38, 58, 247, .4);
  transform: translate(var(--bx), 0);
  will-change: transform;
}
.orbit__c--1 { --bx: -45%; z-index: 6; }
.orbit__c--2 { --bx: -50%; z-index: 5; }
.orbit__c--3 { --bx: -55%; z-index: 4; }
.orbit__c--4 { --bx: -60%; z-index: 3; }
.orbit__c--5 { --bx: -65%; z-index: 2; }
.orbit__c--6 { --bx: -70%; z-index: 1; }
/* Phones: three centred discs stacked downward (old ≤680px behaviour) */
@media (max-width: 680px) {
  .hero--orbit .hero-rings { --d: min(340px, 90vw); display: block; min-height: 0; }
  .hero--orbit .hero-rings__text { max-width: none; padding: 20px 0 0; }
  /* headline centred inside the front circle; intro and buttons start below the stack */
  .hero--orbit .hero-rings__head { height: var(--d); display: flex; align-items: center; justify-content: center; margin-bottom: calc(41px + 28px); }
  .hero--orbit h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.05; max-width: calc(var(--d) * .88); margin: 0; }
  .orbit__c { --bx: -50%; }
  .orbit__c--4, .orbit__c--5, .orbit__c--6 { display: none; }
  .orbit__c--2 { transform: translate(-50%, 21px); }
  .orbit__c--3 { transform: translate(-50%, 41px); }
}
/* Motion (on while .orbit--live is set; respects reduced-motion settings) */
@media (min-width: 681px) and (prefers-reduced-motion: no-preference) {
  .orbit--live .orbit__c { animation-duration: 10s !important; animation-timing-function: ease !important; animation-iteration-count: infinite !important; animation-fill-mode: both !important; }
  .orbit--live .orbit__c--1 { animation-name: orbit-1 !important; }
  .orbit--live .orbit__c--2 { animation-name: orbit-2 !important; }
  .orbit--live .orbit__c--3 { animation-name: orbit-3 !important; }
  .orbit--live .orbit__c--4 { animation-name: orbit-4 !important; }
  .orbit--live .orbit__c--5 { animation-name: orbit-5 !important; }
  .orbit--live .orbit__c--6 { animation-name: orbit-6 !important; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .orbit--live .orbit__c--2 { animation: orbit-m2 2s ease both !important; }
  .orbit--live .orbit__c--3 { animation: orbit-m3 2s ease both !important; }
}
@keyframes orbit-1 { 0%, 25%, 100% { transform: translate(var(--bx), 0); } 50%, 75% { transform: translate(calc(var(--bx) - 35.4cqw), calc(var(--u) * 37)); } }
@keyframes orbit-2 { 0%, 100% { transform: translate(var(--bx), 0); } 25% { transform: translate(calc(var(--bx) - 8.2cqw), calc(var(--u) * -20)); } 50% { transform: translate(calc(var(--bx) - 15cqw), calc(var(--u) * 169)); } 75% { transform: translate(calc(var(--bx) - 19.4cqw), calc(var(--u) * 57)); } }
@keyframes orbit-3 { 0%, 100% { transform: translate(var(--bx), 0); } 25% { transform: translate(calc(var(--bx) + 2cqw), calc(var(--u) * -61)); } 50% { transform: translate(calc(var(--bx) - 5cqw), calc(var(--u) * -183)); } 75% { transform: translate(calc(var(--bx) - 5.8cqw), calc(var(--u) * -59)); } }
@keyframes orbit-4 { 0%, 100% { transform: translate(var(--bx), 0); } 25% { transform: translate(calc(var(--bx) + 7cqw), calc(var(--u) * 76)); } 50% { transform: translate(calc(var(--bx) + 34cqw), calc(var(--u) * 172)); } 75% { transform: translate(calc(var(--bx) + 3.2cqw), calc(var(--u) * 196)); } }
@keyframes orbit-5 { 0%, 100% { transform: translate(var(--bx), 0); } 25% { transform: translate(calc(var(--bx) + 14.2cqw), calc(var(--u) * -179)); } 50% { transform: translate(calc(var(--bx) + 45.2cqw), calc(var(--u) * -273)); } 75% { transform: translate(calc(var(--bx) + 44.2cqw), calc(var(--u) * -434)); } }
@keyframes orbit-6 { 0%, 100% { transform: translate(var(--bx), 0); } 25% { transform: translate(calc(var(--bx) + 22cqw), calc(var(--u) * -87)); } 50%, 75% { transform: translate(calc(var(--bx) + 26cqw), calc(var(--u) * -8)); } }
@keyframes orbit-m2 { 0% { transform: translate(-50%, 0); } 50%, 100% { transform: translate(-50%, 21px); } }
@keyframes orbit-m3 { 0% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 21px); } 100% { transform: translate(-50%, 41px); } }

/* ---------- Rings motif ---------- */
.rings { color: var(--blue); overflow: visible; }
.rings circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rings circle:last-of-type { stroke-width: 1.5; }
.rings--mint { color: var(--mint); }

/* ---------- Orb ---------- */
.orb { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 40%, var(--mint-300), var(--mint) 45%, rgba(0, 255, 187, 0) 70%); opacity: .42; filter: blur(2px); z-index: 0; }
.has-orb { position: relative; isolation: isolate; }
.has-orb > :not(.orb) { position: relative; z-index: 1; }

/* ---------- Frame (photo with offset outline) ---------- */
.frame { position: relative; isolation: isolate; margin: 0; }
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--blue); transform: translate(var(--frame-x, 18px), var(--frame-y, 18px));
}
.frame--tl::before { --frame-x: -18px; --frame-y: -18px; }
.frame--tr::before { --frame-x: 18px; --frame-y: -18px; }
.frame--bl::before { --frame-x: -18px; --frame-y: 18px; }
.frame img { width: 100%; height: 100%; object-fit: cover; background: var(--grey-50); }
.frame--portrait img { aspect-ratio: 4 / 5; }
.frame--tall img { aspect-ratio: 3 / 4; }
.frame--land img { aspect-ratio: 4 / 3; }
.frame--wide img { aspect-ratio: 16 / 9; }
.frame--round::before { border-radius: 50%; }
.frame--round img { aspect-ratio: 1; border-radius: 50%; }
.section--night .frame::before { border-color: var(--mint); }
.frame figcaption { position: absolute; top: 100%; left: 0; right: 0; margin-top: calc(var(--frame-y, 18px) + 12px); font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2); }
.frame--tl figcaption, .frame--tr figcaption { margin-top: 12px; }
.frame:has(> figcaption) { margin-bottom: 64px; }
.section--night .frame figcaption { color: var(--night-muted); }

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--white); border: 1px solid var(--blue);
  box-shadow: var(--offset) var(--offset) 0 var(--mint);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column;
}
.card--left { box-shadow: calc(var(--offset) * -1) var(--offset) 0 var(--mint); }
.card--flat { box-shadow: none; }
.card--blue-shadow { box-shadow: var(--offset) var(--offset) 0 var(--blue); }
.card h3 { margin-bottom: .55em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .card-foot { margin-top: auto; padding-top: 20px; }
.card-num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; display: block; }
.card-icon { width: 64px; height: 64px; margin-bottom: 18px; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translate(-3px, -3px); box-shadow: calc(var(--offset) + 3px) calc(var(--offset) + 3px) 0 var(--mint); color: inherit; }
a.card:hover h3 { color: var(--blue); }
a.card .link-arrow { padding-block: 0; }
.section--night .card { background: var(--night-2); border-color: var(--mint); box-shadow: var(--offset) var(--offset) 0 var(--white); color: var(--night-text); }
.section--night .card h3 { color: var(--white); }
.section--night .card p { color: var(--night-muted); }

/* Tiles: lighter grouping without the offset block */
.tile { border-top: 2px solid var(--blue); padding-top: 20px; }
.tile h3 { margin-bottom: .45em; }
.tile p:last-child { margin-bottom: 0; }
.section--night .tile { border-top-color: var(--mint); }

/* ---------- Icon list ---------- */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.icon-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; }
.icon-list img { width: 52px; height: 52px; }
.icon-list strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--blue); font-size: 1.08rem; line-height: 1.3; }
.icon-list span { display: block; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }

.check-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 32px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23263AF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 0 0 1px var(--blue);
}
.x-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.x-list li { position: relative; padding-left: 32px; color: var(--ink-2); }
.x-list li::before { content: "–"; position: absolute; left: 4px; top: 0; font-weight: 700; color: var(--blue); }

/* ---------- Steps / timeline ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps > li { position: relative; padding: 0 0 36px 76px; counter-increment: step; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; color: var(--blue);
  background: var(--mint); border: 1.5px solid var(--blue);
}
.steps > li::after { content: ""; position: absolute; left: 26px; top: 56px; bottom: 4px; width: 1px; background: var(--blue); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3, .steps h4 { margin: 10px 0 6px; }
.steps p { margin: 0; color: var(--ink-2); }
.steps .step-meta { display: inline-block; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-top: 12px; }
.section--night .steps > li::before { background: var(--night); color: var(--mint); border-color: var(--mint); }
.section--night .steps > li::after { background: var(--mint); }
.section--night .steps p { color: var(--night-muted); }
.section--night .steps .step-meta { color: var(--mint); }

@media (min-width: 1100px) {
  .steps--row { grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 32px; }
  .steps--row > li { padding: 76px 0 0; }
  .steps--row > li::after { left: 60px; right: -28px; top: 26px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- Stats ---------- */
.stats { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.stat { border-left: 2px solid var(--mint); padding-left: 20px; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: 1; letter-spacing: -.02em; color: var(--blue); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.section--night .stat-num { color: var(--mint); }
.section--night .stat-label { color: var(--night-muted); }

/* ---------- Logos / chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--blue); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-small); color: var(--blue); background: var(--white); }
.chip b { font-weight: 600; color: var(--ink); }
.section--night .chip { background: transparent; border-color: rgba(255, 255, 255, .6); color: var(--night-text); }
.section--night .chip b { color: var(--mint); }

.press-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; list-style: none; margin: 0; padding: 0; }
.press-strip li { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); color: var(--ink); letter-spacing: -.01em; opacity: .8; }
.press-strip li span { font-weight: 400; font-size: .7em; color: var(--ink-2); margin-left: 6px; }

/* Outlet logos in one tone (ink on light sections, white on dark) */
.press-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; list-style: none; margin: 0; padding: 0; }
.press-logos li { display: flex; align-items: center; }
.press-logos img { height: var(--h, 30px); width: auto; filter: brightness(0); opacity: .85; }
.section--night .press-logos img { filter: brightness(0) invert(1); }
@media (max-width: 640px) { .press-logos { gap: 20px 32px; } .press-logos img { height: calc(var(--h, 30px) * .85); } }

/* ---------- Coverage (article screenshots) ---------- */
.coverage { display: grid; gap: 28px; }
@media (min-width: 700px) { .coverage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .coverage { grid-template-columns: repeat(4, 1fr); } }
.coverage figure { margin: 0; }
.coverage .shot { border: 1px solid var(--blue); background: var(--white); box-shadow: 8px 8px 0 var(--mint); overflow: hidden; }
.coverage img { width: 100%; aspect-ratio: 600 / 525; object-fit: cover; object-position: top; }
.coverage figcaption { margin-top: 16px; font-size: var(--fs-small); line-height: 1.45; }
.coverage figcaption strong { display: block; font-family: var(--font-display); color: var(--blue); font-weight: 600; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--blue); background: var(--white); box-shadow: var(--offset) var(--offset) 0 var(--mint); }
.table-wrap:focus-visible { outline-offset: 6px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-small); }
th, td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
thead th { font-family: var(--font-display); font-weight: 600; color: var(--blue); background: var(--mint-50); border-bottom: 1px solid var(--blue); }
tbody th { font-family: var(--font-display); font-weight: 600; color: var(--ink); width: 24%; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--blue); }
.faq-item { border-bottom: 1px solid var(--blue); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); font-weight: 600; color: var(--ink); line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--blue); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23263AF7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.faq-item[open] summary::after { transform: rotate(45deg); background-color: var(--mint); }
.faq-a { padding: 0 56px 24px 0; color: var(--ink-2); max-width: 74ch; }
.faq-a > :last-child { margin-bottom: 0; }
.section--grey .faq-item summary::after, .section--mint .faq-item summary::after { background-color: transparent; }
.section--grey .faq-item[open] summary::after, .section--mint .faq-item[open] summary::after { background-color: var(--mint); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band .rings { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 560px; opacity: .9; z-index: -1; pointer-events: none; }
.cta-band__inner { max-width: 720px; }
.cta-band h2 { margin-bottom: 20px; }
@media (max-width: 899px) { .cta-band .rings { right: -260px; opacity: .35; } }

/* ---------- Callout / note ---------- */
.callout { border-left: 4px solid var(--mint); background: var(--mint-50); padding: 20px 24px; margin: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout strong { color: var(--blue); }
.not-for { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--blue); color: var(--ink-2); font-size: var(--fs-small); }
.not-for strong { color: var(--ink); }
.section--night .not-for { border-top-color: rgba(0, 255, 187, .5); color: var(--night-muted); }
.section--night .not-for strong { color: var(--white); }
.section--night .callout { background: var(--night-2); }

/* ---------- Article / post cards ---------- */
.post-card { display: flex; flex-direction: column; border: 1px solid var(--blue); background: var(--white); text-decoration: none; color: inherit; }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--blue); }
.post-card .post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h3 { margin: 0; font-size: 1.2rem; }
.post-card p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.post-meta { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
a.post-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--mint); color: inherit; }
a.post-card:hover h3 { color: var(--blue); }
.badge { align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--mint); color: var(--blue); border: 1px solid var(--blue); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; }
.form-row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.field .req { color: var(--blue); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--ink-2); border-radius: 0;
  font-size: 1rem; line-height: 1.4;
}
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23263AF7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--blue); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 4px 4px 0 var(--mint); }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: #C4123A; }
.field-error { display: none; font-size: var(--fs-small); color: #B00F33; font-weight: 500; }
.field.has-error .field-error { display: block; }
.checkbox { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: var(--fs-small); color: var(--ink-2); }
.checkbox input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); }
.form-status { font-size: var(--fs-small); padding: 14px 16px; border-left: 4px solid var(--mint); background: var(--white); display: none; }
.form-status.is-visible { display: block; }

.contact-panel { background: var(--mint-50); padding: clamp(28px, 4vw, 56px); border: 1px solid var(--blue); box-shadow: var(--offset) var(--offset) 0 var(--blue); }
.contact-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.contact-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; }
.contact-list img { width: 52px; height: 52px; }
.contact-list a, .contact-list address { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; font-style: normal; color: var(--blue); line-height: 1.35; }
.contact-list small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.li-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--mint); border: 2.5px solid var(--blue); display: grid; place-items: center; color: var(--blue); }
.li-icon svg { width: 22px; height: 22px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--night-muted); padding: clamp(56px, 7vw, 96px) 0 32px; position: relative; overflow: hidden; }
.site-footer a { color: var(--night-text); text-decoration: none; }
.site-footer a:hover { color: var(--mint); text-decoration: underline; }
.footer-top { display: grid; gap: 48px; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; } }
.footer-brand img { width: 116px; margin-bottom: 20px; }
.footer-brand p { max-width: 34ch; font-size: var(--fs-small); }
.footer-col h3 { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 16px; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-col a { display: inline-block; padding: 6px 0; font-size: var(--fs-small); }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .35); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: var(--fs-xs); }
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 8px 24px; }

/* Legal pages (privacy policy): calmer headings, comfortable spacing */
.legal h2 { text-transform: none; margin-top: 1.8em; }
.legal > h2:first-child { margin-top: 0; }
#summary-title { text-transform: none; }
.legal ul, .legal ol { margin-bottom: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal .callout { margin: 0 0 1.4em; }
.legal + .table-wrap table { min-width: 560px; }

.footer-rings { position: absolute; right: -180px; bottom: -220px; width: 560px; color: var(--white); opacity: .28; pointer-events: none; }

/* ---------- Reveal: content is always visible (no scroll-triggered reveals) ---------- */
.reveal { opacity: 1; transform: none; }

/* ---------- Dark-section variants + small helpers ---------- */
.section--night .table-wrap { color: var(--ink); box-shadow: var(--offset) var(--offset) 0 var(--mint); border-color: var(--white); }
.section--night .table-wrap a { color: var(--blue); }
.section--night .x-list li { color: var(--night-muted); }
.section--night .x-list li::before { color: var(--mint); }
.section--night .check-list li { color: var(--night-text); }
.section--night .press-strip li { color: var(--white); }
.section--night .press-strip li span { color: var(--night-muted); }
/* Blue text would disappear on blue sections: switch those labels to mint */
.section--night .card-num, .section--night .post-meta, .section--night .facts dt,
.section--night .coverage figcaption strong, .section--night .icon-list strong,
.section--night .callout strong, .section--night .breadcrumbs [aria-current] { color: var(--mint); }
.section--night .icon-list span { color: var(--night-muted); }
.link-row { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.facts dt { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); padding-top: 3px; }
.facts dd { margin: 0; }

/* ---------- Calendly inline calendar ---------- */
.calendly-frame { background: var(--white); border: 1px solid var(--blue); box-shadow: var(--offset) var(--offset) 0 var(--blue); }
.calendly-embed { min-width: 300px; height: 700px; position: relative; }
.calendly-embed iframe { display: block; }
.calendly-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 640px) { .calendly-embed { height: 1000px; } .calendly-frame { margin-inline: calc(var(--gutter) * -0.5); } }

/* ---------- CookieYes banner: brand touches ----------
   Colours, layout and text are set in the CookieYes dashboard. These rules only align fonts,
   button shape and the mint accent with the site. States stay instant (global rule above). */
.cky-consent-container .cky-title, .cky-preference-center .cky-preference-title { font-family: var(--font-display) !important; font-weight: 600 !important; }
.cky-consent-container, .cky-preference-center, .cky-consent-container p, .cky-preference-center p { font-family: var(--font-body) !important; }
.cky-btn { font-family: var(--font-display) !important; font-weight: 600 !important; border-radius: var(--radius-pill) !important; border-width: 1.5px !important; }
.cky-consent-container.cky-banner-bottom .cky-consent-bar { box-shadow: 0 -10px 0 var(--mint) !important; }
.cky-btn-revisit-wrapper { background-color: var(--blue) !important; }
.footer-cookie-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--night-text); cursor: pointer; }
.footer-cookie-btn:hover { color: var(--mint); text-decoration: underline; }

/* Calendar placeholder until Functional cookies are allowed */
.calendly-consent { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(24px, 4vw, 48px); background: var(--white); }
.calendly-consent p { margin: 0; max-width: 40ch; color: var(--ink-2); }
.calendly-consent__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink) !important; }
.calendly-consent .btn { margin-top: 6px; }

/* ---------- Blog: lists and cards ---------- */
.post-grid { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-date { margin-top: auto; padding-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.post-card--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .post-card--wide { flex-direction: row; }
  .post-card--wide img { width: 56%; flex: none; aspect-ratio: 16 / 10; border-bottom: 0; border-right: 1px solid var(--blue); }
  .post-card--wide .post-body { padding: clamp(28px, 3.5vw, 48px); justify-content: center; gap: 14px; }
  .post-card--wide h3 { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.15; }
  .post-card--wide p { font-size: var(--fs-body); }
  .post-card--wide .post-date { margin-top: 8px; }
}
.section-head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; max-width: none; }
.section-head--row h2 { margin: 0; }

/* ---------- Blog post: header ---------- */
.post-hero { padding-top: clamp(32px, 5vw, 72px); }
.post-hero__text { max-width: 900px; }
.post-hero h1 { font-size: clamp(2.2rem, 1.35rem + 3vw, 3.9rem); margin-bottom: 22px; }
.post-standfirst { max-width: 60ch; margin-bottom: 28px; }
.byline { display: flex; align-items: center; gap: 14px; }
.avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); border: 2px solid var(--blue); color: var(--blue); font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.35rem; }
.byline-text { display: grid; gap: 2px; line-height: 1.4; }
.byline-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.byline-name a { text-decoration: none; }
.byline-name a:hover { text-decoration: underline; }
.byline-meta { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: var(--fs-small); color: var(--ink-2); }
.byline-meta > * + *::before { content: "·"; margin-right: 12px; color: var(--blue); }
@media (max-width: 599px) {
  .byline { align-items: flex-start; }
  .byline-meta { flex-direction: column; }
  .byline-meta > * + *::before { display: none; }
}
.post-cover { margin: clamp(32px, 4vw, 56px) 0 0; }
.post-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--blue); box-shadow: var(--offset) var(--offset) 0 var(--mint); }
.post-cover figcaption { margin-top: calc(var(--offset) + 12px); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 699px) { .post-cover img { aspect-ratio: 4 / 3; } }

/* ---------- Blog post: layout, table of contents, share ---------- */
.post-layout { display: grid; gap: 32px; padding-block: clamp(48px, 6vw, 88px) clamp(72px, 8vw, 120px); }
.post-content { min-width: 0; max-width: 820px; }
.aside-label { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-3px) rotate(45deg); }
.toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 3px solid transparent; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--blue); }
.toc a.is-current { color: var(--blue); font-weight: 500; border-left-color: var(--mint); }
.share { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.share li { margin: 0; padding: 0; }
.share-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid var(--blue); background: var(--white); color: var(--blue); text-decoration: none; }
.share-btn:hover { background: var(--mint); color: var(--blue); }
.share-btn svg { width: 18px; height: 18px; }
.share-copied { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 10px; background: var(--ink); color: var(--white); font-size: var(--fs-xs); }
.post-aside__share { margin-top: 36px; }
@media (min-width: 1100px) {
  .post-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 72px; }
  .post-aside { position: sticky; top: 112px; align-self: start; max-height: calc(100vh - 136px); overflow-y: auto; }
  .toc summary { pointer-events: none; padding-top: 0; min-height: 0; }
  .toc summary::after { display: none; }
}
@media (max-width: 1099px) {
  .toc { border: 1px solid var(--blue); padding: 0 18px; background: var(--white); }
  .toc[open] { padding-bottom: 14px; }
  .post-aside__share { display: none; }
}

/* ---------- Blog post: article typography ---------- */
.post-content { font-size: 1.125rem; line-height: 1.75; }
.post-content > * { max-width: 70ch; }
.post-content > :is(.table-wrap, .figure-grid, figure, .post-cta, .stats, .faq, .post-end, pre, .takeaways, .callout, dl, .pullquote, .footnotes) { max-width: none; }
.post-content > :first-child { margin-top: 0; }
.post-content p, .post-content ul, .post-content ol { margin-bottom: 1.2em; }
.post-content h2 { margin: 2.2em 0 .6em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-transform: none; }
.post-content h3 { margin: 1.8em 0 .5em; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.post-content h4 { margin: 1.6em 0 .4em; font-size: 1.1rem; color: var(--blue); }
.post-content h2 + h3, .post-content h3 + h4 { margin-top: .9em; }
.post-content :is(p, li, td, dd, figcaption, cite) > a:not([class]) { text-decoration-thickness: 1.5px; }
.post-content :is(p, li, td, dd, figcaption, cite) > a:not([class]):hover { background: var(--mint-100); color: var(--blue-700); }
.post-content strong { font-weight: 600; color: var(--ink); }
.post-content mark { background: var(--mint-100); color: inherit; padding: 0 .15em; }
.post-content small { font-size: var(--fs-small); color: var(--ink-2); }
.post-content abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.post-content sup { line-height: 0; }
.post-content sup a { text-decoration: none; font-weight: 600; font-size: .8em; padding: 0 .15em; }
.post-content :is(ul, ol):not([class]) { padding-left: 1.4em; }
.post-content :is(ul, ol):not([class]) > li { margin-bottom: .45em; padding-left: .25em; }
.post-content :is(ul, ol):not([class]) :is(ul, ol) { margin: .45em 0 .2em; }
.post-content ul:not([class]) > li::marker { color: var(--blue); }
.post-content ol:not([class]) > li::marker { font-family: var(--font-display); font-weight: 600; color: var(--blue); }
.post-content .check-list, .post-content .x-list { margin-bottom: 1.4em; }

/* Quotes */
.post-content blockquote { margin: 2em 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--mint); font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.post-content blockquote p { margin-bottom: .6em; }
.post-content blockquote footer { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.post-content blockquote cite { font-style: normal; font-weight: 600; color: var(--ink); }
.pullquote { position: relative; margin: 2.6em 0; padding: 36px 0 32px; border-block: 1.5px solid var(--blue); }
.pullquote::before { content: ""; position: absolute; left: 0; top: -1.5px; width: 96px; height: 6px; background: var(--mint); }
.pullquote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--blue); }

/* Images */
.post-content figure { margin: 2.4em 0; }
.post-content figure img { width: 100%; border: 1px solid var(--blue); background: var(--grey-50); }
.post-content figcaption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.figure--shadow img { box-shadow: var(--offset) var(--offset) 0 var(--mint); }
.figure--shadow figcaption { margin-top: calc(var(--offset) + 12px); }
.figure--small { max-width: 600px !important; }
.figure-grid { display: grid; gap: 20px; }
.figure-grid img { aspect-ratio: 4 / 5; object-fit: cover; }
.figure-grid figcaption { grid-column: 1 / -1; margin-top: 0; }
@media (min-width: 640px) { .figure-grid { grid-template-columns: 1fr 1fr; } }

/* Tables */
.post-content .table-wrap { margin: 2.2em 0 calc(2.2em + var(--offset)); }
.post-content table { min-width: 560px; font-size: .975rem; line-height: 1.55; }
.post-content table caption { caption-side: bottom; text-align: left; padding: 12px 18px; font-size: var(--fs-xs); color: var(--ink-2); border-top: 1px solid var(--line); }

/* Boxes */
.box-label { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.takeaways { margin: 0 0 2.6em; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--blue); background: var(--white); box-shadow: var(--offset) var(--offset) 0 var(--mint); }
.takeaways .check-list { margin: 0; font-size: 1.05rem; }
.post-content .callout { margin: 2em 0; padding: 22px 26px; font-size: 1.05rem; }
.callout--info { background: var(--blue-50); border-left-color: var(--blue); }
.callout--warn { background: var(--grey-50); border-left-color: var(--ink); }
.callout--warn .box-label { color: var(--ink); }
.post-content .stats { margin: 2.4em 0; }
.post-content dl { margin: 2em 0; border-top: 1px solid var(--line); }
.post-content dt { padding-top: 14px; font-family: var(--font-display); font-weight: 600; color: var(--blue); }
.post-content dd { margin: 2px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.post-cta { margin: 2.6em 0; padding: clamp(28px, 4vw, 44px); display: grid; gap: 12px 32px; align-items: center; }
@media (min-width: 760px) { .post-cta { grid-template-columns: 1fr auto; } }
.post-cta .post-cta__title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 600; line-height: 1.2; color: var(--white); }
.post-cta p { margin: 0; font-size: 1rem; color: var(--night-muted); }
.post-cta .btn { margin-top: 8px; }

/* Code, keys, rule, footnotes */
.post-content code { padding: .12em .4em; border-radius: 4px; background: var(--blue-50); color: var(--blue-700); font-family: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace; font-size: .86em; }
.post-content pre { margin: 2em 0; padding: 22px 24px; overflow-x: auto; background: var(--ink); color: #E8EAFF; border-left: 4px solid var(--mint); font-size: .9rem; line-height: 1.65; }
.post-content pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.post-content kbd { padding: .1em .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--white); font-family: ui-monospace, Consolas, monospace; font-size: .82em; }
.post-content hr { width: 72px; height: 12px; margin: 3em auto; border: 0; background: radial-gradient(circle, var(--blue) 0 3px, transparent 3.5px) center / 24px 12px repeat-x; }
.post-content .faq { margin: 1.4em 0 2em; }
.footnotes { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.footnotes li { margin-bottom: .5em; }

/* End of post: topics, share, author */
.post-end { margin-top: 3.5em; padding-top: 2em; border-top: 1.5px solid var(--blue); display: grid; gap: 28px; }
.post-end .chip-row li { margin: 0; padding: 6px 14px; }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: clamp(20px, 3vw, 28px); background: var(--mint-50); border: 1px solid var(--blue); }
.author-box__name { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.author-box__name a { text-decoration: none; }
.author-box__name span { display: block; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.author-box__bio { margin: 0 !important; font-size: 1rem; color: var(--ink-2); }

/* ---------- 404 page ---------- */
.nf-hero { padding-block: clamp(64px, 9vw, 140px); }
.nf-hero h1 { margin-bottom: 20px; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-7 { margin-bottom: var(--sp-7); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-7) 0; }
.max-560 { max-width: 560px; } .max-680 { max-width: 680px; }