/* =========================
   Iowa Haven · Production CSS (v69)
   - Mobile-first, accessible
   - Tri-logo background (left/right animated, center static 3×)
   - Footer brand: centered, ~3× logo with tagline
   ========================= */

/* Variables */
:root{
  --logo-base: clamp(220px, 22vw, 360px);
  --logo-center: clamp(660px, 66vw, 1080px);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  --brand:#052846; --primary:#05223d; --secondary:#0D446B; --accent:#E09A00;
  --bg:#E6EBF2; --surface:#F7F9FC; --alt:#F1F5FA; --border:#D6DFE9; --text:#0A1222;
  --shadow:0 1px 2px rgba(16,24,40,.08), 0 6px 14px rgba(16,24,40,.10);
}

/* Base */
*{ box-sizing:border-box }
html,body{
  height:100%; margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.65;
  -webkit-text-size-adjust:100%;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; display:block }
.container{ max-width:1160px; margin:0 auto; padding:0 16px }

/* Header / Nav */
.nav{
  position:sticky; top:0; z-index:65000;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
  transform:translateZ(0);
}
.nav .inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.brand{ display:flex; gap:12px; align-items:center }
.brand .logo-link{ display:inline-flex }
.brand .logo{ height:56px }
.brand .tag-mini{
  font-size:.85rem; font-weight:800; color:var(--primary);
  background:rgba(224,154,0,.18); padding:4px 8px; border-radius:10px
}

/* Links & flyouts */
.links{ display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0 }
.links a{ display:inline-block; padding:8px 10px; border-radius:10px; font-weight:700 }
.menu{ position:relative; display:inline-block }
.menu>.menu-btn{
  background:transparent; border:0; font:inherit; font-weight:700; font-size:1.05rem;
  color:var(--text); cursor:pointer; padding:8px 10px; border-radius:10px; text-decoration:none
}
.menu>.menu-btn:hover,.menu>.menu-btn:focus{ background:var(--alt); outline:none }
.menu-list{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70000;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px);
  border:1px solid rgba(10,18,34,.12); box-shadow:0 18px 60px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.6);
  padding:8px; border-radius:14px; min-width:260px; max-height:70vh; overflow-y:auto;
  display:none; transform:translateY(6px); opacity:0; transform-origin:top;
  transition:opacity .32s ease .14s, transform .32s ease .14s;
}
.menu:hover>.menu-list,.menu:focus-within>.menu-list,.menu.open>.menu-list{ display:block; opacity:1; transform:translateY(0) }
.menu-list a{
  display:block; white-space:nowrap; padding:10px 12px; border-radius:8px; position:relative;
  overflow:hidden; transition:background .18s ease
}
.menu-list a:hover,.menu-list a:focus{ background:var(--alt); outline:none }
.menu-list a::after{
  content:"→"; position:absolute; right:10px; top:50%; transform:translateY(-50%) translateX(-6px);
  opacity:0; transition:transform .18s ease, opacity .18s ease; font-weight:800; color:var(--primary)
}
.menu-list a:hover::after,.menu-list a:focus::after{ transform:translateY(-50%) translateX(0); opacity:1 }

/* Layout / Cards / Forms */
.hero{ padding:84px 0 }
.section{ padding:40px 0 }
.grid{ display:grid; gap:12px }
.grid-2{ grid-template-columns:1fr 1fr }
.grid-3{ grid-template-columns:repeat(3,1fr) }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow) }
.pop-card{ transition:transform .22s, box-shadow .22s; will-change:transform }
.pop-card:hover,.pop-card:focus,.pop-card:focus-within{
  transform:translateY(-6px) scale(1.03); box-shadow:0 16px 38px rgba(11,59,92,.18); outline:none
}

.input, select, textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff }
.form .grid{ display:grid; gap:12px }
.form .grid.grid-2{ grid-template-columns:1fr 1fr }

.cta{
  display:inline-block; border-radius:9px; padding:12px 26px; font-weight:700;
  background:var(--accent); color:var(--primary); border:none; cursor:pointer;
  box-shadow:0 2px 10px rgba(11,59,92,.06); text-decoration:none
}
.cta.secondary{ background:var(--secondary); color:#fff }

/* Footer */
.site-footer{ background:#0C1726; color:#D8DFEA }
.site-footer a{ color:#D8DFEA }
.site-footer a:hover{ text-decoration:underline }

.footer-wrap{ padding:28px 0 }
.footer-top{ display:grid; gap:18px; grid-template-columns:1.4fr 1fr 1fr 1fr }

.footer-brand{ display:flex; flex-direction:column; align-items:center; text-align:center }
.footer-logo{ height:132px; width:auto; display:block; margin:0 auto 8px } /* ~3× of original 44px */
.footer-brand .tagline{ color:#AFC2DC; margin-top:6px; font-weight:700 }

.footer-col strong{ display:block; margin-bottom:8px; color:#fff }
.footer-col ul{ list-style:none; margin:0; padding:0 }
.footer-col li{ padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); white-space:normal; line-height:1.5; word-break:break-word }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:18px; padding-top:12px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; font-size:.95rem
}

/* Toast */
.toast{
  position:fixed; z-index:3000; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0A2F4F; color:#fff; padding:12px 16px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); display:none
}
.toast.show{ display:block; animation:fadeInOut 3.2s ease both }
@keyframes fadeInOut{
  0%{opacity:0;transform:translate(-50%,8px)} 10%{opacity:1;transform:translate(-50%,0)}
  90%{opacity:1} 100%{opacity:0;transform:translate(-50%,8px)}
}

/* Accessibility */
:focus{ outline:3px solid #E09A00; outline-offset:2px }

/* ---------- Tri-logo background (consistent on all pages) ---------- */
@keyframes bodyLogoFloatL{ 0%{transform:translate3d(0,0,0) rotate(-2deg)} 50%{transform:translate3d(0,-10px,0) rotate(2deg)} 100%{transform:translate3d(0,0,0) rotate(-2deg)} }
@keyframes bodyLogoFloatR{ 0%{transform:translate3d(0,0,0) rotate(2deg)} 50%{transform:translate3d(0,8px,0) rotate(-2deg)} 100%{transform:translate3d(0,0,0) rotate(2deg)} }

/* Global side marks */
body::before,
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-repeat:no-repeat; opacity:.22; background-image:url("assets/logo.png");
}

/* Move side logos inward ~2 inches (≈192px) */
body::before{
  background-position:left 2in center;
  background-size:var(--logo-base);
  animation:bodyLogoFloatL 22s ease-in-out infinite;
}
body::after{
  background-position:right 2in center;
  background-size:var(--logo-base);
  animation:bodyLogoFloatR 22s ease-in-out infinite;
}

/* Center, static mark (3×) */
.bg-center-logo::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("assets/logo.png"); background-repeat:no-repeat; background-position:center center;
  background-size:var(--logo-center); opacity:.30;
}

/* Keep all content above background marks */
nav, main, footer, .container, section, .hero, .modal{ position:relative; z-index:1 }

/* Hide side marks on small screens (keep center mark only) */
@media (max-width:820px){
  body::before, body::after{ display:none }
}

/* Responsive tweaks */
@media (max-width:900px){ .links{ flex-wrap:wrap; gap:8px } .grid-3{ grid-template-columns:1fr } }
@media (max-width:780px){
  .form .grid.grid-2{ grid-template-columns:1fr }
  .cta{ min-height:44px }
  .brand .logo{ height:60px }
}
@media (max-width:640px){
  .hero{ padding:64px 0 }
  .input, select, textarea{ padding:14px 16px }
  .grid.grid-2, .grid.grid-3{ grid-template-columns:1fr }
  .actions a, .actions button{ min-height:48px }
}
/* =========================
   Iowa Haven · Production CSS (v69)
   - Mobile-first, accessible
   - Tri-logo background (left/right animated, center static 3×)
   - Footer brand: centered, ~3× logo with tagline
   ========================= */

/* Variables */
:root{
  --logo-base: clamp(220px, 22vw, 360px);
  --logo-center: clamp(660px, 66vw, 1080px);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  --brand:#052846; --primary:#05223d; --secondary:#0D446B; --accent:#E09A00;
  --bg:#E6EBF2; --surface:#F7F9FC; --alt:#F1F5FA; --border:#D6DFE9; --text:#0A1222;
  --shadow:0 1px 2px rgba(16,24,40,.08), 0 6px 14px rgba(16,24,40,.10);
}

/* Base */
*{ box-sizing:border-box }
html,body{
  height:100%; margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.65;
  -webkit-text-size-adjust:100%;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; display:block }
.container{ max-width:1160px; margin:0 auto; padding:0 16px }

/* Header / Nav */
.nav{
  position:sticky; top:0; z-index:65000;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
  transform:translateZ(0);
}
.nav .inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.brand{ display:flex; gap:12px; align-items:center }
.brand .logo-link{ display:inline-flex }
.brand .logo{ height:56px }
.brand .tag-mini{
  font-size:.85rem; font-weight:800; color:var(--primary);
  background:rgba(224,154,0,.18); padding:4px 8px; border-radius:10px
}

/* Links & flyouts */
.links{ display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0 }
.links a{ display:inline-block; padding:8px 10px; border-radius:10px; font-weight:700 }
.menu{ position:relative; display:inline-block }
.menu>.menu-btn{
  background:transparent; border:0; font:inherit; font-weight:700; font-size:1.05rem;
  color:var(--text); cursor:pointer; padding:8px 10px; border-radius:10px; text-decoration:none
}
.menu>.menu-btn:hover,.menu>.menu-btn:focus{ background:var(--alt); outline:none }
.menu-list{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70000;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px);
  border:1px solid rgba(10,18,34,.12); box-shadow:0 18px 60px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.6);
  padding:8px; border-radius:14px; min-width:260px; max-height:70vh; overflow-y:auto;
  display:none; transform:translateY(6px); opacity:0; transform-origin:top;
  transition:opacity .32s ease .14s, transform .32s ease .14s;
}
.menu:hover>.menu-list,.menu:focus-within>.menu-list,.menu.open>.menu-list{ display:block; opacity:1; transform:translateY(0) }
.menu-list a{
  display:block; white-space:nowrap; padding:10px 12px; border-radius:8px; position:relative;
  overflow:hidden; transition:background .18s ease
}
.menu-list a:hover,.menu-list a:focus{ background:var(--alt); outline:none }
.menu-list a::after{
  content:"→"; position:absolute; right:10px; top:50%; transform:translateY(-50%) translateX(-6px);
  opacity:0; transition:transform .18s ease, opacity .18s ease; font-weight:800; color:var(--primary)
}
.menu-list a:hover::after,.menu-list a:focus::after{ transform:translateY(-50%) translateX(0); opacity:1 }

/* Layout / Cards / Forms */
.hero{ padding:84px 0 }
.section{ padding:40px 0 }
.grid{ display:grid; gap:12px }
.grid-2{ grid-template-columns:1fr 1fr }
.grid-3{ grid-template-columns:repeat(3,1fr) }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow) }
.pop-card{ transition:transform .22s, box-shadow .22s; will-change:transform }
.pop-card:hover,.pop-card:focus,.pop-card:focus-within{
  transform:translateY(-6px) scale(1.03); box-shadow:0 16px 38px rgba(11,59,92,.18); outline:none
}

.input, select, textarea{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff }
.form .grid{ display:grid; gap:12px }
.form .grid.grid-2{ grid-template-columns:1fr 1fr }

.cta{
  display:inline-block; border-radius:9px; padding:12px 26px; font-weight:700;
  background:var(--accent); color:var(--primary); border:none; cursor:pointer;
  box-shadow:0 2px 10px rgba(11,59,92,.06); text-decoration:none
}
.cta.secondary{ background:var(--secondary); color:#fff }

/* Footer */
.site-footer{ background:#0C1726; color:#D8DFEA }
.site-footer a{ color:#D8DFEA }
.site-footer a:hover{ text-decoration:underline }

.footer-wrap{ padding:28px 0 }
.footer-top{ display:grid; gap:18px; grid-template-columns:1.4fr 1fr 1fr 1fr }

.footer-brand{ display:flex; flex-direction:column; align-items:center; text-align:center }
.footer-logo{ height:132px; width:auto; display:block; margin:0 auto 8px } /* ~3× of original 44px */
.footer-brand .tagline{ color:#AFC2DC; margin-top:6px; font-weight:700 }

.footer-col strong{ display:block; margin-bottom:8px; color:#fff }
.footer-col ul{ list-style:none; margin:0; padding:0 }
.footer-col li{ padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); white-space:normal; line-height:1.5; word-break:break-word }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:18px; padding-top:12px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; font-size:.95rem
}

/* Toast */
.toast{
  position:fixed; z-index:3000; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0A2F4F; color:#fff; padding:12px 16px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15); display:none
}
.toast.show{ display:block; animation:fadeInOut 3.2s ease both }
@keyframes fadeInOut{
  0%{opacity:0;transform:translate(-50%,8px)} 10%{opacity:1;transform:translate(-50%,0)}
  90%{opacity:1} 100%{opacity:0;transform:translate(-50%,8px)}
}

/* Accessibility */
:focus{ outline:3px solid #E09A00; outline-offset:2px }

/* ---------- Tri-logo background (consistent on all pages) ---------- */
@keyframes bodyLogoFloatL{ 0%{transform:translate3d(0,0,0) rotate(-2deg)} 50%{transform:translate3d(0,-10px,0) rotate(2deg)} 100%{transform:translate3d(0,0,0) rotate(-2deg)} }
@keyframes bodyLogoFloatR{ 0%{transform:translate3d(0,0,0) rotate(2deg)} 50%{transform:translate3d(0,8px,0) rotate(-2deg)} 100%{transform:translate3d(0,0,0) rotate(2deg)} }

/* Global side marks */
body::before,
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-repeat:no-repeat; opacity:.22; background-image:url("assets/logo.png");
}

/* Move side logos inward ~2 inches (≈192px) */
body::before{
  background-position:left 2in center;
  background-size:var(--logo-base);
  animation:bodyLogoFloatL 22s ease-in-out infinite;
}
body::after{
  background-position:right 2in center;
  background-size:var(--logo-base);
  animation:bodyLogoFloatR 22s ease-in-out infinite;
}

/* Center, static mark (3×) */
.bg-center-logo::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("assets/logo.png"); background-repeat:no-repeat; background-position:center center;
  background-size:var(--logo-center); opacity:.30;
}

/* Keep all content above background marks */
nav, main, footer, .container, section, .hero, .modal{ position:relative; z-index:1 }

/* Hide side marks on small screens (keep center mark only) */
@media (max-width:820px){
  body::before, body::after{ display:none }
}

/* Responsive tweaks */
@media (max-width:900px){ .links{ flex-wrap:wrap; gap:8px } .grid-3{ grid-template-columns:1fr } }
@media (max-width:780px){
  .form .grid.grid-2{ grid-template-columns:1fr }
  .cta{ min-height:44px }
  .brand .logo{ height:60px }
}
@media (max-width:640px){
  .hero{ padding:64px 0 }
  .input, select, textarea{ padding:14px 16px }
  .grid.grid-2, .grid.grid-3{ grid-template-columns:1fr }
  .actions a, .actions button{ min-height:48px }
}



/* === Quick tweaks: bigger hamburger + darker watermarks (2025-10-14) === */

/* Hamburger bump (mobile) */
@media (max-width: 991.98px) {
  .nav-toggle { width: 64px; height: 64px; }
  .nav-toggle .hamburger,
  .nav-toggle .hamburger::before,
  .nav-toggle .hamburger::after { width: 36px; height: 4px; }
}

/* Darker watermarks */
@media (max-width: 991.98px) {
  body::before { opacity: 0.10 !important; } /* center mark on mobile */
}
@media (min-width: 992px) {
  body::before { opacity: 0.12 !important; } /* center mark on desktop */
  html::before,
  html::after  { opacity: 0.10 !important; } /* animated side marks */
}


/* FAQ cards – light surface with high readability */
.faq-card{
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
.faq-card[aria-expanded="true"]{
  background: #F9FBFF;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}
.faq-card .faq-q    { color: #0A1222; }
.faq-card .faq-brief{ color: #1c2a3a; }
.faq-card .faq-more { color: #203246; }
@media (prefers-color-scheme: dark){
  .faq-card{
    background: #1a222d;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 10px 22px rgba(0,0,0,0.6);
  }
  .faq-card[aria-expanded="true"]{ background: #202b39; }
  .faq-card .faq-q{ color: #f3f6fa; }
  .faq-card .faq-brief{ color: #d8e1ec; }
  .faq-card .faq-more{ color: #c9d5e4; }
}


/* Footer – fully opaque for maximum readability */
footer, .footer{
  background: #FFFFFF;
  color: #0A1222;
  box-shadow: 0 -8px 20px rgba(0,0,0,.10);
  backdrop-filter: none;
}
@media (prefers-color-scheme: dark){
  footer, .footer{
    background: #11161d;
    color: #eaf0f7;
    box-shadow: 0 -8px 20px rgba(0,0,0,.60);
  }
}



/* === Form fields: strong contrast for readability === */
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], textarea, select{
  background: #ffffff;
  color: #0A1222;
  border: 1.5px solid #9bb0c6;   /* visible border */
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.input::placeholder, input::placeholder, textarea::placeholder{ color:#6b7a8a; opacity:.9 }
input:focus, textarea:focus, select:focus, .input:focus{
  outline: 2px solid #2b6cb0;     /* blue focus ring */
  outline-offset: 2px;
  border-color: #2b6cb0;
  box-shadow: 0 0 0 3px rgba(43,108,176,.15);
}
@media (prefers-color-scheme: dark){
  .input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], textarea, select{
    background:#1c2632;
    color:#eaf0f7;
    border-color:#3b4a5c;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  }
  .input::placeholder, input::placeholder, textarea::placeholder{ color:#9fb0c4; opacity:.9 }
  input:focus, textarea:focus, select:focus, .input:focus{
    outline:2px solid #63b3ed; border-color:#63b3ed; box-shadow:0 0 0 3px rgba(99,179,237,.20);
  }
}



/* === Form fields: lighter variant (3 shades lighter) === */
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], textarea, select{
  background: #FAFCFF;          /* lighter than #fff visually on many screens */
  color: #0A1222;
  border: 1.5px solid #C7D6E6;   /* lighter border */
  box-shadow: inset 0 1px 1px rgba(0,0,0,.03);
}
.input::placeholder, input::placeholder, textarea::placeholder{ color:#8aa0b5; opacity:.9 }
input:focus, textarea:focus, select:focus, .input:focus{
  outline: 2px solid #4C89C7;
  border-color: #4C89C7;
  box-shadow: 0 0 0 3px rgba(76,137,199,.16);
}
@media (prefers-color-scheme: dark){
  .input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], textarea, select{
    background:#18202B;          /* lighter relative to prior dark value */
    color:#EAF0F7;
    border-color:#2F3D50;
  }
  .input::placeholder, input::placeholder, textarea::placeholder{ color:#9fb0c4; opacity:.9 }
  input:focus, textarea:focus, select:focus, .input:focus{
    outline:2px solid #7ec3ff; border-color:#7ec3ff; box-shadow:0 0 0 3px rgba(126,195,255,.20);
  }
}


/* === Header search button theme match === */
#siteSearch button{
  background: var(--accent);
  color: #0A1222;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
#siteSearch button:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
@media (prefers-color-scheme: dark){
  #siteSearch button{
    color: #0a0f16;
    border-color: color-mix(in srgb, var(--accent) 60%, #fff);
  }
}



/* ===== Visual Tweaks (Polish Pack v1) ===================================== */

/* 1) Global type — a touch more readable */
html { font-size: 17px; line-height: 1.55; }          /* was likely ~16px */
@media (max-width: 480px){ html{ font-size: 16px; } } /* keep small screens comfy */

/* 2) CTA buttons — modern pill look */
a.cta, .cta, button.cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  background: var(--accent);
  color: #0A1222;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
a.cta:hover, .cta:hover, button.cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
a.cta:active, .cta:active, button.cta:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
a.cta:focus-visible, .cta:focus-visible, button.cta:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, #fff);
  outline-offset: 2px;
}

/* 3) Header search — compact themed button */
#siteSearch input[type="search"]{
  border-radius: 12px; padding: 8px 10px;
  border: 1px solid var(--border);
  background: #fff;
}
#siteSearch button{
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #0A1222;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
#siteSearch button:hover{ transform: translateY(-1px); filter:brightness(1.05); }
#siteSearch button:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 30%, #fff); outline-offset:2px; }

/* 4) Forms — roomier, lighter, clearer */
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], textarea, select{
  padding: 12px 14px; font-size: 1rem; border-radius: 12px;
  background: #FAFCFF; border: 1.5px solid #C7D6E6; color:#0A1222;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.03);
}
.form .grid > div { margin-bottom: 10px; }
label{ font-weight: 700; display:inline-block; margin-bottom:6px; }
input:focus, textarea:focus, select:focus, .input:focus{
  outline: 2px solid #4C89C7; border-color:#4C89C7; box-shadow: 0 0 0 3px rgba(76,137,199,.16);
}
@media (prefers-color-scheme: dark){
  .input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], textarea, select{
    background:#18202B; border-color:#2F3D50; color:#EAF0F7;
  }
}

/* 5) FAQ cards — consistent spacing & subtle hover lift */
.faq-card{
  border-radius: 16px;
  margin-bottom: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.faq-card:hover, .faq-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

/* 6) Footer — spacing, link contrast */
footer .container, .footer .container{ padding-top: 18px; padding-bottom: 18px; }
footer a, .footer a{ color: color-mix(in srgb, var(--secondary) 70%, #000); font-weight: 700; }
footer a:hover{ text-decoration: underline; }




/* ===== Header & Mobile Simplification (v2) ================================ */

/* Keep header CTA as a pill and prevent wrapping */
.nav .links .cta, .nav .cta{
  white-space: nowrap;
  padding: 10px 16px;   /* compact so it doesn't force line breaks */
  line-height: 1.1;
}

/* Remove background from tagline under logo */
.brand .tag-mini{
  background: none !important;
  padding: 0 !important;
  font-weight: 700;
  white-space: nowrap;
}

/* Mobile simplification while keeping brand theme */
@media (max-width: 768px){
  /* Hide tagline and search bar for a cleaner header */
  .brand .tag-mini{ display:none; }
  #siteSearch{ display:none; }
  
  /* Ensure CTA remains visible and pill-shaped */
  .nav .links .cta{
    padding: 10px 16px;
    white-space: nowrap;
  }

  /* Larger tap targets in the primary links */
  .links a{ padding: 12px 14px; border-radius: 12px; }

  /* Grids collapse to single column for readability */
  .grid-3, .grid.grid-3{ grid-template-columns: 1fr !important; }
  .grid-2, .grid.grid-2{ grid-template-columns: 1fr !important; }

  /* Reduce motion/hover effects on touch */
  .pop-card:hover, .pop-card:focus-within{ transform:none; box-shadow: var(--shadow); }

  /* Forms: full-width fields */
  .form .grid > div{ width: 100% !important; }
}

/* Slightly larger header brand area to avoid cramped layout */
.nav .inner{ gap: 10px; }

/* === Mobile Search Toggle (icon + reveal) === */
.search-toggle{
  display:none;
  align-items:center; justify-content:center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  margin-left:auto; margin-right:8px;
}
.search-toggle svg{ display:block; fill: var(--text); }

@media (max-width: 768px){
  .search-toggle{ display:inline-flex; }
  /* collapsed by default on mobile */
  #siteSearch{ display:none; }
  /* expanded when toggled */
  #siteSearch.open{ display:flex; }
  #siteSearch.open input[type="search"]{ flex: 1 1 auto; }
}



/* ===== Header Brand & Home visibility fixes (v3) ===== */
.nav{ position:relative; z-index:1000; }
.nav .inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.logo-link{ display:inline-flex; align-items:center; }
.brand .logo{ display:block; height:56px; width:auto; max-width:160px; object-fit:contain; }

.links{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
.links a{ white-space:nowrap; }

#siteSearch{ margin-left:auto; }

/* Keep CTA pill shape and avoid wrapping to a new row */
.nav .links .cta{ white-space:nowrap; padding:10px 16px; line-height:1.1; }

/* Tagline without background */
.brand .tag-mini{ background:none !important; padding:0 !important; white-space:nowrap; }

/* Mobile: ensure brand (logo) and CTA stay visible; Home remains first item */
@media (max-width: 768px){
  .brand .logo{ height:48px; }
  .links{ gap:10px; }
}