/* === Mobile polish for hero, video, and marquee (add-only) === */

/*HEADER*/
@media (max-width: 1300px) {
  .site-header .nav-links { display: none !important; }
  .site-header .nav-box.cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .site-header .nav-box.cta{
    white-space: nowrap;
    padding-left: 1rem;   /* overrides the 250px desktop padding */
    padding-right: 1rem;
    min-width: max-content;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }
}
@media (max-width: 640px) {
  .feature-title {
  font-size: clamp(2.5rem, 8vw, 2rem);
  line-height: 1.06;
  }
}



@media (max-width: 1200px) {
  .site-header .nav-container {
    padding-left: clamp(12px, 3.5vw, 24px) !important;
    padding-right: clamp(12px, 3.5vw, 24px) !important;
  }

  .site-header .nav-bar {
    width: 100% !important;            /* extends to new side padding */
    backdrop-filter: blur(12px);        /* keep glass effect */
    background-color: rgb(2 2 2 / 40%); /* keep translucency */
  }

  .site-header .nav-box {
    font-size: clamp(0.9rem, 2.6vw, 1.05rem) !important;
    line-height: 1 !important;
  }

  /* tame inline 1.6rem START size on some resolutions */
  .site-header .nav-box.cta {
    font-size: clamp(1rem, 3.1vw, 1.25rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }
}



@media (max-width: 640px){
  header.site-header .nav-box.logo svg{
    height: 2.5rem !important;  /* EXACT match to other header (h-10) */
    width: auto !important;
    display: block;
  }
  header.site-header .nav-box.logo svg text{
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }
}














@media (max-width: 640px) {
  .box-highlight h1.custom-font {
    font-size: clamp(1.2rem, 5.5vw, 2rem) !important;
  }
  .custom-bg .scroll-line {
    font-size: clamp(3rem, 3vw, 1rem) !important;
  }
}









/*SECTION BG*/
@media (max-width: 1075px) {
  section.bg-white.text-left { padding: 3rem 1rem !important; }
  section.bg-white.text-left .max-w-5xl{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  section.bg-white.text-left h2{
    font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
  }
  section.bg-white.text-left h2 .gradient-ideas{
    font-size: 1.15em !important;
    display: inline;
  }
  .rotating-image-abs{ display: none !important; }
  section.bg-white.text-left .w-full.rounded-2xl.overflow-hidden{ border-radius: 14px; }
  section.bg-white.text-left .w-full.rounded-2xl.overflow-hidden img{ width:100%; height:auto; display:block; }
}








/*FOOTER*/
@media (max-width: 1300px) {
  footer.site-footer--centered-brand .brand-contact{
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 .5rem !important;
    margin-top: .5rem !important;
    white-space: normal !important;
  }

  footer.site-footer--centered-brand .brand-social{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    z-index: 1 !important;
  }

  footer.site-footer--centered-brand .brand-social a{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cfcfcf !important;
    transition: transform .12s ease, color .12s ease !important;
  }

  footer.site-footer--centered-brand .brand-social svg{
    width: 18px !important;
    height: 18px !important;
    display:block !important;
  }

  footer.site-footer--centered-brand .brand-email{
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 95% !important;
    padding: 0 !important;
  }

  .site-footer--centered-brand .brand-email{
    right:auto;
  }

}




@media (max-width: 560px){
  .site-footer .footer-bottom .legal-links{
    display: flex;             /* robust regardless of parent layout */
    justify-content: center;   /* center horizontally */
    width: 100%;
    margin-top: .5rem;
    text-align: center;
  }
  .site-footer .footer-bottom .legal-links a{
    display: inline-block;     /* keeps it tidy if more links are added */
  }
}
@media (max-width: 560px){
  .site-footer .footer-bottom > span:first-child{
    grid-column: 1 / -1;   /* full width of the grid row */
    justify-self: center;  /* center within grid */
    text-align: center;
    width: 100%;
    display: block;
  }
}














@media (max-width: 768px) {
  /* contain stray px and trim padding */
  .custom-bg { overflow-x: hidden; }
  .custom-bg.text-left.px-12.py-24 {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* switch grid -> stacked flex on phones */
  .custom-bg .grid {
    display: flex !important;          /* override Tailwind's grid */
    flex-direction: column;
    gap: 1.25rem;                      /* ~gap-5 */
  }

  /* preserve the alternation by reversing even sections */
  section.custom-bg:nth-of-type(even) .grid {
    flex-direction: column-reverse;
  }

  /* make children shrink correctly; avoid accidental overlap */
  .custom-bg .grid > * {
    min-width: 0;
    max-width: 100%;
  }

  /* typography: long words must break; keep sizes sane */
  .custom-bg h2,
  .custom-bg h2 span,
  .custom-bg p {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  .custom-bg h2 { font-size: clamp(1.6rem, 10.5vw, 2.6rem); line-height: 1.1; }
  .custom-bg img,
  .custom-bg video,
  .custom-bg svg {
    display: block;
    max-width: 100%;
  }
}





/*LEARN THE STORY SECTION*/
@media (max-width: 1024px) {
  .feature-section {
    padding: clamp(3rem, 10vw, 4rem) clamp(16px, 5vw, 24px) !important;
  }

  .feature-container {
    flex-direction: column !important;
    gap: clamp(1.25rem, 3.5vw, 2rem) !important;
  }

  .feature-left,
  .feature-right {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .feature-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
  }

  .feature-button {
    max-width: 100% !important;
    width: fit-content !important;     /* why: stay compact but never overflow */
  }
  .feature-button .cta-text { 
    font-size: clamp(1rem, 3.2vw, 1.2rem) !important;
    padding: .9rem 1.25rem !important;
  }
  .feature-button .cta-icon { 
    font-size: clamp(1.2rem, 3.4vw, 1.6rem) !important;
    padding: 0 .9rem !important;
  }

  .feature-right { gap: clamp(1rem, 3vw, 1.5rem) !important; }
  .feature-item { gap: .9rem !important; align-items: flex-start !important; }
  .icon-square {
    width: 1.1rem !important;
    height: 1.1rem !important;
    margin-top: .35rem !important;
    flex-shrink: 0 !important;
    border-radius: 3px !important;
  }

  .feature-item h3 { font-size: clamp(1.05rem, 3.2vw, 1.2rem) !important; margin-bottom: .35rem !important; }
  .feature-item p  { font-size: clamp(.95rem, 3vw, 1.05rem) !important; line-height: 1.55 !important; }
}








@media (max-width: 390px) { /* small phones (SE/mini) */
  #cap-cta .start-button1 {
    min-height: 44px !important;
    padding-inline: 8px !important;
    gap: 8px !important;
  }
  #cap-cta .start-button1 .cta-text {
    font-size: clamp(.9rem, 3.8vw, 1.0rem) !important;
    padding: .75rem .9rem !important;
    white-space: nowrap !important; /* keep “START NOW” on one line */
  }
  #cap-cta .start-button1 .cta-icon { padding: 0 .6rem !important; }
  #cap-cta .start-button1 .cta-icon svg { width: 18px !important; height: 18px !important; }
}

@media (min-width: 391px) and (max-width: 430px) { /* most iPhone 13/14/15 widths */
  #cap-cta .start-button1 {
    min-height: 48px !important;
    padding-inline: 10px !important;
    gap: 10px !important;
  }
  #cap-cta .start-button1 .cta-text {
    font-size: clamp(.98rem, 3.4vw, 1.1rem) !important;
    padding: .85rem 1.05rem !important;
    white-space: nowrap !important;
  }
  #cap-cta .start-button1 .cta-icon { padding: 0 .75rem !important; }
  #cap-cta .start-button1 .cta-icon svg { width: 20px !important; height: 20px !important; }
}

@media (min-width: 431px) and (max-width: 540px) { /* larger phones / small phablets */
  #cap-cta .start-button1 {
    min-height: 56px !important;
  }
  #cap-cta .start-button1 .cta-text {
    font-size: clamp(1.02rem, 3vw, 1.18rem) !important;
    padding: .95rem 1.15rem !important;
  }
  #cap-cta .start-button1 .cta-icon svg { width: 22px !important; height: 22px !important; }
}















@media (max-width: 1024px){
  #brand-story .story-wrap{
    margin-top: 0 !important;
    padding: clamp(2rem, 8vw, 3.5rem) clamp(16px, 5vw, 24px) !important;
    gap: clamp(.9rem, 3vw, 1.25rem) !important;
  }
  #brand-story .story-title{
    font-size: clamp(2rem, 10vw, 3rem) !important; /* like .feature-title */
    line-height: 1.06 !important;
    letter-spacing: .02em !important;
    text-wrap: balance;
  }
  #brand-story .story-title .gradient-ideas{
    font-size: 1.15em !important;      /* scales “USEFUL” with the title */
    display: inline !important;
  }
  /* undo global .custom-bg phone breaking for this one heading */
  #brand-story .story-title,
  #brand-story .story-title span{
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: manual !important;
  }
  #brand-story .story-grid{ grid-template-columns: 1fr !important; }
  #brand-story .story-main p{
    font-size: clamp(.98rem, 3vw, 1.05rem) !important;
    line-height: 1.55 !important;
    text-wrap: pretty;
  }
}
@media (max-width: 390px){ /* mini phones */
  #brand-story .story-title .gradient-ideas{
    font-size: 1.06em !important;      /* tiny nudge so “USEFUL” fits */
    letter-spacing: .005em !important;
  }
}











@media (max-width: 768px) {
  .custom-bg h2,
  .custom-bg h2 span {
    overflow-wrap: normal !important;
    word-break: normal !important; /* (or: keep-all) */
    hyphens: manual !important;
    text-wrap: balance; /* nicer wrapping for multi-word titles */
  }
}

/* Safety: slightly smaller headings on tiny screens */
@media (max-width: 420px) {
  .custom-bg h2 {
    font-size: clamp(1.35rem, 9vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }
}



@media (max-width: 768px) {
  /* START page: keep Image then Text, repeating */
  .custom-bg .start-pairs {
    flex-direction: column !important; /* overrides your even-section reverse */
  }

  /* reorder 6 children: 2,1,3,4,6,5 => Image,Text,Image,Text,Image,Text */
  .custom-bg .start-pairs > :nth-child(1) { order: 2 !important; }
  .custom-bg .start-pairs > :nth-child(2) { order: 1 !important; }
  .custom-bg .start-pairs > :nth-child(3) { order: 3 !important; }
  .custom-bg .start-pairs > :nth-child(4) { order: 4 !important; }
  .custom-bg .start-pairs > :nth-child(5) { order: 6 !important; }
  .custom-bg .start-pairs > :nth-child(6) { order: 5 !important; }
}