/* =========================================================
   ELEVATE EVENTS MANAGEMENT
   Palette pulled from the brand logo: rose gold, blush, ink.
   The hero alone uses the 2026-10 logo's own colours — black
   velvet, gold leaf, hot pink — so the mark sits in its setting.
   ========================================================= */

:root{
  --rose:        #B76E79;
  --rose-light:  #E0A9A2;
  --rose-pale:   #F3D9D2;
  --rose-glow:   #D89A94;
  --blush:       #FBF1ED;
  --cream:       #FDF8F6;
  --ink:         #14100F;
  --ink-soft:    #241D1C;
  --text:        #2E2624;
  --text-mute:   #6E5F5B;
  --white:       #FFFFFF;

  /* the 2026-10 logo: used by the hero */
  --velvet:      #0B0508;
  --ivory:       #FBF3E8;
  --gold:        #E2B85C;
  --gold-light:  #F6DE9C;
  --gold-deep:   #A9772A;
  --pink:        #E8388A;
  --pink-soft:   #F7A8CF;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Montserrat', system-ui, -apple-system, sans-serif;
  --script: 'Great Vibes', cursive;

  --radius:   20px;
  --radius-s: 12px;
  --shadow:      0 18px 50px rgba(88, 50, 48, .13);
  --shadow-deep: 0 30px 80px rgba(50, 25, 24, .30);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --maxw: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--text);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* icon sprite: symbols are stroked line icons */
.sprite{ display:none; }
.oi, .ci-svg, .ci, .footer-social svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
/* the two brand glyphs are solid shapes, not strokes */
.ci-svg use[href="#i-fb"], svg use[href="#i-fb"]{ fill:currentColor; stroke:none; }

/* ---------------------------------------------------------
   3D BACKGROUND LAYERS
   --------------------------------------------------------- */
/* canvas sits ABOVE the colour wash so the particles stay legible */
#bg3d{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;
  display:block;
  pointer-events:none;
}

.bg-veil{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(224,169,162,.34), transparent 62%),
    radial-gradient(900px 620px at 92% 8%,  rgba(183,110,121,.24), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(243,217,210,.45), transparent 65%);
}

.bg-orbs{ position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.orb{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.42;
  will-change:transform;
}
.orb-1{ width:520px; height:520px; top:-8%; left:-6%;
  background:radial-gradient(circle at 30% 30%, #E9BDB6, #B76E79);
  animation:drift1 26s ease-in-out infinite; }
.orb-2{ width:430px; height:430px; top:42%; right:-8%;
  background:radial-gradient(circle at 60% 40%, #F5D9D2, #C98189);
  animation:drift2 32s ease-in-out infinite; }
.orb-3{ width:600px; height:600px; bottom:-16%; left:26%;
  background:radial-gradient(circle at 50% 50%, #FAE6E0, #D9A39C);
  animation:drift3 38s ease-in-out infinite; }

/* --- the champagne field: bubbles rising up the whole page, always.
   It floats above the section backgrounds so it carries across the ink
   bands too, but it's kept faint and pointer-transparent so nothing it
   crosses becomes harder to read. --- */
.fizz-field{
  position:fixed; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}
/* Bubbles drift *behind* the photographs and content blocks, but still
   show through the open space of every section — including the ink bands,
   whose backgrounds stay below the field. These wrappers are transparent,
   so lifting them hides nothing; it only puts their contents in front. */
.hero,
.section-head,
.flow-row,
.flow-outro,
.occasions-wrap,
.booth-wrap,
.gallery,
.gallery-cta,
.chips,
.planner,
.planner-services,
.guide,
.g-steps,
.inquire-wrap,
.footer{
  position:relative;
  z-index:3;
}
.fizz-field.paused span{ animation-play-state:paused; }
.fizz-field span{
  position:absolute; bottom:-16vh;
  border-radius:50%;
  animation:fieldRise var(--dur, 22s) linear var(--del, 0s) infinite;
  will-change:transform, opacity;
}
/* a plain bubble */
.fizz-field .b-plain{
  background:radial-gradient(circle at 32% 27%,
    rgba(255,255,255,.95) 0%, var(--rose-pale) 36%,
    rgba(224,169,162,.52) 62%, rgba(183,110,121,.16) 80%, transparent 84%);
  box-shadow:0 0 10px rgba(224,169,162,.42);
}
/* a bubble with the monogram suspended inside it */
.fizz-field .b-logo{
  overflow:hidden;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 22px rgba(150,90,88,.26), inset 0 0 20px rgba(255,255,255,.6);
}
.fizz-field .b-logo img{
  width:100%; height:100%; object-fit:cover;
  border-radius:50%; opacity:.92;
}
/* the glass highlight that makes it read as a bubble, not a sticker */
.fizz-field .b-logo::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 29% 25%, rgba(255,255,255,.9) 0%, transparent 40%),
    radial-gradient(circle at 72% 79%, rgba(255,255,255,.38) 0%, transparent 38%);
}
@keyframes fieldRise{
  0%  { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  9%  { opacity:var(--peak, .6); }
  86% { opacity:var(--peak, .6); }
  100%{ transform:translate3d(var(--sway, 0px), -132vh, 0) rotate(var(--spin, 0deg)); opacity:0; }
}

@keyframes drift1{ 50%{ transform:translate3d(120px, 90px, 0) scale(1.15);} }
@keyframes drift2{ 50%{ transform:translate3d(-140px, -70px, 0) scale(1.1);} }
@keyframes drift3{ 50%{ transform:translate3d(80px, -110px, 0) scale(.9);} }

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:16px clamp(18px, 4vw, 46px);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{
  background:rgba(253,248,246,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 6px 30px rgba(120,70,68,.10);
  padding:10px clamp(18px, 4vw, 46px);
}

.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand img{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 18px rgba(150,90,88,.28);
  transition:transform .5s var(--ease);
}
.nav-brand:hover img{ transform:rotate(-8deg) scale(1.06); }
/* while the nav floats over the night-stage hero, it is ivory and gold */
.nav:not(.scrolled):not(.menu-open) .nav-brand strong{ color:var(--ivory); }
.nav:not(.scrolled):not(.menu-open) .nav-brand em{ color:var(--gold); }
.nav:not(.scrolled):not(.menu-open) .nav-toggle:not(.open) span{ background:var(--ivory); }
@media (min-width: 761px){
  .nav:not(.scrolled):not(.menu-open) .nav-links a:not(.nav-cta){ color:rgba(251,243,232,.86); }
  .nav:not(.scrolled):not(.menu-open) .nav-links a.active:not(.nav-cta){ color:var(--gold-light); }
  .nav:not(.scrolled):not(.menu-open) .nav-cta{
    background:linear-gradient(135deg, var(--pink), #A51E60);
    box-shadow:0 8px 22px rgba(232,56,138,.4), inset 0 0 0 1px rgba(246,222,156,.45);
  }
}
.nav-brand span{ display:flex; flex-direction:column; line-height:1.15; }
.nav-brand strong{
  font-family:var(--serif); font-size:1.32rem; font-weight:600;
  letter-spacing:.26em; color:var(--ink);
}
.nav-brand em{
  font-style:normal; font-size:.56rem; letter-spacing:.30em;
  color:var(--rose); text-transform:uppercase; font-weight:600;
}

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--text); position:relative; padding:6px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:linear-gradient(90deg, var(--rose), var(--rose-light));
  transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.nav-cta{
  background:linear-gradient(135deg, var(--rose), var(--rose-glow));
  color:var(--white)!important;
  padding:11px 24px!important; border-radius:100px;
  box-shadow:0 8px 22px rgba(183,110,121,.38);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(183,110,121,.5); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:130px clamp(20px,5vw,40px) 90px;
  position:relative;
  perspective:1200px;
  overflow:hidden;
  color:var(--ivory);
  /* black velvet, warmed toward plum where the coin sits */
  background:
    radial-gradient(70% 55% at 50% 38%, #2B0E1E 0%, rgba(43,14,30,0) 70%),
    radial-gradient(120% 90% at 50% 100%, #1A0A10 0%, var(--velvet) 60%);
}
/* a gold hairline where the night stage meets the cream page */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--gold-deep) 18%,
             var(--gold-light) 50%, var(--gold-deep) 82%, transparent);
  opacity:.8;
}
/* the glint layer sits behind the hero content, so sparkles halo the
   logo and headline without ever sitting on top of the words */
.hero-sparkle{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}
.hero-inner{ max-width:860px; width:100%; position:relative; z-index:1; }

/* --- optional background reel ---------------------------------------
   Invisible until a clip actually plays, so with no hero.mp4 present
   the hero renders exactly as it always has, on the gradient and orbs.
   .hero has `perspective`, which makes it a stacking context — so
   z-index:-1 here sits behind the hero content but still in front of
   the page's fixed background layers. */
.hero-video{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease);
  pointer-events:none;
}
.hero-video.playing{ opacity:1; }
/* the scrim only exists once there's footage to sit on */
.hero.has-reel::before{
  content:''; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,5,8,.82), rgba(11,5,8,.55) 42%, rgba(11,5,8,.88)),
    radial-gradient(60% 50% at 50% 45%, rgba(43,14,30,.5), transparent 72%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
}

/* ---------------------------------------------------------
   THE 3D BRAND MARK
   The logo file itself is never altered — no redraw, no overlay on
   the artwork. It is the face of a struck coin, and everything here
   builds the object around it: a milled edge behind it, its own gold
   lifted a few pixels off the black, a halo, a sheen, some glints.

   Three nested elements, each owning exactly one kind of motion, so
   none of them can overwrite another:
     .logo3d          float + arrival   (translate / scale, not transform)
     .logo3d__pointer pointer steering  (transform, written by app.js)
     .logo3d__stage   the idle sway     (transform, from CSS)
   --------------------------------------------------------- */
.brand-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.logo3d{
  --coin-depth:16px;     /* how thick the struck disc reads */
  --tilt-x:0deg;
  --tilt-y:0deg;
  position:relative;
  width:min(320px, 74vw);
  aspect-ratio:1 / 1;
  margin:0 auto 54px;              /* clear of the halo, which overhangs by 9% */
  perspective:900px;
  perspective-origin:50% 44%;
  animation:l3Arrive 1.5s var(--ease) both,
            l3Float 7s ease-in-out 1.3s infinite;
}
/* arrival and float use the independent transform properties, so the
   stage below is free to own `transform` outright */
@keyframes l3Arrive{
  0%  { opacity:0; scale:.78; filter:blur(10px); }
  55% { opacity:1; }
  100%{ opacity:1; scale:1;   filter:blur(0); }
}
@keyframes l3Float{ 50%{ translate:0 -13px; } }

.logo3d__pointer{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .6s var(--ease);
}
.logo3d.is-steering .logo3d__pointer{ transition:transform .1s linear; }

.logo3d__stage{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  /* the resting pose: enough angle to read as an object, not a sticker */
  transform:rotateY(-8deg) rotateX(3deg);
  animation:l3Sway 18s ease-in-out infinite;
}
@keyframes l3Sway{
  0%,100%{ transform:rotateY(-13deg) rotateX(4deg); }
  50%    { transform:rotateY(13deg)  rotateX(-3.5deg); }
}

/* --- the face: the supplied artwork, nothing done to it --- */
.coin-face{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  /* on the night stage the coin throws light rather than shadow */
  box-shadow:0 34px 74px rgba(0,0,0,.6),
             0 0 70px rgba(232,56,138,.30),
             0 0 140px rgba(226,184,92,.18),
             0 0 0 1px rgba(226,184,92,.45);
}

/* --- the milled edge: discs stacked behind the face. Each sits a
       little further back and a little darker, so the wall of the coin
       catches the light along its length. app.js fills this. --- */
.coin-edge{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}
/* paint and depth are both written by app.js: the shading is baked into
   each disc's own gradient, because a filter per disc is a separate
   compositing pass per disc, every frame the stage moves */
.coin-edge i{
  position:absolute; inset:0;
  border-radius:50%;
}

/* --- the artwork's own gold, floated off its black field.
       The file is its own luminance mask: the black disc falls away and
       the rose-gold survives, so the mark parts from the background as
       the coin turns. Without luminance masking this would paint a
       second copy of the logo over the first, so it is gated. --- */
.coin-lift{ display:none; }
@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance){
  .coin-lift{
    display:block;
    position:absolute; inset:0;
    border-radius:50%;
    background:url("logo.jpg") center / cover no-repeat;
    filter:brightness(1.12) saturate(1.05);
    transform:translateZ(7px);
    -webkit-mask-image:url("logo.jpg");
            mask-image:url("logo.jpg");
    -webkit-mask-size:cover; mask-size:cover;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-source-type:luminance;
            mask-mode:luminance;
    pointer-events:none;
  }
}

/* --- a halo drawn outside the mark, turning slowly --- */
.coin-halo{
  position:absolute; inset:-9%;
  transform:translateZ(10px);
  pointer-events:none;
}
.coin-halo svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible;
  transform-origin:50% 50%;
  animation:l3Spin 46s linear 2s infinite;
}
.halo{ fill:none; stroke:var(--gold); stroke-linecap:round; transform-origin:50% 50%; }
.halo-a{
  stroke-width:1.1; opacity:.7;
  stroke-dasharray:654; stroke-dashoffset:654;
  animation:l3Draw 1.8s var(--ease) .5s both;
}
.halo-b{
  stroke:var(--pink); stroke-width:.7; opacity:.45;
  stroke-dasharray:691; stroke-dashoffset:691;
  animation:l3Draw 1.8s var(--ease) .7s both;
}
@keyframes l3Draw{ to{ stroke-dashoffset:0; } }
@keyframes l3Spin{ to{ transform:rotate(360deg); } }

/* --- the band of light. `screen` lifts dark pixels and leaves the
       highlights alone, so it reads as light on the gold rather than
       fog over the disc. --- */
.coin-sheen{
  position:absolute; inset:0;
  border-radius:50%; overflow:hidden;
  transform:translateZ(12px);
  mix-blend-mode:screen; pointer-events:none;
}
.coin-sheen i{
  position:absolute; top:-30%; bottom:-30%; left:-60%;
  width:52%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,214,198,.10) 22%,
    rgba(255,247,241,.30) 50%,
    rgba(244,186,172,.13) 78%,
    transparent 100%);
  filter:blur(4px);
  animation:l3Sheen 7s var(--ease) 1.5s infinite;
}
@keyframes l3Sheen{
  0%  { transform:translateX(0)    skewX(-16deg); opacity:0; }
  5%  { opacity:1; }
  24% { opacity:1; }
  32% { transform:translateX(330%) skewX(-16deg); opacity:0; }
  100%{ transform:translateX(330%) skewX(-16deg); opacity:0; }
}

/* --- glints hanging in front of the coin at their own depths --- */
.coin-glints{ position:absolute; inset:0; transform-style:preserve-3d; }
.coin-glints i{
  position:absolute;
  left:var(--x); top:var(--y);
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff 0%, var(--gold-light) 45%,
             rgba(226,184,92,.35) 70%, transparent 76%);
  box-shadow:0 0 16px rgba(246,222,156,.9);
  transform:translateZ(var(--z));
  animation:l3Glint 4.4s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
@keyframes l3Glint{
  0%,100%{ opacity:.25; }
  50%    { opacity:1; }
}

/* Phones: a thinner coin and a shallower sway. At this size a deep
   stage reads as lurching rather than as depth, and the edge stack is
   the one part that costs real compositing work. */
@media (max-width: 760px){
  .logo3d{ width:min(262px, 68vw); perspective:720px; --coin-depth:9px; margin-bottom:40px; }
  .logo3d__stage{ animation-duration:22s; }
  @keyframes l3Sway{
    0%,100%{ transform:rotateY(-8deg) rotateX(2.5deg); }
    50%    { transform:rotateY(8deg)  rotateX(-2deg); }
  }
  .coin-lift{ transform:translateZ(4px); }
  .coin-sheen i{ filter:none; }
}

@media (prefers-reduced-motion: reduce){
  .logo3d, .logo3d__stage, .coin-halo svg,
  .coin-glints i, .coin-sheen i{ animation:none; }
  .logo3d{ opacity:1; }
  .halo{ stroke-dashoffset:0; }
  .coin-sheen{ display:none; }
  .coin-glints i{ opacity:.7; }
}

.eyebrow{
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0 0 18px;
}
.eb-br{ display:none; }
/* five pillars now, not three — on a phone, break 3 + 2 on purpose so a
   separator never dangles at the end of a line */
@media (max-width: 620px){
  .eyebrow{ font-size:.6rem; letter-spacing:.2em; line-height:1.9; }
  .eb-dot{ display:none; }
  .eb-br{ display:inline; }
}

.hero-title{ margin:0 0 22px; font-weight:400; }
.hero-title .line{
  display:block; font-family:var(--serif);
  font-size:clamp(1.9rem, 5vw, 3.3rem);
  color:var(--ivory); letter-spacing:.04em; line-height:1.15;
}
.hero-title .script{
  display:block; font-family:var(--script);
  font-size:clamp(2.8rem, 8vw, 5.2rem);
  line-height:1.15; margin-top:.1em;
  /* gold leaf with a pink blush, and a glint that travels along it */
  background:linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold) 18%, var(--gold-light) 30%, #fff8e6 36%,
    var(--gold-light) 42%, var(--gold) 56%, var(--pink-soft) 72%, var(--gold) 86%, var(--gold-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
  animation:foil 7s ease-in-out infinite;
  padding:0 .15em;                 /* the script's swashes overhang the box */
}
@keyframes foil{
  0%,100%{ background-position:100% 0; }
  50%    { background-position:0 0; }
}

.hero-sub{
  max-width:640px; margin:0 auto 34px;
  font-size:clamp(.94rem, 1.6vw, 1.06rem);
  color:rgba(251,243,232,.74); font-weight:300;
}

.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* occasions ticker: two identical runs side by side, the track slides
   left by exactly one run, so the loop has no seam */
.hero-strip{
  margin:46px auto 0; max-width:720px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(251,243,232,.7); font-weight:500;
}
.strip-track{ display:flex; width:max-content; animation:ticker 34s linear infinite; }
.hero-strip:hover .strip-track{ animation-play-state:paused; }
.strip-run{ display:flex; flex:none; }
.strip-run li{ display:flex; align-items:center; white-space:nowrap; padding:4px 0; }
/* a pink crystal between occasions, after the jewels in the logo */
.strip-run li::after{
  content:''; width:6px; height:6px; margin:0 22px;
  background:linear-gradient(135deg, #fff 0%, var(--pink-soft) 40%, var(--pink) 100%);
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(232,56,138,.7);
}
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------
   THE NIGHT STAGE behind the hero
   Everything is a gradient on a transformed box — no filter:blur, no
   images — so it composites cheaply on phones.
   --------------------------------------------------------- */
.hero-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* two spotlights swinging slowly from above, crossing over the coin */
.beam{
  position:absolute; top:-12%; width:46vw; max-width:620px; height:118%;
  transform-origin:50% 0;
  mix-blend-mode:screen;
  opacity:.55;
  /* a spotlight thins out as it falls — and the box's bottom edge never shows */
  -webkit-mask-image:linear-gradient(180deg, #000 25%, transparent 80%);
          mask-image:linear-gradient(180deg, #000 25%, transparent 80%);
}
.beam-l{
  left:12%;
  background:conic-gradient(from 168deg at 50% 0, transparent 0deg,
             rgba(246,222,156,.30) 12deg, rgba(246,222,156,.05) 22deg, transparent 24deg);
  animation:beamL 14s ease-in-out infinite;
}
.beam-r{
  right:12%;
  background:conic-gradient(from 168deg at 50% 0, transparent 0deg,
             rgba(240,107,174,.30) 12deg, rgba(240,107,174,.05) 22deg, transparent 24deg);
  animation:beamR 17s ease-in-out infinite;
}
@keyframes beamL{ 0%,100%{ transform:rotate(-16deg); } 50%{ transform:rotate(9deg); } }
@keyframes beamR{ 0%,100%{ transform:rotate(16deg); }  50%{ transform:rotate(-10deg); } }

/* the pool of light the coin hangs over */
.floor{
  position:absolute; left:50%; top:16%; width:min(760px, 120vw); aspect-ratio:1;
  translate:-50% 0;
  background:radial-gradient(circle, rgba(232,56,138,.20) 0%, rgba(226,184,92,.10) 34%, transparent 64%);
  animation:floorPulse 6s ease-in-out infinite;
}
@keyframes floorPulse{ 50%{ opacity:.65; scale:1.06; } }

/* out-of-focus party lights, drifting */
.bokeh{
  position:absolute; border-radius:50%;
  width:var(--s); height:var(--s); left:var(--x); top:var(--y);
  background:radial-gradient(circle, var(--c) 0%, transparent 68%);
  opacity:.5;
  animation:bokeh var(--t) ease-in-out var(--d) infinite;
}
.k1{ --s:150px; --x:6%;  --y:18%; --c:rgba(226,184,92,.55);  --t:16s; --d:0s; }
.k2{ --s:90px;  --x:84%; --y:12%; --c:rgba(232,56,138,.55);  --t:13s; --d:-4s; }
.k3{ --s:210px; --x:78%; --y:58%; --c:rgba(226,184,92,.35);  --t:19s; --d:-7s; }
.k4{ --s:70px;  --x:16%; --y:66%; --c:rgba(247,168,207,.6);  --t:11s; --d:-2s; }
.k5{ --s:120px; --x:40%; --y:84%; --c:rgba(232,56,138,.35);  --t:17s; --d:-9s; }
.k6{ --s:54px;  --x:62%; --y:6%;  --c:rgba(246,222,156,.7);  --t:12s; --d:-6s; }
@keyframes bokeh{
  0%,100%{ transform:translate3d(0,0,0);        opacity:.35; }
  50%    { transform:translate3d(24px,-30px,0); opacity:.7; }
}

/* the hero's buttons, in the logo's metals */
.hero .btn-primary{
  background:linear-gradient(135deg, var(--pink) 0%, #C92A76 50%, #A51E60 100%);
  box-shadow:0 12px 34px rgba(232,56,138,.42), inset 0 0 0 1px rgba(246,222,156,.45);
}
.hero .btn-primary:hover{ box-shadow:0 18px 44px rgba(232,56,138,.58), inset 0 0 0 1px rgba(246,222,156,.7); }
.hero .btn-ghost{
  background:rgba(255,255,255,.04);
  color:var(--gold-light);
  border-color:rgba(226,184,92,.55);
}
.hero .btn-ghost:hover{ background:rgba(226,184,92,.12); border-color:var(--gold-light); }

@media (max-width: 760px){
  .beam{ width:70vw; opacity:.45; }
  .beam-l{ left:-6%; } .beam-r{ right:-6%; }
  .k3, .k5{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .beam, .floor, .bokeh, .strip-track, .hero-title .script{ animation:none; }
  .beam-l{ transform:rotate(-8deg); } .beam-r{ transform:rotate(8deg); }
  /* a still ticker can't scroll, so let it wrap instead */
  .hero-strip{ -webkit-mask-image:none; mask-image:none; }
  .strip-track{ width:auto; justify-content:center; }
  .strip-run{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
  .strip-run[aria-hidden]{ display:none; }
}

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(251,243,232,.6); z-index:1;
}
.hero .mouse{ border-color:var(--gold); }
.hero .mouse::after{ background:var(--gold); }
.scroll-hint em{ font-style:normal; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; }
.mouse{
  width:22px; height:34px; border:1.5px solid var(--rose); border-radius:14px;
  position:relative;
}
.mouse::after{
  content:''; position:absolute; left:50%; top:7px; width:3px; height:7px;
  border-radius:2px; background:var(--rose); transform:translateX(-50%);
  animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{ 0%,100%{ opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 80%{ opacity:0; transform:translate(-50%,11px);} }

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 34px; border-radius:100px; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .32s;
  position:relative; overflow:hidden;
}
.btn svg{ width:16px; height:16px; fill:currentColor; }

.btn-primary{
  background:linear-gradient(135deg, #C07C85, var(--rose) 45%, #A85F6B);
  color:var(--white);
  box-shadow:0 12px 30px rgba(183,110,121,.40);
}
.btn-primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45), transparent 80%);
  transform:translateX(-130%); transition:transform .8s var(--ease);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(183,110,121,.52); }
.btn-primary:hover::before{ transform:translateX(130%); }

.btn-ghost{
  background:rgba(255,255,255,.55);
  color:var(--ink);
  border:1.5px solid rgba(183,110,121,.42);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ transform:translateY(-3px); background:var(--white); border-color:var(--rose); }

.btn-full{ width:100%; margin-top:8px; }

.btn-spinner{
  width:16px; height:16px; border-radius:50%; display:none;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn.loading .btn-spinner{ display:inline-block; }
.btn.loading{ pointer-events:none; opacity:.85; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ---------------------------------------------------------
   SECTION SHELL
   --------------------------------------------------------- */
.section{
  position:relative;
  padding:clamp(70px, 9vw, 120px) clamp(20px, 5vw, 44px);
  max-width:var(--maxw); margin:0 auto;
}
.section-tint{
  max-width:none;
  background:linear-gradient(180deg, rgba(251,241,237,.0), rgba(251,241,237,.85) 20%, rgba(251,241,237,.85) 80%, rgba(251,241,237,0));
}
.section-tint > *{ max-width:var(--maxw); margin-inline:auto; }

.section-dark{
  max-width:none;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(183,110,121,.28), transparent 60%),
    linear-gradient(160deg, #171211, var(--ink) 55%, #1D1615);
  color:var(--blush);
}
.section-dark > *{ max-width:var(--maxw); margin-inline:auto; }
.section-dark .section-title{ color:var(--blush); }
.section-dark .section-lead{ color:rgba(251,241,237,.66); }

.section-head{ text-align:center; max-width:660px; margin:0 auto clamp(44px,6vw,66px); }

.kicker{
  font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rose); font-weight:600; margin:0 0 12px;
}
.section-dark .kicker{ color:var(--rose-light); }

.section-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem, 4.4vw, 3rem);
  letter-spacing:.06em; line-height:1.2;
  color:var(--ink); margin:0 0 16px;
  text-transform:uppercase;
}
.section-head .section-title{ position:relative; display:inline-block; padding-bottom:14px; }
.section-head .section-title::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:70px; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--rose), transparent);
}

.section-lead{
  font-size:.97rem; font-weight:300; color:var(--text-mute); margin:0;
}
/* leads stack in a couple of places (the planner bio) — keep them apart */
.section-lead + .section-lead{ margin-top:14px; }

/* the full "services include" run under the We Offer lead */
.svc-include{
  list-style:none; margin:22px auto 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.svc-include li{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); padding:6px 12px; border-radius:999px;
  border:1px solid var(--rose-pale); background:rgba(255,255,255,.55);
}
.svc-include .svc-include-more{
  border-color:transparent; background:none; color:var(--rose);
  font-family:var(--script); text-transform:none; letter-spacing:0; font-size:1.1rem;
  padding:2px 6px;
}
@media (max-width: 620px){
  .svc-include{ gap:6px; }
  .svc-include li{ font-size:.62rem; letter-spacing:.08em; padding:5px 10px; }
}

.script-sm{
  font-family:var(--script); text-transform:none; letter-spacing:0;
  font-size:1.35em; color:var(--rose);
  word-spacing:.12em;              /* Great Vibes' ampersand needs breathing room */
}

/* ---------------------------------------------------------
   SERVICE FLOW — one service per scroll step, alternating
   sides, with a 3D image stage driven by scroll position
   --------------------------------------------------------- */
.flow{ display:grid; gap:clamp(70px, 10vw, 130px); }

.flow-row{
  display:grid; align-items:center;
  gap:clamp(28px, 6vw, 74px);
  grid-template-columns:1fr 1fr;
  perspective:1400px;                 /* the 3D space each visual lives in */
}
/* every second service flips sides */
.flow-row:nth-child(even) .flow-copy  { order:2; }
.flow-row:nth-child(even) .flow-visual{ order:1; }

/* --- copy side --- */
.flow-copy{ position:relative; }
.flow-step{
  display:block;
  font-family:var(--serif); font-size:clamp(2.1rem, 4vw, 2.9rem);
  font-weight:600; line-height:1; letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:1px rgba(183,110,121,.42);
  margin-bottom:14px;
}
.flow-badge{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg, var(--ink), #38292A);
  box-shadow:0 10px 26px rgba(30,18,18,.26);
}
.flow-badge svg{
  width:25px; height:25px; fill:none;
  stroke:var(--rose-pale); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.flow-copy h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing:.02em; line-height:1.2;
  color:var(--ink); margin:0 0 14px;
}
.flow-copy p{
  font-size:clamp(.92rem, 1.5vw, 1.02rem); font-weight:300;
  color:var(--text-mute); margin:0 0 22px; max-width:46ch;
}
.flow-link{
  display:inline-block;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--rose);
  padding-bottom:5px; border-bottom:1px solid rgba(183,110,121,.4);
  transition:color .3s, border-color .3s, transform .3s var(--ease);
}
.flow-link:hover{ color:#8F4E5B; border-color:#8F4E5B; transform:translateX(4px); }

/* --- 3D image stage ---
   Two layers on purpose: .depth-enter owns the one-off entrance
   (transitioned), .depth owns the continuous scroll tilt (not
   transitioned, so it tracks the scroll position exactly). */
.flow-visual{ display:grid; place-items:center; }
.depth-enter{
  width:min(480px, 100%);
  transform-style:preserve-3d;
}
.depth{
  position:relative;
  width:100%;
  aspect-ratio:16 / 11.5;
  transform-style:preserve-3d;
  /* JS writes these as you scroll */
  transform:
    rotateY(var(--ry, 0deg))
    rotateX(var(--rx, 0deg))
    translateY(var(--ty, 0px))
    scale(var(--sc, 1));
  will-change:transform;
}
/* back plate — sits deepest, catches the light */
.depth-plate{
  position:absolute; inset:6% -7% -9% 7%;
  border-radius:var(--radius);
  background:linear-gradient(150deg, rgba(224,169,162,.4), rgba(183,110,121,.14));
  transform:translateZ(-70px);
  filter:blur(.4px);
}
/* rose-gold outline floating in front of the plate */
.depth-frame{
  position:absolute; inset:-6% 8% 8% -7%;
  border-radius:var(--radius);
  border:1.5px solid rgba(183,110,121,.5);
  transform:translateZ(-24px);
}
.depth-img{
  position:absolute; inset:0; margin:0;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 34px 70px rgba(88,50,48,.28);
  transform:translateZ(34px);
}
.depth-img img{ width:100%; height:100%; object-fit:cover; }
/* two small orbs at different depths, so the parallax reads as real space */
.depth-dot{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #F6E0DA, var(--rose));
  box-shadow:0 8px 20px rgba(183,110,121,.34);
}
.depth-dot.d1{ width:26px; height:26px; top:-6%; right:14%; transform:translateZ(90px); }
.depth-dot.d2{ width:16px; height:16px; bottom:-4%; left:10%;  transform:translateZ(64px); }

/* entrance: each row builds itself as it comes into view */
.flow-row .flow-copy > *,
.flow-row .depth-enter{
  opacity:0;
  transition:opacity .8s var(--ease), transform .9s var(--ease);
}
.flow-row .flow-copy > *{ transform:translateY(26px); }
.flow-row:nth-child(odd)  .depth-enter{ transform:translateX(60px)  rotateY(-24deg); }
.flow-row:nth-child(even) .depth-enter{ transform:translateX(-60px) rotateY(24deg); }

.flow-row.in .flow-copy > *{ opacity:1; transform:none; }
.flow-row.in .depth-enter{ opacity:1; transform:none; }
.flow-row.in .flow-copy > *:nth-child(1){ transition-delay:.05s; }
.flow-row.in .flow-copy > *:nth-child(2){ transition-delay:.12s; }
.flow-row.in .flow-copy > *:nth-child(3){ transition-delay:.19s; }
.flow-row.in .flow-copy > *:nth-child(4){ transition-delay:.26s; }
.flow-row.in .flow-copy > *:nth-child(5){ transition-delay:.33s; }

/* --- closing band --- */
.flow-outro{
  margin-top:clamp(70px, 9vw, 110px);
  text-align:center;
  padding:clamp(34px, 5vw, 52px) clamp(24px, 4vw, 48px);
  border-radius:var(--radius);
  background:linear-gradient(150deg, rgba(20,16,15,.96), rgba(48,34,35,.94));
  border:1px solid rgba(224,169,162,.3);
  box-shadow:var(--shadow-deep);
}
.flow-outro h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  color:var(--blush); margin:0 0 10px; line-height:1.25;
}
.flow-outro .script-sm{ color:var(--rose-light); }
.flow-outro p{
  font-size:.95rem; font-weight:300;
  color:rgba(251,241,237,.7); margin:0 auto 24px; max-width:52ch;
}

/* ---------------------------------------------------------
   OCCASIONS
   --------------------------------------------------------- */
.occasions-wrap{
  display:grid; gap:clamp(32px,5vw,60px);
  grid-template-columns:1fr 1.1fr; align-items:center;
  perspective:1200px;
}
.occasions-copy .section-title{ text-align:left; }

.occasion-list{
  margin-top:28px; display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
}
.occasion-list li{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--radius-s);
  font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; color:rgba(251,241,237,.9);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.occasion-list li:hover{ background:rgba(224,169,162,.12); transform:translateX(6px); }
.occasion-list .oi{ color:var(--rose-light); width:20px; height:20px; }
.occasion-list .more{
  font-family:var(--script); font-size:1.3rem; text-transform:none;
  letter-spacing:0; color:var(--rose-light);
}

.occasions-media{ position:relative; display:grid; place-items:center; }

/* --- layered photo collage --- */
.collage{
  position:relative;
  width:min(460px, 100%);
  aspect-ratio:4 / 4.4;
  transform-style:preserve-3d;
}
.collage .shot{
  position:absolute; margin:0;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(224,169,162,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform-style:preserve-3d;
}
.collage .shot img{ width:100%; height:100%; object-fit:cover; }

.shot-a{
  top:0; left:0; width:74%; aspect-ratio:16/11;
  transform:rotate(-3deg);
  animation:collageA 12s ease-in-out infinite;
}
.shot-b{
  bottom:6%; right:0; width:66%; aspect-ratio:16/10;
  transform:rotate(4deg);
  animation:collageB 14s ease-in-out infinite;
  z-index:2;
}
@keyframes collageA{ 50%{ transform:rotate(-3deg) translateY(-12px);} }
@keyframes collageB{ 50%{ transform:rotate(4deg) translateY(10px);} }

/* ---------------------------------------------------------
   PHOTO BOOTH
   --------------------------------------------------------- */
.booth-wrap{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:1fr 1fr; align-items:center;
  perspective:1200px;
}
.booth-copy .section-title{ text-align:left; }

/* --- photo booth illustration (pure CSS) --- */
.booth-media{ display:grid; place-items:center; }
.booth-stage{
  position:relative;
  width:min(400px, 92%);
  display:flex; flex-direction:column; align-items:center;
  padding:6% 0;
}
.booth-glow{
  position:absolute; top:2%; left:50%; transform:translateX(-50%);
  width:86%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(196,112,214,.34), rgba(183,110,121,.16) 45%, transparent 70%);
  filter:blur(24px);
  animation:boothPulse 4.5s ease-in-out infinite;
}
@keyframes boothPulse{ 50%{ opacity:.55; transform:translateX(-50%) scale(1.08);} }

.booth-photo{
  position:relative; z-index:2; margin:0;
  width:82%; border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(224,169,162,.3);
  box-shadow:0 34px 76px rgba(70,40,60,.34);
  transform-style:preserve-3d;
}
.booth-photo img{ width:100%; display:block; }

.spark{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff, rgba(224,169,162,.5) 40%, transparent 70%);
}
.spark.s1{ width:10px; height:10px; top:16%; left:6%;  animation:sparkFloat 6s ease-in-out infinite; }
.spark.s2{ width:7px;  height:7px;  top:44%; right:4%; animation:sparkFloat 7.5s ease-in-out infinite .8s; }
.spark.s3{ width:12px; height:12px; bottom:16%; left:12%; animation:sparkFloat 9s ease-in-out infinite 1.6s; }
@keyframes sparkFloat{
  0%,100%{ transform:translateY(0) scale(1); opacity:.35; }
  50%    { transform:translateY(-22px) scale(1.25); opacity:.9; }
}

.check-list{ margin:26px 0 30px; display:grid; gap:12px; }
.check-list li{
  position:relative; padding-left:32px;
  font-size:.92rem; font-weight:300; color:var(--text-mute);
}
.check-list li::before{
  content:''; position:absolute; left:0; top:6px;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--rose), var(--rose-glow));
}
.check-list li::after{
  content:''; position:absolute; left:6px; top:11px;
  width:5px; height:8px; border:2px solid #fff;
  border-top:0; border-left:0; transform:rotate(42deg);
}
.booth-cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------------------------------
   GALLERY
   --------------------------------------------------------- */
.gallery{
  display:grid; gap:16px;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
}
.tile{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(183,110,121,.18);
  box-shadow:var(--shadow);
  cursor:zoom-in;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
/* The caption carries the job, not the mood: what the event was, how many
   people came, who we put on it, how long, and where. It is visible without
   hovering on purpose — this is the part that answers "have you done
   something my size", and on a phone there is no hover to answer it. */
.tile figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:40px 16px 14px;
  background:linear-gradient(180deg, transparent, rgba(16,12,11,.62) 34%, rgba(14,10,10,.93));
  color:#fff;
  transition:padding .45s var(--ease);
}
.tile-job{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:1.12rem; line-height:1.15; letter-spacing:.01em;
  color:var(--rose-pale);
}
.tile-spec i{ font-style:normal; }
.tile-spec i + i::before{ content:'·'; margin:0 .5em; opacity:.55; }
.tile-spec, .tile-where{
  display:block;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.88);
  margin-top:5px;
}
.tile-where{
  color:var(--rose-light);
  letter-spacing:.2em;
  margin-top:3px;
}
.tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-deep); }
.tile:hover img{ transform:scale(1.07); }
.tile:hover figcaption{ padding-bottom:20px; }

/* a tile whose photo file isn't in the folder yet — a blush panel naming
   what belongs there, rather than a broken-image icon in the grid */
.tile.is-pending{ cursor:default; border-style:dashed; border-color:var(--rose-light); }
.tile.is-pending img{ display:none; }
.tile.is-pending::before{
  content:'Photo to come';
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:0 14px 30px; text-align:center;
  background:linear-gradient(150deg, #FFFBFA, var(--rose-pale));
  color:var(--rose);
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
}
.tile.is-pending figcaption{
  transform:none; opacity:1;
  background:linear-gradient(180deg, transparent, rgba(183,110,121,.72));
}
.tile.is-pending:hover{ transform:none; box-shadow:var(--shadow); }

/* 4 x 4 block, filled exactly (16 cells, 11 tiles): wide venue shots run
   down the left, one tall portrait through the centre, the food and drink
   work fills the right column and the closing row */
.tile-pool        { grid-column:1 / span 2; grid-row:1; }
.tile-outdoor     { grid-column:3;          grid-row:1 / span 2; }
.tile-balloons    { grid-column:4;          grid-row:1; }
.tile-hall        { grid-column:1 / span 2; grid-row:2; }
.tile-salmon      { grid-column:4;          grid-row:2; }
.tile-backyard    { grid-column:1 / span 2; grid-row:3; }
.tile-dessert     { grid-column:3;          grid-row:3; }
.tile-tablesetting{ grid-column:4;          grid-row:3; }
.tile-drinks      { grid-column:1;          grid-row:4; }
.tile-salad       { grid-column:2;          grid-row:4; }
.tile-mimosas     { grid-column:3 / span 2; grid-row:4; }

.gallery-cta{ text-align:center; margin:38px 0 0; }

/* --- lightbox --- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:5vh 6vw;
  background:rgba(14,11,11,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.open{ opacity:1; }
.lightbox img{
  max-width:100%; max-height:82vh;
  border-radius:var(--radius);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.lb-caption{
  position:absolute; bottom:4vh; left:0; right:0; text-align:center;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rose-light); margin:0;
}
.lb-close, .lb-nav{
  position:absolute; z-index:2;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(224,169,162,.3);
  color:var(--blush); cursor:pointer;
  border-radius:50%; line-height:1;
  transition:background .3s, transform .3s var(--ease);
}
.lb-close{ top:3vh; right:4vw; width:44px; height:44px; font-size:1.7rem; }
.lb-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2rem; }
.lb-prev{ left:2vw; } .lb-next{ right:2vw; }
.lb-close:hover, .lb-nav:hover{ background:var(--rose); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.08); }

/* ---------------------------------------------------------
   DECORATIVE ORNAMENTS
   --------------------------------------------------------- */
.ornament{
  position:absolute; width:190px; height:95px;
  fill:none; stroke:var(--rose); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.16; pointer-events:none;
}
.orn-tl{ top:34px; left:10px; }
.orn-tr{ top:34px; right:10px; transform:scaleX(-1); }
.orn-br{ bottom:26px; right:10px; transform:scale(-1,-1); }
.section-dark .ornament{ stroke:var(--rose-light); opacity:.2; }

.flourish{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 auto 16px; max-width:220px;
}
.flourish i{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--rose));
}
.flourish i:last-child{ background:linear-gradient(90deg, var(--rose), transparent); }
.flourish svg{
  width:13px; height:13px; flex:none;
  fill:var(--rose); stroke:none;
}

/* ---------------------------------------------------------
   CELEBRATION BURST
   --------------------------------------------------------- */
#confetti{
  position:fixed; inset:0; z-index:150;
  width:100%; height:100%;
  pointer-events:none;
}

/* ---------------------------------------------------------
   "WE ALSO ARRANGE" CHIPS
   --------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(183,110,121,.22);
  box-shadow:0 8px 24px rgba(140,85,83,.10);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; color:var(--text);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.chip:hover{
  transform:translateY(-5px) scale(1.03);
  background:var(--white);
  box-shadow:0 16px 34px rgba(140,85,83,.20);
  border-color:var(--rose);
}
/* chips are links now — show they do something */
a.chip{ cursor:pointer; }
a.chip::after{
  content:'+';
  margin-left:2px; font-size:.95rem; line-height:1;
  color:var(--rose); opacity:0;
  transition:opacity .3s var(--ease);
}
a.chip:hover::after, a.chip:focus-visible::after{ opacity:1; }
.lead-note{ display:block; margin-top:8px; color:var(--rose); font-weight:600; font-size:.86em; }
.chip .ci-svg{ color:var(--rose); }

/* ---------------------------------------------------------
   PLANNER
   --------------------------------------------------------- */
.planner{
  display:grid; gap:clamp(30px,5vw,58px);
  grid-template-columns:minmax(0, .95fr) 1.1fr; align-items:center;
  perspective:1200px;
}
/* --- Dora's planner card, built in markup so it stays sharp --- */
.planner-card{
  margin:0 auto; width:min(430px, 100%);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-deep);
  border:1px solid rgba(183,110,121,.30);
  transform-style:preserve-3d;
  background:
    radial-gradient(420px 300px at 108% -12%, rgba(224,169,162,.42), transparent 62%),
    radial-gradient(360px 280px at -8% 112%, rgba(224,169,162,.38), transparent 60%),
    linear-gradient(150deg, #FFFBFA, var(--blush));
  padding:clamp(22px, 4vw, 32px);
  text-align:center;
}

.pc-head{ margin-bottom:18px; }
.pc-title{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem, 4.6vw, 2.4rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); line-height:1;
  text-indent:.2em;
}
.pc-script{
  display:block; font-family:var(--script);
  font-size:clamp(2rem, 5.6vw, 2.9rem); line-height:1.05;
  margin-top:-.06em; color:var(--rose);
}

/* her portrait, with the monogram sealed onto the corner of it */
.pc-portrait{
  position:relative;
  width:clamp(156px, 48%, 196px); aspect-ratio:1;
  margin:0 auto 20px;
}
.pc-face{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  border-radius:50%;
  border:1px solid rgba(183,110,121,.35);
  box-shadow:0 18px 42px rgba(150,90,88,.30);
  background:var(--white);
}
.pc-seal{
  position:absolute; right:-4%; bottom:-2%;
  width:38%; aspect-ratio:1;
  border-radius:50%; object-fit:cover;
  background:var(--white);
  border:2px solid var(--white);
  box-shadow:0 8px 20px rgba(150,90,88,.30);
}

/* no portrait file yet — say so, instead of quietly showing the logo twice */
.pc-portrait.is-pending .pc-face{
  visibility:hidden;
}
.pc-portrait.is-pending::before{
  content:'Portrait to come';
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:0 16%; text-align:center;
  border-radius:50%;
  border:1px dashed var(--rose-light);
  background:linear-gradient(150deg, #FFFBFA, var(--rose-pale));
  color:var(--rose);
  font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  line-height:1.6;
}

.pc-id{ margin-bottom:14px; }
.pc-name{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:1.5rem; letter-spacing:.04em; color:var(--ink);
}
.pc-role{
  display:block; margin-top:2px;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:600; color:var(--rose);
}
.pc-intro{
  margin:0 0 20px; font-size:.84rem; font-weight:300;
  line-height:1.7; color:var(--text-mute);
}

/* --- the five services, in full, below the planner block --- */
.planner-services{
  margin-top:clamp(48px, 7vw, 82px);
  padding-top:clamp(36px, 5vw, 56px);
  border-top:1px solid rgba(183,110,121,.24);
}
.ps-head{
  margin:0 0 clamp(26px, 4vw, 42px); text-align:center;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem, 2.8vw, 1.85rem);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
/* three across, so five items fall 3 + 2 rather than a lonely 4 + 1 */
.ps-grid{
  display:grid; gap:clamp(18px, 2.4vw, 28px);
  grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
}
.ps-item{
  padding:clamp(22px, 2.6vw, 30px);
  border-radius:var(--radius);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(183,110,121,.18);
  box-shadow:0 10px 30px rgba(140,85,83,.09);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s;
}
.ps-item:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(140,85,83,.18);
  border-color:var(--rose);
}
.ps-icon{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(140deg, var(--ink), #38292A);
  box-shadow:0 8px 20px rgba(30,18,18,.24);
}
.ps-icon .ci-svg{ width:21px; height:21px; color:var(--rose-pale); }
.ps-item h4{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:600;
  font-size:1.12rem; letter-spacing:.02em; line-height:1.3; color:var(--ink);
}
.ps-item p{
  margin:0; font-size:.88rem; font-weight:300; line-height:1.75;
  color:var(--text-mute);
}

.pc-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 26px; border-radius:100px;
  background:linear-gradient(135deg, var(--rose), #A85F6B);
  color:#fff; font-size:.78rem; font-weight:600; letter-spacing:.1em;
  box-shadow:0 10px 26px rgba(183,110,121,.38);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pc-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(183,110,121,.5); }
.pc-cta .ci{ width:17px; height:17px; }
.planner-copy .section-title{ text-align:left; text-transform:none; letter-spacing:.03em; }
.planner-role{
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rose); font-weight:600; margin:0 0 18px;
}
.planner-contacts{ margin-top:26px; display:grid; gap:10px; }
.contact-row{
  display:flex; align-items:center; gap:14px;
  padding:13px 18px; border-radius:var(--radius-s);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(183,110,121,.18);
  font-size:.9rem; font-weight:500;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.contact-row:hover{ transform:translateX(7px); box-shadow:0 10px 26px rgba(140,85,83,.14); }
.contact-row .ci{ color:var(--rose); width:19px; height:19px; }

/* ---------------------------------------------------------
   INQUIRY FORM
   --------------------------------------------------------- */
.inquire-wrap{
  display:grid; gap:28px;
  grid-template-columns:1.4fr .9fr; align-items:start;
  perspective:1200px;
}

.form{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(224,169,162,.22);
  border-radius:var(--radius);
  padding:clamp(26px, 4vw, 42px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.field{ margin-bottom:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-row.three{ grid-template-columns:1fr 1fr .8fr; }

/* --- multi-select service pills --- */
.fieldset{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.fieldset legend{
  padding:0; margin-bottom:10px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:rgba(251,241,237,.78);
}
.fieldset .hint{
  display:inline-block; margin-left:8px;
  letter-spacing:.06em; text-transform:none; font-weight:400; font-size:.68rem;
  color:rgba(251,241,237,.42);
}
.pill-group-label{
  margin:0 0 10px;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:rgba(251,241,237,.6);
}
.pill-group-label .hint{ letter-spacing:.06em; }
.pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pills-extra{ margin-bottom:4px; }
.fieldset .pills + .pill-group-label{ margin-top:24px; }

/* free-text box revealed by the "Something else" pill */
.other-wrap{ margin-top:16px; }
.other-wrap[hidden]{ display:none; }
.other-wrap label{
  display:block; margin-bottom:8px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:rgba(251,241,237,.78);
}
.other-wrap input{
  width:100%; padding:14px 16px;
  font-family:var(--sans); font-size:.92rem; font-weight:300;
  color:var(--blush);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(224,169,162,.24);
  border-radius:var(--radius-s);
  outline:none;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.other-wrap input::placeholder{ color:rgba(251,241,237,.34); }
.other-wrap input:focus{
  border-color:var(--rose-light);
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(224,169,162,.16);
}
.pill-other span{ border-style:dashed; }

/* --- "goes well with that" suggestions --- */
.suggest{
  margin-top:22px; padding:18px;
  border-radius:var(--radius-s);
  background:rgba(224,169,162,.07);
  border:1px dashed rgba(224,169,162,.34);
}
.suggest[hidden]{ display:none; }
.suggest-head{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--rose-light);
}
.suggest-head .ci-svg{ width:14px; height:14px; color:var(--rose-light); }
.suggest-list{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.suggest-card{
  display:flex; flex-direction:column; gap:5px;
  padding:14px 16px; text-align:left; cursor:pointer;
  font-family:var(--sans);
  border-radius:var(--radius-s);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(224,169,162,.26);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.suggest-card:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--rose-light);
  transform:translateY(-3px);
}
.suggest-name{
  font-size:.86rem; font-weight:600; color:var(--blush);
}
.suggest-why{
  font-size:.76rem; font-weight:300; line-height:1.45;
  color:rgba(251,241,237,.62);
}
.suggest-add{
  margin-top:4px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--rose-light);
}

/* a pill briefly pulses when a chip up the page sends you here */
@keyframes pillPing{
  0%,100%{ box-shadow:0 8px 22px rgba(183,110,121,.36); }
  50%    { box-shadow:0 0 0 8px rgba(224,169,162,.28), 0 8px 22px rgba(183,110,121,.36); }
}
.pill.just-picked input:checked + span{ animation:pillPing 1.1s ease-in-out 2; }
.pill{ position:relative; cursor:pointer; }
.pill input{
  position:absolute; opacity:0; width:0; height:0;   /* focusable but visually replaced */
}
.pill span{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px 11px 16px; border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(224,169,162,.24);
  font-size:.8rem; font-weight:400; color:rgba(251,241,237,.82);
  transition:background .28s var(--ease), border-color .28s var(--ease),
             color .28s var(--ease), transform .28s var(--ease);
}
/* the tick box */
.pill span::before{
  content:''; width:16px; height:16px; flex:none;
  border-radius:5px;
  border:1.5px solid rgba(224,169,162,.5);
  background:transparent;
  transition:background .25s, border-color .25s;
}
.pill:hover span{ background:rgba(255,255,255,.11); border-color:rgba(224,169,162,.45); }

.pill input:checked + span{
  background:linear-gradient(135deg, var(--rose), #A85F6B);
  border-color:transparent; color:#fff;
  box-shadow:0 8px 22px rgba(183,110,121,.36);
}
.pill input:checked + span::before{
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.6 9 10 3.2' fill='none' stroke='%23A85F6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
  border-color:#fff;
}
.pill input:focus-visible + span{
  outline:2px solid var(--rose-light); outline-offset:3px;
}
.pill-all span{ border-style:dashed; }

/* direct-child selectors only — the service pills nest their own
   labels and checkboxes and must not inherit these */
.field > label{
  display:block; margin-bottom:8px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:rgba(251,241,237,.78);
}
.field > label i{ color:var(--rose-light); font-style:normal; }

.field > input,
.field > select,
.field > textarea{
  width:100%; padding:14px 16px;
  font-family:var(--sans); font-size:.92rem; font-weight:300;
  color:var(--blush);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(224,169,162,.24);
  border-radius:var(--radius-s);
  transition:border-color .3s, background .3s, box-shadow .3s;
  outline:none;
}
.field > textarea{ resize:vertical; min-height:110px; }
.field > input::placeholder,
.field > textarea::placeholder{ color:rgba(251,241,237,.34); }

.field > input:focus,
.field > select:focus,
.field > textarea:focus{
  border-color:var(--rose-light);
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(224,169,162,.16);
}
.field > select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--rose-light) 50%),
                   linear-gradient(135deg, var(--rose-light) 50%, transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field > select option{ background:var(--ink-soft); color:var(--blush); }
.field > input[type="date"]{ color-scheme:dark; }

.field.invalid > input,
.field.invalid > select{ border-color:#E4796F; box-shadow:0 0 0 3px rgba(228,121,111,.14); }

.err{
  display:block; margin-top:6px; min-height:14px;
  font-size:.7rem; letter-spacing:.04em; color:#F0968C;
}

.form-note{
  margin:16px 0 0; text-align:center;
  font-size:.74rem; font-weight:300; color:rgba(251,241,237,.55);
}
.form-note a{ color:var(--rose-light); border-bottom:1px solid rgba(224,169,162,.4); }

.form-status{
  margin-top:16px; padding:0 16px; max-height:0; overflow:hidden;
  border-radius:var(--radius-s);
  font-size:.86rem; text-align:center;
  transition:max-height .45s var(--ease), padding .45s var(--ease);
}
.form-status.show{ padding:15px 16px; max-height:220px; }
.form-status.ok{ background:rgba(126,196,150,.14); border:1px solid rgba(126,196,150,.4); color:#B7E3C6; }
.form-status.bad{ background:rgba(228,121,111,.14); border:1px solid rgba(228,121,111,.4); color:#F0AAA3; }

/* aside */
.aside-card{
  background:linear-gradient(150deg, rgba(183,110,121,.9), rgba(150,84,95,.92));
  border-radius:var(--radius);
  padding:34px 30px;
  color:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform-style:preserve-3d;
  position:sticky; top:100px;
}
.aside-card h3{
  font-family:var(--serif); font-weight:500;
  font-size:1.5rem; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 8px; line-height:1.3;
}
.aside-card .rose{ color:var(--blush); }
.aside-tag{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  margin:0 0 24px; opacity:.85;
}
.aside-list{ display:grid; gap:14px; }
.aside-list li{
  display:flex; flex-direction:column; gap:2px;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.18);
}
.aside-list li:last-child{ border-bottom:0; padding-bottom:0; }
.aside-list strong{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; opacity:.8; font-weight:600;
}
.aside-list span{ font-size:.95rem; font-weight:300; }
.aside-phone{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:24px; text-align:center;
  padding:14px; border-radius:100px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  font-size:.86rem; font-weight:600; letter-spacing:.08em;
  transition:background .3s, transform .3s var(--ease);
}
.aside-phone:hover{ background:rgba(255,255,255,.28); transform:translateY(-2px); }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.footer{
  background:linear-gradient(180deg, var(--ink), #241B1A);
  color:rgba(251,241,237,.75);
  padding:60px clamp(20px,5vw,40px) 40px;
  text-align:center;
}
.footer-inner{ max-width:var(--maxw); margin:0 auto; }
.footer-logo{
  width:96px; height:96px; border-radius:50%; margin:0 auto 14px;
  object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.footer-tag{ font-size:2rem; margin:0 0 24px; color:var(--rose-light); }
.footer-links{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.footer-links a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  transition:color .3s;
}
.footer-links a:hover{ color:var(--rose-light); }
.footer-social{ display:flex; gap:12px; justify-content:center; margin-bottom:24px; }
.footer-social a{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(224,169,162,.35);
  color:var(--rose-light);
  transition:background .3s, transform .3s var(--ease), color .3s;
}
.footer-social svg{ width:19px; height:19px; }
.footer-social a:hover{ background:var(--rose); color:#fff; transform:translateY(-3px); }
.footer-copy{ font-size:.72rem; opacity:.5; margin:0; letter-spacing:.06em; }

/* ---------------------------------------------------------
   SERVICE OFFER POPUP
   Ticking a service tips a card into the corner in 3D — it
   confirms the pick, then offers what we can add to it. The
   card rotates in on its X axis, a rose-gold burst rings out
   behind it, and each offer lifts toward the viewer in turn.
   --------------------------------------------------------- */
.offer-pop{
  position:fixed; right:22px; bottom:84px; z-index:180;
  width:min(370px, calc(100vw - 32px));
  perspective:1100px;
  pointer-events:none;
}
.offer-pop[hidden]{ display:none; }

.op-card{
  position:relative;
  transform-style:preserve-3d;
  transform-origin:50% 100%;
  transform:rotateX(-32deg) rotateY(7deg) translateY(34px) scale(.93);
  opacity:0;
  transition:transform .62s var(--ease), opacity .4s var(--ease);
  pointer-events:auto;

  padding:24px 24px 20px;
  border-radius:var(--radius);
  background:
    radial-gradient(380px 220px at 110% -20%, rgba(224,169,162,.5), transparent 62%),
    linear-gradient(152deg, #FFFCFB, var(--blush));
  border:1px solid rgba(183,110,121,.3);
  box-shadow:0 34px 74px rgba(88,50,48,.30), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.offer-pop.open .op-card{ transform:none; opacity:1; }
.offer-pop.closing .op-card{
  transform:rotateX(22deg) translateY(26px) scale(.95); opacity:0;
}

/* the burst that rings out from behind the card as it lands */
.op-burst{
  position:absolute; left:50%; top:34px;
  width:0; height:0; pointer-events:none;
}
.op-burst i{
  position:absolute; left:0; top:0;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--rose), var(--rose-glow));
  opacity:0;
}
.offer-pop.open .op-burst i{ animation:opBurst .95s var(--ease) both; }
.op-burst i:nth-child(1){ --bx: 62px; --by:-38px; animation-delay:.10s; }
.op-burst i:nth-child(2){ --bx:-66px; --by:-30px; animation-delay:.14s; }
.op-burst i:nth-child(3){ --bx: 88px; --by: 16px; animation-delay:.12s; }
.op-burst i:nth-child(4){ --bx:-88px; --by: 22px; animation-delay:.17s; }
.op-burst i:nth-child(5){ --bx: 34px; --by:-62px; animation-delay:.20s; }
.op-burst i:nth-child(6){ --bx:-30px; --by:-58px; animation-delay:.15s; }
.op-burst i:nth-child(7){ --bx:112px; --by:-10px; animation-delay:.22s; }
.op-burst i:nth-child(8){ --bx:-112px;--by: -6px; animation-delay:.19s; }
@keyframes opBurst{
  0%  { transform:translate3d(0,0,0) scale(.3); opacity:0; }
  22% { opacity:1; }
  100%{ transform:translate3d(var(--bx), var(--by), 40px) scale(1); opacity:0; }
}

.op-close{
  position:absolute; top:8px; right:10px;
  width:30px; height:30px; padding:0; line-height:1;
  background:none; border:0; cursor:pointer;
  font-size:1.5rem; color:var(--rose);
  opacity:.6; transition:opacity .3s, transform .3s var(--ease);
}
.op-close:hover{ opacity:1; transform:rotate(90deg); }

.op-head{ text-align:center; margin-bottom:12px; }
.op-seal{
  display:grid; place-items:center;
  width:42px; height:42px; margin:0 auto 10px;
  border-radius:50%;
  background:linear-gradient(140deg, var(--rose), #A85F6B);
  box-shadow:0 10px 24px rgba(183,110,121,.42);
  transform:translateZ(26px);
  animation:opSeal 2.6s var(--ease) .25s infinite;
}
.op-seal svg{ width:17px; height:17px; fill:#fff; stroke:none; }
@keyframes opSeal{ 0%,72%,100%{ transform:translateZ(26px) rotate(0) } 82%{ transform:translateZ(26px) rotate(-12deg) } 91%{ transform:translateZ(26px) rotate(9deg) } }

.op-kicker{
  margin:0 0 4px;
  font-family:var(--script); font-size:1.5rem; line-height:1;
  color:var(--rose);
}
.op-title{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:1.06rem; letter-spacing:.03em; line-height:1.3; color:var(--ink);
}
.op-sub{
  margin:0 0 14px; text-align:center;
  font-size:.78rem; font-weight:300; line-height:1.6; color:var(--text-mute);
}

.op-list{ display:grid; gap:8px; transform-style:preserve-3d; }
.op-offer{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:11px 13px; cursor:pointer; text-align:left;
  font-family:var(--sans);
  border-radius:var(--radius-s);
  background:rgba(255,255,255,.8);
  border:1px solid rgba(183,110,121,.24);
  opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--ease), transform .5s var(--ease),
             border-color .3s, background .3s, box-shadow .3s;
}
.offer-pop.open .op-offer{ opacity:1; transform:translateZ(16px); }
.offer-pop.open .op-offer:nth-child(1){ transition-delay:.20s; }
.offer-pop.open .op-offer:nth-child(2){ transition-delay:.29s; }
.offer-pop.open .op-offer:nth-child(3){ transition-delay:.38s; }
.op-offer:hover{
  background:#fff; border-color:var(--rose);
  box-shadow:0 12px 26px rgba(140,85,83,.2);
}
.op-offer .ci-svg{ color:var(--rose); width:18px; height:18px; flex:none; }
.op-offer b{
  display:block; font-size:.8rem; font-weight:600; color:var(--ink); letter-spacing:.02em;
}
.op-offer small{
  display:block; font-size:.7rem; font-weight:300; line-height:1.45; color:var(--text-mute);
}
.op-offer .op-add{
  margin-left:auto; flex:none;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--rose);
}
.op-offer.added{ border-color:var(--rose); background:var(--rose-pale); }
.op-offer.added .op-add{ color:#7E8F6B; }

.op-more{
  display:block; margin-top:14px; text-align:center;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--rose);
}
.op-more::after{ content:' \2192'; }
.op-more:hover{ color:#8F4E5B; }

@media (max-width: 620px){
  /* clear of the floating Inquire button, and full width */
  .offer-pop{ right:14px; left:14px; bottom:76px; width:auto; }
  .op-card{ padding:20px 20px 16px; }
}

/* ---------------------------------------------------------
   EVENT DAY TIMELINE
   A spine that fills with the scroll and steps that light as
   they pass. --tl-progress is written by app.js (module 5c);
   with JS off the spine simply sits at zero and every step
   stays legible, so nothing here is load-bearing.
   --------------------------------------------------------- */
.timeline-wrap{ max-width:760px; margin:0 auto; }

.timeline{
  --tl-progress:0;
  position:relative;
  list-style:none; margin:0; padding:0 0 0 clamp(34px, 6vw, 58px);
}
/* the unlit spine */
.timeline::before,
.timeline::after{
  content:'';
  position:absolute; left:clamp(9px, 1.8vw, 16px); top:6px; bottom:6px;
  width:2px; border-radius:2px;
}
.timeline::before{ background:rgba(224,169,162,.20); }
/* the lit part, scaled from the top by the scroll position */
.timeline::after{
  background:linear-gradient(180deg, var(--rose-light), var(--rose));
  transform-origin:50% 0;
  transform:scaleY(var(--tl-progress));
  box-shadow:0 0 14px rgba(224,169,162,.45);
}

.tl-step{ position:relative; padding:0 0 clamp(30px, 4vw, 44px); }
.tl-step:last-child{ padding-bottom:0; }

.tl-dot{
  position:absolute;
  left:calc(clamp(34px, 6vw, 58px) * -1 + clamp(9px, 1.8vw, 16px) - 5px);
  top:7px;
  width:12px; height:12px; border-radius:50%;
  background:var(--ink-soft);
  border:2px solid rgba(224,169,162,.45);
  transition:background .5s var(--ease), border-color .5s var(--ease),
             box-shadow .5s var(--ease), transform .5s var(--ease);
}
.tl-step.is-lit .tl-dot{
  background:var(--rose-light);
  border-color:var(--rose-pale);
  box-shadow:0 0 0 4px rgba(183,110,121,.22), 0 0 16px rgba(224,169,162,.8);
  transform:scale(1.15);
}

.tl-phase{
  display:inline-block;
  margin:0 0 14px;
  padding:5px 14px;
  border-radius:100px;
  border:1px solid rgba(224,169,162,.42);
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700;
  color:var(--rose-light);
}
.tl-step:not(:first-child) .tl-phase{ margin-top:10px; }

.tl-time{
  display:block;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--rose);
  margin-bottom:6px;
}
.tl-head{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem, 2.6vw, 1.75rem); line-height:1.2;
  margin:0 0 8px; color:var(--blush);
}
.tl-body{
  margin:0; max-width:52ch;
  color:rgba(251,241,237,.68);
  font-size:.95rem; line-height:1.7;
}

.timeline-cta{ text-align:center; margin:clamp(40px,5vw,56px) 0 0; }

/* --- which service the hour-by-hour is showing --- */
.tl-switch{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px;
  max-width:760px; margin:0 auto clamp(34px, 4vw, 48px);
}
.tl-switch[hidden]{ display:none; }
.tl-chip{
  padding:8px 16px;
  border:1px solid rgba(224,169,162,.34);
  border-radius:100px;
  background:none; color:rgba(251,241,237,.72);
  font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.tl-chip:hover{ color:var(--blush); border-color:var(--rose-light); transform:translateY(-2px); }
.tl-chip[aria-selected="true"]{
  background:linear-gradient(135deg, var(--rose), #A85F6B);
  border-color:transparent; color:#fff;
  box-shadow:0 8px 22px rgba(183,110,121,.4);
}

/* steps built by JS animate themselves in: they are created after the
   scroll-reveal observer has already swept the page, so .reveal would
   leave them at zero opacity forever */
.tl-in{ animation:tlIn .55s var(--ease) both; animation-delay:calc(var(--i) * 65ms); }
@keyframes tlIn{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

@media (max-width: 620px){
  .tl-switch{ gap:7px; }
  .tl-chip{ padding:7px 12px; font-size:.56rem; letter-spacing:.14em; }
}

@media (prefers-reduced-motion: reduce){
  .tl-in{ animation:none; }
}

@media (max-width: 620px){
  .tl-body{ font-size:.9rem; }
  .tl-step{ padding-bottom:28px; }
}

@media (prefers-reduced-motion: reduce){
  /* the spine is the whole point, so show it whole rather than not at all */
  .timeline::after{ transform:scaleY(1); }
  .tl-step .tl-dot{ background:var(--rose-light); border-color:var(--rose-pale); }
}

/* ---------------------------------------------------------
   SERVICE POPUP
   Opened from a service card or from a pill in the inquiry
   form. --svc-accent is set per service by app.js, and every
   accent in here reads from it, so each service arrives in
   its own colour rather than all nine looking alike.

   The entrance is staggered by --i on the animated children:
   panel, then photo, then copy, then each bullet. Everything
   is transform/opacity so none of it costs layout.
   --------------------------------------------------------- */
.svc-modal{
  --svc-accent:#B76E79;
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(14px, 3vw, 40px);
}
.svc-modal[hidden]{ display:none; }

.svc-scrim{
  position:absolute; inset:0;
  background:radial-gradient(1200px 700px at 50% 30%, rgba(40,20,22,.82), rgba(10,7,7,.94));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.svc-modal.is-open .svc-scrim{ opacity:1; }

.svc-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  /* the row has to be allowed to shrink, or the photo's intrinsic height
     pushes the panel past max-height and overflow:hidden eats the thumbs
     and the buttons */
  grid-template-rows:minmax(0, 1fr);
  gap:clamp(20px, 3vw, 40px);
  width:min(1020px, 100%);
  max-height:min(88vh, 760px);
  padding:clamp(18px, 2.4vw, 30px);
  border-radius:calc(var(--radius) + 6px);
  background:linear-gradient(155deg, #1D1615, var(--ink) 58%, #241A1B);
  box-shadow:0 40px 120px rgba(0,0,0,.6),
             0 0 0 1px color-mix(in srgb, var(--svc-accent) 40%, transparent);
  overflow:hidden;
  opacity:0;
  transform:translateY(26px) scale(.94);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.svc-modal.is-open .svc-panel{ opacity:1; transform:none; }

/* the accent bleeds in from the top corner of the panel */
.svc-panel::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(520px 320px at 12% 0%,
             color-mix(in srgb, var(--svc-accent) 30%, transparent), transparent 70%);
  pointer-events:none;
}

.svc-close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:38px; height:38px; border:0; border-radius:50%;
  /* it sits over the photo on narrow screens, where the photo may be
     bright, so it carries its own dark backing rather than relying on
     the panel behind it */
  background:rgba(18,12,12,.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:var(--blush); font-size:1.5rem; line-height:1;
  cursor:pointer;
  transition:background .3s, transform .3s var(--ease);
}
.svc-close:hover{ background:var(--svc-accent); transform:rotate(90deg); }

/* --- the photos --- */
.svc-stage{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:12px;
  min-width:0; min-height:0;   /* see grid-template-rows above */
}

.svc-shot{
  position:relative;
  margin:0; flex:1; min-height:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:#120D0D;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.svc-shot img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .55s var(--ease), transform .8s var(--ease);
}
.svc-shot img.is-in{ opacity:1; transform:none; }
/* a wash of the service accent over the photo, so the picture belongs to
   the panel rather than sitting on it */
.svc-shot-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,
    color-mix(in srgb, var(--svc-accent) 22%, transparent) 0%,
    transparent 45%, rgba(10,7,7,.5) 100%);
}

.svc-thumbs{ display:flex; gap:10px; }
.svc-thumbs button{
  flex:1; height:clamp(52px, 7vw, 74px);
  padding:0; border:0; border-radius:var(--radius-s);
  overflow:hidden; cursor:pointer;
  background:#120D0D;
  opacity:0; transform:translateY(14px);
  outline-offset:3px;
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             box-shadow .3s, filter .3s;
  transition-delay:calc(var(--i) * 70ms + 200ms);
}
.svc-modal.is-open .svc-thumbs button{ opacity:1; transform:none; }
.svc-thumbs img{ width:100%; height:100%; object-fit:cover; filter:brightness(.62); transition:filter .3s; }
.svc-thumbs button:hover img,
.svc-thumbs button[aria-current="true"] img{ filter:brightness(1); }
.svc-thumbs button[aria-current="true"]{
  box-shadow:0 0 0 2px var(--svc-accent);
}

/* --- the copy --- */
.svc-copy{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  overflow-y:auto;
  padding-right:4px;
}
.svc-copy > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms + 180ms);
}
.svc-modal.is-open .svc-copy > *{ opacity:1; transform:none; }

.svc-kicker{
  margin:0 0 10px;
  font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700;
  color:var(--svc-accent);
}
.svc-title{
  margin:0 0 14px;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem); line-height:1.1;
  color:var(--blush);
}
.svc-rule{
  display:block; width:56px; height:2px; border-radius:2px; margin:0 0 18px;
  background:linear-gradient(90deg, var(--svc-accent), transparent);
}
.svc-lede{
  margin:0 0 20px;
  color:rgba(251,241,237,.72);
  font-size:.97rem; line-height:1.7;
}
.svc-points{ margin:0 0 24px; padding:0; list-style:none; display:grid; gap:11px; }
.svc-points li{
  position:relative; padding-left:26px;
  font-size:.9rem; line-height:1.55;
  color:rgba(251,241,237,.82);
}
.svc-points li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:50%;
  background:var(--svc-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--svc-accent) 26%, transparent);
}
.svc-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.svc-actions .btn{ cursor:pointer; }
.svc-added{
  margin:12px 0 0; min-height:1.1em;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--svc-accent);
}

/* --- what opens it --- */
.flow-more{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:18px; padding:0;
  border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mute);
  transition:color .3s;
}
.flow-more:hover{ color:var(--rose); }
.flow-more::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--rose); opacity:.5; transition:opacity .3s, transform .3s;
}
.flow-more:hover::before{ opacity:1; transform:scale(1.4); }

/* the flow photo becomes the second way in */
.flow-visual[data-service]{ cursor:pointer; }

/* the small "see photos" dot on a form pill. It sits inside the <label>,
   so its handler has to cancel the click or ticking would follow. */
.pill-info{
  width:19px; height:19px; margin-left:8px; padding:0;
  border:1px solid currentColor; border-radius:50%;
  background:none; color:inherit; cursor:pointer;
  font-size:.58rem; font-weight:700; line-height:1;
  opacity:.5;
  transition:opacity .25s, background .25s, color .25s;
}
.pill-info:hover{ opacity:1; background:var(--rose); color:#fff; border-color:var(--rose); }

@media (max-width: 860px){
  .svc-panel{
    grid-template-columns:1fr;
    /* auto rows, not the 1fr of the two-column layout: with 1fr the stage
       gets whatever is left after the copy and its photo overflows the row
       straight into the text underneath */
    grid-template-rows:auto auto;
    max-height:92vh;
    gap:18px;
  }
  /* on a phone the photo leads and the copy scrolls under it */
  .svc-stage{ min-height:auto; }
  .svc-shot{ height:min(38vh, 260px); flex:none; }
  .svc-copy{ overflow:visible; min-height:auto; }
  .svc-modal{ padding:0; place-items:end stretch; }
  .svc-panel{
    width:100%;
    max-height:94vh;
    border-radius:calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;
    overflow-y:auto;
    transform:translateY(40px);
  }
  .svc-actions{ margin-top:22px; }
  .svc-actions .btn{ flex:1 1 100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  .svc-scrim, .svc-panel, .svc-copy > *, .svc-thumbs button, .svc-shot img{
    transition-duration:.01ms; transition-delay:0ms;
  }
  .svc-close:hover{ transform:none; }
}

/* ---------------------------------------------------------
   FLOATING CTA
   --------------------------------------------------------- */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  padding:14px 26px; border-radius:100px;
  background:linear-gradient(135deg, var(--rose), #A85F6B);
  color:#fff; font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 14px 34px rgba(183,110,121,.45);
  opacity:0; transform:translateY(20px) scale(.9); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ transform:translateY(-3px); }

/* ---------------------------------------------------------
   REVEAL ANIMATION
   --------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   IN-PAGE NAVIGATION — arrival animation
   A nav click lands the section clear of the fixed bar, then the
   section announces itself: it lifts into place, a rose-gold sheen
   sweeps across it, and its content re-staggers in behind the sweep.
   --------------------------------------------------------- */
section[id]{ scroll-margin-top:clamp(74px, 8vw, 96px); }

.section-arrive{
  position:relative;
  animation:sectionArrive .85s var(--ease) both;
}
@keyframes sectionArrive{
  from{ transform:translateY(24px) scale(.985); }
  to  { transform:none; }
}

/* --- champagne fizz: the arrival effect, built from the business itself.
   Bubbles rise through the section the way they do through a flute, the
   botanical sprig catches the light, and the title's rule pours out.
   The <b> elements are created by app.js on arrival and removed after. --- */
.arrive-fizz{
  position:absolute; inset:0; z-index:5;
  overflow:hidden; pointer-events:none;
  /* the full-bleed sections cap their direct children — the fizz layer
     has to span the whole band, not the 1200px content column */
  max-width:none!important; margin:0!important;
}
.arrive-fizz b{
  position:absolute; bottom:-30px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    #fff 0%, var(--rose-pale) 34%, var(--rose-light) 58%, rgba(183,110,121,.30) 78%, transparent 82%);
  box-shadow:0 0 12px rgba(224,169,162,.55);
  animation:fizzRise var(--dur, 2s) cubic-bezier(.36,.66,.42,1) var(--del, 0s) both;
}
@keyframes fizzRise{
  0%  { transform:translate3d(0,0,0) scale(.35); opacity:0; }
  14% { opacity:1; }
  72% { opacity:.85; }
  100%{ transform:translate3d(var(--sway, 0px), calc(-1 * var(--rise, 70vh)), 0) scale(1); opacity:0; }
}
/* on the ink sections the bubbles should read as light, not as pink dots */
.section-dark .arrive-fizz b{
  background:radial-gradient(circle at 34% 30%,
    #fff 0%, #FDEFEA 36%, var(--rose-light) 62%, rgba(224,169,162,.34) 80%, transparent 84%);
  box-shadow:0 0 14px rgba(255,255,255,.4);
}

/* the sprig catches the light as the section lands */
.section-arrive .ornament{ animation:sprigGlow 1.7s var(--ease) both; }
@keyframes sprigGlow{ 0%{ opacity:0 } 45%{ opacity:.38 } 100%{ opacity:.16 } }
.section-dark.section-arrive .ornament{ animation-name:sprigGlowDark; }
@keyframes sprigGlowDark{ 0%{ opacity:0 } 45%{ opacity:.44 } 100%{ opacity:.2 } }

/* the rule under the heading pours out from the centre */
.section-arrive .section-head .section-title::after{
  animation:ruleDraw .85s var(--ease) .12s both;
}
@keyframes ruleDraw{ from{ width:0 } to{ width:70px } }

/* the nav marks where you are */
.nav-links a.active{ color:var(--rose); }
.nav-links a.active::after{ width:100%; }
.nav-links a.nav-cta.active{ color:var(--white)!important; }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 900px){
  /* stack the service flow: copy above, image below, no side-swapping */
  .flow-row{ grid-template-columns:1fr; }
  .flow-row:nth-child(even) .flow-copy  { order:1; }
  .flow-row:nth-child(even) .flow-visual{ order:2; }
  .flow-copy{ text-align:center; }
  .flow-copy p{ margin-inline:auto; }
  .flow-badge{ margin-inline:auto; }
  .depth-plate{ inset:5% -5% -7% 5%; }
  .depth-frame{ inset:-5% 6% 6% -5%; }
  .flow-row:nth-child(odd)  .depth-enter,
  .flow-row:nth-child(even) .depth-enter{ transform:translateY(40px) rotateX(12deg); }
  .depth-enter{ width:min(440px, 100%); }
}

@media (max-width: 960px){
  .occasions-wrap,
  .booth-wrap,
  .planner,
  .inquire-wrap{ grid-template-columns:1fr; }
  .booth-media{ order:2; }
  .planner-copy .section-title,
  .booth-copy .section-title,
  .occasions-copy .section-title{ text-align:center; }
  .planner-copy, .booth-copy, .occasions-copy{ text-align:center; }
  .occasion-list li{ justify-content:center; }
  .booth-cta, .planner-contacts{ justify-content:center; }
  /* keep the ticks next to their text once the copy is centred */
  .check-list{ width:fit-content; margin-inline:auto; text-align:left; }
  .contact-row{ justify-content:center; }
  .aside-card{ position:static; }
  .gallery{ grid-auto-rows:180px; }
  .ornament{ width:140px; height:70px; opacity:.12; }
}

@media (max-width: 700px){
  /* 2 x 7, filled exactly: the three landscape shots run full width */
  /* taller rows than the old layout: the job caption is two lines and it
     is permanent, so a 150px tile would be mostly caption */
  .gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:172px; }
  .tile-job{ font-size:.95rem; }
  .tile-where{ display:none; }
  /* half-width tiles have room for the two numbers people actually scan;
     the crew line stays on the three tiles that run the full width */
  .tile-spec .ts-crew{ display:none; }
  .tile-pool .ts-crew,
  .tile-hall .ts-crew,
  .tile-backyard .ts-crew{ display:inline; }
  .tile-pool        { grid-column:1 / span 2; grid-row:1; }
  .tile-outdoor     { grid-column:1;          grid-row:2; }
  .tile-balloons    { grid-column:2;          grid-row:2; }
  .tile-hall        { grid-column:1 / span 2; grid-row:3; }
  .tile-salmon      { grid-column:1;          grid-row:4; }
  .tile-dessert     { grid-column:2;          grid-row:4; }
  .tile-backyard    { grid-column:1 / span 2; grid-row:5; }
  .tile-tablesetting{ grid-column:1;          grid-row:6; }
  .tile-drinks      { grid-column:2;          grid-row:6; }
  .tile-salad       { grid-column:1;          grid-row:7; }
  .tile-mimosas     { grid-column:2;          grid-row:7; }
  .lb-nav{ width:42px; height:42px; font-size:1.6rem; }
  .orn-tr, .orn-br{ display:none; }
  .collage{ width:min(330px, 100%); }
}

@media (max-width: 760px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 auto; top:0;
    flex-direction:column; justify-content:center; gap:28px;
    height:100svh;
    background:rgba(253,248,246,.97);
    backdrop-filter:blur(20px);
    transform:translateY(-100%);
    transition:transform .55s var(--ease);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1rem; letter-spacing:.24em; }
  /* the full name is a long line; tighten it rather than wrap it */
  .nav-brand img{ width:44px; height:44px; }
  .nav-brand strong{ font-size:1.12rem; letter-spacing:.20em; }
  .nav-brand em{ font-size:.5rem; letter-spacing:.14em; }
  .nav{ z-index:120; }
  .field-row, .field-row.three{ grid-template-columns:1fr; }
  .fab{ right:14px; bottom:14px; padding:12px 20px; }
  .planner-card{ width:min(340px, 100%); padding:6px; }
}

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

/* ---------------------------------------------------------
   INTRO — the logo first, then the page
   Timeline (from .go, which app.js adds once the logo has loaded):
     0    – .9s  the mark rises out of blur
     .35  – 1.4s the gold ring draws around it
     .95s        eight sparks fly out
     1.1  – 1.9s a band of light sweeps across it
     1.0  – 1.6s the tagline fades up
     ~2.2s       app.js: the mark glides onto the hero coin, the stage fades
   Everything is paused until .go, so a slow logo download never plays the
   show over an empty circle.
   --------------------------------------------------------- */
.intro{
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  background:
    radial-gradient(60% 50% at 50% 45%, #2B0E1E 0%, rgba(43,14,30,0) 70%),
    var(--velvet);
  transition:opacity .75s var(--ease) .2s, visibility 0s linear .95s;
  /* failsafe: if app.js never runs, the page still appears */
  animation:introFailsafe .6s ease 6s forwards;
  cursor:pointer;
}
.intro *{ animation-play-state:paused; }
.intro.go *{ animation-play-state:running; }
@keyframes introFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.intro.out{ opacity:0; visibility:hidden; pointer-events:none; }
html.intro-on, html.intro-on body{ overflow:hidden; }

.intro-mark{
  position:relative;
  width:min(250px, 62vw); aspect-ratio:1;
  transform-origin:0 0;
  transition:transform .95s cubic-bezier(.65, 0, .25, 1), opacity .5s ease;
  will-change:transform;
}
.intro-mark img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  box-shadow:0 0 60px rgba(232,56,138,.35), 0 0 130px rgba(226,184,92,.2);
  animation:introRise .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes introRise{
  0%  { opacity:0; transform:scale(.72); filter:blur(14px) brightness(1.6); }
  60% { opacity:1; }
  100%{ opacity:1; transform:scale(1);   filter:blur(0) brightness(1); }
}

.intro-ring{
  position:absolute; inset:-11%; width:122%; height:122%;
  overflow:visible; transform:rotate(-90deg);
}
.intro-ring circle{ fill:none; stroke-linecap:round; }
.ir-a{
  stroke:var(--gold); stroke-width:1.2;
  stroke-dasharray:610; stroke-dashoffset:610;
  animation:introDraw 1.05s cubic-bezier(.6, 0, .2, 1) .35s forwards;
}
.ir-b{
  stroke:var(--pink); stroke-width:.6; opacity:.7;
  stroke-dasharray:626; stroke-dashoffset:-626;
  animation:introDraw 1.15s cubic-bezier(.6, 0, .2, 1) .5s forwards;
}
@keyframes introDraw{ to{ stroke-dashoffset:0; } }

.intro-sheen{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  mix-blend-mode:screen; pointer-events:none;
}
.intro-sheen i{
  position:absolute; top:-30%; bottom:-30%; left:-70%; width:50%;
  background:linear-gradient(100deg, transparent, rgba(255,240,214,.45) 50%, transparent);
  transform:skewX(-18deg);
  animation:introSheen .8s ease-in-out 1.1s both;
}
@keyframes introSheen{
  from{ transform:translateX(0) skewX(-18deg); opacity:1; }
  to  { transform:translateX(420%) skewX(-18deg); opacity:1; }
}

/* sparks: each sits at the centre, turned to its angle, and flies outward */
.intro-sparks{ position:absolute; left:50%; top:50%; }
.intro-sparks i{
  position:absolute; left:-4px; top:-4px; width:8px; height:8px;
  background:linear-gradient(135deg, #fff, var(--gold-light) 45%, var(--pink) 100%);
  box-shadow:0 0 10px rgba(246,222,156,.9);
  opacity:0;
  transform:rotate(var(--a)) translateY(0) rotate(45deg) scale(.4);
  animation:introSpark .9s cubic-bezier(.15, .7, .3, 1) .95s both;
}
.intro-sparks i:nth-child(odd){ animation-duration:1.1s; }
@keyframes introSpark{
  0%  { opacity:0; transform:rotate(var(--a)) translateY(-30px)  rotate(45deg) scale(.4); }
  20% { opacity:1; }
  100%{ opacity:0; transform:rotate(var(--a)) translateY(-190px) rotate(45deg) scale(1); }
}

.intro-line{
  margin:0; text-align:center;
  font-family:var(--serif); font-size:clamp(1.05rem, 3.4vw, 1.4rem);
  letter-spacing:.06em; color:var(--ivory);
  animation:introLine .7s var(--ease) 1s both;
  transition:opacity .35s ease;
}
.intro-line span{
  display:block; margin-top:2px;
  font-family:var(--script); font-size:1.7em; letter-spacing:0; color:var(--gold-light);
}
@keyframes introLine{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
.intro.leaving .intro-line,
.intro.leaving .intro-ring,
.intro.leaving .intro-sparks{ opacity:0; transition:opacity .3s ease; }

@media (prefers-reduced-motion: reduce){
  .intro{ display:none; }
}


/* ---------------------------------------------------------
   SERVICE GUIDE — "How We Help", the page's second night stage.
   Every service in detail, under the five pillars. A sticky
   canvas behind it draws a glowing floor and turning gems
   (app.js 5d); tabs swap the cards with a 3D flip (5c), and a
   pink "ink" pill glides between tabs. On desktop the tabs also
   advance on their own until the visitor takes over; on phones
   the cards swipe. Without script (.guide lacks .js) every
   panel simply shows, one after another.
   --------------------------------------------------------- */
.section-guide{
  max-width:none;
  color:var(--ivory);
  /* clip, not hidden: hidden would make this a scroll box and break
     the sticky canvas */
  overflow:clip;
  background:
    radial-gradient(70% 40% at 50% 0%, #2B0E1E 0%, rgba(43,14,30,0) 70%),
    radial-gradient(90% 50% at 50% 100%, #24091A 0%, rgba(36,9,26,0) 70%),
    var(--velvet);
}
.section-guide > *:not(.g-stage){ max-width:var(--maxw); margin-inline:auto; }
/* gold hairlines where the stage meets the cream page, as under the hero */
.section-guide::before,
.section-guide::after{
  content:''; position:absolute; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg, transparent, var(--gold-deep) 18%,
             var(--gold-light) 50%, var(--gold-deep) 82%, transparent);
  opacity:.8;
}
.section-guide::before{ top:0; }
.section-guide::after{ bottom:0; }

.g-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.g-stage canvas{ position:sticky; top:0; display:block; width:100%; height:100vh; }

.section-guide .kicker{ color:var(--gold); }
.section-guide .section-title{ color:var(--ivory); }
.section-guide .section-head .section-title::after{
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-guide .section-lead{ color:rgba(251,243,232,.68); }
.g-foil{
  display:inline-block; padding:0 .12em; line-height:1;
  background:linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold) 18%, var(--gold-light) 30%, #fff8e6 36%,
    var(--gold-light) 42%, var(--gold) 56%, var(--pink-soft) 72%, var(--gold) 86%, var(--gold-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
  animation:foil 7s ease-in-out infinite;
}

/* --- tabs, and the ink that glides between them --- */
.guide-tabs{
  position:relative; display:flex; justify-content:center; gap:10px;
  margin:0 auto clamp(26px, 3.4vw, 38px);
}
.guide-tab{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 21px;
  border:1px solid rgba(226,184,92,.28); border-radius:100px;
  background:rgba(255,255,255,.04); color:rgba(251,243,232,.8);
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; flex:none;
  transition:color .35s, border-color .35s, background .35s, box-shadow .35s, transform .35s var(--ease);
}
.guide-tab .ci-svg{ width:17px; height:17px; color:var(--gold); transition:color .35s, transform .5s var(--ease); }
.guide-tab:hover{ color:#fff; border-color:var(--gold); transform:translateY(-2px); }
.guide-tab[aria-selected="true"]{
  background:linear-gradient(135deg, var(--pink), #A61E62);
  border-color:rgba(246,222,156,.55); color:#fff;
  box-shadow:0 10px 30px rgba(232,56,138,.45);
}
.guide-tab[aria-selected="true"] .ci-svg{ color:var(--gold-light); transform:scale(1.15) rotate(-8deg); }
.guide-tab:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* with script, the selected tab goes clear and the ink sits under it */
.guide.js .guide-tab[aria-selected="true"]{ background:transparent; border-color:transparent; box-shadow:none; transform:none; }
.guide-ink{ display:none; }
.guide.js .guide-ink{
  display:block; position:absolute; z-index:0; top:0; left:0;
  height:var(--h, 42px); width:var(--w, 0px);
  transform:translateX(var(--x, 0px));
  border-radius:100px; overflow:hidden;
  background:linear-gradient(135deg, var(--pink), #A61E62);
  border:1px solid rgba(246,222,156,.55);
  box-shadow:0 10px 30px rgba(232,56,138,.5), 0 0 0 4px rgba(232,56,138,.12);
  transition:transform .6s cubic-bezier(.5, 1.5, .4, 1), width .6s cubic-bezier(.5, 1.5, .4, 1);
}
/* the countdown to the next tab, drawn along the bottom of the ink */
.guide-ink i{
  position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold-light), #fff);
  transform-origin:left; transform:scaleX(var(--p, 0));
  opacity:.85;
}

.guide-hint{ display:none; }

/* --- panels and the swap --- */
.guide-panels{ position:relative; }
.guide-panels.sizing{
  transition:height .55s var(--ease);
  /* while the height glides, a taller panel must not spill over the steps
     below; the margin keeps the cards' shadows and turning edges */
  overflow:clip; overflow-clip-margin:36px;
}
.guide.js .guide-panel:not(.is-active){ display:none; }
.guide:not(.js) .guide-panel + .guide-panel{ margin-top:48px; }

.guide-intro{
  max-width:680px; margin:0 auto clamp(22px, 3vw, 32px); text-align:center;
  font-size:.95rem; font-weight:300; line-height:1.7; color:rgba(251,243,232,.66);
}
.guide-intro b{ font-family:var(--serif); font-size:1.18em; font-weight:600; color:var(--gold-light); }

.guide-grid{
  display:grid; gap:clamp(16px, 2vw, 24px);
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  counter-reset:card;
}

/* --- cards: dark glass, a gold edge, and a light that follows the pointer --- */
@property --ga{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.g-card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(22px, 2.4vw, 28px);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(52,18,36,.82), rgba(16,7,12,.9));
  border:1px solid rgba(226,184,92,.2);
  box-shadow:0 22px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,240,214,.07);
  counter-increment:card;
  transform:perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition:transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
/* a band of gold and pink running round the edge, on hover */
.g-card::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--ga), transparent 0 55%, var(--gold-light) 70%, var(--pink) 82%, transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s;
  animation:gEdge 3.2s linear infinite paused;
}
@keyframes gEdge{ to{ --ga:360deg; } }
/* the pointer's own light */
.g-card::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(232,56,138,.2), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.g-card:hover{
  --lift:-6px;
  border-color:rgba(226,184,92,.45);
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(232,56,138,.18), inset 0 1px 0 rgba(255,240,214,.1);
}
.g-card:hover::before{ opacity:1; animation-play-state:running; }
/* following the pointer wants a quick response, not the .5s settle */
.g-card:hover{ transition:transform .15s ease-out, border-color .4s, box-shadow .4s; }
.g-card:hover::after{ opacity:1; }
.g-card-all{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(226,184,92,.16), transparent 60%),
    linear-gradient(160deg, rgba(60,20,40,.88), rgba(16,7,12,.92));
  border-color:rgba(226,184,92,.5);
}
.g-card h3{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:600;
  font-size:1.26rem; letter-spacing:.02em; line-height:1.25; color:var(--ivory);
}
.g-card h3::before{
  content:counter(card, decimal-leading-zero);
  display:block; margin-bottom:10px;
  font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.32em;
  color:var(--gold);
}
.g-card p{
  margin:0 0 16px; font-size:.88rem; font-weight:300; line-height:1.7; color:rgba(251,243,232,.64);
}
.g-card ul{
  list-style:none; margin:0 0 20px; padding:14px 0 0;
  border-top:1px solid rgba(226,184,92,.18);
  display:grid; gap:8px;
}
.g-card li{
  position:relative; padding-left:20px;
  font-size:.83rem; line-height:1.5; color:rgba(251,243,232,.88);
}
.g-card li::before{
  content:''; position:absolute; left:2px; top:.5em;
  width:7px; height:7px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--gold-light), var(--pink));
  box-shadow:0 0 8px rgba(232,56,138,.5);
}
.g-add{
  margin-top:auto; align-self:flex-start;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light);
  border-bottom:1px solid rgba(226,184,92,.4); padding-bottom:3px;
  transition:color .3s, border-color .3s, letter-spacing .4s var(--ease);
}
.g-add:hover{ color:var(--pink-soft); border-color:currentColor; letter-spacing:.18em; }

/* the swap: old cards turn away, new ones turn in from the other side.
   --dir is 1 going right through the tabs and -1 going left. Out holds
   its end state (`both`) until the panel is hidden; in only fills
   backwards, so afterwards the card's own transform (the tilt) applies. */
.g-out{ animation:gOut .36s cubic-bezier(.55, 0, .75, .2) both; animation-delay:calc(var(--i, 0) * 35ms); pointer-events:none; }
@keyframes gOut{
  to{ opacity:0; transform:perspective(1000px) translateX(calc(var(--dir, 1) * -50px)) translateZ(-140px) rotateY(calc(var(--dir, 1) * -65deg)); }
}
.g-in{ animation:gIn .75s cubic-bezier(.2, .85, .25, 1) backwards; animation-delay:calc(var(--i, 0) * 70ms); }
@keyframes gIn{
  from{ opacity:0; transform:perspective(1000px) translateX(calc(var(--dir, 1) * 70px)) translateZ(-180px) rotateY(calc(var(--dir, 1) * 70deg)); }
}
.g-fade{ animation:gFade .6s var(--ease) backwards; }
@keyframes gFade{ from{ opacity:0; transform:translateY(10px); } }

/* --- how booking works --- */
.g-steps{ margin-top:clamp(64px, 8vw, 96px); text-align:center; }
/* the stage's own pink, not the cream page's rose */
.section-guide .btn-primary{
  background:linear-gradient(135deg, var(--pink), #A61E62);
  box-shadow:0 14px 34px rgba(232,56,138,.4);
}
.g-steps-head{
  margin:0 0 clamp(26px, 3.4vw, 36px);
  font-family:var(--serif); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing:.08em; color:var(--ivory);
}
.g-steps-list{
  list-style:none; margin:0 0 clamp(30px, 4vw, 40px); padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 2.4vw, 30px);
  position:relative;
}
.g-steps-list::before{
  content:''; position:absolute; top:22px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(226,184,92,.55) 10%, rgba(232,56,138,.55) 90%, transparent);
}
.g-steps-list li{ position:relative; padding:0 6px; }
.g-num{
  position:relative;
  display:grid; place-items:center; margin:0 auto 14px;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(140deg, #3A1229, #12060C); color:var(--gold-light);
  border:1px solid rgba(226,184,92,.6);
  font-family:var(--serif); font-size:1.25rem; font-weight:600;
  box-shadow:0 0 0 6px var(--velvet), 0 0 26px rgba(232,56,138,.4);
}
.g-steps-list b{
  display:block; margin-bottom:6px;
  font-family:var(--serif); font-size:1.14rem; font-weight:600; color:var(--ivory);
}
.g-steps-list p{ margin:0; font-size:.86rem; font-weight:300; line-height:1.65; color:rgba(251,243,232,.62); }

@media (max-width: 760px){
  /* tabs become one sideways-scrolling row, bleeding to the screen edge */
  .guide-tabs{
    justify-content:flex-start; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(-1 * clamp(20px, 5vw, 44px)); margin-bottom:10px;
    padding:4px clamp(20px, 5vw, 44px) 10px;
  }
  .guide-tabs::-webkit-scrollbar{ display:none; }
  .guide-tab{ padding:10px 16px; font-size:.62rem; letter-spacing:.14em; }
  .guide.js .guide-hint{
    display:block; margin:0 0 20px; text-align:center;
    font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(226,184,92,.8);
  }
  .guide-hint span{ display:inline-block; animation:gNudge 1.6s ease-in-out infinite; }
  .guide-grid{ grid-template-columns:1fr; }

  .g-steps-list{ grid-template-columns:1fr; gap:22px; text-align:left; max-width:420px; margin-inline:auto; }
  .g-steps-list::before{ top:22px; bottom:22px; left:22px; right:auto; width:1px; height:auto;
    background:linear-gradient(180deg, rgba(226,184,92,.55), rgba(232,56,138,.55)); }
  .g-steps-list li{ padding:0 0 0 64px; min-height:44px; }
  .g-num{ position:absolute; left:0; top:0; margin:0; }
}
@keyframes gNudge{ 0%,100%{ transform:none; } 50%{ transform:translateX(5px); } }

@media (prefers-reduced-motion: reduce){
  .g-in, .g-out, .g-fade, .g-foil, .guide-hint span{ animation:none; }
  .g-card, .guide-tab, .guide-ink{ transition:none; }
  .g-card::before{ animation:none; }
}