/*
Theme Name:   Jonathan Oladeji
Theme URI:    https://jonathanoladeji.com
Description:  Divi child theme. Research-institute editorial aesthetic. Housing markets & policy / Products & market systems.
Author:       Damilola Jonathan Oladeji
Template:     Divi
Version:      4.0.0
Text Domain:  jo-theme
*/

@import url("../Divi/style.css");
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --c-bg:          #F7F5F2;
  --c-bg-2:        #EDE9E3;
  --c-bg-3:        #E2DDD6;
  --c-ink:         #1A1A1A;
  --c-ink-2:       #4A4540;
  --c-ink-3:       #8A827A;
  --c-rule:        #D5CFC8;
  --c-dark:        #150007;
  --c-dark-2:      #200010;
  --c-dark-rule:   #3D0020;
  --c-on-dark:     #F0EAE4;
  --c-on-dark-2:   #B0A098;
  --c-footer:      #2A0010;
  --c-footer-rule: #4A0020;
  --c-on-footer:   #C8BFB8;
  --c-on-footer-2: #8A7870;
  --c-accent:      #800025;
  --c-accent-dk:   #5E001B;
  --c-gold:        #D49200;
  --c-gold-dk:     #A87400;
  --f-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --f-sans:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: 3rem;
  --s5: 5rem;
  --s6: 7rem;
  --w:       1120px;
  --w-prose:  680px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  font-family: var(--f-sans) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2,
.et_pb_text h3, .et_pb_text h4,
.et_pb_module_header {
  font-family: var(--f-serif) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: var(--c-ink);
  margin-top: 0 !important;
}
h1 { font-size: clamp(1.75rem, 4.5vw, 3rem)   !important; }
h2 { font-size: clamp(1.4rem,  3vw,   2.2rem)  !important; }
h3 { font-size: clamp(1.1rem,  2vw,   1.5rem)  !important; }
h4 { font-size: 1.05rem !important; font-weight: 700 !important; }

.jo-img-hero h1, .jo-img-hero h2, .jo-img-hero h3,
.jo-img-hero h4, .jo-img-hero h5, .jo-img-hero h6 { color: #F0EAE4 !important; }

.et_pb_section.jo-dark h1, .et_pb_section.jo-dark h2,
.et_pb_section.jo-dark h3, .et_pb_section.jo-dark h4,
.et_pb_section.jo-dark .et_pb_module_header,
.et_pb_section.jo-dark .et_pb_text h1,
.et_pb_section.jo-dark .et_pb_text h2,
.et_pb_section.jo-dark .et_pb_text h3 { color: #F0EAE4 !important; }

p, li, td {
  font-family: var(--f-sans) !important;
  font-size: 0.9875rem !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: var(--c-ink-2);
}
.jo-img-hero p, .jo-img-hero li { color: #B0A098 !important; }
.et_pb_section.jo-dark p,
.et_pb_section.jo-dark li,
.et_pb_section.jo-dark .et_pb_text p { color: #B0A098 !important; }

/* Links -- no !important so inline button styles win */
a { color: var(--c-accent); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.7; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.jo-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--s2);
}
.jo-gold-bar {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--c-gold);
  margin-bottom: 1.25rem;
}
.jo-stat-n {
  font-family: var(--f-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--c-accent);
  display: block;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.jo-stat-l {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--c-ink-2);
  line-height: 1.4;
}

/* ============================================================
   NAVIGATION -- DESKTOP
   ============================================================ */

/* Header background and border. Do NOT override position. */
#main-header,
#top-header {
  background: #150007 !important;
  border-bottom: 1px solid #3D0020 !important;
  box-shadow: none !important;
  z-index: 9999 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Desktop nav links -- maroon resting, gold hover, brighter on active */
#et-top-navigation nav > ul > li > a,
#et-top-navigation nav ul li a {
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #800025 !important;
  padding: 0 1.1rem !important;
  transition: color 0.2s !important;
  opacity: 1 !important;
}
#et-top-navigation nav > ul > li > a:hover,
#et-top-navigation nav ul li a:hover {
  color: #D49200 !important;
}
#et-top-navigation nav > ul > li.current-menu-item > a,
#et-top-navigation nav > ul > li.current-menu-ancestor > a,
#et-top-navigation nav > ul > li.current-page-ancestor > a,
#et-top-navigation nav > ul > li.current_page_item > a {
  color: #5E001B !important;
}

/* Desktop dropdown panel */
#et-top-navigation ul ul,
#et-top-navigation .nav ul ul {
  background: #200010 !important;
  border: none !important;
  border-top: 2px solid #800025 !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important;
  z-index: 99999 !important;
  padding: 0.25rem 0 !important;
}
#et-top-navigation ul ul li a,
#et-top-navigation .nav ul ul li a {
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  color: #F0EAE4 !important;
  border-bottom: 1px solid #3D0020 !important;
  padding: 0.75rem 1.25rem !important;
  transition: color 0.2s, background 0.2s !important;
}
#et-top-navigation ul ul li:last-child a {
  border-bottom: none !important;
}
#et-top-navigation ul ul li a:hover,
#et-top-navigation .nav ul ul li a:hover {
  color: #D49200 !important;
  background: rgba(128,0,37,0.12) !important;
}

/* Hamburger icon -- maroon, brand-aligned */
.mobile_menu_bar:before,
#et_mobile_nav_menu .mobile_menu_bar:before,
.et_mobile_nav_menu .mobile_menu_bar:before {
  color: #800025 !important;
  font-size: 1.75rem !important;
  text-shadow: none !important;
}

/* Logo -- give it room to breathe and prevent clipping */
#logo {
  max-height: 48px !important;
  width: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.container.et_menu_container .logo_container {
  max-height: 64px !important;
}

/* ============================================================
   NAVIGATION -- MOBILE & TABLET
   Divi renders .et_mobile_menu list on small screens.
   Critical: never override position. Only style appearance.
   ============================================================ */

.et_mobile_menu,
ul.et_mobile_menu {
  background: #F7F5F2 !important;
  border-top: 3px solid #800025 !important;
  border-bottom: 1px solid #D5CFC8 !important;
  box-shadow: 0 12px 40px rgba(21,0,7,0.18) !important;
  z-index: 99999 !important;
  padding: 0.5rem 0 !important;
}

/* Mobile nav links -- maroon resting matches brand and active state */
.et_mobile_menu li a,
ul.et_mobile_menu li a,
.et_mobile_menu a,
ul.et_mobile_menu a {
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #800025 !important;
  background: transparent !important;
  border-bottom: 1px solid #D5CFC8 !important;
  padding: 1.1rem 1.75rem !important;
  display: block !important;
  transition: color 0.2s, background 0.2s !important;
  opacity: 1 !important;
}

/* Hover and current-page states */
.et_mobile_menu li a:hover,
ul.et_mobile_menu li a:hover {
  color: #D49200 !important;
  background: rgba(128,0,37,0.05) !important;
}
.et_mobile_menu li.current-menu-item > a,
ul.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a,
ul.et_mobile_menu li.current_page_item > a,
.et_mobile_menu li.current-menu-ancestor > a,
ul.et_mobile_menu li.current-menu-ancestor > a {
  color: #5E001B !important;
  background: rgba(128,0,37,0.08) !important;
  font-weight: 600 !important;
}

/* Mobile sub-menu panel -- slight tint to nest visually */
.et_mobile_menu li ul,
ul.et_mobile_menu li ul,
.et_mobile_menu .sub-menu {
  background: #EDE9E3 !important;
  border-left: 3px solid #D49200 !important;
  margin-left: 0 !important;
}
.et_mobile_menu li ul li a,
ul.et_mobile_menu li ul li a,
.et_mobile_menu .sub-menu li a {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: #800025 !important;
  padding-left: 2.5rem !important;
  padding-top: 0.95rem !important;
  padding-bottom: 0.95rem !important;
  border-bottom: 1px solid #D5CFC8 !important;
}
.et_mobile_menu li ul li a:hover,
ul.et_mobile_menu li ul li a:hover {
  color: #D49200 !important;
}
.et_mobile_menu li ul li.current-menu-item > a,
ul.et_mobile_menu li ul li.current-menu-item > a {
  color: #5E001B !important;
}

/* Sub-menu expand arrow */
.et_mobile_menu .menu-item-has-children > a:after,
ul.et_mobile_menu .menu-item-has-children > a:after {
  color: #D49200 !important;
}

/* ============================================================
   HERO -- Z-INDEX FIX
   The hero must never create a stacking context that competes
   with the header. Solution: remove position entirely from
   the hero container and use the ::before overlay differently.
   ============================================================ */
.jo-hero {
  position: relative;
  overflow: hidden;
  background: #150007;
  background-size: cover;
  background-position: center;
  padding: var(--s6) 0 var(--s5);
  /* No z-index here -- that would create a stacking context */
}
.jo-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(130deg, rgba(21,0,7,0.88) 0%, rgba(21,0,7,0.65) 55%, rgba(21,0,7,0.40) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Hero inner sits above the overlay but below the header */
.jo-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   RESPONSIVE NAV ADJUSTMENTS
   ============================================================ */
@media (max-width: 980px) {
  /* Logo on tablet */
  #logo { max-height: 44px !important; }
  .container.et_menu_container .logo_container { max-height: 60px !important; }

  /* Mobile menu sizing on tablet */
  .et_mobile_menu li a,
  ul.et_mobile_menu li a {
    font-size: 0.82rem !important;
    padding: 1rem 1.5rem !important;
  }
  .et_mobile_menu li ul li a,
  ul.et_mobile_menu li ul li a { padding-left: 2.25rem !important; }
}

@media (max-width: 768px) {
  /* Logo on mobile -- generous height to prevent clipping */
  #logo { max-height: 42px !important; }
  .container.et_menu_container .logo_container { max-height: 56px !important; }

  /* Mobile menu links */
  .et_mobile_menu li a,
  ul.et_mobile_menu li a {
    font-size: 0.8rem !important;
    padding: 1rem 1.25rem !important;
    letter-spacing: 0.12em !important;
  }
  .et_mobile_menu li ul li a,
  ul.et_mobile_menu li ul li a {
    font-size: 0.74rem !important;
    padding-left: 2rem !important;
  }

  /* Hamburger -- larger and bolder on mobile for tap accuracy */
  .mobile_menu_bar:before,
  #et_mobile_nav_menu .mobile_menu_bar:before {
    font-size: 2rem !important;
    color: #F0EAE4 !important;
  }
}

@media (max-width: 480px) {
  #logo { max-height: 38px !important; }
  .et_mobile_menu li a,
  ul.et_mobile_menu li a {
    font-size: 0.78rem !important;
    padding: 0.95rem 1.25rem !important;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.et_pb_button {
  font-family: var(--f-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 0.85rem 2rem !important;
  transition: all 0.2s ease !important;
}
.et_pb_button::after { display: none !important; }
.et_pb_button, body .et_pb_button, #page-container .et_pb_button {
  background: var(--c-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--c-accent) !important;
}
.et_pb_button:hover, body .et_pb_button:hover {
  background: var(--c-accent-dk) !important;
  border-color: var(--c-accent-dk) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.et_pb_button.jo-ghost { background: transparent !important; color: var(--c-ink) !important; border: 1px solid var(--c-rule) !important; }
.et_pb_button.jo-ghost:hover { border-color: var(--c-ink) !important; color: var(--c-ink) !important; }
.et_pb_button.jo-ghost-dark { background: transparent !important; color: #F0EAE4 !important; border: 1px solid rgba(240,234,228,0.35) !important; }
.et_pb_button.jo-ghost-dark:hover { border-color: #F0EAE4 !important; color: #F0EAE4 !important; }

/* ============================================================
   DIVI SECTIONS
   ============================================================ */
.et_pb_section { padding: var(--s5) 0 !important; }
.et_pb_section.jo-sm { padding: var(--s4) 0 !important; }
.et_pb_row { max-width: var(--w) !important; }
.et_pb_section > .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; }
.et_pb_section.jo-dark   { background: var(--c-dark)   !important; }
.et_pb_section.jo-dark-2 { background: var(--c-dark-2) !important; }
.et_pb_section.jo-tinted { background: var(--c-bg-2)   !important; }
.et_pb_section.jo-deep   { background: var(--c-bg-3)   !important; }

/* ============================================================
   PAGE TEMPLATE LAYOUT CLASSES
   ============================================================ */
.jo-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240,234,228,0.65);
  margin-bottom: 1.5rem;
}
.jo-hero__eyebrow-line {
  width: 1.5rem;
  height: 1px;
  background: var(--c-gold);
  display: block;
  flex-shrink: 0;
}
.jo-hero__headline {
  font-family: var(--f-serif) !important;
  font-size: clamp(1.9rem, 5vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--c-on-dark) !important;
  max-width: 800px;
  margin-bottom: 1.5rem !important;
}
.jo-hero__deck {
  font-family: var(--f-sans);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--c-on-dark-2);
  max-width: 560px;
  margin-bottom: 2.5rem;
}
.jo-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Credential strip */
.jo-creds {
  background: var(--c-dark-2);
  border-top: 1px solid var(--c-dark-rule);
  border-bottom: 1px solid var(--c-dark-rule);
  padding: 1.1rem 0;
}
.jo-creds__row {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.jo-creds__item {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--c-on-dark-2);
  line-height: 1.45;
}
.jo-creds__item strong {
  display: block;
  font-weight: 500;
  color: var(--c-on-dark);
}

/* Section wrapper */
.jo-section {
  padding: var(--s5) 0;
}
.jo-section__inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 2rem;
}
.jo-section__head { margin-bottom: var(--s4); }

/* Two-column domain grid */
.jo-domain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
.jo-domain-card { background: var(--c-bg); }
.jo-domain-card--tinted { background: var(--c-bg-2); }
.jo-domain-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.jo-domain-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(18%) contrast(1.04);
}
.jo-domain-card__accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--c-accent);
}
.jo-domain-card__body { padding: 2rem; }
.jo-domain-card__tag {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: 0.75rem;
}

/* Image strip */
.jo-img-strip {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(15%) contrast(1.04);
}

/* Who I help cards */
.jo-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
.jo-who-card { padding: 2rem; }
.jo-who-card--a { background: var(--c-bg-2); }
.jo-who-card--b { background: var(--c-bg-3); }

/* Process split (image + steps) */
.jo-process-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.jo-process-split__img {
  overflow: hidden;
}
.jo-process-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jo-process-split__text {
  padding: var(--s5) var(--s4);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jo-process-step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-rule);
}
.jo-process-step__num {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-accent);
  padding-top: 0.2rem;
}

/* Testimonial columns */
.jo-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-dark-rule);
}
.jo-testi-grid--2col { grid-template-columns: 1fr 1fr; }
.jo-testi-grid--2col .jo-testi--last {
  padding-left: 2.5rem;
  border-left: 1px solid var(--c-dark-rule);
}
.jo-testi { padding-top: var(--s4); }
.jo-testi--mid {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  border-left: 1px solid var(--c-dark-rule);
  border-right: 1px solid var(--c-dark-rule);
}
.jo-testi--first { padding-right: 2.5rem; }
.jo-testi--last  { padding-left: 2.5rem; }
.jo-testi__quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--c-on-dark-2);
  margin-bottom: 1.25rem;
}
.jo-testi__by {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}

/* Writing cards */
.jo-writing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.jo-writing-card { border-top: 2px solid var(--c-accent); padding-top: 1.5rem; }
.jo-writing-card__cat {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: block;
  margin-bottom: 0.6rem;
}

/* Stats row */
.jo-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
  margin-bottom: var(--s4);
}
.jo-stats-cell { padding: 1.75rem 1.5rem; }
.jo-stats-cell--a { background: var(--c-bg-2); }
.jo-stats-cell--b { background: var(--c-bg-3); }

/* Values list */
.jo-values-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-rule);
}

/* Bio layout */
.jo-bio {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 4rem;
  align-items: start;
}
.jo-bio__portrait {
  position: sticky;
  top: 5rem;
}
.jo-bio__portrait-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}
.jo-bio__portrait-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
}
.jo-bio__accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--c-accent);
}
.jo-bio__cred-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--c-rule);
}
.jo-bio__cred-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--f-sans);
  font-size: 0.825rem;
  font-weight: 300;
  color: var(--c-ink-2);
  line-height: 1.5;
}

/* CTA strip */
.jo-cta-strip {
  background: var(--c-dark);
  padding: var(--s4) 0;
  border-top: 1px solid var(--c-dark-rule);
}
.jo-cta-strip__inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.jo-cta-strip__hed {
  font-family: var(--f-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: var(--c-on-dark) !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.3 !important;
}
.jo-cta-strip__sub { color: var(--c-on-dark-2); font-size: 0.875rem; margin: 0; }

/* Inline fill button */
.jo-btn {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--c-accent);
  color: #ffffff;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s;
}
.jo-btn:hover { background: var(--c-accent-dk); color: #ffffff; opacity: 1; }

/* Inline ghost button on dark */
.jo-btn-ghost-dark {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(240,234,228,0.25);
  transition: color 0.2s;
  display: inline-block;
}
.jo-btn-ghost-dark:hover { color: var(--c-on-dark); opacity: 1; }

/* Arrow link */
.jo-arrow {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
}
.jo-arrow:hover { opacity: 0.7; }

/* Service row (housing + products pages) */
.jo-service-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1fr;
  gap: 2.5rem;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: start;
}
.jo-service-row__num {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-accent);
  padding-top: 0.25rem;
}
.jo-service-row__detail {
  padding-left: 1.5rem;
  border-left: 1px solid var(--c-rule);
}

/* How I work steps */
.jo-how-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1fr;
  gap: 2.5rem;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: start;
}
.jo-how-row__num {
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-accent);
  padding-top: 0.3rem;
}
.jo-how-row__detail {
  padding-left: 1.5rem;
  border-left: 1px solid var(--c-rule);
}

/* Start here paths */
.jo-path-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1fr auto;
  gap: 2.5rem;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: start;
}

/* Why-me grid (3 cards) */
.jo-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
.jo-why-card { padding: 2.5rem 2rem; }
.jo-why-card--a { background: var(--c-bg-2); }
.jo-why-card--b { background: var(--c-bg-3); }

/* Two-col narrative split */
.jo-prose-split {
  display: grid;
  grid-template-columns: var(--w-prose) 1fr;
  gap: 4rem;
  align-items: start;
}

/* Sidebar layout (contact page) */
.jo-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 5rem;
  align-items: start;
}

/* Insights listing */
.jo-insight-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: start;
}

/* Shop cards */
.jo-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
}
.jo-shop-card { padding: 2.5rem 2rem; }
.jo-shop-card--a { background: var(--c-bg); }
.jo-shop-card--b { background: var(--c-bg-2); }

/* ============================================================
   DIVI MODULES
   ============================================================ */
.et_pb_testimonial {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--c-dark-rule) !important;
  padding: var(--s4) 0 !important;
  border-radius: 0 !important;
}
.et_pb_testimonial_description p { font-family: var(--f-serif) !important; font-style: italic !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.7 !important; color: var(--c-on-dark-2) !important; }
.et_pb_testimonial_author { font-family: var(--f-sans) !important; font-size: 0.7rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--c-on-dark-2) !important; }
.et_pb_testimonial_portrait { display: none !important; }
.et_pb_post h2 a, .et_pb_post h3 a { font-family: var(--f-serif) !important; font-weight: 400 !important; color: var(--c-ink) !important; }
.et_pb_post h2 a:hover, .et_pb_post h3 a:hover { color: var(--c-accent) !important; opacity: 1 !important; }
.et_pb_post .post-meta { font-family: var(--f-sans) !important; font-size: 0.72rem !important; color: var(--c-ink-3) !important; }
.et_pb_post .more-link { font-size: 0.7rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--c-accent) !important; }
.et_pb_blurb_description p { font-size: 0.9rem !important; color: var(--c-ink-2) !important; line-height: 1.8 !important; }
.et_pb_divider hr { border-color: var(--c-rule) !important; }
.et_pb_section.jo-dark .et_pb_divider hr { border-color: var(--c-dark-rule) !important; }

/* Contact form */
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select {
  font-family: var(--f-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-rule) !important;
  border-radius: 2px !important;
  padding: 0.8rem 1rem !important;
  color: var(--c-ink) !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus { border-color: var(--c-accent) !important; outline: none !important; }
.et_pb_contact_field label { font-family: var(--f-sans) !important; font-size: 0.68rem !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--c-ink-3) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
#main-footer {
  background: var(--c-footer) !important;
  border-top: 5px solid var(--c-accent) !important;
  padding-top: var(--s4) !important;
}
#footer-widgets { background: var(--c-footer) !important; }
.footer-widget h4, .et_pb_widget .widget-title {
  font-family: var(--f-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--c-on-footer) !important;
  border-bottom: 1px solid var(--c-footer-rule) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: var(--s2) !important;
}
.et_pb_widget p, .et_pb_widget li,
#footer-widgets p, #footer-widgets li { color: var(--c-on-footer-2) !important; font-family: var(--f-sans) !important; font-size: 0.875rem !important; font-weight: 300 !important; }
.et_pb_widget a, #footer-widgets a { font-family: var(--f-sans) !important; font-size: 0.875rem !important; font-weight: 300 !important; color: var(--c-on-footer-2) !important; line-height: 2.1 !important; }
.et_pb_widget a:hover, #footer-widgets a:hover { color: var(--c-on-footer) !important; opacity: 1 !important; }
#footer-info {
  background: transparent !important;
  border-top: 1px solid var(--c-footer-rule) !important;
  font-family: var(--f-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 300 !important;
  color: var(--c-on-footer-2) !important;
  padding: var(--s3) 0 !important;
}
#footer-info a { color: var(--c-on-footer-2) !important; }
#footer-info a:hover { color: var(--c-on-footer) !important; opacity: 1 !important; }

/* ============================================================
   RESPONSIVE -- TABLET (max 980px)
   ============================================================ */
@media (max-width: 980px) {
  .et_pb_section { padding: var(--s4) 0 !important; }
  .jo-section     { padding: var(--s4) 0; }
  .jo-hero        { padding: var(--s5) 0 var(--s4); }

  .jo-prose-split { grid-template-columns: 1fr; gap: 2rem; }
  .jo-sidebar     { grid-template-columns: 1fr; gap: 3rem; }

  /* On tablet, collapse the 4-column path row to 3 columns
     (number, content, arrow) and hide the detail column.
     Service and how rows go from 3 columns to 2 columns. */
  .jo-service-row { grid-template-columns: 2rem 1fr; }
  .jo-service-row__detail { display: none; }
  .jo-how-row     { grid-template-columns: 2rem 1fr; }
  .jo-how-row__detail { display: none; }
  .jo-path-row    { grid-template-columns: 2rem 1fr auto; gap: 1.5rem; }
  .jo-path-row > div:nth-child(3) { display: none; }

  .jo-cta-strip__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE -- MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --s5: 3rem; --s6: 4rem; }

  /* Hero */
  .jo-hero { padding: var(--s5) 0 var(--s4); }
  .jo-hero__inner { padding: 0 1.25rem; }
  .jo-hero__headline { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  .jo-hero__deck { font-size: 0.9375rem; }
  .jo-hero__ctas { flex-direction: column; align-items: flex-start; }

  /* Creds strip */
  .jo-creds__row { gap: 1.5rem; padding: 0 1.25rem; }
  .jo-creds__item { width: calc(50% - 0.75rem); }

  /* Sections */
  .jo-section__inner { padding: 0 1.25rem; }

  /* Grids -- all collapse to single column */
  .jo-domain-grid  { grid-template-columns: 1fr; }
  .jo-who-grid     { grid-template-columns: 1fr; }
  .jo-testi-grid,
  .jo-testi-grid--2col { grid-template-columns: 1fr; }
  .jo-writing-grid { grid-template-columns: 1fr; gap: 2rem; }
  .jo-stats-grid   { grid-template-columns: 1fr 1fr; }
  .jo-why-grid     { grid-template-columns: 1fr; }
  .jo-shop-grid    { grid-template-columns: 1fr; }

  /* Testimonials -- remove side borders on mobile */
  .jo-testi--mid {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--c-dark-rule);
  }
  .jo-testi--first { padding-right: 0; }
  .jo-testi--last  { padding-left: 0; }
  .jo-testi-grid--2col .jo-testi--last {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--c-dark-rule);
  }

  /* Process split -- stack image above text */
  .jo-process-split { grid-template-columns: 1fr; min-height: unset; }
  .jo-process-split__img { height: 240px; }
  .jo-process-split__text { padding: var(--s4) 1.25rem; }

  /* Image strip */
  .jo-img-strip { height: 200px; }

  /* Service / How / Path rows -- single column with stacked content.
     The number sits above as a small label, the title and body
     follow, then the detail and arrow stack at the bottom. */
  .jo-service-row,
  .jo-how-row,
  .jo-path-row {
    display: block !important;
    padding: var(--s3) 0 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .jo-service-row > *,
  .jo-how-row > *,
  .jo-path-row > * {
    grid-column: unset !important;
    margin-bottom: 1rem;
  }
  .jo-service-row > *:last-child,
  .jo-how-row > *:last-child,
  .jo-path-row > *:last-child { margin-bottom: 0; }

  .jo-service-row__num,
  .jo-how-row__num,
  .jo-path-row .jo-service-row__num {
    display: block;
    padding-top: 0 !important;
    margin-bottom: 0.4rem !important;
  }

  /* Detail columns -- show stacked, no left border on mobile */
  .jo-service-row__detail,
  .jo-how-row__detail {
    display: block !important;
    padding-left: 0 !important;
    border-left: none !important;
    padding-top: 0 !important;
  }

  /* Bio layout */
  .jo-bio { grid-template-columns: 1fr; gap: 2rem; }
  .jo-bio__portrait { position: static; }
  .jo-bio__portrait-img { max-width: 200px; }
  .jo-values-row  { grid-template-columns: 1fr; gap: 0.5rem; }

  /* CTA strip */
  .jo-cta-strip__inner { flex-direction: column; align-items: flex-start; }

  /* Prose split */
  .jo-prose-split { grid-template-columns: 1fr; }

  /* Sidebar */
  .jo-sidebar { grid-template-columns: 1fr; gap: 3rem; }

  /* Insights */
  .jo-insight-row { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE -- SMALL MOBILE (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  .jo-creds__item { width: 100%; }
  .jo-stats-grid  { grid-template-columns: 1fr; }
  .jo-domain-card__body { padding: 1.5rem; }
  .jo-hero__deck { max-width: 100%; }
  .jo-cta-strip__inner { padding: 0 1.25rem; }
  #et-top-navigation { padding: 0 1.25rem; }
}