/* Basic styles for placeholder screens */
@font-face {
  font-family: 'Garamond';
  src: url('/fonts/Wff-Garamond.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'bornready';
  src: url('/fonts/Wff-Born-Ready.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --card:#fff;
  --accent:#0b5cff;
  --muted:#6b7280;
  --color-white:#ffffff;
  --color-brown:#512B1B; /* CI */
  --color-kicker: rgb(156,110,106);
  --color-secondary: rgb(130,89,69);
  --color-creme:#F0BB65; /* CI primary creme color */
  --color-creme-soft:rgb(255,245,233); /* legacy name kept for compatibility */
  --color-brown-dark:#3f1b12; /* Fallback für ältere Browser */
  --color-brown-dark: color-mix(in srgb, var(--color-brown) 70%, black 30%);
  --color-gold:#F0BB65; /* CI */
  --color-gold-dark:#a88347; /* Fallback für ältere Browser */
  --color-gold-dark: color-mix(in srgb, var(--color-gold) 70%, black 30%);
  --color-creme-font:#DECCB8; /* CI */
  --color-creme-font-dark:#9b8f81; /* Fallback für ältere Browser */
  --color-creme-font-dark: color-mix(in srgb, var(--color-creme-font) 70%, black 30%);
  --font-serif: 'Garamond', serif;
  --font-handwritten: 'bornready',serif;
  --thumb-frame-pad:4px;
}
*{box-sizing:border-box}
/* Global kicker line-height to match mockups */
.kicker{line-height:1.5}

/* Large handwritten full-width kicker used on several screens */
.kicker-full{
  font-family: var(--font-handwritten);
  font-size:96px;
  line-height:1;
  text-align:center;
  color:var(--color-creme-font);
  margin:0 0 48px 0;
  text-transform:none;
  letter-spacing:1px;
}
@media(max-width:640px){ 
  .kicker-full{font-size:56px;margin-bottom:28px}
}

/* Celebrate09: increased line-height to match design */
.celebrate-09 .kicker{line-height:1.8}
html, body {
  height: 100%;
}
body{margin:0;font-family:var(--font-serif);background:var(--bg);color:#111;font-weight:400}

/* Ensure native form controls and buttons use the site font (override UA defaults) */
button, input, textarea, select, .option, .btn { font-family: var(--font-serif); }
.app{width:100%;max-width:100%;margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column}
.screen{min-height:640px;display:flex;flex-direction:column;justify-content:center}
.screen-header{margin-bottom:18px}
.screen-header h1{font-size:20px;margin:0;color:var(--muted)}
.screen-main{display:flex;gap:20px}
.hero{
  padding:40px;
  text-align:center;
}
.hero .kicker{font-size:42px;color:rgba(255,255,255,0.9);font-weight:500;margin-bottom:18px}
.hero .title{font-size:42px;color:rgba(255,255,255,0.95);margin-bottom:10px}
.hero .subtitle{color:rgba(255,255,255,1);margin-bottom:22px}
.cta-large, .cta-button{display:inline-block;padding:12px 22px;background:rgb(80,52,41);color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.25)}

/* option list (screen 2) */
/* .options{display:flex;flex-direction:column;gap:32px;align-items:center} */ 
/* .option{width:70%;background:transparent;padding:12px 18px;border:2px solid var(--color-creme-font-dark);font-weight:500;color:var(--color-brown);box-shadow:none;transition:background .18s ease,color .18s ease;text-transform:uppercase;}

.option:hover{background:rgba(0,0,0,0.12);cursor:pointer}
*/

/* Focus and active styles for keyboard accessibility */
.option:focus,
.option:focus-visible{
  outline: 3px solid var(--color-brown-dark);
  outline-offset: 2px;
  background:var(--color-brown);
  color:var(--color-creme-soft);
}
.option:active{
  transform:translateY(1px);
}
.option[role="button"]{-webkit-user-select:none;user-select:none}

/* choice tiles (screen 3) */
.choice-grid{display:flex;flex-direction:column;gap:18px;align-items:center}
.tile{width:68%;height:120px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#ffffff;background-size:cover}

/* gallery (screen 4) - consolidated */
.gallery{display:flex;flex-direction:column;gap: 12px;align-items:center;padding:20px 0}
.gallery-item{
  width:100%;
  max-width:820px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:8px 0;
  position:relative;
  overflow:visible;
  margin:0 auto;
  background:transparent;
}
.thumb{display:block;width:54%}
/* thumb frame: keep inner gap between border and image; image fills and is clipped */
.thumb-frame{
  width:54%;
  max-width:594px;
  margin:0;
  border:2px solid rgba(255,255,255,0.7);
  padding:var(--thumb-frame-pad);
  background:rgba(255,255,255,0.02);
  box-shadow:0 6px 22px rgba(0,0,0,0.12);
  aspect-ratio:4/3;
  overflow:hidden;
  box-sizing:border-box;
  display:block;
  position:relative;
}
.thumb-frame img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.thumb-frame-inner{
  height:calc(100% - 2 * var(--thumb-frame-pad));
  max-height: calc(100% - 2 * var(--thumb-frame-pad));
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
  display:block;
  position:relative;
}
.gallery-item .meta{display:none;padding:14px 0;text-align:center}
.gallery-item .play-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:96px;flex:0 0 96px}
.gallery-item .play{width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,255,255,0.9);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none}
.gallery-item .play svg{width:28px;height:28px;fill:transparent;stroke:rgba(255,255,255,0.95);stroke-width:2}
.play-label{display:block;color:var(--color-creme-font);font-family:var(--font-handwritten);font-size:14px;margin-top:6px;text-align:center;opacity:0.95;background:transparent;padding:0}

.discovered{display:none;color:var(--color-creme-font);text-align:center;font-weight:400;width:84%;font-size:10pt;font-family:var(--font-handwritten);background:transparent}
.discovered.show{display:block;animation:fadeIn .22s ease}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Unified center CTA used across celebrate screens */
.center-cta {padding-top:40px;padding-bottom:120px;text-align:center}
.center-cta .btn-row{width:320px;max-width:86%;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center}
.center-cta .btn, .center-cta .btn-light{display:block;width:100%;box-sizing:border-box;text-align:center}
.center-cta .btn{margin:18px 0 0;padding:16px 26px;background:var(--color-brown);color:var(--color-white);text-transform:uppercase;font-weight:400;box-shadow:0 12px 30px rgba(0,0,0,0.45);border:1px solid rgba(0,0,0,0.15);font-size:20px}
.center-cta .btn-light{margin:18px 0 0;padding:16px 26px;background: var(--color-secondary);color:var(--color-white);text-transform:uppercase;font-weight:400;border:1px solid rgba(0,0,0,0.15);box-shadow:0 12px 30px rgba(0,0,0,0.45);font-size:20px}

/* Celebrate 05 / 09: large script headline and two stacked CTAs */
.center-cta .big{
  font-family: var(--font-handwritten);
  font-size:64px;
  line-height:1.6;
  color:rgba(255,255,255,1);
  margin:0 auto 18px;
  max-width:760px;
  text-align:center;
  letter-spacing:0.6px;
  text-transform:none;
}

@media(max-width:640px){
  .center-cta .big{font-size:44px;padding:0 18px}
  .center-cta .btn{width:84%;font-size:18px}
  .center-cta .btn-light{width:84%;font-size:18px}
}

/* */
/* Celebrate 06: favorites layout - rings left, podests right */
/* */
.celebrate-06 .favorites{display:flex;gap:28px;align-items:flex-start;justify-content:center;padding:24px 12px}
.celebrate-06 .rings-column{flex:0 0 50%;max-width:50%;min-width:200px}
.celebrate-06 #ring-choices{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-top:6px}
.celebrate-06 .ring-draggable{padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:grab;width:100%;max-width:none}
.celebrate-06 .ring-draggable .ring-thumb{width:84%;height:auto;display:block;object-fit:contain;margin:0 auto}
.celebrate-06 .ring-draggable .ring-label{color:rgba(255,255,255,0.95);font-weight:600;margin-top:6px}
.celebrate-06 .ring-draggable{touch-action:none}/* prevent default touch scrolling while dragging */

.celebrate-06 .pods-column{width:340px;min-width:260px;display:flex;flex-direction:column;gap:18px;align-items:center}
.celebrate-06 .pods-column{flex:0 0 50%;max-width:50%;min-width:200px;display:flex;flex-direction:column;gap:18px;align-items:center;margin-left:auto}
.celebrate-06 .pods-inner{display:flex;flex-direction:column;gap:18px;align-items:center}
.celebrate-06 .podest{width:100%;position:relative;background:transparent;padding:6px;transition:transform .12s ease}
.celebrate-06 .podest-img{width:84%;height:auto;display:block;opacity:1;margin:0 auto}
.celebrate-06 .slot-content{position:absolute;left:0;right:0;top:12%;bottom:12%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.celebrate-06 .podest.drop-target{outline:2px dashed rgba(255,255,255,0.18);transform:translateY(-4px)}


.celebrate-06 .podest .ring-draggable{position:relative;pointer-events:auto;cursor:default;margin:0;}

/* When a ring is placed into the slot, lift it 15% above the podest to overlap */
.celebrate-06 .slot-content{align-items:flex-start}
.celebrate-06 .slot-content .ring-draggable{transform:translateY(-15%);z-index:30;pointer-events:auto}
.celebrate-06 .slot-content .ring-draggable .ring-thumb{width:84%;}

@media(max-width:640px){
  .celebrate-06 .favorites{flex-direction:column;align-items:center}
  .celebrate-06 .pods-column{width:92%;min-width:auto}
  .celebrate-06 .rings-column{width:92%}
}

.celebrate-06 .kicker{color:rgba(255,255,255,0.95);font-weight:700;font-size:28px;margin-bottom:8px}


/* Full width kicker above the two columns */
.celebrate-06 .full-width-kicker{
  width:100%;
  text-align:center;
  font-family: var(--font-handwritten);
  font-size:64px;
  line-height: 1.5;
  color:var(--color-creme-font);
  margin-bottom:12px;
  letter-spacing:2px;
  padding-top:56px;
}

.celebrate-06 .rings-column .kicker{display:none}

@media(max-width:640px){
  .celebrate-06 .full-width-kicker{font-size:48px;padding-top:30px}
}

/* Force row layout for celebrate-06 and fallback adjustments when global .favorites rule collides */
.celebrate-06 .favorites{flex-direction:row !important;flex-wrap:nowrap !important}

/* On small screens allow narrower columns so left and right fit side-by-side */
@media(max-width:640px){
  .celebrate-06 .rings-column{max-width:40%;min-width:140px}
  .celebrate-06 .pods-column{flex:0 0 55%;max-width:55%;min-width:160px;margin-left:auto}
  .celebrate-06 .ring-draggable{max-width:300px}
}

/* favorites scroll (screen 6) */
.favorites{display:flex;flex-direction:column;align-items:center;gap:16px}
.ring-list{display:flex;flex-direction:column;gap:12px;width:72%}
.ring{display:flex;align-items:center;gap:12px;padding:10px;background:rgba(255,255,255,0);}
.ring .ring-img{width:64px;height:64px;background:#fff;}

/* input name (screen 7) */
.input-name{text-align:center}
.input-name label{display:block;color:#fff;margin-bottom:18px;font-weight:700}
.input-name input{width:76%;padding:12px;border:none;font-size:18px;text-align:center}
.keyboard-placeholder{width:100%;height:140px;background:#f1f1f1;margin-top:18px;}

/* Celebrate 07: large kicker and prominent input field (matches mobile mockup) */
.celebrate-07 .full-width-kicker{
  width:100%;
  text-align:center;
  font-family: var(--font-handwritten);
  font-size:64px;
  line-height:1;
  color:rgba(255,255,255,1);
  margin-bottom:18px;
  letter-spacing:4px;
  padding-top:56px;
}

.celebrate-07 .input-name.centered{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px}
.celebrate-07 .name-input{
  width:72%;
  max-width:760px;
  padding:20px 28px;
  font-size: 36pt;
  font-weight:800;
  letter-spacing:4px;
  text-align:center;
  text-transform:uppercase;
  color:var(--color-brown);
  background:#fff;
  border:none;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
  border:1px solid rgba(0,0,0,0.06);
  font-family: var(--font-handwritten);
}
.celebrate-07 .name-input:focus{
  outline:none;box-shadow:0 16px 38px rgba(0,0,0,0.32); font-size: 24pt; letter-spacing: 0px;
}

@media(max-width:640px){
  .celebrate-07 .full-width-kicker{font-size:44px;padding-top:40px; line-height: 1.5}
  .celebrate-07 .name-input{font-size:24pt; padding:14px 12px; width:86%; letter-spacing: 0px;}
}

/* small utilities */
.logo-bottom{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:400}
.logo-bottom img{max-height:50px;width:auto;display:block}
.card{display:flex;gap:20px;background:var(--card);padding:18px;box-shadow:0 6px 18px rgba(16,24,40,0.06);align-items:center;width:100%}
.image.placeholder{width:160px;height:120px;background:linear-gradient(135deg,#e6e9ee,#f6f7fb);flex-shrink:0}
.text h2{margin:0 0 8px 0;font-size:18px}
.text p{margin:0 0 12px 0;color:var(--muted)}
.actions{display:flex;gap:10px}
.btn{padding:8px 14px;border:1px solid transparent;background:transparent;cursor:pointer}
.btn.primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--accent);border-color:rgba(11,92,255,0.12)}

/* Remove underlines from links globally (visual buttons and CTAs use anchor tags) */
a, a:link, a:visited { text-decoration: none; }

/* Footer navigation (previous/next) */
.footer-nav{position:fixed;bottom:20px;z-index:9998;color:var(--color-creme-font);text-decoration:none;font-family:var(--font-serif);font-size:20px;text-transform:uppercase;letter-spacing:2px;padding:6px;display:inline-flex;align-items:center;font-weight:400}
.footer-nav.nav-left{left:10px}
.footer-nav.nav-right{right:10px}
.footer-nav:link,
.footer-nav:visited{color:var(--color-creme-font);text-decoration:none}
.footer-nav{transition: color .18s ease, text-shadow .18s ease}
.footer-nav:hover{color:var(--color-brown)}

/* Apply subtle shadow only to the Next link */
.footer-nav.nav-right{ text-shadow: 0 1px 0 rgba(0,0,0,0.22) }
.footer-nav.nav-right:hover{ text-shadow: 0 2px 8px rgba(0,0,0,0.32) }

/* Reduce footer link font-size by 30% on small screens (mobile) */
@media(max-width:640px){
  .footer-nav{font-size:14px; bottom:10px; top:auto; transform:none}
  .logo-bottom{bottom:10px; transform:translateX(-50%)}
}

/* Color utility classes */
.color-white{color:var(--color-white)!important}
.color-brown{color:var(--color-brown)!important}
.color-creme-font{color:var(--color-creme-font)!important}
.color-creme-font-dark{color:var(--color-creme-font-dark)!important}
.color-kicker{color:var(--color-secondary)!important}
.bg-creme-dark{background:var(--color-creme-font-dark)!important;color:var(--color-white)!important}
.bg-white{background:var(--color-creme-soft)!important;color:var(--muted)!important}
.bg-brown{background:var(--color-brown)!important;color:var(--color-white)!important}

/* BornReady font utility */
.font-handwritten{font-family:var(--font-handwritten)!important;}

/* Serif font utility (use for large headings like the mockup) */
.font-serif{font-family:var(--font-serif) !important}

/* Buttons using brown */
.btn.color-brown, .btn.brown{background:rgb(80,52,41);color:var(--color-white);border-color:transparent}
.btn.color-brown:hover, .btn.brown:hover{background:var(--color-creme-font)}
.cta-large.color-brown:hover{background:var(--color-creme-font)}

/* Contact CTAs for celebrate09 */
.contact-yes{background:rgb(80,52,41);color:#fff;text-transform:uppercase;padding:14px 40px;display:inline-block;min-width:260px;box-shadow:0 10px 28px rgba(0,0,0,0.35);}
.contact-no{background:rgb(80,52,41);color:#fff;text-transform:uppercase;padding:14px 40px;display:inline-block;min-width:260px;box-shadow:0 10px 22px rgba(0,0,0,0.28);} 
.contact-yes:hover{background:rgb(80,52,41);box-shadow:0 18px 38px rgba(0,0,0,0.45);color:#fff}
.contact-no:hover{background:rgb(80,52,41);box-shadow:0 18px 38px rgba(0,0,0,0.45);color:#fff}

/* Celebrate09: stack CTAs with larger gap (32px) */
.celebrate-09 .center-cta{display:flex;flex-direction:column;gap:32px;align-items:center}

/* Celebrate10: thank-you screen */
.celebrate-10 .kicker{font-size:52px;line-height:1;color:var(--color-creme-soft);letter-spacing:2px;margin-top:18px}
.celebrate-10 .logo-main{width:84px;height:auto;display:block;margin:18px auto}
.celebrate-10 .subtitle{font-size:20px;color:var(--color-creme-font);margin-top:8px;text-align:center}
.celebrate-10 .social-row{margin-top:18px}
.celebrate-10 .social-row .social-icon{width:36px;height:36px;display:block;color:var(--color-creme-soft);transition:color .18s ease,transform .12s ease}
.celebrate-10 .social-row a{display:inline-block}
.celebrate-10 .social-row .social-icon .fillColor,
.celebrate-10 .social-row .social-icon path,
.celebrate-10 .social-row .social-icon circle,
.celebrate-10 .social-row .social-icon rect,
.celebrate-10 .social-row .social-icon text{
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}
.celebrate-10 .social-row .social-icon text{font-weight:400;font-family:Arial, Helvetica, sans-serif}
.celebrate-10 .social-row a:hover .social-icon{color:var(--color-brown);transform:translateY(-2px)}

/* responsive */
@media(max-width:640px){
  .app{padding:0px}
  .card{flex-direction:column;align-items:flex-start}
  .image.placeholder{width:100%;height:160px}
}

/* Utility classes for creme-colored text */
.color-creme-font{color:var(--color-creme-font)!important}
.color-creme-font-dark{color:var(--color-creme-font-dark)!important}
/* Ensure celebrate-02 options fill the available vertical space inside the screen */
.celebrate-02 .hero{display:flex;flex-direction:column;flex:1;padding:32px;padding-top:110px;padding-bottom:48px}
.celebrate-02 .options{flex:1;display:flex;flex-direction:column;justify-content:center;gap:24px;align-items:center;padding-top:8px;padding-bottom:18px;position:relative;max-width:760px;margin:0 auto;width:100%}

/* Larger option buttons to match mobile design */
.celebrate-02 .option{flex:0 0 auto;width:72%;max-width:520px;height:72px;display:flex;align-items:center;justify-content:center;padding:0 28px;border:2px solid rgba(210,181,157,0.95);color:rgb(210,181,157);background:rgba(255,255,255,0.02);box-shadow:none;transition:background .18s ease,color .18s ease,transform .12s ease;font-size:24px;letter-spacing:3px;text-transform:uppercase}

.celebrate-02 .option:hover{background:rgba(0,0,0,0.12);cursor:pointer}

/* decorative lines removed per request */

/* kicker styling to match mockup: large script, centered */
.celebrate-02 .kicker{font-size:96px;line-height:1;color:var(--color-creme-font);margin:0 0 48px 0;text-transform:none;letter-spacing:1px;padding-top:6px;font-family:var(--font-handwritten)}

/* Ensure focus remains visible for keyboard users */
.celebrate-02 .option:focus, .celebrate-02 .option:focus-visible{outline: 3px solid var(--color-brown-dark);outline-offset:4px}

@media(max-width:640px){
  .celebrate-02 .option{width:92%;font-size:18px;height:62px;padding:0 18px}
  .celebrate-02 .kicker{font-size:56px;padding:0 18px;margin-bottom:28px}
  /* decorative lines removed */
}

.screen.celebrate-bg-brown,
body.celebrate-bg-brown {
  background-color: var(--color-brown);
  background-image: url('/bg-dark.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #fff;
}

/* Light background variant for celebrate pages that use white background */
.screen.celebrate-bg-light,
body.celebrate-bg-light {
  background-color: var(--color-creme-soft);
  background-image: url('/bg-light.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #0b0b0b;
}

/* Ensure hero contrast for each variant */
.screen.celebrate-bg-brown .hero, body.celebrate-bg-brown .hero { color: #fff; }
.screen.celebrate-bg-light .hero, body.celebrate-bg-light .hero { color: inherit; }

/* Ring overview backgrounds (use for celebrate pages when a ring is placed)
   These mirror celebrate-bg-light but use the overview images for each ring. */
.screen.celebrate-bg-ring1,
body.celebrate-bg-ring1 {
  background-color: var(--color-creme-soft);
  background-image: url('/images/Overview-Ring-1.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #0b0b0b;
}
.screen.celebrate-bg-ring2,
body.celebrate-bg-ring2 {
  background-color: var(--color-creme-soft);
  background-image: url('/images/Overview-Ring-2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #0b0b0b;
}
.screen.celebrate-bg-ring3,
body.celebrate-bg-ring3 {
  background-color: var(--color-creme-soft);
  background-image: url('/images/Overview-Ring-3.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #0b0b0b;
}
.screen.celebrate-bg-ring4,
body.celebrate-bg-ring4 {
  background-color: var(--color-creme-soft);
  background-image: url('/images/Overview-Ring-4.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #0b0b0b;
}
.screen.celebrate-bg-ring5,
body.celebrate-bg-ring5 {
  background-color: var(--color-creme-soft);
  background-image: url('/images/Overview-Ring-5.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  min-height: 100dvh;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  color: #0b0b0b;
}

/* Celebrate 08 styles */
.celebrate-08-hero{padding-top:8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.celebrate-08 .kicker{font-family:var(--font-handwritten);font-size:56px;color:var(--color-brown);margin:0}
.celebrate-08-block{padding-top:100px;max-width:760px;width:92%;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center}
.celebrate-08 .info-row{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.celebrate-08 .info-label{display:block;margin-bottom:6px;font-family:var(--font-serif);font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--color-creme-font)}
.celebrate-08 .name-input{width:72%;max-width:640px;padding:20px 24px;font-size:32px;background:#fff;border:none;box-shadow:0 12px 30px rgba(0,0,0,0.18);color:var(--color-secondary);text-align:center;text-transform:uppercase;letter-spacing:2px;font-weight:700;border-radius:4px}

/* Extra spacing under the first name-input (fromText) */
.celebrate-08 .info-row:first-of-type .name-input{margin-bottom:24px}

@media(max-width:640px){
  .celebrate-08 .kicker{font-size:40px}
  .celebrate-08 .name-input{width:86%;font-size:18px;padding:12px}
}

/* spacer to reveal background ring image behind content */
.ring-bg-spacer{width:100%;height:220px;min-height:160px}

/* give the block breathing room so inputs sit visually centered over the background */
.celebrate-08-block{padding:44px 18px}


/* Celebrate 01 specific styles moved from inline blade */
.celebrate-01-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 36px 0;
  text-align: center;
  /* background: radial-gradient(circle at 20% 10%, rgba(225,199,174,0.18), transparent), linear-gradient(180deg,#6b2a0d44,#00000022), url('') no-repeat center/cover; */
}

.celebrate-01-hero .kicker{
  display:block;
  max-width:620px;
  margin:0 auto 6px;
  font-size:28px;
  color:rgba(255,255,255,0.9);
  letter-spacing:6px;
  text-transform:uppercase;
  font-weight:normal;
  text-align:center;
}

/* Celebrate 03: large textured choice tiles */
.celebrate-03 .choice-grid{
  display:flex;
  flex-direction:column;
  gap:40px;
  align-items:center;
  justify-content:center;
  padding:56px 0;
  flex:1;
}

.celebrate-03 .kicker{
  font-size:72px;
  line-height:1;
  color:var(--color-creme-font);
  text-align:center;
  margin-bottom:12px;
  letter-spacing:2px;
  padding-top:56px;
}

/* Force celebrate09 CTAs hover to take precedence over generic .cta-large:hover */
.celebrate-09 .contact-yes:hover,
.celebrate-09 .contact-no:hover {
  background: var(--color-creme-font) !important;
  color: #fff !important;
  box-shadow:0 18px 38px rgba(0,0,0,0.55) !important;
}

.celebrate-03 .tile{
  color: white;
  width:72%;
  max-width:520px;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:60px;
  font-weight:400;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(210,181,157,0.45);
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  padding-top: 20px;
}

.celebrate-03 .tile.gold1{
  background: url('/tile-gold1.png') center/cover no-repeat;
}
.celebrate-03 .tile.gold2{
  background: url('/tile-gold2.png') center/cover no-repeat;
}

@media(max-width:640px){
  .celebrate-03 .kicker{font-size:56px}
  .celebrate-03 .tile{height:180px;font-size:42px;width:92%;max-width:520px}
}


.celebrate-01-hero .big-number{
  position:absolute;
  left:50%;
  top:40%;
  transform:translate(-50%,-40%);
  font-size:340px;
  color:rgba(225,199,174,0.4);
  pointer-events:none;
  font-family: var(--font-handwritten);
}

.celebrate-01-hero .preline,
.celebrate-01-hero .preline2{
  display:block;
  max-width:620px;
  font-size:21px;
  line-height:1.1;
  letter-spacing:4px;
  text-transform:uppercase;
  text-align:center;
  margin:8px auto 0;
}

.celebrate-01-hero .preline{padding-top:200px;color:rgba(255,255,255,0.9);font-size:20px;letter-spacing:4px}
.celebrate-01-hero .preline2{color:var(--color-gold-dark);font-size:38px;letter-spacing:12px}

.celebrate-01-hero .title{font-size:48px;color:var(--color-gold);letter-spacing:8px;margin-top:8px;font-weight:700}
.celebrate-01-hero .subtitle{font-size:16px;color:rgba(255,255,255,0.9);margin-top:6px}

.cta-large{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: rgb(80,52,41);
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  color:#fff;
  cursor:pointer;
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:400;
  letter-spacing:0.3px;
  margin-top:36px;
  min-width:220px;
  padding:14px 44px;
  line-height:1;
  text-align:center;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);
  text-transform:uppercase;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,filter .16s ease;
}

.cta-large:hover, .cta-large:focus, .cta-large:active{box-shadow:0 18px 38px rgba(0,0,0,0.55);filter:none;outline:none;background:var(--color-creme-font);}

@media(max-width:640px){
  .celebrate-01-hero{min-height:680px;padding:36px 18px}
  .celebrate-01-hero .big-number{font-size:520px;top:42%}
  .celebrate-01-hero .title{font-size:40px}
}

/* Celebrate04 specific styles moved from inline blade */
.celebrate-04 .kicker{
  font-size:72px;
  line-height:1;
  color:var(--color-creme-font);
  text-align:center;
  margin-bottom:12px;
  letter-spacing:2px;
}