/* ===== Fonts (Stellar) ===== */
@font-face {
  font-family: "Stellar";
  src: url("./event-registration/fonts/stellar-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stellar";
  src: url("./event-registration/fonts/stelar-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stellar";
  src: url("./event-registration/fonts/stellar-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BubblyBoy";
  src: url("./assets/fonts/BubblyBoy.ttf") format("truetype");
  font-display: swap;
}


:root{
  --blush:#FDE9E7; --coral:#F26C78; --indigo:#3A53A4; --indigo-deep:#24318F;
  --ink:#1B1330; --paper:#fff; --radius:18px; --shadow:0 10px 28px rgba(0,0,0,.12);
  --art-w:1920; --art-h:1080;

    --blue: #3a53a4;
  --peach: #feedea;
  --white: #ffffff;
  --overlay: rgba(0, 0, 0, 0.62);
  --blush: #fde9e7;
  --coral: #f26c78;
  --indigo: #3a53a4;
  --indigo-deep: #24318f;

  --radius: 20px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  --flyer-w: 480px;
  --flyer-h: 780px;
}

/* Webfonts — iPhone/Safari friendly */
@font-face{
  font-family:'BubblyBoy';
  src: url('assets/fonts/BubblyBoy.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Stellar Light';
  src: url('assets/fonts/Stellar-Light.woff2') format('woff2'),
       url('assets/fonts/Stellar-Light.ttf') format('truetype'),
       url('assets/fonts/Stellar-Light.eot') format('opentype');
        url('assets/fonts/Stellar-Light.otf') format('opentype');
  font-weight:300; font-style:light; font-display:swap;
}
@font-face{
  font-family:'Stellar Regular';
  src: 
       url('assets/fonts/Stellar-Regular.otf') format('opentype');
  font-weight:400; font-style:regular; font-display:swap;
}
@font-face{
  font-family:'Stellar Medium';
  src: 
   url('assets/fonts/Stellar-Medium.otf') format('opentype');
  font-weight:500; font-style:medium; font-display:swap;
}
@font-face{
  font-family:'Stellar Bold';
  src: url('assets/fonts/Stellar-Bold.woff2') format('woff2'),
       url('assets/fonts/Stellar-Bold.ttf') format('truetype'),
       url('assets/fonts/Stellar-Bold.otf') format('opentype');
  font-weight:700; font-style:bold; font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--indigo);
  font-family:'Stellar', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:300; line-height:1.55; text-rendering:optimizeLegibility;}

:root{ --font-body: clamp(18px, 2.2vw, 22px); --h1: clamp(46px, 6vw, 88px); --h2: clamp(28px, 3.5vw, 42px); }
h1,h2,h3,p{margin:0}
h1,h2{font-family:'BubblyBoy', system-ui, sans-serif; letter-spacing:.2px}
h3{font-weight:500; letter-spacing:.3px}
p{font-size:var(--font-body); text-wrap:balance}
.emph{color:var(--indigo-deep); font-weight:700}

.container{width:min(1100px,92vw); margin-inline:auto}
.section{position:relative}
.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:16px; padding:16px 26px; font-family:'Stellar', system-ui, sans-serif; font-weight:700; text-decoration:none; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; will-change:transform; }
.btn:focus-visible{outline:3px solid color-mix(in oklab, var(--coral), white 35%); outline-offset:3px}
.btn-coral{background:var(--coral); color:#FDEDEC}

.hero{ min-height:100svh; display:block; background:var(--blush); color:#fff; overflow:clip; position:relative;}
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(253,233,231,.25), rgba(58,83,164,.55)); mix-blend-mode:multiply; }
.overlay-bottom{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(58,83,164,0) 58%, rgba(58,83,164,0.85) 85%, rgba(58,83,164,1) 100%); pointer-events:none; }

.hero-abs{ position:relative; width:100%; height:100svh;}

.brand-logo{
  position:absolute;
  left: calc(100vw * (133.33 / var(--art-w)));
  top:  calc(100vh * (561.33 / var(--art-h)));
  width:300px; height:auto;
}
.kicker{
  position:absolute;
  left: calc(100vw * (133.33 / var(--art-w)));
  top:  calc(100vh * (810.67 / var(--art-h)));
  width:840px; max-width:90vw;
  font-family:'Stellar Light', system-ui, sans-serif;
  font-weight:300;
  color:#fff;
  font-size: clamp(24px, 4.5vw, 86px);
  line-height:1.2;
  letter-spacing:.2px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.hero-cta{
  position:absolute;
  left: calc(100vw * (1496 / var(--art-w)));
  top:  calc(100vh * (900 / var(--art-h)));
  width:290px; height:85px; border-radius:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:35px; font-weight:400;
}

@media (max-width: 1023.98px){
  .brand-logo{ position:static; width:min(220px, 48vw); margin:24px 16px 8px; }
  .kicker{ position:static; width:auto; margin:0 16px 16px; font-size:clamp(24px, 6vw, 40px); }
  .hero-cta{ position:static; width:max-content; height:auto; border-radius:40px; margin:0 16px 28px; padding:14px 22px; font-size:18px; }
  .hero-abs{ display:flex; flex-direction:column; justify-content:flex-end; min-height:100svh; }
}

/* Desktop-only CTA = 30px */
@media (min-width: 1280px){
  .hero-cta{ font-size:30px; }
}

.s-what{ background:var(--blush); color:var(--indigo); padding:clamp(48px, 10vh, 120px) 0; }
.what-wrap{ display:grid; gap:clamp(20px, 3vw, 28px); justify-items:center; text-align:center; }
.what-title{ color:var(--coral); font-size:var(--h1); line-height:.9; }
.what-body{ max-width:1020px; display:grid; gap:.5em; }
.what-body p{margin:0}

.s-tiles{ background:#fff; padding:clamp(40px, 8vh, 100px) 0; }
.tiles-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
.tile{ border-radius:var(--radius); padding:clamp(18px, 4vw, 28px); }
.tile-cta{ background:var(--blush); display:grid; gap:18px; align-content:start; }
.tile-title{ font-family:'BubblyBoy', system-ui, sans-serif; font-size:var(--h2); color:var(--coral); line-height:1; font-weight: 100; }
.tile-info{ background:#fff; border:1px solid color-mix(in oklab, var(--indigo), white 80%); }
.tile-sub{ font-size:clamp(18px, 2.4vw, 22px); color:var(--indigo-deep); margin-bottom:.4em; }
@media (min-width:768px){ .tiles-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .tiles-grid{ grid-template-columns:1fr 1fr 1fr; } }

.s-shirt{ padding:clamp(40px, 9vh, 120px) 0; }
.shirt-grid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:center; }
.shirt-media img{ width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
.shirt-title{ font-family:'BubblyBoy', system-ui, sans-serif; color:var(--indigo); font-size:var(--h2); line-height:1; margin-bottom:.35em; }
.shirt-copy .shirt-text{ margin:.45em 0 }
.shirt-copy .emph{ font-weight:700; color:var(--indigo-deep) }
@media (min-width:1024px){ .shirt-grid{ grid-template-columns:1fr 1.1fr; } }

.site-footer{ background:#F6B6BD40; padding:28px 0 34px; color:var(--indigo); }
.footer-grid{ display:grid; gap:18px; align-items:center; grid-template-columns:1fr auto; }
.footer-brand{display:grid; gap:8px}
.foot-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:14px; color:color-mix(in oklab, var(--indigo), black 15%)}
.foot-meta .dot{opacity:.4}
.foot-tag{font-size:16px; opacity:.8}
.footer-social .ig{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:var(--shadow); }
.footer-social .ig:focus-visible{ outline:3px solid color-mix(in oklab, var(--indigo), white 35%); outline-offset:3px }

img{max-width:100%; height:auto}
:focus:not(:focus-visible){outline:none}

button {
  border: none;
}

/* === Section 2 (WHAT'S IN THE PAUSE) — pixel-precise desktop layout === */

.s-what{ background:var(--blush); color:var(--indigo); }
.s-what .what-wrap{
  height: 815px;
  margin-inline: auto;
  display: grid;
  grid-auto-rows: min-content;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 28px;
}
/* Title */
.s-what .what-title{
  font-family: 'BubblyBoy', system-ui, sans-serif;
  font-size: 85px;
  line-height: 0.95;
  color: #F16B79;
  text-transform: uppercase;
  width: 435px;
  max-width: 100%;
  margin: 0;
}
/* Body paragraphs */
.s-what .what-body{ width: 1075px; max-width: 100%; margin: 0; display: grid; gap: 16px; }
.s-what .what-body p{ margin: 0; color: #3A53A4; font-size: 35px; }
.s-what .what-body p:first-of-type{
  font-family: 'Stellar Regular', system-ui, sans-serif;
}
.s-what .what-body .emph{
  font-family: 'Stellar Medium', system-ui, sans-serif;
  font-weight: 600;
}

/* Responsive safety: keep previous behavior on smaller screens by stacking nicely */
@media (max-width: 1280px){
  .s-what .what-wrap{ width: min(1100px, 92vw); height: auto; padding: 48px 0; }
  .s-what .what-title{ font-size: clamp(48px, 7vw, 85px); width: auto; }
  .s-what .what-body{ width: min(1000px, 92vw); }
  .s-what .what-body p{ font-size: clamp(18px, 2.4vw, 35px); }
}


/* === Section 2 — mobile refinement === */
@media (max-width: 600px){

  /* ignore hard <br> */
  .s-what .what-body br { display: none; }

  .s-what{
    padding: 32px 0 44px;
  }

  .s-what .what-wrap{
    gap: 18px;
  }

  .s-what .what-title{
    font-size: 44px;
    line-height: .95;
    margin: 0;
  }

  .s-what .what-body{
    width: 88vw;
    font-family: 'Stellar Regular', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.55; /* 💫 tiny soft space only for mobile */
    color:#3A53A4;
    margin: 0 auto;
  }

  .s-what .what-body .emph{
    font-family: 'Stellar Medium', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.6; /* consistent spacing for blue line */
    margin-top: 16px;
    font-weight: 600;
  }
}



/* keep same layout on mobile - maintain stacked logo text */
@media (max-width: 1280px){
  .s-what .what-wrap{ width:min(1100px,92vw); height:auto; padding:48px 0; }
  .s-what .what-title{ font-size:clamp(48px,7vw,85px); width:auto; }
  .s-what .what-body{ width:min(1000px,92vw); font-size:clamp(18px,2.4vw,35px); }
}


/* === Section 3 (Tiles) — artboard-perfect desktop + responsive === */





.s-tiles{
  background:#FDEDEC;
  padding:40px 0 80px;
  position:relative;
}
.s-tiles .tiles-grid.v3{
  display:grid;
  gap:24px;
  grid-template-columns:1fr; /* mobile first */
}

/* Left CTA */
.s-tiles .tile-left .tile-title{
  font-family:'BubblyBoy', system-ui, sans-serif;
  text-transform:uppercase;
  color:#F16B79;
  font-size:64px;                 /* desktop spec */
  line-height:1.12;
  width:415px;                    /* desktop spec */
  max-width:100%;
  margin:0 0 24px;
}
.s-tiles .btn-subscribe{
  display:inline-flex; align-items:center; justify-content:center;
  background:#3A53A4; color:#FDEDEC;
  border-radius:40px; width:287px; height:75px;  /* desktop spec */
  text-decoration:none;
  font-family:'Stellar Light', system-ui, sans-serif;
  font-size:37px;                                     /* desktop spec */
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.s-tiles .btn-subscribe:active{ transform:translateY(1px) }

/* Heads & copy */
.s-tiles .tile-head{
  font-family:'Stellar Bold', system-ui, sans-serif;
  font-size:40px; color:#F16B79; margin:0 0 10px;   /* desktop spec */
}
.s-tiles .tile-copy{
  font-family:'Stellar Regular', system-ui, sans-serif;
  font-size:25px; color:#F16B79;
  text-align:justify; margin:0;                     /* JUSTIFIED on desktop */
}

/* Desktop artboard + coral lines */
@media (min-width:1440px){
  .s-tiles .tiles-grid.v3{
    width:1920px; margin-inline:auto;
    grid-template-columns:700px 560px 560px; gap:60px; align-items:start; position:relative;
  }
 /* Horizontal and vertical guide lines (perfect alignment) */
.s-tiles::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px; /* slightly lower so it sits flush with section background */
  width:100%;
  height:1px;
  background:#F16B79;
}
@media (min-width:1440px){
  /* keep your existing horizontal line on ::before */
  .s-tiles::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:100%;
    height:1px;
    background:#F16B79;
  }

  /* NEW vertical line on the section, spans full height */
  .s-tiles::after{
    content:"";
    position:absolute;
    /* X = 700 within a centered 1920px artboard */
    left: calc(50% - 960px + 700px);
    top: 0;        /* use top/bottom so it fills the whole section */
    bottom: 0;
    width: 1px;
    background: #F16B79;
    opacity: 0.95;
  }
}

}

/* Mobile & tablet: stack elegantly */
@media (max-width:1439px){
  .s-tiles .tiles-grid.v3{ width:min(1100px,92vw); margin-inline:auto; }
  .s-tiles .tile-left .tile-title{ font-size:clamp(36px, 8vw, 52px); width:auto; }
  .s-tiles .btn-subscribe{ width:min(72vw, 320px); height:64px; font-size:clamp(18px, 5.5vw, 26px); }
  .s-tiles .tile-head{ font-size:clamp(22px, 5.6vw, 32px); }
  .s-tiles .tile-copy{ font-size:clamp(16px, 3.8vw, 20px); text-align:left; }
}

/* === SECTION 3 — RESTORE PERFECT DESKTOP WIDTHS === */
@media (min-width: 1440px){
  /* allow items to shrink inside grid */
  .s-tiles .tile-why,
  .s-tiles .tile-obj{
    min-width: 0;
    justify-self: start;
  }

  /* tighter readable columns */
  .s-tiles .tile-why .tile-copy{
    max-width: 413px !important; /* reduce from full width */
    margin-left: 0;
  }

  .s-tiles .tile-obj .tile-copy{
    max-width: 490px !important; /* "In The Pause is a movement…" */
    margin-left: 0;
  }
}
/* === Desktop-only Subscribe Button Adjustment === */
@media (min-width: 1025px){
  .s-tiles .btn-subscribe{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    background:#3A53A4; 
    color:#FDEDEC;
    border-radius:40px; 
    width:290px; 
    height:85px;         /* taller for elegance */
    text-decoration:none;
    font-family:'Stellar Light', system-ui, sans-serif;
    font-size:30px; 
    font-weight:100;     /* softer text */
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    transition:transform .18s ease, box-shadow .18s ease;
  }
}
/* === Desktop-only Subscribe Button Adjustment === */
@media (min-width: 1025px){
  .s-tiles .btn-subscribe{
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
    background:#3A53A4; 
    color:#FDEDEC;
    border-radius:40px; 
    width:290px; 
    height:85px;
    text-decoration:none;
    font-family:'Stellar Light', system-ui, sans-serif;
    font-size:30px; 
    font-weight:100;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    transition:transform .18s ease, box-shadow .18s ease;

    margin-top: 50px; /* 👈 lowers button only on desktop */
  }
}
/* === Mobile adjustments for Section 3 === */
@media (max-width: 1024px){

  /* Center the title */
  .s-tiles .tile-left .tile-title{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Justify both paragraphs */
  .s-tiles .tile-why .tile-copy,
  .s-tiles .tile-obj .tile-copy{
    text-align: justify;
    text-justify: inter-word;
    font-size: 18px;
  }
}
/* === Mobile center fix for title + button === */
@media (max-width: 1024px){
  .s-tiles .tile-left{
    text-align: center;
  }

  .s-tiles .btn-subscribe{
    display: inline-flex;
    margin: 24px auto 0; /* centers horizontally */
  }
}
/* === Mobile-only horizontal divider between sections === */
@media (max-width: 1024px){
  .s-what::after{
    content:"";
    display:block;
    width:92%;
    height:1px;
    background:#F16B79;
    margin: 40px auto; /* space above and below */
  }
}
@media (max-width:1024px){
  .s-what{ position: relative; }
  .s-what::after{
    content:"";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1px;              /* sits right on the edge */
    width: 100vw;              /* full bleed */
    height: 1px;
    background: #F16B79;
  }
}
/* === Make section 3 same solid color as section 2 === */
.s-tiles{
  background:#fde9e7 !important;
}

/* === Final Section: CTA (.s-cta) === */
.s-cta{ background:#3A53A4; }
.s-cta .cta-wrap{
  margin-inline:auto;
  width:1920px;
  min-height:655px;
  display:grid;
  grid-template-columns: 750px 245px 1fr;
  align-items:center;
  gap:0;
  position:relative;
}
.s-cta .cta-media{ grid-column:1 / span 2; position:relative; height:655px; }
.s-cta .cta-photo{ position:absolute; left:0; top:0; width:750px; height:655px; object-fit:cover; }

.s-cta .cta-fade{ position:absolute; left:512px; top:0; width:245px; height:655px; object-fit:cover; pointer-events:none; }
.s-cta .cta-content{ grid-column:3; color:#FEF9F5; padding-inline: 80px; }
.s-cta .cta-title{
  font-family:'BubblyBoy', system-ui, sans-serif;
  text-transform:uppercase; font-weight:100;
  font-size:85px; line-height:0.95; color:#F16B79; margin: 0 0 18px;
}
.s-cta .cta-copy{
  font-family:'Stellar Light', system-ui, sans-serif;
  font-size:34px; line-height:1.35; color:#FEF9F5;
  width:786px; max-width:100%; margin:0 0 12px;
}
.s-cta .cta-strong{
  font-family:'Stellar Bold', system-ui, sans-serif;
  font-size:34px; line-height:1.35; color:#FEF9F5; margin:0 0 28px;
}
.s-cta .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:#F16B79; color:#FEF9F5; text-decoration:none;
  border-radius:40px; width:670px; height:70px;
  font-family:'Stellar Medium', system-ui, sans-serif;
  font-size:24px; letter-spacing:.5px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
@media (min-width:1440px){
  .s-cta .cta-wrap{ width:1920px; }
}
@media (max-width:1439px){
  .s-cta .cta-wrap{
    width:min(1100px,92vw);
    grid-template-columns: 1fr;
    min-height:unset;
    padding: 40px 0;
  }
  .s-cta .cta-media{ height:auto; }
  .s-cta .cta-photo{ position:relative; width:100%; height:auto; }
  .s-cta .cta-fade{ display:none; }
  .s-cta .cta-content{ padding: 20px 0; }
  .s-cta .cta-title{ font-size: clamp(40px, 10vw, 64px); padding-left:15px;}
  .s-cta .cta-copy, .s-cta .cta-strong{ font-size: clamp(18px, 3.6vw, 28px); width:100%; padding-left: 15px; }
  .s-cta .cta-btn{width: fit-content; padding:24px; height:64px; font-size: clamp(18px, 4.4vw, 22px); }
}

/* === CTA — snap image to artboard X=0 on desktop === */
@media (min-width:1440px){
  .s-cta{ position: relative; }

  .s-cta .cta-media {
    height: 1350px;
  }

  /* anchor to the 1920px artboard centered on the page */
  .s-cta .cta-photo{
    position: absolute;
    /* left: calc(86% - 960px);   */
    top: 0;
    width: 1080px;
    height: 1350px;
    object-fit: cover;
  }
  .s-cta .cta-fade{
    position: absolute;
    /* left: calc(86% - 960px + 512px);  */
    top: 0;
    width: 560px;
    height: 1350px;
    object-fit: cover;
    pointer-events: none;
    left: 440px;
  }

  /* make sure nothing adds extra inset */
  .s-cta .cta-wrap{ margin-inline:auto; width:1920px; }
  .s-cta .cta-media{ padding:0; margin:0; }
  .s-cta .cta-wrap{ gap:0; }
}

/* === CTA — force mobile layout: image on top with fade === */
@media (max-width: 1024px){
  .s-cta .cta-wrap{
    width:100% !important;
    display:block !important;     /* break the desktop grid */
    padding:0 !important;
  }

  .s-cta .cta-media{
    position:relative !important;
    display:block !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    order:-1;                      /* image first */
  }

  /* override desktop absolute/left calc etc. */
  .s-cta .cta-photo{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    object-fit:cover !important;
  }

  /* hide the desktop vertical fade image; use a bottom gradient fade instead */
  .s-cta .cta-fade{ display:none !important; }
  .s-cta .cta-media::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px;
    height:80px;
    background:linear-gradient(to bottom, rgba(58,83,164,0) 0%, #3A53A4 95%);
    pointer-events:none;
  }

  /* content below the image */
  .s-cta .cta-content{
    padding:24px 16px 40px !important;
  }
}


/* === Footer (final compact layout) === */
.site-footer{
  background:#F16B79;
  position:relative;
  height:250px;            
  overflow:hidden;
}

.site-footer .footer-wrap{
  width:1920px;
  height:100%;
  margin-inline:auto;
  position:relative;
}

/* Logo */
.site-footer .footer-logo{
  position:absolute;
  left:145px;
  top:50%;
  transform:translateY(-50%);
  width:156px;
  height:auto;
}

/* Instagram */
.site-footer .footer-ig{
  position:absolute;
  left:1670px;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
}
.site-footer .ig-svg{ display:block; width:52px; height:52px; }

/* Text — aligned left, limited width */
.site-footer .footer-text{
  position:absolute;
  left:355px;
  top:50%;
  transform:translateY(-50%);
  width:357px;             /* as specified */
  height:88px;
  font-family:'Stellar Regular', system-ui, sans-serif;
  color:#FEF9F5;
  font-size:20px;
  line-height:1.4;
  white-space:normal;
}

/* Mobile & tablet */
@media (max-width:1439px){
  .site-footer{
    height:auto;
    padding:28px 0;
  }
  .site-footer .footer-wrap{
    width:min(1100px,92vw);
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
  }
  .site-footer .footer-logo,
  .site-footer .footer-ig,
  .site-footer .footer-text{
    position:static;
    transform:none;
    width: 100px;
    height : auto;
  }
  .site-footer .footer-text{
    width:auto;
    font-size:16px;
  }
}

/* === Claim Form (CTA) === */
.cta-form[hidden]{display:none !important;}
.cta-form{max-width: 900px; margin: 32px auto 0; opacity:0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;}
.cta-form.is-open{opacity:1; transform:none;}
.reduced-motion .cta-form{transition:none;}

.claim-form{background:#fff; color: var(--indigo); border-radius: 20px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.15);}
.claim-form .form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px;}
.claim-form .field-wide{grid-column: 1 / -1;}
.claim-form .label{display:block; font-weight:600; margin-bottom:6px;}
.claim-form input{width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,.15); border-radius:12px; font:inherit; outline:none;}
.claim-form input:focus{border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 30%, transparent);}
.claim-form .actions{display:flex; gap:12px; justify-content:flex-end; margin-top:16px;}
.claim-form .btn.btn-outline{background:transparent; border:2px solid #e0e0e0; color:var(--indigo);}
.claim-form .btn.btn-outline:hover{border-color: var(--coral); color: var(--coral);}
.claim-form .hp{position:absolute; left:-9999px; opacity:0; height:0; width:0;}
.claim-form .form-note{margin-top:10px; font-size:.95rem;}

@media (max-width: 767px){
  .claim-form .form-grid{grid-template-columns: 1fr;}
}



/* === Imported from example: Section 6 form + Thank You === */
#sec6-thanks .thanks-text {
  font-family: 'BubblyBoy','Baloo 2',system-ui,cursive !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* === Section 6 Modal & Form (from example) === */

    .sec6-overlay{position:fixed;inset:0;display:none;place-items:center;background:rgba(10,12,16,.85);backdrop-filter:blur(6px);z-index:9999}
    .sec6-overlay.active{display:grid}
    .sec6-card{width:min(680px,92vw);background:#3A53A4;border-radius:20px;padding:28px 22px;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
    .sec6-title{font-family:'Bubbly Boy','Baloo 2',system-ui,cursive;font-size:clamp(26px,3.2vw,40px);letter-spacing:.3px;text-align:center;margin:4px 0 14px}
    .sec6-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .sec6-grid .full{grid-column:1/-1}
    .sec6-input{width:100%;padding:14px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#fff;color:#1B1B1B;font-size:16px;outline:none}
    .sec6-input::placeholder{color:#93a0b3}
    .sec6-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:16px}
    .sec6-btn{flex:1;padding:14px 18px;border-radius:14px;border:0;cursor:pointer;font-weight:700;font-size:16px;transition:transform .2s ease, box-shadow .2s ease}
    .sec6-btn.primary{background:#F26C78;color:#fff;box-shadow:0 8px 22px rgba(58,83,164,.45)}
    .sec6-btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(58,83,164,.55)}
    .sec6-btn.ghost{background:transparent;color:#c9d4ff;border:1px solid rgba(255,255,255,.2)}
    .sec6-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:#cbd5e1;font-size:26px;cursor:pointer}
    .sec6-note{font-size:12px;color:#a7b0c3;margin-top:10px;text-align:center}

    .sec6-thanks{position:fixed;inset:0;display:none;place-items:center;background:#f26c78;color:#fff;z-index:10000;will-change:opacity}
    .sec6-thanks.show{display:grid;animation:fadeOutHeart 2.8s ease forwards 1.2s !important}
    .thanks-inner{text-align:center;position:relative}
    .thanks-text{
      font-family:'Bubbly Boy','Baloo 2',system-ui,cursive;
      font-size:clamp(36px,6.5vw,96px);
      font-weight:800; text-transform:uppercase; letter-spacing:1px;
    }
    .wink{display:inline-block;width:64px;height:64px;border-radius:50%;background:#fff;color:#f26c78;position:relative;margin:0 auto 16px}
    .wink::before,.wink::after{content:'';position:absolute;background:#f26c78;border-radius:50%}
    .wink::before{width:8px;height:8px;left:18px;top:20px}
    .wink::after{width:18px;height:6px;right:18px;top:22px;border-radius:8px;animation:wink 1.6s infinite ease-in-out}
    .mouth{position:absolute;left:50%;top:38px;transform:translateX(-50%);width:28px;height:14px;border:5px solid #f26c78;border-top:none;border-radius:0 0 40px 40px}
    @keyframes wink{0%,60%,100%{height:6px}20%{height:1px;transform:translateY(3px)}}

    .heart{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
    .heart svg{
      width:20vmin;height:20vmin;opacity:.85;transform:scale(0.6);
      animation:heartGrow 2.4s ease forwards !important;
      will-change:transform,opacity;
    }
    @keyframes heartGrow{
      0%{transform:scale(0.4);opacity:.65}
      60%{transform:scale(1.6);opacity:.9}
      100%{transform:scale(2.4);opacity:0}
    }
    @keyframes fadeOutHeart{to{opacity:0;visibility:hidden}}

    @media (max-width:768px){
      .sec6-grid{grid-template-columns:1fr}
      .sec6-row{flex-direction:column}
      .sec6-btn{width:100%}
    }
  
/* === End Section 6 styles === */


/* Safety: ensure modal + thank-you visibility is controlled */
.sec6-overlay{position:fixed; inset:0; display:none; place-items:center; background:rgba(10,12,16,.85); backdrop-filter:blur(6px); z-index:9999;}
.sec6-overlay.active{display:grid;}
.sec6-thanks{position:fixed; inset:0; display:none; place-items:center; z-index:10000;}
.sec6-thanks.show{display:grid; animation: fadeOutHeart 4.2s ease forwards;}
@keyframes heartGrow{0%{transform:scale(0.4);opacity:.65} 60%{transform:scale(1.6);opacity:.9} 100%{transform:scale(2.4);opacity:0}}
@keyframes fadeOutHeart{to{opacity:0; visibility:hidden}}


/* --- Harden Section 6 overlays (always hidden until toggled) --- */
.sec6-overlay{position:fixed; inset:0; display:none; place-items:center; background:rgba(10,12,16,.85); backdrop-filter:blur(6px); z-index:9999;}
.sec6-overlay[aria-hidden="true"]{display:none !important;}
.sec6-overlay.active{display:grid !important;}

.sec6-thanks{position:fixed; inset:0; display:none; place-items:center; z-index:10000;}
.sec6-thanks[aria-hidden="true"]{display:none !important;}
.sec6-thanks.show{display:grid !important;}
.sec6-thanks .heart{opacity:0; transform:scale(.4);} /* default static */
.sec6-thanks.show .heart{animation: heartGrow 1.2s ease-out 1 both;}
@keyframes heartGrow{0%{transform:scale(.4);opacity:.65}60%{transform:scale(1.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}


/* Ensure Section 6 grid supports full-width rows */
.sec6-grid .full{grid-column:1/-1}

/* === Mobile Date Input Fixes === */
@media (max-width: 768px) {
  .sec6-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .sec6-input[type="date"] {
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 44px !important; /* Better touch target */
    padding: 12px 14px !important;
  }
  
  /* Ensure date placeholder is visible */
  .sec6-input[type="date"]:invalid:not(:focus) {
    color: #93a0b3 !important;
  }
  
  /* Date input specific styling */
  .sec6-input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 4px;
    margin-left: 4px;
    cursor: pointer;
    filter: invert(0.5);
  }
  
  .sec6-card {
    padding: 24px 16px !important;
    margin: 20px !important;
    width: calc(100vw - 40px) !important;
  }
  
  .sec6-title {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }
}

/* === Cross-browser Date Input Styling === */
.sec6-input[type="date"] {
  position: relative;
  font-family: 'Stellar Regular', system-ui, sans-serif;
}

/* Fallback for browsers that don't support date input */
.sec6-input[type="date"]:not(:valid):before {
  content: attr(placeholder);
  color: #93a0b3;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.sec6-input[type="date"]:focus:before,
.sec6-input[type="date"]:valid:before {
  content: none;
}

/* Ensure proper styling when date is selected */
.sec6-input[type="date"]:valid {
  color: #1B1B1B;
}

/* Improve date input usability on all devices */
.sec6-input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat calc(100% - 14px) center;
  background-size: 16px;
  padding-right: 40px !important;
}

/* Dark mode support for calendar icon */
@media (prefers-color-scheme: dark) {
  .sec6-input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  }
}

@media (max-width: 600px){
  .section-photo img{
    width: 100%;
    height: clamp(420px, 65vh, 720px);
    object-fit: cover;
    object-position: 50% 35%;
    display: block;
  }
}

/* === CTA image mobile adjustment === */
@media (max-width: 600px){
  .cta-photo{
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
  }
  .cta-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%; /* Adjust focus: higher = move up, lower = move down */
  }
}

/* === Fix white line / gap at bottom on Samsung Chrome === */
html, body {
  background-color: #3A53A4; /* same as your last section color */
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh; /* use dynamic viewport height */
}

/* For older browsers that don't support dvh yet */
@supports not (height: 100dvh) {
  body {
    min-height: 100vh;
  }
}

/* === Samsung S21 / small-wide mobile fix === */
@media (min-width:400px) and (max-width:430px) and (max-height:930px){
  .section-text p {
    word-spacing: normal;
  }
  /* prevent “start celebrating” from splitting */
  .section-text p strong,
  .section-text p span {
    white-space: nowrap;
  }

  /* or just wrap the exact words */
  .section-text p::after {
    content: ""; /* keeps rule active, nothing visible */
  }
}


/* Navbar Styles  */

.navbar {
position: relative;
z-index: 100;
width: 100%;
background-color: #FDE9E700;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
}

.navbar a {
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  font-family: 'BubblyBoy';
  color: var(--blush);
  font-size: 1.1rem;
}

.navbar a:hover {
  color: var(--coral);
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 50;
}
.modal.is-open {
  display: block;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: #bdcfeb;
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}

.modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1024px, 92vw);
  transform: translate(-50%, -50%);

  max-height: calc(100svh - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  background: var(--blue);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  color: var(--white);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 22px;
}

.modal__actions--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

body.modal-open {
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid rgba(254, 237, 234, 0.14);
}

.modal__title {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 32px;
  margin-top: 6px;
}

.modal__form {
  padding: 14px 6px 6px;
  display: grid;
  gap: 12px;
  max-width: 480px;
}

.form_fields_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.field {
  display: block;
}
.field__label {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: rgba(254, 237, 234, 0.92);
}
.field__input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  height: 50px;
  border-radius: 12px;
  border: 0;
  outline: none;
  padding: 0 16px;

  background: #ffffff;
  color: #1a2344;
  font-family: "Stellar";
  font-weight: 400;
  font-size: 16px;
}
.field__input::placeholder {
  color: rgba(26, 35, 68, 0.45);
}
.field__input:focus {
  border-color: rgba(254, 237, 234, 0.45);
}

.field__input[type="date"] {
  color: rgba(26, 35, 68, 0.55);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.field__input[type="date"]:valid {
  color: #1a2344;
}

.field__input[type="date"]:empty::before {
  content: attr(data-placeholder);
  color: #999;
}

.field__input[type="date"]:focus::before,
.field__input[type="date"]:not(:placeholder-shown)::before {
  content: "";
}

.field__textarea {
  resize: vertical;
  min-height: 88px;
}

.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 6px;
}

.btn {
  appearance: none;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: "Stellar";
  font-weight: 700;
  letter-spacing: 0.4px;
}

.centered {
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--ghost {
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  width: 100%;
}
.btn--primary {
  height: 52px;
  border-radius: 14px;
  border: 0;
  background: #f36b73;
  color: #fff;
  width: 100%;
  position: relative;
}

.btn__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.95);
  display: none;
  animation: spin 800ms linear infinite;
}

.btn.is-loading .btn__spinner {
  display: inline-block;
}

.btn__text {
  display: inline-block;
}

/* spacing when spinner is visible */
.btn.is-loading {
  gap: 10px;
}

/* disable styles */
.btn:disabled,
.field__input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.modal__hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  opacity: 0.75;
}
@media (max-height: 760px) {
  .flyer {
    display: grid;
    overflow: hidden;
  }

  .flyer__top,
  .flyer__dr_container,
  .flyer__content,
  .flyer__bottom {
    position: relative;
    z-index: 3;
  }

  .kicker {
    font-size: 1.05rem;
    margin: 8px 0 10px;
  }
  .title {
    font-size: 2rem;
    margin-bottom: 8px;
  }
  .desc {
    font-size: 0.95rem;
  }
  .details {
    font-size: 0.95rem;
  }
  .flyer__bottom {
    position: relative;
    inset: auto;
    padding-top: 10px;
  }
  .flyer__content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .modal__form {
    width: auto;
  }
}

@media (max-height: 640px) {
  .flyer {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .flyer__bottom {
    position: relative;
    bottom: auto;
    padding-top: 12px;
  }
}

@media (max-width: 520px) {
  .modal__bigTitle {
    font-size: 34px;
  }
  .modal__grid {
    grid-template-columns: 1fr;
  }
  .modal__actions--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .flyer__content {
    padding: 14px 16px 0;
  }
  .flyer__bottom {
    padding: 14px 16px 16px;
  }

  .kicker {
    font-size: 1.05rem;
  }
  .title {
    font-size: 2rem;
  }
  .desc {
    font-size: 1rem;
  }
}

/* ===== Success State ===== */
.modal__success {
  display: grid;
  gap: 24px;
  place-items: center;
  text-align: center;
  padding: 18px 6px 6px;
}

.modal__success[hidden] {
  display: none !important;
}
.modal__form[hidden] {
  display: none !important;
}

.success__title {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.success__sub {
  margin: 0;
  opacity: 0.85;
  font-size: 13px;
}

/* small animation */
.success__anim {
  width: 74px;
  height: 74px;
  position: relative;
}

.success__anim .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  animation: popRing 550ms ease-out forwards;
  transform: scale(0.7);
  opacity: 0;
}

.success__anim .check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 14px;
  border-left: 4px solid var(--peach);
  border-bottom: 4px solid var(--peach);
  transform: translate(-50%, -55%) rotate(-45deg) scale(0.6);
  opacity: 0;
  animation: drawCheck 420ms 220ms ease-out forwards;
}

@keyframes popRing {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes drawCheck {
  to {
    transform: translate(-50%, -55%) rotate(-45deg) scale(1);
    opacity: 1;
  }
}

@media (min-width: 900px) {
  .flyer__dr {
    width: 200px;
    height: 330px !important;
  }
  .kicker {
    font-size: 1.3rem;
    margin: 8px 0 10px;
  }
  .title {
    font-size: 2.5rem;
    margin-bottom: 8px;
  }
  .desc {
    max-width: max-content;
    font-size: 1.5rem;
  }
  .details {
    font-size: 1.5rem;
  }
  .cta {
    font-size: 1.5rem;
  }
}

/* Navbar Styles  */
.navbar {
  position: fixed;
  z-index: 100;
  width: 100%;
  background-color: #fde9e700;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.navbar a {
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  font-family: "BubblyBoy";
  color: var(--blush);
  font-size: 1.1rem;
}

.navbar a:hover {
  color: var(--coral);
}

@media (max-width: 768px) {
  .navbar {
    justify-content: space-between;
  }
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}