/*
 * Additive layout/accessibility refinements for the original Framer export.
 * Intentionally preserves the source palette, font system, animation runtime,
 * layout composition, card styling and original section choreography.
 */

:root {
  interpolate-size: allow-keywords;
}

#main {
  inline-size: 100%;
  min-inline-size: 0;
}

#main *,
#main *::before,
#main *::after {
  box-sizing: border-box;
}

/* Allow nested Framer flex/grid frames to shrink instead of forcing overflow. */
#main [data-framer-name="Container"],
#main [data-framer-name="Content"],
#main [data-framer-name="Text-Box"],
#main [data-framer-name="Top"] {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Keep media inside the frame that owns it without changing its crop or ratio. */
#main img,
#main video,
#main iframe,
#main svg {
  max-inline-size: 100%;
}

#main form,
#main input,
#main textarea,
#main select {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Visible keyboard focus in the existing orange brand accent. */
#main :where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid #ff4d00;
  outline-offset: 3px;
}

#main :where(button, input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}

/* The Shorts hero had a fixed 240px mobile top pad. Reduce the dead zone
   while preserving the centered headline and its original visual treatment. */
@media (max-width: 809.98px) {
  #main .framer-qe7v7 .framer-1lvvzu5 {
    padding-block-start: clamp(144px, 39vw, 168px);
    padding-block-end: 20px;
  }

  #main [data-framer-name="Hero-Section"] {
    max-inline-size: 100%;
  }
}

/* Protect very narrow screens while leaving the original Framer spacing rules
   in control of every other breakpoint. */
@media (max-width: 389.98px) {
  #main [data-framer-name="Container"],
  #main [data-framer-name="Content"] {
    max-inline-size: 100%;
  }
}

/*
 * ========================================================
 * HEADER ALIGNMENT & RESPONSIVENESS REFINEMENTS
 * ========================================================
 */

/* Prevent horizontal page blow-out from carousel tracks so the header stays pinned within the viewport */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

:root {
  interpolate-size: allow-keywords;
}

#main {
  overflow-x: clip;
  max-width: 100vw;
  position: relative;
}

/* Header container: full viewport width, centered, and cleanly anchored */
#main .framer-5575sd-container {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  pointer-events: none;
}

#main .framer-5575sd-container header {
  pointer-events: auto;
}

/* Base header for all screen sizes: full width, flex column, centered */
#main header.framer-84rze {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Notch Badge: always centered, responsive max width on narrow devices */
#main .framer-84rze .framer-1n7k6km {
  width: min(342px, calc(100vw - 32px)) !important;
  max-width: 342px !important;
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#main .framer-84rze .framer-1n7k6km .framer-y0xqs7 {
  width: 100% !important;
  max-width: 342px !important;
}

/* Desktop Header Bar: mathematically balanced 3-column CSS Grid with centered Navbar (Desktop / Wide screen only) */
@media (min-width: 1440px) {
  #main .framer-84rze.framer-v-1vb53dl .framer-slrdhr {
    width: min(92%, 1400px) !important;
    max-width: 1400px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Left (Brand Logo) section: pinned to the left edge of the grid column */
  #main .framer-84rze.framer-v-1vb53dl .framer-1clcj1q {
    justify-self: start !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Center Navbar: mathematically centered in column 2, directly under the Notch Badge */
  #main .framer-84rze.framer-v-1vb53dl .framer-cxdqtj {
    justify-self: center !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
  }

  /* Right (CTA & Icons) section: pinned to the right edge of column 3 */
  #main .framer-84rze.framer-v-1vb53dl .framer-1qzbmqo {
    justify-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Logo image: preserve aspect ratio and eliminate animation translateY offsets */
#main .framer-84rze .framer-wyx2d3 {
  display: block !important;
  flex: none !important;
}

/* ========================================================
   MOBILE & TABLET HEADER (Hamburger menu on all screens < 1440px)
   ======================================================== */
@media (max-width: 1439.98px) {
  #main .framer-84rze {
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease !important;
  }

  #main .framer-84rze.framer-v-1v2ntl9.framer-1vb53dl,
  #main .framer-84rze.framer-v-h9ghn1.framer-1vb53dl {
    width: 100% !important;
    max-width: 100% !important;
    height: 96px !important;
    max-height: 96px !important;
    overflow: hidden !important;
    padding: 0 clamp(16px, 4vw, 40px) 12px clamp(16px, 4vw, 40px) !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
    box-sizing: border-box !important;
    animation: none !important;
  }

  /* Reset mobile/tablet header bar to full fluid width */
  #main .framer-84rze.framer-v-1v2ntl9 .framer-slrdhr,
  #main .framer-84rze.framer-v-1b2iiqh .framer-slrdhr,
  #main .framer-84rze.framer-v-h9ghn1 .framer-slrdhr {
    width: 100% !important;
    max-width: 1400px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  /* Logo + Hamburger row: spans entire width with space-between */
  #main .framer-84rze.framer-v-1v2ntl9 .framer-1clcj1q,
  #main .framer-84rze.framer-v-1b2iiqh .framer-1clcj1q,
  #main .framer-84rze.framer-v-h9ghn1 .framer-1clcj1q {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  /* Logo */
  #main .framer-84rze.framer-v-1v2ntl9 .framer-wyx2d3,
  #main .framer-84rze.framer-v-1b2iiqh .framer-wyx2d3,
  #main .framer-84rze.framer-v-h9ghn1 .framer-wyx2d3 {
    width: clamp(84px, 10vw, 110px) !important;
    height: 48px !important;
    flex: 0 0 auto !important;
    display: block !important;
  }

  /* Hamburger touch target & positioning */
  #main .framer-84rze.framer-v-1v2ntl9 .framer-1z7aqg-container,
  #main .framer-84rze.framer-v-1b2iiqh .framer-1z7aqg-container,
  #main .framer-84rze.framer-v-h9ghn1 .framer-1z7aqg-container {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #main .framer-84rze .framer-jh1l4.framer-gk64t {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Backdrop overlay dimming the page behind open drawer */
  .framer-5575sd-container:has(.framer-v-1b2iiqh)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: -1;
    animation: drawerBackdropFadeIn 0.32s ease-out forwards;
    cursor: pointer;
  }

  .framer-5575sd-container:has(.menu-closing)::before {
    animation: drawerBackdropFadeOut 0.26s ease-in forwards !important;
  }

  /* Mobile & Tablet drawer menu when open with smooth spring-unfold entry */
  #main header.framer-84rze.framer-v-1b2iiqh.framer-1vb53dl,
  #main .framer-84rze.framer-v-1b2iiqh,
  .framer-84rze.framer-v-1b2iiqh {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    overflow: hidden !important;
    padding: 0 clamp(16px, 4vw, 40px) 24px clamp(16px, 4vw, 40px) !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
    box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.22) !important;
    animation: none !important;
    transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Graceful closing state */
  #main header.framer-84rze.menu-closing.framer-1vb53dl,
  #main .framer-84rze.menu-closing,
  .framer-84rze.menu-closing {
    max-height: 96px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #main .framer-84rze.menu-closing .framer-cxdqtj,
  #main .framer-84rze.menu-closing .framer-1qzbmqo {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
    pointer-events: none !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh .framer-slrdhr,
  .framer-84rze.framer-v-1b2iiqh .framer-slrdhr {
    gap: 16px !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj,
  .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj {
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    animation: drawerNavSlideFade 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both !important;
  }

  /* Staggered cascade for drawer links */
  #main .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-97p3pe-container,
  .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-97p3pe-container {
    animation: drawerNavSlideFade 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-p4qqo8-container,
  .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-p4qqo8-container {
    animation: drawerNavSlideFade 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-1bb357q-container,
  .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-1bb357q-container {
    animation: drawerNavSlideFade 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-11x3d0h-container,
  .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-cxdqtj .framer-11x3d0h-container {
    animation: drawerNavSlideFade 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a,
  .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: var(--token-ac88bdb2-3c45-418b-8250-5746da7a4cc4, rgb(0, 0, 0)) !important;
    transition: background-color 0.18s ease, transform 0.15s ease !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a:hover,
  .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a:active,
  .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a:active {
    transform: scale(0.98) !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a p,
  .framer-84rze.framer-v-1b2iiqh .framer-cxdqtj a p {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-1qzbmqo,
  .framer-84rze.framer-v-1b2iiqh:not(.menu-closing) .framer-1qzbmqo {
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    animation: drawerNavSlideFade 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
  }

  #main .framer-84rze.framer-v-1b2iiqh .framer-1qzbmqo .framer-l80mdz-container,
  .framer-84rze.framer-v-1b2iiqh .framer-1qzbmqo .framer-l80mdz-container {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* Smooth morphing line transitions for Framer hamburger icon */
  .framer-gk64t,
  .framer-jh1l4 {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .framer-gk64t .framer-zqw3ha,
  .framer-gk64t .framer-i5iahc,
  .framer-jh1l4 .framer-zqw3ha,
  .framer-jh1l4 .framer-i5iahc {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
  }

  .framer-gk64t:hover,
  .framer-jh1l4:hover {
    transform: scale(1.05);
  }

  .framer-gk64t:active,
  .framer-jh1l4:active {
    transform: scale(0.95);
  }

  @keyframes drawerBackdropFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes drawerBackdropFadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes drawerNavSlideFade {
    0% {
      opacity: 0;
      transform: translateY(-12px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/*
 * ========================================================
 * RESPONSIVE YOUTUBE SHORTS (16:9 DESKTOP vs 9:16 MOBILE)
 * ========================================================
 */

/* Desktop & Laptop (810px and wider): 16:9 widescreen player frame with centered vertical short pillarboxing */
@media (min-width: 810px) {
  #main .framer-1bhhvyt-container,
  #main .framer-1ga00eh-container,
  #main .framer-b7blg9-container,
  #main .framer-1cgpdl2-container,
  #main .framer-h54iv1-container,
  .framer-1bhhvyt-container,
  .framer-1ga00eh-container,
  .framer-b7blg9-container,
  .framer-1cgpdl2-container,
  .framer-h54iv1-container {
    width: min(928px, 92vw) !important;
    max-width: 928px !important;
    height: 522px !important;
    min-height: 480px !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Force slideshow sections and slides to be immediately visible */
  #main .framer-1bhhvyt-container > section,
  #main .framer-1ga00eh-container > section,
  #main .framer-b7blg9-container > section,
  #main .framer-1cgpdl2-container > section,
  #main .framer-h54iv1-container > section,
  .framer-1bhhvyt-container > section,
  .framer-1ga00eh-container > section,
  .framer-b7blg9-container > section,
  .framer-1cgpdl2-container > section,
  .framer-h54iv1-container > section {
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #main .framer-1bhhvyt-container ul,
  #main .framer-1ga00eh-container ul,
  #main .framer-b7blg9-container ul,
  #main .framer-1cgpdl2-container ul,
  #main .framer-h54iv1-container ul,
  .framer-1bhhvyt-container ul,
  .framer-1ga00eh-container ul,
  .framer-b7blg9-container ul,
  .framer-1cgpdl2-container ul,
  .framer-h54iv1-container ul {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Desktop slide items */
  #main [data-framer-name="Bottom"] ul > li > div,
  [data-framer-name="Bottom"] ul > li > div,
  .framer-1bhhvyt-container ul > li > div,
  .framer-1cgpdl2-container ul > li > div,
  .framer-h54iv1-container ul > li > div,
  .framer-1ga00eh-container ul > li > div,
  .framer-b7blg9-container ul > li > div,
  .framer-1ircdqs,
  .framer-ewdvd3,
  .framer-12ccjgb,
  .framer-1b0fpyu,
  .framer-kfzx99,
  .framer-wil9el,
  .framer-kao1cu,
  .framer-hgzu5s,
  .framer-17fm3lr,
  .framer-17j299n,
  .framer-1ahjqz2,
  .framer-vzkyvk,
  .framer-1bdno5k,
  .framer-ypaide,
  .framer-snl78b,
  .framer-1oqazm3,
  .framer-da6sq5,
  .framer-1ch2g3v,
  .framer-hdkjng,
  .framer-behnlz,
  .framer-14aj5nc,
  .framer-13mlrim,
  .framer-4p4tpd,
  .framer-q1ppx6,
  .framer-1wslo06,
  .framer-1pvr9xg,
  .framer-1feur4v,
  .framer-1y7emat,
  .framer-6ii9im,
  .framer-xu8js2,
  .framer-bwk76u,
  .framer-10kuyii,
  .framer-689fd6,
  .framer-kz6az5,
  .framer-19op017,
  .framer-5hcz7c,
  .framer-1noxqbp,
  .framer-1pa0r4k,
  .framer-8x5jms {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Desktop inner slide wrappers inside list items only (DO NOT target outer slideshow container) */
  #main [data-framer-name="Bottom"] ul > li [class*="-container"] {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  /* Desktop article video player frame */
  #main [data-framer-name="Bottom"] article,
  [data-framer-name="Bottom"] article {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background-color: #0b0b0b !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Keep native vertical Shorts centered in the 16:9 frame without stretching or cropping */
  #main [data-framer-name="Bottom"] article img,
  [data-framer-name="Bottom"] article img {
    object-fit: contain !important;
    background: radial-gradient(circle at center, #181818 0%, #0a0a0a 100%) !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #main [data-framer-name="Bottom"] article iframe,
  [data-framer-name="Bottom"] article iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }
}

/* Mobile (under 810px): 9:16 vertical full-experience player */
@media (max-width: 809.98px) {
  #main .framer-6kjwut-container,
  #main .framer-10pknfi-container,
  #main .framer-cmh443-container,
  #main .framer-fcuigg-container,
  #main .framer-17tvrac-container,
  .framer-6kjwut-container,
  .framer-10pknfi-container,
  .framer-cmh443-container,
  .framer-fcuigg-container,
  .framer-17tvrac-container {
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: 340px !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    min-height: 520px !important;
    max-height: 600px !important;
    margin-inline: auto !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #main .framer-6kjwut-container > section,
  #main .framer-10pknfi-container > section,
  #main .framer-cmh443-container > section,
  #main .framer-fcuigg-container > section,
  #main .framer-17tvrac-container > section,
  .framer-6kjwut-container > section,
  .framer-10pknfi-container > section,
  .framer-cmh443-container > section,
  .framer-fcuigg-container > section,
  .framer-17tvrac-container > section {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Prevent Bottom parent container on mobile from being clamped to Framer's 201px */
  #main [data-framer-name="Bottom"],
  .framer-j4i1lf,
  .framer-1j678qz,
  .framer-1x5y3fl,
  .framer-136bfeh,
  .framer-1yv6z40 {
    height: auto !important;
    min-height: 520px !important;
  }

  /* Mobile slide items: 9:16 vertical orientation */
  #main [data-framer-name="Bottom"] ul > li > div,
  [data-framer-name="Bottom"] ul > li > div,
  .framer-6kjwut-container ul > li > div,
  .framer-10pknfi-container ul > li > div,
  .framer-cmh443-container ul > li > div,
  .framer-fcuigg-container ul > li > div,
  .framer-17tvrac-container ul > li > div,
  .framer-uvjz2g,
  .framer-u6rqbp,
  .framer-dqh3in,
  .framer-u65o7h,
  .framer-1ikztye,
  .framer-sf2c37,
  .framer-y659z6,
  .framer-a9wazj,
  .framer-1duxqoi,
  .framer-1aglbx6,
  .framer-yeqiui,
  .framer-wp59rk,
  .framer-ag7jpy,
  .framer-13h4pcv,
  .framer-10oqu8f,
  .framer-39wram,
  .framer-1piak7n,
  .framer-cfft72,
  .framer-v847ws,
  .framer-1ncpby,
  .framer-1iwbkuy,
  .framer-9epidx,
  .framer-mh835z,
  .framer-kcbr9k,
  .framer-knk71g,
  .framer-1gd5lqb,
  .framer-xz0tbj,
  .framer-14tjv3d,
  .framer-13siugy,
  .framer-1f7ux25,
  .framer-3dor1h,
  .framer-dlktjk,
  .framer-98njct,
  .framer-wdem7u,
  .framer-1fwg6of,
  .framer-1v4gyvf,
  .framer-7ozmmb,
  .framer-phdomp,
  .framer-f8czqv {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    max-width: 100% !important;
    border-radius: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile inner container inside slide items */
  #main [data-framer-name="Bottom"] ul > li [class*="-container"],
  [data-framer-name="Bottom"] ul > li [class*="-container"],
  #main .framer-qe7v7 .framer-phrtwn-container,
  #main .framer-qe7v7 .framer-wyix6e-container,
  #main .framer-qe7v7 .framer-5zgccn-container,
  #main .framer-qe7v7 .framer-b2wo79-container,
  #main .framer-qe7v7 .framer-c70tyz-container,
  #main .framer-qe7v7 .framer-1yke7we-container,
  #main .framer-qe7v7 .framer-1x0x775-container,
  #main .framer-qe7v7 .framer-jwh7dq-container,
  #main .framer-qe7v7 .framer-1fdgp0p-container,
  #main .framer-qe7v7 .framer-7efh22-container,
  #main .framer-qe7v7 .framer-izztd0-container,
  #main .framer-qe7v7 .framer-1d8at4z-container,
  #main .framer-qe7v7 .framer-13xytkb-container,
  #main .framer-qe7v7 .framer-141f4gm-container,
  #main .framer-qe7v7 .framer-1m9ol7w-container,
  #main .framer-qe7v7 .framer-ult9fs-container,
  #main .framer-qe7v7 .framer-1vfzo5u-container,
  #main .framer-qe7v7 .framer-id37az-container,
  #main .framer-qe7v7 .framer-1518srg-container,
  #main .framer-qe7v7 .framer-h4jzjl-container,
  #main .framer-qe7v7 .framer-11zm499-container,
  #main .framer-qe7v7 .framer-rijp1c-container,
  #main .framer-qe7v7 .framer-1nryisy-container,
  #main .framer-qe7v7 .framer-1dwg40k-container {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    position: relative !important;
  }

  /* Mobile article */
  #main [data-framer-name="Bottom"] article,
  [data-framer-name="Bottom"] article,
  #main .framer-qe7v7 [data-framer-name="Bottom"] article {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 20px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Fill available vertical 9:16 mobile frame with crisp cover */
  #main [data-framer-name="Bottom"] article img,
  [data-framer-name="Bottom"] article img,
  #main .framer-qe7v7 [data-framer-name="Bottom"] article img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #main [data-framer-name="Bottom"] article iframe,
  [data-framer-name="Bottom"] article iframe,
  #main .framer-qe7v7 [data-framer-name="Bottom"] article iframe {
    width: 100% !important;
    height: 100% !important;
  }
}

/*
 * ========================================================
 * SCROLL ANIMATION STABILITY & ACCESSIBILITY GUARDS
 * ========================================================
 */

/* Testimonial & Case Study cards: retain solid opacity once animated */
#main [data-framer-name="Case Study"] {
  overflow: visible !important;
}

#main .framer-np3llb,
#main .framer-ivzf8n,
#main .framer-122vfw4,
#main .framer-1rat9kk,
#main .framer-17qik8n,
#main .framer-17c7aj8,
#main .framer-rqn4v6,
#main .framer-1dqb62l {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Reduced motion accessibility support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #main [data-framer-appear-id] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/*
 * ========================================================
 * CARD GRID CONSISTENCY & ALIGNMENT REFINEMENTS
 * ========================================================
 */

:root {
  --card-grid-gap: clamp(16px, 2.5vw, 24px);
  --card-border-radius: 20px;
  --card-padding: 24px 20px;
  --card-bg: var(--token-d7def13e-f4d5-4c25-92c2-bbfe393f4b3e, #ffffff);
  --card-border: 1px solid rgba(0, 0, 0, 0.06);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 1. Selected Works Grid: Strict Row-First Grid, Centered, Equal Gaps */
#main [data-framer-name="Works-Section"] .framer-3u9vmd,
#main [data-framer-name="Works-Section"] .framer-c6tfrg {
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  margin-inline: auto !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
}

#main [data-framer-name="Works-Section"] .framer-1ywd07z,
#main [data-framer-name="Works-Section"] .framer-iroln3,
#main [data-framer-name="Works-Section"] .framer-1vt2a0y {
  display: grid !important;
  grid-auto-flow: row !important;
  gap: var(--card-grid-gap) !important;
  width: 100% !important;
  max-width: 1140px !important;
  height: auto !important;
  margin-inline: auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Desktop: 3 columns, equal 1fr widths */
@media (min-width: 1024px) {
  #main [data-framer-name="Works-Section"] .framer-1ywd07z {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 1fr !important;
  }
}

/* Tablet: 2 columns, equal 1fr widths */
@media (min-width: 641px) and (max-width: 1023.98px) {
  #main [data-framer-name="Works-Section"] .framer-1ywd07z,
  #main [data-framer-name="Works-Section"] .framer-iroln3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 1fr !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640.98px) {
  #main [data-framer-name="Works-Section"] .framer-1ywd07z,
  #main [data-framer-name="Works-Section"] .framer-iroln3,
  #main [data-framer-name="Works-Section"] .framer-1vt2a0y {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
  }
}

/* Individual Card Styling: reset arbitrary order, uniform padding, borders, stretch heights */
#main [data-framer-name="Works-Section"] .framer-1ywd07z > *,
#main [data-framer-name="Works-Section"] .framer-iroln3 > *,
#main [data-framer-name="Works-Section"] .framer-1vt2a0y > * {
  order: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 270px !important;
  box-sizing: border-box !important;
  border-radius: var(--card-border-radius) !important;
  padding: var(--card-padding) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--card-bg) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

#main [data-framer-name="Works-Section"] .framer-1ywd07z > *:hover,
#main [data-framer-name="Works-Section"] .framer-iroln3 > *:hover,
#main [data-framer-name="Works-Section"] .framer-1vt2a0y > *:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Image avatar consistency inside cards */
#main [data-framer-name="Works-Section"] [data-framer-background-image-wrapper="true"] {
  border-radius: 100px !important;
}

#main [data-framer-name="Works-Section"] .framer-1ywd07z img,
#main [data-framer-name="Works-Section"] .framer-iroln3 img,
#main [data-framer-name="Works-Section"] .framer-1vt2a0y img {
  border-radius: 100px !important;
  object-fit: cover !important;
}

/* Text alignment & spacing consistency inside cards */
#main [data-framer-name="Works-Section"] h6,
#main [data-framer-name="Works-Section"] h5,
#main [data-framer-name="Works-Section"] p {
  text-align: center !important;
  margin: 0 !important;
}

/* 2. Video Card Grids (Featured, Long-form, Shorts) */
#main [data-framer-name="The grid"],
#main .grid-cards {
  display: grid !important;
  grid-auto-flow: row !important;
  gap: var(--card-grid-gap) !important;
  border-radius: var(--card-border-radius) !important;
}

/* 3. Testimonial & Case Study Cards: Consistent gaps, padding, and radii */
#main [data-framer-name="Testimonials-Section"] .framer-1a487yf,
#main [data-framer-name="Case Study"] .framer-xy9zym {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--card-grid-gap) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#main .framer-np3llb,
#main .framer-ivzf8n,
#main .framer-122vfw4,
#main .framer-1rat9kk,
#main .framer-17qik8n,
#main .framer-17c7aj8,
#main .framer-rqn4v6,
#main .framer-1dqb62l {
  border-radius: var(--card-border-radius) !important;
  box-sizing: border-box !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

/* 4. FAQ Accordion Refinements */
#main .framer-1bhiz1z {
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

#main .framer-1bhiz1z:focus-visible {
  outline: 2px solid #ff4d00 !important;
  outline-offset: 3px !important;
}

#main .framer-vi4cvq {
  gap: 12px !important;
}

/*
 * ========================================================
 * REMOVE SHORT & LONG FORM BUTTONS
 * (As each has its own dedicated page and header menu)
 * ========================================================
 */
#main .framer-642a6j,
#main .framer-1mx0h8b,
#main [data-framer-name="LONG FORM BUTTON"],
#main [data-framer-name="Short Form button"],
#main .framer-1ln0beg-container,
#main .framer-4ts4dn-container,
#main .framer-a0pmf-container,
#main .framer-14ff7-container,
#main .framer-sxlk4x-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/*
 * ========================================================
 * ABOUT ME — MAIN SECTION ("MEET SHIV") ALIGNMENT
 * ========================================================
 */

/* 1. Fluid, centered outer section wrapper */
#main .framer-1gqgtoa-container,
.framer-1gqgtoa-container,
#main .framer-hrqji7-container,
.framer-hrqji7-container,
#main .framer-Bg2tW,
.framer-Bg2tW,
#main .framer-Bg2tW.framer-a1dcdk,
.framer-Bg2tW.framer-a1dcdk {
  width: 100% !important;
  max-width: 1300px !important;
  margin-inline: auto !important;
  padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* 2. Main content container: centered, fluid width */
#main .framer-Bg2tW .framer-10o47e0,
.framer-Bg2tW .framer-10o47e0 {
  width: 100% !important;
  max-width: 1160px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 3. Section Title ("Meet Shiv"): centered, solid visibility */
#main .framer-Bg2tW .framer-1r7jsyo,
.framer-Bg2tW .framer-1r7jsyo,
#main .framer-Bg2tW .framer-1lfe469,
.framer-Bg2tW .framer-1lfe469,
#main .framer-Bg2tW .framer-9kxwuu,
.framer-Bg2tW .framer-9kxwuu {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
}

#main .framer-Bg2tW .framer-riqbj,
.framer-Bg2tW .framer-riqbj {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

#main .framer-Bg2tW .framer-riqbj h2,
.framer-Bg2tW .framer-riqbj h2 {
  text-align: center !important;
  margin: 0 !important;
}

/* 4. Two-Column Bottom Layout (Desktop & Laptop: 810px+) */
@media (min-width: 810px) {
  #main .framer-Bg2tW .framer-1p9i2g,
  .framer-Bg2tW .framer-1p9i2g {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(36px, 5vw, 64px) !important;
    width: 100% !important;
    max-width: 1080px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Left photo card */
  #main .framer-Bg2tW .framer-1hqw0k9,
  .framer-Bg2tW .framer-1hqw0k9 {
    width: min(440px, 44%) !important;
    flex: 0 0 min(440px, 44%) !important;
    min-height: 520px !important;
    height: 560px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.12) !important;
  }

  /* Right bio content */
  #main .framer-Bg2tW .framer-twzi4k,
  .framer-Bg2tW .framer-twzi4k {
    flex: 1 1 0 !important;
    max-width: 540px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    gap: 24px !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* 5. Mobile & Narrow Viewports (under 810px): Centered Photo Card & Text */
@media (max-width: 809.98px) {
  #main .framer-Bg2tW .framer-1p9i2g,
  .framer-Bg2tW .framer-1p9i2g {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Left photo card: centered, contained width without viewport overflow */
  #main .framer-Bg2tW .framer-1hqw0k9,
  .framer-Bg2tW .framer-1hqw0k9 {
    width: 100% !important;
    max-width: min(340px, calc(100vw - 48px)) !important;
    height: clamp(380px, 85vw, 460px) !important;
    min-height: unset !important;
    padding: 0 !important;
    margin-inline: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
  }

  /* Right bio content: stacked below photo card, centered alignment */
  #main .framer-Bg2tW .framer-twzi4k,
  .framer-Bg2tW .framer-twzi4k {
    width: 100% !important;
    max-width: min(440px, calc(100vw - 48px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 24px !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 4px !important;
    margin-inline: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #main .framer-Bg2tW .framer-10huhfd,
  .framer-Bg2tW .framer-10huhfd {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
    margin-inline: auto !important;
  }

  #main .framer-Bg2tW .framer-1wduynd,
  .framer-Bg2tW .framer-1wduynd,
  #main .framer-Bg2tW .framer-1wduynd h3,
  .framer-Bg2tW .framer-1wduynd h3,
  #main .framer-Bg2tW .framer-1wduynd h4,
  .framer-Bg2tW .framer-1wduynd h4,
  #main .framer-Bg2tW .framer-1wduynd p,
  .framer-Bg2tW .framer-1wduynd p {
    text-align: center !important;
    --framer-text-alignment: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  #main .framer-Bg2tW .framer-1i4l9aj,
  .framer-Bg2tW .framer-1i4l9aj,
  #main .framer-Bg2tW .framer-1i4l9aj p,
  .framer-Bg2tW .framer-1i4l9aj p {
    text-align: center !important;
    --framer-text-alignment: center !important;
    width: 100% !important;
    line-height: 1.65 !important;
    margin: 0 auto !important;
  }

  #main .framer-Bg2tW .framer-12wbibl,
  .framer-Bg2tW .framer-12wbibl {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 14px !important;
    margin-inline: auto !important;
  }

  #main .framer-Bg2tW .framer-12wbibl > div,
  .framer-Bg2tW .framer-12wbibl > div,
  #main .framer-Bg2tW .framer-12wbibl .framer-Sb7Vx,
  .framer-Bg2tW .framer-12wbibl .framer-Sb7Vx,
  #main .framer-Bg2tW .framer-12wbibl .framer-n1svzf,
  .framer-Bg2tW .framer-12wbibl .framer-n1svzf {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  #main .framer-Bg2tW .framer-12wbibl p,
  .framer-Bg2tW .framer-12wbibl p,
  #main .framer-Bg2tW .framer-12wbibl .framer-text,
  .framer-Bg2tW .framer-12wbibl .framer-text {
    text-align: center !important;
    --framer-text-alignment: center !important;
    margin-inline: auto !important;
    width: 100% !important;
  }

  #main .framer-Bg2tW .framer-tarmlq-container,
  .framer-Bg2tW .framer-tarmlq-container,
  #main .framer-Bg2tW .framer-15wy32q-container,
  .framer-Bg2tW .framer-15wy32q-container,
  #main .framer-Bg2tW .framer-12sn8cd,
  .framer-Bg2tW .framer-12sn8cd {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  #main .framer-Bg2tW .framer-tarmlq-container a,
  .framer-Bg2tW .framer-tarmlq-container a {
    margin-inline: auto !important;
    text-align: center !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* 6. Desktop Content text typography and inner alignment */
@media (min-width: 810px) {
  #main .framer-Bg2tW .framer-10huhfd {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 18px !important;
  }

  #main .framer-Bg2tW .framer-1wduynd h3,
  #main .framer-Bg2tW .framer-1wduynd h4,
  #main .framer-Bg2tW .framer-1wduynd p {
    text-align: left !important;
    margin: 0 !important;
  }

  #main .framer-Bg2tW .framer-1i4l9aj p {
    text-align: left !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  #main .framer-Bg2tW .framer-12wbibl {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
  }

  #main .framer-Bg2tW .framer-12sn8cd {
    width: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }
}

#main .framer-Bg2tW .framer-1427doj {
  padding: 0 0 20px 20px !important;
  z-index: 2 !important;
}

/* -----------------------------------------------------------------------------
 * 14. Mobile Portfolio Carousel & "Be The Part" CTA Spacing Refinements
 * - Video Frame: Adapt from hardcoded 164px height to native 16:9 responsive frame
 *   with proper 20px curvature, preventing squished letterboxing and visual distortion.
 * - Button Spacing: Provide 32px breathing room between the bottom of the video
 *   carousel card / pagination dots and the "Be The Part" button.
 * ----------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Portfolio Video Carousel on Mobile */
  .framer-DmEN9 .framer-hajutj-container,
  #main .framer-hajutj-container {
    width: calc(100% - 32px) !important;
    max-width: 440px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 200px !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .framer-DmEN9 .framer-hajutj-container .framer-nsivw0,
  .framer-DmEN9 .framer-hajutj-container [class*="framer-p5hrqy"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-wfoogk"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-1h02te2"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-1317per"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-1vii1nz"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-17yr2v5"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-1kw5q31"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-1rw9ixx"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-ggpwau"],
  .framer-DmEN9 .framer-hajutj-container [class*="framer-1mumn2q"],
  .framer-DmEN9 .framer-hajutj-container li > div {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
  }

  .framer-DmEN9 .framer-hajutj-container article,
  #main .framer-hajutj-container article {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* Spacing for "Be The Part" button on mobile */
  .framer-DmEN9 .framer-r6lnjk-container,
  #main .framer-r6lnjk-container {
    margin-top: 32px !important;
    margin-bottom: 28px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .framer-DmEN9 .framer-r6lnjk-container .framer-X0Xqy,
  #main .framer-r6lnjk-container .framer-X0Xqy {
    margin: 0 auto !important;
  }
}

/* -----------------------------------------------------------------------------
 * 15. REAL TALKS Testimonial Cards — Red Metric Labels & Mobile Card Spacing
 * - Metric Labels: Transform "Subscriber" and "Views" labels from lime green (#61c554)
 *   to the signature brand red (#ff4d00) across all cards on all devices.
 * - Mobile Card Spacing: Expand container and card height from cramped 431px to 490px,
 *   adding 60px bottom padding so pagination dots have generous clearance and never
 *   overlap the metric numbers or labels.
 * ----------------------------------------------------------------------------- */
:root {
  --token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea: #ff4d00 !important;
}

#testimonial {
  --token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea: #ff4d00 !important;
}

#testimonial [style*="--token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea"],
#testimonial [class*="framer-"] p.framer-text[style*="97, 197, 84"],
#testimonial [class*="framer-"] p.framer-text[style*="--token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea"] {
  --token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea: #ff4d00 !important;
  color: #ff4d00 !important;
  --framer-text-color: #ff4d00 !important;
}

/* Explicit selector for all card metric label paragraphs (both desktop and mobile) */
#testimonial .framer-1g59wek p,
#testimonial .framer-1ou9je1 p,
#testimonial .framer-k01lsv p,
#testimonial .framer-tlza3c p,
#testimonial .framer-zhn8k7 p,
#testimonial .framer-5jhd1z p,
#testimonial .framer-1q1jzpk p,
#testimonial .framer-16u6xak p,
#testimonial .framer-1v6znbp p,
#testimonial .framer-vl0ej5 p,
#testimonial .framer-1qzpjis p,
#testimonial .framer-13272r8 p,
#testimonial .framer-144o7s7 p,
#testimonial .framer-1e7oezn p,
#testimonial .framer-68g280 p,
#testimonial .framer-1o6b1pm p,
#testimonial .framer-1bzjjom p,
#testimonial .framer-59ddu0 p,
#testimonial .framer-59e1my p,
#testimonial .framer-15zvkql p,
#testimonial .framer-hpm4tx p,
#testimonial .framer-uanqsd p {
  color: #ff4d00 !important;
  --framer-text-color: #ff4d00 !important;
}

/* Mobile carousel card sizing, internal padding, and pagination dots clearance */
@media (max-width: 809.98px) {
  .framer-DmEN9 .framer-1b735fu-container,
  #testimonial .framer-1b735fu-container,
  #main .framer-1b735fu-container {
    width: calc(100% - 32px) !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 520px !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  /* Hide intrusive arrow overlays that block testimonial quotes on mobile */
  #testimonial .framer-1b735fu-container .framer--carousel-controls,
  #main .framer-1b735fu-container .framer--carousel-controls {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Single full-width card snapping for Case Study / Testimonials */
  #testimonial .framer-1b735fu-container ul,
  #main .framer-1b735fu-container ul {
    width: 100% !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #testimonial .framer-1b735fu-container li,
  #main .framer-1b735fu-container li {
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #testimonial .framer-1b735fu-container .framer-slideshow {
    height: auto !important;
    min-height: 520px !important;
    border-radius: 36px !important;
  }

  #testimonial .framer-1b735fu-container .framer-hnz03m,
  #testimonial .framer-1b735fu-container .framer-1i92tb3,
  #testimonial .framer-1b735fu-container .framer-1e0ytpz,
  #testimonial .framer-1b735fu-container .framer-h0usmb,
  #testimonial .framer-1b735fu-container .framer-y68397,
  #testimonial .framer-1b735fu-container .framer-tajcpg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 520px !important;
    padding: 28px 20px 56px !important;
    border-radius: 36px !important;
    box-sizing: border-box !important;
  }

  /* Rounded video frame inside testimonial cards */
  #testimonial .framer-1b735fu-container article {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* Keep pagination dots clear of stats text and video frame */
  #testimonial .framer--slideshow-controls > div[style*="border-radius: 50px"],
  #testimonial .framer--slideshow-controls > div:last-child {
    bottom: 14px !important;
  }
}

/* -----------------------------------------------------------------------------
 * 16. SELECTED WORK Mobile Redesign
 * - Display single full-width 16:9 video card per view on mobile instead of
 *   awkwardly cramming 2 severely cropped portrait slices side-by-side.
 * - Ensure video thumbnails, titles, and play buttons are fully visible without
 *   letterbox cropping or distortion.
 * - Center the carousel and provide balanced spacing between video card,
 *   pagination indicators, and the "SEE ALL" button.
 * ----------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Mobile Carousel Container */
  .framer-DmEN9 .framer-19vpou8,
  .framer-ysnh56 .framer-19vpou8,
  #main .framer-19vpou8 {
    width: calc(100% - 32px) !important;
    max-width: 440px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 200px !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .framer-19vpou8 .framer-rnqohg-container,
  .framer-19vpou8 section,
  .framer-19vpou8 ul {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
  }

  /* Each slide takes 100% width of the carousel (1 card at a time) */
  .framer-19vpou8 .framer-zztrxq,
  .framer-19vpou8 .framer-fsic9q,
  .framer-19vpou8 .framer-blpeaw,
  .framer-19vpou8 .framer-18oxqis,
  .framer-19vpou8 li > div {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* Hide decorative frame SVG that distorts on mobile */
  .framer-19vpou8 [data-framer-name="graphic"],
  .framer-19vpou8 .framer-jl5p8p {
    display: none !important;
  }

  /* Card inner frame & article container */
  .framer-19vpou8 .framer-o057s0,
  .framer-19vpou8 .framer-1vhkvyw,
  .framer-19vpou8 .framer-17mmx2r,
  .framer-19vpou8 .framer-b3wds4 {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background-color: transparent !important;
  }

  .framer-19vpou8 .framer-1s5pamw-container,
  .framer-19vpou8 .framer-1t83f3r-container,
  .framer-19vpou8 .framer-1xtc71-container,
  .framer-19vpou8 .framer-dmga7f-container,
  .framer-19vpou8 .framer-m5f31g-container,
  .framer-19vpou8 article {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .framer-19vpou8 article img,
  .framer-19vpou8 article iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
  }

  /* Balance spacing for "SEE ALL" button */
  .framer-DmEN9 .framer-ysnh56 .framer-1p5odl8-container,
  .framer-ysnh56 .framer-1p5odl8-container {
    margin-top: 32px !important;
    margin-bottom: 24px !important;
    margin-inline: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
}

/* -----------------------------------------------------------------------------
 * 17. Short Page & Long Page Milestone Video Section Spacing
 * - Give clean vertical breathing room between video frames on mobile instead of
 *   video frames touching or overlapping each other.
 * - Hide intrusive center-overlay carousel arrow buttons on phone frames so video
 *   subjects / faces are clear and unobstructed.
 * ----------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Vertical video frames and milestone sections spacing on /short and /long */
  section.framer-lnwuj5,
  section.framer-wvuqw1 {
    margin-bottom: clamp(24px, 5vw, 40px) !important;
  }

  section.framer-1ykumps,
  section.framer-1druw5e,
  section.framer-1szpszq,
  section.framer-yyixlv,
  section.framer-4cgj37,
  section.framer-1fgodb8,
  section.framer-115gjz7,
  section.framer-1m3u1w9,
  section.framer-j50hv1,
  section.framer-16c5qf,
  section.framer-5zt1np,
  section.framer-1lmo0yu,
  section.framer-crc8es,
  section.framer-etbmz9,
  section.framer-13eyx0k,
  section.framer-u77axk {
    margin-bottom: clamp(36px, 8vw, 64px) !important;
    padding-bottom: clamp(16px, 4vw, 32px) !important;
  }

  /* Hide center-overlay carousel buttons on phone frames so faces/videos are unobstructed */
  section.framer-1druw5e .framer--carousel-controls,
  section.framer-1szpszq .framer--carousel-controls,
  section.framer-yyixlv .framer--carousel-controls,
  section.framer-4cgj37 .framer--carousel-controls,
  section.framer-1fgodb8 .framer--carousel-controls,
  section.framer-115gjz7 .framer--carousel-controls,
  section.framer-1m3u1w9 .framer--carousel-controls,
  section.framer-j50hv1 .framer--carousel-controls,
  section.framer-16c5qf .framer--carousel-controls,
  section.framer-5zt1np .framer--carousel-controls,
  section.framer-1lmo0yu .framer--carousel-controls {
    display: none !important;
    pointer-events: none !important;
  }
}

/* -----------------------------------------------------------------------------
 * 18. Contact Page: Prevent White Hero Card Overlap on Mobile
 * - Provide generous clearance so 'Let's Connect' section title is completely
 *   visible and cleanly separated from the hero card.
 * ----------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-HAkZr .framer-1gmu146,
  #hero.framer-1gmu146,
  #hero {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
    margin-bottom: 24px !important;
    padding-bottom: 32px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .framer-HAkZr .framer-1ifvr7k-container,
  .framer-1ifvr7k-container {
    margin-top: 0 !important;
    padding-top: 24px !important;
    position: relative !important;
    z-index: 1 !important;
  }
}









/* -----------------------------------------------------------------------------
 * 19. TESTIMONIALS & CASE STUDY Mobile Redesign & Continuous Spacing
 * - Carousel Clipping: Enforce single-card visibility on mobile by setting
 *   overflow: hidden on .framer-t6xn51-container, its slideshow section, and ul.
 *   Prevents adjacent cards from bleeding into view and showing two awkward half-cards.
 * - Continuous Spacing & Alignment:
 *   - Align author header, quote, metrics, and video thumbnail with consistent
 *     full card width (no more 240px cramped quote next to 370px chart).
 *   - Quote text wraps naturally with proper line-height (1.55) and left alignment.
 *   - Metrics (1.1M / 338M+) centered in a balanced 2-column layout.
 *   - Metric labels (Subscriber / Views) rendered in signature red (#ff4d00).
 *   - Video thumbnail formatted in 16:9 aspect-ratio with 16px rounded corners.
 *   - Pagination indicators positioned with generous 36px+ clearance below the
 *     video thumbnail so dots NEVER overlap video footage.
 *   - Case Study card (.framer-1s1pmxj) styled with matching container width,
 *     consistent internal padding, and harmonized media dimensions.
 *   - Section spacing: balanced margin-top (48px) for "(The Real Proof) CASE STUDY".
 * ----------------------------------------------------------------------------- */

/* Global Metric Labels: Brand Red across all cards site-wide */
:root,
body,
#main,
.framer-DmEN9,
.framer-t6xn51-container,
#testimonial {
  --token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea: #ff4d00 !important;
}

[style*="--token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea"],
p.framer-text[style*="--token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea"],
[class*="framer-"] p.framer-text[style*="97, 197, 84"],
[class*="framer-"] p.framer-text[style*="rgb(97, 197, 84)"] {
  --token-dbfcc30d-0b90-431b-b6f2-ed9e705de2ea: #ff4d00 !important;
  color: #ff4d00 !important;
  --framer-text-color: #ff4d00 !important;
}

@media (max-width: 809.98px) {
  /* --- Testimonials Section Wrapper --- */
  .framer-DmEN9 .framer-12lmt7p {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 730px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .framer-DmEN9 .framer-3vkjka {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* --- Testimonials Mobile Carousel Container --- */
  .framer-DmEN9 .framer-t6xn51-container {
    width: 100% !important;
    max-width: 400px !important;
    height: 710px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Hide intrusive arrow overlays that block testimonial quotes on mobile */
  .framer-t6xn51-container .framer--slideshow-controls > div:first-child,
  .framer-DmEN9 .framer-t6xn51-container .framer--slideshow-controls > div:first-child,
  #main .framer-t6xn51-container .framer--slideshow-controls > div:first-child {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Keep pagination dots clear of stats text and video frame on mobile */
  .framer-t6xn51-container .framer--slideshow-controls > div:last-child {
    bottom: 8px !important;
  }

  .framer-t6xn51-container .framer-slideshow,
  .framer-t6xn51-container section,
  .framer-t6xn51-container ul {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
  }

  .framer-t6xn51-container ul > li {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* --- Testimonials Card Outer Frame --- */
  .framer-t6xn51-container ul > li > div {
    width: calc(100% - 16px) !important;
    max-width: 380px !important;
    height: 660px !important;
    border-radius: 28px !important;
    padding: 24px 20px 44px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  /* Inner Card Content Stack */
  .framer-t6xn51-container .framer-4ud4tm,
  .framer-t6xn51-container .framer-14mfapg,
  .framer-t6xn51-container .framer-59p1j0,
  .framer-t6xn51-container [class*="framer-4ud4tm"],
  .framer-t6xn51-container [class*="framer-14mfapg"],
  .framer-t6xn51-container [class*="framer-59p1j0"],
  .framer-t6xn51-container [class*="framer-1vo2co9"],
  .framer-t6xn51-container [class*="framer-x6dlut"],
  .framer-t6xn51-container [class*="framer-1tfutuz"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Header Row: Avatar + Name / Subtitle */
  .framer-t6xn51-container [class*="framer-19j0rb6"],
  .framer-t6xn51-container [class*="framer-11oj11o"],
  .framer-t6xn51-container [class*="framer-xiimlo"],
  .framer-t6xn51-container [class*="framer-1h6ko3m"] {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  /* Quote Container & Typography */
  .framer-t6xn51-container [class*="framer-17rpjhi"],
  .framer-t6xn51-container [class*="framer-1kj365t"],
  .framer-t6xn51-container [class*="framer-ucnqgp"],
  .framer-t6xn51-container [class*="framer-8ufiyh"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .framer-t6xn51-container [class*="framer-17rpjhi"] p,
  .framer-t6xn51-container [class*="framer-1kj365t"] p,
  .framer-t6xn51-container [class*="framer-ucnqgp"] p,
  .framer-t6xn51-container [class*="framer-8ufiyh"] p {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    color: rgba(0, 0, 0, 0.82) !important;
  }

  /* Metrics Block: 1.1M / 338M+ */
  .framer-t6xn51-container [class*="framer-1eev93s"],
  .framer-t6xn51-container [class*="framer-dxysja"],
  .framer-t6xn51-container [class*="framer-ge328g"],
  .framer-t6xn51-container [class*="framer-5ynv9e"] {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    margin-bottom: 16px !important;
  }

  /* Video Thumbnail Frame */
  .framer-t6xn51-container [class*="framer-x4v9f2-container"],
  .framer-t6xn51-container .framer-jyawrq,
  .framer-t6xn51-container .framer-1q5zozv-container,
  .framer-t6xn51-container article {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 auto 36px auto !important;
  }

  .framer-t6xn51-container article img,
  .framer-t6xn51-container article iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* Pagination Dots Clearance: Cleanly at bottom below video */
  .framer-t6xn51-container .framer--slideshow-controls {
    pointer-events: none !important;
    position: absolute !important;
    bottom: 12px !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 24px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .framer-t6xn51-container .framer--slideshow-controls > div {
    pointer-events: auto !important;
    margin: 0 auto !important;
  }

  /* --- Section Heading Rhythm: (The Real Proof) CASE STUDY --- */
  .framer-DmEN9 .framer-1b24zrb {
    margin-top: 48px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* --- Case Study Section (Justin Bell Card) --- */
  .framer-DmEN9 .framer-1od2dri,
  #main .framer-1od2dri {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    padding: 0 16px !important;
    margin: 0 auto 48px auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
  }

  .framer-1od2dri .framer-1s1pmxj {
    width: calc(100% - 16px) !important;
    max-width: 380px !important;
    height: auto !important;
    border-radius: 28px !important;
    padding: 24px 20px 32px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .framer-1od2dri .framer-u0fxd8,
  .framer-1od2dri .framer-ar33en,
  .framer-1od2dri .framer-qf5m6 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .framer-1od2dri .framer-6358ii {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .framer-1od2dri .framer-3iv5l4 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 14px !important;
  }

  .framer-1od2dri .framer-3iv5l4 p {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    color: rgba(0, 0, 0, 0.82) !important;
  }

  .framer-1od2dri .framer-acp4vj,
  .framer-1od2dri .framer-acp4vj img {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 370 / 107 !important;
    border-radius: 12px !important;
    margin: 8px auto 16px auto !important;
    display: block !important;
  }

  .framer-1od2dri .framer-j1amun,
  .framer-1od2dri .framer-9oo32d-container,
  .framer-1od2dri article {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  .framer-1od2dri article img,
  .framer-1od2dri article iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
}