:root {
  --green: #446F44;
  --orange: #DA7B2D;
  --tangerine: #F29F3C;
  --teal: #0E6A7A;
  --aqua: #1BA7B4;
  --red: #C7432C;
  --navy: #0C3C58;
  --cream: #FFF6EA;
  --ink: #0C1B1F;
  --topbar-h: clamp(56px, 7vh, 72px);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
}

.container { width: min(1200px, 92vw); margin-inline: auto; }
.stack { display: grid; gap: 1rem; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, white 75%, var(--cream));
  border-bottom: 1px solid color-mix(in oklab, var(--navy) 15%, white);
}
.topbar-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: .5rem 0; 
  min-height: var(--topbar-h); 
}
.brand { 
  display: flex; 
  align-items: center; 
  gap: .75rem; 
  flex: 1;
  min-width: 0;
}
.brand-title { 
  font-weight: 800; 
  letter-spacing: .2px; 
  color: var(--navy); 
}
.brand-sub { 
  display: block; 
  font-weight: 600; 
  font-size: .75rem;
  color: color-mix(in oklab, var(--navy), black 15%); 
  line-height: 1.3;
  max-width: 320px;
}

nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
nav a { text-decoration:none; color: var(--navy); font-weight:600; padding:.5rem .75rem; border-radius:.75rem; }
nav a:hover { background: color-mix(in oklab, var(--aqua) 10%, white); }

.cta { background: linear-gradient(135deg, var(--orange), var(--red)); color:white; font-weight:800; padding:.65rem 1rem; border:none; border-radius:999px; cursor:pointer; box-shadow:0 6px 14px color-mix(in oklab, var(--red) 22%, transparent); text-decoration: none; display: inline-block; }
.cta:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

.menu-toggle { display:none; background: none; border:1px solid color-mix(in oklab, var(--navy) 15%, white); border-radius:.6rem; padding:.4rem .6rem; }
.menu-toggle span { display:block; width:22px; height:2px; background:var(--navy); margin:.25rem 0; }
.menu { display:flex; align-items:center; gap:1rem; }

@media (max-width: 880px){
  .menu-toggle { display:block; }
  .menu { display:none; position:absolute; top:100%; right:1rem; background:white; border:1px solid color-mix(in oklab, var(--navy) 15%, white); border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.12); padding: .5rem; }
  .menu.open { display:block; }
  nav ul { flex-direction:column; align-items:flex-start; }
  nav a { width:100%; border-radius:.5rem; }
}

.hero { position:relative; isolation:isolate; padding: 1.25rem 0; min-height: calc(100vh - var(--topbar-h)); display:flex; align-items:center; }
.hero .grid { display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); align-items:center; }
.hero-img-wrap { 
  position:relative; 
  border-radius:1.25rem; 
  overflow:hidden; 
  box-shadow: 0 20px 40px rgba(12,60,88,.25); 
  border: 8px solid white; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  aspect-ratio: 2/3;
  width: auto;
  height: min(78vh, calc(100vh - var(--topbar-h) - 3rem));
}
.hero-img { 
  width: 100%; 
  height: 100%; 
  display:block; 
  object-fit: cover;
}
.ribbons { position:absolute; inset:auto 0 -2.75rem 0; height: 6px; background: linear-gradient(90deg, var(--orange), var(--aqua), var(--teal), var(--red)); filter: saturate(115%); }

.kicker { 
  color: var(--navy); 
  font-weight:800; 
  text-transform:uppercase; 
  letter-spacing:.12em; 
  font-size:.78rem; 
}
.headline { font-size: clamp(1.9rem, 1.6rem + 2.2vw, 3rem); line-height:1.1; margin:.35rem 0 .75rem; font-weight:800; color: var(--navy); }
.subtext { font-size: clamp(1rem, .9rem + .3vw, 1.15rem); color: color-mix(in oklab, var(--navy), black 25%); }
.hero-ctas { display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1rem; }

@media (max-width: 980px){ 
  .hero .grid{ grid-template-columns: 1fr; } 
  .hero-img-wrap{ height: min(60vh, calc(100vh - var(--topbar-h) - 3rem)); } 
}

body.immersive {
  background:
    conic-gradient(from 40deg at 85% 10%, var(--tangerine), var(--orange) 35%, var(--red) 55%, var(--teal) 80%, var(--navy)),
    linear-gradient(160deg, var(--cream), var(--cream));
  background-blend-mode: multiply, normal;
  color: white;
}
body.immersive .topbar { background: color-mix(in oklab, var(--navy) 12%, white 70%); }
body.immersive .brand-title, body.immersive nav a { color: var(--ink); }
body.immersive .hero .headline { color: white; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
body.immersive .subtext { color: #f2f7f8; }

.info-cards { 
  background: white; 
  border-top: 1px solid color-mix(in oklab, var(--navy) 10%, white); 
  border-bottom: 1px solid color-mix(in oklab, var(--navy) 10%, white); 
  padding: 2rem 0;
}

.cards-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 1.5rem; 
}

.info-card { 
  display: flex; 
  gap: 1rem; 
  align-items: flex-start; 
  padding: 1.25rem; 
  border-radius: 1rem; 
  background: linear-gradient(135deg, 
    color-mix(in oklab, var(--aqua) 6%, white), 
    color-mix(in oklab, var(--teal) 4%, white)
  );
  border: 1px solid color-mix(in oklab, var(--aqua) 15%, white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--aqua) 12%, transparent);
}

.info-icon { 
  flex-shrink: 0;
  width: 48px; 
  height: 48px; 
  border-radius: 12px; 
  background: white;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--teal);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--teal) 15%, transparent);
}

.info-label { 
  font-size: 0.8rem; 
  font-weight: 800; 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  color: var(--teal); 
  margin-bottom: 0.25rem;
}

.info-value { 
  font-size: 1rem; 
  font-weight: 600; 
  color: var(--navy); 
  line-height: 1.4;
}

@media (max-width: 720px) { 
  .cards-grid { 
    grid-template-columns: 1fr; 
  }
}

footer { color: color-mix(in oklab, var(--navy), black 30%); font-size: .9rem; padding: 2rem 0 3rem; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* --- Legal pages --- */
.legal-page {
  max-width: 1000px;
  margin-inline: auto;
}

.page-updated {
  color: color-mix(in oklab, var(--navy), black 40%);
  font-size: 0.95rem;
  margin: 0;
}

.legal-content {
  max-width: 900px;
  margin-inline: auto;
}

.legal-intro {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid color-mix(in oklab, var(--navy) 10%, white);
}

.legal-toc {
  background: color-mix(in oklab, var(--aqua) 5%, white);
  border-left: 4px solid var(--teal);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin: 2rem 0 3rem;
}

.legal-toc h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 1rem;
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.8;
}

.legal-toc li {
  margin-bottom: 0.5rem;
}

.legal-toc a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
}

.legal-toc a:hover {
  color: var(--teal);
  text-decoration: underline;
}

.legal-content section {
  margin-bottom: 3rem;
}

.legal-content h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  margin: 2.5rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--navy) 10%, white);
}

.legal-content h2:first-of-type {
  border-top: none;
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.5rem 0 0.75rem;
}

.legal-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.25rem 0 0.5rem;
}

.legal-content h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal);
  margin: 1rem 0 0.5rem;
}

.legal-content p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
  line-height: 1.7;
  margin: 1rem 0;
  padding-left: 1.75rem;
}

.legal-content li {
  margin-bottom: 0.75rem;
}

.legal-content a {
  color: var(--teal);
  font-weight: 600;
}

.legal-content a:hover {
  color: var(--aqua);
}

.callout {
  background: color-mix(in oklab, var(--tangerine) 8%, white);
  border-left: 4px solid var(--orange);
  padding: 1.25rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.callout strong {
  color: var(--navy);
}

.legal-content code {
  background: color-mix(in oklab, var(--navy) 8%, white);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.9em;
  color: var(--navy);
}