/* Karak Cruiser / United Kingdom
   Editorial British-English edition. Brand palette and supplied imagery retained. */
:root { --header-height:106px; }
.announcement { height:32px; font-size:9px; letter-spacing:.14em; }
.desktop-nav { gap:32px; }
.desktop-nav a,.nav-visit { font-size:12px; }
.header-actions { gap:18px; }
.motion-toggle { display:flex; align-items:center; gap:7px; min-width:102px; min-height:44px; padding:8px 5px; font-size:10px; font-weight:700; }
.motion-toggle .icon { width:15px; height:15px; }
.motion-toggle[aria-pressed=true] { color:var(--palm); }
.motion-toggle:focus-visible { outline-offset:1px; }
.header-cta { min-height:46px; font-size:11px; }
.header-inner { gap:18px; }
.hero { min-height:690px; height:clamp(690px,51.5vw,790px); }
.hero-slides { position:absolute; inset:0; }
.hero-picture { opacity:0; transition:opacity 1.35s ease; }
.hero-picture.is-active { opacity:1; }
.hero-picture img { object-position:center 48%; animation:none; transform:scale(1.025); }
.hero-picture.is-active img { animation:uk-ken-burns 12s ease-out both; }
.hero-shade { background:linear-gradient(90deg,rgba(20,23,21,.85) 0%,rgba(20,23,21,.6) 36%,rgba(20,23,21,.1) 78%),linear-gradient(0deg,rgba(20,23,21,.65),transparent 45%); }
.hero-content { padding-top:100px; }
.hero-eyebrow { font-size:10px; font-weight:700; letter-spacing:.15em; animation:uk-appear .7s .05s both; }
.hero h1 { font-size:clamp(100px,9.6vw,142px); max-width:920px; letter-spacing:-.012em; line-height:.92; margin-top:32px; }
.hero h1>span { animation:uk-title-reveal 1.05s .16s var(--ease) both; }
.hero h1>span+span { animation-delay:.31s; }
.hero-description { max-width:365px; font-size:16px; margin-top:28px; animation:uk-appear 1s .46s both; }
.hero-buttons { animation:uk-appear 1s .59s both; }
.hero-buttons .button { font-size:12px; padding-inline:24px; }
.hero-corner { top:27px; padding:8px 13px; border:1px solid rgba(232,223,205,.35); border-radius:2px; font-size:9px; background:rgba(40,40,40,.17); backdrop-filter:blur(5px); }
.hero-corner span:first-child { font-size:12px; }
.hero-foot { bottom:37px; gap:24px; }
.hero-scene-controls { display:flex; flex-wrap:wrap; gap:9px; width:330px; }
.hero-scene-controls button { display:flex; align-items:center; gap:9px; padding:12px 0; min-height:44px; color:var(--cream); font-size:10px; }
.hero-scene-controls button i { display:block; width:48px; height:2px; background:rgba(232,223,205,.3); position:relative; overflow:hidden; }
.hero-scene-controls button i::after { content:''; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.hero-scene-controls button.is-active { color:var(--gold); }
.hero-scene-controls button.is-active i::after { animation:hero-scene-progress 8s linear both; }
.hero-scene-controls button:hover i { background:rgba(232,223,205,.75); }
.hero-scene-caption { width:100%; font-size:8px; font-weight:600; letter-spacing:.1em; color:var(--cream); }
.hero-note { position:relative; width:326px; padding:15px; border-bottom:3px solid var(--gold); gap:16px; animation:uk-cup-float 6s 1.3s ease-in-out infinite; }
.hero-note img { width:77px; height:98px; }
.hero-note p { font-size:24px; }
.hero-note .micro-label { font-size:8px; }
.cup-steam { position:absolute; width:69px; height:83px; left:19px; top:-53px; pointer-events:none; fill:none; stroke:var(--paper-light); stroke-width:1.4; }
.cup-steam path { opacity:0; animation:uk-steam 3.6s ease-in-out infinite; }
.cup-steam path:nth-child(2) { animation-delay:.7s; }
.cup-steam path:nth-child(3) { animation-delay:1.4s; }
.ticker { height:67px; }
.ticker-track { animation-duration:37s; }
.ticker-set>span:not(.ticker-star) { font-size:27px; }
.ticker-star { animation:uk-sun-turn 18s linear infinite; }
.section-kicker { font-size:10px; letter-spacing:.13em; }
.story { gap:84px; }
.story h2 { font-size:clamp(48px,5vw,76px); }
.story-photo { aspect-ratio:1.075; border-radius:160px 5px 5px 5px; }
.story-photo img { object-position:31% center; }
.story .lead { font-size:19px; }
.story .body-copy { font-size:15px; }
.story-seal { transform:rotate(-8deg); }
.story-seal .sun { animation:uk-sun-turn 24s linear infinite; }
.photo-caption { font-size:10px; }
.section-intro p { font-size:14px; }
.filter { font-size:11px; }
.preview-note { font-size:9px; }
.product-tag { font-size:8px; }
.product-open { transition:transform .5s var(--ease); }
.product-open:hover { transform:translateY(-4px); }
.product-title-row h3 { font-size:32px; }
.product-info p { font-size:12px; }
.ritual-bottom>p { font-size:11px; max-width:660px; }
.product-visual img { will-change:auto; }
.product-open:hover .product-visual img { transform:translateY(-8px); }
.space-top .section-kicker { font-size:10px; }
.scene-tabs { flex:1; }
.scene-tab { font-size:12px; padding-inline:20px; }
.scene-num { font-size:9px; }
.scene-small-title { font-size:9px; }
.space-copy p { font-size:14px; }
.collection-caption { font-size:9px; }
.detail-label>span { font-size:9px; }
.details .body-copy { font-size:15px; }
/* The daily moment changes only when requested; no auto-advancing text. */
.daily-route { color:var(--paper-light); background:var(--canyon); position:relative; overflow:hidden; }
.route-layout { display:grid; grid-template-columns:.87fr 1.4fr; gap:90px; align-items:center; }
.route-heading .section-kicker { color:var(--gold); }
.route-heading h2 { font-size:clamp(45px,4.6vw,66px); line-height:1.02; }
.route-heading h2 span { color:var(--gold); display:block; }
.route-heading>p { font-size:14px; line-height:1.85; color:var(--cream); margin-top:23px; }
.route-cup { width:68px; height:68px; fill:none; stroke:var(--gold); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; margin-top:30px; }
.route-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.route-tabs button { text-align:left; min-height:76px; padding:0 0 17px; font-size:12px; line-height:1.5; font-weight:600; color:var(--cream); transition:color .3s; }
.route-tabs button span { display:block; font-family:var(--display); font-size:23px; margin-bottom:8px; color:var(--spice); }
.route-tabs button[aria-selected=true],.route-tabs button[aria-selected=true] span,.route-tabs button:hover { color:var(--gold); }
.route-tabs button:focus-visible { outline-color:var(--gold); }
.route-line { height:1px; border-top:1px dashed rgba(232,223,205,.45); position:relative; margin-bottom:45px; }
.route-line span { width:11px; height:11px; background:var(--gold); border:3px solid var(--canyon); box-sizing:content-box; border-radius:50%; position:absolute; left:calc(var(--moment-index,0)*33.333%); top:-9px; transition:left .6s var(--ease); }
.moment-panels { min-height:305px; }
.moment-panel { position:relative; min-height:305px; padding-right:205px; }
.moment-word { font-size:9px; font-weight:700; letter-spacing:.15em; color:var(--gold); }
.moment-panel h3 { font-size:clamp(37px,3.2vw,49px); line-height:1.02; margin:16px 0 19px; }
.moment-panel p { max-width:355px; color:var(--cream); font-size:13px; line-height:1.85; }
.moment-panel .text-link { font-size:11px; margin-top:17px; color:var(--gold); gap:15px; }
.moment-panel img { object-fit:contain; width:165px; height:237px; position:absolute; right:0; bottom:22px; filter:drop-shadow(0 18px 17px rgba(0,0,0,.18)); animation:uk-cup-float 6s ease-in-out infinite; }
#moment-panel-2 img { width:170px; }
/* Native disclosure widgets retain keyboard and screen-reader behaviour. */
.faq { display:grid; grid-template-columns:.86fr 1.35fr; gap:110px; align-items:start; }
.faq-heading h2 { font-size:clamp(48px,4.6vw,66px); }
.faq-heading>p { font-size:14px; color:var(--muted); max-width:275px; margin-top:24px; }
.faq-items { border-top:1px solid var(--line); }
.faq-items details { border-bottom:1px solid var(--line); }
.faq-items summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:25px 0; cursor:pointer; font-size:14px; font-weight:650; line-height:1.5; }
.faq-items summary::-webkit-details-marker { display:none; }
.faq-plus { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; font-size:24px; font-weight:400; transition:transform .3s; flex:0 0 auto; color:var(--palm); }
.faq-items details[open] .faq-plus { transform:rotate(45deg); }
.faq-answer { padding:0 35px 26px 0; }
.faq-answer p { font-size:13px; line-height:1.9; color:var(--muted); }
.faq-answer .text-link { margin-top:15px; font-size:12px; }
.closing-section h2 { font-size:clamp(67px,7.3vw,106px); }
.closing-copy p { max-width:370px; font-size:15px; line-height:1.85; }
.closing-small { font-size:9px; }
.footer-message p { font-size:12px; }
.footer-nav a,.footer-extra a,.footer-extra>button,.footer-nav>button { font-size:12px; }
.footer-bottom { font-size:10px; }
.footer-extra { gap:13px; }
.visit-info-note { font-size:12px; line-height:1.8; }
.visit-dialog .visit-picture img { object-position:center; }
.visit-copy h2 { font-size:62px; }
.menu-dialog .dialog-heading p { font-size:14px; }
.menu-item p { font-size:12px; }
.menu-item h3 { font-size:25px; }
.motion-ready .reveal { transition:opacity .85s var(--ease) var(--reveal-delay,0ms),transform .85s var(--ease) var(--reveal-delay,0ms); }
/* All decorative movement has a one-click pause and respects reduced motion. */
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation-play-state:paused!important; transition-duration:0s!important; }
.motion-paused { scroll-behavior:auto; }
.motion-paused .reveal,.motion-paused .hero h1>span,.motion-paused .hero-eyebrow,.motion-paused .hero-description,.motion-paused .hero-buttons { opacity:1!important; transform:none!important; clip-path:none!important; }
.motion-paused .hero-picture img { animation:none!important; transform:none!important; }
.motion-paused .hero-note,.motion-paused .moment-panel img { animation:none!important; transform:none!important; }
.motion-paused .cup-steam { display:none; }
.motion-paused .hero-scene-controls button.is-active i::after { animation:none!important; transform:scaleX(1); }
@keyframes uk-title-reveal { from { opacity:0; transform:translateY(38px); clip-path:inset(0 0 100% 0); } to { opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0); } }
@keyframes uk-appear { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes uk-ken-burns { from { transform:scale(1.025); } to { transform:scale(1.095); } }
@keyframes uk-cup-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes uk-steam { 0% { opacity:0; transform:translateY(10px); } 35% { opacity:.65; } 80% { opacity:.08; } 100% { opacity:0; transform:translateY(-18px); } }
@keyframes uk-sun-turn { to { transform:rotate(360deg); } }
@keyframes hero-scene-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:1150px) {
 .desktop-nav { gap:22px; padding-inline:0; }
 .header-actions { gap:9px; }
 .motion-toggle { min-width:90px; font-size:9px; }
 .header-cta { gap:15px; }
 .hero h1 { font-size:clamp(90px,10.3vw,120px); }
 .hero { min-height:690px; }
 .story { gap:55px; }
 .story .lead { font-size:17px; }
 .route-layout { gap:50px; grid-template-columns:.85fr 1.3fr; }
 .moment-panel { padding-right:153px; }
 .moment-panel img,#moment-panel-2 img { width:133px; height:205px; }
 .moment-panel h3 { font-size:39px; }
 .faq { gap:60px; }
 .scene-tab { padding-inline:14px; font-size:11px; }
 .scene-small-title { display:none; }
}
@media (max-width:980px) {
 .header-actions { gap:19px; }
 .motion-toggle { font-size:11px; }
 .hero-content { padding-top:110px; }
 .hero h1 { font-size:clamp(78px,11.5vw,111px); }
 .hero-description { font-size:15px; }
 .hero-note { width:282px; }
 .hero-note p { font-size:22px; }
 .hero-note img { width:65px; height:86px; }
 .hero-scene-caption { max-width:250px; font-size:7px; }
 .hero-corner { right:35px; font-size:8px; }
 .route-layout { grid-template-columns:1fr; gap:50px; }
 .route-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:35px; }
 .route-heading .section-kicker { grid-column:1/-1; }
 .route-heading h2 { font-size:60px; }
 .route-heading>p { align-self:center; max-width:260px; margin-top:0; }
 .route-cup { display:none; }
 .route-tabs button { font-size:14px; }
 .moment-panel { padding-right:240px; min-height:295px; }
 .moment-panel img,#moment-panel-2 img { width:190px; height:245px; right:35px; bottom:5px; }
 .moment-panel h3 { font-size:48px; }
 .moment-panel p { font-size:14px; }
 .faq { gap:45px; grid-template-columns:.8fr 1.3fr; }
 .faq-items summary { font-size:13px; }
 .product-title-row h3 { font-size:26px; }
 .product-info p { font-size:11px; }
}
@media (max-width:760px) {
 :root { --header-height:96px; }
 html { scroll-padding-top:110px; }
 .header-inner { height:96px; }
 .announcement { height:29px; font-size:8px; }
 .announcement-end { display:none; }
 .announcement-star { font-size:12px; }
 .brand { padding-block:8px; min-width:122px; }
 .nav-logo { height:80px; max-width:121px; }
 .motion-toggle { min-width:95px; font-size:10px; }
 .header-actions { gap:14px; }
 .hero { min-height:630px; height:calc(100svh - 125px); max-height:840px; }
 .hero-picture img { object-position:64% center; }
 .hero-shade { background:linear-gradient(90deg,rgba(20,23,21,.74),rgba(20,23,21,.23)),linear-gradient(0deg,rgba(20,23,21,.7),transparent 80%); }
 .hero-content { padding-top:110px; }
 .hero h1 { font-size:clamp(70px,11.8vw,97px); max-width:650px; line-height:.97; margin-top:24px; }
 .hero-eyebrow { font-size:9px; }
 .hero-description { font-size:15px; max-width:330px; line-height:1.8; margin-top:24px; }
 .hero-buttons { margin-top:25px; gap:26px; }
 .hero-buttons .button { font-size:11px; padding-inline:20px; }
 .hero-secondary { font-size:11px; }
 .hero-corner { top:24px; right:26px; padding:6px 9px; }
 .hero-foot { bottom:30px; }
 .hero-note { width:259px; padding:12px; gap:12px; }
 .hero-note p { font-size:20px; }
 .hero-note .micro-label { font-size:7px; }
 .hero-note img { height:80px; width:59px; }
 .cup-steam { left:10px; }
 .hero-scene-controls { width:150px; gap:9px; }
 .hero-scene-controls button { gap:7px; font-size:9px; }
 .hero-scene-controls button i { width:21px; }
 .hero-scene-caption { font-size:7px; max-width:130px; letter-spacing:.03em; }
 .ticker { height:58px; }
 .ticker-set { gap:32px; padding-right:32px; }
 .ticker-set>span:not(.ticker-star) { font-size:25px; }
 .ticker-star { font-size:28px; }
 .section-space { padding-block:80px; }
 .story { gap:55px; }
 .story h2 { font-size:clamp(48px,8.7vw,62px); }
 .story .lead { font-size:18px; }
 .story .body-copy { font-size:15px; }
 .story-photo { aspect-ratio:1.08; border-top-left-radius:125px; }
 .story-seal { top:-16px; left:9px; width:105px; height:105px; }
 .story-seal span { font-size:12px; }
 .story-seal .sun { width:21px; height:21px; }
 .photo-caption { font-size:9px; }
 .section-kicker { font-size:9px; }
 .section-intro p { font-size:13px; }
 .filter { min-height:44px; font-size:10px; padding-inline:15px; }
 .filter-row { gap:12px; flex-wrap:wrap; }
 .preview-note { font-size:8px; }
 .product-tag { font-size:8px; }
 .product-title-row h3 { font-size:30px; }
 .product-info p { font-size:12px; }
 .ritual-bottom>p { font-size:11px; line-height:1.9; }
 .space-main { height:540px; }
 .space-image { object-position:68% center; }
 .space-copy h2 { font-size:48px; }
 .space-copy p { font-size:13px; max-width:290px; }
 .scene-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
 .scene-tab { min-height:75px; flex-wrap:wrap; padding:15px 9px; font-size:10px; gap:5px; }
 .scene-tab .icon { display:none; }
 .scene-num { width:100%; font-size:8px; }
 .detail-label>span { font-size:8px; }
 .collection-caption { font-size:8px; }
 .details h2 { font-size:57px; }
 .details .body-copy { font-size:15px; }
 .route-heading { display:block; }
 .route-heading h2 { font-size:57px; }
 .route-heading h2 span br { display:none; }
 .route-heading>p { margin-top:23px; max-width:320px; }
 .route-layout { gap:37px; }
 .route-tabs { gap:15px; }
 .route-tabs button { font-size:11px; }
 .route-tabs button span { font-size:22px; }
 .route-line { margin-bottom:32px; }
 .moment-panel { min-height:320px; padding-right:180px; }
 .moment-panel h3 { font-size:40px; }
 .moment-panel p { font-size:13px; }
 .moment-panel .text-link { font-size:10px; }
 .moment-panel img,#moment-panel-2 img { width:145px; height:210px; right:0; bottom:45px; }
 .faq { grid-template-columns:1fr; gap:35px; }
 .faq-heading h2 { font-size:57px; }
 .faq-heading>p { max-width:310px; }
 .faq-items summary { padding-block:24px; font-size:14px; }
 .faq-answer p { font-size:13px; }
 .closing-section h2 { font-size:75px; }
 .closing-copy p { font-size:14px; max-width:350px; }
 .closing-small { font-size:8px; }
 .footer-nav a,.footer-extra a,.footer-extra>button,.footer-nav>button { font-size:12px; }
 .footer-bottom { font-size:9px; line-height:1.9; }
 .visit-copy h2 { font-size:49px; }
 .visit-info-note { font-size:11px; }
 .menu-dialog .dialog-heading p { font-size:12px; }
 .menu-item h3 { font-size:24px; }
 .menu-item p { font-size:11px; }
}
@media (max-width:520px) {
 .wrap { width:calc(100% - 42px); }
 .hero { min-height:654px; }
 .hero-content { padding-top:115px; }
 .hero h1 { font-size:clamp(53px,16.7vw,87px); letter-spacing:-.02em; }
 .hero-eyebrow { font-size:8px; letter-spacing:.07em; gap:10px; }
 .hero-description { max-width:286px; font-size:14px; }
 .hero-secondary { font-size:10px; gap:11px; }
 .hero-buttons { gap:19px; }
 .hero-buttons .button { font-size:10px; padding-inline:16px; gap:18px; min-height:52px; }
 .hero-note { width:227px; padding:11px; gap:10px; }
 .hero-note img { width:55px; height:78px; }
 .hero-note p { font-size:19px; }
 .hero-note .micro-label { font-size:6.5px; }
 .hero-note-line { margin-top:9px; }
 .hero-scene-controls { width:88px; gap:6px; }
 .hero-scene-controls button { flex-direction:column; align-items:flex-start; gap:8px; }
 .hero-scene-controls button i { width:23px; }
 .hero-scene-caption { display:none; }
 .hero-foot { gap:14px; }
 .hero-corner { right:21px; font-size:7px; }
 .hero-corner span:first-child { font-size:10px; }
 .story h2 { font-size:50px; }
 .story .lead { font-size:17px; }
 .story .body-copy { font-size:14px; }
 .story-photo { aspect-ratio:1.03; }
 .photo-caption { font-size:8px; gap:6px; }
 .filter-row { margin-top:28px; }
 .filter-row>.preview-note { display:none; }
 .filters { width:100%; gap:2px; }
 .filter { padding-inline:12px; font-size:10px; flex:1; }
 .product-visual { height:335px; }
 .product-title-row h3 { font-size:32px; }
 .ritual-bottom>p { max-width:100%; }
 .space-copy h2 { font-size:44px; }
 .space-top .section-kicker { font-size:8px; }
 .scene-tab { font-size:9px; padding-inline:8px; }
 .route-heading h2 { font-size:53px; }
 .route-tabs { gap:8px; }
 .route-tabs button { font-size:10px; }
 .moment-panel { padding-right:121px; min-height:325px; }
 .moment-panel h3 { font-size:34px; line-height:1.08; }
 .moment-panel img,#moment-panel-2 img { width:103px; height:177px; bottom:51px; }
 .moment-panel .text-link { align-items:flex-start; gap:8px; }
 .moment-panel .text-link .icon { width:16px; height:16px; }
 .moment-panel p { font-size:12px; }
 .moment-word { font-size:8px; }
 .faq-heading h2 { font-size:53px; }
 .faq-items summary { font-size:13px; gap:17px; }
 .faq-answer { padding-right:18px; }
 .closing-section h2 { font-size:69px; }
 .footer-message .micro-label { font-size:8px; }
}
@media (max-width:360px) {
 .wrap { width:calc(100% - 34px); }
 .header-actions { gap:9px; }
 .motion-toggle { min-width:42px; padding-inline:9px; justify-content:center; }
 .motion-toggle>span { display:none; }
 .hero-note { width:203px; padding:10px; }
 .hero-note img { width:45px; height:67px; }
 .hero-note p { font-size:17px; }
 .hero-note .micro-label { font-size:6px; }
 .hero-foot { gap:9px; }
 .hero-scene-controls { width:69px; gap:6px; }
 .hero-scene-controls button i { width:17px; }
 .hero-buttons { gap:13px; }
 .hero-buttons .button { padding-inline:13px; font-size:9px; }
 .hero-secondary { font-size:9px; }
 .story h2 { font-size:44px; }
 .filter { padding-inline:9px; font-size:9px; }
 .route-heading h2 { font-size:46px; }
 .moment-panel { padding-right:100px; min-height:345px; }
 .moment-panel h3 { font-size:30px; }
 .moment-panel img,#moment-panel-2 img { width:88px; }
 .closing-section h2 { font-size:59px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
 .hero h1>span,.hero-description,.hero-eyebrow,.hero-buttons,.reveal { opacity:1!important; transform:none!important; clip-path:none!important; }
 .cup-steam { display:none; }
 .hero-picture img { transform:none; }
 .hero-scene-controls button.is-active i::after { transform:scaleX(1); }
}
@media print {
 .motion-toggle,.hero-scene-controls,.cup-steam { display:none!important; }
 .hero h1>span,.hero-description,.hero-eyebrow,.hero-buttons { opacity:1!important; transform:none!important; clip-path:none!important; }
 .route-layout,.faq { gap:30px; }
 .daily-route { print-color-adjust:exact; }
}
.page-inactive *,.page-inactive *::before,.page-inactive *::after { animation-play-state:paused!important; }
.hero-offscreen .hero *,.hero-offscreen .hero *::before,.hero-offscreen .hero *::after { animation-play-state:paused!important; }
/* Four spaces stay on one deliberate navigation row. */
.scene-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Limit the interactive hero row to its actual controls rather than spanning
   the photograph and the independent drink card. */
.hero-buttons { width:fit-content; max-width:100%; }