:root{
    --pine-950:#0e2116;
    --pine-900:#132c1f;
    --pine-800:#1b4332;
    --pine-700:#22553f;
    --pine-600:#2c6b4a;
    --pine-500:#3e8763;
    --pine-300:#8fb89f;
    --stone-100:#efeae0;
    --stone-200:#e2dbc9;
    --stone-300:#c9c2af;
    --glacier-400:#7faab0;
    --glacier-300:#a7c8cc;
    --saffron-500:#d6a24c;
    --saffron-600:#b98835;

    --font-display:'Fraunces', serif;
    --font-body:'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--pine-950);
    color:var(--stone-100);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }

  img{ max-width:100%; display:block; }

  :focus-visible{
    outline:2px solid var(--saffron-500);
    outline-offset:3px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:clamp(1.25rem, 4vw, 3rem);
  }

  .eyebrow{
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.72rem;
    color:var(--stone-300);
  }

  /* ---------- header ---------- */

  header.site{
    position:relative;
    z-index:5;
    padding-top:clamp(1.25rem,3vw,2rem);
  }

  .header-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    row-gap:.75rem;
    column-gap:1rem;
  }

  .brand-chip{
    display:inline-flex;
    align-items:center;
  }

  .brand-chip img{
    height:34px;
    width:auto;
  }

  .lang-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    font-family:var(--font-mono);
    font-size:.72rem;
  }

  .lang-pills a{
    border:1px solid rgba(239,234,224,.25);
    border-radius:999px;
    padding:.3rem .65rem;
    color:var(--stone-300);
    text-decoration:none;
    transition:border-color .15s ease, color .15s ease;
  }

  .lang-pills a:hover{
    color:var(--stone-100);
    border-color:rgba(239,234,224,.5);
  }

  .lang-pills a[aria-current="page"]{
    border-color:var(--saffron-500);
    color:var(--stone-100);
  }

  /* ---------- hero ---------- */

  .hero{
    position:relative;
    overflow:hidden;
    padding-top:clamp(3rem,8vw,6rem);
    padding-bottom:clamp(3.5rem,9vw,7rem);
  }

  .contour-field{
    position:absolute;
    inset:-10% -10% -10% -10%;
    z-index:0;
    opacity:.55;
    pointer-events:none;
  }

  .contour-field g{
    transform-origin:50% 45%;
    animation:contour-breathe 26s ease-in-out infinite;
  }

  @keyframes contour-breathe{
    0%,100%{ transform:scale(1) rotate(0deg); }
    50%{ transform:scale(1.045) rotate(.6deg); }
  }

  .hero-inner{
    position:relative;
    z-index:2;
  }

  .hud{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font-family:var(--font-mono);
    font-size:.75rem;
    color:var(--glacier-300);
    border:1px solid rgba(127,168,176,.35);
    border-radius:999px;
    padding:.35rem .8rem .35rem .6rem;
    margin-bottom:1.6rem;
  }

  .hud .dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--saffron-500);
    box-shadow:0 0 0 0 rgba(214,162,76,.6);
    animation:pulse 2.4s ease-out infinite;
  }

  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(214,162,76,.55); }
    70%{ box-shadow:0 0 0 8px rgba(214,162,76,0); }
    100%{ box-shadow:0 0 0 0 rgba(214,162,76,0); }
  }

  h1.headline{
    font-family:var(--font-display);
    font-weight:600;
    font-optical-sizing:auto;
    font-size:clamp(2.6rem, 6.4vw, 5.2rem);
    line-height:1.02;
    margin:0 0 .9rem;
    max-width:14ch;
  }

  h1.headline em{
    font-style:italic;
    font-weight:400;
    color:var(--stone-300);
  }

  .locale-line{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--stone-300);
    margin:0 0 1.6rem;
  }

  .locale-line .sep{
    color:rgba(201,194,175,.4);
    padding-inline:.5em;
  }

  .lede{
    max-width:46ch;
    font-size:clamp(1rem,1.6vw,1.15rem);
    color:var(--stone-200);
    margin:0 0 2.4rem;
  }

  /* stat strip */

  .stat-strip{
    display:flex;
    flex-wrap:wrap;
    gap:2.2rem 2.8rem;
    padding-top:1.8rem;
    border-top:1px solid rgba(239,234,224,.14);
    max-width:52rem;
  }

  .stat{
    font-family:var(--font-mono);
  }

  .stat .num{
    display:block;
    font-size:1.25rem;
    color:var(--stone-100);
    letter-spacing:.02em;
  }

  .stat .label{
    display:block;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--stone-300);
    margin-top:.2rem;
  }

  /* ridge divider */

  .ridge{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:-2px;
  }

  /* ---------- zoning section ---------- */

  section.zoning{
    background:var(--stone-100);
    color:var(--pine-950);
    padding-block:clamp(3rem,7vw,5rem);
  }

  .zoning .eyebrow{ color:var(--pine-700); }

  .section-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.7rem,3.4vw,2.5rem);
    margin:.5rem 0 .6rem;
    max-width:20ch;
  }

  .section-sub{
    max-width:56ch;
    color:#3d3a30;
    margin:0 0 2.4rem;
  }

  .zone-bar{
    display:flex;
    width:100%;
    height:2.75rem;
    border-radius:8px;
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(14,33,22,.12);
  }

  .zone-bar span{
    height:100%;
    min-width:6px;
  }

  .zone-legend{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:1.4rem;
    margin-top:1.8rem;
  }

  .zone-legend .item{
    display:flex;
    gap:.75rem;
    align-items:flex-start;
  }

  .zone-legend .swatch{
    width:.85rem;
    height:.85rem;
    border-radius:3px;
    margin-top:.3rem;
    flex:none;
  }

  .zone-legend h3{
    font-family:var(--font-body);
    font-size:.95rem;
    font-weight:600;
    margin:0 0 .2rem;
  }

  .zone-legend .pct{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:#5b5747;
  }

  .z-strict{ background:var(--pine-800); }
  .z-active{ background:var(--pine-500); }
  .z-sustain{ background:var(--saffron-500); }
  .z-buffer{ background:var(--glacier-400); }

  /* ---------- features ---------- */

  section.features{
    padding-block:clamp(3.5rem,8vw,6rem);
  }

  .features .eyebrow{ margin-bottom:.5rem; }

  .feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
    gap:1px;
    background:rgba(239,234,224,.14);
    border:1px solid rgba(239,234,224,.14);
    border-radius:10px;
    overflow:hidden;
    margin-top:2.2rem;
  }

  .feature-card{
    background:var(--pine-950);
    padding:1.8rem 1.6rem;
  }

  .feature-card svg{
    width:26px;
    height:26px;
    stroke:var(--saffron-500);
    fill:none;
    stroke-width:1.5;
    margin-bottom:1rem;
  }

  .feature-card h3{
    font-family:var(--font-body);
    font-size:1.02rem;
    font-weight:600;
    margin:0 0 .5rem;
  }

  .feature-card p{
    font-size:.9rem;
    color:var(--stone-300);
    margin:0;
  }

  /* ---------- footer ---------- */

  footer.site{
    background:var(--pine-900);
    border-top:1px solid rgba(239,234,224,.1);
    padding-block:2.6rem;
  }

  .footer-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:1.8rem;
    align-items:flex-start;
  }

  .footer-brand{
    display:flex;
    align-items:center;
    gap:.8rem;
  }

  .footer-brand img{
    height:28px;
    width:auto;
  }

  .footer-brand .name{
    font-family:var(--font-mono);
    font-size:.8rem;
    color:var(--stone-300);
    max-width:22ch;
  }

  .footer-contact{
    font-size:.88rem;
    color:var(--stone-300);
  }

  .footer-contact a{ text-decoration:none; }
  .footer-contact a:hover{ color:var(--stone-100); }

  .footer-social{
    display:flex;
    gap:.7rem;
  }

  .footer-social a{
    width:34px;height:34px;
    border-radius:50%;
    border:1px solid rgba(239,234,224,.2);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .15s ease;
  }

  .footer-social a:hover{ border-color:var(--saffron-500); }

  .footer-social svg{
    width:15px;height:15px;
    stroke:var(--stone-100);
    fill:none;
    stroke-width:1.6;
  }

  .footer-bottom{
    margin-top:2.2rem;
    padding-top:1.4rem;
    border-top:1px solid rgba(239,234,224,.08);
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--stone-300);
    display:flex;
    flex-wrap:wrap;
    gap:.5rem 1.5rem;
    justify-content:space-between;
  }

  /* ---------- responsive ---------- */

  @media (max-width: 640px){
    .zone-legend{ grid-template-columns: 1fr; }
    .feature-grid{ grid-template-columns: 1fr; }
    .stat-strip{ gap:1.8rem 2rem; }
  }

  @media (max-width: 420px){
    h1.headline{ font-size: clamp(2rem, 10vw, 2.6rem); max-width: 12ch; }
    .section-title{ font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero{ padding-top:2.5rem; padding-bottom:3rem; }
    .brand-chip img{ height:28px; }
    .lang-pills a{ padding:.25rem .55rem; }
    .stat-strip{ gap:1.4rem 1.6rem; }
    .footer-row{ flex-direction:column; align-items:flex-start; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .contour-field g{ animation:none; }
    .hud .dot{ animation:none; }
  }