/* One fixed-size stage for the original marks; the film stays full bleed. */
.cinematic-hero{height:calc(100svh - 190px);min-height:520px;max-height:850px;background:#193e31}
.cinematic-hero .hero-video{object-fit:cover;object-position:center;width:100%;height:100%;filter:none;z-index:0}
.hero-motion-fallback{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-motion-fallback[hidden]{display:none}
.cinematic-hero:after{background:rgba(9,24,18,.34);z-index:1;pointer-events:none}
.cinematic-hero .hero-content{position:relative;z-index:2;width:100%;height:100%;min-height:0;padding:48px 24px 90px;align-items:center;justify-content:center;text-align:center}
.cinematic-hero h1{width:min(420px,76%);height:280px;margin:0 0 30px;font-size:0;line-height:1}
.cinematic-hero .hero-wordmark{display:block;width:100%;height:100%;object-fit:contain;filter:url(#hero-warm-white);opacity:1;transition:opacity .7s ease}
.cinematic-hero .hero-wordmark.is-changing{opacity:0}
.cinematic-hero .hero-description{display:block;max-width:480px;margin:0 0 14px;color:#fff8ec;font-size:15px;line-height:1.7}
.cinematic-hero .hero-actions{justify-content:center;align-items:center;margin:0;gap:0;flex-direction:row}
/* Quiet CTAs: fine underlines and full touch targets, without filled boxes. */
.cinematic-hero .hero-actions .button{margin:0;width:auto;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid #d1b07a99;border-radius:0;background:transparent;color:#fff8ec;font-size:12px;font-weight:500;gap:20px;box-shadow:none;transform:none}
.cinematic-hero .hero-actions .button:hover{background:transparent;border-bottom-color:#fff8ec;box-shadow:none;transform:none}
.cinematic-hero .hero-actions .button span{font-size:18px}
.cinematic-hero .hero-caption{left:50%;right:auto;bottom:27px;transform:translateX(-50%);background:none;border:0;padding:0;max-width:none;white-space:nowrap;font-size:9px;color:#f7eedf}
.cinematic-hero .hero-caption span{font-weight:400}
.cinematic-hero .hero-toggle{bottom:78px;right:24px;border:0;border-radius:0;background:transparent;z-index:2;opacity:.8}
.cinematic-hero .hero-toggle:hover{background:#193e3140;opacity:1}
.header .header-cta{border:0;border-bottom:1px solid #b29c7866;border-radius:0;padding:10px 0;background:transparent;box-shadow:none;font-size:12px;gap:16px}
.header .header-cta:hover{background:transparent;color:var(--green);border-bottom-color:var(--green);transform:none}
.coffee-card button.choose-coffee{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;background:transparent;box-shadow:none}
.coffee-card button.choose-coffee:hover{background:transparent;color:var(--green);border-bottom-color:var(--green);transform:none}
.whatsapp-float{min-height:44px;padding:10px 14px;font-size:11px;border:1px solid #b29c7840;border-radius:6px;box-shadow:none;gap:10px}
.whatsapp-float:hover{box-shadow:none;transform:none}
/* Mobile preserves the same image slot so changing marks cannot move the CTA. */
@media(max-width:650px){.cinematic-hero{height:calc(100svh - 190px);min-height:460px;max-height:760px}.cinematic-hero .hero-content{padding:42px 24px 82px}.cinematic-hero h1{width:min(300px,88%);height:220px;margin-bottom:24px}.cinematic-hero .hero-description{font-size:13px;max-width:270px;margin-bottom:12px}.cinematic-hero .hero-actions{flex-direction:row}.cinematic-hero .hero-actions .button{min-height:48px;font-size:12px;padding:12px 0}.cinematic-hero .hero-caption{left:24px;bottom:24px;transform:none;white-space:normal;width:calc(100% - 110px);font-size:8px;line-height:1.7}.cinematic-hero .hero-toggle{right:18px;bottom:78px}.header .header-cta{font-size:12px;min-height:44px}.whatsapp-float{right:12px;padding:8px 12px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.cinematic-hero *{animation:none!important;transition:none!important}}
/* Full-screen film, with navigation tucked into an accessible overlay. */
.topline{height:48px;min-height:48px;padding:0 58px 0 16px;position:relative;font-size:11px}
.menu-toggle{position:fixed;right:10px;top:2px;z-index:100;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:6px;border:0;background:#193e31;color:#f5f1e8;padding:11px;border-radius:0}
.menu-toggle span{display:block;width:22px;height:1px;background:currentColor}
.site-menu{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:70px 24px 40px;border:0;background:#f5f1e8;color:#193e31}
.site-menu::backdrop{background:#193e31}
.site-menu .header{position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;height:100%;padding:0;border:0;background:transparent}
.site-menu .header nav{display:flex;flex-direction:column;align-items:center;gap:24px;overflow:visible}
.site-menu .header nav a{font-family:Georgia,serif;font-size:36px;line-height:1.2;font-weight:400}
.menu-close{position:absolute;right:18px;top:14px;width:44px;height:44px;padding:0;border:0;background:transparent;font-size:34px;color:#193e31}
.menu-is-open{overflow:hidden}
.cinematic-hero{height:calc(100svh - 48px);min-height:420px;max-height:none}
.cinematic-hero .hero-content{padding:40px 24px 70px}
.cinematic-hero h1{margin:0}
.cinematic-hero .hero-description,.cinematic-hero .hero-actions{display:none}
.hero-scroll{position:absolute;z-index:2;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#f5f1e8;font-size:11px;text-decoration:none;padding:8px 20px}
.hero-scroll span{font-size:20px}
html[data-page="home"] .whatsapp-float{display:none}
@media(max-width:650px){.topline{font-size:10px}.site-menu .header nav a{font-size:32px}.cinematic-hero .hero-toggle{bottom:28px}.cinematic-hero h1{height:220px}}