/* ============================================================
   SITE STYLES — Tina Rossner Website
   Loaded AFTER colors_and_type.css. Page-level layout helpers.
   ============================================================ */

html, body { margin: 0; padding: 0; }
body {
  background: var(--clear-earth-light);
  color: var(--fg);
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

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

/* ---- Typography helpers ---- */
.script {
  font-family: var(--font-script);
  font-size: 1.4em;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  font-weight: 400;
  display: inline-block;
}

.caps {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.12;
}

/* ---- Layout primitives ---- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}
.section { padding: 128px 0; }
.section-sm { padding: 96px 0; }

/* ---- Navigation ---- */
.nav-link {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg-soft); text-decoration: none; border: 0;
  transition: color var(--dur-quick) var(--ease-graceful);
}
.nav-link:hover, .nav-link.active { color: var(--fg); }

.tr-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--clear-earth-light) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--true-soul) 10%, transparent);
  padding: 18px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.tr-nav-brand {
  display: flex; align-items: center; justify-content: center;
  border-bottom: 0;
  justify-self: center;
}
.tr-nav-logo {
  display: inline-block;
  width: 200px; height: 76px;
  background: var(--true-soul);
  -webkit-mask: url("../assets/logo-main.svg") no-repeat center / contain;
          mask: url("../assets/logo-main.svg") no-repeat center / contain;
  flex-shrink: 0;
}
.tr-nav-links-left,
.tr-nav-links-right {
  display: flex; align-items: center; gap: 28px;
}
.tr-nav-links-left { justify-self: start; }
.tr-nav-links-right { justify-self: end; }
.tr-nav-burger {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 4px; padding: 0;
}
.tr-nav-burger > span {
  display: block; width: 22px; height: 1.5px; background: var(--fg);
  transition: transform 280ms var(--ease-graceful), opacity 180ms;
}
.tr-nav-mobile {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--clear-earth-light); border-bottom: 1px solid var(--line);
  padding: 16px 24px 28px;
  display: flex; flex-direction: column;
}

@media (max-width: 1280px) {
  .tr-nav { padding: 14px 32px; }
  .tr-nav-logo { width: 170px; height: 64px; }
  .tr-nav-links-left, .tr-nav-links-right { gap: 22px; }
  .tr-nav-links-left .nav-link, .tr-nav-links-right .nav-link { font-size: 11px; letter-spacing: 0.28em; }
}
@media (max-width: 820px) {
  .tr-nav { padding: 14px 20px; grid-template-columns: auto 1fr auto; gap: 12px; }
  .tr-nav-brand { justify-self: start; }
  .tr-nav-links-left, .tr-nav-links-right { display: none; }
  .tr-nav-burger { display: flex; justify-self: end; }
  .tr-nav-logo { width: 140px; height: 50px; }
}

/* ---- Hero (Freisteller layout) ---- */
.hero-section {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 80px 64px 96px;
  min-height: min(960px, 96vh);
  display: flex;
  align-items: center;
  overflow: visible;
}
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 620px;
}
.hero-figure {
  position: absolute;
  top: 0;
  right: -72px;
  bottom: 0;
  width: 72%;
  pointer-events: none;
  z-index: 1;
}
.hero-figure-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  position: relative; z-index: 2;
}
.hero-curve {
  position: absolute;
  right: 0; bottom: 0;
  width: 70%; height: 85%;
  z-index: 1;
  pointer-events: none;
}

/* Headline with layered script behind caps */
.hero-headline {
  position: relative;
  margin-bottom: 36px;
}
.hero-script {
  position: absolute;
  top: -34px; left: 80px;
  font-family: var(--font-script);
  font-size: clamp(132px, 16vw, 220px);
  line-height: 0.85;
  color: var(--vanilla-sky-light);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.hero-cap-row {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--true-soul);
  position: relative;
  z-index: 2;
}
.hero-cap-1 { margin-bottom: 8px; }
.hero-cap-2 { margin-bottom: 0; }
.hero-cap-3 { margin-bottom: 0; }

.hero-body {
  margin: 0 0 36px;
  max-width: 540px;
  font-size: 17px; line-height: 1.7;
  color: var(--true-soul);
  position: relative; z-index: 3;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: 40px;
  position: relative; z-index: 3;
}
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  position: relative; z-index: 3;
}
.hero-meta .eyebrow { color: var(--fg); opacity: 0.8; }
.hero-dot { color: var(--fg); opacity: 0.5; }

@media (max-width: 1200px) {
  .hero-figure { width: 56%; right: -16px; }
  .hero-copy { max-width: 50%; }
}
@media (max-width: 900px) {
  .hero-section { flex-direction: column; min-height: 0; padding: 48px 24px 24px; }
  .hero-figure {
    position: relative; width: 100%; height: 70vw; max-height: 540px;
    top: auto; right: auto; bottom: auto;
    order: 2; margin-top: 32px;
  }
  .hero-curve { width: 100%; }
  .hero-figure-img { object-position: center bottom; }
  .hero-copy { max-width: 100%; order: 1; }
  .hero-script { left: 40px; top: -24px; }
}

/* ---- About Hero (Freisteller layout) ---- */
.about-hero-section {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 64px 64px 96px;
  min-height: min(880px, 92vh);
  display: flex;
  align-items: center;
  overflow: visible;
}
.about-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 580px;
}
.about-hero-figure {
  position: absolute;
  top: 0;
  right: -32px;
  bottom: 0;
  width: 62%;
  pointer-events: none;
  z-index: 1;
}
.about-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: 4px;
  box-shadow: var(--shadow-3);
}
@media (max-width: 1100px) {
  .about-hero-figure { width: 50%; right: -16px; }
  .about-hero-copy { max-width: 48%; }
}
@media (max-width: 900px) {
  .about-hero-section { flex-direction: column; min-height: 0; padding: 48px 24px 24px; }
  .about-hero-figure {
    position: relative; width: 100%; height: 80vw; max-height: 600px;
    top: auto; right: auto; bottom: auto;
    order: 2; margin-top: 32px;
  }
  .about-hero-img { object-position: center bottom; }
  .about-hero-copy { max-width: 100%; order: 1; }
}

/* ---- Hairline rule used as section divider ---- */
.rule {
  height: 1px; width: 64px;
  background: var(--fg-soft);
  border: 0; margin: 0 0 32px;
}

/* ---- Forms ---- */
.field {
  display: flex; flex-direction: column; gap: 8px;
}
.field label {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-soft);
}
.input, .textarea {
  font-family: var(--font-body); font-size: 16px;
  background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--line);
  padding: 14px 0 12px;
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-graceful);
  width: 100%;
}
.input:focus, .textarea:focus { border-bottom-color: var(--fg); }
.input::placeholder, .textarea::placeholder {
  color: var(--fg-muted); opacity: 0.6;
}
.textarea {
  resize: vertical; min-height: 120px; line-height: 1.55;
}

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp var(--dur-slow) var(--ease-graceful) both; }
.fade-up:nth-child(1) { animation-delay: 0ms; }
.fade-up:nth-child(2) { animation-delay: 60ms; }
.fade-up:nth-child(3) { animation-delay: 120ms; }
.fade-up:nth-child(4) { animation-delay: 180ms; }
.fade-up:nth-child(5) { animation-delay: 240ms; }

/* ---- Footer ---- */
footer a {
  color: var(--fg); border-bottom: 0; font-size: 14px;
  transition: color var(--dur-quick) var(--ease-graceful);
}
footer a:hover { color: var(--accent); }

/* ---- Mobile (lightweight) ---- */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .section { padding: 80px 0; }
}

/* ============================================================
   FULL MOBILE RESPONSIVE LAYER — <768px
   Overrides inline grid layouts from React components via
   [style*="..."] attribute selectors + !important.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Container & Body ---- */
  .container { padding: 0 20px !important; }
  body { overflow-x: hidden; }

  /* ---- Universal grid collapse for ANY inline-styled grid ---- */
  main section [style*="display: grid"],
  main section [style*="display:grid"],
  footer [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ============= HERO ============= */
  .hero-section {
    padding: 24px 20px 56px !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-copy {
    max-width: 100% !important;
    order: 1;
  }
  .hero-figure {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    top: auto !important; right: auto !important; bottom: auto !important;
    order: 2;
    margin: 32px -8px 0 -8px !important;
  }
  .hero-curve { width: 100% !important; height: 90% !important; }
  .hero-figure-img { object-position: center bottom !important; }
  .hero-script {
    position: relative !important;
    left: 0 !important; top: 0 !important;
    font-size: clamp(72px, 22vw, 110px) !important;
    display: block;
    margin-bottom: -12px;
  }
  .hero-cap-row { font-size: clamp(26px, 6.5vw, 38px) !important; line-height: 1.18 !important; }
  .hero-headline { margin-bottom: 24px !important; }
  .hero-body { font-size: 16px !important; margin-bottom: 28px !important; }
  .hero-ctas { gap: 12px !important; margin-bottom: 28px !important; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-meta { gap: 8px 12px !important; }
  .hero-meta .eyebrow { font-size: 10px !important; letter-spacing: 0.22em !important; }

  /* ============= ABOUT HERO ============= */
  .about-hero-section {
    padding: 24px 20px 56px !important;
    min-height: 0 !important;
    flex-direction: column !important;
  }
  .about-hero-copy { max-width: 100% !important; order: 1; }
  .about-hero-figure {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    top: auto !important; right: auto !important; bottom: auto !important;
    order: 2;
    margin-top: 32px !important;
  }
  .about-hero-img { object-position: center 25% !important; }

  /* ============= MENTORING ============= */
  #mentoring { padding: 16px 0 56px !important; }

  /* Hero card photo: kill the 540px min-height */
  #mentoring [style*="min-height: 540"],
  #mentoring [style*="minHeight"] {
    min-height: 0 !important;
  }
  #mentoring section [style*="display: grid"] > div[style*="position: relative"][style*="min-height"],
  #mentoring [style*="position: relative; min-height"] {
    min-height: 280px !important;
    aspect-ratio: 4 / 3;
  }
  /* Hero copy padding */
  #mentoring [style*="padding: 56px 56px 56px 56px"],
  #mentoring [style*="padding: \"56px 56px 56px 56px\""] {
    padding: 32px 24px !important;
  }

  /* Me-Time cards: remove right borders that look broken when stacked */
  #mentoring [style*="border-right: 1px solid"] {
    border-right: 0 !important;
  }

  /* Module grid: kill min-height per card */
  #mentoring [style*="min-height: 220"] {
    min-height: 0 !important;
  }

  /* Inkl section padding */
  #was-drin {
    padding: 40px 24px !important;
  }

  /* CTA card: vertical divider becomes horizontal */
  #mentoring [style*="border-right: 1px solid var(--line); padding-right"],
  #mentoring [style*="borderRight"] {
    border-right: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 28px !important;
    margin-bottom: 28px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* Big paddings on inline cards */
  #mentoring [style*="padding: 56px 56px 56px 56px"],
  #mentoring [style*="padding: \"56px 56px 56px 56px\""],
  #mentoring article[style*="padding: 36px 32px"],
  #mentoring article[style*="padding: 28px 28px 32px"] {
    padding: 28px 20px !important;
  }

  /* ============= PROBLEM / WUNSCH ============= */
  /* Hide the vertical "statt" divider on mobile */
  section[style*="vanilla-sky-light"] [aria-hidden="true"][style*="width: 1"],
  section[style*="vanilla-sky-light"] [aria-hidden="true"][style*="alignSelf"] {
    display: none !important;
  }
  /* If we keep the divider, at least make it horizontal */
  /* Reduce padding */
  section[style*="padding: 112px 0 96px"] {
    padding: 64px 0 56px !important;
  }

  /* ============= STIMMEN ============= */
  #stimmen { padding: 56px 0 !important; }
  /* Big quote photo: shrink height */
  #stimmen [style*="height: 440"] {
    height: 60vw !important;
    max-height: 420px !important;
    margin-bottom: 8px !important;
  }
  /* Pull-quote cards: less padding */
  #stimmen article[style*="padding: 44px 44px 36px"] {
    padding: 32px 24px 28px !important;
    min-height: 0 !important;
  }
  /* Wall: stays single column already via universal collapse */
  #stimmen [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ============= FULL BLEED ============= */
  section[aria-label="Editorial Statement"] {
    height: 70vh !important;
    min-height: 420px !important;
    max-height: 600px !important;
  }
  section[aria-label="Editorial Statement"] img {
    object-position: 70% center !important;
  }
  section[aria-label="Editorial Statement"] > div[style*="position: absolute"][style*="top: 50%"] {
    left: 20px !important;
    right: 20px !important;
    max-width: none !important;
  }
  section[aria-label="Editorial Statement"] h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  /* ============= VORHER NACHHER ============= */
  /* Case cards padding */
  section [style*="padding: 40px 40px 44px"] {
    padding: 28px 20px 32px !important;
  }
  /* Case head: wrap to two rows; align script word below */
  section header[style*="justify-content: space-between"][style*="border-bottom"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  /* Script word smaller */
  section [style*="font-size: 56"] {
    font-size: 40px !important;
  }
  /* CTA box */
  section [style*="margin-top: 96px"][style*="padding: 56px 24px"] {
    margin-top: 56px !important;
    padding: 40px 16px !important;
  }

  /* ============= KONTAKT ============= */
  #kontakt { padding: 56px 0 !important; }
  /* Sticky aside breaks on mobile */
  #kontakt [style*="position: sticky"] {
    position: static !important;
    padding-right: 0 !important;
  }
  /* Form padding */
  #kontakt form[style*="padding: 48px 48px 40px"] {
    padding: 28px 24px 32px !important;
  }

  /* ============= KONTAKT-SEITE (HERO + FAQ) ============= */
  /* Kontakt hero: aside padding tighter */
  section[style*="padding: 80px 0 32px"] aside[style*="padding: 32px 32px 36px"] {
    padding: 24px 20px 28px !important;
  }
  /* CTAs full-width */
  section[style*="padding: 80px 0 32px"] .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* FAQ section padding */
  section[style*="padding: 96px 0"][style*="border-top"] {
    padding: 56px 0 !important;
  }
  /* FAQ question font size & icon alignment */
  section button[aria-expanded] > span:first-child {
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding-right: 12px !important;
  }

  /* ============= IMPRESSUM / AGB / DATENSCHUTZ ============= */
  /* LegalPage section grid: collapse */
  section[style*="padding: 80px 0 96px"] {
    padding: 56px 0 64px !important;
  }
  /* LegalPage sticky aside: unstick */
  section[style*="padding: 80px 0 96px"] aside[style*="position: sticky"] {
    position: static !important;
    margin-bottom: 32px;
  }
  /* TOC: compress on mobile, use 2-col grid for less vertical space */
  section[style*="padding: 80px 0 96px"] nav[style*="border-top: 1px solid var(--line)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 16px !important;
    padding-top: 16px !important;
  }
  section[style*="padding: 80px 0 96px"] nav[style*="border-top"] a {
    padding: 8px 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }
  /* Legal body sections: scroll-margin so anchors don't sit under sticky nav */
  section[style*="padding: 80px 0 96px"] > .container > div > section {
    margin-bottom: 48px !important;
    scroll-margin-top: 80px !important;
  }

  /* ============= ABOUT — other sections ============= */
  /* AboutStory grid */
  section[style*="padding: 96px 0"][style*="border-top"] [style*="grid-template-columns: 0.7fr 1.3fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* AboutStory sticky aside */
  section [style*="position: sticky"][style*="top: 110"] {
    position: static !important;
  }
  /* AboutPhilosophie image height */
  section [style*="height: 540"] {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
  }
  /* AboutValues grid */
  section [style*="repeat(3, 1fr)"][style*="48px 56px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* AboutGallery cells */
  section [style*="grid-template-columns: 1fr 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  section [style*="height: 480"] {
    height: 90vw !important;
    max-height: 480px !important;
  }
  /* AboutClassyTwist 2-col */
  section [style*="grid-template-columns: 1fr 1fr"][style*="gap: 56"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Section paddings */
  section[style*="padding: 96px 0"] {
    padding: 56px 0 !important;
  }

  /* ============= FOOTER ============= */
  footer { padding: 56px 0 32px !important; margin-top: 56px !important; }
  footer [style*="grid-template-columns: 1.6fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  footer [style*="justify-content: space-between"][style*="flex-wrap"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ============= ANTI-PINGUIN LANDING ============= */

  /* Hero */
  section[style*="padding: 96px 0 96px"] {
    padding: 48px 0 56px !important;
  }
  /* h1 — auf kleinen Screens cap */
  section[style*="padding: 96px 0 96px"] h1 {
    font-size: clamp(40px, 11vw, 72px) !important;
    margin-bottom: 20px !important;
  }
  /* Tagline */
  section[style*="padding: 96px 0 96px"] p[style*="italic"] {
    font-size: 18px !important;
    margin-bottom: 28px !important;
  }
  /* CTA Buttons — full width, gestapelt */
  section[style*="padding: 96px 0 96px"] [style*="margin-bottom: 36px"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  section[style*="padding: 96px 0 96px"] [style*="margin-bottom: 36px"] .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Hero Bullet-Liste — vertikal */
  section[style*="padding: 96px 0 96px"] ul[style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Kontrast: vertikalen Divider ausblenden */
  section[style*="padding: 96px 0"][style*="vanilla-sky-light"] [style*="position: relative"][style*="width: 1"] {
    display: none !important;
  }

  /* Inhalt module cards: rechten Rand entfernen, unteren Rand hinzufügen */
  section[id="inhalt"] article {
    border-right: 0 !important;
    margin-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  section[id="inhalt"] article:last-of-type {
    border-bottom: 0 !important;
  }

  /* UeberTinaMini Foto-Höhe */
  section [style*="height: 460px"] {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* Anmeldung card padding */
  section [style*="padding: 72px 64px"] {
    padding: 36px 20px !important;
  }
  /* Anmeldung submit button full width */
  section[id="anmeldung"] button[type="submit"] {
    align-self: stretch !important;
    width: 100% !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  /* AntiPinguin slim header */
  header[style*="padding: 20px 0"] {
    padding: 14px 0 !important;
  }
  header[style*="padding: 20px 0"] a.nav-link {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }

  /* ============= WORKSHOP TEASER (Startseite) ============= */
  /* Dunkle Sektion: 2-col → 1-col */
  section[style*="background: var(--true-soul)"] [style*="1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Dekoratives Karten-Element ausblenden */
  section[style*="background: var(--true-soul)"] [style*="border: 1px solid"][style*="border-radius: 4px"] {
    display: none !important;
  }
  /* CTA Button full width */
  section[style*="background: var(--true-soul)"] .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Padding */
  section[style*="background: var(--true-soul)"] {
    padding: 64px 0 !important;
  }

  /* ============= REMOVE HANGING RIGHT BORDERS ON STACKED CARDS ============= */
  /* When 3-/4-col grids collapse to 1-col, the per-card right borders look broken */
  main section [style*="border-right: 1px solid var(--line)"][style*="border-bottom"],
  main section article[style*="border-right: 1px solid var(--line)"] {
    border-right: 0 !important;
    margin-right: 0 !important;
  }
  /* Same for AntiPinguin inhaltGrid */
  main section [style*="border-right: 1px solid var(--line)"][style*="margin-right: -1px"] {
    border-right: 0 !important;
    margin-right: 0 !important;
  }
  /* Hide vertical 1px dividers that hang next to single-column content */
  main section > div[aria-hidden="true"][style*="width: 1px"],
  main section [aria-hidden="true"][style*="background: var(--line)"][style*="align-self: stretch"],
  main section [aria-hidden="true"][style*="background: color-mix"][style*="align-self: stretch"] {
    display: none !important;
  }

  /* ============= TYPOGRAPHY GENERAL ============= */
  h1, .h1 { font-size: clamp(32px, 8vw, 44px) !important; letter-spacing: 0.12em !important; }
  h2, .h2 { font-size: clamp(24px, 6vw, 34px) !important; letter-spacing: 0.14em !important; }
  h3, .h3 { font-size: clamp(20px, 5vw, 26px) !important; }
  p, .body { font-size: 16px !important; }
  .body-lg { font-size: 17px !important; }

  /* Buttons */
  .btn { font-size: 11px !important; padding: 13px 22px !important; }
}

/* ============================================================
   TABLET — 769px to 1024px
   Light adjustments where 3-col grids get too cramped.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 32px !important; }

  /* Mentoring module 4-col → 2-col */
  #mentoring [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Mentoring me-time 3-col → 1-col on narrow */
  #mentoring [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* AboutGallery 3-col → 1.2fr 1fr (2 cols) */
  section [style*="grid-template-columns: 1fr 1.2fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}