@font-face{font-family:GNAMFallback;src:local("Helvetica Neue");font-display:swap}
:root{--cream:#f4ebdd;--sage:#91a089;--green:#284c3f;--espresso:#32281f;--p:0;color:var(--green);background:var(--cream);font-family:GNAMFallback,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}html{scroll-behavior:smooth}::selection{background:var(--green);color:var(--cream)}
.skip-link{position:fixed;z-index:20;left:20px;top:-70px;background:var(--green);color:var(--cream);padding:14px}.skip-link:focus{top:10px}
.masthead{height:108px;padding:20px 4.7%;position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between}.brand{display:grid;gap:4px;justify-items:center}.brand-mark{display:block;width:108px;height:44px;overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:contain;transform:scale(2.85);mix-blend-mode:multiply}.brand-caption{font-size:10px;letter-spacing:3px}.masthead-note{font-size:11px;letter-spacing:2px;margin-left:4.7vw}.visit{font-size:13px;border-bottom:1px solid #284c3f66;padding:10px 0}
.ritual{height:620svh;position:relative}.stage{height:100svh;position:sticky;top:0;overflow:clip;isolation:isolate;background:var(--cream)}.sage-wash{position:absolute;inset:0;background:var(--sage);opacity:0}.film-wrap{position:absolute;inset:4% -1% 4% 25%;z-index:1;transform-origin:60% 59%;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 87%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 13%,#000 91%,transparent 100%);mask-composite:intersect}.ritual-film{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;position:absolute;top:50%;transform:translateY(-50%);mask-image:linear-gradient(0deg,transparent 0%,#000 12%,#000 92%,transparent 100%)}.sequence-canvas{opacity:0}.big-type{position:absolute;z-index:2;font-size:25vw;font-weight:650;line-height:1;letter-spacing:-1.7vw;left:4%;right:5%;top:24%;opacity:0;color:var(--green)}
.intro-copy,.pour-copy,.finish-copy{position:absolute;z-index:3;left:6.2%;top:28%;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;margin:0 0 24px;line-height:1.6}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;margin:0;letter-spacing:-.068em;line-height:.99}h1{font-size:clamp(76px,7.4vw,130px)}h1 em,h2 em{font-weight:400}h1 em{font-size:.98em}.intro-description{font-size:16px;line-height:1.6;margin:28px 0 25px}.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:50px;padding:0 23px;border:1px solid var(--green);border-radius:40px;background:transparent;font-size:14px;pointer-events:auto;transition:background .2s,color .2s}.pill:hover{background:var(--green);color:var(--cream)}.pill-dot{width:7px;height:7px;border-radius:50%;background:currentColor}.pour-copy{opacity:0;top:32%}.pour-copy h2{font-size:clamp(74px,7vw,124px)}.finish-copy{top:29%;opacity:0;left:7%;color:var(--cream)}.finish-copy h2{font-size:clamp(70px,7vw,120px)}.finish-copy .eyebrow{margin-bottom:20px}.finish-note{position:absolute;z-index:5;right:6%;top:17%;bottom:auto;opacity:0;font-family:Georgia,serif;font-style:italic;font-size:clamp(21px,2.1vw,34px);line-height:1.2;color:var(--green)}
.cup-wrap{position:absolute;width:min(62vw,90svh);height:auto;left:57%;top:49%;z-index:4;opacity:0;transform:translate(-50%,-50%);pointer-events:none}.cup{width:100%;height:auto;display:block;filter:drop-shadow(0 38px 40px #20382c29)}
.scene-caption{position:absolute;z-index:6;left:6.2%;bottom:7.5%;display:flex;gap:16px;align-items:center;font-size:13px}.scene-count{font-variant-numeric:tabular-nums;opacity:.58}.scene-name{font-size:13px}.chapters{position:absolute;z-index:7;right:5%;bottom:7%;display:flex;gap:28px}.chapters button{border:0;border-bottom:1px solid transparent;padding:11px 0;background:none;opacity:.7;font-size:14px;transition:opacity .2s}.chapters button span{display:none}.chapters button[aria-current="step"]{opacity:1;border-color:currentColor}.chapters button:hover{opacity:1}.scroll-cue{position:absolute;z-index:5;left:6.2%;bottom:16%;font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:13px}.scroll-track{display:block;width:34px;height:1px;background:#284c3f55}.scroll-track i{display:block;width:12px;height:1px;background:var(--green);animation:hint 2.2s ease-in-out infinite}@keyframes hint{50%{transform:translateX(22px)}}.progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#284c3f14;z-index:10}.progress i{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(var(--p));transform-origin:left}.media-message{position:absolute;bottom:12%;left:6%;z-index:12;font-size:13px;max-width:300px;padding:9px 13px;background:var(--cream);border:1px solid #284c3f33;border-radius:6px}.media-retry{border:0;border-bottom:1px solid currentColor;padding:4px;margin-left:8px;background:none}.media-message[hidden],.media-retry[hidden]{display:none}
.pause{padding:145px 8%;display:grid;grid-template-columns:1fr .9fr;gap:10%;align-items:center;background:var(--cream);position:relative}.pause h2{font-size:clamp(50px,5.3vw,94px);line-height:1.07}.pause-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;margin:35px 0}.pause figure{margin:0;position:relative}.pause figure img{display:block;width:100%;height:560px;object-fit:cover;border-radius:160px 160px 3px 3px}.pause figcaption{margin-top:18px;font-size:10px;letter-spacing:2px}.text-link{font-size:13px;border-bottom:1px solid #284c3f80;padding-bottom:9px;display:inline-block}footer{padding:100px 8% 25px;background:var(--green);color:var(--cream)}footer h2{font-size:clamp(50px,6.5vw,110px);line-height:1.05;max-width:1100px}.footer-row{display:flex;align-items:center;justify-content:space-between;margin:55px 0 80px;font-size:14px}.footer-row p{line-height:1.6}.footer-row .pill{border-color:var(--cream)}.footer-row .pill:hover{background:var(--cream);color:var(--green)}.legal{border-top:1px solid #f4ebdd33;padding-top:23px;margin:0;font-size:11px;line-height:1.7;opacity:.6}
@media(min-aspect-ratio:19/10){.ritual-film{object-fit:contain}.intro-copy{top:24%}}
@media(max-width:700px){.masthead{height:92px;padding:18px 6%}.brand-mark{width:86px;height:37px}.brand-caption{font-size:8px;letter-spacing:2.3px}.masthead-note{display:none}.visit{font-size:12px}.ritual{height:570svh}.film-wrap{inset:34% auto auto -12%;width:124%;height:auto;aspect-ratio:16/9;transform-origin:60% 60%;mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 10%,#000 94%,transparent 100%)}.ritual-film{width:100%;height:100%;object-fit:contain}.intro-copy{top:17%;left:7%}.eyebrow{font-size:11px;letter-spacing:1.2px;margin-bottom:18px}h1{font-size:clamp(57px,14vw,88px);line-height:1.02}.intro-description{font-size:14px;line-height:1.5;margin:18px 0}.intro-copy .pill{min-height:44px;padding:0 18px;font-size:13px;gap:24px}.intro-description,.intro-copy .pill{position:relative;top:34svh}.pour-copy{left:7%;top:18%}.pour-copy h2{font-size:15vw;line-height:1.03}.cup-wrap{width:108vw;left:50%;top:54%}.big-type{font-size:30vw;left:3%;top:33%;letter-spacing:-1.8vw}.finish-copy{top:15%;left:7%;color:var(--green)}.finish-copy h2{font-size:16vw}.finish-note{right:7%;top:auto;bottom:18%;font-size:23px;color:var(--green)}.scene-caption{left:7%;bottom:9%;font-size:12px;gap:9px}.scene-name{font-size:12px}.chapters{left:7%;right:7%;bottom:2.5%;justify-content:space-between;gap:15px}.chapters button{font-size:12px;padding:14px 0}.chapters button span{display:inline;margin-right:6px;font-size:11px}.scroll-cue{display:none}.pause{padding:80px 7%;display:flex;flex-direction:column;gap:45px;align-items:stretch}.pause h2{font-size:49px}.pause-copy>p:not(.eyebrow){font-size:15px;margin:25px 0}.pause figure img{height:430px;border-radius:130px 130px 3px 3px}.pause figcaption{font-size:9px}footer{padding:75px 7% 22px}footer h2{font-size:49px}.footer-row{gap:24px;flex-wrap:wrap;margin:35px 0 50px}.footer-row>a:last-child{width:100%;font-size:12px}.legal{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-track i{animation:none}.ritual{height:100svh}.scroll-cue{display:none}.stage{position:relative}}
.cup-branding,.hero-branding{pointer-events:none;mix-blend-mode:multiply}.hero-branding{position:absolute;inset:0;width:100%;height:100%}
/* The tea film remains on its final frame, preserving one grounded composition. */
.ritual{height:1020svh}
.tea-film-wrap{position:absolute;left:8%;right:4%;top:4%;bottom:3%;z-index:4;opacity:0;pointer-events:none;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 90%,transparent)}
.tea-film{position:absolute;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);mask-image:linear-gradient(0deg,transparent 0%,#000 13%,#000 88%,transparent 100%)}
.tea-canvas{opacity:0}.tea-film-branding{mix-blend-mode:multiply}
.tea-copy,.cookie-copy{position:absolute;z-index:5;left:7%;top:27%;opacity:0;pointer-events:none;color:var(--green)}
.tea-copy h2,.cookie-copy h2{font-size:clamp(70px,7vw,120px)}
.tea-description{font-size:16px;line-height:1.7;margin:30px 0 0}
.chapters{gap:24px}
.dolci{padding:30px 8% 130px;background:var(--cream)}.dolci h2{font-size:clamp(50px,5.3vw,94px);margin-bottom:55px}.dolci-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%}.dolci figure{margin:0}.dolci img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:3px}.dolci figcaption{font-family:Georgia,serif;font-size:30px;margin-top:22px}
@media(max-width:700px){.ritual{height:970svh}.tea-film-wrap{width:125%;height:auto;aspect-ratio:16/9;left:-24%;right:auto;top:45%;bottom:auto;mask-image:none}.tea-film{position:relative;top:0;transform:none}.tea-canvas,.tea-film-branding{position:absolute;inset:0}.tea-copy,.cookie-copy{top:15%;left:7%}.tea-copy h2,.cookie-copy h2{font-size:16vw}.tea-description{font-size:14px;margin-top:17px;line-height:1.5}.cookie-copy .tea-description{font-size:13px;margin-top:16px}.chapters{gap:10px}.chapters button,.scene-caption,.scene-name{font-size:11px}.dolci{padding:15px 7% 75px}.dolci h2{font-size:49px;margin-bottom:32px}.dolci-grid{gap:7%;grid-template-columns:1fr 1fr}.dolci figcaption{font-size:22px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.ritual{height:100svh}}
/* Append the aperitivo without shortening the already approved coffee and tea. */
.ritual{height:1120svh}
.aperitivo-film-wrap{position:absolute;left:6%;right:4%;top:3%;bottom:3%;z-index:4;opacity:0;pointer-events:none;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 98%,transparent)}
.aperitivo-film{position:absolute;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);mask-image:linear-gradient(0deg,transparent,#000 4%,#000 96%,transparent)}
.aperitivo-canvas{opacity:0}
.aperitivo-copy{position:absolute;z-index:5;left:7%;top:27%;opacity:0;pointer-events:none;color:var(--aperitivo-copy-color,var(--green))}
.aperitivo-copy h2{font-size:clamp(64px,6.7vw,112px)}
.aperitivo-details{display:grid;grid-template-columns:.95fr 1fr;align-items:center;gap:10%;padding:60px 8% 130px;background:var(--cream)}
.aperitivo-details figure{margin:0}.aperitivo-details img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block}.aperitivo-details figcaption{font-size:11px;letter-spacing:1.5px;margin-top:18px}.aperitivo-details h2{font-size:clamp(50px,5.3vw,94px)}.aperitivo-details div>p:not(.eyebrow){font-size:17px;line-height:1.7;margin:30px 0 0}
@media(max-width:700px){.ritual{height:1080svh}.aperitivo-film-wrap{left:-28%;top:41%;right:auto;bottom:auto;width:132%;height:auto;aspect-ratio:16/9;mask-image:none}.aperitivo-film{position:relative;top:0;transform:none}.aperitivo-canvas{position:absolute;inset:0}.aperitivo-copy{top:15%;left:7%}.aperitivo-copy h2{font-size:15vw}.aperitivo-copy .tea-description{font-size:14px}.chapters{gap:8px}.chapters button{white-space:nowrap}.aperitivo-details{padding:25px 7% 75px;display:flex;flex-direction:column-reverse;gap:35px;align-items:stretch}.aperitivo-details h2{font-size:49px}.aperitivo-details div>p:not(.eyebrow){font-size:15px;line-height:1.7;margin-top:25px}.aperitivo-details figcaption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ritual{height:100svh}}
/* The cutout follows the last film composition while the backdrop turns sage. */
.aperitivo-hero-wrap{position:absolute;left:6%;right:4%;top:3%;bottom:3%;z-index:4;opacity:0;pointer-events:none}
.aperitivo-hero{position:absolute;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);object-fit:contain;filter:drop-shadow(0 22px 22px #20382c20)}
.ritual-particles{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0}
@media(max-width:700px){.aperitivo-hero-wrap{left:-28%;top:41%;right:auto;bottom:auto;width:132%;height:auto;aspect-ratio:16/9}.aperitivo-hero{position:relative;top:0;transform:none}.aperitivo-copy{color:var(--green)}.stage[data-moment="aperitivo"] .big-type{top:47%}}

/* v15: breakfast on cream; the aperitivo is the actual end of the journey. */
:root{--biscuit:#d1b393}
.ritual{height:1300svh}
.aperitivo-wash{position:absolute;inset:0;background:var(--biscuit);opacity:0}
.breakfast-wrap{position:absolute;left:64%;top:56%;width:min(72vw,108svh);z-index:4;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.breakfast-hero{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 24px #32281f15)}
.breakfast-copy{position:absolute;z-index:5;left:7%;top:27%;opacity:0;pointer-events:none;color:var(--espresso)}
.breakfast-copy h2{font-size:clamp(64px,6.7vw,112px)}
.final-visit{position:absolute;z-index:7;left:7%;bottom:16%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;opacity:0;color:var(--green)}
.final-visit p{font-size:15px;line-height:1.55;margin:0}.final-visit .pill{min-height:44px}
.final-legal{position:absolute;z-index:7;left:7%;bottom:2%;margin:0;font-size:11px;line-height:1.5;opacity:0;color:var(--green)}
.no-script-contact{padding:24px 7%;font-size:16px;line-height:1.6}
@media(max-width:700px){
 .ritual{height:1260svh}
 .breakfast-copy{left:7%;top:16%}.breakfast-copy h2{font-size:16vw}
 .breakfast-wrap{left:50%;top:59%;width:100vw}
 .stage[data-moment="breakfast"] .big-type{top:43%;font-size:30vw}
 .final-visit{left:7%;right:7%;bottom:15%;flex-direction:row;justify-content:space-between;align-items:center;gap:10px}
 .final-visit p{font-size:12px}.final-visit .pill{font-size:12px;padding:0 15px;gap:14px}
 .final-legal{bottom:9%;left:7%;right:7%;font-size:9px}
 .aperitivo-copy{color:var(--green)}
}
@media(prefers-reduced-motion:reduce){.ritual{height:100svh}}

@media(min-width:701px){.aperitivo-film-wrap,.aperitivo-hero-wrap{left:11%;top:9%}}

/* v16: real GNAM pastries join the same espresso, then the savory pause. */
.ritual{height:1550svh}
.breakfast-wrap{inset:0;width:100%;height:100%;transform:none!important;z-index:5}
.pastry{position:absolute;width:min(30vw,50svh);height:auto;opacity:0;will-change:transform;pointer-events:none}
.pastry-plain{left:53%;top:65%;z-index:1}.pastry-chocolate{left:79%;top:69%;width:min(32vw,53svh);z-index:2}
.breakfast-source{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.savory-wash{position:absolute;inset:0;background:var(--green);opacity:0}
.savory-wrap{position:absolute;left:66%;top:57%;width:min(76vw,108svh);z-index:4;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.savory-hero{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 22px #111a1530)}
.savory-copy{position:absolute;z-index:5;left:7%;top:27%;opacity:0;pointer-events:none;color:var(--cream)}
.savory-copy h2{font-size:clamp(64px,6.7vw,112px)}
.stage.on-dark .masthead,.stage.on-dark .chapters,.stage.on-dark .scene-caption{color:var(--cream)}
.stage.on-dark .brand-mark img{filter:invert(1);mix-blend-mode:screen}
.stage.on-dark .visit{border-color:#f4ebdd66}.stage.on-dark .progress i{background:var(--cream)}
.chapters{gap:22px}
@media(max-width:700px){
 .ritual{height:1500svh}
 .pastry-plain{left:28%;top:67%;width:54vw}.pastry-chocolate{left:71%;top:69%;width:56vw}
 .savory-wrap{left:50%;top:59%;width:100vw}.savory-copy{left:7%;top:16%}.savory-copy h2{font-size:16vw}
 .stage[data-moment="savory"] .big-type{top:43%;font-size:30vw}
 .chapters{left:5%;right:5%;gap:8px}.chapters button{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.ritual{height:100svh}.pastry{will-change:auto}}

.chapters .nav-long{display:inline;margin:0;font:inherit}.nav-short{display:none!important}
@media(max-width:700px){.chapters .nav-long{display:none}.chapters .nav-short{display:inline!important;margin:0;font-size:inherit}}
@media(max-width:360px){.chapters{gap:4px}.chapters button{font-size:11px}}

/* Generated physical camera raccords, kept underneath all live type and controls. */
.cinematic-bridge{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:5;pointer-events:none;opacity:0}
/* Wide screens fill the film frame instead of exposing sampled side bars. */
@media(min-aspect-ratio:16/9){.cinematic-bridge{object-fit:cover}}
.breakfast-copy,.savory-copy,.tea-copy,.cookie-copy,.aperitivo-copy,.finish-copy,.finish-note{z-index:6}
.stage[data-bridge]:not([data-bridge=""]) .big-type{filter:opacity(calc(1 - var(--bridge-opacity,0)))}
@media(prefers-reduced-motion:reduce){.cinematic-bridge{display:none}}

.stage[data-bridge]:not([data-bridge=""]) .brand{color:var(--bridge-brand-color)}
.stage[data-bridge]:not([data-bridge=""]) .brand-mark img{filter:var(--bridge-brand-filter);mix-blend-mode:var(--bridge-brand-mix)}
.stage[data-bridge]:not([data-bridge=""]) .visit{color:var(--bridge-visit-color);border-color:currentColor}
.stage[data-bridge]:not([data-bridge=""]) .masthead-note{color:var(--bridge-note-color)}
.stage[data-bridge]:not([data-bridge=""]) .chapters{color:var(--bridge-nav-color)}
.stage[data-bridge]:not([data-bridge=""]) .scene-caption{color:var(--bridge-caption-color)}

/* v19: useful contacts throughout the journey, with the group signature at its end. */
.header-actions{display:flex;align-items:center;gap:24px}
.header-actions .visit{min-height:44px;display:inline-flex;align-items:center}
.brand:focus-visible,.final-credit a:focus-visible{outline-offset:4px}
.final-visit{bottom:18%;gap:14px;max-width:40%}
.final-address span{display:block}
.final-actions{display:flex;align-items:stretch;gap:12px}
.final-actions .pill{min-height:52px;min-width:148px;justify-content:center;gap:8px;padding:8px 20px;text-align:center}
.contact-whatsapp{background:var(--green);color:var(--cream)}
.contact-whatsapp:hover{background:var(--espresso);border-color:var(--espresso)}
.contact-whatsapp small{display:block;font-size:13px;line-height:1.4;letter-spacing:.025em;margin-top:2px}
.final-credit{position:absolute;z-index:7;left:7%;bottom:5.5%;display:flex;align-items:center;gap:14px;opacity:0;color:var(--green)}
.final-credit>span{font-size:13px}
.synergy-logo-frame{display:grid;place-items:center;width:216px;min-height:54px;padding:10px 14px;background:transparent;border-radius:0;box-shadow:none}
.synergy-logo-frame img{display:block;width:100%;height:auto}
.final-legal{bottom:1.8%}
.chapters button{min-height:44px}
@media(max-width:700px){
 .header-actions{gap:16px}.header-actions .visit{font-size:12px}
 .masthead{padding-left:6%;padding-right:6%}
 .final-visit{left:7%;right:7%;bottom:148px;max-width:none;display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .final-address{text-align:center}.final-visit p{font-size:14px;line-height:1.5}
 .final-address span{display:inline}.final-address span+span::before{content:" · "}
 .final-actions{gap:10px}.final-actions .pill{min-width:0;min-height:50px;flex:1;padding:7px 10px;font-size:14px}
 .final-credit{left:7%;right:7%;bottom:87px;justify-content:center;gap:12px}
 .final-credit>span{font-size:12px}.synergy-logo-frame{width:166px;min-height:40px;padding:8px 12px;border-radius:0}
 .final-legal{bottom:66px;font-size:10px;line-height:1.4;text-align:center}
 .chapters{bottom:12px}.chapters button{min-height:44px}
 .aperitivo-hero-wrap{left:-25%;top:39%;width:124%}
}
@media(max-width:700px) and (max-height:740px){
 .masthead{height:78px;padding-top:10px;padding-bottom:10px}
 .aperitivo-copy{top:14%}.aperitivo-copy h2{font-size:clamp(40px,12vw,44px)}
 .aperitivo-copy .tea-description{font-size:13px;margin-top:8px;line-height:1.35}
 .aperitivo-hero-wrap{left:-3%;top:40%;width:90%}
 .final-visit{bottom:156px;gap:8px}.final-visit p{font-size:13px}
 .final-credit{bottom:94px}.final-legal{bottom:61px;font-size:9.5px}
 .chapters{bottom:8px}
}

/* v20: a compact two-column composition for landscape phones and short windows. */
@media(max-height:620px) and (min-aspect-ratio:6/5){
 .masthead{height:66px;padding:10px 5%}.brand-mark{width:80px;height:30px}.brand-caption{font-size:7px;letter-spacing:2px}.masthead-note{display:none}
 .header-actions{gap:20px}.header-actions .visit{font-size:12px}
 .intro-copy,.pour-copy,.finish-copy,.breakfast-copy,.savory-copy,.tea-copy,.cookie-copy,.aperitivo-copy{left:5%;top:20%;max-width:41%}
 .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:10px}
 h1{font-size:clamp(38px,6vw,54px)}
 .pour-copy h2,.finish-copy h2,.breakfast-copy h2,.savory-copy h2,.tea-copy h2,.cookie-copy h2,.aperitivo-copy h2{font-size:clamp(32px,4.4vw,44px)}
 .intro-description{font-size:13px;line-height:1.45;margin:14px 0;top:auto}
 .intro-copy .pill{top:auto;min-height:44px;font-size:12px;padding:0 16px}
 .tea-description,.aperitivo-copy .tea-description,.cookie-copy .tea-description{font-size:12px;line-height:1.4;margin-top:12px}
 .film-wrap{inset:6% -3% 5% 38%;width:auto;height:auto;aspect-ratio:auto}
 .ritual-film{height:auto}
 .cup-wrap{width:61vw;top:50%}.finish-note{top:20%;bottom:auto;right:7%;font-size:20px}
 .pastry-plain{left:54%;top:62%;width:28vw}.pastry-chocolate{left:80%;top:65%;width:30vw}
 .savory-wrap{left:71%;top:55%;width:62vw}
 .tea-film-wrap{left:25%;top:12%;right:auto;bottom:auto;width:80%;height:auto;aspect-ratio:16/9}
 .tea-film{position:relative;top:0;transform:none}.tea-canvas,.tea-film-branding{position:absolute;inset:0}
 .aperitivo-film-wrap,.aperitivo-hero-wrap{left:43%;top:21%;right:auto;bottom:auto;width:58%;height:auto;aspect-ratio:16/9}
 .aperitivo-film,.aperitivo-hero{position:relative;top:0;transform:none}.aperitivo-canvas{position:absolute;inset:0}
 .big-type,.stage[data-moment] .big-type{top:28%;font-size:25vw}
 .scene-caption,.scroll-cue{display:none}
 .final-visit{left:5%;right:auto;bottom:110px;max-width:none;width:40%;gap:6px;align-items:stretch;flex-direction:column}
 .final-address{text-align:left}.final-address span{display:inline}.final-address span+span::before{content:" · "}.final-visit p{font-size:11px;line-height:1.5}
 .final-actions{gap:8px}.final-actions .pill{min-width:0;min-height:44px;padding:5px 10px;flex:1;font-size:12px}.contact-whatsapp small{font-size:11px}
 .final-credit{left:5%;right:auto;bottom:65px;gap:10px;justify-content:flex-start}.final-credit>span{font-size:11px}.synergy-logo-frame{width:156px;min-height:34px;padding:7px 12px;border-radius:0}
 .final-legal{left:5%;right:auto;bottom:47px;font-size:8px;text-align:left;line-height:1.3}
 .chapters{left:5%;right:5%;bottom:0;justify-content:space-between;gap:12px}.chapters button{font-size:12px;min-height:44px;padding:10px 0}
 .media-message{left:5%;bottom:50px}
}
@media(max-height:420px) and (min-aspect-ratio:6/5){
 .aperitivo-copy{top:19%}.aperitivo-copy h2{font-size:36px}.aperitivo-copy .eyebrow{margin-bottom:6px}.aperitivo-copy .tea-description{margin-top:9px}
}
@media(max-height:620px) and (min-aspect-ratio:6/5){.cup-wrap{left:70%!important}}
@media(min-width:701px) and (max-width:1100px) and (min-height:621px){
 .final-credit{bottom:96px}.final-visit{bottom:190px}
 .stage.at-finale .chapters{bottom:32px;left:7%;right:7%;justify-content:space-between}
 .final-legal{bottom:8px}
 .aperitivo-film-wrap,.aperitivo-hero-wrap{left:24%;right:0;top:13%;bottom:20%}
}
@media(max-width:700px){.scene-caption{display:none}}
/* Keep small controls legible on the brand's sage surface. */
.chapters button{opacity:1}
.stage[data-moment="espresso"] .masthead,.stage[data-moment="espresso"] .chapters,.stage[data-moment="espresso"] .scene-caption,.stage[data-moment="espresso"] .finish-note,.stage[data-moment="espresso"] .finish-copy .eyebrow{color:var(--espresso)}
.stage[data-moment="espresso"] .finish-copy{color:var(--green)}

/* v21: small official group and Hive signatures, requested by Mirko. */
.final-credit{flex-direction:column;align-items:flex-start;gap:5px}
.project-credit{display:flex;align-items:center;gap:12px}
.project-credit>span{font-size:11px}
.synergy-logo-frame{width:144px;min-height:36px;padding:6px 10px;border-radius:0;box-shadow:none}
.hive-credit{display:flex;align-items:center;gap:7px;font-size:9px;line-height:1.3;letter-spacing:.02em;white-space:nowrap}
.hive-logo{position:relative;display:block;flex:none;width:42px;aspect-ratio:858/410;overflow:hidden}
.hive-logo img{position:absolute;display:block;width:171.56294%;max-width:none;height:auto;left:-36.13054%;top:-47.56098%}
@media(max-width:700px){
 .final-credit{align-items:center;gap:5px}
 .project-credit{gap:10px}.project-credit>span{font-size:10px}
 .synergy-logo-frame{width:128px;min-height:32px;padding:5px 9px;border-radius:0}
 .hive-logo{width:40px}
 .final-visit{bottom:160px}
}
@media(max-width:700px) and (max-height:740px){.final-visit{bottom:168px}}
@media(min-width:701px) and (max-width:1100px) and (min-height:621px){.final-visit{bottom:202px}}
@media(max-height:620px) and (min-aspect-ratio:6/5){
 .final-credit{flex-direction:row;align-items:center;gap:20px}
 .project-credit{gap:10px}.project-credit>span{font-size:10px}
 .synergy-logo-frame{width:128px;min-height:32px;padding:5px 9px;border-radius:0}
 .hive-credit{gap:6px}.hive-logo{width:40px}
 .final-visit{bottom:110px}
}

.hive-credit{position:relative}
.hive-credit::after{content:"";position:absolute;inset:-4px -2px}
.hive-credit:hover>span:first-child{text-decoration:underline;text-underline-offset:3px}

/* v23: reserve real vertical space for the mobile finale, including browser bars.
   Invisible finale elements keep their rows throughout the journey, avoiding a
   layout jump when the final contact links become visible. Other scenes retain
   their absolute positioning and their existing scroll animation. */
@media(max-width:700px) and (orientation:portrait){
 .stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(78px,10svh,92px) auto minmax(0,1fr) auto auto auto 44px;row-gap:clamp(5px,.9svh,8px);padding:0 7% max(6px,env(safe-area-inset-bottom))}
 .masthead{height:clamp(78px,10svh,92px);padding-top:10px;padding-bottom:10px}
 .aperitivo-copy{position:relative;grid-row:2;inset:auto;max-width:none;transform:none!important}
 .aperitivo-copy .eyebrow{font-size:10px;margin-bottom:10px}
 .aperitivo-copy h2{font-size:clamp(36px,6.7svh,58px)}
 .aperitivo-copy .tea-description{font-size:clamp(12px,1.9svh,14px);line-height:1.4;margin-top:10px}
 .aperitivo-hero-wrap{position:relative;grid-row:3;inset:auto;width:100%;height:100%;min-height:0;aspect-ratio:auto;transform:none!important;overflow:clip}
 .aperitivo-hero{position:absolute;left:50%;top:50%;width:auto;height:100%;max-width:none;max-height:76vw;aspect-ratio:auto;transform:translate(-62.6%,-50%);filter:drop-shadow(0 5px 7px #20382c20)}
 .final-visit{position:relative;grid-row:4;inset:auto;width:100%;max-width:none;gap:8px}
 .final-visit p{font-size:clamp(12px,1.9svh,14px);line-height:1.4}
 .final-credit{position:relative;grid-row:5;inset:auto;justify-content:center;align-items:center}
 .final-legal{position:relative;grid-row:6;inset:auto;font-size:9px;line-height:1.35;text-align:center}
 .chapters{position:relative;grid-row:7;inset:auto;gap:6px;justify-content:space-between;align-items:center}
 .chapters button{font-size:clamp(10px,3vw,12px);padding:10px 0}
}
@media(min-width:1101px){
 .aperitivo-hero-wrap{left:26%;right:4%;top:15%;bottom:13%}
 .aperitivo-hero{top:0;transform:none;width:100%;height:100%;object-fit:contain}
}