/* ════════════════════════════════════════════════
   B.LOW Listening Coffee — style.css
   Semua warna, font, dan ukuran dasar diatur di :root.
   ════════════════════════════════════════════════ */
:root{
  /* Palet brand */
  --arang:#1B1D1B;
  --beton:#8E8F8A;
  --beton-muda:#D9D8D2;
  --kertas:#E8E6E1;
  --krem:#E6E4CF;
  --ungu:#6C35EA;
  --ungu-redup:#6A52A0;
  --kayu:#A85A2A;
  --daun:#3E5A3A;
  /* Turunan (untuk kontras AA) */
  --ink:#1B1D1B;
  --ink-soft:#4F504B;        /* teks sekunder di atas kertas/beton-muda */
  --krem-soft:#B9B8A6;       /* teks sekunder di atas arang */
  --line-dark:rgba(230,228,207,.16);
  --line-light:rgba(27,29,27,.16);
  /* Tipografi */
  --f-sans:"Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:"Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-script:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  /* Ritme */
  --gutter:clamp(1.25rem, 4.5vw, 3.5rem);
  --section:clamp(4.5rem, 11vw, 10rem);
  --maxw:1520px;
  --nav-h:64px;
  --ease:cubic-bezier(.16,1,.3,1);
  --focus:var(--krem);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--arang);-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top, 0px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--arang);color:var(--krem);font:400 1rem/1.6 var(--f-sans);font-feature-settings:"ss01","cv11";overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
picture{display:contents}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.light{--focus:var(--ungu);background:var(--kertas);color:var(--ink)}
.light--stone{background:var(--beton-muda)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-100px;z-index:200;background:var(--krem);color:var(--arang);padding:.75rem 1rem;font-weight:600}
.skip:focus{top:calc(1rem + env(safe-area-inset-top, 0px))}
.mono{font-family:var(--f-mono);font-weight:400;letter-spacing:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* Grain 4% */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ── Tipe ── */
.h-section{font-weight:600;font-size:clamp(2.75rem, 11vw, 8.5rem);line-height:.92;letter-spacing:-.045em}
.line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.line>span{display:block}
.eyebrow{font-size:.8125rem;margin-bottom:1rem;color:var(--ink-soft)}
.cap{font-size:.8125rem;margin-top:.75rem;color:var(--krem-soft)}
.light .cap{color:var(--ink-soft)}
.script{font-family:var(--f-script);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ── Logo blob ── */
.logo{width:100%;height:auto;overflow:visible}
.logo path{fill:currentColor}
.logo .lo,.logo .lw,.logo .lb,.logo .ll{transform-box:fill-box;transform-origin:50% 60%}
@media (prefers-reduced-motion:no-preference){
  .nav__logo:hover .lo,.footer__logo:hover .lo,.logo.is-wiggle .lo{animation:wobO 1.15s ease-in-out infinite}
  .nav__logo:hover .lw,.footer__logo:hover .lw,.logo.is-wiggle .lw{animation:wobW 1.15s ease-in-out infinite .12s}
}
@keyframes wobO{0%,100%{transform:scale(1)}30%{transform:scale(1.07,.94)}62%{transform:scale(.95,1.05)}}
@keyframes wobW{0%,100%{transform:none}33%{transform:scaleY(1.07) rotate(-2.5deg)}66%{transform:scaleY(.94) rotate(2deg)}}

/* ── Tombol ── */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.6rem;border-radius:999px;border:1.5px solid var(--btn-line, currentColor);background:var(--btn-bg, transparent);color:var(--btn-fg, currentColor);font-weight:600;font-size:1rem;line-height:1.2;letter-spacing:-.01em;text-decoration:none;text-align:center;cursor:pointer;transition:color .5s var(--ease),border-color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--sweep);transform:scaleX(0);transform-origin:left center;transition:transform .65s var(--ease)}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.9375rem}
.btn--block{width:100%}
.btn--primary{--btn-bg:var(--ungu);--btn-fg:var(--krem);--btn-line:var(--ungu);--sweep:var(--arang)}
.btn--outline{--btn-fg:var(--krem);--btn-line:rgba(230,228,207,.75);--sweep:var(--ungu)}
.btn--ink{--btn-fg:var(--ink);--btn-line:var(--ink);--sweep:var(--ungu)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleX(1)}
  .btn--outline:hover{border-color:var(--ungu)}
  .btn--ink:hover{color:var(--krem);border-color:var(--ungu)}
  .btn--primary:hover{border-color:var(--arang)}
}
.light .btn--primary{--sweep:var(--arang)}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px}
.link-arrow::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ungu)}
.icon-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line-dark);background:transparent;color:var(--krem);font-size:1.125rem;cursor:pointer;transition:background .4s var(--ease),border-color .4s var(--ease)}
@media (hover:hover){.icon-btn:hover{background:var(--ungu);border-color:var(--ungu)}}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:.25rem .75rem;border:1px solid rgba(230,228,207,.45);border-radius:999px;font-size:.75rem;letter-spacing:.04em}
.tag--ink{border-color:var(--line-light);color:var(--ink)}

/* ── Preloader ── */
.preloader{display:none}
.has-preloader .preloader{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:var(--ungu);color:var(--krem);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.has-preloader body{overflow:hidden}
.preloader__logo{width:min(60vw,400px)}
.preloader .logo>*{opacity:0;animation:pop .42s var(--ease) forwards}
.preloader .ll{animation-delay:.12s}
.preloader .lo{animation-delay:.24s}
.preloader .lw{animation-delay:.36s}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.preloader.is-done{transform:translateY(-101%)}

/* ── Kursor ── */
.cursor{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursor{display:block;position:fixed;left:0;top:0;z-index:120;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--krem);mix-blend-mode:difference;pointer-events:none;opacity:0;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),opacity .3s}
  .cursor.is-on{opacity:1}
  .cursor.is-big{width:64px;height:64px;margin:-32px 0 0 -32px}
}

/* ── Navbar ── */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top, 0px);transition:transform .55s var(--ease),background-color .4s,backdrop-filter .4s}
.nav.is-scrolled{background:rgba(27,29,27,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.nav.is-hidden{transform:translateY(-105%)}
.nav__inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto}
.nav__logo{display:flex;align-items:center;min-height:44px;width:78px;color:var(--krem)}
.nav__links,.nav__cta{display:none}
.nav__toggle{position:relative;width:48px;height:48px;margin-right:-10px;border:0;background:transparent;cursor:pointer}
.nav__toggle i{position:absolute;left:13px;right:13px;height:2px;background:var(--krem);border-radius:2px;transition:transform .45s var(--ease)}
.nav__toggle i:nth-of-type(1){top:19px}
.nav__toggle i:nth-of-type(2){top:27px}
.nav__toggle[aria-expanded="true"] i:nth-of-type(1){transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] i:nth-of-type(2){transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1024px){
  .nav__links{display:flex;gap:clamp(1rem,2vw,2rem);margin-left:auto}
  .nav__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:500;text-decoration:none}
  .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
  .nav__cta{display:inline-flex}
  .nav__toggle{display:none}
}
.mnav{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));background:var(--arang);visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s .4s}
.mnav.is-open{visibility:visible;opacity:1;transition:opacity .4s var(--ease)}
.mnav__list{list-style:none;display:grid;gap:.25rem}
.mnav__list a{display:flex;align-items:baseline;gap:.75rem;min-height:56px;font-size:clamp(2.25rem,10vw,3.5rem);font-weight:600;letter-spacing:-.04em;line-height:1.1;text-decoration:none}
.mnav__list .mono{font-size:.8125rem;color:var(--krem-soft);letter-spacing:0}
@media (min-width:1024px){.mnav{display:none}}

/* ── Hero ── */
.hero{position:relative;display:flex;align-items:flex-end;height:100svh;min-height:560px;overflow:hidden;color:var(--krem);background:var(--arang)}
.hero__media{position:absolute;inset:0}
.hero__photo,.hero__photo img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__photo img{object-position:50% 60%;transform:scale(1.06)}
@media (prefers-reduced-motion:no-preference){.hero__photo img{animation:kenburns 26s ease-in-out infinite alternate}}
@keyframes kenburns{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.18) translate(-2.5%,-2%)}}
.hero__video{display:none}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,29,27,.6) 0%,rgba(27,29,27,.08) 26%,rgba(27,29,27,.25) 50%,rgba(27,29,27,.9) 88%,var(--arang) 100%)}
.hero__content{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter) clamp(1.5rem,5vw,3.5rem)}
.hero__title{font-size:clamp(3rem,13.4vw,11.25rem);line-height:.9;letter-spacing:-.05em;font-weight:500;margin-bottom:1.25rem}
.hero__title .line--loud{font-weight:700;letter-spacing:-.055em}
.hero__sub{font-size:1.0625rem;font-weight:500;margin-bottom:1rem}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.status{display:inline-flex;align-items:center;gap:.5rem;min-height:32px;padding:.25rem .8rem;border-radius:999px;font-size:.875rem;font-weight:600;background:rgba(27,29,27,.55);border:1px solid rgba(230,228,207,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.status.is-open{background:var(--daun);border-color:var(--daun)}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--beton)}
.status.is-open .status__dot{background:var(--krem)}
@media (prefers-reduced-motion:no-preference){.status.is-open .status__dot{animation:pulse 2.2s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.35}}
.hero__ctas{display:grid;gap:.75rem}
@media (min-width:560px){.hero__ctas{grid-auto-flow:column;justify-content:start}}
@media (min-width:768px){
  .hero__video{display:block}
  .hero__photo{display:none}
}
@media (min-width:1024px){
  .hero__content{display:grid;grid-template-columns:1fr auto;align-items:end;gap:3rem}
  .hero__title{margin-bottom:0}
  .hero__side{padding-bottom:.6rem;max-width:26rem}
}

/* ── Gambar umum ── */
figure img{width:100%}
.reveal-img{overflow:hidden}
.parallax{position:relative;overflow:hidden}
.parallax img{position:absolute;inset:-8% 0 auto;width:100%;height:116%;object-fit:cover}

/* ── Manifesto ── */
.manifesto{padding-block:var(--section)}
.manifesto__grid{display:grid;gap:3rem}
.manifesto__photo img{aspect-ratio:4/5;object-fit:cover}
.manifesto__lead{font-size:clamp(1.75rem,6.2vw,3.75rem);line-height:1.1;letter-spacing:-.035em;font-weight:500;max-width:22ch}
.manifesto__lead .w{transition:color .35s linear}
.manifesto__lead.is-split .w{color:#555650}
.manifesto__lead.is-split .w.is-lit{color:var(--krem)}
.rename{margin-top:clamp(3rem,7vw,5rem);padding-top:1.5rem;border-top:1px solid var(--line-dark);display:grid;gap:1rem;max-width:40rem}
.rename__title{font-size:1rem;font-weight:700;color:var(--krem)}
.rename p{color:var(--beton-muda);font-size:1.0625rem;line-height:1.65}
.rename s{position:relative;text-decoration:none;white-space:nowrap}
.rename s::after{content:"";position:absolute;left:-.1em;right:-.1em;top:54%;height:2px;background:#9D7BF5;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.rename.is-struck s::after{transform:scaleX(1)}
.rename.is-struck s:nth-of-type(2)::after{transition-delay:.25s}
.no-js .rename s::after,.reduce .rename s::after{transform:scaleX(1)}
@media (min-width:1024px){
  .manifesto__grid{grid-template-columns:5fr 7fr;gap:clamp(3rem,6vw,7rem);align-items:start}
  .manifesto__photo{position:sticky;top:calc(var(--nav-h) + 3vh)}
  .manifesto__text{padding-top:8vh}
}

/* ── Space ── */
.space{position:relative;overflow:hidden;padding-block:var(--section)}
.space__head{display:grid;gap:.75rem;margin-bottom:2rem}
.space__intro{color:var(--krem-soft);font-size:1.0625rem;max-width:28rem}
.space__hint{font-size:.8125rem;color:var(--krem-soft)}
.hint-wheel{display:none}
.space__track{list-style:none;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
.space__track::-webkit-scrollbar{display:none}
.space__item{flex:0 0 80%;scroll-snap-align:start}
.space__item:last-child{margin-right:var(--gutter)}
.space__item img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:768px){.space__item{flex-basis:44%}}
@media (min-width:1024px){.space__item{flex-basis:32%}}
.space.is-pinned{height:100svh;padding-block:0;display:flex;flex-direction:column;justify-content:center}
.space.is-pinned .space__head{margin-bottom:3vh;grid-template-columns:auto 1fr auto;align-items:end;gap:3rem}
.space.is-pinned .space__intro{padding-bottom:.6rem}
.space.is-pinned .hint-touch{display:none}
.space.is-pinned .hint-wheel{display:inline}
.space.is-pinned .space__track{overflow:visible;width:max-content;scroll-snap-type:none;gap:2vw}
.space.is-pinned .space__item{flex:0 0 auto;width:calc(62vh * .8);margin-right:0}
.space.is-pinned .space__item:nth-child(even){margin-top:6vh}
.space.is-pinned .space__item img{height:62vh;width:100%}
.leaf{position:absolute;inset:-20%;z-index:3;pointer-events:none;background:url(../img/17-light-overlay.webp) center/cover no-repeat;mix-blend-mode:screen;opacity:.16;filter:blur(1.5px)}
@media (prefers-reduced-motion:no-preference){.leaf{animation:leafDrift 26s ease-in-out infinite alternate;will-change:transform}}
@keyframes leafDrift{from{transform:translate3d(-4%,-2%,0) rotate(-2deg) scale(1)}to{transform:translate3d(4%,3%,0) rotate(2deg) scale(1.06)}}

/* ── Coffee ── */
.coffee{padding-block:var(--section)}
.coffee__wide{aspect-ratio:4/5}
.coffee__wide img{object-position:50% 50%}
.coffee__grid{display:grid;gap:3rem;margin-top:clamp(3rem,7vw,6rem)}
.coffee__text .h-section{margin-bottom:2rem}
.xbar{list-style:none;border-top:1.5px solid var(--ink);margin-bottom:1.5rem;max-width:32rem}
.xbar li{display:grid;grid-template-columns:2.75rem 1fr;align-items:baseline;gap:.5rem;padding-block:1.1rem;border-bottom:1px solid var(--line-light)}
.xbar__n{font-size:.8125rem;color:var(--ink-soft)}
.xbar__name{font-size:clamp(1.375rem,4.5vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.coffee__duo{position:relative;padding-bottom:22%}
.duo__a{width:64%}
.duo__b{position:absolute;right:0;bottom:0;width:54%;outline:clamp(6px,1.2vw,12px) solid var(--kertas)}
.coffee__duo img{aspect-ratio:4/5;object-fit:cover}
.coffee__close{margin-top:clamp(3rem,8vw,7rem);aspect-ratio:4/5}
.coffee__close img{object-position:50% 60%}
@media (min-width:768px){
  .coffee__wide{aspect-ratio:16/9}
  .coffee__close{aspect-ratio:16/9}
}
@media (min-width:1024px){
  .coffee__wide{aspect-ratio:21/9}
  .coffee__grid{grid-template-columns:5fr 7fr;align-items:center;gap:6vw}
  .coffee__duo{padding-bottom:16%}
  .duo__a{width:58%;margin-left:6%}
  .duo__b{width:46%}
  .coffee__close{aspect-ratio:2.2/1;width:76%;margin-left:auto}
}

/* ── Signature ── */
.signature{--focus:var(--krem);background:var(--ungu);color:var(--krem);padding-block:var(--section)}
.signature .h-section{margin-bottom:clamp(2rem,5vw,4rem)}
.sig__grid{display:grid;gap:1.5rem}
.sig-card{background:var(--kertas);color:var(--ink);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.sig-card__img{position:relative;overflow:hidden;aspect-ratio:4/5}
.sig-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sig-card__body{padding:1.5rem 1.25rem 1.75rem;display:grid;gap:.6rem}
.sig-card__n{font-size:.8125rem;color:var(--ink-soft)}
.sig-card__title{color:var(--ungu);font-size:clamp(1.875rem,6.5vw,2.75rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.sig-card__title .script{font-size:1.12em;letter-spacing:0;margin-right:.03em}
.sig-card__desc{font-size:1.0625rem;line-height:1.55;max-width:34rem}
.badge{position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;min-height:32px;padding:.25rem .8rem;border-radius:999px;background:var(--ungu);color:var(--krem);font-family:var(--f-mono);font-size:.75rem}
.spec{margin-top:.75rem;border-top:1.5px solid var(--ink);font-size:.8125rem;line-height:1.45}
.spec div{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;padding-block:.55rem;border-bottom:1px solid var(--line-light)}
.spec dt{color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){
  .sig-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -28px rgba(27,29,27,.55)}
  .sig-card:hover .sig-card__img img{transform:scale(1.04)}
}
.sig-card.is-tapped{transform:translateY(-6px)}
.sig-card.is-tapped .sig-card__img img{transform:scale(1.04)}
@media (min-width:768px){
  .sig__grid{grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2.5rem);align-items:start}
  .sig-card:nth-child(2){margin-top:clamp(3rem,8vw,8rem)}
  .sig-card__body{padding:2rem 2rem 2.25rem}
}

/* ── Menu ── */
.menu{padding-block:var(--section)}
.menu__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}
.menu__note{font-size:.8125rem;color:var(--ink-soft)}
.menu__tabs-wrap{margin-inline:calc(var(--gutter) * -1);margin-bottom:2rem;position:relative}
.menu__tabs{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:4px var(--gutter);scrollbar-width:none}
.menu__tabs::-webkit-scrollbar{display:none}
.menu__tabs::after{content:"";flex:0 0 calc(var(--gutter) - .5rem)}
.tab{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line-light);background:transparent;color:var(--ink);font-weight:600;font-size:.9375rem;white-space:nowrap;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.tab[aria-selected="true"]{background:var(--ungu);color:var(--krem);border-color:var(--ungu)}
@media (hover:hover){.tab:not([aria-selected="true"]):hover{border-color:var(--ink)}}
.menu__grid{display:grid;gap:2rem}
.menu__panel{min-height:20rem;outline-offset:6px}
.menu__loading,.menu__error{color:var(--ink-soft);font-size:.875rem}
.mcat__title{color:var(--ungu);font-size:clamp(1.5rem,5vw,2.25rem);font-weight:700;letter-spacing:-.035em;line-height:1;margin-bottom:1rem}
.mlist{list-style:none;border-top:1.5px solid currentColor}
.mitem{display:grid;grid-template-columns:2.5rem 1fr;column-gap:.75rem;align-items:baseline;padding-block:1rem;border-bottom:1px solid var(--line-light)}
.mitem__n{font-size:.8125rem;color:var(--ink-soft)}
.mitem__name{font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3}
.mitem__desc{grid-column:2;color:var(--ink-soft);font-size:1rem;line-height:1.5;margin-top:.2rem;max-width:44ch}
.mcat--violet{background:var(--ungu-redup);color:var(--krem);padding:clamp(1.5rem,4vw,2.75rem);--focus:var(--krem)}
.mcat--violet .mcat__title{color:var(--krem);text-transform:uppercase;font-size:clamp(1.25rem,4vw,1.75rem);letter-spacing:.02em;font-style:italic}
.mcat--violet .mlist{border-color:rgba(230,228,207,.6)}
.mcat--violet .mitem{border-color:rgba(230,228,207,.22)}
.mcat--violet .mitem__n{color:#D8D2EA}
.mcat--violet .mitem__name{text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:1rem}
@media (min-width:1024px){
  .menu__grid{grid-template-columns:5fr 7fr;gap:6vw;align-items:start}
              .menu__tabs-wrap{margin-inline:0}
  .menu__tabs{flex-wrap:wrap;overflow:visible;padding-inline:0}
}

/* ── Sessions ── */
.sessions{padding-block:var(--section)}
.sessions__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sessions__head{grid-column:1/-1;display:grid;gap:1.25rem;justify-items:start;margin-bottom:1.5rem}
.sessions__head p{color:var(--krem-soft);font-size:1.0625rem;max-width:26rem}
.sessions__head .btn{width:100%}
.poster{grid-column:1/-1;position:relative}
.poster img{aspect-ratio:4/5;object-fit:cover}
.poster__cap{position:absolute;inset:auto 0 0;padding:4rem 1.25rem 1.25rem;background:linear-gradient(180deg,transparent,rgba(27,29,27,.92));display:grid;gap:.25rem}
.poster__cap .mono{font-size:.8125rem}
.poster__cap h3{font-size:clamp(2rem,8vw,3.5rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.sessions__team img,.sessions__moment img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:560px){.sessions__head .btn{width:auto}}
@media (min-width:1024px){
  .sessions__grid{grid-template-columns:repeat(12,1fr);gap:2vw;align-items:start}
  .sessions__head{grid-column:8/13;grid-row:1;margin:0;align-self:start}
  .poster{grid-column:1/7;grid-row:1/3}
  .sessions__team{grid-column:8/10;grid-row:2;align-self:end}
  .sessions__moment{grid-column:10/13;grid-row:2;align-self:end;margin-bottom:-6vw}
}

/* ── Photoshoot ── */
.shoot{padding-block:var(--section)}
.shoot__grid{display:grid;gap:2.5rem}
.shoot__head{display:grid;gap:1.25rem;align-content:start}
.shoot__lede{font-size:1.125rem}
.price-sum{border-top:1.5px solid var(--ink);margin-top:.5rem}
.price-sum p{display:flex;justify-content:space-between;gap:1rem;padding-block:.85rem;border-bottom:1px solid var(--line-light)}
.price-sum .mono{white-space:nowrap}
.price-sum__total{font-weight:700;font-size:1.125rem}
.price-sum__total .mono{font-weight:700;color:var(--ungu)}
.shoot__cta{width:100%;margin-top:.5rem}
.shoot__ctanote{font-size:.8125rem;color:var(--ink-soft)}
.shoot__details{border-top:1.5px solid var(--ink)}
.shoot__details details{border-bottom:1px solid var(--line-light)}
.shoot__details summary{display:flex;align-items:center;gap:.9rem;min-height:60px;cursor:pointer;list-style:none;font-weight:600;font-size:1.125rem;letter-spacing:-.015em}
.shoot__details summary::-webkit-details-marker{display:none}
.shoot__details summary .mono{font-size:.8125rem;color:var(--ink-soft);font-weight:400}
.shoot__details summary::after{content:"";margin-left:auto;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .4s var(--ease)}
.shoot__details details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.acc__body{padding:0 0 1.25rem 2.6rem;display:grid;gap:.5rem;color:var(--ink)}
.acc__body ul{list-style:none;display:grid;gap:.4rem}
.acc__body li{position:relative;padding-left:1.25rem}
.acc__body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--ungu)}
.slots{display:flex;flex-wrap:wrap;gap:.5rem}
.slots .mono{padding:.3rem .7rem;border:1px solid var(--line-light);border-radius:999px;font-size:.875rem}
@media (min-width:560px){.shoot__cta{width:auto;justify-self:start}}
@media (min-width:768px){
  .shoot__details.is-static summary{cursor:default;min-height:auto;padding-top:1.5rem;padding-bottom:.75rem}
  .shoot__details.is-static summary::after{display:none}
  .shoot__details.is-static{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem;border-top:0}
  .shoot__details.is-static details{border-top:1.5px solid var(--ink);border-bottom:0}
  .shoot__details.is-static details:last-child{grid-column:1/-1}
  .shoot__details.is-static .acc__body{padding-left:0}
}
@media (min-width:1024px){.shoot__grid{grid-template-columns:5fr 7fr;gap:6vw}}

/* ── Reviews ── */
.reviews{padding-block:var(--section)}
.reviews__head{display:grid;gap:1.25rem;margin-bottom:2rem}
.rating{display:flex;align-items:baseline;flex-wrap:wrap;gap:.75rem 1rem}
.rating__score{font-size:clamp(3.5rem,14vw,7rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.rating__star{color:var(--ungu);margin-left:.08em;font-size:.6em;vertical-align:.35em;filter:brightness(1.35)}
.rating__count{font-size:.875rem;color:var(--krem-soft)}
.reviews__nav{display:none;gap:.5rem}
.reviews__track{list-style:none;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter)));scroll-padding-inline:max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter)));scrollbar-width:none}
.reviews__track::-webkit-scrollbar{display:none}
.reviews__track::after{content:"";flex:0 0 1px}
.rev{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-height:16rem;padding:1.5rem;border:1px solid var(--line-dark);background:rgba(230,228,207,.03)}
.rev blockquote p{font-family:var(--f-script);font-style:italic;font-size:clamp(1.5rem,5.5vw,2rem);line-height:1.2;letter-spacing:-.01em}
.rev__by{font-size:.8125rem;color:var(--krem-soft)}
.rev__by::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ungu);margin-right:.6rem;vertical-align:.15em;filter:brightness(1.35)}
@media (min-width:768px){
  .rev{flex-basis:44%}
  .reviews__head{grid-template-columns:1fr auto;align-items:end}
  .reviews__head .h-section{grid-column:1/-1}
  .reviews__nav{display:flex}
}
@media (min-width:1280px){.rev{flex-basis:31%}}

/* ── Visit ── */
.visit{padding-block:var(--section)}
.visit__grid{display:grid;gap:2.5rem}
.visit__info{display:grid;gap:1.5rem;align-content:start}
.visit__addr{font-style:normal;font-size:clamp(1.25rem,4vw,1.75rem);font-weight:500;letter-spacing:-.025em;line-height:1.3;max-width:28ch}
.hours{width:100%;max-width:28rem;border-collapse:collapse;border-top:1.5px solid var(--ink)}
.hours th,.hours td{padding:.75rem .75rem;border-bottom:1px solid var(--line-light);text-align:left;font-weight:500}
.hours td{text-align:right;white-space:nowrap}
.hours tr.is-today{background:var(--ungu);color:var(--krem)}
.hours tr.is-today th::after{content:"Hari ini";margin-left:.6rem;font-family:var(--f-mono);font-size:.75rem;font-weight:400;opacity:.9}
.visit__ctas{display:grid;gap:.75rem}
.visit__phone{color:var(--ink-soft)}
.visit__phone .mono{color:var(--ink)}
@media (min-width:560px){.visit__ctas{grid-auto-flow:column;justify-content:start}}
.map{position:relative;width:100%;aspect-ratio:6/5;overflow:hidden;background:var(--beton-muda)}
.map__static{position:absolute;inset:0;display:block}
.map__static svg{width:100%;height:100%}
.map__pin{position:absolute;left:58%;top:47%;width:44px;height:44px;margin:-44px 0 0 -22px}
.map__pin i{position:absolute;inset:0;background:var(--ungu);border-radius:58% 42% 50% 50% / 52% 48% 52% 48%}
.map__pin i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--krem)}
@media (prefers-reduced-motion:no-preference){.map__pin i{animation:wobO 3s ease-in-out infinite}}
.map__label{position:absolute;left:1rem;bottom:1rem;padding:.4rem .7rem;background:var(--kertas);font-size:.75rem;color:var(--ink)}
.map__load{display:none;position:absolute;right:1rem;bottom:1rem;background:var(--kertas)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05) brightness(1.02)}
@media (min-width:1024px){
  .visit__grid{grid-template-columns:5fr 7fr;gap:6vw;align-items:stretch}
  .map{aspect-ratio:auto;min-height:34rem}
  .map__load{display:inline-flex}
}

/* ── Footer ── */
.footer{--focus:var(--krem);background:var(--ungu);color:var(--krem);padding:clamp(3rem,8vw,6rem) 0 calc(6.5rem + env(safe-area-inset-bottom,0px));overflow:hidden}
.footer__logo{display:block;color:var(--krem)}
.footer__row{display:grid;gap:1rem;margin-top:clamp(2rem,5vw,4rem);padding-top:1.25rem;border-top:1px solid rgba(230,228,207,.4)}
.footer__tag{font-size:1.25rem;font-weight:600;letter-spacing:-.025em}
.footer__ig{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:.3em}
.footer__copy{font-size:.8125rem}
@media (min-width:768px){.footer__row{grid-template-columns:1fr auto auto;align-items:center;gap:2rem}}
@media (min-width:1024px){.footer{padding-bottom:clamp(2rem,4vw,3rem)}}

/* ── Bottom bar (mobile) ── */
.bbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:58;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:rgba(27,29,27,.84);border:1px solid var(--line-dark);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)));transition:transform .6s var(--ease)}
.bbar.is-visible{transform:none}
.bbar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:600;font-size:.9375rem;text-decoration:none}
.bbar a:first-child{background:var(--ungu)}
@media (min-width:1024px){.bbar{display:none}}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .leaf{animation:none}
}

/* Judul di kolom sempit (desktop) */
@media (min-width:1024px){
  .coffee__text .h-section,.shoot__head .h-section,.visit__info .h-section,.sessions__head .h-section{font-size:clamp(3rem,6.2vw,6.25rem)}
}
@media (min-width:1024px){.hero__title{font-size:clamp(5rem,8.8vw,10.5rem)}}
.visit__info .tag{justify-self:start}

/* ── Menu: panel kategori + marquee ── */
.marquee{overflow:hidden;border-block:1.5px solid var(--ink);margin-bottom:2rem;padding-block:.9rem;background:var(--kertas)}
.marquee__track{display:flex;width:max-content;align-items:center;gap:1.25rem;white-space:nowrap;font-size:clamp(1.25rem,3.6vw,2rem);font-weight:600;letter-spacing:-.03em}
.marquee__track svg{width:.7em;height:.7em;flex:0 0 auto;color:var(--ungu)}
@media (prefers-reduced-motion:no-preference){.marquee__track{animation:marquee 90s linear infinite}.marquee:hover .marquee__track{animation-play-state:paused}}
@keyframes marquee{to{transform:translateX(-50%)}}
.mfeat{--focus:var(--krem);position:relative;overflow:hidden;display:flex;align-items:center;gap:1.25rem;padding:1.25rem;background:var(--arang);color:var(--krem)}
.flower{flex:0 0 auto;width:72px;height:72px;overflow:visible}
.flower circle{fill:var(--krem);transform-box:fill-box;transform-origin:center}
.flower .core{fill:#9D7BF5}
@media (prefers-reduced-motion:no-preference){.flower .petals{transform-origin:50px 50px;animation:spin 40s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.mfeat__text{display:grid;gap:.35rem;min-width:0}
.mfeat__idx,.mfeat__count{font-size:.8125rem;color:var(--krem-soft)}
.mfeat__title{font-size:clamp(1.75rem,7vw,2.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;overflow-wrap:anywhere}
.mcat--violet .mcat__title,.mcat__title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mcat--violet .mlist{border-top:0}
@media (min-width:1024px){
  .mfeat{position:sticky;top:calc(var(--nav-h) + 4vh);flex-direction:column;align-items:flex-start;justify-content:space-between;aspect-ratio:4/5;padding:clamp(1.75rem,3vw,2.75rem)}
  .flower{width:min(62%,300px);height:auto;aspect-ratio:1;align-self:center;margin-block:auto}
  .mfeat__title{font-size:clamp(2.5rem,4.4vw,4.5rem)}
}