/* ================================================================
   mobile-fixes.css — GoodiesFM
   Targeted 390 px (iPhone) patch for goodies-fm-marketing-studio
   Load AFTER the Webflow stylesheet so overrides cascade correctly
   18 fixes: 3 critical, 6 severe, 7 moderate, 2 minor
   ================================================================ */

/* ── GLOBAL: Kill "Made in Webflow" badge permanently ────────────
   The Webflow CSS itself uses visibility/opacity: 1 !important on
   .w-webflow-badge — we need all four properties to fully suppress
   it in case it ever gets re-injected by JS or CSS on any page.   */
.w-webflow-badge,
.w-webflow-badge > img,
[class*="webflow-badge"],
a[href*="webflow.com"][style*="position:fixed"],
a[href*="webflow.com"][style*="position: fixed"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ── FIX 1 (🔴 CRITICAL) ─────────────────────────────────────────
   What We Do — .content.image-blocks
   max-width: 36% collapses the service card container to ~107 px.
   Switch to a vertical stack so every card fills the container.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .content.image-blocks {
    -webkit-flex-flow: column;
    flex-flow: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 24px 0 32px;
  }
}

/* ── FIX 2 (🔴 CRITICAL) ─────────────────────────────────────────
   Testimonials — .image-7
   max-width: none removes all size constraint; image bleeds past
   the viewport. Restore the global img safety rule.
   ─────────────────────────────────────────────────────────────── */
.image-7 {
  max-width: 100% !important;
  height: auto;
}

/* ── FIX 3 (🔴 CRITICAL) ─────────────────────────────────────────
   Footer — .form-input + .button.form-button
   padding-right: 144 px on a 390 px screen leaves almost no room
   to type an email address. Shrink right padding and reduce
   the submit button label size to fit.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .form-input {
    padding-right: 112px;
  }

  .button.form-button {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }
}

/* ── FIX 4 (🟠 SEVERE) ───────────────────────────────────────────
   Hero — .bold-text-2
   The <strong> inside the H1 carries its own font-size class
   (--font-size--h1 = 56 px) which overrides the parent's
   hero-h1 size (32 px). Align them.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .bold-text-2 {
    font-size: var(--_fonts---font-size--h2-s); /* 32 px at ≤767 px */
  }
}

/* ── FIX 5 (🟠 SEVERE) ───────────────────────────────────────────
   Hero — .h1.hero-h1
   width: 750 px is never reset; only max-width: 328 px is added.
   The 328 px cap still exceeds the 298 px usable container width.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .h1.hero-h1 {
    width: 100%;
    max-width: 100%;
  }
}

/* ── FIX 6 (🟠 SEVERE) ───────────────────────────────────────────
   Who Is This For — .section.large-both-padding
   padding-top/bottom: 183 px each = 366 px of whitespace.
   Reduce to a comfortable 60 px.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section.large-both-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ── FIX 7 (🟠 SEVERE) ───────────────────────────────────────────
   Who Is This For — .section-content.align-center
   margin: 0 -47 px pulls the block wider than the viewport,
   causing a horizontal scrollbar on mobile. Reset to 0.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section-content.align-center {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* ── FIX 8 (🟠 SEVERE) ───────────────────────────────────────────
   Top Services / Workshops / Team — .section.bottom-padding
   margin-left/right: 46 px stacks on top of .container's own
   padding-left/right: 46 px, leaving only 206 px of usable width.
   Remove the section-level margin so only container padding applies.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section.bottom-padding {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── FIX 9 (🟠 SEVERE) ───────────────────────────────────────────
   Testimonials — .div-block-2
   max-width: 60% = ~179 px on this screen; too narrow for
   the stacked testimonial screenshot images inside.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .div-block-2 {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── FIX 10 (🟡 MODERATE) ───────────────────────────────────────
   Navigation — .nav-content + .nav-main
   .nav-main has width: auto — without an explicit 100% width,
   justify-content: space-between can't spread logo and hamburger
   to screen edges.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .nav-content {
    width: 100%;
  }

  .nav-main {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── FIX 11 (🟡 MODERATE) ───────────────────────────────────────
   Hero — floating stat pills (hero-second-pill, hero-third-pill)
   These are absolutely positioned and overlap the headline text
   on a narrow viewport. Hide them (first-pill already hidden by
   Webflow's own 479 px rule).
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .pill-wrapper.hero-second-pill,
  .pill-wrapper.hero-third-pill {
    display: none;
  }
}

/* ── FIX 12 (🟡 MODERATE) ───────────────────────────────────────
   Hero — image row overflow
   Two 168 px images with overlapping negative margins total
   ~303 px — slightly wider than the 298 px container.
   Remove margins and reduce image width to 140 px.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .image-block-wrapper.hero-first-image,
  .image-block-wrapper.hero-second-image {
    margin-left: 0;
    margin-right: 0;
  }

  .image-block-wrapper.hero-second-image {
    padding-bottom: 0;
  }

  .image.image-block-image {
    width: 140px;
  }
}

/* ── FIX 13 (🟡 MODERATE) ───────────────────────────────────────
   Who Is This For — floating social-platform icons
   .social-icon-wrapper.* elements use margin: -160 px on both
   sides with no overflow-x: hidden on a parent, causing a
   page-wide horizontal scrollbar.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .social-icon-wrapper {
    display: none;
  }
}

/* ── FIX 14 (🟡 MODERATE) ───────────────────────────────────────
   Who We Are — .section-2
   padding: 0 64 px is never overridden at 479 px, leaving only
   262 px of content width. Reduce to 20 px.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section-2 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── FIX 15 (🟡 MODERATE) ───────────────────────────────────────
   Video / Preview — floating engagement-stat pills
   Absolutely positioned relative to the section heading; at 390 px
   they land directly on top of the text. Hide them all.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .pill-wrapper.preview-first,
  .pill-wrapper.preview-second,
  .pill-wrapper.preview-third,
  .pill-wrapper.preview-fourth {
    display: none;
  }
}

/* ── FIX 16 (🟡 MODERATE) ───────────────────────────────────────
   Testimonials — .image-6 (founder photo)
   min-width: 100% can force the image wider than its flex parent,
   causing reflow. Reset and let width: 100% do the scaling.
   ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .image-6 {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto;
  }
}

/* ── FIX 17 (🟢 MINOR) ───────────────────────────────────────────
   Video — .youtube embed wrapper
   width: auto is less reliable than width: 100% for the
   16:9 aspect-ratio padding-bottom trick.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .youtube {
    width: 100%;
    min-width: 0;
  }
}

/* ── FIX 18 (🟢 MINOR) ───────────────────────────────────────────
   Workshops — long CTA button labels
   "Learn more about Meta for Ganja Workshop." wraps across 3 lines
   in the narrow card. Tighten padding and reduce font-size slightly.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .pricing-block-details .button,
  .curriculum-block-details .button {
    font-size: 14px;
    letter-spacing: -0.01em;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ROUND 2 — User-directed fixes (2026-05-28)
   Root cause also resolved: removed mismatched SRI integrity attr
   from the Webflow CSS <link> (local file hash ≠ HTML hash →
   browser silently blocked the entire stylesheet).
   ══════════════════════════════════════════════════════════════════ */

/* ── GLOBAL: box-sizing reset + overflow guard ──────────────────
   Prevents border/padding from pushing elements wider than their
   container, and stops any stray horizontal scroll.
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ── GLOBAL 479px: minimum section side padding ─────────────────
   Safety net for bare <section> elements with no class-based
   padding rule. Lower specificity (0,0,1) than class rules so it
   never overrides intentional class padding.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── FIX A: Hero logo (.image-10) ───────────────────────────────
   Webflow 479px: width:40% renders ~150×100px. Cap to 80px tall.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .image-10 {
    max-height: 80px !important;
    width: auto !important;
    height: auto;
    display: block;
    margin: 0 auto 16px;
  }
}

/* ── FIX B: Hero section layout ─────────────────────────────────
   padding-top:144px = ~72px of dead space below the fixed nav.
   Compress to 24px. Add 16px side padding (inner .container still
   has 46px so content stays well-padded at 283px usable width).
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px !important;
  }
}

/* ── FIX C: Hero stat pill — in-flow above headline ─────────────
   .pill-wrapper.hero-first-pill ("86,000 views"): Webflow hides it
   at 479px with display:none + margin-bottom:382px. Override both
   to show it statically positioned before the h1 in flow.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .pill-wrapper.hero-first-pill {
    position: static !important;
    display: inline-block !important;
    margin: 0 0 8px !important;
    padding: 0;
    transform: none;
  }
}

/* ── FIX D: Hero images — full-width vertical stack ─────────────
   Overrides Round 1 Fix 12 (width:140px, row layout).
   Stack images vertically; each fills container width, capped at
   300px height with object-fit:cover and rounded corners.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .image-blocks-wrapper {
    flex-direction: column !important;
    width: 100%;
    gap: 12px;
  }
  .image-block-wrapper {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .image-block {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .image.image-block-image {
    width: 100% !important;
    max-height: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
  }
}

/* ── FIX E: Navigation hamburger — guaranteed visible ───────────
   Webflow's 767px block already sets display:flex; this reinforces
   it. IMPORTANT: nav-menu open/close is managed by Webflow IX2 via
   inline transform(translateY(-100%)) + opacity:0 — do NOT set
   display:none on .nav-menu or the hamburger toggle will break.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .menu-button {
    display: flex !important;
  }
}

/* ── FIX F: Service card parent padding ─────────────────────────
   .content.image-blocks (What We Do cards): left/right padding was
   0. Add 16px each side so cards don't bleed to section edge.
   Overrides Round 1 Fix 1's left/right padding (was 0).
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .content.image-blocks {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
}

/* ── FIX G: Service/section background images — height cap ──────
   .image.bg-image fills container width (~327px) with no height
   constraint → service cards grow very tall. Cap at 250px.
   Webflow already sets object-fit:cover; this reinforces it.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .image.bg-image {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ROUND 3 — User-directed fixes (2026-05-28 session 3)
   ══════════════════════════════════════════════════════════════════ */



/* ── FIX R3-2: Hero section — correct padding + reset height ────
   Uses section#hero (specificity 1,1,0) to beat Round 2 Fix B's
   .hero (0,1,0), even though both carry !important.
   88px top = clears the 72px fixed nav with 16px breathing room.
   40px bottom gives natural close to the next section.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  section#hero {
    min-height: auto !important;
    height: auto !important;
    padding: 88px 16px 40px !important;
  }
}

/* ── FIX R3-3: Hero container — flex-centered column + strip padding
   The .w-layout-blockcontainer inside #hero is display:block with
   no centering, and Webflow gives it 46px L/R padding. Stacked on
   top of the section's 16px padding that leaves only 251px of
   usable content width. Zeroing the container's side padding widens
   the content area to 343px (375 – 2×16px section padding).
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  section#hero .w-layout-blockcontainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── FIX R3-4: .section.bottom-padding — explicit side padding ──
   The element-selector safety net (Round 2) can't override the
   class-level rule. This explicit class rule does.
   Note: inner .container adds another 46px each side (total 62px),
   giving 251px usable content width on a 375px screen.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section.bottom-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ROUND 4 — Spacing, alignment & line-height polish (2026-05-29)
   All fixes verified against computed DOM values at 375px.
   ══════════════════════════════════════════════════════════════════ */

/* ── FIX R4-1: Consistent vertical section padding ──────────────
   Webflow 479px gives .section.bottom-padding only pt:22px / pb:6px
   and .section.top-padding / .section get 0px vertical padding.
   Normalise every section variant to 48px top + bottom.
   section.section-2 ("Who we are" intro) gets 40px — it's a
   smaller transitional block between Workshops and Instructor.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section.top-padding,
  .section.bottom-padding {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .section.large-both-padding {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  /* bare .section (Banner blocks, etc.) */
  section.section:not(#hero):not(.section-heading-wrapper) {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  section.section-2 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ── FIX R4-2: Global heading + body line-heights ───────────────
   Webflow desktop headings: line-height ~1.04 (too tight when
   wrapped). Body: ~1.24 (too loose for dense mobile layouts).
   Headings → 1.2  |  Body text → 1.5 max
   Also zero out the aggressive negative letter-spacing on headings.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  h1, h2, h3, h4,
  .h1, .h2, .h2-small,
  .section-heading,
  .bold-text, .bold-text-2,
  .medium-xl {
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
  p,
  .medium-m, .medium-l, .medium-s,
  .section-description,
  .block-description,
  .text-benefit-description,
  .large-block-description,
  .medium-m.text-white-opacity {
    line-height: 1.5 !important;
  }
}

/* ── FIX R4-3: Global section heading + CTA alignment ───────────
   Every .section-heading-wrapper is flex-column; align-items was
   flex-start — text and buttons were left-aligned.
   Every CTA inside a section header wrapper → block + centered.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .section-heading-wrapper {
    align-items: center !important;
    text-align: center !important;
  }
  .section-heading,
  .section-description {
    text-align: center !important;
    width: 100%;
  }
  /* CTA buttons in section header areas */
  .section-heading-wrapper a.button,
  .section-heading-wrapper .w-inline-block.button {
    display: block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin: 4px auto 0 !important;
  }
  /* Remove stray fixed pixel left/right margins */
  .section-content,
  .block-text-wrapper,
  .section-heading-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── FIX R4-4: "What we do" — button style + spacing ───────────
   The "Let's discuss" CTA uses rgba(26,26,26,0.1) which renders
   as a barely-visible ghost button. Make it solid dark.
   Tighten the gap between the button and the service cards below.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  #what-we-do .section-heading-wrapper {
    gap: 8px !important;
    padding-top: 40px !important;
    padding-bottom: 8px !important;
  }
  #what-we-do .section-heading-wrapper a.button,
  #what-we-do .section-heading-wrapper .button.w-inline-block {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 50px !important;
    display: block !important;
    font-size: 16px !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin: 8px auto 0 !important;
  }
  /* Reduce gap between button and image card row */
  #what-we-do .container.without-padding {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }
}

/* ── FIX R4-5: "Who is this for" (Approach) ────────────────────
   .text-benefit-blocks gap: 32px → 16px.
   Section-content gap: 32px → 20px.
   Heading font-size 44px wraps to 4 lines at 390px → reduce to 32px.
   Center all text. Cap any decorative arrow images to 40px height.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  #Approach .section-content.align-center {
    gap: 20px !important;
    text-align: center !important;
  }
  #Approach .h2.section-heading {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  #Approach .text-benefit-blocks {
    gap: 16px !important;
  }
  #Approach .text-benefit-block {
    text-align: center !important;
  }
  #Approach .medium-l,
  #Approach .text-benefit-description {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Decorative SVGs / arrow images */
  #Approach svg,
  #Approach img[class*="arrow"],
  #Approach img[class*="scribble"],
  #Approach img[class*="decorator"],
  #Approach img[class*="divider"] {
    max-height: 40px !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ── FIX R4-6: Workshops — normalise typography + padding ───────
   Webflow sets letter-spacing: -1.76px on the 44px heading
   (= -4%) and -0.36px on 18px body text. Both feel unnatural
   at mobile size. Normalise to -0.01em. Line-height → 1.3.
   Reduce the gap between the section header and the first card.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  #Wprkshop .h2.section-heading,
  #Wprkshop .section-description {
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
  }
  #Wprkshop .section-heading-wrapper {
    padding-bottom: 12px !important;
    gap: 8px !important;
  }
  #Wprkshop .content.pricing-blocks {
    padding-top: 8px !important;
  }
}

/* ── FIX R4-7: "Who we are" Venn diagram + section centering ────
   .image-2 is the Venn diagram <img>. Its parent section.section-2
   has display:block and left-aligns by default.
   Width: 100%, max-width: 380px, centred with margin:auto.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .image-2 {
    display: block !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    margin: 24px auto !important;
  }
  section.section-2 {
    text-align: center !important;
  }
  section.section-2 .section-heading-wrapper {
    align-items: center !important;
    text-align: center !important;
  }
  section.section-2 .h2.section-heading,
  section.section-2 .section-description {
    text-align: center !important;
  }
}

/* ── FIX R4-8: Instructor / Team section ────────────────────────
   .instructor-content is a flex column — align items center so
   instructor cards, bio text, and social buttons are all centred.
   Also fix the bio text line-height which uses the default 22px.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  #Instructor .small-content.instructor-content {
    align-items: center !important;
    text-align: center !important;
  }
  #Instructor .intstructor-details,
  #Instructor .block-text-wrapper {
    text-align: center !important;
  }
  #Instructor .medium-m.large-block-description {
    line-height: 1.5 !important;
    font-size: 16px !important;
  }
  #Instructor .h2.h2-small {
    text-align: center !important;
    line-height: 1.2 !important;
  }
}

/* ── FIX R4-9: Strip Webflow container inner side-padding ────────
   Every .w-layout-blockcontainer.w-container adds 46px L/R padding
   INSIDE the section, stacking on top of the section's own 16–24px
   side-padding. Combined result: only 251px usable content width.
   Zeroing the container padding gives 327–343px (section padding
   is the sole horizontal margin) which is correct for 390px mobile.
   NOTE: containers inside hero are already zeroed by FIX R3-3.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .w-layout-blockcontainer.w-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── FIX R4-10: Section heading font-size + description font-size ─
   At 251–343px content width, 44px headings wrap to 4–6 lines and
   20px descriptions wrap to 7–8 lines. Scale both down for mobile.
   .h2.section-heading:  44px → 28px  (fits most headings in 1–2 lines)
   .section-description: 20px → 16px  (3–4 lines max for long copy)
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  .h2.section-heading {
    font-size: 28px !important;
  }
  .medium-l.section-description {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/* ── FIX R4-11: What We Do — remove excess heading-wrapper top-pad ─
   FIX R4-4 added padding-top:40px to the heading-wrapper to create
   internal breathing room. With the section already providing 48px
   top-padding, the combined 88px before the heading is too much.
   Reset to 0 and rely solely on the section's vertical padding.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  #what-we-do .section-heading-wrapper {
    padding-top: 0 !important;
  }
}

/* ── PHASE 3: Hamburger nav ──────────────────────────────────────────
   Webflow CSS sets .nav-menu { opacity: 0 } inside max-width:767px.
   We override with a transition and reveal via .nav-open class.
   ─────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .nav-menu {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav.nav-open .nav-menu {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(0) !important;
  }
  /* hamburger lines transition to × */
  .menu-button .line {
    transition: transform 0.25s ease;
  }
  .nav.nav-open .line.first-line {
    transform: translateY(4px) rotate(45deg);
  }
  .nav.nav-open .line.second-line {
    transform: translateY(-4px) rotate(-45deg);
  }
}

/* ── PHASE 3: FAQ accordion ──────────────────────────────────────────
   .faq-item has overflow:hidden in Webflow CSS. .faq-answer starts
   at height:0 (Webflow inline style). JS toggles height; we add the
   transition here. Rotate the + icon to × when open.
   ─────────────────────────────────────────────────────────────────── */
.faq-answer {
  overflow: hidden;
  transition: height 0.3s ease;
}
.icon.faq-icon {
  transition: transform 0.25s ease;
}
.faq-item.faq-open .icon.faq-icon {
  transform: rotate(45deg);
}

/* ── Sagun instructor card — local photo override ────────────────────
   The Webflow CSS sets a generic CDN background on all .instructor-card
   elements. .sagun-card overrides with the local sagun-1.png asset.
   background-position: center top keeps his face in frame on mobile.
   ─────────────────────────────────────────────────────────────────── */
.instructor-card.sagun-card {
  background-image: url('../images/sagun-1.png') !important;
  background-position: center top !important;
  background-size: cover !important;
}

/* ── Brands logos grid ───────────────────────────────────────────────
   Replaces the two .founder-s-brand-container flex rows (which left
   empty cells and uneven gaps) with a single 3-column CSS grid.
   ─────────────────────────────────────────────────────────────────── */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
  justify-items: center;
  width: 100%;
}
.brands-grid .brand-logo-img {
  max-width: 80px;
  max-height: 60px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Pricing hint under "What we do" heading ─────────────────────────
   Small subdued line showing starting prices.
   ─────────────────────────────────────────────────────────────────── */
.pricing-hint {
  text-align: center;
  color: #888;
  font-size: 13px !important;
  margin: 8px 0 4px !important;
  line-height: 1.4 !important;
}

/* ── Testimonial quote cards ─────────────────────────────────────────
   3-column grid on desktop, single column on mobile.
   Dark green cards with large faded opening quote mark.
   ─────────────────────────────────────────────────────────────────── */
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: 32px;
}
.testimonial-card {
  background: #0c2416;
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-quote-mark {
  font-family: 'Syne', sans-serif;
  font-size: 72px;
  line-height: 0.6;
  color: rgba(255,255,255,0.12);
  font-weight: 700;
  user-select: none;
  margin-bottom: 8px;
}
.testimonial-text {
  font-family: 'Syne', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  margin: 0 !important;
  flex: 1;
}
.testimonial-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .testimonial-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Pricing page — fix horizontal overflow ──────────────────────────
   .content.pricing-blocks and .pricing-block-2 resolve to 400px on a
   390px viewport due to Webflow's grid layout. Force full-width.
   nav resolves to 395px on this page — clamp it too.
   ─────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 479px) {
  nav.nav {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .content.pricing-blocks {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .pricing-block-2,
  .pricing-block-content-2,
  .pricing-block-details-2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   ROUND 8 — Medium + Low priority audit fixes (2026-05-31)
   ══════════════════════════════════════════════════════════════════ */

/* ── L6: Smooth scroll ───────────────────────────────────────────
   Smooth-scroll all anchor navigation (back to top, section jumps)
   ─────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── L7: Nav link active / focus feedback ────────────────────────
   Gives a quick visual tap response when a menu item is pressed.
   Uses .menu-item directly since nav links are block-level divs
   inside <a> tags in the Webflow structure.
   ─────────────────────────────────────────────────────────────── */
.menu-item:active,
.menu-item:focus-within,
a.menu-item:active,
a.menu-item:focus {
  opacity: 0.65;
  transition: opacity 0.1s ease;
}


/* ══════════════════════════════════════════════════════════════════
   BATCH 1 — Foundational SEO & UX additions (2026-06-01)
   ══════════════════════════════════════════════════════════════════ */

/* ── Floating WhatsApp Button ───────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37,211,102,0.4);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37,211,102,0.5);
}

/* ── Back to Top Button ─────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 24px;
  background: #0c2416;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-top.visible { opacity: 1; }

/* ── Hero Stats Bar ─────────────────────────────────────────────── */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 16px auto;
}
.hero-stats span {
  background: rgba(12,36,22,0.08);
  color: #0c2416;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════
   BATCH 2 — Clarity, cookie banner, ticker (2026-06-01)
   ══════════════════════════════════════════════════════════════════ */

/* ── Cookie Consent Banner ──────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0c2416;
  color: white;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  z-index: 99999;
  font-size: 14px;
  font-family: Syne, sans-serif;
}
.cookie-banner p { margin: 0; flex: 1; min-width: 200px; }
.cookie-banner a { color: #4ade80; }
.cookie-banner button {
  padding: 8px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.cookie-banner button:first-of-type { background: #25D366; color: white; }
.cookie-banner button:last-of-type  { background: transparent; color: white; border: 1px solid white; }
.cookie-banner.hidden { display: none; }

/* ── Results Ticker ─────────────────────────────────────────────── */
.results-ticker {
  background: #0c2416;
  color: white;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.ticker-track {
  display: inline-flex;
  gap: 48px;
  animation: ticker 20s linear infinite;
}
.ticker-track span {
  font-size: 13px;
  font-weight: 500;
  font-family: Syne, sans-serif;
  letter-spacing: 0.02em;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}