/* =====================================================================
   MILLY JONES — LUXURY MOBILE + POLISH OVERRIDES
   Loaded on every page after the page's own <style>.
   Goals: (1) kill horizontal overflow, (2) elegant full-screen mobile
   menu, (3) fix hero on mobile, (4) elevate spacing/type/buttons.
   Works across BOTH class systems: homepage (.nav/.nav-menu/.nav-toggle)
   and inner pages (.site-nav/.nav-links/.nav-toggle).
   ===================================================================== */

:root{
  --lx-gold:#c9a24b;
  --lx-gold-deep:#b1863a;
  --lx-ink:#1a1a1a;
  --lx-ivory:#f7f3ec;
  --lx-cream:#efe9df;
}

/* ---------- 0. GLOBAL OVERFLOW GUARD ---------- */
html,body{max-width:100%;overflow-x:hidden;}
*{ -webkit-tap-highlight-color:transparent; }

/* Grid/flex children must be allowed to shrink (fixes 500px blowout) */
.two-col > *, .about-grid > *, .course-grid > *, .quiz-grid > *,
.areas-grid > *, .card-grid > *, .results-grid > *, .stories-grid > *,
.pricing-grid > *, .screenshot-grid > *, .snapshot-grid > *,
.photo-grid > *, .before-after > *, .stats-grid > *{
  min-width:0;
}

/* Any media / divider can never exceed its container */
img, video, svg{ max-width:100%; height:auto; }
.gold-divider{ max-width:min(500px,100%) !important; }

/* ============================================================
   1. FULL-SCREEN LUXURY MOBILE MENU
   The hamburger toggles body.lx-menu-open (added by JS).
   We render an ivory full-screen overlay with centered serif links.
   ============================================================ */

/* Hide the raw inline-style menu behaviour on mobile — we take over */
.lx-menu-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--lx-ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:80px 32px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;
}
body.lx-menu-open .lx-menu-overlay{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
body.lx-menu-open{ overflow:hidden; }

.lx-menu-overlay a{
  font-family:'Cormorant Garamond','Cormorant',Georgia,serif;
  font-size:2rem; line-height:1.15; font-weight:500;
  color:var(--lx-ink); text-decoration:none; letter-spacing:.01em;
  padding:12px 8px; text-align:center; position:relative;
  transition:color .25s ease;
}
.lx-menu-overlay a.lx-sub{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:#6b6357; padding:7px 8px;
}
.lx-menu-overlay a.lx-group-label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--lx-gold-deep); margin-top:14px; padding-bottom:2px; pointer-events:none;
}
.lx-menu-overlay a:active{ color:var(--lx-gold-deep); }
.lx-menu-overlay .lx-cta{
  margin-top:26px;
  font-family:'Inter',system-ui,sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  background:var(--lx-ink); color:#fff !important;
  padding:16px 40px; border-radius:0;
  transition:background .3s ease;
}
.lx-menu-overlay .lx-cta:active{ background:var(--lx-gold-deep); }

.lx-menu-close{
  position:absolute; top:26px; right:24px;
  width:44px; height:44px; border:none; background:transparent;
  font-size:1.6rem; color:var(--lx-ink); cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lx-menu-overlay .lx-menu-logo{
  position:absolute; top:24px; left:24px; height:34px; width:auto; opacity:.9;
}

/* The hamburger button itself — make it a clean luxury icon */
.nav-toggle{
  background:transparent; border:none; cursor:pointer;
  width:44px; height:44px; padding:0;
  display:none; align-items:center; justify-content:center;
  color:var(--lx-ink); position:relative; z-index:60;
}
.nav-toggle span{
  display:block; width:26px; height:2px; background:var(--lx-ink);
  margin:4px 0; border-radius:2px; transition:.3s;
}
.nav-toggle span:nth-child(2){ width:20px; margin-left:auto; }
/* animate into an X when menu open */
body.lx-menu-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.lx-menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.lx-menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   2. MOBILE LAYOUT + HERO FIXES  (<= 768px)
   ============================================================ */
@media (max-width:768px){

  /* show hamburger, hide both desktop menu systems */
  .nav-toggle{ display:flex !important; }
  .nav-menu, .nav-links{ display:none !important; }

  /* --- Header: keep it clean, tall enough, spaced --- */
  .site-header, .site-nav{ padding:0 !important; }
  .nav, .nav-inner{
    padding:14px 20px !important;
    display:flex !important; align-items:center !important;
    justify-content:space-between !important;
  }
  .nav-logo img{ height:34px !important; width:auto !important; }

  /* --- HERO (homepage): full image, readable, no overlap --- */
  .hero{
    min-height:auto !important;
    display:flex !important; flex-direction:column !important;
  }
  .hero-bg{
    position:relative !important;
    width:100% !important; height:auto !important;
    opacity:1 !important; object-fit:cover !important;
    max-height:60vh;
  }
  .hero-overlay{ display:none !important; }
  .hero-content{
    position:relative !important;
    padding:40px 24px 48px !important; max-width:100% !important;
    background:var(--lx-ivory) !important; text-align:left !important;
  }
  .hero-content h1{ font-size:2.1rem !important; line-height:1.1 !important; }
  .hero-content .sub{ font-size:1rem !important; }

  /* Award badge should not float over hero text on mobile */
  .hero .award-badge, .hero-badge, .award, .stevie-badge{
    position:static !important; margin:0 auto 8px !important; max-width:150px !important;
  }

  /* --- As-seen-on / media logo bar: wrap, never overflow --- */
  .media-logos, .as-seen, .networks-bar, .media-bar{
    display:flex !important; flex-wrap:wrap !important;
    justify-content:center !important; align-items:center !important;
    gap:18px 26px !important; padding:26px 20px !important;
  }
  .media-logos img, .as-seen img{
    height:26px !important; width:auto !important; max-width:40% !important;
  }
  /* If the bar is a single wide image, contain it */
  img[src*="media-logos"], img[src*="networks-bar"]{
    width:100% !important; height:auto !important;
  }

  /* --- Collapse all multi-col grids to single column cleanly --- */
  .two-col, .about-grid, .course-grid, .quiz-grid, .areas-grid,
  .card-grid, .results-grid, .stories-grid, .pricing-grid,
  .screenshot-grid, .snapshot-grid, .photo-grid, .before-after, .svc-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .stats-grid{ grid-template-columns:repeat(2,1fr) !important; gap:24px !important; }

  /* --- Section rhythm --- */
  .section{ padding:52px 0 !important; }
  .container, .section-inner{ padding:0 22px !important; }

  /* --- Typography scale for luxury readability --- */
  h1{ font-size:2.1rem !important; line-height:1.12 !important; }
  h2{ font-size:1.7rem !important; line-height:1.18 !important; }
  h3{ font-size:1.28rem !important; }
  p{ font-size:1rem !important; line-height:1.65 !important; }

  /* --- Buttons: full-width, tappable, elegant --- */
  .btn, .btn-lg, .btn-purple, .btn-gold{
    display:inline-flex !important; align-items:center; justify-content:center;
    min-height:52px !important; padding:15px 30px !important;
    font-size:.72rem !important; letter-spacing:.16em !important;
  }
  .hero-content .btn{ width:100%; }

  /* --- Cards: consistent padding + soft shadow --- */
  .svc-card, .card, .result-card, .story-card, .pricing-card{
    border-radius:2px !important;
  }

  /* --- Tables / wide blocks scroll internally, not the page --- */
  table{ display:block; width:100%; overflow-x:auto; }
}

/* ============================================================
   3. TABLET (769–1024px) — tighten two-col + grids
   ============================================================ */
@media (min-width:769px) and (max-width:1024px){
  .container, .section-inner{ padding:0 40px !important; }
  .card-grid, .results-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .hero-content h1{ font-size:3rem !important; }
}

/* ============================================================
   4. UNIVERSAL LUXURY POLISH (all sizes)
   Subtle refinements that read as "premium" without changing brand.
   ============================================================ */
.btn, .btn-purple, .btn-gold{
  transition:transform .25s ease, box-shadow .25s ease, background .3s ease !important;
}
.btn:hover, .btn-purple:hover, .btn-gold:hover{
  transform:translateY(-1px);
}
a{ transition:color .2s ease; }

/* Smooth image rendering */
img{ image-rendering:auto; }

/* Focus states for accessibility (keyboard) */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--lx-gold); outline-offset:3px;
}

/* =====================================================================
   PART 5 — CONTENT COMPONENT FIXES (desktop + mobile)
   Fixes stats, result cards, avatars, checklists, screenshot grids,
   video centering, guaranteed section, body text, testimonials.
   These target BOTH class systems (homepage + inner + case study).
   ===================================================================== */

/* ---------- 5.1 BODY TEXT +2pt sitewide ---------- */
body{ font-size:17.5px; }
p{ font-size:1.06rem; line-height:1.75; }
/* nudge the many inline font-size:15px paragraphs up ~2pt */
p[style*="font-size:15px"],
p[style*="font-size: 15px"]{ font-size:17px !important; line-height:1.85 !important; }
li{ font-size:1.02rem; }
.feature-list li{ font-size:1.04rem !important; }
blockquote{ font-size:1.08rem; }

/* ---------- 5.2 HERO / TOP BANNER image alignment ---------- */
/* Was object-position:center top (cut off heads) → center faces nicely */
.hero-bg{ object-position:center 30% !important; }
/* Homepage + Results hero now use the About-Us Milly portrait (about-milly.jpg).
   Milly's face sits in the upper third — crop from ~22% so her head is never cut. */
.hero-bg[src*="about-milly"]{ object-position:center 22% !important; }
.hero{ min-height:560px !important; }
@media (min-width:1200px){ .hero{ min-height:600px !important; } }

/* ---------- 5.3 STATS — luxury cards with hover pop ---------- */
/* Handles BOTH markups: .stats-grid/.stat-n/.stat-l AND .stats-inner/.stat-num/.stat-label */
.stats-bar{
  background:var(--lx-ink) !important;
  padding:72px 0 !important; color:#fff;
}
.stats-inner, .stats-grid{
  display:grid !important; grid-template-columns:repeat(5,1fr) !important;
  gap:18px !important; max-width:1200px; margin:0 auto; padding:0 40px;
  align-items:stretch !important; text-align:center;
}
.stats-inner > div, .stats-grid > div{ min-width:0; }
.stats-inner > div, .stats-grid > div{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,162,75,.28);
  border-radius:3px;
  padding:34px 18px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.stats-inner > div:hover, .stats-grid > div:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:var(--lx-gold);
  background:rgba(201,162,75,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.stat-num, .stat-n{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:3.2rem !important; font-weight:600 !important;
  line-height:1 !important; margin-bottom:10px !important;
  color:var(--lx-gold) !important; letter-spacing:0 !important;
}
.stat-label, .stat-l{
  font-size:.66rem !important; font-weight:600 !important;
  letter-spacing:.24em !important; text-transform:uppercase !important;
  color:rgba(255,255,255,.72) !important;
}

/* ---------- 5.4 RESULT CARDS — side-by-side, contained media ---------- */
.result-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) !important;
  gap:36px !important; align-items:center !important;
  max-width:1000px; margin:0 auto 44px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(201,162,75,.22);
  border-radius:4px; padding:26px !important;
  transition:transform .35s ease, box-shadow .35s ease;
}
.result-card:hover{ transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.28); }
.result-card > img{
  width:100% !important; height:300px !important;
  object-fit:cover !important; border-radius:3px !important;
}
.result-card h3{ font-size:1.25rem !important; line-height:1.35 !important; }
.result-card .role{ margin:6px 0 14px !important; opacity:.85; }
.navy-bg .result-card p:not(.role){ color:#d8d8d8 !important; }
.navy-bg .result-card{ background:rgba(255,255,255,.05); }

/* ---------- 5.5 CAROUSEL AVATARS — circular, sized (More Results) ---------- */
.carousel-slide{ text-align:center; padding:0 16px !important; }
.carousel-slide .avatar,
.carousel-slide img{
  width:130px !important; height:130px !important;
  object-fit:cover !important; border-radius:50% !important;
  margin:0 auto 20px !important;
  border:3px solid var(--lx-gold);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.carousel-slide blockquote{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.25rem !important; line-height:1.5; font-style:italic;
  margin:0 auto 16px !important; max-width:460px; color:inherit;
}
.carousel-slide strong{ display:block; font-size:1rem; letter-spacing:.02em; }
.carousel-slide span{ display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#9a8c6a; margin-top:4px; }

/* ---------- 5.6 CHECKLIST — elegant gold bullets (VIP itinerary) ---------- */
ul.checklist{ list-style:none !important; padding:0 !important; margin:0 auto !important; }
ul.checklist li{
  position:relative; padding:14px 0 14px 44px !important;
  border-bottom:1px solid rgba(0,0,0,.07);
  font-size:1.06rem !important; line-height:1.6;
}
ul.checklist li:last-child{ border-bottom:none; }
ul.checklist li::before{
  content:""; position:absolute; left:8px; top:19px;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,#e8c97d,#c9a24b);
  box-shadow:0 2px 6px rgba(201,162,75,.4);
}
ul.checklist li::after{
  content:"\2713"; position:absolute; left:13px; top:15px;
  font-size:12px; color:#2d1f00; font-weight:700;
}

/* ---------- 5.7 SCREENSHOT + PHOTO GRIDS — masonry, no gaps ---------- */
/* Testimonial screenshots have varied heights. A rigid grid leaves gaps under
   shorter images. Use CSS multi-column masonry so they stack like Tetris. */
.screenshot-grid{
  display:block !important;
  column-count:3 !important; column-gap:18px !important;
}
.screenshot-grid img{
  display:block; width:100% !important; height:auto !important;
  object-fit:contain !important; background:#fff;
  border-radius:4px !important; box-shadow:0 6px 20px rgba(0,0,0,.12);
  margin:0 0 18px !important;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
/* photo-grid (portrait result photos) also masonry for clean stacking */
.photo-grid{
  display:block !important;
  column-count:3 !important; column-gap:16px !important;
}
.photo-grid img{
  display:block; height:auto !important; max-height:none !important;
  object-fit:contain !important; width:100% !important; border-radius:4px !important;
  background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12);
  margin:0 0 16px !important;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}

/* ---------- 5.8 100% GUARANTEED — balanced two-col ---------- */
/* The tiny 'featured in' logo strip on the right → give it presence + framing */
.two-col > div > img[alt="Guarantee"],
.two-col img[src*="5064587"]{
  max-width:100% !important; width:100% !important;
  padding:28px; background:#faf8f3;
  border:1px solid rgba(201,162,75,.25); border-radius:4px;
}

/* ---------- 5.9 SNAPSHOT GRID — nicer bullets/cards ---------- */
.snapshot-grid li{
  position:relative; padding:16px 20px 16px 42px !important;
  font-size:1.02rem !important;
}
.snapshot-grid li::before{
  content:"\2713"; position:absolute; left:16px; top:16px;
  color:var(--lx-gold); font-weight:700;
}

/* ---------- 5.10 CASE STUDY video centered ---------- */
section .section-inner > div[style*="padding-bottom:56.25%"],
section .section-inner > div[style*="padding-bottom: 56.25%"]{
  max-width:820px; margin:0 auto !important;
}

/* ---------- 5.11 "More Casestudies" circle avatars ---------- */
.cs-more-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:28px; max-width:1080px; margin:0 auto;
}
.cs-more-card{
  text-align:center; padding:40px 28px;
  border:1px solid rgba(201,162,75,.3); border-radius:4px;
  background:#fff; transition:transform .35s ease, box-shadow .35s ease;
}
.cs-more-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(0,0,0,.12); }
.cs-more-card .cs-avatar{
  width:110px !important; height:110px !important; border-radius:50% !important;
  object-fit:cover !important; margin:0 auto 18px !important;
  border:3px solid var(--lx-gold); box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.cs-more-card h3{ font-size:1.15rem !important; margin-bottom:8px; }

/* =====================================================================
   PART 6 — MOBILE STACKING FOR ALL NEW COMPONENTS (<=768px)
   Everything stacks cleanly; no side-by-side cramming on phones.
   ===================================================================== */
@media (max-width:768px){
  /* stats: 2x2 grid, still elegant */
  .stats-inner, .stats-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; padding:0 20px; }
  /* 5 stats: make the last one span full width so no lonely orphan */
  .stats-inner > div:nth-child(5), .stats-grid > div:nth-child(5){ grid-column:1 / -1; }
  .stat-num, .stat-n{ font-size:2.4rem !important; }
  .stats-inner > div, .stats-grid > div{ padding:24px 10px; }

  /* result cards: stack image over text */
  .result-card{ grid-template-columns:1fr !important; gap:18px !important; padding:18px !important; }
  .result-card > img{ height:240px !important; }

  /* guaranteed + all two-cols already collapse via Part 2; center content */
  .two-col{ text-align:left; }

  /* carousel avatars smaller */
  .carousel-slide .avatar, .carousel-slide img{ width:104px !important; height:104px !important; }
  .carousel-slide blockquote{ font-size:1.12rem !important; }

  /* screenshots: single clean column, fully visible */
  /* masonry: 2 columns on phones so screenshots stay readable and gap-free */
  .photo-grid{ column-count:2 !important; column-gap:12px !important; }
  .photo-grid img{ margin-bottom:12px !important; }
  .screenshot-grid{ column-count:2 !important; column-gap:12px !important; }
  .screenshot-grid img{ margin-bottom:12px !important; }

  /* snapshot grid single column */
  .snapshot-grid{ grid-template-columns:1fr !important; }
  .snapshot-grid li{ border-right:none !important; }

  /* more case studies stack */
  .cs-more-grid{ grid-template-columns:1fr !important; gap:18px; }

  /* checklist a touch tighter */
  ul.checklist li{ font-size:1.02rem !important; padding-left:40px !important; }

  /* case study hero headline breathing room */
  h1[style*="clamp(32px"]{ font-size:2rem !important; line-height:1.15 !important; }
}

/* ---------- 5.9 FREE-COURSE / 7-DAY TRIAL block ---------- */
/* Re-colour the muddy dark indigo block to an on-brand warm ink so the
   gold accents read as premium; shrink the 5-star badge ~50%. */
.free-course{
  background:linear-gradient(135deg,#221d16 0%,#141210 100%) !important;
}
.free-course::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 15% 0%, rgba(201,162,75,.10), transparent 60%);
  pointer-events:none;
}
.course-text .stars img{ max-height:26px !important; }
.course-text .stars{ margin:0 0 10px !important; }
/* The big 5-star graphic (course-image.png) was oversized — shrink ~50% and centre it. */
.course-img-wrap{ margin:0 !important; display:flex; align-items:center; justify-content:center; }
.course-img-wrap img{ width:62% !important; filter:drop-shadow(0 22px 44px rgba(0,0,0,.5)) !important; }