@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* ============================================================
   FELIX LENHARD — Personal Brand Website
   v5.0 — dark, cinematic, typography-driven.
   System type stack; colour kept neutral by design decision.
   ============================================================ */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Neutrals — cooled slightly off the original Apple greys. */
  --white:       #FFFFFF;
  --gray-50:     #F2F3F5;
  --gray-100:    #E2E4E9;
  --gray-200:    #C7CBD2;
  --gray-300:    #9AA0AA;
  --gray-400:    #7C838E;
  --gray-500:    #616874;
  --gray-600:    #3D434D;
  --gray-700:    #2A2F37;
  --gray-800:    #1A1E24;
  --gray-900:    #12151A;
  --black:       #0A0C0F;

  /* Typography — original system stack (reverted 2026-07-28 at Felix's
     request; Space Grotesk / JetBrains Mono trial removed). */
  --font:         -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-display: var(--font);
  --font-mono:    var(--font);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.3125rem;

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

  /* Layout */
  --max-w:       1000px;
  --max-w-wide:  1200px;
  --max-w-narrow: 680px;

  /* Motion */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration:    0.55s;   /* was 0.8s — long reveals read as templated */
  --duration-sm: 0.4s;
  --duration-xs: 0.18s;

  /* Surface tiers — deliberately NOT uniform. Radius and lift encode
     hierarchy: hero tiles are soft and rise, data cards are square and
     stay put. Uniform rounding on everything is what reads as generic. */
  --radius:      18px;   /* feature tiles / imagery */
  --radius-sm:   6px;    /* content cards */
  --radius-none: 0;      /* data + list rows: squared, structural */
  --tile-gap:    14px;

  --lift:        -6px;                          /* feature tiles only */
  --shadow-lift: 0 18px 48px rgba(0,0,0,0.55);
  --hairline:    1px solid var(--gray-700);     /* structure over shadow */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0s;
    --duration-sm: 0s;
    --duration-xs: 0s;
  }
}

/* ─── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray-200);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ─── 3. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--white);
  text-wrap: balance;
}

.headline-xl {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.headline-lg {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.headline-md {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.1875rem); font-weight: 600; line-height: 1.3; }

p { margin-bottom: var(--s-4); color: var(--gray-300); }
p:last-child { margin-bottom: 0; }

.body-lg {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
}

/* Statement — standalone full-width text */
.statement {
  font-size: clamp(1.1875rem, 2.2vw, 1.75rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--gray-400);
  max-width: 820px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}

/* Eyebrow/label */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-300);
  display: block;
  margin-bottom: var(--s-4);
}

.text-muted  { color: var(--gray-400); }
.text-subtle { color: var(--gray-300); }

/* ─── 4. LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-8);
}
.container--wide   { max-width: var(--max-w-wide); }
.container--narrow { max-width: var(--max-w-narrow); }

@media (max-width: 767px) {
  .container { padding: 0 var(--s-6); }
}

/* ─── 5. SECTIONS ───────────────────────────────────────────── */

/* Full-viewport section.
   svh (small viewport height) is the stable value — plain 100vh is the
   larger "URL bar hidden" height, so on iOS the section is taller than
   the visible area on load and jumps as the bar collapses. */
.section {
  min-height: 100vh;        /* fallback for browsers without svh */
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: var(--s-32) 0;
}

/* Compact section (auto height) */
.section--compact {
  min-height: auto;
  padding: var(--s-20) 0;
}

/* Centered text section */
.section--centered {
  text-align: center;
  justify-content: center;
}

.section--centered .section__body {
  max-width: 900px;
  margin: 0 auto;
}

/* Light section (white bg) */
.section--light {
  background: var(--white);
  color: var(--gray-800);
}
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 { color: var(--gray-800); }
.section--light .eyebrow { color: var(--gray-500); }
.section--light .text-muted,
.section--light p { color: var(--gray-500); }
.section--light .statement { color: var(--gray-500); }

/* Surface section (subtle bg shift) */
.section--surface { background: var(--gray-900); }

/* Section with background image */
.section__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.section__bg--darken::after {
  background: rgba(10, 10, 10, 0.6);
}

.section__bg--gradient::after {
  background: linear-gradient(
    to right,
    var(--black) 0%,
    rgba(10,10,10,0.8) 35%,
    rgba(10,10,10,0.3) 100%
  );
}

.section__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 50/50 split layout */
.section--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: auto;
  padding: 0;
}

.section--split > .split__image {
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.section--split > .split__text {
  display: flex;
  align-items: center;
  padding: var(--s-20) var(--s-16);
}

.split__inner {
  max-width: 480px;
}

.section--split-reverse {
  direction: rtl;
}
.section--split-reverse > * {
  direction: ltr;
}

@media (max-width: 767px) {
  .section {
    min-height: auto;
    padding: var(--s-24) 0;
  }
  .section--split {
    grid-template-columns: 1fr;
  }
  .section--split > .split__image {
    min-height: 55vw;
    max-height: 360px;
  }
  .section--split > .split__text {
    padding: var(--s-12) var(--s-6);
  }
  .section--split-reverse > .split__image {
    order: -1;
  }
}

/* ─── 6. NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--s-5) 0;
  transition: background var(--duration-xs) var(--ease),
              padding var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.nav.scrolled {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: var(--s-3) 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--s-8);
}

.nav__logo img { height: 26px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 2vw, var(--s-8));
}

.nav__link {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--gray-300);
  transition: color var(--duration-xs) var(--ease);
  letter-spacing: 0.01em;
}
.nav__link:hover { color: var(--white); }
.nav__link.active { color: var(--white); }

.nav__lang {
  display: flex;
  gap: var(--s-2);
  font-size: 0.6875rem;
  color: var(--gray-600);
  margin-left: var(--s-6);
}
.nav__lang a { transition: color var(--duration-xs) var(--ease); }
.nav__lang a:hover,
.nav__lang a.active { color: var(--white); }
.nav__lang span { color: var(--gray-700); }

/* Mobile nav */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-2);
  z-index: 1001;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
}

@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { padding: 0 var(--s-6); }
}

/* ─── 7. BUTTONS ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: 980px;
  transition: background var(--duration-xs) var(--ease),
              border-color var(--duration-xs) var(--ease),
              color var(--duration-xs) var(--ease);
  white-space: nowrap;
}

/* Primary action carries the signal colour — the one thing to click. */
.btn--white {
  background: var(--white);
  color: var(--black);
}
.btn--white:hover {
  background: var(--gray-50);
}

.btn--dark {
  background: var(--gray-800);
  color: var(--white);
  border-color: var(--gray-700);
}
.btn--dark:hover {
  background: var(--gray-700);
  border-color: var(--gray-600);
}

.section--light .btn--dark {
  background: var(--black);
}
.section--light .btn--dark:hover {
  background: var(--gray-800);
}

.btn--outline {
  background: transparent;
  color: var(--gray-200);
  border-color: var(--gray-600);
}
.btn--outline:hover {
  border-color: var(--white);
  color: var(--white);
}

.section--light .btn--outline {
  color: var(--gray-800);
  border-color: var(--gray-200);
}
.section--light .btn--outline:hover {
  border-color: var(--gray-800);
}

.btn--ghost {
  background: transparent;
  padding: 0;
  font-weight: 500;
  color: var(--gray-300);
  border: none;
  border-radius: 0;
}
.btn--ghost::after {
  content: ' \2192';
  transition: transform var(--duration-xs) var(--ease);
  display: inline-block;
}
.btn--ghost:hover { color: var(--white); }
.btn--ghost:hover::after { transform: translateX(4px); }

.section--light .btn--ghost { color: var(--gray-500); }
.section--light .btn--ghost:hover { color: var(--black); }

.btn--lg {
  font-size: var(--text-base);
  padding: 14px 36px;
}

.btn-group {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .btn-group { flex-direction: column; align-items: flex-start; }
  .btn-group .btn { width: 100%; justify-content: center; }
}

/* ─── 8. STATS BAR ──────────────────────────────────────────── */
.stats {
  padding: var(--s-16) 0;
  border-top: 1px solid var(--gray-800);
  border-bottom: 1px solid var(--gray-800);
}

/* Ruled columns rather than floating centred numbers. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  text-align: left;
}

.stats__grid > * {
  padding: 0 var(--s-6);
  border-left: 1px solid var(--gray-800);
}
.stats__grid > *:first-child { border-left: none; padding-left: 0; }

.stats__number {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-3);
  color: var(--white);
}

.stats__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-300);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-8); }
  /* Reset the desktop rule pattern: on a 2-col wrap, only the second
     column of each row should carry a divider. */
  .stats__grid > * { padding: 0 var(--s-4); border-left: none; }
  .stats__grid > *:nth-child(even) { border-left: 1px solid var(--gray-800); }
  .stats__grid > *:nth-child(odd) { padding-left: 0; }
}

/* ─── 9. TESTIMONIALS ───────────────────────────────────────── */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

.testimonial {
  display: flex;
  flex-direction: column;
}

.testimonial__quote {
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.7;
  color: var(--gray-200);
  margin-bottom: var(--s-8);
  flex: 1;
}

.testimonial__quote::before {
  content: '\201C';
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gray-700);
  font-style: normal;
  margin-bottom: var(--s-4);
}

.testimonial__author {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}

.testimonial__role {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

@media (max-width: 1023px) { .testimonials { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .testimonials { grid-template-columns: 1fr; } }

/* ─── 10. CLIENTS ───────────────────────────────────────────── */
.clients {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-6) var(--s-4);
  text-align: center;
}

.client__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-300);
}

.client__tag {
  font-size: var(--text-xs);
  color: var(--gray-600);
}

@media (max-width: 1023px) { .clients { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .clients { grid-template-columns: repeat(3, 1fr); } }

/* ─── 11. KEYNOTES ──────────────────────────────────────────── */
.keynotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-800);
}

.keynote {
  background: var(--black);
  padding: var(--s-12) var(--s-10);
}

.keynote__number {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gray-600);
  margin-bottom: var(--s-6);
}

.keynote__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
  color: var(--white);
}

.keynote__subtitle {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--s-4);
}

.keynote__desc {
  font-size: var(--text-sm);
  color: var(--gray-400);
  line-height: 1.7;
}

.keynote__meta {
  margin-top: var(--s-4);
  font-size: var(--text-xs);
  color: var(--gray-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.keynote--wide {
  grid-column: 1 / -1;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 767px) {
  .keynotes { grid-template-columns: 1fr; }
  .keynote { padding: var(--s-8) var(--s-6); }
}

/* ─── 12. OFFERING LIST ─────────────────────────────────────── */
.offering-list {
  display: flex;
  flex-direction: column;
}

.offering {
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--gray-800);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-10);
  align-items: start;
}
.offering:first-child { padding-top: 0; }
.offering:last-child { border-bottom: none; }

.offering__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
}

.offering__text {
  font-size: var(--text-sm);
  color: var(--gray-300);
  line-height: 1.7;
}

.offering__list {
  margin-top: var(--s-4);
}

.offering__list li {
  font-size: var(--text-sm);
  color: var(--gray-500);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  position: relative;
}

.offering__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--gray-700);
}

@media (max-width: 767px) {
  .offering { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ─── 13. WORKSHOP TOPICS ───────────────────────────────────── */
.workshop-list {
  display: flex;
  flex-direction: column;
}

.workshop-item {
  padding: var(--s-10) 0;
  border-bottom: 1px solid var(--gray-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
}
.workshop-item:first-child { padding-top: 0; }
.workshop-item:last-child { border-bottom: none; }

.workshop-item__title {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
}

.workshop-item__desc {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: var(--s-2);
}

.workshop-item__arrow {
  font-size: 1.5rem;
  color: var(--gray-600);
  flex-shrink: 0;
  transition: transform var(--duration-xs) var(--ease),
              color var(--duration-xs) var(--ease);
}

.workshop-item:hover .workshop-item__arrow {
  transform: translateX(4px);
  color: var(--white);
}

/* ─── 14. CONTACT ───────────────────────────────────────────── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.contact-info__label {
  font-size: var(--text-xs);
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-1);
}

.contact-info__value { color: var(--gray-200); }
.contact-info__value a:hover { color: var(--white); }

/* ─── 15. PHOTO ANNOTATION ──────────────────────────────────── */
.photo-note {
  display: none;
  position: absolute;
  bottom: var(--s-4);
  right: var(--s-4);
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(8px);
  color: var(--gray-500);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--gray-800);
  z-index: 2;
  max-width: 280px;
  line-height: 1.4;
}

/* ─── 16. BLOCKQUOTE ────────────────────────────────────────── */
blockquote {
  border-left: 2px solid var(--gray-700);
  padding-left: var(--s-6);
  font-style: italic;
  color: var(--gray-200);
  font-size: var(--text-lg);
  line-height: 1.6;
}

/* ─── 17. FOOTER ────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--gray-800);
  padding: var(--s-16) 0 var(--s-8);
}

.footer__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}

.footer__brand img { height: 22px; width: auto; margin-bottom: var(--s-3); }
.footer__tagline { font-size: var(--text-sm); color: var(--gray-600); }

.footer__links {
  display: flex;
  gap: var(--s-6);
}
.footer__links a {
  font-size: var(--text-sm);
  color: var(--gray-500);
  transition: color var(--duration-xs) var(--ease);
}
.footer__links a:hover { color: var(--white); }

.footer__contact { text-align: right; }
.footer__contact a {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-500);
  transition: color var(--duration-xs) var(--ease);
}
.footer__contact a:hover { color: var(--white); }

.footer__bottom {
  border-top: 1px solid var(--gray-800);
  padding-top: var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copy { font-size: var(--text-xs); color: var(--gray-700); }

.footer__legal { display: flex; gap: var(--s-6); }
.footer__legal a {
  font-size: var(--text-xs);
  color: var(--gray-700);
  transition: color var(--duration-xs) var(--ease);
}
.footer__legal a:hover { color: var(--gray-500); }

@media (max-width: 767px) {
  .footer__grid { flex-direction: column; gap: var(--s-6); }
  .footer__contact { text-align: left; }
  .footer__bottom { flex-direction: column; gap: var(--s-3); text-align: center; }
}

/* ─── 18. SCROLL ANIMATIONS ────────────────────────────────── */

/* Base: hidden until triggered.
   Distances are deliberately short — a 40px travel on every block is
   what makes a page read as "scroll-reveal template". The motion should
   register as settling, not as an entrance. */
.anim {
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}

/* Fade up (default) */
.anim--up {
  transform: translate3d(0, 18px, 0);
}

/* Fade in (no movement) */
.anim--fade {
  transform: none;
}

/* Scale in */
.anim--scale {
  transform: scale(0.985);
}

/* Slide from left */
.anim--left {
  transform: translate3d(-20px, 0, 0);
}

/* Slide from right */
.anim--right {
  transform: translate3d(20px, 0, 0);
}

/* No JS at all: never hide anything. */
@media (scripting: none) {
  .anim, .anim-group > * { opacity: 1 !important; transform: none !important; }
}

/* Visible state */
.anim.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger group: children animate sequentially */
.anim-group > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}

.anim-group.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Tighter stagger, capped. The old 80ms × 12 meant the last tile in a
   grid arrived 880ms after the first — long enough that fast scrolling
   left visibly empty cells. */
.anim-group.is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.anim-group.is-visible > *:nth-child(2)  { transition-delay: 45ms; }
.anim-group.is-visible > *:nth-child(3)  { transition-delay: 90ms; }
.anim-group.is-visible > *:nth-child(4)  { transition-delay: 135ms; }
.anim-group.is-visible > *:nth-child(5)  { transition-delay: 180ms; }
.anim-group.is-visible > *:nth-child(6)  { transition-delay: 225ms; }
.anim-group.is-visible > *:nth-child(n+7) { transition-delay: 260ms; }

/* Safety net: content reveals itself even if JS never runs or the
   observer never fires. 400ms bounds the worst-case blank window —
   the previous 1.5s was long enough to screenshot an empty viewport. */
@keyframes anim-fallback {
  to { opacity: 1; transform: none; }
}
.anim:not(.is-visible) {
  animation: anim-fallback 0s 0.4s forwards;
}
.anim-group:not(.is-visible) > * {
  animation: anim-fallback 0s 0.4s forwards;
}

/* Parallax background (controlled by JS) */
.parallax {
  will-change: transform;
  transition: none;
}

/* ─── 19. UTILITIES ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.mb-2  { margin-bottom: var(--s-2); }
.mb-4  { margin-bottom: var(--s-4); }
.mb-6  { margin-bottom: var(--s-6); }
.mb-8  { margin-bottom: var(--s-8); }
.mb-12 { margin-bottom: var(--s-12); }
.mb-16 { margin-bottom: var(--s-16); }
.mt-4  { margin-top: var(--s-4); }
.mt-8  { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }

.text-center { text-align: center; }

/* Match tile grid width/padding for non-tile sections */
.container--tile {
  max-width: var(--max-w-wide);
  padding-left: var(--tile-gap);
  padding-right: var(--tile-gap);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }

@media (max-width: 1023px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ─── 20. APPLE TILE GRID ──────────────────────────────────── */

/* Tile container */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tile-gap);
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--tile-gap);
}

/* Base tile — clickable card with bg image */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.tile:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

/* Background image layer */
.tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out);
  z-index: 0;
}

.tile:hover .tile__bg {
  transform: scale(1.04);
}

/* Gradient overlay */
.tile__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0.15) 100%
  );
}

/* Text content inside tile */
.tile__body {
  position: relative;
  z-index: 1;
  padding: var(--s-10) var(--s-8);
}

.tile__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--s-3);
}

.tile__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: var(--s-3);
}

.tile__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: var(--s-4);
}

.tile__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--white);
  transition: gap var(--duration-xs) var(--ease);
}

.tile__arrow::after {
  content: '\2192';
  transition: transform var(--duration-xs) var(--ease);
}

.tile:hover .tile__arrow::after {
  transform: translateX(4px);
}

/* Featured tile — full width */
.tile--featured {
  grid-column: 1 / -1;
  min-height: 480px;
}

.tile--featured .tile__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}

.tile--featured .tile__desc {
  max-width: 520px;
}

@media (max-width: 767px) {
  .tiles {
    grid-template-columns: 1fr;
    padding: 0 var(--s-6);
  }
  .tile {
    min-height: 340px;
  }
  .tile--featured {
    min-height: 380px;
  }
}

/* ─── 21. CARD ENHANCEMENTS ────────────────────────────────── */

/* Keynote cards — override old 1px-gap border grid */
.keynotes {
  background: transparent;
  gap: var(--tile-gap);
}

.keynote {
  background: var(--gray-900);
  border-radius: var(--radius);
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.keynote:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

.keynote--wide {
  background: var(--gray-900);
}

/* Testimonial cards */
.testimonial {
  background: var(--gray-900);
  border-radius: var(--radius);
  padding: var(--s-8);
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.testimonial:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

/* Offering cards — override base .offering grid layout */
.offering.offering--card {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: var(--s-3);
  background: var(--gray-900);
  border-radius: var(--radius);
  padding: var(--s-8);
  border-bottom: none;
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.offering.offering--card:first-child { padding-top: var(--s-8); }
.offering.offering--card:last-child { border-bottom: none; }

.offering.offering--card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

/* Workshop item cards — override base .workshop-item flex layout */
.workshop-item.workshop-item--card {
  flex-direction: column;
  align-items: flex-start;
  background: var(--gray-900);
  border-radius: var(--radius);
  padding: var(--s-8);
  border-bottom: none;
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.workshop-item.workshop-item--card:first-child { padding-top: var(--s-8); }
.workshop-item.workshop-item--card:last-child { border-bottom: none; }

.workshop-item.workshop-item--card .workshop-item__arrow {
  align-self: flex-end;
  margin-top: var(--s-4);
}

.workshop-item.workshop-item--card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

/* Outcome cards */
.outcome-card {
  background: var(--gray-900);
  border-radius: var(--radius);
  padding: var(--s-8);
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.outcome-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lift);
}

/* On surface sections, outcome cards use darker bg */
.section--surface .outcome-card {
  background: var(--gray-800);
}

/* Identity cards (about page) */
.identity-card {
  background: var(--gray-900);
  border-radius: var(--radius-sm);
  padding: var(--s-6) var(--s-8);
  border-bottom: none;
  transition: transform var(--duration-xs) var(--ease),
              box-shadow var(--duration-xs) var(--ease);
}

.identity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Stage photos */
.stage-photo {
  border-radius: var(--radius);
  overflow: hidden;
}

.stage-photo img {
  transition: transform 0.6s var(--ease-out);
}

.stage-photo:hover img {
  transform: scale(1.03);
}

/* ─── 22. CARD GRID LAYOUTS ────────────────────────────────── */

/* Product gallery (homepage). Defined as a class so the markup doesn't
   need an inline style="display:grid; grid-template-columns:..." that
   the stylesheet then has to fight with [style*=] selectors. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.gallery-grid > * {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (max-width: 767px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Wider line-height for the long intro paragraphs in tile containers */
.container--tile p.text-muted {
  line-height: 1.8;
  letter-spacing: 0.01em;
}

/* Offering grid (2x2) */
.offering-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tile-gap);
}

@media (max-width: 767px) {
  .offering-grid {
    grid-template-columns: 1fr;
  }
}

/* Workshop grid (2x2) */
.workshop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tile-gap);
}

@media (max-width: 767px) {
  .workshop-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── 23. PRINT ─────────────────────────────────────────────── */
@media print {
  .nav, .footer, .photo-note { display: none; }
  body { background: #fff; color: #000; }
  .section { min-height: auto; padding: 2rem 0; }
  .anim, .anim-group > * { opacity: 1 !important; transform: none !important; }
}

/* === ADDITIONS === */

/* Blog post link styling — uses the signal colour so "actionable" means
   one thing sitewide. The old #00D4FF cyan appeared nowhere else. */
.prose a {
  color: #00D4FF;
  text-decoration: underline;
  text-decoration-color: rgba(0, 212, 255, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-xs) ease;
}
.prose a:hover { text-decoration-color: #00D4FF; }

/* Footer.
   NOTE: the colour !important overrides that used to live here have been
   removed — they outranked the contrast block at the end of this file
   regardless of source order, which is why that block had to escalate to
   !important too. Colours are now set once, at the bottom. */
.footer { color: var(--gray-200); }
.footer__links { display: none; }

/* MailerLite Form */
.ml-form-embedSubmitLoad { display: inline-block; width: 20px; height: 20px; }
.ml-form-embedSubmitLoad:after { content: " "; display: block; width: 11px; height: 11px; margin: 1px; border-radius: 50%; border: 4px solid #fff; border-color: #000 #000 #000 transparent; animation: ml-form-embedSubmitLoad 1.2s linear infinite; }
@keyframes ml-form-embedSubmitLoad { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#mlb2-39416760.ml-form-embedContainer { box-sizing: border-box; display: table; margin: 0 auto; position: static; width: 100% !important; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper { background-color: #000; border: 0; border-radius: 4px; box-sizing: border-box; display: inline-block !important; margin: 0; padding: 0; position: relative; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 600px; width: 100%; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody { padding: 20px 20px 0 20px; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin: 0 0 10px 0; width: 100%; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input { background-color: #fff !important; color: #000 !important; border: 1px solid #ccc; border-radius: 4px !important; font-size: 14px !important; padding: 10px !important; width: 100% !important; box-sizing: border-box !important; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { margin: 0 0 20px 0; width: 100%; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { background-color: #fff !important; border: none !important; border-radius: 4px !important; color: #000 !important; cursor: pointer; font-size: 14px !important; font-weight: 700 !important; padding: 10px !important; width: 100% !important; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover { background-color: #333 !important; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description { color: #fff; font-size: 12px; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label { font-weight: normal; margin: 0; padding: 0 0 0 24px; position: relative; display: block; min-height: 24px; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p { color: #fff !important; font-size: 12px !important; margin: 0 !important; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p { color: #fff; font-size: 12px; line-height: 22px; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 20px; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 { color: #fff; font-size: 30px; }
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p { color: #fff; font-size: 14px; }
.ml-form-checkboxRow { margin: 0 0 20px 0; }
.ml-form-embedPermissions { margin: 0 0 15px 0; }

/* === OVERFLOW FIX === */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Card base style */
.card {
  background: var(--gray-900);
  border-radius: var(--radius-sm);
}
.section--surface .card {
  background: var(--gray-800);
}

/* Nav toggle touch target */
.nav__toggle {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  align-items: center;
}

/* Nav mobile links touch targets */
.nav__mobile a {
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contact info word break protection */
.contact-info__value {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Hero mobile image — hidden on desktop */
.hero__mobile-img {
  display: none;
}

/* === MOBILE (max-width: 767px) === */
@media (max-width: 767px) {
  /* Footer mobile */
  .footer .container { padding: 0 var(--s-6); }
  .footer__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--s-6) !important;
  }
  .footer__contact { text-align: center !important; }
  .footer__bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--s-4) !important;
  }

  /* CTA buttons auto width */
  .section--centered .btn-group { align-items: center; }
  .section--centered .btn-group .btn { width: auto !important; }

  /* Clients grid 2-col */
  .clients {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s-4) !important;
    overflow: hidden;
  }

  /* Prevent horizontal overflow */
  .container, .container--tile, .container--wide, .container--narrow {
    max-width: 100% !important;
  }

  /* Testimonials */
  .testimonial__quote { font-size: var(--text-sm) !important; }

  /* Inline style grid overrides */
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Tile overlay for text readability */
  .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
  }
  .tile__body { position: relative; z-index: 2; }

  /* MailerLite responsive */
  .ml-form-embedWrapper { width: 100% !important; }

  /* Image heights */
  [style*="height: 280px"],
  [style*="height: 250px"] {
    height: 180px !important;
  }
  img[style*="height: 240px"] {
    height: 200px !important;
  }
  img[style*="max-height: 400px"] {
    max-height: 280px !important;
  }

  /* Hero: image on top, text below */
  .hero {
    min-height: auto !important;
    padding: 0 !important;
    flex-direction: column;
    align-items: stretch;
  }
  .hero .section__bg {
    display: none !important;
  }
  .hero__mobile-img {
    display: block !important;
    width: 100%;
    height: 55vh;
    object-fit: cover;
    /* default only — per-page inline object-position must be able to win,
       so this is deliberately NOT !important */
    object-position: 70% 30%;
  }
  .hero .container {
    padding-top: var(--s-8);
    padding-bottom: var(--s-12);
  }

  /* Sub-page hero backgrounds */
  .section > .section__bg {
    background-position: 70% 20% !important;
  }
  .section__bg--darken {
    background-position: 60% 20% !important;
  }
  .section__bg--gradient {
    background-position: 70% 20% !important;
  }

  /* All tile backgrounds: frame person */
  .tile__bg {
    background-position: center 25% !important;
  }
  .tile--featured .tile__bg {
    background-position: center 30% !important;
  }

  /* Stage photo image framing */
  .stage-photo img {
    object-position: center 20% !important;
  }

  /* Client name overflow fix */
  .client__name {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 0.8rem !important;
  }
  .client__tag {
    font-size: 0.75rem !important;
  }

  /* Stats: 2x2 with readable font */
  .stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s-6) !important;
  }
  .stats__grid > *:last-child {
    grid-column: auto !important;
  }
  .stats__number {
    font-size: 2rem !important;
  }
  .stats__label {
    font-size: 0.75rem !important;
    line-height: 1.3;
  }

  /* Container-tile consistent padding */
  .container--tile {
    padding-left: var(--s-6) !important;
    padding-right: var(--s-6) !important;
  }

  /* Inline min-height overrides for tiles */
  .tile[style*="min-height"] {
    min-height: auto !important;
  }
  .tile--featured[style*="min-height"] {
    min-height: 380px !important;
  }

  /* Grid-2 reduce gap */
  .grid-2 {
    gap: var(--s-6) !important;
  }

  /* Containment on the actual scroll containers, not a blanket
     `* { max-width: 100vw }` — that clamped every element on the page
     and broke intentionally wide children. */
  .section, .section--compact, .section--surface {
    overflow: hidden;
  }
  .tiles, .stats, .testimonials {
    overflow: hidden;
  }

  /* MailerLite checkbox touch target */
  .ml-form-checkboxRow label {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .ml-form-checkboxRow input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }
}

/* iPad: grid-3 with 3 items keep 3-col */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .testimonials:has(.testimonial:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .keynote {
    padding: var(--s-8) var(--s-6) !important;
  }
}

@media (max-width: 480px) {
  .section--compact { padding: var(--s-12) 0; }
  .stats { padding: var(--s-10) 0; }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats__number {
    font-size: 1.8rem !important;
  }
  .stats__label {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 375px) {
  .btn {
    white-space: normal !important;
    text-align: center;
  }
}

/* === TEXT COLOUR / CONTRAST (rebuilt 2026-07-28) =================
   Measured against the three real backgrounds:
     --black #0A0C0F  ·  --gray-900 #12151A  ·  --gray-800 #1A1E24

     token      worst-case ratio     verdict
     gray-200        10.28           PASS
     gray-300         6.36           PASS  ← default for body/meta text
     gray-400         4.38           large/bold text only (just under AA)
     gray-500         2.98           decorative only, never text
     signal           8.11           PASS

   So: anything at normal size uses gray-300. gray-400 is reserved for
   large or bold text, gray-500 for purely decorative marks.
   These rules sit at the end of the file and share specificity with the
   base component rules, so source order wins — no !important needed. */

.stats__label            { color: var(--gray-300); }
.text-muted              { color: var(--gray-300); }
.testimonial__role       { color: var(--gray-300); }
.keynote__subtitle       { color: var(--gray-300); }
.keynote__desc           { color: var(--gray-300); }
.workshop-item__desc     { color: var(--gray-300); }
.client__tag             { color: var(--gray-300); }
.keynote__number         { color: var(--gray-300); }
.keynote__meta           { color: var(--gray-300); }
.contact-info__label     { color: var(--gray-300); }
.offering__list li       { color: var(--gray-300); }
.offering__text          { color: var(--gray-300); }
.photo-note              { color: var(--gray-300); }
input::placeholder       { color: var(--gray-300); opacity: 1; }

/* Footer */
.footer__tagline         { color: var(--gray-300); }
.footer__links a         { color: var(--gray-300); }
.footer__contact a       { color: var(--gray-300); }
.footer__copy            { color: var(--gray-300); }
.footer__legal a         { color: var(--gray-300); }

/* Large text — gray-400 is safe at these sizes */
.statement               { color: var(--gray-200); }

/* Decorative only, not read as text */
.nav__lang span          { color: var(--gray-500); }
.testimonial__quote::before { color: var(--gray-600); }

/* Tile text sits on photography with a gradient scrim, not on a token */
.tile__eyebrow           { color: rgba(255,255,255,0.82); }
.tile__desc              { color: rgba(255,255,255,0.86); }

/* === HERO TEXT RIGHT-ALIGNED ON DESKTOP === */
@media (min-width: 768px) {
  /* Flip gradient: darken from right side for text readability */
  .hero--text-right .section__bg--gradient::after {
    background: linear-gradient(
      to left,
      var(--black) 0%,
      rgba(10,10,10,0.85) 30%,
      rgba(10,10,10,0.3) 60%,
      rgba(10,10,10,0.05) 100%
    ) !important;
  }
  .hero--text-right .section__bg--darken::after {
    background: linear-gradient(
      to left,
      rgba(10,10,10,0.9) 0%,
      rgba(10,10,10,0.6) 35%,
      rgba(10,10,10,0.25) 100%
    ) !important;
  }

  /* Push text content to the right */
  .hero--text-right .section__content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .hero--text-right .section__content .headline-xl,
  .hero--text-right .section__content .body-lg,
  .hero--text-right .section__content p {
    margin-left: auto;
    margin-right: 0;
  }
  .hero--text-right .section__content .btn-group {
    justify-content: flex-end;
  }
}
/* ============================================================
   LAMPLIGHT THEME — overrides for the legacy class system.
   Applied after style.css so every page (incl. blog) inherits
   the redesign without HTML changes.
   ============================================================ */

:root {
  --black: #000000;
  --gray-900: #202020;   /* elevated surfaces -> charcoal */
  --gray-400: #999999;   /* muted notes, consent labels */
  --gray-200: rgba(255, 255, 255, 0.85); /* info values, meta */
  --gray-800: #333333;   /* structural borders -> graphite */
  --gray-700: #333333;   /* hairlines */
  --gray-600: #999999;   /* smallest text tier, lifted for contrast */
  --gray-300: #999999;

  --font: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font);
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --cream: #f5f5f0;

  --radius: 0px;         /* photography: sharp editorial cuts */
  --radius-sm: 10px;     /* content cards */
  --lift: 0px;
  --shadow-lift: none;
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --hairline: 1px solid #333333;
}

body {
  background: var(--black);
  letter-spacing: -0.018em;
}

/* ---------- Type: whisper-weight poster headlines ---------- */
.headline-xl {
  font-weight: 300;
  letter-spacing: -0.045em;
  font-size: clamp(2.75rem, 6.8vw, 6.25rem);
  line-height: 1.02;
}
.headline-lg { font-weight: 300; letter-spacing: -0.035em; }
.headline-md { font-weight: 300; letter-spacing: -0.03em; }

/* The single flourish: serif italic payoff */
.headline-xl em, .headline-lg em, .headline-md em,
.statement em, .prose em, h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.04em;
}

.statement {
  font-weight: 300;
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.eyebrow {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #999999;
}

/* ---------- Buttons: pills, cream lamplight primary ---------- */
.btn {
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 30px;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease),
              border-color 0.28s var(--ease), color 0.28s var(--ease);
}
.btn--white, .btn--dark {
  background: var(--cream);
  color: #000000;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
}
.btn--white:hover, .btn--dark:hover {
  background: var(--cream);
  color: #000000;
  transform: translateY(-2px);
}
.btn--outline, .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.btn--outline:hover, .btn--ghost:hover { border-color: #ffffff; background: transparent; color: #fff; }

/* ---------- Stats: serif monuments ---------- */
.stats__number {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.25rem, 6.5vw, 6.5rem);
  letter-spacing: -0.02em;
  color: var(--cream);
}
.stats__label {
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
}
.stats__item { text-align: center; }

/* ---------- Surfaces: elevation through tone ---------- */
.section--surface { background: #202020; }
.card, .identity-card, .outcome-card, .offering--card,
.workshop-item--card, .keynote {
  background: #202020;
  border-radius: 10px;
  border: 0;
  box-shadow: none;
}

/* ---------- Photography: sharp, cinematic ---------- */
.tile { border-radius: 0; box-shadow: none !important; }
.tile:hover { transform: none; }
.tile__bg { transition: transform 1.2s var(--ease); }
.tile:hover .tile__bg { transform: scale(1.03); }
.gallery-grid img, .stage-photo, .split__image img { border-radius: 0; filter: saturate(0.92); }

/* ---------- Quotes: serif voice ---------- */
.testimonial { border-top: 1px solid #333333; background: transparent; }
.testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.testimonial__role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999999;
}

/* ---------- Clients ---------- */
.client__name {
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
}
.client__tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
}

/* ---------- Chrome ---------- */
.nav.scrolled {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
}
.nav__link { font-weight: 500; font-size: 15px; }
.footer { border-top: 1px solid #333333; }

/* ---------- Blog prose ---------- */
.prose p { color: rgba(255, 255, 255, 0.78); }
.prose h1, .prose h2, .prose h3 { font-weight: 300; letter-spacing: -0.03em; }
.prose blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35em;
  line-height: 1.4;
  color: var(--cream);
  border-left: 1px solid #333333;
  padding-left: 1.5rem;
}
.prose a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Forms: bare underline inputs, cream pill submit ---------- */
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #757575 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  padding: 12px 0 !important;
}
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background: var(--cream) !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 14px !important;
}
#mlb2-39416760.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background: #ffffff !important;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
  border-radius: 0;
}

::selection { background: var(--cream); color: #000000; }

/* ---------- Cookie banner: achromatic, cream primary ---------- */
.cc-banner { background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(16px); }
.cc-banner__text a { color: #f5f5f0 !important; }
.cc-btn { border-radius: 9999px !important; font-weight: 500 !important; }
.cc-btn--accept { background: #f5f5f0 !important; color: #000 !important; }
.cc-btn--accept:hover { background: #ffffff !important; }
.cc-btn:focus-visible { outline: 2px solid #f5f5f0 !important; }

/* ---------- New chrome: lockup + Menu pill + overlay (ported from homepage) ---------- */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(16px, 3vw, 40px);
  transition: background 0.28s var(--ease);
}
.top.is-solid { background: #000000; }
.top__lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.top__mark { font-weight: 500; letter-spacing: 2px; color: var(--cream); font-size: 15px; flex: none; }
.top__eyebrow {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top__eyebrow strong { font-weight: 500; color: #ffffff; }
.top__right { display: flex; align-items: center; gap: 16px; flex: none; }
.top__lang { font-size: 11px; letter-spacing: 0.05em; color: #999999; display: flex; gap: 8px; text-transform: uppercase; }
.top__lang a { color: #999999; }
.top__lang a.active { color: #ffffff; }
.menu-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 9999px;
  border: 0;
  background: var(--cream);
  color: #000000;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.15) 0px 4px 20px 0px;
  transition: transform 0.28s var(--ease);
}
.menu-btn:hover { transform: translateY(-2px); }
.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000000;
  padding: 120px clamp(16px, 3vw, 40px) 40px;
  overflow-y: auto;
}
.menu.is-open { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-size: clamp(32px, 6vh, 58px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #ffffff;
  opacity: 0.85;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.menu__links a:hover { opacity: 1; transform: translateX(8px); }
.menu__links a span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.42em;
  color: #999999;
  margin-right: 20px;
}
.menu__foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
@media (max-width: 1023px) { .top__eyebrow { display: none; } }

/* Serif payoff word (auto-applied to hero headlines) */
.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.04em;
}

/* Footer wordmark replacing logo image */
.lp-mark { font-weight: 500; letter-spacing: 2px; color: var(--cream); font-size: 15px; }
.lp-word { font-weight: 500; font-size: 16px; color: #ffffff; }

/* ---------- Card voice: light editorial titles, flat surfaces ---------- */
h3, h4 { font-weight: 400; }
.offering__title, .workshop-item__title, .keynote__title {
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}
.offering--card, .outcome-card, .workshop-item--card { border-radius: 10px; }
.outcome-card:hover, .offering--card:hover { transform: none; box-shadow: none; }
.offering__list li { color: #999999; }
.offering__text { color: #999999; }

/* ---------- Clients marquee (auto-built from legacy .clients grids) ---------- */
.lp-marquee {
  overflow: hidden;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  padding: 40px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.lp-marquee__track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: lp-marquee 45s linear infinite;
}
.lp-marquee__item {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.lp-marquee__item em {
  font-style: normal;
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
  margin-left: 12px;
  font-weight: 500;
}
@keyframes lp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lp-marquee__track { animation: none; } }

/* ---------- Layout: full-bleed like the homepage, same edge padding ---------- */
.container, .container--tile, .container--wide {
  max-width: none;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}
/* Reading prose stays at a readable measure */
.container--narrow {
  max-width: 680px;
}

/* ============================================================
   DEVIATION SWEEP — remaining legacy styles brought in line
   ============================================================ */

/* Raw headings still carried bold weights */
h2 { font-weight: 300; letter-spacing: -0.03em; }
h4 { font-weight: 400; }
.testimonial__author { font-weight: 500; }

/* Labels: one tracking system (0.08em / 400), not the old 0.14em / 600 */
.tile__eyebrow, .keynote__meta, .contact-info__label {
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* Keynote numbers join the serif index voice ("No. 01") */
.keynote__number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
}

/* Flat system: no hover lifts or drop shadows anywhere */
.identity-card:hover, .keynote:hover, .testimonial:hover,
.workshop-item.workshop-item--card:hover, .offering.offering--card:hover,
.card:hover, .tile:hover {
  transform: none;
  box-shadow: none;
}

/* Editorial imagery: sharp corners on all photo containers */
.gallery-grid > *, .stage-photo, .parallax { border-radius: 0; }
.testimonial { border-radius: 0; }

/* Underline inputs everywhere — strong enough to beat inline styles */
input[type="email"], input[type="text"], input[type="tel"], textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #757575 !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: #ffffff !important;
}
input[type="email"]:focus, input[type="text"]:focus, input[type="tel"]:focus, textarea:focus {
  outline: none;
  border-bottom-color: #f5f5f0 !important;
}

/* Fine print was gray-500 (3.7:1) — lift to smoke */
:root { --gray-500: #999999; }
.split__image, .split__image img { border-radius: 0; }
.tile__title {
  font-weight: 300;
  letter-spacing: -0.035em;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.05;
}
.tile__desc { font-weight: 400; }

/* ---------- Index-parity: cinematic bands & contact sheets ---------- */
/* Featured photo bands break out to full viewport width, like the homepage tiles */
.container > .tile--featured, .container--tile > .tile--featured,
.anim-group > .tile--featured, .tile--featured {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  min-height: 62vh;
}
/* Legacy tile grids: 2px seams, edge-to-edge, like the index "What I do" */
.tiles {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  gap: 2px;
}
.tiles .tile--featured { width: auto; margin-left: 0; }
/* Gallery grids: edge-to-edge contact sheet with 2px seams */
.gallery-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  gap: 2px;
}
.gallery-grid img { height: clamp(220px, 30vw, 420px); object-fit: cover; }
.tiles { max-width: none; margin-right: 0; }
.tiles, .container > .tiles, .container--tile > .tiles { padding-left: 0; padding-right: 0; }
/* Featured bands: cinematic height (inline min-heights on legacy pages are too squat at full bleed) */
.tile--featured { min-height: 76svh !important; }
/* Statement sections: match the index methodology band — charcoal, left, heading scale */
section:has(.statement) {
  background: #202020;
  padding-top: clamp(64px, 10vh, 120px);
  padding-bottom: clamp(64px, 10vh, 120px);
}
.statement {
  text-align: left;
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
/* Centered legacy sections -> index-style left-aligned editorial */
.section--centered, .text-center { text-align: left !important; }
.section--centered .section__body, .section--centered .section__content { margin-left: 0; }
.section--centered p, .section--centered form, .section--centered label,
.text-center p, .section--compact .container--narrow p, .container--narrow form {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.section--centered .btn-group, .container--narrow .btn-group { justify-content: flex-start !important; }
.statement { margin-left: 0 !important; }
/* CTA / newsletter blocks hug the left edge like the index closing; article prose stays centered */
.container--narrow:not(:has(.prose)) { margin-left: 0; }
/* Closing headlines at display scale */
.section--centered .headline-md, .container--narrow .headline-md {
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  line-height: 1.03;
  max-width: 16ch;
}
/* Section headlines at index heading scale */
.headline-lg { font-size: clamp(2.4rem, 4.5vw, 4.4rem); line-height: 1.05; max-width: 18ch; }
/* Body copy always at a readable measure, like the index */
p { max-width: 72ch; }
/* Long statements: balance scale vs. measure */
.statement {
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  max-width: 28ch;
  line-height: 1.12;
}
/* One form-section format: headings left, flush with the form */
.section--centered h1, .section--centered h2, .section--centered h3,
.container--narrow h1, .container--narrow h2 {
  text-align: left !important;
  margin-left: 0 !important;
}

/* ---------- Brand mark: felix-x logo, lamplight white ---------- */
.top__logo { height: 20px; width: auto; flex: none; filter: brightness(0) invert(1); }
.lp-logo { height: 18px; width: auto; vertical-align: -3px; filter: brightness(0) invert(1); margin-right: 6px; }

/* Tagline degrades by whole segments — never mid-word ellipsis */
.top__eyebrow { text-overflow: clip; }
@media (max-width: 1439px) { .top__eyebrow .tg-3 { display: none; } }
@media (max-width: 1259px) { .top__eyebrow .tg-2 { display: none; } }