:root{--slogan-cream:#f9f6f3;--slogan-green:#57af43}
/* The supplied artwork remains unchanged; the olive surface protects its cream lettering. */
.logo,.header .logo,.home-page .header .logo,.footer .logo{
 display:inline-flex;align-items:center;justify-content:center;
 padding:0;font-size:0;line-height:1;letter-spacing:normal;flex-shrink:0;
}
.brand-logo{display:block;width:100%;height:auto;object-fit:contain}
.header .logo,.home-page .header .logo{
 width:100px;padding:7px 9px;background:var(--deep);border-radius:10px;
 box-shadow:0 3px 18px #17200d14;
}
.header.over-film .logo{filter:none}
.footer .logo{width:150px;max-width:100%}
.comparison-brand{width:84px;height:auto;object-fit:contain}
/* Reuse the supplied lettering as transparent artwork, rather than substituting a font.
   Separate viewports stack the original phrases; an SVG stroke reveals the smile. */
.hero-story h1.brand-slogan{
 width:min(820px,77vw,calc((100svh - 380px)*3));
 display:flex;flex-direction:column;align-items:center;gap:9px;
 font-size:0;line-height:1;letter-spacing:normal;margin:0 0 21px;
}
.brand-slogan .slogan-row{width:100%;flex:none}
.brand-slogan .slogan-eat{width:90.73%}
.brand-slogan .slogan-row svg{display:block;width:100%;height:auto;overflow:hidden}
.brand-slogan .slogan-smile{
 display:block;width:78%;height:auto;margin-top:-5px;overflow:hidden;
 opacity:clamp(0,calc(var(--smile-draw,0)*20),1);
}
.smile-draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--smile-draw,0))}
@media(max-width:650px){
 .hero-story h1.brand-slogan{width:min(100%,410px);gap:8px;margin-bottom:24px}
 .brand-slogan .slogan-smile{width:82%;margin-top:0}
}
@media(max-height:700px){
 .hero-story h1.brand-slogan{width:min(520px,68vw,calc((100svh - 300px)*2));gap:3px;margin-bottom:14px}
 .brand-slogan .slogan-smile{width:70%}
}
@media(prefers-reduced-motion:reduce){
 .smile-draw{stroke-dashoffset:0}
}
@media(max-width:650px){
 .header .logo,.home-page .header .logo{width:78px;padding:6px 8px;border-radius:8px}
 .footer .logo{width:118px}
 .comparison-brand{width:68px}
}
@media(max-width:360px){
 .header,.home-page .header{padding:16px}
 .header .logo,.home-page .header .logo{width:70px;padding:5px 7px}
 .header .nav-actions .button{padding:0 9px;font-size:8px;gap:7px}
 .header .nav-actions .button span{font-size:18px}
}