:root{
  --cr-primary:#001F3F; --cr-primary-700:#0B4B58; --cr-accent:#FFC857;
  --cr-bg:#F7FAFC; --cr-text:#1A202C; --cr-muted:#4A5568;
  --cr-card:#FFFFFF; --cr-border:#E2E8F0; --cr-radius:16px; --cr-shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;line-height:1.6;background:var(--cr-bg);color:var(--cr-text)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--cr-border);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

/* Adjust header spacing */
.header-inner {
  padding-left: 1rem;   /* space on the left (logo side) */
  padding-right: 1rem;  /* space on the right (button side) */
}

/* Optional fine-tuning for larger screens */
@media (min-width: 768px) {
  .header-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Ensure button doesn't touch edges */
.header .btn {
  margin-right: 0.5rem;  /* small gap between button and browser edge */
}

/* (Optional) add a little gap around the logo */
.logo {
  margin-left: 0.25rem;  /* tweak as needed */
}


.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.logo .mark{background:var(--cr-primary);color:#fff;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.logo img {
  height: 80px;
  width: auto;
  vertical-align: middle;
}

.nav a{margin:0 10px;padding:8px 10px;border-radius:10px;color:var(--cr-text);text-decoration:none}
.nav a:hover{background:var(--cr-bg)}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:600;border:1px solid transparent;box-shadow:var(--cr-shadow)}
.btn-primary{background:var(--cr-primary);color:#fff}
.btn-outline{background:#fff;border-color:var(--cr-primary);color:var(--cr-primary)}
.hero{padding:72px 0;background:linear-gradient(180deg,#ffffff, #f4f9fb)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.kicker{color:var(--cr-primary);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
h1{font-size:44px;line-height:1.15;margin:.2em 0}
.lead{font-size:18px;color:var(--cr-muted);max-width:680px}
.card{background:var(--cr-card);padding:20px;border-radius:var(--cr-radius);border:1px solid var(--cr-border);box-shadow:var(--cr-shadow)}
.hero-form h3{margin:0 0 8px}
.row{margin:10px 0}
label{display:block;font-weight:600;margin:8px 0 6px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--cr-border);border-radius:12px;background:#fff}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.badge{background:#fff;border:1px solid var(--cr-border);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--cr-muted)}
.section{padding:64px 0}
.section h2{font-size:32px;margin:0 0 16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative}
.footer{padding:30px 0;border-top:1px solid var(--cr-border);background:#fff;color:var(--cr-muted)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.legal{font-size:13px;color:var(--cr-muted)}
.help{font-size:13px;color:var(--cr-muted);margin-top:8px}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* --- Hamburger base --- */
.menu-toggle {
  display: none;             /* hidden on desktop */
  background: transparent;
  border: 0;
  padding: 0.5rem;
  margin-left: 0.25rem;      /* breathing room by the logo */
  cursor: pointer;
  line-height: 1;
}

.menu-box {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
}

.menu-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  background: currentColor;
}
.menu-line:nth-child(1) { top: 0; }
.menu-line:nth-child(2) { top: 8px; }
.menu-line:nth-child(3) { top: 16px; }

/* Animate to X when open */
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Mobile nav behavior --- */
@media (max-width: 768px) {
  .header-inner { position: relative; }

  /* Show hamburger on mobile */
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Collapse nav by default on small screens */
  .nav[data-collapsible] {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff; /* change if your header is dark */
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    padding: 0.5rem;
    z-index: 9999;
    min-width: 220px;
  }
  .nav[data-collapsible] a {
    padding: 0.5rem 0.75rem;
    display: block;
    white-space: nowrap;
  }
  .nav[data-collapsible].open { display: flex; }

  /* Keep CTA off the right edge */
  .header .btn { margin-right: 0.5rem; }
}

/* --- Desktop keeps your current layout --- */
@media (min-width: 769px) {
  .nav[data-collapsible] {
    position: static;
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
}