/* ============================================================
   Andreas Wosika – Lifecoaching & Mentoring Nürnberg
   Design system: warm, ruhig, seriös. Editorial Minimalismus.
   ============================================================ */

@import url('fonts.css');

:root{
  /* Colors — "Premium Black & Gold" high-end palette */
  --color-bg: #FAF8F3;
  --color-bg-alt: #F1ECE1;
  --color-surface: #FFFFFF;
  --color-ink: #1C1917;
  --color-ink-soft: #46413A;
  --color-muted: #766F62;
  --color-primary: #1C1917;
  --color-primary-dark: #100E0C;
  --color-primary-light: #3A342D;
  --color-accent: #AB8A4E;
  --color-accent-soft: #F2E8D6;
  --color-border: #E3DACB;
  --color-on-primary: #FAF8F3;

  /* Secondary accent — muted oxblood, used sparingly for a second point of emphasis */
  --color-secondary: #8C1F1F;
  --color-secondary-dark: #551313;
  --color-secondary-light: #B23434;
  --color-secondary-soft: #E9DFD9;

  /* Tertiary accent — deep pine green, the identity color for Mentoring content
     and a third point of chromatic variety across the site (growth/renewal) */
  --color-tertiary: #1F4D3A;
  --color-tertiary-dark: #123024;
  --color-tertiary-light: #3D7A5C;
  --color-tertiary-soft: #E1EAE3;

  /* Ambient glow — RGB triplets (not hex) so hover shadows can tint via rgba().
     Swapped per content pillar by the .theme-* body classes below. */
  --glow-rgb: 171, 138, 78;

  /* Elevation — 4-step shadow scale for deliberate depth hierarchy */
  --shadow-1: 0 1px 3px rgba(28, 25, 23, 0.08);
  --shadow-2: 0 10px 24px -10px rgba(28, 25, 23, 0.22);
  --shadow-3: 0 24px 48px -18px rgba(28, 25, 23, 0.30);
  --shadow-4: 0 36px 72px -24px rgba(28, 25, 23, 0.38);

  /* Typography — neo-grotesque display + sans body.
     'Helvetica Now Display' leads the display stack so a purchased Monotype
     web licence can be dropped in later without touching any other rule;
     until then Inter Tight renders for everyone. Lora/Playfair stay declared
     in fonts.css so the earlier serif direction can be restored by pointing
     --font-display back at them. */
  --font-display: 'Helvetica Now Display', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: var(--font-display);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --max-width: 1160px;
  --max-width-narrow: 720px;
  --radius: 4px;
  --radius-lg: 8px;

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

/* ---------- Content-pillar theme accents ----------
   Lifecoaching pages stay on the default gold accent (no class needed).
   Mentoring pages get the pine green; Burnout-Coaching pages reinforce
   the existing oxblood. Scoped additively below — base rules untouched. */
body.theme-mentoring{ --glow-rgb: 31, 77, 58; }
body.theme-burnout{ --glow-rgb: 140, 31, 31; }

body.theme-mentoring .eyebrow{ color: var(--color-tertiary); }
body.theme-mentoring .eyebrow::before{ background: var(--color-tertiary); }
body.theme-mentoring .pull-quote{ border-left-color: var(--color-tertiary); }
body.theme-mentoring .pull-quote cite{ color: var(--color-tertiary); }
body.theme-mentoring .compare-table td.is-highlight{ color: var(--color-tertiary); }

body.theme-burnout .eyebrow{ color: var(--color-secondary); }
body.theme-burnout .eyebrow::before{ background: var(--color-secondary); }

/* ---------- Multi-color rotation for repeating icon grids ----------
   Independent of the page theme above — every outcome grid, process list
   and plain-card grid cycles gold → pine → oxblood so the site reads as
   colorful throughout, not just tinted per section. */
.outcome-item:nth-child(3n+2), .process__item:nth-child(3n+2){ --glow-rgb: 31, 77, 58; }
.outcome-item:nth-child(3n), .process__item:nth-child(3n){ --glow-rgb: 140, 31, 31; }
.outcome-item:nth-child(3n+1), .process__item:nth-child(3n+1){ --glow-rgb: 171, 138, 78; }
.outcome-item:nth-child(3n+2) .outcome-item__icon{ background: var(--color-tertiary-soft); color: var(--color-tertiary); }
.outcome-item:nth-child(3n+2):hover .outcome-item__icon,
.outcome-item:nth-child(3n+2):active .outcome-item__icon{ background: var(--color-tertiary); }
.outcome-item:nth-child(3n) .outcome-item__icon{ background: var(--color-secondary-soft); color: var(--color-secondary); }
.outcome-item:nth-child(3n):hover .outcome-item__icon,
.outcome-item:nth-child(3n):active .outcome-item__icon{ background: var(--color-secondary); }

.process__item:nth-child(3n+2) .process__num{ color: var(--color-tertiary); }
.process__item:nth-child(3n+2):hover .process__num,
.process__item:nth-child(3n+2):active .process__num{ background: var(--color-tertiary); border-color: var(--color-tertiary); }
.process__item:nth-child(3n) .process__num{ color: var(--color-secondary); }
.process__item:nth-child(3n):hover .process__num,
.process__item:nth-child(3n):active .process__num{ background: var(--color-secondary); border-color: var(--color-secondary); }

.grid--3 .card:nth-child(3n+2) .card__icon:not(.card__icon--secondary):not(.card__icon--tertiary){
  background: var(--color-tertiary-soft); color: var(--color-tertiary);
}
.grid--3 .card:nth-child(3n+2):hover .card__icon:not(.card__icon--secondary):not(.card__icon--tertiary),
.grid--3 .card:nth-child(3n+2):active .card__icon:not(.card__icon--secondary):not(.card__icon--tertiary){
  background: var(--color-tertiary); color: var(--color-surface);
}
.grid--3 .card:nth-child(3n) .card__icon:not(.card__icon--secondary):not(.card__icon--tertiary){
  background: var(--color-secondary-soft); color: var(--color-secondary);
}
.grid--3 .card:nth-child(3n):hover .card__icon:not(.card__icon--secondary):not(.card__icon--tertiary),
.grid--3 .card:nth-child(3n):active .card__icon:not(.card__icon--secondary):not(.card__icon--tertiary){
  background: var(--color-secondary); color: var(--color-surface);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
/* A grotesque needs more weight and tighter tracking than the serif it
   replaces: at display sizes the default spacing reads loose and the counters
   open up, so tracking tightens as size grows. */
h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.3; margin: 0 0 var(--space-2); color: var(--color-ink); }
h1{ font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.028em; }
h3{ font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.018em; }
h4{ letter-spacing: -0.012em; }
p{ margin: 0 0 var(--space-2); color: var(--color-ink-soft); }
strong{ color: var(--color-ink); font-weight: 600; }
button{ font-family: inherit; }

::selection{ background: var(--color-accent); color: #1C1917; }

:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

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

/* ---------- Layout helpers ---------- */
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.container--narrow{ max-width: var(--max-width-narrow); }
.section{ padding: var(--space-7) 0; }
.section--alt{
  position: relative;
  background:
    radial-gradient(700px circle at 15% 0%, rgba(171, 138, 78, 0.10), transparent 60%),
    radial-gradient(600px circle at 85% 100%, rgba(31, 77, 58, 0.09), transparent 60%),
    var(--color-bg-alt);
}
.section--dark{
  position: relative;
  overflow: hidden;
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}
.section--dark::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px circle at 18% 12%, rgba(171, 138, 78, 0.22), transparent 62%),
    radial-gradient(620px circle at 82% 88%, rgba(61, 122, 92, 0.18), transparent 62%),
    radial-gradient(520px circle at 55% 0%, rgba(178, 52, 52, 0.14), transparent 62%);
}
.section--dark > *{ position: relative; z-index: 1; }
.section--dark h2, .section--dark h3{ color: var(--color-on-primary); }
.section--dark p{ color: #D6D0C4; }
.section-head{ max-width: 640px; margin: 0 0 var(--space-5); }
.section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--color-accent);
  display: inline-block;
}
.lede{ font-size: 1.15rem; color: var(--color-ink-soft); }

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

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.8rem;
  border-radius: var(--radius);
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms var(--ease-out);
  min-height: 48px;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(0.97); transition-duration: 100ms; }
.btn--primary{ background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover{ background: var(--color-primary-light); }
.btn--outline{ background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline:hover{ background: var(--color-ink); color: var(--color-accent); border-color: var(--color-ink); }
.btn--on-dark{ background: var(--color-on-primary); color: var(--color-primary-dark); }
.btn--on-dark:hover{ background: #EFE9DA; }
.btn--ghost{ background: transparent; color: var(--color-primary); padding-left: 0; padding-right: 0; min-height: auto; }
.btn--ghost:hover{ color: var(--color-primary-light); }
.btn--block{ width: 100%; }

/* Shine sweep on primary CTAs — hover-triggered only, never continuous */
.btn--primary::after, .btn--on-dark::after{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 650ms var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after, .btn--on-dark:hover::after{ left: 130%; }
@media (prefers-reduced-motion: reduce){
  .btn--primary::after, .btn--on-dark::after{ display: none; }
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 243, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: box-shadow var(--duration) var(--ease);
}
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 12px;
  background: linear-gradient(rgba(28, 25, 23, 0.06), transparent);
  pointer-events: none;
}
.site-header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
/* Single source of truth for the header height — the mobile menu offsets
   itself by this, so it stays flush when the header shrinks on scroll. */
.site-header{ --header-h: 84px; }
.site-header.is-scrolled{ --header-h: 66px; box-shadow: 0 8px 24px -18px rgba(28,25,23,0.35); }
@media (prefers-reduced-transparency: reduce){
  .site-header{ background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--color-border); }
  .site-header::after{ display: none; }
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
  max-width: 1320px;
  transition: height 280ms var(--ease-out);
}
.site-header.is-scrolled .brand__text small{ opacity: 0; max-height: 0; margin-top: 0; }
.brand{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-ink);
}
.brand__mark{
  height: 44px;
  width: auto;
  flex-shrink: 0;
  transition: height 280ms var(--ease-out);
}
.site-header.is-scrolled .brand__mark{ height: 34px; }
.brand__text{ white-space: nowrap; }
.brand__text small{
  display: block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 2px;
  max-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 220ms var(--ease-out), max-height 280ms var(--ease-out), margin-top 280ms var(--ease-out);
}

.nav{ display: flex; align-items: center; gap: var(--space-4); }
.nav__list{ display: flex; align-items: center; gap: var(--space-3); }
.nav__list a{
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color var(--duration) var(--ease);
}
.nav__list a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.nav__list a:hover, .nav__list a[aria-current="page"]{ color: var(--color-ink); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after{ transform: scaleX(1); }
.nav__cta{ display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Nav dropdown (desktop hover, keyboard focus-within) ---------- */
.nav__item--has-dropdown{ position: relative; }
.nav__item--has-dropdown > a{ display: inline-flex; align-items: center; gap: 0.35em; }
.nav__item--has-dropdown > a::before{
  content: "";
  order: 1;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--ease-out);
}
.nav__item--has-dropdown:hover > a::before,
.nav__item--has-dropdown:focus-within > a::before{ transform: rotate(225deg) translateY(1px); }
.nav__dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
  z-index: 110;
  overflow: hidden;
}
.nav__dropdown::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}
.nav__dropdown a{
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  white-space: normal;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.nav__dropdown a::after{ display: none; }
.nav__dropdown a:hover, .nav__dropdown a:focus-visible{ background: var(--color-bg-alt); color: var(--color-ink); }
@media (prefers-reduced-motion: reduce){
  .nav__dropdown{ transition: opacity 150ms linear, visibility 150ms; transform: none; }
  .nav__item--has-dropdown:hover .nav__dropdown, .nav__item--has-dropdown:focus-within .nav__dropdown{ transform: none; }
}

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span{
  position: relative;
  width: 20px; height: 2px; background: var(--color-ink);
  transition: background var(--duration) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after{
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-ink);
  transition: transform var(--duration) var(--ease), top var(--duration) var(--ease);
}
.nav-toggle span::before{ top: -6px; }
.nav-toggle span::after{ top: 6px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top: 0; transform: rotate(-45deg); }

@media (max-width: 1260px){
  /* backdrop-filter turns an element into the containing block for any
     position:fixed descendant. With it on the header, the open menu was
     sized against the header (84px tall) instead of the viewport — so the
     submenus were cut off — and the closed menu, parked at translateX(100%),
     added a second screen width of horizontal scroll. Below this breakpoint
     the menu lives inside the header, so the blur has to go; same solid
     fallback the prefers-reduced-transparency rule already uses. */
  .site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-bg);
  }

  .nav-toggle{ display: flex; }
  .nav{
    position: fixed;
    inset: var(--header-h, 84px) 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-4);
    transform: translateX(100%);
    transition: transform var(--duration) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open{ transform: translateX(0); }
  .nav__list{ flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; }
  .nav__list a{ display: block; width: 100%; padding: 0.8rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--color-border); }
  .nav__cta{ flex-direction: column; align-items: stretch; }

  /* Dropdown becomes an always-visible indented sublist — no hover on touch */
  .nav__item--has-dropdown{ width: 100%; }
  .nav__item--has-dropdown > a::before{ display: none; }
  .nav__dropdown{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0.4rem 1rem;
  }
  .nav__dropdown a{ padding: 0.6rem 0; font-size: 0.95rem; border-bottom: none; }
}

/* ---------- Hero ---------- */
.hero{
  padding: var(--space-7) 0 var(--space-6);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  top: 50%;
  right: -8%;
  width: 1000px;
  height: 1000px;
  max-width: 80vw;
  transform: translateY(-50%);
  background: url('../img/logo-black.png') no-repeat center / contain;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.hero::after, .page-hero::after{
  content: "";
  position: absolute;
  inset: -15% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(620px circle at 12% 15%, rgba(171, 138, 78, 0.24), transparent 62%),
    radial-gradient(540px circle at 88% 80%, rgba(31, 77, 58, 0.20), transparent 62%),
    radial-gradient(460px circle at 65% 5%, rgba(140, 31, 31, 0.15), transparent 62%);
  filter: blur(4px);
}
@media (max-width: 940px){
  .hero::before{ width: 700px; height: 700px; right: -20%; }
}
.hero .container{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}
.hero__subheading{
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 50ch;
  margin: 0 0 var(--space-3);
}
.hero__content .lede{ margin-bottom: var(--space-4); max-width: 46ch; }
.process__logo{ display: block; height: 160px; width: auto; margin: var(--space-5) auto 0; opacity: 0.6; }
.hero__actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.hero__note{ font-size: 0.88rem; color: var(--color-muted); }
.hero__media{ position: relative; }
.hero__media-frame{
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  will-change: transform;
}
.hero__media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  opacity: 0;
  transition: transform 1000ms var(--ease-out), opacity 1000ms var(--ease-out);
}
.hero__media.is-visible .hero__media-frame img{ transform: scale(1); opacity: 1; }
.hero__media.is-visible .hero__media-frame:hover img,
.hero__media.is-visible .hero__media-frame:active img{ transform: scale(1.06); transition: transform 600ms var(--ease-out); }
.hero__badge{
  position: absolute;
  left: -1.5rem;
  bottom: -1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  max-width: 230px;
  box-shadow: var(--shadow-2);
}
.hero__badge strong{ display: flex; align-items: baseline; gap: 0.2rem; font-family: var(--font-display); color: var(--color-primary); }
.hero__badge-num{ font-size: 2.5rem; font-weight: 700; line-height: 1; }
.hero__badge-suffix{ font-size: 1.15rem; font-weight: 600; }
.hero__badge > span{ font-size: 0.82rem; color: var(--color-muted); }

@media (max-width: 940px){
  .hero .container{ grid-template-columns: 1fr; }
  /* Hook and headline land first, then the face, then the detail and the CTA.
     `display: contents` dissolves the wrapper so its children become grid
     items in their own right and can be reordered around the photo — no
     markup duplication needed. */
  .hero__content{ display: contents; }
  .hero .eyebrow{ order: 1; }
  .hero h1{ order: 2; }
  .hero__media{ order: 3; max-width: 420px; margin: var(--space-2) auto var(--space-5); }
  .hero__subheading{ order: 4; }
  .hero__content .lede{ order: 5; }
  .hero__actions{ order: 6; }
  .hero__note{ order: 7; }
  .hero__badge{ left: 1rem; bottom: -1.25rem; }
}

/* Long German CTA labels overflow a narrow screen while nowrap is in force,
   which pushed the whole page wider than the viewport. Let them wrap and
   fill the column instead. */
@media (max-width: 560px){
  .hero__actions{ flex-direction: column; align-items: stretch; }
  .hero__actions .btn{ width: 100%; white-space: normal; }
}

/* ---------- Trust bar ---------- */
.trustbar{
  position: relative;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  background: linear-gradient(180deg, rgba(171, 138, 78, 0.06), transparent);
}
.trustbar::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.trustbar .container{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: center;
  text-align: center;
}
.trustbar__item{ font-size: 0.85rem; color: var(--color-muted); }
.trustbar__item strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.028em; color: var(--color-ink); }

/* ---------- Cards ---------- */
.card{
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow var(--duration) var(--ease);
}
.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--glow-rgb), 0.18), transparent 72%);
  opacity: 0;
  transition: opacity 350ms var(--ease-out);
  pointer-events: none;
}
.card::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
  opacity: 0.9;
}
.card:hover{
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-3), 0 24px 48px -22px rgba(var(--glow-rgb), 0.5);
}
.card:hover::before{ opacity: 1; }
.card__icon{
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  transition: transform 400ms var(--ease-out), background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.card__icon svg{ width: 22px; height: 22px; }
.card__icon--secondary{ background: var(--color-secondary-soft); color: var(--color-secondary); }
.card__icon--tertiary{ background: var(--color-tertiary-soft); color: var(--color-tertiary); }
.card:hover .card__icon,
.card:active .card__icon{
  transform: scale(1.14);
  background: var(--color-accent);
  color: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.card:hover .card__icon--secondary,
.card:active .card__icon--secondary{ background: var(--color-secondary); color: var(--color-surface); }
.card:hover .card__icon--tertiary,
.card:active .card__icon--tertiary{ background: var(--color-tertiary); color: var(--color-surface); }
.card h3{ margin-bottom: 0.5rem; }
.card p{ margin-bottom: var(--space-2); font-size: 0.96rem; }
.card__link{ font-size: 0.9rem; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 0.4em; }
.card__link svg{ width: 14px; height: 14px; transition: transform var(--duration) var(--ease); }
.card__link:hover svg{ transform: translateX(3px); }

/* Service card variant with photo */
.service-card{
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow var(--duration) var(--ease);
}
.service-card--pine{ border-top-color: var(--color-tertiary); --glow-rgb: 31, 77, 58; }
.service-card--oxblood{ border-top-color: var(--color-secondary); --glow-rgb: 140, 31, 31; }
.service-card:hover{
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-3), 0 26px 52px -22px rgba(var(--glow-rgb), 0.5);
}
.service-card__media{ aspect-ratio: 16/10; overflow: hidden; }
.service-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.service-card:hover .service-card__media img,
.service-card:active .service-card__media img{ transform: scale(1.05); }
.service-card__body{ padding: var(--space-4); }

/* ---------- Outcomes ---------- */
.outcome-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 860px){
  .outcome-grid{ grid-template-columns: 1fr; }
}
.outcome-item{
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  transition: background-color 300ms var(--ease-out);
}
.outcome-item:hover, .outcome-item:active{
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.10), transparent 75%);
}
.outcome-item__icon{
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform 400ms var(--ease-out), background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.outcome-item:hover .outcome-item__icon,
.outcome-item:active .outcome-item__icon{
  transform: scale(1.14);
  background: var(--color-accent);
  color: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.outcome-item__icon svg{ width: 20px; height: 20px; }
.outcome-item h3{ font-size: 1.05rem; margin-bottom: 0.3rem; }
.outcome-item p{ font-size: 0.92rem; margin-bottom: 0; }

/* ---------- Pricing ---------- */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
@media (max-width: 940px){
  .pricing-grid{ grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
.pricing-card{
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow var(--duration) var(--ease);
}
.pricing-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.pricing-card:hover{ transform: translateY(-8px) scale(1.01); box-shadow: var(--shadow-3), 0 24px 48px -22px rgba(var(--glow-rgb), 0.45); }
.pricing-card--featured{
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-3);
  position: relative;
}
.pricing-card--featured:hover{ box-shadow: var(--shadow-4); }
@media (min-width: 941px){
  .pricing-card--featured{ transform: scale(1.04); }
  .pricing-card--featured:hover{ transform: scale(1.04) translateY(-4px); }
}
.pricing-card--featured h3{ color: var(--color-on-primary); }
.pricing-card--featured p,
.pricing-card--featured .pricing-card__meta{ color: #C9C0AE; }
.pricing-card--featured .pricing-list li{ border-top-color: rgba(255,255,255,0.14); }
.pricing-card--featured .pricing-list li::before{ color: var(--color-accent); }
.pricing-card__badge{
  display: inline-block;
  align-self: flex-start;
  background: var(--color-accent);
  color: #2B1F12;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
  align-self: flex-start;
}
/* Oxblood keeps the application-only tier from reading as the same kind of
   label as the gold "most chosen" badge. */
.pricing-card__badge--application{ background: var(--color-secondary); color: #FFFFFF; }
.pricing-card__meta{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}
.pricing-card h3{ margin-bottom: 0.6rem; }
.pricing-card > p{ font-size: 0.94rem; margin-bottom: var(--space-3); }
/* The price sits last in the card and stays deliberately quiet — the offer
   should land before the number does. Written with the child combinator so it
   outranks `.pricing-card > p` above, which would otherwise force 0.94rem. */
.pricing-card > .pricing-card__price{
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}
/* Declared after the base rule so it wins at equal specificity — otherwise the
   muted grey would sit on the dark featured card and become unreadable. */
.pricing-card--featured > .pricing-card__price{ color: #C9C0AE; }
.pricing-list{ margin-top: auto; padding-top: var(--space-2); }
.pricing-list li{
  display: flex;
  gap: 0.6rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.92rem;
  color: inherit;
}
.pricing-list li::before{ content: "–"; color: var(--color-accent); flex-shrink: 0; }
.pricing-note{ text-align: center; margin-top: var(--space-5); color: var(--color-muted); }

/* ---------- Numbered process ---------- */
.process{ counter-reset: step; }
.process__item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background-color 300ms var(--ease-out);
}
.process__item:first-child{ border-top: none; }
.process__item:hover, .process__item:active{
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.09), transparent 70%);
}
.process__num{
  counter-increment: step;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-accent);
  width: 56px; height: 56px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 400ms var(--ease-out), background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.process__item:hover .process__num,
.process__item:active .process__num{
  transform: scale(1.14);
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-2);
}
.process__num::before{ content: counter(step, decimal-leading-zero); }

/* ---------- Testimonials ---------- */
.testimonial{
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow var(--duration) var(--ease);
}
.testimonial::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.testimonial:hover{ transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-2), 0 20px 40px -20px rgba(var(--glow-rgb), 0.45); }
.testimonial__stars{ color: var(--color-secondary); font-size: 0.9rem; letter-spacing: 0.15em; margin-bottom: var(--space-2); }
.testimonial__quote{ font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.06rem; line-height: 1.5; letter-spacing: -0.008em; color: var(--color-ink); flex: 1; }
.testimonial__author{ margin-top: var(--space-3); font-size: 0.85rem; color: var(--color-muted); font-weight: 600; }

.marquee-track{
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* The custom progress bar below replaces the native scrollbar, which was
     too faint to read as "there is more to the right". */
  scrollbar-width: none;
}
.marquee-track::-webkit-scrollbar{ display: none; }
.marquee-track .testimonial{ min-width: 320px; max-width: 360px; scroll-snap-align: start; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ scroll-behavior: auto; }
}

/* ---------- Slider (arrows + progress) ---------- */
.slider{ position: relative; }
.slider__arrow{
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;      /* 44px keeps it a comfortable touch target */
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out),
              color 220ms var(--ease-out), opacity 200ms var(--ease-out);
}
.slider__arrow svg{ width: 20px; height: 20px; }
.slider__arrow:hover{ background: var(--color-ink); color: var(--color-surface); transform: translateY(-50%) scale(1.08); }
.slider__arrow:active{ transform: translateY(-50%) scale(0.94); }
.slider__arrow[hidden]{ display: none; }
.slider__arrow--prev{ left: -14px; }
.slider__arrow--next{ right: -14px; }

.slider__progress{
  height: 8px;                     /* deliberately chunky so it is noticed */
  margin-top: var(--space-3);
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.slider__progress-bar{
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
  transition: width 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.slider__hint{
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: center;
}
@media (hover: hover) and (pointer: fine){
  .slider__hint{ display: none; }   /* mouse users get the arrows instead */
}
@media (max-width: 900px){
  /* Off-canvas arrows would be clipped on small screens — pull them inside. */
  .slider__arrow--prev{ left: 4px; }
  .slider__arrow--next{ right: 4px; }
}

/* ---------- Quote block ---------- */
.pull-quote{
  border-left: 3px solid var(--color-secondary);
  padding-left: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin: var(--space-5) 0;
}
.pull-quote cite{ display: block; margin-top: var(--space-2); font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--color-secondary); }

/* ---------- Parallax philosophy quote ---------- */
.quote-parallax{
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.quote-parallax__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/Foto-Startseite-Coach-Andreas-Wosika-Webansicht-1536x864.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: grayscale(100%);
}
@media (max-width: 900px){
  /* background-attachment: fixed is unreliable on mobile browsers — degrade gracefully */
  .quote-parallax__bg{ background-attachment: scroll; }
}
.quote-parallax__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(760px circle at 20% 20%, rgba(171, 138, 78, 0.28), transparent 60%),
    radial-gradient(680px circle at 80% 85%, rgba(31, 77, 58, 0.26), transparent 60%),
    linear-gradient(180deg, rgba(16,14,12,0.62), rgba(16,14,12,0.86));
}
.quote-parallax .container{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.quote-parallax__mark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.quote-parallax blockquote{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--color-on-primary);
  max-width: 880px;
  margin: 0 auto var(--space-3);
}
.quote-parallax cite{
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--color-accent);
}
.quote-parallax__stars{ color: var(--color-accent); letter-spacing: 0.2em; font-size: 1rem; margin-bottom: var(--space-2); }
.quote-parallax--yildiz .quote-parallax__bg{
  background-image: url('../img/Foto-Andreas-Wosika-Kunstmuseum-Nuernberg.webp');
  background-position: center 25%;
}
@media (prefers-reduced-motion: reduce){
  .quote-parallax__bg{ inset: 0; }
}

/* ---------- Reviews / trust strip ---------- */
.reviews-strip{
  position: relative;
  background:
    radial-gradient(600px circle at 20% 50%, rgba(171, 138, 78, 0.14), transparent 62%),
    radial-gradient(520px circle at 80% 50%, rgba(31, 77, 58, 0.12), transparent 62%),
    var(--color-secondary-soft);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.reviews-strip::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.reviews-strip__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  text-align: center;
}
.reviews-strip__block{ display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.reviews-strip__stars{ color: var(--color-secondary); font-size: 1.15rem; letter-spacing: 0.15em; }
.reviews-strip__headline{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.024em;
  color: var(--color-ink);
}
.reviews-strip__headline strong{ color: var(--color-secondary); font-weight: 700; }
.reviews-strip__meta{ font-size: 0.82rem; color: var(--color-muted); }
.reviews-strip__sources{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}
.reviews-strip__source{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  font-weight: 600;
  color: var(--color-secondary);
  background: var(--color-surface);
  text-decoration: none;
  transition: transform 300ms var(--ease-out), background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.reviews-strip__source:hover,
.reviews-strip__source:active{
  transform: scale(1.08);
  background: var(--color-secondary);
  color: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.reviews-strip__divider{
  width: 1px;
  align-self: stretch;
  background: var(--color-secondary);
  opacity: 0.25;
}
@media (max-width: 700px){
  .reviews-strip__divider{ display: none; }
  .reviews-strip__inner{ gap: var(--space-4); }
}

/* ---------- Self-check quiz ---------- */
.quiz{
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 640px;
  margin: 0 auto;
  box-shadow: var(--shadow-3);
}
.quiz::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.quiz__progress{
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.quiz__progress-bar{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light));
  border-radius: 999px;
  transition: width 400ms var(--ease-out);
}
.quiz__step h3{ margin-bottom: var(--space-3); font-size: 1.2rem; }
.quiz__options{ display: flex; flex-direction: column; gap: 0.7rem; }
.quiz__option{
  text-align: left;
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.quiz__option:hover{ border-color: var(--color-accent); background: var(--color-accent-soft); }
.quiz__option.is-selected{ border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.quiz__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  min-height: 24px;
}
.quiz__back{
  background: none; border: none; color: var(--color-muted); font-size: 0.88rem; cursor: pointer; padding: 0.4rem 0;
}
.quiz__back:hover{ color: var(--color-ink); }
.quiz__counter{ font-size: 0.82rem; color: var(--color-muted); margin-left: auto; }
.quiz__step--result h3{ font-family: var(--font-display); font-size: 1.4rem; }
.quiz__step--result p{ margin-bottom: var(--space-4); }
@media (max-width: 640px){
  .quiz{ padding: var(--space-4); }
}

/* ---------- FAQ ---------- */
.faq-item{
  position: relative;
  border-top: 1px solid var(--color-border);
  padding-left: 0;
  transition: padding-left 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.faq-item::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms var(--ease-out);
}
.faq-item[data-open="true"]{
  padding-left: var(--space-3);
  background: linear-gradient(90deg, rgba(171, 138, 78, 0.07), transparent 60%);
}
.faq-item[data-open="true"]::before{ transform: scaleY(1); }
.faq-item:last-child{ border-bottom: 1px solid var(--color-border); }
.faq-item__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  cursor: pointer;
}
.faq-item__icon{
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.faq-item__q:hover .faq-item__icon{ border-color: var(--color-accent); transform: scale(1.08); }
.faq-item[data-open="true"] .faq-item__icon{
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.faq-item[data-open="true"] .faq-item__icon::before,
.faq-item[data-open="true"] .faq-item__icon::after{ background: var(--color-surface); }
.faq-item__icon::before, .faq-item__icon::after{
  content: ""; position: absolute; background: var(--color-ink);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.faq-item__icon::before{ width: 10px; height: 1.5px; }
.faq-item__icon::after{ width: 1.5px; height: 10px; }
.faq-item[data-open="true"] .faq-item__icon::after{ transform: rotate(90deg); opacity: 0; }
.faq-item__a{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration) var(--ease);
}
.faq-item__a p{ padding-bottom: var(--space-3); }
.faq-item[data-open="true"] .faq-item__a{ max-height: 480px; }

/* ---------- Forms ---------- */
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
.field{ margin-bottom: var(--space-3); }
.field label{
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}
.field input, .field textarea, .field select{
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 0.96rem;
  color: var(--color-ink);
  transition: border-color var(--duration) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--color-primary);
  outline: none;
}
.field small{ display: block; margin-top: 0.35rem; color: var(--color-muted); font-size: 0.78rem; }
.field--checkbox{ display: flex; align-items: flex-start; gap: 0.6rem; }
.field--checkbox input{ width: 18px; height: 18px; margin-top: 3px; }
.field--checkbox label{ margin: 0; font-weight: 400; font-size: 0.85rem; color: var(--color-ink-soft); }
.form-note{
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

/* ---------- Footer ---------- */
.site-footer{
  position: relative;
  background: var(--color-primary-dark);
  color: #D6D0C4;
  padding: var(--space-6) 0 var(--space-3);
}
.site-footer::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 0.8fr 0.9fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 940px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}
.footer-grid h4{ color: #FAF8F3; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 600; margin-bottom: var(--space-2); }
.footer-grid ul li{ margin-bottom: 0.6rem; }
.footer-grid a{ font-size: 0.92rem; color: #C9C0AE; transition: color var(--duration) var(--ease); }
.footer-grid a:hover{ color: #FAF8F3; }
.footer-brand p{ color: #BDB39F; font-size: 0.9rem; max-width: 32ch; }
.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  font-size: 0.82rem;
  color: #948C7A;
}
.footer-bottom a{ color: #948C7A; }
.footer-bottom a:hover{ color: #FAF8F3; }
.footer-bottom__links{ display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ padding: var(--space-3) 0 0; font-size: 0.82rem; color: var(--color-muted); }
.breadcrumb a{ color: var(--color-muted); }
.breadcrumb a:hover{ color: var(--color-primary); }
.breadcrumb span[aria-current]{ color: var(--color-ink); }

/* ---------- Page hero (subpages) ---------- */
.page-hero{ padding: var(--space-5) 0 var(--space-6); position: relative; overflow: hidden; }
.page-hero::before{
  content: "";
  position: absolute;
  top: 50%;
  right: -8%;
  width: 1000px;
  height: 1000px;
  max-width: 80vw;
  transform: translateY(-50%);
  background: url('../img/logo-black.png') no-repeat center / contain;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 940px){
  .page-hero::before{ width: 700px; height: 700px; right: -20%; }
}
.page-hero .container{ position: relative; z-index: 1; max-width: var(--max-width-narrow); }
.page-hero h1{ margin-bottom: var(--space-3); }

/* ---------- Reveal on scroll ---------- */
/* ---------- Comparison table ---------- */
.table-wrap{ overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
.compare-table{ width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td{ padding: 0.95rem 1.2rem; text-align: left; font-size: 0.94rem; border-bottom: 1px solid var(--color-border); }
.compare-table thead th{ font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); background: var(--color-bg-alt); }
.compare-table tbody th{ font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{ border-bottom: none; }
.compare-table td.is-highlight{ color: var(--color-secondary); font-weight: 600; }

[data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal].reveal-fade{ transform: none; opacity: 0; transition: opacity 900ms var(--ease-out); }
[data-reveal].reveal-fade.is-visible{ opacity: 1; }

/* Cards that carry data-reveal themselves would have their hover lift wiped
   out by the transform:none above — same specificity, declared later. These
   selectors add one specificity step to win it back. Testimonials don't need
   this because their data-reveal sits on the container, not the card. */
[data-reveal].card:hover,
[data-reveal].service-card:hover,
[data-reveal].pricing-card:hover{ transform: translateY(-8px) scale(1.01); }
@media (min-width: 941px){
  [data-reveal].pricing-card--featured{ transform: scale(1.04); }
  [data-reveal].pricing-card--featured:hover{ transform: scale(1.04) translateY(-8px); }
}

/* Hide Calendly's floating badge on mobile — the sticky-cta bar already
   covers that job there, and both are fixed to the bottom of the screen. */
@media (max-width: 780px){
  .calendly-badge-widget, #calendly-badge-widget{ display: none !important; }
}

/* ---------- Scroll progress indicator ---------- */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}

/* ---------- Grain / depth texture ---------- */
.grain-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
@media (prefers-reduced-motion: reduce), (max-width: 480px){
  .grain-overlay{ display: none; }
}

/* ---------- Animated counters ---------- */
[data-count]{ font-variant-numeric: tabular-nums; }

/* ---------- Utilities ---------- */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
.mb-0{ margin-bottom: 0; }
.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;
}
.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 0.8rem 1.2rem; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus{ left: 0; }

.tag-list{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag{
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
  transition: transform 260ms var(--ease-out), background-color 260ms var(--ease-out), color 260ms var(--ease-out);
}
.tag:nth-child(3n+2){ border-color: var(--color-tertiary); color: var(--color-tertiary); }
.tag:nth-child(3n){ border-color: var(--color-secondary); color: var(--color-secondary); }
.tag:hover{ transform: translateY(-2px); background: var(--color-accent); color: var(--color-surface); }
.tag:nth-child(3n+2):hover{ background: var(--color-tertiary); color: var(--color-surface); }
.tag:nth-child(3n):hover{ background: var(--color-secondary); color: var(--color-surface); }

.divider{
  height: 2px;
  border: none;
  margin: var(--space-6) 0;
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light), transparent);
  opacity: 0.6;
}

.stat-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 700px){ .stat-grid{ grid-template-columns: 1fr; } }
.stat{ text-align: center; }
.stat strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.032em; color: var(--color-accent); }
.stat:nth-child(3n+2) strong{ color: var(--color-tertiary); }
.stat:nth-child(3n) strong{ color: var(--color-secondary); }
.stat span{ font-size: 0.88rem; color: var(--color-muted); }

.media-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.media-frame::after{
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light));
}
.media-frame img{
  width: 100%;
  object-fit: cover;
  transform: scale(1.08);
  opacity: 0;
  transition: transform 1000ms var(--ease-out), opacity 1000ms var(--ease-out);
}
.media-frame.is-visible img,
[data-reveal].is-visible .media-frame img{ transform: scale(1); opacity: 1; }
.media-frame.is-visible:hover img,
.media-frame.is-visible:active img,
[data-reveal].is-visible .media-frame:hover img,
[data-reveal].is-visible .media-frame:active img{ transform: scale(1.06); transition: transform 600ms var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  .hero__media-frame img, .media-frame img{ transform: none; opacity: 1; }
}

.sticky-cta{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  padding: 0.8rem var(--space-4);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-shadow: 0 -8px 24px -16px rgba(0,0,0,0.2);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-accent), var(--color-tertiary-light), var(--color-secondary-light)) 1;
}
.sticky-cta::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px;
  height: 12px;
  background: linear-gradient(transparent, rgba(28, 25, 23, 0.05));
  pointer-events: none;
}
@media (prefers-reduced-transparency: reduce){
  .sticky-cta{ background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--color-border); }
  .sticky-cta::before{ display: none; }
}
@media (max-width: 780px){
  .sticky-cta.is-active{ display: flex; }
  .sticky-cta span{ font-size: 0.85rem; font-weight: 600; }
}