/* ============================================================
   PRAGMATIK — Pages utilities & components
   ------------------------------------------------------------
   Hybrid system : short utilities for simple recurring patterns,
   BEM components for repeated structures.
   Loaded after components.css and theme-10m.css.
   Replaces the 70+ inline styles previously scattered in HTML.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   ACCESSIBILITY — focus rings, skip link, sr-only
──────────────────────────────────────────────────────────── */

/* Remove default outline (browser-blue), then add a branded
   focus-visible ring on keyboard navigation only (mouse clicks
   don't trigger it). Uses dark color so it stays visible both on
   white backgrounds and on lime-accent buttons. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On dark sections, invert the outline to white */
.section-dark *:focus-visible,
.page--dark-hero .nav:not(.nav--solid) *:focus-visible {
  outline-color: #FFFFFF;
}
/* Inputs already have their own visible focus state in components.css */

/* Skip-to-content link: hidden until keyboard-focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-dark);
  color: #FFFFFF;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline-offset: -2px;
}

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


/* ────────────────────────────────────────────────────────────
   TEXT — color, weight, alignment
──────────────────────────────────────────────────────────── */

.text-accent      { color: var(--color-accent); }
.text-muted       { color: var(--color-text-muted); }
.text-faint       { color: var(--color-text-faint); }
.text-white       { color: #FFFFFF; }
.text-white-soft  { color: rgba(255,255,255,0.7); }
.text-white-faint { color: rgba(255,255,255,0.5); }

.fw-regular  { font-weight: var(--weight-regular); }
.fw-medium   { font-weight: var(--weight-medium); }
.fw-semibold { font-weight: var(--weight-semibold); }
.fw-bold     { font-weight: var(--weight-bold); }
.fw-extrabold { font-weight: 800; }
.fw-black    { font-weight: 900; }


/* ────────────────────────────────────────────────────────────
   SPACING — margin utilities (base-8 scale)
──────────────────────────────────────────────────────────── */

.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

.ml-auto { margin-left: auto; }

/* Max-width utilities (content blocks within full-width containers) */
.max-w-440  { max-width: 440px; }
.max-w-480  { max-width: 480px; }
.max-w-500  { max-width: 500px; }
.max-w-640  { max-width: 640px; }
.max-w-720  { max-width: 720px; }
.max-w-760  { max-width: 760px; }
.max-w-860  { max-width: 860px; }

/* Padding utilities (vertical) */
.pt-0  { padding-top: 0; }
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }

/* Self alignment (flex children) */
.self-start { align-self: flex-start; }
.self-end   { align-self: flex-end; }

/* Justify utilities */
.justify-start { justify-content: flex-start; }
.justify-end   { justify-content: flex-end; }

/* Margin reset */
.m-0  { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }

/* Flex column gap presets */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-col-1    { display: flex; flex-direction: column; gap: var(--space-1); }
.flex-col-2    { display: flex; flex-direction: column; gap: var(--space-2); }
.flex-col-3    { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-col-4    { display: flex; flex-direction: column; gap: var(--space-4); }
.flex-col-5    { display: flex; flex-direction: column; gap: var(--space-5); }
.flex-wrap     { flex-wrap: wrap; }

/* Gap utilities (use with .flex or grids) */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.mx-auto       { margin-left: auto; margin-right: auto; }

/* Direction utilities (used in mirror reverse layouts) */
.dir-rtl { direction: rtl; }
.dir-ltr { direction: ltr; }

/* Padding helpers (for dark sections / bordered blocks) */
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }

/* Border helpers */
.bordered-top    { border-top: var(--border); }
.bordered-bottom { border-bottom: var(--border); }

/* Font sizes (when needed standalone) */
.text-sm  { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }

/* Margin top */
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

/* Max-width: none reset */
.max-w-none { max-width: none; }
.max-w-560  { max-width: 560px; }
.max-w-600  { max-width: 600px; }
.max-w-780  { max-width: 780px; }
.max-w-800  { max-width: 800px; }
.max-w-820  { max-width: 820px; }
.max-w-900  { max-width: 900px; }

/* Image height presets */
.logo-h-40 { height: 40px; }
.logo-h-60 { height: 60px; }


/* ────────────────────────────────────────────────────────────
   LAYOUT — flex / grid helpers
──────────────────────────────────────────────────────────── */

.flex-shrink-0    { flex-shrink: 0; }
.display-contents { display: contents; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-1-2 {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* ────────────────────────────────────────────────────────────
   IMAGES — filters for inverted (white) logos on dark sections
──────────────────────────────────────────────────────────── */

.invert-white      { filter: brightness(0) invert(1); }
.invert-white-soft { filter: brightness(0) invert(1); opacity: 0.65; }


/* ────────────────────────────────────────────────────────────
   PHOTO — editorial treatment (warm, slightly desaturated)
   Applied to all content photography for cross-image consistency.
──────────────────────────────────────────────────────────── */

.editorial-photo {
  filter: saturate(0.92) contrast(1.02);
}


/* ────────────────────────────────────────────────────────────
   HERO IMAGE — replaces the legacy .hero__img-placeholder
──────────────────────────────────────────────────────────── */

.hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}


/* ════════════════════════════════════════════════════════════
   PROOF CARDS — SVG visual language
   Bold geometric diagrams. Elements clip at the frame edge to
   create a "breaks-out" feel. One lime element per card,
   visually dominant. No filled background — sits on the card.
══════════════════════════════════════════════════════════════ */

/* When the visual slot has real content (SVG or image), drop the
   placeholder styling and let the content drive the frame. */
.proof__card-visual:has(svg),
.proof__card-visual:has(img),
.proof__card-visual--photo,
.proof__card-visual--artifact,
.proof__card-visual--channels {
  border: none;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.proof__card-visual:has(svg)::after,
.proof__card-visual:has(img)::after,
.proof__card-visual--photo::after,
.proof__card-visual--artifact::after,
.proof__card-visual--channels::after {
  content: none;
  display: none;
}

.proof-viz {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ascending line chart — subtle backdrop of progression */
.proof-viz__chart {
  fill: none;
  stroke: var(--color-text-faint);
  stroke-width: 1.5;
  opacity: 0.45;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.proof-viz__chart-dot     { fill: var(--color-text-faint); opacity: 0.5; }
.proof-viz__chart-dot-end { fill: var(--color-accent); }

/* Lime pulse dot — animated point-by-point along the chart path via
   GSAP timeline (animations.js). Pauses at each data point and triggers
   a soft pulse ring whose size scales with point height. */
.proof-viz__pulse-dot {
  fill: var(--color-accent);
}

/* Soft expanding halo created at each data point during the pause */
.proof-viz__pulse-ring {
  fill: var(--color-accent);
  opacity: 0.35;
}

/* Accessibility : hide animated elements when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .proof-viz__pulse-dot,
  .proof-viz__pulse-ring { display: none; }
}

/* Lime accent mark — short stroke below caption */
.proof-viz__accent-line {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: square;
}

/* Caption — small caps, readable */
.proof-viz__caption {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  fill: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* HUGE numeral — the primary visual element (premium typography lead) */
.proof-viz__numeral {
  font-family: var(--font-display);
  font-size: 320px;
  font-weight: 900;
  fill: var(--color-accent);
  letter-spacing: -0.05em;
}

/* Medium numeral — fits inside a backdrop (Why Pragmatik card 4 — 300K+) */
.proof-viz__numeral-medium {
  font-family: var(--font-display);
  font-size: 180px;
  font-weight: 900;
  fill: var(--color-accent);
  letter-spacing: -0.04em;
}

/* Why Pragmatik edge cards — editorial photo + artifact images */
.proof__card-visual--photo,
.proof__card-visual--artifact {
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  overflow: hidden;
  border: var(--border);
}

/* Lime liseret modifier — thin (1px), full color, premium.
   Uses outline + negative offset to render OVER the child image
   (border alone is hidden because the image fills the content box
   under box-sizing: border-box). */
.proof__card-visual--lime-border {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
}

/* When .outcomes__text becomes a wrapper of multiple <p>, give the
   paragraphs visible breathing space between them. */
.outcomes__text > p + p {
  margin-top: var(--space-3);
}

/* Outcomes header full-width variant — removes the 600px max-width
   so the section title can span the entire container. */
.outcomes__header--full {
  max-width: none;
}


/* ════════════════════════════════════════════════════════════
   HOW WE WORK — Deliverable mockups (Phase 01 / 02 / 03)
   Stylized SVG previews of what each phase produces.
══════════════════════════════════════════════════════════════ */

.proof__card-visual--mockup {
  aspect-ratio: auto;
  height: 100%;
  min-height: 480px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: none;
  margin-bottom: 0;
  display: flex;
}

/* Make the .mirror__inner columns equal-height so the visual fills the
   same vertical space as the title + text + deliverables on the left. */
.mirror__inner--equal-height {
  align-items: stretch;
}
.mirror__inner--equal-height .mirror__body {
  height: 100%;
}

.mockup-page {
  fill: var(--color-white);
  stroke: var(--color-border);
  stroke-width: 1;
}

.mockup-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  fill: var(--color-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mockup-section-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mockup-accent-line {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: square;
}

.mockup-divider {
  stroke: var(--color-border);
  stroke-width: 1;
}

.mockup-bar-strong { fill: var(--color-text); }
.mockup-bar-faint  { fill: var(--color-text-faint); opacity: 0.45; }
.mockup-bar-grey   { fill: var(--color-text-faint); opacity: 0.4; }
.mockup-bar-accent { fill: var(--color-accent); }
.mockup-bar-accent-block { fill: var(--color-accent); }

.mockup-chart-line {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mockup-chart-dot      { fill: var(--color-text); }
.mockup-chart-dot-end  { fill: var(--color-accent); }

.mockup-metric {
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 900;
  fill: var(--color-accent);
  letter-spacing: -0.05em;
}
.mockup-metric-unit {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  fill: var(--color-text-muted);
  letter-spacing: -0.01em;
}

/* Phase 02 — works/doesn't comparison */
.mockup-section-label--positive {
  fill: var(--color-text);
  font-size: 18px;
  letter-spacing: 0.14em;
}
.mockup-section-label--negative {
  fill: #B85450;
  font-size: 18px;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.mockup-bar-negative {
  fill: #B85450;
  opacity: 0.55;
}
.mockup-leads-positive {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  fill: var(--color-accent);
  letter-spacing: -0.02em;
}
.mockup-leads-negative {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  fill: var(--color-text-faint);
  letter-spacing: -0.01em;
}

/* Phase 03 — campaigns by theme */
.mockup-campaign-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  fill: var(--color-text);
  letter-spacing: -0.005em;
}
.mockup-campaign-count {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  fill: var(--color-accent);
  letter-spacing: -0.02em;
}
.mockup-campaign-count--muted {
  fill: var(--color-text-faint);
}


/* ════════════════════════════════════════════════════════════
   CASE STUDY — Pain point illustration (e.g. "The Ceiling")
   Used on consulting case study to visualize the growth ceiling
   the company hit before Pragmatik. Mixes lime (ambition) and
   muted red (stuck reality) for emotional contrast.
══════════════════════════════════════════════════════════════ */

.pain-target {
  fill: var(--color-accent);
}
.pain-target-glow {
  fill: var(--color-accent);
  opacity: 0.18;
}
.pain-target-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--color-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pain-ceiling {
  stroke: var(--color-text);
  stroke-width: 2;
  stroke-dasharray: 8 6;
}
.pain-ceiling-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pain-reality {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pain-stuck-dot {
  fill: #B85450;
}
.pain-stuck-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: #B85450;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pain-headline {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  fill: var(--color-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pain-sublabel {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Larger numeral variant for portrait/taller mockup layouts */
.proof-viz__numeral--large {
  font-size: 380px;
}

/* Extra-long numeral variant for 4-5 digit numbers (eg. 1,195) */
.proof-viz__numeral--xlong {
  font-size: 220px;
}


/* ════════════════════════════════════════════════════════════
   SECTION — ACCENT BACKGROUND (outcome sections on case studies)
   Lime background section with dark text and white cards.
══════════════════════════════════════════════════════════════ */

.section--accent-bg {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.section--accent-bg .label-small.accent {
  color: var(--color-text);
}

.section--accent-bg .divider {
  background-color: var(--color-text);
  opacity: 0.2;
}

/* Heading-light-section: dark text variant used on white cards
   placed inside lime/accent background sections */
.heading-light-section {
  color: var(--color-text);
}


/* ════════════════════════════════════════════════════════════
   CASE STUDY — FOUNDER'S NETWORK / OUTSIDE THE NETWORK
   Two-state visual showing what they reached (filled dots) vs
   the vast market they couldn't reach (a few lonely outlines).
══════════════════════════════════════════════════════════════ */

.network-node {
  fill: var(--color-text);
}
.network-boundary {
  stroke: var(--color-text-faint);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.5;
}
.network-boundary-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-text-faint);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.outside-node {
  fill: none;
  stroke: var(--color-text-faint);
  stroke-width: 1.5;
}

/* Network link — thin lime line between two nodes, briefly visible.
   Spawned continuously by JS to create an "alive network" feeling. */
.network-link {
  stroke: var(--color-accent);
  stroke-width: 1;
  fill: none;
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════
   CASE STUDY RMS — Pain-state visuals
   "YEAR-END RESULT 91" (stuck) + "THE DISCONNECT" (effort vs output)
══════════════════════════════════════════════════════════════ */

.pain-numeral {
  font-family: var(--font-display);
  font-size: 320px;
  font-weight: 900;
  fill: #B85450;
  letter-spacing: -0.05em;
}
/* Medium variant for longer pain numerals like "<500" (4 chars) that
   would otherwise touch the mockup-page edges at the base 320px size. */
.pain-numeral--medium {
  font-size: 240px;
}

.pain-flat-line {
  fill: none;
  stroke: #B85450;
  stroke-width: 2;
  opacity: 0.7;
}
.pain-flat-dot {
  fill: #B85450;
  opacity: 0.7;
}
/* Moving red dot that crawls JAN → DEC on the flat line —
   metaphor for "the year passes, never goes up". */
.pain-flat-crawler {
  fill: #B85450;
}

/* Particles that loop through The Disconnect SVG — lime through the
   INPUT bars (effort being pumped), red through the tiny OUTPUT bar. */
.disconnect-input-particle  { fill: var(--color-accent); }
.disconnect-output-particle { fill: #B85450; }
.pain-axis-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-text-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pain-input-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  fill: var(--color-text-muted);
  letter-spacing: -0.005em;
}
.pain-input-label-negative {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  fill: #B85450;
  letter-spacing: -0.005em;
}

.pain-arrow-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  fill: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Empty / unknown category box — dashed muted-red outline, no fill.
   Used to visualize a category buyers have no mental model for. */
.pain-empty-box {
  fill: none;
  stroke: #B85450;
  stroke-width: 2;
  stroke-dasharray: 8 6;
  opacity: 0.55;
}

.pain-empty-question {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 900;
  fill: #B85450;
  opacity: 0.45;
}

/* Category label inside lime mockup-bar-accent boxes (dark on lime) */
.mockup-category-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  fill: var(--color-text);
  letter-spacing: 0.04em;
}

/* Lime check-marker square (decorative, paired with label text) */
.mockup-check-marker { fill: var(--color-accent); }

.proof-viz-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ════════════════════════════════════════════════════════════
   HERO — Authority proof chip
   Discrete callout in the text column (below sub, above CTAs).
   Single data point with left lime accent line.
══════════════════════════════════════════════════════════════ */

.hero__proof {
  margin: 0 0 var(--space-10) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 3px solid var(--color-accent);
  max-width: 460px;
}

.hero__proof-value {
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1) 0;
}

.hero__proof-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* Pull the proof slightly tighter under the sub so the hero
   doesn't grow disproportionately. */
.hero__sub + .hero__proof {
  margin-top: calc(var(--space-5) * -1);
}


/* ────────────────────────────────────────────────────────────
   SECTION — alternate vertical paddings
──────────────────────────────────────────────────────────── */

.section--y12 {
  padding: var(--space-12) 0;
}
.section--y20 {
  padding: var(--space-20) 0;
}
.section--y20-top {
  padding: var(--space-20) 0;
  border-top: var(--border);
}


/* ────────────────────────────────────────────────────────────
   HERO — page-top spacing variants
──────────────────────────────────────────────────────────── */

.hero--has-offset {
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: var(--space-20);
}
.hero--has-offset-sm {
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: var(--space-16);
}


/* ────────────────────────────────────────────────────────────
   HEADING — responsive display variants
──────────────────────────────────────────────────────────── */

.heading-hero {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
}
.heading-hero--lg {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
}
.heading-hero--max {
  max-width: 760px;
}
.heading-hero--md {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
}
.heading-hero--xl {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.0;
}
.heading-section {
  font-weight: 800;
}
.heading-block {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.2;
}
.heading-block--lg {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

/* Small uppercase labels — variants beyond .label-small in base.css */
.label-md {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.heading-dark-section {
  color: #FFFFFF;
  font-weight: 700;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}


/* ────────────────────────────────────────────────────────────
   STAT — large accent number + label pair
──────────────────────────────────────────────────────────── */

.stat__value {
  display: block;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
}
.stat__value--md  { font-size: var(--text-2xl); }
.stat__value--lg  { font-size: var(--text-4xl); }
.stat__value--xl  { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.stat__value--2xl { font-size: clamp(2.5rem, 6vw, 5rem); }
.stat__value--3xl { font-size: clamp(5rem, 12vw, 9rem); }
.stat__value--4xl { font-size: clamp(5rem, 14vw, 10rem); }


/* ────────────────────────────────────────────────────────────
   TAG — small badge / category label
──────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: var(--border);
  border-radius: 2px;
}


/* ────────────────────────────────────────────────────────────
   CARD — padded content block (multiple variants)
──────────────────────────────────────────────────────────── */

.card {
  padding: var(--space-8);
  border-radius: var(--radius-sm);
}
.card--bordered   { border: var(--border); }
.card--bg         { background: var(--color-bg); }
.card--surface    { background: var(--color-surface); }
.card--accent     { background: var(--color-accent); }
.card--accent-top {
  border: var(--border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}
.card--lg         { padding: var(--space-10); }
.card--centered   { text-align: center; }
.card--column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* ────────────────────────────────────────────────────────────
   BULLET LIST — vertical list with row separator + marker
──────────────────────────────────────────────────────────── */

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.bullet-list__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: var(--border);
}
/* Parent-level modifiers (applied on .bullet-list) */
.bullet-list--md .bullet-list__item { gap: var(--space-4); padding: var(--space-5) 0; }
.bullet-list--lg .bullet-list__item { gap: var(--space-5); padding: var(--space-6) 0; }
/* Item-level modifiers (applied directly on .bullet-list__item — convenient when no parent) */
.bullet-list__item.bullet-list--md { gap: var(--space-4); padding: var(--space-5) 0; }
.bullet-list__item.bullet-list--lg { gap: var(--space-5); padding: var(--space-6) 0; }

.bullet-list__marker {
  color: var(--color-accent);
  font-weight: 900;
  font-size: var(--text-lg);
  flex-shrink: 0;
  margin-top: 2px;
}
.bullet-list__marker--faint {
  color: var(--color-text-faint);
  flex-shrink: 0;
  width: 1em;
  margin-top: 1px;
}


/* ────────────────────────────────────────────────────────────
   CALLOUT — emphasized paragraph with left accent border
──────────────────────────────────────────────────────────── */

.callout--accent {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  padding: var(--space-6);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* ────────────────────────────────────────────────────────────
   BLOCKQUOTE FEATURE — hero-level quote with accent border
──────────────────────────────────────────────────────────── */

.blockquote-feature {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  font-style: normal;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-8);
}
.blockquote-feature--sm {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-8);
}


/* ────────────────────────────────────────────────────────────
   STEP GRID — narrow number column + wide content
──────────────────────────────────────────────────────────── */

.step-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-8);
}


/* ────────────────────────────────────────────────────────────
   TIMELINE STRIP — vertical list w/ left accent rail
──────────────────────────────────────────────────────────── */

.timeline-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-8);
}


/* ────────────────────────────────────────────────────────────
   LABEL PILL — small uppercase tag for bios / metadata
──────────────────────────────────────────────────────────── */

.label-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-pill--soft {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────
   GRID — repeat-N columns helpers
──────────────────────────────────────────────────────────── */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.grid-2--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-20);
  align-items: start;
}

@media (max-width: 768px) {
  .grid-3, .grid-4, .grid-2--wide {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* ────────────────────────────────────────────────────────────
   HERO — dark full-viewport variant (10mH style)
──────────────────────────────────────────────────────────── */

.hero--dark-full {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: var(--space-24);
}

.hero--has-offset-top {
  padding-top: clamp(7rem, 12vw, 10rem);
}


/* ────────────────────────────────────────────────────────────
   HERO SPLIT — h1 left + timeline-aligned content right
──────────────────────────────────────────────────────────── */

.hero-split-end {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: end;
  padding-bottom: var(--space-16);
  border-bottom: var(--border);
}
.hero-split-stat {
  display: flex;
  gap: var(--space-10);
  align-items: flex-end;
  flex-wrap: wrap;
  border-bottom: var(--border);
  padding-bottom: var(--space-16);
}
.hero-split-stat-balanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  border-bottom: var(--border);
  padding-bottom: var(--space-16);
}

@media (max-width: 1024px) {
  .hero-split-end,
  .hero-split-stat-balanced {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* ────────────────────────────────────────────────────────────
   STAT BAR — horizontal stats row on dark hero
──────────────────────────────────────────────────────────── */

.stat-bar-dark {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  padding: var(--space-8) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}


/* ────────────────────────────────────────────────────────────
   NOTE — small muted helper text
──────────────────────────────────────────────────────────── */

.text-note {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  line-height: var(--leading-relaxed);
}


/* ────────────────────────────────────────────────────────────
   SECTION — variant without top padding (continues prev section)
──────────────────────────────────────────────────────────── */

.section--no-top {
  padding-top: 0;
  padding-bottom: var(--section-padding);
}


/* ────────────────────────────────────────────────────────────
   DIVIDER — thin vertical separator (used in dark CTAs)
──────────────────────────────────────────────────────────── */

.divider-v {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.12);
}


/* ────────────────────────────────────────────────────────────
   TAG LIST — horizontal pill row
──────────────────────────────────────────────────────────── */

.tag-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* ────────────────────────────────────────────────────────────
   FOOTER — bottom row (copyright + lang toggle line)
──────────────────────────────────────────────────────────── */

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: var(--border);
}


/* ────────────────────────────────────────────────────────────
   FOOTER — media credential block (10mH logo + label)
──────────────────────────────────────────────────────────── */

.footer__media {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer__media-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer__media-logo {
  height: 24px;
  filter: brightness(0) invert(1);
  opacity: 0.65;
}


/* ════════════════════════════════════════════════════════════
   ABOUT — Founder cards (photo + tagline + credentials + LinkedIn)
══════════════════════════════════════════════════════════════ */

.founder-photo {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  background: var(--color-surface);
}

.founder-photo--placeholder {
  position: relative;
  background:
    linear-gradient(135deg, #f3f3f0 0%, #e6e6e2 100%);
  overflow: hidden;
}
.founder-photo--placeholder::after {
  content: "Photo · forthcoming";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.founder-tagline {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
  margin: var(--space-2) 0 var(--space-5) 0;
}

.credentials-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-text-faint);
  border-bottom: 1px solid var(--color-text-faint);
}
.credentials-list__item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
}
.credentials-list__year {
  color: var(--color-accent);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-transform: uppercase;
}
.credentials-list__text {
  color: var(--color-text-muted);
}

.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 3px;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
  margin-top: var(--space-4);
}
.founder-linkedin:hover { opacity: 0.7; }
.founder-linkedin svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   ABOUT — "Our story" timeline (vertical 3-step SVG)
══════════════════════════════════════════════════════════════ */

.timeline-line {
  stroke: var(--color-text-faint);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.timeline-dot {
  fill: var(--color-text);
}
.timeline-dot--current {
  fill: var(--color-accent);
  stroke: var(--color-text);
  stroke-width: 2;
}
/* Mini lime particle that descends the timeline-line in a loop */
.timeline-particle {
  fill: var(--color-accent);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  fill: var(--color-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.timeline-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  fill: var(--color-text);
  letter-spacing: -0.01em;
}
.timeline-desc {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  fill: var(--color-text-muted);
  letter-spacing: -0.005em;
}


/* ════════════════════════════════════════════════════════════
   ABOUT — Europe audience map (10mH section)
══════════════════════════════════════════════════════════════ */

.map-hub {
  fill: var(--color-text);
}
.map-hub--minor {
  fill: var(--color-text-faint);
  opacity: 0.65;
}
.map-hub-glow {
  fill: var(--color-accent);
  opacity: 0.3;
}

.map-country {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  fill: var(--color-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.map-country-minor {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  fill: var(--color-text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.map-stat {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  fill: var(--color-text);
  letter-spacing: -0.02em;
}


/* ════════════════════════════════════════════════════════════
   ABOUT — 10mH owned-channels ecosystem visual
══════════════════════════════════════════════════════════════ */

.ecosystem-channel {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  fill: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ecosystem-stat {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  fill: var(--color-text-muted);
  letter-spacing: -0.005em;
}


/* ════════════════════════════════════════════════════════════
   ABOUT — Team section (specialists grid)
══════════════════════════════════════════════════════════════ */

.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.team-card:hover {
  border-color: var(--color-text);
  transform: translateY(-2px);
}

.team-card__role {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.team-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25;
  margin: 0;
}

.team-card__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: var(--space-1) 0 0 0;
}

.team-footnote {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-text-faint);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.team-footnote::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   ABOUT — Values cards (3 cards with mini-SVG illustrations)
══════════════════════════════════════════════════════════════ */

.value-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius-sm);
}

.value-card__viz {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.value-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

.value-card__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* SVG primitives used in value mini-illustrations */
.value-block-dark   { fill: var(--color-text); }
.value-block-faint  { fill: var(--color-text-faint); opacity: 0.35; }
.value-block-accent { fill: var(--color-accent); }

.value-ring {
  fill: none;
  stroke: var(--color-text-faint);
  stroke-width: 1.5;
}
.value-ring--faint {
  stroke: var(--color-text-faint);
  opacity: 0.3;
}

.value-mini-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-text-muted);
}
.value-mini-label-dark {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-text);
}
.value-mini-label-on-dark {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-bg);
}

.value-curve-flat {
  fill: none;
  stroke: var(--color-text-faint);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}
.value-curve-rising {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 2.5;
  stroke-linecap: round;
}


/* ════════════════════════════════════════════════════════════
   10MH — Customer case cards (Septeo, LodgIQ, MisterBooking)
══════════════════════════════════════════════════════════════ */

.client-case {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.client-case:hover {
  border-color: var(--color-text);
  transform: translateY(-2px);
}

.client-case__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.client-case__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.client-case__subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}
.client-case__views {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: var(--space-6) 0 var(--space-1) 0;
}
.client-case__views-unit {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.client-case__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: var(--space-4) 0 0 0;
}
.client-case__activity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-text-faint);
}
.client-case__activity-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.client-case__activity-chip strong {
  color: var(--color-text);
  font-weight: 900;
  margin-right: 3px;
}


/* ════════════════════════════════════════════════════════════
   10MH — Client testimonial quote block
══════════════════════════════════════════════════════════════ */

.client-quote {
  padding: var(--space-10) var(--space-8);
  background: var(--color-bg);
  border: var(--border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
}
.client-quote__text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5) 0;
}
.client-quote__attribution {
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.client-quote__attribution strong {
  color: var(--color-text);
  font-weight: 800;
  font-size: 14px;
}


/* ════════════════════════════════════════════════════════════
   10MH — Pack tier cards (Essentials → Market Leader)
══════════════════════════════════════════════════════════════ */

.pack-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.pack-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
}
.pack-card__tier {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pack-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.15;
}
.pack-card__views {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 var(--space-1) 0;
}
.pack-card__views-unit {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pack-card__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: var(--space-5) 0 0 0;
}
.pack-card__features {
  list-style: none;
  padding: var(--space-5) 0 0 0;
  margin: var(--space-5) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-text-faint);
}
.pack-card__features li {
  font-size: 13px;
  color: var(--color-text);
  position: relative;
  padding-left: var(--space-5);
  line-height: 1.4;
}
.pack-card__features li::before {
  content: "+";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  font-weight: 900;
}


/* ════════════════════════════════════════════════════════════
   10MH — YouTube channel hero banner (full-width, dark)
══════════════════════════════════════════════════════════════ */

.youtube-hero {
  background: var(--color-text);
  color: #FFFFFF;
  padding: var(--space-10) var(--space-10);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  position: relative;
  overflow: hidden;
}

/* Subtle red glow in top-right corner for visual interest */
.youtube-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

.youtube-hero__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}
.youtube-hero__logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
.youtube-hero__channel {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.005em;
}
.youtube-hero__channel-link {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.youtube-hero__channel-link:hover {
  border-bottom-color: var(--color-accent);
}

.youtube-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  max-width: 720px;
  position: relative;
}
.youtube-hero__headline .accent { color: var(--color-accent); }

.youtube-hero__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-10);
  align-items: end;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
}
@media (max-width: 768px) {
  .youtube-hero__body { grid-template-columns: 1fr; gap: var(--space-6); }
}

.youtube-hero__desc {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.youtube-hero__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.youtube-hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.youtube-hero__stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.youtube-hero__stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.youtube-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 3px;
  align-self: flex-start;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
  position: relative;
}
.youtube-hero__cta:hover { opacity: 0.75; }

/* Small YouTube chip on each client case card */
.client-case__yt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.client-case__yt-badge svg {
  height: 14px;
  width: auto;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   CONTACT PAGE — hero, authority strip, form, "what happens next"
══════════════════════════════════════════════════════════════ */

.contact-hero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: var(--space-12);
}

/* Authority strip — 3 sober indicators between hero and form */
.authority-strip {
  display: flex;
  gap: var(--space-10) var(--space-12);
  padding: var(--space-8) 0;
  border-top: var(--border);
  border-bottom: var(--border);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.authority-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 160px;
}
.authority-strip__stat {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.authority-strip__stat .accent {
  color: var(--color-accent);
}
.authority-strip__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Contact grid : form on left, "what happens next" on right */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-20);
  align-items: start;
}
@media (max-width: 768px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* Form fields */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.form-group label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-faint);
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239A9A9A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}
.form-group textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-relaxed);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: #E05038;
  box-shadow: 0 0 0 3px rgba(224, 80, 56, 0.1);
}

/* "What happens next" steps */
.contact-next__item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--border);
}
.contact-next__item:last-of-type { border-bottom: none; }
.contact-next__num {
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  flex-shrink: 0;
  width: 24px;
  padding-top: 2px;
}
.contact-next__label {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}
.contact-next__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Success / error messages */
#formSuccess, #formError {
  display: none;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
}
#formSuccess {
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
}
#formError {
  background: #FEF2F0;
  border: 1px solid #E05038;
  color: #8B2A14;
}


/* ════════════════════════════════════════════════════════════
   WHY PRAGMATIK — Comparison table (Pragmatik vs alternatives)
══════════════════════════════════════════════════════════════ */

.comparison-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  min-width: 760px;            /* triggers horizontal scroll on mobile */
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.comparison-table th,
.comparison-table td {
  text-align: left;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.4;
}

/* Column headers (alternatives) */
.comparison-table thead th {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-text);
  white-space: nowrap;
}

/* Row criterion labels (first column) */
.comparison-table tbody th {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  padding-right: var(--space-8);
}

.comparison-table td {
  color: var(--color-text-muted);
}

/* Pragmatik column — highlighted lime tint, bold dark text */
.comparison-table .col-pragmatik {
  background: var(--color-accent-light);
  color: var(--color-text);
  font-weight: 700;
}
.comparison-table thead .col-pragmatik {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}
/* Subtle rounded top/bottom on the highlighted column */
.comparison-table thead .col-pragmatik {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.comparison-table tbody tr:last-child .col-pragmatik {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border-bottom-color: transparent;
}


/* ════════════════════════════════════════════════════════════
   HOME — Pragmatik authority bar (4 stats, distinct from media-strip)
══════════════════════════════════════════════════════════════ */

.authority-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-10);
  justify-content: space-between;
  padding: var(--space-12) 0;
  border-top: var(--border);
  border-bottom: var(--border);
}
.authority-bar__item {
  flex: 1 1 180px;
  min-width: 150px;
}
.authority-bar__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.authority-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-top: var(--space-3);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════
   FOOTER — enriched 3-column layout (Brand / Navigate / Connect)
══════════════════════════════════════════════════════════════ */

/* Override the 2-col grid with a richer 3-column structure */
.footer__inner {
  grid-template-columns: 1.6fr 1fr 1.2fr;
}
@media (max-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.footer__col-title {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}

.footer__media-stat {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
}

.footer__connect {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__connect a {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast);
}
.footer__connect a:hover { color: #FFFFFF; }
.footer__connect-email {
  font-weight: var(--weight-bold) !important;
  color: rgba(255,255,255,0.85) !important;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 3px;
  align-self: flex-start;
}


/* Simple underlined link utility (offset for legibility) */
.link-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}