/* Frontida public homepage responsive consolidation — 2026-08-31
   Final overrides loaded after all homepage presentation layers.
   Keeps approved desktop styling while defining predictable phone/tablet behavior. */

.public-home,
.public-home main,
.public-home section{max-width:100%;overflow-x:clip}
.public-home .section-shell,
.public-home .nav-inner,
.public-home .contact-shell{box-sizing:border-box;min-width:0}
.public-home img{max-width:100%}
.public-home .hero-copy,
.public-home .hero-copy>div,
.public-home .purpose-copy,
.public-home .why-copy,
.public-home .careers-banner-copy,
.public-home .contact-form-wrap,
.public-home .contact-details{min-width:0}

/* Tablet / small laptop */
@media (max-width:1100px){
  .public-home .section-shell,
  .public-home .contact-shell,
  .public-home .nav-inner{width:min(100% - 40px,960px)!important}

  .public-home .site-nav .nav-inner{height:72px!important}
  .public-home .nav-brand img{height:42px!important}

  .public-home .hero{
    min-height:auto!important;
    padding-top:72px!important;
  }
  .public-home .hero .section-shell.hero-layout{
    width:min(100% - 40px,900px)!important;
    max-width:900px!important;
    min-height:0!important;
    margin-inline:auto!important;
    padding:46px 0 86px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
    text-align:center!important;
  }
  .public-home .hero-copy{
    width:100%!important;
    max-width:760px!important;
    margin-inline:auto!important;
  }
  .public-home .hero-badge{justify-content:center!important;margin-bottom:14px!important}
  .public-home .hero h1{
    margin:0 auto 20px!important;
    max-width:760px!important;
    font-size:clamp(46px,7vw,62px)!important;
    line-height:1.02!important;
    text-wrap:balance;
  }
  .public-home .hero-copy>div>p{
    max-width:660px!important;
    margin:0 auto 24px!important;
    font-size:16px!important;
    line-height:1.62!important;
    text-wrap:pretty;
  }
  .public-home .hero-buttons{justify-content:center!important}
  .public-home .hero-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:min(100%,520px)!important;
    margin:26px auto 0!important;
    gap:0!important;
  }
  .public-home .hero-stats div{
    min-width:0!important;
    padding:0 16px!important;
    border-right:1px solid #d8e2da!important;
    text-align:center!important;
  }
  .public-home .hero-stats div:last-child{border-right:0!important}
  .public-home .hero-stats span{white-space:nowrap}
  .public-home .hero-stats small{
    display:block!important;
    max-width:100%!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }

  /* Keep the important admin-controlled group photo visible on tablets. */
  .public-home .hero-collage{
    display:block!important;
    position:relative!important;
    justify-self:center!important;
    width:min(100%,760px)!important;
    max-width:760px!important;
    height:410px!important;
    margin:0 auto!important;
    transform:none!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .public-home .hero-collage .collage-main{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:22px!important;
    object-fit:cover!important;
    object-position:center 38%!important;
  }
  .public-home .hero-wave{height:70px!important}
  .public-home .hero-wave svg{height:50px!important}

  .public-home .purpose-showcase,
  .public-home .why-grid,
  .public-home .contact-grid{grid-template-columns:1fr!important}
  .public-home .purpose-showcase{gap:34px!important}
  .public-home .purpose-copy{max-width:760px;margin-inline:auto}
  .public-home .purpose-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .public-home .why-grid{gap:36px!important}
  .public-home .why-photo{width:min(100%,720px);margin-inline:auto}
  .public-home .careers-banner{grid-template-columns:1fr!important}
  .public-home .careers-banner>img{height:360px!important;min-height:0!important}
  .public-home .careers-banner-copy{padding:34px!important}
  .public-home .contact-grid{overflow:hidden}
}

/* Phone landscape / compact tablet */
@media (max-width:760px){
  .public-home .section-shell,
  .public-home .contact-shell,
  .public-home .nav-inner{width:calc(100% - 28px)!important}

  .public-home .hero .section-shell.hero-layout{
    width:calc(100% - 28px)!important;
    padding:36px 0 80px!important;
    gap:28px!important;
  }
  .public-home .hero h1{font-size:clamp(38px,9vw,50px)!important}
  .public-home .hero-collage{height:330px!important}

  .public-home .product-showcase{padding-inline:34px!important}
  .public-home .product-grid{grid-auto-columns:min(72vw,330px)!important;gap:12px!important}
  .public-home .product-image-wrap{height:180px!important}

  .public-home .purpose-grid{grid-template-columns:1fr!important}
  .public-home .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .public-home .why-strengths{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .public-home .jobs-grid{grid-template-columns:1fr!important}
  .public-home .perks-grid,
  .public-home .perks-grid.perks-grid-full{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .public-home .site-footer>div{
    width:calc(100% - 28px)!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
  }
}

/* Phones */
@media (max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  .public-home .site-nav{height:auto!important}
  .public-home .site-nav .nav-inner{height:70px!important}
  .public-home .nav-brand img{height:38px!important;max-width:170px!important}
  .public-home .nav-toggle{width:44px!important;height:44px!important;flex:0 0 44px!important}
  .public-home .mobile-menu{max-height:calc(100dvh - 70px);overflow-y:auto;padding:10px 16px 20px!important}
  .public-home .mobile-menu>a{min-height:44px;display:flex;align-items:center}
  .public-home .mobile-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  .public-home .mobile-actions a{display:flex!important;min-width:0!important;min-height:44px!important;align-items:center;justify-content:center}

  .public-home .hero{
    min-height:auto!important;
    padding-top:70px!important;
    background:#f7faf7!important;
  }
  .public-home .hero-photo{
    opacity:1!important;
    filter:saturate(.65) contrast(.94) brightness(1.05)!important;
    background-position:center top!important;
  }
  .public-home .hero-photo:after{
    background:rgba(248,251,248,.90)!important;
  }
  .public-home .hero .section-shell.hero-layout{
    width:calc(100% - 32px)!important;
    padding:42px 0 74px!important;
    gap:26px!important;
    text-align:center!important;
  }
  .public-home .hero-badge{
    display:block!important;
    margin:0 auto 14px!important;
    font-size:13px!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  .public-home .hero h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto 20px!important;
    padding:0!important;
    font-size:clamp(35px,10.1vw,44px)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
    text-align:center!important;
    overflow-wrap:normal!important;
  }
  .public-home .hero h1 br{display:none!important}
  .public-home .hero h1 em{display:block!important;margin-top:4px!important}
  .public-home .hero-copy>div>p{
    width:100%!important;
    max-width:35rem!important;
    margin:0 auto 24px!important;
    padding:0!important;
    font-size:15px!important;
    line-height:1.62!important;
    text-align:center!important;
  }
  .public-home .hero-buttons{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:360px!important;
    margin:0 auto!important;
    gap:12px!important;
  }
  .public-home .hero .primary-button,
  .public-home .hero .glass-button{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:12px 18px!important;
    font-size:14px!important;
  }
  .public-home .hero-stats{
    width:100%!important;
    max-width:390px!important;
    margin:28px auto 0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .public-home .hero-stats div{
    min-width:0!important;
    padding:0 8px!important;
  }
  .public-home .hero-stats strong{font-size:23px!important}
  .public-home .hero-stats small{
    margin-top:4px!important;
    font-size:8px!important;
    line-height:1.25!important;
    letter-spacing:.055em!important;
  }
  .public-home .hero-collage{
    display:block!important;
    width:100%!important;
    max-width:430px!important;
    height:245px!important;
    margin:2px auto 0!important;
    border-radius:18px!important;
    box-shadow:0 12px 28px rgba(15,75,34,.10)!important;
  }
  .public-home .hero-collage .collage-main{border-radius:18px!important;object-position:center 36%!important}
  .public-home .hero-wave{height:54px!important}
  .public-home .hero-wave svg{height:40px!important}

  .public-home .products-section{padding:48px 0 58px!important}
  .public-home .product-section-heading{margin-bottom:22px!important}
  .public-home .product-section-heading>span{font-size:10px!important;line-height:1.35!important}
  .public-home .product-section-heading h2{font-size:clamp(32px,9vw,38px)!important}
  .public-home .product-showcase{padding-inline:30px!important}
  .public-home .product-grid{grid-auto-columns:82vw!important;gap:12px!important;padding-bottom:12px!important}
  .public-home .product-card{min-width:0!important;border-radius:14px!important}
  .public-home .product-image-wrap{height:190px!important;padding:16px!important}
  .public-home .product-image{max-height:160px!important}
  .public-home .product-copy{min-height:60px!important;padding:10px 12px 14px!important}
  .public-home .product-copy h3{font-size:15px!important}
  .public-home .product-nav{width:32px!important;height:32px!important;font-size:24px!important}
  .public-home .product-nav-prev{left:-1px!important}
  .public-home .product-nav-next{right:-1px!important}
  .public-home .product-expand-button{min-height:42px!important;padding:10px 20px!important;font-size:12px!important}
  .public-home .product-showcase[data-expanded="true"] .product-grid{grid-template-columns:1fr!important;gap:16px!important}
  .public-home .product-showcase[data-expanded="true"] .product-card{width:100%!important;max-width:430px!important;margin-inline:auto!important}
  .public-home .product-showcase[data-expanded="true"] .product-image-wrap{height:230px!important}

  .public-home .purpose-section,
  .public-home .values-section,
  .public-home .why-section,
  .public-home .careers-section,
  .public-home .contact-section{padding:54px 0 58px!important}
  .public-home .purpose-showcase{gap:28px!important}
  .public-home .purpose-feature-photo{min-height:0!important;height:auto!important;border-radius:18px!important}
  .public-home .purpose-feature-photo>img{height:290px!important;min-height:0!important;object-position:center!important}
  .public-home .purpose-photo-caption{right:12px!important;bottom:12px!important;left:12px!important;padding:11px 13px!important}
  .public-home .purpose-copy>h2{font-size:clamp(30px,8vw,38px)!important;line-height:1.08!important}
  .public-home .purpose-copy>p{font-size:15px!important;line-height:1.65!important}
  .public-home .purpose-grid{grid-template-columns:1fr!important;gap:14px!important}
  .public-home .purpose-card{min-height:0!important;padding:20px!important;border-radius:16px!important}
  .public-home .purpose-card h3{font-size:18px!important}
  .public-home .purpose-card p{font-size:14px!important;line-height:1.62!important}

  .public-home .frontida-letters{gap:4px!important;margin-bottom:24px!important}
  .public-home .frontida-letters span{width:34px!important;height:38px!important;font-size:17px!important}
  .public-home .values-grid{grid-template-columns:1fr!important;gap:12px!important}
  .public-home .value-card{max-width:430px;width:100%;margin-inline:auto}
  .public-home .value-photo{height:205px!important}
  .public-home .value-photo h3{font-size:17px!important}

  .public-home .why-grid{gap:30px!important}
  .public-home .why-copy{text-align:center}
  .public-home .why-copy h2{font-size:clamp(30px,8vw,38px)!important}
  .public-home .why-copy p{font-size:14px!important;line-height:1.65!important}
  .public-home .why-strengths{grid-template-columns:1fr!important;gap:9px!important}
  .public-home .why-strengths span{text-align:left!important}
  .public-home .why-photo img{height:280px!important;border-radius:16px!important}

  .public-home .careers-heading{margin-bottom:28px!important;padding-inline:0!important}
  .public-home .careers-heading h2{font-size:clamp(30px,8vw,39px)!important;line-height:1.08!important}
  .public-home .careers-heading p{font-size:15px!important;line-height:1.6!important}
  .public-home .careers-banner{grid-template-columns:1fr!important;min-height:0!important;border-radius:16px!important}
  .public-home .careers-banner>img{height:260px!important;min-height:0!important}
  .public-home .careers-banner-copy{padding:24px 20px!important}
  .public-home .careers-banner-copy h3{font-size:28px!important;line-height:1.08!important}
  .public-home .career-highlights{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .public-home .career-highlights span{font-size:11px!important}
  .public-home .perks-grid,
  .public-home .perks-grid.perks-grid-full{grid-template-columns:1fr!important}
  .public-home .career-perks{padding:34px 18px!important;border-radius:16px!important}
  .public-home .career-resume.career-resume-banner{padding:20px 16px!important}
  .public-home .career-resume-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .public-home .career-resume-actions a{width:100%!important;min-width:0!important}

  .public-home .contact-grid{grid-template-columns:1fr!important;border-radius:16px!important}
  .public-home .contact-form-wrap,
  .public-home .contact-details{padding:24px 18px!important}
  .public-home .contact-form input,
  .public-home .contact-form textarea{font-size:16px!important}

  .public-home .site-footer{padding:24px 0!important}
  .public-home .site-footer>div{width:calc(100% - 28px)!important;gap:12px!important}
  .public-home .site-footer img{height:38px!important}
  .public-home .site-footer p{font-size:12px!important;line-height:1.5!important}
  .public-home .footer-links{justify-content:center!important;flex-wrap:wrap!important}
}

/* Very narrow phones (320–389px). */
@media (max-width:389px){
  .public-home .section-shell,
  .public-home .contact-shell,
  .public-home .nav-inner,
  .public-home .hero .section-shell.hero-layout{width:calc(100% - 24px)!important}
  .public-home .nav-brand img{height:35px!important;max-width:150px!important}
  .public-home .hero h1{font-size:clamp(32px,9.9vw,38px)!important}
  .public-home .hero-copy>div>p{font-size:14px!important}
  .public-home .hero-stats div{padding:0 5px!important}
  .public-home .hero-stats strong{font-size:21px!important}
  .public-home .hero-stats small{font-size:7.5px!important;letter-spacing:.035em!important}
  .public-home .hero-collage{height:220px!important}
  .public-home .product-showcase{padding-inline:26px!important}
  .public-home .product-grid{grid-auto-columns:84vw!important}
  .public-home .frontida-letters span{width:31px!important;height:35px!important;font-size:16px!important}
}

@media (prefers-reduced-motion:reduce){
  .public-home .product-grid{scroll-behavior:auto!important}
}

@media (max-width:640px){
  .public-home .modal-dialog,
  .public-home .career-apply-dialog,
  .public-home .resume-dialog{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    max-height:92dvh!important;
    margin:10px auto!important;
    overflow-y:auto!important;
    border-radius:16px!important;
  }
  .public-home .modal-body{padding:22px 18px 24px!important}
  .public-home .modal-image-wrap>img{height:210px!important;object-fit:contain!important}
  .public-home input,
  .public-home select,
  .public-home textarea{max-width:100%;box-sizing:border-box}
}