/* v2.5.9: original ocean scene, real package photograph, quiet editable backgrounds. */
.ocean-hero__canvas,.ocean-hero__fallback { position:absolute; top:88px; left:0; width:100%; height:calc(100% - 88px); object-fit:cover; }
.brand-hero__slide--coast .coast-hero__copy { z-index:2; top:23%; right:9%; padding:26px 24px; color:#092c3a; text-shadow:none; background:rgba(235,250,242,.66); border:0; box-shadow:none; }
.brand-hero__slide--coast .coast-hero__title { color:#092c3a; font-size:clamp(25px,3vw,46px); }
.brand-hero__slide--coast .coast-hero__note { color:#153f4c; }
.brand-hero__controls { padding:5px 16px; background:rgba(3,17,20,.7); border-radius:3px; }
.brand-hero__slide--family::before { background-position:center; }
.brand-hero__slide--family::after { background:linear-gradient(90deg,rgba(3,3,3,.65),transparent 65%); }
.brand-hero__slide--family .brand-hero__visual-inner { width:38%; margin-left:7%; margin-right:0; height:auto; padding-top:130px; padding-bottom:0; justify-content:flex-start; }
.brand-hero__slide--family .brand-hero__visual-inner .section-label { font-size:14px; margin-bottom:12px; }
.brand-hero__slide--family .brand-hero__visual-inner h2 { font-size:clamp(27px,2.9vw,42px); line-height:1.4; }
.brand-hero__slide--family .brand-hero__visual-inner > p:not(.section-label) { max-width:30em; font-size:15px; margin:14px 0 18px; }
.home-main .ingredient-catalog,.home-main .news-section { position:relative; isolation:isolate; background:#0d1110; overflow:hidden; }
.home-main .ingredient-catalog::before,.home-main .news-section::before { content:""; display:block; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(90deg,rgba(8,13,11,.72),rgba(8,13,11,.38)),var(--section-photo); background-position:center; background-size:cover; opacity:.27; pointer-events:none; }
.home-main .news-section::before { opacity:.20; }
.material-grid .material-feature__title { background:#303633; border:1px solid #727b71; color:#f5eee0; box-shadow:inset 0 1px rgba(255,255,255,.05); }
@media(min-width:768px) and (max-height:760px) {
  .brand-hero__slide--family .brand-hero__visual-inner { padding-top:112px; }
  .brand-hero__slide--family .brand-hero__visual-inner h2 { font-size:30px; }

}
@media(max-width:767px) {
  .ocean-hero__canvas,.ocean-hero__fallback { top:70px; height:calc(100% - 70px); }
  .brand-hero__slide--coast .coast-hero__copy { top:100px; right:20px; left:20px; max-width:none; padding:18px 20px; }
  .brand-hero__slide--coast .coast-hero__title { writing-mode:horizontal-tb; width:auto; font-size:clamp(20px,5.6vw,29px); line-height:1.55; letter-spacing:.12em; }
  .brand-hero__slide--coast .coast-hero__note { display:block; max-width:none; font-size:11px; margin:12px 0 0; }
  .brand-hero__slide--family::before { background-image:var(--brand-slide-image-mobile); background-size:100% auto; background-position:center bottom; }
  .brand-hero__slide--family::after { background:linear-gradient(180deg,rgba(3,3,3,.4),transparent 62%); }
  .brand-hero__slide--family .brand-hero__visual-inner { width:calc(100% - 40px); margin:0 20px; padding-top:96px; }
  .brand-hero__slide--family .brand-hero__visual-inner .section-label { font-size:11px; margin-bottom:8px; }
  .brand-hero__slide--family .brand-hero__visual-inner h2 { font-size:clamp(22px,6vw,28px); line-height:1.45; }
  .brand-hero__slide--family .brand-hero__visual-inner > p:not(.section-label) { max-width:100%; font-size:12px; line-height:1.65; margin:9px 0 12px; }

}

@media(max-width:767px) { .brand-hero { min-height:680px; height:min(820px,100svh); } .brand-hero__slide--family::before { background-size:100% auto; background-position:center bottom; } }
@media(min-width:768px) and (max-width:1023px) { .brand-hero__slide--family::before { background-image:var(--brand-slide-image-mobile); background-size:contain; background-position:right bottom; background-repeat:no-repeat; background-color:#090705; } }