.bat-page { --bat-blue:#168fc5; --bat-orange:#f47a20; --bat-grey:#aeb2b3; --bat-ink:#34393b; background:#f5f8f9; color:var(--bat-ink); }
.bat-page .site-header { background:#f5f8f9; }
.bat-page .project-next { font-size:11px; }
.bat-hero { min-height:650px; padding:70px 8vw 78px; display:grid; grid-template-columns:.78fr 1.22fr; gap:5vw; align-items:center; position:relative; overflow:hidden; background:linear-gradient(120deg,#f5f8f9 28%,#e3f2f7); }
.bat-hero-copy { position:relative; z-index:1; }
.bat-back { display:inline-block; margin-bottom:48px; font-size:11px; }
.bat-kicker,.bat-label { display:block; color:#467586; font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.bat-hero h1 { margin:22px 0; font:700 clamp(58px,7vw,94px)/.88 var(--futura); letter-spacing:var(--tracking-display-large); color:#55595b; }
.bat-hero h1 em { color:var(--bat-blue); font-style:normal; }
.bat-lede { max-width:420px; font-size:16px; line-height:1.7; }
.bat-button { display:inline-flex; gap:28px; align-items:center; margin-top:18px; padding:15px 20px; border-radius:30px; background:#167eaf; color:white; font-size:12px; font-weight:600; }
.bat-hero-art { margin:0; align-self:stretch; display:grid; place-items:center; }
.bat-hero-art img { width:100%; max-height:540px; object-fit:contain; filter:drop-shadow(0 15px 28px rgba(36,82,101,.13)); }
.bat-hero-note { position:absolute; right:8vw; bottom:28px; color:#467586; font:italic 15px Georgia,serif; }
.bat-intro { padding:105px 12vw; display:grid; grid-template-columns:.9fr 1.1fr; gap:8vw; background:#fff; }
.bat-intro h2,.bat-evolution h2,.bat-packaging h2,.bat-outro h2 { margin:28px 0 0; color:var(--bat-ink); font:700 clamp(42px,5.1vw,68px)/1 var(--futura); letter-spacing:var(--tracking-display); }
.bat-intro h2 em,.bat-evolution h2 em,.bat-packaging h2 em,.bat-outro h2 em { color:var(--bat-blue); font:italic 500 .9em Georgia,serif; }
.bat-intro-copy { padding-top:22px; max-width:570px; }
.bat-intro-copy p,.bat-packaging-copy p,.bat-outro > p { font-size:14px; line-height:1.8; margin:0 0 18px; }
.bat-evolution { padding:95px 8vw 90px; background:#e6f2f5; }
.bat-evolution-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; column-gap:5vw; }
.bat-evolution-heading .bat-label { grid-column:1/-1; }
.bat-evolution-heading > p { max-width:270px; margin:0 0 8px; font-size:14px; line-height:1.7; }
.bat-evolution-visual { margin:42px 0 35px; padding:24px; background:#fff; }
.bat-evolution-visual img { display:block; width:100%; max-height:560px; object-fit:contain; }
.bat-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; border-top:1px solid rgba(52,57,59,.2); }
.bat-principles article { padding:22px 18px 0 0; }
.bat-principles article > span { color:var(--bat-blue); font:10px var(--mono); }
.bat-principles h3 { margin:22px 0 9px; font:700 21px var(--futura); }
.bat-principles p { max-width:280px; margin:0; font-size:12px; line-height:1.7; }
.bat-packaging { padding:100px 9vw; display:grid; grid-template-columns:.75fr 1.25fr; gap:6vw; align-items:center; background:#fff; }
.bat-packaging-copy p { max-width:420px; margin-top:26px; }
.bat-packaging figure { margin:0; background:transparent; }
.bat-packaging figure img { display:block; width:80%; margin:0 auto; }
.bat-outro { padding:95px 10.5vw 105px; text-align:left; background:#fff; color:var(--bat-ink); }
.bat-outro .bat-label { color:#467586; }
.bat-outro h2 { color:var(--bat-ink); }
.bat-outro h2 em { color:var(--bat-blue); }
.bat-outro > .bat-case-lede { max-width:700px; margin:25px 0 42px; font-size:15px; line-height:1.8; }
.bat-case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(52,57,59,.2); border-bottom:1px solid rgba(52,57,59,.2); }
.bat-case-grid article { padding:24px 28px 28px 0; }
.bat-case-grid article + article { padding-left:28px; border-left:1px solid rgba(52,57,59,.2); }
.bat-case-grid article > span { color:#467586; font:10px var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.bat-case-grid h3 { margin:22px 0 10px; font:700 21px/1.15 var(--futura); }
.bat-case-grid p { max-width:360px; margin:0; font-size:12px; line-height:1.75; }
.bat-case-role { margin:22px 0 0; color:#467586; font:10px var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.bat-case-role strong { margin-right:12px; color:var(--bat-ink); }
.bat-case-credit { margin:12px 0 0; color:#626a6d; font-size:11px; line-height:1.7; }
.bat-page .site-footer { background:#0878a8; color:#fff; }
.bat-page .site-footer .footer-links a { color:#fff; }
.bat-page .site-footer .footer-links a:hover { color:#d2f4ff; }
@media(max-width:850px) {
  .bat-hero { min-height:0; padding:48px 7vw 65px; grid-template-columns:1fr 1fr; gap:3vw; }
  .bat-back { margin-bottom:30px; }
  .bat-intro { padding:75px 8vw; gap:5vw; }
  .bat-packaging { padding:75px 7vw; gap:4vw; }
}
@media(max-width:600px) {
  .bat-hero { display:flex; flex-direction:column; align-items:stretch; padding:38px 6vw 58px; gap:20px; }
  .bat-back { margin-bottom:30px; }
  .bat-hero h1 { font-size:clamp(58px,15vw,82px); }
  .bat-lede { font-size:14px; }
  .bat-hero-art img { max-height:none; }
  .bat-hero-note { right:6vw; bottom:19px; }
  .bat-intro { display:block; padding:64px 7vw; }
  .bat-intro-copy { padding-top:23px; }
  .bat-evolution { padding:65px 6vw; }
  .bat-evolution-heading { display:block; }
  .bat-evolution-heading > p { margin-top:18px; }
  .bat-evolution-visual { margin:28px -2vw; padding:10px; }
  .bat-principles { grid-template-columns:1fr; gap:0; }
  .bat-principles article { padding:18px 0; border-bottom:1px solid rgba(52,57,59,.15); }
  .bat-principles h3 { margin:11px 0 6px; }
  .bat-packaging { display:flex; flex-direction:column; align-items:stretch; padding:65px 7vw; gap:22px; }
  .bat-outro { padding:68px 7vw 75px; }
  .bat-case-grid { grid-template-columns:1fr; }
  .bat-case-grid article,.bat-case-grid article + article { padding:20px 0; border-left:0; border-bottom:1px solid rgba(52,57,59,.15); }
  .bat-case-grid h3 { margin:11px 0 6px; }
}