/* ===== extracted from <style id="index-sol-layer-equal-height"> ===== */
@media (min-width: 901px) {
        /* All 4 cards same padding; equalized by JS — no stretch on last card */
        body.home-portfolio-youtube .solution-section--index .solution-layers {
          align-self: start;
        }

        body.home-portfolio-youtube .solution-section--index #solLayers .sol-layer {
          box-sizing: border-box;
          flex: 0 0 auto;
          align-items: center;
          padding: 13px 16px !important;
          gap: 14px;
        }

        body.home-portfolio-youtube .solution-section--index #solLayers .sol-title {
          margin-bottom: 2px;
        }

        body.home-portfolio-youtube .solution-section--index #solLayers .sol-desc {
          line-height: 1.4;
        }
      }

/* ===== extracted from <style id="index-comp-triangle"> ===== */
/* Yellow triangle text alignment — icon nudge only */
      body.home-portfolio-youtube .comparison-section .comp-table svg.wrong {
        vertical-align: middle;
        position: relative;
        top: -3px;
      }

/* ===== extracted from <style id="index-nav-apparel-nudge"> ===== */
/* What We Do mega — Apparel item slightly lower */
      body.home-portfolio-youtube
        .nav-links
        li.nav-item--what-we-do
        > ul
        > li:has(> a[href*="apparel-merchandise"]) {
        margin-top: 8px;
      }

/* ===== extracted from <style id="index-comp-table-mobile"> ===== */
/* Homepage comparison table — mobile horizontal scroll + readable cells */
      @media (max-width: 768px) {
        body.home-portfolio-youtube .comparison-section .comp-table-wrap {
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior-x: contain;
          max-width: 100%;
          margin-left: -20px;
          margin-right: -20px;
          padding-left: max(20px, env(safe-area-inset-left, 0px));
          padding-right: max(52px, calc(20px + 36px));
          padding-bottom: 10px;
        }

        body.home-portfolio-youtube .comparison-section .comp-table {
          width: max-content !important;
          min-width: 820px !important;
          max-width: none !important;
          table-layout: auto;
        }

        body.home-portfolio-youtube .comparison-section .comp-table th,
        body.home-portfolio-youtube .comparison-section .comp-table td {
          padding: 12px 12px;
          font-size: 12.5px;
          line-height: 1.35;
          overflow-wrap: normal !important;
          word-break: normal !important;
          hyphens: none;
          white-space: normal;
          vertical-align: middle;
        }

        body.home-portfolio-youtube .comparison-section .comp-table th:first-child,
        body.home-portfolio-youtube .comparison-section .comp-table td:first-child {
          min-width: 132px;
          max-width: 148px;
          position: sticky;
          left: 0;
          z-index: 1;
          border-right: 1px solid var(--border-light);
          box-shadow: 7px 0 14px -8px rgba(27, 42, 107, 0.28);
          overflow-wrap: break-word;
          word-break: keep-all;
        }

        body.home-portfolio-youtube .comparison-section .comp-table thead th:first-child {
          z-index: 2;
          background: var(--lavender);
        }

        body.home-portfolio-youtube .comparison-section .comp-table tbody td:first-child {
          background: #fff;
        }

        body.home-portfolio-youtube .comparison-section .comp-table tbody tr:nth-child(even) td:first-child {
          background: #f7f8fc;
        }

        body.home-portfolio-youtube .comparison-section .comp-table th:not(:first-child),
        body.home-portfolio-youtube .comparison-section .comp-table td:not(:first-child) {
          min-width: 108px;
          white-space: nowrap;
        }

        body.home-portfolio-youtube .comparison-section .comp-table th.hi,
        body.home-portfolio-youtube .comparison-section .comp-table td.hi {
          min-width: 118px;
        }

        body.home-portfolio-youtube .comparison-section .comp-table th.hi .logo2 {
          width: 96px;
          max-width: 96px;
          height: auto;
        }
      }

      @media (max-width: 480px) {
        body.home-portfolio-youtube .comparison-section .comp-table-wrap {
          padding-right: max(48px, calc(16px + 32px));
        }

        body.home-portfolio-youtube .comparison-section .comp-table {
          min-width: 780px !important;
        }
      }

/* ===== extracted from <style id="index-mobile-nav-dropdown"> ===== */
/* Homepage mobile hamburger panel — sit below the nav pill (match What We Do pages) */
      @media (max-width: 900px) {
        body.home-portfolio-youtube nav#nav {
          overflow: visible !important;
        }

        body.home-portfolio-youtube nav#nav .nav-links {
          position: absolute !important;
          left: 0 !important;
          right: 0 !important;
          width: 100% !important;
          top: calc(100% + 8px) !important;
          bottom: auto !important;
          margin: 0 !important;
          transform: none !important;
          max-height: min(70vh, calc(100dvh - 96px));
          border-radius: 14px;
        }
      }

/* ===== SVG caution icon fills (moved from inline <defs><style>) ===== */
svg.wrong .cls-1 {
  fill: #1a1a1a;
}
svg.wrong .cls-2 {
  fill: #ffef11;
  fill-rule: evenodd;
}

#quizNext .quiz-next-arrow {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Mobile � homepage nav: kill What We Do closed-submenu gap before Portfolio */
@media screen and (max-width: 768px) {
  body.home-portfolio-youtube .nav-links li.nav-item--what-we-do > ul,
  body.home-portfolio-youtube .nav-links li.nav-item--what-we-do > ul:has(> li) {
    display: block !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 12px !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body.home-portfolio-youtube .nav-links li.nav-item--what-we-do > ul::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
  }

  body.home-portfolio-youtube .nav-links > li.nav-item--what-we-do.nav-submenu-open > ul,
  body.home-portfolio-youtube .nav-links > li.nav-item--what-we-do.nav-submenu-open > ul:has(> li) {
    max-height: 1200px !important;
    overflow: visible !important;
    padding: 8px 0 !important;
    margin: 0 12px 10px !important;
  }
}

/* Mobile only � hide hero ""Follow the journey"" button (homepage only) */
@media screen and (max-width: 768px) {
  body.home-portfolio-youtube .hero-actions a#open-newsletter-btn.btn-ghost,
  body.home-portfolio-youtube .hero-actions a#open-newsletter-btn {
    display: none !important;
  }
}

/* Homepage mobile portfolio: calm one-by-one loop (both rows, all tabs) */
@media screen and (max-width: 768px) {
  body.home-portfolio-youtube #portfolio .portfolio-row.pf-rows-loop {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.home-portfolio-youtube #portfolio .portfolio-row.pf-rows-loop::-webkit-scrollbar {
    display: none;
  }

  body.home-portfolio-youtube #portfolio .pf-rows-loop .portfolio-track {
    animation: none !important;
    transform: none !important;
  }

  body.home-portfolio-youtube #portfolio .pf-rows-loop .portfolio-card {
    width: min(82vw, 320px) !important;
    height: min(82vw, 320px) !important;
    flex: 0 0 auto !important;
    scroll-snap-align: center;
  }
}

/* Homepage mobile only � Before/After arrows: no card overlap */
@media screen and (max-width: 768px) {
  body.home-portfolio-youtube .ba-row {
    gap: 10px !important;
  }

  body.home-portfolio-youtube .ba-arrow {
    width: 42px !important;
    height: 42px !important;
    margin: 2px auto !important;
    transform: rotate(90deg) !important;
    flex-shrink: 0 !important;
  }

  body.home-portfolio-youtube .ba-arrow svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Homepage mobile only � CTA founding perks: icon + text alignment (no flex gap) */
@media screen and (max-width: 768px) {
  body.home-portfolio-youtube section.cta-section#get-matched .form-perk {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body.home-portfolio-youtube section.cta-section#get-matched .form-perk > .role-icon,
  body.home-portfolio-youtube section.cta-section#get-matched .form-perk > .svc-icon,
  body.home-portfolio-youtube section.cta-section#get-matched .form-perk > i {
    float: left !important;
    margin-right: 10px !important;
  }

  body.home-portfolio-youtube section.cta-section#get-matched .form-perk strong {
    font-weight: 700 !important;
    margin-right: 0.25em !important;
  }
}