:root{
  --warm-white:#FAF6EF;
  --bone:#EFE7D8;
  --stone:#B9AD93;
  --olive:#3E4430;
  --moss:#211D17;
  --coffee:#4A3327;
  --champagne:#B7935E;
  --ink:#211D17;
  --line: rgba(33,29,23,0.14);
  --line-invert: rgba(250,246,239,0.18);
  /* ---------- type ----------
     Thai and Latin are separate families resolved per-glyph by the browser:
     Literata / Martian Mono carry Latin, and because neither ships Thai glyphs,
     Thai text falls through to Trirong (display) and Anuphan (body + labels)
     on its own. No .lang-th font-family override is needed anywhere. */
  --font-display:'Literata','Trirong',Georgia,serif;
  --font-body:'Literata','Anuphan',Georgia,serif;
  --font-label:'Martian Mono','Anuphan',ui-monospace,monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  /* semantic z-index scale */
  --z-scrim:1; --z-compass:180; --z-header:200; --z-drawer:300; --z-lightbox:400;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--warm-white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--olive); color:var(--warm-white);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.015em;
  line-height:1.05;
  text-wrap:balance;
}
p{text-wrap:pretty;}
.eyebrow{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--coffee);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--coffee);
  display:inline-block;
  flex:none;
}
/* Larger section label — for headline-weight kickers */
.eyebrow-lg{
  font-size:clamp(16px, 1.6vw, 22px);
  letter-spacing:0.05em;
  text-transform:none;
  gap:16px;
}
.eyebrow-lg::before{width:44px;}
.container{max-width:1400px; margin:0 auto; padding:0 48px;}
@media (max-width:768px){.container{padding:0 24px;}}

img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- Thai typography ----------
   No font-family is set here on purpose. Literata and Martian Mono carry no
   Thai glyphs, so Thai text falls through the token stacks to Trirong
   (headings) and Anuphan (body, labels) glyph by glyph. That keeps mixed runs
   like "AROON — อรุณ · 2026" correct in a single element. What Thai does need
   is its own metrics, and that is all this block does. */
.lang-th h1,.lang-th h2,.lang-th h3,.lang-th h4,.lang-th h5{
  letter-spacing:0; line-height:1.4; font-weight:400;
}
.lang-th h1{line-height:1.35;}   /* two-tier tone marks clip below ~1.3 */
.lang-th p, .lang-th li{line-height:1.85;}

/* Thai has no italic. Never let the browser fake an oblique; the emphasis that
   `em` carries in Latin headings is carried by colour instead. `body.lang-th`
   outranks the per-section `font-style:italic` rules further down the file. */
body.lang-th h1,body.lang-th h2,body.lang-th h3,body.lang-th h4,body.lang-th h5,
body.lang-th em,body.lang-th i{font-style:normal;}
body.lang-th h1 em,body.lang-th h2 em,body.lang-th h3 em{color:var(--champagne);}

/* Thai has no uppercase, and letter-spacing destroys word grouping because
   Thai writes without spaces between words. Both must be neutralised on every
   label that is tracked-uppercase in Latin. */
body.lang-th .eyebrow,body.lang-th .hero-eyebrow,body.lang-th .w-index,body.lang-th .m-sub,
body.lang-th .note,body.lang-th .j-tag,body.lang-th .btn,
body.lang-th .launch-badge,body.lang-th .launch-meta span,body.lang-th .a-num,
body.lang-th .loop-step .num,body.lang-th .t-year,body.lang-th .scroll-cue,
body.lang-th .interest-chip,body.lang-th .news-form button,body.lang-th .msg-chip,
body.lang-th .ph-eyebrow,body.lang-th .field label,body.lang-th .week-kicker,
body.lang-th .week-energy-caption,body.lang-th .week-day,body.lang-th figcaption,
body.lang-th .pill,body.lang-th .n-label,body.lang-th .ri-index{
  text-transform:none;
  letter-spacing:0;
  /* Latin sets these labels at 9.5-12px because uppercase mono only needs
     cap-height. Thai stacks four tiers (below-vowel, base, above-vowel, tone)
     into the same em, so the base letter would land near 6px. Thai collapses
     the six near-identical Latin micro-sizes into one legible step. */
  font-size:13px;
  line-height:1.6;
}

/* Trirong carries more stroke contrast than the Latin display face, so its
   thin strokes lose more weight than Literata's when reversed out on the dark
   sections. Step Thai up one notch there; Latin holds at its own weight. */
body.lang-th .section-dark h1,body.lang-th .section-dark h2,
body.lang-th .section-dark h3,body.lang-th .section-dark h4,
body.lang-th .page-hero h1{font-weight:500;}
body.lang-th .section-dark p,body.lang-th .section-dark li{line-height:1.9;}

/* The compass label rides inside a 60px disc, so it gets its own smaller
   floor rather than the 13px label step. */
body.lang-th #compass-label{font-size:12px;}

/* ---------- reveal on scroll (progressive-enhancement gated) ---------- */
.reveal, .reveal-scale{ will-change:opacity, transform; }
html.reveal-ready .reveal{
  opacity:0; transform:translateY(26px); filter:blur(6px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 1.05s var(--ease);
  transition-delay:calc(var(--i, 0) * 85ms);
}
html.reveal-ready .reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
html.reveal-ready .reveal-scale{
  opacity:0; transform:scale(1.05); filter:blur(6px);
  transition:opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.2s var(--ease);
}
html.reveal-ready .reveal-scale.in{opacity:1; transform:scale(1); filter:blur(0);}

/* ================= HEADER / NAV ================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  padding:24px 48px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:background .55s var(--ease), padding .55s var(--ease),
             transform .55s var(--ease), border-color .55s var(--ease),
             backdrop-filter .55s var(--ease);
}
/* gradient scrim guarantees legibility of white nav over the banner */
header::before{
  content:''; position:absolute; left:0; right:0; top:0; height:190px;
  background:linear-gradient(180deg, rgba(20,17,12,.58) 0%, rgba(20,17,12,.22) 55%, rgba(20,17,12,0) 100%);
  pointer-events:none; z-index:-1; opacity:1; transition:opacity .55s var(--ease);
}
header.scrolled{
  background:rgba(250,246,239,.82);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:var(--line);
  padding:14px 48px;
}
header.scrolled::before{opacity:0;}
header.header--hidden{transform:translateY(-104%);}
@media (max-width:768px){ header, header.scrolled{padding-left:24px; padding-right:24px;} }

.logo{
  font-family:var(--font-display); font-weight:400;
  font-size:21px; letter-spacing:0.3em;
  color:var(--warm-white); text-decoration:none;
  transition:color .55s var(--ease); padding-left:2px;
  display:inline-flex; align-items:center;
}
header.scrolled .logo{color:var(--ink);}
.logo-mark{
  height:20px; width:auto; display:block;
  filter:brightness(0) invert(1);
  transition:filter .55s var(--ease);
}
header.scrolled .logo-mark{filter:none;}

nav.primary{display:flex; gap:32px; list-style:none;}
nav.primary a{
  color:var(--warm-white); text-decoration:none;
  font-size:13px; letter-spacing:0.03em; position:relative; padding-bottom:4px;
  transition:color .55s var(--ease); opacity:.94;
}
header.scrolled nav.primary a{color:var(--ink);}
nav.primary a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .4s var(--ease);
}
nav.primary a:hover::after{width:100%;}

.nav-right{display:flex; align-items:center; gap:20px;}
.nav-icon{
  color:var(--warm-white); font-size:12.5px; letter-spacing:0.03em;
  text-decoration:none; opacity:0.82; transition:color .55s var(--ease), opacity .3s;
  background:none; border:none; cursor:pointer; font-family:inherit;
}
header.scrolled .nav-icon{color:var(--ink);}
.nav-icon:hover{opacity:1;}

.lang-nav{display:flex; align-items:center; gap:2px; font-family:var(--font-label); font-size:11px; letter-spacing:0.06em;}
.lang-nav button{
  background:none; border:none; cursor:pointer; padding:4px 5px;
  color:var(--warm-white); opacity:.55; transition:opacity .3s, color .55s var(--ease); font-family:inherit;
}
header.scrolled .lang-nav button{color:var(--ink);}
.lang-nav button.active{opacity:1; text-decoration:underline; text-underline-offset:3px;}
.lang-nav span{opacity:.4;}

/* nav-side contact cluster — hidden while the top contact strip is on screen,
   revealed once the strip retracts and the nav condenses (header.scrolled) */
.nav-contact{
  display:flex; align-items:center; gap:12px; margin-left:22px;
  max-width:0; overflow:hidden; opacity:0; visibility:hidden;
  transform:translateX(6px);
  transition:max-width .5s var(--ease), opacity .35s var(--ease),
             transform .5s var(--ease), visibility .5s var(--ease);
}
header.scrolled .nav-contact{
  max-width:220px; opacity:1; visibility:visible; transform:none;
}
.nav-contact__icon{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  color:var(--coffee); border:1px solid var(--line); border-radius:9px;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.nav-contact__icon svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav-contact__icon:hover{
  color:var(--warm-white); background:var(--coffee); border-color:var(--coffee);
}
.nav-contact__lang{
  display:flex; align-items:center; gap:2px;
  font-family:var(--font-label); font-size:11px; letter-spacing:.06em;
}
.nav-contact__lang button{
  padding:6px 5px; border:0; background:none; color:var(--coffee);
  font:inherit; cursor:pointer;
}
.nav-contact__lang button.active{
  color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px;
}
.nav-contact__lang span{color:var(--coffee);}
.nav-contact a:focus-visible,
.nav-contact button:focus-visible{outline:2px solid var(--champagne); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .nav-contact{transition:opacity .2s linear, visibility .2s linear;}
}

.nav-cta{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  padding:10px 20px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(250,246,239,.55); color:var(--warm-white);
  transition:all .45s var(--ease);
}
.nav-cta:hover{background:var(--warm-white); color:var(--moss); border-color:var(--warm-white);}
header.scrolled .nav-cta{border-color:var(--ink); color:var(--ink);}
header.scrolled .nav-cta:hover{background:var(--ink); color:var(--warm-white);}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; z-index:calc(var(--z-drawer) + 1);}
.menu-toggle span{display:block; width:26px; height:1.5px; background:var(--warm-white); margin:6px 0; transition:transform .45s var(--ease), opacity .3s, background .55s var(--ease);}
header.scrolled .menu-toggle span{background:var(--ink);}
body.drawer-open .menu-toggle span{background:var(--ink);}
body.drawer-open .menu-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
body.drawer-open .menu-toggle span:nth-child(2){opacity:0;}
body.drawer-open .menu-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media (max-width:1040px){
  nav.primary{display:none;}
  .nav-right .nav-icon:not(.icon-cart){display:none;}
  .nav-cta{display:none;}
  .lang-nav{display:none;}
  .nav-contact{display:none;}
  .menu-toggle{display:block;}
}

/* ---------- Mobile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:var(--z-drawer);
  background:var(--warm-white); color:var(--ink);
  padding:120px 40px 48px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-100%); transition:transform .6s var(--ease-expo);
  overflow-y:auto;
}
body.drawer-open .drawer{transform:translateY(0);}
.drawer a{
  font-family:var(--font-display); font-size:clamp(30px,7vw,44px); font-weight:300;
  color:var(--ink); text-decoration:none; padding:10px 0; letter-spacing:-0.01em;
  border-bottom:1px solid var(--line);
}
.drawer-foot{margin-top:auto; padding-top:36px; display:flex; justify-content:space-between; align-items:center; gap:20px;}
.drawer-lang{display:flex; gap:8px; font-family:var(--font-label); font-size:13px;}
.drawer-lang button{background:none; border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer; color:var(--ink); font-family:inherit;}
.drawer-lang button.active{background:var(--ink); color:var(--warm-white); border-color:var(--ink);}

/* ================= PHILOSOPHY COMPASS ================= */
#compass{
  position:fixed; bottom:32px; right:32px; z-index:var(--z-compass);
  width:86px; height:86px; display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease);
}
#compass svg{width:100%; height:100%; transform:rotate(-90deg);}
#compass .track{fill:none; stroke:rgba(33,29,23,0.14); stroke-width:1;}
#compass .arc{fill:none; stroke:var(--coffee); stroke-width:1.4; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease), stroke .6s ease;}
#compass.on-dark .track{stroke:rgba(250,246,239,0.20);}
#compass.on-dark .arc{stroke:var(--champagne);}
#compass-label{
  position:absolute; text-align:center;
  font-family:var(--font-label); font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--coffee); transition:color .6s ease;
}
.lang-th #compass-label{text-transform:none; letter-spacing:0; font-size:10px;}
#compass.on-dark #compass-label{color:var(--champagne);}
body.drawer-open #compass{opacity:0; pointer-events:none;}
@media (max-width:768px){#compass{width:60px; height:60px; bottom:16px; right:16px;} #compass-label{font-size:7.5px;}}

/* ================= HERO ================= */
.hero{
  position:relative; height:100vh; min-height:680px;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--moss);
  padding:112px 0 0;
}
.hero-media{position:absolute; inset:0; overflow:hidden;}
.hero-fallback, .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-fallback{
  background-image:url('https://images.unsplash.com/photo-1461023058943-07fcbe16d735?q=80&w=2000&auto=format&fit=crop');
  background-size:cover; background-position:center;
}
.hero-video{opacity:0; transition:opacity 1.6s var(--ease);}
.hero-video.ready{opacity:1;}
html.reveal-ready .hero-fallback,
html.reveal-ready .hero-video{ transform:scale(1.12); animation:heroKen 24s var(--ease-expo) forwards; }
@keyframes heroKen{ to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0; z-index:var(--z-scrim);
  background:
    linear-gradient(180deg, rgba(20,17,12,.30) 0%, rgba(20,17,12,.20) 42%, rgba(20,17,12,.74) 100%),
    radial-gradient(120% 80% at 50% 20%, rgba(20,17,12,0) 40%, rgba(20,17,12,.45) 100%);
}
.hero-content{
  position:relative; z-index:2; width:100%; padding:0 48px 60px; color:var(--warm-white);
}
@media (max-width:768px){ .hero-content{padding:0 24px 76px;} }
.hero-eyebrow{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  opacity:0.85; margin-bottom:22px;
}
.lang-th .hero-eyebrow{text-transform:none; letter-spacing:0.03em;}
.hero h1{
  font-size:clamp(42px, 6.6vw, 92px); font-weight:300; max-width:15ch; color:var(--warm-white);
}
.hero h1 em{font-style:italic; font-weight:400; color:var(--champagne);}
.hero p{ max-width:40ch; margin-top:26px; font-size:16.5px; color:rgba(250,246,239,0.85); }
.hero-ctas{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap;}

/* hero load choreography (only when JS enables reveal-ready) */
html.reveal-ready .hero-eyebrow,
html.reveal-ready .hero h1,
html.reveal-ready .hero p,
html.reveal-ready .hero-ctas{opacity:0; animation:heroRise 1.1s var(--ease-expo) forwards;}
html.reveal-ready .hero-eyebrow{animation-delay:.35s;}
html.reveal-ready .hero h1{animation-delay:.5s;}
html.reveal-ready .hero p{animation-delay:.72s;}
html.reveal-ready .hero-ctas{animation-delay:.9s;}
@keyframes heroRise{ from{opacity:0; transform:translateY(26px); filter:blur(8px);} to{opacity:1; transform:translateY(0); filter:blur(0);} }

.btn{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 30px; border-radius:999px; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  transition:all .45s var(--ease); border:1px solid transparent; white-space:nowrap; cursor:pointer;
}
.btn .arw{display:inline-block; transition:transform .45s var(--ease);}
.btn:hover .arw{transform:translateX(5px);}
.btn-solid{background:var(--warm-white); color:var(--moss);}
.btn-solid:hover{background:var(--champagne); color:var(--moss); transform:translateY(-2px);}
.btn-ghost{border-color:rgba(250,246,239,0.5); color:var(--warm-white);}
.btn-ghost:hover{border-color:var(--warm-white); background:rgba(250,246,239,0.08); transform:translateY(-2px);}
.btn-dark{background:var(--moss); color:var(--warm-white);}
.btn-dark:hover{background:var(--olive); transform:translateY(-2px);}
.btn-outline-dark{border-color:var(--line); color:var(--ink);}
.btn-outline-dark:hover{background:var(--ink); color:var(--warm-white); border-color:var(--ink);}

.scroll-cue{
  position:absolute; bottom:36px; right:48px; z-index:2; color:rgba(250,246,239,0.72);
  font-family:var(--font-label); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.lang-th .scroll-cue{text-transform:none; letter-spacing:0.03em;}
.scroll-cue .line{width:1px; height:36px; background:rgba(250,246,239,0.4); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--warm-white); animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (max-width:768px){ .scroll-cue{right:24px;} }

/* ================= SECTIONS ================= */
section{padding:150px 0;}
@media (max-width:900px){ section{padding:100px 0;} }
.section-dark{background:var(--moss); color:var(--warm-white);}
.section-dark .eyebrow{color:var(--champagne);}
.section-dark .eyebrow::before{background:var(--champagne);}

/* ================= WHAT IS AMANE ================= */
.philosophy-head{max-width:none;}
.philosophy-head h2{font-size:clamp(30px, 4vw, 54px); font-weight:300; margin-top:24px; max-width:26ch;}
.philosophy-head p{margin-top:28px; max-width:72ch; color:rgba(33,29,23,0.76); font-size:17px;}
.philosophy-head .philosophy-lead{
  max-width:none; text-wrap:pretty;
  font-size:clamp(18px, 1.55vw, 22px); line-height:1.6;
  color:rgba(33,29,23,0.82);
}

.loop{
  display:grid; grid-template-columns:repeat(5, 1fr);
  margin-top:96px; border-top:1px solid var(--line);
}
.loop-step{
  padding:46px 40px 46px 0; border-right:1px solid var(--line); position:relative;
}
.loop-step:first-child{padding-left:0;}
.loop-step:not(:first-child){padding-left:40px;}
.loop-step:last-child{border-right:none; padding-right:0;}
.loop-step::before{
  content:''; position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--champagne);
  transition:width .6s var(--ease);
}
.loop-step:not(:first-child)::before{left:40px;}
.loop-step:hover::before{width:38px;}
.loop-step .num{font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; color:var(--stone);}
.loop-step h4{font-size:20px; font-weight:400; margin:18px 0 14px; font-style:italic;}
.loop-step p{font-size:14px; line-height:1.7; color:rgba(33,29,23,0.66); max-width:28ch;}
@media (max-width:1100px){
  .loop{grid-template-columns:repeat(2,1fr);}
  .loop-step, .loop-step:not(:first-child){padding:34px 32px 34px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
  .loop-step:nth-child(2n){border-right:none;}
  .loop-step::before, .loop-step:not(:first-child)::before{left:0;}
}
@media (max-width:560px){
  .loop{grid-template-columns:1fr;}
  .loop-step, .loop-step:not(:first-child){padding:30px 0; border-right:none;}
  .loop-step p{max-width:42ch;}
}

/* ================= FOUR WORLDS ================= */
.worlds-head{container-type:inline-size;}
.worlds-head h2{font-size:clamp(30px,4vw,52px); font-weight:300; max-width:16ch; color:var(--ink);}
/* the headline holds one line at every width — size follows the container, never the wrap */
.worlds-head h2.worlds-line{
  max-width:none; white-space:nowrap;
  font-size:min(52px, 4.05cqi);
  line-height:1.25; padding-bottom:0.12em; margin-bottom:10px;
}
.lang-th .worlds-head h2.worlds-line{font-size:min(52px, 4.95cqi);}

/* Four rooms behind four hand-cut folder tabs */
.worlds-stage{position:relative; margin-top:54px;}

.worlds-tabs{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:9px;
  padding-left:26px; margin-bottom:-1px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.worlds-tabs::-webkit-scrollbar{display:none;}

.world-tab{
  position:relative; flex:0 0 auto;
  background:#EFE7D6; color:inherit; cursor:pointer;
  border:1px solid var(--line); border-bottom:0;
  border-radius:15px 12px 0 0 / 19px 15px 0 0;
  padding:11px 20px 14px;
  display:inline-flex; align-items:center; gap:11px;
  transform:rotate(var(--tilt, 0deg)); transform-origin:bottom center;
  transition:background .45s var(--ease), border-color .45s var(--ease), padding .45s var(--ease);
}
/* each tab cut slightly differently, the way a hand would cut them */
.world-tab:nth-child(1){--tilt:-0.5deg; border-radius:16px 11px 0 0 / 20px 14px 0 0;}
.world-tab:nth-child(2){--tilt:0.4deg;  border-radius:11px 16px 0 0 / 15px 20px 0 0;}
.world-tab:nth-child(3){--tilt:-0.35deg; border-radius:14px 14px 0 0 / 18px 17px 0 0;}
.world-tab:nth-child(4){--tilt:0.5deg;  border-radius:12px 15px 0 0 / 16px 19px 0 0;}

.world-tab:hover{background:#E7DDC6;}
.world-tab:focus-visible{outline:1px solid var(--moss); outline-offset:2px;}
/* the open drawer rises, widens, and loses the line between itself and the room */
.world-tab[aria-selected="true"]{
  z-index:3;
  background:var(--warm-white); border-color:var(--line);
  padding:17px 26px 15px;
}
.world-tab[aria-selected="true"]::after{
  content:''; position:absolute; left:1px; right:1px; bottom:-2px; height:3px;
  background:var(--warm-white);
}

.wt-label{
  font-family:var(--font-label); font-style:normal; font-weight:500;
  font-size:14px; letter-spacing:0.04em; line-height:1;
  color:rgba(33,29,23,0.5); white-space:nowrap;
  transition:color .45s var(--ease), font-size .45s var(--ease);
}
.lang-th .wt-label{font-size:14px;}
.world-tab:hover .wt-label{color:rgba(33,29,23,0.8);}
.world-tab[aria-selected="true"] .wt-label{color:var(--ink); font-size:16px;}
.lang-th .world-tab[aria-selected="true"] .wt-label{font-size:16px;}

/* ---- the room you stepped into ---- */
.worlds-panels{position:relative; z-index:1;}
.world-panel{
  border:1px solid var(--line); border-radius:4px;
  background:var(--warm-white);
  box-shadow:0 30px 60px -34px rgba(33,29,23,0.22);
  padding:56px 60px;
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:58px; align-items:center;
}
.world-panel[hidden]{display:none;}
.world-panel:focus-visible{outline:1px solid var(--moss); outline-offset:-4px;}
/* the column fills the row so the watermark can sit on the card's baseline,
   the copy stays optically centred inside it */
.wp-copy{position:relative; z-index:0; align-self:stretch; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.wp-visual{position:relative; overflow:hidden; border-radius:5px;}
.wp-visual img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(0.15) contrast(1.03);
  transform:scale(1.01);
  transition:transform 1.6s var(--ease), filter .9s var(--ease);
}
.world-panel:hover .wp-visual img{transform:scale(1.05); filter:grayscale(0) contrast(1.05);}

/* the world panel's visual is the world's own logo, not a photo — the wordmarks
   are black-on-transparent, so they sit on a faint tinted plate on the light panel */
.wp-visual.is-mark{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:rgba(33,29,23,0.045);
}
.wp-visual.is-mark img:not(.wp-wm){
  width:auto; height:auto; max-width:56%; max-height:56%; aspect-ratio:auto; object-fit:contain;
  filter:none; opacity:.9; transform:none;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
.world-panel:hover .wp-visual.is-mark img:not(.wp-wm){transform:scale(1.06); opacity:1;}

/* the world's mascot, printed into the right edge of the copy column — a
   watermark the words sit on top of, never a picture beside them */
.wp-copy .wp-wm{
  position:absolute; z-index:-1;
  right:0; bottom:0;
  width:auto; height:82%; max-width:36%; aspect-ratio:auto; object-fit:contain;
  opacity:.11; filter:grayscale(0.3);
  pointer-events:none; -webkit-user-select:none; user-select:none;
}
@media (max-width:1024px){ .wp-copy .wp-wm{ height:70%; } }
@media (max-width:768px){ .wp-copy .wp-wm{ display:none; } }

.worlds-stage.is-switching .wp-copy > *:not(.wp-wm){animation:wpEnter .6s var(--ease) both;}
.worlds-stage.is-switching .wp-copy > .wp-wm{animation:none;}
.worlds-stage.is-switching .wp-copy > *:nth-child(2){animation-delay:.05s;}
.worlds-stage.is-switching .wp-copy > *:nth-child(3){animation-delay:.1s;}
.worlds-stage.is-switching .wp-copy > *:nth-child(4){animation-delay:.15s;}
.worlds-stage.is-switching .wp-copy > *:nth-child(5){animation-delay:.2s;}
.worlds-stage.is-switching .wp-visual{animation:wpVisualEnter .8s var(--ease) both;}
@keyframes wpEnter{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:none;}
}
@keyframes wpVisualEnter{
  from{opacity:0; clip-path:inset(0 0 0 14%);}
  to{opacity:1; clip-path:inset(0 0 0 0);}
}

.w-index{font-family:var(--font-label); font-size:11px; letter-spacing:0.14em; color:var(--coffee); text-transform:uppercase;}
.lang-th .w-index{text-transform:none; letter-spacing:0;}
.wp-brand{
  font-family:var(--font-label); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--coffee); margin-top:16px;
}
.lang-th .wp-brand{text-transform:none; letter-spacing:0;}
.world-panel h3{
  font-size:clamp(22px,2.15vw,30px); font-weight:400; line-height:1.26; color:var(--ink);
  margin:14px 0 18px; max-width:34ch; text-wrap:balance;
}
.world-panel p{color:rgba(33,29,23,0.72); max-width:46ch; font-size:15.5px; line-height:1.75;}
.wp-cta{margin-top:34px;}

@media (max-width:1024px){
  .world-panel{grid-template-columns:1fr; gap:38px; padding:44px 40px;}
  .world-panel h3{max-width:38ch;}
  .wp-visual img{aspect-ratio:16/9;}
}
@media (max-width:768px){
  .worlds-stage{margin-top:40px;}
  .worlds-tabs{padding-left:14px; gap:6px;}
  .world-tab{padding:9px 13px 12px; gap:8px;}
  .world-tab[aria-selected="true"]{padding:13px 16px 13px;}
  .wt-mark{height:24px;}
  .world-tab[aria-selected="true"] .wt-mark{height:32px;}
  .wt-label{font-size:14.5px;}
  .world-tab[aria-selected="true"] .wt-label{font-size:18px;}
  .world-panel{padding:34px 26px 38px;}
}
@media (prefers-reduced-motion:reduce){
  .wp-visual img, .world-panel:hover .wp-visual img{transition:none; transform:none;}
  .worlds-stage.is-switching .wp-copy > *,
  .worlds-stage.is-switching .wp-visual{animation:none;}
}

/* ================= FEATURED LAUNCH ================= */
.launch{display:grid; grid-template-columns:1.05fr 0.95fr; gap:72px; align-items:center;}
.launch-img{position:relative; height:660px; overflow:hidden;}
.launch-img img{will-change:transform;}
.launch-badge{
  position:absolute; top:26px; left:26px; z-index:2;
  background:rgba(250,246,239,0.92); backdrop-filter:blur(6px);
  padding:9px 16px; border-radius:999px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--moss);
}
.launch-notes{display:flex; gap:10px; margin:36px 0 40px; flex-wrap:wrap;}
.note{font-family:var(--font-label); font-size:11.5px; letter-spacing:0.05em; color:var(--coffee); border:1px solid var(--line); border-radius:999px; padding:8px 16px;}
.launch-meta{display:flex; gap:48px; margin-top:36px; border-top:1px solid var(--line); padding-top:28px; flex-wrap:wrap;}
.launch-meta div span{display:block; font-family:var(--font-label); font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--stone); margin-bottom:8px;}
.launch-meta div strong{font-family:var(--font-display); font-weight:400; font-size:22px;}
@media (max-width:900px){ .launch{grid-template-columns:1fr; gap:44px;} .launch-img{height:440px;} }

/* ================= ARTIT — SEVEN MOMENTS STAGE =================
   One stage carries the whole system: the colour, the moment it stands for,
   and the tube it is printed on. --m-accent is registered so the swatch,
   bloom and labels cross-fade between moments instead of snapping. */
@property --m-accent{ syntax:'<color>'; inherits:true; initial-value:#F3D98B; }

.moment-stage{
  --m-accent:#F3D98B;
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(92px,9vw,150px) 0;
  background:var(--moss); color:var(--warm-white);
  transition:--m-accent .72s var(--ease);
}
.moment-stage[data-moment="glow"]{--m-accent:#EF8B7A;}
.moment-stage[data-moment="rise"]{--m-accent:#F3D98B;}
.moment-stage[data-moment="brave"]{--m-accent:#E9B3B8;}
.moment-stage[data-moment="focus"]{--m-accent:#AFC6A8;}
.moment-stage[data-moment="joy"]{--m-accent:#E8B071;}
.moment-stage[data-moment="reset"]{--m-accent:#AFCBE0;}
.moment-stage[data-moment="slow"]{--m-accent:#B9ADD1;}

.moment-stage .eyebrow{color:var(--m-accent);}
.moment-stage .eyebrow::before{background:var(--m-accent);}

/* the light the swatch throws onto the dark room */
.ms-bloom{
  position:absolute; z-index:-1; pointer-events:none;
  left:56%; top:46%; width:min(1180px,132vw); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    color-mix(in srgb, var(--m-accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--m-accent) 10%, transparent) 38%,
    transparent 68%);
}

.ms-grid{
  display:grid;
  grid-template-columns:minmax(272px,.86fr) minmax(400px,1.3fr) minmax(146px,.38fr);
  grid-template-areas:"intro visual tabs" "details visual tabs";
  gap:clamp(28px,3.4vw,56px) clamp(30px,3.8vw,64px);
  align-items:start;
}
.ms-intro{grid-area:intro; max-width:420px;}
.ms-visual{grid-area:visual; position:relative; align-self:center; width:min(100%,480px); margin-inline:auto;}
.ms-tabs{grid-area:tabs; align-self:center;}
.ms-details{grid-area:details; max-width:430px;}

.ms-intro h2{
  margin-top:24px;
  font-size:clamp(2.3rem,3.5vw,3.5rem); font-weight:300; line-height:1.08; letter-spacing:-0.028em;
}
.ms-intro h2 em{font-style:italic; color:var(--m-accent);}
.lang-th .ms-intro h2{font-size:clamp(1.95rem,2.9vw,2.9rem); line-height:1.28;}
.lang-th .ms-intro h2 em{font-style:normal;}
.ms-lead{
  margin-top:26px; max-width:40ch;
  font-size:16.5px; line-height:1.78; color:rgba(250,246,239,.74);
}

/* ---------- the swatch: black line art printed on pastel stock ---------- */
.ms-swatch{
  position:relative; width:100%;
  aspect-ratio:3/4; border-radius:clamp(18px,2.2vw,30px);
  background:var(--m-accent);
  box-shadow:0 42px 96px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.16) inset;
  overflow:hidden;
  transition:transform .7s var(--ease-expo), box-shadow .7s var(--ease-expo);
}
/* hovering the whole card lifts the swatch and lets the illustration
   breathe forward — a soft push-in, not a jump-cut zoom */
@media (hover:hover){
  .ms-visual:hover .ms-swatch{
    transform:translateY(-8px) scale(1.014);
    box-shadow:0 56px 120px rgba(0,0,0,.56), 0 2px 0 rgba(255,255,255,.18) inset;
  }
}
/* uncoated-paper tooth */
.ms-swatch::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.5) .6px, transparent .7px);
  background-size:3px 3px; mix-blend-mode:soft-light;
}
.ms-swatch::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(104deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 62%);
  transform:translateX(-130%);
}
.ms-visual.is-switching .ms-swatch::after{animation:msSweep .8s var(--ease-expo);}
@keyframes msSweep{ from{transform:translateX(-130%);} to{transform:translateX(130%);} }

.ms-figure{
  position:absolute; z-index:2; inset:5% 6% 0; margin:0;
  opacity:0; pointer-events:none;
  transform:translateY(4%) scale(.97);
  clip-path:inset(0 0 100% 0);
  transition:opacity .5s var(--ease), transform .7s var(--ease-expo), clip-path .7s var(--ease-expo);
}
.ms-figure img{
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
  /* trimmed a touch so the cup sits a little smaller inside the swatch */
  transform:scale(.92); transform-origin:center bottom;
  filter:drop-shadow(0 10px 14px rgba(33,29,23,.14));
  transition:transform 1s var(--ease-expo);
}
@media (hover:hover){
  .ms-visual:hover .ms-figure.is-active img{transform:scale(.965) translateY(-1.4%);}
}
.ms-figure.is-active{opacity:1; transform:none; clip-path:inset(0); pointer-events:auto;}
.ms-figure.is-leaving{animation:msFigureOut .34s cubic-bezier(.7,0,1,.5) forwards;}
@keyframes msFigureOut{
  to{opacity:0; transform:translateY(-5%) scale(.98); clip-path:inset(100% 0 0 0);}
}

/* ---------- the product, standing in front of its own colour ---------- */
.ms-tubes{
  position:absolute; z-index:4; right:-1%; bottom:-7%;
  width:min(33%,196px); aspect-ratio:333/535;
}
.ms-tubes::after{
  content:''; position:absolute; left:50%; bottom:-4%; transform:translateX(-50%);
  width:118%; height:16%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
}
.ms-tube{
  position:absolute; inset:0; margin:0; opacity:0; pointer-events:none;
  transform:translateY(16px) scale(.95);
  transition:opacity .46s var(--ease), transform .72s var(--ease-expo);
}
.ms-tube.is-active{opacity:1; transform:none; pointer-events:auto;}
.ms-tube img{
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.5));
  transition:transform 1s var(--ease-expo);
}
@media (hover:hover){
  .ms-visual:hover .ms-tube.is-active img{transform:translateY(-3%) scale(1.035);}
}

/* ---------- selector: the palette sheet, stood on its end ---------- */
.ms-tabs{display:flex; flex-direction:column;}
.ms-tab{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 2px; background:none; border:0;
  border-bottom:1px solid var(--line-invert);
  color:inherit; cursor:pointer; text-align:left;
}
.ms-tab:first-child{border-top:1px solid var(--line-invert);}
.ms-chip{
  flex:none; width:22px; height:14px; border-radius:4px;
  background:var(--tab-color); opacity:.6;
  transition:width .6s var(--ease-expo), opacity .45s var(--ease);
}
.ms-tab:hover .ms-chip{width:36px; opacity:.9;}
.ms-tab[aria-selected="true"] .ms-chip{width:56px; opacity:1;}
.ms-tab-name{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:.16em;
  color:rgba(250,246,239,.62); transition:color .4s var(--ease);
}
.ms-tab:hover .ms-tab-name{color:rgba(250,246,239,.86);}
.ms-tab[aria-selected="true"] .ms-tab-name{color:var(--warm-white);}
.ms-tab:focus-visible{outline:2px solid var(--m-accent); outline-offset:4px;}

/* ---------- the words ---------- */
.ms-details{position:relative; min-height:352px;}
.ms-glyph{width:34px; height:34px; color:var(--m-accent); display:block;}
.ms-panel h3{
  margin-top:18px;
  font-size:clamp(2.6rem,4.2vw,3.9rem); line-height:.98; letter-spacing:-0.032em;
}
.ms-tagline{
  margin-top:14px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--m-accent) 82%, #FAF6EF);
}
.lang-th .ms-tagline{font-size:14.5px; letter-spacing:0; text-transform:none;}
.ms-feel{margin-top:22px; max-width:42ch; font-size:16.5px; line-height:1.76; color:rgba(250,246,239,.78);}
.ms-taste{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line-invert);
  display:flex; gap:18px; max-width:44ch;
}
.ms-taste b{
  flex:none; width:92px; padding-top:3px;
  font-family:var(--font-label); font-weight:400; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--champagne);
}
.lang-th .ms-taste b{text-transform:none; letter-spacing:.02em; font-size:12.5px;}
.ms-taste p{font-size:14.5px; line-height:1.72; color:rgba(250,246,239,.66);}
.ms-code{
  margin-top:22px; font-family:var(--font-label); font-size:9.5px; letter-spacing:.16em;
  color:rgba(250,246,239,.58);
}

@media (max-width:1100px){
  .ms-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"intro" "visual" "tabs" "details";
    gap:34px;
  }
  .ms-intro, .ms-details{max-width:100%;}
  .ms-visual{max-width:420px;}
  .ms-tubes{width:min(30%,168px); right:6%;}
  .ms-details{min-height:0;}
  .ms-tabs{
    flex-direction:row; gap:8px; overflow-x:auto; scrollbar-width:none;
    padding-bottom:4px; margin-right:-24px; padding-right:24px;
  }
  .ms-tabs::-webkit-scrollbar{display:none;}
  .ms-tab{
    flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:10px;
    width:auto; min-width:92px; padding:12px 14px 13px;
    border:1px solid var(--line-invert); border-radius:12px;
  }
  .ms-tab:first-child{border-top:1px solid var(--line-invert);}
  .ms-tab[aria-selected="true"]{border-color:color-mix(in srgb, var(--tab-color) 60%, transparent); background:rgba(250,246,239,.05);}
  .ms-chip, .ms-tab:hover .ms-chip, .ms-tab[aria-selected="true"] .ms-chip{width:100%; height:12px;}
}
@media (max-width:560px){
  .ms-visual{max-width:330px; margin-left:0;}
  .ms-tubes{right:0; bottom:-5%; width:132px;}
  .ms-taste{flex-direction:column; gap:8px;}
  .ms-taste b{width:auto;}
}
@media (prefers-reduced-motion:reduce){
  .ms-figure, .ms-tube{transition:opacity .2s linear; transform:none !important; clip-path:none !important;}
  .ms-figure.is-leaving{animation:none; opacity:0;}
  .ms-visual.is-switching .ms-swatch::after{animation:none;}
  .moment-stage{transition:none;}
  .ms-swatch, .ms-figure img, .ms-tube img{transition:none;}
  .ms-visual:hover .ms-swatch,
  .ms-visual:hover .ms-figure.is-active img,
  .ms-visual:hover .ms-tube.is-active img{transform:none !important; box-shadow:0 42px 96px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.16) inset;}
}

/* ================= ARTIT — SEVEN MOMENTS COLLECTION ================= */
.collection{padding:clamp(92px,9vw,148px) 0; background:var(--bone);}
.col-shot{
  position:relative; margin-top:clamp(38px,4.6vw,64px);
  border-radius:clamp(14px,1.6vw,22px); overflow:hidden;
  box-shadow:0 30px 70px rgba(33,29,23,.14);
}
.col-shot img{width:100%; height:auto; aspect-ratio:16/8.2; object-fit:cover; object-position:center 58%;}
.col-shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:60px 26px 20px;
  font-family:var(--font-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--warm-white);
  background:linear-gradient(180deg, rgba(33,29,23,0) 0%, rgba(33,29,23,.62) 100%);
}
.lang-th .col-shot figcaption{text-transform:none; letter-spacing:.02em; font-size:12.5px;}

.col-grid{
  list-style:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px); margin-top:clamp(40px,4.8vw,66px);
}
.col-item{position:relative;}
.ci-plate{
  position:relative; border-radius:14px; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(168deg, rgba(var(--c-rgb),.34) 0%, rgba(var(--c-rgb),.13) 100%);
  transition:background .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease);
}
.ci-plate img{
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
  padding:14% 16% 0;
  filter:drop-shadow(0 14px 16px rgba(33,29,23,.2));
  transition:transform .8s var(--ease-expo);
}
.col-item:hover .ci-plate{
  background:linear-gradient(168deg, rgba(var(--c-rgb),.56) 0%, rgba(var(--c-rgb),.2) 100%);
  box-shadow:0 24px 46px rgba(33,29,23,.18);
  transform:translateY(-4px);
}
.col-item:hover .ci-plate img{transform:translateY(-9px) scale(1.045);}
.col-item h3{margin-top:16px; font-size:clamp(19px,1.5vw,23px);}
.ci-tag{
  margin-top:7px; font-family:var(--font-label); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coffee);
}
.lang-th .ci-tag{text-transform:none; letter-spacing:.02em; font-size:12.5px;}
.ci-code{
  margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
  font-family:var(--font-label); font-size:9px; letter-spacing:.1em; color:rgba(33,29,23,.56);
}

.col-set{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,3.6vw,60px);
  align-items:center; margin-top:clamp(52px,6vw,88px);
  padding-top:clamp(40px,4.6vw,64px); border-top:1px solid var(--line);
}
/* when the band stands alone in the section, drop the divider it hangs from */
.col-set:first-child{margin-top:0; padding-top:0; border-top:0;}
.cs-shot{border-radius:clamp(12px,1.4vw,18px); overflow:hidden; box-shadow:0 26px 56px rgba(33,29,23,.16);}
.cs-shot img{width:100%; height:auto; aspect-ratio:16/9.4; object-fit:cover;}

/* product identity: brand mark, then what it is */
.cs-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.cs-mark{
  font-family:var(--font-label); font-size:11px; letter-spacing:.22em;
  color:var(--ink); padding:5px 10px 4px; border:1px solid var(--ink); border-radius:3px;
}
.cs-kind{
  font-family:var(--font-label); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coffee);
}
.lang-th .cs-kind{text-transform:none; letter-spacing:.02em; font-size:12.5px;}
.cs-text h3{font-size:clamp(26px,2.8vw,38px); font-weight:300; letter-spacing:-0.02em;}
.cs-lead{margin-top:20px; max-width:52ch; font-size:16px; line-height:1.76; color:rgba(33,29,23,.74);}

/* what you actually get */
.cs-specs{margin-top:30px; border-top:1px solid var(--line); max-width:56ch;}
.cs-specs > div{
  display:grid; grid-template-columns:112px minmax(0,1fr); gap:20px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.cs-specs dt{
  font-family:var(--font-label); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coffee); padding-top:3px;
}
.lang-th .cs-specs dt{text-transform:none; letter-spacing:.02em; font-size:12.5px;}
.cs-specs dd{font-size:14.5px; line-height:1.7; color:rgba(33,29,23,.78);}

.cs-foot{display:flex; align-items:center; flex-wrap:wrap; gap:16px 26px; margin-top:30px;}
.cs-price{font-family:var(--font-display); font-size:clamp(24px,2.2vw,30px); letter-spacing:-0.01em;}
.cs-ctas{display:flex; flex-wrap:wrap; gap:12px;}

@media (max-width:1100px){
  .col-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .col-set{grid-template-columns:1fr; gap:32px;}
  .cs-specs, .cs-lead{max-width:100%;}
}
@media (max-width:520px){
  .cs-specs > div{grid-template-columns:minmax(0,1fr); gap:6px;}
  .cs-foot{gap:14px;}
  .cs-ctas .btn{flex:1 1 100%; justify-content:center;}
}
@media (max-width:680px){
  .col-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
  .col-item h3{font-size:17px;}
  .ci-code{display:none;}
  .col-shot img{aspect-ratio:4/3;}
}

/* ================= AROON ================= */
.aroon{background:var(--warm-white);}
.aroon-grid{display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start;}
.aroon h2{font-size:clamp(28px,3.6vw,48px); font-weight:300; margin-top:22px; max-width:13ch;}
.aroon p.lead{margin-top:26px; max-width:48ch; color:rgba(33,29,23,0.72); font-size:16.5px;}
.aroon-steps{list-style:none; border-top:1px solid var(--line);}
.aroon-steps li{display:flex; gap:26px; align-items:baseline; padding:28px 0; border-bottom:1px solid var(--line);}
.aroon-steps .a-num{font-family:var(--font-label); font-size:12px; color:var(--stone);}
.aroon-steps h4{font-size:22px; font-weight:400; font-style:italic;}
.aroon-steps p{font-size:14px; color:rgba(33,29,23,0.62); margin-top:8px; max-width:46ch;}
@media (max-width:900px){ .aroon-grid{grid-template-columns:1fr; gap:44px;} }

/* ================= ARE YOU OK ================= */
.care{background:var(--coffee); color:var(--warm-white); position:relative; overflow:hidden;}
.care::before{
  content:''; position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1509785307050-d4066910ec1e?q=80&w=1800&auto=format&fit=crop');
  background-size:cover; background-position:center; opacity:0.15; mix-blend-mode:luminosity;
}
.care-inner{position:relative; z-index:2; text-align:center; max-width:780px; margin:0 auto;}
.care .eyebrow{justify-content:center; color:var(--champagne);}
.care .eyebrow::before{background:var(--champagne);}
.care h2{font-size:clamp(30px,4.4vw,56px); font-weight:300; margin:24px 0 20px; color:var(--warm-white);}
.care h2 em{color:var(--champagne); font-style:italic;}
.care p{color:rgba(250,246,239,0.8); font-size:16.5px; max-width:54ch; margin:0 auto 20px;}
.care-loop-line{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--champagne); margin:0 auto 34px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.lang-th .care-loop-line{text-transform:none; letter-spacing:0;}
.msg-chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:640px; margin:0 auto 40px;}
.msg-chip{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.04em;
  border:1px solid rgba(250,246,239,.28); border-radius:999px; padding:9px 16px; color:rgba(250,246,239,.86);
  transition:all .35s var(--ease); cursor:default;
}
.msg-chip:hover{background:rgba(250,246,239,.08); border-color:rgba(250,246,239,.5);}
.care-ctas{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}

/* ================= ANNUAL ARCHIVE ================= */
.archive-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:62px;}
.archive-head h2{font-size:clamp(30px,4vw,52px); font-weight:300; margin-top:20px;}
.archive-head .principle{font-family:var(--font-label); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--stone); margin-top:16px;}
.lang-th .archive-head .principle{text-transform:none; letter-spacing:0;}
.timeline{display:flex; gap:0; overflow-x:auto; scrollbar-width:none; padding-bottom:10px; cursor:grab;}
.timeline::-webkit-scrollbar{display:none;}
.timeline.grabbing{cursor:grabbing;}
.t-item{flex:0 0 300px; border-right:1px solid var(--line); padding-right:34px; margin-right:34px;}
.t-item .t-year{font-family:var(--font-label); font-size:12px; color:var(--stone); letter-spacing:0.1em;}
.lang-th .t-item .t-year{letter-spacing:0;}
.t-item .t-img{height:340px; margin:20px 0; overflow:hidden;}
.t-item .t-img img{transition:transform 1.4s var(--ease);}
.t-item:hover .t-img img{transform:scale(1.05);}
.t-item h4{font-size:24px; font-weight:400; font-style:italic;}
.t-item p{font-size:13.5px; line-height:1.7; color:rgba(33,29,23,0.62); margin-top:10px;}
.t-item.current{border-right:1px solid var(--coffee);}
.t-item.current .t-year{color:var(--coffee);}

/* ---------- Milestones (vertical alternating chapter layout) ---------- */
.milestones{position:relative; margin-top:12px;}
.milestones::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--line-invert); transform:translateX(-50%);
}
.milestone{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,80px); align-items:center; padding:44px 0;
}
.milestone::before{
  content:''; position:absolute; left:50%; top:50%; width:11px; height:11px;
  border-radius:50%; background:var(--champagne); transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px var(--moss); z-index:2;
}
.mst-media{order:1; height:360px; overflow:hidden;}
.mst-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease);}
.mst-media--annual{
  height:auto; aspect-ratio:3/2; position:relative; background:#16130f;
}
.mst-media--annual::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(250,246,239,.12);
}
.mst-media--artit{
  display:flex; align-items:center; justify-content:center; background:var(--mst-panel); isolation:isolate;
}
.mst-media--artit img{
  min-width:0; min-height:0; object-fit:contain; padding:clamp(16px,2.4vw,30px);
  filter:drop-shadow(0 7px 5px rgba(20,17,12,.16));
}
.mst-tone-yellow{--mst-panel:#d8ad35;}
.mst-tone-pink{--mst-panel:#d98e9b;}
.mst-tone-green{--mst-panel:#74885f;}
.mst-tone-orange{--mst-panel:#cc7132;}
.mst-tone-blue{--mst-panel:#547a99;}
.milestone:hover .mst-media img{transform:scale(1.05);}
.mst-content{order:2; max-width:42ch;}
.milestone:nth-child(even) .mst-media{order:2;}
.milestone:nth-child(even) .mst-content{order:1; justify-self:end; text-align:right;}
.mst-year{
  font-family:var(--font-display); font-weight:300; font-size:clamp(38px,4.6vw,60px);
  color:var(--warm-white); display:flex; align-items:baseline; gap:16px;
}
.milestone:nth-child(even) .mst-year{flex-direction:row-reverse;}
.mst-year .mst-rule{flex:1; height:1px; background:var(--line-invert); max-width:100px;}
.mst-label{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--champagne); margin-top:18px; padding-bottom:6px; border-bottom:1px solid var(--line-invert);
  display:inline-block;
}
.lang-th .mst-label{text-transform:none; letter-spacing:0;}
.mst-label .mst-status{color:rgba(250,246,239,0.55); text-transform:none; letter-spacing:0.02em;}
.mst-desc{margin-top:16px; font-size:15px; line-height:1.75; color:rgba(250,246,239,0.68);}
.milestone.current .mst-year, .milestone.current .mst-label{color:var(--champagne);}
@media (max-width:860px){
  .milestones::before{left:20px;}
  .milestone{grid-template-columns:1fr; gap:22px; padding:32px 0 32px 48px;}
  .milestone::before{left:20px;}
  .milestone:nth-child(even) .mst-media,
  .milestone:nth-child(even) .mst-content{order:initial; justify-self:auto; text-align:left;}
  .milestone:nth-child(even) .mst-year{flex-direction:row;}
  .mst-media{height:240px;}
  .mst-media--annual{height:auto;}
  .mst-content{max-width:none;}
}

/* ================= JOURNAL ================= */
.journal{background:var(--bone);}
.journal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:60px;}
.j-item{background:var(--warm-white);}
.j-img{height:300px; overflow:hidden;}
.j-img img{transition:transform 1.2s var(--ease);}
.j-item:hover .j-img img{transform:scale(1.05);}
.j-body{padding:30px 30px 38px;}
.j-tag{font-family:var(--font-label); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone);}
.j-item h4{font-size:20px; font-weight:400; margin:14px 0 10px;}
.j-item p{font-size:13.5px; line-height:1.7; color:rgba(33,29,23,0.62);}
@media (max-width:900px){ .journal-grid{grid-template-columns:1fr;} }

/* ================= NEWSLETTER ================= */
.news{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.news-inner{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.news h2{font-size:clamp(26px,3.2vw,40px); font-weight:300; max-width:13ch;}
.news p{margin-top:18px; color:rgba(33,29,23,0.68); max-width:42ch;}
.interests{display:flex; gap:12px; flex-wrap:wrap; margin:30px 0;}
.interest-chip{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.05em;
  border:1px solid var(--line); border-radius:999px; padding:10px 18px; cursor:pointer;
  transition:all .3s var(--ease); user-select:none;
}
.interest-chip.active{background:var(--ink); color:var(--warm-white); border-color:var(--ink);}
.news-form{display:flex; border-bottom:1px solid var(--ink); padding-bottom:14px; max-width:460px; gap:10px;}
.news-form input{flex:1; border:none; background:none; font-family:inherit; font-size:16px; outline:none; color:var(--ink);}
.news-form button{background:none; border:none; font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; color:var(--ink); white-space:nowrap;}
@media (max-width:900px){ .news-inner{grid-template-columns:1fr; gap:34px;} }

/* ================= FOOTER ================= */
footer{background:var(--moss); color:var(--warm-white); padding:44px 0 26px;}
.footer-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:40px; row-gap:14px; padding-bottom:20px; border-bottom:1px solid var(--line-invert);}
.footer-logo{display:inline-block; line-height:0;}
.footer-logo img{height:22px; width:auto; display:block; filter:brightness(0) invert(1);}
.footer-brand{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.footer-brand p{color:rgba(250,246,239,0.55); margin:0; max-width:34ch; font-size:12px;}
.footer-links{display:flex; flex-wrap:wrap; align-items:center;}
.footer-links a{color:rgba(250,246,239,0.78); text-decoration:none; font-size:13.5px; transition:color .3s; padding:2px 0;}
.footer-links a:hover{color:var(--champagne);}
.footer-links a:not(:last-child)::after{content:"|"; margin:0 11px; color:rgba(250,246,239,0.28);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:16px; flex-wrap:wrap; gap:12px;}
.footer-bottom p{font-size:12px; color:rgba(250,246,239,0.48);}
.lang-switch{display:flex; gap:12px; font-family:var(--font-label); font-size:11px; letter-spacing:0.08em; align-items:center;}
.lang-switch button{background:none; border:none; color:rgba(250,246,239,0.5); cursor:pointer; font-family:inherit; padding:2px 4px;}
.lang-switch button.active{color:var(--warm-white); text-decoration:underline; text-underline-offset:3px;}
.lang-switch span{opacity:.35;}
@media (max-width:900px){ .footer-top{column-gap:24px; row-gap:12px;} }

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .hero-video{display:none;}
  .hero-fallback{transform:none !important;}
}

/* =====================================================================
   SHARED ADDITIONS — announcement bar + subpage components
   ===================================================================== */

/* ---------- Announcement bar (H01) ---------- */
.announce{
  position:fixed; top:0; left:0; right:0; z-index:calc(var(--z-header) + 1);
  background:var(--moss); color:var(--warm-white);
  min-height:var(--announce-h); padding:0 48px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  transition:transform .5s var(--ease);
}
:root{--announce-h:42px;}
.announce.hidden{transform:translateY(-100%);}
.announce-track{position:relative; display:flex; align-items:center; justify-content:center; text-align:center; min-height:var(--announce-h); flex:1;}
.announce-item{
  position:absolute; opacity:0; transition:opacity .6s var(--ease);
  font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(250,246,239,.9); white-space:nowrap;
}
.announce-item.active{opacity:1; position:relative;}
.lang-th .announce-item{text-transform:none; letter-spacing:0;}
#announceClose{
  position:absolute; right:0; background:none; border:none; color:rgba(250,246,239,.7);
  cursor:pointer; font-size:16px; line-height:1; padding:6px; transition:color .3s;
}
#announceClose:hover{color:var(--warm-white);}
/* header sits below the announce bar until scrolled */
header{top:var(--announce-h);}
header.scrolled{top:0;}
body.no-announce header{top:0;}
@media (max-width:768px){ .announce{padding:0 24px;} .announce-item{white-space:normal; font-size:10px;} }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--stone); display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.lang-th .breadcrumb{text-transform:none; letter-spacing:0;}
.breadcrumb a{color:var(--stone); text-decoration:none;}
.breadcrumb a:hover{color:var(--coffee);}
.breadcrumb .sep{opacity:.5;}

/* ---------- Page hero (subpage cinematic header) ---------- */
.page-hero{
  --ph-min:74vh;
  /* champagne reads as "warm brown" against warm banner art — heroes use a lifted
     tint so the eyebrow and the italic accent stay legible over the imagery */
  --ph-accent:#E6C99C;
  position:relative; min-height:var(--ph-min); display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:var(--moss); color:var(--warm-white);
  padding:0 0 84px;
}
.page-hero--aroon{--ph-min:78vh; padding-bottom:56px;}
/* the meeting shot is bright and top-weighted — darken it and drop the crop so the table and cups stay in frame */
.page-hero--aroon .ph-media img{filter:saturate(.86) brightness(.72) contrast(1.03); object-position:center 62%;}
.page-hero--aroon .ph-scrim{
  background:
    linear-gradient(90deg, rgba(20,17,12,.76) 0%, rgba(20,17,12,.48) 42%, rgba(20,17,12,.10) 78%),
    linear-gradient(180deg, rgba(20,17,12,.16) 0%, rgba(20,17,12,.26) 45%, rgba(20,17,12,.84) 100%);
}
/* .page-hero--about{--ph-min:100vh; padding-bottom:64px;} */
.page-hero--annual{--ph-min:90vh; padding-bottom:72px;}
.page-hero--annual .ph-media img{filter:saturate(.45) brightness(.6) contrast(1.05);}
.page-hero--annual .ph-scrim{
  background:linear-gradient(180deg, rgba(20,17,12,.58) 0%, rgba(20,17,12,.7) 40%, rgba(20,17,12,.88) 100%);
}
.page-hero--artit .ph-media img{filter:saturate(.86) brightness(.72) contrast(1.03); object-position:center;}
.page-hero--artit .ph-scrim{
  background:
    linear-gradient(90deg, rgba(20,17,12,.62) 0%, rgba(20,17,12,.34) 46%, rgba(20,17,12,.08) 78%),
    linear-gradient(180deg, rgba(20,17,12,.16) 0%, rgba(20,17,12,.26) 45%, rgba(20,17,12,.84) 100%);
}
.lang-th .page-hero--artit h1{font-size:clamp(28px,4vw,52px); max-width:26ch;}
/* keep "Brighten Every Moment" on a single line on wider screens */
@media (min-width:880px){
  body:not(.lang-th) .page-hero--artit h1{white-space:nowrap; max-width:none; font-size:clamp(40px,5vw,64px);}
}
.page-hero--artit .ph-eyebrow{color:#EFD3A2;}
.page-hero--artit h1 em{color:#F4DCAE;}
.page-hero--artit .ph-lead-secondary{color:rgba(250,246,239,.88);}

/* STORE — photographic hero, same darkening + scrim family as the other brand heroes */
.page-hero--store{--ph-min:80vh; --ph-accent:#EFD3A2; padding-bottom:76px;}
.page-hero--store .ph-media img{filter:saturate(.86) brightness(.72) contrast(1.03); object-position:72% center;}
.page-hero--store .ph-scrim{
  background:
    linear-gradient(90deg, rgba(20,17,12,.62) 0%, rgba(20,17,12,.34) 46%, rgba(20,17,12,.08) 78%),
    linear-gradient(180deg, rgba(20,17,12,.16) 0%, rgba(20,17,12,.26) 45%, rgba(20,17,12,.84) 100%);
}
.page-hero--store .ph-eyebrow{letter-spacing:0.34em;}
.lang-th .page-hero--store .ph-eyebrow{font-family:var(--font-label); letter-spacing:0.34em; text-transform:uppercase;}
.page-hero--store h1{font-size:clamp(34px,4.6vw,58px); max-width:15ch; text-shadow:0 2px 26px rgba(20,17,12,.5);}
.lang-th .page-hero--store h1{font-size:clamp(30px,4.2vw,56px); max-width:23ch;}
/* keep "Curated for Coffee. Chosen for Living." on one line on wider screens */
@media (min-width:880px){
  body:not(.lang-th) .page-hero--store h1{white-space:nowrap; max-width:none; font-size:clamp(30px,3.4vw,44px);}
}
/* keep the Thai accent phrase whole — Thai breaks mid-phrase otherwise */
.lang-th .page-hero--store h1 em{white-space:nowrap;}
.page-hero--store h1 em{color:#F4DCAE;}
.page-hero--store .ph-lead-secondary{color:rgba(250,246,239,.84);}
.page-hero .ph-media{position:absolute; inset:0;}
.page-hero .ph-media img{width:100%; height:100%; object-fit:cover;}
html.reveal-ready .page-hero .ph-media img{transform:scale(1.1); animation:heroKen 24s var(--ease-expo) forwards;}
.page-hero .ph-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,12,.42) 0%, rgba(20,17,12,.30) 45%, rgba(20,17,12,.78) 100%);
}
.page-hero .container{position:relative; z-index:2; width:100%;}
.page-hero .ph-eyebrow{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ph-accent); margin-bottom:22px; display:flex; align-items:center; gap:10px;
  text-shadow:0 1px 14px rgba(20,17,12,.55);
}
.lang-th .page-hero .ph-eyebrow{text-transform:none; letter-spacing:0.03em;}
.page-hero h1{font-size:clamp(40px,6vw,84px); font-weight:300; max-width:16ch; color:var(--warm-white);}
.page-hero--aroon h1{font-size:clamp(34px,4.4vw,60px); max-width:none;}
/* home banner heading — dialled down to match the ARTIT hero */
.page-hero--about h1{font-size:clamp(40px,5vw,64px);}
/* keep "The First Taste of Success" on a single line on wider screens */
@media (min-width:880px){ body:not(.lang-th) .page-hero--aroon h1{white-space:nowrap;} }
.page-hero h1 em{font-style:italic; color:var(--ph-accent);}
.page-hero h1{text-shadow:0 2px 26px rgba(20,17,12,.42);}
.lang-th .page-hero h1 em{font-style:normal;}
.page-hero .ph-lead{max-width:46ch; margin-top:24px; font-size:17px; color:rgba(250,246,239,.85);}
/* about hero lead runs wider so the same copy settles into ~4 lines */
.page-hero--about .ph-lead{max-width:78ch;}
@media (max-width:900px){ .page-hero--about .ph-lead{max-width:52ch;} }
.page-hero .ph-lead-secondary{max-width:64ch; margin-top:26px; font-size:15px; line-height:1.7; color:rgba(250,246,239,.76);}
/* brand hero leads run wider so the same copy settles into ~4 lines */
.page-hero--annual .ph-lead-secondary{max-width:min(106ch, 82vw);}
.page-hero--artit .ph-lead-secondary{max-width:54ch;}
.page-hero--aroon .ph-lead-secondary{max-width:min(74ch, 82vw);}
.page-hero--ayo .ph-lead-secondary{max-width:min(90ch, 80vw);}
/* run wider so the intro copy settles into ~4 lines */
.page-hero--store .ph-lead-secondary{max-width:min(104ch, 82vw);}
@media (max-width:900px){
  .page-hero--annual .ph-lead-secondary,
  .page-hero--artit .ph-lead-secondary,
  .page-hero--aroon .ph-lead-secondary,
  .page-hero--ayo .ph-lead-secondary,
  .page-hero--store .ph-lead-secondary{max-width:56ch;}
}
.page-hero .ph-ctas{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
html.reveal-ready .page-hero .ph-eyebrow,
html.reveal-ready .page-hero h1,
html.reveal-ready .page-hero .ph-lead,
html.reveal-ready .page-hero .ph-ctas{opacity:0; animation:heroRise 1.1s var(--ease-expo) forwards;}
html.reveal-ready .page-hero .ph-eyebrow{animation-delay:.3s;}
html.reveal-ready .page-hero h1{animation-delay:.45s;}
html.reveal-ready .page-hero .ph-lead{animation-delay:.65s;}
html.reveal-ready .page-hero .ph-lead-secondary{animation-delay:.74s;}
html.reveal-ready .page-hero .ph-ctas{animation-delay:.82s;}
@media (max-width:768px){
  .page-hero{--ph-min:78vh; padding-bottom:64px;}
  .page-hero--artit .ph-media img{object-position:84% 62%;}
  .page-hero--aroon .ph-media img{object-position:38% 62%;}
  .page-hero--store{--ph-min:88svh; padding-bottom:56px;}
  .page-hero--store .ph-media img{object-position:66% center;}
  .page-hero--store .ph-scrim,
  .page-hero--aroon .ph-scrim,
  .page-hero--artit .ph-scrim{
    background:linear-gradient(180deg, rgba(20,17,12,.46) 0%, rgba(20,17,12,.60) 45%, rgba(20,17,12,.88) 100%);
  }
  .page-hero--aroon{--ph-min:76svh; padding-bottom:56px;}
  .page-hero--about{--ph-min:92vh; padding-bottom:56px;}
  .page-hero--annual{--ph-min:100svh; padding-bottom:56px;}
}

/* ---------- Section intro ---------- */
.section-intro{max-width:760px;}
.section-intro h2{font-size:clamp(28px,3.8vw,48px); font-weight:300; margin-top:22px;}
.section-intro p{margin-top:24px; color:rgba(33,29,23,0.72); font-size:16.5px; max-width:60ch;}
.section-dark .section-intro p{color:rgba(250,246,239,0.72);}

/* ---------- Two-column split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
.split.narrow-left{grid-template-columns:0.9fr 1.1fr;}
.split .split-media{position:relative; overflow:hidden; height:560px;}
.split .split-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--ease);}
.split:hover .split-media img{transform:scale(1.05);}
@media (max-width:900px){ .split, .split.narrow-left{grid-template-columns:1fr; gap:40px;} .split .split-media{height:360px;} }

/* Annual current edition — preserve the full 3:2 AROMAI composition. */
.annual-current .split.narrow-left{
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(48px,6vw,88px);
}
.annual-current .split-media{height:auto; aspect-ratio:3/2; background:var(--bone);}
.annual-current .split-media img{object-position:center;}
.annual-current .current-edition-media{
  isolation:isolate; padding:clamp(7px,1vw,12px); overflow:hidden;
}
.annual-current .current-edition-media img{position:relative; z-index:1;}
.annual-current .current-edition-media figcaption{
  position:absolute; right:clamp(17px,2vw,28px); bottom:clamp(17px,2vw,28px); z-index:2;
  padding:9px 13px; background:rgba(33,29,23,.88); color:rgba(250,246,239,.82);
  font-family:var(--font-body); font-size:11px; letter-spacing:.04em;
}
.annual-current .current-edition-media figcaption span{
  color:var(--champagne); font-weight:600; margin-right:8px;
}
.lang-th .annual-current .current-edition-media figcaption{
  letter-spacing:.01em;
}
@media (max-width:900px){
  .annual-current .split.narrow-left{grid-template-columns:1fr; gap:40px;}
  .annual-current .split-media{height:auto; aspect-ratio:3/2;}
}
@media (max-width:768px){
  .annual-current .pill-row{padding-right:56px;}
}

/* ---------- Feature cards grid ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line);}
.section-dark .cards{background:var(--line-invert); border-color:var(--line-invert);}
.card{background:var(--warm-white); padding:40px 34px; display:flex; flex-direction:column; min-height:220px;}
.section-dark .card{background:var(--moss);}
.card .c-index{font-family:var(--font-label); font-size:11px; letter-spacing:0.12em; color:var(--stone); text-transform:uppercase;}
.lang-th .card .c-index{text-transform:none; letter-spacing:0;}
.card h3{font-size:23px; font-weight:400; margin:16px 0 12px; font-style:italic;}
.card h4{font-size:20px; font-weight:400; margin:16px 0 12px;}
.card p{font-size:14px; line-height:1.7; color:rgba(33,29,23,0.66);}
.section-dark .card p{color:rgba(250,246,239,0.68);}
.card .c-foot{margin-top:auto; padding-top:20px;}

/* ---------- Edition marks — one staggered row with ghost-numeral watermarks ---------- */
.edition-marks{
  display:grid; grid-template-columns:repeat(5, 1fr);
  margin-top:52px; column-gap:0;
  align-items:start;
}
.em-item{
  position:relative; overflow:hidden;
  padding:26px 26px 34px 0;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
}
.em-item:last-child{border-right:none; padding-right:0;}
.em-item:not(:first-child){padding-left:26px;}
/* the stagger: alternate columns drop, so the row reads as a rhythm, not a table */
.em-item:nth-child(even){margin-top:54px;}
.em-item:nth-child(3){margin-top:27px;}

.em-ghost{
  position:absolute; top:6px; right:10px; z-index:0;
  font-family:var(--font-display); font-size:96px; line-height:.82; font-weight:400;
  color:transparent; -webkit-text-stroke:1px rgba(33,29,23,0.16);
  pointer-events:none; user-select:none;
  transition:transform 1s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.em-item:hover .em-ghost{transform:translateY(-6px); -webkit-text-stroke-color:rgba(183,147,94,0.5);}
.em-item::before{
  content:''; position:absolute; top:-1px; left:0; width:0; height:2px;
  background:var(--champagne); transition:width .6s var(--ease); z-index:1;
}
.em-item:not(:first-child)::before{left:26px;}
.em-item:hover::before{width:34px;}

.em-index{
  position:relative; z-index:1;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.14em;
  color:var(--stone); text-transform:uppercase;
}
.lang-th .em-index{letter-spacing:0;}
.em-item h4{position:relative; z-index:1; font-size:17px; font-weight:400; font-style:italic; margin:12px 0 9px;}
.em-item p{position:relative; z-index:1; font-size:13.5px; line-height:1.65; color:rgba(33,29,23,0.78);}

@media (max-width:1100px){
  .edition-marks{grid-template-columns:repeat(3, 1fr);}
  .em-item, .em-item:not(:first-child){padding:24px 22px 30px; border-right:1px solid var(--line);}
  .em-item:nth-child(3n){border-right:none;}
  .em-item:nth-child(even), .em-item:nth-child(3){margin-top:0;}
  .em-item:nth-child(2), .em-item:nth-child(5){margin-top:38px;}
  .em-item::before, .em-item:not(:first-child)::before{left:0;}
}
@media (max-width:700px){
  .edition-marks{grid-template-columns:1fr 1fr;}
  .em-item, .em-item:not(:first-child){padding:22px 18px 26px 0; border-right:none;}
  .em-item:nth-child(odd){padding-right:18px; border-right:1px solid var(--line);}
  .em-item:nth-child(n){margin-top:0;}
  .em-ghost{font-size:66px;}
}
@media (prefers-reduced-motion:reduce){
  .em-item:hover .em-ghost{transform:none;}
}

/* ---------- Numbered step list ---------- */
.steps{list-style:none; border-top:1px solid var(--line);}
.section-dark .steps{border-top-color:var(--line-invert);}
.steps li{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.section-dark .steps li{border-bottom-color:var(--line-invert);}
.steps .s-num{font-family:var(--font-label); font-size:12px; color:var(--stone);}
.steps h4{font-size:22px; font-weight:400; font-style:italic;}
.steps p{font-size:14.5px; color:rgba(33,29,23,0.64); margin-top:8px; max-width:60ch;}
.section-dark .steps p{color:rgba(250,246,239,0.66);}

/* ---------- Sensory profile bars ---------- */
.sensory{display:flex; flex-direction:column; gap:16px; max-width:420px;}
.sensory-row{display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center;}
.sensory-row .s-key{font-family:var(--font-label); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone);}
.lang-th .sensory-row .s-key{text-transform:none;}
.sensory-row .s-bar{height:2px; background:var(--line); position:relative;}
.sensory-row .s-bar span{position:absolute; left:0; top:0; height:100%; background:var(--coffee);}

/* ---------- Pill row / notes ---------- */
.pill-row{display:flex; gap:10px; flex-wrap:wrap;}
.pill{font-family:var(--font-label); font-size:11.5px; letter-spacing:0.05em; color:var(--coffee); border:1px solid var(--line); border-radius:999px; padding:8px 16px;}
.lang-th .pill{letter-spacing:0;}
.section-dark .pill{color:rgba(250,246,239,.85); border-color:rgba(250,246,239,.28);}

/* ---------- Disclaimer / privacy note ---------- */
.note-box{border:1px solid var(--line); border-radius:10px; padding:24px 28px; max-width:760px; background:rgba(255,255,255,.4);}
.section-dark .note-box{border-color:var(--line-invert); background:rgba(250,246,239,.04);}
.note-box .n-label{font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--stone); margin-bottom:10px;}
.lang-th .note-box .n-label{text-transform:none;}
.note-box p{font-size:14px; line-height:1.7; color:rgba(33,29,23,0.68);}
.section-dark .note-box p{color:rgba(250,246,239,0.7);}

/* ---------- FAQ / accordion ---------- */
.acc{list-style:none; border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; cursor:pointer; font-family:var(--font-display); font-size:20px; font-weight:400;}
.acc-head .acc-ico{font-family:var(--font-label); font-size:20px; transition:transform .4s var(--ease); flex:none;}
.acc-item.open .acc-ico{transform:rotate(45deg);}
.acc-body{max-height:0; overflow:hidden; transition:max-height .5s var(--ease);}
.acc-item.open .acc-body{max-height:400px;}
.acc-body p{padding:0 0 26px; font-size:14.5px; color:rgba(33,29,23,0.66); max-width:70ch;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center; max-width:720px; margin:0 auto;}
.cta-band h2{font-size:clamp(28px,4vw,52px); font-weight:300; margin-bottom:22px;}
.cta-band h2 em{font-style:italic; color:var(--champagne);}
.lang-th .cta-band h2 em{font-style:normal;}
.cta-band p{color:rgba(33,29,23,0.7); font-size:16.5px; max-width:52ch; margin:0 auto 36px;}
.section-dark .cta-band p{color:rgba(250,246,239,0.75);}
.cta-band .cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* =====================================================================
   SHOP — Phase 1 (catalogue hub, channel-based buying)
   ===================================================================== */
.shop-filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:44px;}
.filter-chip{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.05em;
  border:1px solid var(--line); border-radius:999px; padding:10px 18px; cursor:pointer;
  background:none; color:var(--ink); transition:all .3s var(--ease); user-select:none;
}
.lang-th .filter-chip{letter-spacing:0;}
.filter-chip:hover{border-color:var(--coffee);}
.filter-chip.active{background:var(--ink); color:var(--warm-white); border-color:var(--ink);}

.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; margin-top:36px;}
.product{background:var(--warm-white); display:flex; flex-direction:column; border:1px solid var(--line);}
.product.hide{display:none;}
.p-img{position:relative; height:300px; overflow:hidden;}
.p-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.product:hover .p-img img{transform:scale(1.05);}
.p-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--font-label); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(250,246,239,0.92); backdrop-filter:blur(6px); color:var(--moss);
  padding:6px 12px; border-radius:999px;
}
.lang-th .p-badge{text-transform:none;}
.p-badge.reserving{background:var(--coffee); color:var(--warm-white);}
.p-badge.soldout{background:rgba(33,29,23,0.72); color:var(--warm-white);}
.p-badge.waitlist{background:var(--champagne); color:var(--moss);}
.p-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1;}
.p-brand{font-family:var(--font-label); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--stone);}
.lang-th .p-brand{text-transform:none; letter-spacing:0;}
.p-name{font-family:var(--font-display); font-weight:400; font-size:21px; margin:10px 0 8px; line-height:1.2;}
.p-desc{font-size:13px; line-height:1.6; color:rgba(33,29,23,0.6);}
.p-foot{margin-top:auto; padding-top:22px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.p-channel{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.05em;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; text-decoration:none; color:var(--ink);
  transition:all .35s var(--ease);
}
.lang-th .p-channel{letter-spacing:0;}
.p-channel:hover{background:var(--ink); color:var(--warm-white); border-color:var(--ink);}
.p-channel.primary{background:var(--moss); color:var(--warm-white); border-color:var(--moss);}
.p-channel.primary:hover{background:var(--olive); border-color:var(--olive);}
.p-channel.disabled{opacity:.45; pointer-events:none;}

/* Marketplace links — TikTok / Shopee / Lazada (brand app-icon logos) */
.p-shops{margin-top:auto; padding-top:22px; display:flex; gap:10px; align-items:center;}
.p-shop{
  display:inline-flex; width:40px; height:40px; flex:none;
  border-radius:11px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.p-shop img{width:100%; height:100%; object-fit:contain; display:block;}
.p-shop:hover,
.p-shop:focus-visible{transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,17,12,.18);}
@media (prefers-reduced-motion:reduce){
  .p-shop{transition:box-shadow .3s var(--ease);}
  .p-shop:hover,.p-shop:focus-visible{transform:none;}
}

.shop-empty{padding:60px 0; text-align:center; color:var(--stone); font-family:var(--font-label); font-size:13px; display:none;}
.shop-empty.show{display:block;}

/* Featured drop banner */
.featured-drop{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; border:1px solid var(--line); overflow:hidden; align-items:stretch;
}
.featured-drop .fd-media{position:relative; min-height:360px; overflow:hidden;}
.featured-drop .fd-media img{width:100%; height:100%; object-fit:cover;}
.featured-drop .fd-body{padding:56px 56px; display:flex; flex-direction:column; justify-content:center;}
.featured-drop h3{font-size:clamp(26px,3vw,40px); font-weight:300; margin:16px 0 14px;}
.featured-drop h3 em{font-style:italic; color:var(--champagne);}
.lang-th .featured-drop h3 em{font-style:normal;}
.featured-drop p{color:rgba(33,29,23,0.7); max-width:44ch; font-size:15.5px; margin-bottom:26px;}
@media (max-width:820px){ .featured-drop{grid-template-columns:1fr;} .featured-drop .fd-media{min-height:260px;} .featured-drop .fd-body{padding:40px 28px;} }

/* Channel + B2B route strips */
.shop-strip{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; padding:26px 32px;}
.shop-strip .ss-text{max-width:60ch;}
.shop-strip .ss-text b{font-family:var(--font-display); font-weight:400; font-size:19px; display:block; margin-bottom:6px;}
.shop-strip .ss-text p{font-size:14px; color:rgba(33,29,23,0.62);}
.section-dark .shop-strip{border-color:var(--line-invert);}
.section-dark .shop-strip .ss-text p{color:rgba(250,246,239,0.68);}

/* =====================================================================
   PRICE + FORMS + ABOUT/CONTACT/LEGAL helpers
   ===================================================================== */
/* product price */
.p-price{font-family:var(--font-display); font-weight:400; font-size:19px; margin-top:12px; color:var(--ink);}
.p-price .p-from{font-family:var(--font-label); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-right:6px;}
.lang-th .p-price .p-from{text-transform:none;}
.p-price.muted{color:var(--stone); font-size:15px; font-style:italic;}

/* forms */
.form{max-width:640px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media (max-width:640px){ .form-row{grid-template-columns:1fr; gap:0;} }
.field{margin-bottom:26px;}
.field label{display:block; font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--stone); margin-bottom:10px;}
.lang-th .field label{text-transform:none; letter-spacing:0;}
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--ink); background:none;
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  padding:8px 0; outline:none; transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-bottom-color:var(--coffee);}
.field textarea{resize:vertical; min-height:96px;}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:rgba(33,29,23,0.7); margin-bottom:28px;}
.consent input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--coffee);}

/* contact access block */
.access-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line);}
.access-item{background:var(--warm-white); padding:28px 26px;}
.access-item .a-key{font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--stone); margin-bottom:10px;}
.lang-th .access-item .a-key{text-transform:none;}
.access-item .a-val{font-family:var(--font-display); font-size:19px;}
.access-item p{font-size:13px; color:rgba(33,29,23,0.6); margin-top:6px;}

/* legal on-this-page nav */
.legal-layout{display:grid; grid-template-columns:240px 1fr; gap:60px; align-items:start;}
.legal-nav{position:sticky; top:120px; display:flex; flex-direction:column; gap:2px;}
.legal-nav a{font-family:var(--font-label); font-size:12px; letter-spacing:0.04em; color:var(--stone); text-decoration:none; padding:8px 0; border-bottom:1px solid var(--line); transition:color .3s;}
.legal-nav a:hover{color:var(--coffee);}
@media (max-width:820px){ .legal-layout{grid-template-columns:1fr; gap:30px;} .legal-nav{position:static; flex-direction:row; flex-wrap:wrap; gap:8px;} .legal-nav a{border:1px solid var(--line); border-radius:999px; padding:8px 14px;} }

/* form fields on dark sections */
.section-dark .field input, .section-dark .field select, .section-dark .field textarea{
  color:var(--warm-white); border-bottom-color:rgba(250,246,239,0.4);
}
.section-dark .field input::placeholder{color:rgba(250,246,239,0.5);}
.section-dark .field input:focus, .section-dark .field select:focus, .section-dark .field textarea:focus{border-bottom-color:var(--champagne);}
.section-dark .field label{color:rgba(250,246,239,0.6);}
.section-dark .consent{color:rgba(250,246,239,0.72);}
.section-dark .field select option{color:var(--ink);}

/* ================= RANGE RAIL — one-row drag/scroll showcase with watermark imagery ================= */
.range-head{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-top:56px; margin-bottom:22px;
}
.range-hint{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--stone);
}
body.lang-th .range-hint{text-transform:none; letter-spacing:0; font-size:13px;}
.range-hint .rh-line{width:30px; height:1px; background:var(--stone); position:relative; overflow:hidden; flex:none;}
.range-hint .rh-line::after{
  content:''; position:absolute; inset:0; background:var(--champagne);
  transform:translateX(-100%); animation:railHint 2.6s var(--ease) infinite;
}
@keyframes railHint{ 0%{transform:translateX(-100%);} 55%{transform:translateX(100%);} 100%{transform:translateX(100%);} }
.rail-nav{display:flex; gap:10px; flex:none;}
.rail-btn{
  width:46px; height:46px; border-radius:999px; border:1px solid var(--line);
  background:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); transition:border-color .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.rail-btn svg{width:16px; height:16px; display:block;}
.rail-btn:hover{border-color:var(--coffee); background:var(--coffee); color:var(--warm-white); transform:translateY(-2px);}
.rail-btn:disabled{opacity:.32; cursor:default; transform:none; border-color:var(--line); background:none; color:var(--ink);}
.section-dark .rail-btn{border-color:var(--line-invert); color:var(--warm-white);}
.section-dark .rail-btn:hover{border-color:var(--champagne); background:var(--champagne); color:var(--moss);}
.section-dark .rail-btn:disabled{border-color:var(--line-invert); background:none; color:var(--warm-white);}

.range-rail-wrap{position:relative;}
.range-rail{
  display:flex; gap:0; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:4px;
  scrollbar-width:none; cursor:grab; padding:2px 0 6px;
}
.range-rail::-webkit-scrollbar{display:none;}
.range-rail.grabbing{cursor:grabbing;}
.range-item{
  position:relative; isolation:isolate; overflow:hidden; flex:0 0 clamp(230px, 24vw, 288px);
  scroll-snap-align:start;
  border-right:1px solid var(--line);
  padding:30px 28px 32px;
  min-height:280px;
  display:flex; flex-direction:column;
  transition:transform .55s var(--ease);
}
.section-dark .range-item{border-color:var(--line-invert);}
.range-item:first-child{padding-left:4px;}
.range-item:last-child{border-right:none;}
.ri-mark{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.ri-mark img{
  opacity:.86; filter:grayscale(.12) contrast(1.06) saturate(1.04) brightness(.94); transform:scale(1.06);
  transition:opacity 1s var(--ease), transform 1.8s var(--ease), filter 1s var(--ease);
}
/* Veil is strongest where the copy sits (top index/title, bottom paragraph) and
   thinnest through the middle band, so the imagery reads deeply without eating text. */
.ri-mark::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(250,246,239,0.95) 0%,
    rgba(250,246,239,0.80) 20%,
    rgba(250,246,239,0.36) 46%,
    rgba(250,246,239,0.80) 76%,
    rgba(250,246,239,0.97) 100%);
}
.section-dark .ri-mark::after{
  background:linear-gradient(180deg,
    rgba(33,29,23,0.94) 0%,
    rgba(33,29,23,0.78) 20%,
    rgba(33,29,23,0.34) 46%,
    rgba(33,29,23,0.80) 76%,
    rgba(33,29,23,0.97) 100%);
}
.range-item:hover .ri-mark img{opacity:1; transform:scale(1.14);}
.section-dark .ri-mark img{opacity:.8; filter:grayscale(.16) contrast(1.08) saturate(1.02) brightness(.88);}
.section-dark .range-item:hover .ri-mark img{opacity:.95;}
.range-item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .5s var(--ease);
}
.range-item:hover::after{box-shadow:inset 0 0 0 1px rgba(183,147,94,0.45);}
.range-item:hover{transform:translateY(-4px);}
.ri-index{
  position:relative; font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em;
  color:var(--coffee); text-transform:uppercase;
}
.section-dark .ri-index{color:var(--champagne);}
.lang-th .ri-index{text-transform:none; letter-spacing:0;}
.range-item h4{position:relative; font-size:19px; font-weight:400; font-style:italic; margin:16px 0 10px;}
.section-dark .range-item h4{color:var(--warm-white);}
.range-item p{position:relative; font-size:13.5px; line-height:1.65; color:rgba(33,29,23,0.8); margin-top:auto; padding-top:14px;}
.section-dark .range-item p{color:rgba(250,246,239,0.82);}

.rail-progress{position:relative; height:2px; background:var(--line); margin-top:26px; border-radius:2px; overflow:hidden;}
.section-dark .rail-progress{background:var(--line-invert);}
.rail-progress-thumb{position:absolute; top:0; left:0; height:100%; background:var(--champagne); border-radius:2px; transition:transform .25s var(--ease), width .25s var(--ease); will-change:transform,width;}

@media (max-width:640px){
  .range-head{margin-top:40px;}
  .range-hint{display:none;}
  .range-item{flex-basis:78vw; padding:26px 24px 28px;}
}
@media (prefers-reduced-motion:reduce){
  .range-hint .rh-line::after{animation:none; transform:translateX(0);}
  .range-item, .range-item:hover, .ri-mark img, .range-item:hover .ri-mark img{transition:none; transform:none;}
  .moment:hover .m-img{animation:none; transform:none;}
  .week-figure, .week-figure.is-active, .week-figure.is-leaving,
  .week-panel, .week-visual.is-switching .week-energy-plane--main,
  .week-visual.is-switching .week-speed-line,
  .week-orbit-dot, .week-tab, .week-tab-dot{animation:none; transition:none;}
  .week-figure{transform:none; filter:none;}
}

/* ================= ABOUT — BRAND HALL (Four Worlds) ================= */
.brand-hall{
  position:relative;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.brand-hall::before{
  content:''; position:absolute; inset:-7px; pointer-events:none;
  border:1px solid var(--champagne); opacity:.55;
  --tick:linear-gradient(#000,#000);
  -webkit-mask:var(--tick) top left/30px 30px no-repeat, var(--tick) top right/30px 30px no-repeat,
               var(--tick) bottom left/30px 30px no-repeat, var(--tick) bottom right/30px 30px no-repeat;
          mask:var(--tick) top left/30px 30px no-repeat, var(--tick) top right/30px 30px no-repeat,
               var(--tick) bottom left/30px 30px no-repeat, var(--tick) bottom right/30px 30px no-repeat;
}
.brand-plinth{
  position:relative;
  background:var(--warm-white);
  padding:44px 30px 34px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; color:inherit;
  transition:background .55s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.brand-plinth:hover{
  background:var(--bone); transform:translateY(-7px);
  box-shadow:0 26px 44px -30px rgba(33,29,23,0.4);
}
.brand-plinth:focus-visible{outline:1px solid var(--champagne); outline-offset:-4px;}
.bp-index{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--stone);
}
.lang-th .bp-index{text-transform:none; letter-spacing:0;}
.bp-frame{
  position:relative;
  height:120px; width:100%; display:flex; align-items:center; justify-content:center;
  margin:24px 0 20px;
  animation:bpFloat 5.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -1.3s);
}
.bp-frame::after{
  content:''; position:absolute; left:50%; bottom:-14px; height:1px; width:0;
  background:var(--champagne); transform:translateX(-50%);
  transition:width .5s var(--ease);
}
.brand-plinth:hover .bp-frame::after{width:64px;}
.brand-plinth:hover .bp-frame{animation-play-state:paused;}
.bp-frame img{
  width:auto; height:100%; max-width:100%; object-fit:contain;
  opacity:.85; transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.brand-plinth:hover .bp-frame img{opacity:1; transform:scale(1.06);}
.bp-frame-type span{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:42px; color:var(--ink); letter-spacing:-0.01em;
  transition:transform .55s var(--ease);
}
.lang-th .bp-frame-type span{font-style:normal;}
.brand-plinth:hover .bp-frame-type span{transform:scale(1.06);}
.brand-plinth p{font-size:14px; line-height:1.7; color:rgba(33,29,23,0.66); max-width:30ch;}
.bp-cta{
  margin-top:auto; padding-top:24px;
  font-family:var(--font-label); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--coffee); display:inline-flex; align-items:center; gap:8px;
}
.lang-th .bp-cta{text-transform:none; letter-spacing:0;}
.bp-cta::after{content:'→'; color:var(--champagne); transition:transform .45s var(--ease);}
.brand-plinth:hover .bp-cta::after{transform:translateX(6px);}
@keyframes bpFloat{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}
@media (max-width:900px){
  .brand-hall{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .brand-hall{grid-template-columns:1fr;}
  .brand-plinth{padding:38px 26px 30px;}
}
@media (prefers-reduced-motion:reduce){
  .brand-plinth, .brand-plinth:hover, .bp-frame, .bp-frame img, .brand-plinth:hover .bp-frame img,
  .bp-frame-type span, .brand-plinth:hover .bp-frame-type span{transition:none; transform:none; animation:none;}
}

/* ================= ABOUT — INTRO FILM ================= */
.film-wrap{max-width:980px; margin:0 auto;}
.film-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000 url('https://i.ytimg.com/vi/dxKPCPMaWFg/hqdefault.jpg') center/cover;
  overflow:hidden;
  border:1px solid var(--line-invert);
  box-shadow:0 40px 70px -40px rgba(0,0,0,0.6);
}
.film-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.film-badge{
  position:absolute; top:14px; right:14px; z-index:2; pointer-events:none;
  display:flex; align-items:center; gap:8px;
  background:rgba(20,17,12,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:999px; padding:7px 14px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(250,246,239,0.85);
}
.lang-th .film-badge{text-transform:none; letter-spacing:0;}
.film-badge-dot{width:6px; height:6px; border-radius:50%; background:var(--stone); flex:none;}
.film-badge.is-playing .film-badge-dot{background:var(--champagne); animation:filmPulse 1.6s ease-in-out infinite;}
@keyframes filmPulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.film-caption-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:44px 22px 18px;
  background:linear-gradient(to top, rgba(20,17,12,0.82) 0%, rgba(20,17,12,0) 100%);
}
.film-caption-eyebrow{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--champagne); margin-bottom:4px;
}
.lang-th .film-caption-eyebrow{text-transform:none; letter-spacing:0;}
.film-caption-title{font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--warm-white);}
.lang-th .film-caption-title{font-style:normal;}
@media (max-width:900px){
  .film-wrap{max-width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .film-badge-dot, .film-badge.is-playing .film-badge-dot{animation:none;}
}

/* ============ SHARED — CONTACT STRIP (top tab) + NAV BELOW ============ */
:root{--contact-h:82px;}

body.has-contact-strip .contact-strip{
  position:fixed; left:0; right:0; top:var(--announce-h);
  z-index:calc(var(--z-header) + 1);
  height:var(--contact-h); padding:4px 48px 0;
  background:var(--warm-white); color:var(--ink);
  border-top:4px solid var(--moss); border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease), top .5s var(--ease);
}
body.has-contact-strip.no-announce .contact-strip{top:0;}
body.has-contact-strip .contact-strip.hidden{transform:translateY(calc(-100% - var(--announce-h)));}
.contact-strip__inner{
  width:100%; max-width:1400px; height:100%; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,2.6vw,40px);
}

/* brand — the AMANE mark now anchors the strip */
.contact-strip__brand{
  flex:none; display:flex; align-items:center;
  color:var(--ink); text-decoration:none;
}
.contact-strip__brand-mark{
  height:34px; width:auto; display:block;
  transition:opacity .35s var(--ease);
}
.contact-strip__brand:hover .contact-strip__brand-mark{opacity:.72;}

/* info block — hours, email, LINE OA */
.contact-strip__details{
  position:relative; flex:1; min-width:0;
  display:grid; grid-template-rows:auto auto; grid-auto-flow:column;
  align-content:center; justify-content:start;
  gap:7px clamp(18px,2.4vw,34px);
  padding-left:clamp(22px,3vw,42px);
}
.contact-strip__details::before{
  content:''; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:var(--line);
}
.contact-strip__detail{
  grid-row:span 2; align-self:center;
  display:flex; align-items:baseline; gap:13px; min-width:0;
  font-size:13px; line-height:1.25; white-space:nowrap;
}
.contact-strip__detail-label{
  min-width:48px; color:var(--coffee); font-weight:600;
}
.contact-strip__detail a{color:inherit; text-decoration:none;}
.contact-strip__detail a:hover{text-decoration:underline; text-underline-offset:3px;}

/* LINE Official Account — kept, moved into the info block */
.contact-strip__line{
  grid-row:span 2; align-self:center;
  display:flex; align-items:center; gap:11px;
  padding-left:clamp(16px,2vw,28px); border-left:1px solid var(--line);
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.contact-strip__line-icon{
  width:30px; height:30px; display:grid; place-items:center; flex:none; color:var(--coffee);
}
.contact-strip__line-icon svg{
  width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
.contact-strip__line-copy{display:flex; flex-direction:column; line-height:1.15;}
.contact-strip__line-copy > span{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--coffee);
}
.contact-strip__line-copy strong{
  margin-top:4px; font-size:19px; font-weight:600; letter-spacing:.015em;
}
.contact-strip__line:hover .contact-strip__line-copy strong{text-decoration:underline; text-underline-offset:4px;}

.contact-strip__actions{display:flex; align-items:center; gap:9px; flex:none;}
.contact-strip__icon{
  width:40px; height:40px; display:grid; place-items:center;
  color:var(--coffee); background:transparent; border:1px solid var(--line); border-radius:10px;
  transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.contact-strip__icon svg{
  width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
.contact-strip__icon .contact-strip__icon-dot{fill:currentColor; stroke:none;}
.contact-strip__icon:hover{
  color:var(--warm-white); background:var(--coffee); border-color:var(--coffee); transform:translateY(-2px);
}
.contact-strip__contact-link{
  margin-left:5px; color:var(--ink); font-size:12px; font-weight:500;
  text-decoration:none; text-underline-offset:4px;
}
.contact-strip__contact-link:hover{text-decoration:underline;}
.contact-strip__lang{
  margin-left:5px; display:flex; align-items:center; gap:2px;
  font-family:var(--font-label); font-size:11px; letter-spacing:.06em;
}
.contact-strip__lang button{
  padding:7px 5px; border:0; background:none; color:var(--coffee);
  font:inherit; cursor:pointer;
}
.contact-strip__lang button.active{color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.contact-strip__lang span{color:var(--coffee);}
.contact-strip a:focus-visible,
.contact-strip button:focus-visible{outline:2px solid var(--champagne); outline-offset:4px;}

/* nav sits directly under the strip; only the strip carries the mark up there */
body.has-contact-strip header{top:calc(var(--announce-h) + var(--contact-h));}
body.has-contact-strip.no-announce header{top:var(--contact-h);}
body.has-contact-strip header.scrolled{top:0;}
body.has-contact-strip header .logo{
  width:0; overflow:hidden; opacity:0; pointer-events:none; padding-left:0;
  transition:width .5s var(--ease), opacity .4s var(--ease), color .55s var(--ease);
}
body.has-contact-strip header.scrolled .logo{width:62px; opacity:1; pointer-events:auto;}
body.has-contact-strip header.header--hidden{transform:translateY(-104%);}
.page-home header{justify-content:flex-start;}
/* menu list is right-aligned now that Search / lang / CTA are gone */
body.has-contact-strip header{justify-content:flex-start;}
body.has-contact-strip header nav.primary{margin-left:auto;}
body.has-contact-strip header .nav-right{margin-left:20px;}
body.has-contact-strip header .nav-right:empty{margin-left:0;}

@media (max-width:1020px){
  body.has-contact-strip{--contact-h:72px;}
  body.has-contact-strip .contact-strip{padding-left:32px; padding-right:32px;}
  .contact-strip__brand-mark{height:30px;}
  .contact-strip__detail{font-size:12px;}
  .contact-strip__line-copy strong{font-size:17px;}
  .contact-strip__contact-link{display:none;}
  .contact-strip__icon:nth-child(2){display:none;}
  .contact-strip__icon{width:44px; height:44px;}
  .contact-strip__icon svg{width:19px; height:19px;}
  .contact-strip__lang button{min-width:44px; min-height:44px; padding:0;}
}
@media (max-width:900px){
  .contact-strip__line{display:none;}
}
@media (max-width:820px) and (min-width:761px){
  .contact-strip__icon:nth-child(3){display:none;}
}
@media (max-width:760px){
  body.has-contact-strip{--contact-h:58px;}
  body.has-contact-strip .contact-strip{padding:4px 18px 0;}
  .contact-strip__inner{gap:14px;}
  .contact-strip__brand-mark{height:26px;}
  .contact-strip__details{display:none;}
  .contact-strip__actions{gap:6px;}
  /* keep LINE reachable on small screens */
  .contact-strip__icon:nth-child(1){display:none;}
  .contact-strip__icon:nth-child(2){display:grid;}
  .contact-strip__icon:nth-child(3){display:grid;}
  .contact-strip__icon{width:44px; height:44px; border-radius:9px;}
  .contact-strip__lang{margin-left:4px;}
}
@media (max-width:380px){
  .contact-strip__icon:nth-child(3){display:none;}
}
@media (prefers-reduced-motion:reduce){
  .contact-strip,
  .contact-strip__icon,
  .contact-strip__brand-mark{transition:none;}
  .contact-strip__icon:hover{transform:none;}
}

/* subpage heroes clear the taller top stack (strip + nav) */
body.has-contact-strip .page-hero{
  min-height:calc(var(--ph-min) + var(--announce-h) + var(--contact-h));
  padding-top:calc(var(--announce-h) + var(--contact-h) + 116px);
}
body.has-contact-strip.no-announce .page-hero{
  min-height:calc(var(--ph-min) + var(--contact-h));
  padding-top:calc(var(--contact-h) + 116px);
}

@media (max-width:1040px){
  /* nav list collapses into the drawer — keep the toggle on the right */
  body.has-contact-strip header .nav-right{margin-left:auto;}
}

/* ================= AROON — brand page (hero lockup, product range, cartoon accents, client wall) ================= */

/* Hero brandmark — the AROON wordmark is black-on-transparent, so it is inverted
   to cream for the dark cinematic hero. */
.page-hero .ph-brandmark{display:block; margin-bottom:20px;}
.page-hero .ph-brandmark img{
  display:block; height:clamp(56px, 6.4vw, 88px); width:auto;
  filter:invert(1) brightness(1.06) drop-shadow(0 10px 26px rgba(0,0,0,.45));
}
html.reveal-ready .page-hero .ph-brandmark{opacity:0; animation:heroRise 1.1s var(--ease-expo) forwards; animation-delay:.18s;}
/* the ARTIT lockup is stacked (mark over wordmark over tagline), so it needs more height
   than the wide AROON wordmark to read at the same optical weight. */
.page-hero--artit .ph-brandmark{margin-bottom:14px;}
.page-hero--artit .ph-brandmark img{height:clamp(84px, 9vw, 124px);}
@media (max-width:768px){
  .page-hero--artit .ph-brandmark img{height:clamp(76px, 20vw, 100px);}
}
.page-hero--aroon .ph-media img{filter:saturate(.78) brightness(.82) contrast(1.04);}
.page-hero--aroon .ph-scrim{
  background:
    linear-gradient(90deg, rgba(20,17,12,.72) 0%, rgba(20,17,12,.34) 56%, rgba(20,17,12,.06) 100%),
    linear-gradient(180deg, rgba(20,17,12,.10) 0%, rgba(20,17,12,.18) 42%, rgba(20,17,12,.78) 100%);
}
.lang-th .page-hero--aroon h1{font-size:clamp(30px,4.2vw,56px); max-width:24ch;}

/* Cartoon cutouts — decorative, edge-anchored, never in the reading column. */
.aroon-range, .aroon-industries, .clients{position:relative; overflow:hidden;}
.aroon-cutout{
  position:absolute; z-index:0; width:auto; pointer-events:none; user-select:none;
}
.aroon-cutout--lab{
  right:-40px; bottom:-30px; height:clamp(300px, 34vw, 460px);
  opacity:.32; filter:saturate(.55) brightness(1.2) drop-shadow(0 24px 60px rgba(0,0,0,.5));
}
.aroon-cutout--workshop{
  right:0; top:-24px; height:clamp(180px, 19vw, 264px);
  opacity:.2; filter:saturate(.42) drop-shadow(0 18px 44px rgba(33,29,23,.14));
  transform:scaleX(-1);
}
.aroon-cutout--partnership{
  right:-56px; bottom:-24px; height:clamp(240px, 26vw, 360px);
  opacity:.2; filter:saturate(.42) drop-shadow(0 20px 48px rgba(33,29,23,.14));
}
.aroon-range .container, .aroon-industries .container, .clients .container{position:relative; z-index:1;}

/* Product line-up */
.aroon-product{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,72px);
  align-items:center; margin-top:56px;
}
.ap-shot{position:relative; margin:0;}
.ap-shot img{
  display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 34px 90px rgba(0,0,0,.45);
}
.ap-shot figcaption{
  margin-top:16px; font-family:var(--font-label); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--champagne);
}
.lang-th .ap-shot figcaption{text-transform:none; letter-spacing:0;}
.ap-formats{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.ap-formats li{
  position:relative; padding:22px 0 22px 56px;
  border-top:1px solid var(--line-invert);
}
.ap-formats li:last-child{border-bottom:1px solid var(--line-invert);}
.apf-index{
  position:absolute; left:0; top:24px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em; color:var(--champagne);
}
.ap-formats h4{font-size:20px; font-weight:400; font-style:italic; color:var(--warm-white); margin-bottom:8px;}
.ap-formats p{font-size:13.5px; line-height:1.65; color:rgba(250,246,239,.72);}

/* Industries hands straight over to the client wall — the default 150px on each
   side stacked into a 300px gap between two light sections that read as one flow. */
.aroon-industries{padding-bottom:clamp(56px,6vw,84px);}
.clients{padding-top:clamp(56px,6vw,84px);}

/* Client wall — wordmark placeholders until real logo artwork lands */
.clients .client-wall{
  list-style:none; margin:56px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.client-tile{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  min-height:112px; display:flex; align-items:center; justify-content:center;
  padding:22px 20px; text-align:center;
  transition:background .4s var(--ease);
}
.client-tile:hover{background:rgba(183,147,94,0.07);}
.ct-mark{
  font-family:var(--font-display); font-size:17px; line-height:1.25; letter-spacing:-0.01em;
  color:rgba(33,29,23,.62); transition:color .4s var(--ease);
}
.ct-mark em{
  display:block; font-style:normal;
  font-family:var(--font-label); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--stone); margin-top:5px;
}
.client-tile:hover .ct-mark{color:var(--coffee);}
/* Drop a supplied logo file in as <img> and the wordmark placeholder steps aside. */
.client-tile:has(img) .ct-mark{display:none;}
.client-tile img{
  max-width:100%; height:auto; max-height:44px; object-fit:contain;
  filter:grayscale(1); opacity:.6; transition:filter .4s var(--ease), opacity .4s var(--ease);
}
.client-tile:hover img{filter:grayscale(0); opacity:1;}
.client-note{
  margin-top:22px; font-family:var(--font-label); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--stone);
}
.lang-th .client-note{text-transform:none; letter-spacing:0; font-size:12.5px;}

@media (max-width:900px){
  .aroon-product{grid-template-columns:1fr; gap:40px;}
  .aroon-cutout--lab{height:clamp(220px,42vw,300px); right:-60px; opacity:.34;}
  .aroon-cutout--partnership{height:clamp(190px,30vw,250px); right:-64px; opacity:.14;}
  .aroon-cutout--workshop{display:none;}
}
@media (max-width:640px){
  .clients .client-wall{grid-template-columns:repeat(2, 1fr);}
  .client-tile{min-height:96px; padding:18px 14px;}
  .ct-mark{font-size:15px;}
  .aroon-cutout--lab{display:none;}
  .aroon-cutout--partnership{display:none;}
}
@media (prefers-reduced-motion:reduce){
  html.reveal-ready .page-hero .ph-brandmark{opacity:1; animation:none;}
}

/* ================= ARE YOU OK? — brand page (care hero, travelling cup, message wall) ================= */

/* Hero — the same cinematic photo treatment as AROON, warmed a touch so the
   cup reads golden rather than grey. */
.page-hero--ayo{--ph-min:82vh; padding-bottom:60px;}
.page-hero--ayo .ph-media img{filter:saturate(.86) brightness(.70) contrast(1.06); object-position:center 47%;}
.page-hero--ayo .ph-scrim{
  background:
    linear-gradient(90deg, rgba(20,17,12,.90) 0%, rgba(20,17,12,.64) 42%, rgba(20,17,12,.20) 78%, rgba(20,17,12,.06) 100%),
    linear-gradient(180deg, rgba(20,17,12,.18) 0%, rgba(20,17,12,.26) 42%, rgba(20,17,12,.82) 100%);
}
.page-hero--ayo h1{font-size:clamp(38px,4.8vw,66px); max-width:15ch;}
.lang-th .page-hero--ayo h1{font-size:clamp(30px,4vw,54px); max-width:20ch;}
/* width tuned above (~4-line lead); keep the ayo colour/treatment only here */
@media (max-width:900px){
  .page-hero--ayo{--ph-min:80svh;}
  .page-hero--ayo .ph-media img{object-position:56% 46%;}
  .page-hero--ayo .ph-scrim{
    background:linear-gradient(180deg, rgba(20,17,12,.46) 0%, rgba(20,17,12,.58) 40%, rgba(20,17,12,.90) 100%);
  }
}

/* ---- The Cup That Travels — the three steps float around the illustration ---- */
.ayo-travels{position:relative; overflow:hidden;}
.ayo-travels > .container{position:relative; z-index:1;}
.ayo-travels .section-intro{max-width:640px;}

/* keep these two headings on a single line */
.ayo-travels .section-intro h2,
.ayo-box .section-intro h2{
  white-space:nowrap;
  font-size:clamp(20px,2.7vw,36px);
}
@media (max-width:640px){
  .ayo-travels .section-intro h2,
  .ayo-box .section-intro h2{white-space:normal;}
}

/* Cartoon watermarks — decorative, edge-anchored, never in the reading column. */
.ayo-cutout{position:absolute; z-index:0; width:auto; pointer-events:none; user-select:none;}
.ayo-cutout--care{
  right:-46px; top:-26px; height:clamp(210px, 23vw, 320px);
  opacity:.17; filter:saturate(.4) drop-shadow(0 18px 44px rgba(33,29,23,.12));
  transform:scaleX(-1);
}
.ayo-cutout--listen{
  right:-56px; bottom:-46px; height:clamp(280px, 30vw, 430px);
  opacity:.26; filter:saturate(.45) brightness(1.06) drop-shadow(0 24px 60px rgba(0,0,0,.5));
}

.ayo-stage{
  position:relative; margin-top:clamp(32px,4vw,48px);
  min-height:clamp(520px,46vw,640px);
  display:flex; align-items:flex-end; justify-content:center;
}
/* a soft ring behind the figure so the bubbles read as orbiting it */
.ayo-orbit{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(58%,520px); aspect-ratio:1/1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(183,147,94,.22) 0%, rgba(183,147,94,.07) 48%, rgba(183,147,94,0) 72%);
  animation:ayoPulse 9s ease-in-out infinite;
}
@keyframes ayoPulse{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.85;} 50%{transform:translate(-50%,-50%) scale(1.07); opacity:1;}}

/* fixed stage box so every illustration in the series stands on the same
   ground line while they crossfade, whatever their own aspect ratio */
.ayo-stage-art{position:relative; z-index:1; width:min(42%,430px); aspect-ratio:3/4;}
.asa-frame{position:absolute; inset:0; animation:ayoDrift 7.5s ease-in-out infinite;}
.asa-shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 30px 56px rgba(33,29,23,.18));
  opacity:0; transition:opacity .9s var(--ease);
}
.asa-shot.is-on{opacity:1;}

/* the series mixes portrait figures and one landscape scene, and each file
   has its own dimensions — these keep every frame the same visual size and
   lift them clear of the "Pass it on" bubble and the message line.
   tall = portrait figure; wide = the one landscape scene, nudged up to match. */
.asa-frame[data-fit="tall"] .asa-shot{object-position:center bottom; transform:translateY(-10%) scale(.86);}
.asa-frame[data-fit="wide"] .asa-shot{object-position:center center; transform:translateY(-10%) scale(1.12);}

/* the message rides in the lower-right whitespace of each illustration —
   plain words, no card */
.asa-msg{
  position:absolute; right:4%; bottom:8%; z-index:4;
  max-width:58%; margin:0; text-align:right;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(22px,2.3vw,31px); line-height:1.18; color:#C0651F;
  text-shadow:0 1px 12px rgba(247,242,232,.95), 0 0 4px rgba(247,242,232,.95);
  pointer-events:none;
}
/* Trirong runs a touch smaller on the body than Literata, so give Thai a bump */
.lang-th .asa-msg{
  font-style:normal; font-weight:500; line-height:1.32;
  font-size:clamp(25px,2.7vw,35px);
}
@media (max-width:1100px){
  .asa-msg{right:3%; bottom:9%; max-width:70%; font-size:clamp(19px,4.2vw,25px);}
  .lang-th .asa-msg{font-size:clamp(21px,4.8vw,28px);}
}

.ayo-bubble{
  position:absolute; z-index:2; margin:0; width:min(30%,326px);
}
.ab-inner{
  position:relative; padding:20px 26px 22px; border-radius:18px;
  background:#EFE6D6; border:1px solid rgba(33,29,23,.05);
  box-shadow:0 18px 44px rgba(33,29,23,.10);
  animation:ayoDrift 6.4s ease-in-out infinite;
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
/* the two trailing dots that turn each card into a thought bubble */
.ab-inner::before, .ab-inner::after{
  content:''; position:absolute; border-radius:50%; background:#EFE6D6;
}
.ab-inner::before{width:15px; height:15px; bottom:-13px;}
.ab-inner::after{width:8px; height:8px; bottom:-27px;}
.ayo-bubble--a .ab-inner::before{right:34px;}
.ayo-bubble--a .ab-inner::after{right:22px;}
.ayo-bubble--b .ab-inner::before{left:34px;}
.ayo-bubble--b .ab-inner::after{left:22px;}
.ayo-bubble--c .ab-inner::before{right:34px; bottom:auto; top:-13px;}
.ayo-bubble--c .ab-inner::after{right:22px; bottom:auto; top:-27px;}

.ayo-bubble:hover .ab-inner{background:#E9DECA; box-shadow:0 26px 60px rgba(33,29,23,.16);}
.ab-step{
  display:block; margin-bottom:8px;
  font-family:var(--font-label); font-size:10px; letter-spacing:0.16em; color:var(--champagne);
}
.ayo-bubble h4{
  font-family:var(--font-display); font-size:clamp(20px,1.8vw,25px); font-weight:500; font-style:italic;
  color:#C0651F; line-height:1.2; margin-bottom:9px;
}
.lang-th .ayo-bubble h4{font-style:normal;}
.ayo-bubble p{font-size:13.5px; line-height:1.68; color:rgba(33,29,23,.74);}

.ayo-bubble--a{left:5%; top:1%;}
.ayo-bubble--b{right:5%; top:13%;}
.ayo-bubble--c{left:6%; bottom:0%;}
.ayo-bubble--a .ab-inner{animation-delay:-1.2s;}
.ayo-bubble--b .ab-inner{animation-delay:-3.4s; animation-duration:7.2s;}
.ayo-bubble--c .ab-inner{animation-delay:-5.1s; animation-duration:5.8s;}

@keyframes ayoDrift{0%,100%{transform:translateY(0);} 50%{transform:translateY(-11px);}}
@keyframes ayoBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}

@media (max-width:1100px){
  .ayo-bubble{width:min(33%,286px);}
  .ayo-stage-art{width:min(36%,340px);}
  .ayo-bubble--a{left:2%;}
  .ayo-bubble--b{right:2%;}
  .ayo-bubble--c{left:4%;}
}
/* ---- The Care Box — the product itself, on a warm plate ---- */
/* The Care Box sits straight under The Cup That Travels — both light, and the
   stage already carries slack under the illustration, so the seam is pulled in. */
.ayo-travels{padding-bottom:clamp(48px,5vw,72px);}
.ayo-box{position:relative; overflow:hidden; background:#F4EFE6; padding-top:clamp(88px,9vw,120px);}
.ayo-box > .container{position:relative; z-index:1;}
.ayo-box .section-intro{max-width:640px;}
.ayo-cutout--box{
  right:-64px; bottom:-46px; height:clamp(200px, 22vw, 300px);
  opacity:.13; filter:saturate(.4) drop-shadow(0 18px 44px rgba(33,29,23,.12));
  transform:scaleX(-1);
}

.ayo-box-grid{
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(36px,5vw,76px); align-items:center;
  margin-top:clamp(40px,5vw,60px);
}
.abx-shot{position:relative; margin:0;}
.abx-shot img{
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 34px 80px rgba(33,29,23,.16), 0 2px 0 rgba(255,255,255,.6) inset;
  transition:transform 1.4s var(--ease), box-shadow .8s var(--ease);
}
.abx-shot:hover img{transform:translateY(-6px); box-shadow:0 44px 96px rgba(33,29,23,.22);}
.abx-shot figcaption{
  margin-top:16px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--champagne);
}
.lang-th .abx-shot figcaption{
  text-transform:none; letter-spacing:0; font-size:12.5px;
}

.abx-lead{font-size:16.5px; line-height:1.75; color:rgba(33,29,23,.74); max-width:44ch;}
.abx-list{list-style:none; margin:32px 0 0; padding:0;}
.abx-list li{
  position:relative; display:grid; grid-template-columns:44px 1fr; gap:0;
  padding:20px 0; border-top:1px solid rgba(33,29,23,.10);
}
.abx-list li:last-child{border-bottom:1px solid rgba(33,29,23,.10);}
.abx-n{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em;
  color:var(--champagne); padding-top:5px;
}
.abx-list h4{
  font-family:var(--font-display); font-size:19px; font-weight:400; font-style:italic;
  color:var(--ink, #211D17); margin-bottom:6px;
}
.lang-th .abx-list h4{font-style:normal;}
.abx-list p{font-size:13.5px; line-height:1.68; color:rgba(33,29,23,.66);}

.abx-moments{margin-top:30px;}
.abx-label{
  font-family:var(--font-label); font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--stone); margin-bottom:14px;
}
.lang-th .abx-label{text-transform:none; letter-spacing:0; font-size:12px;}
.abx-moments ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.abx-moments li{
  display:flex; align-items:center; gap:9px;
  padding:8px 16px 8px 12px; border-radius:999px;
  border:1px solid rgba(33,29,23,.12); background:rgba(255,255,255,.5);
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.05em; color:var(--coffee);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.abx-moments li:hover{border-color:var(--dot); background:#fff; transform:translateY(-2px);}
.abx-dot{
  width:11px; height:11px; border-radius:50%; background:var(--dot);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dot) 22%, transparent);
}

@media (max-width:900px){
  .ayo-box-grid{grid-template-columns:1fr; gap:36px;}
  .abx-lead{max-width:none;}
}
@media (max-width:640px){
  .ayo-cutout--box{display:none;}
  .abx-list li{grid-template-columns:34px 1fr; padding:17px 0;}
  .abx-list h4{font-size:17px;}
}

@media (max-width:1100px){
  .ayo-cutout--care{height:clamp(170px,20vw,230px); opacity:.13;}
  .ayo-cutout--box{height:clamp(170px,22vw,240px); opacity:.10;}
  .ayo-cutout--listen{height:clamp(220px,26vw,300px); opacity:.18;}
}
@media (max-width:900px){
  /* the orbit unrolls into a simple column — art first, then the three steps */
  .ayo-stage{display:block; min-height:0; margin-top:36px;}
  .ayo-orbit{top:200px; width:min(78%,340px);}
  .ayo-stage-art{width:min(78%,340px); margin:0 auto;}
  .ayo-bubble--a, .ayo-bubble--b, .ayo-bubble--c{left:auto; right:auto; top:auto; bottom:auto;}
  .ayo-bubble{position:static; width:100%; margin-top:22px;}
  .ayo-bubble .ab-inner{animation:none;}
  .ab-inner::before, .ab-inner::after{display:none;}
}

/* ---- Choose Your Message — the art is drawn on black, so each tile screens it
   over its own warm gradient: the black ground drops away and only the figure
   and its halo stay lit. ---- */
.ayo-messages{position:relative; overflow:hidden;}
.ayo-messages > .container{position:relative; z-index:1;}
.ayo-glow-a, .ayo-glow-b{position:absolute; border-radius:50%; pointer-events:none; z-index:0;}
.ayo-glow-a{
  left:-8%; top:6%; width:min(46vw,560px); aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(183,147,94,.16) 0%, rgba(183,147,94,0) 68%);
  animation:ayoPulse 14s ease-in-out infinite;
}
.ayo-glow-b{
  right:-10%; bottom:-6%; width:min(52vw,640px); aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(196,92,92,.13) 0%, rgba(196,92,92,0) 68%);
  animation:ayoPulse 18s ease-in-out infinite reverse;
}

.ayo-cards{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px); margin-top:clamp(40px,5vw,64px);
}
.ayo-card{margin:0;}
.ayo-card .cc-art{
  position:relative; overflow:hidden; border-radius:14px; aspect-ratio:3/4;
  background:
    radial-gradient(120% 78% at 50% 26%, rgba(var(--glow), .34) 0%, rgba(var(--glow), .09) 44%, rgba(0,0,0,0) 72%),
    linear-gradient(168deg, #33251A 0%, #1F1711 54%, #130E0A 100%);
  border:1px solid rgba(250,246,239,.09);
  animation:ayoBob 8s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -1.3s);
  transition:border-color .55s var(--ease), box-shadow .55s var(--ease);
}
/* the lit pool the figure stands in — grows on hover */
.cc-halo{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:86%; aspect-ratio:1/1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--glow), .30) 0%, rgba(var(--glow), .08) 46%, rgba(0,0,0,0) 70%);
  transition:transform .8s var(--ease), opacity .8s var(--ease);
}
.ayo-card .cc-art img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
  mix-blend-mode:screen;
  transition:transform 1.1s var(--ease);
}
.ayo-card .cc-art::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(104deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.13) 50%, rgba(255,255,255,0) 62%);
  transform:translateX(-120%);
  transition:transform 1.1s var(--ease);
}
.ayo-card:hover .cc-art::after{transform:translateX(120%);}
.ayo-card:hover .cc-art{
  border-color:rgba(var(--glow), .45);
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--glow), .18);
}
.ayo-card:hover .cc-art img{transform:translateY(-8px) scale(1.05);}
.ayo-card:hover .cc-halo{transform:translateX(-50%) scale(1.16); opacity:1;}

.ayo-card figcaption{padding:18px 2px 0;}
.ayo-card .cc-index{
  display:block; margin-bottom:9px;
  font-family:var(--font-label); font-size:10px; letter-spacing:0.16em; color:var(--champagne);
  transition:color .45s var(--ease);
}
.ayo-card .cc-word{
  font-family:var(--font-display); font-size:clamp(16px,1.3vw,20px); font-weight:400; font-style:italic;
  color:var(--warm-white); line-height:1.3;
  transition:color .45s var(--ease);
}
.lang-th .ayo-card .cc-word{font-style:normal;}
.ayo-card:hover .cc-word{color:rgb(var(--glow));}
.ayo-card:hover .cc-index{color:rgba(var(--glow), .85);}

.ayo-collection{margin-top:clamp(44px,5vw,68px); padding-top:32px; border-top:1px solid var(--line-invert);}
.ayo-collection .ac-label{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--champagne); margin-bottom:18px;
}
.lang-th .ayo-collection .ac-label{
  text-transform:none; letter-spacing:0; font-size:12.5px;
}
.ayo-messages .pill{transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);}
.ayo-messages .pill:hover{border-color:var(--champagne); background:rgba(183,147,94,.12); color:var(--warm-white);}
.ayo-safety{margin-top:26px; max-width:62ch; font-size:13px; line-height:1.7; color:rgba(250,246,239,.52);}

@media (max-width:1200px){
  .ayo-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
  .ayo-cutout--care, .ayo-cutout--listen{display:none;}
  .ayo-cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  .ayo-card .cc-word{font-size:16px;}
  .ayo-card figcaption{padding-top:14px;}
  .ayo-card .cc-art{border-radius:11px;}
}
@media (prefers-reduced-motion:reduce){
  .ayo-orbit, .asa-frame, .ab-inner,
  .ayo-card .cc-art, .ayo-glow-a, .ayo-glow-b{animation:none;}
}

/* ================= AROON ENQUIRY — the contact page's single action ================= */
.aroon-enquiry{position:relative; overflow:hidden;}
.aroon-enquiry .container{position:relative; z-index:1;}

.aq-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(40px, 5.5vw, 88px); align-items:start;
}

/* ---- left: the brief ---- */
.aq-mark{display:block; margin-bottom:26px;}
.aq-mark img{
  display:block; height:clamp(44px, 4.6vw, 62px); width:auto;
  filter:invert(1) brightness(1.06);
}
.aq-title{
  font-size:clamp(28px, 3.4vw, 44px); font-weight:300; line-height:1.14;
  letter-spacing:-0.02em; color:var(--warm-white); text-wrap:balance;
}
.aq-title em{font-style:italic; color:var(--champagne);}
.aq-lead{
  margin-top:22px; max-width:56ch; font-size:16.5px; line-height:1.72;
  color:rgba(250,246,239,0.78); text-wrap:pretty;
}

.aq-shot{margin:clamp(32px, 4vw, 46px) 0 0;}
.aq-shot img{
  display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.aq-shot figcaption{
  margin-top:14px; font-family:var(--font-label); font-size:10.5px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--champagne);
}
.lang-th .aq-shot figcaption{text-transform:none; letter-spacing:0; font-size:12px;}

.aq-steps{list-style:none; margin:clamp(34px, 4vw, 48px) 0 0; padding:0;}
.aq-steps li{position:relative; padding:20px 0 20px 54px; border-top:1px solid var(--line-invert);}
.aq-steps li:last-child{border-bottom:1px solid var(--line-invert);}
.aqs-index{
  position:absolute; left:0; top:23px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em; color:var(--champagne);
}
.aq-steps h3{font-family:var(--font-display); font-size:18px; font-weight:400; color:var(--warm-white); margin-bottom:6px;}
.lang-th .aq-steps h3{font-size:17px;}
.aq-steps p{font-size:13.5px; line-height:1.68; color:rgba(250,246,239,0.7);}

.aq-range-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  font-family:var(--font-label); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--champagne); text-decoration:none; padding-bottom:4px;
  border-bottom:1px solid rgba(183,147,94,0.4); transition:color .4s var(--ease), border-color .4s var(--ease);
}
.lang-th .aq-range-link{text-transform:none; letter-spacing:0; font-size:13px;}
.aq-range-link:hover{color:var(--warm-white); border-bottom-color:var(--warm-white);}
.aq-range-link .arw{display:inline-block; transition:transform .45s var(--ease);}
.aq-range-link:hover .arw{transform:translateX(5px);}

/* ---- right: the enquiry panel ---- */
.aq-panel{
  background:rgba(250,246,239,0.045); border:1px solid var(--line-invert);
  border-top:2px solid var(--champagne);
  padding:clamp(26px, 3.2vw, 44px);
}
.aq-form{max-width:none;}
.aq-form .btn-solid{width:100%; justify-content:center;}

.aq-form .field textarea{min-height:118px;}
.aq-form .consent{margin-top:4px;}

@media (min-width:1001px){
  /* the brief runs longer than the form; hold the enquiry panel in view beside it */
  .aq-panel{position:sticky; top:118px;}
}
@media (max-width:1000px){
  .aq-layout{grid-template-columns:1fr; gap:52px;}
  .aq-shot{max-width:560px;}
}
@media (max-width:640px){
  .aq-panel{padding:24px 20px; margin:0 -4px;}
}
@media (prefers-reduced-motion:reduce){
  .aq-range-link, .aq-range-link .arw{transition:none;}
}


/* ================= CONTACT PAGE — email + official channels ================= */
.contact-page{position:relative; overflow:hidden;}
.contact-page .container{position:relative; z-index:1;}

.contact-email{
  margin-top:clamp(30px, 4vw, 44px); padding-top:26px;
  border-top:1px solid var(--line-invert);
}
.contact-email__label{
  display:block; margin-bottom:12px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--champagne);
}
.lang-th .contact-email__label{text-transform:none; letter-spacing:0; font-size:12.5px;}
.contact-email__addr{
  font-family:var(--font-display); font-size:clamp(22px, 2.6vw, 32px); font-weight:300;
  font-style:italic; letter-spacing:-0.01em; color:var(--warm-white); text-decoration:none;
  border-bottom:1px solid rgba(183,147,94,0.4);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.lang-th .contact-email__addr{font-style:normal;}
.contact-email__addr:hover{color:var(--champagne); border-bottom-color:var(--champagne);}

.contact-social{margin-top:clamp(30px, 4vw, 44px); padding-top:26px; border-top:1px solid var(--line-invert);}
.contact-social__label{
  display:block; margin-bottom:16px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--champagne);
}
.lang-th .contact-social__label{text-transform:none; letter-spacing:0; font-size:12.5px;}
.contact-social__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
}
.contact-social__link{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:rgba(250,246,239,0.045); border:1px solid var(--line-invert);
  color:rgba(250,246,239,0.82); text-decoration:none;
  font-family:var(--font-label); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.lang-th .contact-social__link{text-transform:none; letter-spacing:0; font-size:13px;}
.contact-social__link img{
  width:22px; height:22px; flex:none; object-fit:contain;
  opacity:.9; transition:opacity .4s var(--ease);
}
.contact-social__link:hover{
  border-color:var(--champagne); background:rgba(183,147,94,0.12);
  color:var(--warm-white); transform:translateY(-2px);
}
.contact-social__link:hover img{opacity:1;}

@media (max-width:640px){
  .contact-social__list{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (prefers-reduced-motion:reduce){
  .contact-social__link, .contact-social__link img, .contact-email__addr{transition:none;}
  .contact-social__link:hover{transform:none;}
}


/* ================= IMAGE LIGHTBOX =================
   Any sizeable image on the page lifts out of the layout on click and
   settles centred — a FLIP move, so it travels from exactly where it sat. */
[data-zoom]{cursor:zoom-in;}
[data-zoom].is-pressing{filter:brightness(.93) saturate(1.04);}
[data-zoom]{transition:filter .18s var(--ease);}

.lb-scrim{
  position:fixed; inset:0; z-index:var(--z-lightbox);
  background:rgba(18,15,12,.88);
  -webkit-backdrop-filter:blur(16px) saturate(.86);
  backdrop-filter:blur(16px) saturate(.86);
  opacity:0; transition:opacity .42s var(--ease);
}
.lb-scrim.is-open{opacity:1;}

.lb-img{
  position:fixed; z-index:calc(var(--z-lightbox) + 1);
  margin:0; border-radius:10px; object-fit:contain;
  box-shadow:0 50px 130px rgba(0,0,0,.62);
  transform-origin:center center; will-change:transform;
  cursor:zoom-out;
}

.lb-close{
  position:fixed; top:clamp(16px,2.4vw,30px); right:clamp(16px,2.4vw,30px);
  z-index:calc(var(--z-lightbox) + 2);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,246,239,.1); border:1px solid rgba(250,246,239,.28);
  color:var(--warm-white); cursor:pointer;
  opacity:0; transform:scale(.9);
  transition:opacity .4s var(--ease) .12s, transform .4s var(--ease) .12s, background .3s var(--ease), border-color .3s var(--ease);
}
.lb-scrim.is-open ~ .lb-close{opacity:1; transform:none;}
.lb-close:hover{background:rgba(250,246,239,.2); border-color:var(--warm-white);}
.lb-close:focus-visible{outline:2px solid var(--champagne); outline-offset:3px;}
.lb-close svg{width:17px; height:17px;}

.lb-cap{
  position:fixed; z-index:calc(var(--z-lightbox) + 2);
  left:50%; bottom:clamp(16px,2.6vw,32px); transform:translateX(-50%);
  max-width:min(72ch,88vw); padding:0 16px; text-align:center;
  font-family:var(--font-label); font-size:10px; letter-spacing:.13em; line-height:1.65;
  text-transform:uppercase; color:rgba(250,246,239,.66);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  opacity:0; transition:opacity .45s var(--ease) .2s;
}
.lang-th .lb-cap{text-transform:none; letter-spacing:.02em; font-size:12.5px;}
.lb-scrim.is-open ~ .lb-cap{opacity:1;}
@media (max-width:560px){ .lb-cap{display:none;} }

@media (prefers-reduced-motion:reduce){
  .lb-close, .lb-cap{transition-delay:0s;}
}

/* ---------- Gift Box: the closed set, then the line-up on hover ---------- */
.cs-shot{position:relative; isolation:isolate;}
.cs-shot .cs-img{transition:opacity .5s var(--ease), transform 1.4s var(--ease);}
.cs-shot .cs-img--alt{position:absolute; inset:0; opacity:0; pointer-events:none;}
.cs-hint{
  position:absolute; z-index:2; left:16px; bottom:14px;
  display:flex; align-items:center; gap:8px; padding:7px 12px 6px;
  border-radius:999px; background:rgba(33,29,23,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--font-label); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(250,246,239,.9); pointer-events:none;
  opacity:1; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.lang-th .cs-hint{text-transform:none; letter-spacing:.02em; font-size:11.5px;}
.cs-hint::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--champagne);}
@media (hover:hover){
  .cs-shot:hover .cs-img--alt{opacity:1; pointer-events:auto;}
  .cs-shot:hover .cs-img--base{opacity:0;}
  .cs-shot:hover .cs-img{transform:scale(1.03);}
  .cs-shot:hover .cs-hint{opacity:0; transform:translateY(6px);}
}
@media (hover:none){ .cs-hint{display:none;} }