:root{
    /* brand green scale (constant across themes) */
    --sage-deep:#4F726E;
    --sage:#87A7A2;
    --sage-mid:#7A9C97;
    --sage-light:#C4D6D2;
    --white:#FFFFFF;
    --radius-lg:28px;
    --radius-md:18px;

    /* light theme tokens (default) */
    --bg:#F6F1E6;
    --bg-alt:#EFE8D9;
    --surface:#FFFFFF;
    --text:#2C3937;
    --text-soft:#5A6866;
    --heading:#3F615D;
    --border:#C4D6D2;
    --header-bg:var(--sage-deep);
    --header-text:#FFFFFF;
    --footer-bg:var(--sage-deep);
    --footer-text:#F3F7F6;
    --quals-small:#33443F;
    --shadow:0 10px 22px rgba(45,60,58,0.12);
  }

  /* dark theme tokens — applied automatically from the browser/OS preference, no toggle */
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#1B2624;
      --bg-alt:#151E1C;
      --surface:#22302D;
      --text:#EAEFED;
      --text-soft:#AEC0BC;
      --heading:#A9CFC9;
      --border:#33463F;
      --header-bg:#233732;
      --header-text:#F3F7F6;
      --footer-bg:#182420;
      --footer-text:#DCE7E4;
      --sage-light:#33463F;
      --quals-small:#C7D6D2;
      --shadow:0 10px 26px rgba(0,0,0,0.4);
    }
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Work Sans',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background-color 0.25s ease, color 0.25s ease;
  }

  h1,h2,h3,.brand{
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    color:var(--heading);
  }

  a{color:inherit;text-decoration:none;}

  .skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    background:var(--surface);
    color:var(--heading);
    padding:12px 20px;
    border-radius:0 0 10px 0;
    font-weight:600;
    z-index:100;
  }

  .skip-link:focus{
    left:0;
  }

  .sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  :focus-visible{
    outline:3px solid var(--sage-deep);
    outline-offset:3px;
  }

  header :focus-visible,
  .hero :focus-visible{
    outline-color:var(--white);
  }

  img,svg{display:block;max-width:100%;}

  .wrap{
    max-width:1100px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- LOGO MARK (inline, currentColor based) ---------- */
  .mark{color:var(--white);}
  .mark svg{width:100%;height:100%;}

  /* ---------- NAV ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--header-bg);
    border-bottom:1px solid rgba(255,255,255,0.15);
    transition:background-color 0.25s ease;
  }

  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:22px;
    padding-bottom:22px;
    gap:20px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:1.5rem;
    color:var(--header-text);
  }

  .brand .mark{width:48px;height:48px;flex-shrink:0;color:var(--header-text);}

  .nav-right{
    display:flex;
    align-items:center;
    gap:26px;
  }

  .nav-links{
    display:flex;
    gap:32px;
    list-style:none;
    font-weight:500;
    font-size:1.05rem;
  }

  .nav-links a{
    padding:8px 2px;
    border-bottom:2px solid transparent;
    transition:border-color 0.2s ease, color 0.2s ease;
    color:var(--header-text);
  }

  .nav-links a:hover{
    border-bottom-color:var(--header-text);
  }

  /* ---------- HERO (flyer-header layout: icon + title on one row, left-aligned) ---------- */
  .hero{
    background:linear-gradient(160deg,#5A7C78 0%, #547870 55%, var(--sage-deep) 100%);
    color:var(--white);
    padding:64px 0;
    position:relative;
    overflow:hidden;
    text-align:left;
  }

  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05), transparent 55%);
    pointer-events:none;
  }

  .hero .wrap{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:32px;
    row-gap:16px;
    align-items:center;
  }

  .hero .mark{
    grid-column:1;
    grid-row:1 / 3;
    width:110px;
    height:110px;
    margin:0;
    color:var(--white);
  }

  .hero h1{
    grid-column:2;
    grid-row:1;
    color:var(--white);
    font-size:clamp(2.2rem,5vw,3.4rem);
    letter-spacing:0.5px;
    text-align:left;
  }

  .hero p.tagline{
    grid-column:2;
    grid-row:2;
    margin-top:0;
    font-size:clamp(1.05rem,2.2vw,1.35rem);
    font-weight:700;
    letter-spacing:0.3px;
    opacity:0.96;
    text-align:left;
  }

  .hero .cta{
    grid-column:1 / -1;
    grid-row:3;
    display:flex;
    gap:14px;
    margin-top:18px;
    flex-wrap:wrap;
    justify-content:center;
  }

  @media (max-width:640px){
    .hero .wrap{
      grid-template-columns:1fr;
      justify-items:center;
      text-align:center;
    }
    .hero .mark{grid-column:1;grid-row:1;margin:0 auto;}
    .hero h1{grid-column:1;grid-row:2;text-align:center;}
    .hero p.tagline{grid-column:1;grid-row:3;text-align:center;}
    .hero .cta{grid-column:1;grid-row:4;justify-content:center;}
  }

  .btn{
    display:inline-block;
    padding:13px 28px;
    border-radius:999px;
    font-weight:600;
    font-size:0.95rem;
    transition:transform 0.18s ease, box-shadow 0.18s ease;
  }

  .btn-solid{
    background:var(--white);
    color:var(--sage-deep);
  }

  .btn-outline{
    border:2px solid rgba(255,255,255,0.8);
    color:var(--white);
  }

  .btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
  }

  /* ---------- SECTION SHELL ---------- */
  section{
    padding:88px 0;
  }

  .eyebrow{
    text-transform:uppercase;
    letter-spacing:2.5px;
    font-size:0.78rem;
    font-weight:600;
    color:var(--heading);
    margin-bottom:10px;
  }

  section h2{
    font-size:clamp(1.7rem,3.4vw,2.3rem);
    margin-bottom:22px;
  }

  .logo-img{
    display:grid;
    width:100%;
    height:100%;
    margin:0;
  }

  /* ---------- WHO WE ARE ---------- */
  .who{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:56px;
    align-items:center;
  }

  .who-blob{
    background:var(--sage-light);
    color:var(--heading);
    border-radius:var(--radius-md);
    aspect-ratio:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:44px 40px;
    text-align:left;
  }

  .who-blob p{
    font-size:1.1rem;
    font-weight:700;
    line-height:1.5;
  }

  .who-copy .lede{
    font-size:1.15rem;
    color:var(--text-soft);
    max-width:46ch;
  }

  .partner-list{
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }

  .partner-list span{
    background:var(--surface);
    border:1px solid var(--border);
    padding:8px 16px;
    border-radius:999px;
    font-size:0.88rem;
    font-weight:500;
    color:var(--heading);
  }

  /* ---------- MISSION ---------- */
  .mission{
    background:var(--sage-deep);
    color:var(--white);
    border-radius:var(--radius-lg);
    margin:0 32px;
    padding:70px 48px;
    text-align:center;
  }

  .mission-inner{
    max-width:820px;
    margin:0 auto;
  }

  .mission h2{color:var(--white);}

  .mission p{
    font-size:clamp(1.15rem,2.4vw,1.5rem);
    font-family:'Baloo 2',sans-serif;
    font-weight:600;
    line-height:1.55;
  }

  .mission .eyebrow{color:var(--footer-text);}

  /* ---------- QUALIFICATIONS ---------- */
  .quals{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
  }

  .quals-list{
    list-style:none;
    display:grid;
    gap:14px;
  }

  .quals-list li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px 18px;
    font-weight:500;
    color:var(--text);
  }

  .quals-list li .dot{
    flex-shrink:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--sage-mid);
    margin-top:8px;
  }

  .quals-note{
    background:var(--sage-light);
    border-radius:var(--radius-md);
    padding:30px 32px;
    position:sticky;
    top:110px;
  }

  .quals-note p.big{
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    font-size:1.25rem;
    color:var(--heading);
    line-height:1.4;
  }

  .quals-note p.small{
    margin-top:14px;
    color:var(--quals-small);
    font-size:0.95rem;
  }

  /* ---------- CONTACT ---------- */
  .contact{
    background:var(--bg-alt);
  }

  .contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:40px;
  }

  .contact-card{
    background:var(--surface);
    border-radius:var(--radius-md);
    padding:32px;
    border:1px solid var(--border);
    min-width:0;
  }

  .contact-card h3{
    font-size:1.1rem;
    margin-bottom:6px;
    color:var(--heading);
  }

  .contact-card p{color:var(--text-soft);}

  .contact-card a.link-big{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1.15rem;
    font-weight:600;
    color:var(--heading);
    margin-top:10px;
    transition:color 0.2s ease;
    min-width:0;
  }

  .contact-card a.link-big span.link-text{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .contact-card a.link-big:hover{color:var(--sage-mid);}

  .icon-circle{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--sage-light);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .icon-circle svg{width:18px;height:18px;stroke:var(--sage-deep);}

  @media (prefers-color-scheme: dark){
    .icon-circle svg{stroke:#DCE7E4;}
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:34px 0;
    text-align:center;
    color:var(--footer-text);
    background:var(--footer-bg);
    font-size:0.88rem;
    transition:background-color 0.25s ease;
  }

  .nav-toggle{
    display:none;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:820px){
    .who,.quals,.contact-grid{
      grid-template-columns:1fr;
    }
    .quals-note{position:static;}
    .mission{margin:0 16px;padding:52px 28px;}
    .nav-right{gap:10px;}
    .nav-links{
      position:fixed;
      top:64px;
      left:0;right:0;
      background:var(--header-bg);
      flex-direction:column;
      gap:0;
      padding:8px 32px 18px;
      border-bottom:1px solid rgba(255,255,255,0.15);
      transform:translateY(-130%);
      transition:transform 0.25s ease;
    }
    .nav-links.open{transform:translateY(0);}
    .nav-links a{
      display:block;
      padding:12px 0;
      border-bottom:1px solid rgba(255,255,255,0.18);
    }
    .nav-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px;height:40px;
      background:none;
      border:1px solid rgba(255,255,255,0.4);
      border-radius:10px;
      cursor:pointer;
    }
    .nav-toggle svg{width:20px;height:20px;stroke:var(--header-text);}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }