
  /* ---- tokens (from Colors-branding.pdf) ---- */
  :root{
    /* brand palette */
    --brand-pink:#F26CAD; --brand-purple:#9F75C9; --brand-cyan:#33C0E1;
    --neutral-100:#FFFFFF; --neutral-300:#D9D9D9; --neutral-500:#A6A6A6;

    --primary:#F26CAD; --primary-deep:#D94F97; --primary-soft:#FDEAF3;
    --secondary:#8A4FBF; --secondary-deep:#6E3CA0;   /* purple — labels & accent text */
    --tertiary:#9F75C9;
    --ink:#2E1A47; --ink-soft:#6E5B86;
    --paper:#FFF7FB; --surface:#FFFFFF; --surface-mid:#FBEAF4; --surface-blush:#F7DEEE;
    --rule-soft:#EAD8EE; --rule-gold:#33C0E1;   /* cyan — sparkles, hairlines, ornaments */

    --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:32px;
    --space-xl:64px; --space-2xl:96px; --space-3xl:144px;

    --r-sm:4px; --r-md:14px; --r-lg:24px; --r-xl:40px; --r-pill:9999px;

    --shadow-card: 0 12px 32px rgba(46,26,71,.08);
    --shadow-card-lift: 0 18px 44px rgba(46,26,71,.13);
  }
  *,*::before,*::after{ box-sizing:border-box }
  html,body{ margin:0; padding:0 }
  body{
    background:var(--paper); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  ::selection{ background:var(--primary); color:var(--ink) }
  a{ color:inherit; text-decoration:none }
  img{ max-width:100% }
  button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }

  /* ---- typography utility classes ---- */
  .label-caps{
    font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
    letter-spacing:.22em; text-transform:uppercase; line-height:1.2;
  }
  .display-italic{
    font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
    font-size:32px; line-height:1.15;
  }
  .caption{
    font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
    font-size:13px; line-height:1.4;
  }
  .programme-number{
    font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
    font-size:38px; line-height:1;
  }

  /* ---- gold ornament rule ---- */
  .gold-rule{
    height:1px; background:var(--rule-gold); width:100%;
  }
  .gold-ornament-rule{
    display:flex; align-items:center; gap:14px;
  }
  .gold-ornament-rule .line{ flex:1; height:1px; background:var(--rule-gold) }
  .gold-ornament-rule .diamond{
    width:6px; height:6px; background:var(--rule-gold); transform:rotate(45deg);
  }

  /* ---- 4-pointed sparkle SVG sizing ---- */
  .sparkle{
    display:inline-block; width:18px; height:18px; vertical-align:middle;
    color:var(--rule-gold);
  }
  .sparkle-lg{ width:36px; height:36px }
  .sparkle-xs{ width:10px; height:10px }

  /* ---- shell ---- */
  .container{
    max-width:1240px; margin:0 auto; padding:0 32px;
  }
  /* justify body copy site-wide; centered blocks keep their centering */
  p{ text-align:justify; text-justify:inter-word; }
  .section-head p, .poster p, .rentals-note p, .success-pane p{ text-align:center; }
  @media (max-width:720px){
    .container{ padding:0 20px }
  }

  /* ---- top utility strip (scrolling ticker, left → right) ---- */
  .utility-strip{
    background:var(--primary); color:#fff;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
    padding:10px 0; overflow:hidden;
  }
  .utility-strip .dot{ color:var(--brand-cyan); margin:0 8px }
  .us-track{
    display:flex; width:max-content;
    animation:usMarquee 95s linear infinite;
  }
  .utility-strip:hover .us-track{ animation-play-state:paused }
  .us-item{ white-space:nowrap; padding-right:64px; flex:0 0 auto }
  .us-item a:hover{ text-decoration:underline }
  @keyframes usMarquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }   /* right → left */
  @media (max-width:720px){ .utility-strip{ font-size:10px } }
  @media (prefers-reduced-motion:reduce){ .us-track{ animation:none } }

  /* ---- nav ---- */
  nav.site{
    position:sticky; top:0; z-index:30;
    background:rgba(255,249,251,.92);
    backdrop-filter:blur(10px) saturate(120%);
    border-bottom:1px solid var(--rule-soft);
  }
  nav.site .row{
    display:flex; align-items:center; justify-content:space-between;
    height:64px; padding:0;
  }
  nav.site .brand{
    display:flex; align-items:center; gap:12px;
  }
  /* compact bar, but the logo is taller and overhangs the bar */
  .brand-logo{ height:100px; width:auto; display:block; position:relative; top:0px }
  @media (max-width:720px){
    nav.site .row{ height:56px }
    .brand-logo{ height:84px; top:0px }
  }
  footer.site .brand-logo{ height:168px }
  nav.site .brand-mark{
    width:42px; height:42px; border-radius:var(--r-pill);
    background:var(--primary); color:var(--ink);
    font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
    font-size:22px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--rule-gold);
  }
  nav.site .brand-text{
    font-family:'Playfair Display',serif; font-weight:500; font-size:20px;
    line-height:1; letter-spacing:-.005em;
  }
  nav.site .brand-text small{
    display:block; font-family:'Inter',sans-serif; font-style:normal; font-weight:600;
    font-size:9px; letter-spacing:.28em; color:var(--secondary);
    margin-top:4px;
  }
  nav.site ul{
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center; gap:36px;
  }
  nav.site ul a{
    font-size:13px; font-weight:500; color:var(--ink-soft); position:relative;
    padding:6px 0;
  }
  nav.site ul a:hover{ color:var(--ink) }
  nav.site ul a:hover::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--rule-gold);
  }
  nav.site .rsvp{
    background:var(--primary); color:var(--ink);
    border-radius:var(--r-pill); padding:12px 22px;
    font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    transition:background .2s;
  }
  nav.site .rsvp:hover{ background:var(--primary-deep) }
  nav.site .menu-btn{ display:none }
  @media (max-width:920px){
    nav.site ul{ display:none }
    nav.site .menu-btn{ display:flex; flex-direction:column; gap:5px; padding:8px }
    nav.site .menu-btn span{ width:22px; height:1.5px; background:var(--primary); display:block }
    nav.site.open ul{
      display:flex; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0; background:var(--paper);
      border-bottom:1px solid var(--rule-soft); padding:12px 0;
    }
    nav.site.open ul li{ padding:14px 32px; border-top:1px solid var(--rule-soft) }
    nav.site .rsvp{ display:none }
  }

  /* ---- hero (full-bleed bus background, headline top-left) ---- */
  .hero{
    position:relative; overflow:hidden; background:var(--paper);
    min-height:clamp(640px, 96vh, 960px); display:flex; align-items:flex-start;
  }
  /* bus images fill the whole hero as a big background */
  .hero-stage{ position:absolute; inset:0; z-index:0 }
  .hg-slide{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
    margin:0; max-width:none; max-height:none; display:block;
    opacity:0; transition:opacity 1.1s ease;
  }
  .hg-slide.is-active{ opacity:1 }
  /* no scrim — keep the bus colors vivid; the headline carries its own halo */
  .hero .container{ position:relative; z-index:2; width:100%; padding-top:clamp(24px,4vh,58px); padding-right:16px }
  /* desktop: let the headline sit closer to the right edge.
     On wide screens push into the side gutter, keeping a constant ~28px gap
     from the viewport edge (never clips on narrower desktops). */
  @media (min-width:861px){ .hero-content{ margin-right:0 } }
  @media (min-width:1241px){ .hero-content{ margin-right:calc(632px - 50vw) } }
  /* only the headline sits over the photo now — soft halo keeps it readable */
  .hero-content{ max-width:620px; margin-left:auto; text-align:right }
  .hero-content h1{
    font-family:'Playfair Display',serif; font-weight:500;
    font-size:clamp(40px,5.2vw,76px); line-height:1.02; letter-spacing:-.015em;
    color:var(--ink); margin:0;
    text-shadow:0 1px 10px rgba(255,247,251,.95), 0 2px 22px rgba(255,247,251,.9), 0 0 2px rgba(255,247,251,.9);
  }
  .hero-content h1 em{ font-style:italic; font-weight:400 }

  /* organized content bar below the big image */
  .hero-bar-wrap{ background:var(--surface); border-bottom:1px solid var(--rule-soft) }
  .hero-bar{
    display:flex; align-items:center; justify-content:space-between; gap:28px 56px;
    flex-wrap:wrap; padding:30px 0;
  }
  .hero-lede{ font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:48ch; flex:1 1 360px }
  .hero-bar-actions{ display:flex; align-items:center; gap:30px; flex:0 0 auto }
  .hero-proof{ display:flex; align-items:center; gap:16px }
  .hero-avatars{ display:flex }
  .hero-avatars img{
    width:46px; height:46px; border-radius:99px; object-fit:cover;
    border:3px solid var(--surface); margin-left:-14px; box-shadow:0 4px 12px rgba(46,26,71,.18);
  }
  .hero-avatars img:first-child{ margin-left:0 }
  .hero-stat strong{
    display:block; font-family:'Playfair Display',serif; font-weight:600; font-size:22px;
    color:var(--ink); line-height:1.05;
  }
  .hero-stat span{
    font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--secondary);
  }
  .hero-quote{
    display:inline-flex; align-items:center; gap:16px;
    background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-pill);
    padding:8px 8px 8px 24px; box-shadow:var(--shadow-card);
    font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink);
    transition:box-shadow .2s, transform .2s;
  }
  .hero-quote:hover{ box-shadow:var(--shadow-card-lift); transform:translateY(-2px) }
  .hero-quote .arrow{
    width:44px; height:44px; border-radius:99px; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto;
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--r-pill); padding:18px 32px;
    font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    transition:all .2s; border:1px solid transparent;
  }
  .btn-primary{ background:var(--primary); color:var(--ink) }
  .btn-primary:hover{ background:var(--primary-deep); color:var(--ink) }
  .btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--rule-gold) }
  .btn-ghost:hover{ background:var(--primary-soft) }
  .btn-ink{ background:var(--tertiary); color:#fff }
  .btn-ink:hover{ background:var(--secondary-deep) }

  /* entrance */
  .hero-content > *{ opacity:0; transform:translateY(14px); animation:heroRise .6s ease forwards }
  .hero-content > *:nth-child(1){ animation-delay:.04s }
  .hero-content > *:nth-child(2){ animation-delay:.12s }
  .hero-content > *:nth-child(3){ animation-delay:.20s }
  .hero-content > *:nth-child(4){ animation-delay:.28s }
  @keyframes heroRise{ to{ opacity:1; transform:translateY(0) } }
  @media (prefers-reduced-motion:reduce){
    .hero-content > *{ animation:none; opacity:1; transform:none }
    .hg-slide{ transition:none }
  }

  /* responsive */
  @media (max-width:860px){
    .hero{ min-height:clamp(560px,86vh,720px) }
    .hero-content{ max-width:none }
  }
  @media (max-width:760px){
    .hero-bar{ gap:22px; padding:26px 0 }
    .hero-bar-actions{ width:100%; justify-content:space-between; gap:18px; flex-wrap:wrap }
  }
  @media (max-width:600px){
    .hero-content h1{ font-size:clamp(34px,10vw,48px) }
    .hero-lede{ font-size:16px }
    .hero-avatars img{ width:40px; height:40px }
  }

  /* ---- floating mascots (cursor parallax) ---- */
  .has-mascot{ position:relative; overflow:hidden }
  .has-mascot > .container{ position:relative; z-index:1 }   /* content above the mascot */
  .mascot{
    position:absolute; z-index:0; pointer-events:none;       /* peeks from behind the content */
    width:clamp(150px, 14vw, 215px);
    transition:transform .35s cubic-bezier(.2,.7,.3,1);      /* parallax easing (JS sets transform) */
    will-change:transform;
  }
  .mascot img{
    display:block; width:100%; height:auto;
    filter:drop-shadow(0 16px 26px rgba(46,26,71,.22));
    animation:mascotFloat 6s ease-in-out infinite;
  }
  .mascot.m-left{ left:-18px; bottom:0 }
  .mascot.m-right{ right:-18px; bottom:0 }
  .mascot.m-right img{ animation-delay:-3s }
  @keyframes mascotFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
  @media (max-width:1024px){ .mascot{ display:none } }   /* keep small screens clean */
  @media (prefers-reduced-motion:reduce){
    .mascot{ transition:none } .mascot img{ animation:none }
  }

  /* ---- banner divider (single, static) ---- */
  .banner-divider{
    background:var(--primary-soft);
    border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
    padding:32px 20px; text-align:center;
  }
  .banner-divider img{
    display:block; margin:0 auto; width:min(851px, 100%); height:auto;
    border-radius:var(--r-md); box-shadow:var(--shadow-card);
  }

  /* ---- reviews ticker (right → left, pause on hover) ---- */
  .reviews{ background:var(--paper); padding:34px 0 42px; overflow:hidden }
  .reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px }
  .reviews-head h3{
    font-family:'Playfair Display',serif; font-weight:500; margin:0;
    font-size:clamp(22px,3vw,32px); color:var(--ink);
  }
  .reviews-head h3 em{ font-style:italic; color:var(--primary-deep) }
  .reviews-link{
    display:inline-flex; align-items:center; gap:2px; color:var(--primary-deep);
    font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .reviews-link:hover{ text-decoration:underline }
  /* fade the edges so cards ease in/out */
  .reviews-marquee{
    overflow:hidden;
    -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .reviews-track{ display:flex; gap:20px; width:max-content; animation:reviewsMarquee 70s linear infinite }
  .reviews-marquee:hover .reviews-track{ animation-play-state:paused }
  .review-card{
    flex:0 0 340px; display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-md);
    box-shadow:var(--shadow-card); padding:22px 24px;
  }
  .review-stars{ color:var(--primary); letter-spacing:3px; font-size:15px }
  .review-text{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:12px 0 16px; flex:1 }
  .review-by{ display:flex; align-items:center; gap:12px }
  .review-avatar{
    width:38px; height:38px; border-radius:99px; flex:0 0 auto;
    background:var(--primary-soft); color:var(--primary-deep);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-weight:700; font-size:17px;
  }
  .review-name strong{ display:block; font-size:14px; color:var(--ink) }
  .review-name span{ font-size:11px; color:var(--secondary); letter-spacing:.04em }
  @keyframes reviewsMarquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
  @media (prefers-reduced-motion:reduce){ .reviews-track{ animation:none } }
  @media (max-width:600px){ .review-card{ flex-basis:300px } }

  /* ---- trust strip ---- */
  .trust{
    padding:36px 0; background:var(--paper);
    border-top:1px solid var(--rule-soft);
    border-bottom:1px solid var(--rule-soft);
  }
  .trust .container{
    display:flex; justify-content:center; align-items:center; gap:24px;
    flex-wrap:wrap; text-align:center;
  }
  .trust-item{
    font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .trust-dot{
    width:5px; height:5px; background:var(--rule-gold); transform:rotate(45deg);
  }

  /* ---- section heading pattern ---- */
  .section-head{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    margin-bottom:64px; gap:14px;
  }
  .section-head .display-italic{ color:var(--ink); margin:0 }
  .section-head h2{
    font-family:'Playfair Display',serif; font-weight:500; font-size:64px;
    line-height:1.05; letter-spacing:-.012em; color:var(--ink);
    margin:0; max-width:18ch;
  }
  .section-head h2 em{ font-style:italic; font-weight:400 }
  .section-head .ornament{ width:140px; margin-top:8px }
  @media (max-width:720px){
    .section-head h2{ font-size:40px }
  }

  /* ---- sections wrapper ---- */
  section.block{ padding:128px 0 }
  section.block.alt{ background:var(--primary-soft) }
  section.block.surface-mid{ background:var(--surface-mid) }
  @media (max-width:720px){ section.block{ padding:80px 0 } }

  /* ---- services / programme ---- */
  .programme-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  }
  @media (max-width:1100px){ .programme-grid{ grid-template-columns:repeat(2,1fr) } }
  @media (max-width:600px){ .programme-grid{ grid-template-columns:1fr } }

  .programme-card{
    position:relative; background:var(--surface); border-radius:var(--r-lg);
    padding:40px 32px 32px; box-shadow:var(--shadow-card);
    transition:transform .25s ease, box-shadow .25s ease;
    border:1px solid transparent;
  }
  .programme-card::before{
    content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
    background:var(--rule-gold);
  }
  .programme-card:hover{
    transform:translateY(-6px); box-shadow:var(--shadow-card-lift);
  }
  .programme-card .num-badge{
    width:64px; height:64px; border-radius:99px;
    background:var(--primary); display:flex; align-items:center; justify-content:center;
    color:var(--ink);
    margin-bottom:24px;
    border:1px solid var(--rule-gold);
  }
  .programme-card h3{
    font-family:'Playfair Display',serif; font-weight:500; font-size:26px;
    line-height:1.15; margin:0 0 12px; color:var(--ink);
  }
  .programme-card .desc{
    font-size:14px; color:var(--ink-soft); line-height:1.65; margin-bottom:20px;
    min-height:64px;
  }
  .programme-card ul{
    list-style:none; padding:0; margin:0 0 24px;
  }
  .programme-card li{
    font-size:13px; color:var(--ink); padding:8px 0 8px 18px;
    border-bottom:1px solid var(--rule-soft); position:relative;
  }
  .programme-card li:last-child{ border-bottom:0 }
  .programme-card li::before{
    content:''; position:absolute; left:0; top:14px;
    width:5px; height:5px; background:var(--rule-gold); transform:rotate(45deg);
  }
  .programme-card .meta{
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    font-weight:600; color:var(--secondary);
    margin-bottom:18px;
  }
  .programme-card .meta .gold-rule{ width:24px; margin:0 12px }
  .programme-card .rsvp{
    display:inline-flex; align-items:center; gap:10px;
    background:transparent; color:var(--ink);
    font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    border-top:1px solid var(--rule-soft); padding-top:18px;
    width:100%; justify-content:space-between;
  }
  .programme-card .rsvp:hover{ color:var(--secondary-deep) }

  /* ---- packages (services page) ---- */
  .pkg-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start;
  }
  /* 3-up only when there's room to breathe; otherwise one comfortable column */
  @media (max-width:1199px){ .pkg-grid{ grid-template-columns:1fr; max-width:580px; margin:0 auto } }
  /* center the lone 4th (Coquette) card under the 3-up row on desktop */
  @media (min-width:1200px){ .pkg-grid > .pkg-coquette{ grid-column:2 } }
  .pkg-card.pkg-coquette .pkg-badge{ background:var(--tertiary) }
  /* card — crossfade flip (no 3D, renders correctly on iOS / Samsung / all) */
  .pkg-card{ position:relative; transition:transform .25s; cursor:pointer }
  .pkg-card:hover{ transform:translateY(-6px) }
  .pkg-inner{ position:relative }
  .pkg-face{
    background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-lg);
    box-shadow:var(--shadow-card); overflow:hidden;
  }
  .pkg-card:hover .pkg-face{ box-shadow:var(--shadow-card-lift) }
  /* front is in flow → it sets the card height; back overlays it */
  .pkg-front{ position:relative; display:flex; flex-direction:column; transition:opacity .3s ease }
  .pkg-back{
    position:absolute; inset:0; display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transition:opacity .3s ease;
  }
  .pkg-inner.is-flipped .pkg-front{ opacity:0; visibility:hidden; pointer-events:none }
  .pkg-inner.is-flipped .pkg-back{ opacity:1; visibility:visible }
  @media (prefers-reduced-motion:reduce){ .pkg-front, .pkg-back{ transition:none } }
  .pkg-card.featured .pkg-face{ border-color:var(--primary); box-shadow:var(--shadow-card-lift) }
  /* coquette graphic as a header band */
  .pkg-media{ position:relative; height:clamp(150px,34vw,190px); overflow:hidden; background:#FBEAF4; flex-shrink:0 }
  .pkg-media img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block }
  .pkg-badge{
    position:absolute; top:14px; right:14px; z-index:5;   /* relative to .pkg-card */
    background:var(--primary); color:#fff;
    font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    padding:7px 16px; border-radius:var(--r-pill); white-space:nowrap;
    box-shadow:0 6px 16px rgba(46,26,71,.25); transition:opacity .3s;
  }
  .pkg-card.featured .pkg-badge{ background:var(--tertiary) }
  .pkg-card:has(.pkg-inner.is-flipped) .pkg-badge{ opacity:0; pointer-events:none }  /* clears the back button */
  /* content in normal flow → the card sizes to it (no blank space) */
  .pkg-body{
    position:relative; z-index:1; flex:1;
    padding:22px 26px 26px; display:flex; flex-direction:column;
    background:var(--surface);
  }
  .pkg-body > *{ flex-shrink:0 }   /* don't squeeze the meta grid / lists */
  .pkg-body h3{
    font-family:'Playfair Display',serif; font-weight:500; font-size:26px;
    line-height:1.1; margin:0 0 6px; color:var(--ink);
  }
  .pkg-price{ font-size:14px; color:var(--ink-soft); margin-bottom:14px }
  .pkg-price strong{
    font-family:'Playfair Display',serif; font-size:30px; font-weight:700; color:var(--secondary);
  }
  .pkg-price small{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--secondary) }
  .pkg-summary{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px }
  .pkg-meta{
    list-style:none; margin:0 0 14px; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:#DDD0EE; border:1px solid #DDD0EE; border-radius:var(--r-md); overflow:hidden;
  }
  .pkg-meta li{
    background:#EFE8F8; padding:10px 14px;
    display:flex; flex-direction:column; gap:2px;
  }
  .pkg-meta li span{
    font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--secondary);
  }
  .pkg-meta li strong{ font-size:14px; font-weight:600; color:var(--ink) }
  .pkg-highlights{ list-style:none; margin:0 0 14px; padding:0 }
  .pkg-highlights li{
    font-size:13px; color:var(--ink); padding:7px 0 7px 22px; position:relative;
    border-bottom:1px solid var(--rule-soft);
  }
  .pkg-highlights li:last-child{ border-bottom:0 }
  .pkg-highlights li::before{
    content:''; position:absolute; left:0; top:12px;
    width:6px; height:6px; background:var(--rule-gold); transform:rotate(45deg);
  }
  .pkg-cta{ width:100%; margin-top:auto }
  /* flip trigger on the front — highlighted pill */
  .pkg-flip-btn{
    width:100%; margin-top:12px; padding:13px 18px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--secondary-deep); background:#EFE8F8;
    border:1.5px solid #C9B3E6; border-radius:var(--r-pill); cursor:pointer;
    transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
  }
  .pkg-flip-btn:hover{ background:var(--tertiary); color:#fff; border-color:var(--tertiary); box-shadow:0 8px 20px rgba(159,117,201,.35) }
  .pkg-flip-btn .pkg-plus{ font-size:16px; line-height:1; font-weight:700 }
  .pkg-flip-btn:focus-visible, .pkg-back-btn:focus-visible{
    outline:2px solid var(--rule-gold); outline-offset:3px; border-radius:var(--r-sm);
  }
  /* back face */
  .pkg-back-btn{
    flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
    padding:16px 24px; background:var(--primary-soft);
    border-bottom:1px solid var(--rule-soft); cursor:pointer;
    font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  }
  .pkg-back-btn:hover{ color:var(--primary-deep) }
  .pkg-back-scroll{ flex:1; overflow-y:auto; padding:22px 24px 26px }
  .pkg-back-scroll h4{
    font-family:'Playfair Display',serif; font-weight:500; font-size:22px;
    color:var(--ink); margin:0 0 14px;
  }
  .pkg-back-scroll h5{
    font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--secondary); margin:18px 0 8px;
  }
  .pkg-back-scroll ul{ list-style:none; margin:0; padding:0 }
  .pkg-back-scroll ul li{
    font-size:13px; color:var(--ink-soft); line-height:1.5; padding:5px 0 5px 18px; position:relative;
  }
  .pkg-back-scroll ul li::before{
    content:''; position:absolute; left:0; top:12px; width:5px; height:5px;
    background:var(--rule-gold); transform:rotate(45deg);
  }
  .pkg-back-scroll p{ font-size:13px; line-height:1.65; color:var(--ink-soft); margin:0 0 10px }

  /* ---- the experience ---- */
  .experience{
    display:grid; grid-template-columns: 1fr 1px 1fr; gap:64px; align-items:center;
  }
  @media (max-width:920px){
    .experience{ grid-template-columns:1fr; gap:32px }
    .experience .vrule{ display:none }
  }
  .experience .panel{
    aspect-ratio: 4/5;
    background:
      radial-gradient(circle at 30% 30%, rgba(242,108,173,.55), transparent 60%),
      radial-gradient(circle at 75% 75%, rgba(159,117,201,.45), transparent 65%),
      var(--surface-mid);
    border-radius:var(--r-lg);
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--rule-soft);
  }
  .experience .panel::before{
    content:''; position:absolute; inset:14px; z-index:2;
    border:1px solid var(--rule-gold); border-radius:calc(var(--r-lg) - 6px);
    pointer-events:none;
  }
  /* crossfade carousel of bus interior/exterior photos */
  .exp-carousel{ position:absolute; inset:0; z-index:1 }
  .exp-slide{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;   /* fill the square, crop overflow from the center */
    border-radius:var(--r-lg); opacity:0; transition:opacity 1.1s ease;
  }
  .exp-slide.is-active{ opacity:1 }
  .experience .panel .sparkle-cluster{
    position:relative; color:var(--rule-gold);
    animation:slow-spin 28s linear infinite;
  }
  @keyframes slow-spin{ to{ transform:rotate(360deg) } }
  .experience .vrule{ width:1px; height:80%; background:var(--rule-gold); margin:0 auto }
  .experience h3{
    font-family:'Playfair Display',serif; font-weight:500; font-size:48px;
    line-height:1.05; margin:18px 0 24px; max-width:14ch;
  }
  .experience h3 em{ font-style:italic; font-weight:400 }
  .experience p{
    font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px;
    max-width:48ch;
  }
  .experience .points{ list-style:none; padding:0; margin:24px 0 0 }
  .experience .points li{
    padding:14px 0 14px 28px; border-top:1px solid var(--rule-soft);
    position:relative; font-size:14px;
  }
  .experience .points li:last-child{ border-bottom:1px solid var(--rule-soft) }
  .experience .points li::before{
    content:''; position:absolute; left:0; top:21px; width:14px; height:1px;
    background:var(--rule-gold);
  }

  /* ---- about ---- */
  .about-grid{
    display:grid; grid-template-columns: 1.1fr 1fr; gap:80px; align-items:start;
  }
  @media (max-width:920px){ .about-grid{ grid-template-columns:1fr; gap:32px } }
  .about-photo{
    width:100%; height:auto; display:block; margin-bottom:28px;
    border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  }
  .about-grid .lead{
    font-family:'Playfair Display',serif; font-weight:500; font-size:32px;
    line-height:1.2; color:var(--ink); margin:0 0 24px;
  }
  .about-grid .lead em{ font-style:italic; font-weight:400 }
  .about-grid p{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px }
  .about-stats{
    display:grid; grid-template-columns: 1fr 1fr; gap:0;
    margin-top:32px; border-top:1px solid var(--rule-soft);
  }
  .about-stats .cell{
    padding:24px 0; border-bottom:1px solid var(--rule-soft);
  }
  .about-stats .cell:nth-child(odd){ border-right:1px solid var(--rule-soft); padding-right:24px }
  .about-stats .cell:nth-child(even){ padding-left:24px }
  .about-stats .num{
    font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
    font-size:42px; color:var(--ink); line-height:1;
  }
  .about-stats .lbl{
    font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
    color:var(--secondary); margin-top:8px;
  }

  /* ---- lookbook ---- */
  .lookbook{
    columns:3; column-gap:24px;
  }
  @media (max-width:920px){ .lookbook{ columns:2 } }
  @media (max-width:600px){ .lookbook{ columns:1 } }
  .lookbook .frame{
    break-inside:avoid; margin-bottom:24px; background:var(--surface);
    border-radius:var(--r-md); overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:transform .25s, box-shadow .25s;
    border:1px solid var(--rule-soft);
  }
  .lookbook .frame:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-lift) }
  .lookbook .img{
    background:var(--primary-soft);
    position:relative; overflow:hidden;
  }
  .lookbook .img.tall{ aspect-ratio: 3/4 }
  .lookbook .img.wide{ aspect-ratio: 4/3 }
  .lookbook .img.square{ aspect-ratio: 1/1 }
  .lookbook .img::before{
    content:''; position:absolute; inset:14px;
    border:1px solid var(--rule-gold);
    pointer-events:none;
  }
  .lookbook .img.v1{ background:linear-gradient(135deg,#FAD0DD,#F5BCD0) }
  .lookbook .img.v2{ background:linear-gradient(160deg,#FDECEF,#F7DCE3) }
  .lookbook .img.v3{ background:linear-gradient(120deg,#F5D2D9,#FDECEF) }
  .lookbook .img.v4{ background:linear-gradient(140deg,#FBE9EE,#F0BACA) }
  .lookbook .img.v5{ background:linear-gradient(180deg,#FFE5EB,#F5D2D9) }
  .lookbook .img.v6{ background:linear-gradient(200deg,#F7DCE3,#FAD0DD) }
  .lookbook .img .center-sparkle{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:var(--rule-gold); width:42px; height:42px; opacity:.55;
  }
  .lookbook .frame .meta{
    padding:16px 18px;
    display:flex; justify-content:space-between; align-items:center;
    gap:12px;
  }
  .lookbook .frame .meta .caption{ color:var(--ink) }
  .lookbook .frame .meta .num{
    font-family:'Inter',sans-serif; font-size:10px; font-weight:600;
    letter-spacing:.22em; color:var(--secondary);
  }

  /* ---- unified gallery (featured + thumbnail strip) ---- */
  .ugal{ max-width:1040px; margin:0 auto }
  .ugal-stage{
    position:relative; aspect-ratio:16/10; overflow:hidden;
    border-radius:var(--r-lg); box-shadow:var(--shadow-card); background:#2E1A47;
  }
  .ugal-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:blur(26px) brightness(.85) saturate(1.1); transform:scale(1.15);
  }
  .ugal-featured{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1;
    transition:opacity .4s ease;
  }
  .ugal-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:48px; height:48px; border-radius:99px;
    background:rgba(255,255,255,.85); color:var(--ink); font-size:30px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(46,26,71,.25); transition:background .2s;
  }
  .ugal-nav:hover{ background:#fff }
  .ugal-nav.prev{ left:14px } .ugal-nav.next{ right:14px }
  .ugal-toggle{
    position:absolute; bottom:14px; right:14px; z-index:2;
    width:42px; height:42px; border-radius:99px;
    background:rgba(255,255,255,.85); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(46,26,71,.25); transition:background .2s;
  }
  .ugal-toggle:hover{ background:#fff }
  .ugal-toggle svg{ width:18px; height:18px }
  .ugal-toggle .ic-play{ display:none }
  .ugal.is-paused .ugal-toggle .ic-pause{ display:none }
  .ugal.is-paused .ugal-toggle .ic-play{ display:block }

  .ugal-thumbs{
    display:flex; gap:10px; margin-top:14px; padding:4px 2px 10px;
    overflow-x:auto; scroll-behavior:smooth; scrollbar-width:thin;
  }
  .ugal-thumb{
    flex:0 0 auto; width:104px; height:72px; border-radius:var(--r-sm);
    overflow:hidden; padding:0; cursor:pointer; opacity:.55;
    border:2px solid transparent; transition:opacity .2s, border-color .2s;
  }
  .ugal-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
  .ugal-thumb:hover{ opacity:.85 }
  .ugal-thumb.is-active{ opacity:1; border-color:var(--primary) }
  @media (max-width:600px){
    .ugal-stage{ aspect-ratio:4/3 }
    .ugal-thumb{ width:84px; height:60px }
    .ugal-nav{ width:40px; height:40px; font-size:26px }
  }

  /* ---- poster panel ---- */
  .poster{
    background:var(--surface-blush); padding:120px 0;
    text-align:center; position:relative; overflow:hidden;
  }
  .poster .ornament{ width:140px; margin:0 auto 24px; color:var(--rule-gold) }
  .poster h2{
    font-family:'Playfair Display',serif; font-weight:500;
    font-size:88px; line-height:.98; letter-spacing:-.015em;
    color:var(--ink); margin:0 auto 32px; max-width:18ch;
  }
  .poster h2 em{ font-style:italic; font-weight:400 }
  .poster p{
    font-size:18px; color:var(--ink); max-width:54ch; margin:0 auto 40px;
    line-height:1.6;
  }
  .poster .actions{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center }
  @media (max-width:720px){
    .poster{ padding:72px 0 }
    .poster h2{ font-size:48px }
  }

  /* ---- disclosure / waiver ---- */
  .disclosure-card{
    background:var(--surface); border-radius:var(--r-lg);
    border:1px solid var(--rule-gold);
    padding:64px;
    box-shadow:var(--shadow-card);
    max-width:1080px; margin:0 auto;
    position:relative;
  }
  @media (max-width:720px){ .disclosure-card{ padding:32px 24px } }
  .disclosure-card .header{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:16px; padding-bottom:32px; border-bottom:1px solid var(--rule-soft);
    margin-bottom:40px; flex-wrap:wrap;
  }
  .disclosure-card .header .title{
    font-family:'Playfair Display',serif; font-weight:500; font-size:36px;
    line-height:1.05; color:var(--ink); margin:0;
  }
  .disclosure-card .header .title em{ font-style:italic; font-weight:400; color:var(--ink-soft) }
  .disclosure-card .header .sub{
    font-family:'Playfair Display',serif; font-style:italic; font-size:14px;
    color:var(--ink-soft); margin-top:6px;
  }
  .lang-toggle{
    display:flex; gap:0; padding:4px; background:var(--primary-soft);
    border-radius:var(--r-pill); border:1px solid var(--rule-gold);
  }
  .lang-toggle button{
    padding:8px 18px; border-radius:var(--r-pill);
    font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
    color:var(--ink); transition:all .2s;
  }
  .lang-toggle button.active{ background:var(--primary); color:var(--ink) }

  /* progress nodes */
  .progress-row{
    display:grid; grid-template-columns:repeat(6,1fr); gap:0;
    margin-bottom:48px; position:relative;
    padding:0 24px;
  }
  .progress-row::before{
    content:''; position:absolute; left:60px; right:60px; top:24px; height:1px;
    background:var(--rule-gold); z-index:0;
  }
  .step-node{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    position:relative; z-index:1;
  }
  .step-node .circle{
    width:48px; height:48px; border-radius:99px;
    border:1px solid var(--rule-gold); background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-style:italic; font-size:18px;
    color:var(--ink-soft);
    transition:all .25s;
  }
  .step-node.active .circle{
    background:var(--primary); color:var(--ink);
    box-shadow:0 0 0 6px rgba(249,197,213,.35);
  }
  .step-node.done .circle{
    background:var(--secondary); color:var(--surface); border-color:var(--secondary);
  }
  .step-node .lbl{
    font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-soft); white-space:nowrap;
  }
  .step-node.active .lbl{ color:var(--ink) }
  @media (max-width:760px){
    .progress-row{ padding:0; gap:6px }
    .progress-row::before{ display:none }
    .step-node .circle{ width:36px; height:36px; font-size:14px }
    .step-node .lbl{ font-size:8px; letter-spacing:.10em }
  }
  /* very small screens: numbered circles only (labels would overflow 6 cols) */
  @media (max-width:560px){
    .progress-row{ gap:4px }
    .step-node .circle{ width:32px; height:32px; font-size:13px }
    .step-node .lbl{ display:none }
  }

  /* steps */
  .step-pane{ display:none; animation:fade-up .35s ease both }
  .step-pane.active{ display:block }
  @keyframes fade-up{
    from{ opacity:0; transform:translateY(6px) }
    to{ opacity:1; transform:translateY(0) }
  }
  .step-pane h4{
    font-family:'Playfair Display',serif; font-weight:500; font-size:28px;
    margin:0 0 8px; color:var(--ink);
  }
  .step-pane h4 em{ font-style:italic; font-weight:400 }
  .step-pane .step-sub{
    color:var(--ink-soft); font-size:14px; margin-bottom:32px; line-height:1.6;
  }

  /* form fields — underlined only */
  .field{ margin-bottom:24px }
  .field label{
    display:block; font-size:10px; font-weight:600; letter-spacing:.24em;
    text-transform:uppercase; color:var(--secondary); margin-bottom:8px;
  }
  .field input, .field textarea, .field select{
    width:100%; background:transparent; color:var(--ink);
    font-family:'Inter',sans-serif; font-size:15px; line-height:1.55;
    border:0; border-bottom:1px solid var(--rule-soft);
    padding:12px 0; outline:none; transition:border-color .2s;
    accent-color:var(--primary);   /* pink native calendar / number spinners */
  }
  .field input:focus, .field textarea:focus, .field select:focus{ border-bottom-color:var(--secondary) }
  .field textarea{ min-height:96px; resize:vertical }
  /* match select + date picker to the underlined field style */
  .field select{
    appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A4FBF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 2px center; background-size:14px;
  }
  .field input[type="date"]{ cursor:pointer }
  .field input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer; opacity:.7;
    filter:invert(34%) sepia(46%) saturate(1500%) hue-rotate(245deg) brightness(92%);
    transition:opacity .2s;
  }
  .field input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1 }

  /* ---- custom dropdown (branded open state; JS enhances .field select) ---- */
  .cselect{ position:relative }
  .cselect select{ display:none }                 /* native hidden; keeps value for submit */
  .cselect-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:transparent; color:var(--ink); font:15px/1.55 'Inter',sans-serif; text-align:left;
    border:0; border-bottom:1px solid var(--rule-soft); padding:12px 0; cursor:pointer;
    transition:border-color .2s;
  }
  .cselect.open .cselect-btn, .cselect-btn:focus-visible{ border-bottom-color:var(--secondary) }
  .cselect-btn .cselect-val{ color:var(--primary-deep); font-weight:600 }   /* same pink as options */
  .cselect-btn .cselect-chev{
    width:14px; height:14px; flex:0 0 auto; color:var(--secondary);
    transition:transform .2s ease;
  }
  .cselect.open .cselect-chev{ transform:rotate(180deg) }
  .cselect-list{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:25;
    background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-md);
    box-shadow:var(--shadow-card-lift); padding:6px; max-height:260px; overflow:auto;
    opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s;
  }
  .cselect.open .cselect-list{ opacity:1; transform:none; pointer-events:auto }
  .cselect-opt{
    padding:10px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--ink); cursor:pointer;
    transition:background .15s, color .15s;
  }
  .cselect-opt:hover, .cselect-opt.is-focus{ background:var(--primary-soft); color:var(--primary-deep) }
  .cselect-opt[aria-selected="true"]{ font-weight:600; color:var(--primary-deep) }

  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
  @media (max-width:600px){ .field-row{ grid-template-columns:1fr } }

  /* agreement scrollbox */
  .agreement{
    background:var(--primary-soft); border:1px solid var(--rule-gold);
    border-radius:var(--r-md); padding:28px; max-height:280px; overflow:auto;
    margin-bottom:24px;
  }
  .agreement h5{
    font-family:'Playfair Display',serif; font-weight:500; font-size:18px;
    margin:0 0 12px;
  }
  .agreement p{
    font-size:13px; line-height:1.65; color:var(--ink); margin:0 0 12px;
  }

  /* checkbox */
  .check{
    display:flex; gap:14px; align-items:flex-start;
    padding:18px 0; border-top:1px solid var(--rule-soft);
    border-bottom:1px solid var(--rule-soft); margin-bottom:8px;
  }
  .check input{
    width:18px; height:18px; accent-color:var(--primary); margin-top:2px;
  }
  .check label{
    font-size:14px; line-height:1.5; color:var(--ink); cursor:pointer;
  }

  /* child block */
  .child-block{
    border:1px solid var(--rule-soft); border-radius:var(--r-md);
    padding:24px; margin-bottom:18px; background:var(--paper);
    position:relative;
  }
  .child-block .num{
    position:absolute; top:-12px; left:24px;
    background:var(--primary); color:var(--ink);
    width:32px; height:32px; border-radius:99px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-style:italic; font-size:14px;
    border:1px solid var(--rule-gold);
  }
  .child-block .remove{
    position:absolute; top:24px; right:24px;
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:600;
  }
  .child-block .remove:hover{ color:var(--ink) }
  .add-child{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border:1px dashed var(--rule-gold);
    border-radius:var(--r-pill); color:var(--ink);
    font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    background:transparent; transition:background .2s;
  }
  .add-child:hover{ background:var(--primary-soft) }

  /* inline validation */
  .field-error{
    color:#c0392b; font:12px/1.4 Inter,sans-serif;
    margin:5px 0 0; min-height:0; display:block;
    transition:opacity .15s;
  }
  .field-error:empty{ display:none; }
  .field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid{
    border-color:#c0392b !important; box-shadow:0 0 0 2px rgba(192,57,43,.15);
  }
  .check.is-invalid label{ color:#c0392b; }
  .form-banner{
    border-radius:var(--r-sm); padding:12px 16px;
    font:13px/1.5 Inter,sans-serif; margin-top:14px; display:none;
  }
  .form-banner.is-error{
    display:block; background:#fff3f2;
    border:1px solid #f5c6c2; color:#922b21;
  }
  .form-banner.is-warning{
    display:block; background:#fffbf0;
    border:1px solid #f9e4b7; color:#7d5a0a;
  }

  /* signature pad */
  .sig-pad{
    background:var(--paper); border:1px solid var(--rule-gold);
    border-radius:var(--r-md); position:relative; padding:0;
    height:180px; overflow:hidden;
  }
  .sig-pad::before{
    content:''; position:absolute; inset:14px;
    border:1px dashed var(--rule-soft); border-radius:calc(var(--r-md) - 6px);
    pointer-events:none;
  }
  .sig-pad canvas{ width:100%; height:100%; display:block; cursor:crosshair }
  .sig-pad .placeholder{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:'Playfair Display',serif; font-style:italic; font-size:18px;
    color:var(--ink-soft); pointer-events:none; transition:opacity .2s;
  }
  .sig-actions{
    display:flex; gap:14px; margin-top:14px;
  }
  .sig-clear{
    background:transparent; color:var(--ink-soft);
    font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    padding:10px 20px; border-radius:var(--r-pill);
    border:1px solid var(--rule-soft);
  }
  .sig-clear:hover{ color:var(--ink); border-color:var(--rule-gold) }

  /* step nav */
  .step-nav{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:32px; margin-top:32px;
    border-top:1px solid var(--rule-soft);
  }
  .step-nav .prev{
    color:var(--ink-soft); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; font-weight:600;
  }
  .step-nav .prev:hover{ color:var(--ink) }
  .step-nav .prev:disabled{ opacity:.3; cursor:not-allowed }
  @media (max-width:600px){
    .step-nav{ flex-direction:column; gap:16px; align-items:stretch }
    .step-nav .btn{ width:100% }
  }

  /* success state */
  .success-pane{
    text-align:center; padding:48px 0;
  }
  .success-pane .badge{
    width:88px; height:88px; border-radius:99px; background:var(--primary);
    border:1px solid var(--rule-gold);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ink); margin-bottom:24px;
  }
  .success-pane h4{ font-size:36px }

  /* ---- party rentals ---- */
  .rentals-sub{ margin:10px 0 0; color:var(--ink-soft); font-size:16px }
  .rentals-intro{ max-width:680px; margin:0 auto 44px; text-align:center; color:var(--ink-soft); font-size:16px; line-height:1.65 }
  .rentals-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px }
  .rental-card{
    flex:1 1 300px; max-width:362px; display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-lg);
    box-shadow:var(--shadow-card); overflow:hidden; transition:transform .2s, box-shadow .2s;
  }
  .rental-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-lift) }
  .rental-media{ aspect-ratio:1/1; overflow:hidden; background:var(--surface-mid); cursor:zoom-in }
  .rental-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s }
  .rental-media:hover img{ transform:scale(1.05) }
  .rental-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 }
  .rental-body h3{ font-family:'Playfair Display',serif; font-weight:500; font-size:22px; color:var(--ink); margin:0 0 8px }
  .rental-body p{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 18px; flex:1 }
  .rental-foot{ margin-top:auto; border-top:1px solid var(--rule-soft); padding-top:14px;
    display:flex; flex-direction:column; align-items:flex-start; gap:11px }
  .rental-price{
    font-family:'Playfair Display',serif; font-weight:700; font-size:17px;
    color:var(--secondary); background:#EFE8F8; border:1px solid #DDD0EE;
    border-radius:var(--r-pill); padding:6px 16px;
  }
  .rental-cta{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--secondary) }
  .rental-cta:hover{ color:var(--primary-deep) }
  .rental-cta span{ transition:transform .2s; display:inline-block }
  .rental-cta:hover span{ transform:translateX(4px) }

  .rentals-features{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    max-width:860px; margin:56px auto 0; text-align:center;
  }
  .rfeat{ display:flex; flex-direction:column; align-items:center; gap:2px }
  .rfeat-dot{ width:10px; height:10px; border-radius:99px; background:var(--brand-cyan); margin-bottom:8px;
    box-shadow:0 0 0 5px var(--primary-soft) }
  .rfeat strong{ font-family:'Playfair Display',serif; font-weight:500; font-size:17px; color:var(--ink) }
  .rfeat-sub{ font-size:13px; color:var(--ink-soft) }

  .rentals-note{ max-width:620px; margin:50px auto 0; text-align:center }
  .rentals-note p{ color:var(--ink-soft); font-size:16px; line-height:1.6; margin:0 0 22px }

  @media (max-width:760px){
    .rentals-features{ grid-template-columns:1fr; gap:22px; margin-top:44px }
  }

  /* ---- rental image modal ---- */
  .rmodal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px }
  .rmodal.is-open{ display:flex }
  .rmodal-backdrop{ position:absolute; inset:0; background:rgba(46,26,71,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
  .rmodal-dialog{
    position:relative; z-index:1; background:var(--surface); border-radius:var(--r-lg);
    box-shadow:var(--shadow-card-lift); max-width:560px; width:100%; max-height:90vh; overflow:auto;
    animation:rmodalRise .25s ease;
  }
  @keyframes rmodalRise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
  .rmodal-img{ width:100%; max-height:58vh; object-fit:contain; display:block; background:var(--surface-mid) }
  .rmodal-body{ padding:24px 30px 30px; text-align:center }
  .rmodal-body h3{ font-family:'Playfair Display',serif; font-weight:500; font-size:27px; color:var(--ink); margin:0 0 6px }
  .rmodal-price{ font-family:'Playfair Display',serif; font-weight:700; font-size:18px; color:var(--secondary); display:block; margin-bottom:12px }
  .rmodal-body p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0 0 22px }
  .rmodal-close{
    position:absolute; top:12px; right:14px; z-index:2; width:40px; height:40px; border-radius:99px;
    background:rgba(255,255,255,.92); border:0; cursor:pointer; font-size:24px; line-height:1; color:var(--ink);
    box-shadow:var(--shadow-card); transition:background .2s;
  }
  .rmodal-close:hover{ background:#fff }
  @media (prefers-reduced-motion:reduce){ .rmodal-dialog{ animation:none } }

  /* ---- FAQ accordion ---- */
  .faq-head{ text-align:center }
  .faq-head h3{
    font-family:'Playfair Display',serif; font-weight:500;
    font-size:clamp(26px,3.4vw,38px); color:var(--ink); margin:0 0 30px;
  }
  .faq-head h3 em{ font-style:italic; color:var(--primary-deep) }
  .faq{ max-width:860px; margin:0 auto 64px; border-top:1px solid var(--rule-soft) }
  .faq-item{ border-bottom:1px solid var(--rule-soft) }
  .faq-item > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px;
    justify-content:space-between; padding:20px 6px;
    font-size:17px; font-weight:600; color:var(--ink); transition:color .2s;
  }
  .faq-item > summary::-webkit-details-marker{ display:none }
  .faq-item > summary:hover{ color:var(--primary-deep) }
  /* + / − icon */
  .faq-ico{
    position:relative; width:28px; height:28px; flex:0 0 auto; border-radius:99px;
    background:var(--primary-soft); transition:background .2s;
  }
  .faq-ico::before, .faq-ico::after{
    content:''; position:absolute; top:50%; left:50%; background:var(--primary-deep);
    transform:translate(-50%,-50%); transition:opacity .2s, background .2s; border-radius:2px;
  }
  .faq-ico::before{ width:12px; height:2px }            /* horizontal bar */
  .faq-ico::after{ width:2px; height:12px }             /* vertical bar (hidden when open → minus) */
  .faq-item[open] .faq-ico{ background:var(--primary) }
  .faq-item[open] .faq-ico::before{ background:#fff }
  .faq-item[open] .faq-ico::after{ opacity:0 }
  .faq-a{ padding:0 6px 22px; max-width:66ch }
  .faq-a p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-soft) }
  @media (max-width:600px){
    .faq-item > summary{ font-size:16px; gap:14px; padding:18px 4px }
  }

  /* ---- contact / postcard ---- */
  .postcard{
    background:var(--surface); border-radius:var(--r-lg);
    border:1px solid var(--rule-gold);
    box-shadow:var(--shadow-card);
    display:grid; grid-template-columns: 1fr 1px 1.1fr; gap:0;
    overflow:hidden; max-width:1080px; margin:0 auto;
  }
  @media (max-width:920px){
    .postcard{ grid-template-columns:1fr }
    .postcard .vrule{ display:none }
  }
  .postcard .left, .postcard .right{ padding:56px 48px }
  @media (max-width:600px){ .postcard .left, .postcard .right{ padding:36px 28px } }
  .postcard .vrule{ background:var(--rule-soft) }
  .postcard h3{
    font-family:'Playfair Display',serif; font-weight:500; font-size:36px;
    line-height:1.1; margin:0 0 8px;
  }
  .postcard h3 em{ font-style:italic; font-weight:400 }
  .postcard .left .sub{ color:var(--ink-soft); font-style:italic; margin-bottom:32px; font-family:'Playfair Display',serif }
  .postcard .info{ list-style:none; margin:0; padding:0 }
  .postcard .info li{
    padding:18px 0; border-top:1px solid var(--rule-soft);
    display:flex; justify-content:space-between; gap:16px; align-items:flex-start;
  }
  .postcard .info li:last-child{ border-bottom:1px solid var(--rule-soft) }
  .postcard .info .lbl{
    font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
    color:var(--secondary); flex-shrink:0;
  }
  .postcard .info .val{
    font-family:'Playfair Display',serif; font-size:16px; color:var(--ink);
    text-align:right;
  }
  .postcard .info .val small{
    display:block; font-family:'Inter',sans-serif; font-size:12px;
    color:var(--ink-soft); font-style:normal; margin-top:2px;
  }
  .stamp{
    position:absolute; top:24px; right:24px;
    width:120px; height:140px;
    background:var(--primary-soft); border:2px dashed var(--rule-gold);
    border-radius:var(--r-sm);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transform:rotate(6deg);
    padding:8px;
  }
  .stamp .stamp-logo{
    width:88px; height:auto; display:block; margin-bottom:6px;
  }
  .stamp .stamp-text{
    font-family:'Playfair Display',serif; font-style:italic; font-size:11px;
    text-align:center; color:var(--ink); line-height:1.3;
  }
  @media (max-width:920px){ .stamp{ display:none } }

  .postcard form{ display:block }
  .postcard form .field-row{ gap:18px }
  .postcard form .submit-row{ margin-top:24px }

  /* ---- floating mobile cta ---- */
  .floating-cta{
    display:none;
    position:fixed; bottom:20px; left:20px; right:84px;
    z-index:40;
  }
  .floating-cta .btn{ width:100%; box-shadow:0 12px 32px rgba(46,26,71,.22) }
  @media (max-width:720px){
    .floating-cta{ display:block }
    /* leave room so the fixed CTA never hides the footer (pages that have it) */
    body:has(.floating-cta){ padding-bottom:88px }
  }

  /* ---- floating whatsapp FAB ---- */
  .wa-float{
    position:fixed; bottom:24px; right:24px; z-index:41;
    width:60px; height:60px; border-radius:99px;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 36px rgba(37,211,102,.4), 0 6px 12px rgba(0,0,0,.12);
    transition:transform .2s, box-shadow .2s;
    border:2px solid rgba(255,255,255,.4);
  }
  .wa-float:hover{
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 18px 44px rgba(37,211,102,.5), 0 8px 16px rgba(0,0,0,.14);
  }
  .wa-float svg{ width:30px; height:30px }
  .wa-float .pulse{
    position:absolute; inset:-2px; border-radius:99px;
    border:2px solid #25D366; opacity:.6;
    animation: wa-pulse 2.4s ease-out infinite;
    pointer-events:none;
  }
  @keyframes wa-pulse{
    0%{ transform:scale(1); opacity:.6 }
    100%{ transform:scale(1.6); opacity:0 }
  }
  @media (max-width:720px){
    .wa-float{ bottom:84px; right:20px; width:54px; height:54px }
    .wa-float svg{ width:26px; height:26px }
  }

  /* ---- footer ---- */
  footer.site{
    background:var(--secondary-deep); color:var(--primary-soft);
    padding:80px 0 40px;
  }
  footer.site .top{
    display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:48px;
    padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  @media (max-width:760px){ footer.site .top{ grid-template-columns:1fr } }
  footer.site .brand-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
  footer.site .brand-mark-light{
    width:42px; height:42px; border-radius:var(--r-pill);
    background:var(--primary); color:var(--ink);
    font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
    font-size:22px; display:flex; align-items:center; justify-content:center;
  }
  footer.site .brand-text{
    font-family:'Playfair Display',serif; font-weight:500; font-size:24px;
    color:var(--surface); line-height:1;
  }
  footer.site .brand-text small{
    display:block; font-family:'Inter',sans-serif; font-size:9px; letter-spacing:.28em;
    color:var(--brand-cyan); margin-top:6px; font-weight:600;
  }
  footer.site p{ color:rgba(253,236,239,.65); font-size:13px; line-height:1.7; max-width:42ch }
  footer.site h6{
    font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
    color:var(--brand-cyan); margin:0 0 18px;
  }
  footer.site ul{ list-style:none; padding:0; margin:0 }
  footer.site ul li{ padding:6px 0; font-size:13px }
  footer.site ul a:hover{ color:var(--primary) }
  footer.site .socials{
    display:flex; gap:12px; margin-top:24px;
  }
  footer.site .socials a{
    width:42px; height:42px; border-radius:99px;
    border:1px solid rgba(51,192,225,.5);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--primary-soft);
    transition:all .2s;
  }
  footer.site .socials a:hover{
    background:var(--primary); color:var(--ink);
    border-color:var(--primary);
    transform:translateY(-2px);
  }
  footer.site .socials svg{ width:18px; height:18px }
  footer.site .bottom{
    padding-top:32px; display:flex; justify-content:space-between; gap:16px;
    flex-wrap:wrap; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(253,236,239,.55);
  }
  footer.site .bottom .dot{ color:var(--brand-cyan); margin:0 8px }

  /* multi-page: active nav item */
  nav.site ul a.active{ color:var(--ink) }
  nav.site ul a.active::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:1px; background:var(--rule-gold);
  }
