/* Celtic Cocktails — concept build
   Dark, cinematic, gold. GREEN IS THE LOGO'S ALONE: #056938, straight off the
   artwork, and it never appears as a second hue anywhere else. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/CormorantGaramond-latin-ac5feb.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/CormorantGaramond-latin-ext-480720.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/Inter-latin-bec94a.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/DMMono-400-latin-aFTU7P.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/DMMono-500-latin-aFTR7P.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --green:#056938;          /* the logo. nothing else. */
  --green-deep:#03301b;     /* the same hue, dimmed, for one field behind the packages */

  --gold:#c9a24a;
  --gold-pale:#f5e6b8;
  --metal:linear-gradient(160deg,#7a5a1e 0%,#c9a24a 28%,#f5e6b8 50%,#c9a24a 72%,#8a6a24 100%);

  --cream:#f3e8d8;
  --ink:#080c0a;
  --ink-2:#0d1512;
  --line:rgba(243,232,216,.14);

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,72px);
  --hdr-h:118px;
  --ease:cubic-bezier(.22,.75,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#241a08}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(34px,5vw,64px);line-height:1.06}
h3{font-size:clamp(21px,2.2vw,28px);line-height:1.2}
p{margin:0 0 18px;max-width:64ch;color:rgba(243,232,216,.76)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:rgba(243,232,216,.88)}
section{padding:clamp(76px,11vh,140px) var(--pad);position:relative}
.wrap{max-width:1280px;margin:0 auto}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:0;height:1px;background:var(--metal);flex:none;
  transition:width 1.1s var(--ease) .15s}
.in .eyebrow::before,.eyebrow.in::before{width:36px}

/* ── buttons ─────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 32px;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),color .4s,border-color .4s,background .4s}
/* a real sweep of light across the metal on hover */
.btn-gold{background:var(--metal);color:#241a08;font-weight:500;box-shadow:0 10px 30px rgba(201,162,74,.18)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(201,162,74,.34)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-ghost{border-color:var(--line);color:var(--cream);background:rgba(243,232,216,.02)}
.btn-ghost::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--metal);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.btn-ghost:hover{transform:translateY(-3px);color:#241a08;border-color:transparent}
.btn-ghost:hover::after{transform:scaleX(1)}
.btn:active{transform:translateY(-1px)}

/* ── progress + header ───────────────────────────────────── */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--metal);z-index:80;will-change:transform}

header{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:height .5s var(--ease),background .5s,backdrop-filter .5s,border-color .5s,box-shadow .5s}
header.stuck{height:86px;background:rgba(8,12,10,.8);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.4)}
/* THE MARK — its own dark green, straight onto the dark. No white box behind it.
   #056938 on near-black is only ~2.9:1, so it is lifted by a soft glow of its
   own hue plus a faint gold rim — light around the mark, never a panel. */
header .mark{display:flex;align-items:center;text-decoration:none;height:100%;padding:14px 0}
header .mark img{height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 0 1px rgba(245,230,184,.7)) drop-shadow(0 0 16px rgba(5,105,56,1))
         drop-shadow(0 0 40px rgba(5,105,56,.75)) drop-shadow(0 0 80px rgba(5,105,56,.45));
  transition:filter .5s var(--ease),transform .5s var(--ease)}
header .mark:hover img{transform:translateY(-2px);
  filter:drop-shadow(0 0 1px rgba(245,230,184,.8)) drop-shadow(0 0 26px rgba(5,105,56,1))
         drop-shadow(0 0 58px rgba(5,105,56,.6))}
nav{display:flex;align-items:center;gap:34px}
nav a{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,232,216,.74);text-decoration:none;position:relative;transition:color .3s}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;
  background:var(--metal);transition:right .4s var(--ease)}
nav a:hover{color:var(--cream)}
nav a:not(.btn):hover::after{right:0}
nav .btn{padding:13px 24px}
.navtoggle{display:none;background:none;border:0;color:var(--cream);font-size:24px;cursor:pointer;line-height:1}

/* ── hero ────────────────────────────────────────────────── */
.hero{height:100svh;min-height:620px;padding:var(--hdr-h) 0 0;display:grid;align-items:end;overflow:hidden}
.hero-media{position:absolute;inset:-6% 0 -6% 0;z-index:0;will-change:transform}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero-veil{position:absolute;inset:0;z-index:2;background:
  linear-gradient(to top,var(--ink) 1%,rgba(8,12,10,.72) 30%,rgba(8,12,10,.26) 62%,rgba(8,12,10,.5) 100%),
  linear-gradient(to right,rgba(8,12,10,.84) 0%,rgba(8,12,10,.46) 34%,transparent 64%)}
.hero-inner{position:relative;z-index:3;width:100%;max-width:1280px;margin:0 auto;
  padding:0 var(--pad) clamp(52px,9vh,104px)}
.hero h1{font-size:clamp(42px,6.6vw,96px);line-height:1;letter-spacing:-.02em;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--gold-pale)}
.hero .lede{margin:24px 0 34px;max-width:52ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,232,216,.55)}
.scrollcue{position:absolute;right:var(--pad);bottom:clamp(52px,9vh,104px);z-index:2;writing-mode:vertical-rl;
  font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(243,232,216,.5);display:flex;align-items:center;gap:12px}
.scrollcue::after{content:"";width:1px;height:54px;background:linear-gradient(var(--gold),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ── the brand plate: the green mark, big, on its own cream field ── */
/* the mark, big, on the dark — lit from behind by its own green, no cream field */
.slab{position:relative;padding:clamp(84px,12vw,150px) var(--pad);text-align:center;overflow:hidden;
  background:radial-gradient(58% 120% at 50% 50%,rgba(5,105,56,.20),transparent 70%)}
.slab img{width:min(76vw,720px);margin:0 auto;
  filter:drop-shadow(0 0 2px rgba(245,230,184,.4)) drop-shadow(0 0 60px rgba(5,105,56,.85))
         drop-shadow(0 0 120px rgba(5,105,56,.45));
  transform:scale(.955);opacity:0;transition:transform 1.6s var(--ease),opacity 1.3s var(--ease)}
.slab.in img{transform:none;opacity:1}
.slab p{font-family:var(--mono);font-size:11px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);margin:30px auto 0;max-width:none;opacity:0;transition:opacity 1s var(--ease) .45s}
.slab.in p{opacity:.72}

/* ── split rows ──────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,84px);align-items:center}
.split.flip .split-media{order:2}
.split h2{margin-bottom:22px}
/* the frame wipes open, and the picture drifts inside it as you pass */
/* NOTE: the wipe clips .par, NEVER .split-media itself. An element clipped to
   zero area reports as not-intersecting, and the WebGL relight stage builds off
   an IntersectionObserver on this frame — clipping the frame stopped the stage
   from ever building. Clip the layer inside it instead. */
.split-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)}
.split-media .par{position:absolute;inset:-10% 0;will-change:transform;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.split-media.in .par{clip-path:inset(0 0 0 0)}
.split-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);
  transition:transform 1.6s var(--ease)}
.split-media:hover img{transform:scale(1.11)}
.split-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);
  pointer-events:none}
.tag{position:absolute;left:0;bottom:0;z-index:3;background:rgba(8,12,10,.82);backdrop-filter:blur(8px);
  color:var(--gold);padding:12px 18px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;transform:translateY(100%);transition:transform .8s var(--ease) .5s}
.split-media.in .tag{transform:none}

/* two-up cards */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,60px)}
.card{position:relative;border:1px solid var(--line);padding:36px 34px;overflow:hidden;
  background:linear-gradient(180deg,rgba(243,232,216,.045),rgba(243,232,216,.012));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--metal);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:rgba(201,162,74,.4);box-shadow:0 26px 60px rgba(0,0,0,.45)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:12px}
.card .sub{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}

/* ── packages ────────────────────────────────────────────── */
.packages{background:linear-gradient(180deg,var(--ink) 0%,var(--green-deep) 48%,var(--ink) 100%)}
.pk-head{text-align:center;margin-bottom:clamp(40px,6vw,68px)}
.pk-head .eyebrow{justify-content:center}
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.pk{position:relative;display:flex;flex-direction:column;padding:38px 32px 34px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(243,232,216,.05),rgba(243,232,216,.012));
  backdrop-filter:blur(2px);transform-style:preserve-3d;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.pk:hover{border-color:rgba(201,162,74,.5);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.pk-name{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,232,216,.66)}
.pk-price{font-family:var(--serif);font-size:clamp(44px,4.4vw,60px);line-height:1;margin:14px 0 4px;
  font-variant-numeric:tabular-nums}
.pk-sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,232,216,.5)}
.pk ul{list-style:none;margin:26px 0 30px;padding:0;flex:1}
.pk li{padding:11px 0;border-top:1px solid var(--line);font-size:14px;color:rgba(243,232,216,.84);
  display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pk.in li{opacity:1;transform:none}
.pk li::before{content:"";width:5px;height:5px;flex:none;transform:rotate(45deg);background:var(--gold);opacity:.8}
.pk .btn{width:100%}
.pk.gold{border-color:rgba(201,162,74,.55);
  background:linear-gradient(180deg,rgba(201,162,74,.15),rgba(243,232,216,.02) 44%)}
.pk.gold .pk-price{color:var(--gold-pale)}
.pk.gold::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--metal);z-index:2}
/* slow shine travelling over the gold tier */
.pk.gold::after{content:"";position:absolute;inset:-40% -60%;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(245,230,184,.16) 50%,transparent 58%);
  animation:shine 7s linear infinite}
@keyframes shine{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.pk.gold>*{position:relative;z-index:1}
.flag{position:absolute;top:-1px;right:20px;transform:translateY(-50%);background:var(--metal);color:#241a08;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  padding:6px 12px;z-index:3}
.pk-note{text-align:center;margin:32px auto 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,232,216,.45);max-width:none}

/* ── strip ───────────────────────────────────────────────── */
.strip{padding-left:0;padding-right:0}
.strip-track{display:flex;gap:14px;padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab}
.strip-track.dragging{cursor:grabbing;scroll-snap-type:none}
.strip-track::-webkit-scrollbar{display:none}
.strip-track figure{margin:0;flex:0 0 min(70vw,400px);scroll-snap-align:center;overflow:hidden;position:relative}
.strip-track img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease);
  pointer-events:none;user-select:none}
.strip-track figure:hover img{transform:scale(1.06)}

/* ── enquire ─────────────────────────────────────────────── */
.enquire{background:var(--ink-2)}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,84px)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,232,216,.5)}
input,select{background:rgba(243,232,216,.04);border:1px solid var(--line);color:var(--cream);
  padding:15px 16px;font-family:var(--sans);font-size:15px;border-radius:2px;
  transition:border-color .35s,background .35s,box-shadow .35s}
input:focus,select:focus{outline:0;border-color:var(--gold);background:rgba(243,232,216,.07);
  box-shadow:0 0 0 3px rgba(201,162,74,.12)}
select option{background:var(--ink-2)}
.contact-line{display:flex;flex-direction:column;gap:5px;padding:20px 0;border-top:1px solid var(--line)}
.contact-line span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,232,216,.45)}
.contact-line a{font-family:var(--serif);font-size:24px;text-decoration:none;transition:color .3s}
.contact-line a:hover{color:var(--gold)}

/* ── footer ──────────────────────────────────────────────── */
footer{padding:56px var(--pad);border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:26px;flex-wrap:wrap}
footer .fmark{height:66px;width:auto;
  filter:drop-shadow(0 0 1px rgba(245,230,184,.4)) drop-shadow(0 0 24px rgba(5,105,56,.8))}
footer small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,232,216,.4)}

/* ── movement ────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}
/* headline lines rise out of a mask, one after another */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)}
.in .ln>span{transform:none}
.in .ln:nth-child(2)>span{transition-delay:.12s}
.in .ln:nth-child(3)>span{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .rv,.slab img,.slab p,.pk li{opacity:1;transform:none;transition:none}
  .ln>span{transform:none;transition:none}
  .split-media{clip-path:none;transition:none}
  .tag{transform:none}
  .hero-media,.split-media .par{transform:none!important}
  .scrollcue::after,.pk.gold::after{animation:none}
  .eyebrow::before{width:36px;transition:none}
  html{scroll-behavior:auto}
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:900px){
  :root{--hdr-h:76px}
  .split,.enq-grid,.duo{grid-template-columns:1fr}
  .split.flip .split-media{order:0}
  .pk-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:rgba(8,12,10,.97);
    backdrop-filter:blur(18px);flex-direction:column;align-items:flex-start;justify-content:center;
    gap:26px;padding:0 32px;transform:translateX(100%);transition:transform .5s var(--ease);
    border-left:1px solid var(--line)}
  nav.open{transform:none}
  nav a{font-size:13px}
  .navtoggle{display:block;position:relative;z-index:2}
  .scrollcue{display:none}
  form{grid-template-columns:1fr}
  .plaque{padding:0 14px}
  .hero{height:auto;min-height:100svh;padding-top:calc(var(--hdr-h) + 24px)}
  .hero-inner{padding-bottom:clamp(40px,7vh,64px)}
  .hero h1{font-size:clamp(36px,10vw,52px)}
  .hero .lede{font-size:16px;line-height:1.55;margin:18px 0 26px}
  .eyebrow{letter-spacing:.24em;margin-bottom:16px}
  .hero-cta .btn{flex:1 1 auto}
  .hero-meta{gap:14px;font-size:10px;margin-top:26px}
  /* the desktop veil is far too heavy on a narrow screen — it reads as if the
     photograph had been cut off. Keep the picture visible behind the copy. */
  .hero-veil{background:
    linear-gradient(to top,rgba(8,12,10,.88) 0%,rgba(8,12,10,.72) 24%,rgba(8,12,10,.44) 54%,rgba(8,12,10,.16) 80%,rgba(8,12,10,.46) 100%)}
  .slab img{width:min(86vw,520px)}
  footer{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}

/* ── THE PINNED ACT ──────────────────────────────────────────
   Three beats stacked in one viewport; ScrollTrigger pins the section and
   scrubs between them. Without JS they simply stack and read as three blocks,
   which is why every beat is visible by default and JS hides 2 and 3. */
.act{padding:0;height:100svh;min-height:620px;overflow:hidden}
.beat{position:absolute;inset:0;display:grid;align-items:center}
.beat-media{position:absolute;inset:0;z-index:0;will-change:transform}
.beat-media img{width:100%;height:100%;object-fit:cover}
.beat::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to right,rgba(8,12,10,.9) 0%,rgba(8,12,10,.6) 40%,rgba(8,12,10,.15) 75%),
  linear-gradient(to top,rgba(8,12,10,.7),transparent 45%)}
.beat-copy{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:0 var(--pad)}
.beat-copy h2{max-width:16ch;margin-bottom:20px}
.beat-copy .lede{max-width:46ch}
.beat-copy .eyebrow::before{width:36px}
/* JS takes over once ScrollTrigger is live */
.act.js .beat+.beat{opacity:0;visibility:hidden}

/* ── WebGL relight hosts ─────────────────────────────────────
   Load-bearing: renderer.setSize(w,h,false) leaves CSS to size the canvas.
   Without the 100%/100% rule the canvas lays out at BUFFER size and renders
   cropped into the bottom-right — that bug has shipped once on this engine. */
#cc-stage-about,#cc-stage-drinks{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity 900ms ease}
#cc-stage-about.is-live,#cc-stage-drinks.is-live{opacity:1}
#cc-stage-about canvas,#cc-stage-drinks canvas{width:100%;height:100%;display:block}
/* the relit plate replaces the flat photo rather than layering over it —
   two copies of the same glass only muddy each other */
.split-media.has-stage .par{opacity:0;transition:opacity 900ms ease}

@media (max-width:900px){
  .act{height:auto;min-height:0}
  .beat{position:relative;inset:auto;min-height:78svh;padding:0}
  .act.js .beat+.beat{opacity:1;visibility:visible}
  .beat-copy{padding:clamp(40px,8vw,64px) var(--pad)}
}

/* landscape frames in the strip get their own ratio — a 3/4 crop of the bar
   shot threw away the engraved front, which is the point of that photograph */
.strip-track figure.wide{flex:0 0 min(88vw,620px)}
.strip-track figure.wide img{aspect-ratio:16/10}

/* the hero's relit still sits above the flat photo, below the veil */
#cc-stage-hero{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity 1100ms ease}
#cc-stage-hero.is-live{opacity:1}
#cc-stage-hero canvas{width:100%;height:100%;display:block}
/* once it is lit, the flat photograph underneath retires */
.hero.has-stage .hero-media{opacity:0;transition:opacity 1100ms ease}

/* When GSAP is driving, it writes opacity/transform inline every frame. Leaving
   the CSS transition on top of that makes each scrubbed frame ease toward the
   last one — the block lags the wheel and the whole page feels heavy. Hand the
   property over cleanly. */
html.gsap-on .rv{transition:none;opacity:1;transform:none}

/* ── THE MARK, TREATED ───────────────────────────────────────
   Same letterforms, traced from their own artwork — only the material
   changes: one hue lit from the top-left so it reads as pressed rather than
   printed flat, a hairline of the site's gold on the edge like a foil stamp,
   and a slow sheen crossing it. On arrival it draws itself in from the left. */
/* The glow lives on the WRAPPER. A filter on the same element as the clip-path
   is applied first and then clipped, which cut the glow into a hard rectangle
   around the mark. Outside the clip it follows the letterforms — and follows
   the wipe edge as the mark draws in. */
.slab .markwrap{display:block;width:min(76vw,720px);margin:0 auto;
  filter:drop-shadow(0 0 2px rgba(245,230,184,.3)) drop-shadow(0 0 60px rgba(5,105,56,.75))
         drop-shadow(0 0 120px rgba(5,105,56,.4));
  transform:scale(.955);opacity:0;
  transition:transform 1.6s var(--ease),opacity 1.2s var(--ease)}
.slab.in .markwrap{transform:none;opacity:1}
.slab .markfx{width:100%;height:auto;display:block}

/* The draw-in. This was a <mask> with a scaling rect; CSS transforms on mask
   children did not animate in Chrome and the mark stayed fully masked out —
   i.e. invisible. clip-path on the element itself is animatable and reliable,
   and it wipes the glow with it, which the mask never did. */
.slab .markfx{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s cubic-bezier(.22,.75,.28,1) .12s,
             transform 1.6s var(--ease), opacity 1.2s var(--ease)}
.slab.in .markfx{clip-path:inset(0 0 0 0)}

/* the sheen crosses only after the mark has finished drawing */
.slab .markfx .sheen{opacity:0;transform:translateX(-105%)}
.slab.in .markfx .sheen{opacity:1;animation:markSheen 6.5s cubic-bezier(.5,0,.5,1) 1.9s infinite}
@keyframes markSheen{
  0%{transform:translateX(-105%)} 26%{transform:translateX(105%)} 100%{transform:translateX(105%)}
}

/* the gold rim thickens fractionally on hover — a printed edge catching light */
.slab .markfx .rim{transition:opacity .6s var(--ease),stroke-width .6s var(--ease)}
.slab .markfx:hover .rim{opacity:1;stroke-width:2.2}

@media (prefers-reduced-motion:reduce){
  .slab .markfx{opacity:1;transform:none;transition:none;clip-path:none}
  .slab.in .markfx .sheen{animation:none;opacity:0}
}

/* the top-left mark carries the same material as the big one — one hue with
   depth, one gold hairline — but no draw-in or sheen; at 85px those read as
   fidget rather than finish */
header .mark .markfx-sm{height:100%;width:auto;display:block;
  filter:drop-shadow(0 0 1px rgba(245,230,184,.7)) drop-shadow(0 0 16px rgba(5,105,56,1))
         drop-shadow(0 0 40px rgba(5,105,56,.75)) drop-shadow(0 0 80px rgba(5,105,56,.45));
  transition:filter .5s var(--ease),transform .5s var(--ease)}
header .mark:hover .markfx-sm{transform:translateY(-2px)}
/* the rim is sized in the mark's own units, so shrinking the mark to 89px
   leaves a gold line that is thin in pixels but HEAVY against letter strokes
   that shrank with it — it stops reading as green. A whisper here, the full
   foil edge on the big one. Same mark, same material, read the same. */
header .mark .markfx-sm .rim{opacity:.3;stroke-width:1;transition:opacity .5s var(--ease)}
header .mark:hover .markfx-sm .rim{opacity:.55}
/* and keep the small mark's green bright — the deep end of the gradient goes
   muddy once the letterforms are only a couple of pixels wide */
header .mark .markfx-sm .fill{fill:#0a7f45}

/* ── HERO SLIDESHOW ──────────────────────────────────────────
   Five frames cross-fading, each drifting slowly while it is on screen so the
   picture is never still. The relit-still stage was removed from the hero to
   make room for this — it paints one fixed texture and cannot cross-fade. */
.hero-media .hframe{position:absolute;inset:0;opacity:0;
  transition:opacity .9s cubic-bezier(.4,0,.3,1)}
.hero-media .hframe img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transform:scale(1.06)}
.hero-media .hframe.is-on{opacity:1}
.hero-media .hframe.is-on img{animation:heroDrift 5.5s linear forwards}
@keyframes heroDrift{
  from{transform:scale(1.045) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(-1.2%,-1%,0)}
}
/* which frame is showing, as a row of ticks */
.hero-dots{position:absolute;left:var(--pad);bottom:clamp(22px,3.4vh,38px);z-index:3;
  display:flex;gap:9px}
.hero-dots button{width:26px;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(243,232,216,.26);transition:background .45s var(--ease),width .45s var(--ease)}
.hero-dots button[aria-current="true"]{background:var(--metal);width:44px}
@media (max-width:900px){ .hero-dots{left:var(--pad);bottom:14px} }

/* ── ON THE NIGHT — CONVEYOR ─────────────────────────────────
   The track is duplicated once and translated by exactly half its width, so
   the loop is seamless. Hovering slows it rather than stopping it dead, and
   the whole thing still drags. */
.strip-track.conveyor{overflow:hidden;scroll-snap-type:none;cursor:default}
.strip-track.conveyor .belt{display:flex;gap:14px;width:max-content;
  animation:belt 70s linear infinite;will-change:transform}
.strip-track.conveyor:hover .belt{animation-duration:190s}
.strip-track.conveyor .belt figure{margin:0;flex:0 0 min(70vw,400px);overflow:hidden}
.strip-track.conveyor .belt figure.wide{flex:0 0 min(88vw,620px)}
.strip-track.conveyor .belt img{width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.strip-track.conveyor .belt figure.wide img{aspect-ratio:16/10}
.strip-track.conveyor .belt figure:hover img{transform:scale(1.06)}
@keyframes belt{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media (prefers-reduced-motion:reduce){
  .strip-track.conveyor .belt{animation:none}
  .strip-track.conveyor{overflow-x:auto}
  .hero-media .hframe.is-on img{animation:none}
}

/* ── AMBIENCE ────────────────────────────────────────────────
   A fine film grain over the whole page and a soft vignette at the edges.
   This is what separates "a dark website" from "a room with the lights low":
   flat #080c0a reads as empty, grain reads as photographed. Kept very low —
   it should be felt, not seen. Remove by deleting .grain/.vignette. */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:65}
.grain{background-image:url(../assets/img/grain.png);background-size:180px 180px;
  opacity:.035;mix-blend-mode:overlay;animation:grainShift 1.1s steps(3) infinite}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)} 33%{transform:translate3d(-3%,2%,0)}
  66%{transform:translate3d(2%,-3%,0)} 100%{transform:translate3d(0,0,0)}
}
.vignette{background:radial-gradient(120% 100% at 50% 45%,transparent 52%,rgba(0,0,0,.42) 100%)}
@media (prefers-reduced-motion:reduce){ .grain{animation:none} }

/* The bar shot opens the hero and is a stop brighter than the rest of the set
   (left third measured 70 against 40–55), so it carries a little more scrim or
   the headline sits on olive-green wall instead of shadow. */
.hero-media .hframe:first-child ~ .hero-veil,
.hero-media .hframe.is-on:first-child + .hero-veil{opacity:1}
.hero:has(.hframe:first-child.is-on) .hero-veil{
  background:
    linear-gradient(to top,var(--ink) 1%,rgba(8,12,10,.78) 32%,rgba(8,12,10,.34) 62%,rgba(8,12,10,.55) 100%),
    linear-gradient(to right,rgba(8,12,10,.9) 0%,rgba(8,12,10,.58) 36%,rgba(8,12,10,.12) 68%)}

/* ── MOBILE AUDIT FIXES (8 Aug 2026) ─────────────────────────
   Measured on a 375px viewport: no horizontal overflow and the phone already
   loaded zero video and zero WebGL, but eleven controls were under the 44px
   minimum touch size and the grain was animating a full-screen layer on a
   phone GPU for no visible gain. */
@media (max-width:900px){
  /* the menu button was 33x26 */
  .navtoggle{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-right:-10px}
  /* nav links were 21px tall — the text stays the same size, the target grows */
  nav a:not(.btn){padding:12px 0;font-size:14px}
  nav .btn{padding:16px 26px;width:100%}
  /* the hero ticks were 2px tall: keep the thin line, hit a 44px box */
  .hero-dots{gap:4px}
  /* the desktop rule paints the button itself; on mobile the button IS the
     44px touch box, so it must stay invisible and only the ::after line shows */
  .hero-dots button,
  .hero-dots button[aria-current="true"]{height:44px;width:38px;background:transparent;position:relative}
  .hero-dots button::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;
    background:rgba(243,232,216,.26);transition:background .45s var(--ease)}
  .hero-dots button[aria-current="true"]::after{background:var(--metal)}
  /* form + buttons comfortably tappable */
  .btn{padding:18px 30px}
  input,select{padding:16px}
  /* a full-screen animated grain layer is not worth a phone's battery */
  .grain{animation:none;opacity:.03}
}

/* booking form status line (Netlify Forms) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{grid-column:1/-1;margin:2px 0 0;font-size:.92rem;line-height:1.5;color:#cbd8cf}
.formnote.is-err{color:#e8b4a0}
.formnote a{color:inherit;text-decoration:underline}