/* ===== Base ===== */
:root{
  --navy:#0E2A47; /* PDF navy */
  --teal:#007A6C; /* system teal */
  --text:#333333;
  --ink:#1C1C1C;
  --bg:#FFFFFF;
  --muted:#F5F7FA;
  --maxw:960px;
  --gap-section:64px;
  --gap-p:20px;
  --gap-bullet:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
h1,h2{font-family:'Playfair Display', Georgia, 'Times New Roman', serif;color:var(--ink);line-height:1.25;margin:0 0 0.6em}
h1{font-size:44px}
h2{font-size:28px}
p{margin:0 0 var(--gap-p)}
/* Consistent, modest spacing for all lists */
ul, ol { margin: 0 0 var(--gap-p) 1.1em; padding: 0; }
/* keeps li spacing as-is */

li{margin:0 0 var(--gap-bullet)}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Layout ===== */
.container{max-width:var(--maxw);margin:0 auto;padding:20px}
.content{padding-top:28px;padding-bottom:64px}

/* ===== Header ===== */
.site-header{background:var(--navy);color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{color:#fff;font-weight:700;letter-spacing:.2px}
.nav a{color:#fff;margin-left:20px}
.nav a:hover{opacity:.9;text-decoration:underline}

/* ===== Footer ===== */
.site-footer{border-top:1px solid #E5E9EF;background:#FCFDFF;color:var(--text)}
.footer-inner{padding:24px 20px}
.footer-nav{margin-bottom:10px}
.footer-nav a{color:var(--teal)}
.sep{margin:0 8px;color:#9aa7b2}
.disclaimer{font-size:14px;color:#4a5561;margin:8px 0 12px}
.copyright{font-size:12px;color:#6b7785;margin:0}

/* ===== Utilities ===== */
.hero{background:var(--muted);padding:28px;border-radius:8px}
.btn-primary{display:inline-block;padding:12px 18px;background:var(--teal);color:#fff;border-radius:6px;font-weight:700}
.btn-primary:hover{filter:brightness(.95)}
.small{font-size:14px}

.small.break-below {
  display: block;
  margin-top: 8px;
}



/* ===== Responsive ===== */
@media (max-width:720px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px}
  h1{font-size:34px}
  h2{font-size:24px}
}

/* Forms */
form input[type="text"], form input[type="email"], form textarea {
  width:100%;
  max-width:640px;
  padding:10px;
  border:1px solid #D7DFEA;
  border-radius:6px;
  font:inherit;
}
form p { margin-bottom:16px; }
.hidden { display:none; } /* honeypot */

/* Hero CTA mobile optimization */
@media (max-width: 768px) {
  .hero {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .hero h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .hero p {
    margin-bottom: 1rem;
  }
  .hero .btn-primary {
    margin-top: 1rem;
  }
}
.site-header .brand img {
  height: 44px;   /* matches your H1 scale */
  width: auto;
  display: block; /* removes baseline gap */
}
/* Header layout: desktop */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header .brand{ margin-right:24px; }
.site-header .brand img{
  height:44px;
  width:auto;
  display:block;
}
.site-header .nav{
  display:flex;
  gap:24px;
  margin-left:auto;    /* pushes nav to the right */
  text-align:left;     /* override any centering */
}

/* Header layout: mobile */
@media (max-width: 768px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;   /* left-align stack */
  }
  .site-header .brand img{ height:36px; }
  .site-header .nav{
    margin-left:0;
    margin-top:8px;
    justify-content:flex-start;
    text-align:left;          /* ensure links stay left */
    gap:16px;
  }
}
/* -------------------------------------------------
   Mobile ≤520px — Left-aligned header & nav (12px gutter)
   ------------------------------------------------- */
@media (max-width: 520px) {
  .site-header .header-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  .site-header .brand {
    margin-left: 12px;              /* left-align logo block to gutter */
    display: block;
  }

  .site-header .brand img {
    display: block;
    margin-left: 0;                 /* no offset inside logo */
    height: 40px;                   /* keeps logo size consistent on iOS */
    width: auto;
    max-width: 90%;                 /* safety cap for very small screens */
  }

  .site-header .nav {
    display: flex;
    justify-content: flex-start;    /* left-align nav to match logo */
    padding-left: 12px;             /* aligns nav perfectly with logo */
    gap: 20px;                      /* keeps link spacing balanced */
    width: 100%;
  }

  .site-header .nav a {
    margin: 0;                      /* reset desktop margins */
  }
}


/* -------------------------------------------------
Future Mobile Nav (Stacked State)
----------------------------------------------------
When ready to add a stacked/hamburger nav:
- Logo sits above links.
- Links align left under logo.
- Trigger at max-width: 640px.
!!! Do NOT enable until stacked/hamburger nav design 
is approved and added to Reset Paste.
--------------------------------------------------- */
.site-footer .mailing {
  font-size: 14px;
  color: #4a5561;
  margin: 6px 0 10px; /* visually balanced between disclaimer and copyright */
}
/* Checkbox styling */
input[type="checkbox"] {
  accent-color: #003366; /* matches your brand navy */
  transform: scale(1.1);
  margin-right: 0.4em;
}

.checkbox-row label a {
  text-decoration: underline;
}

form p {
  margin-bottom: 1rem;
}

form p.hidden {
  display: none;
}
#recaptcha-warning {
  font-size: 0.9rem;
  color: #b00020;
  margin-top: 0.5rem;
}
/* --- Contact Form Button: Match Site CTA --- */
form .btn-primary {
  display: inline-block;
  padding: 14px 24px;
  background-color: var(--teal);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin-top: 12px; /* adds breathing room under reCAPTCHA */
}

form .btn-primary:hover {
  background-color: #176f63; /* slightly darker teal on hover */
  transform: translateY(-1px);
}

form .btn-primary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}