.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;mix-blend-mode:overlay;opacity:.55;background-size:140px 140px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E")}
    @font-face {
      font-family: 'Plus Jakarta Sans';
      src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.woff2') format('woff2');
      font-weight: 200 800; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Plus Jakarta Sans';
      src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.woff2') format('woff2');
      font-weight: 200 800; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Geist';
      src: url('../fonts/Geist/Geist-VariableFont_wght.woff2') format('woff2');
      font-weight: 100 900; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Geist';
      src: url('../fonts/Geist/Geist-Italic-VariableFont_wght.woff2') format('woff2');
      font-weight: 100 900; font-style: italic; font-display: swap;
    }

    :root {
      --paper:      #f6f4e8;
      --white:      #f6f4e8;
      --fog:        #f6f4e8;
      --tint:       #edeadc;
      --ink:        #182019;
      --slate:      #4a554c;
      --faint:      #7f8a81;
      --green:      #103f1e;
      --green-h:    #0b3016;
      --green-ink:  #181e18;
      --leaf:       #dbdf65;
      --line:       #e5e8e0;
      --line-soft:  #edf0e9;
      --line-dark:  rgba(246,244,232,.14);
      --r-sm:       .875rem;
      --r-md:       1.25rem;
      --shadow-1:   0 1px 2px rgba(24,32,25,.04), 0 14px 34px -22px rgba(16,63,30,.28);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
    body {
      font-family: 'Geist', system-ui, sans-serif;
      background: var(--paper);
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    h1,h2,h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: -.025em; }

    a, button { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
    .on-dark :focus-visible { outline-color: var(--leaf); }

    .wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
    @media (min-width: 640px) { .wrap { padding: 0 2.5rem; } }


    /* ── Nav ───────────────────────────────────────── */
    #nav {
      position: fixed; top: .875rem; left: 50%; transform: translateX(-50%);
      z-index: 200;
      width: min(74rem, calc(100% - 1.5rem));
      height: 4.25rem;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 .625rem 0 1.375rem;
      background: rgba(252,251,243,.72);
      backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
      border: 1px solid rgba(255,255,255,.65);
      border-radius: 16px;
      box-shadow: 0 1px 1px rgba(24,32,25,.03), 0 16px 44px -24px rgba(16,63,30,.18);
      transition: box-shadow .25s, background .25s, top .25s;
    }
    #nav.scrolled {
      background: rgba(252,251,243,.88);
      box-shadow: 0 1px 2px rgba(24,32,25,.04), 0 20px 48px -24px rgba(16,63,30,.26);
    }
    .nav-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
    .nav-logo { height: 2.25rem; width: auto; flex-shrink: 0; }
    .nav-links {
      position: absolute; left: 50%; transform: translateX(-50%);
      display: flex; gap: .375rem; align-items: center;
    }
    .nav-links a {
      position: relative;
      font-size: .9rem; font-weight: 500; color: var(--slate);
      text-decoration: none;
      padding: .45rem .875rem; border-radius: 10px;
      transition: color .18s, background .18s;
    }
    .nav-links a:hover { color: var(--ink); background: var(--line-soft); }
    .nav-links a.nav-active { color: var(--green); font-weight: 600; background: #eef1e2; }
    .btn-nav {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .65rem 1.375rem; border-radius: 9999px;
      font-size: .875rem; font-weight: 600;
      background: var(--green); color: #fdfdf9;
      text-decoration: none; white-space: nowrap;
      box-shadow: 0 1px 2px rgba(24,32,25,.12), 0 10px 22px -10px rgba(16,63,30,.5);
      transition: background .18s, transform .16s cubic-bezier(.34,1.4,.4,1);
    }
    .btn-nav:hover { background: var(--green-h); transform: translateY(-1px); }
    .btn-nav:active { transform: translateY(0); }
    .mob-btn { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; z-index: 201; position: relative; }
    .mob-btn span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
    .mob-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mob-btn.open span:nth-child(2) { opacity: 0; }
    .mob-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mob-menu {
      display: flex; position: fixed; inset: 0; z-index: 199;
      background: var(--paper);
      flex-direction: column; align-items: flex-start; justify-content: flex-start;
      gap: clamp(.8rem, 2.2vh, 1.4rem); padding: 5.5rem 2.25rem 2.5rem;
      overflow-y: auto;
      transform: translateY(-100%);
      transition: transform .5s cubic-bezier(.16,1,.3,1);
      visibility: hidden;
    }
    .mob-menu.open { transform: translateY(0); visibility: visible; }
    .mob-menu::before, .mob-menu::after { content: ''; margin: auto 0; }
    .mob-menu a {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(1.4rem, 4vh, 1.75rem); font-weight: 700; letter-spacing: -.025em; color: var(--ink);
      text-decoration: none;
      opacity: 0; transform: translateY(16px);
      transition: opacity .3s ease, transform .3s ease, color .18s;
    }
    .mob-menu.open a:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.2s; }
    .mob-menu.open a:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.27s; }
    .mob-menu.open a:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.34s; }
    .mob-menu.open a:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:.41s; }
    .mob-menu.open a:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:.48s; }
    .mob-menu.open a:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:.55s; }
    .mob-menu.open a:nth-child(7) { opacity:1; transform:translateY(0); transition-delay:.62s; }
    .mob-menu a:hover { color: var(--green); }
    .mob-menu a.nav-active { color: var(--green); }
    .mob-menu .mob-cta {
      margin-top: 1rem;
      font-family: 'Geist', sans-serif; font-size: 1.15rem; font-weight: 600;
      background: var(--green); color: #fdfdf9;
      padding: 1rem 2.25rem; border-radius: 9999px;
    }
    .mob-menu .mob-cta:hover { color: #fff; }
    /* 6 nav links need more room: tighten, then collapse to mobile menu earlier */
    .nav-links a { white-space: nowrap; }
    @media (max-width: 1280px) { .nav-links { gap: .125rem; } .nav-links a { padding: .45rem .7rem; } }
    @media (max-width: 1120px) {
      .nav-links { display: none; }
      .mob-btn { display: flex; }
      .btn-nav { display: none; }
    }

    /* ── Hero ──────────────────────────────────────── */
    #hero { padding: 9rem 0 3.5rem; position: relative; overflow: hidden; text-align: center; }
    #hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(46rem 30rem at 82% 0%, rgba(16,63,30,.14), transparent 60%);
    }
    .hero-inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
    .hero-h1 {
      font-size: clamp(2.375rem, 5vw, 3.5rem);
      font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
      color: var(--ink); margin-bottom: 1.125rem;
    }
    .hero-h1 em { font-style: italic; color: var(--green); }
    .hero-sub { font-size: 1.0625rem; color: var(--slate); line-height: 1.7; max-width: 48ch; margin: 0 auto; }
    .hero-meta { margin-top: 1.5rem; font-size: .8rem; color: var(--faint); letter-spacing: .01em; }

    /* ── Legal content ─────────────────────────────── */
    #legal { padding: 1rem 0 6rem; }
    .legal-wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
    @media (min-width: 640px) { .legal-wrap { padding: 0 2.25rem; } }

    .legal-section {
      padding: 2.75rem 0;
      border-top: 1px solid var(--line);
    }
    .legal-section:first-child { border-top: none; padding-top: 1rem; }
    .legal-num {
      display: inline-flex; align-items: center; gap: .6rem;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: var(--green); margin-bottom: .75rem;
    }
    .legal-num::before { content: ''; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--green); }
    .legal-h {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(1.35rem, 2.4vw, 1.625rem); font-weight: 800; letter-spacing: -.03em;
      color: var(--ink); line-height: 1.2; margin-bottom: 1rem;
    }
    .legal-sub-h {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
      color: var(--ink); margin: 1.75rem 0 .75rem;
    }
    .legal-p {
      font-size: 1rem; color: var(--slate); line-height: 1.8; margin-bottom: 1rem;
    }
    .legal-p:last-child { margin-bottom: 0; }
    .legal-p a, .legal-list a {
      color: var(--green); font-weight: 500;
      text-decoration: underline; text-decoration-color: rgba(16,63,30,.35); text-underline-offset: 2px;
      transition: color .18s, text-decoration-color .18s;
    }
    .legal-p a:hover, .legal-list a:hover { color: var(--green-h); text-decoration-color: var(--green-h); }
    .legal-p strong, .legal-list strong { color: var(--ink); font-weight: 600; }

    .legal-list {
      list-style: none; display: flex; flex-direction: column; gap: .7rem;
      margin: 1rem 0;
    }
    .legal-list li {
      font-size: 1rem; color: var(--slate); line-height: 1.7;
      display: flex; align-items: flex-start; gap: .85rem;
    }
    .legal-list li::before {
      content: ''; flex-shrink: 0; width: .4rem; height: .4rem;
      border-radius: 50%; background: var(--green);
      margin-top: .6rem;
    }

    .legal-note, .legal-warning {
      display: block; border-radius: var(--r-sm);
      padding: 1rem 1.25rem; font-size: .9rem; line-height: 1.7;
      margin-top: 1.25rem;
    }
    .legal-note {
      background: rgba(16,63,30,.06); border: 1px solid rgba(16,63,30,.18);
      color: var(--green-h);
    }
    .legal-note a { color: var(--green); }
    .legal-warning {
      background: rgba(180,120,40,.07); border: 1px solid rgba(180,120,40,.22);
      color: #8a5a1c;
    }
    .placeholder {
      color: var(--faint); font-style: italic;
      background: var(--fog); padding: .05rem .4rem; border-radius: .35rem;
      font-size: .92em;
    }

    /* ── Anim ──────────────────────────────────────── */


    @keyframes navIn  { from { opacity:0; transform:translate(-50%,-10px); } to { opacity:1; transform:translateX(-50%); } }
    #nav { animation: navIn .55s ease both; }


    /* ── Footer ────────────────────────────────────── */
    footer { background: var(--green-ink); color: var(--paper); padding: 4.5rem 0 2rem; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 2.5rem; margin-bottom: 3rem; }
    .footer-logo { height: 2.375rem; width: auto; display: block; margin-bottom: 1.25rem; }
    .footer-desc { font-size: .875rem; color: rgba(246,244,232,.5); line-height: 1.75; max-width: 26ch; margin-bottom: 1.125rem; }
    .footer-contact { display: flex; flex-direction: column; gap: .375rem; }
    .footer-contact a { font-size: .84rem; color: rgba(246,244,232,.5); text-decoration: none; transition: color .2s; }
    .footer-contact a:hover { color: var(--paper); }
    .footer-col-h { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,244,232,.35); margin-bottom: 1rem; }
    .footer-nav { display: flex; flex-direction: column; gap: .55rem; }
    .footer-nav a { font-size: .9rem; color: rgba(246,244,232,.62); text-decoration: none; transition: color .2s; }
    .footer-nav a:hover { color: var(--paper); }
    .footer-social { display: flex; gap: .625rem; margin-bottom: 1.75rem; }
    .footer-si {
      width: 2.25rem; height: 2.25rem; border-radius: 50%;
      background: rgba(246,244,232,.06); border: 1px solid var(--line-dark);
      display: flex; align-items: center; justify-content: center;
      color: rgba(246,244,232,.55); text-decoration: none;
      transition: background .2s, color .2s, transform .16s cubic-bezier(.34,1.4,.4,1);
    }
    .footer-si:hover { background: rgba(246,244,232,.14); color: var(--paper); transform: translateY(-2px); }
    .footer-legal { display: flex; gap: 1rem; }
    .footer-legal a { font-size: .78rem; color: rgba(246,244,232,.38); text-decoration: none; transition: color .2s; }
    .footer-legal a:hover { color: rgba(246,244,232,.7); }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; padding-top: 1.75rem; border-top: 1px solid var(--line-dark); }
    .footer-copy { font-size: .775rem; color: rgba(246,244,232,.32); }

    @media (max-width: 900px) {
      .nav-links { display: none; }
      .mob-btn { display: flex; }
      .btn-nav { display: none; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      #hero { padding-top: 8rem; }
      .footer-grid { grid-template-columns: 1fr; }
    }

    /* ── Footer v2 ─────────────────────────────────── */
    footer { position: relative; overflow: hidden; padding-bottom: 0; }
    footer::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(46rem 24rem at 88% -4%, rgba(16,63,30,.10), transparent 65%),
        radial-gradient(34rem 20rem at 4% 110%, rgba(16,63,30,.22), transparent 70%);
    }
    footer > .wrap { position: relative; z-index: 1; }
    .footer-nav a { display: inline-block; width: fit-content; position: relative; transition: color .2s, transform .3s cubic-bezier(.22,1.2,.36,1); }
    .footer-nav a::before {
      content: ''; position: absolute; left: -1rem; top: .62em; width: .55rem; height: 2px; border-radius: 2px;
      background: rgba(16,63,30,1); opacity: 0; transform: translateX(-5px);
      transition: opacity .2s, transform .3s cubic-bezier(.22,1.2,.36,1);
    }
    .footer-nav a:hover { transform: translateX(1rem); }
    .footer-nav a:hover::before { opacity: 1; transform: translateX(0); }
    .footer-si { transition: background .2s, color .2s, transform .25s cubic-bezier(.22,1.2,.36,1); }
    .footer-si:hover { background: var(--leaf); color: var(--ink); transform: translateY(-3px); }
    .footer-bottom { border-top: none; position: relative; padding-bottom: .25rem; }
    .footer-bottom::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, rgba(16,63,30,.5), rgba(246,244,232,.09) 45%, rgba(246,244,232,.06));
    }
    .footer-top {
      display: inline-flex; align-items: center; gap: .45rem;
      font-size: .775rem; color: rgba(246,244,232,.45); text-decoration: none; transition: color .2s;
    }
    .footer-top .ft-arr { display: inline-block; transition: transform .3s cubic-bezier(.22,1.2,.36,1); }
    .footer-top:hover { color: rgba(246,244,232,.95); }
    .footer-top:hover .ft-arr { transform: translateY(-3px); }
    .footer-giant {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800;
      letter-spacing: -.045em; line-height: .8; white-space: nowrap; text-align: center;
      font-size: clamp(2.5rem, 10vw, 9.5rem);
      margin-top: 1.5rem; margin-bottom: -.07em;
      user-select: none; pointer-events: none;
      color: transparent;
      background: linear-gradient(180deg, rgba(16,63,30,.30), rgba(16,63,30,.03) 88%);
      -webkit-background-clip: text; background-clip: text;
    }

    /* ── Understory-style buttons ──────────────── */
    .btn { border-radius: 16px; padding: .55rem .55rem .55rem 1.625rem; gap: 1rem; }
    .btn:not(:has(.arr)) { padding: 1rem 1.875rem; }
    .btn .arr {
      display: inline-flex;
      width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
      align-items: center; justify-content: center;
      border-radius: 11px;
      background: var(--leaf, #dbdf65); color: var(--ink, #182019);
      font-size: 1.05rem;
      transition: transform .22s cubic-bezier(.34,1.4,.4,1), background .2s, color .2s;
    }
    .btn:hover .arr { transform: translateX(3px); background: transparent; color: inherit; }
    .btn-green:hover { background: var(--leaf); color: var(--ink, #182019); box-shadow: 0 2px 4px rgba(24,32,25,.1), 0 18px 34px -16px rgba(219,223,101,.45); }
    .btn-ghost:hover { background: var(--green); color: #fdfdf9; border-color: var(--green); }
    .btn-light:hover { background: var(--leaf); color: var(--ink, #182019); }
    .btn-nav { border-radius: 12px; }
    .btn-nav:hover { background: var(--leaf); color: var(--ink, #182019); }
    .mob-menu .mob-cta { border-radius: 16px; }
    .fz-btn, .fz-comm-btn, .form-submit { border-radius: 14px; }
    .fz-btn:hover:not(:disabled), .fz-comm-btn:hover, .form-submit:hover:not(:disabled) { background: var(--leaf); color: var(--ink, #182019); }