/* ==========================================================
     Cuprins (căutați banner-ul exact cu Cmd/Ctrl+F):
     - :root / variabile de culoare + dark mode      (mai jos)
     - reveal-on-scroll
     - header
     - "keep your eyes up" tagline decoration
     - meniu page: scattered coffee bag decorations
     - small ambient clouds on every page
     - meniu page: V60 pour widget
     - buttons
     - sky band / hero (Acasă)
     - quotes (recenzii)
     - menu (Meniu)
     - photos (Poze) + lightbox
     - call modal
     - about (Despre)
     - contact
     - privacy modal + cookie consent banner + Instagram embed gate
     ========================================================== */
  :root{
    --sky:#C3E1F9;
    --bg:#C3E1F9;
    --surface:#FFFFFF;
    --surface-2:#C3E1F9;
    --ink:#323334;
    --muted:color-mix(in srgb, #323334 60%, transparent);
    --accent:#093CAF;
    --accent-strong:#093CAF;
    --accent-ink:#FFFFFF;
    --coral:#FFC0D5;
    --coral-ink:#323334;
    --open:#093CAF;
    --closed-text:color-mix(in srgb, #323334 55%, transparent);
    --line:color-mix(in srgb, #323334 14%, transparent);
    --shadow:0 1px 2px color-mix(in srgb, #323334 7%, transparent), 0 10px 26px -14px color-mix(in srgb, #323334 24%, transparent);
    color-scheme: light;
  }
  :root[data-theme="dark"]{
    --sky:#323334;
    --bg:#323334;
    --surface:color-mix(in srgb, #FFFFFF 15%, #323334);
    --surface-2:color-mix(in srgb, #FFFFFF 8%, #323334);
    --ink:#FFFFFF;
    --muted:color-mix(in srgb, #FFFFFF 62%, transparent);
    --accent:color-mix(in srgb, #093CAF 45%, #FFFFFF);
    --accent-strong:color-mix(in srgb, #093CAF 45%, #FFFFFF);
    --accent-ink:#323334;
    --coral:#FFC0D5;
    --coral-ink:#323334;
    --open:color-mix(in srgb, #093CAF 45%, #FFFFFF);
    --closed-text:color-mix(in srgb, #FFFFFF 55%, transparent);
    --line:color-mix(in srgb, #FFFFFF 14%, transparent);
    --shadow:0 1px 2px color-mix(in srgb, #323334 60%, transparent), 0 14px 32px -16px color-mix(in srgb, #323334 85%, transparent);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Quicksand',ui-sans-serif,system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    padding-inline:0;
    /* Sticky-footer layout: keeps the footer pinned to the bottom of the
       viewport on short pages (e.g. About) instead of floating right
       under the content with a big gap of empty background below it. */
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2',ui-rounded,Georgia,serif;
    font-weight:700;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
    font-variant-numeric: tabular-nums;
  }
  a{color:inherit;}
  img,svg{max-width:100%;}
  button{font-family:inherit;}

  /* language toggling */
  :root:not([data-lang="en"]) .en{display:none;}
  :root[data-lang="en"] .ro{display:none;}

  [hidden]{display:none !important;}

  .wrap{
    max-width:960px;
    margin-inline:auto;
    padding-inline:20px;
  }

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

  /* ---------- reveal-on-scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .reveal.in-view{opacity:1; transform:none;}
  .quotes .quote:nth-child(2){transition-delay:.08s;}
  .quotes .quote:nth-child(3){transition-delay:.16s;}
  .menu-cat + .menu-cat{transition-delay:.05s;}
  .menu-cat + .menu-cat + .menu-cat{transition-delay:.1s;}
  .menu-cat + .menu-cat + .menu-cat + .menu-cat{transition-delay:.15s;}
  .contact-grid .card:nth-child(2){transition-delay:.08s;}

  /* ---------- header ---------- */
  header.site{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:40;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color .25s, box-shadow .25s;
  }
  header.site.scrolled{
    border-bottom-color:var(--line);
    box-shadow:0 6px 20px -16px color-mix(in srgb, #323334 40%, transparent);
  }
  .nav-row{
    padding:10px 28px;
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Baloo 2',serif;
    font-weight:800;
    font-size:1.28rem;
    letter-spacing:-0.02em;
    text-decoration:none;
    margin-right:auto;
  }
  .brand-mark{
    width:40px;height:40px;flex:none;
    border-radius:12px;
    display:block;
    box-shadow:var(--shadow);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);}
  nav.pages{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
  }
  nav.pages a{
    text-decoration:none;
    font-size:.92rem;
    font-weight:600;
    color:var(--muted);
    padding:8px 14px;
    border-radius:100px;
    transition:color .15s, background .15s, transform .2s;
    display:inline-block;
  }
  nav.pages a:hover{color:var(--ink); transform:translateY(-1px);}
  nav.pages a[aria-current="page"]{
    color:var(--accent-ink);
    background:var(--accent-strong);
  }
  #themeToggle{
    width:36px;
    height:36px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:border-color .15s, transform .2s;
  }
  #themeToggle svg{width:18px;height:18px;}
  #themeToggle:hover{border-color:var(--accent); transform:translateY(-1px);}
  #themeToggle:active{transform:scale(.9);}
  #themeToggle .theme-icon-moon{display:none;}
  :root[data-theme="dark"] #themeToggle .theme-icon-sun{display:none;}
  :root[data-theme="dark"] #themeToggle .theme-icon-moon{display:block;}

  #langToggle{
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.03em;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    border-radius:100px;
    padding:7px 12px;
    cursor:pointer;
    transition:border-color .15s, transform .2s;
  }
  #langToggle:hover{border-color:var(--accent); transform:translateY(-1px);}
  #langToggle:active{transform:scale(.94);}
  #langToggle:focus-visible, a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  main{display:block; flex:1 0 auto;}
  footer.site{flex:none;}
  section.page{position:relative; padding-block:0 72px; scroll-margin-top:var(--hh,64px);}

  /* ---------- "keep your eyes up" tagline decoration ---------- */
  .tagline{
    position:absolute;
    display:flex;
    flex-direction:column;
    gap:1px;
    font-family:'Quicksand',ui-sans-serif,sans-serif;
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.03em;
    line-height:1.5;
    text-transform:uppercase;
    color:var(--accent-strong);
    opacity:.4;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
    z-index:1;
  }
  .tagline.on-sky{opacity:.6;}
  .tagline.a{top:18%; left:3%; transform:rotate(-8deg);}
  .tagline.b{top:50%; right:4%; transform:rotate(6deg);}
  @media (max-width:720px){
    .tagline.a, .tagline.b{display:none;}
  }
  .tagline.side{display:none;}
  @media (min-width:1150px){
    .tagline.side{
      display:flex;
      flex-direction:row;
      gap:3px;
      position:fixed;
      top:50%;
      transform:translateY(-50%);
      z-index:5;
    }
    .tagline.side span{writing-mode:vertical-rl; transform:rotate(180deg);}
    .tagline.side.left{left:20px;}
    .tagline.side.right{right:20px;}
    #page-meniu .tagline.side.left{display:none;}
  }

  /* ---------- meniu page: scattered coffee bag decorations ---------- */
  .bag-deco{display:none;}
  @media (min-width:1150px){
    .bag-deco{
      display:block;
      position:absolute;
      pointer-events:none;
    }
    .bag-deco.bag1{width:92px; top:9%; right:20px; transform:rotate(-6deg);}
    .bag-deco.bag2{width:80px; top:88%; left:16px; transform:rotate(5deg);}
    .bag-deco.bag3{width:72px; top:58%; right:34px; transform:rotate(8deg); opacity:.95;}
  }

  /* ---------- small ambient clouds on every page (not just home) ---------- */
  .page-cloud{display:none;}
  @media (min-width:1150px){
    .page-cloud{
      display:block;
      position:absolute;
      color:var(--surface);
      pointer-events:none;
      z-index:0;
    }
    .page-cloud.pc1{width:64px; top:6%; left:2%; opacity:.5; animation:driftA 20s ease-in-out infinite;}
    .page-cloud.pc2{width:44px; top:24%; right:4%; opacity:.4; animation:driftB 17s ease-in-out infinite;}
    .page-cloud.pc3{width:56px; top:56%; left:3%; opacity:.45; animation:driftB 23s ease-in-out infinite;}
    .page-cloud.pc4{width:38px; top:80%; right:3%; opacity:.4; animation:driftA 15s ease-in-out infinite;}
    .page-cloud.pc5{width:48px; top:94%; left:8%; opacity:.35; animation:driftA 19s ease-in-out infinite;}
  }

  /* ---------- meniu page: V60 pour widget ---------- */
  .pour-widget{
    display:none;
    position:fixed;
    left:20px;
    top:calc(var(--hh, 64px) + 36px);
    width:92px;
    flex-direction:column;
    align-items:center;
    color:var(--accent-strong);
    opacity:.9;
    z-index:4;
    pointer-events:none;
  }
  @media (min-width:1150px){
    body[data-route="meniu"] .pour-widget{display:flex;}
  }
  .pour-widget svg{width:100%; height:auto; display:block; overflow:visible;}
  .pour-server{transition:transform .35s cubic-bezier(.4,0,.2,1);}
  .pour-widget.pouring .pour-server{transform:rotate(-16deg); transform-origin:74% 14%;}
  .pour-stream{
    width:3px; height:18px;
    margin:-2px 0;
    background:var(--accent-strong);
    border-radius:2px;
    opacity:0;
    transition:opacity .2s;
  }
  .pour-widget.pouring .pour-stream{opacity:.85; animation:pourFlow .4s ease-in-out infinite;}
  @keyframes pourFlow{
    0%,100%{ transform:scaleY(1); }
    50%{ transform:scaleY(1.2); }
  }
  .cup-liquid{fill:var(--accent-strong);}
  .drink-anim{
    margin-top:6px;
    opacity:0;
    transition:opacity .6s ease;
  }
  .pour-widget.cup-full .drink-anim{opacity:1;}
  .drink-arm-swing{
    transform-origin:0 0;
    animation:armSwing 5s ease-in-out infinite;
  }
  @keyframes armSwing{
    0%,15%{ transform:rotate(20deg); }
    40%,55%{ transform:rotate(-144deg); }
    80%,100%{ transform:rotate(20deg); }
  }
  .drink-cup{
    transform-origin:0 0;
    animation:cupCounter 5s ease-in-out infinite;
  }
  .drink-cup-fill{fill:var(--accent-strong);}
  @keyframes cupCounter{
    0%,15%{ transform:rotate(-30deg); }
    40%,55%{ transform:rotate(84deg); }
    80%,100%{ transform:rotate(-30deg); }
  }
  .drink-steam{
    animation:steamAtSip 5s ease-in-out infinite;
    transform-origin:bottom center;
  }
  .drink-steam.s2{animation-delay:.3s;}
  @keyframes steamAtSip{
    0%,32%{ opacity:0; transform:translateY(0) scaleY(.7); }
    40%{ opacity:.75; transform:translateY(-4px) scaleY(.9); }
    55%{ opacity:.75; transform:translateY(-8px) scaleY(1.1); }
    63%,100%{ opacity:0; transform:translateY(-10px) scaleY(1.15); }
  }
  @media (prefers-reduced-motion: reduce){
    .pour-server, .pour-stream{transition:none; animation:none;}
    .drink-arm-swing, .drink-cup, .drink-steam{animation:none;}
    .drink-arm-swing{transform:rotate(-144deg);}
    .drink-cup{transform:rotate(84deg);}
    .drink-steam{opacity:.6;}
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    font-weight:700;
    font-size:.95rem;
    padding:12px 22px;
    border-radius:100px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .15s, border-color .15s, box-shadow .25s;
  }
  .btn svg{width:17px;height:17px;flex:none;}
  .btn-primary{background:var(--accent-strong);color:var(--accent-ink); box-shadow:var(--shadow);}
  .btn-primary:hover{filter:brightness(1.08); transform:translateY(-2px) scale(1.03);}
  .btn-primary:active{transform:translateY(0) scale(.98);}
  .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--accent); transform:translateY(-2px) scale(1.03);}
  .btn-ghost:active{transform:translateY(0) scale(.98);}
  .btn-row{display:flex;gap:10px;flex-wrap:wrap;}

  /* ---------- sky band / hero ---------- */
  .sky-band{
    position:relative;
    overflow:hidden;
    background:var(--sky);
    padding-top:20px;
  }
  .cloud-deco{
    position:absolute;
    color:var(--surface);
    opacity:.85;
    pointer-events:none;
  }
  .cloud-deco.sun{color:var(--coral); opacity:.9;}
  .cloud-deco.d1{width:120px; top:6%; left:-2%; animation:driftA 22s ease-in-out infinite;}
  .cloud-deco.d2{width:80px; top:62%; left:4%; opacity:.6; animation:driftB 18s ease-in-out infinite;}
  .cloud-deco.d3{width:150px; top:12%; right:-4%; animation:driftB 26s ease-in-out infinite;}
  .cloud-deco.d4{width:70px; top:70%; right:10%; opacity:.55; animation:driftA 16s ease-in-out infinite;}
  .cloud-deco.d5{width:56px; top:38%; left:14%; opacity:.5; animation:driftB 15s ease-in-out infinite;}
  .cloud-deco.d6{width:100px; top:82%; left:38%; opacity:.5; animation:driftA 20s ease-in-out infinite;}
  .cloud-deco.d7{width:64px; top:20%; right:32%; opacity:.45; animation:driftB 19s ease-in-out infinite;}
  .cloud-deco.d8{width:44px; top:88%; right:2%; opacity:.6; animation:driftA 13s ease-in-out infinite;}
  .cloud-deco.sun{width:90px; top:4%; right:18%; animation:pulseSun 6s ease-in-out infinite;}
  @keyframes driftA{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(14px,-10px);}
  }
  @keyframes driftB{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-16px,8px);}
  }
  @keyframes pulseSun{
    0%,100%{opacity:.75; transform:scale(1);}
    50%{opacity:1; transform:scale(1.08);}
  }

  .hero{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:40px;
    align-items:center;
    padding-block:34px 56px;
  }
  @media (max-width:720px){ .hero{grid-template-columns:1fr; padding-block:22px 40px;} }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--accent-strong);
    margin-bottom:10px;
    display:block;
  }
  .hero h1{font-size:clamp(2.2rem,5.4vw,3.5rem);line-height:1.05;margin:0 0 14px;}
  .hero h1 em{font-style:normal;color:var(--accent-strong);}
  .hero p.lede{font-size:1.08rem;color:var(--ink);opacity:.75;max-width:46ch;margin:0 0 24px;}

  .facts{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:26px;
  }
  .fact-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:100px;
    padding:8px 14px;
    font-size:.85rem;
    color:var(--ink);
    box-shadow:var(--shadow);
    transition:transform .2s;
  }
  .fact-pill:hover{transform:translateY(-2px);}
  .fact-pill svg{width:15px;height:15px;color:var(--accent-strong);flex:none;}
  .fact-pill b{font-family:'IBM Plex Mono',monospace;}

  .hero-art{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:260px;
  }
  .badge-btn{
    display:inline-block;
    position:relative;
    z-index:2;
    background:none;
    border:none;
    padding:0;
    margin:0;
    cursor:grab;
    line-height:0;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  .badge-btn.is-hidden{opacity:0; transform:scale(.5) rotate(12deg);}
  .badge-btn.dragging{cursor:grabbing; transition:none;}
  .badge-btn.dragging .badge-sticker{animation-play-state:paused; transform:rotate(0deg) scale(1.06);}
  .badge-sticker{
    width:clamp(220px,34vw,400px);
    filter:drop-shadow(0 16px 22px color-mix(in srgb, #323334 35%, transparent));
    transform:rotate(-4deg);
    animation:bob 6s ease-in-out infinite;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
  }
  .badge-btn:hover .badge-sticker{animation-play-state:paused; transform:rotate(0deg) scale(1.05);}
  .badge-btn:active .badge-sticker{animation-play-state:paused; transform:rotate(0deg) scale(.96);}
  @keyframes bob{
    0%,100%{transform:rotate(-4deg) translateY(0);}
    50%{transform:rotate(-2deg) translateY(-10px);}
  }
  .concept-btn{
    display:block;
    margin-top:20px;
  }
  .concept-video{
    display:block;
    width:clamp(108px,15vw,168px);
    aspect-ratio:1/1;
    filter:drop-shadow(0 10px 14px color-mix(in srgb, #323334 35%, transparent));
    transform:rotate(6deg);
    animation:bobAlt 7s ease-in-out infinite;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
  }
  .concept-video.chroma-unsupported{border-radius:24px;}
  .concept-video-src{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }
  .concept-btn:hover .concept-video{animation-play-state:paused; transform:rotate(0deg) scale(1.06);}
  .concept-btn:active .concept-video{animation-play-state:paused; transform:rotate(0deg) scale(.96);}
  .concept-btn.dragging .concept-video{animation-play-state:paused; transform:rotate(0deg) scale(1.06);}
  @keyframes bobAlt{
    0%,100%{transform:rotate(6deg) translateY(0);}
    50%{transform:rotate(3deg) translateY(-8px);}
  }
  @media (max-width:720px){
    .concept-video{width:76px;}
  }
  @media (prefers-reduced-motion: reduce){
    .badge-btn{transition:opacity .01ms;}
  }

  .sky-wave{display:block; width:100%; height:auto; position:relative; margin-top:-2px;}
  .sky-wave path{fill:var(--bg);}

  /* ---------- quotes ---------- */
  .reviews-scroller{
    position:relative;
  }
  .reviews-sticky{
    position:sticky;
    top:calc(var(--hh, 64px) + 20px);
  }
  .reviews-viewport{
    overflow:hidden;
    margin-top:20px;
    padding-bottom:4px;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  }
  @media (max-width:720px){
    .reviews-viewport{
      -webkit-mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
      mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    }
  }
  .reviews-track{
    display:flex;
    align-items:flex-start;
    gap:14px;
    width:max-content;
  }
  /* Fallback for reduced-motion / no-JS: a plain swipeable row instead of
     the scroll-driven horizontal reveal. */
  .no-scroll-drive .reviews-scroller{height:auto !important;}
  .no-scroll-drive .reviews-sticky{position:static;}
  .no-scroll-drive .reviews-viewport{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .no-scroll-drive .reviews-viewport::-webkit-scrollbar{display:none;}
  .no-scroll-drive .reviews-track{transform:none !important;}
  .reviews-track .quote{
    width:clamp(240px, 32vw, 320px);
    height:250px;
    flex:none;
    display:flex;
    flex-direction:column;
  }
  .reviews-track .quote p{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:6;
    line-clamp:6;
    -webkit-box-orient:vertical;
  }
  .reviews-track .quote cite{margin-top:auto;}
  /* small clouds filling the empty space below the cards while the section is pinned */
  .reviews-cloud{
    position:absolute;
    color:var(--surface);
    pointer-events:none;
    z-index:0;
  }
  .reviews-cloud.rc1{width:52px; top:calc(100% + 44px); left:4%; opacity:.5; animation:driftA 19s ease-in-out infinite;}
  .reviews-cloud.rc2{width:36px; top:calc(100% + 108px); left:24%; opacity:.4; animation:driftB 15s ease-in-out infinite;}
  .reviews-cloud.rc3{width:60px; top:calc(100% + 30px); right:10%; opacity:.55; animation:driftB 23s ease-in-out infinite;}
  .reviews-cloud.rc4{width:40px; top:calc(100% + 140px); right:34%; opacity:.4; animation:driftA 14s ease-in-out infinite;}
  .reviews-cloud.rc5{width:34px; top:calc(100% + 190px); left:48%; opacity:.35; animation:driftA 17s ease-in-out infinite;}
  @media (max-width:720px){
    .reviews-track .quote{width:78vw;}
  }
  .quote{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    padding:20px;
    box-shadow:var(--shadow);
    transition:transform .25s, box-shadow .25s;
  }
  .quote:hover{transform:translateY(-4px); box-shadow:0 1px 2px color-mix(in srgb, #323334 8%, transparent), 0 16px 30px -14px color-mix(in srgb, #323334 30%, transparent);}
  .quote p{margin:0 0 12px;font-size:.96rem;}
  .quote cite{
    font-style:normal;
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    color:var(--muted);
  }
  .stars{color:var(--coral);-webkit-text-stroke:.5px var(--accent-strong);letter-spacing:2px;font-size:.9rem;display:block;margin-bottom:10px;}

  h2.section-title{
    font-size:clamp(1.5rem,3.4vw,2.1rem);
    margin:0 0 6px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .section-title .heading-icon{width:32px;height:32px;color:var(--accent-strong);flex:none;}
  .section-title .heading-icon .steam{
    animation:steam 5s ease-in-out infinite;
    transform-origin:bottom center;
  }
  .section-title .heading-icon .steam.s2{animation-delay:.7s;}
  .section-title .heading-icon .steam.s3{animation-delay:1.4s;}
  @keyframes steam{
    0%{opacity:0; transform:translateY(0) scaleY(.7);}
    30%{opacity:.85;}
    100%{opacity:0; transform:translateY(-10px) scaleY(1.15);}
  }
  .section-sub{color:var(--muted);margin:0 0 28px;max-width:60ch;}
  .section-head{margin-bottom:8px; padding-top:44px;}

  /* ---------- menu ---------- */
  .menu-tabs{
    position:sticky;
    top:var(--hh,64px);
    z-index:30;
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:10px 0 14px;
    margin-bottom:14px;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(6px);
  }
  .menu-tabs::-webkit-scrollbar{display:none;}
  .menu-tab{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    font-size:.85rem;
    font-weight:700;
    color:var(--muted);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:100px;
    padding:8px 15px;
    cursor:pointer;
    transition:all .2s;
  }
  .menu-tab svg{width:15px;height:15px;}
  .menu-tab:hover{color:var(--ink); border-color:var(--accent);}
  .menu-tab.active{background:var(--accent-strong); color:var(--accent-ink); border-color:var(--accent-strong);}

  .menu-cat{margin-bottom:34px; scroll-margin-top:var(--menu-offset,140px);}
  .menu-cat:first-of-type{margin-top:30px;}
  .menu-cat h3{
    font-size:1.15rem;
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 4px;
  }
  .menu-cat h3 svg{width:19px;height:19px;color:var(--accent-strong);flex:none;}
  .menu-cat .cat-desc{color:var(--muted);font-size:.88rem;margin:0 0 14px;}
  .menu-items{
    display:flex;
    flex-direction:column;
  }
  .menu-item{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:13px 14px;
    border-bottom:1px solid var(--line);
    border-radius:12px;
    transition:background .15s, transform .15s;
  }
  .menu-item:hover{background:var(--surface-2); transform:translateX(4px);}
  .menu-item:last-child{border-bottom:none;}
  .menu-item .name{font-weight:600;}
  .menu-item .desc{color:var(--muted);font-size:.85rem;display:block;margin-top:2px;font-family:'Quicksand',sans-serif;}
  .menu-item .price{
    font-family:'IBM Plex Mono',monospace;
    white-space:nowrap;
    color:var(--accent-strong);
    font-weight:600;
  }
  .badge-new{
    display:inline-block;
    background:var(--coral);
    color:var(--coral-ink);
    font-family:'Quicksand',sans-serif;
    font-size:.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:2px 9px;
    border-radius:100px;
    vertical-align:middle;
  }

  /* ---------- photos ---------- */
  .photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    gap:14px;
  }
  @media (max-width:600px){
    .photo-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  }
  .ig-card{margin-top:32px;}
  .ig-card:hover{transform:none;}
  .ig-embed{
    border-radius:14px;
    overflow:hidden;
    background:var(--surface-2);
    min-height:120px;
  }
  .ig-embed iframe{display:block; width:100%; border:0;}
  .ig-follow-link{
    display:inline-flex;
    margin-top:16px;
    color:var(--accent-strong);
    font-weight:600;
    text-decoration:none;
  }
  .ig-follow-link:hover{text-decoration:underline;}
  .photo-item{
    position:relative;
    aspect-ratio:1/1;
    border-radius:18px;
    overflow:hidden;
    border:none;
    padding:0;
    cursor:pointer;
    background:var(--surface-2);
    box-shadow:var(--shadow);
    transition:transform .25s;
  }
  .photo-item:hover{transform:translateY(-4px) scale(1.01);}
  .photo-item img, .photo-item video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .photo-item .play-badge{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .photo-item .play-badge svg{
    width:44px;
    height:44px;
    color:#FFFFFF;
    filter:drop-shadow(0 2px 6px color-mix(in srgb, #323334 60%, transparent));
  }
  .lightbox{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:color-mix(in srgb, #323334 82%, transparent);
  }
  .lightbox-body{
    max-width:min(92vw, 720px);
    max-height:88vh;
    display:flex;
  }
  .lightbox-body img, .lightbox-body video{
    max-width:100%;
    max-height:88vh;
    border-radius:16px;
    display:block;
    margin:auto;
  }
  .lightbox-close{
    position:absolute;
    top:20px;
    right:20px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:#FFFFFF;
    color:#323334;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .lightbox-close svg{width:20px;height:20px;}
  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background:color-mix(in srgb, #FFFFFF 92%, transparent);
    color:#323334;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s, transform .15s;
  }
  .lightbox-nav:hover{background:#FFFFFF;}
  .lightbox-nav:active{transform:translateY(-50%) scale(.92);}
  .lightbox-nav.prev{left:20px;}
  .lightbox-nav.next{right:20px;}
  .lightbox-nav svg{width:22px;height:22px;}
  @media (max-width:640px){
    .lightbox-nav{width:40px; height:40px;}
    .lightbox-nav.prev{left:8px;}
    .lightbox-nav.next{right:8px;}
  }
  .lightbox-count{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    color:#FFFFFF;
    font-family:'IBM Plex Mono',monospace;
    font-size:.8rem;
    opacity:.8;
  }

  /* ---------- call modal ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:color-mix(in srgb, #323334 82%, transparent);
  }
  .call-modal{
    position:relative;
    background:var(--surface);
    border-radius:24px;
    padding:36px 28px 28px;
    max-width:340px;
    width:100%;
    text-align:center;
    box-shadow:var(--shadow);
  }
  .call-modal-icon{width:38px;height:38px;color:var(--accent-strong);margin-bottom:10px;}
  .call-modal h3{margin:0 0 6px;font-size:1.25rem;}
  .call-modal-number{
    font-size:1.45rem;
    font-weight:700;
    color:var(--accent-strong);
    letter-spacing:.02em;
    margin:0 0 24px;
  }
  .call-modal-actions{display:flex;flex-direction:column;gap:10px;}
  .call-modal-actions .btn{justify-content:center; width:100%;}
  #callModalCopy .icon-check{color:var(--open);}
  #callModalCopy.copied .icon-copy{display:none;}
  #callModalCopy.copied .icon-check{display:inline-flex !important;}
  #callModalCopy.copied .copy-label{display:none;}
  #callModalCopy.copied .copy-label-done{display:inline !important;}
  .modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:var(--surface-2);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .modal-close svg{width:16px;height:16px;}

  /* ---------- about ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    align-items:start;
  }
  @media (max-width:720px){ .about-grid{grid-template-columns:1fr;} }
  .about-grid p{margin:0 0 16px;}
  .fact-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .fact-list li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 18px;
    border-bottom:1px solid var(--line);
    font-size:.92rem;
    transition:background .15s;
  }
  .fact-list li:hover{background:var(--surface-2);}
  .fact-list li:last-child{border-bottom:none;}
  .fact-list svg{width:18px;height:18px;color:var(--accent-strong);flex:none;}
  .countup{font-family:'IBM Plex Mono',monospace;}

  /* ---------- contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media (max-width:720px){ .contact-grid{grid-template-columns:1fr;} }
  .event-cta{
    margin-top:20px;
    background:var(--accent-strong);
    color:var(--accent-ink);
    border-radius:20px;
    padding:28px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
  }
  .event-cta-text h3{margin:0 0 4px; font-size:1.15rem;}
  .event-cta-text p{margin:0; opacity:.85; font-size:.92rem;}
  .event-cta .btn{flex:none; white-space:nowrap;}
  .event-modal-sub{color:var(--muted); font-size:.92rem; margin:0 0 22px;}
  .call-modal-actions .btn .mono{font-size:.82rem;}
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px;
    box-shadow:var(--shadow);
    transition:transform .25s, box-shadow .25s;
  }
  .card:hover{transform:translateY(-3px);}
  .card h3{margin:0 0 16px;font-size:1.1rem;display:flex;align-items:center;gap:9px; flex-wrap:wrap;}
  .card h3 svg{width:19px;height:19px;color:var(--accent-strong);}
  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.76rem;
    font-weight:700;
    font-family:'IBM Plex Mono',monospace;
    padding:5px 11px;
    border-radius:100px;
    background:var(--surface-2);
    margin-left:auto;
  }
  .status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;}
  .status-pill.is-open .dot{background:var(--open); box-shadow:0 0 0 3px color-mix(in srgb, var(--open) 25%, transparent); animation:pulseDot 2s ease-in-out infinite;}
  .status-pill.is-open{color:var(--open);}
  .status-pill.is-closed .dot{background:var(--closed-text);}
  .status-pill.is-closed{color:var(--closed-text);}
  @keyframes pulseDot{
    0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--open) 25%, transparent);}
    50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--open) 12%, transparent);}
  }
  .map-embed{
    width:100%;
    aspect-ratio:16/10;
    border:0;
    border-radius:14px;
    margin-top:16px;
    filter:grayscale(.15) saturate(1.1);
  }
  .hours-row{
    display:flex;
    justify-content:space-between;
    font-size:.92rem;
    padding:8px 0;
    border-bottom:1px solid var(--line);
  }
  .hours-row:last-child{border-bottom:none;}
  .hours-row .d{color:var(--muted);}
  .hours-row .t{font-family:'IBM Plex Mono',monospace;}
  .closed{color:var(--closed-text);}
  .social-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
  .social-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:100px;
    border:1px solid var(--line);
    text-decoration:none;
    font-size:.88rem;
    font-weight:600;
    color:var(--ink);
    transition:transform .2s, border-color .2s;
  }
  .social-btn:hover{border-color:var(--accent); transform:translateY(-2px);}
  .social-btn svg{width:16px;height:16px;color:var(--accent-strong);}
  address{font-style:normal;}

  footer.site{
    border-top:1px solid var(--line);
    padding:14px 20px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    color:var(--muted);
    font-size:.74rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:4px 6px;
    line-height:1.5;
  }
  footer.site a{color:var(--accent-strong);text-decoration:none;font-weight:600;}
  .footer-sep{opacity:.5;}
  .footer-anpc{
    display:inline-flex;
    align-items:center;
    line-height:0;
  }
  .footer-anpc img{
    height:20px;
    width:auto;
    border-radius:3px;
  }
  .footer-link{
    background:none;
    border:none;
    padding:0;
    margin:0;
    color:var(--accent-strong);
    text-decoration:none;
    font-weight:600;
    font-size:inherit;
    font-family:inherit;
    cursor:pointer;
  }

  /* ---------- privacy modal ---------- */
  .privacy-modal{
    max-width:480px;
    text-align:left;
  }
  .privacy-modal h3{text-align:center;}
  .privacy-modal-body{
    margin:16px 0 20px;
    max-height:50vh;
    overflow-y:auto;
  }
  .privacy-modal-body p{
    margin:0 0 12px;
    font-size:.9rem;
    color:var(--muted);
    line-height:1.5;
  }
  .privacy-modal-body a{color:var(--accent-strong);}
  .privacy-modal .call-modal-actions{flex-direction:row;}
  .privacy-modal .call-modal-actions .btn{width:auto; flex:1;}

  /* ---------- cookie consent banner ---------- */
  .cookie-banner{
    position:fixed;
    left:16px;
    right:16px;
    bottom:12px;
    z-index:90;
    max-width:920px;
    margin:0 auto;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 14px 10px 18px;
    box-shadow:var(--shadow);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    justify-content:space-between;
  }
  .cookie-banner p{
    margin:0;
    font-size:.8rem;
    line-height:1.4;
    color:var(--muted);
    flex:1 1 320px;
  }
  .cookie-banner-link{
    background:none;
    border:none;
    padding:0;
    margin-left:4px;
    color:var(--accent-strong);
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
    font-size:inherit;
    font-family:inherit;
  }
  .cookie-banner-actions{
    display:flex;
    gap:8px;
    flex:none;
  }
  .cookie-banner-actions .btn{
    white-space:nowrap;
    padding:8px 16px;
    font-size:.82rem;
  }
  @media (max-width:520px){
    .cookie-banner{padding:12px;}
    .cookie-banner-actions{width:100%;}
    .cookie-banner-actions .btn{flex:1;}
  }

  /* ---------- Instagram embed consent gate ---------- */
  .ig-embed-consent{
    text-align:center;
    padding:28px 16px;
    background:var(--surface-2);
    border-radius:16px;
  }
  .ig-embed-consent p{
    margin:0 0 14px;
    font-size:.86rem;
    color:var(--muted);
  }