/**
 * noura-mobile-fix.css
 * v1.1 — Fixes: font consistency, gem/stats section clipping,
 *        section paddings, testimonials, footer, and all mobile
 *        layout issues across the full site.
 *        v1.1: overflow-x:clip fix to restore position:sticky.
 *
 * LOAD ORDER: Enqueue AFTER webflow.css so these rules win.
 */

@media (max-width: 767px) {
  .hide-on-mobile { display: none !important; }

  /* ── HERO SECTION ──────────────────────────────────────────
   * Full viewport height. Images are absolute, text is centred.
   * Goal: compact text block at top-centre, large image ring
   * around it, CTAs pinned fixed at the bottom.
   ─────────────────────────────────────────────────────────── */
  .section_home-header {
    height: 100svh !important;
    min-height: unset !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;  /* centre text so it sits inside the orbit ring */
    align-items: center !important;
    position: relative !important;
  }

  /* Collapse the xxlarge top/bottom spacers — they were 5rem each
     on mobile and pushed the text block too far down */
  .padding-section-xxlarge {
    padding-top: 0 !important;
  }

  /* The padding-global wrapper that holds the text — no extra side padding */
  .section_home-header > .padding-global.z-index-2 {
    padding-top: 1.5rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
  }

  /* Text+button block: compact, centred, clears the image ring */
  .home-header_component {
    position: relative !important;
    z-index: 4 !important;
    padding-bottom: 0 !important;   /* no longer needed — we align top */
    align-items: center !important;
    gap: 0 !important;
  }

  /* Heading: smaller so it takes less vertical space */
  .home-header_heading._1 {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Kill the custom-1 spacer between heading and description */
  .spacer-custom-1.is-mobile-small {
    padding-top: 0.4rem !important;
  }

  /* Description text: slightly smaller, tighter */
  .home-header_text {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  /* Kill spacer-medium between text and button */
  .spacer-medium {
    padding-top: 0.6rem !important;
  }

  /* Hero Schedule button — smaller on mobile */
  .home-header_button {
    position: relative !important;
    z-index: 4 !important;
    margin-bottom: 0 !important;
  }
  .home-header_button .button {
    padding: 0 !important;
    font-size: 0.65rem !important;
    border-radius: 0.5rem !important;
  }
  .home-header_button .button_inner {
    padding: 0.28rem 0.7rem !important;
  }
  .home-header_button .button_text {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
  }

  /* ── IMAGES ────────────────────────────────────────────────
   * Wrapper covers the whole section absolutely.
   * The rotate ring sits centred, height = full section.
   ─────────────────────────────────────────────────────────── */
  .home-header_imgs-wrapper {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;        /* behind text (z-index 4) */
  }

  .home-header_imgs-wrap {
    height: 100% !important;
    min-height: unset !important;
    width: 100% !important;
  }

  /* All 8 images: uniform size */
  .home-header_img {
    width: 22vw !important;
    height: auto !important;
    border-radius: 2vw !important;
  }

  /* ── FLOATING CTAs ─────────────────────────────────────────
   * Always fixed at bottom so they never overlap hero content.
   ─────────────────────────────────────────────────────────── */
  .buy-template,
  .buy-template-copy {
    position: fixed !important;
    z-index: 9000 !important;
  }
}

/*
 * ── Critical sticky fix ──────────────────────────────────────────────────
 * webflow.css sets `overflow-x: hidden` on both html and body.
 * Per CSS spec, setting one overflow axis to non-visible forces the other
 * from `visible` to `auto`, making body a scroll container. This breaks
 * `position: sticky` on nested flex/grid children (sticky sticks relative
 * to the nearest scroll ancestor, which becomes body instead of viewport).
 * `overflow-x: clip` prevents horizontal overflow WITHOUT creating a new
 * scroll container, so sticky works correctly relative to the viewport.
 */
html,
body {
  overflow-x: clip !important;
}

/* ── Logo ── */
.navbar_logo-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  top: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.navbar_logo {
  width: 10rem !important;
  height: auto !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  display: block !important;
  transform: scale(1.2) !important;
  transform-origin: left center !important;
}

/* ── Mobile: fix logo size + navbar layout ── */
@media screen and (max-width: 991px) {
  /* Force logo to left, hamburger to right — prevents "two items in centre" look */
  .navbar_component {
    justify-content: space-between !important;
    align-items: center !important;
  }
  /* Reset scale on tablet/mobile — Webflow base is 8rem at this breakpoint */
  .navbar_logo {
    width: 6rem !important;
    transform: none !important;
  }
  /* Tighten vertical padding so navbar stays slim */
  .navbar {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
  .navbar > .padding-global {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media screen and (max-width: 479px) {
  /* Keep navbar compact on small iPhones */
  .navbar_logo {
    width: 4.5rem !important;
    transform: none !important;
  }
  .navbar {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   1. TYPOGRAPHY UNIFICATION
   — Force BDO Grotesk everywhere, kill stray font-family leaks
═══════════════════════════════════════════════════════════════ */

/* Gem animation section — inline styles used Syne/Inter, normalise */
#ns,
#ns .nlabel,
#ns .word,
#ns .sn,
#ns .sl,
#ns .stat {
  font-family: "BDO Grotesk", Arial, sans-serif !important;
}

/* Contact form block used Syne/Inter inline — normalise */
.page-contact-section,
.page-contact-section h2,
.page-contact-section p,
.pg-form-input,
.pg-send-btn {
  font-family: "BDO Grotesk", Arial, sans-serif !important;
}

/* Fix: floating CTAs inherited system-ui */
.buy-template,
.buy-template-copy {
  font-family: "BDO Grotesk", Arial, sans-serif !important;
}

/* Floating CTAs — stacked vertically, both right-aligned */
.buy-template,
.buy-template-copy {
  position: fixed !important;
  right: 1rem !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0.55rem 0 !important;
  font-size: 0.82rem !important;
  border-radius: 0.65rem !important;
  z-index: 9000 !important;
  min-width: 10rem !important;
  width: 10rem !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  box-sizing: border-box !important;
}

.buy-template {
  bottom: 1.2rem !important;
}

.buy-template-copy {
  bottom: 4.5rem !important;
}

/* Ensure body-level secondary font override doesn't leak into headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "BDO Grotesk", Arial, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   2. GEM / STATS SECTION — CLIPPING & PADDING FIXES
   — The #ns section was min-height:100vh with padding:80px 40px
     which caused overflow clipping on phones and the stats row
     (.sr) to be cut off at the bottom.
═══════════════════════════════════════════════════════════════ */

#ns {
  padding: 60px 24px 80px;
  min-height: unset !important;
  box-sizing: border-box;
  overflow: visible !important;
}

/* Stats row: prevent clipping, add breathing room */
.sr {
  gap: 28px !important;
  margin-top: 48px !important;
  flex-wrap: wrap;
  justify-content: center;
}

.stat {
  min-width: 80px;
}

.sn {
  font-size: clamp(28px, 7vw, 36px) !important;
}

/* Word text: don't overflow container on narrow screens */
#wc {
  max-width: 100% !important;
  padding: 0 8px;
}

.word {
  font-size: clamp(22px, 5vw, 66px) !important;
}


/* ═══════════════════════════════════════════════════════════════
   3. GLOBAL SECTION PADDING — REMOVE EXCESSIVE GAPS
   — Several sections had 60px+ side padding that clips on phones
═══════════════════════════════════════════════════════════════ */

.features-metrics {
  padding: 48px 20px !important;
}

/* FAQ — extra breathing room on mobile */
.faq_component {
  padding-left: 16px;
  padding-right: 16px;
}
.faq_accordion {
  padding-top: 4px;
  padding-bottom: 16px !important;
}
.faq_question-wrap {
  padding-top: 16px !important;
  padding-bottom: 4px;
  column-gap: 12px !important;
}
.faq_answer-wrap {
  padding-left: 1.5rem !important;
}

.section {
  padding: 48px 20px !important;
}

.section_values .padding-global {
  padding-left: 20px;
  padding-right: 20px;
}

/* CTA banner */
.section_cta.section-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Contact form section */
.page-contact-section {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Footer */
.footer {
  padding: 16px !important;
}

.footer_wrap {
  padding-left: 20px !important;
  padding-right: 20px !important;
  border-radius: 24px !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. TESTIMONIALS SECTION
   — .div-block-3 had fixed border-radius:40px and padding:40px
     that caused horizontal overflow on small screens.
   — .flex-block-2 (two-column layout) needs to collapse.
═══════════════════════════════════════════════════════════════ */

.div-block-3 {
  padding: 28px 20px !important;
  border-radius: 24px !important;
  max-width: 100% !important;
  overflow: hidden;
}

.flex-block-2 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Testimonial card: constrain width */
.div-block-4 {
  max-width: 100%;
  box-sizing: border-box;
}

/* Avatar circle: keep proportional */
.div-block-5 {
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   5. FEATURES / METRICS SECTION
   — .features-wrapper overflow on phone: ensure full-width blocks
═══════════════════════════════════════════════════════════════ */

.features-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.features-block {
  box-sizing: border-box;
}

.features-title {
  font-family: "BDO Grotesk", Arial, sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════
   6. LOCATIONS / MAP SECTION
   — .flex-block-8 was display:flex with fixed gap — on phones
     already collapses but map containers had no max-width guard.
═══════════════════════════════════════════════════════════════ */

.flex-block-8 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.flex-block-9 {
  width: 100%;
  min-width: 0;
}

.map {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   7. FOOTER — BRAND TEXT + LEGAL ROW
   — .footer_brand at 20vw looks fine on desktop but on phones
     it over-extends. Cap it and ensure legal row wraps cleanly.
═══════════════════════════════════════════════════════════════ */

.footer_brand {
  overflow: hidden;
  max-width: 100%;
}

.footer_brand-logo {
  display: block;
  width: 20vw;
  max-width: 320px;
  min-width: 120px;
  height: auto;
}

.footer_legal-links {
  width: 100%;
}

.footer_legal-wrap {
  flex-wrap: wrap;
  gap: 8px;
}

.footer_main {
  width: 100%;
}

.footer_links-groups {
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   8. NAVBAR — PREVENT OVERFLOW
═══════════════════════════════════════════════════════════════ */

.navbar {
  max-width: 100vw;
  overflow: hidden;
  background: transparent !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 300 !important;
  width: 100% !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

.navbar_component {
  max-width: 100%;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   9. HERO SECTION — SAFE HEIGHT
   — Use min-h-[100dvh] equivalent to prevent iOS Safari jump
═══════════════════════════════════════════════════════════════ */

/* Desktop only — on mobile the height: 100svh rule inside the @media (max-width:767px)
   block above takes over. Putting this outside a query used to override that rule because
   !important + later cascade wins; now scoped to ≥768px to avoid the conflict. */
@media (min-width: 768px) {
  .section_home-header {
    min-height: 100dvh !important;
    height: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. GLOBAL BOX-SIZING SAFETY NET
═══════════════════════════════════════════════════════════════ */

.page-wrapper,
.main-wrapper,
.padding-global,
.container-medium,
.container {
  max-width: 100%;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   11. MOBILE BREAKPOINTS (≤ 767px)
═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {

  /* --- Gem section --- */
  #ns {
    padding: 48px 16px 64px !important;
  }

  .sr {
    gap: 20px !important;
    margin-top: 36px !important;
  }

  .word {
    font-size: clamp(20px, 5.5vw, 38px) !important;
    margin: 0 2px 2px !important;
  }

  /* --- Stats section --- */
  .features-wrapper {
    gap: 0 !important;
  }

  .features-block {
    padding: 24px 20px !important;
    border-bottom: 1px solid #e4ebf3;
  }

  .features-block:last-child {
    border-bottom: none;
  }

  .features-title {
    font-size: 36px !important;
    line-height: 1 !important;
  }

  /* --- Testimonials --- */
  .flex-block-2 {
    flex-direction: column !important;
  }

  .flex-block {
    width: 100% !important;
  }

  .div-block-3 {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  /* --- Locations --- */
  .flex-block-8 {
    flex-direction: column !important;
    padding: 0 16px !important;
  }

  /* --- CTA section --- */
  .cta_component {
    flex-direction: column !important;
  }

  /* --- Contact form --- */
  .page-contact-section {
    padding: 48px 16px 40px !important;
  }

  /* --- Footer brand sizing on tablet --- */
  .footer_brand-logo {
    width: 18vw;
  }

  /* --- Brands/awards grid --- */
  .grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   12. MOBILE PORTRAIT (≤ 479px)
═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 479px) {

  /* --- Main wrapper padding fix (was 15px side padding
         applied on top of padding-global causing double-padding) --- */
  .main-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Sections: uniform side padding --- */
  .features-metrics,
  .section,
  .section_values,
  .section_work-list,
  .section_services,
  .section_brands,
  .section_brands-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* FAQ component needs its own padding since it sits outside padding-global */
  .faq_component {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .faq_answer-wrap {
    padding-left: 1rem !important;
  }

  .padding-global {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Gem section — phone portrait --- */
  #ns {
    padding: 40px 16px 56px !important;
  }

  .word {
    font-size: clamp(18px, 6vw, 28px) !important;
  }

  .sn {
    font-size: clamp(26px, 8vw, 32px) !important;
  }

  .dv {
    width: 1px;
    height: 32px !important;
    align-self: center !important;
  }

  /* --- Features stats: stacked card style --- */
  .features-block {
    padding: 20px 16px !important;
  }

  .features-title {
    font-size: 32px !important;
  }

  /* --- Testimonials card --- */
  .div-block-3 {
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .div-block-4 {
    border-radius: 12px !important;
  }

  /* --- Footer brand: phone --- */
  .footer_brand-logo {
    width: clamp(120px, 40vw, 220px);
  }

  .footer_wrap {
    padding-top: 32px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer_main {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .footer_links-groups {
    width: 100% !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .footer_legal-links {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .footer_legal-divider {
    display: none !important;
  }

  /* --- Floating CTAs: stacked on right on small screens --- */
  .buy-template,
  .buy-template-copy {
    min-width: 10rem !important;
    width: 10rem !important;
    padding: 0.55rem 0 !important;
    font-size: 0.82rem !important;
    right: 1rem !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
  }
  .buy-template { bottom: 1.2rem !important; }
  .buy-template-copy { bottom: 4.5rem !important; }

  /* --- CTA section banner --- */
  .section_cta.section-2 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .cta_content {
    padding: 20px 16px !important;
  }

  /* --- Contact form --- */
  .page-contact-section {
    padding: 40px 16px 32px !important;
    border-radius: 0 !important;
  }

  .pg-send-btn {
    border-radius: 10px !important;
  }

  /* --- Brands marquee: make logos scroll horizontally on mobile --- */
  .brands_list-wrapper {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  .brands_list {
    animation: marquee-scroll 18s linear infinite !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
  }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* --- Services: unstick content so it doesn't overlap images --- */
  .services_content {
    position: relative !important;
    top: auto !important;
  }

  /* --- Hide spacer-large when it follows the hidden heading --- */
  .services_content .spacer-large {
    display: none !important;
  }

  /* --- Awards grid: single column on portrait --- */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --- Navbar --- */
  .navbar_component {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Section spacing dividers --- */
  .padding-global.is-tiny {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   13. GLOBAL FONT ENFORCEMENT — ALL PAGES
   Catches any inline or per-page font-family declarations that
   survived the PHP-level sed replacements.
═══════════════════════════════════════════════════════════════ */

/* Sub-page specific classes */
.hero-title,
.hero h1,
.page-head h1,
.portfolio-hero-title,
.case-name,
.cta-title,
.footer-big,
.footer-bigtext,
.email-input,
.email-label,
.newsletter-box,
.logo,
.logo::after,
.article-title,
.faq-title,
.faq-q,
.journey-title,
.journey-year,
.why-title,
.send-btn,
.book-btn,
.call-badge,
.talk-pill,
.success-note,
.success-wrap h3 {
  font-family: "BDO Grotesk", Arial, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. HEADING SIZE CONSISTENCY — SUB-PAGES
   All page hero headings use the same scale token so they feel
   like one site, not five different ones.
═══════════════════════════════════════════════════════════════ */

/* Page-level large hero titles (Cases, Portfolio) */
.hero-title,
.portfolio-hero-title {
  font-size: clamp(64px, 10vw, 100px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

/* Standard page h1s (About, Articles, Contact) */
.hero h1,
.page-head h1 {
  font-size: clamp(40px, 6vw, 64px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
}

/* Consistent case card label size */
.case-name {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.case-time {
  font-size: 13px !important;
  font-weight: 300 !important;
}

/* Section subheadings in contact form (inline Syne was 42px) */
.page-contact-section h2 {
  font-size: clamp(28px, 5vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* Mobile overrides */
@media screen and (max-width: 767px) {
  .hero-title,
  .portfolio-hero-title {
    font-size: clamp(48px, 14vw, 80px) !important;
  }

  .hero h1,
  .page-head h1 {
    font-size: clamp(32px, 8vw, 52px) !important;
  }
}

@media screen and (max-width: 479px) {
  .hero-title,
  .portfolio-hero-title {
    font-size: clamp(40px, 15vw, 64px) !important;
  }

  .hero h1,
  .page-head h1 {
    font-size: clamp(28px, 9vw, 44px) !important;
  }
}





/* ═══════════════════════════════════════════════════════════════
   UNIFIED MOBILE NAV — dropdown below navbar, all pages
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {

  /* Navbar: sticky, must be relative so dropdown anchors to it */
  .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    background: var(--_colors---primary--beige, #f5f2ee) !important;
  }
  .navbar > .padding-global { position: relative !important; }
  .navbar_component { position: relative !important; overflow: visible !important; }

  /* Hamburger visible, links hidden by default */
  .navbar_hamburger-wrap { display: flex !important; cursor: pointer !important; z-index: 301 !important; }
  .navbar_hamburger { display: flex !important; }
  .navbar_links-wrap { display: none !important; opacity: 1 !important; }

  /* ── OPEN: dropdown panel ── */
  .navbar_links-wrap.mob-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #f5f2ee !important;
    padding: 0.5rem 1.5rem 1.5rem !important;
    z-index: 9999 !important;
    border-radius: 0 0 1rem 1rem !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  }

  /* Links */
  .navbar_links-wrap.mob-open .navbar_links {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0 !important;
  }
  .navbar_links-wrap.mob-open .navbar_link {
    width: 100% !important;
    padding: 0.8rem 0 !important;
    border-bottom: 1px solid rgba(17,17,17,0.08) !important;
    overflow: visible !important;
  }
  .navbar_links-wrap.mob-open .navbar_link-text._1 {
    font-family: "BDO Grotesk", Arial, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #111 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    pointer-events: auto !important;
  }
  .navbar_links-wrap.mob-open .navbar_link-text._2 { display: none !important; }

  /* Contact Me — black full-width button */
  .navbar_links-wrap.mob-open .button {
    background: #111 !important;
    background-color: #111 !important;
    background-image: none !important;
    border-radius: 10px !important;
    margin-top: 1rem !important;
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }
  .navbar_links-wrap.mob-open .button_inner {
    min-height: 48px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 1.5rem !important;
  }
  .navbar_links-wrap.mob-open .button_gradient,
  .navbar_links-wrap.mob-open .button_gradient-glow,
  .navbar_links-wrap.mob-open .button_gradient-ball { display: none !important; }
  .navbar_links-wrap.mob-open .button_text {
    font-family: "BDO Grotesk", Arial, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
  }

  /* Hamburger → X */
  .navbar_hamburger-wrap.mob-open .navbar_hamburger-line._1 {
    transform: rotate(45deg) translate(4px, 4px) !important;
  }
  .navbar_hamburger-wrap.mob-open .navbar_hamburger-line._2 {
    transform: rotate(-45deg) translate(4px, -4px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO IMAGE GRID — PHONE-ONLY FIX
   Shrinks floating patient photos on phones only (≤ 479px)
   so they don't crowd the headline/button area.
   Desktop & tablet are untouched.
═══════════════════════════════════════════════════════════════ */

/* Mobile portrait phones only (≤ 479px — iPhone SE, mini) */
@media screen and (max-width: 479px) {

  /* Slightly smaller images on the narrowest phones */
  .home-header_img {
    width: 20vw !important;
    border-radius: 2vw !important;
  }

  /* Tighten heading further on SE/mini */
  .home-header_heading._1 {
    font-size: clamp(1.4rem, 9vw, 1.8rem) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   iOS / iPHONE SPECIFIC FIXES
   — viewport-fit=cover must be set in <meta name="viewport">
     for env(safe-area-inset-*) values to work.
═══════════════════════════════════════════════════════════════ */

/* 1. Remove grey tap-flash on interactive elements (iOS Safari default) */
a,
button,
[role="button"],
.w-button,
.navbar_link,
.navbar_hamburger-wrap,
.buy-template,
.buy-template-copy {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/*
 * 2. Safe-area inset: lift floating CTAs above the iPhone home
 *    indicator bar (iPhone X and newer without a home button).
 *    Sub-page inline styles override these for their own pages.
 */
/* Both CTAs stacked on the right, safe-area aware */
.buy-template {
  bottom: calc(1.2rem + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
}
.buy-template-copy {
  bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
}

/*
 * 3. Prevent iOS Safari auto-zoom on form focus.
 *    Safari zooms into any input whose computed font-size < 16px.
 *    This forces a minimum of 16px on all form controls at mobile.
 */
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}