:root {
      --raspberry: #c43b6a;
      --raspberry-deep: #9e2d54;
      --blue: #1c75bc;
      --navy: #0e2a43;
      --ink: #1b242c;
      --muted: #5c6770;
      --line: #e4ddd4;
      --cream: #f6f3ee;
      --paper: #fffcf8;
      --white: #ffffff;
      --shadow: 0 18px 50px rgba(14, 42, 67, 0.12);
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Outfit, system-ui, sans-serif;
      font-size: 17px;
      line-height: 1.6;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; }
    .skip {
      position: absolute; left: -999px; top: 0;
      background: var(--navy); color: #fff; padding: 8px 12px; z-index: 20;
    }
    .skip:focus { left: 12px; }
    .wrap { width: min(1140px, calc(100% - 40px)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      letter-spacing: .16em; text-transform: uppercase;
      font-size: 12px; font-weight: 600; color: var(--raspberry);
    }
    .eyebrow:before {
      content: ""; width: 18px; height: 1.5px; background: currentColor;
    }
    h1, h2, h3, .serif { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.02em; }
    h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.08; margin: 14px 0 18px; }
    h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin: 0 0 14px; }
    h3 { font-size: 22px; margin: 0 0 8px; }
    p { margin: 0 0 14px; color: var(--muted); }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 20px; border-radius: 999px;
      font-weight: 600; text-decoration: none; border: 1px solid transparent;
      transition: .2s ease;
    }
    .btn-primary { background: var(--raspberry); color: #fff; }
    .btn-primary:hover { background: var(--raspberry-deep); }
    .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
    .btn-ghost:hover { background: rgba(255,255,255,.1); }
    .btn-navy { background: var(--navy); color: #fff; }
    .btn-navy:hover { background: #163652; }
    .topbar {
      background: var(--navy); color: #d7e3ee; font-size: 13px;
    }
    .topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; flex-wrap: wrap; }
    .topbar a { color: #fff; text-decoration: none; font-weight: 500; }
    header.site {
      position: sticky; top: 0; z-index: 10;
      background: rgba(255,252,248,.92); backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(228,221,212,.8);
    }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 76px; gap: 20px;
    }
    .logo { display: flex; align-items: center; }
    .logo img { height: 46px; width: auto; }
    nav.links { display: flex; gap: 22px; align-items: center; }
    nav.links a { text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink); }
    nav.links a:hover { color: var(--raspberry); }
    .menu-btn {
      display: none; background: none; border: 0; font: inherit; font-weight: 600;
    }
    .hero {
      position: relative; min-height: 86vh; color: #fff;
      display: grid; align-items: end;
      background:
        linear-gradient(105deg, rgba(10,28,45,.88) 8%, rgba(10,28,45,.55) 48%, rgba(196,59,106,.28) 100%),
        url("img/hero.jpg") center/cover no-repeat,
        var(--navy);
    }
    .hero-inner { padding: 90px 0 72px; }
    .hero p { color: #d9e4ee; font-size: 19px; max-width: 640px; }
    .hero h1 { max-width: 16ch; color: #fff; }
    .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 34px; }
    .proof {
      display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px; max-width: 720px;
    }
    .proof div {
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      border-radius: 14px; padding: 14px 16px;
    }
    .proof strong { display: block; font-size: 15px; }
    .proof span { display: block; color: #c9d6e2; font-size: 13px; }
    .partners { padding: 22px 0; border-bottom: 1px solid var(--line); background: var(--white); }
    .partners .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
    .partners span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
    .partners a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; }
    section { padding: 88px 0; }
    .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
    .panel {
      background: var(--cream); border-radius: 28px; overflow: hidden; min-height: 420px;
      background-image: linear-gradient(180deg, rgba(14,42,67,.05), rgba(14,42,67,.38)),
        url("img/hero.jpg");
      background-size: cover; background-position: center;
      box-shadow: var(--shadow);
    }
    .services { background: var(--cream); }
    .svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 36px; }
    article.card {
      background: var(--white); border-radius: var(--radius); padding: 28px;
      box-shadow: 0 1px 0 rgba(27,36,44,.04);
      border: 1px solid rgba(228,221,212,.9);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    article.card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      border-color: #d7c7b8;
    }
    article.card img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 16px; }
    article.card p { margin-bottom: 16px; }
    article.card a.more { color: var(--raspberry); font-weight: 600; text-decoration: none; font-size: 14px; }
    .outcomes { background: var(--navy); color: #fff; }
    .outcomes p, .outcomes h2 { color: #fff; }
    .quote-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; margin-top: 36px; }
    blockquote {
      margin: 0; background: rgba(255,255,255,.06); border-radius: 22px; padding: 32px;
      border: 1px solid rgba(255,255,255,.1);
    }
    blockquote p { color: #e8eef4; font-size: 22px; line-height: 1.45; font-family: Fraunces, Georgia, serif; }
    .cite { color: #b9c8d6; font-size: 14px; }
    .team-card {
      display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center;
      background: var(--white); border-radius: 24px; padding: 28px; border: 1px solid var(--line);
    }
    .avatar {
      width: 160px; height: 160px; border-radius: 20px;
      background: linear-gradient(160deg, #1c75bc, #c43b6a);
      color: #fff; display: grid; place-items: center;
      font-family: Fraunces, Georgia, serif; font-size: 42px;
    }
    .resources { background: linear-gradient(180deg, var(--paper), #fff); }
    .resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 34px; }
    .resource-card {
      background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
      box-shadow: 0 1px 0 rgba(27,36,44,.04); transition: transform .2s ease, box-shadow .2s ease;
    }
    .resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .resource-art {
      min-height: 156px; display: grid; place-items: center; padding: 24px;
      background: radial-gradient(circle at 24% 25%, rgba(255,255,255,.28), transparent 38%), linear-gradient(135deg, var(--blue), var(--raspberry));
      color: #fff;
    }
    .resource-art svg { width: 76px; height: 76px; opacity: .95; }
    .resource-body { padding: 24px; }
    .resource-meta { color: var(--raspberry); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
    .resource-card h3 { font-size: 21px; }
    .resource-card a { color: var(--navy); font-weight: 700; text-decoration: none; }
    .faq-list { display: grid; gap: 12px; margin-top: 28px; }
    details {
      background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
    }
    summary { cursor: pointer; font-weight: 600; }
    details p { margin: 10px 0 0; }
    .contact { background: var(--cream); }
    form {
      display: grid; gap: 12px; background: var(--white); padding: 28px; border-radius: 22px; border: 1px solid var(--line);
    }
    label { font-size: 13px; font-weight: 600; }
    input, textarea {
      width: 100%; border: 1px solid #ddd4ca; border-radius: 12px; padding: 12px 14px;
      font: inherit; background: #fff;
    }
    footer {
      background: #0b1c2c; color: #c5d0da; padding: 48px 0 28px; font-size: 14px;
    }
    .foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; margin-bottom: 28px; }
    footer a { color: #fff; text-decoration: none; }
    .copy { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; color: #8fa0ae; }
    .note { font-size: 12px; color: #8a8178; margin-top: 8px; }
    @media (max-width: 860px) {
      nav.links, .nav .btn { display: none; }
      nav.links.open { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: var(--paper); padding: 16px 20px 20px; border-bottom: 1px solid var(--line); }
      .menu-btn { display: block; }
      .split, .svc-grid, .resource-grid, .quote-grid, .team-card, .foot, .proof { grid-template-columns: 1fr; }
      .hero { min-height: auto; }
      .panel { min-height: 240px; }
      header.site { position: relative; }
    }