.elementor-29 .elementor-element.elementor-element-4788397{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-c832607{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-29 .elementor-element.elementor-element-4788397{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}}/* Start custom CSS for html, class: .elementor-element-0d87dbd *//* ══════════════════════════════════════════════════════════
   SECTION 0 — GLOBAL RULES (apply at all screen sizes)
   These ensure nothing ever breaks on any device.
   ══════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on any device */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
@media (max-width: 768px) {
    .nav-logo, nav .nav-logo {
        font-size: 18px !important;
        color: #1C1C1C !important;
        padding-top: 10px ! IMPORTANT;
    }
}

/* All images scale down if container is smaller */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* All videos scale down */
video, iframe, embed, object {
  max-width: 100%;
}

/* Prevent text from being too small on iOS */
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Make sure all form elements are usable on touch */
input, textarea, select, button {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
}

/* Minimum tap target size for all clickable elements */
a, button, .nav-cta, .btn-primary, .btn-hero-primary,
.btn-hero-outline, .qa-btn, .nl-btn, .form-submit {
  min-height: 44px;
}


/* ══════════════════════════════════════════════════════════
   SECTION 1 — NAVIGATION
   ══════════════════════════════════════════════════════════ */

/* ── Tablet and Mobile: hide nav links, show hamburger ── */
@media (max-width: 1024px) {
  nav,
  .site-nav {
    padding: 0 24px;
  }
}


@media (max-width: 768px) {

  nav,
  .site-nav {
    height: 60px;
    padding: 0 20px;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(247,245,240,0.98) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 #E5E0D8;
    z-index: 999;
  }
  @media (max-width: 768px) {.mob-nav-list {
    list-style: none;
    padding-top: 450px !important;
}}
@media (max-width: 768px) {.mob-menu-footer {
    padding-top: 380px !important;
}}
@media (max-width: 768px) {.mob-nav-arrow {
    margin-left: auto;
    font-size: 16px;
    color: #fff !important;
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0;
}}
  /* Hide desktop nav links */
  .nav-links,
  nav ul.nav-links {
    display: none !important;
  }

  /* Smaller logo */
  .nav-logo,
  nav .nav-logo {
    font-size: 18px !important;
    color: #1C1C1C !important;
  }

  /* Smaller CTA button */
  .nav-cta,
  nav .nav-cta {
    font-size: 12px !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
  }

  /* Push page content down to clear fixed nav */
  body {
    padding-top: 60px;
  }

  /* Hamburger menu button — add this button in your HTML
     next to the nav-cta if you want a full mobile menu.
     For now the Let's talk button serves as the main CTA. */
}


/* ══════════════════════════════════════════════════════════
   SECTION 2 — HERO SECTIONS (all pages)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero,
  .tips-hero,
  .contact-hero,
  .work-hero,
  .archive-hero,
  .services-hero,
  .post-hero {
    padding: 56px 24px 48px !important;
  }

  .hero-inner,
  .tips-hero-inner,
  .hero-inner {
    padding: 80px 24px 48px !important;
    gap: 40px !important;
  }
}

@media (max-width: 768px) {

  /* All hero sections stack vertically */
  .hero-inner,
  .tips-hero-inner,
  .contact-hero .hero-inner,
  .work-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 20px 0 0 !important;
    gap: 32px !important;
  }

  /* Hero padding tighter on mobile */
  .hero,
  .tips-hero,
  .contact-hero,
  .work-hero,
  .archive-hero,
  .services-hero,
  .post-hero {
    padding: 32px 20px 0 !important;
  }

  /* Hero titles — smaller but still impactful */
  .hero-title,
  .tips-hero-title,
  .contact-hero-title,
  .work-hero-title,
  .archive-hero-title,
  .services-hero .hero-title,
  .post-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }

  /* Hero subtitle */
  .hero-sub,
  .tips-hero-sub,
  .contact-hero-sub,
  .work-hero-sub,
  .archive-hero-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
  }

  /* Hero buttons stack */
  .hero-btns,
  .hero-cta-row,
  .cta-band-btns {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .btn-hero-primary,
  .btn-hero-outline,
  .btn-white,
  .btn-outline-white {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hero photos — hide on very small screens or shrink */
  .hero-right,
  .hero-photos {
    height: 280px !important;
  }

  .hero-photo-main {
    width: 52% !important;
    height: 88% !important;
  }

  .hero-photo-secondary {
    width: 47% !important;
    height: 72% !important;
  }

  /* Hero badge — reposition */
  .hero-badge {
    top: 16px !important;
    right: 0 !important;
    padding: 10px 14px !important;
  }
  .badge-big { font-size: 22px !important; }

  /* Trust grid in contact hero — 2 columns */
  .hero-trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .trust-num { font-size: 22px !important; }

  /* Archive hero search */
  .archive-hero-right {
    width: 100% !important;
    align-items: flex-start !important;
  }
  .archive-search { width: 100% !important; }
  .archive-search input { width: 100% !important; flex: 1 !important; }

  /* Services hero pills — 2 column */
  .hero-right-pills {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .hero-title,
  .tips-hero-title,
  .contact-hero-title {
    font-size: 24px !important;
  }
  .hero-right,
  .hero-photos {
    height: 220px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 3 — STATS STRIPS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .stats-strip,
  .proof-strip {
    padding: 0 !important;
  }

  .stats-inner,
  .proof-inner {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }

  .stat-item,
  .proof-item {
    padding: 20px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  }

  /* Remove right border from odd items, add right border between columns */
  .stat-item:nth-child(odd),
  .proof-item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.15) !important;
  }

  /* Remove bottom border from last row */
  .stat-item:nth-last-child(-n+2),
  .proof-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  .stat-num,
  .proof-num {
    font-size: 26px !important;
  }

  .stat-label,
  .proof-label {
    font-size: 11px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 4 — HOME PAGE SECTIONS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .intro-section,
  .services-section,
  .home-services-section,
  .result-section,
  .testimonial-section,
  .process-strip,
  .cta-band {
    padding: 60px 24px !important;
  }
}

@media (max-width: 768px) {

  /* Intro section — stack */
  .intro-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .intro-photo-wrap { height: 280px !important; }
  .intro-quote-card {
    position: static !important;
    margin-top: 16px !important;
    max-width: 100% !important;
  }

  /* Services grid */
  .services-grid,
  .hs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Featured service card */
  .hs-card-featured {
    grid-template-columns: 1fr !important;
  }
  .hs-featured-img { min-height: 200px !important; }
  .hs-featured-body { padding: 24px 20px !important; }
  .hs-featured-name { font-size: 22px !important; }

  /* Process steps */
  .process-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  .process-step::after { display: none !important; }

  /* Featured result card */
  .result-card {
    grid-template-columns: 1fr !important;
  }
  .result-metrics {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Testimonials */
  .testi-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* CTA band */
  .cta-band-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px 0 !important;
  }
  .cta-right {
    align-items: flex-start !important;
  }

  /* Bottom CTA band in services section */
  .hs-bottom-band {
    flex-direction: column !important;
    padding: 24px 20px !important;
    gap: 16px !important;
  }
  .hs-band-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .intro-section,
  .services-section,
  .home-services-section,
  .result-section,
  .testimonial-section,
  .process-strip,
  .cta-band {
    padding: 48px 16px !important;
  }

  .process-steps {
    grid-template-columns: 1fr !important;
  }

  .result-metrics {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 5 — ABOUT US PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .story-section,
  .founders-section,
  .values-section,
  .fun-section {
    padding: 60px 24px !important;
  }
}

@media (max-width: 768px) {

  /* Story section */
  .story-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .story-visual { height: 260px !important; }
  .story-img.img-main { width: 60% !important; height: 220px !important; }
  .story-img.img-secondary { width: 50% !important; height: 170px !important; }

  /* Founders grid */
  .founders-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .founder-photo-wrap { height: 240px !important; }

  /* Values grid */
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .values-heading {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .values-heading-right {
    max-width: 100% !important;
  }

  /* Fun facts */
  .fun-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* CTA band */
  .cta-band {
    padding: 48px 20px !important;
  }
  .cta-band-inner {
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 6 — SERVICES PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .services-section,
  .framework-section,
  .pricing-signal {
    padding: 60px 24px !important;
  }
}

@media (max-width: 768px) {

  /* Large service cards */
  .svc-card-large {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .svc-card-large.reverse { direction: ltr !important; }
  .svc-card-img { min-height: 200px !important; }
  .svc-card-body { padding: 24px 20px !important; }
  .svc-name { font-size: 22px !important; }

  /* Small service grid */
  .secondary-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Framework cards */
  .framework-cards {
    grid-template-columns: 1fr !important;
  }
  .framework-header {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .fw-connector { display: none !important; }

  /* Pricing signal */
  .pricing-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .pricing-right {
    align-items: flex-start !important;
  }
  .pricing-amount { font-size: 32px !important; }

  /* How we work section */
  .hw-timeline {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Switch to vertical timeline on mobile */
  .hw-timeline::before {
    top: 0 !important; bottom: 0 !important;
    left: 27px !important; right: auto !important;
    width: 2px !important; height: auto !important;
  }
  .hw-timeline::after {
    top: 0 !important; left: 27px !important;
    width: 2px !important; height: 0 !important;
  }
  .hw-timeline.animated::after {
    width: 2px !important;
    height: calc(100% - 56px) !important;
  }
  .hw-step {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 0 0 24px 0 !important;
  }
  .hw-num { margin-bottom: 0 !important; flex-shrink: 0 !important; }
  .hw-card { text-align: left !important; flex: 1 !important; }
  .hw-icon { margin: 0 0 12px 0 !important; }

  /* Promise strip in How We Work */
  .hw-promise {
    padding: 24px 20px !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .hw-promise-items {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  .hw-promise-cta {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 7 — WORK PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .result-section,
  .testimonial-section,
  .cs-format-section,
  .work-section,
  .faq-section {
    padding: 60px 24px !important;
  }
}

@media (max-width: 768px) {

  /* Case study cards */
  .cs-item { border-left: none !important; }
  .cs-item:nth-child(1) { border-top: 5px solid #E0395A !important; }
  .cs-item:nth-child(2) { border-top: 5px solid #1C3A5E !important; }
  .cs-item:nth-child(3) { border-top: 5px solid #2D7A4F !important; }

  .cs-header {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
  .cs-metrics-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .cs-metric-box { padding: 12px 14px !important; }
  .metric-after { font-size: 17px !important; }

  .cs-detail-inner {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  .cs-result-quote { grid-column: 1 !important; }

  .cs-toggle-row {
    padding: 12px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Featured results cards */
  .cs-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Work page framework */
  .framework-cards {
    grid-template-columns: 1fr !important;
  }

  /* Post navigation */
  .post-navigation {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 8 — TIPS / BLOG PAGES
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .tips-hero,
  .featured-post-section,
  .blog-grid-section,
  .topics-strip,
  .newsletter-section,
  .featured-wrap,
  .posts-grid-section,
  .archive-nl-band,
  .related-section {
    padding: 48px 24px !important;
  }
  .featured-post-section { padding-bottom: 0 !important; }
  .featured-wrap { padding-bottom: 0 !important; }
}

@media (max-width: 768px) {

  /* Tips hero */
  .tips-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero-right-topics { gap: 10px !important; }
  .hero-subscribe { flex-direction: column !important; gap: 8px !important; }
  .hero-subscribe input {
    border-right: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  .hero-subscribe button {
    border-radius: 8px !important;
    width: 100% !important;
  }

  /* Featured post card */
  .featured-card,
  .featured-post-card {
    grid-template-columns: 1fr !important;
  }
  .featured-img,
  .featured-post-card-img {
    min-height: 200px !important;
    height: 200px !important;
  }
  .featured-body,
  .featured-post-body {
    padding: 24px 20px !important;
  }
  .featured-title { font-size: 20px !important; }

  /* Blog grid */
  .blog-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Topics grid */
  .topics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Newsletter section */
  .newsletter-inner {
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    gap: 24px !important;
  }
  .newsletter-inner::before { display: none !important; }
  .nl-input-row { flex-direction: column !important; gap: 8px !important; }
  .nl-input {
    border-right: 1px solid var(--border, #E5E0D8) !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  .nl-btn {
    border-radius: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Archive newsletter band */
  .archive-nl-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .nl-form-row { flex-direction: column !important; gap: 8px !important; }
  .nl-input.archive-nl { border-right: 1px solid rgba(255,255,255,0.2) !important; border-radius: 8px !important; }
  .nl-btn.archive-nl { border-radius: 8px !important; width: 100% !important; }

  /* Category filter bar */
  .cat-filter-bar,
  .category-bar,
  .industry-filter,
  .filter-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px !important;
  }
  .cat-filter-inner,
  .category-inner,
  .filter-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-width: max-content !important;
  }
  .cat-tab,
  .filter-tab { padding: 14px 14px !important; font-size: 12px !important; }

  /* Related posts grid */
  .related-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Single post body */
  .post-body-wrap {
    grid-template-columns: 1fr !important;
    padding: 40px 20px 48px !important;
    gap: 32px !important;
  }
  .post-sidebar { position: static !important; }

  /* Post featured image */
  .post-featured-img {
    margin: 0 -20px !important;
    height: 220px !important;
  }
  .post-img-caption { padding: 12px 20px !important; }

  /* Post content typography */
  .post-content { font-size: 15px !important; }
  .post-content p { font-size: 15px !important; }
  .post-content h2 { font-size: 20px !important; }
  .post-content h3 { font-size: 18px !important; }
  .post-content blockquote p { font-size: 16px !important; }

  /* Author card */
  .author-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }
}

@media (max-width: 480px) {
  .topics-grid {
    grid-template-columns: 1fr !important;
  }
  .post-meta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .post-meta-divider { display: none !important; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 9 — CONTACT PAGE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .contact-main { padding: 0 24px 60px !important; }
  .faq-section { padding: 60px 24px !important; }
}

@media (max-width: 768px) {

  /* Contact form + info panel — stack */
  .contact-main-inner {
    grid-template-columns: 1fr !important;
  }
  .form-panel {
    padding: 28px 20px !important;
    border-right: none !important;
    border-bottom: 1px solid #ECEAE4 !important;
  }
  .info-panel {
    padding: 28px 20px !important;
    border-radius: 0 0 16px 16px !important;
  }

  /* Form row — stack fields */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Quick action buttons */
  .quick-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .qa-btn { flex: none !important; width: 100% !important; }

  /* Founders mini card */
  .founders-mini-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* FAQ grid */
  .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .faq-header {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .faq-header-right { padding-top: 0 !important; }
  .faq-item { padding: 20px !important; }
  .faq-q { font-size: 15px !important; }
  .faq-a { font-size: 13px !important; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 10 — FOOTER (all pages)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .footer-top { padding: 48px 24px 32px !important; }
  .footer-bottom { padding: 16px 24px !important; }
}

@media (max-width: 768px) {

  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    padding: 40px 20px 28px !important;
  }

  /* Brand column spans full width */
  .footer-brand,
  .footer-top > div:first-child {
    grid-column: 1 / -1 !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px 20px !important;
    gap: 10px !important;
  }

  .footer-legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .footer-logo-text { font-size: 18px !important; }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 11 — TYPOGRAPHY SCALING
   All section headings reduce gracefully on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Section titles */
  .section-title,
  .intro-left h2,
  .founders-heading h2,
  .values-heading-left h2,
  .fun-heading h2,
  .cta-band h2,
  .cta-left h2,
  .cta-band-inner h2,
  .work-hero-title,
  .services-section-title h2,
  .archive-hero-title,
  h1.contact-hero-title {
    font-size: clamp(24px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  /* Subsection headings */
  .section-header-left h2,
  .story-title,
  .related-header-left h2,
  .grid-section-header h2,
  .topics-header-left h2,
  .newsletter-left h2,
  .nl-left h2,
  .faq-header-left h2 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* Section eyebrow labels */
  .section-eyebrow,
  .section-label,
  .hero-eyebrow,
  .fw-eyebrow,
  .faq-eyebrow,
  .nl-eyebrow,
  .featured-label span,
  .rel-eyebrow,
  .t-eyebrow,
  .v-label,
  .f-label {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 12 — SPACING ADJUSTMENTS
   Reduce all large padding values on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* All major sections */
  section,
  .section,
  div[class$="-section"],
  div[class*="-section "] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section internal max-width containers */
  .intro-inner,
  .services-inner,
  .home-services-inner,
  .result-inner,
  .testimonial-inner,
  .founders-inner,
  .values-inner,
  .fun-inner,
  .cs-format-section,
  .work-section,
  .blog-grid-inner,
  .related-inner,
  .posts-grid-inner,
  .featured-inner,
  .featured-wrap-inner,
  .contact-main-inner,
  .faq-inner,
  .archive-nl-inner {
    padding: 0 !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 13 — WHATSAPP STICKY BUTTON
   Larger tap target and better position on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .wa-sticky {
    bottom: 20px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 4px 24px rgba(37,211,102,0.5) !important;
  }
  .wa-sticky svg {
    width: 26px !important;
    height: 26px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 14 — STICKY BARS (filter tabs, nav)
   Adjust top offset now that nav height is 60px on mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .cat-filter-bar,
  .category-bar,
  .industry-filter,
  .filter-bar {
    top: 60px !important; /* matches mobile nav height */
  }

  .reading-progress {
    top: 60px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 15 — CARD & IMAGE FIXES
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* All cards hover effect disabled on touch — prevents
     cards from getting "stuck" in hover state on tap */
  .service-card:hover,
  .svc-card-large:hover,
  .svc-card-small:hover,
  .founder-card:hover,
  .blog-card:hover,
  .post-card:hover,
  .testi-card:hover,
  .related-card:hover,
  .fun-card:hover {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(28,28,28,0.08) !important;
  }

  /* Card images — consistent height on mobile */
  .service-img-wrap,
  .blog-img,
  .post-card-img {
    height: 180px !important;
  }

  /* Story visual */
  .story-visual {
    height: 240px !important;
  }
  .story-img.img-main {
    width: 58% !important;
    height: 200px !important;
  }
  .story-img.img-secondary {
    width: 46% !important;
    height: 160px !important;
  }
  .story-visual::before {
    width: 58% !important;
    height: 200px !important;
  }

  /* Marquee in hero — slow down on mobile */
  .tagline-track {
    animation-duration: 30s !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 16 — TABLET-SPECIFIC FIXES (768px - 1024px)
   iPad, iPad Mini, Android tablets in landscape
   ══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* 2-column grids on tablet instead of 3 */
  .services-grid { grid-template-columns: 1fr 1fr !important; }
  .testi-grid { grid-template-columns: 1fr 1fr !important; }
  .blog-grid { grid-template-columns: 1fr 1fr !important; }
  .posts-grid { grid-template-columns: 1fr 1fr !important; }
  .related-grid { grid-template-columns: 1fr 1fr !important; }
  .founders-grid { grid-template-columns: 1fr 1fr !important; }
  .values-grid { grid-template-columns: 1fr 1fr !important; }
  .fun-grid { grid-template-columns: 1fr 1fr !important; }
  .topics-grid { grid-template-columns: 1fr 1fr !important; }
  .secondary-grid { grid-template-columns: 1fr 1fr !important; }

  /* Footer 2-column on tablet */
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }

  /* Process steps — 2 columns on tablet */
  .process-steps { grid-template-columns: 1fr 1fr !important; }
  .process-step::after { display: none !important; }

  /* Result metrics — 2 columns */
  .result-metrics { grid-template-columns: 1fr 1fr !important; }

  /* Hero on tablet — still 2 col but tighter */
  .hero-inner { gap: 32px !important; }
  .hero-title { font-size: clamp(32px, 4.5vw, 48px) !important; }

  /* Contact form */
  .contact-main-inner {
    grid-template-columns: 1fr !important;
  }

  /* FAQ grid */
  .faq-grid { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 17 — IPAD PRO / LARGE TABLET (1024px exactly)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (max-width: 1100px) {

  .hero-title,
  .contact-hero-title,
  .tips-hero-title {
    font-size: clamp(30px, 4vw, 44px) !important;
  }

  .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    gap: 28px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SECTION 18 — PRINT STYLES (bonus)
   Clean printout if someone prints a blog post
   ══════════════════════════════════════════════════════════ */

@media print {
  nav, .wa-sticky, .post-sidebar,
  .newsletter-section, .related-section,
  .cta-band, .archive-nl-band,
  .reading-progress, .post-share-strip,
  .post-navigation, footer {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt !important;
  }
  .post-hero { background: #fff !important; padding: 0 !important; }
  .post-hero-title, .post-title { color: #000 !important; font-size: 24pt !important; }
  .post-body-wrap { grid-template-columns: 1fr !important; padding: 24pt 0 !important; }
  .post-content { font-size: 11pt !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a842667 *//* ── NAV ─────────────────────────────────────────── */
.nav-cta:hover{
    background-color: #e0395a !important;
    color: #fff !important
    ;
}

nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(247,245,240,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--off-white);
  padding: 0 48px; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--charcoal); text-decoration: none;
}
.nav-logo span { color: var(--pink); }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 14px; color: var(--muted);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--charcoal); }
.nav-links a.active {
  color: var(--pink); font-weight: 500;
  border-bottom: 2px solid var(--pink); padding-bottom: 2px;
}
.nav-cta {
  background: var(--pink); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: 8px;
  text-decoration: none; transition: background 0.2s;
}
.nav-cta:hover { background: var(--pink-dark); }/* End custom CSS */