/*
Theme Name: EPISTEMIST
Template: blocksy
Description: EPISTEMIST Custom Theme
Author: EPISTEMIST
Version: 1.0
*/


/* === Local Montserrat Variable Font === */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* === Apply globally === */
body, p, li, h1, h2, h3, h4, h5, .main-navigation a, .ml-nav a, .wp-block-button__link {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}
h1, h2, h3 { font-weight: 500; letter-spacing: 0.3px; }
body, p, li { font-weight: 400; letter-spacing: 0.1px; }


/* ---------- VARIABLES ---------- */
:root {
  --ml-bg: #faf9f7;          /* bone white */
  --ml-text: #1d1d1f;        /* charcoal */
  --ml-muted: #555;
  --ml-border: #e4e2df;
  --ml-teal: #008c8c;
  --ml-teal-dark: #006060;
  --ml-red: #c62828;
}

/* ---------- BASE TYPOGRAPHY ---------- */
body {
  background: var(--ml-bg);
  color: var(--ml-text);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 {font-size: 30px; font-style: italic;}
h2 {font-size: 22px;}
p, li {margin-bottom: 0.75em; color: var(--ml-text);}
strong {font-weight: 600;}

/* ---------- LINKS & BUTTONS ---------- */
a {color: var(--ml-teal); text-decoration: none; transition: color .25s ease;}
a:hover {color: var(--ml-teal-dark);}

button,
input[type="submit"],
.wp-block-button__link {
  background: transparent;
  border: 1px solid var(--ml-text);
  color: var(--ml-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 20px;
  border-radius: 0;
  font-size: 14px;
  transition: all .3s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--ml-teal);
  color: #fff;
  border-color: var(--ml-teal);
}

/* Red CTA variation */
.cta-red {border-color: var(--ml-red)!important; color: var(--ml-red)!important;}
.cta-red:hover {background: var(--ml-red)!important; color:#fff!important;}

/* ---------- HEADER ---------- */
.ct-header,
.site-header {
  background: var(--ml-bg);
  border-bottom: 1px solid var(--ml-border);
}

.ct-header-navigation .menu > li {
  margin-right: 26px;
}
.ct-header-navigation .menu > li:last-child {
  margin-right: 0;
}

/* === INTRO TEXTBOX – WIDER, LESS TRANSPARENT, DYNAMIC HEIGHT === */

.ep-home #intro {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 10%;
  position: relative;
  min-height: 480px; /* ensures good base height */
  box-sizing: border-box;
}

/* Updated teal textbox */
.ep-home #intro .intro-content {
  background: rgba(0, 140, 140, 0.9); /* teal @ 10% transparency → 0.9 opacity */
  border-radius: 16px;
  padding: 40px 60px;
  max-width: 1024px; /* wider than before */
  width: 100%;
  min-height: 300px; /* lower bound: won’t shrink smaller */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Make text comfortable and nicely spaced */
.ep-home #intro .intro-content h2,
.ep-home #intro .intro-content p {
  color: #fff !important;
  line-height: 1.7;
  margin-bottom: 1em;
}

/* === EPISTEMIST HEADER – FIXED ALIGNMENT, INDENT, COLORS === */
.ml-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #F3EFEF; /* beige */
  z-index: 999;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ml-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ensures vertical centering */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 40px; /* wider indent left/right */
  box-sizing: border-box;
}

/* CONTACT item inverse color scheme */
.ml-nav a[href*="contact"],
.ml-nav > ul > li:last-child > a {
   color: var(--ml-red); /* passive coral */
 }

.ml-nav a[href*="contact"]:hover,
.ml-nav > ul > li:last-child > a:hover {
   color: var(--ml-teal); /* hover = teal */
 }


/* RESPONSIVE STACK: logo centered above menu */
@media (max-width: 992px) {
  .ml-header-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 0 20px 0;
  }

  .ml-logo {
    margin-bottom: 10px;
  }

  .ml-nav ul {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
  }
}

.ml-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
}

.ml-nav a {
  color: var(--ml-text);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}
.ml-nav a:hover {
  color: var(--ml-teal-dark);
}


/* === Smooth Scrolling === */
html {
  scroll-behavior: smooth;
}

/* === Responsive (Mobile) === */
@media (max-width: 768px) {
  .ml-nav ul {
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 70px;
    background: var(--ml-bg);
    width: 100%;
    text-align: center;
    display: none;
  }
  .ml-nav ul.active {
    display: flex;
  }
}

/* Make sure our custom header sits below the WordPress admin bar when logged in */
body.admin-bar .ml-header {
  top: 32px; /* height of admin bar */
}

/* === SECTION BACKGROUNDS: PX & EEX === */

/* PRAXIS visual */
.ep-home #px {
  position: relative;
  background: url('/wp-content/uploads/2025/10/ff3b2c52-9d6f-4528-84dd-5b5fd7ccfab4.png') no-repeat center center/cover;
  color: #fff;
  padding: 100px 6vw;
}

/* overlay for better text readability */
.ep-home #px::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}
.ep-home #px .text {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

/* EMPIRICAL EXECUTIVE visual */
.ep-home #eex {
  position: relative;
  background: url('/wp-content/uploads/2025/11/affd6aa7-efa9-423d-9ffe-beff7f8cd603.png') no-repeat center center/cover;
  color: #fff;
  padding: 100px 6vw;
}

.ep-home #eex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}
.ep-home #eex .text {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

/* Headings and buttons contrast tweaks */
.ep-home #px h2,
.ep-home #eex h2 {
  color: #ffffff;
}
.ep-home #px p,
.ep-home #eex p,
.ep-home #px li,
.ep-home #eex li {
  color: #f2f2f2;
}
.ep-home #px .wp-block-button__link,
.ep-home #eex .wp-block-button__link {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}
.ep-home #px .wp-block-button__link:hover,
.ep-home #eex .wp-block-button__link:hover {
  background: rgba(255,255,255,0.3);
}

/* ensure full-width sections truly span the viewport */
.ep-home #px, .ep-home #eex {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ---- Intro section (Private clarity) ---- */
.ep-home #intro {
  background: url('/wp-content/uploads/2025/10/bfc8a38f-ca4c-4ecf-aba3-32cdc8098814.png') no-repeat center center fixed;
  background-size: cover;
  color: #f8f8f8;
  padding: 120px 10%;
  text-align: left;
}

/* overlay for better text readability */
.ep-home #intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}

.ep-home #intro h2, .ep-home #intro p {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* === HEADER FINAL FIX: spacing, alignment, color specificity === */
.ml-header,
body .ml-header {
  background-color: #F3EFEF !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

body .ml-header-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1740px !important;
  margin: 0 auto !important;
  padding: 10px 0px !important;   /* real indentation both sides */
  box-sizing: border-box !important;
}

/* make sure logo and menu vertically align */
body .ml-logo,
body .ml-nav {
  display: flex;
  align-items: center;
}

/* force link colors */
body .ml-nav a {
  color: var(--ml-teal) !important;           /* passive teal */
  font-weight: 400 !important;
  text-decoration: none;
  transition: color 0.25s ease;
}
body .ml-nav a:hover {
  color: var(--ml-red) !important;            /* hover coral */
}

/* CONTACT link inverse colors */
body .ml-nav a[href*="contact"],
body .ml-nav > ul > li:last-child > a {
   color: var(--ml-red) !important;            /* passive coral */
 }

body .ml-nav a[href*="contact"]:hover,
body .ml-nav > ul > li:last-child > a:hover {
   color: var(--ml-teal) !important;           /* hover teal */
 }


/* responsive stack */
@media (max-width: 992px) {
  body .ml-header-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px 0 20px 0 !important;
  }

  body .ml-logo {
    margin-bottom: 10px;
  }

  body .ml-nav ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* === SEMI-TRANSPARENT TEAL TEXT BOXES — FIXED FOR INTRO + ALIGNMENTS === */

/* Shared styling for all section boxes */
.ep-home #intro .intro-content,
.ep-home #px .text,
.ep-home #eex .text {
  background: rgba(0, 140, 140, 0.6); /* teal @ 50% transparency */
  border-radius: 14px;
  padding: 30px 40px;
  max-width: 1024px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* INTRO — centered text box */
.ep-home #intro .intro-content {
  margin: 0 auto;
  text-align: center;
}

/* PX — aligned left, matching logo indentation */
.ep-home #px .text {
  margin-left: auto;  /* match header logo indent */
  margin-right: 40px;
  text-align: left;
}

/* EEX — aligned right, matching CONTACT menu side */
.ep-home #eex .text {
  margin-right: auto; /* match header menu indent */
  margin-left: 40px;
  text-align: left;
}

/* Responsive: auto-center all boxes on smaller screens */
@media (max-width: 992px) {
.ep-home   #intro .intro-content,
.ep-home   #px .text,
.ep-home   #eex .text {
    margin: 0 auto !important;
    text-align: center;
    padding: 20px 24px;
  }
}

/* === INTRO TEXTBOX – DARKER, LESS TRANSPARENT === */
.ep-home #intro .intro-content {
  background: rgba(0, 80, 80, 0.60); /* deeper teal, */
  border-radius: 16px;
  padding: 40px 60px;
  max-width: 1024px;
  width: 100%;
  min-height: 300px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Title centered, content left, buttons centered */
.ep-home #intro .intro-content h2 {
  text-align: center;
  margin-bottom: 1em;
  font-family: "Lora", serif;
}
.ep-home #intro .intro-content p,
.ep-home #intro .intro-content li {
  text-align: left;
}
.ep-home #intro .intro-content .wp-block-buttons {
  justify-content: center;
  display: flex;
}

/* === PX & EEX TEXTBOX ALIGNMENTS AND UNIFIED BUTTON STYLE === */
.ep-home #px .text h2,
.ep-home #eex .text h2 {
  text-align: center;
  font-family: "Lora", serif;
}

.ep-home #px .text p,
.ep-home #eex .text p,
.ep-home #px .text li,
.ep-home #eex .text li {
  text-align: left;
}

/* unify both PX and EEX button styling */
.ep-home #px .wp-block-button__link,
.ep-home #eex .wp-block-button__link {
  background: rgba(255,255,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  font-weight: 500;
  padding: 10px 26px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ep-home #px .wp-block-button__link:hover,
.ep-home #eex .wp-block-button__link:hover {
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* center buttons consistently */
.ep-home #px .wp-block-buttons,
.ep-home #eex .wp-block-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* === UNIFIED BUTTON DESIGN FOR INTRO, PX, AND EEX TEXTBOXES === */
.ep-home #intro .wp-block-buttons,
.ep-home #px .wp-block-buttons,
.ep-home #eex .wp-block-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px; /* space between multiple buttons */
  margin-top: 24px; /* breathing space above buttons */
}

/* Bright uniform button design (based on PX style) */
.ep-home #intro .wp-block-button__link,
.ep-home #px .wp-block-button__link,
.ep-home #eex .wp-block-button__link {
  background: rgba(255,255,255,0.18) !important; /* bright overlay on dark teal */
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  font-weight: 500;
  padding: 10px 26px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Hover state – stronger white overlay */
.ep-home #intro .wp-block-button__link:hover,
.ep-home #px .wp-block-button__link:hover,
.ep-home #eex .wp-block-button__link:hover {
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Keep buttons centered and clean on mobile */
@media (max-width: 768px) {
.ep-home   #intro .wp-block-buttons,
.ep-home   #px .wp-block-buttons,
.ep-home   #eex .wp-block-buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* === UNIFORM BUTTON WIDTHS IN INTRO SECTION === */
.ep-home #intro .wp-block-buttons {
  display: flex;
  justify-content: center;
  gap: 20px; /* space between buttons */
}

.ep-home #intro .wp-block-button__link {
  min-width: 380px; /* fixed width so both are equal */
  text-align: center;
  padding: 10px 20px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transition: all 0.25s ease;
}

.ep-home #intro .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

/* === MOBILE OVERRIDE: INTRO BUTTON WIDTH === */
@media (max-width: 768px) {
  .ep-home #intro .wp-block-button__link {
    min-width: 0 !important;          /* kill the 380px floor */
    width: 90% !important;            /* scale down with the image */
    max-width: 320px !important;      /* safety cap */
    margin: 12px auto 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}


/* === EPISTEMIST LOGO IMAGE – ACTIVE VERSION === */
.ml-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 80px; /* overall header height */
}
.ml-logo::before {
  content: "";
  display: block;
  background: url('/wp-content/uploads/2025/11/epistemist-header-logo.png') no-repeat center center;
  background-size: contain;
  width: 340px;
  height: 80px;
}
.ml-logo .motive,
.ml-logo .luminary { display: none !important; }

/* responsive logo scaling */
@media (max-width: 992px) {
  .ml-logo::before {
    width: 260px;
    height: 60px;
  }
}

/* === CLEAN RESPONSIVE HEADER FIX === */
@media (max-width: 992px) {
  .ml-header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    gap: 16px;
  }

  .ml-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
  }

  .ml-nav a {
    font-size: 14px;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 600px) {
  .ml-header-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
  }
  .ml-nav ul { justify-content: center; }
  .ml-nav a { font-size: 13px; }
}

/* === HERO QUOTE – CLEAN VERSION === */

#hero.hero-quote {
  max-width: 900px;
  margin: 40px auto 20px;      /* 40px gap below header, 20px to intro */
  padding: 24px 16px;
  
  display: flex;               /* vertically center the quote in its band */
  align-items: center;
  justify-content: center;
  
  text-align: center;
}

#hero.hero-quote h1 {
  font-family: "Lora", serif;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: #4a4a4a;
  line-height: 1.4;
  margin: 0;                   /* no extra top/bottom margin */
}

#hero.hero-quote p {
  display: none;
}

@media (max-width: 768px) {
  #hero.hero-quote {
    margin: 30px auto 16px;    /* slightly tighter on mobile */
    padding: 20px 16px;
  }
  #hero.hero-quote h1 {
    font-size: 1.25rem;
    line-height: 1.5;
  }
}


/* === INTRO 3-COLUMN GRID (TEXT + TWO VISUALS) === */
.ep-home #intro .intro-content {
  background: rgba(0, 80, 80, 0.60);
  border-radius: 20px;
  padding: 40px 50px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}


/* === PRAXIS Title, subtitle, plan grid & cards design === */

.praxis-title {
  text-align: center;
  color: #007777;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.praxis-subtitle {
  text-align: center;
  color: #007777;
  font-size: 1rem;
  margin-bottom: 40px;
}

/* === SECTIONS === */
.plan-section {
  margin-bottom: 60px;
}

.plan-category {
  text-align: center;
  color: #007777;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
}

/* === PLAN GRID === */
.plan-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.plan-card {
  background: rgba(0, 80, 80, 0.65);
  color: #FAF9F7;
  border-radius: 18px;
  flex: 1 1 260px;
  max-width: 280px;
  padding: 25px 28px 40px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(3px);
}

.plan-card h4 {
  text-align: center;
  margin-bottom: 8px;
  font-weight: 600;
  color: #FAF9F7;
  font-size: 1.15rem;
}

.plan-card .price {
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
}

.plan-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px;
}

.plan-card ul li {
  font-size: 0.9rem;
  margin-bottom: 5px;
  padding-left: 14px;
  position: relative;
}

.plan-card ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #FAF9F7;
  opacity: 0.9;
}

/* === BUTTONS  === */ 
.book-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FAF9F7 !important;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.4px;
  padding: 10px 0;
  width: 160px;
  height: 42px;
  line-height: 22px;
  transition: all 0.3s ease;
}

.book-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.6);
}

/* === FOOTER NOTES === */
.plan-notes {
  background: rgba(0, 80, 80, 0.65);
  border-radius: 20px;
  padding: 25px 40px;
  color: #FAF9F7;
  font-size: 0.9rem;
  line-height: 1.6;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
}

@media (max-width: 768px) {
  .plan-grid { flex-direction: column; align-items: center; }
  .plan-card { max-width: 90%; }
}

/* === PRAXIS: widen teal cards by ~60px === */
body.page-id-88 .plan-card{
  flex: 1 1 380px !important;   /* was ~360 */
  max-width: 480px !important;  /* was ~400 */
}

/* === NOTICE TEXT === */
.praxis-notice {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #333;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  padding: 18px 28px;
  margin: 20px 0 30px;
  text-align: left;
}

/* Outer section uses the same background approach as #intro.
   Swap the image URL if you want a distinct About background. */
.ep-home #about {
  position: relative;
  background: url('/wp-content/uploads/2025/10/bfc8a38f-ca4c-4ecf-aba3-32cdc8098814.png')
              no-repeat center center fixed;
  background-size: cover;
  padding: 100px 10%;
  color: #fff;
}
.ep-home #about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.03);
  z-index: 0;
}

/* === ABOUT section — teal translucent bubble & layout === */

/* Teal translucent bubble container */
.ep-home #about .about-content {
  position: relative;
  z-index: 1;
  background: rgba(0, 80, 80, 0.60);
  border-radius: 20px;
  padding: 40px 50px;
  max-width: 1280px;
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  display: grid;
  grid-template-columns: 1fr 2fr;   /* 1/3 media, 2/3 text */
  gap: 30px;
}

.about-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.about-buttons a {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.about-buttons a:hover {
  background: rgba(255,255,255,0.2);
  border-color: #ffffff;
}

/* Left column: stacked visuals */
.ep-home #about .about-media {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.ep-home #about .about-image {
  width: 100%;
  max-width: 320px;                 /* keeps images elegant */
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  display: block;
}

/* Right column: text */
.ep-home #about .about-text h2,
.ep-home #about .about-text p {
  color: #fff !important;
}
.ep-home #about .about-text h2 {
  text-align: center;
  margin-bottom: 1em;
  font-family: "Lora", serif;
}
.ep-home #about .about-text p {
  text-align: left;
  line-height: 1.7;
}

/* Single CTA at the bottom of the bubble */
.ep-home #about .about-cta {
  text-align: center;
  margin-top: 24px;                 /* space above the button */
}
.ep-home #about .about-cta .wp-block-button__link {
  display: inline-block;
  min-width: 240px;
  padding: 10px 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all .3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.ep-home #about .about-cta .wp-block-button__link:hover {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Responsive stack: 1 column on tablet/mobile */
@media (max-width: 992px) {
.ep-home #about { padding: 70px 6vw; }
.ep-home #about .about-content {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
.ep-home   #about .about-image { max-width: 520px; }
}

/* spacing above the About section so it matches PX→EEX rhythm */
.ep-home #about {
  margin-top: 13px;                 /* creates the white band */
  position: relative;               /* keep margins non-collapsing */
  overflow: hidden;
}

/* ----- Praxis hover dropdown ----- */
.ml-header-inner { overflow: visible !important; } /* ensure dropdown can overflow header row */

.ml-nav li { position: relative; }

/* hidden by default (but keep in DOM for a11y) */
.ml-nav .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 180px;
  padding: 6px 0;
  margin-top: 8px;
  background: #F3EFEF;                        /* matches header beige */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  display: block;                              /* we animate visibility via opacity/pointer-events */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1000;
}

/* open on hover or keyboard focus */
.ml-nav li.has-submenu:hover > .sub-menu,
.ml-nav li.has-submenu:focus-within > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* submenu items */
.ml-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap;
  color: var(--ml-teal) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.ml-nav .sub-menu a:hover {
  color: var(--ml-red) !important;
}

/* small caret indicator on parent (optional) */
.ml-nav li.has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

/* keep things usable on narrow screens — stack is already handled by your header CSS */
@media (max-width: 992px) {
  .ml-nav .sub-menu {
    position: static;
    margin: 6px 0 0;
    box-shadow: none;
    border: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    padding: 0;
  }
  .ml-nav .sub-menu a {
    padding: 8px 0;
  }
}

/* Make the Praxis dropdown easier to catch */

/* 1) A small invisible hover-bridge above the submenu */
.ml-nav .sub-menu {
  /* keep your existing visuals… */
  margin-top: 8px;                           /* visual gap stays */
  transition: opacity .18s ease .12s,        /* 120ms hide delay */
              transform .18s ease .12s;
}

/* The bridge fills the 8px gap so hover doesn't break */
.ml-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;                                /* slightly larger than the 8px margin */
  height: 12px;                              /* generous “ramp” into the menu */
  /* transparent, but part of the submenu's hover area */
}

/* 2) Show immediately, but allow a brief delay before hiding */
.ml-nav li.has-submenu:hover > .sub-menu,
.ml-nav li.has-submenu:focus-within > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s, 0s;                  /* no delay when opening */
}

/* ================================
   /praxis fine-tuning (buttons + cards)
   ================================ */

/* A) Buttons: same width as the plan cards */
body.page-id-88 .praxis-nav-buttons{
  /* keep the grid from the earlier override, but size columns like cards */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 480px)) !important; /* desktop = 2 × 480px */
  justify-content: center !important;
  gap: 26px !important;
}

/* Match your card width at ~≤1280px */
@media (max-width: 1280px){
  body.page-id-88 .praxis-nav-buttons{
    grid-template-columns: repeat(2, minmax(0, 380px)) !important; /* 2 × 380px */
  }
}

/* Stack on small screens, match the card’s near-full width look */
@media (max-width: 768px){
  body.page-id-88 .praxis-nav-buttons{
    grid-template-columns: minmax(0, 92%) !important; /* single column ~92% */
  }
}

/* Keep each button filling its grid cell cleanly */
body.page-id-88 .praxis-nav-buttons .wp-block-button{
  width: 100% !important;
}
body.page-id-88 .praxis-nav-buttons .wp-block-button__link{
  width: 100% !important;
  min-height: 48px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ================================
   1) INTRO BUBBLE: NO OVERFLOW
   – switch to a resilient grid that wraps
   ================================ */
.ep-home #intro .intro-content{overflow:hidden; box-sizing:border-box;}
.intro-grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px, 1fr));
  gap:24px;
  align-items:start;
}
@media (max-width:1200px){
  .intro-grid-3{ grid-template-columns:repeat(2, minmax(240px, 1fr)); }
}
@media (max-width:768px){
  .intro-grid-3{ grid-template-columns:1fr; }
}
.intro-col{ min-width:0; }                 /* allow shrink without spilling */
.intro-visual img{ width:100%; height:auto; max-width:100%; display:block; }
.intro-visual .wp-block-button__link{ width:100%; max-width:340px; }

/* =========================================
   3) ABOUT SECTION: sane mobile layout
   – keep the H2 at the top, center the portrait,
     clamp the portrait size
   ========================================= */
.ep-home #about .about-content{ overflow:hidden; }
@media (max-width:1100px){
.ep-home   #about .about-content{ grid-template-columns:1fr; }
.ep-home   #about .about-text{ order:-1; }            /* text (H2) first on mobile */
.ep-home   #about .about-media{ order:1; align-items:center; }
.ep-home   #about .about-image{
    width:clamp(220px, 60vw, 360px);
    height:auto;
  }
}

/* (nice-to-have) micro-tweak: keep the intro bubble title readable at all widths */
.ep-home #intro .intro-content h2{ word-break:keep-all; hyphens:auto; }

/* ============ RESPONSIVE STABILITY PATCHES (v1) ============ */

/* A) Dynamic header spacer so hero never gets eaten */
:root { --ml-header-h: 72px; }
body { padding-top: var(--ml-header-h); }


/* On tablet/phone, let the header flow normally so an opened stacked menu
   pushes the page down instead of overlaying it. */
@media (max-width: 1024px) {
  .site-header, .ct-header { position: relative !important; }
  body { padding-top: 0 !important; }
  /* If our old custom header is ever present, also unfix it on small screens */
  .ml-header { position: relative !important; top: 0 !important; }
}

/* B) Intro section: switch to “1 + 2” layout at medium widths to keep visuals level */
@media (max-width: 1200px) and (min-width: 769px) {
.ep-home   #intro .intro-grid-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    align-items: flex-start !important;
  }
.ep-home   #intro .intro-grid-3 .intro-textbox { flex: 1 1 100% !important; order: 0; }
.ep-home   #intro .intro-grid-3 .intro-visual  { flex: 1 1 calc(50% - 15px) !important; order: 1; }
.ep-home   #intro .intro-visual { display:flex; flex-direction:column; align-items:center; }
.ep-home   #intro .intro-visual img { max-width: 100%; height: auto; }
}
/* #intro .intro-content { overflow: hidden; } /* belt-and-suspenders */

/* C) ABOUT section: lock order + size. Media left on desktop, on top on mobile */
.ep-home #about .about-content{
  display: grid;
  grid-template-areas: "media text";
  grid-template-columns: 1fr 2fr;
  align-items: start;
}
.ep-home #about .about-media{ grid-area: media; display:flex; justify-content:center; align-items:flex-start; }
.ep-home #about .about-text { grid-area: text; }
.ep-home #about .about-image{ width: 100%; max-width: 320px; height: auto; border-radius: 14px; }

@media (max-width: 1200px){ #about .about-image{ max-width: 380px; } }
@media (max-width: 992px){
.ep-home   #about .about-content{
    grid-template-areas: "media" "text";
    grid-template-columns: 1fr;
  }
.ep-home #about .about-image{ max-width: 520px; margin: 0 auto 16px; }
}  

/* D) Keep all teal bubbles self-contained */
.ep-home #intro .intro-content,
.ep-home #about .about-content,
.ep-home #px .text,
.ep-home #eex .text { overflow: clip; contain: layout paint; }

/* === PATCH: About portrait size + Intro visuals centering === */

/* 1) ABOUT portrait — keep desktop size (320px) on tablet/mobile & center */
@media (max-width: 992px) {
.ep-home   #about .about-media { align-items: center !important; }
.ep-home   #about .about-image {
    max-width: 320px !important;   /* same as desktop */
    width: 100% !important;
    margin: 0 auto 16px !important; /* perfectly centered */
  }
}

/* 2) INTRO visuals — perfectly centered image & button on narrow widths */
.ep-home #intro .intro-visual img {           /* also affects .intro-img */
  display: block;
  margin: 0 auto 18px !important;   /* center the image itself */
}

@media (max-width: 992px) {
.ep-home   #intro .intro-grid-3 {             /* column layout already; center the column */
    justify-content: center !important;
    align-items: center !important;
  }
.ep-home   #intro .intro-col,
.ep-home   #intro .intro-visual {
    max-width: 520px;
    margin: 0 auto !important;      /* center the whole block */
    text-align: center;
  }
.ep-home   #intro .intro-visual .wp-block-button__link {
    margin: 0 auto !important;      /* center the button */
    display: inline-block;
  }
}

/* ===========================
   EPISTEMIST — Footer
   =========================== */

:root {
  /* swap this to your symbol-only asset */
  --ml-logo-symbol-url: url('/wp-content/uploads/2025/11/epistemist-logo-CID.png');
}

#ml-footer {
  background: #121212;
  color: #FAF9F7;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 40px 0 44px;
}

#ml-footer a { color: var(--ml-teal); text-decoration: none; }
#ml-footer a:hover { color: var(--ml-red); }

.ml-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns:
    minmax(220px, 1.2fr)   /* Logo+copyright */
    minmax(160px, 1fr)     /* Conditions    */
    minmax(160px, 1fr)     /* Brand         */
    minmax(160px, 1fr)     /* Contact       */
    minmax(220px, 1.1fr);  /* Language      */
  gap: 28px;
}

.ml-footer-col { min-width: 0; }

.ml-foot-title {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CFCFCF;
  margin: 0 0 10px 0;
}

.ml-foot-links { list-style: none; padding: 0; margin: 0; }
.ml-foot-links li { margin: 7px 0; }
.ml-foot-links a { font-weight: 500; }

/* Logo block */
.ml-footer-logo {
  display: inline-block;
  width: 100px; height: 100px;
  background-image: var(--ml-logo-symbol-url);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  margin-bottom: 10px;
}
.ml-footer-copy {
  color: #CFCFCF;
  font-size: 13px;
  margin-top: 4px;
}

/* Language area */
.ml-footer-lang .ml-lang-wrap select,
.ml-footer-lang .ml-lang-wrap .pll-dropdown {
  width: 100%;
}
.ml-footer-lang select {
  background: transparent;
  color: #FAF9F7;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: "Montserrat", sans-serif;
}
.ml-footer-lang select:focus {
  outline: none;
  border-color: var(--ml-teal);
  box-shadow: 0 0 0 3px rgba(0,140,140,.25);
}

/* Responsive */
@media (max-width: 1024px) {
  .ml-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .ml-footer-brand { grid-column: 1 / -1; }
  .ml-footer-lang  { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .ml-footer-inner { grid-template-columns: 1fr; gap: 18px; }
  .ml-footer-col   { grid-column: 1 / -1; }
}

/* Hide Blocksy's default footer (optional safety) */
.ct-footer, .site-footer { display: none !important; }


/* Nested list styling (child indentation) */
.ml-foot-sub {
  list-style: none;
  margin: 6px 0 0 14px; /* small indentation */
  padding: 0;
}

.ml-foot-sub li a {
  font-weight: 400;
  font-size: 14px;
  opacity: 0.9;
}

.ml-foot-sub li a:hover {
  opacity: 1;
  color: var(--ml-red);
}

.page-id-12 ul li {
  line-height: 1.5em;
}

/* === EPISTEMIST — SHARP CORNER VARIANT === */

/* Buttons */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.book-btn {
  border-radius: 0 !important;
}

/* All major container bubbles / boxes */
.praxis-container,
.praxis-notice,
.plan-card,
.plan-section,
.praxis-nav-buttons a,
.lang-box,
.contact-options a,
.key-terms,
.wp-block-button__link {
  border-radius: 0 !important;
}

/* Forms, inputs, selects */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border-radius: 0 !important;
}

/* Modals and alerts */
.lang-modal .lang-box,
.dialog,
.modal {
  border-radius: 0 !important;
}

/* Optional: make footer and header bars crisp too */
header.site-header,
footer.site-footer {
  border-radius: 0 !important;
}

/* Keep images rounded (leave these intact) */
img,
figure,
.wp-block-image img {
  border-radius: 12px; /* or whatever your current setting is */
}

/* ==== SQUARE CORNERS – GLOBAL OVERRIDE (put at very end) ==== */

/* Buttons (site-wide, incl. Praxis top CTAs) */
.wp-block-button__link,
.book-btn,
button,
input[type="submit"],
.wpcf7-submit {
  border-radius: 0 !important;
}

/* Praxis top CTA row (beats earlier 6–8px rules) */
body.page-id-88 .praxis-nav-buttons .wp-block-button__link {
  border-radius: 0 !important;
}

/* Plan cards + notes (Mail + Live) */
.plan-card,
.plan-notes {
  border-radius: 0 !important;
}

/* Ivory “bubble” containers */
.praxis-container,
#mail-section, #live-section,
#mail-intake, #booking,
.ml-bubble {
  border-radius: 0 !important;
}

/* Notice box (keep the left accent bar) */
.praxis-notice {
  border-radius: 0 !important;
}

/* Home page teal “bubbles” */
.ep-home #intro .intro-content,
.ep-home #px .text,
.ep-home #eex .text {
  border-radius: 0 !important;
}

/* Keep images rounded — no change here.
   If any image is still getting squared, comment out the rule below. */
img { border-radius: inherit; }  /* inherits none from parents; images keep their own radius if set */

/* If any specific element still looks rounded, it likely has an inline style.
   This will neutralize inline radii without touching images: */
*:not(img)[style*="border-radius"] {
  border-radius: 0 !important;
}

/* ABOUT section: square the teal bubble, keep image rounded */
.ep-home #about .about-content { 
  border-radius: 0 !important;
}

.ep-home #about .about-image {           /* keep photo rounded as before */
  border-radius: 14px !important;
}

/* (Redundant but safe) ensure ABOUT buttons stay square, too */
.ep-home #about .about-cta .wp-block-button__link {
  border-radius: 0 !important;
}

/* ABOUT buttons — force square corners */
.ep-home #about .about-buttons a,
.ep-home #about .about-cta a,
.ep-home #about .about-cta .wp-block-button__link,
.ep-home #about .about-buttons .wp-block-button__link {
  border-radius: 0 !important;
}

/* EEX section — match PX button width */
.ep-home #eex .wp-block-button__link{
  min-width:380px;
  text-align:center;
}
@media (max-width:768px){
.ep-home   #eex .wp-block-button__link{ min-width:80%; }
}

/* ABOUT — unify buttons with intro visuals */
.ep-home #about .about-buttons a,
.ep-home #about .about-cta .wp-block-button__link {
  display: inline-block;
  min-width: 240px;                 /* same width you set under the visuals */
  padding: 10px 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff !important;
  font-family: "Montserrat","Helvetica Neue",Arial,sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all .3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.ep-home #about .about-buttons a:hover,
.ep-home #about .about-cta .wp-block-button__link:hover {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
} 

/* ABOUT — lock portrait top to the first paragraph start */
:root { --about-media-offset: 110px; } /* tweak 76–96px to taste */

@media (min-width: 992px) {
.ep-home   #about .about-media { 
    margin-top: var(--about-media-offset) !important;
    align-self: start;
  }
}

/* ABOUT — center button labels */
.ep-home #about .about-buttons a,
.ep-home #about .about-cta .wp-block-button__link {
  display: inline-flex;           /* lets us center reliably */
  justify-content: center;
  align-items: center;
  text-align: center;             /* fallback */
  min-height: 44px;               /* nice tap target */
}

/* ================================
   LONG STORY page (id=436)
   ================================ */

/* 2) Title/subtitle styling — title centered & black */
body.page-id-436 .bio-title, {
  text-align: center !important;
  color: #111 !important;
}

/* optional: subtitle centered & black too */
body.page-id-436 .bio-subtitle, {
  text-align: center !important;
  color: #111 !important;
}

/* 3) Body text left-aligned (only the title stays centered) */
body.page-id-436 .bio-text,
body.page-id-436 .bio-text p,
body.page-id-436 .bio-text li, {
  text-align: left !important;
  color: #111 !important;
}

/* (If you used the sticky portrait) keep it behaving the same */
body.page-id-436 .bio-portrait { position: sticky; top: 24px; }

/* Long Story page – keep sticky portrait clear of the fixed header */
body.page-id-436 .bio-portrait {
  position: sticky;
  top: calc(var(--ml-header-h, 72px) + 20px); /* header height + buffer */
}

/* If you're logged in, WP admin bar adds ~32px */
body.admin-bar.page-id-436 .bio-portrait {
  top: calc(var(--ml-header-h, 72px) + 32px + 20px);
}

/* On tablet/phone we unfix the header – small, simple offset is enough */
@media (max-width: 1024px) {
  body.page-id-436 .bio-portrait { top: 16px; }
}

/* MOBILE HEADER: keep menu in normal flow under the logo */
@media (max-width: 768px) {
  .ml-header, .site-header, .ct-header { position: relative !important; } /* already doing this, safe to repeat */

  .ml-header-inner {
    flex-direction: column !important;
    align-items: center !important;
  }

  .ml-logo { 
    margin-bottom: 8px !important;      /* space below the logo */
  }

  .ml-nav { 
    width: 100% !important;
  }

  .ml-nav ul {
    position: static !important;         /* << fix: no overlay */
    top: auto !important;
    right: auto !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 6px !important;         /* small buffer under logo */
  }
}

/* exactly 50px gap between any two bubbles,
   even if a stray <br> or node sits between them */
body.page-id-88 :is(.praxis-container, #mail-section, #live-section)
  ~ :is(.praxis-container, #mail-section, #live-section){
  margin-top: 50px !important;
}

ul li.sep {
  list-style: none;
  border-top: 1px solid #ddd;
  margin: 10px 0 14px;
  padding: 0;
  height: 0;
}

#eex ul li {
  margin-bottom: 4px; 
  line-height: 1.45;
}

#eex ul {
  padding-left: 22px;  /* not the default 40px */
}

#eex ul li::marker {
  color: rgba(255,255,255,0.7);
}

/* === EEX inner bullet bubble === */
.ep-home #eex .eex-bullet-box {
  margin: 16px 0 8px;
  padding: 18px 26px 22px;
  background: rgba(0, 80, 80, 0.25);   /* darker teal, like intro bubble - original value 0.65 */ 
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  border-radius: 0;                     /* stays flat to match your system */
}

/* tighten list spacing inside the inner box */
.ep-home #eex .eex-bullet-box ul {
  margin: 0;
  padding-left: 22px;                   /* keep bullets aligned with text block */
}

.ep-home #eex .eex-bullet-box li {
  margin-bottom: 6px;
}


/* EEX bullet separators – centered, subtle */
.ep-home #eex .eex-bullet-box hr.eex-separator {
  border: 0 !important;                                   /* kill default */
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.3) !important; /* dim line */
  width: 70% !important;                                  /* shorter than text */
  margin: 14px auto !important;                           /* center it */
}

/* === PRAXIS inner bullet bubble (match EEX aesthetics) === */

.ep-home #px .px-bullet-box {
  margin: 18px 0 22px;
  padding: 20px 28px;
  background: rgba(0, 80, 80, 0.25);         /* same opacity vibe as EEX inner box */
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  border-radius: 0;                          /* stays square like the rest of the site */
}

/* List layout & indentation */
.ep-home #px .px-bullets {
  list-style: disc;
  margin: 0;
  padding-left: 22px;                        /* clear, but not exaggerated indent */
}

/* Bullet text & spacing */
.ep-home #px .px-bullets li {
  margin-bottom: 6px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);          /* slightly dimmed vs pure white */
}

/* Dim the bullet markers themselves a bit */
.ep-home #px .px-bullets li::marker {
  color: rgba(255, 255, 255, 0.65);
}

/* Tighten last bullet so it doesn’t leave a random gap */
.ep-home #px .px-bullets li:last-child {
  margin-bottom: 0;
}

/* Mobile: keep it breathable but not cramped */
@media (max-width: 768px) {
.ep-home   #px .px-bullet-box {
    padding: 16px 18px;
  }
}

/* =========================================
   UNIFY TOP SPACING: PRAXIS, CONTACT, LONG STORY
   ========================================= */

/* Kill Blocksy's top padding on these pages */
body.page-id-88 .ct-content,
body.page-id-88 .entry-content,
body.page-id-162 .ct-content,
body.page-id-162 .entry-content,
body.page-id-436 .ct-content,
body.page-id-436 .entry-content {
  padding-top: 0 !important;
}

/* Make sure the first block doesn't add its own margin */
body.page-id-88 .entry-content > *:first-child,
body.page-id-162 .entry-content > *:first-child,
body.page-id-436 .entry-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Standard gap between header and the ivory bubble on all 3 pages */
body.page-id-88 .praxis-container,
body.page-id-162 .praxis-container, {
  max-width: 1400px !important;
  width: 94% !important;
  margin: 4px auto 0 !important;  /* <- tweak 60–80px to taste */
}

/* Single source of truth for all ivory bubbles */
:root {
  --ml-bubble-padding: 60px 40px 80px;
}

body.page-id-88 .praxis-container,
body.page-id-162 .praxis-container, {
  padding: var(--ml-bubble-padding) !important;
}

#contact-page .contact-separator {
  width: 100%;
  height: 1px;
  margin: 24px 0 20px;
  background: rgba(0, 0, 0, 0.10); /* subtle line on #F3EFEF */
}

/* ==============================
   HOME INTRO – SHORTER HERO BAND
   ============================== */

:root {
  /* play with these two numbers only */
  --home-intro-min-height: 700px;  /* was 480px */
  --home-intro-vert-padding: 40px; /* was 120px top & bottom */
}

/* ============================================
   FULL-PAGE BACKGROUNDS (REUSE HOME VISUALS)
   ============================================ */

/* PRAXIS plans page – use PX visual */
body.page-id-88,
body.page-id-88 .site,
body.page-id-88 .site-content {
  background:
    url('/wp-content/uploads/2025/10/ff3b2c52-9d6f-4528-84dd-5b5fd7ccfab4.png')
    no-repeat center center fixed !important;
  background-size: cover !important;
}

/* CONTACT – use intro/neutral visual */
body.page-id-162,
body.page-id-162 .site,
body.page-id-162 .site-content {
  background:
    url('/wp-content/uploads/2025/10/bfc8a38f-ca4c-4ecf-aba3-32cdc8098814.png')
    no-repeat center center fixed !important;
  background-size: cover !important;
}

/* LONG STORY – use same as ABOUT/INTRO */
body.page-id-436,
body.page-id-436 .site,
body.page-id-436 .site-content {
  background:
    url('/wp-content/uploads/2025/10/bfc8a38f-ca4c-4ecf-aba3-32cdc8098814.png')
    no-repeat center center fixed !important;
  background-size: cover !important;
}

/* ============================================
   GLASS-TEAL BUBBLES FOR PRAXIS / CONTACT / LONG STORY
   Reuse the /home teal container look
   ============================================ */

/* 1) Turn the ivory bubbles into teal glass */
body.page-id-88 :is(.praxis-container, #mail-section, #live-section),
body.page-id-162 .praxis-container,
body.page-id-436 .praxis-container {
  background: rgba(0, 80, 80, 0.60) !important;  /* same as home teal boxes */
  box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0 !important;                   /* stays consistent with your flat style */
  color: #FAF9F7 !important;
}

/* 2) All regular text inside = bone white */
body.page-id-88 :is(.praxis-container, #mail-section, #live-section)
  :is(h1,h2,h3,h4,h5,p,li,span,strong,label,small),
body.page-id-162 .praxis-container
  :is(h1,h2,h3,h4,h5,p,li,span,strong,label,small),
body.page-id-436 .praxis-container
  :is(h1,h2,h3,h4,h5,p,li,span,strong,label,small) {
  color: #FAF9F7 !important;
}

/* 3) Button system inside these bubbles – match /home glass buttons */
body.page-id-88 :is(.praxis-container, #mail-section, #live-section)
  :is(.wp-block-button__link, .book-btn, .wpcf7-submit, input[type="submit"]),
body.page-id-162 .praxis-container
  :is(.wp-block-button__link, .wpcf7-submit, input[type="submit"]),
body.page-id-436 .praxis-container
  .wp-block-button__link {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 26px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

/* Hover state – stronger white overlay, like on /home */
body.page-id-88 :is(.praxis-container, #mail-section, #live-section)
  :is(.wp-block-button__link:hover, .book-btn:hover, .wpcf7-submit:hover, input[type="submit"]:hover),
body.page-id-162 .praxis-container
  :is(.wp-block-button__link:hover, .wpcf7-submit:hover, input[type="submit"]:hover),
body.page-id-436 .praxis-container
  .wp-block-button__link:hover {
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

/* 4) Praxis top nav buttons (SEE EMAIL / SEE LIVE etc.) – full-width glass look */
body.page-id-88 .praxis-nav-buttons .wp-block-button__link,
body.page-id-162 .praxis-nav-buttons .wp-block-button__link {
  width: 100% !important;
}

/* keep them stacked nicely on mobile – layout is already handled earlier */

/* ============================================
   /praxis (page-id-88) – notice box + plan cards
   ============================================ */

/* Shared row width for nav buttons + notice (desktop) */
:root {
  --praxis-row-width: 1000px;   /* tune 920–1100px if you want tighter/looser */
}

/* Nav buttons row – cap width and center */
body.page-id-88 .praxis-nav-buttons{
  max-width: var(--praxis-row-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 1) NOTICE BOX — darker inner teal, same width as buttons */
body.page-id-88 .praxis-notice{
  max-width: var(--praxis-row-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  background: rgba(0, 60, 60, 0.60) !important;   /* darker glass teal */
  box-shadow: 0 4px 14px rgba(0,0,0,0.30) !important;
  border-left: 2px solid rgba(255,255,255,0.55) !important;
  border-radius: 0 !important;
  color: #FAF9F7 !important;
}

/* Make sure all text inside the notice is bright and readable */
body.page-id-88 .praxis-notice :is(p, strong, span, li, small){
  color: #FAF9F7 !important;
}

/* 2) PLAN CARDS — same inner-glass treatment as notice */
body.page-id-88 .plan-card{
  background: rgba(0, 60, 60, 0.35) !important;   /* slightly stronger than notice */
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
  color: #FAF9F7 !important;
}

/* All text inside cards stays bone-white */
body.page-id-88 .plan-card *{
  color: #FAF9F7 !important;
}

/* “Inquire for free” buttons – glass style (same as nav buttons) + wider */
body.page-id-88 .plan-card .book-btn{
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  min-height: 44px !important;

  width: 230px !important;          /* wider so “INQUIRE FOR FREE” is one line */
  white-space: nowrap !important;

  border-radius: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease !important;
}

body.page-id-88 .plan-card .book-btn:hover{
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* 3) TEXT LINKS UNDER CARDS – keep full white, show via underline */
body.page-id-88 .praxis-container a:not(.wp-block-button__link):not(.book-btn){
  color: #FAF9F7 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Optional: keep bullet markers in notes readable too */
body.page-id-88 .praxis-container .plan-notes li::before{
  color: rgba(255,255,255,0.8) !important;
}

/* ============================================
   /contact (page-id-162) – layout and styling
   ============================================ */

/* 1) Darker, more opaque glass container for usability */
body.page-id-162 .praxis-container {
  background: rgba(0, 55, 55, 0.88) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0 !important;
  color: #FAF9F7 !important;
}

/* Make ALL text inside contact container bone-white */
body.page-id-162 .praxis-container * {
  color: #FAF9F7 !important;
}

/* But keep input fields readable (white background, dark text) */
body.page-id-162 .praxis-container input,
body.page-id-162 .praxis-container textarea,
body.page-id-162 .praxis-container select {
  background: #FFFFFF !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
}

/* CF7 labels above inputs stay white */
body.page-id-162 .praxis-container label {
  color: #FAF9F7 !important;
}

/* 2) CONTACT OPTION BUTTONS → 4-column horizontal layout */
body.page-id-162 .contact-options {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  max-width: 1100px !important;
  margin: 0 auto 40px auto !important;
  padding: 0 20px !important;
}

/* Contact option links – glass buttons */
body.page-id-162 .contact-options a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 14px 0 !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

/* Hover effect – same as on /praxis */
body.page-id-162 .contact-options a:hover {
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20) !important;
}

/* Mobile fallback – stack buttons vertically */
@media (max-width: 768px) {
  body.page-id-162 .contact-options {
    grid-template-columns: 1fr !important;
  }
}

/* Force clean 45px button height on /contact */
body.page-id-162 .contact-options a {
  height: 45px !important;
  line-height: 45px !important;
  padding: 0 !important;       /* now padding no longer matters */
}

/* Prevent text wrapping inside contact option buttons */
body.page-id-162 .contact-options a {
  white-space: nowrap !important;
}

/* ========== HOME CLONES (ep-home) — restore hero backgrounds ========== */

.ep-home #intro {
  background: url('/wp-content/uploads/2025/10/bfc8a38f-ca4c-4ecf-aba3-32cdc8098814.png')
              no-repeat center center fixed !important;
  background-size: cover !important;
  color: #f8f8f8;
  padding: 120px 10%;
  text-align: left;
  position: relative;
}

.ep-home #intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}

.ep-home #px {
  position: relative;
  background: url('/wp-content/uploads/2025/10/ff3b2c52-9d6f-4528-84dd-5b5fd7ccfab4.png') no-repeat center center/cover !important;
  color: #fff;
  padding: 100px 6vw;
}

.ep-home #px::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}

.ep-home #eex {
  position: relative;
  background: url('/wp-content/uploads/2025/11/affd6aa7-efa9-423d-9ffe-beff7f8cd603.png') no-repeat center center/cover !important;
  color: #fff;
  padding: 100px 6vw;
}

.ep-home #eex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 0;
}

.ep-home #about {
  position: relative;
  background: url('/wp-content/uploads/2025/10/bfc8a38f-ca4c-4ecf-aba3-32cdc8098814.png')
              no-repeat center center fixed !important;
  background-size: cover !important;
  padding: 100px 10%;
  color: #fff;
}

.ep-home #about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.03);
  z-index: 0;
}

/* Same intro/EEX/PX/ABOUT hero bands for ep-home clones */

.ep-home #intro {
  min-height: var(--home-intro-min-height, 700px) !important;
  padding: var(--home-intro-vert-padding, 40px) 10% !important;
}

.ep-home #eex {
  min-height: var(--home-eex-min-height, 700px) !important;
  padding: var(--home-eex-vert-padding, 40px) 10% !important;
}

.ep-home #px {
  min-height: var(--home-px-min-height, 700px) !important;
  padding: var(--home-px-vert-padding, 40px) 10% !important;
}

.ep-home #about {
  min-height: var(--home-about-min-height, 700px) !important;
  padding: var(--home-about-vert-padding, 40px) 10% !important;
}

/* Flex centering of all 4 hero sections */

.ep-home #intro,
.ep-home #px,
.ep-home #eex,
.ep-home #about {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

/* Small detail: same list line-height as EN home */

.ep-home ul li {
  line-height: 1.5em;
}

/* === HOME LAYOUT – SECTION SPACING === */

.ep-home #hero,
.ep-home #intro,
.ep-home #eex,
.ep-home #px,
.ep-home #about {
  margin-left: auto;
  margin-right: auto;
}

/* white bars between the hero + the three cards */
.ep-home #intro,
.ep-home #eex,
.ep-home #px {
  margin-top: 20px;      /* ~20px white strip between those sections */
}

/* gap under hero so it doesn't glue to the header */
.ep-home #hero {
  margin-top: 40px;
  margin-bottom: 20px;
}

/* little breathing room above footer */
.ep-home #about {
  margin-top: 20px;
  margin-bottom: 40px;
}

/* kill the 100vw hack, let the section behave normally */
.ep-home #px, .ep-home #eex {
  width: 100%;
  margin-left: 0;
}

/* ============================================
   HOME PAGES (EN/DE/TR) – HEADER ALIGNMENT
   ============================================ */

/* 1) Kill the WordPress page title band (HOME, home-de, home-tr) */
body.page-id-12 .entry-header,
body.page-id-668 .entry-header,
body.page-id-733 .entry-header {
  display: none !important;
}

/* 2) Remove extra Blocksy padding/margin above our first block */
body.page-id-12 .entry-content,
body.page-id-668 .entry-content,
body.page-id-733 .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) First block hugs the header on all three pages */
body.page-id-12 .entry-content > *:first-child,
body.page-id-668 .entry-content > *:first-child,
body.page-id-733 .entry-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================
   HOME DE / TR (page-id 668, 733)
   Mirror EN home layout & spacing
   ========================================= */

/* Base background */
body.page-id-668 .ep-home,
body.page-id-733 .ep-home {
  background: var(--ml-bg); /* bone white */
}

/* Hero quote band: same band as EN */
body.page-id-668 #hero.hero-quote,
body.page-id-733 #hero.hero-quote {
  max-width: 900px;
  margin: 40px auto 20px;
  padding: 24px 16px;
  background: var(--ml-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section rhythm: white bars between sections */
body.page-id-668 .ep-home #hero,
body.page-id-733 .ep-home #hero {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

body.page-id-668 .ep-home #intro,
body.page-id-733 .ep-home #intro,
body.page-id-668 .ep-home #eex,
body.page-id-733 .ep-home #eex,
body.page-id-668 .ep-home #px,
body.page-id-733 .ep-home #px,
body.page-id-668 .ep-home #about,
body.page-id-733 .ep-home #about {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

body.page-id-668 .ep-home #about,
body.page-id-733 .ep-home #about {
  margin-bottom: 40px !important;
}

/* Ensure the bands themselves span the container width */
body.page-id-668 .ep-home #intro,
body.page-id-668 .ep-home #eex,
body.page-id-668 .ep-home #px,
body.page-id-668 .ep-home #about,
body.page-id-733 .ep-home #intro,
body.page-id-733 .ep-home #eex,
body.page-id-733 .ep-home #px,
body.page-id-733 .ep-home #about {
  width: 100% !important;
  margin-left: 0 !important;
}

/* Teal cards centering */
body.page-id-668 .ep-home #intro .intro-content,
body.page-id-733 .ep-home #intro .intro-content,
body.page-id-668 .ep-home #about .about-content,
body.page-id-733 .ep-home #about .about-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* EEX teal box: left-aligned with fixed inset */
body.page-id-668 .ep-home #eex .text,
body.page-id-733 .ep-home #eex .text {
  max-width: 900px;
  margin-left: 40px !important;
  margin-right: auto !important;
  text-align: left;
}

/* PRAXIS4 teal box: right-aligned mirror of EEX */
body.page-id-668 .ep-home #px .text,
body.page-id-733 .ep-home #px .text {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: 40px !important;
  text-align: left;
}

/* Cap widths for the main teal boxes */
body.page-id-668 .ep-home #intro .intro-content,
body.page-id-668 .ep-home #eex .text,
body.page-id-668 .ep-home #px .text,
body.page-id-733 .ep-home #intro .intro-content,
body.page-id-733 .ep-home #eex .text,
body.page-id-733 .ep-home #px .text {
  max-width: 1024px !important;
}

/* About block alignment */
body.page-id-668 .ep-home #about .about-content,
body.page-id-733 .ep-home #about .about-content {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer above any overlays */
#ml-footer {
  position: relative;
  z-index: 999;
}

/* === FINAL OVERRIDE: FORCE UPPERCASE ON ALL HEADER NAV LABELS === */

/* Uppercase everything inside the custom header nav, regardless of element type */
.ml-header .ml-nav,
.ml-header .ml-nav * {
  text-transform: uppercase !important;
}

/* ===== CONTACT PAGE — FIX INVISIBLE SELECT OPTIONS ===== */
body.page-id-162 select,
body.page-id-162 option,
body.page-id-162 .wpcf7 select,
body.page-id-162 .wpcf7 option {
  color: #1d1d1f !important;           /* dark text */
  background-color: #ffffff !important; /* white dropdown list background */
}

/* Fix focus/hover state (blue highlight on Windows stays readable) */
body.page-id-162 option:hover,
body.page-id-162 option:focus,
body.page-id-162 select:focus option {
  color: #000 !important;
  background-color: #e6e6e6 !important;
}

/* Ensure labels stay white but form controls stay readable */
body.page-id-162 label {
  color: #FAF9F7 !important;
}

/* ============================================
   GLOBAL SECTION HEADING NORMALIZER (match /home)
   Applies to page top titles on PRAXIS, CONTACT, LONG STORY, EEX
   ============================================ */

body.page-id-88 h1,
body.page-id-88 h2,
body.page-id-162 h1,
body.page-id-162 h2,
body.page-id-436 h1,
body.page-id-436 h2 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* Remove unintended heavy bold styles on PRAXIS titles */
body.page-id-88 .praxis-title,
body.page-id-88 .plan-category {
  font-weight: 500 !important;
  font-size: 22px !important;
  color: #ffffff !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 20px !important;
}

/* Long Story page uses .bio-title / .praxis-title */
body.page-id-436 .bio-title,
body.page-id-436 .praxis-title {
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* ============================================
   CF7 FORM HEADINGS — MATCH /HOME STYLE
   ============================================ */

body.page-id-162 .praxis-container h1,
body.page-id-162 .praxis-container h2,
body.page-id-162 .praxis-container h3,
body.page-id-162 .praxis-container h4,
body.page-id-162 .wpcf7 form h1,
body.page-id-162 .wpcf7 form h2,
body.page-id-162 .wpcf7 form h3,
body.page-id-162 .wpcf7 form h4 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;        /* leaner like home */
    font-size: 21px !important;         /* consistent heading scale */
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;   /* slightly reduced tracking */
    color: #FFFFFF !important;          /* bright white on teal */
    text-shadow: none !important;       /* prevents thick/blurred look */
    text-align: center !important;
    margin: 10px 0 20px !important;
}

/* ============================================
   LONG STORY PAGE — Force universal button style
   ============================================ */

body.page-id-436 .bio-text a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 300px !important;              /* your chosen fixed width */
  min-width: 300px !important;
  height: 46px !important;              /* consistent height */
  padding: 12px 0 !important;

  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  background: rgba(255,255,255,0.18) !important; 
  color: #fff !important;
  text-decoration: none !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;

  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;

  margin: 0 12px !important; /* spacing between buttons */
}

/* Hover state */
body.page-id-436 .bio-text a:hover {
  background: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Make spans inherit cleanly */
body.page-id-436 .bio-text a span {
  color: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Center the whole button row */
body.page-id-436 .bio-text > div {
  text-align: center !important;
}

/* Force long-story buttons to have perfectly square corners */
body.page-id-436 .bio-text a,
body.page-id-436 .bio-text a * {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  overflow: hidden !important; /* kills any visual anti-alias rounding */
  clip-path: inset(0) !important; /* forces square edges even if browser paints otherwise */
}

/* ============================================
   LANGUAGE MENU ITEM — COLOR ONLY (NO TYPOGRAPHY OVERRIDE)
   ============================================ */

/* Default color */
.ml-nav li.has-submenu > .ml-nav-label[data-i18n="nav_language"] {
    color: var(--ml-teal) !important;
}

/* Hover state */
.ml-nav li.has-submenu:hover > .ml-nav-label[data-i18n="nav_language"] {
    color: var(--ml-red) !important;
}

/* When JS replaces <span> with <a> (some mobile modes do this) */
.ml-nav li.has-submenu > a[data-i18n="nav_language"] {
    color: var(--ml-teal) !important;
}
.ml-nav li.has-submenu:hover > a[data-i18n="nav_language"] {
    color: var(--ml-red) !important;
}

/* ============================================
   FIX LANGUAGE MENU SIZE ON MOBILE
   ============================================ */
@media (max-width: 1024px) {

  /* Force LANGUAGE label to inherit menu typography */
  .ml-nav li.has-submenu > .ml-nav-label[data-i18n="nav_language"],
  .ml-nav li.has-submenu > a[data-i18n="nav_language"] {
      font-size: .875rem !important;      /* same as Blocksy mobile menu items */
      line-height: 1.4 !important;        /* matches other menu items */
      font-weight: 400 !important;        /* neutral, identical to normal items */
  }

  /* Extra safety: ensure parent LI does not enlarge it */
  .ml-nav li.has-submenu {
      font-size: inherit !important;
      line-height: inherit !important;
  }
}

/* ============================================
   EPISTEMIST – Custom Mobile Navigation
   ============================================ */

/* Hamburger button (hidden on desktop) */
.ml-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto; /* pushes it to the right when desktop nav is hidden */
}

.ml-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #1d1d1f;
  margin: 3px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Desktop vs mobile behaviour */
@media (max-width: 1024px) {
  .ml-nav-desktop {
    display: none !important;
  }

  .ml-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Slightly tighter header padding on mobile */
  .ml-header-inner {
    padding: 8px 16px !important;
  }
}

/* Body lock when menu open */
body.ml-mobile-open {
  overflow: hidden;
}

/* Full-screen mobile menu overlay */
.ml-mobile-menu {
  position: fixed;
  inset: 0;
  background: #FAF9F7; /* solid bone white */
  color: var(--ml-text);
  z-index: 9998;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
}

body.ml-mobile-open .ml-mobile-menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ml-mobile-menu-inner {
  max-width: 540px;
  margin: 0 auto;
  padding: 80px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Close button */
.ml-mobile-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  align-self: flex-end;
  cursor: pointer;
  margin-bottom: 12px;
}

/* Top-level list */
.ml-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ml-mobile-list > li > a,
.ml-mobile-list > li > .ml-mobile-parent {
  display: block;
  padding: 10px 0;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ml-teal);
  text-decoration: none;
  font-weight: 400;
}

/* Button for accordion parents */
.ml-mobile-parent {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.ml-mobile-list > li > a:hover,
.ml-mobile-list > li > .ml-mobile-parent:hover {
  color: var(--ml-red);
}

/* Submenus */
.ml-mobile-list .sub-menu {
  list-style: none;
  margin: 4px 0 8px 12px;
  padding: 0;
  display: none;
}

.ml-mobile-list .sub-menu a {
  display: block;
  padding: 6px 0;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ml-text);
}

.ml-mobile-list .has-submenu.open > .sub-menu {
  display: block;
}

/* Small refinement for really narrow screens */
@media (max-width: 480px) {
  .ml-mobile-menu-inner {
    padding: 64px 18px 28px;
  }

  .ml-mobile-list > li > a,
  .ml-mobile-list > li > .ml-mobile-parent {
    font-size: 0.9rem;
  }
}

/* Center hamburger under logo on mobile */
@media (max-width: 1024px) {
  .ml-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers content */
    justify-content: center;
  }

  .ml-hamburger {
    margin-top: 6px;
    right: auto !important;
    left: auto !important;
    position: static !important; /* no absolute positioning */
  }
}

/* === MOBILE HEADER: center hamburger under logo === */
@media (max-width: 1024px) {
  body .ml-header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .ml-hamburger {
    position: static !important;      /* no absolute positioning */
    margin: 6px 0 0 0 !important;     /* small gap below logo */
    align-self: center !important;    /* make sure it's centered in the column */
  }
}

/* --------------------------------------------------------------
   MOBILE HEADER LAYOUT — center hamburger below logo
-------------------------------------------------------------- */
@media (max-width: 1024px) {

  body .ml-header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body .ml-hamburger {
    position: static !important;
    margin: 6px 0 0 0 !important;
    align-self: center !important;
  }
}


/* --------------------------------------------------------------
   MOBILE MENU — base styling
-------------------------------------------------------------- */
.ml-mobile-menu {
  position: fixed;
  inset: 0;
  background: #faf9f7;
  color: #1d1d1f;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
  padding: 0;
}

body.ml-mobile-open .ml-mobile-menu {
  transform: translateY(0);
}

.ml-mobile-menu-inner {
  padding: 24px;
}

.ml-mobile-close {
  font-size: 36px;
  background: none;
  border: none;
  line-height: 1;
  padding: 0;
  margin-bottom: 20px;
  color: #1d1d1f;
}

.ml-mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ml-mobile-list > li {
  margin-bottom: 18px;
}

.ml-mobile-list a {
  text-decoration: none;
  color: #008c8c;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.4px;
}


/* --------------------------------------------------------------
   MOBILE SUBMENU ACCORDION — PRAXIS4, ABOUT, LANGUAGE
-------------------------------------------------------------- */
.has-submenu .sub-menu {
  display: none;
  list-style: none;
  padding-left: 14px;
  margin-top: 10px;
}

.has-submenu.open .sub-menu {
  display: block;
}

.sub-menu li a {
  font-size: 18px;
  font-weight: 400;
  color: #006060;
}


/* --------------------------------------------------------------
   MOBILE PARENT ROW — split link + caret
-------------------------------------------------------------- */
.ml-mobile-parent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* the main clickable link to /#px or /#about */
.ml-mobile-parent-link {
  color: #008c8c;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}

/* the caret button that toggles the submenu */
.ml-mobile-parent-row .ml-mobile-parent-toggle {
  background: none;
  border: none;
  font-size: 22px;
  color: #008c8c;
  padding: 0 6px;
  cursor: pointer;
}

/* keep LANGUAGE consistent */
.ml-mobile-parent-toggle[data-i18n="nav_language"] {
  font-size: 20px;
  font-weight: 500;
}


/* --------------------------------------------------------------
   ENFORCE CONSISTENT TEXT SIZE FOR MOBILE MENU ITEMS
-------------------------------------------------------------- */
@media (max-width: 1024px) {

  .ml-mobile-list > li > a,
  .ml-mobile-parent-link,
  .ml-mobile-parent-toggle {
    font-size: 20px !important;
    font-weight: 500 !important;
  }

  .ml-mobile-menu .sub-menu a {
    font-size: 18px !important;
    font-weight: 400 !important;
  }
}

/* ===========================================================
   FORCE LANGUAGE to behave like a normal mobile menu item
   =========================================================== */

/* Remove ANY native select appearance */
#ml-mobile-menu .ml-mobile-list li.has-submenu > button[data-i18n="nav_language"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center;

  color: var(--ml-teal) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;

  width: auto !important;
  height: auto !important;
}

/* Remove the fake border box some browsers inject inside LI */
#ml-mobile-menu .ml-mobile-list li.has-submenu button[data-i18n="nav_language"]::after {
  content: "▾";
  color: var(--ml-teal);
  font-size: 20px;
  margin-left: 8px;
}

/* Remove any leftover wrapper element resembling a box */
#ml-mobile-menu .ml-mobile-list li.has-submenu button[data-i18n="nav_language"]::-ms-expand {
  display: none !important;
}

/* Kill Blocksy form field styling inherited accidentally */
#ml-mobile-menu .ml-mobile-list li.has-submenu button[data-i18n="nav_language"] {
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

/* Remove Blocksy's auto-inserted dropdown arrow for LANGUAGE */
#ml-mobile-menu .ml-mobile-list li.has-submenu button[data-i18n="nav_language"]::before {
  content: none !important;
}

/* MOBILE: Shrink hero quote + reduce spacing */
@media (max-width: 768px) {
  #hero.hero-quote {
    margin: 10px auto 4px !important;   /* much less whitespace */
    padding: 8px 10px !important;
  }

  #hero.hero-quote h1 {
    font-size: 0.78rem !important;     /* significantly smaller text */
    line-height: 1.25 !important;
    font-weight: 400 !important;        /* lighter */
  }
}

/* ===========================================
   EPISTEMIST — Strong Mobile Typography Override
   For portrait phones, visible reduction guaranteed
   =========================================== */
@media (max-width: 480px) {

  /* UNIVERSAL TEXT SHRINK */
  body,
  p,
  li,
  .entry-content,
  .wp-block-group,
  .px-bubble,
  .eex-bubble {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }

  /* TOP HERO (#intro) */
  #intro h1,
  .hero-title,
  .home-hero h1 {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
  }

  #intro p,
  .hero-subtitle,
  .home-hero p {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }

  /* SECTION SPACING — drastically reduce vertical padding */
  section,
  .wp-block-group,
  .wp-block-cover,
  .blocksy-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* BUBBLE PADDING — reduce the vertical height */
  .px-bubble,
  .eex-bubble,
  .bubble {
    padding: 14px 14px !important;
  }

  /* CARDS & BUTTONS */
  .wp-block-button__link,
  .button,
  a.btn,
  .card-button {
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
  }
}

/* ===========================================
   MOBILE FLAT PANELS – INTRO, PX, EEX
   =========================================== */
@media (max-width: 768px) {

  /* 1) Remove decorative background images & offsets on mobile */
  .ep-home #intro,
  .ep-home #px,
  .ep-home #eex {
    background-image: none !important;
    background-size: auto !important;
    background-attachment: scroll !important;
    background-color: var(--ml-bg) !important;
    width: 100% !important;
    margin-left: 0 !important;   /* kill the full-width hack offset */
  }

  /* 2) Make teal content boxes full-width, edge-to-edge */
  .ep-home #intro .intro-content,
  .ep-home #px .text,
  .ep-home #eex .text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 18px !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    background: var(--ml-teal) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3) Make sure text is readable on the teal panels */
  .ep-home #intro .intro-content h2,
  .ep-home #intro .intro-content p,
  .ep-home #intro .intro-content li,
  .ep-home #px .text h2,
  .ep-home #px .text p,
  .ep-home #px .text li,
  .ep-home #eex .text h2,
  .ep-home #eex .text p,
  .ep-home #eex .text li {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  /* 4) Slightly tighter vertical rhythm so it doesn’t feel “tall” */
  .ep-home #intro,
  .ep-home #px,
  .ep-home #eex {
    padding: 28px 0 !important;
  }
}

/* =======================================================
   FULL MOBILE STRIP-DOWN FOR #about (true flattening)
   ======================================================= */
@media (max-width: 768px) {

  /* Outer wrapper – unify background color with PX/EEX */
  .ep-home #about {
    background: var(--ml-teal) !important;
    background-image: none !important;
    padding: 32px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Remove the inner Blocksy container box */
  .ep-home #about .ct-container,
  .ep-home #about .ct-inner-content,
  .ep-home #about .wp-block-group {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove that darker inner card you see on your screenshot */
  .ep-home #about .about-inner,
  .ep-home #about .about-box,
  .ep-home #about .wp-block-cover__inner-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Typography normalization (match PX/EEX stripped look) */
  .ep-home #about h2,
  .ep-home #about p,
  .ep-home #about li {
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: none !important;
    font-weight: 400 !important;
  }

  /* The portrait image in #about */
  .ep-home #about img {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 28px auto !important;
    display: block !important;
    border-radius: 0 !important;      /* flatten like other sections */
    box-shadow: none !important;
  }
}

/* =======================================================
   FINAL ABOUT FIX — remove residual light-teal band
   & restore left-aligned text while keeping image centered
   ======================================================= */
@media (max-width: 768px) {

  /* Kill ALL remaining background layers */
  .ep-home #about,
  .ep-home #about .ct-section-inner,
  .ep-home #about .ct-container,
  .ep-home #about .ct-wrapper,
  .ep-home #about .wp-block-group,
  .ep-home #about .wp-block-group__inner-container {
    background: var(--ml-teal) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Fix the top band (this is the missing piece) */
  .ep-home #about .ct-section,
  .ep-home #about .ct-section-inner {
    background: var(--ml-teal) !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Portrait centered */
  .ep-home #about img {
    display: block !important;
    margin: 0 auto 28px auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Text LEFT-aligned again */
  .ep-home #about h2,
  .ep-home #about h3,
  .ep-home #about p,
  .ep-home #about ul,
  .ep-home #about li {
    text-align: left !important;
    color: #ffffff !important;
  }

  /* Keep titles visually centered (your design intent) */
  .ep-home #about h2,
  .ep-home #about h3 {
    text-align: center !important;
  }
}


/* =========================================
   DESKTOP DROPDOWNS – PRAXIS4 / ABOUT / LANGUAGE
   (repair after mobile hamburger integration)
   ========================================= */
@media (min-width: 993px) {

  /* Make sure submenus can escape the header row */
  .ml-header-inner {
    overflow: visible !important;
  }

  /* Each top-level <li> is the positioning context for its submenu */
  .ml-nav-desktop li {
    position: relative;
  }

  /* Default submenu state: visually hidden but present in DOM */
  .ml-nav-desktop .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 180px;
    padding: 6px 0;
    margin-top: 8px;

    background: #F3EFEF; /* header beige */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.10);

    display: block;                 /* always in flow */
    opacity: 0;                     /* invisible by default */
    transform: translateY(6px);     /* slight drop */
    pointer-events: none;           /* no accidental hover */

    transition: opacity .18s ease, transform .18s ease;
    z-index: 1000;
  }

  /* Show submenu on hover or keyboard focus */
  .ml-nav-desktop li.has-submenu:hover > .sub-menu,
  .ml-nav-desktop li.has-submenu:focus-within > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Submenu links styling */
  .ml-nav-desktop .sub-menu a {
    display: block;
    padding: 10px 14px;
    white-space: nowrap;

    color: var(--ml-teal) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 400;
  }

  .ml-nav-desktop .sub-menu a:hover {
    color: var(--ml-red) !important;
  }

  /* Caret indicator on desktop for all items with submenus,
     including the LANGUAGE <span> label */
  .ml-nav-desktop li.has-submenu > a::after,
  .ml-nav-desktop li.has-submenu > .ml-nav-label::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
  }
}

/* ===== FORCE FLAT CORNERS ON PORTRAITS ===== */

/* Home: #about portrait (page-id-12) */
body.page-id-12 #about img {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Long-story portrait (page-id-436) */
body.page-id-436 .bio-portrait img {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Extra: kill Blocksy default border rounding on images inside those sections */
body.page-id-12 #about .wp-block-image img,
body.page-id-436 .wp-block-image img {
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Extra specificity: if Blocksy injects figure-style CSS */
body.page-id-12 #about figure img,
body.page-id-436 .bio-portrait figure img {
    border-radius: 0 !important;
}

/* Flatten portrait on home #about section */
body.page-id-12 #about .about-image {
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* ===========================================
   MOBILE FIX – /home #intro visuals & buttons
   Fix overflow + scale images ~20% down
   =========================================== */
@media (max-width: 768px) {

  /* Force each visual block to full width */
  body.page-id-12 #intro .intro-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto !important;
    display: block !important;
    text-align: center !important;
  }

  /* Scale down images */
  body.page-id-12 #intro .intro-visual .intro-img {
    width: 90% !important;     /* tweak to 85%/80% if needed */
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Scale + center buttons in intro */
  body.page-id-12 #intro .intro-visual a.wp-block-button__link {
    display: block !important;
    width: 90% !important;         /* match image scale */
    max-width: 280px !important;   /* safety cap */
    margin: 12px auto 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Breathing room between stacked items */
  body.page-id-12 #intro .intro-col {
    margin-bottom: 24px !important;
  }
}

/* ===========================================
   HARD MOBILE FIX – /home #intro visuals + buttons
   Make each card a centered flex column
   =========================================== */
@media (max-width: 768px) {

  /* Treat each visual column as a flex stack */
  body.page-id-12 #intro .intro-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto !important;
  }

  /* Image + button share the same width + centering */
  body.page-id-12 #intro .intro-visual .intro-img,
  body.page-id-12 #intro .intro-visual .wp-block-button__link {
    width: 90% !important;          /* scale down relative to column */
    max-width: 320px !important;    /* safety cap */
    margin: 0 auto 12px auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Reduce left/right padding of the intro content on mobile
     so nothing can “push” the button off to the right */
  body.page-id-12 #intro .intro-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ==========================================
   /PRAXIS – MOBILE FLAT LAYOUT (page-id 88)
   Kill cards, full-width teal, clean text
   ========================================== */
@media (max-width: 768px) {

  /* Global background for this page */
  body.page-id-88,
  body.page-id-88 .ep-praxis {
    background: #008C8B !important;
  }

  /* Main wrapper for the plans */
  body.page-id-88 .ep-praxis #praxisplans {
    padding: 16px 0 32px 0 !important;
    margin: 0 !important;
  }

  /* --- NUKE CONTAINERS / CARD LOOK --- */

  /* Top-level teal boxes */
  body.page-id-88 .ep-praxis .praxis-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 16px !important;   /* equal left/right padding */
    box-sizing: border-box !important;
  }

  /* Grid of plans should stack vertically */
  body.page-id-88 .ep-praxis .plan-grid {
    display: block !important;
    margin: 0 !important;
  }

  /* Each individual plan card */
  body.page-id-88 .ep-praxis .plan-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 24px 0 !important;
    box-sizing: border-box !important;
  }

  /* Separator line between successive plans */
  body.page-id-88 .ep-praxis .plan-card + .plan-card {
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding-top: 24px !important;
  }

  /* --- TYPOGRAPHY & ALIGNMENT --- */

  /* Main page title / section titles centred */
  body.page-id-88 .ep-praxis .praxis-title,
  body.page-id-88 .ep-praxis .praxis-subtitle,
  body.page-id-88 .ep-praxis .plan-category,
  body.page-id-88 .ep-praxis .plan-card h4 {
    text-align: center !important;
  }

  /* Normal text left-aligned */
  body.page-id-88 .ep-praxis p,
  body.page-id-88 .ep-praxis li {
    text-align: left !important;
  }

  /* Prices centred and on their own line */
  body.page-id-88 .ep-praxis .plan-card .price {
    display: block !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
  }

  /* Keep any explicit center-aligned helper text centred */
  body.page-id-88 .ep-praxis p[style*="text-align: center"],
  body.page-id-88 .ep-praxis p.has-text-align-center {
    text-align: center !important;
  }

  /* --- BUTTONS & NAV BUTTONS --- */

  /* Top nav buttons (see email / live plans) */
  body.page-id-88 .ep-praxis .praxis-nav-buttons {
    margin: 24px 0 16px 0 !important;
    padding: 0 !important;
  }

  body.page-id-88 .ep-praxis .praxis-nav-buttons .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Plan “INQUIRE FOR FREE” buttons */
  body.page-id-88 .ep-praxis .book-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Fallback paragraphs below mail/live sections */
  body.page-id-88 .ep-praxis #mail-cards > p,
  body.page-id-88 .ep-praxis #live-section > p {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Safety: kill any horizontal overflow from rogue elements */
  body.page-id-88 .ep-praxis * {
    max-width: 100% !important;
  }
}

/* ==========================================
   /LONG-STORY – MOBILE FLAT LAYOUT (436)
   Center hero + portrait, left text, tidy buttons
   ========================================== */
@media (max-width: 768px) {

  /* Page background */
  body.page-id-436 {
    background: #008C8B !important;
  }

  /* Keep header/footer clean bone white */
  body.page-id-436 .site-header,
  body.page-id-436 .site-footer {
    background-color: #FAF9F7 !important;
    box-shadow: none !important;
  }

  /* Main content baseline */
  body.page-id-436 #main,
  body.page-id-436 .site-main,
  body.page-id-436 .entry-content {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kill card / column boxes and enforce symmetric padding */
  body.page-id-436 .wp-block-group,
  body.page-id-436 .wp-block-columns,
  body.page-id-436 .wp-block-column {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px 24px 16px !important;
    box-sizing: border-box !important;
  }

  /* Titles centered, body text left */
  body.page-id-436 h1,
  body.page-id-436 h2,
  body.page-id-436 h3 {
    text-align: center !important;
  }

  body.page-id-436 p,
  body.page-id-436 li {
    text-align: left !important;
  }

  /* Portrait: full width, centered, sharp corners */
  body.page-id-436 img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 24px auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Bottom buttons stacked full-width with spacing */
  body.page-id-436 .wp-block-buttons,
  body.page-id-436 .about-buttons {
    margin: 24px 16px 8px 16px !important;
    padding: 0 !important;
    display: block !important;
  }

  body.page-id-436 .wp-block-buttons .wp-block-button,
  body.page-id-436 .about-buttons a {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  body.page-id-436 .wp-block-buttons .wp-block-button__link,
  body.page-id-436 .about-buttons a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Safety: no horizontal scrollbars */
  body.page-id-436 .entry-content * {
    max-width: 100% !important;
  }
}

/* ==========================================
   /CONTACT – MOBILE FLAT LAYOUT (162)
   Center headings & buttons, full-width forms
   ========================================== */
@media (max-width: 768px) {

  /* Page background */
  body.page-id-162 {
    background: #008C8B !important;
  }

  /* Keep header/footer clean */
  body.page-id-162 .site-header,
  body.page-id-162 .site-footer {
    background-color: #FAF9F7 !important;
    box-shadow: none !important;
  }

  body.page-id-162 #main,
  body.page-id-162 .site-main,
  body.page-id-162 .entry-content {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Flatten Gutenberg containers */
  body.page-id-162 .wp-block-group,
  body.page-id-162 .wp-block-columns,
  body.page-id-162 .wp-block-column {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px 24px 16px !important;
    box-sizing: border-box !important;
  }

  /* Headings centered, text left */
  body.page-id-162 h1,
  body.page-id-162 h2,
  body.page-id-162 h3 {
    text-align: center !important;
  }

  body.page-id-162 p,
  body.page-id-162 li,
  body.page-id-162 label {
    text-align: left !important;
  }

  /* “Contact options” buttons — full-width bars */
  body.page-id-162 .wp-block-buttons {
    margin: 16px 0 !important;
  }

  body.page-id-162 .wp-block-buttons .wp-block-button {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  body.page-id-162 .wp-block-buttons .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* CF7 forms: real 100% width */
  body.page-id-162 .wpcf7,
  body.page-id-162 .wpcf7-form {
    margin: 0 !important;
  }

  body.page-id-162 .wpcf7-form p {
    margin: 0 0 12px 0 !important;
  }

  body.page-id-162 .wpcf7-form input[type="text"],
  body.page-id-162 .wpcf7-form input[type="email"],
  body.page-id-162 .wpcf7-form input[type="tel"],
  body.page-id-162 .wpcf7-form textarea,
  body.page-id-162 .wpcf7-form select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.page-id-162 .wpcf7-form input[type="submit"] {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Safety: kill any residual horizontal overflow */
  body.page-id-162 .entry-content * {
    max-width: 100% !important;
  }
}

/* ============================================
   MOBILE LAYOUT – /contact (162) & /long-story (436)
   Clean, symmetric, “feed-like” layout
   ============================================ */
@media (max-width: 768px) {

  /* 0) Page background – same teal as /praxis mobile */
  body.page-id-162,
  body.page-id-436 {
    background: #008C8B !important;   /* or var(--ml-teal) if you prefer */
  }

  /* 1) Kill random outer margins/paddings on the main wrapper */
  body.page-id-162 #main, {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) Primary content wrappers: full-width with symmetric side padding */
  body.page-id-162 .ep-contact,
    body.page-id-436 .ep-bio {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 16px 40px 16px !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Safety: inner blocks may not overflow horizontally */
  body.page-id-162 .ep-contact > *,
  body.page-id-436 .ep-bio > * {
    max-width: 100% !important;
  }

  /* 3) Headings centred, body text left-aligned */
  body.page-id-162 h2,
  body.page-id-162 h3,
  body.page-id-436 h2,
  body.page-id-436 h3 {
    text-align: center !important;
  }

  body.page-id-162 p,
  body.page-id-162 li,
  body.page-id-436 p,
  body.page-id-436 li {
    text-align: left !important;
  }

  /* 4) CF7 forms: full-width & centred feeling */
  body.page-id-162 .wpcf7,
  body.page-id-162 form.wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 24px 0 !important;
  }

  /* 5) Long-story portrait & bottom buttons */
  body.page-id-436 .bio-portrait {
    margin: 0 auto 20px auto !important;
    max-width: 360px !important;
  }
  body.page-id-436 .bio-portrait img {
    width: 100% !important;
    height: auto !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto 14px auto !important;
    box-sizing: border-box !important;
  }
}

/* MOBILE BASELINE ALIGNMENT – CONTACT (162) + LONG-STORY (436) */
@media (max-width: 768px) {
  body.page-id-162,
  body.page-id-436 {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* hard-kill horizontal scroll */
  }

  /* Core content column */
  body.page-id-162 #main,
  body.page-id-436 #main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 18px !important;   /* symmetric padding */
  }

  /* Your custom page wrapper */
  body.page-id-162 .praxis-page,
  body.page-id-162 .praxis-container, {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Forms on /contact full-width inside that column */
  body.page-id-162 .wpcf7,
  body.page-id-162 .wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ============================================
   MOBILE LAYOUT – /long-story (436) + /contact (162)
   Symmetric column, left text, centered titles & CTAs
   ============================================ */
@media (max-width: 768px) {

  /* Kill any horizontal scroll */
  body.page-id-162,
  body.page-id-436 {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* Single central content column */
  body.page-id-162 #main,
  body.page-id-436 #main,
  body.page-id-162 .site-main,
  body.page-id-436 .site-main,
  body.page-id-162 .ep-contact,
  body.page-id-436 .ep-bio, {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* =====================================
     /LONG-STORY (page-id-436) specifics
     ===================================== */

  /* Stack portrait + text cleanly */
  body.page-id-436 .bio-grid {
    display: block !important;
  }

  body.page-id-436 .bio-portrait {
    margin: 0 auto 20px auto !important;
    max-width: 360px !important;
    text-align: center !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  body.page-id-436 .bio-text {
    margin: 0 auto !important;
  }

  body.page-id-436 .bio-text p {
    text-align: left !important;
  }

  /* Bottom buttons: stacked, equal width, spaced */
  body.page-id-436 .bio-text > div {
    text-align: center !important;
    margin-top: 24px !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 10px auto !important;
    box-sizing: border-box !important;
  }

  /* =====================================
     /CONTACT (page-id-162) specifics
     ===================================== */

  /* Page title + section headings */
  body.page-id-162 .plan-category {
    text-align: center !important;
  }

  /* Top contact navigation buttons */
  body.page-id-162 .praxis-nav-buttons.contact-options {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  body.page-id-162 .praxis-nav-buttons.contact-options .wp-block-button__link {
    display: block !important;
    flex: 1 1 48% !important;
    min-width: 140px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Each section full-width with clean spacing */
  body.page-id-162 .contact-section {
    margin: 0 0 32px 0 !important;
  }

  /* CF7 forms: use full column width */
  body.page-id-162 .form-wrapper,
  body.page-id-162 .wpcf7,
  body.page-id-162 .wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body.page-id-162 .wpcf7-form p {
    margin: 0 0 14px 0;
  }
}

/* ============================================
   MOBILE FLAT LAYOUT – CONTACT (162) & LONG STORY (436)
   Match the /praxis behaviour: no inner card, full-width content,
   symmetric padding, no right drift, no overflow.
   ============================================ */
@media (max-width: 768px) {

  /* ---- Base background stays teal, content goes full-width ---- */
  body.page-id-162 .ep-contact,
  body.page-id-436 .ep-bio {
    background: #2d6e72; /* keep your existing teal here */
  }

  body.page-id-162 .ep-contact .praxis-page,
  body.page-id-436 .ep-bio .praxis-page {
    margin: 0 !important;
    padding: 24px 0 !important;
  }

  /* Core content wrapper: kill “card” look and squeeze */
  body.page-id-162 .ep-contact .praxis-container,
  body.page-id-436 .ep-bio .praxis-container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 18px 24px 18px !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Anything inside cannot be wider than the viewport */
  
  /* Kill horizontal scroll completely */
  body.page-id-162,
  body.page-id-436 {
    overflow-x: hidden !important;
  }

  /* ---------- CONTACT PAGE (162) ---------- */

  /* Top button group: stacked, full-width, wrapping text */
  body.page-id-162 .praxis-nav-buttons.contact-options {
    display: block !important;
    margin: 24px 0 !important;
  }

  body.page-id-162 .praxis-nav-buttons.contact-options a.wp-block-button__link {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;

    text-align: center !important;
    white-space: normal !important;  /* allow “PRAXIS4 EMAIL COACHING” to wrap */
  }

  /* CF7: forms + controls full column width */
  body.page-id-162 .wpcf7,
  body.page-id-162 .wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  body.page-id-162 .wpcf7-form p,
  body.page-id-162 .wpcf7-form input[type="text"],
  body.page-id-162 .wpcf7-form input[type="email"],
  body.page-id-162 .wpcf7-form input[type="number"],
  body.page-id-162 .wpcf7-form textarea,
  body.page-id-162 .wpcf7-form select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Headings centred, copy left-aligned (same logic as /praxis) */
  body.page-id-162 h2,
  body.page-id-162 h3 {
    text-align: center !important;
  }

  body.page-id-162 p,
  body.page-id-162 li {
    text-align: left !important;
  }

  /* ---------- LONG STORY PAGE (436) ---------- */

  /* Container already full-width above; just control grid/portrait/text/buttons */

  /* Stack grid on mobile */
  body.page-id-436 .bio-grid {
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
  }

  /* Portrait: full-width inside padding, centred, flat edges */
  body.page-id-436 .bio-portrait {
    position: static !important;
    margin: 0 auto 24px auto !important;
    max-width: 420px;
    text-align: center !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
  }

  /* Title centred, body text left-aligned */
  body.page-id-436 .praxis-title {
    text-align: center !important;
  }

  body.page-id-436 .bio-text {
    margin: 0 auto !important;
  }

  body.page-id-436 .bio-text p {
    text-align: left !important;
  }

  /* Bottom buttons: stacked, centred, no right-glue, wrap text */
  body.page-id-436 .bio-text > div {
    text-align: center !important;
    margin-top: 24px !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 12px auto !important;
    box-sizing: border-box !important;

    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================
   MOBILE LAYOUT – LONG STORY (page 436)
   ========================================= */
@media (max-width: 768px) {

  /* Kill Blocksy's narrow content width on this page */
  body.page-id-436 #main,
  body.page-id-436 #main > *,
  body.page-id-436 .entry-content,
  body.page-id-436 .entry-content > *,
  body.page-id-436 .ep-bio,
  body.page-id-436 .ep-bio > *, {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* Stack portrait above text and make it full-width */
  body.page-id-436 .bio-grid {
    display: block !important;
  }

  body.page-id-436 .bio-portrait {
    margin: 0 0 24px 0 !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Text should be free-flowing, left-aligned */
  body.page-id-436 .bio-text {
    margin: 0 !important;
  }

  body.page-id-436 .bio-text p {
    text-align: left !important;
  }

  /* Bottom buttons: stacked, full-width, no overflow */
  body.page-id-436 .bio-text > div {
    text-align: center !important;
    margin: 32px 0 0 0 !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box;
  }

  /* Safety: nuke horizontal scroll */
  body.page-id-436 {
    overflow-x: hidden;
  }
}

/* ============================================
   MOBILE LAYOUT – LONG STORY (page 436)
   Target the real wrapper (.ep-bio), not #main
   ============================================ */
@media (max-width: 768px) {

  /* Page wrapper: full-width teal, symmetric padding */
  body.page-id-436 .ep-bio {
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box;
  }

  /* Main inner containers: no artificial narrowing */
  body.page-id-436 .ep-bio .praxis-page,
  body.page-id-436 .ep-bio .praxis-container,
  body.page-id-436 .ep-bio .bio-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* Make the grid a simple vertical stack on mobile */
  body.page-id-436 .ep-bio .bio-grid {
    display: block !important;
  }

  /* Portrait: full column width, nicely centered */
  body.page-id-436 .bio-portrait {
    margin: 0 0 20px 0 !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    border-radius: 0 !important;      /* flat corners, as agreed */
  }

  /* Text column: use full width, left-aligned */
  body.page-id-436 .bio-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  body.page-id-436 .bio-text p {
    width: auto !important;
    text-align: left !important;
  }

  /* Bottom buttons: stacked, centered, no right-glue */
  body.page-id-436 .bio-text > div {
    text-align: center !important;
    margin-top: 24px !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto 10px auto !important;
    box-sizing: border-box;
  }
}

/* =========================================
   FINAL MOBILE FIX – LONG STORY (page-id-436)
   Full-width content, big portrait, sane buttons
   ========================================= */
@media (max-width: 768px) {

  /* 1) Kill any theme container squeezing */
  body.page-id-436 #main,
  body.page-id-436 #main > *,
  body.page-id-436 #main .ct-container,
  body.page-id-436 #main .ct-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) Global padding for the bio wrapper – 12px each side */
  body.page-id-436 .ep-bio {
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* 3) Make the grid a simple stack on mobile */
  body.page-id-436 .bio-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) Portrait: full-width, not a postage stamp */
  body.page-id-436 .bio-portrait {
    margin: 0 0 20px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
  }

  /* 5) Text column uses full inner width, left aligned */
  body.page-id-436 .bio-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.page-id-436 .bio-text p {
    text-align: left !important;
    width: 100% !important;
  }

  /* 6) Bottom buttons: stacked, centered, overriding inline styles */
  body.page-id-436 .bio-text > div {
    text-align: center !important;
    margin-top: 24px !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto 10px auto !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   PAGE 436 (/long-story) – MOBILE: kill squeeze
   Big portrait + full-width text + sane CTAs
   (Overrides the inline <style> on that page)
   ========================================= */
@media (max-width: 768px) {

  body.page-id-436 {
    background: #008C8B !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  /* Remove Blocksy/container narrowing on mobile */
  body.page-id-436 #main,
  body.page-id-436 .site-main,
  body.page-id-436 .ct-container,
  body.page-id-436 .ct-main,
  body.page-id-436 .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Your page wrapper: create one clean, symmetric column */
  body.page-id-436 .ep-bio,
  body.page-id-436 .praxis-page,
  body.page-id-436 .praxis-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    /* the ONLY padding that should exist */
    padding: 24px 18px 40px 18px !important;

    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Kill the grid on mobile (prevents weird column math / squeeze) */
  body.page-id-436 .bio-grid {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
  }

  /* Portrait: FULL width, no clamps from the inline page CSS */
  body.page-id-436 .bio-portrait {
    position: static !important;
    top: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 14px 0 22px 0 !important;
    text-align: center !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;

    border-radius: 0 !important;    /* flat edges */
    box-shadow: none !important;     /* prevents “card” feel */
  }

  /* Text: use the whole column */
  body.page-id-436 .bio-text,
  body.page-id-436 .bio-text p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body.page-id-436 .praxis-title {
    text-align: center !important;
    margin: 0 0 18px 0 !important;
  }

  /* Bottom CTA buttons: force centered, not “right-glued”
     (Overrides inline styles on the <a> tags) */
  body.page-id-436 .bio-text > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 28px !important;
  }

  body.page-id-436 .bio-text > div a {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;  /* big button, like your /home about feel */
    margin: 0 !important;         /* nukes inline margin:0 12px */
    box-sizing: border-box !important;

    white-space: normal !important;
    text-align: center !important;
  }
}

/* =========================================
   PAGE 436 – MOBILE: kill the remaining squeeze
   (likely caused by a flex/center rule upstream)
   ========================================= */
@media (max-width: 768px) {

  /* Force normal block flow (no centered flex shrinking) */
  body.page-id-436 .praxis-container {
    display: block !important;
  }

  /* Make every direct child span the full column */
  body.page-id-436 .praxis-container > * {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure the text column doesn’t self-narrow */
  body.page-id-436 .bio-text,
  body.page-id-436 .bio-text > * {
    width: 100% !important;
    max-width: none !important;
  }

  /* Ensure the portrait wrapper doesn’t self-narrow */
  body.page-id-436 .bio-portrait {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   FINAL MOBILE UNSQUEEZE — /long-story (page-id-436)
   One full-width column like /home #about
   ========================================================= */
@media (max-width: 768px) {

  /* 0) Keep the teal background */
  body.page-id-436 { 
    background: #008C8B !important;
    overflow-x: hidden !important;
  }

  /* 1) Remove ALL theme/container squeezing + stacked paddings */
  body.page-id-436 #main,
  body.page-id-436 .site-main,
  body.page-id-436 .entry-content,
  body.page-id-436 .ct-container,
  body.page-id-436 .ct-content,
  body.page-id-436 .ct-section-inner,
  body.page-id-436 .ep-bio,
  body.page-id-436 .praxis-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2) Make the actual content column full-width with ONE padding */
  body.page-id-436 .praxis-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding: 0 18px 40px 18px !important;  /* <-- the only side padding */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;
  }

  /* 3) Stack portrait + text and remove any hidden max-width caps */
  body.page-id-436 .bio-grid {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.page-id-436 .bio-portrait,
  body.page-id-436 .bio-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 4) Portrait: big, not capped by your inline <style> */
  body.page-id-436 .bio-portrait {
    position: static !important;
    top: auto !important;
    margin: 0 0 22px 0 !important;
  }

  body.page-id-436 .bio-portrait img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;       /* beats max-width:360px in page <style> */
    height: auto !important;
    margin: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 5) Text: use the full column width (no “center squeeze”) */
  body.page-id-436 .bio-text p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* 6) Keep your bottom buttons centered (don’t touch working sizing) */
  body.page-id-436 .bio-text > div {
    text-align: center !important;
  }
  body.page-id-436 .bio-text > div a {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================
   FINAL MOBILE UNSQUEEZE — /contact (page-id-162)
   Full-width column + wrap-safe nav buttons + full-width CF7
   ========================================================= */
@media (max-width: 768px) {

  /* 0) Background + hard kill horizontal scroll */
  body.page-id-162 {
    background: #008C8B !important;
    overflow-x: hidden !important;
  }

  /* Keep header/footer clean */
  body.page-id-162 .site-header,
  body.page-id-162 .site-footer {
    background: #FAF9F7 !important;
    box-shadow: none !important;
  }

  /* 1) Remove ALL theme/container squeezing + stacked paddings */
  body.page-id-162 #main,
  body.page-id-162 .site-main,
  body.page-id-162 .entry-content,
  body.page-id-162 .ct-container,
  body.page-id-162 .ct-content,
  body.page-id-162 .ct-section-inner,
  body.page-id-162 .ep-contact,
  body.page-id-162 .praxis-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  /* 2) Single content column = ONE padding source (like page 436 fix) */
  body.page-id-162 .praxis-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding: 0 18px 40px 18px !important; /* the only side padding */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;
  }

  /* 3) Headings centered, body copy left */
  body.page-id-162 .praxis-title,
  body.page-id-162 .plan-category {
    text-align: center !important;
  }

  body.page-id-162 p,
  body.page-id-162 li,
  body.page-id-162 label {
    text-align: left !important;
  }

  /* 4) TOP NAV “BUTTONS” — full-width bars + WRAP SAFE */
  body.page-id-162 .praxis-nav-buttons.contact-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 18px 0 22px 0 !important;
  }

  body.page-id-162 .praxis-nav-buttons.contact-options a.wp-block-button__link {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    text-align: center !important;
    padding: 14px 16px !important;
    line-height: 1.25 !important;

    white-space: normal !important;      /* critical: stop spill-out */
    overflow-wrap: anywhere !important;  /* iOS-safe wrapping */
    word-break: break-word !important;

    box-sizing: border-box !important;
  }

  /* 5) CF7: true full-width forms + controls */
  body.page-id-162 .form-wrapper,
  body.page-id-162 .wpcf7,
  body.page-id-162 .wpcf7 form,
  body.page-id-162 form.wpcf7-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* CF7 inner wraps often constrain width on mobile */
  body.page-id-162 .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.page-id-162 .wpcf7-form p {
    margin: 0 0 14px 0 !important;
  }

  body.page-id-162 .wpcf7-form input,
  body.page-id-162 .wpcf7-form textarea,
  body.page-id-162 .wpcf7-form select,
  body.page-id-162 .wpcf7-form button {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  body.page-id-162 .wpcf7-form input[type="submit"] {
    white-space: normal !important; /* safety for long labels */
    text-align: center !important;
  }

  /* 6) Last-resort overflow guard (prevents right drift) */
  body.page-id-162 .praxis-container * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   /CONTACT (162) — MOBILE REFINEMENTS
   Wider column + uniform button heights
   ========================================================= */
@media (max-width: 768px) {

  /* A) Slightly wider overall content */
  body.page-id-162 .praxis-container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* B) Make all 4 top nav buttons same height + full width */
  body.page-id-162 .praxis-nav-buttons.contact-options{
    align-items: stretch !important;   /* ensure children can be 100% wide */
  }

  body.page-id-162 .praxis-nav-buttons.contact-options a.wp-block-button__link{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    display: flex !important;          /* vertical centering */
    align-items: center !important;
    justify-content: center !important;

    min-height: 64px !important;       /* uniform bar height */
    padding: 14px 12px !important;
    line-height: 1.15 !important;

    white-space: normal !important;     /* wrapping stays safe */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   /PRAXIS (page-id-88) — MOBILE: nav buttons uniform + no spillover
   ========================================================= */
@media (max-width: 768px) {

  /* 1) Make sure the intro bubble can actually “contain” the buttons */
  body.page-id-88 #mail-intro.praxis-container{
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 28px !important; /* gives the 2nd button room */
    box-sizing: border-box !important;
  }

  /* 2) Button wrapper: vertical stack, no weird offsets */
  body.page-id-88 #mail-intro .praxis-nav-buttons{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 18px 0 0 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  /* 3) Buttons: same height, wrapping allowed, centered text */
  body.page-id-88 #mail-intro .praxis-nav-buttons a.wp-block-button__link{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 260px !important;   /* forces BOTH to wrap similarly on iPhone 7 */
    min-height: 64px !important;   /* equal heights even if one wraps differently */

    margin: 0 auto !important;     /* centered */
    padding: 14px 12px !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.15 !important;
    text-align: center !important;

    box-sizing: border-box !important;
  }
}

/* =========================================================
   /PRAXIS (page-id-88) — MOBILE (incl. big phones):
   keep card padding + keep button/list inside the card
   ========================================================= */
@media (max-width: 992px) {

  /* Give the grid some breathing room so cards never touch the viewport edge */
  body.page-id-88 .plan-grid{
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Force consistent inner padding inside every card (this is the key) */
  body.page-id-88 .plan-card{
    box-sizing: border-box !important;
    padding: 22px 20px !important;
    margin: 0 auto 22px auto !important;
    width: 100% !important;
    max-width: 720px !important; /* prevents “end-to-end” feel on big phones */
  }

  /* Lists: keep indentation + prevent edge hugging */
  body.page-id-88 .plan-card ul{
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 16px 0 0 0 !important;
    padding-left: 1.2em !important; /* bullet indent */
    padding-right: 0.2em !important; /* tiny right buffer */
  }

  /* The INQUIRE button: never 100vw, never negative margins, always contained */
  body.page-id-88 .plan-card a.book-btn{
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* ==========================================
   /PRAXIS (88) – MOBILE: keep plan-card CTA buttons padded
   (fix "full-bleed" stretched buttons on larger phones)
   ========================================== */
@media (max-width: 768px) {

  /* Target only the plan-card CTA buttons */
  body.page-id-88 .plan-card a.book-btn,
  body.page-id-88 .plan-card a.book-btn:visited {
    /* stop any "bleed" tricks */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;

    /* make it behave like a centered block, not full-bleed */
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;          /* key: prevents huge buttons on iPhone 14/15 etc. */
    margin: 18px auto 0 auto !important;  /* centered with breathing room */

    /* keep inner text nicely padded */
    padding: 14px 18px !important;
    box-sizing: border-box !important;

    /* safety */
    white-space: normal !important;
    text-align: center !important;
  }
}

/* ==========================================
   /PRAXIS (page 88) – MOBILE: stop book-btn full-bleed
   Force “padded within card” buttons on ALL phones
   ========================================== */
@media (max-width: 768px) {

  /* Target the real structure from your HTML: .plan-card > a.book-btn */
  body.page-id-88 #praxisplans .plan-card > a.book-btn,
  .ep-praxis #praxisplans .plan-card > a.book-btn {
    /* kill any full-bleed technique */
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 16px !important;
    margin-right: 16px !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: block !important;
    box-sizing: border-box !important;

    /* keep the label nice */
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

}

/* =========================================================
   HARD FIX: Teal containers MUST have padding
   Pages: /praxis (88), /contact (162), /long-story (436)
   Put this at the VERY END of the CSS file.
   ========================================================= */

:root{
  --ml-teal-bubble-bg: rgba(0, 80, 80, 0.60);
  --ml-teal-bubble-pad: 60px 40px 80px;
  --ml-teal-bubble-pad-mobile: 24px 18px 40px;
}

/* Desktop / general */
body.page-id-88 :is(.praxis-container, #mail-section, #live-section),
body.page-id-162 .praxis-container,
body.page-id-436 .praxis-container{
  background: var(--ml-teal-bubble-bg) !important;
  padding: var(--ml-teal-bubble-pad) !important;
  box-sizing: border-box !important;

  /* prevent “looks like no padding” caused by children stretching */
  display: block !important;
}

/* Mobile: keep padding, don’t flatten to zero */
@media (max-width: 768px){
  body.page-id-88 :is(.praxis-container, #mail-section, #live-section),
  body.page-id-162 .praxis-container,
  body.page-id-436 .praxis-container{
    padding: var(--ml-teal-bubble-pad-mobile) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* CONTACT usability: keep form controls readable (white fields) */
body.page-id-162 .praxis-container input,
body.page-id-162 .praxis-container textarea,
body.page-id-162 .praxis-container select{
  background: #fff !important;
  color: #111 !important;
}

/* =========================================================
   /PRAXIS (page-id-88) — LIVE SECTION: stop the “last card stretches”
   and force the same inner padding on ALL live cards,
   even if some cards don’t have .plan-card class.
   ========================================================= */

/* 1) Force the live cards wrapper to behave like a centered flex row */
@media (min-width: 769px){
  body.page-id-88 #live-section .plan-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 28px !important;
  }

  /* 2) Treat EVERY direct child as a card and prevent flex-grow stretching */
  body.page-id-88 #live-section .plan-grid > *{
    flex: 0 0 320px !important;   /* <-- key: no grow, fixed basis */
    max-width: 320px !important;  /* keep identical width */
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 3) MOBILE/TABLET: enforce padding inside ALL live cards (including the two rebels) */
@media (max-width: 992px){
  body.page-id-88 #live-section .plan-grid{
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  body.page-id-88 #live-section .plan-grid > *{
    padding: 22px 20px !important;   /* <-- key: consistent inner padding */
    margin: 0 auto 22px auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 720px !important;
  }

  /* Keep lists from hugging edges */
  body.page-id-88 #live-section .plan-grid > * ul{
    padding-left: 1.2em !important;
    margin-top: 16px !important;
    box-sizing: border-box !important;
  }

  /* Button stays “inside card”, not full-bleed */
  body.page-id-88 #live-section .plan-grid > * a.book-btn,
  body.page-id-88 #live-section .plan-grid > * a.wp-block-button__link{
    display: block !important;
    width: auto !important;
    margin: 18px 16px 0 16px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   /PRAXIS (page-id-88) — HARD NORMALIZATION
   Goal:
   1) All plan cards (mail + live) have identical width on desktop
   2) Last single live card NEVER becomes wider than others
   3) Mobile: first mail card (COMPACT) regains top padding
   Put this at the VERY END of your CSS file.
   ========================================================= */

body.page-id-88{
  --px4-card-gap: 28px;
}

/* ---------- DESKTOP / LAPTOP: same width math for BOTH sections ---------- */
@media (min-width: 993px){

  /* Same container behavior for both sections */
  body.page-id-88 #praxisplans :is(#mail-section, #live-section) .plan-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--px4-card-gap) !important;

    /* This is the key: both grids get the SAME max width */
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Force identical card widths everywhere:
     3 cards per row = (100% - 2 gaps) / 3
     Crucially: flex-grow = 0 so a lonely last card cannot stretch. */
  body.page-id-88 #praxisplans :is(#mail-section, #live-section) .plan-grid .plan-card{
    flex: 0 1 calc((100% - (2 * var(--px4-card-gap))) / 3) !important;
    max-width: calc((100% - (2 * var(--px4-card-gap))) / 3) !important;

    width: auto !important;
    box-sizing: border-box !important;
  }
}

/* ---------- TABLET + MOBILE: single column, consistent padding ---------- */
@media (max-width: 992px){

  body.page-id-88 #praxisplans :is(#mail-section, #live-section) .plan-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;

    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;

    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-id-88 #praxisplans :is(#mail-section, #live-section) .plan-grid .plan-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    /* Unified inner padding on mobile */
    padding: 22px 20px !important;
    box-sizing: border-box !important;
  }

  /* Fix: first mail card (COMPACT) losing top padding due to some first-child rule */
  body.page-id-88 #praxisplans #mail-section .plan-grid > .plan-card:first-child{
    padding-top: 22px !important;
  }
}

/* =========================================================
   PRAXIS (page-id-88) — FINAL PATCH
   1) Mobile: force top padding on the FIRST mail-plan card (COMPACT)
      even if it doesn't match .plan-card (different wrapper/class).
   2) Desktop: make mail + live grids use the same max width
      so card widths match visually.
   ========================================================= */

/* 1) MOBILE: COMPACT card missing top padding */
@media (max-width: 768px){

  /* Force padding on the first "card-like" element in the mail grid,
     regardless of whether it has .plan-card or not */
  body.page-id-88 #praxisplans #mail-section .plan-grid > *:first-child{
    padding: 22px 20px !important;
    box-sizing: border-box !important;
  }

  /* Safety: prevent any odd "pull-up" spacing on the first inner heading */
  body.page-id-88 #praxisplans #mail-section .plan-grid > *:first-child > *:first-child{
    margin-top: 0 !important;
  }
}

/* 2) DESKTOP: unify widths between mail + live sections */
@media (min-width: 993px){

  body.page-id-88 #praxisplans #mail-section .plan-grid,
  body.page-id-88 #praxisplans #live-section .plan-grid{
    width: 100% !important;
    max-width: 1240px !important;  /* adjust +/- 40px if you want it tighter/looser */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   /PRAXIS (page-id-88) — MOBILE FIX PACK (safe / desktop-locked)
   Fixes:
   - COMPACT card missing top padding (first mail card)
   - Live cards squeezed (remove compounded side padding)
   - Live subtitle (“Live 2+ Participants”) alignment leak
   ========================================================= */
@media (max-width: 992px){

  /* A) Stop double-padding inside the teal bubble:
        the .praxis-container already provides mobile padding. */
  body.page-id-88 #praxisplans #mail-cards .plan-grid,
  body.page-id-88 #praxisplans #live-section .plan-grid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* B) Canonical mobile card box model (mail + live) */
  body.page-id-88 #praxisplans #mail-cards .plan-card,
  body.page-id-88 #praxisplans #live-section .plan-card{
    width: 100% !important;
    max-width: none !important;          /* remove any hidden caps */
    margin: 0 0 22px 0 !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;

    /* neutralize any weird offsets that might hit only the first card */
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  /* C) The real first-card fix (your HTML uses #mail-cards, NOT #mail-section) */
  body.page-id-88 #praxisplans #mail-cards .plan-grid > .plan-card:first-child{
    padding-top: 22px !important;
  }

  /* D) Prevent heading margins from faking “no padding” */
  body.page-id-88 #praxisplans .plan-card > h4:first-child{
    margin-top: 0 !important;
  }

  /* E) Lists: keep indent but don’t narrow the content column */
  body.page-id-88 #praxisplans .plan-card ul{
    width: auto !important;
    max-width: 100% !important;
    margin: 16px 0 0 0 !important;
    padding-left: 1.2em !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* F) Live subtitle line: force centered even if some global rule uses !important */
  body.page-id-88 #praxisplans #live-section .plan-card .price + p{
    text-align: center !important;
    margin-top: 8px !important;
  }

  /* G) CTA buttons: contained + consistent */
  body.page-id-88 #praxisplans .plan-card > a.book-btn{
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 18px auto 0 auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* CONTACT (page-id-162) — Desktop: keep ALL contact option buttons in ONE row */
@media (min-width: 769px){

  /* the button row */
  body.page-id-162 .praxis-nav-buttons{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* <-- 5 buttons */
    gap: 12px !important;
    width: 100% !important;
    max-width: 1200px !important;  /* raise/lower as you like */
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  /* each button block (WP sometimes wraps links inside .wp-block-button) */
  body.page-id-162 .praxis-nav-buttons .wp-block-button,
  body.page-id-162 .praxis-nav-buttons > a{
    width: 100% !important;
    margin: 0 !important;
  }

  /* the actual clickable link */
  body.page-id-162 .praxis-nav-buttons a.wp-block-button__link{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 12px 10px !important;
    font-size: 13px !important;     /* slight shrink to fit */
    line-height: 1.15 !important;

    text-align: center !important;
    white-space: normal !important; /* allows 2 lines INSIDE button if needed */
    min-height: 46px !important;    /* keeps all buttons equal height */
  }
}

/* ==========================================
   /CONTACT (page-id-162) — error messages: red + bold
   (Contact Form 7 + common patterns)
   ========================================== */

/* Inline field error hint (usually under the field) */
body.page-id-162 .praxis-container .wpcf7-not-valid-tip{
  color: #ff3b3b !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}

/* Error summary box (top/bottom message) */
body.page-id-162 .praxis-container .wpcf7-response-output{
  border-color: #ff3b3b !important;
  color: #ff3b3b !important;
  font-weight: 800 !important;
}

/* If your theme uses generic error classes too */
body.page-id-162 .praxis-container .error,
body.page-id-162 .praxis-container .errors,
body.page-id-162 .praxis-container .form-error,
body.page-id-162 .praxis-container .validation-error{
  color: #ff3b3b !important;
  font-weight: 800 !important;
}

body.page-id-162 .praxis-container .wpcf7-not-valid{
  border: 2px solid #ff3b3b !important;
  outline: none !important;
}

/* =========================================================
   PRIVACY POLICY (page/post id 3) — make it look like other legal pages
   Fixes: huge headings, chaotic spacing, oversized Gutenberg font classes
   ========================================================= */

body.page-id-3,
body.postid-3{
  /* optional: ensure consistent base rhythm */
  --legal-maxw: 860px;
  --legal-pad-x: 18px;
}

/* 1) Constrain content width + calm body text */
body.page-id-3 :is(.entry-content, .wp-block-post-content),
body.postid-3 :is(.entry-content, .wp-block-post-content){
  max-width: var(--legal-maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--legal-pad-x) !important;
  padding-right: var(--legal-pad-x) !important;

  font-size: 16px !important;
  line-height: 1.65 !important;
}

/* 2) Center + calm the page title (match Disclaimer/AGB vibe) */
body.page-id-3 :is(.entry-title, .page-title),
body.postid-3 :is(.entry-title, .page-title){
  text-align: center !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  margin: 10px 0 34px 0 !important;
}

/* 3) Kill Gutenberg “huge / large font size” classes that wreck the PP page */
body.page-id-3 .entry-content :is(.has-large-font-size,.has-x-large-font-size,.has-xx-large-font-size,.has-huge-font-size),
body.postid-3 .entry-content :is(.has-large-font-size,.has-x-large-font-size,.has-xx-large-font-size,.has-huge-font-size),
body.page-id-3 .wp-block-post-content :is(.has-large-font-size,.has-x-large-font-size,.has-xx-large-font-size,.has-huge-font-size),
body.postid-3 .wp-block-post-content :is(.has-large-font-size,.has-x-large-font-size,.has-xx-large-font-size,.has-huge-font-size){
  font-size: inherit !important;
  line-height: inherit !important;
}

/* 4) Normalize heading scale + spacing */
body.page-id-3 :is(.entry-content, .wp-block-post-content) h2,
body.postid-3 :is(.entry-content, .wp-block-post-content) h2{
  font-size: clamp(22px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  margin: 44px 0 12px 0 !important;
}

body.page-id-3 :is(.entry-content, .wp-block-post-content) h3,
body.postid-3 :is(.entry-content, .wp-block-post-content) h3{
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 22px 0 10px 0 !important;
}

body.page-id-3 :is(.entry-content, .wp-block-post-content) h4,
body.postid-3 :is(.entry-content, .wp-block-post-content) h4{
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 16px 0 8px 0 !important;
}

/* 5) Paragraph + list rhythm (stops the “clown spacing”) */
body.page-id-3 :is(.entry-content, .wp-block-post-content) p,
body.postid-3 :is(.entry-content, .wp-block-post-content) p{
  margin: 0 0 14px 0 !important;
}

body.page-id-3 :is(.entry-content, .wp-block-post-content) :is(ul,ol),
body.postid-3 :is(.entry-content, .wp-block-post-content) :is(ul,ol){
  margin: 10px 0 16px 0 !important;
  padding-left: 1.25em !important;
}

body.page-id-3 :is(.entry-content, .wp-block-post-content) li,
body.postid-3 :is(.entry-content, .wp-block-post-content) li{
  margin: 6px 0 !important;
}

/* 6) Optional: tame separators if they look weirdly prominent */
body.page-id-3 :is(.entry-content, .wp-block-post-content) hr,
body.postid-3 :is(.entry-content, .wp-block-post-content) hr{
  margin: 26px 0 !important;
  opacity: 0.25 !important;
}

#about.about-section {
    margin-bottom: 0;
}

/* ===== INTRO CAROUSEL PATCH (scoped, non-destructive) ===== */

.ep-home #intro .intro-content,
.ep-home #intro .intro-carousel,
.ep-home #intro .intro-slide,
.ep-home #intro .intro-slide-text,
.ep-home #intro .intro-slide-media,
.ep-home #intro .wp-block-button__link {
  border-radius: 0 !important;
}

.ep-home #intro .intro-carousel {
  width: 100%;
  max-width: 980px;
  margin-top: 26px;
  position: relative;
  overflow: hidden;
}

.ep-home #intro .intro-carousel,
.ep-home #intro .intro-slide {
  min-height: 420px;
}

.ep-home #intro .swiper-slide {
  height: auto;
  display: flex;
}

.ep-home #intro .intro-slide {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  overflow: hidden;
  background: rgba(0,0,0,0.10);
}

.ep-home #intro .intro-slide-text {
  padding: 26px;
  background: rgba(0,0,0,0.14);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-home #intro .intro-slide-kicker {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ep-home #intro .intro-slide-text p {
  margin: 0 0 16px;
  line-height: 1.45;
  max-width: 46ch;
}

.ep-home #intro .intro-slide-text .wp-block-button__link {
  display: inline-block;
}

.ep-home #intro .intro-slide-media {
  min-height: 420px;
}

.ep-home #intro .intro-slide-media--placeholder {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(0,0,0,0.05));
}

.ep-home #intro .intro-swiper-prev,
.ep-home #intro .intro-swiper-next {
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.90);
  top: 50%;
  transform: translateY(-50%);
}

.ep-home #intro .intro-swiper-prev { left: 10px; }
.ep-home #intro .intro-swiper-next { right: 10px; }

.ep-home #intro .intro-swiper-dots {
  position: static;
  margin-top: 14px;
}

.ep-home #intro #epIntroSwiper .intro-slide-media {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
}

.ep-home #intro #epIntroSwiper .swiper-slide[data-ml-slide="eex"] .intro-slide-media {
  background-position: left center !important;
}

.ep-home #intro #epIntroSwiper .swiper-slide[data-ml-slide="labs"] .intro-slide-media {
  background-position: center center !important;
}

/* ===== MOBILE: tap-to-reveal overlay ===== */
@media (max-width: 820px) {

  .ep-home #intro .intro-carousel,
  .ep-home #intro .intro-slide {
    min-height: auto;
  }

  .ep-home #intro .intro-carousel {
    overflow: hidden;
  }

  .ep-home #intro .intro-slide {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background: transparent;
    cursor: pointer;
  }

  .ep-home #intro .intro-slide-media {
    grid-area: 1 / 1;
    width: 100%;
    height: 56vw;
    min-height: 220px;
    max-height: 420px;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin: 0;
  }

  .ep-home #intro .intro-slide-media--placeholder {
    background-image: linear-gradient(
      135deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.03) 50%,
      rgba(0,0,0,0.08) 100%
    );
    border: 1px solid rgba(255,255,255,0.12);
    position: relative;
  }

  .ep-home #intro .intro-slide-text {
    grid-area: 1 / 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 20px;
    background: rgba(20, 40, 38, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    text-align: left;
  }

  .ep-home #intro .intro-slide.is-revealed .intro-slide-text {
    opacity: 1;
    pointer-events: auto;
  }

  .ep-home #intro .intro-slide-kicker {
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    opacity: 0.7;
  }

  .ep-home #intro .intro-slide-text p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
    max-width: none;
  }

  .ep-home #intro .intro-slide-text .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    font-size: 14px;
  }

  .ep-home #intro .intro-swiper-prev { left: 6px; }
  .ep-home #intro .intro-swiper-next { right: 6px; }

  .ep-home #intro .intro-slide::before {
    content: '↕';
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 3;
    font-size: 16px;
    color: rgba(255,255,255,0.45);
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .ep-home #intro .intro-slide.is-revealed::before {
    opacity: 0;
  }
}

/* Desktop only: both chevrons sit over the image panel */
@media (min-width: 821px) {
  .ep-home #intro .intro-swiper-prev { left: calc(46% + 8px); }
  .ep-home #intro .intro-swiper-next { right: 10px; }
}

.ep-home #intro .intro-slide-text .wp-block-button__link {
  margin-top: auto;
}

@media (max-width: 820px) {
  .ep-home #intro .intro-slide-media {
    background-size: cover !important;
    background-position: center center !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro .intro-swiper-prev,
  .ep-home #intro .intro-swiper-next {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro .intro-slide::before {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro #epIntroSwiper .intro-slide-media {
    background-size: cover !important;
    background-position: center center !important;
  }
  .ep-home #intro #epIntroSwiper .swiper-slide[data-ml-slide="eex"] .intro-slide-media {
    background-position: center center !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .ep-home #intro .intro-content {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro .intro-slide-media {
    height: 80vw;
    min-height: 300px;
    max-height: 520px;
  }
}

@media (max-width: 820px) {
  .ep-home #intro.intro-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro.intro-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 820px) {
  .ep-home #intro.intro-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 28px !important;
    margin-bottom: 20px !important;
  }
}

/