/* ── Utility colour classes (replaces inline style="color:…") ── */
.tc-cyan      { color: #51e5b4; }
.tc-pink      { color: #fca3c4; }
.tc-star      { color: #FBBC05; }
.tc-white     { color: #ffffff; }
.tc-cyan-dark { color: #1a9e7c; }
.tc-pink-dark { color: #c4527a; }

:root {
      --bg:    #ffffff;
      --bgs:   #f7f7f5;
      --bgc:   #f2f2ef;
      --cyan:  #51e5b4;
      --pink:  #fca3c4;
      --blk:   #111111;
      --g2:    #555555;
      --g3:    #999999;
      --bd:    #e5e5e0;
      --bd2:   #d4d4ce;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { background: var(--bg); color: var(--blk); scroll-behavior: smooth; }
    body {
      font-family: "DM Sans", system-ui, sans-serif;
      background: var(--bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Keyframes ── */
    @keyframes gradientDrift {
      0%,100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }
    @keyframes orbFloat {
      0%,100% { transform: translate(0,0)     scale(1);    opacity:.4; }
      33%      { transform: translate(3%,-4%)  scale(1.08); opacity:.55; }
      66%      { transform: translate(-3%,3%)  scale(.94);  opacity:.3; }
    }
    @keyframes steamRise {
      0%   { opacity:0;   transform:translateY(0)      scaleX(1)   translateX(0);   }
      15%  { opacity:.35; }
      60%  { opacity:.12; transform:translateY(-72px)  scaleX(1.4) translateX(6px); }
      100% { opacity:0;   transform:translateY(-145px) scaleX(.7)  translateX(-4px);}
    }
    @keyframes marquee {
      from { transform:translateX(0); }
      to   { transform:translateX(-50%); }
    }
    @keyframes bounceDown {
      0%,100% { transform:translateY(0);   }
      50%      { transform:translateY(6px); }
    }
    @keyframes pulseRing {
      0%   { box-shadow: 0 0 0 0 rgba(81,229,180,.4); }
      70%  { box-shadow: 0 0 0 10px rgba(81,229,180,0); }
      100% { box-shadow: 0 0 0 0 rgba(81,229,180,0); }
    }

    /* ── Hero bg light ── */
    #hero {
      background:
        radial-gradient(ellipse 70% 50% at 18% 35%,  rgba(81,229,180,.13)  0%, transparent 65%),
        radial-gradient(ellipse 55% 65% at 80% 70%,  rgba(252,163,196,.10) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 55% 15%,  rgba(0,0,0,.02)       0%, transparent 50%),
        #ffffff;
      background-size: 200% 200%;
      animation: gradientDrift 22s ease infinite;
    }

    /* ── Orbs ── */
    .orb-1,.orb-2,.orb-3 { will-change:transform,opacity; transform:translateZ(0); }
    .orb-1 { animation:orbFloat 20s ease-in-out infinite; }
    .orb-2 { animation:orbFloat 26s ease-in-out infinite reverse; animation-delay:-8s; }
    .orb-3 { animation:orbFloat 30s ease-in-out infinite; animation-delay:-15s; }

    /* ── Steam ── */
    .steam-wrap { position:absolute; pointer-events:none; }
    .steam {
      position:absolute;
      border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
      background:rgba(17,17,17,.08);
      filter:blur(4px);
      animation:steamRise 3.6s ease-in-out infinite;
    }
    .steam:nth-child(1){ width:5px;height:50px;left:0;    animation-delay:0s;   }
    .steam:nth-child(2){ width:7px;height:64px;left:13px; animation-delay:.95s; }
    .steam:nth-child(3){ width:5px;height:44px;left:26px; animation-delay:1.9s; }

    /* ── Nav ── */
    nav.nav-filled {
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid var(--bd);
      box-shadow: 0 1px 24px rgba(0,0,0,.06);
    }

    /* ── Marquee ── */
    .marquee-track { display:flex; width:max-content; animation:marquee 34s linear infinite; }
    .marquee-wrap:hover .marquee-track { animation-play-state:paused; }

    /* ── Gradient text ── */
    .tg-editorial {
      background:linear-gradient(135deg,#111111 0%,#444444 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .tg-cyan {
      background:linear-gradient(135deg,#51e5b4 0%,#2fd4a0 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .tg-pink {
      background:linear-gradient(135deg,#fca3c4 0%,#f87db0 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }

    /* ── Product cards ── */
    .product-card {
      transform-style:preserve-3d;
      will-change:transform,opacity;
      position:relative;
      background:#ffffff;
      border:1px solid var(--bd);
      border-radius:1.25rem;
      overflow:hidden;
      cursor:pointer;
      transition:box-shadow .2s ease;
    }
    .product-card:hover { box-shadow: 0 12px 48px rgba(0,0,0,.09); }

    /* Card image overlay glow */
    .row-cyan .product-card .card-glow  { background:rgba(81,229,180,.22);  }
    .row-pink .product-card .card-glow  { background:rgba(252,163,196,.25); }

    /* ── High-contrast badge (black on solid accent) ── */
    .badge-cyan  { background:#51e5b4; color:#111111; }
    .badge-pink  { background:#fca3c4; color:#111111; }
    .badge-black { background:#111111; color:#ffffff; }

    /* ── Row label ── */
    .row-label { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; }
    .row-label-line { flex:1; height:1px; background:currentColor; opacity:.14; }

    /* ── Tabs ── */
    .tab-btn {
      color:var(--g2); background:transparent; cursor:pointer; border:none; outline:none;
      font-family:"DM Sans",system-ui,sans-serif; transition:color .2s,background .2s;
    }
    .tab-btn:not(.active):hover { color:var(--blk); }
    .tab-btn.active { background:#111111; color:#ffffff; font-weight:600; }
    .tab-panel { display:none; opacity:0; transition:opacity .3s ease; }
    .tab-panel.active { display:block; opacity:1; }

    /* ── Menu items ── */
    .menu-item { border:1px solid transparent; transition:background .2s,border-color .2s; border-radius:.75rem; }
    .menu-item:hover { background:rgba(81,229,180,.07); border-color:rgba(81,229,180,.22); }

    /* ── CTA primary ── */
    .btn-primary {
      background:#111111;
      color:#ffffff;
      transition:background .25s, box-shadow .25s;
    }
    .btn-primary:hover {
      background:#333333;
      box-shadow: 0 6px 24px rgba(0,0,0,.18);
    }
    .btn-cyan {
      background:#51e5b4;
      color:#111111;
      animation: pulseRing 2.8s ease-in-out infinite;
      transition:background .25s;
    }
    .btn-cyan:hover { background:#2fd4a0; animation:none; }

    /* ── Vibe badges ── */
    .vibe-badge {
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.55rem 1.1rem; border:1px solid var(--bd); border-radius:9999px;
      font-size:.8125rem; color:var(--g2); background:#ffffff;
      font-family:"DM Sans",system-ui,sans-serif;
      transition:border-color .25s,color .25s;
    }
    .vibe-badge:hover { border-color:#51e5b4; color:var(--blk); }

    /* ── Dividers ── */
    .div-editorial {
      height:1px; border:none; opacity:.18;
      background:linear-gradient(90deg,transparent 0%,#111111 40%,#111111 60%,transparent 100%);
    }
    .div-cyan {
      height:2px; border:none;
      background:linear-gradient(90deg,transparent 0%,#51e5b4 40%,#51e5b4 60%,transparent 100%);
      opacity:.6;
    }

    /* ── Display type ── */
    .dxl { font-size:clamp(3.6rem,12vw,10rem); line-height:.88; letter-spacing:-.025em; }
    .dmd { font-size:clamp(2.2rem,5vw,4.2rem);  line-height:1;   letter-spacing:-.015em; }

    /* ── Scroll cue ── */
    .scroll-cue { animation:bounceDown 2s ease-in-out infinite; }

    /* ── Map ── */
    .map-frame { filter:grayscale(1) contrast(1.1) brightness(.95); }

    /* ── Quote card ── */
    .quote-card { position:relative; }
    .quote-card::before {
      content:''; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1;
      background:linear-gradient(135deg,rgba(81,229,180,.4) 0%,rgba(252,163,196,.35) 100%);
    }

    /* ── High-contrast editorial block ── */
    .editorial-block {
      background:#fca3c4;
      color:#111111;
      font-weight:700;
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    /* ── Section containment ── */
    section,footer { contain:layout style; }

    /* ── Logo image ── */
    .logo-img {
      filter: brightness(0);
      transition: opacity .25s ease;
      display: block;
    }
    a:hover .logo-img { opacity: .62; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width:4px; }
    ::-webkit-scrollbar-track { background:var(--bgs); }
    ::-webkit-scrollbar-thumb { background:var(--bd2); border-radius:2px; }
    ::-webkit-scrollbar-thumb:hover { background:#51e5b4; }

    /* ── Photo Reel Gallery ── */
    .photo-reel { overflow:hidden; }
    .reel-track {
      display:flex; gap:10px; width:max-content;
    }
    .reel-fwd { animation:marquee 55s linear infinite; }
    .reel-rev { animation:marquee 48s linear infinite reverse; }
    .photo-reel:hover .reel-track { animation-play-state:paused; }
    .reel-item {
      flex-shrink:0;
      width:clamp(170px,18vw,230px);
      height:clamp(210px,22vw,290px);
      overflow:hidden; border-radius:14px;
      position:relative; cursor:pointer; background:#f4f4f0;
    }
    .reel-item img {
      width:100%; height:100%; object-fit:cover; display:block;
      transition:transform .5s cubic-bezier(.25,.46,.45,.94);
    }
    .reel-item:hover img { transform:scale(1.07); }
    .reel-overlay {
      position:absolute; inset:0;
      opacity:0; transition:opacity .3s ease;
      display:flex; align-items:flex-end; padding:.9rem 1rem;
    }
    .reel-item:nth-child(odd)  .reel-overlay { background:linear-gradient(to top,rgba(81,229,180,.6) 0%,rgba(0,0,0,.4) 44%,transparent 72%); }
    .reel-item:nth-child(even) .reel-overlay { background:linear-gradient(to top,rgba(252,163,196,.6) 0%,rgba(0,0,0,.4) 44%,transparent 72%); }
    .reel-item:hover .reel-overlay { opacity:1; }
    .reel-label {
      font-family:"Cormorant Garamond",Georgia,serif;
      font-style:italic; color:#fff;
      font-size:clamp(.82rem,1.4vw,.98rem);
      line-height:1.2;
      text-shadow:0 1px 6px rgba(0,0,0,.45);
    }

    /* ── Lightbox ── */
    #lightbox {
      position:fixed; inset:0; z-index:10000;
      background:rgba(0,0,0,.92); backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity .3s ease;
    }
    #lightbox.lb-open { opacity:1; pointer-events:all; }
    #lb-wrap { position:relative; max-width:88vw; max-height:84vh; }
    #lb-wrap img {
      max-width:88vw; max-height:84vh; object-fit:contain;
      border-radius:12px; display:block;
      transform:scale(.9); transition:transform .3s ease;
    }
    #lightbox.lb-open #lb-wrap img { transform:scale(1); }
    .lb-btn {
      position:absolute; display:flex; align-items:center; justify-content:center;
      width:44px; height:44px; border-radius:50%;
      background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
      cursor:pointer; color:#fff; transition:background .2s, color .2s;
    }
    .lb-btn:hover { background:rgba(81,229,180,.55); color:#111; border-color:#51e5b4; }
    #lb-close { top:-3.4rem; right:0; }
    #lb-prev  { top:50%; transform:translateY(-50%); left:-3.8rem; }
    #lb-next  { top:50%; transform:translateY(-50%); right:-3.8rem; }
    #lb-caption {
      position:absolute; bottom:-2.4rem; left:0; right:0;
      text-align:center; font-family:"DM Sans",sans-serif;
      font-size:.8125rem; color:rgba(255,255,255,.55);
    }
    #lb-counter {
      position:absolute; top:-3.4rem; left:0;
      font-family:"DM Sans",sans-serif; font-size:.8125rem;
      color:rgba(255,255,255,.38);
    }
    @media (max-width:640px) {
      #lb-prev { left:.75rem; bottom:-4.5rem; top:auto; transform:none; }
      #lb-next { right:.75rem; bottom:-4.5rem; top:auto; transform:none; }
    }

    /* ── Mobile performance & sizing ── */
    @media (max-width:767px) {
      .orb-1,.orb-2,.orb-3 { display:none; }
      .btn-cyan { animation:none; }

      /* Display headings ~30% smaller */
      .dxl { font-size:clamp(2.4rem,11vw,3.6rem); }
      .dmd { font-size:clamp(1.6rem,7vw,2.2rem); }

      /* Hero inner padding */
      #hero .max-w-5xl { padding-top:5.5rem; padding-bottom:4rem; }

      /* Section vertical padding */
      section#signatures,section#menu,section#story,section#find-us {
        padding-top:3.5rem; padding-bottom:3.5rem;
      }
      section#gallery,section#reviews { padding-top:3rem; padding-bottom:3rem; }

      /* Section heading gaps */
      #signatures .mb-16,#find-us .mb-16 { margin-bottom:2rem; }
      #menu .mb-14                         { margin-bottom:2rem; }
      #signatures .mb-20                   { margin-bottom:2rem; }
      #reviews .max-w-7xl > .flex.flex-col { margin-bottom:2rem; }

      /* Product card body padding & text */
      .product-card > div:last-child { padding:.75rem; }
      .product-card h3.font-heading  { font-size:.93rem; }

      /* Reviews grid & card padding */
      section#reviews .grid         { gap:.75rem; }
      section#reviews .rounded-2xl.p-6 { padding:.9rem; }

      /* Story section */
      #story .grid       { gap:2rem; }
      #story .quote-card { padding:1.5rem; }

      /* Photo reel — ~30% smaller items */
      .reel-item  { width:clamp(112px,28vw,150px); height:clamp(138px,34vw,182px); }
      .reel-track { gap:6px; }
    }
    @media (hover:none) {
      .product-card { will-change:auto; cursor:default; }
    }
    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
      .marquee-track { animation-play-state:paused; }
    }