/* Color palette */
:root {
  --navy: #0E122B;          /* Deep navy blue */
  --lavender: #D7C5E0;      /* Soft lavender purple */
  --light-blue: #6BAFD2;    /* Light blue */
  --ink: #E6EAF7;           /* light text on dark */
  --muted: #A1A8C6;
  --white: #ffffff;
  --tan: #EDE5D8;           /* gentle tan accent */
  --gradient: linear-gradient(135deg, var(--lavender), var(--light-blue));
  --surface: color-mix(in oklab, var(--lavender) 12%, transparent);
  --surface-border: color-mix(in oklab, var(--lavender) 22%, transparent);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--navy);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

html { scroll-behavior: smooth; }

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--navy) 85%, transparent);
  border-bottom: 1px solid rgba(215,197,224,.12);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  z-index: 10;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: .2px; }
.brand .logo { display: inline-grid; place-items: center; }
.brand .wordmark { font-size: 1.05rem; }

.nav { display: flex; gap: clamp(14px, 3vw, 28px); align-items: center; }
.nav a { color: var(--ink); text-decoration: none; opacity: .9; font-weight: 600; position: relative; }
.nav a:hover { opacity: 1; }
.nav a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lavender), var(--light-blue), transparent);
  transform: scaleX(0);
  transform-origin: 50% 100%;
  transition: transform .25s ease;
}
.nav a:not(.cta):hover::after { transform: scaleX(1); }
.nav .cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gradient);
  color: #0f1330;
  box-shadow: 0 6px 22px rgba(107,175,210,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav .cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(107,175,210,.28); }
.nav .cta:focus-visible { outline: 3px solid color-mix(in oklab, var(--lavender) 65%, var(--light-blue) 35%); outline-offset: 3px; }

/* Hero */
.hero {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 100px);
  overflow: hidden;
}
.hero-inner { text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 0 0 12px; letter-spacing: .3px; 
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.lead { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--muted); max-width: 800px; margin: 0 auto; }

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  background: radial-gradient(60% 70% at 20% 30%, color-mix(in oklab, var(--lavender) 35%, transparent) 0%, transparent 60%),
              radial-gradient(55% 60% at 80% 20%, color-mix(in oklab, var(--light-blue) 35%, transparent) 0%, transparent 60%);
  filter: blur(40px) saturate(130%);
  opacity: .28;
  pointer-events: none;
}
.hero::after {
  inset: auto -20% -30% -20%; height: 70%; opacity: .22;
  background: radial-gradient(65% 65% at 50% 50%, color-mix(in oklab, var(--lavender) 25%, transparent) 0%, transparent 70%);
}


/* Sections */
.section { padding: clamp(40px, 7vw, 84px) 0; }
.section h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: 0; letter-spacing: .2px; }
.section p { color: var(--ink); opacity: .9; }

/* Soft panel to balance color usage */
.panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 24px);
  box-shadow: 0 10px 30px rgba(12, 16, 40, .35), inset 0 1px 0 rgba(255,255,255,.04);
}

.two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: min(6vw, 42px); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* Pill list removed for simplicity */

/* Process section removed for simplicity */

/* Contact */
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: min(6vw, 42px); align-items: start; }
@media (max-width: 860px) { .contact-inner { grid-template-columns: 1fr; } }

.contact-form { display: grid; gap: 14px; background: color-mix(in oklab, var(--navy) 78%, var(--lavender) 8%); border: 1px solid color-mix(in oklab, var(--lavender) 20%, transparent); border-radius: 16px; padding: 18px; color: var(--ink); box-shadow: 0 10px 30px rgba(12,16,40,.25); }
.contact-form label { display: grid; gap: 8px; font-weight: 700; color: var(--ink); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--lavender) 25%, transparent);
  background: color-mix(in oklab, var(--navy) 70%, var(--lavender) 8%);
  color: var(--ink);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid color-mix(in oklab, var(--lavender) 60%, var(--light-blue) 40%); border-color: transparent; }
.contact-form button {
  justify-self: start;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  color: #0f1330;
  cursor: pointer;
  background: var(--gradient);
  box-shadow: 0 8px 30px rgba(107,175,210,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.contact-form button:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(107,175,210,.3); }
.contact-form button:focus-visible { outline: 3px solid color-mix(in oklab, var(--lavender) 65%, var(--light-blue) 35%); outline-offset: 3px; }
.contact-form .contact-note { margin: 0; font-size: .95rem; color: var(--muted); }
.contact-form .contact-note a { color: var(--ink); text-decoration-color: color-mix(in oklab, var(--lavender) 60%, var(--light-blue) 40%); }

/* Footer */
.site-footer { border-top: 1px solid rgba(215,197,224,.12); position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lavender), var(--light-blue), transparent);
}
.footer-inner { padding: 20px 0; text-align: center; color: var(--muted); font-size: .95rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stars { animation: none; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-offset: 3px;
}

.section h2 { position: relative; padding-bottom: 8px; }
.section h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 64px; border-radius: 3px;
  background: linear-gradient(90deg, var(--lavender), var(--light-blue));
  box-shadow: 0 4px 18px rgba(107,175,210,.35);
}
.panel blockquote {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid color-mix(in oklab, var(--lavender) 70%, var(--light-blue) 30%);
  color: var(--ink);
  opacity: .85;
  background: color-mix(in oklab, var(--lavender) 6%, transparent);
  border-radius: 8px;
}

.panel ol { margin: 8px 0 0; padding-left: 1.2em; }
.panel ol li { margin: 6px 0; color: var(--ink); opacity: .9; }
.panel ol li::marker { color: color-mix(in oklab, var(--lavender) 40%, var(--light-blue) 60%); font-weight: 700; }
/* Lavender accents: links, selection, scrollbars, subtle hero glow */
.panel a {
  color: var(--lavender);
  text-decoration-color: color-mix(in oklab, var(--lavender) 65%, transparent);
}
.panel a:hover,
.panel a:focus-visible {
  text-decoration-color: var(--lavender);
}

::selection { background: color-mix(in oklab, var(--lavender) 42%, transparent); color: #0f1330; }
::-moz-selection { background: color-mix(in oklab, var(--lavender) 42%, transparent); color: #0f1330; }

/* Subtle, tasteful scrollbar accent where supported */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--lavender) 50%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--lavender) 65%, transparent); }

.hero h1 { filter: drop-shadow(0 6px 24px rgba(215,197,224,.12)); }
.nav .cta:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--lavender) 90%, var(--light-blue) 10%), var(--lavender));
  box-shadow: 0 12px 36px rgba(215,197,224,.30);
  transform: translateY(-1px);
}
.contact-form button:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--lavender) 90%, var(--light-blue) 10%), var(--lavender));
  box-shadow: 0 12px 36px rgba(215,197,224,.32);
  transform: translateY(-1px);
}