:root{
  /* Brand */
  --teal:#147DA0;
  --teal2:#68b6d0;
  --teal3:#227d9c;
  --tealbg:#C7DFF3;

  /* Text */
  --text: #0F172A;
  --muted: #64748B;

  /* Page surfaces */
  --page-bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;

  /* Radius & shadows */
  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 26px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 46px rgba(15, 23, 42, 0.14);

  /* Focus ring */
  --focus: 0 0 0 4px rgba(20, 184, 166, 0.25);

  --border:#e5e7eb;
  --soft:#f8fafc;

  --card-bg: #ffffff;
  --card-grad-start: #C7DFF3;
  --card-grad-end: #f8fafc;

  --card-border: rgba(15, 23, 42, 0.08);
  --card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --card-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.12);
  --radius: 12px;
}

*{box-sizing:border-box}

nav {color: var(--teal); font-weight: bold; text-decoration: underline;}

body{margin:0;font-family:"Inter", sans-serif;color:var(--text);line-height:1.6;background:#fff}
h1, h2, h3 {
  --heading-ink-start: #0b1220;
  --heading-ink-start-light: #7288b5;
  --heading-ink-end: var(--teal2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}
h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1rem;
  background: linear-gradient(90deg, var(--heading-ink-start), var(--heading-ink-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2.light {
  margin: 0 0 0.75rem;
  background: linear-gradient(90deg, var(--heading-ink-start-light), var(--heading-ink-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 0 0 0.75rem;
  background: linear-gradient(90deg, var(--heading-ink-start), var(--heading-ink-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a{color:inherit}
a.sub-nav{color:var(--teal);}

strong{color:var(--teal)}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.container.sub-nav{align:center}

.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.logo{font-weight:700;letter-spacing:0.2px; padding: .75rem 1.5rem;}
.padder{font-weight:700;letter-spacing:0.2px; padding: .75rem .5rem;}
nav a{margin-left:1rem;text-decoration:none;opacity:0.9}
nav a:hover{opacity:1}
.link{text-decoration:none;border-bottom:1px solid rgba(14,116,144,.25)}
.link:hover{border-bottom-color:rgba(14,116,144,.6)}

.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-logo { height: 70px; width:auto; display:block; }

.hero{padding:3.5rem 0}
.hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 1rem;max-width:28ch}
.lede{font-size:1.1rem;color:var(--muted);max-width:80ch}
.small{font-size:.9rem}
.muted{color:var(--muted)}

.actions{margin:1.4rem 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

.section{padding:3rem 0}
.section.soft{background:var(--soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section h2{margin:0 0 .75rem}

.grid-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* buttons */

.btn,
a.btn,
.cta,
button.cta {
  /* defaults */
  --btn-bg-start: var(--teal);
  --btn-bg-end: var(--teal2);
  --btn-text: #ffffff;
  --btn-border: #ffffff2e;
  --btn-shadow: var(--shadow-sm);
  --btn-shadow-hover: var(--shadow-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.65rem 0.95rem;
  border-radius: calc(var(--radius) - 2px);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.1px;

  color: var(--btn-text);
  background: linear-gradient(230deg, var(--btn-bg-start), var(--btn-bg-end));
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);

  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.btn:hover,
.cta:hover,
button.cta:hover {
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.btn:active,
.cta:active,
button.cta:active {
  transform: translateY(0);
  filter: brightness(0.99);
}

.btn:focus-visible, .cta:focus-visible, button.cta:focus-visible {
  outline: none;
  box-shadow: var(--btn-shadow-hover), var(--focus);
}

/* cards */

.card {
  /* Defaults (can be overridden by variants or inline style) */
  --card-bg-start: #ffffff;
  --card-bg-end: #f8fafc;
  --card-border: rgba(15, 23, 42, 0.08);
  --card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --card-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.12);

  background: linear-gradient(220deg, var(--card-bg-start), var(--card-bg-end));
  border: 1px solid var(--card-border);
  border-radius: var(--radius, 12px);
  padding: 1.5rem;

  box-shadow: var(--card-shadow);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.card--soft {
  --card-bg-end: #f1f5f9;
  --card-shadow: 0 4px 12px #0f172a0f;
  --card-shadow-hover: 0 8px 18px #0f172a1a;
}

.card--teal {
  --card-bg-start: #ffffff;
  --card-bg-end: var(--tealbg);
  --card-border: #0e74902e;
  --card-shadow-hover: 0 8px 18px #0f172a1a;
}

.card--ink {
  --card-bg-start: #0b1220;
  --card-bg-end: #0f172a;
  --card-border: #ffffff1a;
  --card-shadow: 0 10px 28px #02061759;
  --card-shadow-hover: 0 16px 40px #02061773;
  color: rgba(255,255,255,0.92);
}

.card--ink p,
.card--ink li {
  color: rgba(255,255,255,0.72);
}

.card h3,.card h2{margin:.25rem 0 .5rem}
.card ul{margin:.5rem 0 0;padding-left:1.2rem}
.card p{margin:.5rem 0 0;color:var(--muted)}

.diagram{border:0px solid; border-radius:18px;padding:0.75rem;background:#fff}
.diagram img.shelter{border:0px solid; height:auto; width:80%; border-radius:18px;padding:0.75rem}
.diagram img.process{border:0px solid; height:auto; width:100%; border-radius:18px;padding:0.75rem}
.diagram img.gradient{border:0px solid; height:auto; width:80%; border-radius:18px;padding:0.75rem}
.diagram.wide{margin:1rem 0}

.page{padding:3rem 0}
.form{max-width:620px}
.form label{display:block;margin:1rem 0 .4rem}
.form input,.form textarea{width:100%;padding:.65rem .75rem;border:1px solid var(--border);border-radius:12px;font:inherit}
.form button{border:0;cursor:pointer}

.cta-band{padding:3rem 0;background:#0b1220;color:#fff}
.cta-band .lede{color:rgba(255,255,255,.75)}
.cta-band .cta{background:linear-gradient(90deg,var(--teal),var(--teal2));}

.header-education{color:var(--teal)}


.site-footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}

@media (max-width: 900px){
  .grid-hero,.grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  nav a{margin-left:.75rem}
}