.elementor-322 .elementor-element.elementor-element-4c343ab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-322 .elementor-element.elementor-element-4c343ab:not(.elementor-motion-effects-element-type-background), .elementor-322 .elementor-element.elementor-element-4c343ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/citizensforkevingrantham.com/wp-content/uploads/2025/09/41110701584_d85f61760c_o-1-1-scaled.jpg?fit=2560%2C1709&ssl=1");background-position:55% 25%;background-size:cover;}.elementor-322 .elementor-element.elementor-element-0028a8a{--display:flex;}.elementor-322 .elementor-element.elementor-element-dbf0f18{--display:flex;}.elementor-322 .elementor-element.elementor-element-e39a4fb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-322 .elementor-element.elementor-element-853ba19{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-322{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-322 .elementor-element.elementor-element-4c343ab:not(.elementor-motion-effects-element-type-background), .elementor-322 .elementor-element.elementor-element-4c343ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://i0.wp.com/citizensforkevingrantham.com/wp-content/uploads/2025/09/41110701584_d85f61760c_o-1-scaled-e1757783942322.jpg?fit=2193%2C1276&ssl=1");background-position:2% 0%;background-size:cover;}.elementor-322 .elementor-element.elementor-element-4c343ab{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-322 .elementor-element.elementor-element-e39a4fb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(max-width:767px){.elementor-322 .elementor-element.elementor-element-4c343ab:not(.elementor-motion-effects-element-type-background), .elementor-322 .elementor-element.elementor-element-4c343ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:15% 49%;background-size:cover;}.elementor-322 .elementor-element.elementor-element-d27db7e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-322 .elementor-element.elementor-element-e39a4fb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS *//* =========================================================
   Kevin Grantham — Clean CSS (Hero, Mail Card, Video)
   SLIDER-SAFE: no background-position set in CSS.
========================================================= */

/* ---------- Tokens ---------- */
:root{
  --navy:#0b1f2e; --brand-navy:#1d5c88; --red:#ef4445; --bg:#fff;
  --container:1120px; --radius:18px; --shadow:0 18px 48px rgba(16,24,40,.20);
}

/* ---------- Hero ---------- */
.hero--bleed{ width:100vw; margin-left:calc(50% - 50vw); }
.hero{
  position:relative; isolation:isolate; color:#fff;
  background-size:cover; background-repeat:no-repeat; /* ok with Elementor */
}

/* Readability overlay (image stays on the section; overlay is separate) */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,31,46,.80) 0%, rgba(10,31,46,.58) 42%, rgba(10,31,46,.22) 72%, rgba(10,31,46,0) 100%),
    radial-gradient(1200px 60% at 20% 10%, rgba(0,0,0,.22), transparent 60%);
}

/* Grid on Elementor wrapper (works for containers or sections) */
.hero > .elementor-container,
.hero > .e-con,
.hero > .e-con-inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr minmax(320px,420px);
  gap:clamp(20px,4vw,48px);
  align-items:start;
  padding:clamp(28px,8vh,96px) 16px;
  position:relative; z-index:1;
}
.hero > .e-con > .e-con-inner{ display:contents; }

/* Nuke stray widget padding inside hero */
.hero .elementor-widget-container{ margin:0 !important; padding:0 !important; }

/* Left column */
.hero__left{ text-shadow:0 2px 8px rgba(0,0,0,.22); max-width:22ch; }
@media (max-width:900px){ .hero__left{ max-width:unset; } }
.hero__title{
  margin:0 0 .2em;
  font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  font-size:clamp(32px,5vw,64px); line-height:1.05; text-wrap:balance;
}
.hero__subtitle{ margin:0 0 20px; font-size:clamp(16px,1.8vw,20px); opacity:.92; }
.hero__ctaRow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.btn{ display:inline-block; padding:.9em 1.2em; border-radius:14px; font-weight:700; text-decoration:none; }
.btn--donate{ background:#ef4445; color:#fff; box-shadow:0 12px 28px rgba(239,68,69,.35); }
.btn--donate:hover{ transform:translateY(-1px); filter:brightness(.98); }

/* Right column — Mailchimp card (Shortcode widget) */
.mailcard{
  background:#fff; color:#0f2f46;
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(22px,3vw,28px);
  width:100%; max-width:460px;
  justify-self:end; align-self:start;
}
.mailcard h2{
  margin:0 0 16px; line-height:1.15;
  font:800 20px/1.15 Montserrat,system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.5px;
}
.mailcard h2::after{
  content:""; display:block; width:48px; height:3px; margin-top:8px;
  background:linear-gradient(90deg,var(--red),#90adc3); border-radius:2px;
}

/* MC4WP — single column with perfectly even spacing */
.mailcard form,
.mailcard .mc4wp-form,
.mailcard .mc4wp-form-fields{
  margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:14px;
}
.mailcard .mc4wp-form p,
.mailcard .mc4wp-form-fields p{ margin:0; padding:0; }

/* Inputs */
.mailcard input[type="text"],
.mailcard input[type="email"],
.mailcard input[type="tel"],
.mailcard select{
  height:54px; width:100%; box-sizing:border-box;
  border-radius:14px; border:1px solid #d6dee6; background:#fff;
  padding:12px 14px; font-size:16px; line-height:1.2;
  outline:none; transition:border-color .15s, box-shadow .15s;
  appearance:none; -webkit-appearance:none; background-clip:padding-box;
}
.mailcard input::placeholder{ color:#64748b; }
.mailcard input:focus, .mailcard select:focus{
  border-color:#b9d0e2; box-shadow:0 0 0 3px rgba(29,92,136,.14);
}

/* Submit — catch ALL common MC4WP button markup and force style */
.mailcard .mc4wp-form input[type="submit"],
.mailcard .mc4wp-form button[type="submit"],
.mailcard .mc4wp-form .button,
.mailcard .mc4wp-form .wp-block-button__link{
  display:block !important;
  width:100% !important;
  height:54px !important;
  border-radius:14px !important;
  border:0 !important;
  background:linear-gradient(180deg,#90adc3,#7fa0b7) !important;
  color:#fff !important;
  font:800 16px/1 Montserrat,system-ui,sans-serif !important;
  letter-spacing:.4px !important;
  text-align:center !important;
  box-shadow:0 12px 26px rgba(16,24,40,.18) !important;
  padding:0 16px !important;
  cursor:pointer !important;
}
.mailcard .mc4wp-form input[type="submit"]:hover,
.mailcard .mc4wp-form button[type="submit"]:hover,
.mailcard .mc4wp-form .button:hover,
.mailcard .mc4wp-form .wp-block-button__link:hover{
  filter:brightness(.98); transform:translateY(-1px);
}

/* ---------- Responsive ---------- */
@media (min-width:768px) and (max-width:1024px){
  .hero > .elementor-container,
  .hero > .e-con,
  .hero > .e-con-inner{
    grid-template-columns:1.15fr .85fr;
    gap:22px; align-items:center; padding:clamp(28px,7vh,84px) 24px;
  }
  .hero{ min-height:640px; }
  .hero__title{ font-size:clamp(32px,5.6vw,48px); letter-spacing:.2px; }
  .mailcard{ max-width:440px; }
}
@media (max-width:767px){
  .hero > .elementor-container,
  .hero > .e-con,
  .hero > .e-con-inner{
    grid-template-columns:1fr; text-align:center;
    gap:18px; padding:clamp(24px,9vh,80px) 16px 24px;
  }
  .hero{ min-height:clamp(620px,95vh,840px); }
  .hero::after{
    background:
      linear-gradient(180deg, rgba(10,31,46,.82) 0%, rgba(10,31,46,.58) 42%, rgba(10,31,46,.22) 76%, rgba(10,31,46,0) 100%),
      radial-gradient(1200px 60% at 50% -10%, rgba(0,0,0,.22), transparent 60%);
  }
  .hero__title{ font-size:clamp(28px,9.5vw,40px); letter-spacing:.2px; margin-bottom:6px; }
  .hero__subtitle{ margin:6px auto 14px; max-width:36ch; }
  .mailcard{ width:min(94vw,560px); max-width:560px; margin:10px auto 0; justify-self:center; }
}

/* Soft space into next section */
.hero + *{ margin-top:clamp(14px,3vh,32px); }

/* ---------- Video block with underline ---------- */
section[aria-labelledby="video-title"]{
  max-width:var(--container); margin:0 auto; padding:clamp(28px,5vw,72px) 16px; color:#0f2f46;
}
#video-title{
  margin:0; text-transform:uppercase; letter-spacing:.6px;
  font:800 clamp(22px,2.6vw,32px)/1.15 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  position:relative; padding-bottom:10px;
}
#video-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:72px; height:4px; background:var(--red); border-radius:4px;
}
section[aria-labelledby="video-title"] > p{
  margin:.4rem 0 1rem; color:var(--brand-navy);
  font:600 clamp(14px,1.4vw,16px)/1.5 "Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  opacity:.9;
}

/* 16:9 responsive video with depth */
.video16x9{
  position:relative; width:100%;
  aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  box-shadow:0 16px 48px rgba(16,24,40,.18); background:#000;
  min-height:clamp(360px,55vh,680px);
}
.video16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ========= Mailcard rhythm polish (kept) ========= */
.mailcard .mc4wp-form,
.mailcard .mc4wp-form-fields{
  display:grid !important;
  grid-template-columns:1fr !important;
  row-gap:14px !important;
}
.mailcard .mc4wp-form > *,
.mailcard .mc4wp-form-fields > *{ margin:0 !important; padding:0 !important; }
.mailcard .mc4wp-form p:has([type="submit"]){ margin-top:0 !important; }
.mailcard .mc4wp-form input[type="submit"]{ margin-top:0 !important; }

/* Mobile compactness */
@media (max-width:767px){
  .mailcard{ padding:24px 16px 10px !important; border-radius:16px !important; box-shadow:0 14px 38px rgba(16,24,40,.18) !important; }
  .mailcard .mc4wp-form, .mailcard .mc4wp-form-fields{ row-gap:12px !important; }
  .mailcard h2{ margin:0 0 12px !important; font-size:18px !important; line-height:1.2 !important; }
  .mailcard input[type="text"], .mailcard input[type="email"]{ height:50px !important; border-radius:12px !important; padding:12px 14px !important; }
  .mailcard .mc4wp-form input[type="submit"],
  .mailcard .mc4wp-form button[type="submit"],
  .mailcard .mc4wp-form .button,
  .mailcard .mc4wp-form .wp-block-button__link{
    height:50px !important; line-height:50px !important; border-radius:12px !important; margin:0 !important;
  }
}

/* Safety */
.mailcard form > :first-child{ margin-top:0 !important; }
.mailcard form > :last-child{ margin-bottom:0 !important; }
.mailcard .mc4wp-form br{ display:none !important; }
/* =========================================
   MC4WP — EVEN RHYTHM + BULLETPROOF BUTTON
   (paste at the VERY END)
========================================= */

/* 1) One spacing system: the grid row-gap */
.mailcard .mc4wp-form,
.mailcard .mc4wp-form-fields{
  display:grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 14px !important; /* desktop/tablet rhythm */
  margin:0 !important; padding:0 !important;
}

/* 2) Kill stray margins/widths from wrappers */
.mailcard .mc4wp-form > *,
.mailcard .mc4wp-form-fields > *{
  margin:0 !important; padding:0 !important;
  width:100% !important; max-width:none !important;
  float:none !important; clear:both !important;
}
.mailcard .mc4wp-form br{ display:none !important; } /* no ghost spacing */

/* 3) Inputs — consistent sizing */
.mailcard input[type="text"],
.mailcard input[type="email"],
.mailcard input[type="tel"],
.mailcard select{
  height:54px !important;
  border-radius:14px !important;
  border:1px solid #d6dee6 !important;
  padding:12px 14px !important;
  font-size:16px !important; line-height:1.2 !important;
  width:100% !important; box-sizing:border-box !important;
}

/* 4) Submit — force full-width + zero extra margin */
.mailcard .mc4wp-form input[type="submit"],
.mailcard .mc4wp-form button[type="submit"],
.mailcard .mc4wp-form .button,
.mailcard .mc4wp-form .wp-block-button__link{
  display:block !important; width:100% !important;
  height:54px !important; line-height:54px !important;
  margin:0 !important;  /* <- fixes “email looks farther from button” */
  border:0 !important; border-radius:14px !important;
  background:linear-gradient(180deg,#90adc3,#7fa0b7) !important;
  color:#fff !important; text-align:center !important;
  font:800 16px/1 Montserrat,system-ui,sans-serif !important;
  letter-spacing:.4px !important;
  box-shadow:0 12px 26px rgba(16,24,40,.18) !important;
  cursor:pointer !important;
}

/* 5) OPTIONAL: two-column First/Last on ≥640px, with EMAIL + Submit spanning */
@media (min-width:640px){
  .mailcard .mc4wp-form{
    grid-template-columns: 1fr 1fr !important;
    column-gap:12px !important;
  }
  /* everyone spans both columns by default */
  .mailcard .mc4wp-form > *{ grid-column: 1 / -1 !important; }

  /* place by field name (robust) */
  .mailcard .mc4wp-form p:has([name="FNAME"]){ grid-column:1 !important; }
  .mailcard .mc4wp-form p:has([name="LNAME"]){ grid-column:2 !important; }
  .mailcard .mc4wp-form p:has([name="EMAIL"]){ grid-column:1 / -1 !important; }
  .mailcard .mc4wp-form p:has([type="submit"]){ grid-column:1 / -1 !important; }

  /* fallback if :has() isn’t supported */
  @supports not (body.elementor-page-322(p:has(input))){
    .mailcard .mc4wp-form p:nth-of-type(1){ grid-column:1 !important; }
    .mailcard .mc4wp-form p:nth-of-type(2){ grid-column:2 !important; }
    .mailcard .mc4wp-form p:nth-of-type(n+3){ grid-column:1 / -1 !important; }
  }
}

/* 6) Mobile compactness (keeps it professional, not cramped) */
@media (max-width:767px){
  .mailcard{ padding:24px 16px 10px !important; }
  .mailcard .mc4wp-form{ row-gap:12px !important; }
  .mailcard input[type="text"], .mailcard input[type="email"]{
    height:50px !important; border-radius:12px !important;
  }
  .mailcard .mc4wp-form input[type="submit"],
  .mailcard .mc4wp-form button[type="submit"],
  .mailcard .mc4wp-form .button,
  .mailcard .mc4wp-form .wp-block-button__link{
    height:50px !important; line-height:50px !important; border-radius:12px !important;
  }
}
/* ============ Mailcard title underline — mobile fix ============ */
/* Give the title a small left inset on phones, and move the underline with it */
@media (max-width: 767px){
  .mailcard{ --title-inset: 25px; --title-underline: 46px; }

  .mailcard h2{
    padding-left: var(--title-inset) !important;  /* shifts text slightly */
    margin-bottom: 12px !important;
  }
  .mailcard h2::after{
    width: var(--title-underline) !important;
    height: 3px !important;
    margin-top: 8px !important;
    margin-left: var(--title-inset) !important;   /* underline lines up with text */
    border-radius: 2px !important;
    background: linear-gradient(90deg, var(--red), #90adc3) !important;
  }
}

/* Optional: slightly tighter inset on larger screens */
@media (min-width: 768px){
  .mailcard{ --title-inset: 2px; --title-underline: 48px; }
}
/* Mailcard title underline — consistent & mobile-friendly */
.mailcard h2{ position:relative; padding-left:2px; }
.mailcard h2::after{
  position:absolute; left:2px; bottom:-6px;
  width:38px; height:3px; border-radius:2px;
}
@media (min-width:1025px){
  .mailcard h2::after{ width:48px; bottom:-8px; }
}
@media (max-width:767px){
  .mailcard{ padding-bottom:8px !important; } /* was 10px */
}
.mailcard .mc4wp-form p:has([type="submit"]){ margin-top:0 !important; }
.mailcard .mc4wp-form input[type="submit"]{ margin-top:0 !important; }
/* MC4WP response states */
.mailcard .mc4wp-response{ margin-top:10px; font-size:14px; }
.mailcard .mc4wp-success{
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
  padding:10px 12px; border-radius:12px;
}
.mailcard .mc4wp-error{
  background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
  padding:10px 12px; border-radius:12px;
}
.mailcard .mc4wp-notice{
  background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe;
  padding:10px 12px; border-radius:12px;
}
/* Browser invalid state & focus ring */
.mailcard input:focus{ box-shadow:0 0 0 3px rgba(29,92,136,.18); }
.mailcard input:invalid:focus{ border-color:#ef4445; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
/* Slightly stronger shadow only on phones to lift the card off busy bg */
@media (max-width:767px){
  .mailcard{ box-shadow:0 18px 46px rgba(16,24,40,.22) !important; }
}

/* Keep the button text perfectly centered across browsers */
.mailcard .mc4wp-form input[type="submit"],
.mailcard .mc4wp-form button[type="submit"]{ display:flex !important; align-items:center; justify-content:center; }
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Mailcard title underline: consistent across breakpoints */
.mailcard h2{
  position: relative;
}
.mailcard h2::after{
  content:"";
  position:absolute;
  left: 2px;           /* nudge to visually align with the text edge */
  bottom: -8px;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red), #90adc3);
}

/* Tablet: a hair longer */
@media (min-width:768px) and (max-width:1024px){
  .mailcard h2::after{ width: 60px; bottom: -10px; }
}

/* Mobile: slightly longer + a smidge lower so it breathes */
@media (max-width:767px){
  .mailcard h2::after{ width: 64px; bottom: -10px; left: 0; }
}
/* One source of truth for spacing */
.mailcard .mc4wp-form,
.mailcard .mc4wp-form-fields{ row-gap: 12px !important; }

/* Kill any wrapper margins that sneak in */
.mailcard .mc4wp-form > *,
.mailcard .mc4wp-form-fields > *{ margin:0 !important; padding:0 !important; }

/* If submit sits in a <p>, remove extra top space */
.mailcard .mc4wp-form p:has([type="submit"]){ margin-top:0 !important; }
/* Fallback */
.mailcard .mc4wp-form input[type="submit"]{ margin-top:0 !important; }
/* === MAILCARD TITLE UNDERLINE — FINAL, MOBILE-CORRECT === */
/* Neutralize any earlier ::after underline so we don't double-render */
.mailcard h2::after{ content: none !important; }

/* Use a background gradient as the underline (robust to line wrapping) */
.mailcard h2{
  position: relative;
  padding-bottom: 10px !important;                 /* room for the line */
  background-image: linear-gradient(90deg, var(--red), #90adc3);
  background-repeat: no-repeat;
  background-size: 56px 3px;                       /* desktop default */
  background-position: 2px 100%;                   /* nudge aligns with text */
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){
  .mailcard h2{
    background-size: 60px 3px;
    background-position: 2px 100%;
  }
}

/* Mobile */
@media (max-width:767px){
  .mailcard h2{
    background-size: 64px 3px;                     /* a touch longer on phones */
    background-position: 0 100%;                   /* flush with left edge */
  }
}
/* ===== Video heading underline — match mailcard exactly ===== */

/* kill the old pseudo-element underline */
#video-title::after{ content:none !important; }

/* use the same background-gradient underline as the form title */
#video-title{
  position: relative;
  padding-bottom: 10px;                         /* room for the line */
  background-image: linear-gradient(90deg, var(--red), #90adc3);
  background-repeat: no-repeat;
  background-size: 56px 3px;                    /* desktop default (same as card) */
  background-position: 2px 100%;                /* slight nudge like the card */
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){
  #video-title{
    background-size: 60px 3px;
    background-position: 2px 100%;
  }
}

/* Mobile */
@media (max-width:767px){
  #video-title{
    background-size: 64px 3px;                  /* same longer mobile length */
    background-position: 0 100%;                /* flush left like mobile card */
  }
}
/* Center the hero CTA button on mobile only */
@media (max-width: 767px){
  /* center the row */
  .hero__ctaRow{ 
    justify-content: center !important;
  }

  /* cover Elementor button widget and your .btn class */
  .hero__ctaRow .btn,
  .hero .elementor-widget-button .elementor-button{
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex;            /* ensures perfect centering */
    align-items: center;
    justify-content: center;
  }
}
/* --- FIX: Mailcard title underline (single, final) --- */
.mailcard h2{
  position:relative !important;
  padding-left:2px !important;        /* tiny visual nudge */
  padding-bottom:10px !important;     /* room for the line */
  background:none !important;         /* kill background-image underline */
}

/* ensure we actually render the ::after (wins over earlier `content:none !important`) */
.mailcard h2::after{
  content:"" !important;
  position:absolute; left:2px; bottom:-8px;
  width:56px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--red), #90adc3);
}

/* tablet */
@media (min-width:768px) and (max-width:1024px){
  .mailcard h2::after{ width:60px; bottom:-10px; }
}

/* mobile */
@media (max-width:767px){
  /* cancel the old "title-inset" idea */
  .mailcard{ --title-inset:0 !important; }
  .mailcard h2{ padding-left:2px !important; }
  .mailcard h2::after{ width:64px; bottom:-10px; left:2px; }
}
/* Hide the mailcard title underline on mobile */
@media (max-width: 767px){
  /* kill pseudo-underline versions */
  .hero__form.mailcard h2::after,
  .hero__form.mailcard .elementor-widget-heading h2.elementor-heading-title::after{
    content: none !important;
  }

  /* kill background-gradient underline versions + tidy spacing */
  .hero__form.mailcard h2,
  .hero__form.mailcard .elementor-widget-heading h2.elementor-heading-title{
    background: none !important;
    background-image: none !important;
    padding-bottom: 0 !important; /* remove the gap the line used */
  }
}

/* --- JOIN BUTTON: FINAL OVERRIDE (ONLY the mailcard submit) --- */
.mailcard .mc4wp-form :is(input[type="submit"], button[type="submit"], .button, .wp-block-button__link){
  /* brandy gradient + subtle sheen */
  background:
    radial-gradient(120% 180% at 30% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%) ,
    linear-gradient(135deg, var(--brand-navy), #3b82b4) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(29,92,136,.26) !important;
  border:0 !important;
  transform: translateZ(0); /* GPU hint */
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.05) !important;
}

.mailcard .mc4wp-form :is(input[type="submit"], button[type="submit"], .button, .wp-block-button__link):hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow:0 18px 36px rgba(29,92,136,.32) !important;
}

.mailcard .mc4wp-form :is(input[type="submit"], button[type="submit"], .button, .wp-block-button__link):active{
  transform: translateY(-1px) scale(.99) !important;
  box-shadow:0 12px 26px rgba(29,92,136,.26) !important;
}

.mailcard .mc4wp-form :is(input[type="submit"], button[type="submit"], .button, .wp-block-button__link):focus-visible{
  outline:0 !important;
  box-shadow:
    0 0 0 3px rgba(29,92,136,.28) !important,
    0 14px 30px rgba(29,92,136,.26) !important;
}
/* OPTIONAL: add a subtle arrow on the Join button (no HTML changes) */
.mailcard .mc4wp-form input[type="submit"]{
  padding-right: 44px !important;                    /* room for arrow */
  background-image: url("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M13 6l6 6-6 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

/* OPTIONAL: clearer disabled/loading look (MC4WP sometimes disables on submit) */
.mailcard .mc4wp-form input[type="submit"][disabled]{
  filter: grayscale(.15) brightness(.95);
  box-shadow: 0 8px 18px rgba(29,92,136,.18) !important;
  cursor: progress !important;
}

/* =========================================================
   HERO TEXT-ONLY TUNING (headline/subhead spacing only)
   — No grid/placement changes
========================================================= */

/* Desktop */
@media (min-width:1025px){
  .hero__title{
    max-width: 14ch;          /* deliberate multi-line stack */
    line-height: 1.04;        /* a touch tighter for all-caps */
    margin-bottom: .25em;     /* small breathing room above subhead/CTA */
    letter-spacing: .28px;    /* slightly calmer tracking */
  }
  .hero__subtitle{
    max-width: 34ch;          /* keep one tidy sentence */
    font-weight: 600;
    opacity: .96;
    text-wrap: pretty;
    margin: .35em 0 .9em;
  }
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){
  .hero__title{
    max-width: 16ch;
    line-height: 1.05;
    margin-bottom: .25em;
  }
  .hero__subtitle{
    max-width: 36ch;
    font-weight: 600;
    margin: .35em 0 .85em;
    text-wrap: pretty;
  }
}

/* Mobile */
@media (max-width:767px){
  .hero__title{
    max-width: 18ch;          /* avoids overly tall stacks */
    line-height: 1.07;
    margin-bottom: 6px;
  }
  .hero__subtitle{
    max-width: 34ch;          /* already centered by your layout */
    font-weight: 600;
    margin: 6px auto 14px;
    text-wrap: pretty;
  }
}
/* === HERO TYPE TWEAKS (mobile-first, typography only) === */
@media (max-width: 767px){

  /* Make the stacked headline feel intentional + centered */
  .hero__left{
    text-align: center !important;
    margin-inline: auto;                 /* center the text block */
    text-shadow: 0 2px 10px rgba(0,0,0,.35); /* a touch more readability */
  }

  .hero__title{
    max-width: 12ch;                     /* a little tighter than 14ch */
    font-size: clamp(28px, 8.6vw, 38px); /* small down-tick on narrow phones */
    line-height: 1.07;                   /* looser for uppercase */
    letter-spacing: .4px;                /* crisp caps */
    margin: 6px auto 10px;               /* center + a hair more breath */
    text-wrap: balance;
  }

  /* One-line subhead that doesn’t run too long */
  .hero__subtitle{
    max-width: 28ch;                     /* shorter line length */
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.35;
    font-weight: 600;
    opacity: .96;                        /* a hair crisper on dark bg */
    margin: 8px auto 14px;               /* center */
    text-wrap: pretty;
  }

  /* Safeguard: center Elementor widgets if they ignore parent align */
  .hero .elementor-widget-heading,
  .hero .elementor-widget-text-editor{
    text-align: center !important;
  }
}

/* Tablet: keep the headline compact so it doesn’t sprawl */
@media (min-width: 768px) and (max-width: 1024px){
  .hero__title{ max-width: 13ch; line-height: 1.06; letter-spacing: .35px; }
  .hero__subtitle{ max-width: 32ch; }
}
/* --- HERO FORM: stop the weird desktop circle --- */
@media (min-width: 1025px){
  /* Flatten all possible Elementor wrappers around the form */
  .hero .elementor-column,
  .hero .elementor-column .elementor-widget-wrap,
  .hero .elementor-container,
  .hero .e-con,
  .hero .e-con-inner,
  .hero .elementor-widget-container,
  .hero .elementor-background-overlay{
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
  }
}

/* Keep the card nicely rounded */
.hero .mailcard{ border-radius: 18px !important; }
/* Make the embed feel more natural for a vertical video on phones */
@media (max-width: 767px){
  .video16x9{
    aspect-ratio: 9 / 16;          /* was 16/9 */
    min-height: 540px;              /* gives it breathing room */
    border-radius: 14px;            /* match your card corners */
    box-shadow: 0 16px 40px rgba(16,24,40,.18);
  }
  section[aria-labelledby="video-title"] > p{
    max-width: 36ch;                /* tidy the lead line */
    margin-bottom: 12px;
  }
}
/* ===== Video section layout (matches your existing tokens) ===== */
.kg-video{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(28px,5vw,72px) 16px;
  color:#0f2f46;
}
.kg-video > p{
  margin:.4rem 0 1rem;
  color:var(--brand-navy);
  font:600 clamp(14px,1.4vw,16px)/1.5 "Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  opacity:.9;
}

/* Poster-first player */
.ytPoster{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;                 /* desktop/tablet default */
  box-shadow: 0 16px 48px rgba(16,24,40,.18);
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background:#000;
  display: block;
  padding: 0;
}
.ytPoster__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;                     /* fill nicely on desktop */
  background:#000;
}
/* Centered play button */
.ytPoster__play{
  position:absolute; inset:auto;
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  transition: transform .15s ease, filter .2s ease;
  pointer-events: none;
}
.ytPoster:hover .ytPoster__play{ transform:translate(-50%,-50%) scale(1.03); }

/* When activated, the iframe fills the frame */
.ytPoster--active iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

/* Mobile: treat it like a Reel — show the whole poster, no crop */
@media (max-width: 767px){
  .ytPoster{ aspect-ratio: 9 / 16; }     /* tall frame */
  .ytPoster__img{ object-fit: contain; } /* show entire Canva poster */
}

/* Optional: match your video heading underline approach */
#video-title{
  position: relative;
  padding-bottom: 10px;
  background-image: linear-gradient(90deg, var(--red), #90adc3);
  background-repeat: no-repeat;
  background-size: 56px 3px;
  background-position: 2px 100%;
}
@media (min-width:768px) and (max-width:1024px){
  #video-title{ background-size: 60px 3px; }
}
@media (max-width:767px){
  #video-title{ background-size: 64px 3px; background-position: 0 100%; }
}
/* 1) Kill the pink focus outline and use a subtle brand ring instead */
.ytPoster{
  padding:0 !important;
  border:0 !important;
  background:#000 !important;
  outline:none !important;
  -webkit-tap-highlight-color: transparent; /* iOS highlight */
}
.ytPoster:focus,
.ytPoster:active{ outline:none !important; }
.ytPoster:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 3px rgba(29,92,136,.35),
    0 16px 48px rgba(16,24,40,.18);
}

/* 2) Force the play badge to dead-center and lock its size */
.ytPoster__play{
  position:absolute !important;
  left:50% !important; top:50% !important;
  right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}
.ytPoster__play svg{ width:64px !important; height:64px !important; display:block; }

/* 3) Hide any extra play overlays some themes/plugins inject */
.ytPoster .eicon-play,
.ytPoster .elementor-custom-embed-play,
.ytPoster [class*="play-button"],
.ytPoster [class*="play__btn"]{
  display:none !important;
}
/* Reset any theme button styles (since we swapped to DIV) */
.ytPoster{
  all: unset;                 /* nuke inherited styles */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 48px rgba(16,24,40,.18);
  cursor: pointer;
  isolation: isolate;
}
.ytPoster__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  background:#000;
}
.ytPoster__play{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  z-index: 3;                 /* above everything */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  pointer-events: none;
}
.ytPoster__play svg{ width:64px; height:64px; display:block; }

/* Custom, subtle focus ring for keyboard users */
.ytPoster:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(29,92,136,.35),
    0 16px 48px rgba(16,24,40,.18);
}

/* Hide any extra play overlays that widgets inject in this section */
.kg-video :is(.elementor-custom-embed-play,
              .eicon-play,
              .mejs-overlay-button,
              [class*="play-button"],
              [class*="play_btn"],
              [class*="play-btn"]){
  display:none !important;
}

/* Keep the iframe full-bleed inside the frame after activation */
.ytPoster--active iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Mobile: show the whole poster (vertical aspect) */
@media (max-width: 767px){
  .ytPoster{ aspect-ratio: 9 / 16; }
  .ytPoster__img{ object-fit: contain; }
}/* End custom CSS */