/* ═══════════ MODERN CSS RESET ═══════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

textarea {
  white-space: revert;
}

/* ═══════════ DESIGN TOKENS ═══════════ */

:root {
  /* ═══ Brand — Forest (OKLCH) ═══ */
  --forest-900: oklch(32.0% 0.044 167);
  --forest-800: oklch(35.9% 0.048 164);
  --forest-700: oklch(43.0% 0.057 168);
  --forest-600: oklch(53.2% 0.073 168);
  --forest-500: oklch(63.1% 0.073 169);
  --forest-200: oklch(89.6% 0.024 166);
  --forest-100: oklch(94.8% 0.009 172);
  --forest-50:  oklch(96.6% 0.007 160);

  /* ═══ Accent — Terracotta (OKLCH) ═══ */
  --accent-700: oklch(52.5% 0.135 42);
  --accent-600: oklch(59.0% 0.153 45);
  --accent-500: oklch(65.8% 0.164 45);
  --accent-400: oklch(82.5% 0.090 59);
  --accent-100: oklch(94.0% 0.022 59);

  /* ═══ Neutrals — warm off-whites, warm-tinted inks (no pure #000/#fff) ═══ */
  --cream-50:  oklch(96.7% 0.003 85);
  --cream-100: oklch(98.2% 0.003 85);
  --cream-200: oklch(93.5% 0.009 78);
  --ink-900: oklch(21.8% 0.006 85);
  --ink-800: oklch(25.2% 0.006 85);
  --ink-700: oklch(29.7% 0.006 85);
  --ink-600: oklch(40.9% 0.006 85);
  --ink-500: oklch(52.8% 0.006 85);
  --ink-400: oklch(68.6% 0.005 85);
  --line: oklch(91.3% 0.009 85);
  --line-strong: oklch(85.9% 0.012 85);

  /* Status */
  --danger: oklch(57.5% 0.166 24);

  /* Semantic */
  --bg: var(--cream-50);
  --surface: oklch(99.3% 0.0035 85);
  --surface-warm: var(--cream-100);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-dark: oklch(97.5% 0.004 85);
  --primary: var(--forest-700);
  --primary-hover: var(--forest-600);
  --accent: var(--accent-600);
  --accent-hover: var(--accent-500);
  /* terracotta for small text on light surfaces — accent-600 is only ~3.6:1 */
  --accent-text: var(--accent-700);

  /* Typography */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Legacy tokens (used by lead-form, prose) */
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-bg: var(--surface);
  --color-bg-alt: var(--cream-100);
  --color-border: var(--line);
  --color-success: #16a34a;
  --color-error: #dc2626;
  --font-sans: var(--font-body);
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --container-max: 1280px;
  --container-padding: 1.5rem;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Elevation — forest-tinted scale (replaces ad-hoc shadows) */
  --shadow-xs: 0 1px 3px rgba(45, 90, 74, 0.05);
  --shadow-sm: 0 1px 3px rgba(45, 90, 74, 0.05), 0 8px 24px -12px rgba(45, 90, 74, 0.08);
  --shadow-md: 0 4px 12px rgba(45, 90, 74, 0.08), 0 20px 44px -14px rgba(45, 90, 74, 0.14);
  --shadow-lg: 0 20px 40px -15px rgba(45, 90, 74, 0.30);
  --shadow-xl: 0 24px 50px -18px rgba(45, 90, 74, 0.40);
  --shadow-accent: 0 2px 8px rgba(196, 89, 31, 0.18);
  --shadow-accent-hover: 0 6px 18px rgba(196, 89, 31, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════ BODY ═══════════ */

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

/* ═══════════ CONTAINER ═══════════ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* ═══════════ TYPOGRAPHY ═══════════ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-family: var(--font-body);
}

p { margin: 0; }

/* Eyebrow label */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--primary);
  margin-bottom: var(--space-6);
}
.eyebrow--muted { color: var(--ink-500); }
.eyebrow--on-dark { color: var(--forest-100); }

/* ═══════════ LINKS ═══════════ */

a { color: var(--primary); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--primary-hover); }

/* ═══════════ FOCUS ═══════════ */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════ SKIP LINK ═══════════ */

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transform: translateY(calc(-100% - 24px));
  transition: transform 0.2s var(--ease);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--text-on-dark);
}

/* ═══════════ BUTTONS ═══════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent-hover);
}

.btn--secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn--secondary:hover {
  background: var(--primary);
  color: var(--text-on-dark);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--ink-900);
  background: rgba(0,0,0,0.02);
}

.btn--on-dark {
  background: var(--surface);
  color: var(--primary);
}
.btn--on-dark:hover {
  background: var(--cream-100);
  color: var(--primary);
  transform: translateY(-1px);
}

.btn__arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ═══════════ SECTIONS ═══════════ */

section { scroll-margin-top: 80px; }
.section { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }

.section-head {
  max-width: 780px;
  margin: 0 auto var(--space-16);
  text-align: center;
}
.section-head h2 { margin-bottom: var(--space-6); }
.section-head p {
  font-size: 1.1rem;
  color: var(--ink-600);
  line-height: 1.6;
}

/* Left-aligned variant — breaks the "every section announces itself centered"
   rhythm. Pair with editorial (non-card) section bodies. */
.section-head--left {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* ═══════════ PROSE PAGE (legal / CMS markdown pages) ═══════════ */

.page {
  padding-block: var(--space-16) var(--space-20);
}
.page .prose > :first-child { margin-block-start: 0; }
.page .prose > :last-child { margin-block-end: 0; }

/* ═══════════ PROSE ═══════════ */

.prose h1 { font-size: 2.25rem; line-height: 1.2; margin-block: var(--space-lg) var(--space-md); }
.prose h2 { font-size: 1.75rem; line-height: 1.25; margin-block: var(--space-lg) var(--space-sm); }
.prose h3 { font-size: 1.375rem; line-height: 1.3; margin-block: var(--space-lg) var(--space-sm); }
.prose p { margin-block-end: var(--space-md); }
.prose ul, .prose ol { margin-block-end: var(--space-md); padding-inline-start: var(--space-lg); }
.prose li { margin-block-end: var(--space-xs); }
.prose blockquote {
  border-inline-start: 3px solid var(--primary);
  padding-inline-start: var(--space-md);
  color: var(--text-muted);
  margin-block-end: var(--space-md);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--cream-100);
  padding: 0.125em 0.25em;
  border-radius: var(--radius-sm);
}
.prose pre {
  background: var(--cream-100);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-block-end: var(--space-md);
}
.prose pre code { background: none; padding: 0; }

/* ═══════════ UTILITY ═══════════ */

.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;
}

/* ─────────────────────────────────────────────────────────
   Responsive Images — Base Styles
   Add these rules to your main stylesheet.
   Required for proper responsive behavior and CLS prevention.
   ───────────────────────────────────────────────────────── */

/* Core responsive image behavior + CLS prevention */
img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

/* Ensure <picture> wrapper doesn't break layout */
picture {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Hero Image — Optional utility class
   Apply to the hero <img> or wrapping <picture> element.
   Use with eleventy:pictureattr:class="hero-image" on the <img>.
   ───────────────────────────────────────────────────────── */
.hero-image {
  inline-size: 100%;
}

.hero-image img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────
   Content Images — Optional styling
   Images within the main content column.
   ───────────────────────────────────────────────────────── */
.content img,
.prose img {
  border-radius: 4px;
  margin-block: 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   Thumbnail / Card Images — Optional
   For card grid layouts with fixed aspect ratio.
   ───────────────────────────────────────────────────────── */
.card-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* ═══════════ ANNOUNCEMENT BAR (Scarcity / Boutique-Kapazität) ═══════════ */

.announcement-bar {
  background: linear-gradient(90deg, var(--forest-900) 0%, var(--forest-800) 100%);
  color: var(--cream-100);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 101;
}

.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 40px;
  padding-block: 8px;
  flex-wrap: wrap;
  text-align: center;
}

/* Pulse live-indicator */
.announcement-bar__pulse {
  position: relative;
  display: inline-flex;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.announcement-bar__pulse-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 2px rgba(224, 107, 44, 0.25);
}
.announcement-bar__pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-500);
  opacity: 0.6;
  animation: announcement-pulse 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes announcement-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.6); opacity: 0;   }
  100% { transform: scale(2.6); opacity: 0;   }
}

/* Text */
.announcement-bar__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  letter-spacing: 0.005em;
}
.announcement-bar__label {
  color: var(--forest-100);
  opacity: 0.75;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.announcement-bar__sep {
  color: var(--forest-100);
  opacity: 0.4;
}
.announcement-bar__message {
  color: var(--cream-100);
}
.announcement-bar__count {
  color: var(--accent-500);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* CTA link */
.announcement-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.announcement-bar__cta:hover {
  color: var(--text-on-dark);
  background: var(--accent-600);
  border-color: var(--accent-600);
  transform: translateY(-1px);
}
.announcement-bar__cta svg {
  transition: transform 0.2s var(--ease);
}
.announcement-bar__cta:hover svg {
  transform: translateX(2px);
}

/* Short-form noun by default hidden on wide screens */
.announcement-bar__noun-short { display: none; }

/* Mobile: kompakter */
@media (max-width: 720px) {
  .announcement-bar { font-size: 0.8125rem; }
  .announcement-bar__inner {
    gap: var(--space-3);
    padding-block: 10px;
  }
  .announcement-bar__label,
  .announcement-bar__sep {
    display: none;
  }
  .announcement-bar__noun-full { display: none; }
  .announcement-bar__noun-short { display: inline; }
}

@media (max-width: 420px) {
  .announcement-bar__inner {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding-block: 10px;
  }
  .announcement-bar__cta {
    flex-basis: 100%;
    justify-content: center;
    padding: 6px 14px;
  }
}

/* ═══════════ SITE HEADER ═══════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 244, 242, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .header-inner { height: 64px; }

/* Logo */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--primary);
  font-variation-settings: "opsz" 48, "SOFT" 50;
  transition: opacity 0.2s var(--ease);
}
.logo:hover { opacity: 0.82; color: var(--primary); }
.logo__accent {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  font-variation-settings: "opsz" 48, "SOFT" 50;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.nav-list {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  color: var(--ink-700);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}
.nav-list a:hover { color: var(--primary); }
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.nav-list a:hover::after { transform: scaleX(1); }

/* Desktop Dropdown */
.has-dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(45, 90, 74, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s 0.18s;
  z-index: 10;
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown-menu li { margin: 0; }
.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  border-radius: 6px;
  color: var(--ink-700);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}
.dropdown-menu a::after { display: none; }
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  color: var(--primary);
  background: var(--cream-50);
}

/* Header CTA */
.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.header-cta .btn { padding: 12px 22px; font-size: 0.9rem; }

/* Mobile toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--ink-900);
}
.mobile-toggle svg { width: 26px; height: 26px; display: block; }

@media (max-width: 960px) {
  .nav-list, .header-cta .btn { display: none; }
  .mobile-toggle { display: block; }
}

/* ═══════════ MOBILE MENU ═══════════ */

.mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 190;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s var(--ease), visibility 0s 0.28s;
}
.mobile-scrim.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s var(--ease), visibility 0s 0s;
}
@media (min-width: 961px) {
  .mobile-scrim { display: none; }
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--cream-50);
  z-index: 200;
  padding: 4.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  box-shadow: none;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.mobile-menu.is-open {
  transform: translateX(0);
  box-shadow: -16px 0 40px rgba(26, 58, 46, 0.18);
}
.mobile-menu::-webkit-scrollbar { width: 0; background: transparent; }
.mobile-menu { scrollbar-width: none; }
@media (min-width: 961px) {
  .mobile-menu { display: none; }
}

.mobile-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-900);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}
.mobile-menu-close:hover { background: rgba(0, 0, 0, 0.06); }
.mobile-menu-close svg { width: 22px; height: 22px; }

.mobile-menu > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu > ul > li {
  border-bottom: 1px solid var(--line);
}
.mobile-menu > ul > li:first-child {
  border-top: 1px solid var(--line);
}

/* Top-level links (plain + accordion header) */
.mobile-menu > ul > li > a,
.mobile-menu .has-children > a {
  display: block;
  padding: 18px 4px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  transition: color 0.2s var(--ease);
}
.mobile-menu > ul > li > a:hover,
.mobile-menu .has-children > a:hover {
  color: var(--primary);
}

/* Accordion row */
.mobile-menu .has-children {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mobile-menu .has-children > a {
  flex: 1;
}
.mobile-submenu-toggle {
  background: none;
  border: 0;
  padding: 14px 4px;
  margin-right: -4px;
  cursor: pointer;
  color: var(--ink-500);
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-submenu-toggle:hover { color: var(--primary); }
.mobile-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mobile-submenu-toggle svg { width: 18px; height: 18px; }

/* Accordion panel */
.mobile-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s var(--ease);
}
.mobile-submenu.is-open {
  max-height: 600px;
  margin: 0 0 12px 12px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.mobile-submenu a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink-600);
  transition: color 0.2s var(--ease);
}
.mobile-submenu a:hover {
  color: var(--primary);
}
.mobile-submenu li:first-child a { padding-top: 4px; }
.mobile-submenu li:last-child a { padding-bottom: 4px; }

/* CTA pinned toward bottom — full-width, proper white text */
.mobile-menu > .btn {
  margin-top: auto;
  margin-bottom: 0;
  width: 100%;
  justify-content: center;
  padding: 16px 24px;
  font-size: 0.95rem;
  color: var(--text-on-dark);
}
.mobile-menu > .btn:hover { color: var(--text-on-dark); }

/* ═══════════ HERO ═══════════ */

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}
.hero--compact {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero--tight {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 2.5vw, 2rem);
}
.section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: 0;
  width: 45%;
  height: 120%;
  background: radial-gradient(circle at 70% 50%, var(--forest-100) 0%, transparent 60%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-grid--single {
  grid-template-columns: 1fr;
  text-align: center;
}
.hero-grid--single .hero-headline {
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-grid--single .hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.hero-grid--single .hero-cta {
  justify-content: center;
}
.hero-grid--single .hero-micro {
  justify-content: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero::before { display: none; }
}

.hero-headline {
  margin-bottom: var(--space-8);
}
.hero-headline .italic {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--primary);
}

.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-600);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: var(--space-12);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-6);
}

/* Star rating badge (reusable — wire to a real Google/Trustpilot rating when available) */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: var(--space-6);
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--cream-100);
  text-decoration: none;
  color: var(--ink-700);
  transition: all 0.2s var(--ease);
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
}
.hero-rating:hover {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-900);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45,90,74,0.1);
}
.hero-rating__stars {
  color: #f5a623;
  letter-spacing: 1.5px;
  font-size: 1rem;
}
.hero-rating__score strong {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 0.95rem;
}
.hero-rating__source {
  color: var(--ink-500);
  font-weight: 500;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
.hero-rating__source b {
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 420px) {
  .hero-rating {
    padding: 9px 14px;
    font-size: 0.82rem;
    gap: 10px;
    flex-wrap: wrap;
  }
  .hero-rating__source { padding-left: 8px; }
}

.hero-micro {
  font-size: 0.85rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hero-micro-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ═══════════ HERO VISUAL (BENTO) ═══════════ */

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 16px 0 0;
  box-sizing: border-box;
}

.bento {
  position: absolute;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(45,90,74,0.08), 0 20px 60px rgba(45,90,74,0.12);
  padding: 20px;
  border: 1px solid var(--line);
  box-sizing: border-box;
}

/* Bento 1: Google SERP */
.bento-serp {
  top: 16px;
  left: 0;
  width: 60%;
  animation: bentoFloat 9s ease-in-out infinite;
}
.serp-url { font-size: 11px; color: var(--ink-500); margin-bottom: 4px; }
.serp-title { font-size: 14px; color: #1a0dab; margin: 0 0 6px 0; font-weight: 500; line-height: 1.3; font-family: var(--font-body); letter-spacing: 0; }
.serp-desc { font-size: 11px; color: var(--ink-600); line-height: 1.45; margin: 0; }
.serp-rank {
  position: absolute;
  top: -12px; right: -12px;
  background: var(--primary);
  color: var(--text-on-dark);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  box-shadow: 0 6px 14px rgba(45,90,74,0.3);
}

/* Bento 2: Review */
.bento-review {
  top: 22%;
  right: 0;
  width: 50%;
  animation: bentoFloat 11s ease-in-out infinite 1s;
}
.bento-review-stars {
  color: #e8b923;
  letter-spacing: 1px;
  font-size: 13px;
  margin-bottom: 10px;
}
.bento-review p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.35;
  margin: 0 0 12px 0;
  letter-spacing: 0;
}
.bento-review-author {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--ink-500);
}
.bento-review-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--text-on-dark);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}

/* Bento 3: Growth metric */
.bento-metric {
  bottom: 12%;
  left: 4%;
  width: 47%;
  animation: bentoFloat 10s ease-in-out infinite 2s;
}
.bento-metric-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.bento-metric-value {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 44px;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.bento-metric-value em { font-style: italic; font-size: 0.7em; }
.bento-metric-sub {
  font-size: 11.5px;
  color: #2d7a5a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.bento-chart {
  margin-top: 12px;
  height: 34px;
  width: 100%;
  display: block;
}

/* Bento 4: Google Ad */
.bento-ads {
  bottom: 2%;
  right: 0;
  width: 46%;
  padding: 16px 18px;
  animation: bentoFloat 12s ease-in-out infinite 0.5s;
}
.bento-ads-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bento-ads-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.bento-ads-domain { font-size: 10.5px; color: var(--ink-500); }
.bento-ads-title {
  font-size: 12.5px;
  color: #1a0dab;
  line-height: 1.3;
  margin: 0 0 8px 0;
  font-weight: 500;
}
.bento-ads-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
}
.bento-ads-metric-label { font-size: 10.5px; color: var(--ink-500); }
.bento-ads-metric-value { font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* Tablet */
@media (max-width: 900px) {
  .hero-visual { max-width: 480px; margin: 2rem auto 0; }
}

/* Small tablet / large phone */
@media (max-width: 640px) {
  .hero-visual { max-width: 420px; padding: 14px 14px 0 0; }
  .bento { padding: 16px; border-radius: 12px; }
  .bento-ads { padding: 14px 16px; }
  .bento-metric-value { font-size: 38px; }
  .serp-title { font-size: 13px; }
  .bento-review p { font-size: 14px; }
}

/* Phone: stacked grid */
@media (max-width: 520px) {
  .hero-visual {
    max-width: 100%;
    aspect-ratio: auto;
    padding: 16px 16px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .bento {
    position: static;
    width: auto !important;
    animation: none !important;
    padding: 16px;
    border-radius: 12px;
  }
  .bento-serp { grid-column: 1 / -1; }
  .bento-ads { grid-column: 1 / -1; padding: 14px 16px; }
  .bento-metric-value { font-size: 40px; }
  .serp-rank { width: 38px; height: 38px; font-size: 18px; top: -10px; right: -10px; }
  .bento-review p { font-size: 14px; }
}

/* ═══════════ PER-SERVICE HERO IDENTITY ═══════════
   Each Leistungs-Seite carries an earthy, brand-coherent accent so navigating
   between services never feels like the same page with swapped text. The hero
   glow, eyebrow and italic accent word pick it up — CTAs stay brand terracotta. */
.hero[data-service] { --svc: var(--forest-600); --svc-soft: var(--forest-100); }
.hero[data-service="seo"]                   { --svc: oklch(50% 0.085 168); --svc-soft: oklch(95% 0.022 168); }
.hero[data-service="google-ads"]            { --svc: oklch(52% 0.095 233); --svc-soft: oklch(95% 0.024 233); }
.hero[data-service="meta-ads"]              { --svc: oklch(56% 0.115 18);  --svc-soft: oklch(95% 0.028 18); }
.hero[data-service="geo"]                   { --svc: oklch(50% 0.105 300); --svc-soft: oklch(95% 0.026 300); }
.hero[data-service="conversion-optimisation"]{ --svc: oklch(62% 0.115 66);  --svc-soft: oklch(95% 0.032 66); }
.hero[data-service="content-creation"]    { --svc: oklch(53% 0.075 150); --svc-soft: oklch(95% 0.022 150); }
.hero[data-service="webdesign"]             { --svc: oklch(59% 0.150 45);  --svc-soft: oklch(94% 0.022 59); }
.hero[data-service="review-management"]     { --svc: oklch(56% 0.115 88);  --svc-soft: oklch(95% 0.030 88); }
.hero[data-service="lead-management"]       { --svc: oklch(52% 0.105 262); --svc-soft: oklch(95% 0.026 262); }

.hero[data-service]::before {
  background: radial-gradient(circle at 70% 50%, var(--svc-soft) 0%, transparent 60%);
}
.hero[data-service] .eyebrow { color: var(--svc); }
.hero[data-service] .hero-headline .italic { color: var(--svc); }

/* ═══════════ HERO VISUAL — MINI BENTO (Leistungs-Seiten) ═══════════
   Scoped to .hero-visual--mini; Homepage .hero-visual/.bento bleiben unberührt.
   5 Boxen pro Seite über geteilte Slots (Geometrie + Motion), Inhalt auf
   .svc-card/.svc-chip. Karten erben --svc/--svc-soft vom Hero.
   Content-Budgets: Slot A ≤ ~5 kurze Zeilen · B = Label + 3 Rows ·
   C = Label + Zahl + Sub · Chips ≤ 2 kurze Zeilen. */

.hero-visual--mini {
  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 0.92;      /* kompakter als Homepage (1/1.05): 5 kleinere Boxen, weniger Leerraum */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Grid-Items dürfen schrumpfen, lange Wörter die Zelle nicht über die
   Viewport-Breite hinaus aufdehnen (Grid min-width:auto). Kein hyphens:auto —
   englische Headlines brechen sonst hässlich um („cus-tomers"). */
.hero[data-service] .hero-text { min-width: 0; }
.hero[data-service] .hero-headline { overflow-wrap: break-word; }

/* ── Geteilte Primitive ── */
.svc-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px;
  box-sizing: border-box;
  font-family: var(--font-body);
}
.svc-card--flush { padding: 0; overflow: hidden; }
.hero-visual--mini .svc-card { min-width: 0; overflow-wrap: break-word; }

.svc-chip {
  position: absolute;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 11px 13px;
  box-sizing: border-box;
  font-family: var(--font-body);
}
.svc-chip__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); margin-bottom: 3px; }
.svc-chip__label--btm { margin: 2px 0 0; }
.svc-chip__value { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; line-height: 1; color: var(--svc); letter-spacing: -0.01em; }
.svc-chip__value--sm { font-size: 16px; }
.svc-chip--text .svc-chip__text { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink-900); max-width: 130px; }

.svc-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: var(--svc-soft); color: var(--svc); border: 1px solid var(--line); }
.svc-badge--rank { position: absolute; top: -11px; right: -10px; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-family: 'Instrument Serif', Georgia, serif; font-size: 16px; font-weight: 400; background: var(--svc); color: var(--text-on-dark); border: none; box-shadow: var(--shadow-md); }

.svc-meta { font-size: 10.5px; color: var(--ink-500); line-height: 1.4; }
.svc-divider { border-top: 1px dashed var(--line-strong); margin: 10px 0; }
.svc-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.svc-kv__label { font-size: 10.5px; color: var(--ink-500); }
.svc-kv__value { font-size: 14px; font-weight: 600; color: var(--svc); }
.svc-bar { height: 8px; border-radius: 999px; background: var(--cream-200); overflow: hidden; }
.svc-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--svc); }
.svc-bar--muted .svc-bar__fill { background: var(--line-strong); }

.svc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); margin-bottom: 8px; }

.svc-stat__value { font-family: 'Instrument Serif', Georgia, serif; font-size: 32px; line-height: 1; color: var(--svc); letter-spacing: -0.01em; }
.svc-stat__sub { display: flex; align-items: center; gap: 4px; margin-top: 7px; font-size: 10.5px; font-weight: 600; color: var(--ink-500); }
.svc-stat__sub svg { flex-shrink: 0; color: var(--svc); }

.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.svc-list li { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.35; color: var(--ink-600); }
.svc-list li svg { color: var(--svc); flex-shrink: 0; }
.svc-list__val { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--svc); white-space: nowrap; }
.svc-list__row--win { color: var(--ink-900); font-weight: 600; }

/* ── Slots: nur Geometrie + Motion (Optik bleibt auf .svc-card/.svc-chip) ──
   Obere Reihe top-verankert, untere bottom-verankert: Inhalts-Höhenvarianz
   landet im Mittel-Gap statt als Überlappung. DOM-Reihenfolge a→b→c→chip1→chip2. */
.hero-visual--mini .svc-slot--a     { position: absolute; top: 12px;  left: 0;  width: 60%; animation: bentoFloat 9s ease-in-out infinite; }
.hero-visual--mini .svc-slot--b     { position: absolute; top: 20%;   right: 0; width: 43%; animation: bentoFloat 11s ease-in-out infinite 1s; }  /* max 43%: Ecken-Überlapp mit A (60%) bleibt in A's Padding-Zone */
.hero-visual--mini .svc-slot--c     { position: absolute; bottom: 6%; left: 2%; width: 47%; animation: bentoFloat 10s ease-in-out infinite 2s; }
.hero-visual--mini .svc-slot--chip1 { top: 47%; left: 40%; animation: bentoFloat 12s ease-in-out infinite 0.6s; }   /* Brücke in der Mitte, küsst B's Unterkante; min. ~13px unter hohen A-Karten (Meta-Post endet ~y194, Float ±8px) */
.hero-visual--mini .svc-slot--chip2 { bottom: 2%; right: 0; animation: bentoFloat 10.5s ease-in-out infinite 1.4s; }  /* Unterkante ~18px tiefer als C → Diagonal-Versatz wie Homepage metric/ads */

/* ── seo ── */
.svc-serp__url { font-size: 11px; color: var(--ink-500); margin-bottom: 4px; }
.svc-serp__title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-800); margin: 0 0 9px; }
.svc-serp__check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--svc); font-weight: 500; }
.svc-serp__check svg { flex-shrink: 0; }
.svc-spark { display: block; margin-top: 7px; width: 60px; height: 18px; color: var(--svc); overflow: visible; }

/* ── geo ── */
.svc-ai__head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-700); margin-bottom: 10px; }
.svc-ai__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--svc); flex-shrink: 0; }
.svc-ai__q { font-size: 12.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 7px; }
.svc-ai__a { font-size: 11.5px; line-height: 1.5; color: var(--ink-600); margin: 0 0 11px; }

/* ── google-ads ── */
.svc-ad__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.svc-ad__title { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-800); margin: 0; }

/* ── meta-ads ── */
.svc-post__head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 10px; }
.svc-post__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--svc); color: var(--text-on-dark); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.svc-post__meta { font-size: 11.5px; font-weight: 600; color: var(--ink-800); }
.svc-post__media { height: 78px; background: linear-gradient(135deg, var(--svc-soft) 0%, var(--svc) 140%); }
.svc-post__foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; color: var(--ink-500); }
.svc-post__cta { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-on-dark); background: var(--svc); padding: 5px 11px; border-radius: var(--radius-sm); }

/* ── conversion-optimierung ── */
.svc-ab__title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); margin-bottom: 12px; }
.svc-ab__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--ink-600); margin: 0 0 5px; }
.svc-ab__row + .svc-bar { margin-bottom: 12px; }
.svc-ab__row--win { color: var(--ink-900); font-weight: 600; }

/* ── content-erstellung ── */
.svc-article__title { font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--ink-900); margin: 11px 0 9px; letter-spacing: -0.01em; }

/* ── webdesign ── */
.svc-browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--cream-100); border-bottom: 1px solid var(--line); }
.svc-browser__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.svc-browser__url { margin-left: 8px; flex: 1; font-size: 10px; color: var(--ink-500); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.svc-browser__page { padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.svc-browser__nav { height: 9px; border-radius: 3px; background: var(--cream-200); width: 70%; }
.svc-browser__hero { height: 42px; border-radius: 6px; background: var(--svc-soft); }
.svc-browser__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.svc-browser__tiles span { height: 26px; border-radius: 5px; background: var(--cream-200); }

/* ── review-management ── */
.svc-review__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.svc-review__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--svc); color: var(--text-on-dark); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.svc-review__name { font-size: 11.5px; font-weight: 600; color: var(--ink-800); }
.svc-review__stars { color: #e8b923; font-size: 13px; letter-spacing: 2px; margin-bottom: 7px; }
.svc-review__text { font-size: 12px; line-height: 1.5; color: var(--ink-600); margin: 0; }
.svc-review__reply { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--svc); }
.svc-review__reply svg { flex-shrink: 0; }

/* ── lead-management: incoming-call screen (name + saved note) ── */
.svc-phone__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.svc-phone__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--svc); color: var(--text-on-dark); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.svc-phone__name { font-size: 12.5px; font-weight: 600; color: var(--ink-900); line-height: 1.15; }
.svc-phone__status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--svc); }
.svc-phone__note { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.35; color: var(--ink-700); background: var(--svc-soft); border-radius: var(--radius-sm); padding: 7px 9px; margin-bottom: 10px; }
.svc-phone__note svg { color: var(--svc); flex-shrink: 0; }
.svc-phone__actions { display: flex; gap: 10px; }
.svc-phone__btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-on-dark); flex-shrink: 0; }
.svc-phone__btn svg { width: 14px; height: 14px; }
.svc-phone__btn--accept { background: oklch(58% 0.12 150); }
.svc-phone__btn--decline { background: oklch(58% 0.16 25); }

/* ── Responsive: Basis-.hero-visual-Breakpoints mitnehmen (wie Homepage) ── */
@media (min-width: 1001px) and (max-width: 1100px) {
  /* Schmale Visual-Spalte (~430–460px): vertikaler Puffer gegen Karten-
     Kollisionen — frühere Regressions-Zone. */
  .hero-visual--mini { aspect-ratio: 1 / 1.1; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  /* Sehr schmale Spalte (~390px bei 905px Viewport): Karten wachsen durch
     Textumbruch — mehr Höhe + chip1 tiefer, sonst deckt er A/B-Inhalt. */
  .hero-visual--mini { aspect-ratio: 1 / 1.18; }
  .hero-visual--mini .svc-slot--chip1 { top: 50%; }
}
@media (max-width: 900px) {           /* Basis: max-width:480px; margin:2rem auto 0 — passt */
  .hero-visual--mini { margin: 1.5rem auto 0; }
}
@media (max-width: 640px) {           /* Mini-Basis-Regel steht später im File → hier explizit re-deklarieren */
  .hero-visual--mini { max-width: 420px; padding: 0; aspect-ratio: 1 / 1.12; }  /* 420px breit: Meta-Post wächst auf ~224px → mehr Höhe als Basis 0.92 */
  .hero-visual--mini .svc-card { padding: 16px; border-radius: 12px; }
  .hero-visual--mini .svc-slot--chip1 { top: 51%; }   /* tiefer: hohe A-Karten (Meta-Post endet ~y236) nicht verdecken */
}
@media (max-width: 520px) {           /* statisches 2-Spalten-Grid wie Homepage-Bento */
  .hero-visual--mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 100%; aspect-ratio: auto; padding: 0 0 8px; }
  .hero-visual--mini .svc-card,
  .hero-visual--mini .svc-chip { position: static; inset: auto; width: auto !important; animation: none !important; min-width: 0; }
  .hero-visual--mini .svc-slot--a { grid-column: 1 / -1; }   /* Reihen: A voll · B|C · chip1|chip2 */
  .hero-visual--mini .svc-chip { display: flex; flex-direction: column; justify-content: center; }
  .svc-badge--rank { right: -6px; top: -9px; }
}

/* Optional Bottom-Padding-Bump bei vorhandenem Mini-Visual (nur Leistungs-Seiten). */
@media (min-width: 901px) {
  .hero--tight:has(.hero-visual--mini) { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
}

/* ═══════════ HERO WITH FORM (free-analysis landing) ═══════════ */

/* Top-align so a tall form doesn't vertically-centre against the shorter pitch. */
.hero--form .hero-grid { align-items: start; }

/* Let the lead-form card fill its grid column (component defaults to a
   centred 32rem card with auto margins). */
.hero--form .hero-form .lead-form {
  margin: 0;
  max-width: none;
  width: 100%;
}

/* Ticked value list under the hero subheading. */
.hero-points {
  list-style: none;
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero-points li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-700);
  font-family: var(--font-body);
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--forest-100);
  /* terracotta check mark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4591f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ═══════════ TRUST BAR ═══════════ */

.trust-bar {
  padding: var(--space-12) 0 var(--space-16);
  background: var(--cream-100);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}
.trust-label {
  font-size: 0.95rem;
  color: var(--ink-500);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 600px;
}
.trust-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
  font-size: 1.05em;
  font-variation-settings: "SOFT" 50;
}
.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  flex-wrap: wrap;
  width: 100%;
}
.trust-logo {
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.trust-logo--img {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(100%);
}
.trust-logo--img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@media (max-width: 1100px) {
  .trust-logo--img { height: 40px; max-width: 150px; }
}

@media (max-width: 600px) {
  .trust-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.5rem;
    justify-items: center;
    align-items: center;
  }
  .trust-logos > :nth-child(5) { grid-column: 1 / -1; }
  .trust-logo--img {
    height: 36px;
    max-width: 130px;
  }
}

/* Sector strip — shown instead of client logos until real Cyprus client logos exist */
.trust-sectors {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.6rem, 1.8vw, 1rem);
  flex-wrap: wrap;
  width: 100%;
}
.trust-sector {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.01em;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream-50);
  white-space: nowrap;
}

/* ═══════════ SERVICES GRID ═══════════ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s var(--ease);
  position: relative;
}
.service-card:hover {
  background: var(--cream-100);
  color: inherit;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.service-card:hover .service-icon {
  background: var(--primary);
  color: var(--text-on-dark);
  transform: translateY(-2px);
}
.service-card:hover .service-link { color: var(--accent); }
.service-card:hover .service-link svg { transform: translateX(4px); }

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--forest-100);
  color: var(--primary);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
}
.service-icon svg { width: 24px; height: 24px; }
.service-icon--warn {
  background: rgba(200, 70, 70, 0.12);
  color: #c84646;
}
.service-card--problem:hover .service-icon--warn {
  background: #c84646;
  color: var(--text-on-dark);
}

.services-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .services-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services-grid--4 { grid-template-columns: 1fr; }
}

.service-card--addon {
  border-color: var(--accent-600);
  background: linear-gradient(180deg, rgba(224, 107, 44, 0.04) 0%, var(--surface) 45%);
}
.service-card--addon .service-icon {
  background: rgba(224, 107, 44, 0.12);
  color: var(--accent-600);
}
.service-card--addon:hover .service-icon {
  background: var(--accent-600);
  color: var(--text-on-dark);
}
.service-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(224, 107, 44, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
}
.service-note {
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.5;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.service-note strong {
  color: var(--ink-800);
}

.pricing-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}
@media (max-width: 900px) {
  .pricing-grid--2 { grid-template-columns: 1fr; max-width: 480px; }
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.service-card p {
  color: var(--ink-600);
  font-size: 0.98rem;
  line-height: 1.6;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  flex-grow: 1;
}
.service-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.service-features li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  transition: color 0.2s var(--ease);
}
.service-link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }

.service-fact {
  font-size: 0.82rem;
  color: var(--ink-500);
  font-weight: 500;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  letter-spacing: 0.01em;
}

.services-note {
  margin-top: var(--space-8);
  font-size: 0.92rem;
  color: var(--ink-500);
  text-align: center;
}
.services-note a {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.services-note a:hover { border-bottom-color: var(--primary); }

/* ═══════════ KPIs ═══════════ */

.kpi-section {
  background: linear-gradient(135deg, var(--forest-800) 0%, var(--forest-700) 50%, var(--forest-600) 100%);
  color: var(--text-on-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}
.kpi-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(224, 107, 44, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(90, 152, 130, 0.15) 0%, transparent 50%);
  pointer-events: none;
}
.kpi-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  text-align: center;
}
@media (max-width: 800px) { .kpi-grid { grid-template-columns: 1fr; gap: var(--space-16); } }

.kpi-item { position: relative; padding-top: var(--space-6); }
.kpi-item + .kpi-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(255,255,255,0.15);
}
@media (max-width: 800px) {
  .kpi-item + .kpi-item::before { left: 50%; top: -5%; transform: translateX(-50%); width: 60%; height: 1px; }
}

.kpi-value {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  margin-bottom: var(--space-4);
  color: var(--text-on-dark);
}
.kpi-value .accent { color: var(--accent-500); font-style: italic; font-weight: 400; }
.kpi-label {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  max-width: 240px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════ PROCESS ═══════════ */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
}
.process-grid--5 { grid-template-columns: repeat(5, 1fr); }
/* 3-step variant: centre the row so it doesn't leave an empty 4th column. */
.process-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 920px; margin-inline: auto; }
@media (max-width: 900px) {
  .process-grid,
  .process-grid--5,
  .process-grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); }
}
@media (max-width: 560px) {
  .process-grid,
  .process-grid--5,
  .process-grid--3 { grid-template-columns: 1fr; }
}

.process-step { position: relative; padding-top: var(--space-6); }
.process-step::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 52px;
  right: -32px;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 4px, transparent 4px 10px);
  z-index: 0;
}
.process-step:last-child::before { display: none; }
@media (max-width: 900px) { .process-step::before { display: none; } }

.process-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: var(--space-6);
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: var(--space-3);
}
.process-step p {
  color: var(--ink-600);
  font-size: 0.96rem;
  line-height: 1.6;
}
.process-step p.process-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.5;
}
.process-meta strong {
  color: var(--ink-700);
  font-weight: 600;
}

/* ═══════════ BOUTIQUE COMPARE ═══════════ */

.compare-section { background: var(--cream-100); }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 800px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-col {
  padding: clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
}
.compare-col--neg {
  background: var(--surface);
  border: 1px solid var(--line);
}
.compare-col--pos {
  background: var(--forest-800);
  color: var(--text-on-dark);
  border: 1px solid var(--forest-700);
  position: relative;
  box-shadow: var(--shadow-lg);
}
.compare-col h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
.compare-col--neg h3 { color: var(--ink-500); }
.compare-col--pos h3 { color: var(--text-on-dark); }

.compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.compare-col--neg li { color: var(--ink-600); }
.compare-col--pos li { color: rgba(255,255,255,0.92); }
.compare-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.compare-icon--neg { background: rgba(200, 70, 70, 0.1); color: #c84646; }
.compare-icon--pos { background: rgba(224, 107, 44, 0.2); color: var(--accent-500); }
.compare-icon svg { width: 12px; height: 12px; }

/* ═══════════ TEAM ═══════════ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; max-width: 420px; } }

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.team-portrait {
  width: clamp(140px, 16vw, 180px);
  height: clamp(140px, 16vw, 180px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800));
  display: grid;
  place-items: center;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(35, 69, 54, 0.35);
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: var(--space-2);
}
.team-role {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-600);
  max-width: 28ch;
}

/* ═══════════ PRICING ═══════════ */

.pricing-section { background: var(--cream-100); }

.pricing-grid {
  display: grid;
  /* minmax(0,…): Tracks dürfen unter ihre Content-Mindestbreite schrumpfen —
     1fr allein (= minmax(auto,1fr)) lässt lange nowrap-Buttons das Grid sprengen. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }

.pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 3.2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}
.pricing-card--featured {
  background: var(--forest-800);
  border-color: var(--forest-700);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-xl);
  transform: translateY(-8px);
}
@media (max-width: 900px) { .pricing-card--featured { transform: none; } }

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(196, 89, 31, 0.3);
}

.pricing-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.pricing-card--featured .pricing-name { color: var(--text-on-dark); }

.pricing-tagline {
  font-size: 0.95rem;
  color: var(--ink-600);
  min-height: 2.8em;
  line-height: 1.4;
}
.pricing-card--featured .pricing-tagline { color: rgba(255,255,255,0.75); }

.pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--space-3);
  padding-bottom: var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.pricing-card--featured .pricing-price { border-bottom-color: rgba(255,255,255,0.15); }
.pricing-price-prefix {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-500);
}
.pricing-card--featured .pricing-price-prefix { color: rgba(255,255,255,0.6); }
.pricing-price-value {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--ink-900);
}
.pricing-card--featured .pricing-price-value { color: var(--text-on-dark); }
.pricing-price-suffix {
  font-size: 0.9rem;
  color: var(--ink-500);
  font-weight: 500;
}
.pricing-card--featured .pricing-price-suffix { color: rgba(255,255,255,0.7); }

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  flex-grow: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.pricing-card--featured .pricing-features li { color: rgba(255,255,255,0.92); }
.pricing-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(224, 107, 44, 0.15);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pricing-card--featured .pricing-check {
  background: rgba(224, 107, 44, 0.25);
  color: var(--accent-500);
}
.pricing-check svg { width: 11px; height: 11px; }

.pricing-card .btn {
  justify-content: center;
  margin-top: var(--space-4);
  white-space: normal;
  text-align: center;
}

.pricing-addon {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--accent-600);
  border-radius: var(--radius);
  background: rgba(224, 107, 44, 0.04);
  margin-top: var(--space-2);
}
.pricing-card--featured .pricing-addon {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.pricing-addon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pricing-addon-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pricing-card--featured .pricing-addon-label {
  color: var(--accent-400, #f2b88b);
}
.pricing-addon-price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pricing-card--featured .pricing-addon-price {
  color: var(--text-on-dark);
}
.pricing-addon-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0;
}
.pricing-card--featured .pricing-addon-text {
  color: rgba(255, 255, 255, 0.85);
}

/* ═══════════ CASES GRID 2 ═══════════ */
.cases-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) {
  .cases-grid--2 { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
.case-note {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: var(--space-2);
}

/* ═══════════ LEAD MAGNET ═══════════ */
.lead-magnet {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: 960px;
  margin: 0 auto;
}
.lead-magnet-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--forest-100);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.lead-magnet-icon svg { width: 26px; height: 26px; }
.lead-magnet-body { display: grid; gap: var(--space-2); }
.lead-magnet-body .eyebrow { margin-bottom: 0; }
.lead-magnet-body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  margin: 0;
}
.lead-magnet-body p {
  font-size: 0.95rem;
  color: var(--ink-600);
  margin: 0;
  max-width: 52ch;
}
@media (max-width: 820px) {
  .lead-magnet {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .lead-magnet .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

.pricing-footer {
  max-width: 760px;
  margin: var(--space-12) auto 0;
  text-align: center;
  display: grid;
  gap: var(--space-4);
}
.pricing-meta {
  font-size: 0.9rem;
  color: var(--ink-500);
  line-height: 1.6;
}
.pricing-singles {
  font-size: 0.95rem;
  color: var(--ink-700);
}
.pricing-singles a {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.pricing-singles a:hover { border-bottom-color: var(--primary); }
.pricing-capacity {
  font-size: 0.88rem;
  color: var(--ink-500);
  font-style: italic;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ═══════════ FAQ ═══════════ */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-item[open] {
  border-color: var(--line-strong);
  box-shadow: 0 4px 14px rgba(45,90,74,0.10);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary); }

.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--forest-100);
  color: var(--primary);
  display: grid;
  place-items: center;
  position: relative;
  transition: background 0.2s var(--ease), transform 0.3s var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after { width: 2px; height: 12px; }
.faq-item[open] .faq-icon {
  background: var(--accent);
  color: var(--text-on-dark);
}
.faq-item[open] .faq-icon::after { transform: scaleY(0); }

.faq-answer {
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink-600);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 68ch;
}

.faq-cta {
  margin-top: var(--space-8);
  text-align: center;
  font-size: 0.98rem;
  color: var(--ink-600);
}
.faq-cta a {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.faq-cta a:hover { border-bottom-color: var(--primary); }

/* ═══════════ SECTION BACKGROUND UTILITY ═══════════ */
/* Use to explicitly paint a section cream-100 when the surrounding
   flow would leave it as body cream-50 and a neighbour is also cream-50. */
section.section--cream { background: var(--cream-100); }


/* ═══════════════════════════════════════════════════════════════
   LOCATION / CITY LANDING PAGES  (e.g. /paphos/)
   Shared building blocks for the city-page series. Scoped to the
   widgets these pages introduce; everything else reuses the global
   section / hero / form / case / faq primitives.
   Progressive enhancement: animations gate on html.js + .is-visible,
   so content is fully visible without JS and under reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── Stat band (animated count-up strip under the hero) ─────────── */
.stat-band {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--forest-700) 0%, transparent 60%),
    linear-gradient(135deg, var(--forest-800), var(--forest-900));
  color: var(--text-on-dark);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) var(--space-4);
}
.stat-band__item {
  text-align: center;
  position: relative;
  padding: 0 var(--space-3);
}
.stat-band__item + .stat-band__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.stat-band__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-band__value .accent { color: var(--accent-400); font-style: normal; }
.stat-band__label {
  margin: var(--space-3) 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.stat-band__caption {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.stat-band__caption a { color: rgba(255, 255, 255, 0.7); text-decoration: underline; }

@media (max-width: 760px) {
  .stat-band__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); }
  /* only draw dividers between columns, not on the row starts */
  .stat-band__item:nth-child(odd)::before { display: none; }
}
@media (max-width: 420px) {
  .stat-band__grid { grid-template-columns: 1fr; }
  .stat-band__item::before { display: none !important; }
}

/* ── Source-market bar chart (horizontal, animated width) ───────── */
.market-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.market-bar {
  display: grid;
  grid-template-columns: 5.5rem 1fr 9.5rem;
  align-items: center;
  gap: var(--space-4);
}
.market-bar__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-800);
}
.market-bar__track {
  height: 14px;
  background: var(--cream-200);
  border-radius: 999px;
  overflow: hidden;
}
.market-bar__fill {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-700), var(--forest-500));
  transition: width 1s var(--ease-out);
}
/* before reveal (JS on): collapse to zero so it can grow in */
.js .market-bars:not(.is-visible) .market-bar__fill { width: 0; }
.market-bar:nth-child(2) .market-bar__fill { transition-delay: 0.08s; }
.market-bar:nth-child(3) .market-bar__fill { transition-delay: 0.16s; }
.market-bar:nth-child(4) .market-bar__fill { transition-delay: 0.24s; }
.market-bar:nth-child(5) .market-bar__fill { transition-delay: 0.32s; }
.market-bar:nth-child(6) .market-bar__fill { transition-delay: 0.40s; }
.market-bar__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  justify-content: flex-end;
}
.market-bar__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.market-bar__spend {
  font-size: 0.8rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.market-bars__source {
  margin-top: var(--space-6);
  font-size: 0.78rem;
  color: var(--ink-500);
}

@media (max-width: 560px) {
  .market-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label meta"
      "track track";
    gap: var(--space-2) var(--space-3);
  }
  .market-bar__label { grid-area: label; }
  .market-bar__meta  { grid-area: meta; }
  .market-bar__track { grid-area: track; }
}

/* ── "Which one are you?" audience selector ─────────────────────── */
.audience__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-10);
}
.audience__tab {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.audience__tab:hover { border-color: var(--forest-200); background: var(--forest-50); }
.audience__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 90, 74, 0.18); }
.audience__tab[aria-selected="true"] {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--text-on-dark);
}

.audience__panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-10);
  align-items: center;
  max-width: 960px;
  margin-inline: auto;
}
.js .audience__panel { display: none; }
.js .audience__panel.is-active { display: grid; }
.audience__panel + .audience__panel { margin-top: var(--space-10); }
.js .audience__panel + .audience__panel { margin-top: 0; }

.audience__panel h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}
.audience__panel p { color: var(--ink-600); line-height: 1.65; margin: 0 0 var(--space-5); }
.audience__panel .audience__examples {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.audience__examples li {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--forest-700);
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}
.audience__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.audience__card .audience__stat {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
}
.audience__card .audience__stat .accent { color: var(--accent-600); font-style: italic; }
.audience__card .audience__stat-label {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--ink-600);
}
.audience__card hr {
  border: 0;
  border-top: 1px dashed var(--line-strong);
  margin: var(--space-5) 0;
}
.audience__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.audience__card ul li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-700);
}
.audience__card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--forest-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23c4591f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 760px) {
  .audience__panel,
  .js .audience__panel.is-active { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── Multilingual example cards (static, no toggle) ─────────────── */
.lang-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.lang-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.lang-card__lang {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-4);
}
.lang-card__query {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--space-3) var(--space-4);
  font-size: 0.95rem;
  color: var(--ink-800);
}
.lang-card__query svg { flex-shrink: 0; color: var(--ink-400); }
.lang-card__note {
  margin: var(--space-4) 0 0;
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .lang-examples { grid-template-columns: 1fr; }
}

/* ── Local clarification (Limassol HQ, serving the city) ────────── */
.local-note {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: 820px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.local-note__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--forest-50);
  color: var(--forest-700);
}
.local-note p { margin: 0; color: var(--ink-600); line-height: 1.6; }
.local-note strong { color: var(--ink-900); }

@media (max-width: 560px) {
  .local-note { flex-direction: column; text-align: center; }
}

/* ── Gap contrast block (e.g. 94.7% vs 3%) ──────────────────────── */
.gap-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(var(--space-4), 4vw, var(--space-10));
  max-width: 880px;
  margin: var(--space-10) auto 0;
}
.gap-contrast__stat { text-align: center; }
.gap-contrast__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.gap-contrast__value .accent { color: var(--accent-600); font-style: normal; }
.gap-contrast__stat--lo .gap-contrast__value,
.gap-contrast__stat--lo .gap-contrast__value .accent { color: var(--ink-400); }
.gap-contrast__label {
  margin: var(--space-3) auto 0;
  max-width: 24ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-600);
}
.gap-contrast__vs {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--ink-400);
}
.gap-contrast__caption {
  max-width: 680px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-500);
}
.gap-contrast__caption a { color: var(--accent-600); font-weight: 600; white-space: nowrap; }

@media (max-width: 560px) {
  .gap-contrast { grid-template-columns: 1fr; gap: var(--space-5); }
  .gap-contrast__vs { padding: var(--space-1) 0; }
}

/* ── Cost / price-range cards ("from" prices + drivers) ─────────── */
.cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.cost-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.cost-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cost-card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--primary);
  margin-top: var(--space-2);
}
.cost-card__price .accent { color: var(--accent-600); font-size: 0.42em; font-weight: 600; }
.cost-card__sub {
  margin: var(--space-3) 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-600);
}
.cost-card hr {
  border: 0;
  border-top: 1px dashed var(--line-strong);
  margin: var(--space-5) 0;
}
.cost-card__drivers-label {
  margin: 0 0 var(--space-3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cost-card__drivers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cost-card__drivers li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-700);
}
.cost-card__drivers li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-600);
  font-weight: 600;
}
.cost-note {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-500);
}
.cost-note a { color: var(--accent-600); font-weight: 600; white-space: nowrap; }

@media (max-width: 860px) {
  .cost-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ═══════════ CASE STUDIES ═══════════ */

.cases-section { background: var(--cream-100); }
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.cases-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .cases-grid,
  .cases-grid--2 { grid-template-columns: 1fr; }
}

.case-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(45, 90, 74, 0.15);
  border-color: var(--forest-500);
}

.case-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-700));
  position: relative;
  overflow: hidden;
}
.case-image--1 { background: linear-gradient(135deg, #3d7a64 0%, #234536 100%); }
.case-image--2 { background: linear-gradient(135deg, #c4591f 0%, #a84a22 100%); }
.case-image--3 { background: linear-gradient(135deg, #5a9882 0%, #2d5a4a 100%); }
.case-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.15) 0%, transparent 40%);
}
.case-image-label {
  position: absolute;
  bottom: 16px;
  left: 20px;
  color: rgba(255,255,255,0.95);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  z-index: 1;
  font-variation-settings: "SOFT" 100;
}

.case-body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); flex-grow: 1; }
.case-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  padding: 4px 10px;
  background: var(--forest-100);
  border-radius: 100px;
  align-self: flex-start;
}
.case-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.case-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: auto;
}
.case-metric-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.case-metric-label {
  font-size: 0.72rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.case-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cases-cta { text-align: center; margin-top: var(--space-12); }

/* ═══════════ SHOWCASE — EXAMPLE WEBSITES ═══════════ */
/* Image-only portfolio gallery (web-design page). 3×3 → 2 → 1.
   Non-clickable <figure> tiles; browser-chrome frame reuses the
   .svc-browser look from _hero.css. */

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 900px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .showcase-grid { grid-template-columns: 1fr; } }

.showcase-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--forest-500);
}

/* Browser chrome — mirrors .svc-browser__* in _hero.css */
.showcase-frame {
  display: flex;
  flex-direction: column;
}
.showcase-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--cream-100);
  border-bottom: 1px solid var(--line);
}
.showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: 0 0 auto;
}
.showcase-url {
  margin-left: 8px;
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--ink-500);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.showcase-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--cream-200);
}

.showcase-caption {
  padding: var(--space-3) var(--space-5);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
  .showcase-caption { padding: var(--space-3) var(--space-4); }
}

/* ═══════════ CASE STUDY DETAIL ═══════════ */

.cs-hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.cs-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: 0;
  width: 45%;
  height: 120%;
  background: radial-gradient(circle at 70% 50%, var(--forest-100) 0%, transparent 60%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.cs-hero .container { position: relative; z-index: 1; }

.cs-hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .cs-hero-grid { grid-template-columns: 1fr; }
  .cs-hero::before { display: none; }
}

.cs-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: var(--space-8) 0 var(--space-8);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.cs-hero h1 .accent { color: var(--accent-600); }
.cs-hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-600);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: var(--space-8);
}

.cs-hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(45, 90, 74, 0.08), 0 20px 60px rgba(45, 90, 74, 0.10);
  border: 1px solid var(--line);
}
.cs-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════ GLANCE CARD ═══════════ */

.cs-glance {
  background: var(--cream-100);
  color: var(--ink-900);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: 0 1px 3px rgba(45, 90, 74, 0.04),
              0 8px 24px -12px rgba(45, 90, 74, 0.08);
}
.cs-glance-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--primary);
}
.cs-glance dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  font-size: 0.9rem;
}
.cs-glance dt {
  font-weight: 600;
  color: var(--ink-600);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  align-self: center;
}
.cs-glance dd { color: var(--ink-800); font-weight: 500; }
.cs-glance-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.cs-glance-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--forest-100);
  padding: 4px 10px;
  border-radius: 100px;
}
.cs-glance-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  text-align: center;
}
.cs-glance-stat {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--primary);
  line-height: 1;
}
.cs-glance-stat-label {
  font-size: 0.68rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ═══════════ BREADCRUMB ═══════════ */

.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-400);
  margin-bottom: var(--space-6);
}
.cs-breadcrumb a { color: var(--ink-500); transition: color 0.2s var(--ease); }
.cs-breadcrumb a:hover { color: var(--primary); }
.cs-breadcrumb svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ═══════════ CONTENT SECTIONS ═══════════ */

.cs-section { padding: clamp(4rem, 8vw, 6rem) 0; }
.cs-section--cream { background: var(--cream-100); }

.cs-section-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.cs-section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-top: var(--space-4);
}
.cs-section-head h2 em {
  font-style: italic;
  color: var(--primary);
  font-weight: 300;
}

.cs-prose {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 720px;
}
.cs-prose p + p { margin-top: var(--space-6); }
.cs-prose strong { color: var(--ink-900); font-weight: 600; }
.cs-prose ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.cs-prose ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.55;
}
.cs-prose ul li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ═══════════ TIMELINE ═══════════ */

.cs-timeline {
  display: grid;
  gap: 0;
  position: relative;
  padding-left: 56px;
  max-width: 720px;
}
.cs-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line-strong);
}
.cs-timeline-step {
  position: relative;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--line);
}
.cs-timeline-step:last-child { border-bottom: none; }
.cs-timeline-num {
  position: absolute;
  left: -56px;
  top: var(--space-8);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  z-index: 1;
}
.cs-timeline-step:first-child .cs-timeline-num {
  background: var(--primary);
  color: var(--text-on-dark);
}
.cs-timeline-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.cs-timeline-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}
.cs-timeline-text {
  font-size: 0.95rem;
  color: var(--ink-600);
  line-height: 1.65;
}

@media (max-width: 600px) {
  .cs-timeline { padding-left: 40px; }
  .cs-timeline::before { left: 13px; }
  .cs-timeline-num { left: -40px; width: 28px; height: 28px; font-size: 0.85rem; }
}

/* ═══════════ RESULTS ═══════════ */

.cs-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: clamp(3rem, 6vw, 4rem);
}
@media (max-width: 900px) { .cs-results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cs-results-grid { grid-template-columns: 1fr; } }

.cs-result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}
.cs-result-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variation-settings: "SOFT" 60;
}
.cs-result-label {
  font-size: 0.78rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-3);
  font-weight: 600;
}

.cs-bar-group { margin-bottom: var(--space-8); }
.cs-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-800);
}
.cs-bar-value {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--primary);
}
.cs-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
}
.cs-bar__fill {
  height: 100%;
  border-radius: 6px;
  background: var(--primary);
  width: var(--pct);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-out);
}
.reveal.is-visible .cs-bar__fill { transform: scaleX(1); }
.cs-bar__fill--accent { background: var(--accent-600); }
.cs-bars-legend {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-6);
  font-size: 0.85rem;
  color: var(--ink-500);
}
.cs-bars-legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.cs-bars-legend .cs-legend-before::before { background: var(--line-strong); }
.cs-bars-legend .cs-legend-after::before { background: var(--primary); }

/* ═══════════ TESTIMONIAL (standalone) ═══════════ */

.cs-testimonial-section {
  background: var(--cream-100);
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.cs-testimonial-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.cs-testimonial-inner .stars {
  font-size: 1.1rem;
  margin-bottom: var(--space-8);
}
.cs-testimonial-inner .testimonial-quote {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin-bottom: var(--space-10);
}
.cs-testimonial-inner .testimonial-author {
  justify-content: center;
}

/* ═══════════ CASE IMAGE VARIANT 4 ═══════════ */

.case-image--4 { background: linear-gradient(135deg, #4a6b5a 0%, #2d4a3e 100%); }

/* ═══════════ CASE CARD WITH IMAGE ═══════════ */

.case-image--photo {
  background: none;
}
.case-image--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-image--photo::after { z-index: 1; }
.case-image--photo .case-image-label { z-index: 2; }

/* ═══════════ CASE CARD LINK STATE ═══════════ */

a.case-card { text-decoration: none; color: inherit; }
a.case-card:hover { color: inherit; }
a.case-card .case-link svg { transition: transform 0.2s var(--ease); }
a.case-card:hover .case-link svg { transform: translateX(4px); }
a.case-card:hover .case-link { color: var(--accent-text); }

/* ═══════════ TESTIMONIALS ═══════════ */

.testimonials-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
}
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
}
.testimonial--featured {
  background: linear-gradient(145deg, var(--cream-100) 0%, var(--cream-50) 100%);
}
.testimonial--featured::before {
  content: "\201C";
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--forest-100);
  pointer-events: none;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  position: relative;
  z-index: 1;
}
.testimonial--small .testimonial-quote {
  font-size: 1.05rem;
  line-height: 1.55;
}

.stars { color: #f5a623; font-size: 0.9rem; letter-spacing: 1px; }

/* Decimal / partial rating — opt-in via .stars--rated; base .stars stays untouched.
   Set the score with an inline `--rating` (0–5); glyphs fill proportionally + a numeric label. */
.stars--rated { display: inline-flex; align-items: center; gap: 0.45rem; }
.stars--rated .stars-glyphs {
  background: linear-gradient(90deg,
    #f5a623 calc(var(--rating, 5) / 5 * 100%),
    #d9d3c7 calc(var(--rating, 5) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stars--rated .stars-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--ink-900);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
}
.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800));
  display: grid;
  place-items: center;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.testimonial-name { font-weight: 600; color: var(--ink-900); font-size: 0.95rem; }
.testimonial-role { font-size: 0.85rem; color: var(--ink-500); }

.testimonials-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) { .testimonials-side { grid-template-rows: auto auto; grid-template-columns: 1fr; } }

.testimonials-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 900px) { .testimonials-grid--3col { grid-template-columns: 1fr; } }

/* ═══════════ BLOG PREVIEW ═══════════ */

.blog-section { background: var(--cream-100); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  color: inherit;
  box-shadow: 0 20px 40px -15px rgba(45, 90, 74, 0.15);
  border-color: var(--forest-500);
}
.blog-card:hover .blog-title { color: var(--primary); }

.blog-image {
  aspect-ratio: 16 / 10;
  background: var(--forest-100);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
img.blog-image,
picture .blog-image {
  object-fit: cover;
  display: block;
}
.blog-card picture { display: block; }
.blog-image--1 { background: linear-gradient(120deg, var(--forest-100) 0%, var(--forest-500) 100%); }
.blog-image--2 { background: linear-gradient(120deg, var(--accent-100) 0%, var(--accent-500) 100%); }
.blog-image--3 { background: linear-gradient(120deg, var(--cream-200) 0%, var(--forest-600) 100%); }

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  flex-grow: 1;
}

.blog-category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  padding: 4px 10px;
  background: var(--forest-100);
  border-radius: 100px;
  align-self: flex-start;
}

.blog-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  transition: color 0.2s var(--ease);
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--ink-500);
  margin: auto 0 0;
  flex-wrap: nowrap;
}
.blog-meta > * { white-space: nowrap; }

.blog-cta { text-align: center; margin-top: var(--space-12); }

.blog-load-more-wrap { text-align: center; margin-top: var(--space-12); }
.blog-load-more[hidden] { display: none; }

/* Excerpt below card title */
.blog-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card[hidden] { display: none !important; }

/* ═══════════ BLOG HUB PAGE ═══════════ */

/* ── Filter pills ── */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: 0 0 var(--space-12);
}
@media (max-width: 640px) {
  .blog-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    scrollbar-width: none;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
}

.blog-filter-pill {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.blog-filter-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.blog-filter-pill.is-active {
  background: var(--primary);
  color: var(--text-on-dark);
  border-color: var(--primary);
}

/* ── Card enhancements (category badge, reading time) ── */
.blog-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-400);
  display: inline-block;
}

/* ── Empty state ── */
.blog-empty {
  display: none;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--ink-500);
  font-size: 0.95rem;
}
.blog-empty.is-visible { display: block; }
.blog-empty strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink-700);
  margin-bottom: var(--space-2);
}

/* ── Newsletter / mini-CTA ── */
.blog-inline-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.blog-inline-cta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
}
.blog-inline-cta p {
  color: var(--ink-600);
  margin: 0 0 var(--space-6);
}

/* ═══════════ BLOG POST (single) ═══════════ */

.post {
  padding-block: var(--space-12) var(--space-20);
  background: var(--cream-50);
}

.post > .container { max-width: 860px; }

.post__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--ink-500);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.post__breadcrumb a { color: var(--ink-600); text-decoration: none; }
.post__breadcrumb a:hover { color: var(--primary); }
.post__breadcrumb svg { width: 12px; height: 12px; opacity: 0.6; }

.post__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
}
@media (min-width: 640px) {
  .post__card { box-shadow: 0 10px 40px -20px rgba(45, 90, 74, 0.12); }
}

.post__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.post__header {
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line);
}
.post__header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

.post__meta {
  color: var(--ink-500);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.post__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.post__back:hover { color: var(--primary-hover); }
.post__back svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.post__back:hover svg { transform: translateX(-4px); }

/* ── Hero Image (bündig mit Card-Top, volle Card-Breite) ── */
.post__hero-image {
  margin: calc(clamp(var(--space-8), 5vw, var(--space-16)) * -1)
          calc(clamp(var(--space-6), 5vw, var(--space-12)) * -1)
          clamp(var(--space-8), 4vw, var(--space-12));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--forest-100);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  position: relative;
}
.post__hero-image img,
.post__hero-image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post__hero-image picture img { width: 100%; height: 100%; }

/* ── Lead-Paragraph (größerer Subtitle unter H1) ── */
.post__lead {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0 0 var(--space-5);
  font-weight: 400;
}

/* ── Footer-Row (Share + Back) ── */
.post__footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.post__footer-row .post__back {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ── Share-Buttons ── */
.post__share {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.post__share-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-right: var(--space-2);
}
.post__share-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 50%;
  color: var(--ink-600);
  transition: all 0.2s var(--ease);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  padding: 0;
}
.post__share-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(45, 90, 74, 0.25);
}
.post__share-btn svg {
  width: 16px;
  height: 16px;
}
.post__share-btn .post__share-check {
  position: absolute;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s var(--ease);
}
.post__share-btn.is-copied {
  background: var(--forest-100);
  color: var(--primary);
  border-color: var(--primary);
}
.post__share-btn.is-copied .post__share-icon {
  opacity: 0;
  transform: scale(0.6);
}
.post__share-btn.is-copied .post__share-check {
  opacity: 1;
  transform: scale(1);
}
.post__share-icon {
  transition: all 0.2s var(--ease);
}

/* ── Mobile Adjustments (Hero + Footer-Row) ── */
@media (max-width: 640px) {
  .post__hero-image { aspect-ratio: 16 / 10; }
  .post__footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

/* ═══════════ RELATED ARTICLES SECTION ═══════════ */

.related-section {
  background: var(--cream-100);
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  border-top: 1px solid var(--line);
}
.related-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}
.related-header .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
}
.related-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-900);
}
.related-header h2 .italic {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--primary);
}
.related-grid {
  max-width: 1100px;
  margin: 0 auto;
}

/* ═══════════ POST CONTENT BLOCKS ═══════════ */
/* Design-Bausteine für .prose-Markdown-Content in Blog-Posts.
   Prefix `post-` damit sie nicht mit .blog-* oder .post__* kollidieren. */

/* ── Stats-Hero (3 Kennzahlen direkt unter dem Lead) ── */
.post-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--space-12) 0;
  padding: var(--space-5) var(--space-4);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.post-stats__item {
  text-align: center;
  padding: var(--space-2) var(--space-3);
}
.post-stats__item + .post-stats__item {
  border-inline-start: 1px solid var(--line);
}
.post-stats__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: var(--space-2);
  white-space: nowrap;
}
.post-stats__value .italic {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-600);
}
.post-stats__label {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-600);
}
@media (max-width: 640px) {
  .post-stats {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }
  .post-stats__item + .post-stats__item {
    border-inline-start: none;
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-4);
    margin-block-start: var(--space-3);
  }
}

/* ── Callout-Basis (Tipp / Warnung / Insight) ──
   Design: volle 1px-Border, getönter Hintergrund je Variante, runde Icon-Pill
   als visueller Anker links. Symmetrischer Radius, kein Side-Stripe. */
.post-callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: var(--radius);
}
.post-callout__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  background: var(--forest-100);
  color: var(--primary);
}
.post-callout__body { flex: 1; min-width: 0; }
.post-callout__body > :first-child { margin-block-start: 0; }
.post-callout__body > :last-child { margin-block-end: 0; }
.post-callout__title {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.post-callout--tip {
  background: var(--forest-50);
  border-color: var(--forest-100);
}

.post-callout--warning {
  background: oklch(97.3% 0.018 60);
  border-color: oklch(91% 0.035 62);
}
.post-callout--warning .post-callout__icon {
  background: var(--accent-600);
  color: var(--text-on-dark);
}
.post-callout--warning .post-callout__title { color: var(--accent-text); }

.post-callout--insight {
  background: var(--cream-100);
  border-color: var(--line);
}
.post-callout--insight .post-callout__icon {
  background: var(--forest-700);
  color: var(--text-on-dark);
}

@media (max-width: 640px) {
  .post-callout {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
  }
  .post-callout__icon { width: 32px; height: 32px; font-size: 0.95rem; }
}

/* ── Takeaway-Box (dunkles Fazit am Abschnitts-Ende) ──
   Dark forest card mit Orange-Pill als Anker. Kompaktes Spacing —
   24 px innen, 32 px aussen zum nächsten Absatz. */
.post-takeaway {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: #2E4938;
  color: var(--text-on-dark);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.post-takeaway::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(196, 89, 31, 0.12), transparent 65%);
  pointer-events: none;
}
.post-takeaway__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-500);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin-bottom: var(--space-4);
  position: relative;
}
.post-takeaway__text {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.65vw, 1.3rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-on-dark);
  margin: 0;
  position: relative;
}
.post-takeaway__text .italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-500);
}
@media (max-width: 640px) {
  .post-takeaway {
    padding: var(--space-5);
  }
  .post-takeaway__text {
    font-size: 1.15rem;
    line-height: 1.55;
  }
}

/* ── Inline-CTA (Mid-Article) ──
   Kompakte Version des großen Final-CTAs: Forest-800 mit Orange-Radial-Gradient,
   horizontales Layout (Text links, Button rechts), Mobile stacked. */
.post-cta {
  position: relative;
  margin: var(--space-8) 0;
  padding: var(--space-6) clamp(var(--space-6), 4vw, var(--space-8));
  background: var(--forest-800);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.post-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(196, 89, 31, 0.18), transparent 60%);
  pointer-events: none;
}
.post-cta__body {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.post-cta__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin-bottom: var(--space-2);
}
.post-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-2);
}
.post-cta__title .italic {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-500);
}
.post-cta__text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.post-cta__action {
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 640px) {
  .post-cta {
    padding: var(--space-5);
    gap: var(--space-4);
  }
  .post-cta__action,
  .post-cta__action .btn { width: 100%; }
  .post-cta__action .btn { justify-content: center; }
}

/* ── Calculator (interaktives ROI-Widget) ──
   Heller Rahmen mit zweispaltigem Grid: Inputs links, Outputs rechts.
   Slider custom-styled auf Forest/Accent-Tokens, ROAS-Hero als Zentrum. */
.post-calculator {
  margin: var(--space-12) 0;
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
}
/* Markdown-it erzeugt leere <p>-Tags zwischen HTML-Blöcken — raus damit im Grid */
.post-calculator p:empty { display: none; }

.post-calculator__header {
  position: relative;
  margin-bottom: var(--space-8);
  text-align: center;
}
.post-calculator__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(196, 89, 31, 0.1);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.post-calculator__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}
.post-calculator__title .italic {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-600);
}
.post-calculator__lead {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
  max-width: 560px;
  margin-inline: auto;
}

.post-calculator__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 760px) {
  .post-calculator__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* INPUTS */
.post-calculator__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.post-calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9rem;
}
.post-calculator__field > span {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.post-calculator__field > span strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Select — eigenständiges „Gewerk wählen"-Feld mit mehr Gewicht als Slider */
.post-calculator__field--select {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-2);
}
.post-calculator__field--select > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-2);
}
.post-calculator__field--select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.95rem 3rem 0.95rem 1.1rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--forest-700);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 18px;
  border: 1.5px solid var(--forest-700);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.post-calculator__field--select select:hover {
  background-color: var(--forest-50);
}
.post-calculator__field--select select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 90, 74, 0.18);
}

/* Range Slider */
.post-calculator input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  margin: 0.25rem 0;
  background: linear-gradient(to right, var(--forest-700) var(--_pct, 0%), var(--line) var(--_pct, 0%));
  border-radius: 999px;
  cursor: pointer;
  outline: none;
}
.post-calculator input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-600);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(45, 90, 74, 0.28);
  cursor: grab;
  transition: transform 0.15s;
}
.post-calculator input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-600);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(45, 90, 74, 0.28);
  cursor: grab;
  transition: transform 0.15s;
}
.post-calculator input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.post-calculator input[type="range"]:hover::-moz-range-thumb { transform: scale(1.12); }
.post-calculator input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(196, 89, 31, 0.25), 0 1px 3px rgba(45, 90, 74, 0.28);
}
.post-calculator input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(196, 89, 31, 0.25), 0 1px 3px rgba(45, 90, 74, 0.28);
}

/* OUTPUTS */
.post-calculator__outputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

/* ROAS Hero */
.post-calculator__hero {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: background 0.3s, border-color 0.3s;
}
.post-calculator__hero-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-2);
}
.post-calculator__hero-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
  position: relative;
}
.post-calculator__hero-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--ink-600);
  position: relative;
}

/* ROAS Feedback Colors */
[data-roas="low"] .post-calculator__hero {
  background: #fdf5ef;
  border-color: #f4e1d0;
}
[data-roas="low"] .post-calculator__hero-value { color: var(--accent-600); }

[data-roas="high"] .post-calculator__hero {
  background: var(--forest-50);
  border-color: var(--forest-100);
}
[data-roas="high"] .post-calculator__hero-value { color: var(--forest-700); }

/* Funnel */
.post-calculator__funnel {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4) var(--space-3);
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.post-calculator__funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}
.post-calculator__funnel-num {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.post-calculator__funnel-label {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-600);
  font-weight: 500;
}
.post-calculator__funnel-arrow {
  width: 20px;
  height: 20px;
  color: var(--accent-600);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .post-calculator__funnel {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .post-calculator__funnel-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

/* Totals */
.post-calculator__totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.post-calculator__total {
  padding: var(--space-4) var(--space-3);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.post-calculator__total--profit {
  background: var(--forest-50);
  border-color: var(--forest-100);
}
.post-calculator__total-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-2);
}
.post-calculator__total--profit .post-calculator__total-label { color: var(--forest-700); }
.post-calculator__total-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.post-calculator__total--profit .post-calculator__total-value { color: var(--forest-700); }

/* CTA — vertikal zentrierter Block mit klarem Atem-Raum zum Grid */
.post-calculator__cta {
  position: relative;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.post-calculator__cta-text {
  max-width: 520px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-600);
}
.post-calculator__cta-text em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--forest-700);
  font-weight: 500;
}
.post-calculator__cta .btn {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .post-calculator__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Table-Wrap (nur für horizontalen Scroll — kein Border/Radius hier) ── */
.post-table-wrap {
  margin: var(--space-8) 0;
  overflow-x: auto;
}
.post-table-wrap table {
  margin: 0;
  min-width: 560px;
}

/* ── Tabellen-Styling ──
   Die Tabelle selbst trägt Border, Background und Border-Radius.
   border-collapse: separate + border-radius auf die Eck-Zellen ist die einzige
   Kombination, die über alle Browser hinweg saubere gerundete Ecken ergibt —
   ohne weißen Ring zwischen Header und Table-Border. */
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  margin: var(--space-8) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prose table th,
.prose table td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose table th {
  padding: var(--space-3) var(--space-5);
}
.prose table td {
  padding: var(--space-4) var(--space-5);
}
.prose table thead th {
  background: var(--cream-100);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.prose table thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.prose table thead tr:first-child th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
.prose table tbody tr:last-child td { border-bottom: 0; }
.prose table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
.prose table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }
.prose table tbody tr:hover td { background: var(--cream-50); }

/* ── Template-Picker (tabbedAntwort-Vorlagen mit Copy) ──
   Pill-Tabs oben, Template-Panel darunter, Copy-Button unten rechts. */
.post-template-picker {
  margin: var(--space-12) 0;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.post-template-picker p:empty { display: none; }
.post-template-picker__header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
}
.post-template-picker__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(196, 89, 31, 0.1);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.post-template-picker__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.post-template-picker__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.post-template-picker__tab {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.post-template-picker__tab:hover {
  color: var(--forest-700);
  border-color: var(--forest-200);
  background: var(--forest-50);
}
.post-template-picker__tab.is-active {
  color: var(--text-on-dark);
  background: var(--forest-700);
  border-color: var(--forest-700);
}
.post-template-picker__panel {
  padding: var(--space-5) var(--space-6);
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-800);
  min-height: 120px;
}
.post-template-picker__panel[hidden] { display: none; }
.post-template-picker__panel p { margin: 0 0 var(--space-3); }
.post-template-picker__panel p:last-child { margin-bottom: 0; }
.post-template-picker__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.post-template-picker__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--forest-700);
  background: transparent;
  border: 1.5px solid var(--forest-700);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.post-template-picker__copy-btn:hover {
  background: var(--forest-50);
}
.post-template-picker__copy-btn.is-copied {
  color: var(--accent-text);
  border-color: var(--accent-600);
}
@media (max-width: 640px) {
  .post-template-picker { padding: var(--space-5); }
  .post-template-picker__panel { padding: var(--space-4); }
}

/* ── Accordion (collapsible <details> Panels) ──
   Gruppierte Details-Elemente fuer dichten Content (z. B. Rechts-Abschnitte). */
.post-accordion {
  margin: var(--space-8) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.post-accordion p:empty { display: none; }
.post-accordion details {
  border-bottom: 1px solid var(--line);
}
.post-accordion details:last-child {
  border-bottom: 0;
}
.post-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--forest-700);
  background: var(--cream-100);
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}
.post-accordion summary::-webkit-details-marker { display: none; }
.post-accordion summary::marker { display: none; content: ""; }
.post-accordion summary:hover { background: var(--forest-50); }
.post-accordion summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a4a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}
.post-accordion details[open] > summary::after {
  transform: rotate(180deg);
}
.post-accordion__content {
  padding: var(--space-4) var(--space-5) var(--space-5);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-700);
}
.post-accordion__content p { margin: 0 0 var(--space-3); }
.post-accordion__content p:last-child { margin-bottom: 0; }
.post-accordion__content ul { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.post-accordion__content li { margin-bottom: var(--space-1); }
.post-accordion__content strong { color: var(--ink-900); }

/* ── Checklist (nummerierte Schritte-Timeline) ──
   Vertikale Timeline mit Nummern-Kreisen und Verbindungslinie. */
.post-checklist {
  margin: var(--space-10) 0;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.post-checklist p:empty { display: none; }
.post-checklist__header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-4) 0;
}
.post-checklist__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(196, 89, 31, 0.1);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.post-checklist__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
}
.post-checklist__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-checklist__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-6);
}
.post-checklist__step:last-child { padding-bottom: 0; }
.post-checklist__step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.post-checklist__step:last-child::before { display: none; }
.post-checklist__number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--forest-700);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}
.post-checklist__body { padding-top: 0.35rem; }
.post-checklist__step-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-1);
}
.post-checklist__desc {
  display: block;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-600);
}
@media (max-width: 640px) {
  .post-checklist { padding: var(--space-5); }
  .post-checklist__number { width: 32px; height: 32px; font-size: 0.85rem; }
  .post-checklist__step::before { left: 15px; top: 32px; }
}

/* ── Correlation chart (off-page signals → AI visibility) ──
   Reine HTML/CSS-Balken. Füll-Breite je Zeile inline gesetzt; Entrance-
   Animation über scaleX-Keyframe (transform-origin:left), damit sie
   unabhängig von der gesetzten Breite sauber von 0 hochwächst. */
.post-correlation {
  margin: var(--space-12) 0;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.post-correlation p:empty { display: none; }
.post-correlation__header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.post-correlation__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(196, 89, 31, 0.1);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.post-correlation__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}
.post-correlation__title .italic {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-600);
}
.post-correlation__lead {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
  max-width: 540px;
  margin-inline: auto;
}
.post-correlation__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.post-correlation__row { display: grid; gap: var(--space-2); }
.post-correlation__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-900);
}
.post-correlation__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--forest-700);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.post-correlation__track {
  height: 14px;
  border-radius: 999px;
  background: var(--cream-100);
  border: 1px solid var(--line);
  overflow: hidden;
}
.post-correlation__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--forest-700);
  transform-origin: left center;
  animation: postCorrGrow 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.post-correlation__row--muted .post-correlation__fill { background: var(--ink-400); }
.post-correlation__row--muted .post-correlation__value { color: var(--ink-500); }
.post-correlation__caption {
  margin: var(--space-6) 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-500);
  text-align: center;
}
@keyframes postCorrGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .post-correlation__fill { animation: none; }
}

/* ── Scorecard (interaktiv: „Wie sichtbar ist deine Marke für KI?") ──
   Toggle-Chips links (Quellen, je nach Gewicht), Gauge + Verdict rechts.
   Band-Farben werden per [data-band] auf dem Root umgeschaltet
   (analog zur [data-roas]-Logik des Kalkulators). */
.post-scorecard {
  margin: var(--space-12) 0;
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
}
.post-scorecard p:empty { display: none; }
.post-scorecard__header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.post-scorecard__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(196, 89, 31, 0.1);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.post-scorecard__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}
.post-scorecard__title .italic {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-600);
}
.post-scorecard__lead {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
  max-width: 560px;
  margin-inline: auto;
}
.post-scorecard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 760px) {
  .post-scorecard__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-10);
    align-items: center;
  }
}
.post-scorecard__group-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-3);
}

/* Toggle chips */
.post-scorecard__toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.post-scorecard__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--cream-50);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s, background 0.15s;
}
.post-scorecard__toggle:hover {
  border-color: var(--forest-200);
  background: var(--forest-50);
}
.post-scorecard__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 90, 74, 0.18);
}
.post-scorecard__toggle[aria-pressed="true"] {
  border-color: var(--forest-700);
  background: var(--forest-50);
}
.post-scorecard__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-400);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
}
.post-scorecard__check svg {
  width: 14px;
  height: 14px;
  color: var(--text-on-dark);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s, transform 0.15s;
}
.post-scorecard__toggle[aria-pressed="true"] .post-scorecard__check {
  background: var(--forest-700);
  border-color: var(--forest-700);
}
.post-scorecard__toggle[aria-pressed="true"] .post-scorecard__check svg {
  opacity: 1;
  transform: scale(1);
}
.post-scorecard__toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.post-scorecard__toggle-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.post-scorecard__weight {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  background: rgba(196, 89, 31, 0.1);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.post-scorecard__toggle-desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-600);
}

/* Output panel */
.post-scorecard__output {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.post-scorecard__gauge {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background 0.3s, border-color 0.3s;
}
.post-scorecard__score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.post-scorecard__score-max {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0;
}
.post-scorecard__band {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
  transition: color 0.3s;
}
.post-scorecard__meter {
  margin-top: var(--space-4);
  height: 8px;
  border-radius: 999px;
  background: var(--cream-50);
  border: 1px solid var(--line);
  overflow: hidden;
}
.post-scorecard__meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--forest-700);
  transition: width 0.5s var(--ease), background 0.3s;
}
.post-scorecard__count {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.82rem;
  color: var(--ink-500);
}
.post-scorecard__verdict {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.post-scorecard__verdict strong { color: var(--ink-900); }
.post-scorecard__opportunity {
  padding: var(--space-4);
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.post-scorecard__opportunity-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-700);
  margin-bottom: 4px;
}
.post-scorecard__opportunity strong { color: var(--forest-700); }

/* Band colours — driven by [data-band] on the root */
[data-band="invisible"] .post-scorecard__gauge { background: #fdf5ef; border-color: #f4e1d0; }
[data-band="invisible"] .post-scorecard__score { color: var(--accent-600); }
[data-band="invisible"] .post-scorecard__band { color: var(--accent-text); }
[data-band="invisible"] .post-scorecard__meter-fill { background: var(--accent-600); }

[data-band="radar"] .post-scorecard__gauge { background: #fbf6ec; border-color: #efe2c8; }
[data-band="radar"] .post-scorecard__score { color: #b9831f; }
[data-band="radar"] .post-scorecard__band { color: #9a6c14; }
[data-band="radar"] .post-scorecard__meter-fill { background: #c98a1a; }

[data-band="competitive"] .post-scorecard__gauge { background: var(--forest-50); border-color: var(--forest-100); }
[data-band="competitive"] .post-scorecard__score { color: var(--forest-600); }
[data-band="competitive"] .post-scorecard__band { color: var(--forest-700); }
[data-band="competitive"] .post-scorecard__meter-fill { background: var(--forest-600); }

[data-band="cited"] .post-scorecard__gauge { background: var(--forest-50); border-color: var(--forest-100); }
[data-band="cited"] .post-scorecard__score { color: var(--forest-700); }
[data-band="cited"] .post-scorecard__band { color: var(--forest-700); }
[data-band="cited"] .post-scorecard__meter-fill { background: var(--forest-700); }

/* CTA — geteilt mit der Kalkulator-Optik (zentriert, klarer Abstand) */
.post-scorecard__cta {
  position: relative;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}
.post-scorecard__cta-text {
  max-width: 540px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-600);
}
.post-scorecard__cta-text em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--forest-700);
  font-weight: 500;
}
@media (max-width: 640px) {
  .post-scorecard { padding: var(--space-5); }
  .post-scorecard__cta .btn { width: 100%; justify-content: center; }
}

/* ── Prose-leak guard ──
   The post widgets live inside `.prose`, whose element rules
   (.prose h3 / p / ol / li — specificity 0,1,1) otherwise beat the single-class
   component rules (0,1,0) and inject unwanted top margins, paragraph spacing and
   list indents. Re-assert the intended box model with a `.prose`-scoped selector
   (specificity 0,2,0). Fixes the eyebrow→title gap, the scorecard's loose right
   column and the checklist's left-indent/right-asymmetry in one place. */
.prose .post-correlation__title,
.prose .post-scorecard__title,
.prose .post-calculator__title,
.prose .post-template-picker__title { margin: 0 0 var(--space-2); }
.prose .post-checklist__title { margin: 0; }
.prose .post-correlation__lead,
.prose .post-scorecard__lead,
.prose .post-calculator__lead,
.prose .post-scorecard__verdict,
.prose .post-scorecard__cta-text,
.prose .post-calculator__cta-text,
.prose .post-example__quote { margin: 0; }
.prose .post-correlation__caption { margin: var(--space-6) 0 0; }
.prose .post-checklist__list { margin: 0; padding: 0; }
.prose .post-checklist__step { margin: 0; padding-bottom: var(--space-6); }
.prose .post-checklist__step:last-child { padding-bottom: 0; }

/* ── Example card (inline illustrative example — e.g. a brand mention) ──
   Label pill + one or more sample sentences (brand name highlighted via <mark>)
   + a short note. Two-row variant contrasts linked vs unlinked. */
.post-example {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.post-example p:empty { display: none; }
.post-example__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-3);
}
.post-example__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.post-example__row + .post-example__row { border-top: 1px solid var(--line); }
.post-example__tag {
  flex-shrink: 0;
  width: 76px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.post-example__tag--link { color: var(--forest-700); }
.post-example__quote {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-900);
}
.post-example__link {
  color: var(--forest-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.post-example mark {
  background: rgba(196, 89, 31, 0.16);
  color: var(--accent-text);
  font-weight: 600;
  padding: 0 0.2em;
  border-radius: 3px;
}
.post-example__note {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-600);
}
.post-example__note em {
  font-style: italic;
  color: var(--ink-700);
}
@media (max-width: 520px) {
  .post-example__row { flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; }
  .post-example__tag { width: auto; }
}

/* ═══════════ AUTHORS ═══════════ */

/* ── Post-Meta: Author-Link ── */
.post__author { display: inline-flex; align-items: center; gap: 0.35em; }
.post__author-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.post__author-link:hover {
  color: var(--primary-hover);
  border-bottom-color: var(--primary-hover);
}

/* ═══════════ AUTHOR OVERVIEW — GRID ═══════════ */

.authors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 960px) { .authors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .authors-grid { grid-template-columns: 1fr; } }

.author-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s var(--ease);
  gap: var(--space-5);
}
.author-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(45, 90, 74, 0.15);
  border-color: var(--forest-500);
  color: inherit;
}

.author-card__portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest-100) 0%, var(--forest-500) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px -12px rgba(45, 90, 74, 0.3);
}
.author-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-card__initials {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
}

.author-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }

.author-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
  transition: color 0.2s var(--ease);
}
.author-card:hover .author-card__name { color: var(--primary); }

.author-card__role {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.author-card__bio {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-600);
  margin: var(--space-2) 0 0;
  flex-grow: 1;
}

.author-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  margin-top: var(--space-3);
  font-size: 0.85rem;
}
.author-card__count {
  color: var(--ink-500);
  font-weight: 500;
}
.author-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--primary);
  font-weight: 600;
  transition: transform 0.2s var(--ease);
}
.author-card:hover .author-card__link { transform: translateX(2px); color: var(--primary-hover); }

/* ═══════════ AUTHOR PROFILE DETAIL ═══════════ */

.author-breadcrumb-wrap {
  background: var(--cream-50);
  padding: var(--space-8) 0 0;
}

.author-hero {
  background: var(--cream-50);
  padding: var(--space-8) 0 clamp(var(--space-16), 8vw, var(--space-24));
}

.author-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 5vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
  box-shadow: 0 10px 40px -20px rgba(26, 58, 46, 0.12);
}
@media (max-width: 900px) {
  .author-profile {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: left;
  }
}

.author-profile__portrait {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest-500) 0%, var(--forest-700) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px -20px rgba(45, 90, 74, 0.35);
  position: sticky;
  top: var(--space-24);
}
@media (max-width: 900px) {
  .author-profile__portrait {
    position: static;
    max-width: 180px;
    margin: 0;
  }
}
.author-profile__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-profile__initials {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
}

.author-profile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.author-profile__body .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.author-profile__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-900);
}

.author-profile__role {
  font-size: 1.05rem;
  color: var(--primary);
  font-weight: 500;
  margin: 0;
}

.author-profile__bio {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: var(--space-4) 0 0;
}

/* ── Stats ── */
.author-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 480px) {
  .author-profile__stats { grid-template-columns: 1fr; gap: var(--space-3); }
}
.author-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.author-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.author-stat__label {
  font-size: 0.82rem;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}

/* ── Expertise ── */
.author-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin: 0 0 var(--space-3);
}
.author-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.author-pill {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  background: var(--forest-100);
  color: var(--primary);
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ── Quote ── */
.author-profile__quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1.45;
  color: var(--ink-700);
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-8);
  margin: var(--space-4) 0 0;
}
.author-profile__quote::before {
  content: "\201C";
  position: absolute;
  left: -0.06em;
  top: -0.1em;
  font-size: 4rem;
  line-height: 1;
  color: var(--forest-100);
  pointer-events: none;
}

/* ── Links ── */
.author-profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.author-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.author-link:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(45, 90, 74, 0.2);
}
.author-link svg { width: 16px; height: 16px; }
.author-link--ghost {
  background: transparent;
  color: var(--ink-600);
}

/* ═══════════ POSTS BY AUTHOR SECTION ═══════════ */

.author-posts {
  background: var(--cream-100);
  padding: clamp(var(--space-16), 8vw, var(--space-24)) 0;
  border-top: 1px solid var(--line);
}
.author-posts__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}
.author-posts__header .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
}
.author-posts__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-900);
}
.author-posts__header h2 .italic {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--primary);
}
.author-posts__grid { max-width: 1100px; margin: 0 auto; }

.author-posts__empty {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.author-posts__empty p {
  color: var(--ink-600);
  margin: 0 0 var(--space-5);
}

/* ═══════════ FINAL CTA ═══════════ */

.final-cta {
  background: var(--forest-800);
  color: var(--text-on-dark);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(224, 107, 44, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 90% 20%, rgba(90, 152, 130, 0.2) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta-content {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.final-cta h2 {
  color: var(--text-on-dark);
  margin-bottom: var(--space-6);
}
.final-cta h2 .italic {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-500);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.final-cta p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: var(--space-12);
}
.final-cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta-contact {
  margin-top: var(--space-8);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
}
.final-cta-contact a {
  color: var(--text-on-dark);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease);
}
.final-cta-contact a:hover { border-bottom-color: var(--accent-500); color: var(--text-on-dark); }

/* ═══════════ NOTICE / INTERSTITIAL PAGES (thank-you · error · 404) ═══════════ */

.notice {
  max-width: 600px;
  margin-inline: auto;
  padding-block: clamp(var(--space-20), 16vh, var(--space-32));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Status medallion — soft forest circle */
.notice__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--space-8);
  border-radius: 50%;
  background: var(--forest-100);
  color: var(--forest-700);
  box-shadow: inset 0 0 0 1px var(--forest-200);
}
.notice__icon svg { width: 34px; height: 34px; }

.notice .eyebrow { margin-bottom: var(--space-4); }

.notice h1 {
  margin-bottom: var(--space-5);
  text-wrap: balance;
}

.notice__lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-10);
}

.notice__contact {
  margin-top: var(--space-8);
  font-size: 0.95rem;
  color: var(--ink-500);
}
.notice__contact a { font-weight: 600; color: var(--primary); }

/* Error variant — terracotta status tint */
.notice--error .notice__icon {
  background: var(--accent-100);
  color: var(--accent-700);
  box-shadow: inset 0 0 0 1px var(--accent-400);
}

@media (max-width: 520px) {
  .notice__actions { flex-direction: column; align-self: stretch; }
  .notice__actions .btn { width: 100%; }
}

/* ═══════════ SITE FOOTER ═══════════ */

.site-footer {
  background: var(--cream-200);
  color: var(--ink-600);
  padding: var(--space-24) 0 var(--space-8);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { max-width: 320px; }
.footer-brand .logo {
  color: var(--ink-900);
  margin-bottom: var(--space-4);
}
.footer-brand p {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: var(--space-6);
  color: var(--ink-600);
}

.footer-nap {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-600);
  font-style: normal;
}
.footer-nap strong {
  color: var(--ink-900);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.footer-nap a {
  color: var(--ink-700);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.footer-nap a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.footer-heading {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-6);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-list a {
  font-size: 0.93rem;
  color: var(--ink-600);
  transition: color 0.2s var(--ease);
}
.footer-list a:hover { color: var(--primary); }

.footer-bottom {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.85rem;
  color: var(--ink-600);
}
.footer-legal-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-legal-links a {
  color: var(--ink-600);
  transition: color 0.2s var(--ease);
}
.footer-legal-links a:hover { color: var(--primary); }

.footer-social {
  display: flex;
  gap: var(--space-3);
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--cream-100);
  display: grid;
  place-items: center;
  color: var(--ink-600);
  transition: all 0.25s var(--ease);
}
.footer-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-dark);
  transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }

/* ═══════════ LEAD FORM ═══════════ */

.lead-form {
  max-width: 32rem;
  margin: var(--space-lg) auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.lead-form__heading {
  margin: 0 0 var(--space-md);
  font-size: 1.5rem;
}

.lead-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.lead-form__field label {
  font-size: 0.875rem;
  font-weight: 600;
}

.lead-form__field input,
.lead-form__field textarea,
.lead-form__field select {
  padding: var(--space-sm) 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}

.lead-form__field input:focus,
.lead-form__field textarea:focus,
.lead-form__field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.lead-form__consent {
  font-size: 0.8125rem;
}

.lead-form__consent a {
  color: var(--color-primary);
}

.lead-form__submit {
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: var(--text-on-dark);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}

.lead-form__submit:hover {
  background: var(--color-primary-hover);
}

/* ═══════════ CONTACT PAGE — 2-COL SHELL ═══════════ */

.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-shell { grid-template-columns: 1fr; max-width: 640px; }
}

/* ═══════════ CONTACT FORM ═══════════ */

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--space-6);
  box-shadow: 0 1px 3px rgba(45, 90, 74, 0.04),
              0 8px 24px -12px rgba(45, 90, 74, 0.08);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700);
}
.contact-form__field label span[aria-hidden] {
  color: var(--accent-text);
  font-weight: 700;
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--ink-900);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--ink-400);
}
.contact-form__field input:hover,
.contact-form__field textarea:hover,
.contact-form__field select:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}
.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(45, 90, 74, 0.12);
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a4a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.contact-form__hint {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.5;
}

.contact-form__consent {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-700);
}
.contact-form__consent label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.contact-form__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-form__consent input[type="checkbox"]:hover {
  border-color: var(--primary);
}
.contact-form__consent input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.contact-form__consent input[type="checkbox"]:checked::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--text-on-dark);
  border-bottom: 2px solid var(--text-on-dark);
  transform: rotate(-45deg) translate(1px, -1px);
}
.contact-form__consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.contact-form__consent a {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.contact-form__submit {
  justify-self: flex-start;
  margin-top: var(--space-2);
}
@media (max-width: 560px) {
  .contact-form__submit { justify-self: stretch; justify-content: center; }
}

/* ═══════════ CONTACT ASIDE ═══════════ */

.contact-aside {
  display: grid;
  gap: var(--space-4);
  align-self: start;
  position: sticky;
  top: calc(var(--space-12) + 60px);
}
@media (max-width: 900px) {
  .contact-aside { position: static; }
}

.contact-aside__card {
  background: var(--forest-800);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: 0 18px 38px -16px rgba(35, 69, 54, 0.4);
  position: relative;
  overflow: hidden;
}
.contact-aside__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 0%, rgba(224, 107, 44, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(90, 152, 130, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.contact-aside__card > * { position: relative; }

.contact-aside__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.contact-aside__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-500));
  color: var(--text-on-dark);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(45, 90, 74, 0.28);
}
.contact-aside__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-on-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.contact-aside__role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-500);
  margin-top: 4px;
}

.contact-aside__lead {
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-aside__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.contact-aside__list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-4);
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.contact-aside__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  align-self: center;
}
.contact-aside__list a {
  color: var(--text-on-dark);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.2s var(--ease);
}
.contact-aside__list a:hover {
  border-bottom-color: var(--accent-500);
  color: var(--text-on-dark);
}

.contact-aside__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: rgba(224, 107, 44, 0.08);
  border: 1px solid rgba(224, 107, 44, 0.25);
  border-radius: var(--radius);
}
.contact-aside__note svg {
  width: 20px;
  height: 20px;
  color: var(--accent-600);
  margin-top: 2px;
  flex-shrink: 0;
}
.contact-aside__note p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.contact-aside__note strong { color: var(--ink-900); }

/* ═══════════ STANDORTE GRID ═══════════ */

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .locations-grid { grid-template-columns: 1fr; max-width: 540px; } }

.location {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.location:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(45, 90, 74, 0.08),
              0 20px 44px -14px rgba(45, 90, 74, 0.14);
  border-color: var(--line-strong);
}
.location--primary {
  border-color: var(--forest-700);
  background: linear-gradient(180deg, rgba(45, 90, 74, 0.04) 0%, var(--surface) 45%);
}

.location__head { display: grid; gap: var(--space-3); }
.location__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--forest-100);
  padding: 5px 11px;
  border-radius: 999px;
}
.location__badge--muted {
  color: var(--ink-500);
  background: var(--cream-100);
  border: 1px solid var(--line);
}
.location h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
}

.location__address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-700);
}
.location__lead {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.location__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.location__meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.4;
}
.location__meta svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}
.location__meta a {
  color: inherit;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.location__meta a:hover {
  color: var(--primary);
  border-bottom-color: currentColor;
}

.location__note {
  font-size: 0.88rem;
  color: var(--ink-500);
  line-height: 1.55;
  font-style: italic;
}

.location__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  transition: color 0.2s var(--ease);
}
.location__link svg { transition: transform 0.2s var(--ease); }
.location__link:hover { color: var(--accent); }
.location__link:hover svg { transform: translateX(3px); }

/* ═══════════ CAREER — WHY GRID ═══════════ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem);
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; gap: var(--space-8); max-width: 540px; } }

/* Editorial principles — de-carded: hairline rule + inline icon, no boxes
   (replaces the identical icon+heading+text card grid). */
.why-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.why-card-icon {
  grid-row: 1 / span 2;
  align-self: start;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--forest-50);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.why-card-icon svg { width: 21px; height: 21px; }
.why-card h3 {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.why-card p {
  grid-column: 2;
  color: var(--ink-600);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ═══════════ CAREER — JOBS ═══════════ */

.jobs-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
}

.job {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.job[open] {
  border-color: var(--line-strong);
  box-shadow: 0 8px 28px -10px rgba(45, 90, 74, 0.18);
}
.job-summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
}
.job-summary::-webkit-details-marker { display: none; }
.job-summary:hover .job-toggle {
  background: var(--primary);
  color: var(--text-on-dark);
}

.job-titlegroup { display: grid; gap: var(--space-3); }

.job-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(224, 107, 44, 0.1);
  padding: 5px 11px;
  border-radius: 999px;
}
.job-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: jobPulse 2.4s ease-in-out infinite;
}
@keyframes jobPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.job-summary h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-900);
}

.job-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.job-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--ink-600);
  line-height: 1.3;
}
.job-meta svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.job-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--forest-100);
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: all 0.2s var(--ease);
}
.job-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}
.job[open] .job-toggle svg { transform: rotate(180deg); }
.job[open] .job-toggle {
  background: var(--primary);
  color: var(--text-on-dark);
}

@media (max-width: 640px) {
  .job-summary {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .job-toggle { justify-self: flex-start; }
}

.job-body {
  padding: 0 clamp(1.5rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) {
  .job-body { grid-template-columns: 1fr; gap: var(--space-6); }
}

.job-intro {
  grid-column: 1 / -1;
  font-size: 1.02rem;
  color: var(--ink-700);
  line-height: 1.65;
  max-width: 70ch;
}

.job-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.job-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.job-col ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--ink-700);
  line-height: 1.55;
}
.job-col ul li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.job-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-6);
  margin-top: var(--space-2);
  border-top: 1px dashed var(--line);
}
.job-cta-note {
  font-size: 0.88rem;
  color: var(--ink-500);
  line-height: 1.5;
  max-width: 42ch;
}
.job-cta-note strong { color: var(--ink-800); }

/* ═══════════ CAREER — BENEFITS ═══════════ */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefits-grid { grid-template-columns: 1fr; max-width: 440px; } }

.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}
.benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(224, 107, 44, 0.1);
  color: var(--accent-600);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2);
}
.benefit-icon svg { width: 20px; height: 20px; }
.benefit h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.benefit p {
  font-size: 0.94rem;
  color: var(--ink-600);
  line-height: 1.55;
}

/* ═══════════ CAREER — QUOTE STRIP ═══════════ */

.career-quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.career-quote-mark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-4);
}
.career-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink-800);
  font-variation-settings: "SOFT" 80, "WONK" 1;
  margin-bottom: var(--space-6);
}
.career-quote-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.92rem;
  color: var(--ink-500);
}
.career-quote-author strong {
  color: var(--ink-800);
  font-weight: 600;
}

/* ═══════════ ABOUT — FOUNDERS ═══════════ */

.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .founders-grid { grid-template-columns: 1fr; max-width: 560px; }
}

.founder-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
  position: relative;
}
.founder-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 4px 12px rgba(45, 90, 74, 0.08),
              0 22px 44px -14px rgba(45, 90, 74, 0.14);
}

.founder-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.founder-portrait {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-600), var(--forest-800));
  display: grid;
  place-items: center;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  overflow: hidden;
  box-shadow: 0 10px 24px -10px rgba(35, 69, 54, 0.4);
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-900);
}
.founder-role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}

.founder-bio {
  color: var(--ink-700);
  font-size: 0.98rem;
  line-height: 1.65;
}

.founder-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.founder-stat-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.founder-stat-label {
  font-size: 0.74rem;
  color: var(--ink-500);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

.founder-focus h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
  margin-bottom: var(--space-3);
}
.founder-focus ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.founder-focus li {
  font-size: 0.85rem;
  color: var(--ink-700);
  background: var(--cream-100);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  line-height: 1.2;
}

.founder-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-800);
  position: relative;
  padding-left: var(--space-6);
  margin: 0;
  font-variation-settings: "SOFT" 80, "WONK" 1;
}
.founder-quote::before {
  content: "\201C";
  position: absolute;
  left: -0.08em;
  top: -0.3em;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--forest-100);
  pointer-events: none;
}

.founder-links {
  display: flex;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line);
}
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-600);
  transition: color 0.2s var(--ease);
}
.founder-link:hover {
  color: var(--primary);
}
.founder-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ═══════════ ABOUT — KPI 4-COL ═══════════ */

.kpi-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
@media (max-width: 1000px) {
  .kpi-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12) var(--space-8);
  }
  .kpi-grid--4 .kpi-item + .kpi-item::before { display: none; }
}
@media (max-width: 560px) {
  .kpi-grid--4 {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

.kpi-note {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 6px;
}

/* ═══════════ ABOUT — TEAM SOLO ═══════════ */

.team-grid--solo {
  grid-template-columns: 1fr;
  max-width: 540px;
}

.team-grid--solo .team-card {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  gap: var(--space-4);
}

.team-bio {
  color: var(--ink-600);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 42ch;
  margin-top: var(--space-2);
}

.team-note {
  margin-top: var(--space-10);
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-600);
}
.team-note a {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.team-note a:hover {
  border-bottom-color: var(--primary);
}

/* ════════════════════════════════════════════════════════════════════════
   SERP Snippet Generator — tool page styles
   Namespaced .serp-* so nothing leaks into the rest of the site. Surrounding
   chrome reuses the site design tokens (_base.css); the SERP preview block
   itself is deliberately faithful to Google (Arial, Google's link/desc colours
   — those live as inline styles driven by constants.js COLORS).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tools hub: "coming soon" card (links to contact to suggest a tool) ── */
.service-card--soon {
  opacity: 0.85;
  border-style: dashed;
}
.service-card--soon:hover { opacity: 1; }

/* ── Tool section shell ── */
.serp-section {
  padding-top: var(--space-6);
}
.serp-shell {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: var(--container-padding, 1.5rem);
}
.serp-disclaimer {
  margin-top: var(--space-5);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-500, #6b6b6b);
  text-align: center;
}

/* ── Loading skeleton (reserves height → no layout shift) ── */
.serp-app {
  min-height: 560px;
}
.serp-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.serp-skeleton__panel {
  min-height: 520px;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(
    100deg,
    var(--cream-100, #faf9f7) 30%,
    var(--cream-200, #efece8) 50%,
    var(--cream-100, #faf9f7) 70%
  );
  background-size: 200% 100%;
  animation: serpShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .serp-skeleton__panel { animation: none; }
}
@keyframes serpShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.serp-loading {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--ink-500, #6b6b6b);
  font-size: 0.9rem;
}
/* Once the app has hydrated it removes the skeleton; hide leftovers. */
.serp-app.is-ready .serp-skeleton,
.serp-app.is-ready .serp-loading { display: none; }
.serp-noscript,
.serp-section .serp-noscript {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius, 10px);
  background: var(--cream-100, #faf9f7);
  border: 1px solid var(--line, #e7e3dd);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .serp-skeleton { grid-template-columns: 1fr; }
  .serp-skeleton__panel { min-height: 320px; }
}

/* ── Educational cards ── */
.serp-edu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.serp-edu__card {
  padding: var(--space-6);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e7e3dd);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-xs);
}
.serp-edu__card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary, #2d5a4a);
}
.serp-edu__card p {
  margin: 0 0 var(--space-3);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-700, #3a3a3a);
}
.serp-edu__card p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════
   Interactive app — editor (left) + preview (right)
   ════════════════════════════════════════════════════════════════════════ */
.serp-app__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 940px) {
  .serp-app__inner { grid-template-columns: 1fr; }
}

/* Local zone colours (traffic-light semantics — independent of brand accent) */
.serp-app {
  --serp-green: #1f8a4c;
  --serp-amber: #c07c14;
  --serp-red: #c8492c;
  --serp-line: var(--line, #e7e3dd);
  --serp-surface: var(--surface, #ffffff);
}

/* ── Editor ── */
.serp-editor {
  background: var(--serp-surface);
  border: 1px solid var(--serp-line);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.serp-tabs {
  display: flex;
  gap: 2px;
  padding: var(--space-2);
  background: var(--cream-100, #faf9f7);
  border-bottom: 1px solid var(--serp-line);
  flex-wrap: wrap;
}
.serp-tab {
  flex: 1 1 auto;
  padding: 0.55rem 0.75rem;
  font: 600 0.82rem/1 var(--font-body);
  color: var(--ink-600, #555);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.15s var(--ease, ease), color 0.15s ease;
}
.serp-tab:hover { color: var(--primary, #2d5a4a); }
.serp-tab.is-active {
  background: var(--serp-surface);
  color: var(--primary, #2d5a4a);
  box-shadow: var(--shadow-xs);
}
.serp-editor__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.serp-field { display: flex; flex-direction: column; gap: 0.35rem; }
.serp-field__label {
  font: 600 0.78rem/1 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--ink-700, #3a3a3a);
  text-transform: uppercase;
}
.serp-field__hint { font-size: 0.74rem; color: var(--ink-500, #777); }
.serp-input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: 400 0.95rem/1.45 var(--font-body);
  color: var(--text, #222);
  background: var(--cream-100, #faf9f7);
  border: 1px solid var(--serp-line);
  border-radius: var(--radius-sm, 6px);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.serp-input:focus {
  outline: none;
  border-color: var(--primary, #2d5a4a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2d5a4a) 18%, transparent);
}
.serp-input--title { font-weight: 500; }
.serp-input--date { max-width: 220px; }
.serp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 520px) { .serp-grid-2 { grid-template-columns: 1fr; } }
.serp-fetch-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.serp-fetch-status { font-size: 0.8rem; color: var(--ink-500, #777); }

/* ── Counters ── */
.serp-counter { display: flex; flex-direction: column; gap: 0.3rem; }
.serp-counter__head { display: flex; justify-content: space-between; align-items: baseline; }
.serp-counter__label {
  font: 600 0.72rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-500, #777);
}
.serp-counter__status { font: 600 0.78rem/1 var(--font-body); }
.serp-counter--green .serp-counter__status { color: var(--serp-green); }
.serp-counter--amber .serp-counter__status { color: var(--serp-amber); }
.serp-counter--red .serp-counter__status { color: var(--serp-red); }
.serp-counter__bar {
  height: 7px;
  border-radius: 99px;
  background: var(--cream-200, #efece8);
  overflow: hidden;
}
.serp-counter__fill { height: 100%; border-radius: 99px; transition: width 0.12s linear, background 0.2s ease; }
.serp-counter--green .serp-counter__fill { background: var(--serp-green); }
.serp-counter--amber .serp-counter__fill { background: var(--serp-amber); }
.serp-counter--red .serp-counter__fill { background: var(--serp-red); }
.serp-counter__readout { display: flex; justify-content: space-between; align-items: baseline; }
.serp-counter__px { font-size: 0.95rem; color: var(--text, #222); }
.serp-counter__px strong { font-size: 1.05rem; }
.serp-counter__chars { font-size: 0.74rem; color: var(--ink-500, #777); }

/* ── Toggles ── */
.serp-toggles { display: flex; flex-direction: column; gap: 0.5rem; padding-top: var(--space-2); }
.serp-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.serp-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.serp-toggle__track {
  flex: 0 0 auto;
  width: 38px; height: 22px;
  border-radius: 99px;
  background: var(--cream-200, #d9d4cc);
  position: relative;
  transition: background 0.18s var(--ease, ease);
}
.serp-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform 0.18s var(--ease-out, ease);
}
.serp-toggle__input:checked + .serp-toggle__track { background: var(--primary, #2d5a4a); }
.serp-toggle__input:checked + .serp-toggle__track .serp-toggle__thumb { transform: translateX(16px); }
.serp-toggle__input:focus-visible + .serp-toggle__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2d5a4a) 30%, transparent); }
.serp-toggle__label { font-size: 0.88rem; color: var(--ink-700, #3a3a3a); }
.serp-toggle__hint { color: var(--ink-500, #777); }
.serp-date-row { display: none; }
.serp-date-row.is-visible { display: block; }

/* ── Buttons / actions ── */
.serp-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2); }
.serp-btn {
  font: 600 0.84rem/1 var(--font-body);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--serp-line);
  background: var(--cream-100, #faf9f7);
  color: var(--ink-800, #2a2a2a);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.serp-btn:hover { background: var(--cream-200, #efece8); border-color: var(--line-strong, #d6d0c8); }
.serp-btn:active { transform: translateY(1px); }
.serp-btn--ghost { background: transparent; }
.serp-btn.is-copied { color: var(--serp-green); border-color: var(--serp-green); }

/* ── Preview ── */
.serp-preview {
  position: sticky;
  top: var(--space-6);
  background: var(--serp-surface);
  border: 1px solid var(--serp-line);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (max-width: 940px) { .serp-preview { position: static; } }
.serp-preview__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--cream-100, #faf9f7);
  border-bottom: 1px solid var(--serp-line);
  flex-wrap: wrap;
}
.serp-seg { display: inline-flex; background: var(--cream-200, #efece8); border-radius: 99px; padding: 3px; }
.serp-seg__btn {
  border: 0; background: transparent; cursor: pointer;
  font: 600 0.78rem/1 var(--font-body);
  color: var(--ink-600, #555);
  padding: 0.4rem 0.7rem; border-radius: 99px;
  transition: background 0.15s ease, color 0.15s ease;
}
.serp-seg__btn.is-active { background: #fff; color: var(--primary, #2d5a4a); box-shadow: var(--shadow-xs); }
.serp-theme-btn {
  border: 1px solid var(--serp-line); background: #fff; cursor: pointer;
  font: 600 0.78rem/1 var(--font-body); color: var(--ink-700, #3a3a3a);
  padding: 0.42rem 0.7rem; border-radius: 99px;
}
.serp-theme-btn.is-dark { background: #202124; color: #e8eaed; border-color: #3c4043; }
.serp-badges { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.serp-badge {
  font: 600 0.72rem/1 var(--font-body);
  padding: 0.32rem 0.5rem; border-radius: 99px; white-space: nowrap;
}
.serp-badge--green { background: color-mix(in srgb, var(--serp-green) 14%, transparent); color: var(--serp-green); }
.serp-badge--amber { background: color-mix(in srgb, var(--serp-amber) 16%, transparent); color: var(--serp-amber); }
.serp-badge--red { background: color-mix(in srgb, var(--serp-red) 15%, transparent); color: var(--serp-red); }

/* ── Stage + Google result ── */
.serp-stage { padding: var(--space-6); min-height: 360px; transition: background 0.2s ease; }
.serp-stage--dark { background: #202124; }
.serp-result { max-width: 600px; margin: 0 auto; }
.serp-result--mobile { max-width: 412px; }
.serp-organic { font-family: Arial, sans-serif; }
.serp-site { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
.serp-favicon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; background: #fff; border: 1px solid rgba(0,0,0,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: #5f6368; padding: 4px;
}
.serp-favicon--globe svg { width: 100%; height: 100%; }
.serp-site__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.serp-site__name { font: 400 14px/1.3 Arial, sans-serif; }
.serp-site__url { font: 400 12px/1.3 Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-kebab { margin-left: auto; color: #70757a; }
.serp-kebab svg { width: 18px; height: 18px; }
.serp-title-wrap { position: relative; margin: 2px 0 1px; }
/* When the truncation ruler is on, reserve space above the title so its px
   label sits in a clear band below the breadcrumb (instead of overlapping it). */
.serp-title-wrap--ruler { margin-top: 1.5rem; }
.serp-title {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  /* Clip cleanly if a thumbnail narrows the text column (rather than spilling
     over the thumbnail / panel edge). Mobile uses line-clamp instead. */
  overflow: hidden;
  text-overflow: ellipsis;
}
.serp-title:hover { text-decoration: underline; }
.serp-desc { margin-top: 2px; word-break: break-word; }
.serp-desc b { font-weight: 700; }
.serp-ruler {
  position: absolute; top: -2px; bottom: -2px;
  width: 0; border-left: 2px dashed var(--serp-red);
  pointer-events: none;
}
.serp-ruler__label {
  position: absolute; top: -1.35rem; right: 0;
  font: 600 0.7rem/1 var(--font-body); color: var(--serp-red);
  background: var(--serp-surface); padding: 0 0.25rem;
}
.serp-stage--dark .serp-ruler__label { background: #202124; }

/* Mobile: line-clamped title (2 lines) / description (3 lines) + a real
   Google-style result card wrapping the text and thumbnail. */
.serp-title--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow: hidden;
}
.serp-desc--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.serp-result--mobile .serp-result__row {
  background: #fff; border: 1px solid #ececec; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.serp-stage--dark .serp-result--mobile .serp-result__row {
  background: #303134; border-color: #3c4043;
}

/* ── Placeholder (tabs not yet wired) ── */
.serp-placeholder { text-align: center; padding: var(--space-10) var(--space-4); color: var(--ink-500, #777); }
.serp-placeholder h3 { font-family: var(--font-display); color: var(--primary, #2d5a4a); margin-bottom: 0.4rem; }

/* ── Code output ── */
.serp-code { display: flex; flex-direction: column; gap: var(--space-4); }
.serp-code__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.serp-code__intro { font-size: 0.82rem; color: var(--ink-500, #777); margin: 0; max-width: 32ch; }
.serp-code__block { border: 1px solid var(--serp-line); border-radius: var(--radius, 10px); overflow: hidden; }
.serp-code__block-head { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.7rem; background: var(--cream-100, #faf9f7); border-bottom: 1px solid var(--serp-line); }
.serp-code__label { font: 600 0.78rem/1 var(--font-body); color: var(--ink-700, #3a3a3a); }
.serp-code__pre {
  margin: 0; padding: 0.8rem; overflow-x: auto;
  font: 400 0.8rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink-800, #2a2a2a); background: var(--serp-surface);
  white-space: pre; tab-size: 2;
}

/* ════════════════════════════════════════════════════════════════════════
   Run 2 — rich results, SERP features, social cards, emoji, advanced controls
   ════════════════════════════════════════════════════════════════════════ */

/* result row + thumbnail column */
.serp-result__row { display: flex; gap: 14px; align-items: flex-start; }
.serp-organic { flex: 1 1 auto; min-width: 0; }
.serp-thumb-slot:empty { display: none; }
.serp-thumb-slot { flex: 0 0 auto; }
.serp-thumb { position: relative; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
  background: linear-gradient(135deg, #e8eaed, #d2d5da); }
.serp-thumb--image { width: 92px; height: 92px; }
.serp-thumb--video { width: 160px; height: 90px; }
.serp-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.serp-thumb__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #9aa0a6; }
.serp-thumb__ph svg { width: 38%; height: 38%; }
.serp-thumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.serp-thumb__play svg { width: 40px; height: 40px; }
.serp-thumb__badge { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,0.78); color: #fff;
  font: 600 11px/1 Arial, sans-serif; padding: 2px 4px; border-radius: 3px; }
/* Thumbnails stay on the right on mobile too (just smaller) — matches Google. */
.serp-result--mobile .serp-thumb--image { width: 80px; height: 80px; }
.serp-result--mobile .serp-thumb--video { width: 120px; height: 68px; }

/* rating + product rows */
.serp-rating, .serp-product { font: 400 13px/1.5 Arial, sans-serif; color: #70757a; margin: 2px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.serp-rating__stars { color: #fbbc04; letter-spacing: 1px; }
.serp-stage--dark .serp-rating, .serp-stage--dark .serp-product { color: #9aa0a6; }
.serp-product__price { color: #202124; font-weight: 700; }
.serp-stage--dark .serp-product__price { color: #e8eaed; }
.serp-product__avail--in { color: #1f8a4c; }
.serp-product__avail--out { color: #c8492c; }

/* sitelinks */
.serp-sitelinks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; margin-top: 10px; }
.serp-sitelink { display: block; text-decoration: none; padding: 2px 0; }
.serp-sitelink__title { display: block; color: #1a0dab; font: 400 16px/1.3 Arial, sans-serif; }
.serp-sitelink__title:hover { text-decoration: underline; }
.serp-sitelink__url { display: block; color: #4d5156; font: 400 12px/1.3 Arial, sans-serif; }
.serp-stage--dark .serp-sitelink__title { color: #8ab4f8; }
.serp-stage--dark .serp-sitelink__url { color: #bdc1c6; }

/* FAQ rich result */
.serp-faqrr { margin-top: 8px; border-top: 1px solid var(--serp-line); }
.serp-faqrr__warn { font: 400 12px/1.45 var(--font-body); color: var(--serp-amber);
  background: color-mix(in srgb, var(--serp-amber) 10%, transparent); padding: 6px 8px; border-radius: 6px; margin: 8px 0; }
.serp-faqrr__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--serp-line);
  font: 400 15px/1.3 Arial, sans-serif; color: #202124; }
.serp-stage--dark .serp-faqrr__row { color: #e8eaed; border-color: #3c4043; }
.serp-faqrr__chevron { color: #70757a; }

/* SERP features (push-down) */
.serp-features-slot:empty { display: none; }
.serp-features-slot { margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; }
.serp-feat { border: 1px solid var(--serp-line); border-radius: 12px; padding: 12px 14px; background: var(--cream-100, #faf9f7); }
.serp-stage--dark .serp-feat { background: #2a2b2e; border-color: #3c4043; color: #e8eaed; }
.serp-feat__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 13px/1 var(--font-body); }
.serp-feat__spark { width: 18px; height: 18px; color: #4285f4; }
.serp-feat__spark svg { width: 100%; height: 100%; }
.serp-feat__label { font-weight: 700; }
.serp-feat__tag, .serp-feat__sponsored { font-size: 11px; font-weight: 700; }
.serp-feat__tag { color: #4285f4; }
.serp-feat__sponsored { color: #202124; }
.serp-stage--dark .serp-feat__sponsored { color: #e8eaed; }
.serp-feat__note { font: 400 11.5px/1.45 var(--font-body); color: var(--ink-500, #777); margin: 8px 0 0; }
.serp-stage--dark .serp-feat__note { color: #9aa0a6; }
.serp-feat__note-icon { color: var(--primary, #2d5a4a); }
.serp-skel-line { display: block; height: 10px; border-radius: 5px; background: var(--cream-200, #e3ded6); margin: 6px 0; }
.serp-stage--dark .serp-skel-line { background: #3c4043; }
.serp-skel-line--short { width: 55%; }
.serp-ad__url { font: 400 12px/1.4 Arial, sans-serif; color: #202124; }
.serp-ad__title { font: 400 18px/1.3 Arial, sans-serif; color: #1a0dab; text-decoration: none; display: block; }
.serp-ad__desc { font: 400 13px/1.5 Arial, sans-serif; color: #4d5156; }
.serp-stage--dark .serp-ad__url { color: #bdc1c6; } .serp-stage--dark .serp-ad__title { color: #8ab4f8; } .serp-stage--dark .serp-ad__desc { color: #bdc1c6; }
.serp-featured__text { font: 400 14px/1.6 Arial, sans-serif; margin: 0 0 6px; }
.serp-featured__src { font: 400 13px/1 Arial, sans-serif; color: #1a0dab; text-decoration: none; }
.serp-paa__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--serp-line); font: 400 15px/1.3 Arial, sans-serif; }
.serp-paa__row:first-child { border-top: 0; }
.serp-paa__plus { color: #70757a; font-size: 1.2rem; }
.serp-local { display: flex; gap: 12px; }
.serp-local__map { flex: 0 0 90px; height: 90px; border-radius: 8px; background: #e8f0e9; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.serp-local__list { flex: 1; }
.serp-local__item { padding: 6px 0; border-bottom: 1px solid var(--serp-line); }
.serp-local__name { display: block; font: 500 14px/1.3 Arial, sans-serif; color: #1a0dab; }
.serp-local__meta { display: block; font: 400 12px/1.3 Arial, sans-serif; color: #70757a; }

/* advanced collapsibles */
.serp-adv { border: 1px solid var(--serp-line); border-radius: var(--radius, 10px); overflow: hidden; }
.serp-adv__summary { cursor: pointer; padding: 0.6rem 0.8rem; font: 600 0.82rem/1 var(--font-body); color: var(--ink-700, #3a3a3a);
  background: var(--cream-100, #faf9f7); list-style: none; }
.serp-adv__summary::-webkit-details-marker { display: none; }
.serp-adv__summary::after { content: "＋"; float: right; color: var(--ink-500, #777); }
.serp-adv[open] .serp-adv__summary::after { content: "−"; }
.serp-adv__body { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* og:image live preview (under the og:image URL field) */
.serp-ogimg { margin-top: -0.2rem; }
.serp-ogimg.is-empty { display: none; }
.serp-ogimg__img {
  display: block; width: 100%; max-width: 280px;
  aspect-ratio: 1.91 / 1; object-fit: cover;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--line, #e7e3dd);
  background: var(--cream-50, #f5f4f2);
}
.serp-ogimg.is-error .serp-ogimg__img { display: none; }
.serp-ogimg__note { display: none; margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--ink-500, #777); }
.serp-ogimg.is-error .serp-ogimg__note { display: block; }

/* fetch status */
.serp-fetch-status.is-ok { color: var(--serp-green); }
.serp-fetch-status.is-error { color: var(--serp-red); }

/* emoji */
.serp-field-head { display: flex; justify-content: space-between; align-items: center; }
.serp-emoji-toggle { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.serp-emoji-panel { display: none; }
.serp-emoji-panel.is-open { display: block; }
.serp-emoji__hint { font-size: 0.74rem; color: var(--ink-500, #777); margin: 0 0 0.4rem; }
.serp-emoji__grid { display: flex; flex-wrap: wrap; gap: 4px; }
.serp-emoji__btn { width: 32px; height: 32px; border: 1px solid var(--serp-line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 1rem; }
.serp-emoji__btn:hover { background: var(--cream-100, #faf9f7); }
.serp-emoji-warn:not(:empty) { font: 400 0.78rem/1.45 var(--font-body); color: var(--serp-amber); margin: 0; }

/* social cards */
.serp-social { display: flex; flex-direction: column; gap: var(--space-4); }
.serp-social__intro p { font-size: 0.85rem; color: var(--ink-500, #777); margin: 0; }
.serp-social__validation .serp-social__warn { font: 400 0.82rem/1.5 var(--font-body); color: var(--serp-amber);
  background: color-mix(in srgb, var(--serp-amber) 10%, transparent); padding: 0.6rem 0.7rem; border-radius: 8px; margin: 0; }
.serp-social__validation .serp-social__ok { font: 400 0.82rem/1.5 var(--font-body); color: var(--serp-green);
  background: color-mix(in srgb, var(--serp-green) 10%, transparent); padding: 0.6rem 0.7rem; border-radius: 8px; margin: 0; }
.serp-social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 720px) { .serp-social__grid { grid-template-columns: 1fr; } }
.serp-social__label { display: block; font: 600 0.72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-500, #777); margin-bottom: 0.4rem; }
.serp-card { border: 1px solid var(--serp-line); border-radius: 10px; overflow: hidden; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.serp-card__media { position: relative; width: 100%; background: var(--cream-200, #efece8); }
.serp-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serp-card__img--empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-500, #777); font-size: 0.85rem; }
.serp-card__body { padding: 10px 12px; }
.serp-card__body--x { } 
.serp-card__host { font-size: 12px; color: #65676b; text-transform: lowercase; }
.serp-card--fb .serp-card__host { text-transform: uppercase; letter-spacing: 0.02em; }
.serp-card__title { font-size: 15px; font-weight: 700; color: #1c1e21; line-height: 1.3; margin: 2px 0; }
.serp-card__desc { font-size: 13px; color: #606770; line-height: 1.4; }
.serp-card--x, .serp-card--x-small { border-radius: 16px; }
.serp-card--x-small, .serp-card--wa { display: flex; align-items: stretch; }
.serp-card__thumb { flex: 0 0 84px; background: var(--cream-200, #efece8); position: relative; }
.serp-card__thumb--wa { flex-basis: 72px; }
.serp-card__thumb .serp-card__img { position: absolute; inset: 0; }
.serp-card__thumb .serp-card__img--empty { position: absolute; inset: 0; }
.serp-card--wa { background: #fff; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   Run 3 — bulk CSV table + export/action row
   ════════════════════════════════════════════════════════════════════════ */
.serp-bulk { display: flex; flex-direction: column; gap: var(--space-4); }
.serp-bulk__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.serp-bulk__intro p { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--ink-600, #555); max-width: 46ch; }
.serp-bulk__device { color: var(--ink-500, #777) \!important; font-style: italic; }
.serp-bulk__upload { position: relative; overflow: hidden; cursor: pointer; }
.serp-bulk__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.serp-bulk__empty { font-size: 0.88rem; color: var(--ink-500, #777); padding: var(--space-6); text-align: center; border: 1px dashed var(--serp-line); border-radius: var(--radius, 10px); }
.serp-bulk__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.serp-bulk__summary { font-size: 0.82rem; color: var(--ink-600, #555); }
.serp-bulk__table-wrap { overflow-x: auto; border: 1px solid var(--serp-line); border-radius: var(--radius, 10px); max-height: 540px; overflow-y: auto; }
.serp-bulk__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.serp-bulk__table th { position: sticky; top: 0; background: var(--cream-100, #faf9f7); text-align: left; padding: 0.5rem 0.6rem; font-weight: 600; border-bottom: 1px solid var(--serp-line); z-index: 1; }
.serp-bulk__table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--serp-line); vertical-align: top; }
.serp-bulk__num { color: var(--ink-500, #777); }
.serp-bulk__url { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-600, #555); }
.serp-bulk__text { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.25rem; }
.serp-bulk__chip { display: inline-block; font: 600 0.72rem/1 var(--font-body); padding: 0.22rem 0.4rem; border-radius: 99px; white-space: nowrap; }
.serp-bulk__chip--green { background: color-mix(in srgb, var(--serp-green) 14%, transparent); color: var(--serp-green); }
.serp-bulk__chip--amber { background: color-mix(in srgb, var(--serp-amber) 16%, transparent); color: var(--serp-amber); }
.serp-bulk__chip--red { background: color-mix(in srgb, var(--serp-red) 15%, transparent); color: var(--serp-red); }
.serp-bulk__note { font-size: 0.78rem; color: var(--ink-500, #777); margin: 0; }
.serp-actions { row-gap: 0.5rem; }

/* ════════════════════════════════════════════════════════════════════════
   Round 2 — full-SERP context view + toggle
   ════════════════════════════════════════════════════════════════════════ */
.serp-context-btn.is-active {
  background: var(--accent-600, #c4591f); color: #fff; border-color: var(--accent-600, #c4591f);
}
.serp-page { max-width: 640px; margin: 0 auto; }
.serp-page__head { margin-bottom: 20px; }
.serp-page__bar {
  display: flex; align-items: center; gap: 10px; max-width: 520px;
  border: 1px solid var(--serp-line); border-radius: 24px; padding: 9px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08); background: #fff;
}
.serp-stage--dark .serp-page__bar { background: #303134; border-color: #5f6368; }
.serp-page__search-icon { display: inline-flex; color: #9aa0a6; }
.serp-page__search-icon svg { width: 18px; height: 18px; }
.serp-page__query { font: 400 15px/1 Arial, sans-serif; color: #3c4043; }
.serp-stage--dark .serp-page__query { color: #e8eaed; }
.serp-page__tabs { display: flex; gap: 22px; margin-top: 14px; border-bottom: 1px solid var(--serp-line); }
.serp-page__tab { font: 400 13px/1 Arial, sans-serif; color: #5f6368; padding-bottom: 11px; }
.serp-page__tab--active { color: #1a73e8; box-shadow: inset 0 -2px 0 #1a73e8; }
.serp-stage--dark .serp-page__tab { color: #9aa0a6; }
.serp-stage--dark .serp-page__tab--active { color: #8ab4f8; box-shadow: inset 0 -2px 0 #8ab4f8; }
.serp-page__results { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
/* Inside the SERP page the result/competitor blocks fill the column width
   (capped by their own max-width) so nothing overflows the narrower panel. */
.serp-page__results .serp-result { max-width: 100%; margin: 0; }
/* The highlight is a real bordered, padded box (not a negative-inset pseudo) so
   the ring always sits OUTSIDE the snippet with breathing room — on flat desktop
   results the favicon/brand row no longer collides with the top border/label. */
.serp-page__yours {
  align-self: stretch;
  position: relative;
  box-sizing: border-box;
  padding: 18px 14px 14px;
  border: 2px solid var(--accent-600, #c4591f);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-600, #c4591f) 4%, transparent);
}
.serp-stage--dark .serp-page__yours {
  background: color-mix(in srgb, var(--accent-600, #c4591f) 12%, transparent);
}
.serp-page__yours-label {
  position: absolute; top: -11px; left: 14px; z-index: 2;
  background: var(--accent-600, #c4591f); color: #fff;
  font: 600 11px/1 var(--font-body); padding: 3px 9px; border-radius: 99px;
}

/* ═══════════ SCROLL REVEAL ═══════════ */

.reveal {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
/* Hide-before-reveal only when JS runs (html.js set in base.njk) — without
   JS the content must stay visible */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════ BENTO FLOAT ═══════════ */

@keyframes bentoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .bento, .svc-card, .svc-chip { animation: none !important; }
}