/* Visible mobile navigation, retaining the incumbent typography and mint accent. */
.mobile-quick-nav{display:none}
@media(min-width:1025px){.site-footer__grid{grid-template-columns:1.4fr 1.2fr 1.2fr}}
@media(max-width:767px){
 body{padding-top:80px}
 .mobile-quick-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 8px;margin:0 12px;padding:4px 12px;background:#fff;border:1px solid #e4eae7;border-radius:16px;pointer-events:auto}
 .mobile-quick-nav a{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 2px;color:#1c211f;font-size:13px;font-weight:500;line-height:1.3;text-decoration:none;text-align:center;overflow-wrap:anywhere;touch-action:manipulation}
 .mobile-quick-nav a:nth-child(-n+2){grid-column:span 3;border-bottom:1px solid #edf1ef}
 .mobile-quick-nav a:active{color:#21684f;background:#eef7f3}
 .mobile-quick-nav a:focus-visible{outline:2px solid #21684f;outline-offset:-2px;border-radius:5px}
 html{scroll-padding-top:200px}
}

@media(min-width:768px){.site-header__island{gap:clamp(12px,1.3vw,24px)}.site-header__nav .nav-menu{gap:clamp(12px,1.5vw,28px)}.site-header__nav .nav-menu>li>a{font-size:clamp(13px,1.15vw,17px)}}

@media(min-width:768px){.site-header__island{gap:clamp(12px,1.3vw,24px)}.site-header__nav .nav-menu{gap:clamp(12px,1.5vw,28px)}.site-header__nav .nav-menu>li>a{font-size:clamp(13px,1.15vw,17px)}}
/* Match the site's gentle entrance; content remains available without JS. */
@keyframes mixtures-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 .materials-page .bag-intro{animation:mixtures-arrive .65s cubic-bezier(.16,1,.3,1) both}
 .materials-page .bag-visual{animation:mixtures-arrive .8s cubic-bezier(.16,1,.3,1) .08s backwards}
 .materials-page .bag-copy{animation:mixtures-arrive .75s cubic-bezier(.16,1,.3,1) .16s backwards}
 .materials-page .bag-notes{animation:mixtures-arrive .7s cubic-bezier(.16,1,.3,1) .22s backwards}
}

.about-hero+.material-benefits{padding:88px 0 96px;scroll-margin-top:200px;background:#fff}.about-hero+.material-benefits h2{font-size:clamp(28px,3.5vw,48px);line-height:1.15;font-weight:700;letter-spacing:-.03em;max-width:850px;margin:0 0 18px}.about-hero+.material-benefits .material-benefits__intro{font-size:17px;line-height:1.6;color:#59685f;margin:0 0 12px}@media(max-width:700px){.about-hero+.material-benefits{padding:56px 0}.about-hero+.material-benefits .material-benefits__intro{font-size:15px}}

/* Mobile links share the logo/language island rather than a separate card. */
@media(max-width:767px){
 .site-header .site-header__track,.site-header.is-scrolled .site-header__track{padding:4px 8px}
 .site-header .site-header__island,.site-header.is-scrolled .site-header__island{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px auto;height:auto;gap:0 12px;padding:0 12px;background:#fff;border:1px solid #e4eae7;border-radius:10px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .site-header__island>.site-header__logo{grid-column:1;grid-row:1}
 .site-header__island>.site-header__end{grid-column:2;grid-row:1}
 .site-header__island>.mobile-quick-nav{grid-column:1/-1;grid-row:2;margin:0;padding:0;border:0;border-top:1px solid #edf1ef;border-radius:0;background:transparent}
}