@media (max-width: 900px){
  .section{padding:64px 0}
  .header-inner{height:72px}
  .brand-name{font-size:33px}
  .brand-slogan{font-size:12px}
  .brand-separator{font-size:18px}
  .main-nav{
    position:absolute;left:0;right:0;top:72px;
    background:var(--red);border-bottom:1px solid rgba(0,0,0,.08);
    display:none;flex-direction:column;align-items:flex-start;
    padding:22px 20px 26px;gap:18px;
  }
  .main-nav.is-open{display:flex}
  .nav-toggle{display:block}
  .grid-2{grid-template-columns:1fr;gap:30px}
  .hero h1{letter-spacing:-2.5px}
  .media-placeholder{min-height:340px}
  .principles{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:1fr}
  .brand-strip{grid-template-columns:repeat(2,1fr)}
  .channel-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width: 560px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .section{padding:52px 0}
  .hero{padding-top:32px}
  .hero h1{font-size:48px;line-height:1.02;letter-spacing:-1.8px}
  h2{font-size:38px}
  .lead{font-size:18px}
  .channel-grid{grid-template-columns:1fr}
  .brand-strip{grid-template-columns:1fr 1fr}
  .actions .btn{width:100%}
}


@media (max-width: 640px){
  .brand-signature{gap:7px}
  .brand-slogan{max-width:125px;white-space:normal;line-height:1.15}
}

@media (max-width: 420px){
  .brand-slogan{display:none}
  .brand-separator{display:none}
}


@media (max-width: 900px){
  .contact-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 560px){
  .red-band{
    padding:54px 0;
  }
  .red-band p{
    font-size:16px;
  }
  .contact-inner .btn{
    width:100%;
  }
}


@media (max-width: 900px){
  .production-points{
    grid-template-columns:1fr;
  }
  .production-media{
    min-height:380px;
    position:static;
  }
}


@media (max-width: 1050px){
  .brand-feature-grid{
    grid-template-columns:1fr 1fr;
  }
  .brand-feature--nutarel{
    grid-column:1 / -1;
    min-height:auto;
  }
}

@media (max-width: 720px){
  .brand-feature-grid{
    grid-template-columns:1fr;
  }
  .brand-feature--nutarel{
    grid-column:auto;
  }
  .brand-feature{
    min-height:auto;
  }
  .brand-family-head{
    display:block;
  }
  .brand-family-head > p:last-child{
    margin-top:10px;
  }
  .brand-family-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 420px){
  .brand-family-grid{
    grid-template-columns:1fr;
  }
}


@media (max-width: 900px){
  .brand-hero-card{
    grid-template-columns:1fr;
  }
  .brand-family-grid--six{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 520px){
  .brand-hero-card{
    padding:26px;
  }
  .brand-family-grid--six{
    grid-template-columns:1fr;
  }
}


@media (max-width: 980px){
  .channel-grid--six{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 620px){
  .channel-grid--six{
    grid-template-columns:1fr;
  }
  .channel-grid--six .channel-card{
    min-height:auto;
  }
}


@media (max-width: 560px){
  .eyebrow{
    font-size:12px;
    padding:8px 13px;
    margin-bottom:16px;
  }
}


@media (max-width: 900px){
  .natureal-store-grid{
    grid-template-columns:1fr;
  }
}


@media (max-width: 900px){
  .contact-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-grid-final{
    grid-template-columns:1fr 1fr;
  }
  .footer-about{
    grid-column:1 / -1;
  }
  .copyright{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .footer-legal{
    margin-left:0;
  }
}

@media (max-width: 560px){
  .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-card{
    min-height:auto;
  }
  .footer-grid-final{
    grid-template-columns:1fr;
  }
  .footer-about{
    grid-column:auto;
  }
}



@media (max-width: 560px){
  .brand-separator{
    height:28px;
  }
  .principle-icon{
    width:50px;
    height:50px;
    margin-bottom:12px;
  }
  .principle-icon img{
    width:40px;
    height:40px;
  }
}


@media (max-width: 700px){
  .hero-media img{
    aspect-ratio:3 / 4;
    object-fit:cover;
    object-position:center;
  }
}


/* Hero v18 mobil */
@media (max-width: 900px){
  .hero{
    padding:16px 0 42px;
  }
  .hero .container{
    width:min(calc(100% - 28px),var(--max));
  }
  .hero-card{
    min-height:0;
    display:flex;
    flex-direction:column;
    border-radius:24px;
    background:#fff;
    overflow:hidden;
  }
  .hero-copy{
    order:1;
    width:100%;
    min-height:0;
    padding:34px 26px 30px;
    background:#fff;
  }
  .hero-media{
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    border-radius:0;
  }
  .hero-media picture,
  .hero-media img{
    width:100%;
    height:auto;
  }
  .hero-media img{
    aspect-ratio:3 / 4;
    object-fit:cover;
    object-position:center;
  }
  .hero-overlay{
    display:none;
  }
  .hero h1{
    font-size:clamp(46px,12vw,62px);
    line-height:1.00;
    letter-spacing:-2px;
    margin:14px 0 22px;
  }
  .hero .lead{
    font-size:18px;
    line-height:1.55;
  }
  .hero-summary{
    font-size:15px;
    line-height:1.7;
  }
  .hero .actions{
    width:100%;
    margin-top:26px;
  }
  .hero .actions .btn{
    width:100%;
  }
}

@media (max-width: 480px){
  .hero-copy{
    padding:30px 20px 26px;
  }
  .hero h1{
    font-size:42px;
  }
}



@media (max-width: 900px){
  .decor-shell{
    padding:36px 26px 32px;
    border-radius:24px;
  }
  .decor-shell::before{
    left:22px;
    width:72px;
    height:5px;
  }
  .decor-shell::after{
    width:110px;
    height:110px;
    top:-28px;
    right:-28px;
  }

  .hero-card::before{
    left:24px;
    width:72px;
    height:5px;
  }
  .hero-card::after{
    width:120px;
    height:120px;
    top:-28px;
    right:-28px;
  }
}

@media (max-width: 560px){
  .decor-shell{
    padding:30px 18px 26px;
  }
}


@media (max-width: 900px){
  .production-media{
    position:static;
    min-height:0;
  }
  .production-media img{
    min-height:0;
    height:auto;
    aspect-ratio:4 / 5;
    object-fit:cover;
  }
}