/*
  VAMOSGAMOS wedding website
  Extracted from the approved self-contained site.
  Block order is preserved exactly so the original cascade remains intact.
*/

/* ===== app-styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&family=Press+Start+2P&display=swap');

:root{
  --navy:#15375b;
  --navy-deep:#0d2742;
  --blue:#6d9dca;
  --pink:#f08098;
  --cream:#fbf6ec;
  --cream-soft:#fffaf2;
  --paper:#fffdf8;
  --line:rgba(21,55,91,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--navy);
  font-family:'Inter',Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.section-v2{position:relative;overflow:hidden}
.section-inner{position:relative;z-index:2;width:min(1180px,90vw);margin:0 auto}
.small-pixel{font:400 7px/1.45 'Press Start 2P',monospace;letter-spacing:.05em;text-transform:uppercase}
.section-eyebrow{margin:0 0 12px;font:600 11px/1.2 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
.section-heading{margin:0;font:500 clamp(52px,6vw,92px)/.92 'Cormorant Garamond',Georgia,serif;letter-spacing:-.035em}
.section-copy{font:500 italic clamp(19px,1.7vw,25px)/1.55 'Cormorant Garamond',Georgia,serif}

/* HEADER */
.site-header.hero-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:92px;padding:0 4vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(251,246,236,.97);
  border-bottom:1px solid rgba(21,55,91,.08);
  backdrop-filter:blur(10px);
}
.brand-monogram{display:flex;align-items:center;gap:9px;min-width:150px}
.monogram-letters{font:500 34px/.8 'Cormorant Garamond',Georgia,serif;letter-spacing:-3px}
.monogram-letters small{font-size:16px;vertical-align:middle;letter-spacing:0}
.brand-heart{width:23px;height:23px}
.hero-header nav{display:flex;gap:52px;font-size:13px;font-weight:500;letter-spacing:.06em}
.hero-header nav a{padding:12px 0}
.quest-easter-egg{display:flex;align-items:center;gap:10px;color:var(--pink);font:400 9px/1 'Press Start 2P',monospace}
.quest-easter-egg img{width:16px;height:16px}

/* HERO */
.hero-v2{
  height:100dvh;min-height:760px;padding-top:92px;
  background:var(--cream);position:relative;overflow:hidden;
}
.hero-stage{
  height:calc(100dvh - 92px);min-height:668px;
  position:relative;display:grid;grid-template-columns:minmax(390px,43%) 1fr;align-items:center;
}
.hero-image{position:absolute;inset:0 0 0 36%;overflow:hidden;background:var(--cream)}
.hero-image:before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(251,246,236,.99) 5%,rgba(251,246,236,.88) 12%,rgba(251,246,236,.54) 21%,rgba(251,246,236,.2) 29%,rgba(251,246,236,0) 40%);
}
.hero-main-photo{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto}
.hero-v2 .bougainvillea{
  position:absolute;right:-5vw;top:-5vh;width:min(31vw,470px);
  z-index:4;filter:drop-shadow(0 6px 10px rgba(72,38,48,.12));opacity:.96
}
.hero-copy-v2{position:relative;z-index:7;padding:4vh 0 70px 5.4vw;width:min(610px,94%);transform:translateY(18px)}
.hero-kicker-v2{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--pink);width:min(420px,86%);text-align:center;margin:0 0 18px}
.hero-floral-divider{width:120px;margin:0 0 24px 150px;opacity:.88}
.hero-v2 h1{margin:0;font:500 clamp(72px,8vw,128px)/.78 'Cormorant Garamond',Georgia,serif;letter-spacing:-.045em}
.hero-v2 h1 .name-line{display:block}
.hero-v2 h1 .amp{color:var(--pink);font-size:.78em}
.name-rule{display:flex;align-items:center;gap:18px;width:min(420px,86%);margin:29px 0 25px}
.name-rule:before,.name-rule:after{content:"";height:1px;background:rgba(240,128,152,.72);flex:1}
.name-rule img{width:19px;height:19px}
.hero-date-v2{margin:0;font:600 clamp(20px,1.8vw,29px)/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
.hero-date-v2 span{color:var(--pink);padding:0 .35em}
.hero-intro-v2{margin:23px 0 0;max-width:455px;font:500 italic clamp(19px,1.55vw,26px)/1.4 'Cormorant Garamond',Georgia,serif}
.hero-actions-v2{display:flex;align-items:center;gap:32px;margin-top:30px;flex-wrap:wrap}
.hero-button-v2{background:var(--navy);color:white;box-shadow:4px 4px 0 var(--pink);padding:18px 28px;font-size:12px;font-weight:600;letter-spacing:.12em}
.hero-story-link-v2{font-size:12px;font-weight:600;letter-spacing:.1em;border-bottom:1px solid var(--pink);padding:8px 0}
.hero-bottom{position:absolute;left:0;right:0;bottom:0;z-index:6;height:52px}
.hero-bottom .wave{position:absolute;bottom:0;width:100%;height:46px;object-fit:fill}
.scroll-cue{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:3px;font:400 7px/1.3 'Press Start 2P',monospace}
.scroll-cue .pixel-couple{width:50px}.scroll-cue .down-arrow{width:11px;height:14px}
.hero-petals{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.hero-petal{position:absolute;top:4%;right:-4%;width:22px;height:28px;background:linear-gradient(145deg,#ff4f9a,#d70b62);border-radius:72% 10% 68% 25%;opacity:.72;animation:petalBreeze 11s ease-in-out infinite;will-change:transform}
.petal-1{top:7%;animation-delay:-1.5s;animation-duration:10.5s;scale:.82}.petal-2{top:12%;animation-delay:-4.2s;animation-duration:12.5s;scale:1.05}.petal-3{top:18%;animation-delay:-7.1s;animation-duration:11.3s;scale:.72}.petal-4{top:24%;animation-delay:-2.8s;animation-duration:13.2s;scale:1.15}.petal-5{top:30%;animation-delay:-8.4s;animation-duration:12s;scale:.9}.petal-6{top:38%;animation-delay:-5.6s;animation-duration:10.8s;scale:1}.petal-7{top:46%;animation-delay:-9.6s;animation-duration:13.6s;scale:.76}
@keyframes petalBreeze{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%{opacity:.78}
  28%{transform:translate3d(-22vw,5vh,0) rotate(-95deg)}
  52%{transform:translate3d(-48vw,12vh,0) rotate(-190deg)}
  76%{transform:translate3d(-73vw,20vh,0) rotate(-290deg);opacity:.7}
  100%{transform:translate3d(-108vw,30vh,0) rotate(-390deg);opacity:0}
}

/* STORY */
.story-v2{padding:138px 0 140px;background:linear-gradient(180deg,var(--cream-soft),var(--cream))}
.story-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:76px;align-items:end;margin-bottom:72px}
.story-intro .section-copy{max-width:490px;margin-left:auto}
.story-route-guide{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-bottom:46px}
.route-couple-start{width:52px}
.route-track{position:relative;height:28px}
.track-wave{position:absolute;left:0;right:0;top:13px;height:2px;background:linear-gradient(90deg,var(--pink),var(--blue) 50%,var(--pink))}
.route-point{position:absolute;top:5px;width:18px;height:18px;border:4px solid var(--pink);border-radius:50%;background:var(--cream)}
.route-point-1{left:10%}.route-point-2{left:38%;border-color:var(--blue)}.route-point-3{left:66%;border-color:var(--blue)}.route-point-4{right:10%;border-color:var(--pink)}
.route-end{display:flex;align-items:center;gap:10px}.route-end img{width:24px}.route-end .small-pixel{color:var(--pink)}
.story-route{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.story-stop{padding:30px 22px 24px;background:rgba(255,255,255,.58);border:1px solid rgba(21,55,91,.08);box-shadow:0 12px 26px rgba(21,55,91,.04)}
.story-level{color:var(--pink)}
.story-stop .route-dot{width:15px;height:15px;margin:18px 0;border:3px solid var(--pink);border-radius:50%}
.story-stop h3{margin:0 0 10px;font:600 28px/1 'Cormorant Garamond',Georgia,serif;text-transform:uppercase}
.story-stop p{margin:0;font-size:15px;line-height:1.65;color:rgba(21,55,91,.74)}

/* WEDDING */
.wedding-v3{position:relative;
  padding:130px 0 120px;
  background:
    radial-gradient(ellipse at 15% 100%,rgba(240,128,152,.20),transparent 34%),
    radial-gradient(ellipse at 72% 100%,rgba(109,157,202,.15),transparent 40%),
    var(--navy-deep);
  color:white;
}
.wedding-v3-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:72px;align-items:start}
.wedding-v3-copy{padding-top:34px}
.wedding-v3-date-label{color:#ffd8e1;margin-bottom:18px}
.wedding-v3-title{margin:0;font:500 clamp(64px,7vw,104px)/.88 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em}
.wedding-v3-lead{margin:28px 0 0;font:500 italic 24px/1.5 'Cormorant Garamond',Georgia,serif;color:rgba(255,255,255,.88)}
.wedding-v3-quest{display:flex;gap:10px;align-items:center;margin-top:30px;color:#ffd8e1}.wedding-v3-quest img{width:17px;filter:brightness(0) invert(1)}

.wedding-paper-card{position:relative;background:var(--paper);color:var(--navy);border:1px solid rgba(21,55,91,.1);box-shadow:0 20px 50px rgba(0,0,0,.12)}







.wedding-v3-checkpoints{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.wedding-checkpoint-card{padding:30px 34px 26px;min-height:0}
.checkpoint-label{color:var(--pink);margin:0 0 16px;padding-left:18px}
.checkpoint-date{margin:0 0 7px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.checkpoint-time{margin:0 0 12px;font:500 58px/.9 'Cormorant Garamond',Georgia,serif;color:var(--pink)}
.checkpoint-place{display:inline-block;font:600 27px/1.08 'Cormorant Garamond',Georgia,serif;border-bottom:1px solid rgba(21,55,91,.25)}
.checkpoint-address{margin:10px 0 0;font-size:14px;line-height:1.5;color:rgba(21,55,91,.72)}
.capacity-note{margin-top:18px;padding:12px 16px;background:#fff0f3;font-size:13px;line-height:1.55}
.party-heart-rule{display:flex;align-items:center;gap:10px;margin-top:24px}.party-heart-rule span{height:1px;background:rgba(21,55,91,.14);flex:1}.party-heart-rule img{width:14px}
.party-note{text-align:center;font:500 italic 18px/1.4 'Cormorant Garamond',Georgia,serif}
.wedding-paper-corner{
  position:absolute;
  width:52px;
  opacity:.45;
  pointer-events:none;
  z-index:6;
}.corner-a{left:10px;top:10px;right:auto;bottom:auto;transform:none}.corner-b{right:10px;bottom:10px;left:auto;top:auto;transform:rotate(180deg)}
.wedding-v3-route{display:flex;align-items:center;gap:12px;margin:28px 0 0}.wedding-v3-couple{width:62px}.wedding-v3-route-line{height:48px;flex:1;object-fit:fill;opacity:.78}
.wedding-v3-closing{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:18px}.wedding-v3-closing p{margin:0;font:500 italic 18px/1.4 'Cormorant Garamond',Georgia,serif}.wedding-v3-closing span{color:#ffd8e1}


/* DETAILS */
.details-v2{padding:138px 0 130px;background:#fffaf3}
.details-head{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:58px}
.details-head .section-copy{max-width:520px;margin-left:auto}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.detail-card{min-height:335px;padding:34px;background:white;border:1px solid rgba(21,55,91,.1);box-shadow:0 14px 34px rgba(21,55,91,.05)}
.card-index{color:var(--pink)}.detail-topline{height:1px;margin:18px 0 24px;background:linear-gradient(90deg,var(--pink),transparent)}
.sailboat-mark{width:64px;margin:12px 0 20px}.detail-flower{width:116px;margin:4px 0 18px}.detail-heart{width:30px;margin:20px 0 24px}
.detail-card h3{margin:0 0 12px;font:600 28px/1 'Cormorant Garamond',Georgia,serif;text-transform:uppercase}
.detail-card p{margin:0;font-size:15px;line-height:1.7;color:rgba(21,55,91,.74)}

/* GAME */
.game-v2{padding:138px 0;background:linear-gradient(180deg,#eef6fb,#fff5f7)}
.game-v2 .section-copy{max-width:620px;margin-top:22px}
.game-reveal-card{max-width:760px;margin:58px auto 0;padding:55px 40px 0;text-align:center;background:var(--navy);color:white;box-shadow:12px 12px 0 rgba(240,128,152,.22)}
.bonus-pill{display:inline-flex;align-items:center;gap:9px;color:#ffd8e1}.bonus-pill img{width:15px;filter:brightness(0) invert(1)}
.pixel-couple-large{width:110px;margin:30px auto 22px}
.game-reveal-card h3{margin:0;font:400 24px/1.45 'Press Start 2P',monospace}.game-reveal-card h3 span{color:#ffd8e1}
.game-reveal-card p{max-width:480px;margin:22px auto;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.game-reveal-card>a{display:inline-block;margin:8px 0 36px;padding:16px 22px;background:var(--pink);color:var(--navy-deep);font-weight:700}
.game-ground-line{height:18px;margin:0 -40px;background:linear-gradient(90deg,#6d9dca,#f08098,#6d9dca)}

/* FOOTER */
.site-footer-v2{display:flex;justify-content:space-between;gap:20px;padding:18px 5vw;background:var(--navy-deep);color:white;font-size:10px}
.site-footer-v2 b{color:var(--pink)}

/* RESPONSIVE */
@media(max-width:1000px){
  .hero-header nav{gap:26px}
  .hero-image{left:34%}
  .wedding-v3-layout{grid-template-columns:1fr;gap:44px}
  .wedding-v3-copy{max-width:560px}
  
}
@media(max-width:760px){
  .site-header.hero-header{height:70px;padding:0 18px}
  .hero-header nav{display:none}.quest-easter-egg{font-size:6px}.quest-easter-egg img{width:13px}
  .hero-v2{height:auto;min-height:100dvh;padding-top:70px}
  .hero-stage{height:auto;min-height:calc(100dvh - 70px);display:flex;flex-direction:column;padding-bottom:52px}
  .hero-copy-v2{order:1;width:100%;padding:48px 22px 30px;transform:none}
  .hero-image{order:2;position:relative;inset:auto;width:100%;aspect-ratio:4/3}
  .hero-image:before{background:linear-gradient(180deg,var(--cream) 0%,rgba(251,246,236,.4) 10%,transparent 26%)}
  .hero-main-photo{width:100%;height:100%;object-fit:cover}
  .hero-v2 .bougainvillea{top:-2%;right:-11%;width:min(50vw,240px)}
  .hero-floral-divider{margin:0 auto 17px}
  .hero-kicker-v2{width:100%}
  .hero-v2 h1{font-size:clamp(58px,19vw,86px);line-height:.82}
  .story-intro,.details-head{grid-template-columns:1fr;gap:24px}.story-intro .section-copy,.details-head .section-copy{margin-left:0}
  .story-route-guide{grid-template-columns:auto 1fr}.route-end{display:none}
  .story-route{grid-template-columns:1fr 1fr}
  .wedding-v3{padding:100px 0}
  .wedding-v3-checkpoints{grid-template-columns:1fr}
  
  
  .detail-grid{grid-template-columns:1fr}
  .site-footer-v2{flex-direction:column;align-items:center;text-align:center}
}
@media(max-width:480px){
  .quest-easter-egg span{display:none}
  .story-route{grid-template-columns:1fr}
  .wedding-v3-title{font-size:64px}
  .wedding-v3-lead{font-size:21px}
  
  
  
}


/* Wedding bougainvillea wrapping the date card */


.wedding-v3-branch-back,




/* Make the white card visually sit between the two plant layers. */












/* Only the part outside the paper is visible naturally because the card
   is above this image in the stacking order. */





/* Small branch peeking from BEHIND the main white date card.
   Uses the exact same existing bougainvillea image; no new image asset. */







/* One diagonal bougainvillea branch tucked BEHIND the top edge of the white date card.
   Same existing plant image; no new artwork. */




/* The main/front plant remains above and unchanged. */







/* ==========================================================
   WEDDING BOUGAINVILLEA
   Same exact plant image, perfectly aligned in two layers.
   The white card sits between them.
   ========================================================== */
.wedding-v3{
  isolation:isolate;
}





/* BOTH copies occupy the exact same pixels. */


/* Full plant behind the white card. */


/* Same plant in front, except the upper-left reaching branch is removed
   from this front layer. That branch therefore appears to pass BEHIND
   the white card, while the rest of the plant stays in front. */










/* ==========================================================
   WEDDING BOUGAINVILLEA — CLEAN LAYERING
   One continuous plant: the upper-left branch passes behind
   the date card, while the right/lower plant stays in front.
   ========================================================== */




/* Both copies are IDENTICAL and perfectly aligned. */


/* Whole plant behind the paper. */


/* Same plant in front, but exclude the upper-left branch.
   That branch is therefore visible above the card and disappears
   naturally underneath the white paper. */


/* Keep all content cards above the behind-layer. */
.wedding-v3-checkpoints,
.wedding-v3-route,
.wedding-v3-closing{
  position:relative;
  z-index:2;
}








/* Wedding plant: one image only. */




/* The plant itself stays fully intact and in front. */


/* This is NOT another image.
   It is just a paper-coloured CSS layer that covers the short branch segment
   where it passes under the top-right of the white card. The curved edge
   removes the hard diagonal cut. */


/* Keep the card content above the cover. */









/* ==========================================================
   WEDDING BOUGAINVILLEA — LAYERED, NO HARD CUTS
   Same image twice, perfectly aligned:
   - back copy sits behind the white card
   - front copy stays in front except for a SOFT transparent
     window exactly where the left branch passes under the card
   ========================================================== */






/* Entire plant behind the paper. */


/* Same plant in front.
   The feathered elliptical mask removes ONLY the section of the
   left-reaching branch that crosses the top-right of the paper.
   Above the paper the back copy is identical, so there is no seam.
   Under the paper the back copy is naturally hidden by the card. */


/* Remaining wedding content stays above the behind-layer. */
.wedding-v3-checkpoints,
.wedding-v3-route,
.wedding-v3-closing{
  position:relative;
  z-index:2;
}








/* ==========================================================
   WEDDING BOUGAINVILLEA — WINDOW COMPOSITION
   No masks. No generated assets.
   One full plant behind the paper + foreground crop windows
   containing the exact same image at the exact same scale.
   ========================================================== */

.wedding-v3-board{
  position:relative;
  z-index:3;
  overflow:visible;
  isolation:isolate;
}

/* White date card sits above the full background plant. */


/* MASTER GEOMETRY — every plant copy uses these exact pixels. */


/* Full plant behind the paper. This is what creates the branch
   disappearing naturally underneath the card. */


/* Foreground crop windows. The WINDOW crops; the image itself
   is never cropped, resized differently, or moved differently. */




/* Everything above the top edge of the white card remains in front.
   Window top/height exactly match the plant's -118px offset. */



/* Dense upper-right flowers remain in front of the paper.
   Left-reaching branch is outside this narrow window, so it stays behind. */



/* Lower hanging plant also remains in front, with a slightly narrower window. */



/* Other content stays cleanly above the behind-layer. */
.wedding-v3-checkpoints,
.wedding-v3-route,
.wedding-v3-closing{
  position:relative;
  z-index:2;
}








/* ==========================================================
   WEDDING BOUGAINVILLEA — CONTOUR WINDOWS
   One master plant behind the paper.
   Five foreground horizontal windows follow the dense right-hand
   contour. The long upper-left branch is never included in a
   foreground window, so it naturally disappears behind the card.
   No masks and no clip-path.
   ========================================================== */
.wedding-v3-board{
  position:relative;
  z-index:3;
  overflow:visible;
  isolation:isolate;
}



/* Master/back plant. Slightly lower than before so the long branch
   visibly crosses the top edge before going behind the white paper. */


/* Every foreground window crops a runtime clone of the SAME master image. */




/*
   These five bands intentionally begin well to the RIGHT of the long
   left-reaching branch. Their left edges step with the natural contour
   of the dense plant instead of making one obvious vertical crop.
*/

/* source y ≈ 0–250, dense upper-right canopy */



/* source y ≈ 250–480 */



/* source y ≈ 480–700 */



/* source y ≈ 700–930 */



/* lower hanging branch */



.wedding-v3-checkpoints,
.wedding-v3-route,
.wedding-v3-closing{
  position:relative;
  z-index:2;
}

@media(max-width:1000px){
  .wedding-v3-plant-back,
  
  

  
  
  
  
  

  
  
  
  
  
}

@media(max-width:760px){
  .wedding-v3-plant-back,
  
  

  
  
  
  
  

  
  
  
  
  
}

@media(max-width:480px){
  .wedding-v3-plant-back,
  
  

  
  
  
  
  

  
  
  
  
  
}


/* ==========================================================
   WEDDING BOUGAINVILLEA — SIMPLE TWO-LAYER STACK
   1) full plant behind the white card
   2) same plant in front, cropped ONLY by one horizontal line
      starting exactly at the top edge of the white date card
   ========================================================== */

.wedding-v3-board{
  position:relative;
  z-index:3;
  overflow:visible;
  isolation:isolate;
}



/* BACK: full plant, behind the white card. */


/* FRONT WINDOW:
   Its TOP is exactly the top edge of the white card (top:0).
   overflow:hidden means the front plant simply does not exist above that line.
   No masks, no diagonal crops, no contour tracing. */


/* FRONT: exact same image, exact same size and horizontal alignment as BACK.
   Because the window begins at card-top, the image is cropped only horizontally. */


/* Other wedding content remains above the background layer. */
.wedding-v3-checkpoints,
.wedding-v3-route,
.wedding-v3-closing{
  position:relative;
  z-index:2;
}







.wedding-v3 .section-inner{position:relative;z-index:3}


/* ==========================================================
   WEDDING FRONT PLANT — REMOVE ONLY THE LARGE LEFT-MIDDLE BRANCH
   Back layer remains complete behind the card.
   Front layer is rebuilt from 3 perfectly aligned slices of the SAME image.
   This leaves only the circled left-middle branch absent in front.
   ========================================================== */





/* Keep the top canopy / upper branch visible. */


/* Keep the dense right-hand plant visible at every height. */


/* Keep the lower plant visible. */











/* ==========================================================
   WEDDING PLANT — USER-SUPPLIED FRONT/BACK PNG LAYERS
   Both PNGs share the same canvas and coordinates.
   ========================================================== */



/* Existing white date card remains exactly as styled,
   but sits between the two plant layers. */


/* Both images use identical geometry so they align into one plant. */
.wedding-plant-back,
.wedding-plant-front{
  position:absolute;
  top:0;
  right:0;
  width:min(38vw,620px);
  height:auto;
  max-width:none;
  pointer-events:none;
  transform:none;
}

/* Behind the white card */
.wedding-plant-back{
  z-index:1;
}

/* In front of the white card */
.wedding-plant-front{
  z-index:3;
  pointer-events:none;
}

/* Keep the lower wedding content above the back layer. */
.wedding-v3-checkpoints,
.wedding-v3-route,
.wedding-v3-closing{
  position:relative;
  z-index:2;
}

@media(max-width:1000px){
  .wedding-plant-back,
  .wedding-plant-front{
    width:min(44vw,560px);
  }
}

@media(max-width:760px){
  .wedding-plant-back,
  .wedding-plant-front{
    right:-20px;
    width:min(62vw,430px);
  }
}

@media(max-width:480px){
  .wedding-plant-back,
  .wedding-plant-front{
    right:-30px;
    width:min(74vw,370px);
  }
}

.wedding-v3 .section-inner{position:relative;z-index:2}
.wedding-plant-back{z-index:1}
.wedding-plant-front{z-index:4;pointer-events:none}


/* ==========================================================
   MEMORIES / PHOTO SECTION
   Romantic first, game attitude second.
   Placeholders are temporary and will be swapped for real photos later.
   ========================================================== */
.memories-v2{
  padding:138px 0 132px;
  background:
    radial-gradient(circle at 14% 10%, rgba(240,128,152,.10), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(109,157,202,.12), transparent 26%),
    var(--cream);
}
.memories-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:end;
  margin-bottom:64px;
}
.memories-head .section-copy{
  max-width:500px;
  margin-left:auto;
}
.memory-strip{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px;
  align-items:start;
}
.memory-card{
  margin:0;
  position:relative;
}
.memory-card-1{grid-column:1 / span 3; transform:rotate(-2deg); margin-top:58px}
.memory-card-2{grid-column:4 / span 3; transform:rotate(1.5deg); margin-top:8px}
.memory-card-3{grid-column:7 / span 4; transform:rotate(-1deg); margin-top:40px}
.memory-card-4{grid-column:2 / span 3; transform:rotate(1.5deg); margin-top:-20px}
.memory-card-5{grid-column:10 / span 3; transform:rotate(2deg); margin-top:-70px}

.memory-photo-wrap{
  position:relative;
  padding:10px;
  background:#fffdf8;
  border:1px solid rgba(21,55,91,.10);
  box-shadow:0 16px 34px rgba(21,55,91,.10);
}
.memory-photo-wrap img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}
.memory-card-featured .memory-photo-wrap img{
  aspect-ratio:4/3;
}
.memory-badge{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:8px 9px;
  background:rgba(21,55,91,.88);
  color:white;
  box-shadow:3px 3px 0 var(--pink);
}
.memory-card figcaption{
  margin-top:14px;
  font:500 italic 20px/1.2 'Cormorant Garamond',Georgia,serif;
  color:var(--navy);
}
.memory-card:hover{
  z-index:6;
}
.memory-card:hover .memory-photo-wrap{
  transform:translateY(-6px);
  box-shadow:0 22px 42px rgba(21,55,91,.14);
}
.memory-photo-wrap{
  transition:transform .22s ease, box-shadow .22s ease;
}
.memory-footer{
  margin-top:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--pink);
}
.memory-route-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pink);
}

@media(max-width:900px){
  .memories-head{grid-template-columns:1fr;gap:22px}
  .memories-head .section-copy{margin-left:0}
  .memory-strip{
    display:flex;
    overflow-x:auto;
    gap:18px;
    padding:12px 5vw 28px;
    margin:0 -5vw;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .memory-strip::-webkit-scrollbar{display:none}
  .memory-card,
  .memory-card-1,
  .memory-card-2,
  .memory-card-3,
  .memory-card-4,
  .memory-card-5{
    flex:0 0 min(72vw,320px);
    margin-top:0;
    transform:none;
    scroll-snap-align:center;
  }
  .memory-card-featured{
    flex-basis:min(84vw,390px);
  }
}

@media(max-width:560px){
  .memories-v2{padding:100px 0 104px}
  .memory-card figcaption{font-size:18px}
  .memory-badge{font-size:6px}
}












/* FINAL date-label formatting override */







/* FINAL date-row alignment */










/* Keep the main card compact. */


/* FINAL DATE CARD SPACING + TRUE VERTICAL ALIGNMENT */




















/* FINAL DATE CARD TUNING */


/* Reduce Ilias & George -> flower gap by ~50% */


/* Reduce space above and below the small floral divider by ~50% */


/* Reduce divider -> date-row gap by ~50% */


/* Optical alignment:
   the serif numerals have different font metrics from the sans labels,
   so move the two labels down slightly to visually center them on 02. */


/* DATE CARD — final spacing + centering correction */

/* The two side columns are now equal width, so the 02 sits on the exact
   horizontal center of the white card regardless of OCTOBER 2026 being wider. */


/* Keep the alignment you approved. */






/* Keep the 02 itself exactly on the card centre line. */


/* ==========================================================
   MAIN WEDDING DATE CARD — CLEAN REBUILD
   No competing rules below this point.
   ========================================================== */

.wedding-date-card{
  position:relative;
  z-index:2;
  padding:46px 38px 44px;
  text-align:center;
}

/* Keep the two decorative corners out of document flow. */
.wedding-date-card .wedding-paper-corner{
  position:absolute;
  width:52px;
  opacity:.45;
  pointer-events:none;
  z-index:6;
}

.wedding-date-card .corner-a{
  left:10px;
  top:10px;
  right:auto;
  bottom:auto;
  transform:none;
}

.wedding-date-card .corner-b{
  right:10px;
  bottom:10px;
  left:auto;
  top:auto;
  transform:rotate(180deg);
}

.wedding-date-names{
  display:inline-block;
  margin:0 auto 4px;
  padding:0;
  font:600 24px/1 'Cormorant Garamond',Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--navy);
  border-bottom:none;
}

.wedding-v3-divider{
  display:block;
  width:150px;
  margin:4px auto 8px;
}

/* ONE clean grid.
   Equal side columns guarantee that 02 is geometrically centered
   in the white card regardless of label width. */


/* One explicit row height and one vertical alignment model. */










.wedding-date-heart-rule{
  display:flex;
  align-items:center;
  gap:10px;
  width:190px;
  margin:4px auto 8px;
}

.wedding-date-heart-rule span{
  height:1px;
  background:rgba(21,55,91,.18);
  flex:1;
}

.wedding-date-heart-rule img{
  width:15px;
}

.wedding-date-city{
  margin:0;
  font:600 19px/1 'Cormorant Garamond',Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.18em;
}

@media(max-width:760px){
  .wedding-date-card{
    padding:38px 22px 36px;
  }

  

  

  

  
}

@media(max-width:480px){
  .wedding-date-card{
    padding:36px 16px 34px;
  }

  

  

  

  
}


/* DATE ROW — ABSOLUTE CENTERING ON ONE SHARED AXIS */


/* All three items are centered against the exact same 50% vertical axis. */










/* Responsive spacing only; vertical axis remains identical. */





/* DATE ROW — VISUAL GLYPH CENTERING */


/* DATE ROW — deterministic optical alignment */










@media(max-width:760px){
  
  
  
}

@media(max-width:480px){
  
  
  
}


/* DATE STACK — simple, centered, no vertical-alignment problem */
.wedding-date-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:2px auto 0;
  gap:0;
}





.wedding-date-lockup strong{
  display:block;
  margin:0;
  padding:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:88px;
  font-weight:500;
  line-height:.78;
  color:var(--pink);
}



@media(max-width:760px){
  

  .wedding-date-lockup strong{
    font-size:76px;
  }
}

@media(max-width:480px){
  

  .wedding-date-lockup strong{
    font-size:68px;
  }
}

/* DATE STACK — final spacing */
.wedding-date-month{
  margin:16px 0 18px;
  padding:0;
  font-family:'Inter',Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--navy);
  white-space:nowrap;
}

/* More space below OCTOBER 2026 before the heart line */
.wedding-date-heart-rule{
  margin-top:0 !important;
}

@media(max-width:760px){
  .wedding-date-month{
    font-size:12px;
    margin-top:14px;
    margin-bottom:16px;
  }
}

@media(max-width:480px){
  .wedding-date-month{
    font-size:11px;
    margin-top:12px;
    margin-bottom:14px;
  }
}

/* DATE ROW — lining-figures experiment */
.wedding-date-card .wedding-date-lockup{
  display:grid !important;
  grid-template-columns:160px auto 160px !important;
  align-items:center !important;
  justify-content:center !important;
  column-gap:16px !important;
  width:max-content !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:8px auto 10px !important;
}

.wedding-date-card .wedding-date-weekday,
.wedding-date-card .wedding-date-month{
  position:static !important;
  display:block !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  font-family:'Inter',Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--navy) !important;
  white-space:nowrap !important;
}

.wedding-date-card .wedding-date-weekday{
  grid-column:1 !important;
  justify-self:end !important;
  text-align:right !important;
}

.wedding-date-card .wedding-date-lockup strong{
  grid-column:2 !important;
  position:static !important;
  display:block !important;
  justify-self:center !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:88px !important;
  font-weight:500 !important;
  line-height:1 !important;
  color:var(--pink) !important;

  /* Use lining figures rather than old-style figures. */
  font-variant-numeric:lining-nums !important;
  font-feature-settings:"lnum" 1 !important;
}

.wedding-date-card .wedding-date-month{
  grid-column:3 !important;
  justify-self:start !important;
  text-align:left !important;
  margin:0 !important;
}

@media(max-width:760px){
  .wedding-date-card .wedding-date-lockup{
    grid-template-columns:120px auto 120px !important;
    column-gap:10px !important;
  }
  .wedding-date-card .wedding-date-weekday,
  .wedding-date-card .wedding-date-month{
    font-size:12px !important;
  }
  .wedding-date-card .wedding-date-lockup strong{
    font-size:76px !important;
  }
}

@media(max-width:480px){
  .wedding-date-card .wedding-date-lockup{
    grid-template-columns:92px auto 92px !important;
    column-gap:8px !important;
  }
  .wedding-date-card .wedding-date-weekday,
  .wedding-date-card .wedding-date-month{
    font-size:10px !important;
  }
  .wedding-date-card .wedding-date-lockup strong{
    font-size:68px !important;
  }
}

.wedding-title-underline{
  display:block;
  width:150px;
  margin:6px auto 8px;
}


/* Ceremony capacity note below the checkpoint cards */
.wedding-capacity-note{
  max-width:560px;
  margin:18px auto 0;
  text-align:center;
  font:500 italic 16px/1.45 'Cormorant Garamond',Georgia,serif;
  color:rgba(255,255,255,.82);
}
.wedding-capacity-note strong{
  color:#ffd8e1;
  font-weight:600;
}



/* Wedding section guide couple — subtle animated journey */
.wedding-v3-route{
  position:relative;
  overflow:hidden;
}
.wedding-v3-couple{
  flex:0 0 auto;
  transform-origin:50% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .wedding-v3-couple{
    animation:weddingCoupleWalk 2.2s ease-in-out infinite;
  }
  .wedding-v3-route-line{
    animation:weddingRoutePulse 3.2s ease-in-out infinite;
  }
}
@keyframes weddingCoupleWalk{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  25%{transform:translate3d(4px,-3px,0) rotate(1deg)}
  50%{transform:translate3d(8px,0,0) rotate(-1deg)}
  75%{transform:translate3d(4px,-3px,0) rotate(1deg)}
}
@keyframes weddingRoutePulse{
  0%,100%{opacity:.58}
  50%{opacity:.9}
}


/* Wedding section bottom composition — centered journey */
.wedding-v3-route{
  width:min(640px,82%);
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  overflow:visible;
}
.wedding-v3-couple{
  width:58px;
  flex:0 0 58px;
}
.wedding-v3-route-line{
  width:auto;
  min-width:0;
  flex:1 1 auto;
  height:54px;
  object-fit:fill;
}
.wedding-v3-closing{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:8px;
  text-align:center;
}
.wedding-v3-closing p{
  margin:0;
}
.wedding-v3-closing span{
  margin:0;
}
@media(max-width:760px){
  .wedding-v3-route{
    width:min(520px,94%);
    gap:10px;
  }
  .wedding-v3-couple{
    width:50px;
    flex-basis:50px;
  }
  .wedding-v3-route-line{
    height:46px;
  }
}


/* Wedding guide moved into the left copy, directly under the main quest label */
.wedding-v3-copy .wedding-v3-route{
  width:min(330px,100%);
  margin:24px 0 0;
  justify-content:flex-start;
  gap:10px;
}
.wedding-v3-copy .wedding-v3-couple{
  width:54px;
  flex:0 0 54px;
}
.wedding-v3-copy .wedding-v3-route-line{
  height:44px;
  min-width:0;
  flex:1 1 auto;
}
.wedding-v3-copy .wedding-v3-closing{
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  gap:7px;
  margin-top:10px;
}
.wedding-v3-copy .wedding-v3-closing p{
  max-width:330px;
  font-size:17px;
}
@media(max-width:1000px){
  .wedding-v3-copy .wedding-v3-route{width:min(360px,100%)}
}
@media(max-width:760px){
  .wedding-v3-copy .wedding-v3-route{
    width:min(330px,100%);
    margin-top:20px;
  }
  .wedding-v3-copy .wedding-v3-couple{
    width:50px;
    flex-basis:50px;
  }
  .wedding-v3-copy .wedding-v3-route-line{height:40px}
}


/* ===== wedding-two-stop-route-fix ===== */
.wedding-v3-route-line-two-stops{
    display:block;
    flex:1;
    width:100%;
    height:76px;
    min-width:0;
    overflow:visible;
    opacity:.9;
  }
  @media(max-width:760px){
    .wedding-v3-route-line-two-stops{
      height:68px;
    }
  }


/* ===== hero-scroll-cue-viewport-fix ===== */
.scroll-cue{
    position:fixed !important;
    left:50% !important;
    bottom:10px !important;
    transform:translateX(-50%) !important;
    z-index:60 !important;
    transition:opacity .22s ease, visibility .22s ease;
  }

  body.hero-passed .scroll-cue{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  @media(max-width:760px){
    .scroll-cue{
      bottom:8px !important;
    }
  }


/* ===== itinerary-editorial-styles ===== */
.itinerary-editorial{
    position:relative;
    overflow:hidden;
    padding:104px 0 92px;
    background:
      radial-gradient(circle at 3% 14%,rgba(240,128,152,.08),transparent 25%),
      radial-gradient(circle at 97% 78%,rgba(109,157,202,.10),transparent 24%),
      linear-gradient(180deg,#fffaf3 0%,#fffdf8 62%,#fbf4eb 100%);
  }

  .itinerary-inner{
    position:relative;
    z-index:3;
  }

  .itinerary-title-block{
    max-width:1140px;
    margin:0 auto 34px;
  }

  .itinerary-title-block .section-heading{
    margin-bottom:0;
  }

  .itinerary-subline{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:36px;
    margin-top:10px;
    padding-bottom:17px;
    border-bottom:1px solid rgba(21,55,91,.10);
  }

  .itinerary-tagline{
    font:500 italic 23px/1.15 'Cormorant Garamond',Georgia,serif;
    color:var(--pink);
    white-space:nowrap;
  }

  .itinerary-meta{
    color:rgba(21,55,91,.62);
    font-size:5px;
    text-align:right;
  }

  .editorial-route{
    position:relative;
    max-width:1020px;
    margin:0 auto;
  }

  .route-start{
    position:relative;
    z-index:4;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:12px;
    margin:0 auto 19px;
  }

  .itinerary-player{
    display:block;
    width:59px;
    height:auto;
    image-rendering:pixelated;
    transform-origin:50% 100%;
  }

  .route-start .small-pixel{
    display:block;
    margin-bottom:4px;
    color:var(--blue);
    font-size:5px;
  }

  .route-start strong{
    font:600 18px/1 'Cormorant Garamond',Georgia,serif;
    color:var(--navy-deep);
  }

  .route-events{
    position:relative;
    padding:0 0 8px;
  }

  .route-events::before{
    content:"";
    position:absolute;
    left:50%;
    top:-6px;
    bottom:42px;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(
      180deg,
      rgba(109,157,202,.45),
      rgba(240,128,152,.48) 45%,
      rgba(109,157,202,.40) 72%,
      rgba(240,128,152,.48)
    );
  }

  .route-event{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);
    align-items:center;
    min-height:96px;
  }

  .route-copy{
    max-width:405px;
    padding:8px 0;
  }

  .route-event-left .route-copy{
    justify-self:end;
    padding-right:18px;
    text-align:right;
  }

  .route-event-right .route-copy{
    grid-column:3;
    justify-self:start;
    padding-left:18px;
  }

  .route-kicker{
    display:block;
    margin-bottom:6px;
    color:var(--pink);
    font-size:5px;
  }

  .route-kicker-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
  }

  .route-event-left .route-kicker-row{
    justify-content:flex-end;
  }

  .route-kicker-row .route-kicker{
    margin:0;
  }

  .route-lock{
    display:inline-flex;
    align-items:center;
    min-height:18px;
    padding:4px 6px 3px;
    border:1px solid rgba(21,55,91,.14);
    color:rgba(21,55,91,.64);
    background:rgba(255,255,255,.55);
    font-size:4px;
  }

  .route-title-line{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .route-event-left .route-title-line{
    justify-content:flex-end;
  }

  .route-icon{
    flex:0 0 auto;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(109,157,202,.11);
    border:1px solid rgba(109,157,202,.24);
    color:var(--navy-deep);
    font-size:16px;
    line-height:1;
  }

  .route-event:nth-of-type(even) .route-icon{
    background:rgba(240,128,152,.11);
    border-color:rgba(240,128,152,.24);
  }

  .route-icon-secret{
    background:rgba(21,55,91,.06) !important;
    border:1px dashed rgba(21,55,91,.26) !important;
    color:var(--pink);
    font:400 8px/1 'Press Start 2P',monospace;
  }

  .route-copy h3{
    margin:0;
    font:600 25px/.98 'Cormorant Garamond',Georgia,serif;
    color:var(--navy-deep);
  }

  .route-copy > p{
    margin:5px 0 0;
    color:rgba(21,55,91,.68);
    font-size:12.5px;
    line-height:1.4;
  }

  .route-dot{
    position:relative;
    z-index:4;
    grid-column:2;
    grid-row:1;
    justify-self:center;
    width:15px;
    height:15px;
    border-radius:50%;
    border:4px solid #fffaf3;
    box-shadow:0 0 0 1px rgba(21,55,91,.12);
  }

  .route-dot-blue{ background:var(--blue); }
  .route-dot-pink{ background:var(--pink); }

  .route-dot-navy{
    background:var(--navy-deep);
  }

  .route-dot-final{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    color:white;
    font-size:11px;
  }

  .route-connector{
    position:absolute;
    z-index:1;
    top:50%;
    width:45px;
    height:28px;
    transform:translateY(-50%);
    border-top:2px solid rgba(109,157,202,.30);
  }

  .connector-right{
    left:calc(50% - 45px);
    border-right:2px solid rgba(240,128,152,.22);
    border-radius:0 22px 0 0;
  }

  .connector-left{
    right:calc(50% - 45px);
    border-left:2px solid rgba(109,157,202,.22);
    border-radius:22px 0 0 0;
  }

  .event-02 .route-connector,
  .event-04 .route-connector,
  .event-06 .route-connector,
  .event-08 .route-connector{
    transform:translateY(-50%) scaleY(-1);
  }

  /* The drink route is the one intentional visual branch. */
  .drink-sidequest-editorial{
    position:relative;
    z-index:5;
    width:min(670px,74%);
    margin:2px auto 5px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    align-items:center;
  }

  .sidequest-line{
    height:2px;
    background:
      repeating-linear-gradient(
        90deg,
        var(--pink) 0 9px,
        transparent 9px 16px
      );
    opacity:.50;
  }

  .sidequest-label{
    padding:7px 12px 7px;
    text-align:center;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(240,128,152,.16);
  }

  .sidequest-label .small-pixel{
    display:block;
    margin-bottom:4px;
    color:var(--pink);
    font-size:4px;
  }

  .sidequest-label strong{
    font:600 17px/1 'Cormorant Garamond',Georgia,serif;
    color:var(--navy-deep);
  }

  .drink-side-route{
    display:none;
  }

  .route-event-final{
    min-height:125px;
    margin-top:4px;
  }

  .finale-inline{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    gap:2px;
    margin-top:10px;
  }

  .route-event-left .finale-inline{
    justify-content:flex-end;
  }

  .itinerary-player-final{
    width:68px;
  }

  .finale-inline-heart{
    margin-bottom:24px;
    color:var(--pink);
    font-size:27px;
    line-height:1;
    text-shadow:3px 3px 0 rgba(109,157,202,.13);
  }
@media (prefers-reduced-motion:no-preference){
    .itinerary-player{
      animation:itineraryEditorialBob 2.2s ease-in-out infinite;
    }

    .route-dot{
      animation:itineraryDotGlow 3s ease-in-out infinite;
    }

    .sidequest-line{
      animation:itinerarySideQuestFlow 6s linear infinite;
      background-size:32px 2px;
    }
  }

  @keyframes itineraryEditorialBob{
    0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
    50%{transform:translate3d(0,-3px,0) rotate(1deg)}
  }

  @keyframes itineraryDotGlow{
    0%,100%{box-shadow:0 0 0 1px rgba(21,55,91,.12)}
    50%{box-shadow:0 0 0 5px rgba(240,128,152,.07)}
  }

  @keyframes itinerarySideQuestFlow{
    from{background-position:0 0}
    to{background-position:64px 0}
  }

  @media(max-width:900px){
    .itinerary-subline{
      align-items:flex-start;
      flex-direction:column;
      gap:8px;
    }

    .itinerary-tagline{
      white-space:normal;
    }

    .itinerary-meta{
      text-align:left;
    }

    .route-copy{
      max-width:320px;
    }
  }

  @media(max-width:760px){
    .itinerary-editorial{
      padding:78px 0 76px;
    }

    .itinerary-title-block{
      margin-bottom:27px;
    }

    .itinerary-tagline{
      font-size:20px;
    }

    .route-start{
      justify-content:flex-start;
      margin:0 0 19px 25px;
    }

    .itinerary-player-start{
      width:53px;
    }

    .route-events::before{
      left:27px;
      transform:none;
      bottom:38px;
    }

    .route-event{
      grid-template-columns:55px minmax(0,1fr);
      min-height:88px;
      gap:0;
    }

    .route-event-left .route-copy,
    .route-event-right .route-copy{
      grid-column:2;
      grid-row:1;
      justify-self:start;
      padding:8px 0 8px 13px;
      text-align:left;
    }

    .route-event-left .route-title-line,
    .route-event-left .route-kicker-row{
      justify-content:flex-start;
    }

    .route-dot{
      grid-column:1;
      grid-row:1;
      justify-self:center;
    }

    .route-connector{
      display:none;
    }

    .route-copy h3{
      font-size:22px;
    }

    .route-copy > p{
      font-size:12px;
    }

    .route-icon{
      width:27px;
      height:27px;
      font-size:14px;
    }

    .drink-sidequest-editorial{
      width:calc(100% - 55px);
      margin:6px 0 8px 55px;
      grid-template-columns:1fr;
    }

    .sidequest-line{
      display:none;
    }

    .sidequest-label{
      text-align:left;
    }

    .route-event-final{
      min-height:114px;
    }

    .finale-inline{
      justify-content:flex-start;
    }

    .itinerary-player-final{
      width:61px;
    }

    .finale-inline-heart{
      margin-bottom:22px;
      font-size:25px;
    }
}

  @media(max-width:480px){
    .route-copy h3{
      font-size:20px;
    }

    .route-kicker-row{
      flex-wrap:wrap;
      gap:5px;
    }
  }


/* ===== mission-checkpoints-readable-compact ===== */
/* Bigger typography, tighter overall section */
  .itinerary-editorial{
    padding:76px 0 68px !important;
  }

  .itinerary-title-block{
    margin-bottom:22px !important;
  }

  .itinerary-tagline{
    font-size:26px !important;
  }

  .itinerary-meta{
    font-size:6px !important;
  }

  .route-start{
    margin-bottom:10px !important;
  }

  .route-start .small-pixel{
    font-size:6px !important;
  }

  .route-start strong{
    font-size:20px !important;
  }

  .route-event{
    min-height:78px !important;
  }

  .route-copy{
    padding:4px 0 !important;
  }

  .route-kicker{
    margin-bottom:4px !important;
    font-size:6px !important;
  }

  .route-kicker-row{
    margin-bottom:4px !important;
  }

  .route-lock{
    font-size:5px !important;
  }

  .route-copy h3{
    font-size:29px !important;
  }

  .route-copy > p{
    margin-top:4px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  .route-icon{
    width:32px !important;
    height:32px !important;
    font-size:17px !important;
  }

  .route-icon-secret{
    font-size:9px !important;
  }

  .route-event-final{
    min-height:96px !important;
    margin-top:0 !important;
  }

  .drink-sidequest-editorial{
    margin:0 auto 2px !important;
  }

  .sidequest-label{
    padding:6px 10px !important;
  }

  .sidequest-label .small-pixel{
    font-size:5px !important;
  }

  .sidequest-label strong{
    font-size:19px !important;
  }

  .finale-inline{
    margin-top:6px !important;
  }

  .itinerary-player-final{
    width:60px !important;
  }

  .finale-inline-heart{
    margin-bottom:21px !important;
    font-size:24px !important;
  }

  @media(max-width:760px){
    .itinerary-editorial{
      padding:60px 0 58px !important;
    }

    .itinerary-title-block{
      margin-bottom:18px !important;
    }

    .itinerary-tagline{
      font-size:23px !important;
    }

    .route-start{
      margin-bottom:10px !important;
    }

    .route-event{
      min-height:72px !important;
    }

    .route-copy h3{
      font-size:25px !important;
    }

    .route-copy > p{
      font-size:13.5px !important;
    }

    .route-kicker{
      font-size:5.5px !important;
    }

    .route-icon{
      width:29px !important;
      height:29px !important;
      font-size:15px !important;
    }

    .route-event-final{
      min-height:88px !important;
    }
  }


/* ===== mission-checkpoint-label-size-fix ===== */
.route-kicker{
    font-size:7.5px !important;
    letter-spacing:.03em !important;
    line-height:1.35 !important;
  }

  .route-kicker-row{
    gap:10px !important;
  }

  .route-lock{
    font-size:6px !important;
  }

  @media(max-width:760px){
    .route-kicker{
      font-size:6.8px !important;
    }

    .route-lock{
      font-size:5.5px !important;
    }
  }


/* ===== mission-sidequest-font-size-fix ===== */
.sidequest-label .small-pixel{
    font-size:7px !important;
    line-height:1.35 !important;
    letter-spacing:.03em !important;
  }

  .sidequest-label strong{
    font-size:23px !important;
    line-height:1.05 !important;
  }

  @media(max-width:760px){
    .sidequest-label .small-pixel{
      font-size:6.5px !important;
    }

    .sidequest-label strong{
      font-size:21px !important;
    }
  }


/* ===== mission-central-icon-timeline ===== */
.route-title-line{
    display:block !important;
  }

  .route-event-left .route-title-line{
    display:block !important;
  }

  .route-dot.route-dot-icon{
    width:38px !important;
    height:38px !important;
    display:grid !important;
    place-items:center !important;
    border-width:4px !important;
    font-size:17px !important;
    line-height:1 !important;
    color:var(--navy-deep) !important;
    box-shadow:
      0 0 0 1px rgba(21,55,91,.12),
      0 4px 10px rgba(21,55,91,.08) !important;
  }

  .route-dot-blue.route-dot-icon{
    background:#dcecf8 !important;
  }

  .route-dot-pink.route-dot-icon{
    background:#ffd8e1 !important;
  }

  .route-dot-navy.route-dot-icon{
    background:var(--navy-deep) !important;
    color:#ffd8e1 !important;
  }

  .route-dot-secret{
    font-family:'Press Start 2P',monospace !important;
    font-size:10px !important;
  }

  .route-dot-final{
    font-size:19px !important;
  }

  /* Keep connectors meeting the larger central milestone icons cleanly. */
  .route-connector{
    width:38px !important;
  }

  .connector-right{
    left:calc(50% - 38px) !important;
  }

  .connector-left{
    right:calc(50% - 38px) !important;
  }

  @media(max-width:760px){
    .route-dot.route-dot-icon{
      width:34px !important;
      height:34px !important;
      font-size:15px !important;
    }

    .route-dot-secret{
      font-size:9px !important;
    }

    .route-dot-final{
      font-size:17px !important;
    }
  }


/* ===== mission-lucide-icon-polish ===== */
.route-dot.route-dot-icon{
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
  }

  .route-dot.route-dot-icon .timeline-lucide{
    width:20px;
    height:20px;
    display:block;
    stroke-width:1.9;
  }

  .route-dot-blue.route-dot-icon{
    color:#315f86 !important;
  }

  .route-dot-pink.route-dot-icon{
    color:#a74660 !important;
  }

  .route-dot-navy.route-dot-icon{
    color:#ffd8e1 !important;
  }

  .route-dot-final .timeline-lucide{
    width:21px !important;
    height:21px !important;
  }

  .route-dot-secret{
    font-family:inherit !important;
    font-size:inherit !important;
  }

  @media(max-width:760px){
    .route-dot.route-dot-icon{
      width:38px !important;
      height:38px !important;
    }

    .route-dot.route-dot-icon .timeline-lucide{
      width:18px;
      height:18px;
    }
  }


/* ===== mission-meta-size-update ===== */
.itinerary-meta{
    font-size:7.5px !important;
    line-height:1.45 !important;
    letter-spacing:.035em !important;
  }

  @media(max-width:760px){
    .itinerary-meta{
      font-size:6.8px !important;
    }
  }


/* ===== mission-sidequest-spacing-fix ===== */
.drink-sidequest-editorial{
    margin:18px auto 20px !important;
  }

  @media(max-width:760px){
    .drink-sidequest-editorial{
      margin:14px 0 16px 55px !important;
    }
  }


/* ===== mission-checkpoint-scroll-interactions ===== */
/* Scroll interaction: checkpoints become the active focus as they enter the viewport. */
  @media (prefers-reduced-motion: no-preference){
    .route-event .route-copy,
    .route-event .route-dot,
    .drink-sidequest-editorial{
      transition:
        opacity .48s cubic-bezier(.22,.8,.25,1),
        transform .52s cubic-bezier(.22,.8,.25,1),
        filter .48s ease;
      will-change:opacity,transform;
    }

    /* Resting / outside active zone */
    .route-event.scroll-reveal-ready .route-copy{
      opacity:.35;
      filter:saturate(.72);
    }

    .route-event-left.scroll-reveal-ready .route-copy{
      transform:translate3d(-18px,0,0) scale(.97);
    }

    .route-event-right.scroll-reveal-ready .route-copy{
      transform:translate3d(18px,0,0) scale(.97);
    }

    .route-event.scroll-reveal-ready .route-dot{
      opacity:.48;
      transform:scale(.78);
      filter:saturate(.68);
    }

    /* Current checkpoint */
    .route-event.scroll-reveal-ready.is-scroll-active .route-copy{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:saturate(1);
    }

    .route-event.scroll-reveal-ready.is-scroll-active .route-dot{
      opacity:1;
      transform:scale(1.10);
      filter:saturate(1);
    }

    /* Once an event has passed, gently recede it instead of leaving everything loud. */
    .route-event.scroll-reveal-ready.is-scroll-past .route-copy{
      opacity:.58;
      transform:translate3d(0,0,0) scale(.985);
      filter:saturate(.82);
    }

    .route-event.scroll-reveal-ready.is-scroll-past .route-dot{
      opacity:.66;
      transform:scale(.9);
      filter:saturate(.8);
    }

    /* Side quest gets its own little pop when it enters the middle of the screen. */
    .drink-sidequest-editorial.scroll-reveal-ready{
      opacity:.32;
      transform:scale(.965);
      filter:saturate(.72);
    }

    .drink-sidequest-editorial.scroll-reveal-ready.is-scroll-active{
      opacity:1;
      transform:scale(1.02);
      filter:saturate(1);
    }

    .drink-sidequest-editorial.scroll-reveal-ready.is-scroll-past{
      opacity:.62;
      transform:scale(.985);
      filter:saturate(.82);
    }
  }


/* ===== details-guest-prep-styles ===== */
.details-prep{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:94px 0 92px;
    background:
      radial-gradient(circle at 8% 18%,rgba(109,157,202,.08),transparent 23%),
      radial-gradient(circle at 94% 84%,rgba(240,128,152,.09),transparent 24%),
      #fffaf3;
  }

  .details-prep-inner{
    position:relative;
    z-index:3;
  }

  .details-prep-head{
    max-width:760px;
    margin:0 auto 52px;
    text-align:center;
  }

  .details-prep-kicker{
    display:block;
    margin-bottom:13px;
    color:var(--pink);
    font-size:6.5px;
    letter-spacing:.045em;
  }

  .details-prep-head .section-heading{
    margin:0;
  }

  .details-prep-head > p{
    max-width:590px;
    margin:16px auto 0;
    color:rgba(21,55,91,.70);
    font:500 italic 20px/1.4 'Cormorant Garamond',Georgia,serif;
  }

  .details-checkpoints{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:54px;
    max-width:1040px;
    margin:0 auto;
  }

  .details-checkpoint-line{
    position:absolute;
    z-index:1;
    left:calc(50% - 330px);
    top:214px;
    width:660px;
    height:2px;
    background:linear-gradient(90deg,var(--blue) 0%,#9d9fc0 50%,var(--pink) 100%);
    opacity:.42;
  }

  .detail-checkpoint{
    position:relative;
    text-align:center;
    padding:0 12px;
  }

  .detail-icon-wrap{
    position:relative;
    z-index:4;
    width:72px;
    height:72px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fffaf3;
    border:1px solid rgba(21,55,91,.14);
    box-shadow:0 8px 22px rgba(21,55,91,.06);
    color:var(--navy-deep);
  }

  .detail-arrive .detail-icon-wrap{
    color:#315f86;
    border-color:rgba(109,157,202,.36);
    box-shadow:0 0 0 8px rgba(109,157,202,.065);
  }

  .detail-equip .detail-icon-wrap{
    color:#6b6b96;
    border-color:rgba(109,157,202,.24);
    box-shadow:0 0 0 8px rgba(167,157,190,.055);
  }

  .detail-loot .detail-icon-wrap{
    color:#a74660;
    border-color:rgba(240,128,152,.36);
    box-shadow:0 0 0 8px rgba(240,128,152,.065);
  }

  .details-lucide{
    width:29px;
    height:29px;
    display:block;
  }

  .detail-label{
    display:block;
    margin-bottom:11px;
    color:var(--pink);
    font-size:6.5px;
    letter-spacing:.035em;
  }

  .detail-checkpoint h3{
    margin:0 0 11px;
    font:600 31px/.98 'Cormorant Garamond',Georgia,serif;
    color:var(--navy-deep);
  }

  .detail-checkpoint p{
    max-width:300px;
    margin:0 auto;
    color:rgba(21,55,91,.72);
    font-size:14px;
    line-height:1.55;
  }

  /* One restrained real bougainvillea flourish, kept inside the section. */
  .details-bougainvillea-slot{
    position:absolute;
    z-index:1;
    right:-105px;
    bottom:-110px;
    width:335px;
    pointer-events:none;
    opacity:.26;
    transform:rotate(-12deg);
  }

  .details-bougainvillea-img{
    display:block;
    position:static;
    width:100%;
    max-width:none;
    height:auto;
    opacity:1;
    filter:none;
    transform:none;
  }

  /* Scroll interaction — deliberately softer than Mission Checkpoints. */
  @media (prefers-reduced-motion:no-preference){
    .detail-checkpoint.details-reveal-ready .detail-icon-wrap,
    .detail-checkpoint.details-reveal-ready .detail-label,
    .detail-checkpoint.details-reveal-ready h3,
    .detail-checkpoint.details-reveal-ready p{
      transition:
        opacity .5s cubic-bezier(.22,.8,.25,1),
        transform .55s cubic-bezier(.22,.8,.25,1),
        filter .45s ease;
    }

    .detail-checkpoint.details-reveal-ready .detail-icon-wrap{
      opacity:.34;
      transform:translateY(8px) scale(.84);
      filter:saturate(.72);
    }

    .detail-checkpoint.details-reveal-ready .detail-label,
    .detail-checkpoint.details-reveal-ready h3,
    .detail-checkpoint.details-reveal-ready p{
      opacity:.38;
      transform:translateY(9px);
    }

    .detail-checkpoint.details-reveal-ready.is-details-active .detail-icon-wrap{
      opacity:1;
      transform:translateY(0) scale(1.04);
      filter:saturate(1);
    }

    .detail-checkpoint.details-reveal-ready.is-details-active .detail-label,
    .detail-checkpoint.details-reveal-ready.is-details-active h3,
    .detail-checkpoint.details-reveal-ready.is-details-active p{
      opacity:1;
      transform:translateY(0);
    }

    .detail-checkpoint.details-reveal-ready.is-details-past .detail-icon-wrap{
      opacity:.68;
      transform:translateY(0) scale(.96);
      filter:saturate(.85);
    }

    .detail-checkpoint.details-reveal-ready.is-details-past .detail-label,
    .detail-checkpoint.details-reveal-ready.is-details-past h3,
    .detail-checkpoint.details-reveal-ready.is-details-past p{
      opacity:.66;
      transform:translateY(0);
    }
  }

  @media(max-width:900px){
    .details-checkpoints{
      gap:28px;
    }

    .details-checkpoint-line{
      left:18%;
      width:64%;
    }
  }

  @media(max-width:760px){
    .details-prep{
      padding:72px 0 74px;
    }

    .details-prep-head{
      margin-bottom:38px;
    }

    .details-prep-head > p{
      font-size:18px;
    }

    .details-checkpoints{
      grid-template-columns:1fr;
      gap:0;
      max-width:560px;
      margin:0 auto;
    }

    .details-checkpoint-line{
      left:36px;
      top:220px;
      bottom:105px;
      width:2px;
      height:auto;
      background:linear-gradient(180deg,var(--blue),#9d9fc0,var(--pink));
    }

    .detail-checkpoint{
      display:grid;
      grid-template-columns:72px 1fr;
      column-gap:17px;
      row-gap:0;
      min-height:138px;
      padding:0 0 25px;
      text-align:left;
    }

    .detail-icon-wrap{
      grid-column:1;
      grid-row:1 / span 4;
      width:60px;
      height:60px;
      margin:0 auto;
    }

    .details-lucide{
      width:25px;
      height:25px;
    }

    .detail-label,
    .detail-checkpoint h3,
    .detail-checkpoint p{
      grid-column:2;
    }

    .detail-label{
      margin:3px 0 7px;
    }

    .detail-checkpoint h3{
      margin-bottom:7px;
      font-size:27px;
    }

    .detail-checkpoint p{
      max-width:none;
      margin:0;
      font-size:13.5px;
    }

    .details-bougainvillea-slot{
      right:-110px;
      bottom:-85px;
      width:260px;
      opacity:.19;
    }
  }

  @media(max-width:480px){
    .details-prep-kicker{
      font-size:5.8px;
    }

    .detail-checkpoint{
      grid-template-columns:62px 1fr;
      column-gap:12px;
    }

    .detail-icon-wrap{
      width:52px;
      height:52px;
    }

    .details-lucide{
      width:22px;
      height:22px;
    }

    .details-checkpoint-line{
      left:31px;
    }

    .detail-checkpoint h3{
      font-size:25px;
    }
  }


/* ===== details-blue-section-theme ===== */
.details-prep{
    background:
      radial-gradient(circle at 8% 18%,rgba(255,255,255,.10),transparent 24%),
      radial-gradient(circle at 94% 84%,rgba(240,128,152,.12),transparent 25%),
      linear-gradient(180deg,#6796bf 0%,#5f8db5 100%) !important;
    color:white;
  }

  .details-prep .section-heading{
    color:white !important;
  }

  .details-prep-kicker{
    color:#ffd8e1 !important;
  }

  .details-prep-head > p{
    color:rgba(255,255,255,.84) !important;
  }

  .detail-label{
    color:#ffe1e8 !important;
  }

  .detail-checkpoint h3{
    color:white !important;
  }

  .detail-checkpoint p{
    color:rgba(255,255,255,.82) !important;
  }

  .details-checkpoint-line{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,216,225,.85) 100%
    ) !important;
    opacity:.55 !important;
  }

  .detail-icon-wrap{
    background:#fffaf3 !important;
    border-color:rgba(255,255,255,.50) !important;
    box-shadow:0 0 0 8px rgba(255,255,255,.08),0 8px 22px rgba(21,55,91,.12) !important;
  }

  .detail-arrive .detail-icon-wrap{
    color:#315f86 !important;
  }

  .detail-equip .detail-icon-wrap{
    color:#6b6b96 !important;
  }

  .detail-loot .detail-icon-wrap{
    color:#a74660 !important;
  }

  .details-bougainvillea-slot{
    opacity:.34 !important;
  }

  @media(max-width:760px){
    .details-checkpoint-line{
      background:linear-gradient(
        180deg,
        rgba(255,255,255,.72),
        rgba(255,216,225,.85)
      ) !important;
    }
  }


/* ===== details-match-wedding-blue ===== */
/* Match the exact dark navy treatment used in THE WEDDING section. */
  .details-prep{
    background:
      radial-gradient(ellipse at 15% 100%,rgba(240,128,152,.20),transparent 34%),
      radial-gradient(ellipse at 72% 100%,rgba(109,157,202,.15),transparent 40%),
      var(--navy-deep) !important;
  }

  .details-prep-head > p,
  .detail-checkpoint p{
    color:rgba(255,255,255,.78) !important;
  }

  .details-checkpoint-line{
    background:linear-gradient(
      90deg,
      rgba(109,157,202,.90),
      rgba(255,216,225,.92)
    ) !important;
    opacity:.72 !important;
  }

  .detail-icon-wrap{
    box-shadow:
      0 0 0 8px rgba(255,255,255,.055),
      0 8px 22px rgba(0,0,0,.16) !important;
  }

  @media(max-width:760px){
    .details-checkpoint-line{
      background:linear-gradient(
        180deg,
        rgba(109,157,202,.90),
        rgba(255,216,225,.92)
      ) !important;
    }
  }


/* ===== global-light-blue-test ===== */
:root {
    --navy-deep: #6796bf !important;
    --navy: #6796bf !important;
  }


/* ===== global-light-blue-readable-text ===== */
/* Keep the lighter blue backgrounds, but restore dark navy as the readable text color. */
  :root{
    --text-navy-original:#15375B;
  }

  /* THE WEDDING */
  .wedding-v3{
    color:var(--text-navy-original) !important;
  }

  .wedding-v3 .section-heading,
  .wedding-v3 h2{
    color:white !important;
    font-weight:600 !important;
  }

  .wedding-v3 .section-eyebrow,
  .wedding-v3 .small-pixel,
  .wedding-v3 .checkpoint-label,
  .wedding-v3 .wedding-capacity-note strong{
    color:#ffd8e1 !important;
  }

  .wedding-v3 .wedding-capacity-note{
    color:var(--text-navy-original) !important;
    font-weight:600 !important;
  }

  /* Keep white cards readable as before. */
  .wedding-v3 .wedding-paper-card,
  .wedding-v3 .wedding-paper-card *{
    color:inherit;
  }

  .wedding-v3 .wedding-paper-card{
    color:var(--text-navy-original) !important;
  }

  .wedding-v3 .wedding-paper-card .checkpoint-label,
  .wedding-v3 .wedding-paper-card .checkpoint-time{
    color:var(--pink) !important;
  }

  /* THE DETAILS */
  .details-prep{
    color:var(--text-navy-original) !important;
  }

  .details-prep .section-heading{
    color:white !important;
    font-weight:600 !important;
  }

  .details-prep-kicker,
  .detail-label{
    color:#ffd8e1 !important;
  }

  .details-prep-head > p,
  .detail-checkpoint h3,
  .detail-checkpoint p{
    color:var(--text-navy-original) !important;
  }

  .detail-checkpoint h3{
    font-weight:600 !important;
  }

  /* Improve contrast for other large light-blue sections that inherited white text. */
  section[style*="var(--navy-deep)"] p,
  section[style*="var(--navy)"] p{
    color:var(--text-navy-original);
  }

  /* Keep explicitly decorative/light labels readable */
  .small-pixel{
    text-shadow:none !important;
  }

  /* Slightly strengthen any white display text that remains on blue. */
  .wedding-v3 .section-heading,
  .details-prep .section-heading{
    letter-spacing:-.01em;
  }

  @media(max-width:760px){
    .wedding-v3 .wedding-capacity-note{
      font-size:17px !important;
      line-height:1.45 !important;
    }

    .details-prep-head > p,
    .detail-checkpoint p{
      font-weight:500 !important;
    }
  }


/* ===== semantic-blue-text-split ===== */
/*
    Separate the palette roles:
    - light blue = large backgrounds / panels
    - original navy = readable text / icon strokes / foreground UI
  */
  :root{
    --navy:#15375b !important;
    --navy-deep:#0d2742 !important;
    --surface-blue:#6796bf;
    --surface-blue-soft:#78a3c7;
  }

  /* Keep the lighter-blue visual direction for surfaces that were formerly navy. */
  .hero-button-v2{
    background:var(--surface-blue) !important;
    color:#0d2742 !important;
  }

  .wedding-v3{
    background:
      radial-gradient(ellipse at 15% 100%,rgba(240,128,152,.20),transparent 34%),
      radial-gradient(ellipse at 72% 100%,rgba(255,255,255,.11),transparent 40%),
      var(--surface-blue) !important;
  }

  .details-prep{
    background:
      radial-gradient(circle at 8% 18%,rgba(255,255,255,.10),transparent 24%),
      radial-gradient(circle at 94% 84%,rgba(240,128,152,.12),transparent 25%),
      var(--surface-blue) !important;
  }

  .game-reveal-card{
    background:var(--surface-blue) !important;
  }

  .site-footer-v2{
    background:var(--surface-blue) !important;
  }

  .memory-badge{
    background:rgba(103,150,191,.94) !important;
  }

  .route-dot-navy,
  .route-dot-navy.route-dot-icon{
    background:var(--surface-blue) !important;
  }

  /* On light / cream / white surfaces, foreground text always uses real navy. */
  body,
  .hero-v2,
  .itinerary-editorial,
  .memories-v2,
  .game-v2,
  .wedding-paper-card,
  .route-start strong,
  .route-copy h3,
  .sidequest-label strong,
  .memory-card figcaption,
  .detail-checkpoint h3{
    color:#15375b;
  }

  /* Route labels and smaller supporting copy need enough contrast too. */
  .itinerary-meta{
    color:rgba(21,55,91,.78) !important;
  }

  .route-copy > p,
  .memory-card figcaption,
  .section-copy,
  .checkpoint-address{
    color:rgba(21,55,91,.78);
  }

  /* Icons on cream/white circles should be dark enough to read immediately. */
  .route-dot-blue.route-dot-icon{
    color:#214d73 !important;
  }

  .route-dot-pink.route-dot-icon{
    color:#F08098 !important;
  }

  .detail-icon-wrap{
    color:#15375b !important;
  }

  .detail-arrive .detail-icon-wrap{
    color:#214d73 !important;
  }

  .detail-equip .detail-icon-wrap{
    color:#4f527c !important;
  }

  .detail-loot .detail-icon-wrap{
    color:#F08098 !important;
  }

  /* Blue sections: dark navy body copy, white reserved for major display headings. */
  .wedding-v3{
    color:#15375b !important;
  }

  .wedding-v3-title,
  .wedding-v3 .section-heading,
  .details-prep .section-heading{
    color:white !important;
  }

  .wedding-v3-lead,
  .wedding-v3 .wedding-capacity-note,
  .details-prep-head > p,
  .detail-checkpoint h3,
  .detail-checkpoint p{
    color:#15375b !important;
  }

  /* Preserve pink as the accent layer. */
  .wedding-v3-date-label,
  .wedding-v3-quest,
  .details-prep-kicker,
  .detail-label{
    color:#ffe0e8 !important;
  }

  /* Improve the remaining white-on-blue small UI by making it stronger where appropriate. */
  .game-reveal-card{
    color:#15375b !important;
  }

  .game-reveal-card h3{
    color:#0d2742 !important;
  }

  .game-reveal-card p{
    color:rgba(13,39,66,.82) !important;
  }

  .bonus-pill{
    color:#ffe0e8 !important;
  }

  .site-footer-v2{
    color:#0d2742 !important;
    font-weight:600;
  }

  .site-footer-v2 b{
    color:#8f334e !important;
  }


/* ===== hero-clean-horizontal-break ===== */
.hero-bottom{
    display:none !important;
  }

  .hero-v2{
    margin-bottom:0 !important;
    border-bottom:0 !important;
  }

  .wedding-v3{
    margin-top:0 !important;
    border-top:0 !important;
  }


/* ===== blue-section-pink-titles ===== */
.wedding-v3 .section-heading,
  .wedding-v3-title,
  .details-prep .section-heading{
    color:var(--pink) !important;
  }


/* ===== blue-section-navy-title-fix ===== */
/* Strong, readable title color on the light blue sections */
  .wedding-v3-title,
  .wedding-v3 .section-heading,
  .details-prep .section-heading{
    color:#15375B !important;
  }

  /* Keep pink as the celebratory accent rather than the main title color */
  .wedding-v3-title::after,
  .details-prep .section-heading::after{
    content:"";
    display:block;
    width:72px;
    height:3px;
    margin-top:14px;
    background:var(--pink);
    border-radius:999px;
  }

  .details-prep .section-heading::after{
    margin-left:auto;
    margin-right:auto;
  }


/* ===== wedding-title-specificity-fix ===== */
.wedding-v3 h2.wedding-v3-title{
    color:#15375B !important;
  }


/* ===== details-bougainvillea-underline ===== */
.details-prep .section-heading::after{
    display:none !important;
  }

  .details-title-bougainvillea-slot{
    width:150px;
    max-width:42%;
    margin:12px auto 0;
    line-height:0;
    pointer-events:none;
  }

  .details-title-bougainvillea-slot .details-title-bougainvillea-img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    opacity:.95;
    filter:none;
    transform:none;
  }

  @media(max-width:760px){
    .details-title-bougainvillea-slot{
      width:124px;
      margin-top:10px;
    }
  }


/* ===== details-correct-bougainvillea-underline ===== */
.details-prep .section-heading::after{
    display:none !important;
  }

  .details-title-bougainvillea-slot{
    width:min(310px,58vw) !important;
    max-width:none !important;
    margin:7px auto 2px !important;
    line-height:0;
    pointer-events:none;
    overflow:visible;
  }

  .details-title-bougainvillea-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    opacity:.96 !important;
    filter:none !important;
    transform:none !important;
  }

  @media(max-width:760px){
    .details-title-bougainvillea-slot{
      width:min(245px,66vw) !important;
      margin-top:6px !important;
    }
  }


/* ===== details-bougainvillea-tight-spacing ===== */
/* Remove any line/underline crossing the bougainvillea title treatment */
  .details-prep .section-heading::after,
  .details-prep-head::after,
  .details-prep-head{
    border-bottom:none !important;
  }

  /* Pull the title, plant and intro copy much closer together */
  .details-prep .section-heading{
    margin-bottom:0 !important;
  }

  .details-title-bougainvillea-slot{
    margin:0 auto -8px !important;
  }

  .details-prep-head > p{
    margin-top:0 !important;
  }

  .details-prep-head{
    margin-bottom:38px !important;
  }

  @media(max-width:760px){
    .details-title-bougainvillea-slot{
      margin:0 auto -6px !important;
    }

    .details-prep-head{
      margin-bottom:30px !important;
    }
  }


/* ===== details-real-crop-and-line-fix ===== */
/* TITLE BLOCK — genuinely compact now */
  .details-prep-head{
    margin-bottom:34px !important;
  }

  .details-prep .section-heading{
    margin:0 !important;
  }

  /*
    The source PNG is 1536×1024 but the useful plant band occupies only
    roughly y=210..790. Crop that transparent canvas in CSS so layout
    space follows the visible flowers rather than the full PNG.
  */
  .details-title-bougainvillea-slot{
    position:relative !important;
    width:min(320px,58vw) !important;
    aspect-ratio:1536 / 580 !important;
    height:auto !important;
    max-width:none !important;
    margin:2px auto 5px !important;
    overflow:hidden !important;
    line-height:0 !important;
  }

  .details-title-bougainvillea-img{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    margin:0 !important;
    opacity:.96 !important;
    filter:none !important;

    /* 210 / 1024 ≈ 20.5% */
    transform:translateY(-20.5%) !important;
  }

  .details-prep-head > p{
    margin:5px auto 0 !important;
  }

  /* No title underline — the plant itself is the underline. */
  .details-prep .section-heading::after{
    display:none !important;
    content:none !important;
  }

  /*
    CHECKPOINT LINE — now positioned relative to .details-checkpoints,
    running only from the first icon center to the third icon center.
  */
  .details-checkpoints{
    position:relative !important;
  }

  .details-checkpoint-line{
    position:absolute !important;
    z-index:1 !important;
    left:16.6667% !important;
    right:16.6667% !important;
    top:36px !important;
    bottom:auto !important;
    width:auto !important;
    height:2px !important;
  }

  @media(max-width:900px) and (min-width:761px){
    .details-checkpoint-line{
      left:16.6667% !important;
      right:16.6667% !important;
      width:auto !important;
    }
  }

  @media(max-width:760px){
    .details-prep-head{
      margin-bottom:28px !important;
    }

    .details-title-bougainvillea-slot{
      width:min(255px,67vw) !important;
      margin:1px auto 4px !important;
    }

    .details-prep-head > p{
      margin-top:4px !important;
    }

    .details-checkpoint-line{
      left:30px !important;
      right:auto !important;
      top:30px !important;
      bottom:105px !important;
      width:2px !important;
      height:auto !important;
    }
  }

  @media(max-width:480px){
    .details-title-bougainvillea-slot{
      width:min(235px,70vw) !important;
    }

    .details-checkpoint-line{
      left:26px !important;
      top:26px !important;
      bottom:100px !important;
    }
  }


/* ===== details-pink-circles-white-icons ===== */
.details-prep .detail-icon-wrap,
  .details-prep .detail-arrive .detail-icon-wrap,
  .details-prep .detail-equip .detail-icon-wrap,
  .details-prep .detail-loot .detail-icon-wrap{
    background: var(--pink) !important;
    color: white !important;
    border-color: rgba(255,255,255,.45) !important;
    box-shadow:
      0 0 0 8px rgba(255,255,255,.06),
      0 8px 22px rgba(0,0,0,.14) !important;
  }

  .details-prep .details-lucide{
    color: white !important;
    stroke: currentColor !important;
  }


/* ===== details-top-five-refinement ===== */
/* 1) Pull the checkpoint row closer to the title/plant composition */
  .details-prep-head{
    margin-bottom:16px !important;
  }

  /* 2) Make the bougainvillea feel like a real underline:
        wider, flatter, and closer to the title */
  .details-title-bougainvillea-slot{
    width:min(360px,62vw) !important;
    aspect-ratio:1536 / 430 !important;
    margin:-2px auto 0 !important;
    overflow:hidden !important;
  }

  .details-title-bougainvillea-img{
    transform:translateY(-27.5%) !important;
  }

  /* 3) Remove the extra decorative bougainvillea at the lower-right */
  .details-bougainvillea-slot{
    display:none !important;
  }

  /* 4) Make the small game/checkpoint labels easier to read */
  .detail-label{
    font-size:8px !important;
    line-height:1.35 !important;
    letter-spacing:.035em !important;
    margin-bottom:9px !important;
  }

  /* 5) Make the copy blocks lighter and tighter */
  .detail-checkpoint p{
    max-width:250px !important;
    font-size:13.5px !important;
    line-height:1.45 !important;
  }

  .detail-checkpoint h3{
    margin-bottom:9px !important;
  }

  @media(max-width:760px){
    .details-prep-head{
      margin-bottom:14px !important;
    }

    .details-title-bougainvillea-slot{
      width:min(285px,72vw) !important;
      aspect-ratio:1536 / 430 !important;
      margin:-1px auto 0 !important;
    }

    .detail-label{
      font-size:7px !important;
    }

    .detail-checkpoint p{
      max-width:none !important;
      font-size:13px !important;
      line-height:1.45 !important;
    }
  }


/* ===== details-title-bougainvillea-front ===== */
.details-prep-head{
    position:relative !important;
    z-index:20 !important;
    overflow:visible !important;
  }

  .details-title-bougainvillea-slot{
    position:relative !important;
    z-index:30 !important;
    overflow:visible !important;
  }

  .details-title-bougainvillea-img{
    position:relative !important;
    z-index:31 !important;
  }

  .details-checkpoints{
    position:relative !important;
    z-index:5 !important;
  }


/* ===== details-title-bougainvillea-front-fix ===== */
/* Keep the title block above the checkpoint row. */
  .details-prep-head{
    position:relative !important;
    z-index:20 !important;
    overflow:visible !important;
  }

  /*
    Restore the crop window: this prevents the large transparent PNG
    canvas from visually extending beyond the intended underline band.
  */
  .details-title-bougainvillea-slot{
    position:relative !important;
    z-index:30 !important;
    overflow:hidden !important;
  }

  .details-title-bougainvillea-img{
    z-index:31 !important;
  }

  /* Keep the checkpoint row below the underline layer. */
  .details-checkpoints{
    position:relative !important;
    z-index:5 !important;
  }

  /*
    Let the cropped underline overlap the checkpoint area slightly
    without exposing the full transparent image canvas.
  */
  .details-title-bougainvillea-slot{
    margin-bottom:-12px !important;
  }

  @media(max-width:760px){
    .details-title-bougainvillea-slot{
      margin-bottom:-9px !important;
    }
  }


/* ===== details-bougainvillea-final-crop-fix ===== */
/*
    Crop and overlap are now separate:
    - this slot crops only transparent canvas
    - margins/z-index control layout overlap
  */
  .details-title-bougainvillea-slot{
    position:relative !important;
    z-index:30 !important;
    width:min(360px,62vw) !important;
    aspect-ratio:2.827778 !important;
    height:auto !important;
    margin:-3px auto -10px !important;
    overflow:hidden !important;
    line-height:0 !important;
  }

  .details-title-bougainvillea-img{
    position:absolute !important;
    z-index:31 !important;
    left:0 !important;
    top:0 !important;
    display:block !important;
    width:100.589391% !important;
    height:auto !important;
    max-width:none !important;
    margin:0 !important;
    transform:translate(-0.195312%, -21.972656%) !important;
    opacity:.96 !important;
    filter:none !important;
  }

  .details-prep-head{
    position:relative !important;
    z-index:20 !important;
    margin-bottom:12px !important;
    overflow:visible !important;
  }

  .details-checkpoints{
    position:relative !important;
    z-index:5 !important;
  }

  @media(max-width:760px){
    .details-title-bougainvillea-slot{
      width:min(285px,72vw) !important;
      margin:-2px auto -8px !important;
    }

    .details-prep-head{
      margin-bottom:10px !important;
    }
  }

  @media(max-width:480px){
    .details-title-bougainvillea-slot{
      width:min(255px,74vw) !important;
      margin-bottom:-7px !important;
    }
  }


/* ===== details-couple-accent-style ===== */
/* Tiny reused couple accent: decorative only, no extra layout height. */
  .details-prep-head{
    position:relative !important;
  }

  .details-couple-accent{
    position:absolute !important;
    z-index:42 !important;
    left:50% !important;
    bottom:-30px !important;
    width:40px !important;
    transform:translateX(-50%) !important;
    line-height:0 !important;
    pointer-events:none !important;
  }

  .details-couple-accent img{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }

  @media(max-width:760px){
    .details-couple-accent{
      width:36px !important;
      bottom:-27px !important;
    }
  }


/* ===== details-couple-accent-position-fix ===== */
.details-couple-accent{
    bottom:-7px !important;
  }

  @media(max-width:760px){
    .details-couple-accent{
      bottom:-5px !important;
    }
  }


/* ===== details-kicker-couple-style ===== */
/* Couple now lives beside the top Details kicker instead of near the circles. */
  .details-kicker-with-couple{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin-bottom:0 !important;
  }

  .details-kicker-with-couple .details-prep-kicker{
    margin:0 !important;
  }

  .details-kicker-couple{
    display:block !important;
    width:30px !important;
    height:auto !important;
    flex:0 0 auto !important;
  }

  /* Old under-plant accent is fully disabled in case any prior CSS remains. */
  .details-couple-accent{
    display:none !important;
  }

  @media(max-width:760px){
    .details-kicker-with-couple{
      gap:6px !important;
    }

    .details-kicker-couple{
      width:27px !important;
    }
  }


/* ===== details-kicker-couple-after-text ===== */
.details-kicker-with-couple{
    flex-direction:row-reverse !important;
  }


/* ===== details-bottom-signature-style ===== */
/* Move the small quest note + couple into a centered closing signature. */
  .details-bottom-signature{
    display:flex !important;
    justify-content:center !important;
    margin:34px auto 0 !important;
    text-align:center !important;
  }

  .details-bottom-signature .details-kicker-with-couple{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row-reverse !important;
    gap:8px !important;
    margin:0 !important;
  }

  .details-bottom-signature .details-prep-kicker{
    margin:0 !important;
  }

  .details-bottom-signature .details-kicker-couple{
    width:30px !important;
    height:auto !important;
    flex:0 0 auto !important;
  }

  @media(max-width:760px){
    .details-bottom-signature{
      margin-top:28px !important;
    }

    .details-bottom-signature .details-kicker-with-couple{
      gap:6px !important;
    }

    .details-bottom-signature .details-kicker-couple{
      width:27px !important;
    }
  }


/* ===== details-copy-polish ===== */
.detail-checkpoint p{
    max-width:280px !important;
  }

  .detail-checkpoint h3{
    margin-bottom:14px !important;
  }

  @media(max-width:760px){
    .detail-checkpoint p{
      max-width:none !important;
    }
  }


/* ===== details-copy-width-revert ===== */
/* Restore the previous, tighter paragraph width only. */
  .detail-checkpoint p{
    max-width:250px !important;
  }

  @media(max-width:760px){
    .detail-checkpoint p{
      max-width:none !important;
    }
  }


/* ===== hero-top-right-plant-fix ===== */
/* Keep the intro bougainvillea fully inside the hero image area. */
  .hero-v2 .bougainvillea{
    top:0 !important;
    right:0 !important;
  }

  @media(max-width:760px){
    .hero-v2 .bougainvillea{
      top:0 !important;
      right:0 !important;
    }
  }


/* ===== pixel-font-size-unify ===== */
/*
    Unify the small 8-bit / game-label text across the site.
    Bigger and more readable, while keeping the same visual style.
  */
  .small-pixel,
  .details-prep-kicker,
  .detail-label,
  .itinerary-meta,
  .wedding-v3 .section-eyebrow,
  .wedding-v3-date-label,
  .wedding-v3-quest,
  .checkpoint-label,
  .route-copy .small-pixel,
  .route-start .small-pixel,
  .wedding-v3 .small-pixel,
  .details-bottom-signature .details-prep-kicker{
    font-size: 8px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.035em !important;
  }

  @media (max-width: 760px){
    .small-pixel,
    .details-prep-kicker,
    .detail-label,
    .itinerary-meta,
    .wedding-v3 .section-eyebrow,
    .wedding-v3-date-label,
    .wedding-v3-quest,
    .checkpoint-label,
    .route-copy .small-pixel,
    .route-start .small-pixel,
    .wedding-v3 .small-pixel,
    .details-bottom-signature .details-prep-kicker{
      font-size: 7px !important;
      line-height: 1.4 !important;
    }
  }


/* ===== brand-vamosgamos-logo-style ===== */
.brand-monogram{
    min-width:188px !important;
    height:92px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  .brand-vamosgamos-logo{
    display:block !important;
    width:150px !important;
    height:auto !important;
    max-height:58px !important;
    object-fit:contain !important;
    flex:0 0 auto !important;
  }

  @media(max-width:760px){
    .brand-monogram{
      min-width:118px !important;
      height:70px !important;
    }

    .brand-vamosgamos-logo{
      width:96px !important;
      height:auto !important;
      max-height:38px !important;
    }
  }


/* ===== plan-ready-spacing ===== */
.plan-ready-line{
    margin-bottom:18px !important;
  }

  @media(max-width:760px){
    .plan-ready-line{
      margin-bottom:15px !important;
    }
  }


/* ===== plan-route-start-spacing-fix ===== */
/* Space the entire intro row away from checkpoint 01. */
  .route-start{
    margin-bottom:28px !important;
  }

  @media(max-width:760px){
    .route-start{
      margin-bottom:24px !important;
    }
  }


/* ===== plan-line-extend-to-ready ===== */
/*
    Keep the start-row spacing, but extend the existing timeline upward
    through that gap so it visually connects to "Ready? Let's go."
  */
  .route-events::before{
    top:-52px !important;
  }

  @media(max-width:760px){
    .route-events::before{
      top:-46px !important;
    }
  }


/* ===== plan-line-stop-before-ready-text ===== */
.route-events::before{
    top:-34px !important;
  }

  @media(max-width:760px){
    .route-events::before{
      top:-30px !important;
    }
  }


/* ===== plan-line-structural-fix ===== */
/*
    Use one shared gap value for both the layout spacing and the small
    connector below the Ready row. This avoids guessing with negative
    offsets on the main timeline.
  */
  .editorial-route{
    --route-start-gap:28px;
  }

  .route-start{
    margin-bottom:var(--route-start-gap) !important;
  }

  /* Main timeline begins normally at the events container. */
  .route-events::before{
    top:0 !important;
  }

  /*
    Separate bridge through only the gap below the start row.
    It begins 6px below the row, so it cannot run into the letters.
  */
  .route-start::after{
    content:"";
    position:absolute;
    left:50%;
    top:calc(100% + 6px);
    width:2px;
    height:calc(var(--route-start-gap) - 6px);
    transform:translateX(-50%);
    background:rgba(109,157,202,.45);
    pointer-events:none;
  }

  @media(max-width:760px){
    .editorial-route{
      --route-start-gap:24px;
    }

    .route-start::after{
      top:calc(100% + 5px);
      height:calc(var(--route-start-gap) - 5px);
    }
  }


/* ===== bonus-level-refinement ===== */
/* 1 + 4 + 6: make the intro and game panel feel like one composition. */
  .game-v2{
    padding-top:118px !important;
    padding-bottom:128px !important;
  }

  .game-v2 .section-copy{
    max-width:780px !important;
    margin-top:20px !important;
    line-height:1.42 !important;
  }

  /* 1 + 2 + 6: closer, smaller, and intentionally anchored to the same left edge. */
  .game-v2 .game-reveal-card{
    position:relative !important;
    isolation:isolate !important;
    max-width:680px !important;
    margin:34px auto 0 0 !important;
    padding:42px 38px 0 !important;
    border:1px solid rgba(21,55,91,.10) !important;
    border-radius:18px !important;
    box-shadow:0 16px 34px rgba(21,55,91,.12) !important;
    overflow:visible !important;
  }

  /* 3: a clean pink frame around the panel instead of the accidental one-sided block. */
  .game-v2 .game-reveal-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-8px;
    border:1px solid rgba(240,128,152,.34);
    border-radius:22px;
    pointer-events:none;
  }

  /* Keep the bottom game stripe contained by the rounded panel. */
  .game-v2 .game-ground-line{
    height:14px !important;
    margin:0 -38px !important;
    border-radius:0 0 17px 17px !important;
  }

  /* 5: make BONUS LEVEL UNLOCKED a supporting label, not a competing headline. */
  .game-v2 .bonus-pill.small-pixel{
    font-size:7px !important;
    line-height:1.35 !important;
    opacity:.82 !important;
    gap:7px !important;
  }

  .game-v2 .bonus-pill img{
    width:13px !important;
  }

  .game-v2 .pixel-couple-large{
    width:100px !important;
    margin:24px auto 18px !important;
  }

  /* 5: let THE QUEST / FOR THE RINGS clearly win the hierarchy. */
  .game-v2 .game-reveal-card h3{
    margin:0 !important;
    font-size:23px !important;
    line-height:1.5 !important;
    letter-spacing:.01em !important;
  }

  .game-v2 .game-reveal-card h3 span{
    display:inline-block !important;
    margin-top:2px !important;
  }

  .game-v2 .game-reveal-card p{
    max-width:440px !important;
    margin:18px auto 20px !important;
    line-height:1.5 !important;
  }

  .game-v2 .game-reveal-card > a{
    margin:4px 0 30px !important;
  }

  @media(max-width:760px){
    .game-v2{
      padding-top:96px !important;
      padding-bottom:104px !important;
    }

    .game-v2 .section-copy{
      max-width:100% !important;
      line-height:1.48 !important;
    }

    .game-v2 .game-reveal-card{
      max-width:none !important;
      width:100% !important;
      margin:28px 0 0 !important;
      padding:36px 24px 0 !important;
      border-radius:15px !important;
    }

    .game-v2 .game-reveal-card::before{
      inset:-6px;
      border-radius:19px;
    }

    .game-v2 .game-ground-line{
      margin:0 -24px !important;
      border-radius:0 0 14px 14px !important;
    }

    .game-v2 .pixel-couple-large{
      width:92px !important;
      margin:22px auto 16px !important;
    }

    .game-v2 .game-reveal-card h3{
      font-size:19px !important;
      line-height:1.55 !important;
    }
  }


/* ===== bonus-level-real-game-sprites ===== */
/* Remove any leftover visual influence from the old generic couple. */
  .game-v2 .pixel-couple-large{
    display:none !important;
  }

  /* Give the title room now that the tiny couple is gone. */
  .game-v2 .game-reveal-card h3{
    margin-top:26px !important;
  }

  /* Actual game sprites flank the CTA near the bottom of the panel. */
  .game-v2 .game-cta-stage{
    position:relative !important;
    z-index:3 !important;
    display:grid !important;
    grid-template-columns:132px auto 132px !important;
    align-items:end !important;
    justify-content:center !important;
    gap:22px !important;
    width:min(100%,560px) !important;
    margin:22px auto -8px !important;
  }

  .game-v2 .game-character-sprite{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:132px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:none !important;
    
    pointer-events:none !important;
    user-select:none !important;
  }

  .game-v2 .game-character-left{
    justify-self:end !important;
  }

  .game-v2 .game-character-right{
    justify-self:start !important;
  }

  .game-v2 .game-play-cta{
    align-self:center !important;
    display:inline-block !important;
    margin:0 0 18px !important;
    padding:16px 22px !important;
    background:var(--pink) !important;
    color:var(--navy-deep) !important;
    font-weight:700 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  .game-v2 .game-play-cta:hover{
    transform:translateY(-2px);
  }

  .game-v2 .game-ground-line{
    position:relative !important;
    z-index:2 !important;
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card h3{
      margin-top:22px !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:88px auto 88px !important;
      gap:10px !important;
      width:100% !important;
      margin:20px auto -6px !important;
    }

    .game-v2 .game-character-sprite{
      height:104px !important;
      
    }

    .game-v2 .game-play-cta{
      padding:14px 16px !important;
      margin-bottom:14px !important;
      font-size:13px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-cta-stage{
      grid-template-columns:70px minmax(128px,auto) 70px !important;
      gap:6px !important;
    }

    .game-v2 .game-character-sprite{
      height:88px !important;
    }

    .game-v2 .game-play-cta{
      padding:12px 12px !important;
      font-size:12px !important;
    }
  }


/* ===== bonus-level-blue-logo-layout ===== */
/* Alternate section colour: this is the blue section. */
  .game-v2{
    background:#6796BF !important;
    padding-top:118px !important;
    padding-bottom:126px !important;
  }

  /* Header composition: editorial copy on the left, actual game logo on the right. */
  .game-v2 .game-v2-header{
    display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr) !important;
    gap:56px !important;
    align-items:center !important;
    margin-bottom:34px !important;
  }

  .game-v2 .game-v2-heading-block{
    min-width:0 !important;
  }

  .game-v2 .section-eyebrow{
    color:var(--pink) !important;
  }

  .game-v2 .section-heading{
    color:#15375B !important;
  }

  .game-v2 .section-copy{
    max-width:690px !important;
    margin-top:18px !important;
    color:rgba(21,55,91,.88) !important;
  }

  .game-v2 .game-v2-logo-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  .game-v2 .game-v2-logo{
    display:block !important;
    width:min(100%,390px) !important;
    height:auto !important;
    object-fit:contain !important;
    filter:none !important;
  }

  /* The game panel becomes a light object sitting on the blue section. */
  .game-v2 .game-reveal-card{
    max-width:720px !important;
    margin:22px auto 0 !important;
    padding:42px 38px 0 !important;
    background:#fffaf3 !important;
    color:#15375B !important;
    border:1px solid rgba(255,255,255,.62) !important;
    border-radius:18px !important;
    box-shadow:0 16px 34px rgba(21,55,91,.16) !important;
    overflow:visible !important;
  }

  .game-v2 .game-reveal-card::before{
    border-color:rgba(255,216,225,.72) !important;
  }

  .game-v2 .bonus-pill{
    color:var(--pink) !important;
  }

  .game-v2 .bonus-pill img{
    filter:none !important;
  }

  .game-v2 .game-reveal-card h3{
    color:#15375B !important;
    margin-top:18px !important;
  }

  .game-v2 .game-reveal-card h3 span{
    color:var(--pink) !important;
  }

  .game-v2 .game-reveal-card p{
    color:rgba(21,55,91,.78) !important;
  }

  .game-v2 .game-play-cta{
    background:var(--pink) !important;
    color:#15375B !important;
    border-radius:0 !important;
  }

  .game-v2 .game-ground-line{
    background:linear-gradient(90deg,#6d9dca,#f08098,#6d9dca) !important;
  }

  @media(max-width:900px){
    .game-v2 .game-v2-header{
      grid-template-columns:1fr !important;
      gap:24px !important;
      margin-bottom:28px !important;
    }

    .game-v2 .game-v2-logo-wrap{
      justify-content:flex-start !important;
    }

    .game-v2 .game-v2-logo{
      width:min(100%,330px) !important;
    }

    .game-v2 .game-reveal-card{
      margin-top:18px !important;
    }
  }

  @media(max-width:760px){
    .game-v2{
      padding-top:96px !important;
      padding-bottom:104px !important;
    }

    .game-v2 .game-v2-header{
      gap:20px !important;
    }

    .game-v2 .game-v2-logo{
      width:min(82vw,300px) !important;
    }

    .game-v2 .game-reveal-card{
      padding:36px 24px 0 !important;
    }
  }


/* ===== bonus-level-compact-side-card ===== */
/* Compact two-column composition, similar in spirit to The Wedding section. */
  .game-v2{
    background:#6796BF !important;
    padding:88px 0 92px !important;
  }

  .game-v2 .game-v2-compact-layout{
    display:grid !important;
    grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr) !important;
    gap:64px !important;
    align-items:center !important;
  }

  .game-v2 .game-v2-heading-block{
    min-width:0 !important;
    align-self:center !important;
  }

  .game-v2 .section-eyebrow{
    color:var(--pink) !important;
  }

  .game-v2 .section-heading{
    color:#15375B !important;
    margin-bottom:20px !important;
  }

  .game-v2 .section-copy{
    max-width:520px !important;
    margin:0 !important;
    color:rgba(21,55,91,.88) !important;
    line-height:1.48 !important;
  }

  /* White game object sits directly beside the title block. */
  .game-v2 .game-reveal-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:28px 30px 0 !important;
    background:#fffaf3 !important;
    color:#15375B !important;
    border:1px solid rgba(255,255,255,.70) !important;
    border-radius:18px !important;
    box-shadow:0 14px 30px rgba(21,55,91,.14) !important;
    overflow:visible !important;
  }

  .game-v2 .game-reveal-card::before{
    inset:-7px !important;
    border:1px solid rgba(255,216,225,.70) !important;
    border-radius:22px !important;
  }

  .game-v2 .bonus-pill.small-pixel{
    margin-bottom:12px !important;
    font-size:7px !important;
    line-height:1.3 !important;
    color:var(--pink) !important;
    opacity:.88 !important;
  }

  /* The actual game logo completely replaces the text title. */
  .game-v2 .game-card-logo-wrap{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:2px auto 12px !important;
  }

  .game-v2 .game-card-logo-wrap .game-v2-logo{
    display:block !important;
    width:min(100%,330px) !important;
    height:auto !important;
    object-fit:contain !important;
    filter:none !important;
  }

  .game-v2 .game-reveal-card p{
    max-width:460px !important;
    margin:8px auto 14px !important;
    color:rgba(21,55,91,.80) !important;
    line-height:1.45 !important;
  }

  /* Keep the two actual game characters, but compact the CTA row. */
  .game-v2 .game-cta-stage{
    grid-template-columns:112px auto 112px !important;
    gap:16px !important;
    width:min(100%,520px) !important;
    margin:12px auto -6px !important;
  }

  .game-v2 .game-character-sprite{
    height:112px !important;
    
  }

  .game-v2 .game-play-cta{
    margin:0 0 14px !important;
    padding:14px 20px !important;
  }

  .game-v2 .game-ground-line{
    height:12px !important;
    margin:0 -30px !important;
    border-radius:0 0 17px 17px !important;
  }

  /* Old header-logo layout is no longer used. */
  .game-v2 .game-v2-header,
  .game-v2 > .game-v2-logo-wrap{
    display:none !important;
  }

  @media(max-width:1000px){
    .game-v2 .game-v2-compact-layout{
      grid-template-columns:minmax(0,.82fr) minmax(440px,1.18fr) !important;
      gap:40px !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(100%,290px) !important;
    }
  }

  @media(max-width:820px){
    .game-v2{
      padding:76px 0 84px !important;
    }

    .game-v2 .game-v2-compact-layout{
      grid-template-columns:1fr !important;
      gap:30px !important;
    }

    .game-v2 .section-copy{
      max-width:620px !important;
    }

    .game-v2 .game-reveal-card{
      max-width:680px !important;
      margin:0 auto !important;
    }
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card{
      padding:24px 22px 0 !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(86vw,270px) !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:82px minmax(130px,auto) 82px !important;
      gap:8px !important;
    }

    .game-v2 .game-character-sprite{
      height:94px !important;
    }

    .game-v2 .game-ground-line{
      margin:0 -22px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-cta-stage{
      grid-template-columns:64px minmax(122px,auto) 64px !important;
      gap:5px !important;
    }

    .game-v2 .game-character-sprite{
      height:82px !important;
    }

    .game-v2 .game-play-cta{
      padding:12px 10px !important;
      font-size:12px !important;
    }
  }


/* ===== bonus-level-card-polish ===== */
/* Make the white game card more compact and intentional. */
  .game-v2 .game-reveal-card{
    position:relative !important;
    padding:24px 28px 0 !important;
    border:1px solid rgba(21,55,91,.12) !important;
    border-radius:16px !important;
    box-shadow:0 10px 24px rgba(21,55,91,.10) !important;
    overflow:visible !important;
  }

  /* Remove the extra outer frame/double-outline effect. */
  .game-v2 .game-reveal-card::before{
    display:none !important;
    content:none !important;
  }

  /* Small badge instead of another centered headline. */
  .game-v2 .bonus-pill.small-pixel{
    position:absolute !important;
    z-index:4 !important;
    top:16px !important;
    left:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    margin:0 !important;
    padding:6px 8px !important;
    border:1px solid rgba(240,128,152,.30) !important;
    border-radius:999px !important;
    background:rgba(240,128,152,.07) !important;
    font-size:6.6px !important;
    line-height:1 !important;
    opacity:.92 !important;
  }

  .game-v2 .bonus-pill img{
    width:11px !important;
    height:auto !important;
  }

  /* Let the actual game logo become the clear focal point. */
  .game-v2 .game-card-logo-wrap{
    margin:4px auto 10px !important;
    padding-top:8px !important;
  }

  .game-v2 .game-card-logo-wrap .game-v2-logo{
    width:min(100%,400px) !important;
    max-height:150px !important;
    object-fit:contain !important;
  }

  /* Shorter, calmer middle copy. */
  .game-v2 .game-reveal-card p{
    max-width:520px !important;
    margin:4px auto 10px !important;
    font-size:15px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }

  /* Bigger characters and a tighter, more deliberate CTA row. */
  .game-v2 .game-cta-stage{
    grid-template-columns:145px auto 145px !important;
    gap:18px !important;
    width:min(100%,590px) !important;
    margin:8px auto -5px !important;
    align-items:end !important;
  }

  .game-v2 .game-character-sprite{
    height:150px !important;
    
  }

  .game-v2 .game-play-cta{
    margin:0 0 20px !important;
    padding:15px 22px !important;
    font-size:16px !important;
    line-height:1 !important;
  }

  /* Keep only a subtle bottom accent, not a heavy frame. */
  .game-v2 .game-ground-line{
    height:8px !important;
    margin:0 -28px !important;
    border-radius:0 0 15px 15px !important;
  }

  @media(max-width:1000px){
    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(100%,360px) !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:128px auto 128px !important;
      gap:14px !important;
    }

    .game-v2 .game-character-sprite{
      height:138px !important;
    }
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card{
      padding:22px 20px 0 !important;
    }

    .game-v2 .bonus-pill.small-pixel{
      top:12px !important;
      left:12px !important;
      font-size:6px !important;
      padding:5px 7px !important;
    }

    .game-v2 .game-card-logo-wrap{
      padding-top:16px !important;
      margin-bottom:8px !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(86vw,320px) !important;
      max-height:128px !important;
    }

    .game-v2 .game-reveal-card p{
      margin-bottom:8px !important;
      font-size:14px !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:92px minmax(136px,auto) 92px !important;
      gap:8px !important;
      margin-top:5px !important;
    }

    .game-v2 .game-character-sprite{
      height:112px !important;
    }

    .game-v2 .game-play-cta{
      margin-bottom:15px !important;
      padding:13px 14px !important;
      font-size:13px !important;
    }

    .game-v2 .game-ground-line{
      margin:0 -20px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-cta-stage{
      grid-template-columns:72px minmax(120px,auto) 72px !important;
      gap:5px !important;
    }

    .game-v2 .game-character-sprite{
      height:94px !important;
    }

    .game-v2 .game-play-cta{
      padding:12px 10px !important;
      font-size:12px !important;
    }
  }


/* ===== bonus-level-card-refined-v2 ===== */
/* 1) Button: intentional game CTA, but still polished. */
  .game-v2 .game-play-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:52px !important;
    padding:15px 22px !important;
    margin:0 0 24px !important;
    border:1px solid rgba(21,55,91,.12) !important;
    border-radius:8px !important;
    background:var(--pink) !important;
    color:#15375B !important;
    font-family:'Press Start 2P',monospace !important;
    font-size:8px !important;
    line-height:1.35 !important;
    letter-spacing:.02em !important;
    font-weight:400 !important;
    text-decoration:none !important;
    box-shadow:0 5px 0 rgba(21,55,91,.16) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
  }

  .game-v2 .game-play-cta:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 7px 0 rgba(21,55,91,.14) !important;
  }

  /* 2) Float the characters inside the card instead of planting them on its edge. */
  .game-v2 .game-cta-stage{
    align-items:center !important;
    margin:24px auto 20px !important;
    padding-bottom:10px !important;
  }

  .game-v2 .game-character-sprite{
    height:146px !important;
    
  }

  .game-v2 .game-character-left,
  .game-v2 .game-character-right{
    align-self:center !important;
  }

  /* Remove the visual "floor" so the sprites genuinely float. */
  .game-v2 .game-ground-line{
    display:none !important;
  }

  /* 3 + 4) New sentence + typography that matches the editorial site language. */
  .game-v2 .game-reveal-card p{
    max-width:560px !important;
    margin:2px auto 0 !important;
    color:#15375B !important;
    font-family:'Cormorant Garamond',Georgia,serif !important;
    font-style:italic !important;
    font-weight:500 !important;
    font-size:21px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }

  /* 5) Better vertical rhythm: logo closer to copy, copy farther from CTA row. */
  .game-v2 .game-card-logo-wrap{
    margin:4px auto 4px !important;
    padding-top:8px !important;
  }

  .game-v2 .game-card-logo-wrap .game-v2-logo{
    width:min(100%,400px) !important;
  }

  @media(max-width:1000px){
    .game-v2 .game-reveal-card p{
      font-size:19px !important;
      max-width:500px !important;
    }

    .game-v2 .game-character-sprite{
      height:136px !important;
    }
  }

  @media(max-width:760px){
    .game-v2 .game-play-cta{
      min-height:46px !important;
      padding:13px 14px !important;
      font-size:7px !important;
      margin-bottom:18px !important;
      border-radius:7px !important;
    }

    .game-v2 .game-reveal-card p{
      font-size:18px !important;
      line-height:1.4 !important;
      margin-top:2px !important;
    }

    .game-v2 .game-cta-stage{
      margin-top:20px !important;
      margin-bottom:16px !important;
      padding-bottom:8px !important;
    }

    .game-v2 .game-character-sprite{
      height:108px !important;
      
    }
  }

  @media(max-width:430px){
    .game-v2 .game-play-cta{
      min-height:42px !important;
      padding:11px 9px !important;
      font-size:6px !important;
    }

    .game-v2 .game-reveal-card p{
      font-size:17px !important;
    }

    .game-v2 .game-character-sprite{
      height:92px !important;
    }
  }


/* ===== bonus-level-character-float ===== */
@keyframes bonusCharacterFloatLeft{
    0%,100%{ transform:translateY(-2px); }
    50%{ transform:translateY(-11px); }
  }

  @keyframes bonusCharacterFloatRight{
    0%,100%{ transform:translateY(-4px); }
    50%{ transform:translateY(-13px); }
  }

  .game-v2 .game-character-left{
    animation:bonusCharacterFloatLeft 2.8s ease-in-out infinite !important;
  }

  .game-v2 .game-character-right{
    animation:bonusCharacterFloatRight 3.2s ease-in-out infinite !important;
    animation-delay:.25s !important;
  }

  @media (prefers-reduced-motion: reduce){
    .game-v2 .game-character-left,
    .game-v2 .game-character-right{
      animation:none !important;
    }
  }


/* ===== bonus-level-copy-below-characters ===== */
/* Copy now sits below the complete sprite + CTA row. */
  .game-v2 .game-card-copy.game-card-copy-pixel{
    max-width:520px !important;
    margin:18px auto 28px !important;
    color:#15375B !important;
    font-family:'Press Start 2P',monospace !important;
    font-style:normal !important;
    font-weight:400 !important;
    font-size:7px !important;
    line-height:1.65 !important;
    letter-spacing:.025em !important;
    text-align:center !important;
    text-transform:none !important;
  }

  /* Keep comfortable space between the floating row and the new caption. */
  .game-v2 .game-cta-stage{
    margin-bottom:0 !important;
  }

  @media(max-width:760px){
    .game-v2 .game-card-copy.game-card-copy-pixel{
      max-width:360px !important;
      margin:16px auto 24px !important;
      font-size:6.5px !important;
      line-height:1.65 !important;
    }
  }


/* ===== bonus-level-copy-bigger ===== */
.game-v2 .game-card-copy.game-card-copy-pixel{
    font-size:8px !important;
    line-height:1.7 !important;
  }

  @media(max-width:760px){
    .game-v2 .game-card-copy.game-card-copy-pixel{
      font-size:7.4px !important;
      line-height:1.7 !important;
    }
  }


/* ===== bonus-level-depth-polish ===== */
/* 1) Layered card depth: soft navy lift + subtle pink offset underneath. */
  .game-v2 .game-reveal-card{
    background:
      radial-gradient(circle at 50% 26%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.32) 25%, rgba(255,250,243,0) 52%),
      #fffaf3 !important;
    box-shadow:
      0 18px 38px rgba(21,55,91,.18),
      8px 10px 0 rgba(240,128,152,.14),
      inset 0 1px 0 rgba(255,255,255,.82) !important;
  }

  /* 2) Soft spotlight behind the logo, using CSS only. */
  .game-v2 .game-card-logo-wrap{
    position:relative !important;
    isolation:isolate !important;
  }

  .game-v2 .game-card-logo-wrap::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    top:50%;
    width:78%;
    height:82%;
    transform:translate(-50%,-48%);
    border-radius:50%;
    background:radial-gradient(
      ellipse at center,
      rgba(255,255,255,.88) 0%,
      rgba(255,240,224,.44) 44%,
      rgba(255,250,243,0) 74%
    );
    filter:blur(10px);
    pointer-events:none;
  }

  /* 3) Soft elliptical shadows beneath the floating characters. */
  .game-v2 .game-cta-stage{
    position:relative !important;
    isolation:isolate !important;
  }

  .game-v2 .game-cta-stage::before,
  .game-v2 .game-cta-stage::after{
    content:"";
    position:absolute;
    z-index:-1;
    bottom:18px;
    width:78px;
    height:14px;
    border-radius:50%;
    background:rgba(21,55,91,.16);
    filter:blur(6px);
    pointer-events:none;
  }

  .game-v2 .game-cta-stage::before{
    left:10%;
  }

  .game-v2 .game-cta-stage::after{
    right:10%;
  }

  /* 4) More tactile / dimensional game CTA. */
  .game-v2 .game-play-cta{
    background:
      linear-gradient(
        to bottom,
        #f58aa2 0%,
        #ef7f98 55%,
        #e86f8c 100%
      ) !important;
    border:1px solid rgba(21,55,91,.15) !important;
    box-shadow:
      0 6px 0 rgba(21,55,91,.20),
      0 10px 18px rgba(21,55,91,.14),
      inset 0 1px 0 rgba(255,255,255,.38) !important;
    transform:translateY(0) !important;
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease !important;
  }

  .game-v2 .game-play-cta:hover{
    transform:translateY(-2px) !important;
    box-shadow:
      0 8px 0 rgba(21,55,91,.18),
      0 12px 20px rgba(21,55,91,.16),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
    filter:saturate(1.04) !important;
  }

  .game-v2 .game-play-cta:active{
    transform:translateY(4px) !important;
    box-shadow:
      0 2px 0 rgba(21,55,91,.20),
      0 5px 10px rgba(21,55,91,.12),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  @media(max-width:760px){
    .game-v2 .game-cta-stage::before,
    .game-v2 .game-cta-stage::after{
      width:58px;
      height:11px;
      bottom:15px;
      filter:blur(5px);
    }

    .game-v2 .game-cta-stage::before{
      left:8%;
    }

    .game-v2 .game-cta-stage::after{
      right:8%;
    }
  }


/* ===== bonus-level-character-shadow-structural-fix ===== */
/* Disable the old shadows positioned from the full CTA row. */
  .game-v2 .game-cta-stage::before,
  .game-v2 .game-cta-stage::after{
    display:none !important;
    content:none !important;
  }

  /*
    Each character now owns its own positioning context.
    The wrapper stays still; only the image floats.
  */
  .game-v2 .game-character-wrap{
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    width:100% !important;
    min-height:178px !important;
    padding-bottom:26px !important;
  }

  .game-v2 .game-character-wrap-left{
    justify-self:end !important;
  }

  .game-v2 .game-character-wrap-right{
    justify-self:start !important;
  }

  /* Shadow is always centered under the actual character wrapper. */
  .game-v2 .game-character-wrap::after{
    content:"" !important;
    position:absolute !important;
    z-index:0 !important;
    left:50% !important;
    bottom:17px !important;
    width:72px !important;
    height:11px !important;
    border-radius:50% !important;
    background:rgba(21,55,91,.18) !important;
    filter:blur(5px) !important;
    transform:translateX(-50%) scaleX(1) !important;
    pointer-events:none !important;
  }

  .game-v2 .game-character-sprite{
    position:relative !important;
    z-index:1 !important;
    margin:0 !important;
  }

  /*
    The shadow subtly contracts/fades as the matching sprite rises,
    reinforcing the floating effect without moving the shadow itself.
  */
  @keyframes bonusShadowFloatLeft{
    0%,100%{
      transform:translateX(-50%) scaleX(1);
      opacity:.95;
    }
    50%{
      transform:translateX(-50%) scaleX(.78);
      opacity:.58;
    }
  }

  @keyframes bonusShadowFloatRight{
    0%,100%{
      transform:translateX(-50%) scaleX(1);
      opacity:.95;
    }
    50%{
      transform:translateX(-50%) scaleX(.78);
      opacity:.58;
    }
  }

  .game-v2 .game-character-wrap-left::after{
    animation:bonusShadowFloatLeft 2.8s ease-in-out infinite !important;
  }

  .game-v2 .game-character-wrap-right::after{
    animation:bonusShadowFloatRight 3.2s ease-in-out infinite !important;
    animation-delay:.25s !important;
  }

  @media(max-width:760px){
    .game-v2 .game-character-wrap{
      min-height:136px !important;
      padding-bottom:22px !important;
    }

    .game-v2 .game-character-wrap::after{
      bottom:14px !important;
      width:56px !important;
      height:9px !important;
      filter:blur(4px) !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-character-wrap{
      min-height:116px !important;
      padding-bottom:20px !important;
    }

    .game-v2 .game-character-wrap::after{
      bottom:13px !important;
      width:48px !important;
      height:8px !important;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .game-v2 .game-character-wrap-left::after,
    .game-v2 .game-character-wrap-right::after{
      animation:none !important;
    }
  }


/* ===== bonus-level-launch-screen ===== */
/* Turn the card into one compact launch-screen composition. */
  .game-v2 .game-reveal-card{
    padding:22px 30px 24px !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* Badge becomes a tiny centered game-state label above the logo. */
  .game-v2 .bonus-pill.small-pixel{
    position:static !important;
    display:inline-flex !important;
    width:max-content !important;
    margin:0 auto 4px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:6.3px !important;
    line-height:1.2 !important;
    opacity:.76 !important;
  }

  .game-v2 .bonus-pill img{
    width:10px !important;
  }

  /* Big focal logo at the top, with much less empty space around it. */
  .game-v2 .game-card-logo-wrap{
    margin:0 auto 2px !important;
    padding:0 !important;
  }

  .game-v2 .game-card-logo-wrap .game-v2-logo{
    width:min(100%,410px) !important;
    max-height:142px !important;
  }

  /* Helper line sits directly under the logo as a quiet caption. */
  .game-v2 .game-card-copy.game-card-copy-launch{
    max-width:470px !important;
    margin:2px auto 12px !important;
    color:rgba(21,55,91,.76) !important;
    font-family:'Cormorant Garamond',Georgia,serif !important;
    font-style:italic !important;
    font-weight:500 !important;
    font-size:16px !important;
    line-height:1.3 !important;
    letter-spacing:0 !important;
    text-align:center !important;
  }

  /* One compact horizontal launch row: Ilias / CTA / George. */
  .game-v2 .game-cta-stage{
    display:grid !important;
    grid-template-columns:118px minmax(190px,240px) 118px !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    width:min(100%,560px) !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  .game-v2 .game-character-wrap{
    min-height:132px !important;
    padding-bottom:18px !important;
    align-items:center !important;
  }

  .game-v2 .game-character-sprite{
    height:118px !important;
  }

  /* Shadows stay directly under each character but remain subtle. */
  .game-v2 .game-character-wrap::after{
    bottom:10px !important;
    width:52px !important;
    height:8px !important;
    opacity:.58 !important;
    filter:blur(4px) !important;
  }

  /* Button becomes the visual launch control in the middle. */
  .game-v2 .game-play-cta{
    width:100% !important;
    min-height:52px !important;
    margin:0 !important;
    padding:15px 18px !important;
    border-radius:9px !important;
    font-size:8px !important;
  }

  /* No bottom footer line / spare whitespace. */
  .game-v2 .game-ground-line{
    display:none !important;
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card{
      padding:20px 18px 22px !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(88vw,320px) !important;
      max-height:118px !important;
    }

    .game-v2 .game-card-copy.game-card-copy-launch{
      max-width:360px !important;
      margin-bottom:10px !important;
      font-size:15px !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:82px minmax(145px,1fr) 82px !important;
      gap:9px !important;
      width:100% !important;
      max-width:420px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:108px !important;
      padding-bottom:16px !important;
    }

    .game-v2 .game-character-sprite{
      height:94px !important;
    }

    .game-v2 .game-character-wrap::after{
      bottom:9px !important;
      width:44px !important;
      height:7px !important;
    }

    .game-v2 .game-play-cta{
      min-height:46px !important;
      padding:13px 10px !important;
      font-size:7px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-cta-stage{
      grid-template-columns:66px minmax(128px,1fr) 66px !important;
      gap:5px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:92px !important;
      padding-bottom:14px !important;
    }

    .game-v2 .game-character-sprite{
      height:80px !important;
    }

    .game-v2 .game-play-cta{
      min-height:42px !important;
      padding:11px 8px !important;
      font-size:6px !important;
    }
  }


/* ===== bonus-level-layout-refined ===== */
/* 1) Make the left editorial block smaller so the game panel is the main event. */
  .game-v2 .game-v2-compact-layout{
    grid-template-columns:minmax(0,.68fr) minmax(560px,1.32fr) !important;
    gap:46px !important;
  }

  .game-v2 .section-heading{
    font-size:clamp(58px,5vw,92px) !important;
    line-height:.95 !important;
    max-width:430px !important;
  }

  .game-v2 .section-copy{
    max-width:390px !important;
    font-size:20px !important;
    line-height:1.42 !important;
  }

  /* 3) Less card-like: wider, slightly shorter-looking, tighter radius, softer depth. */
  .game-v2 .game-reveal-card{
    border-radius:9px !important;
    padding:18px 26px 20px !important;
    box-shadow:
      0 10px 24px rgba(21,55,91,.11),
      5px 6px 0 rgba(240,128,152,.08) !important;
  }

  /* 5) Larger logo and a touch higher. */
  .game-v2 .game-card-logo-wrap{
    margin:-4px auto 0 !important;
  }

  .game-v2 .game-card-logo-wrap .game-v2-logo{
    width:min(100%,455px) !important;
    max-height:154px !important;
  }

  /* 6) Quieter helper sentence using the site's normal body language. */
  .game-v2 .game-card-copy.game-card-copy-launch{
    max-width:470px !important;
    margin:0 auto 12px !important;
    color:rgba(21,55,91,.68) !important;
    font-family:inherit !important;
    font-style:normal !important;
    font-weight:400 !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* 7) Pull characters toward the CTA so the lower row reads as one unit. */
  .game-v2 .game-cta-stage{
    grid-template-columns:104px 180px 104px !important;
    gap:10px !important;
    width:max-content !important;
    max-width:100% !important;
    margin:2px auto 0 !important;
  }

  .game-v2 .game-character-wrap{
    min-height:122px !important;
    padding-bottom:10px !important;
  }

  .game-v2 .game-character-sprite{
    height:112px !important;
  }

  /* 8) Narrower button. */
  .game-v2 .game-play-cta{
    width:180px !important;
    min-height:48px !important;
    padding:13px 14px !important;
    margin:0 !important;
  }

  /* 9) Remove character shadows entirely. */
  .game-v2 .game-character-wrap::after{
    display:none !important;
    content:none !important;
    animation:none !important;
  }

  @media(max-width:1000px){
    .game-v2 .game-v2-compact-layout{
      grid-template-columns:minmax(0,.72fr) minmax(500px,1.28fr) !important;
      gap:34px !important;
    }

    .game-v2 .section-heading{
      font-size:clamp(54px,6vw,78px) !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(100%,420px) !important;
    }
  }

  @media(max-width:820px){
    .game-v2 .game-v2-compact-layout{
      grid-template-columns:1fr !important;
      gap:26px !important;
    }

    .game-v2 .section-heading{
      max-width:none !important;
    }

    .game-v2 .section-copy{
      max-width:560px !important;
    }

    .game-v2 .game-reveal-card{
      max-width:700px !important;
      margin:0 auto !important;
    }
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card{
      border-radius:8px !important;
      padding:17px 16px 18px !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(88vw,340px) !important;
      max-height:124px !important;
    }

    .game-v2 .game-card-copy.game-card-copy-launch{
      max-width:340px !important;
      font-size:13px !important;
      margin-bottom:10px !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:78px 150px 78px !important;
      gap:6px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:100px !important;
      padding-bottom:8px !important;
    }

    .game-v2 .game-character-sprite{
      height:90px !important;
    }

    .game-v2 .game-play-cta{
      width:150px !important;
      min-height:44px !important;
      font-size:7px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-cta-stage{
      grid-template-columns:62px 136px 62px !important;
      gap:4px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:86px !important;
    }

    .game-v2 .game-character-sprite{
      height:76px !important;
    }

    .game-v2 .game-play-cta{
      width:136px !important;
      min-height:40px !important;
      font-size:6px !important;
      padding:10px 8px !important;
    }
  }


/* ===== bonus-level-concept-frame-button ===== */
/*
    GAME PANEL
    Code-only interpretation of the approved concept:
    warm paper interior + layered blue frame + stepped corner details.
  */
  .game-v2 .game-reveal-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
    padding:30px 38px 28px !important;

    background:
      radial-gradient(circle at 50% 23%,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.48) 30%,
        rgba(255,255,255,0) 58%),
      linear-gradient(180deg,#fffdf7 0%,#fff8ed 100%) !important;

    border:0 !important;
    border-radius:3px !important;

    box-shadow:
      0 18px 34px rgba(21,55,91,.16),
      0 4px 0 rgba(21,55,91,.05) !important;
  }

  /* Neutralize older generated card outlines. */
  .game-v2 .game-reveal-card::before,
  .game-v2 .game-reveal-card::after{
    display:none !important;
    content:none !important;
  }

  /* Outer decorative frame. */
  .game-v2 .game-pixel-frame{
    position:absolute !important;
    z-index:20 !important;
    pointer-events:none !important;
    inset:8px !important;

    border:2px solid rgba(112,158,197,.62) !important;
    border-radius:2px !important;

    box-shadow:
      0 0 0 4px rgba(255,255,255,.76),
      0 0 0 5px rgba(112,158,197,.26),
      inset 0 0 0 1px rgba(255,255,255,.82) !important;
  }

  /* Second inner hairline gives the frame the layered game-window look. */
  .game-v2 .game-pixel-frame::before{
    content:"" !important;
    position:absolute !important;
    inset:8px !important;
    border:1px solid rgba(112,158,197,.34) !important;
    pointer-events:none !important;
  }

  /*
    Stepped corner plates. These are CSS shapes, not images.
    The warm fill visually cuts the straight frame into pixel-style corners.
  */
  .game-v2 .game-pixel-frame::after{
    content:"" !important;
    position:absolute !important;
    inset:-3px !important;
    pointer-events:none !important;
    background:
      linear-gradient(135deg,
        #fffaf0 0 13px,
        rgba(112,158,197,.55) 13px 15px,
        transparent 15px) top left / 34px 34px no-repeat,
      linear-gradient(225deg,
        #fffaf0 0 13px,
        rgba(112,158,197,.55) 13px 15px,
        transparent 15px) top right / 34px 34px no-repeat,
      linear-gradient(45deg,
        #fffaf0 0 13px,
        rgba(112,158,197,.55) 13px 15px,
        transparent 15px) bottom left / 34px 34px no-repeat,
      linear-gradient(315deg,
        #fffaf0 0 13px,
        rgba(112,158,197,.55) 13px 15px,
        transparent 15px) bottom right / 34px 34px no-repeat;
  }

  /* Small corner ornaments / central frame sparks. */
  .game-v2 .game-frame-ornament,
  .game-v2 .game-frame-spark{
    position:absolute !important;
    z-index:2 !important;
    display:grid !important;
    place-items:center !important;
    font-family:'Press Start 2P',monospace !important;
    line-height:1 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.8) !important;
  }

  .game-v2 .game-frame-ornament{
    color:#ef6f8d !important;
    font-size:15px !important;
  }

  .game-v2 .game-frame-tl{ top:7px !important; left:9px !important; }
  .game-v2 .game-frame-tr{ top:7px !important; right:9px !important; }
  .game-v2 .game-frame-bl{ bottom:7px !important; left:9px !important; }
  .game-v2 .game-frame-br{ bottom:7px !important; right:9px !important; }

  .game-v2 .game-frame-spark{
    color:#8fd4e6 !important;
    font-size:12px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    padding:0 10px !important;
    background:#fffaf0 !important;
  }

  .game-v2 .game-frame-spark-top{ top:-8px !important; }
  .game-v2 .game-frame-spark-bottom{ bottom:-8px !important; }

  /* Keep real content safely above the decorative frame. */
  .game-v2 .bonus-pill,
  .game-v2 .game-card-logo-wrap,
  .game-v2 .game-card-copy,
  .game-v2 .game-cta-stage{
    position:relative !important;
    z-index:4 !important;
  }

  /*
    PLAY BUTTON
    Pink pixel/beveled control based on the concept image.
  */
  .game-v2 .game-play-cta{
    position:relative !important;
    overflow:hidden !important;

    width:196px !important;
    min-height:54px !important;
    padding:15px 18px !important;
    margin:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fffaf4 !important;
    background:
      linear-gradient(180deg,
        #f68aa4 0%,
        #ed718f 56%,
        #df5e80 100%) !important;

    border:2px solid #ffc4d1 !important;
    border-radius:3px !important;

    clip-path:polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      8px 100%,
      0 calc(100% - 8px),
      0 8px
    ) !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:8px !important;
    line-height:1.4 !important;
    font-weight:400 !important;
    letter-spacing:.025em !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    text-shadow:0 1px 0 rgba(122,38,68,.25) !important;

    box-shadow:
      0 8px 0 rgba(21,55,91,.18),
      0 14px 24px rgba(21,55,91,.15),
      inset 0 2px 0 rgba(255,255,255,.38),
      inset 0 -3px 0 rgba(151,49,82,.14) !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease !important;
  }

  /* Fine inset line like the button in the concept. */
  .game-v2 .game-play-cta::before{
    content:"" !important;
    position:absolute !important;
    pointer-events:none !important;
    inset:4px !important;
    border:1px solid rgba(255,246,248,.55) !important;
    clip-path:polygon(
      5px 0,
      calc(100% - 5px) 0,
      100% 5px,
      100% calc(100% - 5px),
      calc(100% - 5px) 100%,
      5px 100%,
      0 calc(100% - 5px),
      0 5px
    ) !important;
  }

  /* Tiny corner glints make it feel like a game UI control rather than a web rectangle. */
  .game-v2 .game-play-cta::after{
    content:"✦" !important;
    position:absolute !important;
    top:5px !important;
    left:7px !important;
    color:rgba(255,255,255,.72) !important;
    font-family:'Press Start 2P',monospace !important;
    font-size:5px !important;
    line-height:1 !important;
    pointer-events:none !important;
  }

  .game-v2 .game-play-cta:hover{
    transform:translateY(-2px) !important;
    filter:saturate(1.05) brightness(1.02) !important;
    box-shadow:
      0 10px 0 rgba(21,55,91,.16),
      0 16px 28px rgba(21,55,91,.17),
      inset 0 2px 0 rgba(255,255,255,.42),
      inset 0 -3px 0 rgba(151,49,82,.12) !important;
  }

  .game-v2 .game-play-cta:active{
    transform:translateY(5px) !important;
    box-shadow:
      0 3px 0 rgba(21,55,91,.18),
      0 7px 12px rgba(21,55,91,.12),
      inset 0 2px 0 rgba(255,255,255,.30) !important;
  }

  /* The old bottom stripe is not part of the approved concept treatment. */
  .game-v2 .game-ground-line{
    display:none !important;
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card{
      padding:25px 20px 23px !important;
    }

    .game-v2 .game-pixel-frame{
      inset:6px !important;
    }

    .game-v2 .game-pixel-frame::before{
      inset:6px !important;
    }

    .game-v2 .game-frame-ornament{
      font-size:12px !important;
    }

    .game-v2 .game-play-cta{
      width:150px !important;
      min-height:46px !important;
      padding:12px 10px !important;
      font-size:6.7px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-reveal-card{
      padding:22px 13px 20px !important;
    }

    .game-v2 .game-play-cta{
      width:134px !important;
      min-height:42px !important;
      padding:10px 8px !important;
      font-size:5.8px !important;
    }

    .game-v2 .game-frame-ornament{
      font-size:10px !important;
    }
  }


/* ===== bonus-level-interior-scaled ===== */
/* 1) Increase the overall visual presence of the interior composition. */
  .game-v2 .game-reveal-card{
    padding:24px 34px 24px !important;
  }

  .game-v2 .game-card-logo-wrap{
    margin:-4px auto 0 !important;
  }

  .game-v2 .game-card-logo-wrap .game-v2-logo{
    width:min(100%,500px) !important;
    max-height:170px !important;
  }

  /* 2) Pull the helper line closer to the logo, then create more separation below it. */
  .game-v2 .game-card-copy.game-card-copy-launch{
    max-width:520px !important;
    margin:-2px auto 20px !important;
    font-size:15px !important;
    line-height:1.35 !important;
  }

  /* 3) Larger sprites, pulled inward toward the CTA. */
  .game-v2 .game-cta-stage{
    grid-template-columns:128px 220px 128px !important;
    gap:8px !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  .game-v2 .game-character-wrap{
    min-height:142px !important;
    padding-bottom:8px !important;
  }

  .game-v2 .game-character-sprite{
    height:132px !important;
  }

  .game-v2 .game-character-wrap-left{
    transform:translateX(8px) !important;
  }

  .game-v2 .game-character-wrap-right{
    transform:translateX(-8px) !important;
  }

  /* 4) Slightly larger CTA while preserving the existing pixel/beveled treatment. */
  .game-v2 .game-play-cta{
    width:220px !important;
    min-height:60px !important;
    padding:17px 20px !important;
    font-size:8.5px !important;
  }

  @media(max-width:1000px){
    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(100%,455px) !important;
      max-height:158px !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:116px 205px 116px !important;
      gap:7px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:132px !important;
    }

    .game-v2 .game-character-sprite{
      height:122px !important;
    }

    .game-v2 .game-play-cta{
      width:205px !important;
      min-height:56px !important;
    }
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card{
      padding:22px 18px 22px !important;
    }

    .game-v2 .game-card-logo-wrap .game-v2-logo{
      width:min(88vw,360px) !important;
      max-height:132px !important;
    }

    .game-v2 .game-card-copy.game-card-copy-launch{
      max-width:360px !important;
      margin:-1px auto 16px !important;
      font-size:13px !important;
    }

    .game-v2 .game-cta-stage{
      grid-template-columns:86px 166px 86px !important;
      gap:5px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:108px !important;
      padding-bottom:6px !important;
    }

    .game-v2 .game-character-sprite{
      height:100px !important;
    }

    .game-v2 .game-character-wrap-left{
      transform:translateX(5px) !important;
    }

    .game-v2 .game-character-wrap-right{
      transform:translateX(-5px) !important;
    }

    .game-v2 .game-play-cta{
      width:166px !important;
      min-height:50px !important;
      padding:13px 11px !important;
      font-size:7px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-cta-stage{
      grid-template-columns:68px 142px 68px !important;
      gap:3px !important;
    }

    .game-v2 .game-character-wrap{
      min-height:92px !important;
    }

    .game-v2 .game-character-sprite{
      height:84px !important;
    }

    .game-v2 .game-play-cta{
      width:142px !important;
      min-height:44px !important;
      padding:11px 8px !important;
      font-size:6px !important;
    }
  }


/* ===== kenney-pixel-adventure-embedded-frame ===== */
/*
    Real Kenney UI Pack - Pixel Adventure frame.
    The PNG is embedded directly into this HTML.
  */
  .game-v2 .kenney-game-panel{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    /* Give the real frame enough visual room around the content. */
    padding:34px 48px 38px !important;

    /* Keep only a subtle site-level lift. */
    box-shadow:0 14px 28px rgba(21,55,91,.12) !important;
  }

  /* Remove the older hand-built frame layers completely. */
  .game-v2 .kenney-game-panel::before,
  .game-v2 .kenney-game-panel::after{
    display:none !important;
    content:none !important;
  }

  .game-v2 .game-pixel-frame{
    display:none !important;
  }

  .game-v2 .kenney-game-panel-frame{
    position:absolute !important;
    z-index:0 !important;

    /*
      Stretch Kenney's actual dialogue frame to the panel.
      Its pixel outline remains crisp.
    */
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:fill !important;
    image-rendering:pixelated !important;

    pointer-events:none !important;
    user-select:none !important;
  }

  .game-v2 .kenney-game-panel > :not(.kenney-game-panel-frame){
    position:relative !important;
    z-index:2 !important;
  }

  /* Remove the old CSS glow so the imported frame is the visual surface. */
  .game-v2 .game-card-logo-wrap::before{
    display:none !important;
    content:none !important;
  }

  /* Slight internal tuning for this exact Kenney frame. */
  .game-v2 .bonus-pill.small-pixel{
    margin-bottom:1px !important;
  }

  .game-v2 .game-card-logo-wrap{
    margin:-7px auto -2px !important;
  }

  .game-v2 .game-card-copy.game-card-copy-launch{
    margin:0 auto 17px !important;
  }

  @media(max-width:760px){
    .game-v2 .kenney-game-panel{
      padding:28px 28px 32px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .kenney-game-panel{
      padding:24px 18px 28px !important;
    }
  }


/* ===== footer-white-alternating-section ===== */
/* Final footer: white/light section to continue the alternating palette. */
  .site-footer-v2{
    background:#fffdf8 !important;
    color:#15375B !important;
    border-top:1px solid rgba(21,55,91,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
  }

  .site-footer-v2 span{
    color:#15375B !important;
  }

  .site-footer-v2 b{
    color:var(--pink) !important;
  }

  .site-footer-v2 .small-pixel{
    color:var(--pink) !important;
  }


/* ===== footer-salmon-match ===== */
/* Final footer uses the site's salmon pink accent. */
  .site-footer-v2{
    background:#f08098 !important;
    color:#15375B !important;
    border-top:0 !important;
    box-shadow:none !important;
  }

  .site-footer-v2 span{
    color:#15375B !important;
  }

  .site-footer-v2 b{
    color:#15375B !important;
  }

  .site-footer-v2 .small-pixel{
    color:#fffaf2 !important;
  }


/* ===== footer-match-menu-cream ===== */
/* Match the exact cream background used by the top menu/header. */
  .site-footer-v2{
    background:rgba(251,246,236,.97) !important;
    color:#15375B !important;
    border-top:1px solid rgba(21,55,91,.08) !important;
    box-shadow:none !important;
  }

  .site-footer-v2 span,
  .site-footer-v2 b{
    color:#15375B !important;
  }

  .site-footer-v2 .small-pixel{
    color:#f08098 !important;
  }


/* ===== custom-generated-wedding-frame-panel ===== */
/* Custom generated wedding/game frame for the bonus-level panel */
  .game-v2 .game-reveal-card.frame-art-panel{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
    max-width:900px !important;
    margin:28px auto 0 !important;
    padding:78px 86px 74px !important;
    min-height:560px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  /* Cream inner surface behind the transparent generated frame */
  .game-v2 .game-reveal-card.frame-art-panel::before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    inset:28px !important;
    background:linear-gradient(
      180deg,
      #fbe4ea 0%,
      #f8d5df 58%,
      #fbe1e7 100%
    ) !important;
    border-radius:10px !important;
    box-shadow:0 18px 36px rgba(21,55,91,.12) !important;
    z-index:0 !important;
  }

  .game-v2 .game-reveal-card.frame-art-panel .kenney-game-panel-frame{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:fill !important;
    image-rendering:pixelated !important;
    z-index:1 !important;
    pointer-events:none !important;
    user-select:none !important;
  }

  .game-v2 .game-reveal-card.frame-art-panel .game-pixel-frame{
    display:none !important;
  }

  .game-v2 .game-reveal-card.frame-art-panel > :not(.kenney-game-panel-frame):not(.game-pixel-frame){
    position:relative !important;
    z-index:2 !important;
  }

  /* Tune the interior composition for the new frame */
  .game-v2 .frame-art-panel .bonus-pill.small-pixel{
    margin-bottom:8px !important;
    color:#ef7893 !important;
  }

  .game-v2 .frame-art-panel .game-card-logo-wrap{
    margin:2px auto 8px !important;
  }

  .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
    width:min(100%,390px) !important;
    max-height:none !important;
  }

  .game-v2 .frame-art-panel .game-card-copy.game-card-copy-launch{
    max-width:520px !important;
    margin:2px auto 22px !important;
    color:#35597d !important;
    font-family:'Cormorant Garamond', Georgia, serif !important;
    font-style:normal !important;
    font-weight:500 !important;
    font-size:17px !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:center !important;
  }

  .game-v2 .frame-art-panel .game-cta-stage{
    width:min(100%,500px) !important;
    grid-template-columns:120px minmax(220px,250px) 120px !important;
    gap:22px !important;
    margin:12px auto 0 !important;
    align-items:end !important;
  }

  .game-v2 .frame-art-panel .game-character-sprite{
    height:146px !important;
  }

  .game-v2 .frame-art-panel .game-play-cta{
    margin:0 0 14px !important;
    padding:18px 26px !important;
  }

  .game-v2 .frame-art-panel .game-play-cta span{
    font-size:8px !important;
    letter-spacing:1px !important;
  }

  /* Responsive */
  @media (max-width: 900px){
    .game-v2 .game-reveal-card.frame-art-panel{
      max-width:780px !important;
      padding:70px 58px 64px !important;
      min-height:0 !important;
    }

    .game-v2 .frame-art-panel::before{
      inset:24px !important;
    }
  }

  @media (max-width: 760px){
    .game-v2 .game-reveal-card.frame-art-panel{
      padding:54px 34px 52px !important;
      margin-top:18px !important;
    }

    .game-v2 .frame-art-panel::before{
      inset:18px !important;
      border-radius:8px !important;
    }

    .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
      width:min(100%,320px) !important;
    }

    .game-v2 .frame-art-panel .game-card-copy.game-card-copy-launch{
      margin:0 auto 16px !important;
      font-size:15px !important;
    }

    .game-v2 .frame-art-panel .game-cta-stage{
      width:min(100%,340px) !important;
      grid-template-columns:88px minmax(140px,1fr) 88px !important;
      gap:14px !important;
      margin:8px auto 0 !important;
    }

    .game-v2 .frame-art-panel .game-character-sprite{
      height:106px !important;
    }

    .game-v2 .frame-art-panel .game-play-cta{
      margin:0 0 8px !important;
      padding:14px 16px !important;
    }

    .game-v2 .frame-art-panel .game-play-cta span{
      font-size:6px !important;
    }
  }

  @media (max-width: 430px){
    .game-v2 .game-reveal-card.frame-art-panel{
      padding:44px 18px 42px !important;
    }

    .game-v2 .frame-art-panel::before{
      inset:12px !important;
    }

    .game-v2 .frame-art-panel .game-cta-stage{
      width:min(100%,300px) !important;
      grid-template-columns:76px minmax(120px,1fr) 76px !important;
      gap:10px !important;
    }

    .game-v2 .frame-art-panel .game-character-sprite{
      height:92px !important;
    }
  }


/* ===== bonus-level-full-rebalance ===== */
/* ===== SECTION COMPOSITION ===== */
  .game-v2{
    padding:112px 0 !important;
  }

  .game-v2 .game-v2-compact-layout{
    grid-template-columns:minmax(0,.58fr) minmax(520px,1.42fr) !important;
    gap:54px !important;
    align-items:center !important;
  }

  /* Left side becomes an introduction, not a competing hero. */
  .game-v2 .game-v2-heading-block{
    align-self:center !important;
    padding-top:0 !important;
  }

  .game-v2 .section-eyebrow{
    margin-bottom:14px !important;
    font-size:7px !important;
    letter-spacing:.10em !important;
  }

  .game-v2 .section-heading{
    max-width:360px !important;
    font-size:clamp(52px,4.5vw,78px) !important;
    line-height:.98 !important;
    margin-bottom:24px !important;
  }

  .game-v2 .section-copy{
    max-width:350px !important;
    margin-top:0 !important;
    font-size:18px !important;
    line-height:1.5 !important;
    color:rgba(21,55,91,.78) !important;
  }

  /* ===== FRAME / PANEL ===== */
  .game-v2 .game-reveal-card.frame-art-panel{
    max-width:790px !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:66px 76px 64px !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /*
    No flat card colour: retain the section blue around the inside edges,
    with a soft warm centre glow behind the actual launch content.
  */
  .game-v2 .game-reveal-card.frame-art-panel::before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    inset:30px !important;
    z-index:0 !important;
    border-radius:8px !important;
    background:
      radial-gradient(
        ellipse at 50% 48%,
        rgba(251,246,236,.98) 0%,
        rgba(251,246,236,.94) 34%,
        rgba(239,244,247,.84) 63%,
        rgba(103,150,191,.16) 84%,
        rgba(103,150,191,0) 100%
      ) !important;
    box-shadow:none !important;
  }

  .game-v2 .frame-art-panel .kenney-game-panel-frame{
    z-index:1 !important;
  }

  /* ===== TOP STATUS ===== */
  .game-v2 .frame-art-panel .bonus-pill.small-pixel{
    margin:0 auto 3px !important;
    font-size:5.8px !important;
    line-height:1.3 !important;
    letter-spacing:.06em !important;
    opacity:.72 !important;
    color:#ef7893 !important;
    transform:scale(.94) !important;
    transform-origin:center !important;
  }

  .game-v2 .frame-art-panel .bonus-pill img{
    width:10px !important;
    opacity:.78 !important;
  }

  /* ===== LOGO / COPY ===== */
  .game-v2 .frame-art-panel .game-card-logo-wrap{
    margin:0 auto 2px !important;
  }

  .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
    width:min(100%,350px) !important;
    max-height:136px !important;
  }

  .game-v2 .frame-art-panel .game-card-copy.game-card-copy-launch{
    max-width:430px !important;
    margin:2px auto 20px !important;
    color:rgba(21,55,91,.64) !important;
    font-family:inherit !important;
    font-style:normal !important;
    font-weight:400 !important;
    font-size:13.5px !important;
    line-height:1.4 !important;
    letter-spacing:0 !important;
    text-align:center !important;
  }

  /* ===== LAUNCH ROW ===== */
  .game-v2 .frame-art-panel .game-cta-stage{
    width:max-content !important;
    max-width:100% !important;
    grid-template-columns:104px 216px 104px !important;
    gap:8px !important;
    align-items:end !important;
    justify-content:center !important;
    margin:0 auto !important;
  }

  .game-v2 .frame-art-panel .game-character-wrap{
    min-height:118px !important;
    padding-bottom:4px !important;
  }

  .game-v2 .frame-art-panel .game-character-sprite{
    height:112px !important;
    width:auto !important;
    max-width:100% !important;
  }

  .game-v2 .frame-art-panel .game-character-wrap-left{
    transform:translateX(10px) !important;
  }

  .game-v2 .frame-art-panel .game-character-wrap-right{
    transform:translateX(-10px) !important;
  }

  /* CTA becomes the obvious interactive object. */
  .game-v2 .frame-art-panel .game-play-cta{
    width:216px !important;
    min-height:58px !important;
    margin:0 0 13px !important;
    padding:16px 20px !important;
    box-shadow:
      0 8px 0 rgba(21,55,91,.20),
      0 13px 20px rgba(21,55,91,.13),
      inset 0 2px 0 rgba(255,255,255,.38),
      inset 0 -3px 0 rgba(151,49,82,.14) !important;
  }

  .game-v2 .frame-art-panel .game-play-cta:hover{
    transform:translateY(-2px) !important;
    box-shadow:
      0 10px 0 rgba(21,55,91,.18),
      0 16px 24px rgba(21,55,91,.15),
      inset 0 2px 0 rgba(255,255,255,.42),
      inset 0 -3px 0 rgba(151,49,82,.12) !important;
  }

  .game-v2 .frame-art-panel .game-play-cta:active{
    transform:translateY(5px) !important;
    box-shadow:
      0 3px 0 rgba(21,55,91,.20),
      0 7px 10px rgba(21,55,91,.10),
      inset 0 2px 0 rgba(255,255,255,.30) !important;
  }

  /* ===== RESPONSIVE ===== */
  @media(max-width:1000px){
    .game-v2{
      padding:96px 0 !important;
    }

    .game-v2 .game-v2-compact-layout{
      grid-template-columns:minmax(0,.7fr) minmax(470px,1.3fr) !important;
      gap:36px !important;
    }

    .game-v2 .section-heading{
      font-size:clamp(48px,6vw,68px) !important;
    }

    .game-v2 .game-reveal-card.frame-art-panel{
      max-width:700px !important;
      padding:58px 56px 56px !important;
    }

    .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
      width:min(100%,320px) !important;
    }
  }

  @media(max-width:760px){
    .game-v2{
      padding:82px 0 !important;
    }

    .game-v2 .game-v2-compact-layout{
      grid-template-columns:1fr !important;
      gap:34px !important;
    }

    .game-v2 .game-v2-heading-block{
      text-align:center !important;
    }

    .game-v2 .section-heading,
    .game-v2 .section-copy{
      margin-left:auto !important;
      margin-right:auto !important;
    }

    .game-v2 .section-heading{
      max-width:420px !important;
      font-size:clamp(48px,15vw,66px) !important;
    }

    .game-v2 .section-copy{
      max-width:410px !important;
      font-size:17px !important;
    }

    .game-v2 .game-reveal-card.frame-art-panel{
      max-width:620px !important;
      padding:52px 32px 50px !important;
    }

    .game-v2 .game-reveal-card.frame-art-panel::before{
      inset:20px !important;
    }

    .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
      width:min(100%,300px) !important;
      max-height:118px !important;
    }

    .game-v2 .frame-art-panel .game-card-copy.game-card-copy-launch{
      max-width:330px !important;
      margin:0 auto 16px !important;
      font-size:12.5px !important;
    }

    .game-v2 .frame-art-panel .game-cta-stage{
      grid-template-columns:82px 166px 82px !important;
      gap:5px !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap{
      min-height:96px !important;
    }

    .game-v2 .frame-art-panel .game-character-sprite{
      height:92px !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap-left{
      transform:translateX(5px) !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap-right{
      transform:translateX(-5px) !important;
    }

    .game-v2 .frame-art-panel .game-play-cta{
      width:166px !important;
      min-height:49px !important;
      margin-bottom:8px !important;
      padding:12px 10px !important;
      font-size:6.8px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-reveal-card.frame-art-panel{
      padding:44px 16px 42px !important;
    }

    .game-v2 .game-reveal-card.frame-art-panel::before{
      inset:13px !important;
    }

    .game-v2 .frame-art-panel .game-cta-stage{
      grid-template-columns:66px 140px 66px !important;
      gap:2px !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap{
      min-height:82px !important;
    }

    .game-v2 .frame-art-panel .game-character-sprite{
      height:78px !important;
    }

    .game-v2 .frame-art-panel .game-play-cta{
      width:140px !important;
      min-height:44px !important;
      font-size:5.8px !important;
    }
  }


/* ===== bonus-level-frame-no-distortion ===== */
/* Preserve the generated frame's native 3:2 proportions. */
  .game-v2 .game-reveal-card.frame-art-panel{
    width:min(100%,790px) !important;
    max-width:790px !important;
    aspect-ratio:3 / 2 !important;
    min-height:0 !important;
    height:auto !important;
    box-sizing:border-box !important;
  }

  .game-v2 .game-reveal-card.frame-art-panel .kenney-game-panel-frame{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* Keep the inner glow aligned with the undistorted frame opening. */
  .game-v2 .game-reveal-card.frame-art-panel::before{
    inset:5.2% 4.4% !important;
  }

  @media(max-width:1000px){
    .game-v2 .game-reveal-card.frame-art-panel{
      width:min(100%,700px) !important;
      max-width:700px !important;
      aspect-ratio:3 / 2 !important;
    }
  }

  @media(max-width:760px){
    .game-v2 .game-reveal-card.frame-art-panel{
      width:min(100%,620px) !important;
      max-width:620px !important;
      aspect-ratio:3 / 2 !important;
      padding:8.5% 7% 8% !important;
    }

    .game-v2 .frame-art-panel .bonus-pill.small-pixel{
      margin-bottom:0 !important;
      font-size:5px !important;
    }

    .game-v2 .frame-art-panel .game-card-logo-wrap{
      margin:-2px auto 0 !important;
    }

    .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
      width:min(100%,270px) !important;
      max-height:100px !important;
    }

    .game-v2 .frame-art-panel .game-card-copy.game-card-copy-launch{
      max-width:310px !important;
      margin:0 auto 10px !important;
      font-size:11.5px !important;
      line-height:1.3 !important;
    }

    .game-v2 .frame-art-panel .game-cta-stage{
      grid-template-columns:72px 150px 72px !important;
      gap:4px !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap{
      min-height:82px !important;
      padding-bottom:1px !important;
    }

    .game-v2 .frame-art-panel .game-character-sprite{
      height:78px !important;
    }

    .game-v2 .frame-art-panel .game-play-cta{
      width:150px !important;
      min-height:44px !important;
      margin:0 0 6px !important;
      padding:10px 8px !important;
      font-size:6px !important;
    }
  }

  @media(max-width:430px){
    .game-v2 .game-reveal-card.frame-art-panel{
      width:100% !important;
      aspect-ratio:3 / 2 !important;
      padding:8% 6% 7.5% !important;
    }

    .game-v2 .frame-art-panel .bonus-pill.small-pixel{
      font-size:4px !important;
    }

    .game-v2 .frame-art-panel .bonus-pill img{
      width:7px !important;
    }

    .game-v2 .frame-art-panel .game-card-logo-wrap .game-v2-logo{
      width:min(100%,230px) !important;
      max-height:84px !important;
    }

    .game-v2 .frame-art-panel .game-card-copy.game-card-copy-launch{
      max-width:260px !important;
      margin:0 auto 7px !important;
      font-size:10px !important;
    }

    .game-v2 .frame-art-panel .game-cta-stage{
      grid-template-columns:58px 128px 58px !important;
      gap:2px !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap{
      min-height:66px !important;
    }

    .game-v2 .frame-art-panel .game-character-sprite{
      height:62px !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap-left{
      transform:translateX(3px) !important;
    }

    .game-v2 .frame-art-panel .game-character-wrap-right{
      transform:translateX(-3px) !important;
    }

    .game-v2 .frame-art-panel .game-play-cta{
      width:128px !important;
      min-height:38px !important;
      margin-bottom:4px !important;
      padding:8px 6px !important;
      font-size:5px !important;
    }
  }


/* ===== bonus-gateway-v4-styles ===== */
/* ============================================================
     BONUS LEVEL V4 — full-width game-world takeover
     ============================================================ */

  .bonus-gateway-v4{
    position:relative !important;
    overflow:hidden !important;
    padding:0 !important;
    background:#6796BF !important;
    color:#15375B !important;
  }

  .bonus-v4-intro{
    width:min(760px,90vw);
    margin:0 auto;
    padding:108px 20px 54px;
    text-align:center;
    position:relative;
    z-index:4;
  }

  .bonus-v4-eyebrow{
    margin:0 0 14px;
    font-family:'Press Start 2P',monospace;
    font-size:7px;
    line-height:1.5;
    letter-spacing:.12em;
    color:#f08098;
  }

  .bonus-v4-intro h2{
    margin:0;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:500;
    font-size:clamp(62px,7vw,96px);
    line-height:.9;
    color:#15375B;
  }

  .bonus-v4-intro > p:last-child{
    max-width:590px;
    margin:22px auto 0;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:20px;
    line-height:1.45;
    font-style:italic;
    color:rgba(21,55,91,.78);
  }

  /* Full-width portal/world — deliberately not a card. */
  .bonus-v4-world{
    position:relative;
    width:100%;
    min-height:760px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:var(--bonus-world-bg);
    background-size:cover;
    background-position:center center;
    isolation:isolate;
  }

  .bonus-v4-world::before,
  .bonus-v4-world::after{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    height:110px;
    pointer-events:none;
  }

  .bonus-v4-world::before{
    top:0;
    background:linear-gradient(180deg,#6796BF 0%,rgba(103,150,191,.76) 26%,rgba(103,150,191,0) 100%);
  }

  .bonus-v4-world::after{
    bottom:0;
    background:linear-gradient(0deg,#6796BF 0%,rgba(103,150,191,.64) 28%,rgba(103,150,191,0) 100%);
  }

  .bonus-v4-world-shade{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 43%,rgba(251,246,236,.15) 0%,rgba(251,246,236,.03) 44%,transparent 72%),
      linear-gradient(180deg,rgba(21,55,91,.04),rgba(21,55,91,.01) 48%,rgba(21,55,91,.08));
  }

  .bonus-v4-game-ui{
    position:relative;
    z-index:3;
    width:min(1080px,94vw);
    margin:0 auto;
    padding:86px 20px 96px;
    text-align:center;
  }

  /* Logo / unlock moment */
  .bonus-v4-logo-wrap{
    position:relative;
    width:min(540px,68vw);
    margin:0 auto;
  }

  .bonus-v4-logo{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
    image-rendering:auto;
    filter:drop-shadow(0 8px 12px rgba(21,55,91,.16));
  }

  .bonus-v4-unlock-fx{
    position:absolute;
    z-index:1;
    left:50%;
    top:50%;
    width:min(340px,66%);
    height:auto;
    transform:translate(-50%,-47%) scale(.75);
    opacity:0;
    pointer-events:none;
  }

  .bonus-v4-kicker{
    margin:18px auto 0;
    font-family:'Press Start 2P',monospace;
    font-size:8px;
    line-height:1.55;
    letter-spacing:.06em;
    color:#15375B;
    text-shadow:0 1px 0 rgba(255,255,255,.6);
  }

  .bonus-v4-helper{
    margin:10px auto 4px;
    font-size:14px;
    line-height:1.4;
    color:rgba(21,55,91,.67);
  }

  /* Character + CTA stage */
  .bonus-v4-stage{
    position:relative;
    width:min(880px,92vw);
    height:370px;
    margin:6px auto 0;
    display:grid;
    grid-template-columns:minmax(180px,1fr) 250px minmax(180px,1fr);
    align-items:end;
    justify-items:center;
    column-gap:16px;
  }

  .bonus-v4-platform{
    position:absolute;
    z-index:1;
    left:50%;
    bottom:24px;
    width:min(860px,96%);
    max-height:150px;
    object-fit:contain;
    transform:translateX(-50%);
    pointer-events:none;
    filter:drop-shadow(0 9px 10px rgba(21,55,91,.12));
  }

  .bonus-v4-player{
    position:relative;
    z-index:3;
    appearance:none;
    border:0;
    background:none;
    padding:0 10px 55px;
    margin:0;
    color:#15375B;
    cursor:pointer;
    font:inherit;
    outline:none;
  }

  .bonus-v4-character{
    position:relative;
    display:block;
    width:190px;
    height:270px;
    margin:0 auto;
  }

  .bonus-v4-character img{
    position:absolute;
    left:50%;
    bottom:0;
    display:block;
    width:auto;
    max-width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transform:translateX(-50%);
    transition:opacity .12s ease,transform .2s ease,filter .2s ease;
    filter:drop-shadow(0 8px 6px rgba(21,55,91,.10));
  }

  .bonus-v4-character-idle{opacity:1;}
  .bonus-v4-character-cheer{opacity:0;}

  .bonus-v4-player:hover .bonus-v4-character-idle,
  .bonus-v4-player:focus-visible .bonus-v4-character-idle,
  .bonus-v4-player.is-cheering .bonus-v4-character-idle,
  .bonus-v4-stage.is-party .bonus-v4-character-idle{
    opacity:0;
  }

  .bonus-v4-player:hover .bonus-v4-character-cheer,
  .bonus-v4-player:focus-visible .bonus-v4-character-cheer,
  .bonus-v4-player.is-cheering .bonus-v4-character-cheer,
  .bonus-v4-stage.is-party .bonus-v4-character-cheer{
    opacity:1;
    transform:translateX(-50%) translateY(-5px);
  }

  .bonus-v4-player-name{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:112px;
    min-height:32px;
    padding:8px 14px;
    background:rgba(251,246,236,.92);
    border:2px solid #15375B;
    box-shadow:
      0 4px 0 rgba(21,55,91,.18),
      inset 0 0 0 2px rgba(240,128,152,.20);
    font-family:'Press Start 2P',monospace;
    font-size:6px;
    letter-spacing:.04em;
    color:#15375B;
  }

  .bonus-v4-player:hover .bonus-v4-player-name,
  .bonus-v4-player:focus-visible .bonus-v4-player-name,
  .bonus-v4-player.is-cheering .bonus-v4-player-name{
    background:#f08098;
    color:#fffaf4;
  }

  .bonus-v4-play{
    position:relative;
    z-index:5;
    align-self:end;
    width:240px;
    margin-bottom:82px;
    display:block;
    text-decoration:none;
    transition:transform .16s ease,filter .16s ease;
  }

  .bonus-v4-play img{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 9px 7px rgba(21,55,91,.18));
  }

  .bonus-v4-play:hover,
  .bonus-v4-play:focus-visible{
    transform:translateY(-5px) scale(1.025);
    filter:brightness(1.04);
    outline:none;
  }

  .bonus-v4-play:active{
    transform:translateY(1px) scale(.99);
  }

  .bonus-v4-caption{
    margin:2px auto 0;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:18px;
    line-height:1.4;
    font-style:italic;
    color:rgba(21,55,91,.76);
    text-shadow:0 1px 0 rgba(255,255,255,.50);
  }

  /* Route asset */
  .bonus-v4-map-wrap{
    width:min(760px,88vw);
    margin:36px auto 0;
  }

  .bonus-v4-map-label{
    display:block;
    margin-bottom:8px;
    font-family:'Press Start 2P',monospace;
    font-size:5.8px;
    line-height:1.4;
    letter-spacing:.08em;
    color:rgba(21,55,91,.65);
  }

  .bonus-v4-map{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
    filter:drop-shadow(0 6px 8px rgba(21,55,91,.09));
  }

  /* Reveal sequence */
  .bonus-gateway-v4 .bonus-v4-intro,
  .bonus-gateway-v4 .bonus-v4-logo-wrap,
  .bonus-gateway-v4 .bonus-v4-kicker,
  .bonus-gateway-v4 .bonus-v4-helper,
  .bonus-gateway-v4 .bonus-v4-player,
  .bonus-gateway-v4 .bonus-v4-play,
  .bonus-gateway-v4 .bonus-v4-caption,
  .bonus-gateway-v4 .bonus-v4-map-wrap{
    opacity:0;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-intro{
    animation:v4Intro .55s ease-out both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-logo-wrap{
    animation:v4Logo .68s cubic-bezier(.2,.85,.2,1) .18s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-unlock-fx{
    animation:v4Unlock .72s ease-out .28s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-kicker,
  .bonus-gateway-v4.is-v4-visible .bonus-v4-helper{
    animation:v4Rise .42s ease-out .58s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-player-george{
    animation:v4GeorgeIn .62s cubic-bezier(.2,.8,.2,1) .68s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-player-ilias{
    animation:v4IliasIn .62s cubic-bezier(.2,.8,.2,1) .68s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-play{
    animation:v4PlayIn .52s cubic-bezier(.2,.9,.2,1) 2.30s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-caption{
    animation:v4Rise .42s ease-out .92s both;
  }

  .bonus-gateway-v4.is-v4-visible .bonus-v4-map-wrap{
    animation:v4Rise .52s ease-out 1.02s both;
  }

  @keyframes v4Intro{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }

  @keyframes v4Logo{
    from{opacity:0;transform:translateY(12px) scale(.90)}
    75%{opacity:1;transform:translateY(0) scale(1.025)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  @keyframes v4Unlock{
    0%{opacity:0;transform:translate(-50%,-47%) scale(.25) rotate(-8deg)}
    34%{opacity:.95}
    78%{opacity:.70}
    100%{opacity:0;transform:translate(-50%,-47%) scale(1.35) rotate(5deg)}
  }

  @keyframes v4Rise{
    from{opacity:0;transform:translateY(9px)}
    to{opacity:1;transform:translateY(0)}
  }

  @keyframes v4GeorgeIn{
    from{opacity:0;transform:translateX(-34px)}
    to{opacity:1;transform:translateX(0)}
  }

  @keyframes v4IliasIn{
    from{opacity:0;transform:translateX(34px)}
    to{opacity:1;transform:translateX(0)}
  }

  @keyframes v4PlayIn{
    from{opacity:0;transform:translateY(14px) scale(.92)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  /* Responsive */
  @media(max-width:760px){
    .bonus-v4-intro{
      padding:82px 18px 42px;
    }

    .bonus-v4-intro h2{
      font-size:clamp(54px,15vw,74px);
    }

    .bonus-v4-intro > p:last-child{
      font-size:18px;
    }

    .bonus-v4-world{
      min-height:690px;
      background-position:center center;
    }

    .bonus-v4-game-ui{
      width:min(96vw,660px);
      padding:72px 10px 82px;
    }

    .bonus-v4-logo-wrap{
      width:min(430px,82vw);
    }

    .bonus-v4-kicker{
      margin-top:12px;
      font-size:6.2px;
    }

    .bonus-v4-helper{
      font-size:12px;
    }

    .bonus-v4-stage{
      width:min(620px,96vw);
      height:300px;
      grid-template-columns:minmax(110px,1fr) 170px minmax(110px,1fr);
      column-gap:4px;
    }

    .bonus-v4-platform{
      width:min(600px,98%);
      bottom:18px;
    }

    .bonus-v4-player{
      padding:0 2px 42px;
    }

    .bonus-v4-character{
      width:135px;
      height:210px;
    }

    .bonus-v4-player-name{
      bottom:26px;
      min-width:86px;
      min-height:27px;
      padding:6px 8px;
      font-size:4.7px;
      border-width:1px;
      box-shadow:0 3px 0 rgba(21,55,91,.16);
    }

    .bonus-v4-play{
      width:170px;
      margin-bottom:62px;
    }

    .bonus-v4-caption{
      font-size:16px;
    }

    .bonus-v4-map-wrap{
      width:min(600px,94vw);
      margin-top:26px;
    }
  }

  @media(max-width:480px){
    .bonus-v4-world{
      min-height:650px;
      background-position:center center;
    }

    .bonus-v4-game-ui{
      padding:65px 4px 76px;
    }

    .bonus-v4-logo-wrap{
      width:min(340px,88vw);
    }

    .bonus-v4-stage{
      width:96vw;
      height:258px;
      grid-template-columns:minmax(86px,1fr) 128px minmax(86px,1fr);
      column-gap:0;
    }

    .bonus-v4-character{
      width:105px;
      height:170px;
    }

    .bonus-v4-player{
      padding-bottom:36px;
    }

    .bonus-v4-player-name{
      bottom:22px;
      min-width:72px;
      min-height:24px;
      padding:5px 6px;
      font-size:4px;
    }

    .bonus-v4-play{
      width:128px;
      margin-bottom:51px;
    }

    .bonus-v4-platform{
      bottom:12px;
    }

    .bonus-v4-caption{
      width:90vw;
      font-size:14px;
    }

    .bonus-v4-map-label{
      font-size:4.5px;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .bonus-gateway-v4 .bonus-v4-intro,
    .bonus-gateway-v4 .bonus-v4-logo-wrap,
    .bonus-gateway-v4 .bonus-v4-kicker,
    .bonus-gateway-v4 .bonus-v4-helper,
    .bonus-gateway-v4 .bonus-v4-player,
    .bonus-gateway-v4 .bonus-v4-play,
    .bonus-gateway-v4 .bonus-v4-caption,
    .bonus-gateway-v4 .bonus-v4-map-wrap{
      opacity:1 !important;
      animation:none !important;
      transform:none !important;
    }

    .bonus-v4-unlock-fx{
      display:none !important;
    }
  }


/* ===== bonus-gateway-v4-compact-spacing ===== */
/* Tighten the editorial intro and pull it closer to the game world */
  .bonus-v4-intro{
    padding:88px 20px 30px !important;
  }

  .bonus-v4-intro > p:last-child{
    margin-top:16px !important;
  }

  /* Compact the game screen vertically */
  .bonus-v4-game-ui{
    padding:50px 20px 62px !important;
  }

  .bonus-v4-logo-wrap{
    width:min(500px,66vw) !important;
  }

  .bonus-v4-kicker{
    margin-top:10px !important;
  }

  .bonus-v4-helper{
    margin:6px auto 0 !important;
  }

  /* Make the launch composition one cohesive unit */
  .bonus-v4-stage{
    width:min(760px,90vw) !important;
    height:320px !important;
    margin-top:-2px !important;
    grid-template-columns:220px 240px 220px !important;
    column-gap:0 !important;
  }

  .bonus-v4-platform{
    width:min(730px,96%) !important;
    bottom:18px !important;
  }

  .bonus-v4-character{
    width:176px !important;
    height:245px !important;
  }

  .bonus-v4-player{
    padding-bottom:48px !important;
  }

  .bonus-v4-player-name{
    bottom:29px !important;
  }

  .bonus-v4-play{
    width:225px !important;
    margin-bottom:67px !important;
  }

  .bonus-v4-caption{
    margin:-5px auto 0 !important;
  }

  /* Pull the quest map much closer to the launch screen */
  .bonus-v4-map-wrap{
    width:min(720px,86vw) !important;
    margin-top:20px !important;
  }

  .bonus-v4-map-label{
    margin-bottom:4px !important;
  }

  @media(max-width:760px){
    .bonus-v4-intro{
      padding:72px 18px 24px !important;
    }

    .bonus-v4-game-ui{
      padding:44px 10px 54px !important;
    }

    .bonus-v4-logo-wrap{
      width:min(400px,80vw) !important;
    }

    .bonus-v4-stage{
      width:min(560px,95vw) !important;
      height:270px !important;
      grid-template-columns:165px 170px 165px !important;
    }

    .bonus-v4-platform{
      width:min(535px,97%) !important;
      bottom:13px !important;
    }

    .bonus-v4-character{
      width:124px !important;
      height:190px !important;
    }

    .bonus-v4-player{
      padding-bottom:38px !important;
    }

    .bonus-v4-player-name{
      bottom:22px !important;
    }

    .bonus-v4-play{
      width:158px !important;
      margin-bottom:53px !important;
    }

    .bonus-v4-caption{
      margin-top:-7px !important;
    }

    .bonus-v4-map-wrap{
      width:min(550px,92vw) !important;
      margin-top:14px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-intro{
      padding:64px 16px 20px !important;
    }

    .bonus-v4-game-ui{
      padding:38px 4px 48px !important;
    }

    .bonus-v4-logo-wrap{
      width:min(320px,86vw) !important;
    }

    .bonus-v4-stage{
      width:94vw !important;
      height:232px !important;
      grid-template-columns:118px 126px 118px !important;
    }

    .bonus-v4-platform{
      width:92vw !important;
      bottom:8px !important;
    }

    .bonus-v4-character{
      width:96px !important;
      height:154px !important;
    }

    .bonus-v4-player{
      padding-bottom:32px !important;
    }

    .bonus-v4-player-name{
      bottom:18px !important;
    }

    .bonus-v4-play{
      width:120px !important;
      margin-bottom:42px !important;
    }

    .bonus-v4-map-wrap{
      width:92vw !important;
      margin-top:10px !important;
    }
  }


/* ===== bonus-gateway-v4-alignment-fix ===== */
/* One shared center axis for the whole game-world composition. */
  .bonus-v4-game-ui{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:min(980px,94vw) !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center !important;
  }

  .bonus-v4-logo-wrap,
  .bonus-v4-kicker,
  .bonus-v4-helper,
  .bonus-v4-caption,
  .bonus-v4-map-wrap{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Keep logo and copy precisely centered over the launch stage. */
  .bonus-v4-logo-wrap{
    width:min(500px,64vw) !important;
  }

  .bonus-v4-kicker{
    width:100% !important;
    text-align:center !important;
  }

  .bonus-v4-helper{
    width:min(520px,86vw) !important;
    text-align:center !important;
  }

  /*
    Stage geometry:
    equal left/right character lanes + fixed CTA lane.
    This removes the visual drift caused by differently-shaped sprites.
  */
  .bonus-v4-stage{
    width:min(760px,90vw) !important;
    height:314px !important;
    margin:0 auto !important;

    display:grid !important;
    grid-template-columns:220px 240px 220px !important;
    grid-template-rows:1fr !important;
    align-items:end !important;
    justify-content:center !important;
    justify-items:center !important;
    column-gap:0 !important;
  }

  .bonus-v4-player{
    width:220px !important;
    height:100% !important;
    padding:0 0 48px !important;
    margin:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .bonus-v4-player-george{
    grid-column:1 !important;
  }

  .bonus-v4-player-ilias{
    grid-column:3 !important;
  }

  /* Fixed visual box so both character images occupy the same coordinate system. */
  .bonus-v4-character{
    width:168px !important;
    height:236px !important;
    margin:0 auto !important;
    position:relative !important;
    flex:0 0 auto !important;
  }

  .bonus-v4-character img{
    left:50% !important;
    right:auto !important;
    bottom:0 !important;
    width:auto !important;
    max-width:100% !important;
    height:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    transform:translateX(-50%) !important;
  }

  .bonus-v4-player:hover .bonus-v4-character-cheer,
  .bonus-v4-player:focus-visible .bonus-v4-character-cheer,
  .bonus-v4-player.is-cheering .bonus-v4-character-cheer,
  .bonus-v4-stage.is-party .bonus-v4-character-cheer{
    transform:translateX(-50%) translateY(-5px) !important;
  }

  /* Names align to exactly the same y-coordinate. */
  .bonus-v4-player-name{
    left:50% !important;
    bottom:28px !important;
    transform:translateX(-50%) !important;
    min-width:106px !important;
    box-sizing:border-box !important;
  }

  /* CTA stays mathematically centered in the middle grid lane. */
  .bonus-v4-play{
    grid-column:2 !important;
    align-self:end !important;
    justify-self:center !important;
    width:218px !important;
    margin:0 0 68px !important;
  }

  /* Platform uses the exact same stage center axis. */
  .bonus-v4-platform{
    left:50% !important;
    right:auto !important;
    bottom:16px !important;
    width:min(720px,95%) !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    object-position:center !important;
  }

  /* Copy follows the center of the stage instead of inherited card widths. */
  .bonus-v4-caption{
    width:min(620px,88vw) !important;
    margin-top:-4px !important;
    text-align:center !important;
  }

  .bonus-v4-map-wrap{
    width:min(700px,84vw) !important;
    margin-top:16px !important;
    text-align:center !important;
  }

  .bonus-v4-map{
    width:100% !important;
    margin:0 auto !important;
    object-position:center !important;
  }

  /* Keep the scenic background symmetrical around the content. */
  .bonus-v4-world{
    background-position:50% 50% !important;
  }

  @media(max-width:760px){
    .bonus-v4-game-ui{
      width:min(640px,96vw) !important;
    }

    .bonus-v4-logo-wrap{
      width:min(390px,80vw) !important;
    }

    .bonus-v4-stage{
      width:min(540px,94vw) !important;
      height:264px !important;
      grid-template-columns:155px 170px 155px !important;
    }

    .bonus-v4-player{
      width:155px !important;
      padding-bottom:38px !important;
    }

    .bonus-v4-character{
      width:118px !important;
      height:186px !important;
    }

    .bonus-v4-player-name{
      bottom:21px !important;
      min-width:84px !important;
    }

    .bonus-v4-play{
      width:158px !important;
      margin-bottom:52px !important;
    }

    .bonus-v4-platform{
      width:min(520px,96%) !important;
      bottom:12px !important;
    }

    .bonus-v4-map-wrap{
      width:min(530px,92vw) !important;
      margin-top:12px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-game-ui{
      width:96vw !important;
    }

    .bonus-v4-logo-wrap{
      width:min(315px,86vw) !important;
    }

    .bonus-v4-stage{
      width:94vw !important;
      height:225px !important;
      grid-template-columns:112px 126px 112px !important;
    }

    .bonus-v4-player{
      width:112px !important;
      padding-bottom:31px !important;
    }

    .bonus-v4-character{
      width:88px !important;
      height:150px !important;
    }

    .bonus-v4-player-name{
      bottom:17px !important;
      min-width:70px !important;
    }

    .bonus-v4-play{
      width:120px !important;
      margin-bottom:41px !important;
    }

    .bonus-v4-platform{
      width:92vw !important;
      bottom:7px !important;
    }

    .bonus-v4-caption{
      width:90vw !important;
    }

    .bonus-v4-map-wrap{
      width:92vw !important;
      margin-top:9px !important;
    }
  }


/* ===== bonus-gateway-platform-position-fix ===== */
/*
    Put the characters ON the platform rather than inside its front face.
    The platform itself stays centered; only the character vertical anchor changes.
  */
  .bonus-v4-player{
    padding-bottom:102px !important;
  }

  .bonus-v4-character{
    margin-bottom:0 !important;
  }

  /* Keep the name plaques visually attached to the front/lower part of the stage. */
  .bonus-v4-player-name{
    bottom:27px !important;
  }

  /* Slightly lower the platform so its top surface sits clearly under their shoes. */
  .bonus-v4-platform{
    bottom:10px !important;
  }

  /* CTA remains centered on the platform, but moves up a touch to match the new player baseline. */
  .bonus-v4-play{
    margin-bottom:74px !important;
  }

  @media(max-width:760px){
    .bonus-v4-player{
      padding-bottom:78px !important;
    }

    .bonus-v4-player-name{
      bottom:20px !important;
    }

    .bonus-v4-platform{
      bottom:8px !important;
    }

    .bonus-v4-play{
      margin-bottom:57px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-player{
      padding-bottom:62px !important;
    }

    .bonus-v4-player-name{
      bottom:16px !important;
    }

    .bonus-v4-platform{
      bottom:5px !important;
    }

    .bonus-v4-play{
      margin-bottom:45px !important;
    }
  }


/* ===== bonus-platform-true-surface-baseline ===== */
/*
    The platform image includes a large decorative FRONT FACE.
    Characters need to stand on the upper pink/cream SURFACE, not on the
    bottom edge of the entire image.

    Lift is viewport-responsive so the relationship survives resizing.
  */
  .bonus-v4-stage{
    --player-surface-lift:clamp(18px,3.7vw,44px) !important;
    height:calc(314px + var(--player-surface-lift)) !important;
  }

  /* Lift only the actual sprite box. Labels/platform/CTA keep their own anchors. */
  .bonus-v4-character{
    transform:translateY(calc(-1 * var(--player-surface-lift))) !important;
  }

  /* Keep the platform itself exactly where it is. */
  .bonus-v4-platform{
    bottom:10px !important;
  }

  /* Give the characters enough upper breathing room after the lift. */
  .bonus-v4-player{
    padding-bottom:102px !important;
    overflow:visible !important;
  }

  /* Names remain on the decorative front face rather than moving with the sprites. */
  .bonus-v4-player-name{
    bottom:27px !important;
  }

  /* CTA remains visually centered in the stage decoration. */
  .bonus-v4-play{
    margin-bottom:74px !important;
  }

  @media(max-width:760px){
    .bonus-v4-stage{
      --player-surface-lift:clamp(16px,3.8vw,30px) !important;
      height:calc(264px + var(--player-surface-lift)) !important;
    }

    .bonus-v4-player{
      padding-bottom:78px !important;
    }

    .bonus-v4-platform{
      bottom:8px !important;
    }

    .bonus-v4-player-name{
      bottom:20px !important;
    }

    .bonus-v4-play{
      margin-bottom:57px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-stage{
      --player-surface-lift:clamp(14px,4.6vw,22px) !important;
      height:calc(225px + var(--player-surface-lift)) !important;
    }

    .bonus-v4-player{
      padding-bottom:62px !important;
    }

    .bonus-v4-platform{
      bottom:5px !important;
    }

    .bonus-v4-player-name{
      bottom:16px !important;
    }

    .bonus-v4-play{
      margin-bottom:45px !important;
    }
  }


/* ===== bonus-platform-surface-lock ===== */
/*
    TRUE PLATFORM GEOMETRY
    ----------------------
    Trimmed platform asset: 1527 × 298  (aspect ratio ≈ 5.124:1)
    At the player lanes, the usable cream/pink top surface begins at
    roughly y=65px from the top of the 298px image.

    Therefore the shoe baseline is ~78.2% of the rendered platform
    height up from its bottom.

    The platform is 95% of the stage width:
      rendered height = 95cqw / 5.124
      shoe baseline   = 78.2% of that height ≈ 14.5cqw above image bottom

    Everything below is tied to that single responsive baseline.
  */

  .bonus-v4-stage{
    --platform-bottom:10px;
    --platform-width:95cqw;
    --platform-surface:14.5cqw;

    position:relative !important;
    container-type:inline-size !important;
    display:block !important;
    width:min(760px,90vw) !important;
    height:358px !important;
    margin:0 auto !important;
  }

  /* Platform stays centered and scales from the same stage width. */
  .bonus-v4-platform{
    position:absolute !important;
    z-index:1 !important;
    left:50% !important;
    right:auto !important;
    bottom:var(--platform-bottom) !important;
    width:var(--platform-width) !important;
    height:auto !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    object-fit:contain !important;
  }

  /*
    Player buttons occupy full-height fixed lanes.
    Their CHARACTER, not the button itself, is locked to the platform surface.
  */
  .bonus-v4-player{
    position:absolute !important;
    z-index:3 !important;
    top:0 !important;
    bottom:0 !important;
    width:28cqw !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    overflow:visible !important;
  }

  .bonus-v4-player-george{
    left:7cqw !important;
    right:auto !important;
  }

  .bonus-v4-player-ilias{
    right:7cqw !important;
    left:auto !important;
  }

  .bonus-v4-character{
    position:absolute !important;
    left:50% !important;
    bottom:calc(var(--platform-bottom) + var(--platform-surface)) !important;

    width:clamp(92px,22cqw,168px) !important;
    height:clamp(138px,31cqw,236px) !important;
    margin:0 !important;

    transform:translateX(-50%) !important;
  }

  .bonus-v4-character img{
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;
    width:auto !important;
    max-width:100% !important;
    height:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    transform:translateX(-50%) !important;
  }

  /* Selected / hover pose keeps exactly the same shoe baseline. */
  .bonus-v4-player:hover .bonus-v4-character-cheer,
  .bonus-v4-player:focus-visible .bonus-v4-character-cheer,
  .bonus-v4-player.is-cheering .bonus-v4-character-cheer,
  .bonus-v4-stage.is-party .bonus-v4-character-cheer{
    transform:translateX(-50%) !important;
  }

  /*
    Name plaques belong to the FRONT of the platform,
    so they use a separate lower anchor rather than following the players.
  */
  .bonus-v4-player-name{
    position:absolute !important;
    left:50% !important;
    bottom:calc(var(--platform-bottom) + 1.9cqw) !important;
    transform:translateX(-50%) !important;
    min-width:106px !important;
  }

  /* CTA stays independently centered over the platform decoration. */
  .bonus-v4-play{
    position:absolute !important;
    z-index:5 !important;
    left:50% !important;
    bottom:calc(var(--platform-bottom) + 6.0cqw) !important;
    width:218px !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
  }

  .bonus-v4-play:hover,
  .bonus-v4-play:focus-visible{
    transform:translateX(-50%) translateY(-5px) scale(1.025) !important;
  }

  .bonus-v4-play:active{
    transform:translateX(-50%) translateY(1px) scale(.99) !important;
  }

  @media(max-width:760px){
    .bonus-v4-stage{
      --platform-bottom:8px;
      width:min(540px,94vw) !important;
      height:294px !important;
    }

    .bonus-v4-player{
      width:29cqw !important;
    }

    .bonus-v4-player-george{
      left:5.5cqw !important;
    }

    .bonus-v4-player-ilias{
      right:5.5cqw !important;
    }

    .bonus-v4-character{
      width:clamp(82px,22cqw,118px) !important;
      height:clamp(128px,31cqw,186px) !important;
    }

    .bonus-v4-player-name{
      bottom:calc(var(--platform-bottom) + 1.7cqw) !important;
      min-width:84px !important;
    }

    .bonus-v4-play{
      width:158px !important;
      bottom:calc(var(--platform-bottom) + 5.7cqw) !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-stage{
      --platform-bottom:5px;
      width:94vw !important;
      height:247px !important;
    }

    .bonus-v4-player{
      width:30cqw !important;
    }

    .bonus-v4-player-george{
      left:3.5cqw !important;
    }

    .bonus-v4-player-ilias{
      right:3.5cqw !important;
    }

    .bonus-v4-character{
      width:clamp(74px,22cqw,92px) !important;
      height:clamp(112px,31cqw,150px) !important;
    }

    .bonus-v4-player-name{
      bottom:calc(var(--platform-bottom) + 1.5cqw) !important;
      min-width:70px !important;
    }

    .bonus-v4-play{
      width:120px !important;
      bottom:calc(var(--platform-bottom) + 5.3cqw) !important;
    }
  }


/* ===== bonus-platform-final-foot-nudge ===== */
/* Small visual correction: lower the players so the shoe soles sit ON the platform surface. */
  .bonus-v4-stage{
    --player-foot-nudge:7px;
  }

  .bonus-v4-character{
    bottom:calc(
      var(--platform-bottom) + var(--platform-surface) - var(--player-foot-nudge)
    ) !important;
  }

  @media(max-width:760px){
    .bonus-v4-stage{
      --player-foot-nudge:5px;
    }
  }

  @media(max-width:480px){
    .bonus-v4-stage{
      --player-foot-nudge:4px;
    }
  }


/* ===== bonus-platform-final-foot-nudge-v2 ===== */
.bonus-v4-stage{
    --player-foot-nudge:11px;
  }

  @media(max-width:760px){
    .bonus-v4-stage{
      --player-foot-nudge:8px;
    }
  }

  @media(max-width:480px){
    .bonus-v4-stage{
      --player-foot-nudge:6px;
    }
  }


/* ===== bonus-stage-player-ui-refine ===== */
/* ============================================================
     STAGE REFINEMENT
     - make the middle intentional
     - integrate player names into the platform
     ============================================================ */

  .bonus-v4-kicker{
    margin-top:12px !important;
    font-size:8px !important;
    letter-spacing:.08em !important;
  }

  .bonus-v4-helper{
    margin:6px auto 2px !important;
    font-family:'Cormorant Garamond',Georgia,serif !important;
    font-size:16px !important;
    line-height:1.3 !important;
    font-style:italic !important;
    color:rgba(21,55,91,.66) !important;
  }

  /* A slightly tighter stage begins closer to the helper copy. */
  .bonus-v4-stage{
    margin-top:-8px !important;
  }

  /*
    Names now live ON the platform front instead of floating
    in detached white UI boxes.
  */
  .bonus-v4-player-name{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;

    bottom:calc(var(--platform-bottom) + 2.35cqw) !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:.05em !important;
    color:#15375B !important;

    text-shadow:
      1px 1px 0 rgba(255,250,244,.88),
      -1px 1px 0 rgba(255,250,244,.88),
      1px -1px 0 rgba(255,250,244,.88),
      -1px -1px 0 rgba(255,250,244,.88) !important;
  }

  .bonus-v4-player-name::before{
    display:block !important;
    margin-bottom:5px !important;
    font-size:4.2px !important;
    letter-spacing:.08em !important;
    color:#ef7893 !important;
    text-shadow:none !important;
    opacity:.88 !important;
  }

  .bonus-v4-player-george .bonus-v4-player-name::before{
    content:"PLAYER 1" !important;
  }

  .bonus-v4-player-ilias .bonus-v4-player-name::before{
    content:"PLAYER 2" !important;
  }

  /* Do not turn names into pink boxes on hover anymore. */
  .bonus-v4-player:hover .bonus-v4-player-name,
  .bonus-v4-player:focus-visible .bonus-v4-player-name,
  .bonus-v4-player.is-cheering .bonus-v4-player-name{
    background:transparent !important;
    color:#15375B !important;
  }

  /*
    Give the centre a clear vertical spine:
    tiny START HERE label -> button -> rings in the platform art.
  */
  .bonus-v4-play{
    bottom:calc(var(--platform-bottom) + 8.0cqw) !important;
  }

  .bonus-v4-play::before{
    content:"START HERE" !important;
    position:absolute !important;
    left:50% !important;
    bottom:calc(100% + 8px) !important;
    transform:translateX(-50%) !important;
    white-space:nowrap !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:5px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    color:#15375B !important;
    text-shadow:0 1px 0 rgba(255,255,255,.55) !important;

    pointer-events:none !important;
  }

  .bonus-v4-play::after{
    content:"↓" !important;
    position:absolute !important;
    left:50% !important;
    top:calc(100% + 2px) !important;
    transform:translateX(-50%) !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:7px !important;
    color:#ef7893 !important;

    pointer-events:none !important;
  }

  /* Bring players a touch inward to visually frame the CTA. */
  .bonus-v4-player-george{
    left:9cqw !important;
  }

  .bonus-v4-player-ilias{
    right:9cqw !important;
  }

  /* Keep the caption closer to the completed stage unit. */
  .bonus-v4-caption{
    margin-top:-10px !important;
  }

  @media(max-width:760px){
    .bonus-v4-kicker{
      font-size:6.3px !important;
    }

    .bonus-v4-helper{
      font-size:14px !important;
    }

    .bonus-v4-player-name{
      bottom:calc(var(--platform-bottom) + 2.1cqw) !important;
      font-size:5.3px !important;
    }

    .bonus-v4-player-name::before{
      margin-bottom:4px !important;
      font-size:3.4px !important;
    }

    .bonus-v4-play{
      bottom:calc(var(--platform-bottom) + 7.2cqw) !important;
    }

    .bonus-v4-play::before{
      bottom:calc(100% + 6px) !important;
      font-size:4px !important;
    }

    .bonus-v4-play::after{
      font-size:6px !important;
    }

    .bonus-v4-player-george{
      left:7.5cqw !important;
    }

    .bonus-v4-player-ilias{
      right:7.5cqw !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-helper{
      font-size:12.5px !important;
    }

    .bonus-v4-player-name{
      bottom:calc(var(--platform-bottom) + 1.85cqw) !important;
      font-size:4.3px !important;
    }

    .bonus-v4-player-name::before{
      font-size:2.9px !important;
    }

    .bonus-v4-play{
      bottom:calc(var(--platform-bottom) + 6.6cqw) !important;
    }

    .bonus-v4-play::before{
      bottom:calc(100% + 5px) !important;
      font-size:3.4px !important;
    }

    .bonus-v4-player-george{
      left:5cqw !important;
    }

    .bonus-v4-player-ilias{
      right:5cqw !important;
    }

    .bonus-v4-caption{
      margin-top:-6px !important;
    }
  }


/* ===== bonus-stage-center-filled-v1 ===== */
/*
    ACTUAL COMPOSITION CHANGE:
    - characters move inward
    - CTA moves into the empty middle
    - a small central HUD gives the gap purpose
    - names are attached to the players, not the platform
  */

  .bonus-v4-stage{
    --character-h:236px;
    --character-w:168px;
  }

  /* Bring the two players inward so they frame the centre. */
  .bonus-v4-player-george{
    left:14cqw !important;
  }

  .bonus-v4-player-ilias{
    right:14cqw !important;
  }

  .bonus-v4-character{
    width:var(--character-w) !important;
    height:var(--character-h) !important;
  }

  /* Remove the old platform-front label treatment completely. */
  .bonus-v4-player-name,
  .bonus-v4-player:hover .bonus-v4-player-name,
  .bonus-v4-player:focus-visible .bonus-v4-player-name,
  .bonus-v4-player.is-cheering .bonus-v4-player-name{
    position:absolute !important;
    left:50% !important;
    bottom:calc(
      var(--platform-bottom) +
      var(--platform-surface) +
      var(--character-h) +
      10px
    ) !important;
    transform:translateX(-50%) !important;

    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:.06em !important;
    color:#15375B !important;
    text-shadow:0 1px 0 rgba(255,255,255,.45) !important;

    white-space:nowrap !important;
  }

  .bonus-v4-player-name::before{
    display:none !important;
    content:none !important;
  }

  /* The centre now has a real vertical game HUD. */
  .bonus-v4-center-hud{
    position:absolute !important;
    z-index:4 !important;
    left:50% !important;
    top:76px !important;
    transform:translateX(-50%) !important;

    width:210px !important;
    text-align:center !important;
    pointer-events:none !important;
  }

  .bonus-v4-center-small{
    display:block !important;
    margin-bottom:6px !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:5px !important;
    letter-spacing:.12em !important;
    color:#15375B !important;
    opacity:.72 !important;
  }

  .bonus-v4-center-hud strong{
    display:block !important;
    font-family:'Press Start 2P',monospace !important;
    font-size:17px !important;
    line-height:1.15 !important;
    letter-spacing:.04em !important;
    color:#fff8e8 !important;

    text-shadow:
      2px 2px 0 #15375B,
      -2px 2px 0 #15375B,
      2px -2px 0 #15375B,
      -2px -2px 0 #15375B,
      0 3px 0 #f08098 !important;
  }

  .bonus-v4-center-sub{
    display:block !important;
    margin-top:7px !important;
    font-family:'Cormorant Garamond',Georgia,serif !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-style:italic !important;
    color:rgba(21,55,91,.72) !important;
  }

  /*
    Move the actual generated PLAY button well up into the previously
    empty centre, between the two characters.
  */
  .bonus-v4-play{
    z-index:6 !important;
    left:50% !important;
    bottom:auto !important;
    top:145px !important;
    width:218px !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
  }

  .bonus-v4-play::before,
  .bonus-v4-play::after{
    display:none !important;
    content:none !important;
  }

  .bonus-v4-play:hover,
  .bonus-v4-play:focus-visible{
    transform:translateX(-50%) translateY(-4px) scale(1.025) !important;
  }

  .bonus-v4-play:active{
    transform:translateX(-50%) translateY(1px) scale(.99) !important;
  }

  /* Let the platform's existing central bow/rings finish the vertical spine. */
  .bonus-v4-caption{
    margin-top:-8px !important;
  }

  @media(max-width:760px){
    .bonus-v4-stage{
      --character-h:186px;
      --character-w:118px;
    }

    .bonus-v4-player-george{
      left:11cqw !important;
    }

    .bonus-v4-player-ilias{
      right:11cqw !important;
    }

    .bonus-v4-player-name{
      bottom:calc(
        var(--platform-bottom) +
        var(--platform-surface) +
        var(--character-h) +
        8px
      ) !important;
      font-size:5.5px !important;
    }

    .bonus-v4-center-hud{
      top:59px !important;
      width:170px !important;
    }

    .bonus-v4-center-small{
      font-size:4px !important;
      margin-bottom:5px !important;
    }

    .bonus-v4-center-hud strong{
      font-size:13px !important;
    }

    .bonus-v4-center-sub{
      margin-top:5px !important;
      font-size:11.5px !important;
    }

    .bonus-v4-play{
      top:116px !important;
      width:158px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-stage{
      --character-h:150px;
      --character-w:92px;
    }

    .bonus-v4-player-george{
      left:7cqw !important;
    }

    .bonus-v4-player-ilias{
      right:7cqw !important;
    }

    .bonus-v4-player-name{
      bottom:calc(
        var(--platform-bottom) +
        var(--platform-surface) +
        var(--character-h) +
        6px
      ) !important;
      font-size:4.2px !important;
    }

    .bonus-v4-center-hud{
      top:45px !important;
      width:135px !important;
    }

    .bonus-v4-center-small{
      font-size:3.2px !important;
    }

    .bonus-v4-center-hud strong{
      font-size:10px !important;
      text-shadow:
        1px 1px 0 #15375B,
        -1px 1px 0 #15375B,
        1px -1px 0 #15375B,
        -1px -1px 0 #15375B,
        0 2px 0 #f08098 !important;
    }

    .bonus-v4-center-sub{
      font-size:9.5px !important;
    }

    .bonus-v4-play{
      top:92px !important;
      width:120px !important;
    }
  }


/* ===== bonus-cleaner-copy-and-logo-position ===== */
/* Move the Wedding Quest logo lower into the scene. */
  .bonus-v4-logo-wrap{
    margin-top:34px !important;
  }

  /* With the helper text removed, keep the remaining label comfortably spaced. */
  .bonus-v4-kicker{
    margin-top:14px !important;
    margin-bottom:0 !important;
  }

  /* Rebalance the centre HUD now that only READY? remains. */
  .bonus-v4-center-hud{
    top:94px !important;
  }

  @media(max-width:760px){
    .bonus-v4-logo-wrap{
      margin-top:26px !important;
    }

    .bonus-v4-center-hud{
      top:72px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-logo-wrap{
      margin-top:20px !important;
    }

    .bonus-v4-center-hud{
      top:56px !important;
    }
  }


/* ===== bonus-remove-player-labels ===== */
.bonus-v4-kicker,
  .bonus-v4-player-name{
    display:none !important;
  }

  /* Rebalance spacing after removing the kicker. */
  .bonus-v4-stage{
    margin-top:4px !important;
  }

  @media(max-width:760px){
    .bonus-v4-stage{
      margin-top:2px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-stage{
      margin-top:0 !important;
    }
  }


/* ===== bonus-play-button-higher ===== */
.bonus-v4-play{
    top:132px !important;
  }

  @media(max-width:760px){
    .bonus-v4-play{
      top:106px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-play{
      top:84px !important;
    }
  }


/* ===== bonus-play-button-balanced ===== */
.bonus-v4-play{
    top:138px !important;
  }

  @media(max-width:760px){
    .bonus-v4-play{
      top:111px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-play{
      top:88px !important;
    }
  }


/* ===== bonus-ready-play-swapped ===== */
/* Swap the vertical positions of READY? and PLAY THE GAME */
  .bonus-v4-play{
    top:94px !important;
  }

  .bonus-v4-center-hud{
    top:138px !important;
  }

  @media(max-width:760px){
    .bonus-v4-play{
      top:72px !important;
    }

    .bonus-v4-center-hud{
      top:111px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-play{
      top:56px !important;
    }

    .bonus-v4-center-hud{
      top:88px !important;
    }
  }


/* ===== bonus-caption-pop-and-map-label-remove ===== */
/* Remove the map heading entirely. */
  .bonus-v4-map-label{
    display:none !important;
  }

  /* Make the help line clearly readable against the blue game-world background. */
  .bonus-v4-caption{
    display:inline-block !important;
    width:auto !important;
    max-width:min(620px,88vw) !important;
    margin:-6px auto 0 !important;
    padding:9px 15px 10px !important;

    border:2px solid #15375B !important;
    border-radius:10px !important;
    background:rgba(251,246,236,.94) !important;
    box-shadow:
      0 4px 0 rgba(21,55,91,.18),
      0 10px 22px rgba(21,55,91,.12) !important;

    color:#15375B !important;
    font-weight:700 !important;
    text-align:center !important;
    text-shadow:none !important;
  }

  /* Pull the quest map up slightly now that its title is gone. */
  .bonus-v4-map-wrap{
    margin-top:12px !important;
  }

  @media(max-width:760px){
    .bonus-v4-caption{
      max-width:88vw !important;
      padding:8px 12px 9px !important;
    }

    .bonus-v4-map-wrap{
      margin-top:10px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-caption{
      max-width:90vw !important;
      padding:7px 10px 8px !important;
      border-radius:8px !important;
    }

    .bonus-v4-map-wrap{
      margin-top:8px !important;
    }
  }


/* ===== bonus-caption-pixel-no-box ===== */
.bonus-v4-caption{
    display:block !important;
    width:min(680px,90vw) !important;
    max-width:none !important;
    margin:-4px auto 0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:13px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    letter-spacing:.015em !important;
    text-align:center !important;
    color:#fff8e8 !important;

    text-shadow:
      2px 2px 0 #15375B,
      -2px 2px 0 #15375B,
      2px -2px 0 #15375B,
      -2px -2px 0 #15375B,
      0 3px 0 #F08098 !important;
  }

  @media(max-width:760px){
    .bonus-v4-caption{
      width:min(560px,90vw) !important;
      font-size:10px !important;
      line-height:1.6 !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-caption{
      width:90vw !important;
      font-size:8px !important;
      line-height:1.7 !important;
      text-shadow:
        1px 1px 0 #15375B,
        -1px 1px 0 #15375B,
        1px -1px 0 #15375B,
        -1px -1px 0 #15375B,
        0 2px 0 #F08098 !important;
    }
  }


/* ===== bonus-caption-force-nonitalic ===== */
.bonus-v4-caption{
    font-style:normal !important;
  }


/* ===== bonus-logo-only-title-layout ===== */
/* Remove any leftover intro footprint completely. */
  .bonus-v4-intro{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Pull the full game world up so the logo itself becomes the title. */
  .bonus-v4-world{
    margin-top:0 !important;
  }

  .bonus-v4-game-ui{
    padding-top:16px !important;
  }

  .bonus-v4-logo-wrap{
    margin-top:6px !important;
  }

  /* Pull the stage/map upward with the logo. */
  .bonus-v4-stage{
    margin-top:-8px !important;
  }

  .bonus-v4-caption{
    margin-top:-10px !important;
  }

  .bonus-v4-map-wrap{
    margin-top:8px !important;
  }

  @media(max-width:760px){
    .bonus-v4-game-ui{
      padding-top:12px !important;
    }

    .bonus-v4-logo-wrap{
      margin-top:4px !important;
    }

    .bonus-v4-stage{
      margin-top:-6px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-game-ui{
      padding-top:10px !important;
    }

    .bonus-v4-logo-wrap{
      margin-top:2px !important;
    }

    .bonus-v4-stage{
      margin-top:-4px !important;
    }
  }


/* ===== bonus-caption-match-site-pixel-labels ===== */
/* Match the established site-wide 8-bit label treatment. */
  .bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    display:block !important;
    width:min(680px,90vw) !important;
    max-width:none !important;
    margin:-8px auto 0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:8px !important;
    line-height:1.45 !important;
    font-weight:400 !important;
    font-style:normal !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;

    color:var(--pink) !important;
    text-align:center !important;
    text-shadow:none !important;
  }

  @media(max-width:760px){
    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      width:min(560px,90vw) !important;
      font-size:7px !important;
      line-height:1.4 !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      width:90vw !important;
      font-size:7px !important;
      line-height:1.45 !important;
    }
  }


/* ===== bonus-caption-match-details-kicker-color ===== */
.bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    color:#FFE0E8 !important;
  }


/* ===== bonus-map-hud-refine ===== */
/* Make the instruction line the divider between stage and route map. */
  .bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    margin:-6px auto 0 !important;
  }

  /*
    Turn the bottom route into a secondary HUD:
    - tighter
    - smaller
    - subtle darker-blue band
    - no card/border
  */
  .bonus-v4-map-wrap{
    position:relative !important;
    width:min(620px,76vw) !important;
    margin:8px auto 0 !important;
    padding:10px 24px 8px !important;
    box-sizing:border-box !important;
    text-align:center !important;

    background:
      linear-gradient(
        90deg,
        rgba(21,55,91,0) 0%,
        rgba(21,55,91,.06) 10%,
        rgba(21,55,91,.13) 28%,
        rgba(21,55,91,.15) 50%,
        rgba(21,55,91,.13) 72%,
        rgba(21,55,91,.06) 90%,
        rgba(21,55,91,0) 100%
      ) !important;

    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .bonus-v4-map{
    display:block !important;
    width:88% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* Keep the band visually integrated rather than card-like. */
  .bonus-v4-map-wrap::before,
  .bonus-v4-map-wrap::after{
    content:"" !important;
    position:absolute !important;
    left:8% !important;
    right:8% !important;
    height:1px !important;
    pointer-events:none !important;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(255,224,232,.18),
      transparent
    ) !important;
  }

  .bonus-v4-map-wrap::before{
    top:0 !important;
  }

  .bonus-v4-map-wrap::after{
    bottom:0 !important;
  }

  /* Slightly tighten the section ending below the route. */
  .bonus-v4-game-ui{
    padding-bottom:42px !important;
  }

  @media(max-width:760px){
    .bonus-v4-map-wrap{
      width:min(520px,84vw) !important;
      margin-top:7px !important;
      padding:8px 16px 7px !important;
    }

    .bonus-v4-map{
      width:90% !important;
    }

    .bonus-v4-game-ui{
      padding-bottom:36px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-map-wrap{
      width:90vw !important;
      margin-top:6px !important;
      padding:7px 8px 6px !important;
    }

    .bonus-v4-map{
      width:94% !important;
    }

    .bonus-v4-game-ui{
      padding-bottom:30px !important;
    }
  }


/* ===== bonus-new-slim-map-integration ===== */
/*
    New map integration:
    the generated map contains generous sky padding by design.
    Crop that padding in the WEBSITE rather than editing the image.
  */
  .bonus-v4-map-wrap{
    position:relative !important;
    width:min(840px,88vw) !important;
    aspect-ratio:6 / 1 !important;
    margin:10px auto 0 !important;
    padding:0 !important;
    overflow:hidden !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .bonus-v4-map-wrap::before,
  .bonus-v4-map-wrap::after{
    display:none !important;
    content:none !important;
  }

  .bonus-v4-map{
    position:absolute !important;
    left:50% !important;
    top:50% !important;

    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;

    transform:translate(-50%,-50%) !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* Keep the instruction visually connected to the new slim route HUD. */
  .bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    margin:-5px auto 0 !important;
  }

  /* The new map is cleaner, so the section can end sooner. */
  .bonus-v4-game-ui{
    padding-bottom:30px !important;
  }

  @media(max-width:760px){
    .bonus-v4-map-wrap{
      width:min(660px,92vw) !important;
      aspect-ratio:5.2 / 1 !important;
      margin-top:8px !important;
    }

    .bonus-v4-game-ui{
      padding-bottom:26px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-map-wrap{
      width:94vw !important;
      aspect-ratio:4.2 / 1 !important;
      margin-top:7px !important;
    }

    .bonus-v4-game-ui{
      padding-bottom:22px !important;
    }
  }


/* ===== bonus-transparent-map-final ===== */
.bonus-v4-map-wrap{
    width:min(820px,88vw) !important;
    aspect-ratio:auto !important;
    height:auto !important;
    margin:8px auto 0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .bonus-v4-map{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    transform:none !important;
    background:transparent !important;
  }

  @media(max-width:760px){
    .bonus-v4-map-wrap{
      width:min(650px,92vw) !important;
      margin-top:7px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-map-wrap{
      width:94vw !important;
      margin-top:6px !important;
    }
  }


/* ===== bonus-map-final-size-spacing-refine ===== */
/* 1 + 4: scale the WHOLE map (icons + labels together) down ~12–15%. */
  .bonus-v4-map-wrap{
    width:min(700px,76vw) !important;
    margin-top:-2px !important;
  }

  /* 3: give the mission caption a little more breathing room from the platform. */
  .bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    margin-top:0 !important;
  }

  @media(max-width:760px){
    .bonus-v4-map-wrap{
      width:min(500px,84vw) !important;
      margin-top:-1px !important;
    }

    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      margin-top:0 !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-map-wrap{
      width:82vw !important;
      margin-top:0 !important;
    }

    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      margin-top:1px !important;
    }
  }


/* ===== bonus-world-background-exposed ===== */
/*
    EXPOSE THE EXISTING APPROVED BACKGROUND
    Use a real image layer rather than relying on the giant data URI in a CSS variable.
  */
  .bonus-v4-world{
    background-image:none !important;
    background-color:#6796BF !important;
    overflow:hidden !important;
  }

  .bonus-v4-world-bg-image{
    position:absolute !important;
    z-index:0 !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;

    /* Show more of the city, Sagrada, floral columns and terrace floor. */
    object-position:50% 58% !important;

    opacity:1 !important;
    pointer-events:none !important;
    user-select:none !important;
  }

  /*
    The old fades were strong enough to visually erase the scenery.
    Keep only very light edge blending into the site's blue.
  */
  .bonus-v4-world::before,
  .bonus-v4-world::after{
    height:54px !important;
    z-index:2 !important;
  }

  .bonus-v4-world::before{
    background:linear-gradient(
      180deg,
      rgba(103,150,191,.46) 0%,
      rgba(103,150,191,.12) 48%,
      rgba(103,150,191,0) 100%
    ) !important;
  }

  .bonus-v4-world::after{
    background:linear-gradient(
      0deg,
      rgba(103,150,191,.38) 0%,
      rgba(103,150,191,.10) 48%,
      rgba(103,150,191,0) 100%
    ) !important;
  }

  /* Keep UI legible without washing the scenery back out. */
  .bonus-v4-world-shade{
    z-index:1 !important;
    background:
      radial-gradient(
        ellipse at 50% 34%,
        rgba(251,246,236,.10) 0%,
        rgba(251,246,236,.025) 36%,
        rgba(251,246,236,0) 64%
      ),
      linear-gradient(
        180deg,
        rgba(21,55,91,.01) 0%,
        rgba(21,55,91,0) 52%,
        rgba(21,55,91,.035) 100%
      ) !important;
  }

  .bonus-v4-game-ui{
    position:relative !important;
    z-index:3 !important;
  }

  @media(max-width:760px){
    .bonus-v4-world-bg-image{
      /* Keep both decorative sides visible while still favoring the lower scenery. */
      object-position:50% 55% !important;
    }

    .bonus-v4-world::before,
    .bonus-v4-world::after{
      height:42px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-world-bg-image{
      /*
        Portrait screens necessarily crop more horizontally.
        Keep the Sagrada / city / terrace band visible instead of centering on empty sky.
      */
      object-position:45% 58% !important;
    }

    .bonus-v4-world::before,
    .bonus-v4-world::after{
      height:34px !important;
    }
  }


/* ===== bonus-remove-map-move-mission-lower ===== */
/* Route/map removed completely. */
  .bonus-v4-map-wrap,
  .bonus-v4-map{
    display:none !important;
  }

  /*
    Move the mission line into the lower part of the game image,
    where the route used to sit.
  */
  .bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    width:min(760px,90vw) !important;
    margin:34px auto 0 !important;
    padding:0 12px 8px !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:8px !important;
    line-height:1.55 !important;
    font-style:normal !important;
    font-weight:400 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
    text-align:center !important;

    /* Brighter against the new photographic/detail-rich pixel background. */
    color:#FFF6E7 !important;
    text-shadow:
      1px 1px 0 rgba(21,55,91,.92),
      -1px 1px 0 rgba(21,55,91,.82),
      1px -1px 0 rgba(21,55,91,.82),
      -1px -1px 0 rgba(21,55,91,.82) !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Keep enough lower scenery visible around the relocated mission line. */
  .bonus-v4-game-ui{
    padding-bottom:54px !important;
  }

  @media(max-width:760px){
    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      width:min(620px,90vw) !important;
      margin-top:28px !important;
      font-size:7px !important;
      line-height:1.6 !important;
    }

    .bonus-v4-game-ui{
      padding-bottom:46px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      width:90vw !important;
      margin-top:22px !important;
      padding-bottom:4px !important;
      font-size:6.5px !important;
      line-height:1.65 !important;
    }

    .bonus-v4-game-ui{
      padding-bottom:38px !important;
    }
  }


/* ===== bonus-mission-bigger-lower ===== */
.bonus-v4-caption,
  .bonus-v4-caption.small-pixel{
    margin-top:64px !important;
    font-size:16px !important;
    line-height:1.5 !important;
  }

  @media(max-width:760px){
    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      margin-top:50px !important;
      font-size:14px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-caption,
    .bonus-v4-caption.small-pixel{
      margin-top:40px !important;
      font-size:13px !important;
      line-height:1.55 !important;
    }
  }


/* ===== bonus-mission-world-bottom-anchor ===== */
/*
    Mission text is now a direct child of .bonus-v4-world.
    Its position is independent of the logo/stage/background crop.
  */
  .bonus-v4-world > .bonus-v4-caption,
  .bonus-v4-world > .bonus-v4-caption.small-pixel{
    position:absolute !important;
    z-index:4 !important;
    left:50% !important;
    bottom:24px !important;
    transform:translateX(-50%) !important;

    width:min(820px,92vw) !important;
    margin:0 !important;
    padding:0 !important;

    font-family:'Press Start 2P',monospace !important;
    font-size:16px !important;
    line-height:1.5 !important;
    font-style:normal !important;
    font-weight:400 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
    text-align:center !important;

    color:#FFF6E7 !important;
    text-shadow:
      2px 2px 0 #15375B,
      -2px 2px 0 #15375B,
      2px -2px 0 #15375B,
      -2px -2px 0 #15375B !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  @media(max-width:760px){
    .bonus-v4-world > .bonus-v4-caption,
    .bonus-v4-world > .bonus-v4-caption.small-pixel{
      bottom:20px !important;
      width:90vw !important;
      font-size:14px !important;
      line-height:1.55 !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-world > .bonus-v4-caption,
    .bonus-v4-world > .bonus-v4-caption.small-pixel{
      bottom:16px !important;
      width:92vw !important;
      font-size:13px !important;
      line-height:1.6 !important;
      text-shadow:
        1px 1px 0 #15375B,
        -1px 1px 0 #15375B,
        1px -1px 0 #15375B,
        -1px -1px 0 #15375B !important;
    }
  }


/* ===== bonus-mission-bottom-anchor-lower ===== */
.bonus-v4-world > .bonus-v4-caption,
  .bonus-v4-world > .bonus-v4-caption.small-pixel{
    bottom:14px !important;
  }

  @media(max-width:760px){
    .bonus-v4-world > .bonus-v4-caption,
    .bonus-v4-world > .bonus-v4-caption.small-pixel{
      bottom:12px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-world > .bonus-v4-caption,
    .bonus-v4-world > .bonus-v4-caption.small-pixel{
      bottom:10px !important;
    }
  }


/* ===== bonus-mobile-background-right-align ===== */
@media(max-width:480px){
    .bonus-v4-world-bg-image{
      object-position:right 58% !important;
    }
  }


/* ===== bonus-mobile-tablet-mission-raised ===== */
/* Desktop intentionally unchanged. */

  @media(max-width:760px){
    .bonus-v4-world > .bonus-v4-caption,
    .bonus-v4-world > .bonus-v4-caption.small-pixel{
      bottom:34px !important;
    }
  }

  @media(max-width:480px){
    .bonus-v4-world > .bonus-v4-caption,
    .bonus-v4-world > .bonus-v4-caption.small-pixel{
      bottom:28px !important;
    }
  }


/* ===== bonus-mobile-dedicated-background ===== */
/* Desktop + tablet: keep existing background unchanged. */
  .bonus-v4-world-bg-image-mobile{
    display:none !important;
  }

  @media(max-width:760px){
    /* Mobile only: swap to the dedicated portrait background. */
    .bonus-v4-world-bg-image{
      display:none !important;
    }

    .bonus-v4-world-bg-image-mobile{
      position:absolute !important;
      z-index:0 !important;
      inset:0 !important;
      display:block !important;
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center center !important;
      opacity:1 !important;
      pointer-events:none !important;
      user-select:none !important;
    }
  }


/* ===== memories-sixth-photo ===== */
/* Fill the intentional-but-too-large second-row gap with one smaller landscape memory. */
  .memory-card-6{
    grid-column:6 / span 3;
    transform:rotate(-1.25deg);
    margin-top:28px;
  }

  .memory-card-landscape .memory-photo-wrap img{
    aspect-ratio:4/3;
  }

  @media(max-width:900px){
    .memory-card-6{
      flex:0 0 min(76vw,340px);
      margin-top:0;
      transform:none;
      scroll-snap-align:center;
    }
  }


/* ===== memories-intro-compact-v1 ===== */
/* Compact the Memories intro so the collage becomes the focus. */
  .memories-v2{
    padding-top:88px !important;
  }

  .memories-head{
    display:block !important;
    margin-bottom:28px !important;
  }

  .memories-head > div{
    max-width:660px !important;
  }

  .memories-head .section-eyebrow{
    margin-bottom:10px !important;
  }

  .memories-head .section-heading{
    max-width:620px !important;
    font-size:clamp(44px,4.3vw,64px) !important;
    line-height:.96 !important;
    letter-spacing:-.03em !important;
  }

  .memories-head .section-copy{
    display:none !important;
  }

  /* Pull the collage up so photos appear almost immediately after the title. */
  .memory-strip{
    margin-top:0 !important;
  }

  .memory-card-1{
    margin-top:32px !important;
  }

  .memory-card-2{
    margin-top:0 !important;
  }

  .memory-card-3{
    margin-top:22px !important;
  }

  @media(max-width:900px){
    .memories-v2{
      padding-top:76px !important;
    }

    .memories-head{
      margin-bottom:20px !important;
    }

    .memories-head .section-heading{
      max-width:560px !important;
      font-size:clamp(42px,8vw,58px) !important;
    }

    .memory-card,
    .memory-card-1,
    .memory-card-2,
    .memory-card-3,
    .memory-card-4,
    .memory-card-5,
    .memory-card-6{
      margin-top:0 !important;
    }
  }

  @media(max-width:560px){
    .memories-v2{
      padding-top:64px !important;
    }

    .memories-head{
      margin-bottom:14px !important;
    }

    .memories-head .section-heading{
      font-size:clamp(40px,12vw,52px) !important;
      line-height:.98 !important;
    }
  }


/* ===== memories-couple-pins ===== */
/* Couple enamel pin used as the physical tack holding each Polaroid. */
  .memory-photo-wrap{
    overflow:visible !important;
  }

  .memory-pin{
    position:absolute !important;
    z-index:8 !important;
    top:-34px !important;
    width:74px !important;
    height:74px !important;
    object-fit:contain !important;
    pointer-events:none !important;
    user-select:none !important;
    filter:drop-shadow(0 5px 5px rgba(21,55,91,.20)) !important;
    transform-origin:50% 78% !important;
  }

  /* Slightly different placements make the collage feel genuinely pinned. */
  .memory-card-1 .memory-pin{
    left:18% !important;
    transform:translateX(-50%) rotate(-7deg) !important;
  }

  .memory-card-2 .memory-pin{
    left:72% !important;
    transform:translateX(-50%) rotate(6deg) !important;
  }

  .memory-card-3 .memory-pin{
    left:50% !important;
    transform:translateX(-50%) rotate(-2deg) !important;
  }

  .memory-card-4 .memory-pin{
    left:76% !important;
    transform:translateX(-50%) rotate(7deg) !important;
  }

  .memory-card-5 .memory-pin{
    left:24% !important;
    transform:translateX(-50%) rotate(-6deg) !important;
  }

  .memory-card-6 .memory-pin{
    left:51% !important;
    transform:translateX(-50%) rotate(3deg) !important;
  }

  /* Keep the tack attached when the photo lifts on hover. */
  .memory-card:hover .memory-pin{
    filter:drop-shadow(0 7px 7px rgba(21,55,91,.24)) !important;
  }

  @media(max-width:900px){
    .memory-pin{
      top:-28px !important;
      width:62px !important;
      height:62px !important;
    }
  }

  @media(max-width:560px){
    .memory-pin{
      top:-25px !important;
      width:56px !important;
      height:56px !important;
    }
  }


/* ===== memories-corkboard-pin-half-size ===== */
.memory-pin{
    width:37px !important;
    height:37px !important;
    top:-17px !important;
  }

  @media(max-width:900px){
    .memory-pin{
      width:31px !important;
      height:31px !important;
      top:-14px !important;
    }
  }

  @media(max-width:560px){
    .memory-pin{
      width:28px !important;
      height:28px !important;
      top:-12px !important;
    }
  }


/* ===== memories-corkboard-pin-lower ===== */
.memory-pin{
    top:-9px !important;
  }

  @media(max-width:900px){
    .memory-pin{
      top:-7px !important;
    }
  }

  @media(max-width:560px){
    .memory-pin{
      top:-6px !important;
    }
  }


/* ===== mobile-hero-integrated-v1 ===== */
/* MOBILE ONLY — desktop and tablet remain unchanged. */
  @media(max-width:480px){

    /*
      Remove the forced full-screen height that was creating the huge
      cream gap before the photo.
    */
    .hero-v2{
      height:auto !important;
      min-height:0 !important;
      padding-top:70px !important;
      overflow:hidden !important;
    }

    .hero-stage{
      height:auto !important;
      min-height:0 !important;
      padding-bottom:0 !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:stretch !important;
    }

    /* Compact the copy block substantially. */
    .hero-copy-v2{
      order:1 !important;
      width:100% !important;
      padding:30px 20px 26px !important;
      transform:none !important;
    }

    .hero-kicker-v2{
      width:100% !important;
      margin:0 0 10px !important;
      font-size:10px !important;
      line-height:1.25 !important;
      letter-spacing:.20em !important;
      text-align:center !important;
    }

    .hero-floral-divider{
      width:82px !important;
      margin:0 auto 12px !important;
    }

    /* Still editorial and dramatic, but no longer consumes the whole screen. */
    .hero-v2 h1{
      font-size:clamp(50px,15vw,64px) !important;
      line-height:.82 !important;
      letter-spacing:-.04em !important;
    }

    .name-rule{
      width:100% !important;
      margin:17px 0 16px !important;
      gap:12px !important;
    }

    .name-rule img{
      width:16px !important;
      height:16px !important;
    }

    .hero-date-v2{
      font-size:17px !important;
      line-height:1.2 !important;
      letter-spacing:.12em !important;
    }

    .hero-intro-v2{
      margin-top:14px !important;
      max-width:330px !important;
      font-size:18px !important;
      line-height:1.35 !important;
    }

    /*
      Two compact CTAs on one row to save vertical space.
      The primary button stays visually dominant.
    */
    .hero-actions-v2{
      display:flex !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      gap:14px !important;
      margin-top:18px !important;
    }

    .hero-button-v2{
      flex:0 1 auto !important;
      padding:13px 15px !important;
      font-size:9px !important;
      line-height:1.2 !important;
      letter-spacing:.09em !important;
      white-space:nowrap !important;
      box-shadow:3px 3px 0 var(--pink) !important;
    }

    .hero-story-link-v2{
      flex:0 1 auto !important;
      padding:12px 7px 10px !important;
      font-size:9px !important;
      line-height:1.2 !important;
      letter-spacing:.08em !important;
      white-space:nowrap !important;
    }

    /*
      Make the scroll cue part of the transition instead of leaving it
      stranded in the cream area.
    */
    .scroll-cue{
      order:2 !important;
      position:relative !important;
      left:auto !important;
      right:auto !important;
      top:auto !important;
      bottom:auto !important;
      transform:none !important;
      margin:-5px auto -25px !important;
      z-index:10 !important;
      gap:2px !important;
      font-size:6px !important;
    }

    .scroll-cue .pixel-couple{
      width:42px !important;
    }

    .scroll-cue .down-arrow{
      width:9px !important;
      height:12px !important;
    }

    /*
      Pull the photo upward so it visibly belongs to the intro and begins
      within the first viewport instead of feeling like another section.
    */
    .hero-image{
      order:3 !important;
      position:relative !important;
      inset:auto !important;
      width:100% !important;
      aspect-ratio:4 / 3 !important;
      margin-top:-36px !important;
      z-index:2 !important;
      overflow:hidden !important;
      background:var(--cream) !important;
    }

    .hero-image::before{
      background:linear-gradient(
        180deg,
        var(--cream) 0%,
        rgba(251,246,236,.78) 5%,
        rgba(251,246,236,.28) 12%,
        transparent 22%
      ) !important;
    }

    .hero-main-photo{
      position:absolute !important;
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center 52% !important;
    }

    /* Keep the existing flowers as the visual bridge into the photograph. */
    .hero-v2 .bougainvillea{
      top:0 !important;
      right:0 !important;
      width:min(48vw,190px) !important;
      z-index:4 !important;
    }
  }


/* ===== mobile-hero-integrated-correct-breakpoint ===== */
/* ACTUAL SITE MOBILE RANGE */
  @media(max-width:760px){

    .hero-v2{
      height:auto !important;
      min-height:0 !important;
      padding-top:64px !important;
      overflow:hidden !important;
    }

    .hero-stage{
      height:auto !important;
      min-height:0 !important;
      padding-bottom:0 !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:stretch !important;
    }

    .hero-copy-v2{
      order:1 !important;
      width:100% !important;
      max-width:none !important;
      padding:24px 22px 20px !important;
      margin:0 !important;
      transform:none !important;
    }

    .hero-kicker-v2{
      width:100% !important;
      margin:0 0 9px !important;
      font-size:10px !important;
      line-height:1.2 !important;
      letter-spacing:.19em !important;
      text-align:center !important;
    }

    .hero-floral-divider{
      width:78px !important;
      margin:0 auto 10px !important;
    }

    .hero-v2 h1{
      font-size:clamp(48px,11vw,62px) !important;
      line-height:.84 !important;
      letter-spacing:-.035em !important;
      margin:0 !important;
    }

    .name-rule{
      width:100% !important;
      margin:15px 0 14px !important;
      gap:10px !important;
    }

    .name-rule img{
      width:15px !important;
      height:15px !important;
    }

    .hero-date-v2{
      font-size:16px !important;
      line-height:1.2 !important;
      letter-spacing:.12em !important;
    }

    .hero-intro-v2{
      margin-top:12px !important;
      max-width:330px !important;
      font-size:17px !important;
      line-height:1.35 !important;
    }

    .hero-actions-v2{
      display:flex !important;
      flex-direction:row !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      justify-content:flex-start !important;
      gap:14px !important;
      margin-top:16px !important;
    }

    .hero-button-v2{
      flex:0 1 auto !important;
      padding:12px 14px !important;
      font-size:9px !important;
      line-height:1.2 !important;
      letter-spacing:.08em !important;
      white-space:nowrap !important;
      box-shadow:3px 3px 0 var(--pink) !important;
    }

    .hero-story-link-v2{
      flex:0 1 auto !important;
      padding:11px 6px 9px !important;
      font-size:9px !important;
      line-height:1.2 !important;
      letter-spacing:.07em !important;
      white-space:nowrap !important;
    }

    /*
      Make the scroll cue part of the transition into the photo.
    */
    .scroll-cue{
      order:2 !important;
      position:relative !important;
      left:auto !important;
      right:auto !important;
      top:auto !important;
      bottom:auto !important;
      transform:none !important;
      margin:-3px auto -24px !important;
      z-index:10 !important;
    }

    .scroll-cue .pixel-couple{
      width:40px !important;
    }

    /*
      Pull the photo into the hero composition.
    */
    .hero-image{
      order:3 !important;
      position:relative !important;
      inset:auto !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      aspect-ratio:4 / 3 !important;
      margin-top:-30px !important;
      z-index:2 !important;
      overflow:hidden !important;
      background:var(--cream) !important;
    }

    .hero-main-photo{
      position:absolute !important;
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center 52% !important;
    }

    .hero-image::before{
      background:linear-gradient(
        180deg,
        var(--cream) 0%,
        rgba(251,246,236,.70) 5%,
        rgba(251,246,236,.20) 12%,
        transparent 22%
      ) !important;
    }

    .hero-v2 .bougainvillea{
      top:0 !important;
      right:0 !important;
      width:min(38vw,180px) !important;
      z-index:4 !important;
    }
  }

  /* Extra-narrow phone refinement only */
  @media(max-width:480px){
    .hero-v2{
      padding-top:58px !important;
    }

    .hero-copy-v2{
      padding:20px 18px 16px !important;
    }

    .hero-v2 h1{
      font-size:clamp(46px,14vw,58px) !important;
    }

    .hero-actions-v2{
      gap:10px !important;
    }

    .hero-button-v2,
    .hero-story-link-v2{
      font-size:8px !important;
    }

    .hero-image{
      margin-top:-26px !important;
      aspect-ratio:1 / 1 !important;
    }

    .scroll-cue{
      margin-bottom:-21px !important;
    }
  }


/* ===== mobile-hero-true-overlap ===== */
/* MOBILE ONLY: rebuild the hero as one layered composition. */
  @media(max-width:760px){

    /*
      Keep the whole intro inside one viewport-like stage.
      The photo is no longer a flex/block item below the copy.
    */
    .hero-v2{
      position:relative !important;
      height:100svh !important;
      min-height:720px !important;
      padding-top:88px !important;
      overflow:hidden !important;
      background:var(--cream) !important;
    }

    .hero-stage{
      position:relative !important;
      display:block !important;
      height:calc(100svh - 88px) !important;
      min-height:632px !important;
      padding:0 !important;
      overflow:hidden !important;
    }

    /*
      ACTUAL OVERLAP:
      the photo is an absolute layer inside the hero, starting behind
      the lower part of the copy rather than after it.
    */
    .hero-image{
      position:absolute !important;
      z-index:1 !important;
      left:0 !important;
      right:0 !important;
      top:40% !important;
      bottom:0 !important;
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      margin:0 !important;
      overflow:visible !important;
      background:transparent !important;
      aspect-ratio:auto !important;
    }

    /*
      Zoom from the BOTTOM so we discard a meaningful amount of empty sky
      while preserving the people/sunset area.
      The mask makes the photograph dissolve into the cream hero above.
    */
    .hero-main-photo{
      position:absolute !important;
      z-index:1 !important;
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center bottom !important;
      transform:scale(1.18) !important;
      transform-origin:50% 100% !important;

      -webkit-mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.18) 8%,
        rgba(0,0,0,.72) 18%,
        #000 30%,
        #000 100%
      ) !important;
      mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.18) 8%,
        rgba(0,0,0,.72) 18%,
        #000 30%,
        #000 100%
      ) !important;
    }

    /* Remove the old hard-edged gradient layer on the photo box. */
    .hero-image::before{
      display:none !important;
      content:none !important;
    }

    /*
      The existing bougainvillea now physically crosses the cream/photo
      boundary, which makes the transition feel intentional.
    */
    .hero-v2 .bougainvillea{
      position:absolute !important;
      z-index:4 !important;
      top:-58px !important;
      right:-18px !important;
      width:min(38vw,205px) !important;
      max-width:none !important;
      opacity:.98 !important;
      filter:drop-shadow(0 5px 8px rgba(72,38,48,.12)) !important;
    }

    /*
      Copy stays above the image. No giant padding is needed because
      the photo no longer consumes normal document flow.
    */
    .hero-copy-v2{
      position:relative !important;
      z-index:7 !important;
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      padding:20px 18px 0 !important;
      transform:none !important;
    }

    .hero-kicker-v2{
      width:100% !important;
      margin:0 0 8px !important;
      text-align:center !important;
      font-size:10px !important;
      line-height:1.2 !important;
      letter-spacing:.19em !important;
    }

    .hero-floral-divider{
      width:78px !important;
      margin:0 auto 10px !important;
    }

    .hero-v2 h1{
      margin:0 !important;
      font-size:clamp(48px,11vw,62px) !important;
      line-height:.84 !important;
      letter-spacing:-.035em !important;
    }

    .name-rule{
      width:100% !important;
      margin:15px 0 14px !important;
      gap:10px !important;
    }

    .name-rule img{
      width:15px !important;
      height:15px !important;
    }

    .hero-date-v2{
      font-size:16px !important;
      line-height:1.2 !important;
      letter-spacing:.12em !important;
    }

    .hero-intro-v2{
      margin-top:12px !important;
      max-width:330px !important;
      font-size:17px !important;
      line-height:1.35 !important;
    }

    .hero-actions-v2{
      display:flex !important;
      flex-direction:row !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      gap:14px !important;
      margin-top:16px !important;
    }

    .hero-button-v2{
      flex:0 1 auto !important;
      padding:12px 14px !important;
      font-size:9px !important;
      line-height:1.2 !important;
      letter-spacing:.08em !important;
      white-space:nowrap !important;
      box-shadow:3px 3px 0 var(--pink) !important;
    }

    .hero-story-link-v2{
      flex:0 1 auto !important;
      padding:11px 6px 9px !important;
      font-size:9px !important;
      line-height:1.2 !important;
      letter-spacing:.07em !important;
      white-space:nowrap !important;
    }

    /*
      Scroll cue is now an overlay on the blended transition.
      It no longer sits between the copy and image in document flow.
    */
    .scroll-cue{
      position:absolute !important;
      z-index:9 !important;
      left:50% !important;
      top:56% !important;
      right:auto !important;
      bottom:auto !important;
      margin:0 !important;
      transform:translate(-50%,-50%) !important;
      gap:2px !important;
    }

    .scroll-cue .pixel-couple{
      width:40px !important;
    }

    .scroll-cue .down-arrow{
      width:9px !important;
      height:12px !important;
    }

    /* Keep decorative petals above the photo but below the text. */
    .hero-petals{
      z-index:5 !important;
    }
  }

  /* Narrow phones: preserve the same architecture, only tighten dimensions. */
  @media(max-width:480px){
    .hero-v2{
      padding-top:78px !important;
      min-height:690px !important;
    }

    .hero-stage{
      height:calc(100svh - 78px) !important;
      min-height:612px !important;
    }

    .hero-copy-v2{
      padding:16px 12px 0 !important;
    }

    .hero-v2 h1{
      font-size:clamp(46px,14vw,57px) !important;
    }

    .hero-actions-v2{
      gap:10px !important;
    }

    .hero-button-v2,
    .hero-story-link-v2{
      font-size:8px !important;
    }

    .hero-image{
      top:42% !important;
    }

    .hero-main-photo{
      transform:scale(1.24) !important;
    }

    .hero-v2 .bougainvillea{
      top:-48px !important;
      right:-16px !important;
      width:min(44vw,185px) !important;
    }

    .scroll-cue{
      top:58% !important;
    }
  }


/* ===== tablet-hero-true-overlap ===== */
/*
    TABLET ONLY: 761–1000px.
    Desktop (>1000px) remains completely unchanged.
    Phone (<=760px) keeps the already-approved mobile overlap treatment.
  */
  @media (min-width:761px) and (max-width:1000px){

    .hero-v2{
      position:relative !important;
      height:100svh !important;
      min-height:760px !important;
      padding-top:92px !important;
      overflow:hidden !important;
      background:var(--cream) !important;
    }

    .hero-stage{
      position:relative !important;
      display:block !important;
      height:calc(100svh - 92px) !important;
      min-height:668px !important;
      padding:0 !important;
      overflow:hidden !important;
    }

    /*
      Stop treating the photograph as a separate right-side panel.
      It now fills the lower portion of the SAME hero composition.
    */
    .hero-image{
      position:absolute !important;
      z-index:1 !important;
      left:0 !important;
      right:0 !important;
      top:38% !important;
      bottom:0 !important;
      width:100% !important;
      height:auto !important;
      margin:0 !important;
      inset:38% 0 0 0 !important;
      overflow:visible !important;
      background:transparent !important;
      aspect-ratio:auto !important;
    }

    /*
      Crop toward the useful lower half so the people/sunset arrive sooner.
      Fade the image upward into cream so there is no hard section break.
    */
    .hero-main-photo{
      position:absolute !important;
      z-index:1 !important;
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      object-fit:cover !important;
      object-position:center 62% !important;
      transform:scale(1.08) !important;
      transform-origin:50% 100% !important;

      -webkit-mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.16) 7%,
        rgba(0,0,0,.68) 17%,
        #000 29%,
        #000 100%
      ) !important;
      mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.16) 7%,
        rgba(0,0,0,.68) 17%,
        #000 29%,
        #000 100%
      ) !important;
    }

    .hero-image::before{
      display:none !important;
      content:none !important;
    }

    /*
      Keep the copy comfortably above the image but allow the lower part
      of the composition to visually merge into the photograph.
    */
    .hero-copy-v2{
      position:relative !important;
      z-index:7 !important;
      width:min(650px,82vw) !important;
      max-width:none !important;
      margin:0 !important;
      padding:26px 0 0 5.2vw !important;
      transform:none !important;
    }

    .hero-kicker-v2{
      width:min(460px,74vw) !important;
      margin:0 0 10px !important;
      font-size:11px !important;
      line-height:1.2 !important;
      letter-spacing:.21em !important;
      text-align:center !important;
    }

    .hero-floral-divider{
      width:94px !important;
      margin:0 0 14px 150px !important;
    }

    .hero-v2 h1{
      margin:0 !important;
      font-size:clamp(66px,9vw,86px) !important;
      line-height:.82 !important;
      letter-spacing:-.04em !important;
    }

    .name-rule{
      width:min(450px,72vw) !important;
      margin:19px 0 17px !important;
      gap:13px !important;
    }

    .name-rule img{
      width:17px !important;
      height:17px !important;
    }

    .hero-date-v2{
      font-size:19px !important;
      line-height:1.2 !important;
      letter-spacing:.13em !important;
    }

    .hero-intro-v2{
      margin-top:15px !important;
      max-width:410px !important;
      font-size:19px !important;
      line-height:1.38 !important;
    }

    .hero-actions-v2{
      display:flex !important;
      flex-direction:row !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      gap:22px !important;
      margin-top:19px !important;
    }

    .hero-button-v2{
      padding:14px 18px !important;
      font-size:10px !important;
      line-height:1.2 !important;
      letter-spacing:.09em !important;
      white-space:nowrap !important;
      box-shadow:3px 3px 0 var(--pink) !important;
    }

    .hero-story-link-v2{
      padding:11px 4px 9px !important;
      font-size:10px !important;
      line-height:1.2 !important;
      letter-spacing:.08em !important;
      white-space:nowrap !important;
    }

    /*
      Bougainvillea crosses the cream/photo blend and visually stitches
      the two areas together.
    */
    .hero-v2 .bougainvillea{
      position:absolute !important;
      z-index:4 !important;
      top:-65px !important;
      right:-28px !important;
      width:min(31vw,285px) !important;
      max-width:none !important;
      opacity:.98 !important;
      filter:drop-shadow(0 6px 9px rgba(72,38,48,.12)) !important;
    }

    /*
      Float the scroll cue on the transition instead of using it as
      a divider between typography and photograph.
    */
    .scroll-cue{
      position:absolute !important;
      z-index:9 !important;
      left:50% !important;
      top:57% !important;
      right:auto !important;
      bottom:auto !important;
      margin:0 !important;
      transform:translate(-50%,-50%) !important;
      gap:2px !important;
    }

    .scroll-cue .pixel-couple{
      width:44px !important;
    }

    .scroll-cue .down-arrow{
      width:10px !important;
      height:13px !important;
    }

    .hero-petals{
      z-index:5 !important;
    }
  }


/* ===== mobile-tablet-scroll-cue-lower-final ===== */
/* Desktop (>1000px) intentionally untouched. */

  @media(max-width:1000px){
    .scroll-cue{
      position:fixed !important;
      left:50% !important;
      right:auto !important;
      top:auto !important;
      bottom:20px !important;
      margin:0 !important;
      transform:translateX(-50%) !important;
      z-index:60 !important;

      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition:
        opacity .22s ease,
        visibility .22s ease !important;
    }

    body.hero-passed .scroll-cue{
      opacity:0 !important;
      visibility:hidden !important;
      pointer-events:none !important;
    }
  }

  @media(min-width:761px) and (max-width:1000px){
    .scroll-cue{
      bottom:24px !important;
    }
  }

  @media(max-width:760px){
    .scroll-cue{
      bottom:18px !important;
    }
  }

  @media(max-width:480px){
    .scroll-cue{
      bottom:14px !important;
    }
  }


/* ===== brand-vamosgamos-logo-true-double-size ===== */
.brand-vamosgamos-logo{
    width:110px !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  @media(max-width:760px){
    .brand-vamosgamos-logo{
      width:72px !important;
      height:auto !important;
      max-height:none !important;
    }
  }


/* ===== mobile-burger-menu-v1 ===== */
/* Burger is mobile-only. Desktop navigation remains exactly as before. */
  .mobile-menu-toggle{
    display:none;
  }

  @media(max-width:760px){
    .site-header.hero-header{
      justify-content:flex-start !important;
      overflow:visible !important;
    }

    .brand-monogram{
      flex:0 0 auto !important;
    }

    .quest-easter-egg{
      margin-left:auto !important;
      flex:0 0 auto !important;
    }

    .mobile-menu-toggle{
      appearance:none;
      -webkit-appearance:none;
      display:grid !important;
      place-items:center;
      position:relative;
      flex:0 0 40px;
      width:40px;
      height:40px;
      margin-left:12px;
      padding:0;
      color:var(--navy);
      background:transparent;
      border:1px solid rgba(21,55,91,.18);
      border-radius:0;
      cursor:pointer;
      z-index:55;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible{
      border-color:var(--pink);
      outline:none;
    }

    .mobile-menu-icon{
      position:absolute;
      width:21px;
      height:21px;
      transition:opacity .18s ease, transform .18s ease;
    }

    .mobile-menu-icon-open{
      opacity:1;
      transform:scale(1);
    }

    .mobile-menu-icon-close{
      opacity:0;
      transform:scale(.72) rotate(-18deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon-open{
      opacity:0;
      transform:scale(.72) rotate(18deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon-close{
      opacity:1;
      transform:scale(1) rotate(0);
    }

    /*
      Reuse the existing nav instead of duplicating menu content.
      Existing mobile CSS hides it; this late rule turns it into the dropdown.
    */
    .hero-header nav#main-navigation{
      display:flex !important;
      position:fixed !important;
      z-index:49;
      top:70px;
      left:0;
      right:0;
      width:100%;
      margin:0;
      padding:16px 18px 20px;
      flex-direction:column;
      align-items:stretch;
      gap:0 !important;

      background:rgba(251,246,236,.985);
      border-top:1px solid rgba(21,55,91,.07);
      border-bottom:1px solid rgba(21,55,91,.12);
      box-shadow:0 16px 30px rgba(21,55,91,.10);
      backdrop-filter:blur(12px);

      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(-10px);
      transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
    }

    body.mobile-menu-open .hero-header nav#main-navigation{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translateY(0);
    }

    .hero-header nav#main-navigation a{
      display:flex;
      align-items:center;
      min-height:48px;
      padding:0 4px !important;
      color:var(--navy);
      font-size:11px;
      font-weight:600;
      letter-spacing:.10em;
      border-bottom:1px solid rgba(21,55,91,.09);
    }

    .hero-header nav#main-navigation a:last-child{
      border-bottom:0;
      color:var(--pink);
    }

    body.mobile-menu-open{
      overflow:hidden;
    }
  }


/* ===== mobile-logo-as-menu-trigger ===== */
/* Desktop intentionally unchanged. */

  @media(max-width:760px){
    .mobile-menu-toggle{
      display:none !important;
    }

    .brand-monogram{
      position:relative !important;
      min-width:0 !important;
      width:auto !important;
      height:52px !important;
      margin:0 !important;
      padding:6px 25px 6px 8px !important;

      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;
      gap:0 !important;

      background:rgba(251,246,236,.66) !important;
      border:1px solid rgba(240,128,152,.38) !important;
      box-shadow:
        0 2px 0 rgba(240,128,152,.16),
        0 5px 12px rgba(21,55,91,.05) !important;

      text-decoration:none !important;
      cursor:pointer !important;
      -webkit-tap-highlight-color:transparent;
      transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
    }

    /* Small cue that the logo opens something, without adding another menu icon. */
    .brand-monogram::after{
      content:"⌄";
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-53%);
      color:#F08098;
      font-family:Georgia,serif;
      font-size:17px;
      line-height:1;
      font-weight:700;
      pointer-events:none;
      transition:transform .18s ease, color .18s ease;
    }

    .brand-monogram:hover,
    .brand-monogram:focus-visible{
      background:rgba(255,255,255,.78) !important;
      border-color:#F08098 !important;
      box-shadow:
        0 2px 0 rgba(240,128,152,.24),
        0 7px 16px rgba(21,55,91,.08) !important;
      outline:none !important;
    }

    .brand-monogram:active{
      transform:translateY(1px) !important;
    }

    body.mobile-menu-open .brand-monogram{
      background:rgba(255,224,232,.72) !important;
      border-color:#F08098 !important;
      box-shadow:
        0 2px 0 rgba(240,128,152,.28),
        0 8px 18px rgba(21,55,91,.09) !important;
    }

    body.mobile-menu-open .brand-monogram::after{
      transform:translateY(-45%) rotate(180deg);
      color:#15375B;
    }

    /* Keep the approved enlarged horizontal logo inside the clickable treatment. */
    .brand-vamosgamos-logo{
      width:72px !important;
      height:auto !important;
      max-height:none !important;
      object-fit:contain !important;
    }

    /* Header spacing now that the separate burger control is gone. */
    .site-header.hero-header{
      gap:10px !important;
    }

    .quest-easter-egg{
      margin-left:auto !important;
    }
  }


/* ===== mobile-left-burger-final ===== */
/* Desktop remains untouched. */
  .mobile-menu-toggle-left{
    display:none;
  }

  @media(max-width:760px){
    .site-header.hero-header{
      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;
      gap:8px !important;
      overflow:visible !important;
    }

    .mobile-menu-toggle-left{
      appearance:none;
      -webkit-appearance:none;
      display:grid !important;
      place-items:center;
      position:relative;
      flex:0 0 36px;
      width:36px;
      height:36px;
      padding:0;
      margin:0 2px 0 0;

      color:#15375B;
      background:transparent;
      border:0;
      border-radius:0;
      cursor:pointer;
      z-index:55;
      -webkit-tap-highlight-color:transparent;
    }

    .mobile-menu-toggle-left::before{
      content:"";
      position:absolute;
      inset:2px;
      border:1px solid rgba(21,55,91,.15);
      background:rgba(251,246,236,.54);
      transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
    }

    .mobile-menu-toggle-left:hover::before,
    .mobile-menu-toggle-left:focus-visible::before,
    .mobile-menu-toggle-left[aria-expanded="true"]::before{
      border-color:rgba(240,128,152,.72);
      background:rgba(255,224,232,.44);
    }

    .mobile-menu-toggle-left:focus-visible{
      outline:none;
    }

    .mobile-menu-icon{
      position:absolute;
      z-index:2;
      width:19px;
      height:19px;
      transition:opacity .18s ease, transform .18s ease;
    }

    .mobile-menu-icon-open{
      opacity:1;
      transform:scale(1);
    }

    .mobile-menu-icon-close{
      opacity:0;
      transform:scale(.75) rotate(-18deg);
    }

    .mobile-menu-toggle-left[aria-expanded="true"] .mobile-menu-icon-open{
      opacity:0;
      transform:scale(.75) rotate(18deg);
    }

    .mobile-menu-toggle-left[aria-expanded="true"] .mobile-menu-icon-close{
      opacity:1;
      transform:scale(1) rotate(0);
    }

    /* Remove the previous logo-as-button treatment on mobile. */
    .brand-monogram{
      position:relative !important;
      min-width:0 !important;
      width:auto !important;
      height:52px !important;
      margin:0 !important;
      padding:0 !important;

      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;

      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      transform:none !important;
      cursor:pointer !important;
    }

    .brand-monogram::after{
      content:none !important;
      display:none !important;
    }

    body.mobile-menu-open .brand-monogram{
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
    }

    .brand-vamosgamos-logo{
      width:72px !important;
      height:auto !important;
      max-height:none !important;
      object-fit:contain !important;
    }

    .quest-easter-egg{
      margin-left:auto !important;
    }
  }


/* ===== hero-quest-link-pixel-font ===== */
.hero-quest-link-v2{
    font-family:'Press Start 2P', monospace !important;
    font-weight:400 !important;
    letter-spacing:.06em !important;
  }


/* ===== join-the-quest-inline-outline-button ===== */
/* JOIN THE QUEST now lives with the other menu items, but keeps its own visual language. */
  .hero-header nav#main-navigation .quest-easter-egg{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    margin:0 !important;
    padding:10px 12px !important;

    color:var(--pink) !important;
    background:transparent !important;
    border:1px solid currentColor !important;

    font:400 9px/1 'Press Start 2P', monospace !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;

    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  .hero-header nav#main-navigation .quest-easter-egg:hover,
  .hero-header nav#main-navigation .quest-easter-egg:focus-visible{
    color:var(--pink) !important;
    background:transparent !important;
    border-color:currentColor !important;
    box-shadow:0 0 0 2px rgba(240,128,152,.12) !important;
    outline:none !important;
  }

  .hero-header nav#main-navigation .quest-easter-egg:active{
    transform:translateY(1px);
  }

  .hero-header nav#main-navigation .quest-easter-egg img{
    width:14px !important;
    height:14px !important;
    flex:0 0 auto !important;
  }

  .hero-header nav#main-navigation .quest-easter-egg span{
    display:inline !important;
  }

  /* Mobile dropdown: keep it with the list, not pushed to the old top-right position. */
  @media(max-width:760px){
    .hero-header nav#main-navigation .quest-easter-egg{
      align-self:flex-start !important;
      width:auto !important;
      min-height:42px !important;
      margin:12px 4px 2px !important;
      padding:10px 12px !important;

      color:var(--pink) !important;
      background:transparent !important;
      border:1px solid currentColor !important;

      font:400 8px/1 'Press Start 2P', monospace !important;
      letter-spacing:.04em !important;
    }

    .hero-header nav#main-navigation .quest-easter-egg img{
      width:13px !important;
      height:13px !important;
    }

    .hero-header nav#main-navigation .quest-easter-egg span{
      display:inline !important;
    }
  }


/* ===== wedding-plant-mobile-tablet-text-alignment ===== */
/*
    MOBILE + TABLET ONLY.
    Align the top of both bougainvillea layers with the start of
    the Wedding text block instead of the top edge of the section.
    Desktop (>1000px) remains untouched.
  */

  /* Tablet: section top padding 130px + copy top padding 34px. */
  @media(min-width:761px) and (max-width:1000px){
    .wedding-v3 .wedding-plant-back,
    .wedding-v3 .wedding-plant-front{
      top:164px !important;
    }
  }

  /* Mobile: section top padding becomes 100px + copy top padding 34px. */
  @media(max-width:760px){
    .wedding-v3 .wedding-plant-back,
    .wedding-v3 .wedding-plant-front{
      top:134px !important;
    }
  }


/* ===== wedding-no-top-padding-mobile-tablet ===== */
/*
    MOBILE + TABLET ONLY:
    remove the empty blue strip above the Wedding composition.
    Keep desktop unchanged.
  */
  @media(max-width:1000px){
    .wedding-v3{
      padding-top:0 !important;
    }

    .wedding-v3 .wedding-plant-back,
    .wedding-v3 .wedding-plant-front{
      top:0 !important;
    }
  }


/* ===== bilingual-language-switch-styles ===== */
.site-language-switch{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex:0 0 auto;
    margin-left:-18px;
    color:var(--navy);
  }

  .site-language-option{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    padding:5px 3px;
    margin:0;
    background:transparent;
    color:rgba(21,55,91,.42);
    font:600 10px/1 'Inter',Arial,sans-serif;
    letter-spacing:.08em;
    cursor:pointer;
    transition:color .16s ease, transform .16s ease;
  }

  .site-language-option:hover,
  .site-language-option:focus-visible{
    color:var(--pink);
    outline:none;
  }

  .site-language-option.is-active{
    color:var(--pink);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
  }

  .site-language-separator{
    color:rgba(21,55,91,.25);
    font-size:10px;
  }

  /* Greek text needs slightly less tracking in compact/pixel UI. */
  html[lang="el"] .small-pixel,
  html[lang="el"] .quest-easter-egg,
  html[lang="el"] .hero-quest-link-v2,
  html[lang="el"] .scroll-cue{
    letter-spacing:.015em !important;
  }

  html[lang="el"] .hero-header nav{
    letter-spacing:.035em;
  }

  /* Keep the expanded desktop/tablet nav comfortable after adding the language control. */
  @media(min-width:761px) and (max-width:1180px){
    .hero-header nav{
      gap:20px !important;
      font-size:11px !important;
    }

    .site-language-switch{
      margin-left:-6px;
    }
  }

  @media(max-width:760px){
    .site-language-switch{
      align-self:flex-start;
      justify-content:flex-start;
      margin:8px 4px 0;
      padding:7px 8px;
      border-top:1px solid rgba(21,55,91,.09);
    }

    .site-language-option{
      min-width:32px;
      padding:7px 4px;
      font-size:10px;
    }
  }


/* ===== greek-display-title-font-and-size-fix ===== */
/*
    GREEK MODE ONLY.
    The English headings keep all of their existing Cormorant sizing/styles.
    GFS Didot has native Greek glyphs, avoiding the mismatched fallback
    metrics that made these two translated titles look oversized.
  */
  html[lang="el"] .wedding-v3-title{
    font-family:'GFS Didot', Georgia, serif !important;
    font-weight:400 !important;
    font-size:clamp(52px,5.8vw,84px) !important;
    line-height:.90 !important;
    letter-spacing:-.018em !important;
  }

  html[lang="el"] .details-prep .section-heading{
    font-family:'GFS Didot', Georgia, serif !important;
    font-weight:400 !important;
    font-size:clamp(48px,5.4vw,78px) !important;
    line-height:.92 !important;
    letter-spacing:-.012em !important;
  }

  @media(max-width:760px){
    html[lang="el"] .wedding-v3-title{
      font-size:52px !important;
      line-height:.92 !important;
    }

    html[lang="el"] .details-prep .section-heading{
      font-size:48px !important;
      line-height:.94 !important;
    }
  }

  @media(max-width:480px){
    html[lang="el"] .wedding-v3-title{
      font-size:48px !important;
    }

    html[lang="el"] .details-prep .section-heading{
      font-size:44px !important;
    }
  }


/* ===== greek-hero-names-font-fix ===== */
/*
    GREEK ONLY:
    Use a native Greek display serif for ΗΛΙΑΣ / ΓΙΩΡΓΟΣ instead of
    inheriting the English Cormorant rule and falling back to a blocky font.
  */
  html[lang="el"] .hero-v2 h1{
    font-family:'GFS Didot', Georgia, serif !important;
    font-weight:400 !important;
    font-size:clamp(64px,7.2vw,108px) !important;
    line-height:.84 !important;
    letter-spacing:-.025em !important;
  }

  /* Keep the pink ampersand visually consistent with the English artwork. */
  html[lang="el"] .hero-v2 h1 .amp{
    font-family:'Cormorant Garamond', Georgia, serif !important;
    font-weight:500 !important;
    font-size:.76em !important;
  }

  /* Tablet */
  @media(min-width:761px) and (max-width:1000px){
    html[lang="el"] .hero-v2 h1{
      font-size:clamp(56px,7.3vw,72px) !important;
      line-height:.88 !important;
      letter-spacing:-.018em !important;
    }
  }

  /* Mobile */
  @media(max-width:760px){
    html[lang="el"] .hero-v2 h1{
      font-size:clamp(46px,10.5vw,58px) !important;
      line-height:.88 !important;
      letter-spacing:-.015em !important;
    }
  }

  @media(max-width:480px){
    html[lang="el"] .hero-v2 h1{
      font-size:clamp(44px,11.8vw,54px) !important;
    }
  }


/* ===== mobile-language-switch-outside-burger ===== */
/*
    Default / desktop / tablet:
    keep the existing language control exactly where it already lives.
    The extra header copy is hidden.
  */
  .mobile-header-language-switch{
    display:none !important;
  }

  /*
    Burger layout only.
    Hide the switch inside the dropdown and expose the dedicated copy
    permanently at the right edge of the header.
  */
  @media(max-width:760px){
    .hero-header nav#main-navigation > .site-language-switch{
      display:none !important;
    }

    .hero-header .mobile-header-language-switch{
      display:flex !important;
      position:relative !important;
      z-index:56 !important;

      flex:0 0 auto !important;
      align-self:center !important;
      align-items:center !important;
      justify-content:center !important;

      margin:0 0 0 auto !important;
      padding:0 !important;
      gap:4px !important;

      border:0 !important;
      background:transparent !important;
      color:var(--navy) !important;
    }

    .hero-header .mobile-header-language-switch .site-language-option{
      min-width:0 !important;
      padding:7px 3px !important;
      font-size:10px !important;
      line-height:1 !important;
    }

    .hero-header .mobile-header-language-switch .site-language-separator{
      font-size:10px !important;
    }
  }


/* ===== wedding-mobile-plant-layer-inversion ===== */
/*
    MOBILE ONLY:
    invert the two existing bougainvillea layers around the Wedding text.
    Content wrapper remains z-index:2.
  */
  @media(max-width:760px){
    .wedding-v3 .wedding-plant-front{
      z-index:1 !important; /* now behind the letters */
    }

    .wedding-v3 .wedding-plant-back{
      z-index:4 !important; /* now in front of the letters */
    }
  }


/* ===== wedding-venue-card-restructure-spacing ===== */
.wedding-v3 .checkpoint-address-primary{
    margin-top:0 !important;
  }

  .wedding-v3 .checkpoint-place + .checkpoint-time{
    margin-top:7px !important;
  }


/* ===== wedding-clickable-address-style ===== */
.wedding-v3 .checkpoint-address-link{
    display:flex !important;
    align-items:flex-start !important;
    gap:7px !important;
    width:fit-content !important;
    max-width:100% !important;

    margin-top:0 !important;
    color:rgba(21,55,91,.72) !important;
    font-family:'Cormorant Garamond', Georgia, serif !important;
    font-size:16px !important;
    font-style:italic !important;
    font-weight:500 !important;
    line-height:1.35 !important;

    text-decoration:none !important;
    border-bottom:1px dashed rgba(21,55,91,.28) !important;

    transition:
      color .18s ease,
      border-color .18s ease,
      transform .18s ease !important;
  }

  .wedding-v3 .checkpoint-address-link:hover,
  .wedding-v3 .checkpoint-address-link:focus-visible{
    color:var(--pink) !important;
    border-bottom-color:currentColor !important;
    outline:none !important;
  }

  .wedding-v3 .checkpoint-address-link:active{
    transform:translateY(1px);
  }

  .wedding-v3 .checkpoint-address-icon{
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
    margin-top:2px !important;
    color:var(--pink) !important;
  }

  @media(max-width:760px){
    .wedding-v3 .checkpoint-address-link{
      font-size:15px !important;
      line-height:1.38 !important;
    }
  }


/* ===== wedding-bottom-padding-removed ===== */
/* End the Wedding section with its content instead of an empty blue band. */
  .wedding-v3{
    padding-bottom:0 !important;
  }


/* ===== logistics-half-outer-padding ===== */
/* Only trim the empty blue space before/after The Logistics content. */
  .details-prep{
    padding-top:47px !important;
    padding-bottom:46px !important;
  }

  @media(max-width:760px){
    .details-prep{
      padding-top:36px !important;
      padding-bottom:37px !important;
    }
  }


/* ===== memories-half-outer-padding ===== */
/* Only trim the empty space before and after the Memories content. */
  .memories-v2{
    padding-top:44px !important;
    padding-bottom:66px !important;
  }

  @media(max-width:900px){
    .memories-v2{
      padding-top:38px !important;
      padding-bottom:66px !important;
    }
  }

  @media(max-width:560px){
    .memories-v2{
      padding-top:32px !important;
      padding-bottom:52px !important;
    }
  }


/* ===== logistics-top-padding-plus-15 ===== */
/* Increase only the starting/top padding of The Logistics by ~15%. */
  .details-prep{
    padding-top:54px !important;
  }

  @media(max-width:760px){
    .details-prep{
      padding-top:41px !important;
    }
  }


/* ===== plan-top-padding-minus-30 ===== */
/* Reduce only the starting/top padding of The Plan by ~30%. */
  .itinerary-editorial{
    padding-top:53px !important;
  }

  @media(max-width:760px){
    .itinerary-editorial{
      padding-top:42px !important;
    }
  }


/* ===== selected-section-anchor-offset-fix ===== */
/*
    Fix ONLY these three menu destinations.
    Their section top now lands immediately below the fixed header,
    preserving the section's own top padding and full title.
  */
  #itinerary,
  #supplies,
  #memories{
    scroll-margin-top:92px !important;
  }

  @media(max-width:760px){
    #itinerary,
    #supplies,
    #memories{
      scroll-margin-top:70px !important;
    }
  }


/* ===== plan-top-padding-minus-another-10 ===== */
/* Reduce only the current top padding of The Plan by another ~10%. */
  .itinerary-editorial{
    padding-top:48px !important;
  }

  @media(max-width:760px){
    .itinerary-editorial{
      padding-top:38px !important;
    }
  }


/* ===== plan-bottom-padding-minus-25 ===== */
/* Reduce only the ending/bottom padding of The Plan by 25%. */
  .itinerary-editorial{
    padding-bottom:75px !important;
  }

  @media(max-width:760px){
    .itinerary-editorial{
      padding-bottom:60px !important;
    }
  }


/* ===== plan-bottom-padding-minus-25-corrected ===== */
/* True 25% reduction from the actual existing values:
     desktop/tablet 68px -> 51px
     mobile 58px -> 44px
  */
  .itinerary-editorial{
    padding-bottom:51px !important;
  }

  @media(max-width:760px){
    .itinerary-editorial{
      padding-bottom:44px !important;
    }
  }


/* ===== three-sections-top-padding-plus-15 ===== */
/* Add ~15% more starting/top padding to these three sections only. */

  /* THE PLAN: 48px -> 55px */
  .itinerary-editorial{
    padding-top:55px !important;
  }

  /* THE LOGISTICS: 54px -> 62px */
  .details-prep{
    padding-top:62px !important;
  }

  /* MEMORIES: 44px -> 51px */
  .memories-v2{
    padding-top:51px !important;
  }

  @media(max-width:900px){
    /* MEMORIES tablet: 38px -> 44px */
    .memories-v2{
      padding-top:44px !important;
    }
  }

  @media(max-width:760px){
    /* THE PLAN mobile: 38px -> 44px */
    .itinerary-editorial{
      padding-top:44px !important;
    }

    /* THE LOGISTICS mobile: 41px -> 47px */
    .details-prep{
      padding-top:47px !important;
    }
  }

  @media(max-width:560px){
    /* MEMORIES phone: 32px -> 37px */
    .memories-v2{
      padding-top:37px !important;
    }
  }


/* ===== final-typography-system-cleanup ===== */
/*
    TYPOGRAPHY SYSTEM
    -----------------
    Editorial EN: Cormorant Garamond, weight 500
    Editorial EL: GFS Didot, weight 400
    Pixel EN: Press Start 2P
    Pixel EL: Handjet (native Greek support)
    Pixel label sizes: SMALL + MICRO only
  */

  :root{
    --pixel-small-size:8px;
    --pixel-micro-size:6px;
    --pixel-small-line:1.45;
    --pixel-micro-line:1.4;
  }

  /* ---------------------------------------------------------
     1) NORMALIZE ENGLISH EDITORIAL HEADING WEIGHTS
     Logistics had accumulated a heavier 600 override.
     --------------------------------------------------------- */
  html:not([lang="el"]) .section-heading,
  html:not([lang="el"]) .wedding-v3-title,
  html:not([lang="el"]) .details-prep .section-heading,
  html:not([lang="el"]) .itinerary-title-block .section-heading,
  html:not([lang="el"]) .memories-head .section-heading{
    font-weight:500 !important;
  }

  /* ---------------------------------------------------------
     2) ONE GREEK DISPLAY FAMILY FOR ALL MAJOR EDITORIAL TITLES
     Keep each section's approved responsive SIZE/layout rules.
     --------------------------------------------------------- */
  html[lang="el"] .hero-v2 h1,
  html[lang="el"] .wedding-v3-title,
  html[lang="el"] .itinerary-title-block .section-heading,
  html[lang="el"] .details-prep .section-heading,
  html[lang="el"] .memories-head .section-heading{
    font-family:'GFS Didot', Georgia, serif !important;
    font-weight:400 !important;
    letter-spacing:-.015em !important;
  }

  /*
    Preserve the deliberately pink ampersand treatment in the hero.
    It is decorative Latin punctuation rather than translated Greek text.
  */
  html[lang="el"] .hero-v2 h1 .amp{
    font-family:'Cormorant Garamond', Georgia, serif !important;
    font-weight:500 !important;
  }

  /* ---------------------------------------------------------
     3) TWO DELIBERATE SMALL PIXEL-TEXT SIZES
     SMALL = normal labels / checkpoints / signatures
     MICRO = metadata / secret-status labels
     --------------------------------------------------------- */
  .small-pixel,
  .details-prep-kicker,
  .detail-label,
  .checkpoint-label,
  .route-copy .small-pixel,
  .route-start .small-pixel,
  .wedding-v3 .small-pixel,
  .details-bottom-signature .details-prep-kicker{
    font-size:var(--pixel-small-size) !important;
    line-height:var(--pixel-small-line) !important;
    letter-spacing:.035em !important;
  }

  .itinerary-meta,
  .sidequest-label .small-pixel{
    font-size:var(--pixel-micro-size) !important;
    line-height:var(--pixel-micro-line) !important;
    letter-spacing:.04em !important;
  }

  /* ---------------------------------------------------------
     4) GREEK-CAPABLE RETRO / PIXEL UI FONT
     Replace browser fallback for translated Greek UI strings.
     Large game-display pixel text retains its intentional own sizing.
     --------------------------------------------------------- */
  html[lang="el"] .small-pixel,
  html[lang="el"] .details-prep-kicker,
  html[lang="el"] .detail-label,
  html[lang="el"] .itinerary-meta,
  html[lang="el"] .checkpoint-label,
  html[lang="el"] .route-copy .small-pixel,
  html[lang="el"] .route-start .small-pixel,
  html[lang="el"] .sidequest-label .small-pixel,
  html[lang="el"] .route-dot-secret,
  html[lang="el"] .hero-quest-link-v2,
  html[lang="el"] .quest-easter-egg,
  html[lang="el"] .scroll-cue,
  html[lang="el"] .bonus-v4-eyebrow,
  html[lang="el"] .bonus-v4-kicker,
  html[lang="el"] .bonus-v4-caption.small-pixel,
  html[lang="el"] .game-reveal-card h3{
    font-family:'Handjet', monospace !important;
    font-weight:600 !important;
    letter-spacing:.035em !important;
  }

  /*
    JOIN THE QUEST and THE QUEST are CTAs, so they intentionally remain
    one step larger than informational labels while using the same EL font.
  */
  html[lang="el"] .quest-easter-egg,
  html[lang="el"] .hero-quest-link-v2{
    font-weight:600 !important;
  }

  @media(max-width:760px){
    :root{
      --pixel-small-size:7px;
      --pixel-micro-size:6px;
      --pixel-small-line:1.4;
      --pixel-micro-line:1.35;
    }
  }


/* ===== greek-pixel-text-double-size ===== */
/*
    GREEK ONLY:
    Double the readable 8-bit/UI text sizes introduced in the typography cleanup.
    English stays unchanged.
    Large game-display pixel text is intentionally excluded.
  */

  html[lang="el"] .small-pixel,
  html[lang="el"] .details-prep-kicker,
  html[lang="el"] .detail-label,
  html[lang="el"] .checkpoint-label,
  html[lang="el"] .route-copy .small-pixel,
  html[lang="el"] .route-start .small-pixel,
  html[lang="el"] .wedding-v3 .small-pixel,
  html[lang="el"] .details-bottom-signature .details-prep-kicker{
    font-size:16px !important;
    line-height:1.35 !important;
  }

  html[lang="el"] .itinerary-meta,
  html[lang="el"] .sidequest-label .small-pixel{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  /* Greek CTA / navigation pixel labels */
  html[lang="el"] .hero-quest-link-v2,
  html[lang="el"] .quest-easter-egg,
  html[lang="el"] .scroll-cue{
    font-size:16px !important;
    line-height:1.25 !important;
  }

  @media(max-width:760px){
    html[lang="el"] .small-pixel,
    html[lang="el"] .details-prep-kicker,
    html[lang="el"] .detail-label,
    html[lang="el"] .checkpoint-label,
    html[lang="el"] .route-copy .small-pixel,
    html[lang="el"] .route-start .small-pixel,
    html[lang="el"] .wedding-v3 .small-pixel,
    html[lang="el"] .details-bottom-signature .details-prep-kicker{
      font-size:14px !important;
    }

    html[lang="el"] .itinerary-meta,
    html[lang="el"] .sidequest-label .small-pixel{
      font-size:12px !important;
    }

    html[lang="el"] .hero-quest-link-v2,
    html[lang="el"] .quest-easter-egg,
    html[lang="el"] .scroll-cue{
      font-size:14px !important;
    }
  }


/* ===== final-copy-palette-system-cleanup ===== */
/*
    FINAL ACTIVE PALETTE ROLES
    --------------------------
    Navy text          #15375B
    Deep navy          #0D2742
    Surface blue       #6796BF
    Pink accent        #F08098
    Dark pink text     #F08098
    Blush decoration   #FFE0E8
    Cream              #FBF6EC
    Paper              #FFFDF8
  */
  :root{
    --navy:#15375B !important;
    --navy-deep:#0D2742 !important;
    --blue:#6796BF !important;
    --surface-blue:#6796BF !important;
    --surface-blue-soft:#6796BF !important;
    --pink:#F08098 !important;
    --blush:#FFE0E8;
    --cream:#FBF6EC !important;
    --cream-soft:#FBF6EC !important;
    --paper:#FFFDF8 !important;
    --text-muted:rgba(21,55,91,.78);
  }

  /* Core blue surfaces use exactly one blue. */
  .wedding-v3,
  .details-prep,
  .game-reveal-card,
  .site-footer-v2{
    background-color:var(--surface-blue) !important;
  }

  /*
    SMALL TEXT ON CREAM / WHITE:
    use the single darker pink text role instead of several nearby
    salmon/burgundy values.
  */
  .section-eyebrow,
  .itinerary-editorial .route-kicker,
  .itinerary-editorial .route-lock,
  .itinerary-editorial .sidequest-label .small-pixel,
  .wedding-paper-card .checkpoint-label,
  .card-index{
    color:var(--pink) !important;
  }

  /*
    SMALL TEXT ON BLUE:
    pale blush looked decorative but was weak at tiny sizes.
    Deep navy is the single readable UI-text role on blue surfaces.
  */
  .wedding-v3 .wedding-v3-quest,
  .wedding-v3 .wedding-v3-closing span,
  .details-prep .details-prep-kicker,
  .details-prep .detail-label,
  .details-prep .details-bottom-signature,
  .site-footer-v2 .small-pixel{
    color:var(--navy-deep) !important;
  }

  /* Keep blush only for decorative/supporting accents, not tiny body labels. */
  .bonus-pill,
  .game-reveal-card h3 span{
    color:var(--blush) !important;
  }

  /* One dark-pink role for text/icons that need a pink accent and contrast. */
  .checkpoint-time,
  .checkpoint-address-icon,
  .site-footer-v2 b,
  .route-dot-pink.route-dot-icon,
  .detail-loot .detail-icon-wrap{
    color:var(--pink) !important;
  }

  /* One blue role for blue icon/timeline accents. */
  .route-dot-blue.route-dot-icon,
  .detail-arrive .detail-icon-wrap{
    color:var(--navy) !important;
  }

  /* Supporting prose uses one muted navy value. */
  .itinerary-meta,
  .route-copy > p,
  .memory-card figcaption,
  .section-copy,
  .checkpoint-address{
    color:var(--text-muted) !important;
  }

  /*
    Memory badges are tiny text: keep the blue badge family but use
    deep-navy text rather than another pale/white variant.
  */
  .memory-badge{
    background:var(--surface-blue) !important;
    color:var(--navy-deep) !important;
  }

  /* Consolidate the remaining visible blue/pink gradient role. */
  .game-ground-line{
    background:linear-gradient(90deg,var(--surface-blue),var(--pink),var(--surface-blue)) !important;
  }


/* ===== soft-pink-palette-restored-final ===== */
/*
    SOFT PALETTE — FINAL
    No dark-pink/burgundy role.
    Pink accent: #F08098
    Pale blush:  #FFE0E8
  */
  :root{
    --pink:#F08098 !important;
    --blush:#FFE0E8 !important;
  }

  /* Tiny/supporting text sitting on blue surfaces returns to pale blush. */
  .wedding-v3 .wedding-v3-quest,
  .wedding-v3 .wedding-v3-closing span,
  .wedding-v3 .small-pixel,
  .details-prep .details-prep-kicker,
  .details-prep .detail-label,
  .details-prep .details-bottom-signature,
  .details-prep .small-pixel,
  .site-footer-v2 .small-pixel{
    color:var(--blush) !important;
  }

  /*
    Pink text/icons on cream, white and paper use the normal soft pink.
    There is deliberately no darker pink variant anymore.
  */
  .section-eyebrow,
  .itinerary-editorial .route-kicker,
  .itinerary-editorial .route-lock,
  .itinerary-editorial .sidequest-label .small-pixel,
  .wedding-paper-card .checkpoint-label,
  .card-index,
  .checkpoint-time,
  .checkpoint-address-icon,
  .site-footer-v2 b,
  .route-dot-pink.route-dot-icon,
  .detail-loot .detail-icon-wrap{
    color:var(--pink) !important;
  }

  /* Decorative/supporting blush stays deliberately pale. */
  .bonus-pill,
  .game-reveal-card h3 span{
    color:var(--blush) !important;
  }


/* ===== memories-heading-final-unification ===== */
/*
    Unify the Memories title with the main editorial heading system.
    Keep the compact Memories section spacing/layout unchanged.
  */

  html:not([lang="el"]) .memories-head .section-heading{
    font-family:'Cormorant Garamond', Georgia, serif !important;
    font-weight:500 !important;
    font-size:clamp(52px,6vw,92px) !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;
  }

  html[lang="el"] .memories-head .section-heading{
    font-family:'GFS Didot', Georgia, serif !important;
    font-weight:400 !important;
    font-size:clamp(52px,6vw,92px) !important;
    line-height:.92 !important;
    letter-spacing:-.015em !important;
  }


/* ===== memories-heading-single-line-desktop ===== */
/*
    DESKTOP WEBSITE ONLY:
    the old compact Memories intro capped the heading wrapper at 660px,
    which forced the newly unified title onto two lines.
    Remove only that width constraint here.
  */
  @media(min-width:901px){
    .memories-head > div{
      max-width:none !important;
      width:100% !important;
    }

    .memories-head .section-heading{
      max-width:none !important;
      white-space:nowrap !important;
    }
  }


/* ===== memories-heading-single-line-fixed-breakpoint ===== */
/*
    NON-MOBILE WEBSITE/TABLET LAYOUT:
    The old <=900px Memories compact rule still imposed max-width:560px.
    Override it from 761px upward so the English title cannot wrap.
  */
  @media(min-width:761px){
    .memories-head > div{
      max-width:none !important;
      width:100% !important;
    }

    html:not([lang="el"]) .memories-head .section-heading{
      max-width:none !important;
      width:max-content !important;
      white-space:nowrap !important;
    }
  }


/* ===== logistics-heading-final-consistency-fix ===== */
/* ENGLISH: Logistics now matches Plan/Memories exactly. */
  html:not([lang="el"]) .details-prep .section-heading{
    font-family:'Cormorant Garamond', Georgia, serif !important;
    font-weight:500 !important;
    font-size:clamp(52px,6vw,92px) !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;
  }

  /* GREEK: Logistics now matches Greek Plan/Memories exactly. */
  html[lang="el"] .details-prep .section-heading{
    font-family:'GFS Didot', Georgia, serif !important;
    font-weight:400 !important;
    font-size:clamp(52px,6vw,92px) !important;
    line-height:.92 !important;
    letter-spacing:-.015em !important;
  }


/* ===== greek-desktop-headings-25-smaller ===== */
/*
    GREEK + DESKTOP ONLY (>1000px):
    make the four major section titles exactly 25% smaller.
    English, tablet, and mobile remain unchanged.
  */
  @media(min-width:1001px){
    html[lang="el"] .wedding-v3-title{
      font-size:clamp(39px,4.35vw,63px) !important;
    }

    html[lang="el"] .itinerary-title-block .section-heading,
    html[lang="el"] .details-prep .section-heading,
    html[lang="el"] .memories-head .section-heading{
      font-size:clamp(39px,4.5vw,69px) !important;
    }
  }


/* ===== greek-game-mission-caption-plus-30 ===== */
/*
    GREEK ONLY, ALL BREAKPOINTS:
    increase only the mission sentence
    "Βοήθησε τον Γιώργο και τον Ηλία..." by 30%.
  */
  html[lang="el"] .bonus-v4-world > .bonus-v4-caption.small-pixel{
    font-size:20.8px !important; /* 16px × 1.30 */
  }

  @media(max-width:760px){
    html[lang="el"] .bonus-v4-world > .bonus-v4-caption.small-pixel{
      font-size:18.2px !important; /* 14px × 1.30 */
    }
  }


/* ===== greek-game-mission-caption-another-plus-30 ===== */
/*
    GREEK ONLY, ALL BREAKPOINTS:
    increase the same mission sentence by another 30%.
  */
  html[lang="el"] .bonus-v4-world > .bonus-v4-caption.small-pixel{
    font-size:27.04px !important; /* 20.8px × 1.30 */
  }

  @media(max-width:760px){
    html[lang="el"] .bonus-v4-world > .bonus-v4-caption.small-pixel{
      font-size:23.66px !important; /* 18.2px × 1.30 */
    }
  }


/* ===== koumpares-section-v1 ===== */
/* ---------------------------------------------------------
     KOUMPARES SECTION
     --------------------------------------------------------- */
  .koumpares-section{
    position:relative;
    overflow:hidden;
    background:#6796BF !important;
    padding:72px 0 82px !important;
  }

  .koumpares-inner{
    position:relative;
    z-index:2;
  }

  .koumpares-heading{
    max-width:980px;
    margin:0 0 38px;
  }

  .koumpares-eyebrow{
    margin:0 0 12px;
    color:#FFE0E8 !important;
  }

  .koumpares-title{
    margin:0;
    max-width:980px;
    color:#15375B;
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:clamp(52px,5.8vw,88px);
    font-weight:500;
    line-height:.92;
    letter-spacing:-.035em;
  }

  html[lang="el"] .koumpares-title{
    font-family:'GFS Didot', Georgia, serif;
    font-weight:400;
    letter-spacing:-.015em;
  }

  .koumpares-hint{
    margin:18px 0 0;
    color:#FFE0E8;
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    line-height:1.45;
    letter-spacing:.04em;
  }

  html[lang="el"] .koumpares-hint{
    font-family:'Handjet', monospace;
    font-size:16px;
    font-weight:600;
  }

  .koumpares-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:800px;
    margin-inline:auto;
    gap:clamp(18px,2.3vw,30px);
    align-items:stretch;
  }

  .koumpare-card{
    appearance:none;
    -webkit-appearance:none;
    display:block;
    position:relative;
    width:100%;
    min-width:0;
    height:clamp(470px,48vw,590px);
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    perspective:1400px;
    -webkit-tap-highlight-color:transparent;
  }

  .koumpare-card:focus-visible{
    outline:2px solid #FFE0E8;
    outline-offset:6px;
  }

  .koumpare-card-inner{
    display:block;
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform .62s cubic-bezier(.2,.75,.25,1);
  }

  .koumpare-card.is-flipped .koumpare-card-inner{
    transform:rotateY(180deg);
  }

  .koumpare-card-face{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    background:#FBF6EC;
    border:1px solid rgba(21,55,91,.16);
    box-shadow:
      0 14px 26px rgba(21,55,91,.12),
      5px 5px 0 rgba(255,224,232,.72);
  }

  .koumpare-card-front{
    padding:12px 12px 16px;
  }

  .koumpare-photo-frame{
    display:block;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    border:1px solid rgba(21,55,91,.13);
    background:#FFFDF8;
  }

  .koumpare-photo-frame img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .koumpare-name{
    display:block;
    margin-top:14px;
    color:#15375B;
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:30px;
    font-weight:600;
    line-height:1;
    text-align:center;
  }

  html[lang="el"] .koumpare-name,
  html[lang="el"] .koumpare-back-name{
    font-family:'GFS Didot', Georgia, serif;
    font-weight:400;
  }

  .koumpare-flip-hint{
    display:block;
    margin-top:10px;
    color:#F08098;
    font-family:'Press Start 2P', monospace;
    font-size:7px;
    line-height:1.4;
    letter-spacing:.035em;
    text-align:center;
  }

  html[lang="el"] .koumpare-flip-hint{
    font-family:'Handjet', monospace;
    font-size:14px;
    font-weight:600;
  }

  .koumpare-card-back{
    padding:25px 22px 18px;
    transform:rotateY(180deg);
  }

  .koumpare-back-name{
    display:block;
    margin:0 0 22px;
    color:#15375B;
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:32px;
    font-weight:600;
    line-height:1;
    text-align:center;
  }

  .koumpare-stat-block{
    display:block;
    padding:17px 0;
    border-top:1px solid rgba(21,55,91,.13);
  }

  .koumpare-stat-block + .koumpare-stat-block{
    margin-top:2px;
  }

  .koumpare-stat-title{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    line-height:1.35;
    letter-spacing:.035em;
  }

  html[lang="el"] .koumpare-stat-title{
    font-family:'Handjet', monospace;
    font-size:16px;
    font-weight:600;
  }

  .koumpare-stat-good .koumpare-stat-title{
    color:#15375B;
  }

  .koumpare-stat-bad .koumpare-stat-title{
    color:#F08098;
  }

  .koumpare-stat-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
  }

  .koumpare-stat-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }

  .koumpare-stat-list > span{
    display:inline-block;
    padding:7px 9px;
    border:1px solid rgba(21,55,91,.13);
    background:#FFFDF8;
    color:rgba(21,55,91,.82);
    font-family:Georgia, serif;
    font-size:14px;
    line-height:1.25;
  }

  html[lang="el"] .koumpare-stat-list > span{
    font-family:Georgia, serif;
  }

  .koumpare-card-back > .koumpare-flip-hint{
    margin-top:auto;
    padding-top:14px;
  }

  .koumpare-card:hover .koumpare-card-front{
    transform:translateY(-3px);
    box-shadow:
      0 18px 30px rgba(21,55,91,.15),
      5px 5px 0 rgba(255,224,232,.82);
    transition:transform .18s ease, box-shadow .18s ease;
  }

  /* Keep anchor landing clean below the fixed header. */
  #koumpares{
    scroll-margin-top:92px;
  }

  /* Tablet */
  @media(min-width:761px) and (max-width:1000px){
    .koumpares-section{
      padding:62px 0 70px !important;
    }

    .koumpares-heading{
      margin-bottom:30px;
    }

    .koumpares-grid{
      gap:16px;
    }

    .koumpare-card{
      height:500px;
    }

    .koumpare-name{
      font-size:25px;
    }

    .koumpare-card-back{
      padding:20px 16px 15px;
    }

    .koumpare-back-name{
      font-size:27px;
      margin-bottom:15px;
    }

    .koumpare-stat-block{
      padding:13px 0;
    }

    .koumpare-stat-list > span{
      font-size:12px;
      padding:6px 7px;
    }
  }

  /* Mobile: horizontal portrait deck, consistent with the scrapbook feel. */
  @media(max-width:760px){
    .koumpares-section{
      padding:48px 0 56px !important;
    }

    #koumpares{
      scroll-margin-top:70px;
    }

    .koumpares-heading{
      margin-bottom:26px;
      padding-right:18px;
    }

    .koumpares-title{
      font-size:clamp(44px,11vw,58px);
      line-height:.94;
    }

    .koumpares-grid{
      display:flex;
      gap:16px;
      width:calc(100% + 36px);
      max-width:none;
      margin-left:-18px;
      margin-right:0;
      padding:4px 18px 16px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }

    .koumpares-grid::-webkit-scrollbar{
      display:none;
    }

    .koumpare-card{
      flex:0 0 min(78vw,330px);
      height:500px;
      scroll-snap-align:center;
    }

    .koumpare-card:first-child{
      margin-left:0;
    }

    .koumpare-name{
      font-size:28px;
    }

    .koumpare-card-back{
      padding:22px 19px 16px;
    }

    .koumpare-back-name{
      font-size:30px;
    }

    .koumpare-stat-list > span{
      font-size:13px;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .koumpare-card-inner{
      transition:none;
    }

    .koumpare-card:hover .koumpare-card-front{
      transform:none;
    }
  }


/* ===== koumpares-shorter-cards ===== */
/*
    Keep the existing card widths exactly as they are.
    Reduce overall card/flip height by ~40% so portraits feel closer to square.
  */
  .koumpare-card{
    height:clamp(282px,28.8vw,354px) !important;
  }

  /* Give the photo most of the available height, while preserving name/frame space. */
  .koumpare-card-front{
    padding:10px 10px 12px !important;
  }

  .koumpare-name{
    margin-top:10px !important;
    font-size:26px !important;
  }

  .koumpare-flip-hint{
    margin-top:7px !important;
  }

  .koumpare-card-back{
    padding:18px 16px 12px !important;
  }

  .koumpare-back-name{
    margin-bottom:12px !important;
    font-size:27px !important;
  }

  .koumpare-stat-block{
    padding:9px 0 !important;
  }

  .koumpare-stat-title{
    margin-bottom:8px !important;
  }

  .koumpare-stat-list{
    gap:5px !important;
  }

  .koumpare-stat-list > span{
    padding:5px 7px !important;
    font-size:12px !important;
  }

  .koumpare-card-back > .koumpare-flip-hint{
    padding-top:8px !important;
  }

  @media(min-width:761px) and (max-width:1000px){
    .koumpare-card{
      height:300px !important;
    }

    .koumpare-name{
      font-size:23px !important;
    }

    .koumpare-back-name{
      font-size:24px !important;
    }

    .koumpare-stat-list > span{
      font-size:11px !important;
    }
  }

  @media(max-width:760px){
    .koumpare-card{
      height:300px !important;
    }

    .koumpare-name{
      font-size:24px !important;
    }

    .koumpare-back-name{
      font-size:25px !important;
    }

    .koumpare-card-back{
      padding:16px 14px 10px !important;
    }

    .koumpare-stat-list > span{
      font-size:11px !important;
    }
  }


/* ===== koumpares-mirrored-wedding-plant ===== */
/*
    Reuse the exact two existing Wedding bougainvillea layers.
    Mirror horizontally and anchor left so the plant grows left -> right.
  */
  .koumpares-section{
    position:relative !important;
    overflow:hidden !important;
  }

  .koumpares-plant-back,
  .koumpares-plant-front{
    position:absolute;
    top:0;
    left:0;
    right:auto;
    width:min(38vw,620px);
    height:auto;
    max-width:none;
    pointer-events:none;
    transform:scaleX(-1);
    transform-origin:center center;
  }

  .koumpares-plant-back{
    z-index:1;
  }

  .koumpares-plant-front{
    z-index:3;
  }

  .koumpares-inner{
    position:relative;
    z-index:2;
  }

  @media(max-width:1000px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      width:min(44vw,560px);
    }
  }

  @media(max-width:760px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      left:-20px;
      width:min(62vw,430px);
    }
  }

  @media(max-width:480px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      left:-30px;
      width:min(74vw,370px);
    }
  }


/* ===== koumpares-content-above-plant ===== */
/* Keep all Koumpares text/cards above both mirrored plant layers. */
  .koumpares-inner{
    position:relative !important;
    z-index:5 !important;
  }

  .koumpares-heading,
  .koumpares-title,
  .koumpares-eyebrow{
    position:relative !important;
    z-index:6 !important;
  }


/* ===== koumpares-wedding-style-layering ===== */
/*
    Match The Wedding's layering technique:
      back plant  -> behind photo tiles
      photo tiles -> middle
      front plant -> overlaps / "hugs" the tiles
      headings    -> always above everything
  */

  /* Do not let the whole inner wrapper create one high stacking context. */
  .koumpares-inner{
    position:relative !important;
    z-index:auto !important;
  }

  /* Existing mirrored Wedding assets retain their aligned geometry. */
  .koumpares-plant-back{
    z-index:1 !important;
  }

  .koumpares-grid{
    position:relative !important;
    z-index:2 !important;
  }

  .koumpares-plant-front{
    z-index:3 !important;
    pointer-events:none !important;
  }

  /* The title block must always sit in front of both plant layers. */
  .koumpares-heading{
    position:relative !important;
    z-index:6 !important;
  }

  .koumpares-title,
  .koumpares-eyebrow{
    position:relative !important;
    z-index:7 !important;
  }

  /* iPhone WebKit can composite both transformed plant layers over the cards. */
  .is-iphone .koumpares-section{
    isolation:isolate;
  }

  .is-iphone .koumpares-plant-back,
  .is-iphone .koumpares-plant-front{
    z-index:1 !important;
  }

  .is-iphone .koumpares-inner{
    z-index:2 !important;
  }

  /*
    Let the front foliage overlap the first portion of the photo row
    instead of staying concentrated only around the section heading.
    Same image/positioning; just a slightly lower visual reach.
  */
  .koumpares-plant-back,
  .koumpares-plant-front{
    top:18px !important;
  }

  @media(max-width:1000px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      top:12px !important;
    }
  }

  @media(max-width:760px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      top:8px !important;
    }

    /* Keep horizontally scrolling cards under the front foliage. */
    .koumpares-grid{
      z-index:2 !important;
    }
  }


/* ===== koumpares-final-layering-and-title-fixes ===== */
/*
    FINAL KOUMPARES LAYER ORDER
      1  back plant
      2  rotating card surfaces
      3  front plant
      5  flipped text overlay
      8+ section heading/title
  */

  /* Plant starts exactly at the section boundary at every breakpoint. */
  .koumpares-plant-back,
  .koumpares-plant-front{
    top:0 !important;
  }

  @media(max-width:1000px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      top:0 !important;
    }
  }

  @media(max-width:760px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      top:0 !important;
    }
  }

  @media(max-width:480px){
    .koumpares-plant-back,
    .koumpares-plant-front{
      top:0 !important;
    }
  }

  /*
    Title is always above the plant.
    Add only a subtle cream halo/stroke to THIS title for readability
    where dark letters cross dense flowers.
  */
  .koumpares-heading{
    position:relative !important;
    z-index:8 !important;
  }

  .koumpares-eyebrow{
    position:relative !important;
    z-index:9 !important;
  }

  .koumpares-title{
    position:relative !important;
    z-index:9 !important;
    -webkit-text-stroke:.28px rgba(251,246,236,.52);
    text-shadow:
      0 1px 0 rgba(251,246,236,.48),
      0 0 9px rgba(251,246,236,.34) !important;
  }

  /*
    The grid itself must NOT form a z-index stacking context.
    That allows the independent back-text overlays to rise above
    the section-level front plant.
  */
  .koumpares-grid{
    position:relative !important;
    z-index:auto !important;
  }

  /*
    Remove perspective from the button itself because perspective
    creates a stacking context. Put perspective directly into the
    rotating transform instead.
  */
  .koumpare-card{
    perspective:none !important;
    z-index:auto !important;
  }

  .koumpare-card-inner{
    position:relative !important;
    z-index:2 !important;
  }

  .koumpare-card.is-flipped .koumpare-card-inner{
    transform:perspective(1400px) rotateY(180deg) !important;
  }

  /* Keep the physical back card/panel under the plant, but hide its copy. */
  .koumpare-card-back > *{
    visibility:hidden !important;
  }

  /*
    Duplicate transparent text layer:
    hidden while front is showing,
    fades in above the plant after the card turns.
  */
  .koumpare-card-back-overlay{
    position:absolute;
    inset:0;
    z-index:5;

    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    padding:18px 16px 12px;

    background:transparent;
    border:0;
    pointer-events:none;

    opacity:0;
    visibility:hidden;
    transform:translateZ(0);
    transition:
      opacity .14s ease .16s,
      visibility 0s linear .30s;
  }

  .koumpare-card.is-flipped .koumpare-card-back-overlay{
    opacity:1;
    visibility:visible;
    transition:
      opacity .16s ease .30s,
      visibility 0s linear .30s;
  }

  /* Preserve the same back-side spacing/styles on the overlay copy. */
  .koumpare-card-back-overlay .koumpare-back-name{
    margin-bottom:12px !important;
    font-size:27px !important;
  }

  .koumpare-card-back-overlay .koumpare-stat-block{
    padding:9px 0 !important;
  }

  .koumpare-card-back-overlay .koumpare-stat-title{
    margin-bottom:8px !important;
  }

  .koumpare-card-back-overlay .koumpare-stat-list{
    gap:5px !important;
  }

  .koumpare-card-back-overlay .koumpare-stat-list > span{
    padding:5px 7px !important;
    font-size:12px !important;
  }

  .koumpare-card-back-overlay > .koumpare-flip-hint{
    margin-top:auto !important;
    padding-top:8px !important;
  }

  @media(min-width:761px) and (max-width:1000px){
    .koumpare-card-back-overlay{
      padding:18px 16px 12px;
    }

    .koumpare-card-back-overlay .koumpare-back-name{
      font-size:24px !important;
    }

    .koumpare-card-back-overlay .koumpare-stat-list > span{
      font-size:11px !important;
    }
  }

  @media(max-width:760px){
    .koumpare-card-back-overlay{
      padding:16px 14px 10px;
    }

    .koumpare-card-back-overlay .koumpare-back-name{
      font-size:25px !important;
    }

    .koumpare-card-back-overlay .koumpare-stat-list > span{
      font-size:11px !important;
    }
  }


/* ===== koumpares-title-clean-single-line ===== */
/* Only two changes:
     1) remove the title halo/stroke
     2) keep the full title on one line
  */
  .koumpares-heading{
    max-width:none !important;
    width:100% !important;
  }

  .koumpares-title{
    max-width:none !important;
    width:max-content !important;
    white-space:nowrap !important;

    -webkit-text-stroke:0 transparent !important;
    text-shadow:none !important;

    /* Slightly tighter responsive scale only so the full title can stay on one line. */
    font-size:clamp(44px,4.7vw,68px) !important;
  }

  @media(max-width:760px){
    .koumpares-title{
      font-size:clamp(25px,7vw,32px) !important;
    }
  }


/* ===== koumpares-game-pixel-divider ===== */
/*
    Thin 8-bit transition between Koumpares and the game world.
    No imagery: only CSS line + pixel blocks.
  */
  .pixel-zone-divider{
    position:relative;
    z-index:20;
    width:100%;
    height:10px;
    margin:0;
    background:#6796BF;
    overflow:visible;
  }

  .pixel-zone-divider::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:4px;
    height:3px;
    background:#F08098;
    box-shadow:
      0 -1px 0 rgba(255,224,232,.95),
      0 3px 0 rgba(255,224,232,.72);
  }

  .pixel-divider-block{
    position:absolute;
    z-index:2;
    top:2px;
    width:7px;
    height:7px;
    background:#F08098;
    border:1px solid #FFE0E8;
    transform:rotate(45deg);
    box-sizing:border-box;
  }

  .pixel-divider-block-1{ left:8%; }
  .pixel-divider-block-2{ left:27%; }
  .pixel-divider-block-3{ left:50%; }
  .pixel-divider-block-4{ left:73%; }
  .pixel-divider-block-5{ left:91%; }

  @media(max-width:760px){
    .pixel-zone-divider{
      height:9px;
    }

    .pixel-zone-divider::before{
      top:4px;
      height:2px;
    }

    .pixel-divider-block{
      top:2px;
      width:6px;
      height:6px;
    }

    .pixel-divider-block-1{ left:10%; }
    .pixel-divider-block-2{ left:31%; }
    .pixel-divider-block-3{ left:52%; }
    .pixel-divider-block-4{ left:73%; }
    .pixel-divider-block-5{ left:90%; }
  }


/* ===== koumpares-stat-text-no-background ===== */
/* Remove the white chip treatment from GOOD AT / BAD AT phrases only. */
  .koumpare-stat-list > span,
  .koumpare-card-back-overlay .koumpare-stat-list > span{
    background:transparent !important;
    border:0 !important;
    padding:2px 0 !important;
    box-shadow:none !important;
  }


/* ===== koumpares-couple-stat-icons ===== */
.koumpare-stat-couple-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:24px;
    flex:0 0 34px;
    overflow:visible;
  }

  .koumpare-stat-couple-icon img{
    width:30px;
    height:auto;
    display:block;
    image-rendering:pixelated;
  }

  .koumpare-stat-couple-icon::after{
    position:absolute;
    right:-3px;
    top:-3px;
    width:14px;
    height:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #15375B;
    box-shadow:2px 2px 0 rgba(21,55,91,.12);
    font-family:'Press Start 2P', monospace;
    font-size:7px;
    line-height:1;
    box-sizing:border-box;
  }

  html[lang="el"] .koumpare-stat-couple-icon::after{
    font-family:'Press Start 2P', monospace;
  }

  .koumpare-stat-couple-good::after{
    content:'+';
    background:#F8DCE4;
    color:#15375B;
  }

  .koumpare-stat-couple-bad::after{
    content:'×';
    background:#FBF6EC;
    color:#F08098;
  }

  .koumpare-stat-title{
    gap:10px;
  }

  @media (max-width: 700px){
    .koumpare-stat-couple-icon{
      width:32px;
      height:22px;
      flex-basis:32px;
    }
    .koumpare-stat-couple-icon img{
      width:28px;
    }
    .koumpare-stat-couple-icon::after{
      right:-2px;
      top:-2px;
      width:13px;
      height:13px;
      font-size:6px;
    }
  }


/* ===== footer-white-with-couple-icon ===== */
/* Footer only: true white background. */
  .site-footer-v2{
    background:#FFFFFF !important;
    background-color:#FFFFFF !important;
    color:#15375B !important;
    border-top:1px solid rgba(21,55,91,.08) !important;
    box-shadow:none !important;
  }

  .site-footer-v2 > span{
    color:#15375B !important;
  }

  .site-footer-v2 b{
    color:#F08098 !important;
  }

  .site-footer-v2 .small-pixel{
    color:#F08098 !important;
  }

  .site-footer-v2 .footer-credit{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }

  .site-footer-v2 .footer-couple-icon{
    display:block !important;
    width:32px !important;
    height:auto !important;
    flex:0 0 auto !important;
    image-rendering:pixelated;
  }

  @media(max-width:760px){
    .site-footer-v2 .footer-couple-icon{
      width:30px !important;
    }
  }


/* ===== footer-quest-status-strong-pink ===== */
.site-footer-v2 .footer-quest-status{
    color:#F08098 !important;
  }


/* ===== footer-cream-background-final ===== */
.site-footer-v2{
    background:#FBF6EC !important;
    background-color:#FBF6EC !important;
  }


/* ===== koumpares-plant-layers-swapped ===== */
/* Koumpares only: swap the two Wedding plant layers. */
  .koumpares-plant-back{
    z-index:3 !important;
  }

  .koumpares-plant-front{
    z-index:1 !important;
  }


/* ===== koumpares-title-standard-section-size ===== */
/* Match the standard English section-heading typography exactly. */
  @media(min-width:761px){
    html:not([lang="el"]) .koumpares-title{
      font-family:'Cormorant Garamond', Georgia, serif !important;
      font-size:clamp(52px,6vw,92px) !important;
      font-weight:500 !important;
      line-height:.92 !important;
      letter-spacing:-.035em !important;
    }
  }


/* ===== memories-real-photo-crop-positioning ===== */
.memory-card-1 .memory-photo-wrap img:not(.memory-pin){
    object-position:32% center !important;
  }

  .memory-card-2 .memory-photo-wrap img:not(.memory-pin){
    object-position:76% center !important;
  }

  .memory-card-3 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }

  .memory-card-4 .memory-photo-wrap img:not(.memory-pin){
    object-position:46% center !important;
  }

  .memory-card-5 .memory-photo-wrap img:not(.memory-pin){
    object-position:56% center !important;
  }

  .memory-card-6 .memory-photo-wrap img:not(.memory-pin){
    object-position:center 50% !important;
  }


/* ===== memories-photo-reassignment-crops ===== */
/* New photo 2: keep both faces comfortably in the existing tile. */
  .memory-card-2 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }

  /* New photo 4: preserve both seated figures within the existing frame. */
  .memory-card-4 .memory-photo-wrap img:not(.memory-pin){
    object-position:center 45% !important;
  }

  /* Existing photo 6 moved into tile 5. */
  .memory-card-5 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }

  /* Existing photo 5 moved into tile 6. */
  .memory-card-6 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }


/* ===== memory-tile-02-new-photo-crop ===== */
.memory-card-2 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }


/* ===== memories-tiles-01-02-new-crops ===== */
.memory-card-1 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }

  .memory-card-2 .memory-photo-wrap img:not(.memory-pin){
    object-position:center center !important;
  }


/* ===== memories-final-tagline-description-text ===== */
.memory-card figcaption{
    display:block;
  }

  .memory-card .memory-tagline{
    display:block;
    font:500 italic 20px/1.2 'Cormorant Garamond', Georgia, serif;
    color:var(--navy);
  }

  .memory-card .memory-description{
    display:block;
    margin-top:6px;
    max-width:100%;
    font:400 12px/1.45 'Inter', Arial, sans-serif;
    letter-spacing:.005em;
    color:rgba(21,55,91,.78);
  }

  html[lang="el"] .memory-card .memory-tagline{
    font-family:'GFS Didot', Georgia, serif;
    font-style:normal;
    font-weight:400;
  }

  @media(max-width:900px){
    .memory-card .memory-tagline{
      font-size:19px;
    }

    .memory-card .memory-description{
      font-size:11.5px;
      line-height:1.45;
    }
  }


/* ===== koumpares-back-copy-fit-only ===== */
/*
    Back-side layout only.
    Both cards use the exact same row structure:
    NAME / GOOD AT / BAD AT / TAP TO RETURN.
    Card dimensions are untouched.
  */
  .koumpare-card-back,
  .koumpare-card-back-overlay{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) minmax(0,1fr) auto !important;
    align-items:stretch !important;
    padding:11px 14px 9px !important;
  }

  .koumpare-card-back .koumpare-back-name,
  .koumpare-card-back-overlay .koumpare-back-name{
    margin:0 0 5px !important;
    font-size:24px !important;
    line-height:1 !important;
    align-self:start !important;
  }

  .koumpare-card-back .koumpare-stat-block,
  .koumpare-card-back-overlay .koumpare-stat-block{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:5px 0 !important;
  }

  .koumpare-card-back .koumpare-stat-block + .koumpare-stat-block,
  .koumpare-card-back-overlay .koumpare-stat-block + .koumpare-stat-block{
    margin-top:0 !important;
  }

  .koumpare-card-back .koumpare-stat-title,
  .koumpare-card-back-overlay .koumpare-stat-title{
    margin:0 0 4px !important;
  }

  /*
    Spread each card's individual points through its allocated GOOD/BAD row.
    This deliberately uses the full vertical space instead of leaving a
    leftover blank area under shorter cards.
  */
  .koumpare-card-back .koumpare-stat-list,
  .koumpare-card-back-overlay .koumpare-stat-list{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    justify-content:space-evenly !important;
    align-items:stretch !important;
    gap:2px !important;
    min-height:0 !important;
  }

  .koumpare-card-back .koumpare-stat-list > span,
  .koumpare-card-back-overlay .koumpare-stat-list > span{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:1px 0 !important;
    font-size:12.7px !important;
    line-height:1.23 !important;
  }

  .koumpare-card-back > .koumpare-flip-hint,
  .koumpare-card-back-overlay > .koumpare-flip-hint{
    margin:0 !important;
    padding-top:4px !important;
    align-self:end !important;
  }

  html[lang="el"] .koumpare-card-back .koumpare-stat-list > span,
  html[lang="el"] .koumpare-card-back-overlay .koumpare-stat-list > span{
    font-size:11.8px !important;
    line-height:1.2 !important;
  }

  @media(max-width:1000px){
    .koumpare-card-back,
    .koumpare-card-back-overlay{
      padding:10px 12px 8px !important;
    }

    .koumpare-card-back .koumpare-back-name,
    .koumpare-card-back-overlay .koumpare-back-name{
      margin-bottom:4px !important;
      font-size:22px !important;
    }

    .koumpare-card-back .koumpare-stat-block,
    .koumpare-card-back-overlay .koumpare-stat-block{
      padding:4px 0 !important;
    }

    .koumpare-card-back .koumpare-stat-title,
    .koumpare-card-back-overlay .koumpare-stat-title{
      margin-bottom:3px !important;
    }

    .koumpare-card-back .koumpare-stat-list > span,
    .koumpare-card-back-overlay .koumpare-stat-list > span{
      font-size:11.7px !important;
      line-height:1.2 !important;
    }

    html[lang="el"] .koumpare-card-back .koumpare-stat-list > span,
    html[lang="el"] .koumpare-card-back-overlay .koumpare-stat-list > span{
      font-size:11px !important;
      line-height:1.18 !important;
    }
  }

/* ===== persistent-header-live-link ===== */
.header-brand-group{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
  min-width:0;
}

.header-brand-group .brand-monogram{
  min-width:0;
}

.header-live-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:9px 13px;
  color:var(--navy);
  background:transparent;
  border:1px solid var(--pink);
  border-radius:999px;
  font:400 9.36px/1 'Press Start 2P',monospace;
  letter-spacing:.08em;
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}

.header-live-dot{
  width:9.36px;
  height:9.36px;
  flex:0 0 9.36px;
  border-radius:50%;
  background:#e53935;
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
}

.header-live-link:hover,
.header-live-link:focus-visible,
.header-live-link[aria-current="page"]{
  color:var(--navy);
  border-color:var(--pink);
  background:transparent;
  outline:none;
}

.header-live-link:active{
  transform:translateY(1px);
}

@media(max-width:760px){
  .header-brand-group{
    gap:9px;
    flex:0 1 auto;
  }

  .header-live-link{
    gap:5px;
    padding:7px 10px;
    font-size:7.02px;
    letter-spacing:.05em;
  }

  .header-live-dot{
    width:7.02px;
    height:7.02px;
    flex-basis:7.02px;
    box-shadow:0 0 0 2px rgba(229,57,53,.12);
  }
}