:root{
      --bg:#0b1f3a; --bg2:#0e2546;
      --accent:#f5b700; --text:#f7fafc; --muted:#b0c4d9;
      --card:rgba(255,255,255,.08); --card2:rgba(255,255,255,.06);
      --brd:1px solid rgba(255,255,255,.10);
      --radius:20px; --shadow:0 8px 24px rgba(0,0,0,.25);
      --max:1120px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{background:linear-gradient(180deg,var(--bg),var(--bg2)); min-height:100dvh}
    body{
      margin:0; color:var(--text); background:var(--bg);
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      min-height:100vh; isolation:isolate;
    }
    .container{max-width:var(--max); margin-inline:auto; padding:clamp(16px,3vw,40px)}

    /* Header */
    header{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;margin:6px 0 22px}
    header a.brand-link{text-decoration:none;color:inherit;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
    header img.logo{width:min(96px,20vw);height:auto;display:block;filter:drop-shadow(0 3px 12px rgba(0,0,0,.25))}
    h1{margin:0;font-size:clamp(28px,5vw,48px);letter-spacing:.3px}
    .tag{color:var(--muted);font-size:clamp(14px,2.2vw,18px)}

    /* Hero */
    .hero{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
      min-height:min(72vh,720px);display:grid;place-items:center;text-align:center}
    .hero::before{content:"";position:absolute;inset:0;z-index:-2;
      background:linear-gradient(180deg,rgba(11,31,58,.55) 0%,rgba(11,31,58,.78) 65%,rgba(11,31,58,.88) 100%),
      url("/images/hero.jpg") center/cover no-repeat}
    .hero .inner{padding:clamp(20px,4vw,36px);max-width:920px}
    .hero h2{font-size:clamp(28px,5vw,52px);margin:0 0 10px}
    .hero p{margin:0 0 18px;color:var(--muted);font-size:clamp(16px,2.4vw,20px)}

    .choice-grid{display:grid;gap:clamp(12px,2vw,16px);grid-template-columns:repeat(12,1fr);margin-top:10px}
    .choice2-grid{display:grid;gap:clamp(8px,2vw,8px);grid-template-columns:repeat(12,1fr);margin-top:10px}
    .card{background:var(--card);border:var(--brd);border-radius:16px;padding:clamp(14px,2.4vw,18px);backdrop-filter:blur(6px);min-width:0}
    .span-4{grid-column:span 4}
    @media (max-width:960px){.span-4{grid-column:span 12}}
    .card h3{margin:0 0 8px;font-size:clamp(18px,2.4vw,22px)}
    .card p{margin:0 0 12px;color:var(--muted)}

    .btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;
      border:1px solid rgba(255,255,255,.18);background:var(--card2);color:var(--text);
      transition:transform .06s ease,filter .2s ease,background .2s ease}
    .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
    .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(245,183,0,.35)}
    .btn.primary{background:linear-gradient(180deg,#ffd76a,var(--accent));color:#1b2430;border-color:#c69400;text-shadow:0 1px 0 rgba(255,255,255,.35)}
    .btn.block{width:100%;text-align:center;margin-bottom: 12px;}

    /* Main panels & grid */
    .grid{display:grid;gap:clamp(16px,2.5vw,24px);grid-template-columns:repeat(12,1fr)}
    .span-12{grid-column:span 12}
    .span-6{grid-column:span 6}
    @media (max-width:960px){.span-6{grid-column:span 12}}
    .panel{background:var(--card);border:var(--brd);border-radius:var(--radius);padding:clamp(16px,3vw,26px);box-shadow:var(--shadow);backdrop-filter:blur(6px)}

    .list{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
    .list .btn{border:var(--brd);background:rgba(255,255,255,.06);text-align:center}

    footer{margin-top:28px;text-align:center;color:var(--muted);font-size:14px}
    .small{font-size:12px}.muted{color:var(--muted)}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Form */
    .form-qa{display:grid;gap:16px}
    .form-qa .row{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
    .form-qa .col-12{grid-column:span 12}
    .form-qa .col-6{grid-column:span 6}
    @media (max-width:900px){.form-qa .col-6{grid-column:span 12}}
    .form-qa .field{display:grid;gap:6px;min-width:0}
    .form-qa label{font-size:14px;color:var(--muted)}
    .form-qa input,.form-qa select{
      width:100%;padding:12px 14px;border-radius:12px;
      border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--text);
      outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
    .form-qa input::placeholder{color:rgba(255,255,255,.55)}
    .form-qa input:focus,.form-qa select:focus{border-color:var(--accent);background:rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(245,183,0,.25)}
    .form-qa select{
      -webkit-appearance:none;appearance:none;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23f7fafc' viewBox='0 0 20 20'><path d='M5.5 7l4.5 6 4.5-6z'/></svg>");
      background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:38px}
    /* ensure in-menu contrast */
    .form-qa select option{color:#0b1f3a;background:#ffffff}

    /* Text links (exclude buttons and brand banner) */
    a:not(.btn):not([class*="btn"]):not(.brand-link){
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dashed currentColor;
      padding-right: .25em;
      position: relative;
    }
    a:not(.btn):not([class*="btn"]):not(.brand-link)::after{
      content:"🔗"; font-size:.85em; margin-left:.25em; opacity:.6;
    }
    a:not(.btn):not([class*="btn"]):not(.brand-link):hover,
    a:not(.btn):not([class*="btn"]):not(.brand-link):focus-visible{
      border-bottom:2px solid currentColor; opacity:1;
    }

    summary{cursor:pointer; padding:6px 0}

    /* Consent row */
    .sms-consent{display:inline-flex;align-items:flex-start;gap:.6rem;line-height:1.35}
    .sms-consent input[type="checkbox"]{width:1.1rem;height:1.1rem;margin-top:.2rem;flex:0 0 auto}

/* FAQ answer callout box (only when the details is open) */
#faq details[open] > div,
#faq details[open] > .muted,
#faq details[open] > .answer {
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  padding: 16px 20px;
  margin: 10px auto;
  max-width: 90%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}


/* Responsive video wrapper: max ~740px, 16:9, centered */
.video-box{
  width: min(100%, 740px);
  margin: 12px auto;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
}

/* Make the placeholder or iframe fill the box */
.video-box > .yt-lazy,
.video-box > iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Keep nice thumbnail and play button on the placeholder */
.yt-lazy{
  background: #000 center/cover no-repeat;
  cursor: pointer;
}
.yt-lazy::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 70%);
}
.yt-lazy::before{
  content: "▶";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 56px; line-height: 1;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5);
  opacity: .9;
}


/* The iframe we inject */
.yt-embed{ border: 0; }

    .headline {
      font-family: 'Montserrat', sans-serif;
      font-size: 5EM;     /* adjust as needed */
      font-weight: 700;    /* bold */
      color: #f7fafc;      /* soft white */
      text-align: center;
    }

   .responsive-img {
    max-width: 100%;   /* never wider than the screen */
    height: auto;      /* keeps the aspect ratio */
    display: block;
    margin: 0 auto;    /* optional: centers it */
  }

  .lazy {
    display:block;
    width:100%;
    height:auto;
    background-size:cover;
    background-position:center;
    filter: blur(8px);
    transition: filter .3s ease;
  }
  .lazy.is-loaded { filter: none; }

.faq-footer {
  margin-top: 1rem;
  text-align: right; /* or center if you prefer */
}
.faq-close {
  background: var(--accent);  /* your gold */
  color: var(--bg);           /* your navy */
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  padding: .5rem 1rem;
  cursor: pointer;
}
.faq-close:hover {
  background: #ffc933;
}

/* Learn More section refinements */
  #learnmore .form-row { margin-top: 12px; }
  #learnmore .form-label {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 6px;
  }
  #learnmore .zip-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    max-width: 420px;
  }
  #learnmore .input {
    appearance: none;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius, 10px);
    border: 1px solid rgba(11,31,58,.18);
    background: #fff;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .3px;
  }
  #learnmore .input[aria-invalid="true"] {
    border-color: #b02128;
    outline: 2px solid rgba(176,33,40,.15);
  }
  #learnmore .btn {
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius, 10px);
    font-weight: 700;
    cursor: pointer;
    background: #d4af37; /* Gold */
    color: #0b1f3a;      /* Navy text for contrast */
    box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.12));
    transition: transform .04s ease, filter .12s ease;
    white-space: nowrap;
  }
  #learnmore .btn:active { transform: translateY(1px); }
  #learnmore .btn[disabled] { opacity: .65; cursor: not-allowed; }
  #learnmore .help {
    color: var(--muted, #5a6a7a);
    font-size: 14px;
    margin: 8px 0 0;
  }
  #learnmore .error {
    color: #b02128;
    font-size: 14px;
    margin: 8px 0 0;
  }

  /* Small screens: stack button under input */
  @media (max-width: 520px) {
    #learnmore .zip-wrap { grid-template-columns: 1fr; }
    #learnmore .btn { width: 100%; }
  }