:root{
    --canvas:#F4F4F4;
    --ink:#011901;
    --structural:#0C2B1C;
    --moss:#3DA35D;
    --line:rgba(12,43,28,.16);
    --line-light:rgba(244,244,244,.18);

    /* Type — swap --font-display between these to compare.
       Currently Inter is active; uncomment one of the others on --font-display. */
    --font-inter:'Inter','DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-geist:'Geist','Inter',system-ui,-apple-system,sans-serif;
    --font-manrope:'Manrope','Inter',system-ui,-apple-system,sans-serif;

    --font-display:var(--font-manrope);   /* heading font — change to var(--font-geist) or var(--font-manrope) */
    --font-body:var(--font-inter);      /* body font */
  }
  *{margin:0;padding:0;box-sizing:border-box;border-radius:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--canvas);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  /* Horizontal gutter — lives on the full-width outer element so inner
     flex children can never clobber it with a padding shorthand.
     Below the max-width cap, this gutter is the ONLY thing setting the
     distance from the screen edge (margin:auto contributes 0). */
  .global-padding{
    padding-left:40px;
    padding-right:40px;
  }
  /* Centering container — caps content on very large screens and centers.
     Until the viewport exceeds the cap, margin:auto is 0 and the gutter rules. */
  .shell{
    width:100%;
    max-width:1600px;
    margin:0 auto;
  }

  /* ===== Top navigation bar ===== */
  .nav{
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:22px;
    padding-bottom:22px;
  }
  .logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    font-weight:800;
    font-size:18px;
    letter-spacing:-.02em;
  }
  .logo_Img{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo svg{display:block}
  .nav-status{
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--structural);
    border:1px solid var(--line);
    padding:8px 14px;
  }

  /* ===== Hero band (dark) ===== */
  .hero{
    position:relative;
    color:var(--canvas);
    background:var(--ink);
    overflow:hidden;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    min-height:620px;
  }
  .hero::before{
    content:"";
    position:absolute;inset:0;
    background-image:url('../images/hero_Extended.jpg');
    background-size:cover;
    background-position:15% center;
    z-index:-2;
  }
  /* circular vignette centered on the seedling (right side): clear at center, darkens outward in all directions */
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(circle at 64% 50%,
        rgba(1,25,1,0) 0%,
        rgba(1,25,1,.08) 16%,
        rgba(1,25,1,.38) 40%,
        rgba(1,25,1,.70) 64%,
        rgba(1,25,1,.90) 100%);
    z-index:-1;
  }
  .hero-inner{
    width:100%;
    padding-top:48px;
    padding-bottom:48px;
  }
  .hero-inner h1{
    max-width:780px;
  }
  .hero-inner .lede{
    max-width:620px;
  }
  .eyebrow{
    font-size:12px;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--moss);
    margin-bottom:30px;
  }
  h1{
    font-family:var(--font-display);
    font-size:clamp(34px,6.2vw,64px);
    line-height:1.04;
    letter-spacing:-.025em;
    font-weight:600;
  }
  .lede{
    margin-top:30px;
    font-size:clamp(15px,1.7vw,18px);
    color:rgba(244,244,244,.72);
    line-height:1.6;
  }

  /* ===== Metrics row (light, hairline-separated) ===== */
  .metrics{
    border-bottom:1px solid var(--line);
  }
  .metrics-inner{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding-top:64px;
    padding-bottom:64px;
  }
  .metric{
    padding:0 36px;
    border-left:1px solid var(--line);
  }
  .metric:first-child{
    padding-left:0;
    border-left:none;
  }
  .metric .label{
    font-size:11px;
    font-weight:600;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--structural);
    margin-bottom:18px;
  }
  .metric .num{
    font-family:var(--font-display);
    font-size:clamp(36px,5.6vw,58px);
    font-weight:700;
    letter-spacing:-.035em;
    line-height:1;
    color:var(--ink);
  }

  /* ===== Closing / contact band ===== */
  .closing{
    padding-top:80px;
    padding-bottom:80px;
    flex:1;
    display:flex;
    align-items:center;
  }
  .closing-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:64px;
    align-items:start;
    width:100%;
  }
  .closing h2{
    font-family:var(--font-display);
    font-size:clamp(22px,3vw,30px);
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.2;
    max-width:18ch;
  }
  .closing .sub{
    margin-top:16px;
    color:var(--structural);
    font-size:15px;
    max-width:42ch;
  }
  .contact-block{
    border-top:2px solid var(--ink);
    padding-top:24px;
  }
  .contact-block .ctitle{
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--structural);
    margin-bottom:14px;
  }
  .contact-block a.email{
    display:inline-block;
    color:var(--ink);
    text-decoration:none;
    font-weight:700;
    font-size:clamp(18px,2.4vw,24px);
    letter-spacing:-.02em;
    border-bottom:1px solid transparent;
    transition:border-color .18s ease;
  }
  .contact-block a.email:hover{border-bottom-color:var(--ink)}
  .contact-block a.email:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
  .contact-block .meta{
    margin-top:20px;
    font-size:13px;
    color:var(--structural);
    line-height:1.7;
  }
  .contact-block .meta strong{font-weight:600;color:var(--ink)}

  /* ===== Footer ===== */
  .foot{
    border-top:1px solid var(--line);
  }
  .foot-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:20px;
    padding-bottom:20px;
    font-size:12px;
    letter-spacing:.04em;
    color:var(--structural);
  }
  .foot-inner .tag{
    text-transform:uppercase;
    letter-spacing:.16em;
    font-weight:600;
  }

  /* Tablet: reduce the shared side gutter */
  @media (max-width:900px){
    .global-padding{
      padding-left:28px;
      padding-right:28px;
    }
    .hero{min-height:540px}
  }

  /* Mobile: stack, tighten gutter, restore vertical rhythm */
  @media (max-width:760px){
    .global-padding{
      padding-left:22px;
      padding-right:22px;
    }
    .hero{min-height:0}
    .hero-inner{
      padding-top:64px;
      padding-bottom:64px;
    }
    .metrics-inner{
      grid-template-columns:1fr;
      gap:0;
      padding-top:24px;
      padding-bottom:24px;
    }
    .metric{
      padding-top:28px;
      padding-bottom:28px;
      padding-left:0;
      padding-right:0;
      border-left:none;
      border-top:1px solid var(--line);
    }
    .metric:first-child{border-top:none}
    .closing{
      padding-top:56px;
      padding-bottom:56px;
    }
    .closing-grid{grid-template-columns:1fr;gap:36px}
    .foot-inner{flex-direction:column;gap:8px;align-items:flex-start;padding-top:24px;padding-bottom:24px}
  }
  @media (max-width:480px){
    .nav-status{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
  }