:root {
  --choco: #37564c;
  --choco-2: #2f493f;
  --muted: #6e6a5e;
  --cream: #ebe9db;
  --cream-deep: #f3efe5;
  --bg: #ebe9db;
  --card: #f9f7ef;
  --gold: #d4ac67;
  --gold-light: #f1e4c9;
  --sand: #dfc09f;
  --chilli: #99320f;
  --chilli-light: #f3dfd5;
  --pandan: #789c4c;
  --pandan-light: #e3ecd9;
  --border: rgba(55, 86, 76, .15);
  --shadow: 0 26px 70px rgba(55, 86, 76, .12);
  --serif: "Libre Baskerville", "EB Garamond", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --header-h: 112px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body { margin: 0; color: var(--choco); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .032; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
.brand-logo-reversed { filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
::selection { color: var(--cream); background: var(--chilli); }
:focus-visible { outline: 2px solid var(--chilli); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; border: 0; overflow: hidden; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1200; padding: .75rem 1rem; transform: translateY(-150%); background: var(--card); border-radius: 999px; }
.skip-link:focus { transform: none; }
.container, .container-wide { width: min(100% - 48px, 1280px); margin-inline: auto; }
.container-wide { width: min(100% - 56px, 1320px); }
.section-light { color: var(--choco); background: var(--cream); }
.section-cream { color: var(--choco); background: var(--cream-deep); }
.section-dark { position: relative; color: var(--cream); background: var(--choco); }
.section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 20%, rgba(212,172,103,.09), transparent 27%), radial-gradient(circle at 14% 82%, rgba(120,156,76,.08), transparent 30%); }
.section-dark > * { position: relative; }
.home-sections { display: flex; flex-direction: column; }
.home-section-slot { width: 100%; }
.home-intro-seen .home-intro { display: none; }
body.intro-active { overflow: hidden; }
.home-intro { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; overflow: hidden; color: var(--cream); background: #2f5147; isolation: isolate; animation: homeIntroFailsafe calc(var(--intro-duration, 6200ms) + 2s) linear forwards; }
.home-intro::before { content: ""; position: absolute; inset: -8%; z-index: -3; opacity: .3; background: url("../brand/vapor-fog.png") center / cover no-repeat; filter: saturate(.45) contrast(.9); transform: scale(1.06); }
.home-intro::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 52%, rgba(212,172,103,.16), transparent 27%), radial-gradient(circle at 14% 18%, rgba(235,233,219,.08), transparent 25%), linear-gradient(145deg, rgba(28,66,55,.08), rgba(22,47,40,.45)); }
.home-intro-inner { width: min(calc(100% - 48px), 920px); min-height: 540px; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center; padding: 54px 0 34px; text-align: center; }
.home-intro-eyebrow { margin: 0; color: var(--gold); font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; opacity: 0; animation: homeIntroEyebrow var(--intro-duration, 6200ms) ease both; }
.home-intro-logo-stage { position: relative; width: min(100%, 640px); height: clamp(250px, 43vh, 390px); display: grid; place-items: center; isolation: isolate; }
.home-intro-logo { position: absolute; top: 50%; left: 50%; margin: 0; object-fit: contain; transform: translate(-50%, -50%); will-change: opacity, filter, transform; }
.home-intro-logo-old { z-index: 1; width: min(82%, 470px); opacity: 0; filter: drop-shadow(0 24px 42px rgba(8,27,21,.3)); animation: homeIntroOldLogo var(--intro-duration, 6200ms) cubic-bezier(.45,0,.2,1) both; }
.home-intro-logo-new { z-index: 3; width: min(86%, 500px); height: min(72%, 280px); opacity: 0; filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%) drop-shadow(0 22px 38px rgba(7,26,20,.35)); }
.home-intro-logo-step { animation: homeIntroLogoFinal var(--intro-duration, 6200ms) cubic-bezier(.22,1,.36,1) both; }
.home-intro:not(.has-legacy-logo) .home-intro-logo-step { animation-name: homeIntroLogoWithoutLegacy; }
.home-intro-steam { position: absolute; inset: 2% 5% -2%; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none; animation: homeIntroSteam var(--intro-duration, 6200ms) ease-in-out both; }
.home-intro-steam-fog { position: absolute; inset: 5% 0 -5%; background: url("../brand/vapor-fog.png") center / cover no-repeat; filter: blur(6px) saturate(.25) brightness(1.6); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 56%, #000 12%, transparent 78%); mask-image: radial-gradient(ellipse 58% 52% at 50% 56%, #000 12%, transparent 78%); }
.home-intro-wisp { --intro-drift: 0px; position: absolute; bottom: 22%; width: 66px; height: 190px; border-radius: 50%; background: linear-gradient(90deg, transparent 3%, rgba(235,233,219,.12) 22%, rgba(255,255,255,.75) 52%, rgba(235,233,219,.14) 78%, transparent 97%); filter: blur(13px); opacity: 0; animation: homeIntroWisp var(--intro-duration, 6200ms) ease-in-out both; }
.home-intro-wisp-one { --intro-drift: -30px; left: 28%; }
.home-intro-wisp-two { --intro-drift: 12px; left: calc(50% - 33px); height: 220px; }
.home-intro-wisp-three { --intro-drift: 34px; right: 28%; }
.home-intro-message { margin: -18px 0 24px; color: rgba(235,233,219,.92); font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.65rem); line-height: 1.35; letter-spacing: -.025em; opacity: 0; transform: translateY(12px); animation: homeIntroMessage var(--intro-duration, 6200ms) ease both; }
.home-intro-progress { width: min(220px, 48vw); height: 1px; overflow: hidden; background: rgba(235,233,219,.2); }
.home-intro-progress span { width: 100%; height: 100%; display: block; transform: scaleX(0); transform-origin: left; background: var(--gold); animation: homeIntroProgress var(--intro-duration, 6200ms) linear both; }
.home-intro-skip { position: absolute; top: max(24px, env(safe-area-inset-top)); right: max(28px, env(safe-area-inset-right)); z-index: 5; min-height: 42px; padding: 9px 17px; color: rgba(235,233,219,.84); border: 1px solid rgba(235,233,219,.28); border-radius: 999px; background: rgba(23,56,47,.38); font-size: .72rem; font-weight: 700; backdrop-filter: blur(10px); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.home-intro-skip:hover { color: var(--choco); border-color: var(--gold); background: var(--gold); }
.home-intro-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-intro-ambient span { position: absolute; width: min(48vw, 620px); aspect-ratio: 1; border: 1px solid rgba(212,172,103,.12); border-radius: 50%; }
.home-intro-ambient span:nth-child(1) { top: -32%; left: -15%; }
.home-intro-ambient span:nth-child(2) { right: -20%; bottom: -42%; width: min(62vw, 760px); }
.home-intro-ambient span:nth-child(3) { top: 42%; left: 50%; width: min(78vw, 980px); transform: translate(-50%, -50%); opacity: .45; }
.home-intro.is-leaving { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.022); transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1), visibility 0s linear 1.1s; }
@keyframes homeIntroEyebrow { 0%, 5% { opacity: 0; transform: translateY(9px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes homeIntroOldLogo { 0%, 6% { opacity: 0; filter: blur(8px) drop-shadow(0 24px 42px rgba(8,27,21,0)); transform: translate(-50%, -48%) scale(.94); } 18%, 34%, 36% { opacity: 1; filter: blur(0) drop-shadow(0 24px 42px rgba(8,27,21,.3)); transform: translate(-50%, -50%) scale(1); } 44% { opacity: 0; filter: blur(12px) drop-shadow(0 0 0 rgba(8,27,21,0)); transform: translate(-50%, -52%) scale(1.08); } 100% { opacity: 0; filter: blur(12px) drop-shadow(0 0 0 rgba(8,27,21,0)); transform: translate(-50%, -52%) scale(1.08); } }
@keyframes homeIntroLogoFinal { 0%, 40% { opacity: 0; filter: blur(14px) brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%); transform: translate(-50%, -48%) scale(.76); } 50% { opacity: 1; filter: blur(0) brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%) drop-shadow(0 0 30px rgba(245,221,158,.58)); transform: translate(-50%, -50%) scale(1.07); } 58%, 100% { opacity: 1; filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%) drop-shadow(0 22px 38px rgba(7,26,20,.35)); transform: translate(-50%, -50%) scale(1); } }
@keyframes homeIntroLogoWithoutLegacy { 0%, 8% { opacity: 0; filter: blur(10px) brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%); transform: translate(-50%, -48%) scale(.82); } 24% { opacity: 1; filter: blur(0) brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%) drop-shadow(0 0 28px rgba(245,221,158,.58)); transform: translate(-50%, -50%) scale(1.05); } 36%, 100% { opacity: 1; filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%) drop-shadow(0 22px 38px rgba(7,26,20,.35)); transform: translate(-50%, -50%) scale(1); } }
@keyframes homeIntroSteam { 0%, 29%, 72%, 100% { opacity: 0; transform: translateY(12px) scale(.88); } 43% { opacity: .9; transform: translateY(-2px) scale(1.06); } 60% { opacity: .18; transform: translateY(-22px) scale(1.18); } }
@keyframes homeIntroWisp { 0%, 28%, 72%, 100% { opacity: 0; transform: translate3d(0,28px,0) scaleX(.76); } 42% { opacity: .76; transform: translate3d(calc(var(--intro-drift) * .35),-4px,0) scaleX(1.08); } 60% { opacity: .12; transform: translate3d(var(--intro-drift),-64px,0) scaleX(1.2); } }
@keyframes homeIntroMessage { 0%, 60% { opacity: 0; transform: translateY(8px); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes homeIntroProgress { to { transform: scaleX(1); } }
@keyframes homeIntroFailsafe { 0%, 91% { opacity: 1; visibility: visible; pointer-events: auto; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
.generic-section { padding: 110px 0; }
.eyebrow { display: block; margin-bottom: 18px; color: var(--gold); font-family: var(--mono); font-size: .72rem; line-height: 1.3; font-weight: 600; letter-spacing: .27em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 450; line-height: 1.03; letter-spacing: -.04em; }
h1 { font-size: clamp(3.6rem, 7vw, 7.2rem); }
h2 { font-size: clamp(2.65rem, 5vw, 5.2rem); }
h3 { font-family: var(--serif); font-size: 1.55rem; line-height: 1.18; letter-spacing: -.025em; }
em { color: var(--gold); font-weight: 430; }
.center { display: flex; justify-content: center; text-align: center; }
.prose-centered { max-width: 950px; margin-inline: auto; text-align: center; }
.prose-centered p { max-width: 720px; margin-inline: auto; color: inherit; opacity: .75; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 124px); }
.align-center { align-items: center; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 25px; border: 1px solid transparent; border-radius: 999px; font-size: .84rem; font-weight: 700; line-height: 1.2; transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-2px); }
.cms-media-image { object-position: var(--media-position, 50% 50%); transform: translate(var(--media-shift-x, 0), var(--media-shift-y, 0)) scale(var(--media-scale, 1)); transform-origin: center; }
.arrow-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; font-family: var(--sans); font-size: .92em; font-weight: 700; line-height: 1; vertical-align: middle; transition: transform .2s ease; }
.arrow-icon.arrow-right, .arrow-icon.arrow-external, .arrow-icon.arrow-down { margin-inline-start: .35em; }
.arrow-icon.arrow-left { margin-inline-end: .45em; }
a:hover .arrow-icon.arrow-right, button:hover .arrow-icon.arrow-right { transform: translateX(3px); }
a:hover .arrow-icon.arrow-external, button:hover .arrow-icon.arrow-external { transform: translate(2px, -2px); }
a:hover .arrow-icon.arrow-down, button:hover .arrow-icon.arrow-down { transform: translateY(3px); }
a:hover .arrow-icon.arrow-left, button:hover .arrow-icon.arrow-left { transform: translateX(-3px); }
i.fa-arrow-left, i.fa-arrow-right, i.fa-arrow-up, i.fa-arrow-down, i.fa-arrow-up-right-from-square, i.fa-arrow-right-to-bracket, i.fa-arrow-right-from-bracket, i.fa-chevron-left, i.fa-chevron-right, i.fa-chevron-up, i.fa-chevron-down, i.fa-angle-left, i.fa-angle-right, i.fa-angle-up, i.fa-angle-down { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; flex: 0 0 auto; line-height: 1; }
.hero-button-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hero-copy .button .location-pin { width: 16px; height: 16px; flex-basis: 16px; }
.button-gold { color: #263d35; background: var(--gold); }
.button-gold:hover { background: #e3b666; }
.button-dark { color: var(--cream); background: var(--choco); }
.button-dark:hover { background: #46675d; }
.button-outline-light { color: var(--cream); border-color: rgba(235,233,219,.35); background: transparent; }
.button-outline-light:hover { border-color: var(--gold); color: var(--choco-2); background: var(--gold); box-shadow: 0 10px 26px rgba(20,45,36,.2); }
.button-pandan { color: #f3f6ec; border-color: rgba(93,183,126,.45); background: rgba(120,156,76,.27); }
.text-link { display: inline-flex; gap: 12px; align-items: center; padding-bottom: 4px; font-size: .9rem; font-weight: 700; border-bottom: 1px solid var(--gold); }
.text-link .arrow-icon { color: var(--gold); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 900; height: var(--header-h); color: var(--choco); background: rgba(235,233,219,.8); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); transition: height .25s ease, box-shadow .25s ease, background .25s ease; }
.site-header.is-scrolled { height: 88px; background: rgba(235,233,219,.95); border-color: var(--border); box-shadow: 0 8px 30px rgba(55,86,76,.08); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { flex: 0 0 185px; display: block; }
.brand img { width: 185px; }
.desktop-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 38px); }
.desktop-nav a { position: relative; padding: 10px 0; color: var(--choco-2); font-size: .84rem; white-space: nowrap; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; transform: scaleX(0); background: var(--chilli); transition: transform .2s ease; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--chilli); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.select-pill { position: relative; display: block; }
.select-pill::after { content: "⌄"; position: absolute; right: 16px; top: 50%; transform: translateY(-56%); pointer-events: none; font-size: .8rem; }
.select-pill select { width: 175px; min-height: 42px; padding: 0 39px 0 17px; border: 1px solid var(--border); appearance: none; border-radius: 999px; outline: 0; color: var(--choco-2); background: rgba(255,253,249,.82); font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.select-country select { width: 128px; }
.header-cta { min-height: 42px; padding: 10px 18px; white-space: nowrap; }
.menu-toggle { display: none; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: .78rem; font-weight: 700; }
.menu-icon, .menu-icon::before, .menu-icon::after { width: 18px; height: 1px; display: block; background: currentColor; transition: transform .2s ease; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -5px; }.menu-icon::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.mobile-menu { position: fixed; top: var(--header-h); left: 20px; right: 20px; max-height: calc(100svh - var(--header-h) - 20px); padding: 22px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow); }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { padding: 13px 4px; border-bottom: 1px solid var(--border); font-family: var(--serif); font-size: 1.35rem; }
.mobile-context { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 18px 0; }
.mobile-context a { padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; text-align: center; }

/* Hero and shared section heads */
.hero-home { min-height: max(720px, 92svh); padding: calc(var(--header-h) + 92px) 0 104px; display: flex; align-items: center; }
.hero-glow { position: absolute; top: 17%; right: 7%; width: 440px; height: 440px; border-radius: 50%; filter: blur(60px); background: rgba(212,172,103,.08); }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(44px, 6vw, 96px); }
.hero-copy { max-width: 750px; }
.hero-copy h1 { margin-bottom: 26px; font-size: clamp(4rem, 6.2vw, 6.8rem); }
.hero-copy h1 em { display: inline-block; }
.hero-home .hero-copy h1 { color: var(--cream); }
.hero-home .hero-copy h1 .hero-title-accent { color: var(--gold); }
.hero-copy > p { max-width: 630px; margin-bottom: 34px; color: rgba(235,233,219,.76); font-size: 1.05rem; }
.hero-product { position: relative; min-height: 620px; display: grid; place-items: center; }
.product-arch { position: relative; z-index: 1; width: min(100%, 540px); aspect-ratio: .82; display: grid; align-items: center; overflow: hidden; border-radius: 48% 48% 8% 8% / 25% 25% 6% 6%; background: linear-gradient(145deg, #fff 0 43%, #ddd7d2 100%); box-shadow: 0 35px 80px rgba(0,0,0,.28); }
.product-arch img { width: 115%; max-width: none; margin-left: -5%; object-fit: contain; filter: drop-shadow(0 24px 18px rgba(39,21,16,.26)); }
.origin-badge { position: absolute; z-index: 4; bottom: 34px; left: -20px; min-width: 190px; padding: 15px 22px; border: 1px solid rgba(212,172,103,.45); border-radius: 16px; background: rgba(43,68,59,.82); box-shadow: 0 18px 40px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.origin-badge span { display: block; color: var(--gold); font-family: var(--mono); font-size: .61rem; letter-spacing: .24em; text-transform: uppercase; }
.origin-badge strong { font-family: var(--serif); font-size: 1rem; font-weight: 600; }
.steam { position: absolute; top: 18%; left: 25%; z-index: 3; width: 130px; height: 190px; pointer-events: none; mix-blend-mode: screen; }
.steam-two { top: 25%; left: 39%; width: 112px; height: 175px; }
.steam > span { --wisp-x: 0px; --wisp-width: 24px; --wisp-height: 135px; --wisp-delay: 0s; position: absolute; bottom: 0; left: calc(50% + var(--wisp-x)); width: var(--wisp-width); height: var(--wisp-height); opacity: 0; border-radius: 48% 52% 42% 58%; background: linear-gradient(90deg, transparent 0%, rgba(235,233,219,.08) 16%, rgba(255,255,255,.48) 43%, rgba(235,233,219,.32) 64%, rgba(255,255,255,.1) 82%, transparent 100%); filter: blur(8px); transform: translate3d(0,0,0) rotate(-5deg) scaleX(.72); transform-origin: 50% 100%; animation: heroSteamRise 5.6s ease-out var(--wisp-delay) infinite; }
.steam > span::before { content: ""; position: absolute; inset: 3% 18% 8%; border-radius: inherit; background: linear-gradient(100deg, transparent 8%, rgba(255,255,255,.38) 45%, rgba(255,255,255,.09) 74%, transparent); filter: blur(5px); }
.steam > span:nth-child(1) { --wisp-x: -30px; --wisp-width: 32px; --wisp-height: 142px; --wisp-delay: .2s; }
.steam > span:nth-child(2) { --wisp-x: -9px; --wisp-width: 25px; --wisp-height: 175px; --wisp-delay: 1.6s; }
.steam > span:nth-child(3) { --wisp-x: 13px; --wisp-width: 36px; --wisp-height: 150px; --wisp-delay: 2.8s; }
.steam > span:nth-child(4) { --wisp-x: 34px; --wisp-width: 23px; --wisp-height: 125px; --wisp-delay: 4s; }
.steam-two > span { filter: blur(10px); animation-duration: 6.4s; }
.steam-two > span:nth-child(1) { --wisp-x: -25px; --wisp-width: 22px; --wisp-height: 128px; --wisp-delay: 1.1s; }
.steam-two > span:nth-child(2) { --wisp-x: -6px; --wisp-width: 29px; --wisp-height: 160px; --wisp-delay: 2.5s; }
.steam-two > span:nth-child(3) { --wisp-x: 16px; --wisp-width: 18px; --wisp-height: 140px; --wisp-delay: 3.7s; }
.steam-two > span:nth-child(4) { --wisp-x: 32px; --wisp-width: 24px; --wisp-height: 118px; --wisp-delay: 4.9s; }
@keyframes heroSteamRise { 0% { opacity: 0; transform: translate3d(0,12px,0) rotate(-8deg) scaleX(.58) scaleY(.72); } 16% { opacity: .72; } 54% { opacity: .4; transform: translate3d(10px,-66px,0) rotate(8deg) scaleX(1.1) scaleY(1.08); } 100% { opacity: 0; transform: translate3d(-12px,-175px,0) rotate(-12deg) scaleX(1.7) scaleY(1.22); } }
.page-hero { padding: calc(var(--header-h) + 100px) 0 75px; border-bottom: 1px solid var(--border); }
.page-hero h1 { margin: 0 0 18px; font-size: clamp(4rem, 8vw, 7.5rem); }
.page-hero p { max-width: 630px; color: var(--muted); font-size: 1.12rem; }
.section-head { margin-bottom: 52px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.section-head h2 { margin-bottom: 15px; }
.section-head p { max-width: 600px; margin-bottom: 0; color: var(--muted); }

/* Marquee and brand transition */
.marquee { height: 58px; overflow: hidden; color: var(--gold); background: #2b443b; border-block: 1px solid rgba(212,172,103,.27); }
.marquee-track { width: max-content; height: 100%; display: flex; align-items: center; gap: 46px; animation: marquee 30s linear infinite; }
.marquee span { font-family: var(--mono); font-size: .71rem; letter-spacing: .34em; text-transform: uppercase; }
.marquee i { opacity: .65; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-transition { padding: 130px 0 145px; overflow: hidden; }
.brand-transition h2 { margin-bottom: 24px; }
.brand-transition .prose-centered > p { max-width: 780px; }
.transition-mark { max-width: 820px; min-height: 180px; margin: 50px auto 36px; display: flex; align-items: center; justify-content: center; }
.transition-logo-stage { position: relative; width: min(100%, 520px); height: 220px; isolation: isolate; }
.transition-logo { position: absolute; top: 50%; left: 50%; display: block; margin: 0; opacity: 0; visibility:hidden; transform: translate(-50%, -50%) scale(.94); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), filter .8s ease, visibility 0s linear .65s; will-change: opacity, transform, filter; }
.transition-logo.is-active { opacity: 1; visibility:visible; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
.transition-logo.is-leaving { opacity: 0; visibility: visible; filter: blur(18px); transform: translate(-50%, -50%) scale(1.08); transition: opacity .8s ease-in, transform 1.1s ease-out, filter .8s ease-in, visibility 0s; }
.transition-logo-old { z-index: 1; width: min(82%, 390px); height: min(90%, 190px); filter: drop-shadow(0 12px 24px rgba(16,36,30,.16)); }
.transition-logo-new { z-index: 3; }
.transition-logo-new,
.transition-logo-old { width: min(82%, 390px); height: min(90%, 190px); }
.transition-logo-art { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(var(--logo-art-scale, 1)); transform-origin: center; }
.transition-steam-cloud { position: absolute; inset: -12% -10% -18%; z-index: 4; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(18px) scale(.9); transform-origin: 50% 65%; transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 2s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.transition-steam-cloud.is-active { opacity: .66; transform: translateY(0) scale(1); }
.transition-steam-cloud::before { content: ""; position: absolute; inset: 5% 0 -5%; opacity: 0; background: url("../brand/vapor-fog.png") center / cover no-repeat; filter: blur(6px) saturate(.25) brightness(1.6); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 56%, #000 12%, transparent 78%); mask-image: radial-gradient(ellipse 58% 52% at 50% 56%, #000 12%, transparent 78%); }
.transition-steam-cloud.is-transitioning::before { opacity: .9; animation: transitionSteamFog 2.8s ease-in-out both; }
.transition-steam-cloud.is-transitioning .transition-steam-wisp { animation: transitionSteamWisp 2.8s ease-in-out both; }
.transition-steam-cloud.is-transitioning .wisp-two { animation-delay: .12s; }
.transition-steam-cloud.is-transitioning .wisp-three { animation-delay: .24s; }
@keyframes transitionSteamFog { 0%, 20%, 76%, 100% { opacity: 0; transform: translateY(12px) scale(.88); } 42% { opacity: .9; transform: translateY(-2px) scale(1.06); } 62% { opacity: .18; transform: translateY(-22px) scale(1.18); } }
@keyframes transitionSteamWisp {
  0%, 20%, 76%, 100% { opacity: 0; transform: translate3d(0, 28px, 0) scaleX(.76); }
  40% { opacity: .76; transform: translate3d(calc(var(--steam-drift) * .35), -4px, 0) scaleX(1.08); }
  62% { opacity: .12; transform: translate3d(var(--steam-drift), -64px, 0) scaleX(1.2); }
}
.transition-steam-wisp { --steam-drift: 0px; position: absolute; bottom: 22%; width: 66px; height: 190px; opacity: 0; border-radius: 50%; background: linear-gradient(90deg, transparent 3%, rgba(235,233,219,.12) 22%, rgba(255,255,255,.75) 52%, rgba(235,233,219,.14) 78%, transparent 97%); filter: blur(13px); transform: translate3d(0, 28px, 0) scaleX(.76); will-change: opacity, transform; }
.transition-steam-wisp.wisp-one { --steam-drift: -30px; left: 28%; }
.transition-steam-wisp.wisp-two { --steam-drift: 12px; left: calc(50% - 33px); height: 220px; }
.transition-steam-wisp.wisp-three { --steam-drift: 34px; right: 28%; }
.phase-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.phase-pills span { padding: 12px; border: 1px solid rgba(235,233,219,.48); border-radius: 999px; color: rgba(235,233,219,.98); background: rgba(235,233,219,.06); font-family: var(--mono); font-size: .72rem; line-height: 1.2; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(15,38,30,.55); }
.phase-pills .active { color: var(--gold); border-color: var(--gold); background: rgba(219,169,80,.16); box-shadow: inset 0 0 0 1px rgba(219,169,80,.12); }

/* Story teaser and editorial */
.story-teaser { padding: 145px 0; }
.story-collage { position: relative; min-height: 610px; }
.collage-card { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; overflow: hidden; color: var(--cream); border-radius: 38px; box-shadow: var(--shadow); background: linear-gradient(145deg, #a16b4b, #4a2f25); }
.collage-main { inset: 0 16% 8% 0; transform: rotate(-2.5deg); }
.collage-small { right: 0; bottom: 0; width: 48%; height: 53%; transform: rotate(3deg); background: linear-gradient(145deg, #426b52, #223b2d); }
.collage-card::before { content: ""; position: absolute; inset: 0; opacity: .36; background: radial-gradient(circle at 30% 30%, #f5d19a, transparent 30%), repeating-linear-gradient(115deg, transparent 0 27px, rgba(255,255,255,.06) 28px 29px); }
.collage-illustration { position: relative; z-index: 1; margin: auto; font-family: var(--serif); font-size: 5rem; letter-spacing: .08em; }
.collage-card small { position: relative; z-index: 1; font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.editorial-copy h2 { margin-bottom: 25px; }
.editorial-copy p { margin-bottom: 32px; color: var(--muted); font-size: 1.06rem; }

/* Product cards and catalog */
.products-feature, .catalog, .related, .malaysia-products { padding: 130px 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 30px; }
.featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { min-width: 0; }
.product-card-image { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(55,86,76,.08); border-radius: 32px; background: var(--card); box-shadow: 0 12px 40px rgba(59,38,28,.05); }
.product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-card-image { box-shadow: var(--shadow); transform: translateY(-6px); }
.product-card:hover .product-card-image img { transform: translate(var(--media-shift-x, 0), var(--media-shift-y, 0)) scale(calc(var(--media-scale, 1) * 1.06)); }
.product-meta-row { min-height: 24px; margin: 20px 1px 8px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }
.product-meta-row span:last-child { color: var(--pandan); }
.product-card h3 { margin-bottom: 14px; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.softness { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: .57rem; letter-spacing: .16em; text-transform: uppercase; }
.softness-dots, .taste-row div { display: flex; gap: 5px; }
.softness-dots i, .taste-row i { width: 20px; height: 4px; display: block; border-radius: 99px; background: #d8cfc3; }
.softness-dots i.on, .taste-row i.on { background: var(--gold); }
.catalog-controls { margin-bottom: 52px; padding: 18px; display: flex; justify-content: space-between; gap: 22px; border: 1px solid var(--border); border-radius: 28px; background: rgba(255,253,249,.75); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pills button { padding: 10px 17px; border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: .76rem; font-weight: 700; }
.filter-pills button:hover, .filter-pills button.active { color: var(--cream); border-color: var(--choco); background: var(--choco); }
.filter-fields { display: flex; gap: 10px; }
.search-field, .select-field { min-width: 180px; height: 46px; position: relative; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.search-field input, .select-field select { width: 100%; height: 100%; padding: 0 42px 0 17px; border: 0; outline: 0; appearance: none; background: transparent; font-size: .78rem; }
.search-field > span, .select-field::after { position: absolute; right: 16px; pointer-events: none; }
.select-field::after { content: "⌄"; }
.product-card[hidden], .store-card[hidden] { display: none !important; }
.empty-state { padding: 70px 20px; text-align: center; }
.empty-state h2 { font-size: 2.2rem; }

/* Moments */
.moments { padding: 140px 0; }
.moment-grid { min-height: 920px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 1fr; gap: 22px; }
.moment-card { min-height: 360px; position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 34px; color: #fff; background: linear-gradient(145deg, #8f6249, #42291e); }
.moment-card::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .26; background: repeating-radial-gradient(circle at 28% 35%, rgba(255,255,255,.7) 0 2px, transparent 3px 38px); }
.moment-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--moment-image); background-position: var(--media-position, 50% 50%); background-size: cover; transform: translate(var(--media-shift-x, 0), var(--media-shift-y, 0)) scale(var(--media-scale, 1)); }
.moment-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(32,17,13,.91), rgba(32,17,13,.05) 70%); }
.moment-copy { position: relative; z-index: 2; padding: 30px; }
.moment-copy > span { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: #f1c57a; }
.moment-copy h3 { margin: 8px 0 7px; font-size: 2rem; }
.moment-copy p { max-width: 520px; margin: 0; opacity: .8; font-size: .88rem; }
.moment-1 { grid-column: span 7; }.moment-2 { grid-column: span 5; background-color: #465f4d; }.moment-3 { grid-column: span 4; background-color: #a6744f; }.moment-4 { grid-column: span 4; background-color: #614034; }.moment-5 { grid-column: span 4; background-color: #50685b; }

/* Journey and news */
.journey { padding: 140px 0; }
.journey-route { max-width: 800px; margin: 70px auto 42px; }
.route-line { display: flex; align-items: center; }
.route-line i { flex: 1; border-top: 2px dotted rgba(212,172,103,.58); }
.route-dot { width: 22px; height: 22px; border: 5px solid var(--choco); outline: 2px solid var(--gold); border-radius: 50%; background: var(--gold); }
.route-plane { margin: 0 18px; color: var(--gold); font-size: 1.7rem; transform: rotate(6deg); }
.route-labels { display: flex; justify-content: space-between; margin-top: 15px; color: var(--gold-light); font-family: var(--mono); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; }
.country-cards { max-width: 760px; margin: 0 auto 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.country-cards a { padding: 22px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(235,233,219,.15); border-radius: 24px; background: rgba(255,255,255,.03); }
.country-cards a > span { font-size: 2.2rem; }.country-cards h3 { margin: 0; }.country-cards small { color: var(--gold); font-family: var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.stats-row { margin-bottom: 50px; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(235,233,219,.13); }
.stats-row div { padding: 35px 20px; display: grid; text-align: center; border-right: 1px solid rgba(235,233,219,.13); }
.stats-row div:last-child { border: 0; }.stats-row strong { color: var(--gold); font-family: var(--serif); font-size: 3.5rem; font-weight: 500; }.stats-row span { opacity: .65; font-size: .78rem; }
.news-teaser, .articles { padding: 135px 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.news-card { padding: 34px 32px 12px 0; border-right: 1px solid var(--border); }
.news-card + .news-card { padding-left: 32px; }.news-card:last-child { border-right: 0; }
.news-card time, .article-panel time { color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .15em; }
.news-card h3 { margin: 18px 0 12px; font-size: 1.85rem; }.news-card p { color: var(--muted); font-size: .9rem; }

/* Detail */
.product-detail { padding: calc(var(--header-h) + 46px) 0 112px; }
.back-link { margin-bottom: 36px; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .83rem; font-weight: 600; transition: color .2s ease, transform .2s ease; }
.back-link span { font-size: 1.05rem; line-height: 1; }
.back-link:hover { color: var(--pandan); transform: translateX(-3px); }
.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(46px, 5vw, 72px); align-items: start; }
.detail-image { position: sticky; top: calc(var(--header-h) + 30px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 40px; background: radial-gradient(circle at 50% 44%, #fff 0, #fff 56%, #f7f4eb 100%); }
.detail-image img { width: 94%; height: 94%; object-fit: contain; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.detail-image > .product-country-badge { top: 3%; right: 3%; }
.detail-image:hover img { transform: translate(var(--media-shift-x, 0), var(--media-shift-y, 0)) scale(calc(var(--media-scale, 1) * 1.025)); }
.detail-copy { padding-top: 3px; }
.detail-copy > .eyebrow { margin-bottom: 13px; color: var(--chilli); }
.detail-copy h1 { max-width: 570px; margin-bottom: 18px; color: var(--choco); font-size: clamp(1.85rem, 2.35vw, 2.35rem); line-height: 1.16; letter-spacing: -.02em; }
.detail-copy .lead { max-width: 620px; margin: 0; color: var(--choco-2); font-family: var(--sans); font-size: 1.02rem; line-height: 1.62; }
.product-story { margin: 16px 0 0; padding: 1px 0 1px 17px; color: var(--muted); border-left: 2px solid var(--gold); font-family: var(--serif); font-size: .96rem; font-style: italic; line-height: 1.55; }
.taste-panel { margin: 29px 0 28px; }
.taste-panel > .eyebrow, .availability > .eyebrow { margin-bottom: 15px; color: var(--muted); }
.taste-row { margin-top: 13px; display: grid; gap: 6px; color: var(--choco-2); font-size: .72rem; font-weight: 600; }
.taste-row div { width: 100%; gap: 5px; }
.taste-row i { height: 7px; flex: 1 1 0; border-radius: 999px; background: rgba(55,86,76,.12); }
.taste-row i.on { background: var(--gold); }
.availability { margin-bottom: 32px; }
.availability > div { display: flex; flex-wrap: wrap; gap: 9px; }
.availability > div span { padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--pandan); border: 1px solid rgba(55,86,76,.3); border-radius: 999px; background: var(--pandan-light); font-size: .72rem; }
.availability > div span b { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--pandan); }
.buy-panel { padding: 29px 30px 30px; color: var(--cream); border: 1px solid rgba(235,233,219,.08); border-radius: 25px; background: var(--choco-2); box-shadow: 0 18px 42px rgba(47,73,63,.12); }
.buy-panel h2 { margin-bottom: 8px; color: var(--cream); font-size: 1.82rem; }
.buy-panel p { margin: 0; color: rgba(235,233,219,.7); font-size: .77rem; }
.buy-panel .button-row { margin-top: 20px; gap: 10px; }
.buy-panel .button { min-height: 46px; padding: 12px 20px; gap: 8px; font-size: .72rem; }
.buy-panel .button-outline-light { border-color: rgba(235,233,219,.32); }
.app-store-badge-link { display: inline-flex; flex: 0 0 132px; width: 132px; height: 46px; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; overflow: hidden; color: var(--cream); border: 1px solid rgba(235,233,219,.3); border-radius: 999px; background: rgba(235,233,219,.045); transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.app-store-badge-link:hover { opacity: .88; transform: translateY(-2px); }
.app-store-badge-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.app-store-badge-icon { display: block; width: 20px; height: 23px; flex: 0 0 20px; object-fit: contain; }
.app-store-badge-copy { display: grid; min-width: 0; gap: 2px; line-height: 1; white-space: nowrap; }
.app-store-badge-copy small { color: rgba(235,233,219,.8); font-size: .45rem; font-weight: 500; }
.app-store-badge-copy strong { color: var(--cream); font-size: .69rem; font-weight: 700; letter-spacing: -.025em; }
.buy-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Story timeline */
.story-hero { min-height: 720px; padding: calc(var(--header-h) + 120px) 0 100px; display: grid; place-items: center; }
.story-hero .prose-centered { display: grid; justify-items: center; }.story-hero h1 { font-size: clamp(4.4rem, 8vw, 8rem); }.story-hero p { font-size: 1.05rem; }.scroll-cue { width: 44px; height: 44px; margin-top: 35px; display: grid; place-items: center; border: 1px solid rgba(235,233,219,.25); border-radius: 50%; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }
.timeline-section { padding: 140px 0; }
.timeline { position: relative; }.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(var(--gold), rgba(212,172,103,.18), var(--gold)); }
.timeline-item { width: 50%; position: relative; padding: 0 70px 100px 0; }.timeline-item.right { margin-left: 50%; padding: 0 0 100px 70px; }
.timeline-dot { position: absolute; top: 12px; right: -9px; width: 18px; height: 18px; border: 4px solid var(--cream); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }.timeline-item.right .timeline-dot { right: auto; left: -9px; }
.timeline-card { padding: 32px; border: 1px solid var(--border); border-radius: 30px; background: var(--card); box-shadow: 0 18px 50px rgba(55,86,76,.06); }.timeline-year { color: var(--gold); font-family: var(--serif); font-size: 3.2rem; }.timeline-card small { display: block; margin: 3px 0 17px; color: var(--muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; }.timeline-card h2 { font-size: 2.1rem; }.timeline-card p { color: var(--muted); margin: 0; }
.story-quote { padding: 120px 0; }.story-quote blockquote { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(3rem, 6vw, 6rem); line-height: 1.1; letter-spacing: -.04em; }.story-quote .button { margin-top: 28px; }

/* Store locator */
.store-locator { padding: 90px 0 130px; }.store-filters { margin-bottom: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 12px; }.map-shell { margin-bottom: 45px; overflow: hidden; border: 1px solid var(--border); border-radius: 38px; box-shadow: var(--shadow); }.store-map { height: 540px; position: relative; z-index: 1; background: #eadec9; }.map-fallback { height: 100%; position: relative; display: grid; place-content: center; justify-items: center; overflow: hidden; text-align: center; }.map-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }.map-fallback strong, .map-fallback span, .map-fallback small { position: relative; z-index: 1; }.map-fallback strong { padding: 10px 18px; color: var(--cream); border-radius: 999px; background: var(--choco); font-family: var(--mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; }.map-fallback span { margin-top: 12px; font-family: var(--serif); font-size: 2rem; }.map-fallback small { color: var(--muted); }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.store-card { padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 28px; background: var(--card); transition: transform .25s ease, box-shadow .25s ease; }.store-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.store-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.store-city { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }.status-badge { padding: 6px 9px; color: #8a5421; border-radius: 999px; background: var(--gold-light); font-family: var(--mono); font-size: .52rem; text-transform: uppercase; }.status-badge.live { color: var(--pandan); background: var(--pandan-light); }.store-card h3 { margin: 17px 0 10px; }.store-card p { flex: 1; color: var(--muted); font-size: .82rem; }.store-hours { padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: .72rem; }.store-actions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 13px; }.store-actions a { color: var(--chilli); font-size: .7rem; font-weight: 700; }
.store-map-focus { padding: 0; border: 0; color: var(--pandan); background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.store-map-focus:hover,
.store-actions a:hover { color: var(--gold); }
.amanda-map-pin-wrap { background: transparent; border: 0; }
.amanda-map-pin { width: 38px; height: 46px; display: grid; place-items: center; color: var(--cream); filter: drop-shadow(0 8px 10px rgba(32,58,49,.28)); transform-origin: 50% 100%; transition: transform .2s ease; }
.amanda-map-pin:hover { transform: translateY(-3px) scale(1.06); }
.amanda-map-pin svg { width: 38px; height: 46px; fill: var(--pandan); stroke: var(--cream); stroke-width: 1.35; }
.amanda-map-pin.is-coming svg { fill: var(--gold); }
.amanda-map-pin circle { fill: var(--cream); stroke: none; }
.leaflet-popup-content-wrapper { overflow: hidden; border: 1px solid rgba(55,86,76,.16); border-radius: 20px; box-shadow: 0 18px 45px rgba(38,62,54,.18); }
.leaflet-popup-content { margin: 0; }
.map-popup { min-width: 230px; padding: 20px; font-family: var(--sans); }
.map-popup > span { display: block; margin-bottom: 8px; color: var(--gold); font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; }
.map-popup strong { display: block; color: var(--choco); font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.map-popup p { margin: 9px 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.map-popup small { display: block; color: var(--pandan); font-size: .68rem; }
.map-popup a { margin-top: 14px; display: inline-flex; color: var(--chilli); font-size: .72rem; font-weight: 700; }
.leaflet-control-attribution { display: none !important; }
.map-credit { display: inline-flex; align-items: center; min-height: 27px; padding: 5px 10px; color: var(--choco-2) !important; border: 1px solid rgba(55,86,76,.16); border-radius: 999px; background: rgba(247,244,231,.9); box-shadow: 0 5px 16px rgba(31,61,51,.12); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-decoration: none !important; backdrop-filter: blur(8px); }
.map-summary-control { width: 240px; margin-top: 10px; padding: 18px 19px; color: var(--choco-2); border: 1px solid rgba(55,86,76,.14); border-radius: 22px; background: rgba(247,244,231,.94); box-shadow: 0 14px 38px rgba(31,61,51,.18); transform-origin: top right; transition: opacity .22s ease, visibility .22s ease, transform .22s ease; backdrop-filter: blur(12px); }
.store-map.has-open-popup .map-summary-control { opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); pointer-events: none; }
.map-summary-title { display: block; margin-bottom: 8px; color: var(--chilli); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.map-summary-value { display: block; color: var(--choco); font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; white-space: pre-line; }
.map-summary-instruction { margin-top: 6px; display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.page-stores .leaflet-control-zoom { overflow: hidden; border: 1px solid rgba(55,86,76,.16) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(31,61,51,.18) !important; }
.page-stores .leaflet-control-zoom a { width: 38px; height: 38px; color: var(--choco-2); border: 0 !important; background: rgba(247,244,231,.94); font-size: 20px; line-height: 38px; }
.page-stores .leaflet-control-zoom a + a { border-top: 1px solid rgba(55,86,76,.12) !important; }
.page-stores .leaflet-control-zoom a:hover { color: var(--cream); background: var(--choco-2); }
.page-stores .map-shell { margin-bottom: 24px; border-radius: 30px; }
.store-feature { margin-bottom: 40px; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--cream); border: 1px solid rgba(212,172,103,.22); border-radius: 30px; background: var(--choco-2); box-shadow: 0 20px 44px rgba(43,73,63,.18); }
.store-feature[hidden] { display: none !important; }
.store-feature-copy { min-width: 0; flex: 1 1 auto; }
.store-feature-location { margin-top: 12px; color: var(--gold); font-family: var(--mono); font-size: .64rem; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
.store-feature h2 { margin: 0 0 8px; color: var(--cream); font-size: 2rem; }
.store-feature p { max-width: 720px; margin: 0; color: rgba(235,233,219,.72); }
.store-feature-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.store-feature .button { min-height: 44px; padding: 11px 18px; white-space: nowrap; font-size: .72rem; }
.store-feature .button[hidden] { display: none; }
.store-feature .button-dark { background: #467362; }
.store-feature .button-gold { color: var(--choco); background: var(--gold); }
.store-feature .button-reset-map { color: var(--cream); border: 1px solid rgba(235,233,219,.3); background: transparent; }
.store-feature .button-reset-map svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-feature .button-reset-map:hover { color: var(--choco); border-color: var(--gold); background: var(--gold); }
.page-stores .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page-stores .store-card { min-height: 168px; padding: 21px; border-radius: 22px; cursor: pointer; }
.page-stores .store-card:hover,
.page-stores .store-card:focus-visible { transform: translateY(-3px); border-color: rgba(212,172,103,.62); outline: 0; box-shadow: 0 15px 34px rgba(55,86,76,.1); }
.page-stores .store-card.is-active { color: var(--cream); border-color: rgba(212,172,103,.3); background: var(--choco-2); }
.page-stores .store-card h3 { margin: 0 0 9px; color: var(--choco); font-size: 1.08rem; line-height: 1.2; }
.page-stores .store-card.is-active h3 { color: var(--cream); }
.page-stores .store-card p { margin: 0 0 18px; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.page-stores .store-card.is-active p { color: rgba(235,233,219,.7); }
.store-card-meta { margin-top: auto; display: grid; gap: 0; color: var(--gold); }
.page-stores .store-card .store-city { display: block; }
.store-card-status-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.store-card-status-row .store-card-time { min-width: 0; }
.store-card-status-row .store-hours { min-width: 0; }
.page-stores .store-card .store-hours { padding: 0; border: 0; color: inherit; font-size: .64rem; }
.page-stores .store-card-status-row .status-badge { margin-left: auto; }
.page-stores .store-card.is-active .status-badge.live { color: var(--cream); background: rgba(235,233,219,.12); }

/* Live store status and richer map details */
.status-badge.is-open { color: var(--pandan); background: var(--pandan-light); }
.status-badge.is-closed { color: #9a3d2e; background: rgba(191,73,52,.12); }
.status-badge.is-unavailable { color: var(--muted); background: rgba(122,113,103,.12); }
.store-card-time { display: inline-flex; align-items: center; gap: 5px; }
.store-clock-icon,
.store-card-time svg,
.store-feature-hours svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.leaflet-popup-content-wrapper { border-radius: 18px; background: rgba(255,253,246,.97); box-shadow: 0 16px 38px rgba(38,62,54,.2); backdrop-filter: blur(12px); }
.leaflet-popup-tip { background: rgba(255,253,246,.97); }
.leaflet-popup-close-button { top: 6px !important; right: 6px !important; width: 24px !important; height: 24px !important; display: grid !important; place-items: center; color: var(--choco-2) !important; border-radius: 50%; background: rgba(55,86,76,.07) !important; font-size: 15px !important; }
.map-popup { width: 250px; max-width: calc(100vw - 74px); min-width: 0; padding: 14px 16px 12px; position: relative; overflow: hidden; }
.map-popup::before { content: ""; width: 92px; height: 92px; position: absolute; top: -58px; right: -38px; border-radius: 50%; background: radial-gradient(circle, rgba(212,172,103,.24), rgba(212,172,103,0) 68%); pointer-events: none; }
.map-popup > span { margin-bottom: 4px; font-size: .5rem; letter-spacing: .14em; }
.map-popup strong { max-width: 205px; font-size: 1rem; line-height: 1.2; }
.map-popup p { margin: 6px 0 0; font-size: .72rem; line-height: 1.45; }
.map-popup-hours { margin-top: 9px; padding-top: 7px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-top: 1px solid rgba(55,86,76,.11); }
.map-popup-hours small { color: var(--pandan); font-size: .62rem; line-height: 1.35; }
.map-popup-hours .status-badge { justify-self: end; }
.map-popup .status-badge { padding: 5px 8px; font-size: .48rem; letter-spacing: .05em; white-space: nowrap; }
.map-popup .store-clock-icon { width: 13px; height: 13px; flex-basis: 13px; }
.map-popup a { width: 100%; margin-top: 8px; padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--choco); border-radius: 999px; background: var(--gold); font-size: .66rem; }

.store-feature { overflow: hidden; position: relative; border-color: rgba(212,172,103,.26); background: radial-gradient(circle at 82% 0%, rgba(212,172,103,.16), transparent 30%), linear-gradient(135deg, #294a3f, var(--choco-2)); }
.store-feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.store-feature::after { content: ""; width: 220px; height: 220px; position: absolute; right: -110px; bottom: -150px; border: 1px solid rgba(235,233,219,.09); border-radius: 50%; pointer-events: none; }
.store-feature > * { position: relative; z-index: 1; }
.store-feature-copy { grid-column: 1; grid-row: 1; }
.store-feature-actions { grid-column: 2; grid-row: 1; }
.store-feature-hours { width: 100%; margin-top: 18px; display: grid; grid-column: 1 / -1; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: start; gap: 8px; color: var(--gold); font-size: .72rem; }
.store-feature-hours > span:not(.status-badge) { min-width: 0; line-height: 1.4; }
.store-feature-hours .status-badge { align-self: start; justify-self: end; white-space: nowrap; }
.store-feature .status-badge.is-open { color: var(--cream); background: rgba(112,161,112,.26); }
.store-feature .status-badge.is-closed { color: #ffd4c9; background: rgba(191,73,52,.3); }

.page-stores .store-card { background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(247,244,231,.92)); box-shadow: 0 9px 25px rgba(55,86,76,.045); }
.page-stores .store-card.is-active { background: radial-gradient(circle at 100% 0%, rgba(212,172,103,.14), transparent 36%), var(--choco-2); }
.page-stores .store-card.is-active .status-badge.is-open { color: var(--cream); background: rgba(112,161,112,.26); }
.page-stores .store-card.is-active .status-badge.is-closed { color: #ffd4c9; background: rgba(191,73,52,.3); }

@media (max-width: 900px) {
  .store-feature { grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
  .store-feature-copy,
  .store-feature-hours,
  .store-feature-actions { grid-column: 1; grid-row: auto; }
  .store-feature-hours { margin-top: 0; }
  .store-feature-actions { justify-content: flex-start; }
  .page-stores .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .page-stores .map-shell { border-radius: 22px; }
  .page-stores .store-map { height: 430px; }
  .store-feature { gap: 18px; padding: 22px; border-radius: 24px; }
  .store-feature-location { margin-top: 10px; font-size: .58rem; letter-spacing: .14em; }
  .store-feature h2 { margin-bottom: 7px; font-size: 1.5rem; line-height: 1.15; }
  .store-feature p { font-size: .88rem; line-height: 1.5; }
  .store-feature-hours { margin-top: 0; grid-template-columns: 15px minmax(0, 1fr) auto; gap: 7px; font-size: .68rem; }
  .store-feature .status-badge { padding: 5px 8px; font-size: .48rem; }
  .store-feature-actions { width: 100%; justify-content: flex-start; gap: 8px; }
  .store-feature .button { min-height: 40px; padding: 9px 13px; flex: 0 1 auto; }
  .page-stores .store-grid { grid-template-columns: 1fr; }
  .map-summary-control { width: 190px; padding: 14px 15px; border-radius: 18px; }
  .map-summary-value { font-size: .96rem; }
  .map-summary-instruction { font-size: 10px; }
}

/* Malaysia */
.malaysia-hero { min-height: 760px; padding: calc(var(--header-h) + 105px) 0 100px; }.malaysia-hero h1 { font-size: clamp(4rem, 7vw, 7.5rem); }.malaysia-hero p { max-width: 650px; margin-bottom: 32px; color: rgba(235,233,219,.72); }.malaysia-art { min-height: 430px; padding: 60px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(235,233,219,.15); border-radius: 48% 48% 12% 12%; background: radial-gradient(circle at 50% 20%, rgba(212,172,103,.18), transparent 55%), rgba(255,255,255,.035); }.flag-pair { font-size: 4.5rem; }.flag-pair i { color: var(--gold); font-size: 2rem; }.malaysia-art strong { margin-top: 28px; font-family: var(--serif); font-size: 2rem; }.language-banner { padding: 17px 24px; color: var(--choco); background: var(--gold); font-family: var(--mono); font-size: .66rem; letter-spacing: .17em; text-align: center; text-transform: uppercase; }.malaysia-stores, .promotion-section, .malaysia-contact { padding: 130px 0; }.malaysia-store-grid { grid-template-columns: repeat(3, 1fr); }.promotion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }.promotion-card { padding: 40px; border: 1px solid rgba(235,233,219,.16); border-radius: 32px; background: rgba(255,255,255,.035); }.promotion-card h3 { font-size: 2.5rem; }.promotion-card h1 { margin: 8px 0; font-size: clamp(2rem, 4vw, 2.5rem); }.promotion-card p { opacity: .7; }.promotion-card small { color: var(--gold); font-family: var(--mono); font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; }.malaysia-contact .button { margin-top: 25px; }
.page-home .promotion-section .section-head p { color: rgba(235,233,219,.9); opacity: 1; }

/* News and contact */
.article-list { border-top: 1px solid var(--border); }.article-panel { padding: 58px 0; display: grid; grid-template-columns: 190px 1fr; gap: 55px; border-bottom: 1px solid var(--border); }.article-panel > div { max-width: 880px; }.article-panel h2 { margin-bottom: 20px; font-size: clamp(2.5rem, 4vw, 4.7rem); }.article-panel .lead { color: var(--choco-2); font-family: var(--serif); font-size: 1.3rem; }.article-panel p:last-child { color: var(--muted); }
.contact-section { padding: 80px 0 130px; }.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }.contact-cards { display: grid; gap: 16px; }.contact-card { padding: 27px; display: flex; gap: 20px; border: 1px solid var(--border); border-radius: 26px; background: var(--card); }.contact-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: var(--gold); border-radius: 50%; background: var(--choco); }.contact-card h2 { margin: 0 0 6px; font-size: 1.8rem; }.contact-card p { margin: 0; color: var(--muted); }.contact-card a { color: var(--chilli); font-size: .8rem; font-weight: 700; }.contact-form { padding: 38px; color: var(--cream); border-radius: 34px; background: var(--choco); box-shadow: var(--shadow); }.contact-form label { margin-top: 18px; display: grid; gap: 8px; color: rgba(235,233,219,.68); font-size: .72rem; font-weight: 700; }.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 13px 15px; border: 1px solid rgba(235,233,219,.19); border-radius: 13px; outline: 0; color: var(--cream); background: rgba(255,255,255,.06); }.contact-form textarea { resize: vertical; }.contact-form .button { margin-top: 25px; border: 0; }.not-found { min-height: 82svh; padding: calc(var(--header-h) + 130px) 0 100px; display: grid; place-items: center; }.not-found h1 { font-size: clamp(4rem, 8vw, 8rem); }

/* Footer */
.site-footer { padding: 85px 0 0; color: rgba(235,233,219,.7); background: #2b443b; }
.footer-grid { padding-bottom: 70px; display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 44px; }
.footer-brand img { width: 210px; margin-bottom: 20px; }.footer-brand p { max-width: 330px; color: rgba(235,233,219,.58); font-size: .84rem; }.social-row { display: flex; gap: 10px; }.social-row a { padding: 7px 10px; border: 1px solid rgba(235,233,219,.17); border-radius: 999px; font-family: var(--mono); font-size: .55rem; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; }.footer-grid h3 { margin: 8px 0 13px; color: var(--gold); font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; }.footer-grid a, .footer-grid span { font-size: .78rem; }.footer-grid a:hover { color: var(--gold); }
.footer-bottom { padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(235,233,219,.12); color: rgba(235,233,219,.42); font-family: var(--mono); font-size: .54rem; letter-spacing: .13em; text-transform: uppercase; }.footer-bottom > span:last-child { display: flex; gap: 20px; }

/* Motion */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }.reveal.is-visible { opacity: 1; transform: none; }.delay-1 { transition-delay: .08s; }.delay-2 { transition-delay: .16s; }

@media (max-width: 1180px) {
  :root { --header-h: 92px; }
  .desktop-nav { display: none; }.menu-toggle { display: flex; }.header-actions { margin-left: auto; }.header-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr 440px; }.hero-copy h1 { font-size: clamp(3.6rem, 6.5vw, 5.6rem); }.hero-product { min-height: 540px; }
  .product-grid { gap: 42px 22px; }.store-grid { grid-template-columns: repeat(2, 1fr); }.footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); }.footer-brand { grid-row: span 2; }
}

@media (max-width: 820px) {
  .container, .container-wide { width: min(100% - 34px, 1280px); }
  .select-language, .select-country { display: none; }
  .brand, .brand img { width: 158px; flex-basis: 158px; }
  .hero-home { min-height: auto; padding: calc(var(--header-h) + 72px) 0 85px; }.hero-grid, .split-grid, .product-detail-grid, .contact-grid { grid-template-columns: 1fr; }.hero-copy h1 { font-size: clamp(3.5rem, 13vw, 5.5rem); }.hero-product { min-height: 520px; margin-top: 25px; }.product-arch { max-width: 450px; }.origin-badge { left: calc(50% - 220px); }
  .story-teaser, .products-feature, .moments, .journey, .news-teaser, .catalog, .related, .articles, .malaysia-stores, .malaysia-products, .promotion-section, .malaysia-contact { padding: 95px 0; }
  .story-collage { min-height: 530px; }.section-head { align-items: flex-start; }.product-grid, .featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.featured-grid .product-card:last-child { display: none; }
  .moment-grid { min-height: 1260px; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3,1fr); }.moment-1,.moment-2,.moment-3,.moment-4 { grid-column: span 1; }.moment-5 { grid-column: span 2; }
  .news-grid { grid-template-columns: 1fr; }.news-card, .news-card + .news-card { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .detail-image { position: relative; max-width: 650px; }.product-detail-grid { gap: 48px; }.detail-copy { max-width: 650px; }.timeline::before { left: 13px; }.timeline-item, .timeline-item.right { width: 100%; margin: 0; padding: 0 0 60px 55px; }.timeline-dot, .timeline-item.right .timeline-dot { left: 5px; right: auto; }
  .store-filters { grid-template-columns: repeat(2, 1fr); }.store-map { height: 470px; }.malaysia-hero .split-grid { grid-template-columns: 1fr; }.malaysia-art { min-height: 350px; }.malaysia-store-grid { grid-template-columns: 1fr; }.promotion-grid { grid-template-columns: 1fr; }.article-panel { grid-template-columns: 125px 1fr; gap: 30px; }.footer-grid { grid-template-columns: repeat(2,1fr); }.footer-brand { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 560px) {
  :root { --header-h: 78px; }
  body { font-size: 15px; }.container, .container-wide { width: min(100% - 28px, 1280px); }
  .site-header.is-scrolled { height: 70px; }.brand, .brand img { width: 145px; flex-basis: 145px; }.header-inner { gap: 10px; }.menu-toggle { padding: 8px 11px; }.menu-toggle span:last-child { display: none; }.mobile-menu { top: 74px; }
  h1 { font-size: clamp(3.25rem, 16vw, 4.8rem); }.page-hero { padding: calc(var(--header-h) + 76px) 0 55px; }.page-hero h1 { font-size: 3.8rem; }.section-head { margin-bottom: 34px; display: block; }.section-head .text-link { margin-top: 16px; }
  .hero-home { padding-top: calc(var(--header-h) + 64px); }.hero-copy h1 { font-size: clamp(3.15rem, 15vw, 4.6rem); }.hero-copy > p { font-size: .93rem; }.button-row { align-items: stretch; }.hero-copy .button { width: 100%; }.hero-product { min-height: 420px; }.product-arch { width: min(100%, 340px); }.origin-badge { left: 8px; bottom: 5px; min-width: 165px; }.steam { left: 25%; }
  .marquee { height: 50px; }.brand-transition { padding: 90px 0; }.transition-mark { min-height: 260px; margin-block: 25px; }.transition-logo-stage { height: 240px; }.transition-logo-old { width: min(92%, 340px); }.phase-pills { grid-template-columns: 1fr 1fr; }
  .story-collage { min-height: 410px; }.collage-card { border-radius: 26px; padding: 18px; }.collage-illustration { font-size: 3.5rem; }.editorial-copy h2 { font-size: 3.2rem; }
  .product-grid, .featured-grid { grid-template-columns: 1fr; }.featured-grid .product-card:last-child { display: block; }.product-card-image { border-radius: 26px; }.catalog-controls { padding: 14px; display: grid; }.filter-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }.filter-pills button { white-space: nowrap; }.filter-fields { display: grid; }.search-field,.select-field { width: 100%; min-width: 0; }.catalog-grid { gap: 44px; }
  .moment-grid { min-height: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }.moment-card,.moment-1,.moment-2,.moment-3,.moment-4,.moment-5 { min-height: 400px; grid-column: auto; }.moment-copy { padding: 24px; }.moment-copy h3 { font-size: 1.8rem; }
  .country-cards, .stats-row { grid-template-columns: 1fr; }.stats-row div { border-right: 0; border-bottom: 1px solid rgba(235,233,219,.13); }.route-labels { font-size: .55rem; }.journey .button { width: 100%; }
  .product-detail { padding-top: calc(var(--header-h) + 35px); }.back-link { margin-bottom: 26px; }.product-detail-grid { gap: 38px; }.detail-image { border-radius: 30px; }.detail-copy h1 { font-size: clamp(1.55rem, 6.8vw, 1.95rem); line-height: 1.18; }.taste-row { grid-template-columns: 1fr; }.taste-row i { width: auto; }.buy-panel { padding: 25px 22px; }.buy-panel .button { width: 100%; }
  .story-hero { min-height: 650px; }.story-hero h1 { font-size: 4rem; }.timeline-section { padding: 90px 0; }.timeline-card { padding: 25px; }.story-quote { padding: 90px 0; }
  .store-filters { grid-template-columns: 1fr; }.store-map { height: 420px; }.store-grid { grid-template-columns: 1fr; }.store-card { padding: 24px; }.map-fallback span { font-size: 1.5rem; }
  .malaysia-hero { min-height: auto; padding-top: calc(var(--header-h) + 75px); }.malaysia-hero h1 { font-size: 3.8rem; }.malaysia-art { min-height: 300px; padding: 35px; }.flag-pair { font-size: 3rem; }.promotion-card { padding: 28px; }.promotion-card h3 { font-size: 2rem; }
  .article-panel { padding: 42px 0; grid-template-columns: 1fr; gap: 14px; }.article-panel h2 { font-size: 2.65rem; }.contact-form { padding: 27px; }.contact-card { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }.footer-brand { grid-column: 1/-1; }.footer-bottom { flex-direction: column; }.footer-bottom > span:last-child { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Reference theme alignment — geometry, type and responsive behaviour only. */
:root {
  --serif: "Libre Baskerville", "EB Garamond", Georgia, serif;
  --header-h: 73px;
}

body { line-height: 1.5; }
.container,
.container-wide { width: min(calc(100% - 64px), 1216px); }
.generic-section { padding: 128px 0; }
.eyebrow { margin-bottom: 24px; font-size: 12px; line-height: 16px; letter-spacing: .45em; }
h1, h2 { font-weight: 400; letter-spacing: -.025em; }
h1 { font-size: 72px; line-height: 1; }
h2 { font-size: 48px; line-height: 1; }
h3 { font-size: 20px; line-height: 1.38; letter-spacing: -.015em; }
.prose-centered { max-width: 960px; }
.prose-centered p { max-width: 672px; line-height: 24px; }
.split-grid { gap: 80px; }
.button-row { gap: 12px; }
.button { min-height: 48px; padding: 14px 28px; font-size: 14px; }
.text-link { gap: 10px; font-size: 14px; }

/* Header */
.site-header,
.site-header.is-scrolled { height: var(--header-h); padding: 12px 0; }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(55,86,76,.07); }
.header-inner { gap: 24px; }
.brand { flex: 0 0 112px; }
.brand img { width: 112px; height: 48px; object-fit: contain; }
.header-actions { flex: 0 0 auto; gap: 8px; }
.select-pill { height: 30px; display: inline-flex; align-items: center; }
.select-pill::after { display: none; }
.select-pill select { width: 150px; height: 30px; min-height: 30px; padding: 0 25px 0 11px; overflow: visible; border-color: rgba(55,86,76,.14); color: var(--choco-2); font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: .12em; text-overflow: clip; }
.select-country select { width: 104px; }
.select-chevron { position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; transform: translateY(-50%); pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.header-cta { width: auto; min-width: 94px; height: 30px; min-height: 30px; padding: 5px 11px; gap: 6px; font-size: 10.5px; line-height: 14px; letter-spacing: 0; white-space: nowrap; }
.header-cta span { display: inline-block; white-space: nowrap; }
.header-cta .location-pin { width: 13px; height: 13px; flex-basis: 13px; }
.location-pin { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-store-cta { white-space: nowrap; }
.menu-toggle { display: none; }

/* Home hero */
.hero-home { min-height: 92svh; padding: 96px 0 64px; }
.hero-grid { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: 72px; }
.hero-copy { max-width: 700px; }
.hero-copy h1 { margin-bottom: 24px; font-size: 72px; line-height: 1; letter-spacing: -.025em; }
.hero-copy > p { max-width: 576px; margin-bottom: 32px; font-size: 18px; line-height: 28px; }
.hero-product { min-height: 613px; }
.product-arch { width: min(100%, 491px); aspect-ratio: 4 / 5; border: 1px solid rgba(235,233,219,.12); border-radius: 34% 34% 28px 28px / 22% 22% 28px 28px; background: transparent; box-shadow: none; }
.product-arch img { width: 100%; height: 100%; max-width: 100%; margin: 0; object-fit: cover; filter: none; }
.product-arch img.cms-media-image { object-position: var(--media-position, 50% 50%); }
.origin-badge { bottom: 18px; left: -20px; min-width: 196px; padding: 14px 20px; }
.origin-badge strong { font-size: 16px; }
.page-hero { padding: calc(var(--header-h) + 72px) 0 64px; }
.page-hero h1 { margin-bottom: 20px; font-size: clamp(48px, 6vw, 72px); }
.page-hero p { font-size: 18px; line-height: 28px; }
.section-head { margin-bottom: 52px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { max-width: 600px; font-size: 18px; line-height: 28px; }

/* Home sections */
.marquee { height: 54px; }
.brand-transition { padding: 128px 0; }
.brand-transition h2 { margin-bottom: 24px; font-size: 60px; line-height: 1; letter-spacing: 0; }
.brand-transition::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .22; background: url("../brand/vapor-fog.png") center / cover no-repeat; mix-blend-mode: soft-light; }
.brand-transition > * { z-index: 1; }
.transition-heading-lead { color: rgba(235,233,219,.92); }
.transition-heading-accent { color: var(--gold); font-style: italic; }
.brand-transition .prose-centered > p { max-width: 672px; }
.transition-mark { min-height: 128px; margin: 48px auto 40px; }
.story-teaser { padding: 128px 0; }
.story-teaser .split-grid { grid-template-columns: 584px minmax(0, 1fr); }
.story-collage { min-height: 478px; }
.collage-card { padding: 0; border-radius: 40px; }
.collage-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-collage .collage-card::before { content: none; }
.collage-card small,
.collage-illustration { z-index: 2; }
.collage-main { inset: 0 0 40px; transform: none; }
.collage-small { right: -30px; bottom: 0; width: 192px; height: 192px; border: 3px solid var(--cream); border-radius: 32px; transform: none; box-shadow: 0 18px 42px rgba(55,86,76,.18); }
.editorial-copy { padding-left: 34px; }
.editorial-copy h2 { max-width: 560px; margin-bottom: 22px; font-size: clamp(48px, 4vw, 58px); line-height: 1.02; }
.editorial-copy p { margin-bottom: 28px; font-size: 18px; line-height: 28px; }

/* Products */
.products-feature,
.catalog,
.related,
.malaysia-products { padding: 128px 0; }
.product-grid,
.featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-card { overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--card); transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-card-image { position: relative; aspect-ratio: 4 / 3; border: 0; border-radius: 0; background: linear-gradient(145deg, #fffdfa, #f5f0e7); box-shadow: none; }
.product-card-image img { object-fit: contain; }
.product-card:hover .product-card-image { box-shadow: none; transform: none; }
.product-country-badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 11px; color: var(--gold-light); border-radius: 999px; background: var(--choco); font-family: var(--mono); font-size: 9px; line-height: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.product-new-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 11px; color: #fff; border-radius: 999px; background: #c0392b; font-family: var(--mono); font-size: 9px; line-height: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(192, 57, 43, .35); }
.badge-new-inline { color: #c0392b; font-weight: 700; letter-spacing: .15em; }
.product-meta-row { min-height: 18px; margin: 0; padding: 18px 20px 6px; font-size: 10px; line-height: 14px; }
.product-card h3 { margin: 0; padding: 0 20px 10px; font-size: 20px; line-height: 27.5px; }
.softness { padding: 0 20px 20px; font-size: 9px; }

/* Moments */
.moments { padding: 128px 0; }
.moments-heading { margin-bottom: 58px; display: flex; justify-content: center; text-align: center; }
.moments-heading > div { width: min(100%, 720px); }
.moments-heading .eyebrow { margin-bottom: 14px; color: var(--gold); }
.moments-heading h2 { margin-bottom: 18px; color: var(--choco); font-size: clamp(42px, 4vw, 54px); line-height: 1.05; }
.moments-heading p { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.55; }
.moment-grid { min-height: 0; height: 924px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 292px); gap: 24px; }
.moment-card { min-height: 0; border-radius: 30px; background-position: center; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.moment-card::before { content: none; }
.moment-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(55,86,76,.18); }
.moment-shade { background: linear-gradient(to top, rgba(32,47,41,.9), rgba(32,47,41,.12) 62%, transparent 82%); }
.moment-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.moment-2 { grid-column: 3; grid-row: 1; }
.moment-3 { grid-column: 3; grid-row: 2; }
.moment-4 { grid-column: 1; grid-row: 3; }
.moment-5 { grid-column: 2; grid-row: 3; }
.moment-copy { padding: 28px; }
.moment-copy > span { color: var(--gold-light); }
.moment-copy h3 { margin: 8px 0 8px; color: var(--cream); font-size: 24px; }
.moment-copy h1 { margin: 8px 0; color: var(--cream); font-size: clamp(1.7rem, 3vw, 2rem); line-height: 1.1; }
.moment-copy p { color: rgba(235,233,219,.82); line-height: 1.55; }
.moment-1 .moment-copy { padding: 34px; }
.moment-1 .moment-copy h3 { font-size: 32px; }

/* Journey and news */
.journey { padding: 128px 0; }
.journey .prose-centered h2 { font-size: 48px; line-height: 1; }
.journey .prose-centered p { font-size: 16px; }
.journey-route { margin-top: 64px; }
.country-cards { max-width: 804px; gap: 24px; }
.country-cards a { padding: 22px 24px; }
.country-cards a > span { font-size: 30px; }
.stats-row strong { font-size: 48px; }
.news-teaser,
.articles { padding: 128px 0; }
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border: 0; }
.news-card,
.news-card + .news-card { min-height: 198px; padding: 28px; display: block; border: 1px solid var(--border); border-radius: 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.news-card time { font-size: 10px; letter-spacing: .3em; }
.news-card h3 { margin: 16px 0 10px; font-size: 20px; line-height: 27.5px; }
.news-card p { margin-bottom: 0; font-size: 14px; line-height: 22.75px; }

/* Footer */
.site-footer { padding-top: 80px; color: rgba(235,233,219,.75); background: #2b443b; }
.footer-grid { min-height: auto; padding-bottom: 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 40px 24px; }
.footer-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; }
.footer-grid > div:nth-child(2) { grid-column: 5 / span 2; }
.footer-grid > div:nth-child(3) { grid-column: 7 / span 2; }
.footer-grid > div:nth-child(4) { grid-column: 9 / span 2; }
.footer-grid > div:last-child { grid-column: 11 / span 2; }
.footer-brand img { width: 175px; height: auto; max-height: 75px; margin-bottom: 18px; object-fit: contain; }
.footer-brand p { max-width: 320px; font-size: 14px; line-height: 1.6; color: rgba(235,233,219,.7); margin: 0 0 20px; }
.social-row { display: flex; gap: 12px; align-items: center; }
.social-row a { position: relative; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(235,233,219,.22); background: rgba(255,255,255,.05); color: var(--cream); transition: all .2s ease; font-size: 0; }
.social-row a:hover { color: var(--gold); border-color: var(--gold); background: rgba(212,172,103,.15); transform: translateY(-2px); }
.footer-app-downloads { margin: 0 auto; padding: 24px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid rgba(235,233,219,.12); }
.footer-app-download-copy { min-width: 0; }
.footer-app-downloads h3 { margin: 0 0 6px; }
.footer-app-downloads p { max-width: 520px; margin: 0; color: rgba(235,233,219,.6); font-size: 12px; line-height: 1.5; }
.footer-app-download-links { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.footer-app-download-links .app-store-badge-link { flex: 0 0 132px; width: 132px; height: 46px; }
.footer-app-download-links .app-store-badge-icon { width: 20px; height: 23px; max-height: 23px; flex: 0 0 20px; margin: 0; object-fit: contain; }
.footer-app-download-links .app-store-badge-copy { flex: 0 1 auto; }
.footer-app-download-links .app-store-badge-copy small { font-size: .45rem; line-height: 1; }
.footer-app-download-links .app-store-badge-copy strong { font-size: .69rem; line-height: 1; }
.footer-app-download-links .app-store-badge-link:hover { transform: translateY(-2px); }
.social-country-pill { position: absolute; bottom: -4px; right: -4px; font-size: 8px; font-weight: 700; font-family: var(--mono); line-height: 1; padding: 2px 4px; border-radius: 4px; background: var(--choco); color: var(--gold); border: 1px solid rgba(212,172,103,.4); letter-spacing: .05em; }
.social-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.social-icon-fill { fill: currentColor; stroke: none; }
.footer-social-groups { display: grid; gap: 10px; }
.footer-social-group { display: grid; gap: 6px; }
.footer-social-label { color: var(--gold) !important; font-family: var(--mono); font-size: 10px !important; font-weight: 700; letter-spacing: .12em; line-height: 1.4 !important; text-transform: uppercase; }
.footer-social-group .social-row { flex-wrap: wrap; gap: 8px; }
.footer-social-group .social-icon { width: 16px; height: 16px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 12px; }
.footer-grid h3 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-family: var(--mono); }
.footer-grid a,
.footer-grid span { font-size: 14px; line-height: 20px; color: rgba(235,233,219,.75); transition: color .2s ease, transform .2s ease; }
.footer-grid a:hover { color: var(--gold); transform: translateX(3px); }
.footer-countries .country-link { display: flex; align-items: center; gap: 8px; }
.footer-countries .country-link .status-badge { font-size: 9px; font-family: var(--mono); padding: 1px 6px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.footer-countries .country-link .status-badge.live { background: rgba(82,196,26,.18); color: #73d13d; border: 1px solid rgba(82,196,26,.3); }
.footer-countries .country-link .status-badge.soon { background: rgba(212,172,103,.15); color: var(--gold); border: 1px solid rgba(212,172,103,.3); }
.footer-countries .country-link.future { color: rgba(235,233,219,.45); font-style: italic; }
.footer-bottom { min-height: 56px; padding: 20px 0; border-top: 1px solid rgba(235,233,219,.12); color: rgba(235,233,219,.45); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-legal-links { display: flex; align-items: center; gap: 20px; }
.footer-legal-links a { color: rgba(235,233,219,.5); transition: color .2s ease; }
.footer-legal-links a:hover { color: var(--gold); }
.footer-admin-link { display: inline-flex; align-items: center; gap: 5px; opacity: .7; }
.footer-admin-link:hover { opacity: 1; color: var(--gold); }

@media (max-width: 1023px) {
  :root { --header-h: 72px; }
  .container,
  .container-wide { width: min(calc(100% - 48px), 1216px); }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  .header-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy h1 { font-size: clamp(52px, 7vw, 64px); }
  .hero-product { width: min(100%, 491px); min-height: auto; margin-inline: auto; }
  .story-teaser .split-grid { grid-template-columns: 1fr; gap: 56px; }
  .story-collage { width: min(100%, 584px); min-height: 478px; }
  .editorial-copy { padding-left: 0; }
  .featured-grid { display: flex; gap: 20px; margin-right: -24px; padding-right: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .featured-grid::-webkit-scrollbar { display: none; }
  .featured-grid .product-card,
  .featured-grid .product-card:last-child { width: min(78vw, 389px); max-width: 389px; flex: 0 0 min(78vw, 389px); display: block; scroll-snap-align: start; }
  .product-grid:not(.featured-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moment-grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .moment-card,
  .moment-2,
  .moment-3,
  .moment-4,
  .moment-5 { min-height: 0; aspect-ratio: 4 / 3; grid-column: auto; grid-row: auto; }
  .moment-1 { min-height: 0; aspect-ratio: 2 / 1; grid-column: 1 / -1; grid-row: auto; }
  .footer-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 40px 20px; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }
  .footer-grid > div:nth-child(2) { grid-column: 1 / span 2; }
  .footer-grid > div:nth-child(3) { grid-column: 3 / span 2; }
  .footer-grid > div:nth-child(4) { grid-column: 5 / span 2; }
  .footer-grid > div:last-child { grid-column: 7 / span 2; }
}

@media (max-width: 767px) {
  .container,
  .container-wide { width: min(calc(100% - 32px), 1216px); }
  .brand,
  .brand img { width: 112px; flex-basis: 112px; }
  .generic-section,
  .brand-transition,
  .story-teaser,
  .products-feature,
  .moments,
  .journey,
  .news-teaser,
  .catalog,
  .related,
  .articles,
  .malaysia-stores,
  .malaysia-products,
  .promotion-section,
  .malaysia-contact { padding: 96px 0; }
  h1 { font-size: 40px; line-height: 1.08; }
  h2 { font-size: 36px; line-height: 1.08; }
  .eyebrow { margin-bottom: 20px; font-size: 10px; letter-spacing: .38em; }
  .hero-home { min-height: auto; padding: 112px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.02em; }
  .hero-copy > p { margin-bottom: 28px; font-size: 16px; line-height: 24px; }
  .hero-product { min-height: auto; margin-top: 0; }
  .product-arch { width: min(100%, 360px); }
  .origin-badge { left: 8px; bottom: 16px; }
  .button-row { align-items: stretch; }
  .hero-copy .button { width: 100%; }
  .brand-transition h2 { font-size: 40px; line-height: 1.08; }
  .transition-mark { min-height: 240px; margin: 36px auto; }
  .transition-logo-stage { height: 240px; }
  .story-teaser .split-grid { grid-template-columns: 1fr; gap: 56px; }
  .story-collage { min-height: 0; aspect-ratio: 4 / 3; }
  .collage-main { inset: 0; }
  .collage-small { display: none; }
  .editorial-copy h2 { font-size: 36px; line-height: 1.08; }
  .editorial-copy p { font-size: 16px; line-height: 24px; }
  .section-head { margin-bottom: 40px; display: block; }
  .section-head h2 { font-size: 36px; line-height: 1.08; }
  .section-head p { font-size: 16px; line-height: 24px; }
  .section-head .text-link { margin-top: 20px; }
  .featured-grid { display: flex; gap: 16px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .featured-grid::-webkit-scrollbar { display: none; }
  .featured-grid .product-card,
  .featured-grid .product-card:last-child { max-width: 340px; flex: 0 0 78vw; display: block; scroll-snap-align: start; }
  .catalog-grid,
  .product-grid:not(.featured-grid) { grid-template-columns: 1fr; }
  .moment-grid { height: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .moment-card,
  .moment-1,
  .moment-2,
  .moment-3,
  .moment-4,
  .moment-5 { min-height: 0; aspect-ratio: 4 / 3; grid-column: 1; grid-row: auto; }
  .journey .prose-centered h2 { font-size: 36px; line-height: 1.08; }
  .country-cards,
  .stats-row { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
  .news-card,
  .news-card + .news-card { min-height: 0; padding: 24px; }
  .site-footer { min-height: 0; padding-top: 72px; }
  .footer-grid { min-height: 0; padding-bottom: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .footer-app-downloads { align-items: flex-start; flex-direction: column; gap: 16px; }
  .footer-brand,
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4),
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }
}

@media (max-width: 420px) {
  .menu-toggle { padding: 8px 10px; }
  .menu-toggle span:last-child { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-app-download-links { width: 100%; }
  .footer-brand,
  .footer-grid > div:last-child { grid-column: auto; }
}

/* Secondary-page alignment — geometry and typography only. */
.page-products .page-hero,
.page-stores .page-hero { padding: 128px 0 0; border-bottom: 0; }
.page-products .page-hero .eyebrow,
.page-stores .page-hero .eyebrow { margin-bottom: 16px; }
.page-products .page-hero h1,
.page-stores .page-hero h1 { margin-bottom: 16px; font-size: 60px; line-height: 1; }
.page-products .page-hero p,
.page-stores .page-hero p { margin-bottom: 0; font-size: 18px; line-height: 28px; }

.page-products .catalog { padding: 40px 0 96px; }
.page-products .catalog-controls { margin-bottom: 40px; padding: 0; align-items: center; border: 0; border-radius: 0; background: transparent; }
.page-products .filter-pills { gap: 8px; }
.page-products .filter-pills button { min-height: 42px; padding: 0 17px; color: var(--choco-2); background: rgba(249,247,239,.68); font-size: 14px; line-height: 1; font-weight: 500; }
.page-products .filter-pills button:hover,
.page-products .filter-pills button.active { color: var(--cream); border-color: var(--choco); background: var(--choco); }
.page-products .filter-fields { flex: 0 0 auto; }
.page-products .search-field,
.page-products .select-field { height: 42px; background: rgba(249,247,239,.72); }
.page-products .search-field { width: 256px; }
.page-products .search-field input { padding: 0 17px 0 42px; font-size: 13px; }
.page-products .search-field > .catalog-search-icon { right: auto; left: 14px; width: 17px; height: 17px; display: block; color: var(--muted); }
.page-products .catalog-search-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.page-products .select-field { width: 150px; min-width: 150px; }
.page-products .select-field select { padding: 0 42px 0 17px; font-size: 13px; line-height: 1; }
.page-products .select-field::after { content: ""; right: 18px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--choco-2); border-bottom: 1.5px solid var(--choco-2); transform: translateY(-68%) rotate(45deg); opacity: .9; }

.page-stores .store-locator { padding: 40px 0 96px; }
.page-stores .store-filters { margin-bottom: 32px; padding: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 1.15fr) auto; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 28px; background: rgba(249,247,239,.82); box-shadow: 0 14px 34px rgba(55,86,76,.055); }
.page-stores .store-filters .search-field,
.page-stores .store-filters .select-field { width: 100%; min-width: 0; height: 46px; border-color: rgba(55,86,76,.18); border-radius: 14px; background: rgba(255,255,255,.4); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.page-stores .store-filters .search-field:hover,
.page-stores .store-filters .select-field:hover,
.page-stores .store-filters .search-field:focus-within,
.page-stores .store-filters .select-field:focus-within { border-color: rgba(55,86,76,.45); background: rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(55,86,76,.07); }
.page-stores .store-filters .select-field::after { content: ""; right: 18px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--choco-2); border-bottom: 1.5px solid var(--choco-2); transform: translateY(-70%) rotate(45deg); opacity: .75; }
.page-stores .store-search-icon { width: 17px; height: 17px; display: grid; place-items: center; color: var(--choco-2); }
.page-stores .store-search-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.store-filter-actions { display: flex; align-items: center; gap: 8px; }
.store-filter-reset,
.store-nearby { height: 46px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--choco-2); border-radius: 14px; color: var(--cream); background: var(--choco-2); font-size: .72rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease; }
.store-nearby { color: var(--choco); border-color: var(--gold); background: var(--gold); }
.store-filter-reset svg,
.store-nearby svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-nearby:not(:disabled):hover { color: var(--cream); border-color: var(--choco-2); background: var(--choco-2); transform: translateY(-1px); }
.store-nearby.is-loading svg { animation: nearby-pulse .9s ease-in-out infinite alternate; }
.store-nearby-status { grid-column: 1 / -1; margin: 0; padding: 10px 13px; color: var(--pandan); border-radius: 12px; background: rgba(55,86,76,.08); font-size: .75rem; line-height: 1.4; }
.store-nearby-status.is-error { color: var(--chilli); background: rgba(185,71,49,.08); }
@keyframes nearby-pulse { to { opacity: .35; transform: scale(.82); } }
.store-filter-reset:not(:disabled):hover { color: var(--choco); border-color: var(--gold); background: var(--gold); transform: translateY(-1px); }
.store-filter-reset:focus-visible,
.store-nearby:focus-visible { outline: 3px solid rgba(212,172,103,.28); outline-offset: 2px; }
.store-filter-reset:disabled { opacity: .38; cursor: default; }
.store-nearby:disabled { opacity: .72; cursor: wait; }
.page-stores .map-shell { margin-bottom: 48px; padding: 7px; border: 1px solid rgba(55,86,76,.14); border-radius: 35px; background: linear-gradient(145deg, rgba(55,86,76,.2), rgba(212,172,103,.34)); box-shadow: 0 25px 70px rgba(43,73,63,.16); }
.page-stores .store-map { border-radius: 28px; }

.contact-page { padding: 120px 0 88px; }
.contact-page .contact-layout { max-width: 1216px; display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); grid-template-rows: auto auto auto auto; gap: 18px 22px; align-items: stretch; }
.contact-intro { grid-column: 1; grid-row: 1; margin: 0; }
.contact-intro h1 { margin-bottom: 14px; font-size: 56px; line-height: 1; }
.contact-intro > .eyebrow { margin-bottom: 12px; }
.contact-lead { max-width: 600px; margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 26px; }
.contact-hero-complaint { grid-column: 1; grid-row: 2; max-width: none; padding: 17px 18px; color: var(--choco); border-color: rgba(55,86,76,.14); background: var(--card); text-decoration: none; }
.contact-hero-complaint .contact-icon { width: 40px; height: 40px; flex-basis: 40px; color: var(--choco); background: rgba(55,86,76,.08); }
.contact-hero-complaint h2 { margin: 0 0 5px; font-size: 17px; line-height: 1.35; }
.contact-hero-complaint p { margin: 0 0 7px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.contact-hero-complaint-cta { display: inline-flex; align-items: center; color: var(--chilli); font-size: .78rem; font-weight: 700; }
.contact-hero-complaint:hover .contact-hero-complaint-cta { text-decoration: underline; text-underline-offset: 3px; }
.contact-hero-complaint:focus-visible { outline-offset: 4px; }
.contact-info-grid { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-page .contact-card { min-width: 0; padding: 16px; gap: 12px; border-radius: 18px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.contact-page .contact-card:hover { border-color: rgba(212,172,103,.55); box-shadow: 0 12px 30px rgba(55,86,76,.08); transform: translateY(-2px); }
.contact-page .contact-card > div { min-width: 0; }
.contact-page .contact-icon { width: 38px; height: 38px; flex: 0 0 38px; color: var(--choco); background: rgba(55,86,76,.08); }
.contact-page .contact-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-page .contact-card h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.contact-page .contact-card p { margin: 0 0 7px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.contact-page .contact-card a { overflow-wrap: anywhere; transition: color .2s ease; }
.contact-page .contact-card a:hover { color: var(--choco); }
.contact-detail-list { margin: 0; padding: 0; display: grid; gap: 5px; list-style: none; }
.contact-detail-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 6px; font-size: .73rem; line-height: 1.4; }
.contact-page .contact-card .contact-detail-list li > span { color: var(--muted); font-size: inherit; }
.contact-page .contact-card .contact-detail-list a { min-width: 0; color: var(--chilli); font-size: inherit; font-weight: 700; }
.contact-info-card { min-height: 132px; }
.contact-info-contacts { grid-column: 1 / -1; }
.contact-info-card .contact-icon { width: 34px; height: 34px; flex-basis: 34px; }
.contact-info-address { grid-column: 1 / -1; min-height: 0; align-items: center; }
.contact-info-address p { margin: 0 !important; }
.contact-page .contact-form { min-width: 0; grid-column: 2; grid-row: 2 / span 2; align-self: stretch; margin: 0; padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; border: 1px solid rgba(235,233,219,.1); border-radius: 26px; }
.contact-page .contact-form .eyebrow { margin-bottom: 18px; }
.contact-page .contact-form h2 { margin-bottom: 22px; color: var(--cream); font-size: clamp(1.7rem, 3vw, 2.15rem); line-height: 1.15; }
.contact-page .contact-form label { margin-top: 12px; }
.contact-page .contact-form input,
.contact-page .contact-form textarea { padding: 13px 15px; border-radius: 13px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.contact-page .contact-form input::placeholder,
.contact-page .contact-form textarea::placeholder { color: rgba(235,233,219,.58); }
.contact-page .contact-form input:focus,
.contact-page .contact-form textarea:focus { border-color: var(--gold); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(212,172,103,.14); }
.contact-page .contact-form textarea { min-height: 128px; flex: 1 1 auto; resize: vertical; }
.contact-page .contact-form .button { width: 100%; justify-content: center; margin-top: 18px; }
.contact-career { grid-column: 1 / -1; grid-row: 4; min-height: 88px; padding: 18px 22px !important; display: flex; align-items: center; }
.contact-career > div { flex: 1; }
.contact-career h2 { margin-bottom: 3px !important; }
.contact-career p { margin: 0 !important; }
.contact-page .contact-card .contact-career-link { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; border-radius: 999px; color: var(--cream); background: var(--chilli); font-size: .75rem; font-weight: 700; text-decoration: none; }
.contact-page .contact-card .contact-career-link:hover { color: var(--cream); background: var(--choco); }

.news-page { padding: 132px 0 104px; }
.news-page-inner { max-width: 1216px; }
.news-page-intro { max-width: 820px; margin: 0 auto 54px 0; }
.news-page-intro .eyebrow { margin-bottom: 20px; }
.news-page-intro h1 { max-width: 760px; margin-bottom: 16px; color: var(--choco); font-size: 60px; line-height: 1; }
.news-page-intro p { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 28px; }
.news-page .article-list { max-width: none; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 22px; border: 0; }
.news-page .article-panel { min-width: 0; padding: 30px; display: block; border: 1px solid var(--border); border-radius: 26px; background: var(--card); scroll-margin-top: calc(var(--header-h) + 18px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.news-page .article-panel-card { min-height: 270px; display: flex; flex-direction: column; gap: 12px; }
.news-page .article-panel-card.article-panel-without-image { grid-column: 1; }
.news-page .article-panel-card.article-panel-with-image { grid-column: 2; grid-row: span 2; }
.news-page .article-panel-card .article-panel-copy { flex: 1; display: flex; flex-direction: column; }
.news-page .article-panel:hover { transform: translateY(-3px); border-color: rgba(212,172,103,.6); box-shadow: 0 18px 42px rgba(55,86,76,.09); }
.news-page .article-panel-featured { grid-column: 1 / -1; min-height: 310px; padding: clamp(32px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); align-items: center; gap: clamp(30px, 6vw, 80px); overflow: hidden; border-color: transparent; color: var(--cream); background: var(--choco); }
.news-page .article-panel-featured::after { width: 260px; height: 260px; position: absolute; right: 7%; top: 50%; border: 1px solid rgba(212,172,103,.22); border-radius: 50%; content: ""; transform: translateY(-50%); pointer-events: none; }
.news-page .article-panel-featured { position: relative; isolation: isolate; }
.news-page .article-panel-featured::before { width: 190px; height: 190px; position: absolute; right: calc(7% + 35px); top: 50%; border: 1px solid rgba(212,172,103,.14); border-radius: 50%; content: ""; transform: translateY(-50%); pointer-events: none; }
.news-page .article-panel-featured .article-panel-copy { position: relative; z-index: 1; max-width: 590px; }
.news-page .article-panel-featured .article-panel-copy { grid-column: 1 / 2; grid-row: 1; }
.news-page .article-panel-featured .article-panel-cover { width: min(100%, 360px); max-height: 680px; aspect-ratio: 9 / 16; grid-column: 2; grid-row: 1; z-index: 1; justify-self: center; margin: 0; overflow: hidden; border-radius: 22px; background: rgba(235,233,219,.08); }
.news-page .article-panel-featured .article-panel-cover-landscape { width: min(100%, 520px); aspect-ratio: 16 / 9; }
.news-page .article-panel-card .article-panel-cover { margin: -12px -12px 0; overflow: hidden; border-radius: 17px; background: var(--cream-deep); }
.news-page .article-list.has-news-selection .article-panel-card .article-panel-cover { aspect-ratio: 16 / 9; }
.news-page .news-gallery { width: 100%; height: 100%; position: relative; }
.news-page .news-gallery-track { width: 100%; height: 100%; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.news-page .news-gallery-track::-webkit-scrollbar { display: none; }
.news-page .news-gallery-slide { min-width: 100%; height: 100%; flex: 0 0 100%; scroll-snap-align: start; }
.news-page .news-gallery-slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.news-page .article-panel-card .article-panel-cover-landscape .news-gallery-track,
.news-page .article-panel-card .article-panel-cover-landscape .news-gallery-slide { aspect-ratio: 16 / 9; }
.news-page .article-panel-card .article-panel-cover-portrait .news-gallery-track,
.news-page .article-panel-card .article-panel-cover-portrait .news-gallery-slide { width: min(100%, 360px); aspect-ratio: 9 / 16; margin-inline: auto; }
.news-page .article-list.has-news-selection .article-panel-card .news-gallery-track,
.news-page .article-list.has-news-selection .article-panel-card .news-gallery-slide { width: 100%; height: 100%; aspect-ratio: auto; }
.news-page .article-list.has-news-selection .article-panel-card .news-gallery-slide img { object-fit: cover; }
.news-page .article-panel-featured .article-panel-cover-landscape .news-gallery-track,
.news-page .article-panel-featured .article-panel-cover-landscape .news-gallery-slide { aspect-ratio: 16 / 9; }
.news-page .news-gallery-controls { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.news-page .news-gallery-arrow,
.news-page .news-gallery-dots button { pointer-events: auto; }
.news-page .news-gallery-arrow { width: 38px; height: 38px; display: grid; place-items: center; color: var(--cream); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(32,58,49,.78); font-size: 20px; line-height: 1; cursor: pointer; }
.news-page .news-gallery-arrow:disabled { opacity: .42; cursor: default; }
.news-page .news-gallery-dots { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: rgba(32,58,49,.68); }
.news-page .news-gallery-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
.news-page .news-gallery-dots button[aria-current="true"] { width: 18px; border-radius: 999px; background: var(--gold); }
.news-page .article-panel time { display: block; margin-bottom: 16px; color: var(--muted); font-family: var(--mono); font-size: .66rem; letter-spacing: .15em; }
.news-page .article-panel-featured time { margin: 0 0 16px; color: var(--gold); }
.news-page .article-panel h2 { margin-bottom: 14px; color: var(--choco); font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.18; }
.news-page .article-panel-featured h2 { color: var(--cream); font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.news-page .article-panel .lead { margin-bottom: 12px; color: var(--choco-2); font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; }
.news-page .article-panel-featured .lead { color: rgba(235,233,219,.88); font-size: 1.25rem; }
.news-story-read-more { width: fit-content; margin: auto 0 0; padding: 16px 0 0; display: inline-flex; align-items: center; gap: 9px; color: var(--chilli); border: 0; background: transparent; font: 600 .82rem/1.4 var(--sans); cursor: pointer; }
.news-page .article-panel-featured .news-story-read-more { margin: 4px 0 16px; padding: 0; }
.news-story-read-more span { transition: transform .2s ease; }
.news-story-read-more:hover span { transform: translateX(4px); }
.news-page .article-list.has-news-selection .article-panel-card .article-panel-copy > p:not(.lead),
.news-page .article-list.has-news-selection .article-panel-card .app-news-download-links { display: none; }
.news-page .article-list.has-news-selection .article-panel-featured .news-story-read-more { display: none; }
.news-page .article-panel p:last-child { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.news-page .article-panel-featured p:last-child { color: rgba(235,233,219,.72); }
.app-news-download-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }

.page-malaysia .malaysia-hero { min-height: 639px; padding: 176px 0 96px; }
.page-malaysia .malaysia-hero .split-grid { grid-template-columns: 1fr; }
.page-malaysia .malaysia-hero .split-grid > div:first-child { max-width: 768px; }
.page-malaysia .malaysia-hero h1 { margin-bottom: 24px; font-size: 60px; line-height: 1; }
.page-malaysia .malaysia-hero p { margin-bottom: 32px; font-size: 18px; line-height: 28px; }
.page-malaysia .malaysia-art { display: none; }
.page-malaysia .malaysia-stores,
.page-malaysia .malaysia-products,
.page-malaysia .promotion-section,
.page-malaysia .malaysia-contact { padding: 80px 0; }
.page-malaysia .section-head { margin-bottom: 40px; }
.page-malaysia .section-head h2,
.page-malaysia .malaysia-contact h2 { font-size: 36px; line-height: 40px; }
.page-malaysia .malaysia-contact .prose-centered { max-width: 896px; padding: 32px; border: 1px dashed var(--border); border-radius: 32px; }

.page-story .story-hero { min-height: 452px; padding: 150px 0 58px; background: linear-gradient(180deg, #315247 0%, #2b493f 100%); }
.page-story .story-hero .prose-centered { position: relative; z-index: 1; }
.page-story .story-hero .eyebrow { margin-bottom: 20px; }
.page-story .story-hero h1 { margin-bottom: 24px; font-size: 60px; line-height: 1; }
.page-story .story-hero p { max-width: 660px; margin-bottom: 0; color: rgba(235,233,219,.82); font-size: 18px; line-height: 29px; }
.page-story .scroll-cue { margin-top: 22px; color: rgba(235,233,219,.9); text-decoration: none; }
.page-story .scroll-cue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-story .scroll-cue:hover { color: var(--gold); border-color: var(--gold); }
.story-evolution-anchor { scroll-margin-top: var(--header-h); }
.page-story .brand-transition { padding: 80px 0; }
.page-story .timeline-section { padding: 96px 0; }
.page-story .story-timeline-head { max-width: 760px; margin-bottom: 72px; }
.page-story .story-timeline-head h2 { max-width: 720px; margin-bottom: 18px; font-size: 48px; line-height: 1.05; }
.page-story .story-timeline-head p { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 28px; }
.page-story .timeline { max-width: 1080px; margin-inline: auto; }
.page-story .timeline-item,
.page-story .timeline-item.right { --timeline-gap: 72px; padding-bottom: var(--timeline-gap); }
.page-story .timeline-item { padding-right: 48px; }
.page-story .timeline-item.right { padding-right: 0; padding-left: 48px; }
.page-story .timeline-card { min-height: 190px; padding: 30px; display: flex; flex-direction: column; justify-content: center; border-radius: 30px; background: rgba(249,247,239,.9); box-shadow: 0 18px 42px rgba(55,86,76,.1); }
.page-story .timeline-meta { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.page-story .timeline-badge { margin: 0; line-height: 1; white-space: nowrap; }
.page-story .timeline-year { color: var(--choco); font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.page-story .timeline-card small { margin: 0; padding: 7px 12px; color: #8b6b37; border-radius: 999px; background: rgba(212,172,103,.16); font-size: 9px; line-height: 1; letter-spacing: .2em; }
.page-story .timeline-card h2 { margin-bottom: 12px; color: var(--choco); font-size: 28px; line-height: 1.2; }
.page-story .timeline-card p { color: #887a72; font-size: 17px; line-height: 1.55; }
.page-story .timeline-dot { top: calc((100% - var(--timeline-gap)) / 2); width: 14px; height: 14px; border-width: 3px; transform: translateY(-50%); box-shadow: 0 0 0 2px var(--chilli); background: var(--cream); }
.page-story .timeline::before { background: rgba(55,86,76,.22); }
.page-story .story-quote { padding: 96px 0; }
.page-story .story-quote blockquote { font-size: 60px; line-height: 1.1; }

@media (max-width: 1050px) {
  .page-stores .store-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-stores .store-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .page-products .page-hero,
  .page-stores .page-hero { padding-top: 112px; }
  .page-products .page-hero h1,
  .page-stores .page-hero h1 { font-size: 36px; line-height: 40px; }
  .page-products .page-hero p,
  .page-stores .page-hero p { font-size: 16px; line-height: 24px; }
  .page-products .catalog,
  .page-stores .store-locator { padding: 40px 0 80px; }
  .page-products .catalog-controls { display: grid; gap: 16px; }
  .page-products .filter-pills { overflow-x: auto; flex-wrap: nowrap; }
  .page-products .filter-fields { display: grid; grid-template-columns: minmax(0, 1fr) 135px; gap: 12px; }
  .page-products .search-field,
  .page-products .select-field { width: 100%; min-width: 0; }
  .page-stores .store-filters { padding: 16px; grid-template-columns: 1fr; gap: 10px; border-radius: 24px; }
  .page-stores .store-filter-actions { grid-column: auto; width: 100%; }
  .page-stores .store-filter-actions > button { flex: 1 1 0; }
  .page-stores .map-shell { border-radius: 28px; }

  .contact-page { padding: 112px 0 80px; }
  .contact-hero { margin-bottom: 40px; }
  .contact-hero-copy { max-width: none; }
  .contact-intro { margin-bottom: 24px; }
  .contact-intro h1 { font-size: 36px; line-height: 40px; }
  .contact-hero-complaint { max-width: none; }
  .contact-page .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-lead { margin-bottom: 0; font-size: 16px; line-height: 24px; }
  .contact-page .contact-form { padding: 28px; }

  .news-page { padding: 112px 0 80px; }
  .news-page-intro { margin-bottom: 36px; }
  .news-page-intro h1 { font-size: 36px; line-height: 40px; }
  .news-page-intro p { font-size: 16px; line-height: 24px; }
  .news-page .article-list { grid-template-columns: 1fr; gap: 16px; }
  .news-page .article-panel-card.article-panel-without-image,
  .news-page .article-panel-card.article-panel-with-image { grid-column: auto; grid-row: auto; }
  .news-page .article-panel { padding: 24px; }
  .news-page .article-panel-featured { min-height: 0; padding: 28px; display: block; }
  .news-page .article-panel-featured::before { width: 140px; height: 140px; right: -40px; top: 24px; transform: none; }
  .news-page .article-panel-featured::after { width: 200px; height: 200px; right: -68px; top: 8px; transform: none; }
  .news-page .article-panel-featured .article-panel-copy { max-width: 100%; }
  .news-page .article-panel-featured .article-panel-cover { width: min(100%, 360px); margin: 22px 0 0; aspect-ratio: 9 / 16; }
  .news-page .article-panel-featured .article-panel-cover-landscape { width: min(100%, 520px); aspect-ratio: 16 / 9; }
  .news-page .article-panel h2 { font-size: 24px; }
  .news-page .article-panel-featured h2 { font-size: clamp(1.7rem, 7vw, 2rem); }

  .page-malaysia .malaysia-hero { min-height: 0; padding: 144px 0 80px; }
  .page-malaysia .malaysia-hero h1 { font-size: 36px; line-height: 40px; }
  .page-malaysia .malaysia-stores,
  .page-malaysia .malaysia-products,
  .page-malaysia .promotion-section,
  .page-malaysia .malaysia-contact { padding: 80px 0; }
  .page-malaysia .section-head h2,
  .page-malaysia .malaysia-contact h2 { font-size: 30px; line-height: 36px; }

  .page-story .story-hero { min-height: 0; padding: 144px 0 72px; }
  .page-story .story-hero h1 { font-size: 36px; line-height: 40px; }
  .page-story .brand-transition { padding: 72px 0; }
  .page-story .timeline-section,
  .page-story .story-quote { padding: 80px 0; }
  .page-story .story-quote blockquote { font-size: 40px; }
}

/* Final homepage geometry pass against the reference. */
@media (min-width: 1024px) {
  .hero-grid { gap: 32px; }
}

.brand-transition .eyebrow { margin-bottom: 32px; }
.transition-mark { min-height: 208px; }
.phase-pills span { min-height: 50px; padding: 8px 16px; display: grid; place-items: center; }
.transition-cta { min-height: 46px; margin-top: 48px; padding: 12px 28px; }

.collage-card { margin: 0; }
.collage-card figcaption { display: none; }

.journey .prose-centered { max-width: 672px; }
.journey .eyebrow { margin-bottom: 16px; }
.journey .prose-centered h2 { margin-bottom: 16px; color: var(--cream); }
.journey .prose-centered p { margin-bottom: 0; font-size: 18px; line-height: 28px; }
.journey-route { width: 100%; max-width: 896px; height: 246px; margin: 64px auto 0; display: flex; flex-direction: column; justify-content: center; }
.country-cards { width: 100%; max-width: 896px; height: 141px; margin: 0 auto; gap: 16px; }
.country-cards a { height: 141px; padding: 24px; flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
.country-cards a:first-child { background: rgba(255,255,255,.035); }
.country-cards a:last-child { border-color: rgba(212,172,103,.58); background: rgba(212,172,103,.04); }
.country-cards a:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(212,172,103,.08); }
.country-cards .country-code { color: rgba(235,233,219,.72); font-family: var(--serif); font-size: 20px; line-height: 26px; }
.country-cards h3 { font-size: 20px; line-height: 28px; }
.country-cards small { font-size: 10px; line-height: 15px; }
.stats-row { width: 100%; max-width: 896px; height: 76px; margin: 48px auto 0; border: 0; }
.stats-row div { height: 76px; padding: 0; display: block; border: 0; }
.stats-row strong { display: block; font-size: 48px; line-height: 48px; }
.stats-row span { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; }
.journey .center { margin-top: 48px; }

.news-teaser .section-head { margin-bottom: 48px; }
.news-teaser .eyebrow { margin-bottom: 16px; }
.news-teaser .section-head h2 { max-width: 780px; margin-bottom: 0; color: var(--choco); font-size: clamp(42px, 4vw, 54px); line-height: 1.04; }
.news-teaser .text-link { color: var(--chilli); border-bottom-color: transparent; }
.news-teaser .text-link:hover { border-bottom-color: var(--chilli); }
.news-grid { height: 198px; }
.news-card,
.news-card + .news-card { height: 198px; overflow: hidden; background: rgba(249,247,239,.72); }
.news-card:hover { border-color: rgba(212,172,103,.55); }
.news-card h3 { color: var(--choco); }
.news-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.social-row a::before { content: none; }

.page-story .brand-transition { padding: 96px 0 108px; }
.page-story .brand-transition .eyebrow { margin-bottom: 20px; }
.page-story .brand-transition h2 { max-width: 880px; margin-inline: auto; font-size: 52px; line-height: 1.04; }
.page-story .brand-transition .transition-heading-lead,
.page-story .brand-transition .transition-heading-accent { display: block; }
.page-story .brand-transition .prose-centered > p { max-width: 720px; color: rgba(235,233,219,.82); font-size: 17px; line-height: 28px; }
.page-story .brand-transition .transition-mark { min-height: 208px; height: auto; margin: 48px auto 36px; }
.page-story .brand-transition .transition-logo-stage { height: 220px; }
.page-story .brand-transition .transition-cta { display: none; }

@media (max-width: 767px) {
  .page-story .story-hero { padding: 126px 0 60px; }
  .page-story .story-hero .eyebrow { margin-bottom: 16px; }
  .page-story .story-hero p { font-size: 16px; line-height: 25px; }
  .page-story .scroll-cue { width: 40px; height: 40px; margin-top: 20px; }
  .brand-transition .eyebrow { margin-bottom: 24px; }
  .transition-mark { min-height: 240px; }
  .transition-logo-old { width: min(92%, 340px); }
  .transition-cta { margin-top: 36px; }
  .journey .prose-centered { max-width: 100%; }
  .journey-route { height: 180px; margin-top: 48px; }
  .country-cards { height: auto; gap: 16px; }
  .country-cards a { height: 132px; }
  .stats-row { height: auto; margin-top: 40px; }
  .stats-row div { height: auto; padding: 24px 0; }
  .journey .center { margin-top: 40px; }
  .news-grid { height: auto; }
  .news-card,
  .news-card + .news-card { height: auto; }
  .page-story .story-timeline-head { margin-bottom: 52px; }
  .page-story .story-timeline-head h2 { font-size: 36px; line-height: 40px; }
  .page-story .story-timeline-head p { font-size: 16px; line-height: 24px; }
  .page-story .timeline-item,
  .page-story .timeline-item.right { --timeline-gap: 32px; padding-right: 0; padding-left: 34px; padding-bottom: var(--timeline-gap); }
  .page-story .timeline-card { min-height: 0; padding: 24px; border-radius: 24px; }
  .page-story .timeline-meta { margin-bottom: 14px; gap: 9px; }
  .page-story .timeline-year { font-size: 21px; }
  .page-story .timeline-card small { padding: 6px 9px; font-size: 8px; }
  .page-story .timeline-card h2 { font-size: 25px; }
  .page-story .timeline-card p { font-size: 16px; line-height: 1.5; }
  .page-story .timeline-dot { top: calc((100% - var(--timeline-gap)) / 2); }
  .page-story .brand-transition { padding: 68px 0 76px; }
  .page-story .brand-transition .eyebrow { margin-bottom: 16px; }
  .page-story .brand-transition h2 { font-size: 36px; line-height: 40px; }
  .page-story .brand-transition .prose-centered > p { font-size: 16px; line-height: 25px; }
  .page-story .brand-transition .transition-mark { min-height: 240px; height: auto; margin: 28px auto; }
  .page-story .brand-transition .transition-logo-stage { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .transition-logo-stage .transition-logo:not(.transition-logo-last) { opacity: 0; visibility:hidden; transform: translate(-50%, -50%); }
  .transition-logo-stage .transition-logo-last { opacity: 1; visibility:visible; transform: translate(-50%, -50%); }
  .transition-logo-stage .transition-steam-cloud,
  .transition-logo-stage .transition-steam-wisp { display: none; }
}

/* Curved international route shown in the reference. */
.journey-route { position: relative; display: block; }
.route-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.route-arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-node { stroke: var(--cream); stroke-width: 3; vector-effect: non-scaling-stroke; }
.route-node-start { fill: var(--pandan); }
.route-node-end { fill: var(--chilli); }
.route-labels {
  position: absolute;
  top: 147px;
  left: 50%;
  z-index: 1;
  width: max-content;
  height: 25px;
  margin: 0;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(212,172,103,.4);
  border-radius: 999px;
  color: var(--gold);
  background: var(--choco);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 15px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.route-labels strong { font: inherit; }

@media (max-width: 767px) {
  .route-labels { top: 60%; padding-inline: 10px; gap: 8px; font-size: 9px; letter-spacing: .22em; }
  .home-intro-inner { width: min(calc(100% - 32px), 620px); min-height: 100svh; padding: 82px 0 38px; }
  .home-intro-logo-stage { height: min(46svh, 340px); }
  .home-intro-logo-old { width: min(94%, 420px); }
  .home-intro-logo-new { width: min(90%, 420px); height: min(74%, 250px); }
  .home-intro-eyebrow { max-width: 86%; font-size: .58rem; line-height: 1.6; letter-spacing: .27em; }
  .home-intro-message { margin-top: -8px; margin-bottom: 22px; font-size: 1.2rem; }
  .home-intro-skip { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); min-height: 38px; padding: 8px 14px; }
  .home-intro-wisp-one { left: 20%; }
  .home-intro-wisp-three { right: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro.is-reduced { animation: none !important; }
  .home-intro.is-reduced .home-intro-eyebrow,
  .home-intro.is-reduced .home-intro-message { opacity: 1; transform: none; animation: none !important; }
  .home-intro.is-reduced .home-intro-logo-old { opacity: 0; animation: none !important; }
  .home-intro.is-reduced .home-intro-logo-step { opacity: 0; animation: none !important; }
  .home-intro.is-reduced .home-intro-logo-final { opacity: 1; filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(318%) hue-rotate(8deg) brightness(101%) contrast(89%); transform: translate(-50%, -50%); }
  .home-intro.is-reduced .home-intro-steam { display: none; animation: none !important; }
  .home-intro.is-reduced .home-intro-progress span { transform: scaleX(1); animation: none !important; }
}

/* Soft public-page handoff: a full brand reveal only on Home, light fades elsewhere. */
body.page-home .site-header,
body.page-home .home-sections,
body.page-home .site-footer {
  transition: opacity 1.05s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1), filter 1.05s ease;
}
body.page-home.intro-active .site-header,
body.page-home.intro-active .home-sections,
body.page-home.intro-active .site-footer {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px) scale(.995);
}
body:not(.page-home) #main-content,
html.home-intro-seen body.page-home #main-content {
  animation: publicPageEnter .48s cubic-bezier(.22,1,.36,1) both;
}
@keyframes publicPageEnter {
  from { opacity: .88; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Editorial Storytelling Enhancements (.page-story)
   ========================================================================== */
.story-hero-editorial {
  min-height: 80vh;
  padding: calc(var(--header-h) + 80px) 0 90px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.story-hero-editorial .hero-subhead {
  max-width: 740px;
  margin: 20px auto 0;
  font-size: 1.15rem;
  line-height: 1.68;
  color: rgba(235,233,219,.88);
}
.story-origin-section {
  padding: 120px 0;
  background: var(--bg);
}
.story-origin-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.story-visual-frame {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #203a31;
}
.story-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-visual-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(32,58,49,.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,157,92,.35);
  color: var(--cream);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-visual-caption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 24px 28px;
  background: linear-gradient(to top, rgba(16,36,30,.92) 0%, rgba(16,36,30,.4) 70%, transparent 100%);
  color: var(--cream);
  font-size: .9rem;
  font-family: var(--serif);
  font-style: italic;
}
.story-prose-lead {
  font-size: 1.15rem;
  line-height: 1.68;
  color: var(--choco);
  font-weight: 500;
  margin-bottom: 20px;
}
.story-prose-body {
  font-size: .98rem;
  line-height: 1.72;
  color: var(--muted);
  margin-bottom: 32px;
}
.amanda-meaning-card {
  padding: 28px 32px;
  border-radius: 24px;
  border: 1px solid rgba(200,157,92,.45);
  background: linear-gradient(145deg, rgba(200,157,92,.12), rgba(55,86,76,.06));
  position: relative;
  box-shadow: 0 10px 30px rgba(55,86,76,.05);
}
.amanda-meaning-card .meaning-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.amanda-meaning-acronym {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--choco);
  letter-spacing: .14em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.amanda-meaning-subtitle {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pandan);
  margin: 0 0 10px;
}
.amanda-meaning-card p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The Craft of Steaming */
.story-craft-section {
  padding: 120px 0;
  background: var(--cream-soft);
}
.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
}
.craft-card {
  padding: 36px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.craft-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(55,86,76,.1);
}
.craft-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--pandan-light);
  color: var(--pandan);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.craft-icon-wrap svg {
  width: 28px;
  height: 28px;
}
.craft-card h3 {
  font-size: 1.45rem;
  color: var(--choco);
  margin: 0 0 12px;
}
.craft-card p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.62;
}

/* Timeline Media Enhancement */
.timeline-card-image {
  margin: -12px -12px 20px;
  border-radius: 22px;
  overflow: hidden;
  height: 220px;
  background: transparent;
}
.timeline-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.timeline-card-image.timeline-card-logo,
.timeline-card-image:has(img[src*="logo"]) {
  margin: 0 0 20px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 4px 0;
}
.timeline-card-image.timeline-card-logo img,
.timeline-card-image:has(img[src*="logo"]) img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}
.timeline-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(200,157,92,.18);
  color: var(--choco);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Amanda by the Numbers */
.story-stats-section {
  padding: 100px 0;
  background: #1f372e;
  color: var(--cream);
  border-top: 1px solid rgba(200,157,92,.2);
  border-bottom: 1px solid rgba(200,157,92,.2);
}
.story-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stat-box {
  padding: 24px 16px;
  border-right: 1px solid rgba(235,233,219,.12);
}
.stat-box:last-child {
  border-right: none;
}
.stat-number {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 4.2rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.stat-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(235,233,219,.75);
  display: block;
  margin-bottom: 8px;
}
.stat-desc {
  font-size: .86rem;
  color: rgba(235,233,219,.6);
  line-height: 1.45;
  margin: 0;
}

/* Story Dual CTA */
.story-dual-cta {
  padding: 120px 0;
  background: var(--bg);
  text-align: center;
}
.story-dual-cta .cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.story-dual-cta .button-gold {
  color: var(--choco);
  border-color: rgba(212,172,103,.5);
  background: var(--gold-light);
}
.story-dual-cta .button-gold:hover,
.story-dual-cta .button-gold:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
}
.story-dual-cta .story-store-link {
  color: var(--muted);
  border-color: var(--border);
  font-size: .82rem;
  transition: color .2s ease, border-color .2s ease;
}
.story-dual-cta .story-store-link:hover,
.story-dual-cta .story-store-link:focus-visible {
  color: var(--choco);
  border-color: var(--gold);
}

@media (max-width: 991px) {
  .story-origin-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .craft-grid {
    grid-template-columns: 1fr;
  }
  .story-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .stat-box:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 767px) {
  .story-origin-section,
  .story-craft-section,
  .story-stats-section,
  .story-dual-cta {
    padding: 70px 0;
  }
  .story-stats-grid {
    grid-template-columns: 1fr;
  }
  .stat-box {
    border-right: none;
    border-bottom: 1px solid rgba(235,233,219,.12);
    padding: 20px 0;
  }
  .stat-box:last-child {
    border-bottom: none;
  }
  .amanda-meaning-acronym {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   Admin Auth Page (Integrated Web Theme)
   ========================================================================== */
.page-admin-auth {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(212,172,103,.12), transparent 34%),
    var(--bg);
}
body.page-admin-auth .site-footer { display: none; }

.admin-auth-section {
  min-height: calc(100svh - var(--header-h));
  margin-top: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px) 20px;
  background:
    radial-gradient(circle at 18% 44%, rgba(55,86,76,.045), transparent 25%),
    radial-gradient(circle at 82% 66%, rgba(212,172,103,.08), transparent 28%);
  position: relative;
}

.admin-auth-card {
  width: min(480px, 100%);
  padding: clamp(34px, 5vw, 46px);
  border-radius: 28px;
  background: linear-gradient(160deg, #fffdf9, #f8f5eb);
  border: 1px solid rgba(55, 86, 76, 0.13);
  box-shadow: 0 30px 80px rgba(55, 86, 76, 0.12), 0 5px 18px rgba(55, 86, 76, 0.04);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.admin-auth-card::before {
  position: absolute;
  top: -1px;
  right: 28px;
  left: 28px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  content: "";
}

.admin-auth-header {
  margin-bottom: 28px;
}

.admin-auth-header .eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--choco);
  opacity: 0.75;
  margin-bottom: 8px;
}

.admin-auth-header h1 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--choco);
  line-height: 1.15;
}

.admin-auth-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.admin-auth-card .field {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-auth-card .field label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--choco);
}

.admin-auth-card .field input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid rgba(55, 86, 76, 0.2);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  color: var(--choco);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-auth-card .field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,172,103,.17);
}

.admin-auth-card .password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.admin-auth-card .password-wrapper input {
  width: 100%;
  padding-right: 48px;
}

.admin-auth-card .btn-toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: #726e63;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
  z-index: 2;
}

.admin-auth-card .btn-toggle-password:hover {
  color: var(--choco);
  background: rgba(55, 86, 76, 0.08);
}

.admin-auth-card .btn-toggle-password:active {
  transform: translateY(-50%) scale(0.94);
}

.admin-auth-card .btn-toggle-password:focus-visible {
  outline: 2px solid var(--choco);
  outline-offset: 1px;
}

.admin-auth-card .btn-toggle-password svg,
.admin-auth-card .btn-toggle-password i {
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.admin-auth-card .btn-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 13px 25px;
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--choco);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(55, 86, 76, 0.19);
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.admin-auth-card .btn-signin:hover {
  background: #46675d;
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(55, 86, 76, 0.28);
}

.admin-auth-card .btn-signin:active {
  transform: translateY(0);
}

.admin-auth-card .auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
}

.admin-auth-card .auth-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.admin-auth-card .auth-links a:hover {
  color: var(--choco);
}

.admin-auth-card .flash {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  background: #fbeae8;
  color: #8f241c;
  border: 1px solid #f2c7c3;
}

.admin-auth-card .flash.success {
  background: #eaf3ec;
  color: #174b2f;
  border: 1px solid #c0e0cc;
}

@media (max-width: 560px) {
  .admin-auth-section {
    padding: 40px 16px 60px;
  }
  .admin-auth-card {
    border-radius: 22px;
    padding: 28px 20px;
  }
}

/* Restore the compact desktop header proportions from the original capture. */
@media (min-width: 1024px) {
:root { --header-h: 62px; }
.site-header,
.site-header.is-scrolled { height: var(--header-h); padding: 0; }
.site-header .header-inner { width: min(calc(100% - 64px), 1216px); gap: 28px; }
.site-header .brand { flex: 0 0 96px; }
.site-header .brand img { width: 100px; height: auto; }
.site-header .desktop-nav { flex: 0 1 368px; justify-content: space-between; gap: 0; }
.site-header .desktop-nav a { padding: 8px 0; font-size: 13px; }
.site-header .desktop-nav a::after { display: none; }
.site-header .header-actions { gap: 6px; margin-left: auto; }
.site-header .select-pill { height: 28px; align-items: center; }
.site-header .select-pill select { height: 28px; min-height: 28px; padding-top: 0; padding-bottom: 0; line-height: 28px; }
.site-header .select-language select { width: 150px; }
.site-header .select-country select { width: 98px; }
.site-header .header-cta { width: 80px; min-width: 80px; }
}

@media (max-width: 560px) {
  :root { --header-h: 78px; }
}

@media (max-width: 900px) {
  .contact-page { padding: 104px 0 68px; }
  .contact-page .contact-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .contact-intro,
  .contact-hero-complaint,
  .contact-info-grid,
  .contact-page .contact-form,
  .contact-page .contact-career { grid-column: 1; grid-row: auto; }
  .contact-page .contact-form { min-height: 0; }
  .contact-page .contact-form textarea { min-height: 132px; }
  .contact-page .contact-career { grid-column: 1; }
}

@media (max-width: 767px) {
  .contact-page { padding: 96px 0 56px; }

  .contact-intro { margin-bottom: 16px; }
  .contact-intro h1 { font-size: 40px; line-height: 1.05; }
  .contact-lead { font-size: 16px; line-height: 24px; }
  .contact-page .contact-form { padding: 26px 22px; }
  .contact-page .contact-form h2 { margin-bottom: 14px; }
}

@media (max-width: 560px) {
  .contact-page { padding-top: 92px; }
  .contact-info-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-info-card { min-height: 0; }
  .contact-career { flex-wrap: wrap; }
  .contact-page .contact-card .contact-career-link { margin-left: 46px; }
}