@import url("/box-form.css?v=20261030");
/* Soiree - Candlelight Deco. Components consume tokens ONLY (design/tokens.css). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--field);color:var(--on-deep);
  font-family:var(--font-body);font-size:var(--body);line-height:var(--body-lh);
  font-weight:300;-webkit-font-smoothing:antialiased;
  background-image:var(--grain);
}
img{max-width:100%;display:block}
a{color:var(--link-on-deep);text-decoration:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* ---------- type ---------- */
h1,h2{
  font-family:var(--font-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-track);text-transform:var(--display-case);
  line-height:1.16;margin:0 0 .55em;color:var(--on-deep);
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-family:var(--font-display);font-size:var(--h3);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5em;color:var(--brand-soft)}
.lead-cats{display:block;margin-top:.5em;font-family:var(--font-body);font-size:var(--small);
  letter-spacing:.34em;color:var(--link-on-deep);font-weight:400}

/* headings share one rhythm: less space below than above (rk:heading-rhythm) */
section h2{margin-top:0}

/* ---------- shells ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--sec-pad) 0;position:relative}

/* section ladder - perceptible steps */
/* the ladder: flat espresso field vs a silk-lined step, so adjacent sections
   still differ perceptibly while both carry material life (Josh 14.08.26) */
.s-field{background-color:var(--field);position:relative}
.s-field::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--silk-veil-2),var(--grain),var(--silk);
  background-size:auto,auto,cover;background-position:0 0,0 0,50% 30%}
.s-field > *{position:relative;z-index:1}
.s-step{position:relative;background-color:var(--field-2)}
.s-step::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--silk-veil),var(--grain),var(--silk);
  background-size:auto,auto,cover;background-position:0 0,0 0,50% 70%}
.s-step > *{position:relative;z-index:1}
/* .s-plain - a flat espresso ground with grain and no silk drape, so a curtain
   section never sits beside another curtain section (Josh 20.09.26). */
.s-plain{position:relative;background-color:var(--field)}
.s-plain::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain)}
.s-plain > *{position:relative;z-index:1}
.s-photo{padding:0;position:relative}

/* candle glow accents */
.glow::after{content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);
  width:min(720px,96vw);height:340px;border-radius:50%;pointer-events:none;
  background:var(--glow-radial)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--submit-h);padding:0 30px;border-radius:var(--r-control);
  font-family:var(--font-body);font-size:var(--btn-label);font-weight:300;
  letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;border:var(--border-w) solid transparent;
  box-shadow:var(--shadow-contact),var(--shadow-cast);
  transition:transform var(--snap) ease-out,box-shadow var(--snap) ease-out,background var(--snap) ease-out}
.btn:hover{transform:translateY(-1px)}
/* the frosted-glass primary (12.08.26): ONE glass recipe for every primary action */
.btn-glass{position:relative;overflow:hidden;background:var(--glass-tint);
  color:var(--on-glass);font-weight:300;border-color:var(--glass-rim);
  backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);
  box-shadow:var(--shadow-contact),var(--shadow-cast),var(--glass-highlight);
  text-shadow:var(--text-shadow-small)}
.btn-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--glass-sheen);pointer-events:none}
.btn-glass:hover{border-color:var(--glass-rim-hover);color:var(--cream)}
.btn-glass > *{position:relative}
.btn-ghost{background:var(--ghost-glass);border-color:var(--rule-quiet);color:var(--on-deep);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.btn-ghost:hover{border-color:var(--brand)}
.btn svg{width:18px;height:18px;flex:none}

/* conic click-to-call shine (house treatment, soft stops, never parked on an edge).
   The gradient ANGLE animates (@property), never the box: a rotating box extends
   scrollable overflow and reads as clipped content. */
@property --ang{syntax:'<angle>';initial-value:210deg;inherits:false}
.call-ring{position:relative;isolation:isolate}
/* the shine is a REAL marked layer so interaction-qa can see and measure it */
.call-ring .shine-edge{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 68%,var(--shine) 82%,transparent 96%);
  animation:angspin 7s linear infinite;filter:blur(.4px)}
.call-ring .shine-edge::after{content:"";position:absolute;inset:2px;border-radius:inherit;background:var(--deep-2)}
@keyframes angspin{to{--ang:570deg}}
@media (prefers-reduced-motion:reduce){.call-ring .shine-edge{animation:none;opacity:.35}}

/* ---------- header ---------- */
.site-header{position:fixed;top:14px;left:0;right:0;z-index:60;pointer-events:none}
.site-header .bar{pointer-events:auto;max-width:var(--shell);margin:0 auto;position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;
  height:var(--header-h);padding:0 26px;border-radius:var(--r-control);
  background:var(--chrome-glass);border:var(--border-w) solid var(--glass-rim);
  backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);
  box-shadow:var(--shadow-contact),var(--shadow-cast),var(--glass-highlight)}
/* the sheen sits BEHIND the bar's content (the bar's backdrop-filter makes its
   own stacking context, so z-index:-1 cannot escape it). A blanket
   `.bar > *{position:relative}` was doing this job and silently outranked the
   nav panel's own position:absolute - two classes beats one. */
.site-header .bar::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--glass-sheen);pointer-events:none;z-index:-1}
@media (max-width:1268px){.site-header{padding:0 12px}}
.brand-mark{display:flex;align-items:center;min-height:44px;height:100%;padding:10px 0}
.brand-mark img{height:calc(var(--header-h) - 24px);width:auto}
.site-nav{display:flex;gap:18px;margin:0 auto;align-items:center;position:relative}
/* nav words wear the hero subheading's dress: Albert Sans, wide-tracked caps (12.08.26) */
.site-nav a,.nav-more-toggle{color:var(--on-deep-soft);font-family:var(--font-body);font-size:12.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  position:relative;transition:color var(--snap) ease-out}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--snap) ease-out}
.site-nav a:hover{color:var(--cream)}
.site-nav a:hover::after{transform:scaleX(1)}
.head-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
/* Shared utility controls: quiet phone, icon Menu and shimmering Directions. */
.header-call{height:44px;padding:0 16px;font-size:12.5px;letter-spacing:.1em;gap:8px}
.header-call svg{width:15px;height:15px}
.nav-toggle{display:none}
.nav-toggle svg{width:16px;height:16px;flex:none}
@media (min-width:1201px) and (max-width:1300px){
  .site-nav{gap:14px}
  .site-nav a,.nav-more-toggle{font-size:11.5px;letter-spacing:.18em}
}
/* ONE roster: below the breakpoint the primary nav becomes the panel the
   toggle controls, rather than a second copy of the same links. */
@media (max-width:1200px){
  .site-header .bar{display:flex}
  .site-nav{position:absolute;top:calc(var(--header-h) + 10px);right:0;min-width:240px;
    display:none;flex-direction:column;gap:0;left:auto;margin:0;
    background:var(--deep-2);border:var(--border-w) solid var(--rule-quiet);border-radius:var(--r-plate);
    box-shadow:var(--shadow-plate);padding:10px 0;z-index:70;max-height:calc(100dvh - var(--header-h) - 40px);overflow-y:auto}
  .site-nav.open{display:flex}
  .site-nav a{display:block;padding:13px 24px;color:var(--on-deep);font-size:16px;letter-spacing:.16em}
  .site-nav a::after{display:none}
  .site-nav a:hover{background:var(--deep-3);color:var(--cream)}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;min-width:44px;padding:0 18px;border-radius:var(--r-control);cursor:pointer;
    background:none;border:var(--border-w) solid var(--rule-quiet);color:var(--on-deep);
    font-family:var(--font-body);font-size:15px}
}
@media (max-width:560px){
  .site-header .bar{padding:0 14px;gap:12px}
  .header-call{padding:0 13px}
}
@media (max-width:680px){.header-call .call-label{display:none}}

/* More is one disclosure in the shared desktop and phone navigation. */
.nav-more{position:relative}
.nav-more-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;cursor:pointer}
.nav-more-toggle svg{width:14px;height:14px;transition:transform var(--snap) ease-out}
.nav-more-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-more-toggle:hover{color:var(--cream)}
.nav-more-toggle:focus-visible,.nav-more-panel a:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.nav-more-panel{max-height:calc(100dvh - var(--header-h) - 40px);overflow-y:auto;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;padding:10px 0;background:var(--deep-2);border:var(--border-w) solid var(--rule-quiet);border-radius:var(--r-plate);box-shadow:var(--shadow-plate)}
.nav-more-panel[hidden]{display:none}
.nav-more-panel a{display:block;padding:13px 24px;white-space:nowrap}
.nav-more-panel a::after{display:none}
.nav-more-panel a:hover{background:var(--deep-3)}
@media(max-width:1200px){
  .site-nav > a,.nav-more{width:100%}
  .nav-more-toggle{width:100%;justify-content:space-between;padding:13px 24px;font-size:16px;letter-spacing:.16em;color:var(--on-deep)}
  .nav-more-panel{max-height:none;overflow:visible;position:static;transform:none;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0 0 8px}
  .nav-more-panel a{padding-left:36px;font-size:14px}
}

/* short viewports tighten; the sliver never breaks (rk:internal-hero-spacing) */
@media (max-height:840px){
  .hero-inner{gap:clamp(12px,2.2vh,26px);padding-top:calc(var(--header-h) + 26px)}
  .hero-logo img{width:clamp(170px,18vw,220px)}
  .rating-line{font-size:14px}
  .hero-services{gap:9px clamp(20px,3vw,44px)}
  .hero-services li{font-size:14.5px}
}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(100svh - 3px);padding:0;overflow:hidden}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-scrim{position:absolute;inset:0;
  background:var(--scrim-hero)}
.hero-inner{position:relative;width:100%;max-width:var(--measure);margin:0 auto;
  padding:calc(var(--header-h) + 60px) var(--gutter) clamp(26px,4.2vh,54px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,3.4vh,44px)}
.hero-logo img{width:clamp(220px,24vw,300px);height:auto;
  filter:var(--logo-shadow)}
.rating-line{display:inline-flex;align-items:center;gap:12px;color:var(--cream);
  font-size:16px;min-height:44px;letter-spacing:.08em;text-shadow:var(--text-shadow-small)}
.rating-line .stars{color:var(--brand);letter-spacing:.22em;font-size:15px}
.rating-line .down{display:inline-flex;width:26px;height:26px;border:1px solid var(--rule-quiet);
  border-radius:50%;align-items:center;justify-content:center;animation:nudge 2.6s ease-in-out infinite}
.rating-line .down svg{width:13px;height:13px}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.rating-line .down{animation:none}}
.hero-services{display:grid;grid-template-columns:repeat(3,auto);gap:14px clamp(26px,4vw,64px);
  list-style:none;margin:0;padding:0}
.hero-services li{display:flex;align-items:center;gap:11px;color:var(--cream);
  font-size:16px;font-weight:400;letter-spacing:.06em;white-space:nowrap;
  text-shadow:var(--text-shadow-small)}
.hero-services svg{width:21px;height:21px;color:var(--brand);flex:none;
  filter:var(--icon-shadow)}
@media (max-width:700px){.hero-services{grid-template-columns:repeat(2,auto);gap:12px 34px}}

/* mini pancake - frosted booking card in the hero */
.pancake{position:relative;width:100%;max-width:1040px;margin:0 auto;
  border-radius:var(--r-card);padding:28px;
  background:var(--panel-glass);border:var(--border-w) solid var(--rule-quiet);border-top:var(--border-w) solid var(--brand);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--shadow-plate);text-align:left}
.pancake form{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pancake .fld,.pancake select,.pancake .submit{height:var(--control-h)}
.fld{width:100%;border-radius:var(--r-field);background:var(--field-glass);
  border:var(--border-w) solid var(--rule-quiet);color:var(--cream);
  font-family:var(--font-body);font-size:14px;padding:12px 13px;font-weight:300}
.fld::placeholder{color:var(--on-deep-soft);opacity:.85}
.fld:focus,select.fld:focus{outline:none;border-color:var(--brand)}
select.fld{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e6a458' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
select.fld:invalid{color:var(--on-deep-soft)}
/* Native fallback stays in the same warm palette. */
form select option{color:var(--cream);background:var(--field-2)}
/* The browser owns selection, validation, focus and top-layer placement. */
@supports (appearance:base-select){
  form select,form select.fld,form select::picker(select){appearance:base-select}
  form select,form select.fld{
    background-image:none;display:flex;align-items:center;justify-content:space-between;
    gap:8px;padding-inline:13px;cursor:pointer;text-align:left;color-scheme:dark;
  }
  form select::picker-icon{
    content:"";box-sizing:border-box;width:9px;height:9px;flex:0 0 9px;
    margin:0 2px 4px 0;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
    rotate:45deg;
  }
  form select:open{border-color:var(--gold)}
  form select:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
  form select::picker(select){
    box-sizing:border-box;min-inline-size:anchor-size(self-inline);
    max-inline-size:calc(100vw - 24px);max-block-size:min(380px,calc(100dvh - 24px));
    position-try-order:normal;
    margin-block:8px;padding:6px;border:1px solid var(--gold);border-radius:var(--r-card);
    background:var(--field-2);color:var(--cream);box-shadow:var(--shadow-plate);
    font:inherit;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--gold) var(--field-2);
  }
  form select option{
    display:flex;align-items:center;gap:12px;min-block-size:44px;
    box-sizing:border-box;padding:10px 12px;border:0;border-radius:var(--r-field);
    background:var(--field-2);color:var(--cream);font:inherit;line-height:1.4;
    white-space:normal;overflow-wrap:anywhere;cursor:pointer;
  }
  form select option::checkmark{display:none}
  form select option::before{
    content:"";box-sizing:border-box;inline-size:18px;block-size:18px;flex:0 0 18px;
    border:1px solid var(--on-deep-soft);border-radius:50%;background:transparent;
  }
  form select option:checked{color:var(--champagne);background:var(--field-3)}
  form select option:checked::before{
    border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 4px var(--field-3);
  }
  form select option:hover,form select option:focus-visible{
    color:var(--cream);background:var(--field-4);outline:1px solid var(--rule-quiet);outline-offset:-1px;
  }
  form select option:disabled{color:var(--on-deep-soft);cursor:not-allowed}
  form select option:disabled[value=""]{display:none}
}
.pancake .submit{grid-column:span 2}
.submit{border:var(--border-w) solid var(--glass-rim);border-radius:var(--r-control);cursor:pointer;
  font-family:var(--font-body);font-weight:300;font-size:15px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-glass);
  background:var(--glass-tint-deep);
  backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);
  text-shadow:var(--text-shadow-small);
  box-shadow:var(--shadow-contact),var(--shadow-cast),var(--glass-highlight);animation:pulse 3.4s ease-in-out infinite}
.submit:hover{border-color:var(--glass-rim-hover);color:var(--cream)}
@keyframes pulse{0%,100%{box-shadow:var(--shadow-contact),var(--shadow-cast)}50%{box-shadow:var(--shadow-contact),var(--glow-pulse)}}
@media (prefers-reduced-motion:reduce){.submit{animation:none}}
@media (max-width:760px){.pancake form{grid-template-columns:repeat(2,1fr)}.pancake .submit{grid-column:span 2}}
@media (max-width:460px){
  .pancake form{grid-template-columns:1fr 1fr}
  .pancake .fld{font-size:13px}
  .pancake .submit{grid-column:span 2}
}

/* ---------- split sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:stretch}
.split .txt{display:flex;flex-direction:column;justify-content:center}
.split .pic{position:relative;min-height:340px}
.split .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:var(--r-plate);border:var(--border-w) solid var(--rule-quiet);
  box-shadow:var(--shadow-plate)}
.split .pic.arch img{border-radius:var(--r-signature) var(--r-signature) var(--r-plate) var(--r-plate)}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .pic{min-height:0;aspect-ratio:4/3}.split .pic img{position:relative;height:100%}}

/* ---------- services grid (siblings of the reel tiles: one card family) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--reel-gap);margin-top:34px}
.svc-card:hover{transform:translateY(-3px);border-color:var(--gold-50);background:var(--hover-glass)}
@media (max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---------- photo band ---------- */
.band{position:relative;overflow:hidden}
.band .band-bg{position:absolute;top:-16%;left:0;width:100%;height:132%;object-fit:cover;will-change:transform}
.band .band-scrim{position:absolute;inset:0;background:var(--scrim-band)}
.band .measure{position:relative;padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.menu-card{max-width:640px;margin:0 auto;text-align:center;
  border:var(--border-w) solid var(--gold-35);border-radius:var(--r-card);
  padding:clamp(28px,4vw,52px);background:var(--card-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.menu-card .rule{width:64px;height:1px;background:var(--brand);margin:18px auto}

/* ---------- What's On reel (signature: the programme, now a scrub carousel) ---------- */
.reel{padding:0;overflow:hidden}
/* The pin keeps content-sized height; scroll distance belongs to ScrollTrigger. */
.reel-pin{display:flex;flex-direction:column;padding:calc(var(--reel-edge) + 28px) 0 var(--reel-edge);overflow:hidden}
/* 38px, because that is what the subheading-to-cards gap measured before the
   track lost its own padding, and Josh named that gap as the one to KEEP. */
.reel-head{max-width:var(--measure);margin:0 auto 38px;padding:0 var(--gutter);width:100%}
.reel-head h2{margin-bottom:.5em}
.reel-head p{color:var(--on-deep-soft);font-size:var(--small);letter-spacing:.18em;
  text-transform:uppercase;margin:0}
/* No vertical padding: the section edge above owns that space now, and it is
   wide enough that the f2 blur still has room to bleed without being clipped. */
.reel-track{display:flex;gap:var(--reel-gap);width:max-content;align-items:stretch;
  padding:0 6vw 0 calc(max((100vw - var(--measure))/2, 0px) + var(--gutter))}
.tile{width:var(--reel-tile-w);flex:none;display:flex;flex-direction:column;
  background:var(--card-glass);border:var(--border-w) solid var(--rule-quiet);
  border-radius:var(--r-card);overflow:hidden;
  transition:filter .3s ease-out,border-color var(--snap) ease-out}
.tile .tile-pic{position:relative;aspect-ratio:16/9;overflow:hidden}
.tile .tile-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .tile-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.tile h3{margin:0 0 2px;font-size:20px}
.tile p{color:var(--on-deep-soft);font-size:15px;margin:0;line-height:1.55}
.tile .plate{position:absolute;top:12px;left:12px;z-index:1;padding:7px 13px;
  border-radius:var(--r-control);background:var(--glass-tint-deep);
  border:var(--border-w) solid var(--gold-45);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  color:var(--brand-soft)}
.tile .plate svg{color:var(--brand)}
/* focus buckets: only the JS scrub applies blur, so no-JS ships crisp */
.js .tile.f1{filter:var(--reel-blur-1)}
.js .tile.f2{filter:var(--reel-blur-2)}
.tile:hover{border-color:var(--gold-50)}
/* the services grid reuses the tile ANATOMY, never the carousel's fixed width */
.svc-grid .tile{width:auto}
/* no-JS / reduced-motion: a native horizontal scroll, every tile crisp and reachable */
.no-reel .reel-track{width:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
html:not(.js) .reel-track{width:auto;overflow-x:auto}

/* ---------- reviews: 9 verified Google review cards ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.rev-card{background:linear-gradient(120deg,var(--deep-2),var(--deep-3));
  border:var(--border-w) solid var(--rule-quiet);border-radius:var(--r-card);
  padding:var(--card-pad);display:flex;flex-direction:column;gap:13px;
  color:var(--on-deep);box-shadow:var(--shadow-card);
  transition:transform var(--snap) ease-out,border-color var(--snap) ease-out,box-shadow var(--snap) ease-out}
/* Josh 16.09.26: every review card sits on the same cast shadow as the plates. */
a.rev-card:hover{transform:translateY(-3px);border-color:var(--gold-50);box-shadow:var(--shadow-lift)}
.rev-who{display:flex;align-items:center;gap:12px}
.rev-who img{width:42px;height:42px;border-radius:50%;flex:none;
  border:var(--border-w) solid var(--rule-quiet)}
.rev-who .rev-name{color:var(--cream);font-size:15px;font-weight:500;line-height:1.25}
.rev-who .rev-date{color:var(--on-deep-soft);font-size:13px}
.rev-who .rev-g{margin-left:auto;flex:none;width:20px;height:20px}
.rev-card .stars{color:var(--brand);letter-spacing:.24em;font-size:14px}
.rev-card blockquote{margin:0;font-size:15px;color:var(--on-deep);font-weight:300;flex:1;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rev-card .rev-src{color:var(--on-deep-soft);font-size:13px;letter-spacing:.06em}
.rev-actions{margin-top:26px;text-align:center}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* ---------- blogs ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.blog-card{display:flex;flex-direction:column;gap:10px;padding:0 0 var(--card-pad);
  background:var(--card-glass);border:var(--border-w) solid var(--rule-quiet);border-radius:var(--r-card);
  overflow:hidden;
  transition:transform var(--snap) ease-out,border-color var(--snap) ease-out}
.blog-card .blog-pic{position:relative;aspect-ratio:3/2;margin-bottom:8px}
.blog-card .blog-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-card .kicker-date,.blog-card strong,.blog-card > span{padding:0 var(--card-pad)}
.blog-card:hover{transform:translateY(-3px);border-color:var(--gold-50)}
.blog-card .kicker-date{font-size:13px;color:var(--wordmark);letter-spacing:.14em;font-family:var(--font-data)}
.blog-card strong{font-family:var(--font-display);font-size:19px;font-weight:600;
  letter-spacing:.05em;color:var(--cream);line-height:1.3}
.blog-card span{color:var(--link-on-deep);font-size:14px;letter-spacing:.06em}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr}}

/* ---------- contact / A4 form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* Josh 16.09.26: on desktop the form sits centred against the taller contact
   column instead of leaving its own empty floor. */
@media (min-width:901px){.contact-grid .a4{align-self:center}}
.a4{container-type:inline-size;background:var(--panel-solid);border:var(--border-w) solid var(--rule-quiet);
  border-radius:var(--r-field);padding:34px;box-shadow:var(--shadow-plate)}
.a4 form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.a4 .w2{grid-column:1;min-width:0}
.a4 .fld{width:100%;min-width:0;box-sizing:border-box;height:50px}

.a4 select.fld{padding-left:6px;padding-right:19px;background-position:right 7px center;letter-spacing:-.15px;white-space:nowrap}
.a4 .submit{grid-column:2;white-space:nowrap}
@container (min-width:370px){
  .a4 form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .a4 .w2{grid-column:span 2}
  .a4 .submit{grid-column:3}
}
@media(max-width:520px){.a4,.a4.booking-card{padding:clamp(12px,4vw,20px)}.a4 form{gap:12px;column-gap:8px}}
/* Every contact row is ONE 44px rhythm unit with one gap (Josh 16.09.26): the
   link rows used to carry 12px touch padding the plain rows lacked, so phone
   and email sat 24px taller than hours and address. */
.contact-lines{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.contact-lines li{display:flex;align-items:center;gap:14px;min-height:44px;color:var(--on-deep-soft);font-size:16px}
.contact-lines svg{width:19px;height:19px;color:var(--brand);flex:none}
.contact-lines li > a,.contact-lines li > span{display:inline-flex;align-items:center;min-height:44px;padding:0;color:var(--on-deep-soft)}
.contact-lines a:hover{color:var(--cream)}
.contact-lines a,.contact-lines .nowrap{white-space:nowrap}
.map-wrap{margin-top:var(--sec-pad);border-radius:var(--r-plate);overflow:hidden;
  border:var(--border-w) solid var(--rule-quiet);box-shadow:var(--shadow-plate)}
.map-wrap iframe{display:block;width:100%;height:420px;border:0;filter:saturate(.85) contrast(1.02)}
.dir-link{display:inline-flex;align-items:center;gap:9px;margin-top:8px;font-size:15px;min-height:44px}

/* success card */
.sent{display:none;text-align:center;padding:34px 22px;flex-direction:column;align-items:center;gap:14px}
.sent.show{display:flex;animation:rise .5s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sent .tick{display:block;position:relative;z-index:1;order:-1;flex:0 0 56px;width:56px;height:56px;
  box-sizing:border-box;padding:12px;border:2px solid var(--brand);border-radius:50%;color:var(--brand);overflow:visible}
.sent .sent-line{margin:0;white-space:nowrap;font-size:clamp(11px,3.05vw,1rem);line-height:1.5}
.sent .tick path{stroke-dasharray:60;stroke-dashoffset:0;animation:draw .7s .15s ease-out forwards}
@keyframes draw{from{stroke-dashoffset:60}}
@media (prefers-reduced-motion:reduce){.sent.show{animation:none}.sent .tick path{animation:none;stroke-dashoffset:0}}
.sent .btn{height:auto;min-height:var(--submit-h);padding:12px clamp(16px,5vw,30px);white-space:nowrap;
  font-size:clamp(13px,4vw,var(--btn-label));letter-spacing:clamp(.04em,.4vw,.13em)}
.sent h3{margin:0;white-space:nowrap;font-size:clamp(22px,7vw,var(--h3));letter-spacing:clamp(.04em,.5vw,.1em)}
.sent p{color:var(--on-deep-soft);margin:0}
form input,form select,form textarea,form button{font-family:var(--font-body)}
form.hidden{display:none}
.form-error{margin-top:14px;padding:12px 15px;border:var(--border-w) solid var(--gold-45);
  border-radius:var(--r-field);color:var(--cream);background:var(--field-glass);font-size:14px}
.form-error[hidden]{display:none}
.form-error a{text-decoration:underline;text-underline-offset:3px}
.form-error:focus{outline:2px solid var(--champagne);outline-offset:3px}

/* ---------- footer ---------- */
footer{position:relative;overflow:hidden;contain:paint;background-color:var(--deep-2);
  padding:var(--sec-pad) 0 clamp(150px,17vw,245px)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;position:relative;z-index:1}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h3{font-size:19px;font-weight:700;color:var(--brand)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-grid li{display:flex;gap:11px;align-items:center;color:var(--on-deep-soft);font-size:15px}
.foot-grid svg{width:17px;height:17px;color:var(--brand);flex:none}
.foot-grid a{color:var(--on-deep-soft);display:inline-block;padding:12px 10px;margin:-9px -10px;min-width:44px}
.foot-grid a:hover{color:var(--cream)}
.foot-logo{height:74px;width:auto;margin-bottom:18px}
.socials{display:flex;gap:14px;margin-top:18px}
.socials a{display:flex;width:44px;height:44px;border-radius:50%;border:var(--border-w) solid var(--rule-quiet);
  align-items:center;justify-content:center;color:var(--on-deep);transition:border-color var(--snap) ease-out}
.socials a:hover{border-color:var(--brand);color:var(--brand)}
.socials svg{width:22px;height:22px}
.fineprint{position:relative;z-index:1;margin-top:46px;padding-top:22px;border-top:var(--border-w) solid var(--rule-quiet);
  color:var(--wordmark);font-size:13.5px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.fineprint a{display:inline-block;padding:6px 2px;margin:-6px -2px}
.fineprint a{color:inherit;text-decoration-color:var(--brand);text-underline-offset:3px}
.fineprint a:hover{color:var(--cream)}
/* Monster wordmark: the REAL logo letterform, redrawn at scale by the
   footer-wordmark pipeline, ground-plane perspective, bottom-anchored and
   bleeding off the base. Full-bleed WIDE, never wider (rk:footer-wordmark).
   Josh 14.08.26: fill much more of the footer, smoother gradient. */
/* NO silk drape here (Josh 19.08.26): a curtain and a ground plane cannot both
   be true in one space, and the drape was reading straight through the Monster.
   The veil stays on its own - it deepens toward the base, which is what a floor
   receding from a light actually does, and it keeps the footer perceptibly
   apart from the contact band above it alongside the gold hairline border. */
footer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--silk-veil)}
/* Josh 16.09.26: the contact band DISSOLVES into the footer. The fade carries the
   section floor (silk veil over --field-2) down into the footer plate and masks
   itself out, replacing the gold hairline seam. */
.foot-fade{position:absolute;left:0;right:0;top:0;height:clamp(120px,16vh,200px);z-index:0;pointer-events:none;
  background-color:var(--field-2);background-image:linear-gradient(var(--foot-fade-floor),var(--foot-fade-floor));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%)}
/* bottom:0, not a negative bleed. Josh 19.08.26 asked to see the ENTIRE mark
   with the bottom not cut off, so the file carries its own transparent skirt
   and sits flush on the footer base instead of running off it. The mark is
   its own light source now, so it needs no extra opacity to sit back. */
.monster{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1900px,100vw);height:auto;max-width:none;
  -webkit-mask-image:var(--monster-mask);
  mask-image:var(--monster-mask);
  opacity:.82;pointer-events:none;user-select:none;z-index:0}

/* ---------- reveal (JS adds .js; content pre-revealed without it) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-rise));
  transition:opacity var(--settle) cubic-bezier(.16,.84,.44,1),transform var(--settle) cubic-bezier(.16,.84,.44,1)}
.js [data-reveal].shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- the pour act (signature scroll film) ----------
   The film is a 1280x720 master. Full-bleed at 1440/DPR2 meant drawing it at
   2.5x, which is what read as low-res. It now sits in a cinema frame sized so
   the draw never passes ~1.4x, with the canvas backing store capped to match
   (Josh 14.08.26: "zoom it out slightly"). */
/* Josh 16.09.26: half the pinned runway (300vh -> 200vh) and a mount that is
   sized to the viewport it must share with the puck, so the act never idles. */
.pour-act{padding:0;height:200vh}
.pour-act.s-step::before{content:none}
.pour-pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2vh,22px);padding:calc(var(--header-h) + 10px) var(--gutter) clamp(64px,8vh,84px)}
/* bottom padding clears the fixed chapter clock (18px + its 42px badge); the
   300px reserve is header + gap + puck + that clearance. */
.pour-mount{position:relative;width:min(1180px,92vw,calc((100svh - var(--header-h) - 300px) * 16 / 9));aspect-ratio:16/9;
  background:var(--deep-2);overflow:hidden;border-radius:var(--r-plate);
  border:var(--border-w) solid var(--gold-35);box-shadow:var(--shadow-plate)}
.pour-mount::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 120px rgba(0,0,0,.45)}
.pour-canvas{display:block;width:100%;height:100%}
.pour-fallback{display:none;width:100%;height:100%;object-fit:cover}
.no-scrub .pour-canvas{display:none}
.no-scrub .pour-fallback{display:block}
/* the beats ride ONE frosted puck under the film */
.pour-puck{position:relative;width:min(620px,100%);
  border-radius:var(--r-plate);padding:22px 30px;text-align:center;
  background:var(--glass-tint-deep);border:var(--border-w) solid var(--glass-rim);
  backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);
  box-shadow:var(--shadow-plate),var(--glass-highlight);overflow:hidden}
.pour-puck::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--glass-sheen);pointer-events:none}
.pour-stage{display:grid;justify-items:center;position:relative}
.pour-stage .pour-beat{grid-area:1/1;width:100%}
.pour-beat{text-align:center;opacity:0;transform:translateY(10px);
  transition:opacity var(--snap) ease-out,transform var(--snap) ease-out;pointer-events:none}
.pour-beat.on{opacity:1;transform:none;pointer-events:auto}
.pour-beat h2{margin:0;text-shadow:var(--text-shadow-small)}
.pour-sub{color:var(--on-deep-soft);letter-spacing:.14em;text-transform:uppercase;
  font-size:var(--small);margin:19px 0 0;text-shadow:var(--text-shadow-small)}
.pour-recipe{color:var(--cream);font-family:var(--font-display);font-size:var(--h3);
  letter-spacing:.08em;margin:0;max-width:540px;text-shadow:var(--text-shadow-small)}
.pour-beat-3 .btn{margin-top:14px}
.pour-act.no-scrub{height:auto}
.no-scrub .pour-pin{position:relative;height:auto;padding-top:calc(var(--header-h) + 20px)}
.no-scrub .pour-beat{opacity:1;transform:none;pointer-events:auto}
.no-scrub .pour-stage .pour-beat{grid-area:auto}
@media (max-width:700px){
  .pour-act{height:200vh}
  .pour-recipe{font-size:16px}
  .pour-puck{padding:18px}
}
/* no-JS: the act is a static figure, content intact */
html:not(.js) .pour-act{height:auto}
html:not(.js) .pour-pin{position:relative;height:auto}
html:not(.js) .pour-canvas{display:none}
html:not(.js) .pour-fallback{display:block}
html:not(.js) .pour-beat{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .pour-stage .pour-beat{grid-area:auto}

/* ---------- scroll-film chrome: overture, clock, marquee, night, programme ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.overture{height:auto;position:relative}
.overture > .pancake{position:relative;left:auto;bottom:auto;transform:none;
  margin:0 auto;width:calc(100% - 2 * var(--gutter));z-index:3;box-shadow:var(--shadow-lift)}
.overture > .pancake .submit{grid-column:2 / span 2}
@media(max-width:760px){.overture > .pancake .submit{grid-column:1 / -1}}
.ov-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ov-bg,.ov-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.ov-scrim{position:absolute;inset:0;background:var(--scrim-hero)}
.ov-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;padding:0 var(--gutter)}
/* Josh 16.09.26: the hero wordmark is the client's REAL logo lettering. Each
   letterform is lifted from soiree-logo.png (the 600x381 authentic raster, the
   largest source supplied; tagline excluded) as its own full-canvas layer, so
   the letters animate one by one while keeping the logo's exact shapes,
   accents, swashes and relative placement. Josh 18.09.26: display at half the previous size so the
   authentic 600px source stays crisp without changing any artwork. Cast shadow is the hero-only
   --logo-shadow, never a text-shadow approximation. */
.ov-word{position:relative;width:min(380px,42vw);aspect-ratio:600/323;filter:var(--logo-shadow)}
.ov-letter{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov-sub{font-family:var(--font-body);font-size:clamp(12px,1.4vw,17px);letter-spacing:.5em;
  color:var(--brand);text-shadow:var(--text-shadow-small)}
.ov-invite{margin-top:8px}
html:not(.js) .overture{height:auto}
html:not(.js) .ov-pin{position:static;height:100svh}

.chapter-clock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:12px;padding:9px 18px;border-radius:var(--r-control);
  background:var(--chrome-glass);border:var(--border-w) solid var(--rule-quiet);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0;pointer-events:none;transition:opacity var(--settle) ease-out}
.js .chapter-clock.on{opacity:1}
.clock-time{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.14em;
  color:var(--brand-soft);min-width:74px;text-align:right}
.clock-bar{width:110px;height:1px;background:var(--rule-quiet);position:relative;overflow:hidden}
.clock-bar i{position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left}
.clock-label{font-size:10.5px;letter-spacing:.3em;color:var(--on-deep-soft)}
@media (max-width:560px){.clock-label{display:none}.clock-bar{width:64px}}

.day-marquee{padding:26px 0;border-top:var(--border-w) solid var(--rule-quiet);
  border-bottom:var(--border-w) solid var(--rule-quiet);background:var(--deep-2);overflow:hidden}
.mq-track{display:flex;white-space:nowrap;width:max-content;
  font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2.2vw,28px);
  letter-spacing:.32em;color:var(--gold-65)}
.mq-track span{padding-right:.32em}


/* Sections are sized by their CONTENT plus the house padding. A viewport-
   fraction min-height manufactures dead space the moment the copy is shorter
   than the guess, which is exactly what it did here (rk:breathing). */
.scene > .measure{width:100%}

/* Directions is available at every header size; footer visit actions remain mobile-only. */
.mobile-visit-actions{display:none}
.head-actions .mobile-directions{display:inline-flex;height:44px;min-height:44px;padding:0 14px;font-size:15px;letter-spacing:0;text-transform:none}
@media(min-width:1201px){
  .site-nav a[href="/gallery/"],.site-nav a[href="/blog/"]{display:none}
}
@media(max-width:1020px){
  .mobile-visit-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:var(--gutter)}
  .mobile-visit-actions .btn{height:44px;min-height:44px;padding:0 8px;font-size:15px;letter-spacing:0;text-transform:none}
}
@media(max-width:560px){
  .site-header .bar{gap:8px;padding:0 12px}
  .head-actions{gap:8px}
  .head-actions .nav-toggle{padding:0 12px}
  .head-actions .header-call{padding:0 13px;min-width:44px}
  .head-actions .mobile-directions{padding:0 12px}
  .mobile-visit-actions{gap:8px}
}

@media(max-width:374px){
  .site-header .bar{padding:0 8px;gap:6px}
  .site-header .brand-mark{flex-shrink:0}
  .head-actions{gap:6px}
  .head-actions .nav-toggle{padding:0 8px}
  .head-actions .nav-toggle .menu-label{display:none}
  .head-actions .nav-toggle{gap:0}
  .head-actions .mobile-directions{gap:6px}
  .head-actions .mobile-directions svg{width:16px;height:16px}
  .head-actions .mobile-directions{padding:0 10px}
}

/* Keep the legal link at the true centre of the shared footer. */
.fineprint>span:nth-child(2){text-align:center}
.fineprint>span:last-child{text-align:right}
@media(max-width:860px){.fineprint{grid-template-columns:1fr;text-align:center}.fineprint>span:last-child{text-align:center}}

[data-footer-column="services"] li::before{content:"•";display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:0 0 17px;color:var(--brand)}

/* FAQ questions share Trivia's regular weight, including article FAQs. */
body section[data-slot]:is([data-slot*="faq"],[data-slot*="questions"]) h3{font-weight:400}

/* Tablet footer: centre each group and its icon/link rows. */
@media (min-width:600px) and (max-width:1100px){
 .foot-grid{text-align:center}
 .foot-grid > div{min-width:0}
 .foot-grid li,.foot-grid .socials{justify-content:center}
 .foot-grid [data-footer-column="brand"] ul{max-width:440px;margin-inline:auto}
 .foot-logo{margin-inline:auto}
}