/* style.css - Option B: video hero only; polaroids in body */

:root{
  --blue:#2774AE;
  --gold:#ffd200;
  --text:#000000;
  --muted:#000000;
  --bg:#fffefc;
  --maxw:1100px;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* wrap */
.wrap{max-width:var(--maxw);margin:0 auto;padding:28px}

/* header removed */


/* HERO: improved sizing to prevent oversized video */
.hero-video-only {
  position: relative;
  width: 100%;
  height: 125vh;            /* full viewport height */
  max-height: none;       /* cap to avoid extremely tall videos on large screens */
  overflow: hidden;
  display:block;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}

/* video covers container but uses width/height 100% to avoid overscaling from min-width/min-height */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop to fill without stretching */
  -o-object-fit: cover;
  -webkit-object-fit: cover;
  transform: none;         /* ensure no translate scaling */
  max-width: none;
  max-height: none;
}

/* Responsive tuning */
@media (max-width: 1200px) {
  .hero-video-only { height: 85vh;}
}
@media (max-width: 980px) {
  .hero-video-only { height: 70vh;}
}
@media (max-width: 520px) {
  .hero-video-only { height: 65vh;}
}

.hero-poster{display:none;width:100%;height:100%;object-fit:cover}

/* overlay to ensure content below video remains visible */
.hero-overlay{position:relative;z-index:2;height:100%}

/* headline under hero */
.headline{padding-top:30px;padding-bottom:8px}
.title{font-family:'Helvetica', sans-serif;font-weight:900;color:var(--blue);font-size:48px;line-height:0.95;margin:6px 0 12px}
.lead{color:var(--muted);font-size:16px;max-width:760px;margin-bottom:12px}

/* Body content */
.intro{padding-top:10px;padding-bottom:10px}
.single-col{max-width:760px;margin:0 auto}
.main h2{margin-top:0}
.main p{color:var(--muted);line-height:1.6}

/* Polaroid figures inside the body */
.polaroid-figure img{display:block;width:100%;height:auto;object-fit:cover}
.polaroid-figure.left{float:left;margin-right:18px;transform:rotate(-6deg)}
.polaroid-figure.right{float:right;margin-left:18px;transform:rotate(6deg)}

/* Clear floats after content */
.single-col:after{content:"";display:table;clear:both}

/* CTA and footer */
.cta-wrap{text-align:center;margin:22px 0}
.big-cta{background:var(--gold);color:#052a3a;padding:12px 18px;border-radius:8px;font-weight:800;text-decoration:none;display:inline-block}
.grat{margin-top:12px;color:var(--muted);font-weight:700}

/* Form */
.form{background:#fff;padding:18px;border-radius:12px;border:1px solid #f3f6fb;box-shadow:0 10px 30px rgba(2,6,20,0.04)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid label{display:flex;flex-direction:column;font-weight:600;color:#234;padding:6px 0}
.grid .full{grid-column:1/-1}

/* Footer */
.site-footer{background:#052a3a;color:white;padding-top:28px;padding-bottom:18px;margin-top:28px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-banner{max-width:360px;border-radius:8px}
.footer-bottom{padding-top:12px;padding-bottom:12px;text-align:center;background:rgba(255,255,255,0.02);margin-top:16px}

/* Responsive */
@media (max-width:980px){
  .hero-video-only{position:relative;overflow:hidden;height:100vh;min-height:600px}
  .title{font-size:34px}
  .polaroid-figure{width:140px}
  .polaroid-figure.left,.polaroid-figure.right{display:block;margin:12px auto;transform:none}
  .single-col{padding:0 18px}
  .nav{display:none}
  .menu-btn{display:block}
  /* .hero-video{display:none!important} */
  .hero-poster{display:block;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
}
@media (max-width:520px){
  .wrap{padding:18px}
  .title{font-size:26px}
  .lead{font-size:15px}
}


/* Make body sections full width (edge-to-edge content) */
.full-width-body.wrap { max-width: 100% !important; padding-left:48px; padding-right:48px; }
.full-width-body .single-col{ max-width:none; margin:0; padding:0; }


/* FOOTER — full width banner */
.site-footer { margin:0; padding:0; background:none; }
.footer-banner-full { display:block; width:100%; height:auto; object-fit:cover; margin:0; padding:0; }

/* Yellow CTA button */
.cta-wrap {
  text-align: center;
  margin: 32px 0 16px;
}
.btn-gold {
  display: inline-block;
  background: #FFD200;
  color: #052A3A;
  padding: 14px 26px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.gratitude, .grat {
  text-align: center;
  font-weight: 600;
  color: #4b6579;
  margin-top: 12px;
}



/* Refined CTA + gratitude to better match PDF mockup */
:root{
  --cta-left-padding: 48px; /* matches wrap horizontal padding */
  --pdf-headline-size: 56px;
  --pdf-body-color: #243B53; /* slightly darker/more accurate than previous muted */
  --pdf-headline-color: #0b5aa6; /* headline blue from mockup */
}

/* Headline tuning to match mockup scale */
.title{ font-size:var(--pdf-headline-size); letter-spacing:-0.4px; margin-bottom:12px; color:#2774AE;}

/* CTA left-aligned, matching the body content left edge (uses wrap padding) */
.cta-wrap{ text-align:left; margin:20px 0;}
.btn-gold{ background:#FFD200; color:#052A3A; padding:14px 28px; font-weight:900; font-size:15px; box-shadow:0 10px 24px rgba(0,0,0,0.12); display:inline-block; text-decoration:none; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,0.16); }

/* Gratitude aligned left with same left padding */
.gratitude, .grat{ text-align:left; color:var(--pdf-body-color); font-weight:700; margin-top:12px; font-size:15px; line-height:1.4;}

/* Reduce vertical whitespace around CTA to match PDF */
.single-col .cta-wrap{ margin-top:10px; margin-bottom:8px; }
.single-col .grat{ margin-top:6px; }

/* Ensure polaroids and text alignment looks like mockup */
.polaroid-figure.left{ margin-right:20px; transform:rotate(-5deg); width:300px; }
.polaroid-figure.right{ margin-left:20px; transform:rotate(5deg); width:300px; }

/* On mobile, keep left-aligned but inset to match small-screen layout */
@media (max-width:980px){
  :root{ --cta-left-padding: 18px; --pdf-headline-size:34px; }
  .cta-wrap, .gratitude, .grat{text-align:left; }
  .polaroid-figure{ width:140px; margin:12px auto; transform:none; float:none; display:block; }
}