:root{
  --bg:#ffffff;
  --text:#0b0d10;
  --muted:#5b6470;
  --line:#e7e9ee;
  --card:#f7f8fa;
  --btn:#0b0d10;
  --btnText:#ffffff;
  --max:1100px;
  --r:14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
}

a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* HEADER */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;
}
.links{display:flex; gap:18px; align-items:center; font-size:14px}
.links a{text-decoration:none; color:var(--muted)}
.links a:hover{color:var(--text)}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:var(--btn);
  color:var(--btnText);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  border:1px solid var(--btn);
  white-space:nowrap;
}
.btn.secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
}

.btnRow{display:flex; gap:10px; flex-wrap:wrap}

/* Mobile menu */
.menuBtn{
  display:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}
.mobileNav{
  display:none;
  border-top:1px solid var(--line);
  padding:10px 0 14px;
}
.mobileNav a{
  display:block;
  padding:10px 0;
  text-decoration:none;
  color:var(--text);
}
.mobileNav a + a{ border-top:1px solid var(--line); }

/* HERO (graphic wave background) */
.hero{
  position:relative;
  overflow:hidden;
  padding:56px 0 90px;
  background:
    radial-gradient(900px 420px at 75% 10%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, rgba(11,13,16,.04), rgba(11,13,16,0));
}

/* IMPORTANT: wave BEHIND content */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-80px;
  height:260px;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
  opacity:.70;
  pointer-events:none;
  z-index:0; /* behind */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23e7f2ff' d='M0,224L60,218.7C120,213,240,203,360,192C480,181,600,171,720,176C840,181,960,203,1080,202.7C1200,203,1320,181,1380,170.7L1440,160L1440,320L0,320Z'/%3E%3Cpath fill='%23d6ecff' fill-opacity='.75' d='M0,256L60,240C120,224,240,192,360,176C480,160,600,160,720,165.3C840,171,960,181,1080,186.7C1200,192,1320,192,1380,192L1440,192L1440,320L0,320Z'/%3E%3Cpath fill='%23c5e4ff' fill-opacity='.55' d='M0,288L60,272C120,256,240,224,360,213.3C480,203,600,213,720,224C840,235,960,245,1080,240C1200,235,1320,213,1380,202.7L1440,192L1440,320L0,320Z'/%3E%3C/svg%3E");
}

/* Content above wave */
.hero .wrap{ position:relative; z-index:2; }

.heroGrid{
  display:grid;
  grid-template-columns: 1fr; /* default for single-column pages */
  gap:28px;
  align-items:center;
}

/* Only home page uses this */
.heroGrid.twoCol{
  grid-template-columns: 1.2fr .8fr;
}

.heroCard{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #fafbfc);
  border-radius:var(--r);
  padding:18px;
}
.heroCard strong{display:block; margin-bottom:8px}
.heroCard p{margin:0; color:var(--muted); font-size:14px}

.kicker{color:var(--muted); font-size:13px; letter-spacing:.12em; text-transform:uppercase}
h1{margin:10px 0 12px; font-size:40px; line-height:1.08}
.lead{margin:0 0 18px; color:var(--muted); font-size:16px}

.note{margin:14px 0 0; color:var(--muted); font-size:14px}

.pillRow{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 22px}
.pill{
  font-size:12px;
  color:var(--muted);
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}

/* CONTENT */
.section{padding:34px 0}

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

h2{margin:0; font-size:24px}
.sub{margin:0; color:var(--muted); font-size:14px}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--r);
  padding:18px;
  min-height:160px;
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}

.bullets{margin:10px 0 0; padding-left:18px}
.bullets li{margin:0 0 6px}

/* CTA band */
.ctaBand{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  padding:22px 0;
}
.ctaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.ctaRow .left{ max-width:720px; }

/* Footer grid */
.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}

.fine{font-size:12px; color:#7b8593}

footer{
  padding:30px 0;
  font-size:14px;
  color:var(--muted);
  border-top:1px solid var(--line);
}

/* Responsive */


/* --- Visual upgrades (imagery + form) --- */
.heroPhoto{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:calc(var(--r) - 6px);
  border:1px solid var(--line);
  margin:0 0 12px;
}

.mediaCard{padding:0; overflow:hidden}
.mediaCard > h3, .mediaCard > p, .mediaCard > .fine{padding:0 18px}
.mediaCard > h3{margin-top:14px}
.mediaCard > p{padding-bottom:18px}

.cardPhoto{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--line);
}

.contactGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.stack{display:grid; gap:14px}

.contactForm{margin-top:14px}
.field{margin-bottom:12px}
.fieldRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.label{display:block; font-size:13px; color:var(--muted); margin:0 0 6px}
.input, .textarea, .select{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 12px;
  font:inherit;
  background:#fff;
}
.textarea{resize:vertical; min-height:110px}

@media (max-width:900px){
  h1{font-size:34px}
  .links{display:none}
  .menuBtn{display:inline-flex; align-items:center; justify-content:center;}
  .heroGrid.twoCol{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr; }
  .footerGrid{ grid-template-columns:1fr; }
  .heroPhoto{height:200px}
  .contactGrid{grid-template-columns:1fr}
  .fieldRow{grid-template-columns:1fr}
  .cardPhoto{height:170px}

}

@media (min-width: 901px){
  .links{ display:flex; }
  .menuBtn{ display:none; }
  .mobileNav{ display:none !important; }
}