/*
Theme Name: Little Luxe House
Theme URI: https://littleluxehouse.co.za
Author: Little Luxe House
Author URI: https://littleluxehouse.co.za
Description: A one page booking site for Little Luxe House, a premium pamper and celebration venue for girls aged 4 to 12 in Zwavelpoort, Pretoria East, close to Silver Lakes. Includes a booking popup that emails enquiries and saves them in WordPress, a coming soon page and a maintenance page that can be switched on and off from the admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: little-luxe-house
Tags: one-column, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. TOKENS
   The palette comes from the client's finishes board: dusty rose, blush, off
   white, warm cream, sand and brushed brass. There are no dark grounds on
   this page. Hierarchy comes from four light tints, a soft wash of light on
   each band and brass hairlines, not from value contrast. This site commits to one warm
   visual world on purpose, so there is no dark mode inversion, and every
   surface paints its own colour.
   ========================================================================== */
:root{
  color-scheme: light;

  /* ------------------------------------------------------------------
     Taken straight off the client's finishes board: dusty rose, blush,
     off white, warm cream, sand laminate and brushed brass. Nothing on
     this page is cool toned, and nothing is dark. The espresso rose below
     is a text colour only.
     ------------------------------------------------------------------ */
  --ink:        #4A3336;   /* espresso rose, headings only. No dark grounds. */
  --ink-2:      #5F464B;   /* body text */
  --ink-3:      #6E5458;   /* secondary text */
  --ink-4:      #856669;   /* hints and captions */

  --paper:      #FDFAF7;   /* warm white */
  --paper-2:    #FAF0EA;   /* blush cream, the recessed sections */
  --paper-3:    #F3E2DA;   /* card wash */
  --band-blush: #F7E4DD;
  --band-sand:  #F4EADB;
  --band-rose:  #EDD1CA;   /* the deepest ground, used once */

  --rose:       #C08A84;   /* primary action */
  --rose-deep:  #9A6560;   /* pressed, links, eyebrows */
  --rose-soft:  #E3BDB4;
  --blush:      #EBD3CB;
  --blush-2:    #FAEEE8;

  --gold:       #C9A96B;   /* brushed brass */
  --gold-soft:  #E6D2AC;
  --gold-deep:  #8C6B3F;
  --sand:       #D9C3A4;   /* the laminate and linen */

  --line:       #EBDCD4;
  --line-dark:  rgba(235,211,203,.20);

  --avail:      #8C6B3F;   /* a date that is open */
  --low:        #A5706A;   /* a date that is nearly gone */

  /* WhatsApp buttons are drawn in the brand rather than platform green.
     To go back to the familiar green, set this to #1FA855 and --wa-deep
     to #178644. */
  --wa:         #8C6B3F;
  --wa-deep:    #6E5330;

  /* the six accents, all inside her palette, spread far enough apart in
     tone that they still read as six different things */
  --r1:         #C08A84;   /* dusty rose */
  --r2:         #E0B4A8;   /* peach blush */
  --r3:         #C9A96B;   /* brushed brass */
  --r4:         #D9C3A4;   /* sand */
  --r5:         #EBD3CB;   /* pale blush */
  --r6:         #A97A75;   /* deep mauve */

  --shadow-sm:  0 1px 2px rgba(67,47,51,.05), 0 4px 12px rgba(67,47,51,.05);
  --shadow-md:  0 2px 6px rgba(67,47,51,.06), 0 18px 40px -12px rgba(67,47,51,.16);
  --shadow-lg:  0 4px 10px rgba(67,47,51,.06), 0 40px 80px -24px rgba(67,47,51,.28);
  --shadow-rose:0 18px 40px -14px rgba(154,101,96,.5);

  --arch:       48% 48% 6px 6px / 34% 34% 6px 6px;  /* the rainbow arch, as a frame */
  --arch-deep:  50% 50% 8px 8px / 44% 44% 8px 8px;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-fun: "Fredoka", "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif;

  /* A fine plaster tooth. Replaces the ribbed panelling: it gives the tinted
     bands a surface without drawing any lines across the page. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* a wobbly hand drawn underline, used under the accent words */
  --tick-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6560' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c14-5 26 3 40-1s26-5.5 38-1.5 24 1 38-2' fill='none' stroke='%23C9A96B' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.1rem + .3vw, 1.35rem);
  --step-2:  clamp(1.42rem, 1.3rem + .6vw, 1.85rem);
  --step-3:  clamp(1.8rem, 1.55rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.2vw, 3.8rem);
  --step-5:  clamp(2.8rem, 2rem + 3.9vw, 5.6rem);

  --ease: cubic-bezier(.22,.68,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--f-body);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:600; line-height:1.06; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; font-variation-settings:"SOFT" 34, "WONK" 1; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2.5px solid var(--rose-deep); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--blush); color:var(--ink); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{ width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto; }
.sec{ position:relative; padding-block:clamp(72px, 9vw, 148px); }
.sec--tight{ padding-block:clamp(56px, 6vw, 96px); }
/* The page has no dark bands. Rhythm comes from four warm grounds that
   step up in saturation, plus brass hairlines, rather than from value.
   Each tinted band carries a soft wash of light down from its top edge,
   the way the warm downlights fall on the walls in the venue. */
.sec--blush,.sec--sand,.sec--rose{ position:relative; }
.sec--blush{ background:radial-gradient(150% 82% at 50% -22%, rgba(255,255,255,.72), rgba(255,255,255,0) 62%), var(--band-blush); }
.sec--sand{ background:radial-gradient(150% 82% at 50% -22%, rgba(255,255,255,.72), rgba(255,255,255,0) 62%), var(--band-sand); }
.sec--rose{ background:radial-gradient(150% 90% at 50% -25%, rgba(255,255,255,.66), rgba(255,255,255,0) 64%), var(--band-rose); }

/* Plaster tooth instead of ribs. Fine enough that it reads as a painted
   wall rather than as a pattern, and it never competes with the type. */
.sec--blush::after,.sec--sand::after,.sec--rose::after,.foot::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain);
  background-size:140px 140px;
  mix-blend-mode:multiply;
  opacity:.07;
}
.sec--blush > *,.sec--sand > *,.sec--rose > *,.foot > *{ position:relative; z-index:1; }
.sec--paper2{ background:var(--paper-2); }
.stack{ display:flex; flex-direction:column; }
.grid{ display:grid; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-fun); font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-deep);
}
.sec--rose .eyebrow,.sec--sand .eyebrow,.sec--blush .eyebrow{ color:var(--gold-deep); }
/* three little beads instead of a rule */
.eyebrow::before{
  content:""; width:30px; height:7px; flex:none;
  background:
    radial-gradient(circle at 3.5px 3.5px, var(--r3) 3.5px, transparent 3.6px) 0 0/11px 7px repeat-x;
}

.h-xl{ font-size:var(--step-5); }
.h-lg{ font-size:var(--step-4); }
.h-md{ font-size:var(--step-3); }
.h-sm{ font-size:var(--step-2); }
.lede{ font-size:var(--step-1); line-height:1.55; color:var(--ink-3); max-width:56ch; font-weight:300; }
.muted{ color:var(--ink-4); }
.small{ font-size:var(--step--1); }
.ital{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-variation-settings:"SOFT" 60, "WONK" 1; color:var(--rose-deep);
  background:var(--squiggle) no-repeat left 92%/100% .34em;
  padding-bottom:.1em;
}
.no-line{ background:none; }
.sec-head{ max-width:66ch; display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(38px,4.5vw,64px); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  --bg:var(--rose); --fg:#FFF9F7; --bd:var(--rose);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.02em 1.75em; border-radius:100px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  font-family:var(--f-fun); font-size:.96rem; font-weight:500; letter-spacing:.005em; line-height:1;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(120% 160% at 50% 120%, var(--rose-deep) 0%, transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.btn:hover{ box-shadow:var(--shadow-rose); animation:bounce .55s var(--ease-out); }
.btn:hover::before{ opacity:1; }
.btn:active{ transform:translateY(1px) scale(.97); }
@keyframes bounce{ 40%{ transform:translateY(-5px) scale(1.03); } 70%{ transform:translateY(1px) scale(.995); } }
.btn .btn-ic{ width:1.05em; height:1.05em; flex:none; transition:transform .45s var(--ease-out); }
.btn:hover .btn-ic{ transform:translateX(3px); }

.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:rgba(67,47,51,.22); }
.btn--ghost:hover{ --fg:var(--ink); --bd:var(--ink); box-shadow:0 14px 30px -18px rgba(67,47,51,.6); }
.btn--ghost::before{ background:radial-gradient(120% 160% at 50% 120%, var(--blush) 0%, transparent 72%); }

.btn--wa{ --bg:var(--wa); --fg:#FFF8F4; --bd:var(--wa); }
.btn--wa::before{ background:radial-gradient(120% 160% at 50% 120%, var(--wa-deep) 0%, transparent 70%); }
.btn--wa:hover{ box-shadow:0 18px 40px -14px rgba(140,107,63,.5); }

.btn--ink{ --bg:var(--ink); --fg:#FFF6F1; --bd:var(--ink); }
.btn--ink::before{ background:radial-gradient(120% 160% at 50% 120%, #5E4249 0%, transparent 70%); }
.btn--lg{ padding:1.2em 2.1em; font-size:1rem; }
.btn--sm{ padding:.78em 1.25em; font-size:.85rem; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.link-u{ position:relative; color:var(--rose-deep); font-weight:500; }
.link-u::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform-origin:right; transform:scaleX(1); transition:transform .4s var(--ease); }
.link-u:hover::after{ transform-origin:left; transform:scaleX(0); }

/* ==========================================================================
   5. PHOTO PLACEHOLDERS AND FRAMES
   ========================================================================== */
.frame{ position:relative; overflow:hidden; border-radius:18px; background:var(--paper-3); box-shadow:var(--shadow-md); }
.frame--arch{ border-radius:var(--arch); }
.frame--archdeep{ border-radius:var(--arch-deep); }
.frame--soft{ border-radius:26px; }
.frame .shot{ width:100%; height:100%; object-fit:cover; display:block; }

.ph{
  --r:4/5;
  position:relative; margin:0; width:100%; aspect-ratio:var(--r);
  background:
    radial-gradient(circle at 22% 24%, rgba(217,195,164,.40) 0 5px, transparent 5.5px),
    radial-gradient(circle at 74% 18%, rgba(224,180,168,.34) 0 4px, transparent 4.5px),
    radial-gradient(circle at 62% 74%, rgba(201,169,107,.32) 0 6px, transparent 6.5px),
    radial-gradient(circle at 30% 82%, rgba(169,122,117,.26) 0 4px, transparent 4.5px),
    radial-gradient(circle at 86% 58%, rgba(192,138,132,.28) 0 5px, transparent 5.5px),
    radial-gradient(140% 100% at 50% 0%, var(--blush-2) 0%, transparent 60%),
    linear-gradient(148deg, var(--paper-3) 0%, var(--sand) 52%, var(--blush) 100%);
  display:grid; place-items:center; overflow:hidden;
  border-radius:inherit;
}
/* once a real photo is in the box, the placeholder art and its sheen go */
.ph.has-shot{ background:none; }
.ph.has-shot::after{ display:none; }
.ph .shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.62) 50%, transparent 66%);
  transform:translateX(-100%);
  animation:sheen 4.6s var(--ease) infinite;
}
@keyframes sheen{ 0%,58%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
.ph-i{
  width:44px; height:38px; border:1.6px solid rgba(67,47,51,.3); border-radius:8px;
  position:relative; opacity:.55;
}
.ph-i::before{ content:""; position:absolute; inset:auto 0 100% 0; width:16px; height:6px; margin:0 auto; border:1.6px solid rgba(67,47,51,.3); border-bottom:0; border-radius:5px 5px 0 0; }
.ph-i::after{ content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px; border:1.6px solid rgba(67,47,51,.3); border-radius:50%; }

/* ==========================================================================
   5b. THE PLAYFUL LAYER
   Scalloped section edges, confetti fields, floating paper shapes and
   sticker badges. All decorative, all aria hidden, all switched off under
   prefers-reduced-motion.
   ========================================================================== */

/* a scalloped top edge, like a party bunting scallop */
.scallop{ position:relative; }
.scallop::before{
  content:""; position:absolute; left:0; right:0; top:-27px; height:28px; z-index:3;
  background:radial-gradient(circle at 50% 100%, var(--scallop-fill, var(--paper)) 24px, transparent 24.5px) repeat-x;
  background-size:48px 28px;
  pointer-events:none;
}
.sec--paper2.scallop{ --scallop-fill:var(--paper-2); }
.sec--blush.scallop{ --scallop-fill:var(--band-blush); }
.sec--sand.scallop{ --scallop-fill:var(--band-sand); }
.sec--rose.scallop{ --scallop-fill:var(--band-rose); }

/* a scatter of confetti behind a light section */
.confetti-field{ position:relative; }
.confetti-field::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle at 8% 12%,  var(--r5) 0 4px, transparent 4.5px),
    radial-gradient(circle at 92% 22%, var(--r3) 0 5px, transparent 5.5px),
    radial-gradient(circle at 16% 78%, var(--r4) 0 4px, transparent 4.5px),
    radial-gradient(circle at 88% 68%, var(--r6) 0 5px, transparent 5.5px),
    radial-gradient(circle at 46% 6%,  var(--r1) 0 3px, transparent 3.5px),
    radial-gradient(circle at 68% 94%, var(--r2) 0 4px, transparent 4.5px),
    radial-gradient(circle at 4% 46%,  var(--r6) 0 3px, transparent 3.5px),
    radial-gradient(circle at 97% 46%, var(--r4) 0 3px, transparent 3.5px);
}
.confetti-field > *:not(.doodle){ position:relative; z-index:1; }

/* small paper shapes that drift */
.doodle{ position:absolute; z-index:2; pointer-events:none; opacity:.9; }
.doodle svg{ width:100%; height:100%; display:block; }
.float-slow{ animation:drift 9s ease-in-out infinite; }
.float-mid{ animation:drift 7s ease-in-out infinite .6s; }
.float-fast{ animation:drift 5.4s ease-in-out infinite 1.2s; }
@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-14px) rotate(calc(var(--rot,0deg) + 6deg)); }
}

/* a rainbow rule, the logo reduced to a line */
.rainbow-rule{ display:flex; gap:0; height:6px; border-radius:6px; overflow:hidden; width:120px; }
.rainbow-rule i{ flex:1; }
.rainbow-rule i:nth-child(1){ background:var(--r1); }
.rainbow-rule i:nth-child(2){ background:var(--r2); }
.rainbow-rule i:nth-child(3){ background:var(--r3); }
.rainbow-rule i:nth-child(4){ background:var(--r4); }
.rainbow-rule i:nth-child(5){ background:var(--r5); }
.rainbow-rule i:nth-child(6){ background:var(--r6); }

/* a stuck on sticker */
.sticker{
  font-family:var(--f-fun); font-weight:500; font-size:.78rem; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:7px; padding:.55em 1em; border-radius:100px;
  background:var(--r3); color:#3B2E14; transform:rotate(-2.5deg);
  box-shadow:0 6px 14px -6px rgba(67,47,51,.4);
}
.sticker--sage{ background:var(--r4); color:#3B2E14; }
.sticker--sky{ background:var(--r5); color:#432F33; }

/* photo frames tip slightly, like snapshots pinned to a wall */
.tipped{ transform:rotate(var(--tip,-1.4deg)); transition:transform .6s var(--ease-out); }
.tipped:hover{ transform:rotate(0deg) translateY(-6px); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.head{
  position:sticky; top:0; z-index:50;
  background:rgba(254,251,249,.82); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.head.is-stuck{ border-bottom-color:var(--line); box-shadow:0 10px 30px -22px rgba(67,47,51,.5); }
.head .wrap{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); min-height:78px; padding-block:10px; }
.brand{ display:flex; align-items:center; flex:none; margin-right:auto; }
.brand img{ height:clamp(58px,6.6vw,78px); width:auto; transition:transform .6s var(--ease-out); }
.brand:hover img{ transform:scale(1.04) rotate(-1deg); }
.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.nav a{ font-family:var(--f-fun); font-size:.94rem; font-weight:400; color:var(--ink-2); position:relative; padding:6px 0; transition:color .3s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2.5px; border-radius:3px; background:var(--rose); transition:right .45s var(--ease-out); }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }
.nav a:nth-child(2)::after{ background:var(--r3); }
.nav a:nth-child(3)::after{ background:var(--r4); }
.nav a:nth-child(4)::after{ background:var(--r5); }
.nav a:nth-child(5)::after{ background:var(--r6); }
.nav a:nth-child(6)::after{ background:var(--r2); }
.head-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.burger{ display:none; width:44px; height:44px; place-items:center; border-radius:50%; border:1px solid var(--line); }
.burger span{ display:block; width:19px; height:1.6px; background:var(--ink); position:relative; transition:transform .4s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.6px; background:var(--ink); transition:transform .4s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0 0 0 auto; width:min(88vw,380px); z-index:70;
  background:var(--paper); box-shadow:-30px 0 70px -30px rgba(67,47,51,.5);
  transform:translateX(100%); transition:transform .6s var(--ease-out);
  padding:26px var(--gut) 40px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto;
}
body.menu-open .drawer{ transform:translateX(0); }
.drawer a.d-link{ padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--f-display); font-size:1.35rem; color:var(--ink); }
.scrim{ position:fixed; inset:0; z-index:65; background:rgba(67,47,51,.42); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
body.menu-open .scrim{ opacity:1; pointer-events:auto; }

.progress{ position:fixed; top:0; left:0; height:2.5px; width:0; z-index:80; background:linear-gradient(90deg,var(--rose),var(--gold),var(--rose-soft)); transition:width .12s linear; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{ position:relative; padding-block:clamp(48px,6vw,86px) clamp(60px,7vw,110px); overflow:hidden; }
.hero-bg{ position:absolute; inset:-10% -10% 0; z-index:0; pointer-events:none; }
.hero-bg canvas{ width:100%; height:100%; opacity:.36; }
.hero-glow{ position:absolute; z-index:0; border-radius:50%; filter:blur(70px); pointer-events:none; }
.hero-glow.g1{ width:52vw; height:52vw; left:-16vw; top:-14vw; background:radial-gradient(circle, rgba(235,211,203,.85), transparent 65%); }
.hero-glow.g2{ width:44vw; height:44vw; right:-12vw; top:10vw; background:radial-gradient(circle, rgba(230,210,172,.62), transparent 66%); }
.hero-glow.g3{ width:34vw; height:34vw; left:26vw; bottom:-16vw; background:radial-gradient(circle, rgba(224,180,168,.38), transparent 68%); }
.hero-glow.g4{ width:28vw; height:28vw; right:24vw; top:-8vw; background:radial-gradient(circle, rgba(217,195,164,.34), transparent 68%); }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,72px); align-items:center; }

.hero-copy{ display:flex; flex-direction:column; gap:26px; }
.hero h1{ font-size:var(--step-5); font-variation-settings:"SOFT" 48,"WONK" 1; letter-spacing:-.028em; }
/* The line boxes mask each line during the intro. Line height sits below 1,
   so the mask has to reach past the baseline or it shears the descenders off
   the y and g, and clips the squiggle under the accent. The padding lets the
   mask hang lower without changing the spacing, and .open drops the mask
   entirely once the intro has finished. */
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em; }
.hero h1 .line.open{ overflow:visible; }
.hero h1 .line > span{ display:block; }
.hero-sub{ font-size:var(--step-1); color:var(--ink-3); font-weight:300; max-width:46ch; }
.hero-sub b{ color:var(--ink-2); font-weight:500; }

.trustrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; padding-top:6px; }
.trust-i{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--ink-3); }
.trust-i svg{ width:17px; height:17px; flex:none; color:var(--rose-deep); }
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:14px; height:14px; }

.hero-note{ display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--ink-4); }
.hero-note svg{ width:15px; height:15px; flex:none; }

/* the arch scene: nested arches in perspective, the logo motif rebuilt in 3D */
.scene{ position:relative; perspective:1400px; perspective-origin:50% 44%; }
.scene-in{ position:relative; transform-style:preserve-3d; transition:transform .5s var(--ease-out); }
.arch{
  position:absolute; inset:0; margin:auto;
  border-radius:50% 50% 4px 4px / 46% 46% 4px 4px;
  border-style:solid; border-bottom:0;
  transform-style:preserve-3d;
}
.scene-stage{ position:relative; width:100%; aspect-ratio:1/1.02; }
.a1{ width:100%;  height:100%;  border-width:clamp(14px,2.4vw,26px); border-color:#C08A84; transform:translateZ(-140px); opacity:.95; }
.a2{ width:83%;   height:86%;   border-width:clamp(11px,1.9vw,21px); border-color:#E0B4A8; transform:translateZ(-90px); inset:auto 0 0 0; }
.a3{ width:67%;   height:72%;   border-width:clamp(9px,1.5vw,17px);  border-color:#C9A96B; transform:translateZ(-40px); inset:auto 0 0 0; }
.a4{ width:52%;   height:58%;   border-width:clamp(8px,1.3vw,15px);  border-color:#D9C3A4; transform:translateZ(10px); inset:auto 0 0 0; }
.dots{ position:absolute; inset:auto 0 0 0; width:75%; height:79%; margin-inline:auto; transform:translateZ(-65px); }
.dots circle{ fill:#A97A75; }

.scene-photo{
  position:absolute; left:50%; bottom:0; width:47%; transform:translateX(-50%) translateZ(70px);
  border-radius:50% 50% 10px 10px / 40% 40% 10px 10px; overflow:hidden;
  border:6px solid #FDFAF7;
  box-shadow:0 40px 70px -30px rgba(67,47,51,.55);
  z-index:3;
}
.scene-photo .ph{ --r:3/4; }

.float-card{
  position:absolute; z-index:4; background:rgba(254,251,249,.92); backdrop-filter:blur(10px);
  border:1.5px solid var(--line); border-radius:20px; padding:12px 16px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:11px; font-family:var(--f-fun); font-size:.8rem; color:var(--ink-3); white-space:nowrap;
}
.float-card b{ display:block; font-size:.98rem; color:var(--ink); font-weight:500; font-family:var(--f-fun); }
.float-card .fc-ic{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--blush-2); color:var(--rose-deep); flex:none; }
.float-card .fc-ic svg{ width:17px; height:17px; }
.fc1{ left:-5%; top:24%; }
.fc2{ right:-4%; top:54%; }
.fc3{ right:2%; top:5%; }

.balloon{ position:absolute; z-index:1; border-radius:50% 50% 48% 48%/48% 48% 56% 56%; opacity:.9; }
.balloon::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height:34px; background:linear-gradient(180deg,rgba(87,64,71,.35),transparent); }
/* ==========================================================================
   8. MARQUEE PROOF RIBBON
   ========================================================================== */
.ribbon{ background:var(--rose-soft); color:var(--ink); padding:16px 0; overflow:hidden; position:relative; }
.ribbon::before,.ribbon::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.ribbon::before{ left:0; background:linear-gradient(90deg,var(--rose-soft),transparent); }
.ribbon::after{ right:0; background:linear-gradient(270deg,var(--rose-soft),transparent); }
.mq{ display:flex; width:max-content; animation:mq 46s linear infinite; }
.mq-set{ display:flex; align-items:center; gap:44px; padding-right:44px; }
.mq-set span{ display:flex; align-items:center; gap:12px; font-family:var(--f-fun); font-size:.92rem; letter-spacing:.01em; white-space:nowrap; color:var(--ink); }
.mq-set span::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold-deep); flex:none; }
.mq-set span:nth-child(2)::before{ background:var(--r6); }
.mq-set span:nth-child(3)::before{ background:var(--ink); }
.mq-set span:nth-child(4)::before{ background:var(--gold-deep); }
.mq-set span:nth-child(5)::before{ background:var(--r6); }
.mq-set span:nth-child(6)::before{ background:var(--ink); }
.mq-set span:nth-child(7)::before{ background:var(--gold-deep); }
.mq-set span:nth-child(8)::before{ background:var(--r6); }
@keyframes mq{ to{ transform:translateX(-50%); } }
.ribbon:hover .mq{ animation-play-state:paused; }

/* ==========================================================================
   9. REVEAL SYSTEM
   ========================================================================== */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-up{ transform:translateY(46px); }
.rv-l{ transform:translateX(-34px); }
.rv-r{ transform:translateX(34px); }
.rv-sc{ transform:scale(.94); }
.rv-mask{ clip-path:inset(0 0 100% 0); opacity:1; transform:none; transition:clip-path 1.15s var(--ease-out); }
.rv-mask.in{ clip-path:inset(0 0 0 0); }
[data-d="1"]{ transition-delay:.09s; } [data-d="2"]{ transition-delay:.18s; }
[data-d="3"]{ transition-delay:.27s; } [data-d="4"]{ transition-delay:.36s; }
[data-d="5"]{ transition-delay:.45s; } [data-d="6"]{ transition-delay:.54s; }

/* ==========================================================================
   10. TILT CARDS
   ========================================================================== */
.tilt{ transform-style:preserve-3d; transition:transform .6s var(--ease-out); will-change:transform; }
.tilt-in{ transform:translateZ(28px); }
.glare{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .5s var(--ease); background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 62%); }
.tilt:hover .glare{ opacity:1; }

/* ==========================================================================
   11. VALUE CARDS
   ========================================================================== */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.vcard{
  position:relative; padding:34px 30px 30px; border-radius:30px;
  background:var(--paper);
  border:1px solid var(--line); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:border-color .45s var(--ease), box-shadow .55s var(--ease-out), transform .55s var(--ease-out);
}
.vcard:hover{ border-color:var(--rose-soft); box-shadow:var(--shadow-md); }
.vcard-ic{
  width:58px; height:58px; display:grid; place-items:center; margin-bottom:20px;
  border-radius:56% 44% 52% 48% / 48% 52% 48% 52%;
  background:var(--ic, var(--r1)); color:var(--ink);
  transition:transform .55s var(--ease-out), border-radius .55s var(--ease-out);
}
.vcard:hover .vcard-ic{ transform:rotate(-8deg) scale(1.06); border-radius:44% 56% 48% 52% / 52% 48% 52% 48%; }
.vcard-ic svg{ width:26px; height:26px; }
.vcard:nth-child(1){ --ic:var(--r1); } .vcard:nth-child(2){ --ic:var(--r3); }
.vcard:nth-child(3){ --ic:var(--r4); } .vcard:nth-child(4){ --ic:var(--r5); }
.vcard:nth-child(5){ --ic:var(--r6); } .vcard:nth-child(6){ --ic:var(--r2); }
.vcard h3{ font-size:1.28rem; margin-bottom:10px; }
.vcard p{ color:var(--ink-2); font-size:.94rem; line-height:1.62; font-weight:300; }

/* ==========================================================================
   12. VENUE / GALLERY
   ========================================================================== */
.venue-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,22px); align-items:end; }
.vg-a{ grid-column:span 5; } .vg-b{ grid-column:span 4; } .vg-c{ grid-column:span 3; }
.vg-d{ grid-column:span 4; } .vg-e{ grid-column:span 3; } .vg-f{ grid-column:span 5; }
.cap{ margin-top:12px; font-family:var(--f-fun); font-size:.86rem; letter-spacing:.02em; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.cap::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--dot, var(--r1)); flex:none; }
.vg-b .cap::before{ background:var(--gold-deep); } .vg-c .cap::before{ background:var(--r6); }
.vg-d .cap::before{ background:var(--r3); } .vg-e .cap::before{ background:var(--r1); }
.vg-f .cap::before{ background:var(--r6); }

.zoomer{ overflow:hidden; }
.zoomer .ph,.zoomer .shot{ transition:transform 1.1s var(--ease-out); }
.zoomer:hover .ph,.zoomer:hover .shot{ transform:scale(1.055); }

.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:clamp(34px,4vw,56px); }
.spec div{ background:var(--paper); padding:24px 22px; position:relative; }
.spec div::before{ content:""; position:absolute; left:22px; top:0; width:34px; height:5px; border-radius:0 0 5px 5px; background:var(--r1); }
.spec div:nth-child(2)::before{ background:var(--gold-deep); } .spec div:nth-child(3)::before{ background:var(--r6); }
.spec div:nth-child(4)::before{ background:var(--r3); } .spec div:nth-child(5)::before{ background:var(--r1); }
.spec dt{ font-family:var(--f-fun); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:8px; }
.spec dd{ margin:0; font-family:var(--f-display); font-size:1.34rem; color:var(--ink); }
.spec dd small{ display:block; font-family:var(--f-fun); font-size:.8rem; color:var(--ink-4); margin-top:4px; }

/* ==========================================================================
   13. 3D ROTATING RING
   ========================================================================== */
.ring-wrap{ position:relative; height:clamp(380px,40vw,510px); perspective:1600px; overflow:hidden; touch-action:pan-y; cursor:grab; }
.ring-wrap:active{ cursor:grabbing; }
.ring{ position:absolute; inset:0; margin:auto; width:clamp(210px,23vw,310px); height:clamp(290px,31vw,420px); transform-style:preserve-3d; }
.ring-item{
  position:absolute; inset:0; border-radius:var(--arch); overflow:hidden;
  box-shadow:0 22px 44px -22px rgba(74,51,54,.32);
  border:5px solid var(--gold);
  backface-visibility:hidden;
}
.ring-item .ph{ --r:auto; height:100%; }
.ring-item:nth-child(1){ border-color:var(--r1); } .ring-item:nth-child(2){ border-color:var(--r3); }
.ring-item:nth-child(3){ border-color:var(--r2); } .ring-item:nth-child(4){ border-color:var(--r4); }
.ring-item:nth-child(5){ border-color:var(--r6); } .ring-item:nth-child(6){ border-color:var(--gold-deep); }
.ring-item:nth-child(7){ border-color:var(--r2); } .ring-item:nth-child(8){ border-color:var(--r6); }
.ring-hint{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); font-family:var(--f-fun); font-size:.82rem; letter-spacing:.06em; color:var(--ink-3); display:flex; align-items:center; gap:9px; z-index:5; }
.ring-hint svg{ width:15px; height:15px; }

/* ==========================================================================
   14. PACKAGES
   ========================================================================== */
.pk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); align-items:start; }
.pk{
  position:relative; background:var(--paper); border:1.5px solid var(--line); border-radius:28px;
  padding:34px 30px 32px; display:flex; flex-direction:column; gap:18px; height:100%;
  min-height:clamp(230px,24vw,280px);
  transition:border-color .5s var(--ease), box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
  overflow:hidden;
}
.pk:hover{ border-color:var(--rose-soft); box-shadow:var(--shadow-lg); }
.pk--star{ background:linear-gradient(178deg,#FBF2EC 0%,#F5E2DA 100%); border:2px solid var(--gold); box-shadow:var(--shadow-md); }
.pk--star h3,.pk--star .pk-for{ color:var(--ink); }
.pk--star .pk-list li{ color:var(--ink-2); }
.pk--star .pk-list li svg{ color:var(--gold-deep); }
.pk--star .pk-note{ color:var(--ink-4); border-top-color:var(--line); }
.pk-flag{ position:absolute; right:-40px; top:20px; transform:rotate(38deg); background:var(--gold); color:#3B2E14; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:7px 46px; }
.pk-name{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pk h3{ font-size:1.75rem; }
.pk-for{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-deep); }
.pk-desc{ font-size:.95rem; color:var(--ink-3); font-weight:300; }
.pk--star .pk-desc{ color:var(--ink-3); }
.pk-list{ display:flex; flex-direction:column; gap:11px; margin-top:2px; }
.pk-list li{ display:flex; gap:11px; font-size:.92rem; color:var(--ink-2); line-height:1.5; }
.pk-list li svg{ width:16px; height:16px; flex:none; margin-top:4px; color:var(--rose); }
.pk-note{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-4); }
.pk .btn{ margin-top:6px; }

/* the little arch mark that stands at the top of each package card */
.pk-mark{
  width:62px; height:52px; flex:none;
  border-radius:50% 50% 8px 8px / 62% 62% 8px 8px;
  background:var(--pm, var(--r1));
  transition:transform .55s var(--ease-out);
}
.pk:nth-child(2) .pk-mark{ --pm:var(--r3); }
.pk:nth-child(3) .pk-mark{ --pm:var(--r5); }
.pk:hover .pk-mark{ transform:translateY(-4px) rotate(-4deg); }
.pk .btn{ margin-top:auto; }

/* ==========================================================================
   21b. THE LITTLE SALON
   ========================================================================== */
.salon-foot{
  display:grid; grid-template-columns:.8fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
  margin-top:clamp(34px,4vw,56px);
}
.salon-side h3{ color:var(--ink); }
.salon-side p{ color:var(--ink-2); font-weight:300; margin-top:14px; line-height:1.7; }
.salon-side .btn{ margin-top:26px; }
.ticklist{ display:grid; gap:11px; margin-top:20px; }
.ticklist li{ display:flex; align-items:flex-start; gap:11px; font-family:var(--f-fun); font-size:.95rem; color:var(--ink-2); }
.ticklist li::before{
  content:""; flex:none; width:19px; height:19px; margin-top:2px; border-radius:50%;
  background:var(--blush-2) var(--tick-ic) no-repeat center/11px 11px; border:1px solid var(--rose-soft);
}
@media (max-width:820px){
  .salon-foot{ grid-template-columns:1fr; }
  .salon-foot .frame{ max-width:420px; margin-inline:auto; }
}

.addons{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:.72em 1.2em; border-radius:100px;
  border:1.5px solid var(--line); background:var(--paper); font-family:var(--f-fun); font-size:.92rem; color:var(--ink-2);
  transition:transform .45s var(--ease-out), border-color .4s var(--ease), background-color .4s var(--ease);
}
.chip:hover{ transform:translateY(-4px) rotate(-1.5deg); border-color:var(--c, var(--rose-soft)); background:var(--blush-2); }
.chip svg{ width:16px; height:16px; color:var(--c, var(--rose-deep)); flex:none; }
.chip small{ display:block; font-size:.76rem; color:var(--ink-4); margin-top:2px; }
.addons .chip:has(small){ align-items:flex-start; border-radius:22px; }
.addons .chip:nth-child(6n+1){ --c:var(--r1); } .addons .chip:nth-child(6n+2){ --c:var(--gold-deep); }
.addons .chip:nth-child(6n+3){ --c:var(--r6); } .addons .chip:nth-child(6n+4){ --c:var(--gold-deep); }
.addons .chip:nth-child(6n+5){ --c:var(--r1); } .addons .chip:nth-child(6n+6){ --c:var(--r6); }

/* ==========================================================================
   22b. THE STANDING NOTICES PANEL
   ========================================================================== */
.notices{
  margin-top:clamp(40px,4.5vw,64px); padding:clamp(26px,3.4vw,40px);
  background:var(--paper); border:1px solid var(--line); border-radius:46px 46px 22px 22px;
  position:relative; overflow:hidden;
}
.notices::before{
  content:""; position:absolute; inset:0 0 auto; height:5px;
  background:linear-gradient(90deg,var(--r1) 0 16.6%,var(--r2) 16.6% 33.3%,var(--r3) 33.3% 50%,var(--r4) 50% 66.6%,var(--r5) 66.6% 83.3%,var(--r6) 83.3%);
}
.notices > h3{ margin-bottom:22px; color:var(--ink); }
.notice-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px clamp(22px,3vw,40px); }
.notice-list li{ display:flex; gap:13px; align-items:flex-start; }
.notice-list p{ font-size:.93rem; color:var(--ink-2); line-height:1.6; font-weight:300; }
.notice-list b{ font-weight:500; color:var(--ink); }
.notice-ic{
  width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--blush-2); border:1px solid var(--line); color:var(--rose-deep);
}
.notice-ic svg{ width:18px; height:18px; }
.notice-list li:nth-child(2) .notice-ic{ background:var(--band-sand); color:var(--gold-deep); }
.notice-list li:nth-child(3) .notice-ic{ background:var(--paper-3); color:var(--low); }
.notice-list li:nth-child(4) .notice-ic{ background:var(--band-sand); color:var(--gold-deep); }
.notice-tc{
  margin-top:24px; padding-top:18px; border-top:1px dashed var(--line);
  font-family:var(--f-fun); font-size:.86rem; color:var(--ink-3);
}

/* ==========================================================================
   15. PROCESS
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); position:relative; }
.steps::before{ content:""; position:absolute; left:9%; right:9%; top:38px; height:3px; border-radius:3px; background:repeating-linear-gradient(90deg,var(--sand) 0 12px,transparent 12px 22px); }
.step{ position:relative; display:flex; flex-direction:column; gap:14px; }
.step-n{
  width:76px; height:76px; display:grid; place-items:center; position:relative; z-index:2;
  border-radius:56% 44% 50% 50% / 50% 50% 44% 56%;
  background:var(--sn, var(--r2)); border:0; font-family:var(--f-fun); font-weight:500; font-size:1.7rem; color:var(--ink);
  transform:rotate(-3deg);
  transition:transform .6s var(--ease-out), border-radius .6s var(--ease-out);
}
.step:nth-child(2) .step-n{ --sn:var(--r4); transform:rotate(2deg); }
.step:nth-child(3) .step-n{ --sn:var(--r1); transform:rotate(-2deg); }
.step:hover .step-n{ transform:scale(1.08) rotate(6deg); border-radius:44% 56% 50% 50% / 50% 50% 56% 44%; }
.step h3{ font-size:1.35rem; }
.step p{ color:var(--ink-3); font-size:.95rem; font-weight:300; }

/* ==========================================================================
   16. THEMES
   ========================================================================== */
.th-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); }
.th{
  position:relative; border-radius:var(--arch); overflow:hidden; display:block; cursor:pointer;
  box-shadow:var(--shadow-md); transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  border:4px solid var(--tc, var(--r1)); padding:0;
}
.th:hover{ transform:translateY(-10px) rotate(1.2deg); box-shadow:var(--shadow-lg); }
.th:nth-child(2){ --tc:var(--r3); } .th:nth-child(3){ --tc:var(--r6); } .th:nth-child(4){ --tc:var(--gold-deep); }
.th:nth-child(5){ --tc:var(--r2); } .th:nth-child(6){ --tc:var(--r1); } .th:nth-child(7){ --tc:var(--r6); }
.th:nth-child(8){ --tc:var(--r3); }
.th .ph{ --r:3/4; }
.th-lab{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:48px 16px 16px; text-align:center;
  background:linear-gradient(180deg,transparent,rgba(74,51,54,.8));
  color:#FFF6F1; font-family:var(--f-display); font-size:1.14rem;
}
.th-lab small{ display:block; font-family:var(--f-fun); font-size:.78rem; letter-spacing:.03em; text-transform:none; color:var(--blush); margin-top:4px; }

/* ==========================================================================
   17. TESTIMONIALS
   ========================================================================== */
.tst-rail{ display:flex; gap:clamp(14px,2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; scrollbar-width:none; }
.tst-rail::-webkit-scrollbar{ display:none; }
.tst{
  flex:0 0 clamp(280px,34vw,400px); scroll-snap-align:start;
  background:var(--paper); border:1.5px solid var(--line); border-radius:28px; padding:30px 28px;
  display:flex; flex-direction:column; gap:16px; position:relative;
  transition:transform .55s var(--ease-out), border-color .45s var(--ease);
}
.tst::after{ content:""; position:absolute; left:28px; top:-9px; width:56px; height:9px; border-radius:9px 9px 0 0; background:var(--tq, var(--r1)); }
.tst:nth-child(2)::after{ background:var(--gold-deep); } .tst:nth-child(3)::after{ background:var(--r6); }
.tst:nth-child(4)::after{ background:var(--r3); } .tst:nth-child(5)::after{ background:var(--r1); }
.tst:nth-child(6)::after{ background:var(--r6); }
.tst:hover{ transform:translateY(-5px) rotate(-.6deg); border-color:var(--rose-soft); }
.tst q{ font-family:var(--f-display); font-size:1.16rem; line-height:1.5; color:var(--ink); quotes:none; font-variation-settings:"SOFT" 50; }
.tst-who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; }
.tst-av{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; }
.tst-av .ph{ --r:1/1; }
.tst-who b{ display:block; font-family:var(--f-fun); font-size:.95rem; color:var(--ink); font-weight:500; }
.tst-who span{ font-family:var(--f-fun); font-size:.82rem; color:var(--ink-4); }
.rail-nav{ display:flex; gap:10px; }
.rail-nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out); }
.rail-nav button:hover{ background:var(--ink); border-color:var(--ink); color:#fff; transform:translateY(-2px); }
.rail-nav svg{ width:17px; height:17px; }

/* ==========================================================================
   18. COUNTERS
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); }
.stat{ position:relative; padding-top:22px; }
.stat::before{ content:""; position:absolute; left:0; top:0; width:44px; height:4px; border-radius:4px; background:var(--sc, var(--gold-deep)); }
.stat:nth-child(2)::before{ background:var(--r1); } .stat:nth-child(3)::before{ background:var(--r6); }
.stat:nth-child(4)::before{ background:var(--gold-deep); }
.stat b{ display:block; font-family:var(--f-display); font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1; color:var(--ink); font-variation-settings:"SOFT" 40; }
.stat span{ display:block; margin-top:10px; font-family:var(--f-fun); font-size:.88rem; color:var(--ink-3); letter-spacing:.01em; }

/* ==========================================================================
   19. FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 52px 26px 0; position:relative;
  font-family:var(--f-display); font-size:clamp(1.08rem,1.9vw,1.32rem); color:var(--ink);
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--rose-deep); }
.faq summary::after,.faq summary::before{ content:""; position:absolute; right:8px; top:50%; background:var(--fq, var(--r1)); border-radius:3px; transition:transform .45s var(--ease); }
.faq summary::after{ width:17px; height:3px; margin-top:-1.5px; }
.faq summary::before{ width:3px; height:17px; margin-top:-8.5px; right:15px; }
.faq details:nth-child(6n+2) summary::after,.faq details:nth-child(6n+2) summary::before{ background:var(--r6); }
.faq details:nth-child(6n+3) summary::after,.faq details:nth-child(6n+3) summary::before{ background:var(--gold-deep); }
.faq details:nth-child(6n+4) summary::after,.faq details:nth-child(6n+4) summary::before{ background:var(--r1); }
.faq details:nth-child(6n+5) summary::after,.faq details:nth-child(6n+5) summary::before{ background:var(--r3); }
.faq details:nth-child(6n) summary::after,.faq details:nth-child(6n) summary::before{ background:var(--r6); }
.faq details[open] summary::before{ transform:rotate(90deg); }
.faq-a{ overflow:hidden; }
.faq-a p{ padding:0 8% 28px 0; color:var(--ink-3); font-weight:300; }
.faq details[open] .faq-a{ animation:openfaq .55s var(--ease-out); }
@keyframes openfaq{ from{ opacity:0; transform:translateY(-8px);} }

/* ==========================================================================
   20. AREAS
   ========================================================================== */
.areas{ display:flex; flex-wrap:wrap; gap:9px; }
.area{ padding:.6em 1.1em; border-radius:100px; border:1.5px solid rgba(140,107,63,.28); background:rgba(253,250,247,.5); font-family:var(--f-fun); font-size:.88rem; color:var(--ink-2); transition:background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out), border-color .4s var(--ease); }
.area:hover{ background:var(--paper); color:var(--ink); transform:translateY(-3px) rotate(-2deg); border-color:var(--ac, var(--r1)); }
.areas .area:nth-child(6n+1){ --ac:var(--r1); } .areas .area:nth-child(6n+2){ --ac:var(--r3); }
.areas .area:nth-child(6n+3){ --ac:var(--r6); } .areas .area:nth-child(6n+4){ --ac:var(--gold-deep); }
.areas .area:nth-child(6n+5){ --ac:var(--r1); } .areas .area:nth-child(6n){ --ac:var(--r6); }

/* ==========================================================================
   20b. NEXT OPEN DATES
   ========================================================================== */
.dates{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,18px); }
.date-c{
  position:relative; text-align:left; padding:26px 20px 20px; border-radius:22px;
  border:1.5px solid var(--line); background:var(--paper); display:flex; flex-direction:column; gap:5px;
  transition:transform .55s var(--ease-out), border-color .4s var(--ease), box-shadow .55s var(--ease-out);
}
.date-c::before{ content:""; position:absolute; left:20px; top:0; width:38px; height:6px; border-radius:0 0 6px 6px; background:var(--dc, var(--r1)); }
.dates .date-c:nth-child(2){ --dc:var(--gold-deep); } .dates .date-c:nth-child(3){ --dc:var(--sand); }
.dates .date-c:nth-child(4){ --dc:var(--r6); } .dates .date-c:nth-child(5){ --dc:var(--r3); }
.date-c:hover{ transform:translateY(-7px) rotate(-1deg); border-color:var(--dc, var(--rose-soft)); box-shadow:var(--shadow-md); }
.date-c .d-mon{ font-family:var(--f-fun); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-deep); }
.date-c .d-day{ font-family:var(--f-display); font-size:2.6rem; line-height:1; color:var(--ink); }
.date-c .d-wd{ font-family:var(--f-fun); font-size:.88rem; color:var(--ink-3); }
.date-c .d-status{ margin-top:10px; font-family:var(--f-fun); font-size:.8rem; display:inline-flex; align-items:center; gap:7px; color:var(--avail); }
.date-c .d-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.date-c.is-low .d-status{ color:var(--low); }
.date-c.is-gone{ opacity:.45; pointer-events:none; }
.date-c.is-gone .d-status{ color:var(--ink-4); }
@media (max-width:900px){ .dates{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   21. CLOSING CTA AND FOOTER
   ========================================================================== */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(165deg,#FAEEE8 0%,#EBD3CB 44%,#E6D2AC 100%); }
.cta-band .wrap{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; }
.cta-arc{ position:absolute; left:50%; bottom:-42%; transform:translateX(-50%); width:min(900px,120%); aspect-ratio:1/1; border-radius:50%; border:1px solid rgba(67,47,51,.13); z-index:1; }
.cta-arc.b{ width:min(700px,96%); border-color:rgba(67,47,51,.1); }
.cta-arc.c{ width:min(500px,72%); border-color:rgba(67,47,51,.07); }

.foot{ background:radial-gradient(140% 80% at 50% -20%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%), var(--band-rose); color:var(--ink-2); padding-block:clamp(56px,6vw,84px) 34px; position:relative; overflow:hidden; }
.foot h4{ font-size:1rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--f-fun); font-weight:500; color:var(--ink); margin-bottom:18px; display:flex; align-items:center; gap:9px; }
.foot h4::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--r1); flex:none; }
.foot-grid > div:nth-child(3) h4::before{ background:var(--r1); }
.foot-grid > div:nth-child(4) h4::before{ background:var(--r6); }
.foot ul li{ font-family:var(--f-fun); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:clamp(24px,4vw,56px); }
.foot a:hover{ color:var(--ink); }
.foot ul{ display:flex; flex-direction:column; gap:11px; font-size:.9rem; }
/* The footer sign: the whole logo inside a cream arch plaque with a brass
   edge, the way the framed sign hangs on the wall in the venue. The mark on
   its own read as a cropped rainbow, and repeating the name underneath in a
   different face was saying it twice. */
/* the badge is already a finished circle, so it needs no frame around it */
.foot-brand{
  display:inline-block; margin-bottom:20px;
  transition:transform .6s var(--ease-out);
}
.foot-brand:hover{ transform:translateY(-3px) rotate(-1deg); }
.foot-logo{ display:block; height:clamp(104px,10vw,130px); width:auto; }
.foot-legal{ font-size:.78rem; color:var(--ink-3); margin-top:14px; line-height:1.6; }
.foot-bot{ margin-top:48px; padding-top:22px; border-top:1px solid rgba(140,107,63,.24); display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:.8rem; color:var(--ink-3); }
.map-frame{ border-radius:18px; overflow:hidden; border:1px solid rgba(140,107,63,.24); }
.map-frame .ph{ --r:16/10; }
.soc{ display:flex; gap:10px; }
.soc a{ width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(140,107,63,.3); color:var(--ink-2); display:grid; place-items:center; transition:background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out); }
.soc a:hover{ background:var(--paper); color:var(--ink); transform:translateY(-3px); }
.soc svg{ width:17px; height:17px; }

/* ==========================================================================
   22. STICKY MOBILE ACTION BAR
   ========================================================================== */
.mobar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:45; display:none; gap:10px;
  padding:10px; border-radius:100px; background:rgba(254,251,249,.94); backdrop-filter:blur(14px);
  border:1px solid var(--line); box-shadow:0 20px 44px -18px rgba(67,47,51,.45);
  transform:translateY(150%); transition:transform .6s var(--ease-out);
}
.mobar.up{ transform:translateY(0); }
.mobar .btn{ flex:1; padding:.95em 1em; font-size:.87rem; }

/* ==========================================================================
   23. MULTI STEP POPUP FORM
   ========================================================================== */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; visibility:hidden; }
.modal.open{ visibility:visible; }
.modal-scrim{ position:absolute; inset:0; background:rgba(52,36,40,.62); backdrop-filter:blur(6px); opacity:0; transition:opacity .5s var(--ease); }
.modal.open .modal-scrim{ opacity:1; }
.modal-card{
  position:relative; width:min(100%,660px); max-height:min(92dvh,860px); overflow:hidden;
  background:var(--paper); border-radius:26px; box-shadow:0 60px 120px -40px rgba(40,27,31,.7);
  display:flex; flex-direction:column;
  transform:translateY(26px) scale(.965); opacity:0;
  transition:transform .6s var(--ease-out), opacity .45s var(--ease);
}
.modal.open .modal-card{ transform:none; opacity:1; }
.modal-top{ padding:20px 26px 0; display:flex; align-items:flex-start; gap:16px; }
.modal-top img{ height:54px; width:auto; }
.modal-x{ margin-left:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--ink-3); transition:background-color .35s var(--ease), transform .4s var(--ease-out); flex:none; }
.modal-x:hover{ background:var(--paper-2); transform:rotate(90deg); }
.modal-x svg{ width:15px; height:15px; }

.pbar{ margin:18px 26px 0; height:4px; border-radius:4px; background:var(--paper-3); overflow:hidden; }
.pbar i{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--rose),var(--gold)); transition:width .6s var(--ease-out); }
.pmeta{ margin:9px 26px 0; display:flex; justify-content:space-between; font-family:var(--f-fun); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }

.modal-body{ padding:22px 26px 26px; overflow-y:auto; flex:1; }
.fstep{ display:none; animation:stepin .55s var(--ease-out); }
.fstep.on{ display:block; }
@keyframes stepin{ from{ opacity:0; transform:translateX(16px); } }
.fstep.back{ animation-name:stepback; }
@keyframes stepback{ from{ opacity:0; transform:translateX(-16px); } }
.fq{ font-family:var(--f-display); font-size:clamp(1.45rem,3.2vw,1.95rem); color:var(--ink); margin-bottom:8px; font-variation-settings:"SOFT" 44,"WONK" 1; }
.fhint{ font-size:.9rem; color:var(--ink-3); margin-bottom:22px; font-weight:300; }

.fld{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.fld label{ font-family:var(--f-fun); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); }
.fld input,.fld select,.fld textarea{
  width:100%; padding:.95em 1.05em; border-radius:15px; border:1.5px solid var(--line);
  background:var(--paper); font-size:1rem; color:var(--ink); transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 4px rgba(192,138,132,.16); }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--ink-4); }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.err{ color:#A5504A; font-size:.82rem; margin-top:-8px; margin-bottom:14px; display:none; }
.err.on{ display:block; animation:shake .4s var(--ease); }
@keyframes shake{ 25%{ transform:translateX(-5px);} 75%{ transform:translateX(5px);} }

.opts{ display:grid; gap:10px; margin-bottom:18px; }
.opts--2{ grid-template-columns:1fr 1fr; }
.opts--3{ grid-template-columns:repeat(3,1fr); }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt > span{
  display:flex; align-items:center; gap:10px; padding:.95em 1.05em; border-radius:16px;
  border:1.5px solid var(--line); background:var(--paper); font-family:var(--f-fun); font-size:.96rem; color:var(--ink-2);
  cursor:pointer; transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .35s var(--ease-out), color .3s var(--ease);
  height:100%; line-height:1.35;
}
.opt > span small{ display:block; font-size:.8rem; color:var(--ink-4); }
.opt:hover > span{ border-color:var(--rose-soft); transform:translateY(-2px) rotate(-.5deg); }
.opt input:checked + span{ border-color:var(--rose); background:var(--blush-2); color:var(--ink); box-shadow:0 0 0 3px rgba(192,138,132,.13); }
.opt input:focus-visible + span{ outline:2.5px solid var(--rose-deep); outline-offset:3px; }
.opt .tick{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex:none; display:grid; place-items:center; margin-left:auto; transition:background-color .3s var(--ease), border-color .3s var(--ease); }
.opt .tick svg{ width:11px; height:11px; color:#fff; opacity:0; transition:opacity .3s var(--ease); }
.opt input:checked + span .tick{ background:var(--rose); border-color:var(--rose); }
.opt input:checked + span .tick svg{ opacity:1; }

.opts--1{ grid-template-columns:1fr; }
/* the form shows one set of questions for a party and another for a salon
   appointment. Everything is in the markup, the class on the form decides. */
#enquiry [data-when="salon"]{ display:none; }
#enquiry.is-salon [data-when="party"]{ display:none; }
#enquiry.is-salon [data-when="salon"]{ display:revert; }
/* the label text of an option, so a tick can sit on either side of it */
.opt-t{ display:block; flex:1; min-width:0; }
.opt-t small{ display:block; font-size:.8rem; color:var(--ink-4); margin-top:2px; }
.opt > span > .tick:first-child{ margin-left:0; margin-right:2px; }

/* the little leaf that marks a vegetarian dish */
.veg{ display:inline-block; width:15px; height:15px; color:var(--avail); vertical-align:-2px; margin-left:7px; flex:none; }
.fhint .veg{ margin:0 2px; }

.menu-h{
  font-family:var(--f-fun); font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-4); margin:20px 0 10px; display:flex; align-items:center; gap:10px;
}
.menu-h::after{ content:""; height:1px; flex:1; background:var(--line); }
.fstep .menu-h:first-of-type{ margin-top:4px; }

/* the notices, repeated inside the form where the choices are made */
.fnotice{
  margin-top:18px; padding:16px 18px; border-radius:16px;
  background:var(--paper-2); border:1px solid var(--line);
}
.fnotice p{ font-size:.82rem; line-height:1.6; color:var(--ink-3); font-weight:300; }
.fnotice p + p{ margin-top:8px; }
.fnotice b{ font-weight:500; color:var(--ink-2); }
.fnotice-tc{ font-family:var(--f-fun); color:var(--ink-2) !important; }

/* the read back on the last step */
.fsummary{ display:grid; gap:11px; margin-bottom:20px; padding:18px 20px; border-radius:18px; background:var(--paper-2); border:1px solid var(--line); }
.fs-row{ display:flex; gap:14px; align-items:flex-start; }
.fs-k{ min-width:104px; flex:none; font-family:var(--f-fun); font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); padding-top:3px; }
.fs-v{ flex:1; font-size:.95rem; color:var(--ink); line-height:1.5; }

.opt--terms > span{ align-items:flex-start; }
.opt--terms .opt-t{ font-family:var(--f-body); font-size:.86rem; font-weight:300; line-height:1.55; color:var(--ink-3); }
.opt--terms .opt-t a{ color:var(--rose-deep); text-decoration:underline; text-underline-offset:2px; }
.opt--terms .tick{ margin-top:1px; }

/* the honeypot. A person never sees it, a robot fills it in. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.pill input{ position:absolute; opacity:0; width:0; height:0; }
.pill > span{ display:inline-flex; padding:.58em 1.1em; border-radius:100px; border:1.5px solid var(--line); font-family:var(--f-fun); font-size:.94rem; cursor:pointer; transition:all .3s var(--ease); }
.pill:hover > span{ border-color:var(--rose-soft); transform:translateY(-2px); }
.pill input:checked + span{ background:var(--rose); border-color:var(--rose); color:#FFF9F7; }
.pill input:focus-visible + span{ outline:2.5px solid var(--rose-deep); outline-offset:3px; }

.modal-foot{ padding:16px 26px 22px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; background:var(--paper); }
.fback{ font-family:var(--f-fun); font-size:.94rem; color:var(--ink-4); display:inline-flex; align-items:center; gap:7px; padding:.6em .2em; }
.fback:hover{ color:var(--ink); }
.fback svg{ width:14px; height:14px; }
.fback[hidden]{ display:none; }
.modal-foot .btn{ margin-left:auto; }
.reassure{ font-size:.76rem; color:var(--ink-4); display:flex; align-items:center; gap:7px; margin-top:14px; }
.reassure svg{ width:14px; height:14px; flex:none; color:var(--avail); }

.done{ text-align:center; padding:16px 0 6px; }
.done-ic{ width:78px; height:78px; margin:0 auto 20px; border-radius:50%; background:var(--blush-2); display:grid; place-items:center; color:var(--rose-deep); animation:pop .7s var(--ease-out); }
.done-ic svg{ width:34px; height:34px; }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } }
#confetti{ position:fixed; inset:0; z-index:110; pointer-events:none; display:none; }

/* ==========================================================================
   23b. TWO COLUMN SPLITS
   ========================================================================== */
.split{ display:grid; gap:clamp(28px,5vw,72px); }
.split--faq{ grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); align-items:start; }
.split--areas{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; }
.split-side{ position:sticky; top:110px; }
.rail-head{ max-width:none; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.rail-head-copy{ display:flex; flex-direction:column; gap:16px; max-width:52ch; }

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .vgrid{ grid-template-columns:1fr 1fr; }
  .th-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

/* tablets and small laptops */
@media (max-width:900px){
  .split--faq,.split--areas{ grid-template-columns:1fr; }
  .split-side{ position:static; }
}

/* everything below here is the phone layout */
@media (max-width:960px){
  .nav,.head-cta .btn--ghost{ display:none; }
  .burger{ display:grid; }
  .head .wrap{ min-height:68px; gap:12px; padding-block:8px; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero{ padding-block:34px 54px; }
  .scene{ max-width:460px; margin-inline:auto; width:100%; }
  .fc1{ left:0; } .fc2{ right:0; }
  .pk-grid{ grid-template-columns:1fr; }
  .pk{ min-height:0; }
  .steps{ grid-template-columns:1fr; gap:26px; }
  .steps::before{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .venue-grid > *{ grid-column:span 6 !important; }
  .mobar{ display:flex; }
  body{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  .ring-wrap{ height:clamp(330px,82vw,400px); padding-bottom:42px; perspective:1150px; }
  .ring{ width:clamp(148px,40vw,190px); height:clamp(206px,54vw,262px); }
  .ring-item{ border-width:4px; }
  .ring-hint{ bottom:10px; font-size:.78rem; }
}

@media (max-width:760px){
  :root{ --step--1:.82rem; }
  .sec{ padding-block:clamp(56px,10vw,80px); }
  .sec--tight{ padding-block:clamp(46px,8vw,64px); }
  .sec-head{ margin-bottom:30px; gap:14px; }

  /* comfortable thumb targets everywhere */
  .btn{ min-height:48px; padding:.9em 1.5em; }
  .btn--sm{ min-height:44px; padding:.7em 1.1em; font-size:.86rem; }
  .btn--lg{ min-height:54px; }
  .chip{ min-height:44px; padding:.66em 1.1em; }
  .area{ min-height:40px; align-items:center; display:inline-flex; }
  .pill > span{ min-height:44px; align-items:center; }
  .opt > span{ min-height:52px; }
  .soc a{ width:46px; height:46px; }
  .rail-nav button{ width:48px; height:48px; }
  .faq summary{ padding-block:22px; }
  .d-link{ padding:18px 0; }
  .foot ul{ gap:4px; }
  .foot ul li a{ display:inline-flex; align-items:center; min-height:44px; }
  .modal-x{ width:44px; height:44px; }

  /* the review rail reads better one card at a time */
  .tst{ flex:0 0 86%; padding:26px 22px; }
  .tst q{ font-size:1.08rem; }
  .rail-head{ flex-direction:column; align-items:flex-start; }

  .doodle{ transform:scale(.8); }
  .float-card{ font-size:.76rem; padding:10px 13px; border-radius:16px; }
  .float-card b{ font-size:.9rem; }
  .float-card .fc-ic{ width:30px; height:30px; }
  .float-card .fc-ic svg{ width:15px; height:15px; }
  .spec div{ padding:20px 18px; }
  .spec dd{ font-size:1.2rem; }
  .date-c .d-day{ font-size:2.2rem; }
}

@media (max-width:760px){
  .notice-list{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .vgrid{ grid-template-columns:1fr; }
  .th-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .venue-grid{ grid-template-columns:repeat(2,1fr); gap:16px 14px; align-items:start; }
  .venue-grid > *{ grid-column:span 1 !important; }
  .vg-a,.vg-f{ grid-column:span 2 !important; }
  .venue-grid .ph{ --r:4/5 !important; }
  .vg-a .ph,.vg-f .ph{ --r:16/11 !important; }
  .cap{ font-size:.8rem; margin-top:9px; }
  .frow,.opts--2,.opts--3{ grid-template-columns:1fr; }
  .fc3{ display:none; }
  .hide-sm{ display:none; }
  .scallop::before{
    top:-19px; height:20px;
    background:radial-gradient(circle at 50% 100%, var(--scallop-fill, var(--paper)) 17px, transparent 17.5px) repeat-x;
    background-size:34px 20px;
  }
  .modal-card{ border-radius:22px; max-height:94dvh; }
  .modal-top{ padding:16px 18px 0; }
  .modal-body{ padding:18px; overscroll-behavior:contain; }
  .modal-foot{ padding:14px 18px calc(18px + env(safe-area-inset-bottom)); }
  .pbar{ margin:14px 18px 0; }
  .pmeta{ margin:8px 18px 0; font-size:.74rem; }
  .fq{ font-size:1.38rem; }
  .fhint{ margin-bottom:18px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .h-xl{ font-size:clamp(2.5rem,10.5vw,3.4rem); }
  .hero h1{ letter-spacing:-.02em; }
  .trustrow{ gap:9px 18px; }
  .btn-row{ width:100%; }
  .hero .btn-row .btn,.cta-band .btn-row .btn,.pk-soon .btn-row .btn{ width:100%; }
  .cta-band .btn-row{ flex-direction:column; }
  .pk-soon .btn-row,.pk-soon .btn{ width:100%; }
  .mobar{ left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); }
}

/* the narrowest phones still in real use */
@media (max-width:440px){
  .fs-row{ flex-direction:column; gap:3px; }
  .fs-k{ min-width:0; padding-top:0; }
}
@media (max-width:400px){
  :root{ --gut:18px; }
  .head .wrap{ gap:8px; }
  .brand img{ height:56px; }
  .head-cta .btn--sm{ padding:.7em .9em; font-size:.82rem; }
  .th-lab{ font-size:1rem; padding:38px 10px 13px; }
  .th-lab small{ font-size:.72rem; }
  .dates{ grid-template-columns:1fr 1fr; }
  .spec{ grid-template-columns:1fr 1fr; }
  .tst{ flex:0 0 90%; }
  .pills{ gap:7px; }
  .pill > span{ padding:.55em .9em; font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .rv-mask{ clip-path:none !important; }
  .ph::after{ display:none; }
}
@media print{ .head,.mobar,.modal{ display:none !important; } }


/* ==========================================================================
   WORDPRESS HOUSEKEEPING
   The classes WordPress and its editor expect to find in a theme.
   ========================================================================== */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink); padding:14px 20px; border-radius:0 0 16px 0;
  font-family:var(--f-fun); box-shadow:var(--sh-2);
}
.skip:focus{ left:0; }

.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--paper); clip-path:none; color:var(--ink); display:block;
  font-size:.9rem; height:auto; left:6px; line-height:normal; padding:14px 20px;
  text-decoration:none; top:6px; width:auto; z-index:200; border-radius:12px; box-shadow:var(--sh-2);
}

.alignleft{ float:left; margin:.4em 1.6em 1em 0; }
.alignright{ float:right; margin:.4em 0 1em 1.6em; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.alignwide{ max-width:1180px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100%; }
.wp-caption{ max-width:100%; }
.wp-caption img{ display:block; border-radius:18px; }
.wp-caption-text,.gallery-caption{ font-size:.86rem; color:var(--ink-3); margin-top:8px; }
.sticky,.bypostauthor{ display:block; }
.wp-block-image img{ border-radius:18px; max-width:100%; height:auto; }

/* ==========================================================================
   INNER PAGES, POSTS AND THE 404
   Plain, readable, and in the same warm world as the home page.
   ========================================================================== */
.page-head{ padding-block:clamp(110px,12vw,150px) clamp(28px,4vw,46px); background:var(--band-blush); position:relative; }
.page-head .wrap{ max-width:860px; }
.page-title{ font-family:var(--f-display); font-size:var(--step-4); color:var(--ink); font-variation-settings:"SOFT" 44,"WONK" 1; }
.page-sub{ color:var(--ink-3); margin-top:12px; font-weight:300; }

.entry{ padding-block:clamp(44px,5vw,72px) clamp(64px,7vw,100px); }
.entry .wrap{ max-width:760px; }
.entry-body > * + *{ margin-top:1.1em; }
.entry-body h2{ font-family:var(--f-display); font-size:var(--step-2); color:var(--ink); margin-top:1.8em; }
.entry-body h3{ font-family:var(--f-display); font-size:var(--step-1); color:var(--ink); margin-top:1.5em; }
.entry-body p,.entry-body li{ color:var(--ink-2); font-weight:300; line-height:1.75; }
.entry-body ul,.entry-body ol{ padding-left:1.3em; display:grid; gap:.5em; }
.entry-body ul li{ list-style:disc; } .entry-body ol li{ list-style:decimal; }
.entry-body a{ color:var(--rose-deep); text-decoration:underline; text-underline-offset:3px; }
.entry-body blockquote{ border-left:3px solid var(--rose-soft); padding-left:20px; font-family:var(--f-display); font-size:1.2rem; color:var(--ink); }
.entry-body img{ max-width:100%; height:auto; border-radius:18px; }
.entry-nav{ margin-top:44px; display:flex; flex-wrap:wrap; gap:14px; }

.err-page{ min-height:72vh; display:grid; place-items:center; text-align:center; padding:clamp(120px,14vw,170px) 0 clamp(70px,8vw,110px); }
.err-page .wrap{ max-width:620px; }
.err-num{ font-family:var(--f-display); font-size:clamp(5rem,16vw,9rem); line-height:.9; color:var(--rose-soft); font-variation-settings:"SOFT" 60,"WONK" 1; }
.err-page h1{ font-family:var(--f-display); font-size:var(--step-3); color:var(--ink); margin-top:18px; }
.err-page p{ color:var(--ink-3); margin-top:14px; font-weight:300; }
.err-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ==========================================================================
   THE MAINTENANCE PAGE
   Same palette, same arch, one screen, nothing to scroll.
   ========================================================================== */
.curtain{
  min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:48px 20px; position:relative; overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(255,255,255,.85), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--band-blush), var(--paper) 46%, var(--band-sand));
}
.curtain::after{
  content:""; position:absolute; inset:0; background-image:var(--grain);
  opacity:.07; mix-blend-mode:multiply; pointer-events:none;
}
.curtain-in{ position:relative; z-index:2; max-width:620px; width:100%; }
.curtain-logo{ width:min(210px,50vw); height:auto; margin:0 auto 26px; display:block; }
.curtain h1{
  font-family:var(--f-display); font-size:clamp(2.1rem,6.4vw,3.5rem); line-height:1.08;
  color:var(--ink); font-variation-settings:"SOFT" 44,"WONK" 1;
}
.curtain h1 em{ font-style:italic; color:var(--rose-deep); }
.curtain .lede{ color:var(--ink-3); margin-top:18px; font-weight:300; font-size:1.06rem; }
.curtain-rule{
  width:min(260px,70%); height:5px; border-radius:100px; margin:30px auto;
  background:linear-gradient(90deg,var(--r1) 0 16.6%,var(--r2) 16.6% 33.3%,var(--r3) 33.3% 50%,var(--r4) 50% 66.6%,var(--r5) 66.6% 83.3%,var(--r6) 83.3%);
}
.curtain-card{
  background:var(--paper); border:1px solid var(--line); border-radius:46px 46px 22px 22px;
  padding:clamp(26px,4vw,38px); box-shadow:var(--sh-1); margin-top:4px;
}
.curtain-where{ font-family:var(--f-fun); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.curtain-addr{ font-family:var(--f-display); font-size:clamp(1.1rem,3.2vw,1.42rem); color:var(--ink); margin-top:9px; line-height:1.4; }
.curtain-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.curtain-note{ margin-top:26px; font-size:.84rem; color:var(--ink-4); }
.curtain-note a{ color:var(--rose-deep); }

/* ==========================================================================
   THE COMING SOON PAGE
   One card on a bed of arches. Everything a parent needs before we open:
   the list, the address, the map, WhatsApp and the inbox.
   ========================================================================== */
.cs{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:clamp(26px,5vw,56px) 16px clamp(22px,4vw,34px); position:relative; overflow:hidden;
  background:
    radial-gradient(95% 55% at 50% -8%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--band-blush), var(--paper) 42%, var(--band-sand));
}
.cs::after{
  content:""; position:absolute; inset:0; background-image:var(--grain);
  opacity:.07; mix-blend-mode:multiply; pointer-events:none; z-index:1;
}

/* the arches resting behind the card */
.cs-arches{ position:absolute; left:50%; bottom:-6vh; transform:translateX(-50%); width:min(1240px,168vw); aspect-ratio:1/.82; pointer-events:none; z-index:0; }
.cs-arches span{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:var(--s); aspect-ratio:1/.9; border:clamp(10px,1.5vw,18px) solid var(--c); border-bottom:0;
  border-radius:50% 50% 0 0 / 70% 70% 0 0; opacity:.62;
}
body.llh-curtain{ background:var(--band-sand); }

.cs-card{
  position:relative; z-index:2; width:100%; max-width:560px; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:clamp(26px,4vw,34px);
  padding:clamp(28px,5vw,46px) clamp(22px,4.5vw,44px) clamp(26px,4vw,40px);
  box-shadow:0 30px 70px -40px rgba(74,51,54,.4), 0 2px 10px rgba(74,51,54,.05);
}

/* the logo in its own little arch */
/* the badge is a finished circle, so it stands on its own */
.cs-crest{ width:min(240px,62%); margin:0 auto clamp(20px,3vw,28px); }
.cs-crest img{ display:block; width:100%; height:auto; }

.cs-eyebrow{
  font-family:var(--f-fun); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:16px;
}
.cs-h1{
  font-family:var(--f-display); font-size:clamp(1.85rem,6vw,2.6rem); line-height:1.1;
  color:var(--ink); font-variation-settings:"SOFT" 44,"WONK" 1;
}
.cs-is{ display:block; }
.cs-h1 .ital{ font-size:1em; }
.cs-lede{ color:var(--ink-3); font-weight:300; line-height:1.65; margin-top:16px; }

/* the countdown to opening day */
.cs-count{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-top:clamp(22px,3.4vw,30px);
}
.cs-unit{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
  padding:14px 6px 11px; text-align:center;
}
.cs-unit b{
  display:block; font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.5rem,5.4vw,2.1rem); line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cs-unit span{
  display:block; margin-top:6px; font-family:var(--f-fun);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4);
}
/* a visitor who asked for less motion does not need a second hand */
.cs-count.is-calm .cs-unit--s{ display:none; }
.cs-count.is-calm{ grid-template-columns:repeat(3,1fr); }
.cs-doors{
  margin-top:12px; font-family:var(--f-fun); font-size:.8rem;
  letter-spacing:.06em; color:var(--ink-4); text-align:center;
}
.cs-open{
  margin-top:clamp(22px,3.4vw,30px); font-family:var(--f-display);
  font-size:1.3rem; color:var(--rose-deep); text-align:center;
}
@media (max-width:360px){
  .cs-unit{ padding:11px 4px 9px; border-radius:13px; }
  .cs-unit span{ font-size:.56rem; letter-spacing:.08em; }
}

.cs-form{ margin-top:clamp(22px,3.4vw,30px); text-align:left; }
.cs-fld{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.cs-fld label{ font-family:var(--f-fun); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.cs-fld input{
  width:100%; padding:.95em 1.1em; border-radius:16px; border:1.5px solid var(--line);
  background:var(--paper-2); font-size:1rem; color:var(--ink);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.cs-fld input::placeholder{ color:var(--ink-4); }
.cs-fld input:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 4px rgba(192,138,132,.16); }
.cs-form .err{ margin-top:0; }
.cs-form .btn{ margin-top:6px; }
.cs-note{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.8rem; color:var(--ink-4); margin-top:14px;
}
.cs-note svg{ width:14px; height:14px; flex:none; color:var(--gold-deep); }

.cs-done{ margin-top:clamp(22px,3.4vw,30px); }
.cs-done-ic{
  width:62px; height:62px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:var(--blush-2); color:var(--rose-deep); animation:pop .7s var(--ease-out);
}
.cs-done-ic svg{ width:28px; height:28px; }
.cs-done-t{ font-family:var(--f-display); font-size:1.3rem; color:var(--ink); }
.cs-done-s{ color:var(--ink-3); font-weight:300; margin-top:7px; font-size:.94rem; }

.cs-rule{ border:0; border-top:1px solid var(--line); margin:clamp(22px,3.4vw,30px) 0 clamp(18px,2.6vw,24px); }
.cs-where{ font-family:var(--f-fun); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.cs-addr{ font-family:var(--f-display); font-size:clamp(1.02rem,3vw,1.2rem); color:var(--ink); margin-top:8px; line-height:1.45; }
.cs-links{ display:grid; gap:10px; margin-top:18px; }
.cs-links .btn{ justify-content:center; }

.cs-foot{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:.8rem; color:var(--ink-3); text-align:center;
}
.cs-foot p{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; }
.cs-foot span{ border-bottom:1px dotted var(--sand); padding-bottom:3px; }
.cs-ig{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--rose-deep); background:var(--paper);
  transition:transform .4s var(--ease-out), background-color .4s var(--ease);
}
.cs-ig:hover{ transform:translateY(-3px); background:var(--blush-2); }
.cs-ig svg{ width:17px; height:17px; }

@media (max-width:420px){
  .cs-card{ padding-left:18px; padding-right:18px; }
  .cs-crest{ width:min(260px,86%); }
}