:root{
  --ink:#1E2A38;
  --ivory:#FAF7F2;
  --gold:#B78C3A;
  --sage:#8BAA8E;
  --charcoal:#222428;
  --subtext:#5A6772;
  --lines:#E6E1DA;
  --tint:#F5F8F6;
  --radius-10:10px;
  --radius-12:12px;
  --shadow:0 6px 16px rgba(14,36,66,0.08);
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:56px;
  --space-8:80px;
  --maxw:1120px;
} 

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  color:var(--charcoal);
  background:var(--ivory) url('/assets/images/bg_texture_ivory_subtle.png') repeat;
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"Libre Baskerville", Georgia, serif; color:var(--ink); line-height:1.25; margin:0 0 var(--space-3)}
h1{font-size:clamp(32px,4.2vw,56px)}
h2{font-size:clamp(24px,3vw,36px)}
h3{font-size:clamp(20px,2.2vw,28px)}
p{margin:0 0 var(--space-3)}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4)} 

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:var(--space-2); background:#fff; border:2px solid var(--gold);
} 

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  transition:box-shadow .18s ease-out, background .18s ease-out;
  background:transparent;
}
.site-header.solid, .site-header.scrolled{
  background:rgba(250,247,242,0.96);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  backdrop-filter:saturate(1.2) blur(6px);
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between; height:72px;
}
.logo img{display:block} 

.primary-nav .nav-menu{list-style:none; margin:0; padding:0}
.primary-nav .nav-cta{margin-left:var(--space-4)}
.nav-menu a{padding:8px 0; display:inline-block}
.nav-menu-inline{gap:var(--space-4)}
.nav-toggle{
  display:none; background:none; border:1px solid var(--lines); border-radius:10px; padding:10px; cursor:pointer;
}
.nav-toggle-bar{
  width:22px; height:2px; background:var(--ink); display:block; position:relative;
}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink);
}
.nav-toggle-bar::before{top:-6px}
.nav-toggle-bar::after{top:6px} 

/* Hero */
.hero{
  background:linear-gradient(180deg, var(--ivory) 0%, #F6F1E8 100%);
  padding:var(--space-8) 0;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-4); align-items:center;
}
.hero-grid > *{min-width:0}
.hero-text{grid-column:1 / span 6; max-width:560px}
.hero-image{grid-column:7 / span 6}
.eyebrow{letter-spacing:.08em; text-transform:uppercase; font-size:14px; color:var(--subtext); margin-bottom:var(--space-2)}
.lead{font-size:20px}
.hero-ctas{display:flex; gap:var(--space-3); margin:var(--space-4) 0}
.stats{display:flex; gap:var(--space-5); margin-top:var(--space-5)}
.stat{display:flex; flex-direction:column; gap:4px; color:var(--subtext)}
.stat strong{font-size:24px; color:var(--ink)} 

@media (max-width:768px){
  .hero{padding:var(--space-6) 0}
  .hero .container{padding-left:var(--space-4); padding-right:var(--space-4)}
  .hero-text, .hero-image{min-width:0}
  .hero-image img{max-width:100%; width:100%; height:auto}
}

/* Sections */
.section{padding:var(--space-8) 0}
.section-tint{background:var(--tint)}
.section-band{background:#fff; border-top:1px solid var(--lines); border-bottom:1px solid var(--lines)}
.section-intro{color:var(--subtext); max-width:70ch} 

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:start}
.two-col > .col{min-width:0}
.two-col .col img.rounded{border-radius:var(--radius-12); box-shadow:var(--shadow)}
.two-col .col img{width:100%; height:auto}
.text-narrow{max-width:70ch;} 

/* Cards and grids */
.card{background:#fff; border:1px solid var(--lines); border-radius:var(--radius-12); box-shadow:var(--shadow); overflow:hidden}
.card-grid.two{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5)}
.card-grid.four{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-5)}
.brand-card .brand-media img{aspect-ratio:3/2; object-fit:cover}
.brand-card .brand-content{padding:var(--space-4)}
.brand-logo{height:28px; margin-bottom:var(--space-2)}
.leader{padding-bottom:var(--space-4)}
.leader img{aspect-ratio:1/1; object-fit:cover}
.leader .role{color:var(--subtext); margin-top:4px; margin-bottom:4px}
.leader .bio{font-size:16px} 

.media-kit{display:grid; grid-template-columns: 3fr 4fr}
.media-kit .media-kit-content{padding:var(--space-4)}
.media-kit .actions{display:flex; gap:var(--space-3); margin-top:var(--space-3)} 
@media (max-width:768px){
  .media-kit .actions{flex-direction:column; gap:var(--space-2)}
  .media-kit .actions .btn{width:100%; text-align:center}
}

/* Buttons */
.btn{display:inline-block; padding:14px 22px; border-radius:var(--radius-10); border:1px solid transparent; font-weight:600; cursor:pointer; text-decoration:none}
.btn{word-break:keep-all}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:#16202D; text-decoration:none}
.btn-primary:focus{outline:2px solid var(--gold); outline-offset:2px}
.btn-secondary{background:#fff; color:var(--ink); border-color:var(--ink)}
.btn-secondary:hover{background:rgba(30,42,56,0.04); text-decoration:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:rgba(30,42,56,0.04); text-decoration:none} 

/* Quality/certs */
.certs{display:flex; gap:var(--space-4); margin-bottom:var(--space-3); align-items:center}
.cert{flex:0 0 auto; width:80px}
.caption{font-size:14px; color:var(--subtext); margin-bottom:var(--space-4)} 

/* Newsroom list */
.press-item, .press-card{
  display:grid; grid-template-columns:120px 1fr; gap:var(--space-4); align-items:start; margin-bottom:var(--space-4);
}
.press-item img, .press-card img{border-radius:var(--radius-12)}
.press-date{font-size:14px; color:var(--subtext); margin:0 0 6px} 

/* Partnerships */
.partner-logos img{filter:grayscale(1); opacity:.9} 

/* Band */
.band{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) 0} 

/* Forms */
.contact-form{background:#fff; border:1px solid var(--lines); border-radius:var(--radius-12); padding:var(--space-5); box-shadow:var(--shadow); margin-left:auto; margin-right:auto}
.contact-form{box-sizing:border-box}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-3)}
.form-row.checkbox{flex-direction:row; align-items:flex-start; gap:10px}
input, select, textarea{
  font:inherit; padding:12px 12px; border:1px solid var(--lines); border-radius:10px; background:#fff; color:var(--charcoal);
}
textarea{resize:vertical} 

/* Footer */
.site-footer{background:var(--ink); color:#fff; padding:var(--space-6) 0; margin-top:var(--space-8)}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--space-6); align-items:start}
.footer-nav ul{list-style:none; padding:0; margin:0; columns:2; column-gap:var(--space-6)}
.footer-nav a{color:#E6E1DA}
.footer-nav a:hover{color:#fff; text-decoration:none}
.footer-meta a{color:#E6E1DA}
.footer-meta a:hover{color:#fff; text-decoration:none}
.footer-brand p{color:#E6E1DA} 

/* Page hero (inner pages) */
.page-hero{padding-top:var(--space-6); padding-bottom:var(--space-4)} 

/* Utilities */
.rounded{border-radius:var(--radius-12)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden} 

/* Pillars (Safety, Science-Backed, Sustainability) */
.pillars{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5)}
.pillar{display:flex; align-items:flex-start; gap:var(--space-3)}
.pillar h3{margin:0 0 4px}

/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:var(--space-6)}
  .hero-text{grid-column:auto}
  .hero-image{grid-column:auto}
  .card-grid.four{grid-template-columns:repeat(2,1fr)}
  .media-kit{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* Mobile/tablet nav behavior up to 1024px */
  .nav-toggle{display:inline-block}
  .primary-nav #nav-menu{
    position:fixed; inset:72px 0 0 0; background:rgba(250,247,242,0.98); padding:var(--space-5); z-index:1200;
    display:none; flex-direction:column; gap:var(--space-4);
  }
  .primary-nav #nav-menu.open{display:flex}
}
@media (max-width:768px){
  /* Ensure header is visible on mobile */
  .site-header{background:rgba(250,247,242,0.98) !important; box-shadow:0 2px 12px rgba(0,0,0,0.06); border-bottom:1px solid var(--lines)}
  .nav-toggle{display:inline-block}
  .primary-nav #nav-menu{
    position:fixed; inset:72px 0 0 0; background:rgba(250,247,242,0.98); padding:var(--space-5); z-index:1200;
    display:none; flex-direction:column; gap:var(--space-4);
  }
  .primary-nav #nav-menu.open{display:flex}
  .primary-nav .nav-menu li{list-style:none}
  .primary-nav .nav-cta{margin-left:0}
  .nav-cta{margin-left:0}
  .card-grid.two{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .stats{gap:var(--space-3); flex-wrap:wrap; justify-content:space-between}
  .stat strong{font-size:20px}
  .stat span{font-size:14px}
  .pillars{grid-template-columns:1fr}
  .band{flex-direction:column; align-items:center; text-align:center}
  .band-copy{text-align:center}
  .band-actions{width:100%; display:flex; justify-content:center}
  .footer-grid{grid-template-columns:1fr}
  .footer-nav ul{columns:1}
  .press-item, .press-card{grid-template-columns:1fr}
  /* Ensure contact map and form don’t overflow */
  #contact .container{padding-left:var(--space-4); padding-right:var(--space-4)}
  #contact .col{min-width:0}
  /* Fit long email addresses on small screens */
  #contact a[href^="mailto:"]{font-size:14px; word-break:break-all; overflow-wrap:anywhere}
  /* Stack label and email on narrow screens */
  #contact .col p a[href^="mailto:"]{display:block; margin-top:2px}
} 

/* Desktop nav (>=1025px) */
@media (min-width:1025px){
  /* Opaque desktop header */
  .site-header{background:rgba(250,247,242,0.98); box-shadow:0 2px 12px rgba(0,0,0,0.06); border-bottom:1px solid var(--lines)}
  .primary-nav .nav-menu{display:flex; align-items:center; gap:var(--space-4)}
  .nav-toggle{display:none}
}

/* Media kit buttons - smaller and no mid-word wrap */
.media-kit .actions .btn{font-size:14px; padding:12px 16px; white-space:nowrap}

/* Contact section width safety */
.contact-form{max-width:100%; width:100%}
.contact-form .form-row input,
.contact-form .form-row select,
.contact-form .form-row textarea{width:100%}

/* Constrain media to container width across viewports */
.hero-image img{width:100%; height:auto}
.press-item img, .press-card img{width:100%; height:auto}
/* Quality image safety */
#quality .col img{max-width:100%; width:100%; height:auto}

/* Focus states */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:2px solid var(--gold); outline-offset:2px;
} 

.pillar img{width:48px; height:48px; flex:0 0 48px}