/* ==========================================================================
   Mārketinga Skola — design system v5 "ledger" (dark-first, Aug 2026)
   ONE canvas: #020d1c everywhere — the background never changes color.
   Cards are #00152c + a mandatory 1px hairline; depth = hairlines, never
   shadows. Three text tiers only (#fff / #c9d8e8 / #8ba3bd — the floor).
   Cyan #03c3f8 is a SIGNAL with a fixed budget: primary CTA (one per
   viewport), eyebrow index + tick, stat suffixes + at most one numeral per
   page (the price on course pages), links + active nav, focus rings, the
   featured panel's 2px top bar. Never as heading color, background wash,
   border-at-rest, or icon tinting. OWNER RULES: no gradients, ever; no
   white backgrounds; generous scale — do not shave section padding.
   ========================================================================== */

:root {
  --canvas: #020d1c;
  --card: #00152c;
  --card2: #051e35;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-hover: rgba(255, 255, 255, 0.28);
  --cyan: #03c3f8;
  --cyan-hover: #45d4fa;
  --link: #03c3f8;        /* interactive text — flips on .paper */
  --tick: #03c3f8;        /* checkmarks / small accent glyphs */
  --heading: #ffffff;
  --body: #c9d8e8;
  --muted: #8ba3bd;
  --well: #051e35;         /* inset fill: inputs, hover wells */
  --warn: #ff9b9b;         /* validation only - never decorative */
  /* --- type scale (tools/apply-type-scale.mjs) --- */
  --t-micro: 0.75rem;   /* 12-12px · uppercase tracked micro-labels ONLY */
  --t-sm: 0.875rem;   /* 14-14px · fine print, meta, nav, badges, compact UI */
  --t-base: 1rem;   /* 16-16px · component body text, inputs, buttons */
  --t-body: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);   /* 16-18px · page and article reading text */
  --t-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.375rem);   /* 18-22px · leads, hero subs, blockquotes */
  --t-d1: clamp(1.25rem, 1.1rem + 0.62vw, 1.75rem);   /* 20-28px · h3, card and module titles */
  --t-d2: clamp(1.5rem, 1.27rem + 0.95vw, 2.25rem);   /* 24-36px · article, course and prose h2 */
  --t-d3: clamp(1.875rem, 1.5rem + 1.55vw, 3rem);   /* 30-48px · section h2, cta band, stat numerals */
  --t-d4: clamp(2.25rem, 1.72rem + 2.15vw, 3.75rem);   /* 36-60px · inner page hero h1 */
  --t-d5: clamp(2.75rem, 1.97rem + 3.2vw, 5rem);   /* 44-80px · home hero h1 */
  /* --- end type scale --- */
  --radius: 0;          /* SQUARE. The system is a ledger: hairline grids,
                             indexed eyebrows, corner ticks. Rounded corners
                             fought that, and seven different radii were in use. */
  --radius-btn: 0;
  --container: 1200px;
  --pad-x: clamp(20px, 4vw, 48px);
  --sec-pad: clamp(6rem, 10vw, 10rem);
  --card-pad: clamp(28px, 2vw + 16px, 40px);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: rgba(3, 195, 248, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-d5); line-height: 1.03; letter-spacing: -0.03em; }
h2 { font-size: var(--t-d3); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--t-d1); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: var(--t-d1); line-height: 1.3; }
h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.2em 0 1em;
}
p { margin: 0 0 1.15em; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--body); max-width: 56ch; }
.accent-text, .grad-text { color: var(--cyan); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.container--narrow { max-width: 820px; }
.center { text-align: center; }
.col:empty { display: none; }

/* ---------- topbar ---------- */
.topbar { background: var(--canvas); font-size: var(--t-sm); border-bottom: 1px solid var(--line); position: relative; z-index: 60; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 16px; }
.topbar a { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.topbar a { transition: color .16s ease; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar-contacts a { position: relative; }
/* the contact strip earns its own hairline on hover rather than an underline */
.topbar-contacts a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.topbar-contacts a:hover::after { transform: scaleX(1); }
.topbar-contacts { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-social { display: flex; gap: 15px; align-items: center; }

/* ---------- header ---------- */
.header {
  background: rgba(2, 13, 28, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; width: 148px; height: auto; transition: opacity .18s ease; }
.brand:hover img { opacity: .82; }
@media (max-width: 1020px) { .brand img { width: 132px; } }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.nav > ul > li { position: relative; }
.nav a {
  display: block;
  padding: 10px 12px;
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* Hover and active share ONE mark: a 2px cyan rule that wipes in from the left.
   It replaces the old inset box-shadow, which appeared instantly and read as a
   different device from everything else on the page. transform only, so it
   stays on the compositor. */
.nav > ul > li > a { position: relative; }
.nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nav > ul > li > a:hover::before,
.nav > ul > li:focus-within > a::before { transform: scaleX(1); }
.nav > ul > li > a:hover { color: #fff; text-decoration: none; }
.nav > ul > li.active > a { color: #fff; }
.nav > ul > li.active > a::before { transform: scaleX(1); }
.nav li.has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  opacity: 0.5;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.18s ease;
}
.nav li.has-children:hover > a::after,
.nav li.has-children:focus-within > a::after,
.nav li.has-children.open > a::after {
  transform: rotate(-135deg) translateY(-3px) translateX(-3px);
  opacity: 0.9;
}
/* Scoped to .nav for the same reason as the mobile rule below: the dropdown
   is a <ul>, and .nav ul (0,1,1) outranks .dropdown (0,1,0). */
.nav .dropdown {
  position: absolute;
  top: calc(100% + 10px); left: 0;
  min-width: 268px;
  background: var(--card2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  /* display: none cannot animate. visibility keeps the links out of the tab
     order while hidden, which opacity alone would not. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.2s;
}
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav li.has-children:hover > .dropdown,
.nav li.has-children:focus-within > .dropdown,
.nav li.has-children.open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* each row settles a beat after the panel, left to right */
.dropdown li { opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); }
.nav li.has-children:hover > .dropdown li,
.nav li.has-children:focus-within > .dropdown li,
.nav li.has-children.open > .dropdown li { opacity: 1; transform: translateX(0); }
.dropdown li:nth-child(2) { transition-delay: 0.03s; }
.dropdown li:nth-child(3) { transition-delay: 0.06s; }
.dropdown li:nth-child(4) { transition-delay: 0.09s; }
.dropdown li:nth-child(5) { transition-delay: 0.12s; }
.dropdown li { width: 100%; }
.dropdown a { padding: 10px 14px; font-weight: 400; white-space: normal; border-radius: 0; color: var(--body); }
.dropdown a { position: relative; transition: color 0.16s ease, background 0.16s ease; }
.dropdown a::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--cyan);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dropdown a:hover::before { transform: scaleY(1); }
.dropdown a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }

.nav-cta > a {
  background: var(--cyan);
  color: var(--canvas) !important;
  border-radius: var(--radius-btn);
  padding: 11px 22px;
  margin-left: 12px;
  font-family: var(--font-display);
  font-weight: 600;
}
.nav-cta > a:hover { background: var(--cyan-hover); color: var(--canvas); box-shadow: none; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 6px 0; }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); max-height: calc(100vh - 120px); overflow: auto; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 10px; }
  .nav a { padding: 13px 16px; white-space: normal; font-size: var(--t-sm); }
  .nav > ul > li.active > a { box-shadow: inset 2px 0 0 var(--cyan); }
  /* Scoped to .nav on purpose. The dropdown IS a <ul>, so `.nav ul` (0,1,1)
     outranks a bare `.dropdown` (0,1,0) and its `display: flex` would win —
     which is exactly why this rule used to carry !important. `.nav .dropdown`
     reaches (0,2,0) and wins on specificity instead of force. */
  .nav .dropdown {
    position: static; border: 0;
    border-left: 1px solid var(--line-strong);
    border-radius: 0; margin: 0 0 4px 16px; background: transparent; padding: 0;
    /* in normal flow the panel must not hold space while closed */
    display: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav li.has-children.open > .dropdown { display: flex; }
  .dropdown li { opacity: 1; transform: none; transition: none; }
  .nav > ul > li > a::before { display: none; }
  .nav > ul > li.active > a { box-shadow: inset 2px 0 0 var(--cyan); }
  .nav-cta > a { margin: 10px 16px; text-align: center; }
}

/* ---------- sections: one canvas, hairline rhythm ---------- */
.sec { padding: var(--sec-pad) 0; border-top: 1px solid var(--line); }
main > .sec:first-child, main > section:first-child { border-top: 0; }
/* legacy section variants all sit on the same canvas — no stripes */
.sec--dark, .sec--soft { background: transparent; color: var(--body); }
.sec--hairline { border-top: 1px solid var(--line); }

/* indexed dossier eyebrow */
.eyebrow, .sec--hero h2:first-child {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--cyan); flex-shrink: 0; }
.eyebrow .idx { color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.center .eyebrow::after { content: ""; width: 20px; height: 2px; background: var(--cyan); flex-shrink: 0; }

/* split section header */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 24px 80px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.sec-head h2 { margin-bottom: 0; max-width: 20ch; }
.sec-head .eyebrow { display: flex; width: 100%; }
.sec-head .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 6px; }
.sec-head .lead { margin: 0 0 8px; font-size: var(--t-lead); color: var(--muted); }
.sec-head .lead a { font-weight: 500; }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
}

/* hero — the page is the hero */
.sec--hero {
  border-top: 0;
  padding: clamp(96px, 12vw, 168px) 0 0;
}
.sec--hero[style*="--bg"] { background-image: var(--bg); background-size: cover; background-position: center; position: relative; }
.sec--hero[style*="--bg"]::before { content: ""; position: absolute; inset: 0; background: rgba(2, 13, 28, 0.92); }
.sec--hero > .container { position: relative; z-index: 1; }
.sec--hero h1 { margin-bottom: 0.45em; }
.sec--hero .sub { font-size: var(--t-lead); line-height: 1.55; color: var(--body); max-width: 56ch; margin: 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

/* the evidence panel — the featured card */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius);
  padding: var(--card-pad);
  position: relative;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 0 solid var(--cyan);
}
.panel::before { top: -2px; left: -1px; border-left-width: 2px; border-top-width: 2px; }
.panel::after { bottom: -1px; right: -1px; border-right-width: 2px; border-bottom-width: 2px; }
/* plain variant — same card, no cyan featuring (max one featured panel per page) */
.panel--plain { border-top: 1px solid var(--line); }
.panel--plain::before, .panel--plain::after { display: none; }

/* ledger stats */
.stats { display: flex; flex-direction: column; margin: 0; max-width: none; gap: 0; padding: 0; border: 0; }
.stat { border-top: 1px solid var(--line); border-left: 0; padding: 20px 0 22px; }
.stat:first-child { border-top: 0; padding-top: 0; }
.stat .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-d3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.stat .num .sfx { color: var(--cyan); }
.stat .label { display: block; margin-top: 8px; font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* horizontal ledger row variant */
.stats--row { flex-direction: row; gap: clamp(28px, 5vw, 64px); }
.stats--row .stat { border-top: 1px solid var(--line-strong); flex: 1; padding: 18px 0 0; }
.stats--row .stat:first-child { border-top: 1px solid var(--line-strong); padding-top: 18px; }
@media (max-width: 640px) { .stats--row { flex-direction: column; gap: 0; } .stats--row .stat { padding: 16px 0; } }

/* client logo strip */
.logo-strip { border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 88px); padding: 36px 0 40px; }
.logo-strip .caption { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; }
/* Logo strip — ONE moving row. Sources are pre-normalised by
   tools/normalize-logos.mjs to a single tone and one optical weight, so no CSS
   filters and no opacity fading are needed. The track holds the set twice and
   translates by exactly -50%, so the loop is seamless. */
.marquee {
  overflow: hidden;
  position: relative;
  /* no borders here — .logo-strip already draws the single hairline, and two
     bordered boxes read as "a strip inside a strip" */
  border: 0;
  padding: 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 88px);
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee-track img {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
  flex: none;
  opacity: 1;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (max-width: 640px) { .marquee-track img { height: 52px; } .marquee-track { animation-duration: 34s; } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 32px; }
  /* Header motion degrades to instant state changes: the underline, the caret,
     the dropdown and its rows all still WORK, they just stop moving. */
  .nav > ul > li > a::before,
  .dropdown, .dropdown li, .dropdown a::before,
  .nav li.has-children > a::after,
  .topbar-contacts a::after,
  .brand img { transition: none !important; }
}

/* legacy marquee (unused on new pages, kept for compatibility) */
.marquee { overflow: hidden; }
.marquee-track { display: flex; align-items: center; gap: clamp(44px, 6vw, 80px); width: max-content; animation: marquee 36s linear infinite; padding: 6px 0; }
.marquee-track img, .logo-row img { max-height: 44px; width: auto; display: block; margin: 0 auto; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.marquee-label { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }

/* rows / columns (legacy generated grid) */
.row { display: grid; gap: clamp(24px, 3vw, 44px); align-items: center; margin: 0 0 clamp(28px, 3.5vw, 48px); }
.row:last-child { margin-bottom: 0; }
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }
.row.top { align-items: stretch; }
@media (max-width: 980px) {
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .cols-5, .cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-5, .cols-6 { grid-template-columns: 1fr 1fr; }
}

.divider { width: 44px; height: 2px; background: var(--cyan); border: 0; margin: 18px 0 26px; }
.center .divider, .col.center .divider { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--cyan);
  color: var(--canvas) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--cyan-hover); }
.btn:active { background: #02b1e4; }
.btn--ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff !important;
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.05) !important; }
.btn--sm { padding: 10px 20px; font-size: var(--t-sm); }
.btn-wrap { margin: clamp(32px, 4vw, 44px) 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.center .btn-wrap, .btn-wrap.center { justify-content: center; }
.btn svg { flex-shrink: 0; }

.arrow-link { font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); color: #fff; white-space: nowrap; }
.arrow-link::after { content: " →"; display: inline-block; transition: transform 0.15s ease; }
.arrow-link:hover { text-decoration: none; color: #fff; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- collapsed hairline grid ---------- */
.hgrid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hgrid--3 { grid-template-columns: repeat(3, 1fr); }
.hgrid--2 { grid-template-columns: repeat(2, 1fr); }
.hgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .hgrid--3, .hgrid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .hgrid--2, .hgrid--3, .hgrid--4 { grid-template-columns: 1fr; } }
.cell {
  background: var(--canvas);
  padding: var(--card-pad);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease;
}
.cell:hover { background: var(--card2); }
.cell .cell-idx {
  position: absolute;
  top: var(--card-pad); right: var(--card-pad);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-micro);
  color: var(--muted);
}
.cell h3 { margin: 0 0 12px; padding-right: 40px; }
.cell p { flex: 1; margin-bottom: 0; font-size: var(--t-base); }
.cell .arrow-link, .cell blockquote a { margin-top: 20px; display: inline-block; }
.cell blockquote { border: 0; margin: 0; padding: 0; }
.cell blockquote p { margin: 0; }

/* ---------- cards (legacy .blurb + general) ---------- */
.blurb {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}
.blurb:hover { border-color: var(--line-hover); }
.blurb h3 { margin-bottom: 0.5em; }
.blurb p { flex: 1; margin-bottom: 0; font-size: var(--t-base); }
.blurb img { width: 56px; margin-bottom: 16px; }
.blurb blockquote { border: 0; margin: 18px 0 0; padding: 0; font-style: normal; flex: 0; }
.blurb blockquote p { margin: 0; }
.blurb blockquote a { font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); color: #fff; }
.blurb blockquote a::after { content: " →"; display: inline-block; transition: transform 0.15s ease; }
.blurb blockquote a:hover { text-decoration: none; }
.blurb blockquote a:hover::after { transform: translateX(4px); }

.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 0;
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--body);
  margin-bottom: 20px;
}

.testimonial {
  margin: 0;
  background: transparent;
  color: var(--body);
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 6px 0 6px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial::before { content: "“"; font-family: var(--font-display); font-size: var(--t-d3); line-height: 0.5; color: var(--muted); display: block; margin-top: 12px; }
.testimonial .t-body { flex: 1; font-size: var(--t-base); line-height: 1.7; }
.testimonial .t-body em { font-style: normal; }
.testimonial footer { display: flex; flex-direction: column; }
.testimonial footer strong { color: var(--heading); font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); }
.testimonial footer span { color: var(--muted); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
@media (max-width: 640px) {
  .testimonial { border-left: 0; border-top: 1px solid var(--line-strong); padding: 22px 0 0; }
}

/* FAQ — collapsed hairline ledger list, not floating boxes */
.faq {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  background: transparent;
  color: var(--body);
  overflow: hidden;
  transition: background 0.15s ease;
}
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq[open] { background: var(--card); }
.faq summary {
  cursor: pointer;
  padding: 18px 54px 18px 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-base);
  color: var(--heading);
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq > div { padding: 0 22px 20px; }

/* boxed CTA panel (generated pages) — the featured panel device */
.cta {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius);
  color: var(--body);
  padding: clamp(40px, 5vw, 64px) clamp(26px, 5vw, 64px);
  text-align: center;
}
.cta h2, .cta h3 { color: var(--heading); }
.cta h3 { font-size: var(--t-d2); }
.cta p { max-width: 560px; margin-left: auto; margin-right: auto; }
.cta .btn-wrap { justify-content: center; margin-top: 30px; }

/* full-width closing band — the ONE raised band per page */
.cta-band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(72px, 9vw, 120px) 0; }
.cta-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px 72px; align-items: center; }
.cta-band h2 { font-size: var(--t-d3); margin-bottom: 0.35em; max-width: 17ch; }
.cta-band p { margin: 0; max-width: 46ch; color: var(--body); }
.cta-band .btn-wrap { margin: 0; }
@media (max-width: 900px) {
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band .btn-wrap { margin-top: 12px; }
}

/* process steps — ledger style */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px); }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: none; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: 22px 0 0; }
.step .step-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-d3);
  line-height: 1;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 18px;
}
.step .step-num::after { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--cyan); margin-left: 8px; }
.step h3 { font-size: var(--t-d1); }
.step p { margin: 0; font-size: var(--t-base); }

.counter { padding: 8px 0; }
.counter .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-d3);
  letter-spacing: -0.02em;
  color: var(--heading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Video frames carry the aspect ratio of the ACTUAL file. Everything used to
   be hard-coded to 56.25% padding-top, i.e. 16:9 - but all eight case-study
   clips are 9:16 social verticals (480x854 / 1080x1920), so they were being
   letterboxed into squat black slabs a fraction of their height. */
.video-embed { position: relative; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); }
.video-embed > iframe, .video-embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: #000; }
.video-embed--vertical { --ar: 9 / 16; }

/* A row of verticals: they are tall, so they get their own grid rather than
   .cols-4, and a max width so four Reels do not tower over the section. */
.video-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); align-items: start; max-width: 860px; }
@media (max-width: 860px) { .video-row { grid-template-columns: repeat(2, 1fr); max-width: 460px; } }

/* Case study block: heading, optional intro, videos and the outcome line all
   share one left edge, and the outcome is marked as a result rather than
   floating free as another paragraph. */
.case { margin-top: clamp(44px, 5vw, 68px); }
.case > h3 { margin: 0 0 12px; }
.case > p { max-width: 68ch; margin: 0 0 22px; }
.case .video-row { margin-bottom: 22px; }
.case-result { max-width: 68ch; margin: 0; padding-left: 18px; border-left: 2px solid var(--cyan); color: var(--body); }
.paper .case-result { border-left-color: var(--link); }

/* readable measure for long single-column text runs */
.col > p { max-width: 75ch; }

.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 3vw, 44px); }
.team-grid .team-card { width: min(100%, 300px); }

.team-card { text-align: left; }
.team-card img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.team-card h3 { margin-bottom: 2px; font-size: var(--t-d1); }
.team-card p { color: var(--muted); font-size: var(--t-micro); margin: 0; letter-spacing: 0.06em; text-transform: uppercase; }

.contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
}
.contact-card ul { list-style: none; margin: 0 0 8px; padding: 0; }
.contact-card li { padding: 13px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: start; }
.contact-card li:last-child { border-bottom: 0; }
.contact-card li svg { flex-shrink: 0; color: var(--muted); margin-top: 5px; }
.contact-card .small { font-size: var(--t-sm); color: var(--muted); }
.contact-card a { color: var(--link); }

.img { margin: 0; }
.img img { border-radius: var(--radius); display: block; border: 1px solid var(--line); }
.img--plain img { border-radius: 0; border: 0; }
/* uniform circular B&W crops for people galleries with mixed source assets */
.img--actor img {
  width: min(100%, 190px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
  margin: 0 0 18px;
  filter: grayscale(1);
  background: var(--card);
  border: 1px solid var(--line);
}

/* ---------- course pages ---------- */
.page-hero { padding: clamp(56px, 6.5vw, 92px) 0 clamp(44px, 4.5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: var(--t-d4); max-width: 18ch; }
.page-hero .sub { color: var(--body); max-width: 56ch; margin: 10px 0 0; font-size: var(--t-lead); line-height: 1.6; }
.page-hero .chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.page-hero .chip::before { content: ""; width: 20px; height: 2px; background: var(--cyan); flex-shrink: 0; }
.page-hero .chip a { color: var(--cyan); }
.page-hero .btn-wrap { margin-top: 32px; }
.page-hero .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.page-hero .chips span {
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 8px 14px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--body);
}
.page-hero--pull { padding-bottom: clamp(130px, 15vw, 190px); }

/* Collapse the join: a hero already provides the top air, so the first
   section after it must not add a full --sec-pad on top of it. */
.page-hero + .sec,
.sec--hero + .sec { padding-top: clamp(44px, 5vw, 72px); }
.page-hero + .paper .article-shell { padding-top: clamp(40px, 4.5vw, 64px); }
.page-hero .btn-wrap { margin-top: 26px; }
.page-hero .chips { margin-top: 22px; }

.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 1020px) {
  .course-layout { grid-template-columns: 1fr; }
  .course-aside { order: -1; }
}
.course-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1020px) { .course-aside { position: static; } }

.course-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius);
  padding: var(--card-pad);
}
.course-card .price-label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.course-card .price { font-family: var(--font-display); font-weight: 600; font-size: var(--t-d3); letter-spacing: -0.02em; color: var(--heading); line-height: 1; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.course-card .price .sfx { color: var(--cyan); }
.course-card .price small { font-size: var(--t-base); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.course-card .btn { width: 100%; margin-top: 20px; }
.course-card .fine { font-size: var(--t-sm); color: var(--muted); text-align: center; margin: 12px 0 0; }

.course-facts { list-style: none; margin: 20px 0 0; padding: 0; }
.course-facts li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--t-base); }
.course-facts li span:first-child { color: var(--muted); flex-shrink: 0; }
.course-facts li span:last-child { text-align: right; color: var(--heading); font-weight: 500; font-variant-numeric: tabular-nums; }

.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); color: var(--body); border-radius: 0; padding: 8px 12px; font-size: var(--t-sm); font-weight: 500; }
.badge--muted { color: var(--muted); }
.course-card .badge { margin-top: 14px; }

.instructor-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.instructor-card .who { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.instructor-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); }
.instructor-card .who strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); color: var(--heading); }
.instructor-card .who span { font-size: var(--t-micro); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.instructor-card p { font-size: var(--t-base); margin: 0 0 12px; }
.instructor-card .arrow-link { font-size: var(--t-sm); }

.tick-list { list-style: none; padding: 0; margin: 0 0 1.2em; }
.tick-list li { position: relative; padding-left: 30px; margin-bottom: 0.65em; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--tick); font-weight: 700; }

.course-body h2 { font-size: var(--t-d2); margin-top: 2.2em; scroll-margin-top: 110px; }
.course-body > p:first-child, .course-body > .lead:first-child { margin-top: 0; }

.course-tile {
  background: var(--canvas);
  padding: var(--card-pad);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: background 0.15s ease;
}
.course-tile:hover { background: var(--card2); }
.course-tag { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.course-tile h3 { font-size: var(--t-d1); margin-bottom: 16px; }
.course-tile h3 a { color: var(--heading); }
.course-tile h3 a:hover { color: var(--link); text-decoration: none; }
.course-tile .tick-list { flex: 1; margin-bottom: 20px; }
.course-tile .tick-list li { font-size: var(--t-base); margin-bottom: 0.55em; }

/* ---------- blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.8vw, 36px); }
@media (max-width: 980px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}
.post-card:hover { border-color: var(--line-hover); }
.post-card > a:first-child { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--card2); border-bottom: 1px solid var(--line); }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; display: block; }
.post-card-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card .post-title { margin: 0; font-size: var(--t-d1); line-height: 1.25; letter-spacing: -0.01em; }
.post-card .post-title a { color: var(--heading); }
.post-card .post-title a:hover { color: var(--link); text-decoration: none; }
.post-card .date { color: var(--muted); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.post-card p { margin: 0; font-size: var(--t-base); color: var(--muted); flex: 1; }
.post-card .more { font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); color: #fff; }
.post-card .more::after { content: " →"; display: inline-block; transition: transform 0.15s ease; }
.post-card:hover .more::after { transform: translateX(4px); }

.post-grid--featured .post-card:first-child { grid-column: span 2; }
.post-grid--featured .post-card:first-child .post-title { font-size: var(--t-d1); }
@media (max-width: 640px) { .post-grid--featured .post-card:first-child { grid-column: auto; } }

.post-meta { color: var(--muted); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 14px; }
.post-meta a { color: var(--cyan); }
.post-featured { border-radius: var(--radius); margin: 0 0 44px; width: 100%; border: 1px solid var(--line-strong); }
.article-pull { margin-top: clamp(-120px, -10vw, -80px); position: relative; }

.prose { font-size: var(--t-body); line-height: 1.8; color: var(--body); }
.prose h2, .prose h3 { margin-top: 2em; scroll-margin-top: 110px; }
.prose h2 { font-size: var(--t-d2); }
.prose img { border-radius: var(--radius); margin: 16px 0; border: 1px solid var(--line); }
.prose li { margin-bottom: 0.45em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote { border-left: 2px solid var(--line-strong); margin: 1.5em 0; padding: 0.4em 0 0.4em 1.3em; color: var(--muted); }
.prose iframe { max-width: 100%; width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--radius); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--heading); }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); }
.chip-link {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 9px 16px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chip-link:hover, .chip-link.active { border-color: rgba(255, 255, 255, 0.6); color: #fff; text-decoration: none; }

/* ---------- footer ---------- */
.footer { background: var(--canvas); color: var(--muted); padding: clamp(64px, 8vw, 96px) 0 0; font-size: var(--t-sm); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(32px, 4vw, 64px); padding-bottom: clamp(44px, 5vw, 64px); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-h { color: var(--muted); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 20px; font-family: var(--font-display); font-weight: 500; }
.footer-brand .wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--t-d1); color: #fff; display: inline-block; margin-bottom: 12px; letter-spacing: -0.02em; }
.footer-brand p { max-width: 30ch; color: var(--muted); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 12px; }
.footer a { color: var(--body); }
.footer a:hover { color: #fff; text-decoration: none; }
.footer-social { display: flex; gap: 16px; margin-top: 20px; }
.footer-social a { color: var(--muted); }
.footer-social a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: #020d1c; padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   PAPER — the light reading surface (owner request: white background for the
   blog posts, and for other content where it helps readability).
   Token-driven, so every component that works on the dark canvas works here
   unchanged. Cyan is DECORATIVE ONLY on paper; interactive text uses
   --link #01608c (5.9:1 on white). Never put cyan text on white.
   ========================================================================== */
.paper {
  --canvas: #ffffff;
  --card: #f4f8fc;
  --card2: #e9f1f8;
  --line: rgba(11, 27, 43, 0.13);
  --line-strong: rgba(11, 27, 43, 0.24);
  --well: #eef4f9;         /* inset fill flips too, or inputs stay navy */
  --warn: #a3232f;         /* the dark-canvas red is unreadable on paper */
  --line-hover: rgba(11, 27, 43, 0.42);
  --heading: #0b1b2b;
  --body: #33475b;
  --muted: #5a6f84;
  --link: #01608c;
  --tick: #01608c;
  background: var(--canvas);
  color: var(--body);
}
.paper--tint { --canvas: #f6f9fc; background: var(--canvas); }
.paper .accent-text { color: var(--link); }
.paper ::selection { background: rgba(3, 195, 248, 0.28); color: #0b1b2b; }
.paper :focus-visible { outline-color: var(--link); }
/* buttons on paper: navy fill reads calmer than a cyan slab on white */
.paper .btn { background: #0b1b2b; color: #ffffff !important; }
.paper .btn:hover { background: #16324b; }
.paper .btn--ghost { border-color: rgba(11, 27, 43, 0.3); color: #0b1b2b !important; }
.paper .btn--ghost:hover { border-color: #0b1b2b; background: rgba(11, 27, 43, 0.05) !important; }
.paper .eyebrow, .paper .page-hero .chip { color: var(--muted); }
.paper .eyebrow .idx { color: var(--link); }
.paper .faq[open] { background: var(--card); }
.paper .cta, .paper .panel, .paper .course-card,
.paper .instructor-card, .paper .contact-card { background: var(--card); }
.paper .media figcaption { background: rgba(11, 27, 43, 0.9); color: #e9f1f8; }

/* ==========================================================================
   MEDIA — framed imagery slots. The artwork is flat brand illustration on the
   same navy, so it sits inside a hairline frame instead of floating.
   ========================================================================== */
.media { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 3 / 2; }
.media--square { aspect-ratio: 1; }
.media--portrait { aspect-ratio: 3 / 4; }
/* The founder frame carries deliberate headroom above the subject, which made
   the homepage process section unnecessarily tall. The photograph occupies the
   bottom square of that frame, so a 1:1 crop anchored to the bottom removes the
   drawn headroom exactly and takes nothing off the subject. */
.media--crop-top { aspect-ratio: 1 / 1; }
.media--crop-top img { object-position: center bottom; }
.media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 13px 18px;
  background: rgba(2, 13, 28, 0.82);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: #c9d8e8;
}

/* clip-wipe reveal for imagery (flat — no fade through a color) */
@media (prefers-reduced-motion: no-preference) {
  .media.reveal { opacity: 1; transform: none; }
  .media.reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
  .media.reveal.in img { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   ARTICLE — long-form reading on paper
   ========================================================================== */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--cyan); z-index: 80; pointer-events: none;
}
.article-shell { padding: clamp(52px, 6vw, 84px) 0 clamp(64px, 8vw, 104px); }
/* The single definition of the article grid lives further down, next to the
   reading-column comment — keeping a second one here silently overrode it. */
.article-grid { display: grid; align-items: start; }

.article-body .prose { font-size: var(--t-body); line-height: 1.78; }
/* No enlarged first paragraph: it read as a different size mid-article and
   introduced a fourth text colour on top of the three the system allows. */
.article-body .prose h2 {
  font-size: var(--t-d2);
  margin: 2.4em 0 0.7em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  color: var(--heading);
}
.article-body .prose h3 { font-size: var(--t-d1); margin: 2em 0 0.6em; color: var(--heading); }
.article-body .prose img { border: 1px solid var(--line); border-radius: var(--radius); margin: 2em 0; }
.article-body .prose ul, .article-body .prose ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.article-body .prose li { margin-bottom: 0.55em; }
.article-body .prose li::marker { color: var(--muted); }
.article-body .prose blockquote {
  border-left: 3px solid var(--cyan);
  margin: 2em 0; padding: 0.2em 0 0.2em 1.5em;
  font-size: var(--t-lead); line-height: 1.6; color: var(--heading); font-style: normal;
}
.article-body .prose strong { color: var(--heading); font-weight: 600; }
.article-body .prose a { color: var(--link); text-decoration-thickness: 1px; }
.article-body .prose iframe { border-radius: var(--radius); margin: 2em 0; }
.article-body .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }

/* in-article table of contents */
.toc { position: sticky; top: 104px; font-size: var(--t-sm); }
@media (max-width: 1020px) {
  .toc { position: static; margin-bottom: 40px; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--card); }
}
.toc-h { font-family: var(--font-body); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-left: 1px solid var(--line); }
.toc li.is-active { border-left-color: var(--cyan); }
.toc a { display: block; padding: 8px 0 8px 16px; color: var(--muted); line-height: 1.4; }
.toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--line-strong); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--heading); text-decoration: none; }
.toc li.is-active > a { color: var(--heading); font-weight: 500; }

/* article meta row under the title (on the dark hero) */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 20px 0 0; font-size: var(--t-sm); color: var(--muted); letter-spacing: 0.04em; }
.article-meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.6; }

/* author strip closing the article */
.author-strip { display: flex; gap: 18px; align-items: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.author-strip img { width: 56px; height: 56px; border-radius: 0; object-fit: cover; border: 1px solid var(--line); }
.author-strip strong { display: block; color: var(--heading); font-family: var(--font-display); }
.author-strip span { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   DYNAMICS — counters, scroll cues, back-to-top (all reduced-motion safe)
   ========================================================================== */
.stat .num[data-count] { font-variant-numeric: tabular-nums; }
.to-top {
  position: fixed; right: 22px; bottom: 82px; z-index: 70;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #00152c; color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--cyan); }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 72px; } }

/* .steps nested inside a half-width column (homepage process + image) —
   viewport breakpoints cannot see the narrower container, so scope it. */
.row .steps { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .row .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Article header: the cover sits BEHIND the title text as the hero backdrop,
   darkened with a flat scrim (solid colour at opacity — never a gradient).
   -------------------------------------------------------------------------- */
.page-hero--cover {
  position: relative;
  isolation: isolate;
  padding-top: clamp(88px, 10vw, 140px);
  padding-bottom: clamp(88px, 10vw, 140px);
  min-height: clamp(440px, 46vw, 580px);
  display: flex;
  align-items: center;
}
.page-hero--cover .hero-bg { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; }
.page-hero--cover .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.page-hero--cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(2, 13, 28, 0.74); }
.page-hero--cover .container { position: relative; }
@media (max-width: 640px) {
  .page-hero--cover { min-height: 0; }
  .page-hero--cover::before { background: rgba(2, 13, 28, 0.82); }
}

/* Article reading column — the ONE place the article grid is defined.
   An empty left gutter mirrors the TOC on the right, so the measure sits in the
   true centre of the page. Without it a right-hand sidebar pushes every line of
   the article off-centre. The gutter is a FIXED track on purpose: minmax(0,…)
   collapses to zero when a track has no content, which would un-centre it.
   The measure is set in px, not ch: ch resolves against the grid container font
   size rather than the 18px prose, so 62ch was rendering as ~76 characters. */
.article-shell > .container { max-width: 1060px; }
.article-grid {
  grid-template-columns: 210px minmax(0, 640px) 210px;
  justify-content: center;
  gap: clamp(28px, 3.2vw, 48px);
}
.article-body { grid-column: 2; max-width: none; }
.toc { grid-column: 3; }
@media (max-width: 1020px) {
  .article-grid { grid-template-columns: minmax(0, 640px); justify-content: center; }
  .article-body, .toc { grid-column: 1; }
}

/* ==========================================================================
   MOTION ACCENTS — vector-only, compositor-only (transform/opacity), so they
   cannot trigger layout or paint work. Everything here is inside a
   prefers-reduced-motion:no-preference guard.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Eyebrow tick + section rule draw themselves in when the header appears */
  .sec-head .eyebrow::before,
  .sec-head .eyebrow::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
  }
  .sec-head.in .eyebrow::before,
  .sec-head.in .eyebrow::after { transform: scaleX(1); }

  /* 2. The hero's terminal period snaps in once, after the headline settles */
  .sec--hero h1 .accent-text,
  .page-hero h1 .accent-text {
    display: inline-block;
    transform: scale(0);
    animation: ms-pop 0.45s cubic-bezier(0.22, 1.5, 0.36, 1) 0.5s forwards;
  }
  @keyframes ms-pop { to { transform: scale(1); } }


  /* 4. Hairline-grid cells gain a cyan edge that wipes down on hover */
  .cell::before, .course-tile::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--cyan);
    transform: scaleY(0); transform-origin: top center;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .course-tile { position: relative; }
  .cell:hover::before, .course-tile:hover::before { transform: scaleY(1); }
  .cell .cell-idx { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease; }
  .cell:hover .cell-idx { transform: translateY(-2px); color: var(--cyan); }

  /* 5. Ledger stats lift their rule as the numbers count up */
  .stat { transition: border-color 0.4s ease; }
  .stat.in { border-top-color: var(--line-strong); }

  /* 6. Process step numerals rise slightly into place */
  .step.reveal .step-num { transform: translateY(6px); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
  .step.reveal.in .step-num { transform: none; }
}

/* ==========================================================================
   FORMS — hand-coded, no third-party iframe.
   These replaced Tally embeds. The old .form-embed had to be a white document
   card because Tally rendered dark text we could not style; owning the markup
   means the form is finally native to the dark canvas, and because every colour
   below is a token, the same form re-tones itself inside .paper for free.
   ========================================================================== */
.form { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
/* The label is absolutely positioned inside the control, so the field is one
   box rather than a label row stacked on an input row. That is where most of
   the height saving comes from. */
.field { margin: 0; position: relative; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Floating label: reads as placeholder text at rest, rises out of the way once
   the field is focused or filled. Not a real placeholder — that would vanish as
   soon as someone types, losing the question they are answering (WCAG 3.3.2). */
.field > label {
  position: absolute;
  left: 15px;
  top: 14px;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--muted);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 34px);
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left top;
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.16s ease;
}
.field .req { color: var(--cyan); margin-left: 2px; }
.paper .field .req { color: var(--link); }
.field .hint { color: var(--muted); }

/* floated state */
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field select:required:valid ~ label {
  transform: translateY(-9px) scale(0.78);
}
/* A non-required select is always :valid, so it needs the option check too. */
.field--select:not(:has(option[value=""]:checked)) > label { transform: translateY(-9px) scale(0.78); }
@media (prefers-reduced-motion: reduce) { .field > label { transition: none; } }

.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="url"], .form input[type="number"], .form select, .form textarea {
  font: inherit;
  font-size: var(--t-base);
  width: 100%;
  color: var(--heading);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  /* top padding carries the floated label; bottom stays tight */
  padding: 21px 14px 7px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form textarea { min-height: 92px; resize: vertical; line-height: 1.55; padding-top: 24px; }
.form select { appearance: none; cursor: pointer; padding-right: 38px; }
/* caret drawn as a flat mark; no image request, no gradient */
.form .select-wrap { position: relative; }
.form .select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.form ::placeholder { color: var(--muted); opacity: 1; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: rgba(255,255,255,0.18); }
.paper .form input:hover, .paper .form select:hover, .paper .form textarea:hover { border-color: rgba(11,27,43,0.28); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
.paper .form input:focus-visible, .paper .form select:focus-visible, .paper .form textarea:focus-visible { outline-color: var(--link); }

/* consent — legally the important control, so it is a real target, not fine print */
.form-consent { grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-top: 4px; }
.form-consent input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cyan); cursor: pointer; }
.paper .form-consent input { accent-color: var(--link); }
.form-consent span { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.form-consent a { color: var(--link); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 20px; }
.form-foot .btn { margin: 0; }
.form-note { font-size: var(--t-sm); color: var(--muted); margin: 0; max-width: 40ch; }

/* validation + status. Red is the one colour outside the palette; it is
   reserved for errors, never decoration. */
.form [aria-invalid="true"] { border-color: var(--warn); }
.field-error { display: block; margin-top: 4px; font-size: var(--t-micro); color: var(--warn); }
.form-status { margin: 18px 0 0; font-size: var(--t-sm); min-height: 0; }
.form-status[data-state="error"] { color: var(--warn); }
.form-status[data-state="sending"] { color: var(--muted); }
.form.is-sending { opacity: 0.7; pointer-events: none; }

/* success replaces the form outright — a filled-in form left on screen invites
   a second submit and hides the confirmation */
.form-done { border: 1px solid var(--line); border-top: 2px solid var(--cyan); border-radius: var(--radius); background: var(--card); padding: clamp(26px, 4vw, 40px); }
.paper .form-done { border-top-color: var(--link); }
.form-done h3 { margin: 0 0 10px; }
.form-done p { margin: 0; color: var(--body); }

/* honeypot: off-screen, never focusable, never announced */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   MARKS — official third-party lockups (EU funding, Meta certification).
   They ship as transparent artwork, so they sit on the canvas directly. The
   old .img--card punched a white slab behind them, which read as a foreign
   object dropped onto the dark page.
   ========================================================================== */
.marks { display: flex; align-items: center; gap: clamp(22px, 4vw, 44px); flex-wrap: wrap; margin: 0; }
.marks img { display: block; height: auto; border: 0; border-radius: 0; }

/* the EU funding notice: legally mandated wording, given a real structure
   instead of a centred slab orphaned at the foot of the page */
.funding { margin-top: clamp(48px, 6vw, 76px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3.5vw, 40px); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.funding img { width: 100%; max-width: 260px; height: auto; display: block; }
.funding p { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: var(--muted); }
.funding p strong { display: block; margin-bottom: 6px; font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--body); }
@media (max-width: 700px) { .funding { grid-template-columns: 1fr; gap: 24px; } }

/* screenshots are real captures with their own light UI — they get a hairline
   frame so they read as evidence, not as a stray white block */
.img--shot img { border: 1px solid var(--line); border-radius: var(--radius); background: var(--well); padding: 0; }

/* Tables in articles. Two pricing/comparison tables had collapsed into loose
   paragraphs during the WordPress import; rebuilt as real tables by
   tools/rebuild-tables.mjs, they needed styling that did not exist yet.
   Every colour is a token, so the same rules serve the dark canvas and .paper. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: var(--t-sm);
  text-align: left;
}
.prose thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line-strong);
}
.prose tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { color: var(--heading); font-weight: 500; }
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
/* A table is the one thing in an article allowed to scroll sideways rather
   than force the whole page to. */
.prose .table-scroll { overflow-x: auto; }
@media (max-width: 620px) { .prose table { font-size: var(--t-micro); } }

/* ==========================================================================
   HERO BACKDROP — drifting signal dots behind the homepage headline.
   A few cyan marks following curved paths at different speeds. No lattice and
   no connecting lines: the first version had all of that and read as clutter.
   The motion itself is SVG <animateMotion> (see hero-fx.njk for why), so there
   is nothing to animate in CSS here.
   ========================================================================== */
.sec--hero { position: relative; isolation: isolate; overflow: hidden; }
.sec--hero > .container { position: relative; z-index: 1; }

/* The layer is bounded to the headline area, NOT the whole hero section: the
   client logo strip lives inside .sec--hero too, and dots were drifting across
   the logos. It still bleeds full-width, clipped by the section overflow. */
.hero-stage { position: relative; }
.hero-fx {
  position: absolute;
  /* An <svg> is a REPLACED element: with height unset it takes its intrinsic
     viewBox ratio and IGNORES bottom, which is how the layer ended up 900px
     tall and running straight over the logo strip. Height is therefore given
     explicitly rather than implied by top/bottom. */
  top: calc(-1 * clamp(96px, 12vw, 168px));
  height: calc(100% + clamp(96px, 12vw, 168px));
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
}
.hero-fx .fx-dot { fill: var(--cyan); }

/* Purely decorative, so with reduced motion the honest degradation is to drop
   them entirely — a frozen dot in mid-air serves no one, and CSS cannot pause
   a SMIL timeline. */
@media (prefers-reduced-motion: reduce) {
  .hero-fx { display: none; }
}

/* Dropped at exactly the point the hero restructures. Below 980px .hero-grid
   collapses to one column, the headline grows into the bands the paths are
   routed around, and dots start crossing the type. Narrower still, slice leaves
   so small a window that they would only flicker through it — worse than no
   motion at all. */
@media (max-width: 980px) {
  .hero-fx { display: none; }
}

/* ==========================================================================
   PEOPLE — a real face next to copy that names a real person.
   The service pages described human work and showed nobody, which is most of
   why the site read as robotic. These use the actual team photographs; nothing
   here is ever a generated person (see the portraits rule in CLAUDE.md).
   ========================================================================== */
.person { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.person img {
  width: 76px; height: 76px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: block;
}
.person .who strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--heading);
  line-height: 1.25;
}
.person .who span {
  display: block;
  margin-top: 3px;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* several people side by side */
.people { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 44px); margin: 26px 0 0; }
.people .person { margin: 0; }
@media (max-width: 520px) { .people { gap: 18px; } .people .person { width: 100%; } }

/* ---------- additions (2 Sep 2026): consent, blog search, misc ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* A button that reads as an inline link (footer "Sīkdatņu iestatījumi"). */
.linkish { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--body); cursor: pointer; }
.linkish:hover { color: #fff; }

/* The services grid has seven cells in three columns; the last one spans the
   row instead of leaving two empty cells. */
.cell--wide { grid-column: 1 / -1; }

/* Cookie consent - a card in the corner, hairlines only, two equal ghost
   buttons (accepting must not be louder than declining). Rendered only when
   analytics is configured; see base.njk + js/consent.js. */
.consent { position: fixed; left: 20px; right: 20px; bottom: 76px; z-index: 90; max-width: 600px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-strong); padding: 22px 24px; display: grid; gap: 16px; }
@media (min-width: 760px) { .consent { left: 24px; right: auto; bottom: 24px; margin: 0; } }
.consent p { margin: 0; color: var(--body); font-size: var(--t-sm); line-height: 1.55; }
.consent strong { color: var(--heading); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Blog index search */
.blog-tools { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: clamp(32px, 4vw, 48px); }
.blog-search { position: relative; display: block; flex: 1 1 280px; max-width: 440px; }
.blog-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.blog-search input { width: 100%; background: var(--well); border: 1px solid var(--line-strong); border-radius: var(--radius); color: #fff; font: inherit; font-size: var(--t-base); padding: 13px 14px 13px 42px; }
.blog-search input::placeholder { color: var(--muted); }
.blog-search input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; border-color: var(--line-hover); }
.blog-count { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.blog-empty { margin: 0; padding: clamp(32px, 4vw, 48px); border: 1px solid var(--line); color: var(--muted); text-align: center; }
/* While a search is active the featured (first) card falls back to a plain card. */
.post-grid--featured.is-filtered > .post-card { grid-column: auto; }

/* Long-form legal text without the article sidebars. */
.article-body--solo { max-width: 68ch; }

/* Floating WhatsApp entry point. Owner (2 Sep 2026): cyan fill so it sticks
   out - the one deliberate exception to "one cyan CTA per viewport". Styled
   exactly like .btn: cyan fill, canvas-dark glyph and label, flat hover,
   square, no glow. Icon + label on desktop, icon only on phones;
   back-to-top stacks above it. */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 71; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 14px; background: var(--cyan); color: var(--canvas); border: 1px solid var(--cyan); border-radius: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.01em; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
.wa-float:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); color: var(--canvas); text-decoration: none; }
.wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wa-float svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .wa-float { right: 14px; bottom: 14px; width: 48px; padding: 0; justify-content: center; }
  .wa-float-label { display: none; }
}
@media print { .wa-float, .to-top, .consent { display: none; } }