/* =========================================================
   A TREE FOR EVERY TANZANIAN — SHARED STYLESHEET
   Used by every page: home, about, projects, get-involved,
   articles, faq, contact, and both calculator pages.
   ========================================================= */

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --green:       #0D5E3F;
      --green-mid:   #1A7A52;
      --green-light: #2BA876;
      --green-pale:  #EEF8F4;
      --sand:        #F9F6F0;
      --ink:         #111111;
      --muted:       #555555;
      --border:      #E2E2E2;
      --white:       #ffffff;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Open Sans', sans-serif;
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.6;
    }

    h1, h2, h3, h4, h5 {
      font-family: 'Bricolage Grotesque', sans-serif;
    }

    /* ───── NAV ───── */
    nav {
      position: sticky;
      top: 0;
      z-index: 900;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      height: 68px;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: var(--green);
      cursor: pointer;
      text-decoration: none;
    }
    .logo-icon {
      width: 36px;
      height: 36px;
      background: var(--green);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .logo-text span {
      display: block;
      font-size: 11px;
      font-weight: 400;
      color: var(--muted);
      font-family: 'Open Sans', sans-serif;
    }
    .nav-links {
      display: flex;
      list-style: none;
      gap: 0;
      align-items: center;
    }
    .nav-links li a {
      display: block;
      padding: 0.5rem 0.9rem;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.01em;
      border-radius: 6px;
      transition: color 0.2s, background 0.2s;
      cursor: pointer;
    }
    .nav-links li a:hover { color: var(--green); background: var(--green-pale); }
    .nav-links li a.active { color: var(--green); }
    .nav-cta {
      padding: 0.5rem 1.2rem !important;
      background: var(--green) !important;
      color: white !important;
      border-radius: 8px !important;
    }
    .nav-cta:hover { background: var(--green-mid) !important; color: white !important; }

    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.3s; }

    /* ───── SECTIONS ───── */
    section { display: none; animation: fadeUp 0.45s ease both; }
    section.active { display: block; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ───── HERO SLIDESHOW ───── */
    .hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    /* Slides */
    .slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.2s ease;
      z-index: 0;
    }
    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    /* Dark overlay so text is readable */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.20) 100%
      );
      z-index: 2;
    }

    /* Content sits above overlay */
    .hero-content {
      position: relative;
      z-index: 3;
      max-width: 720px;
      padding: 5rem 4rem 5rem 5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Slide navigation dots */
    .slide-dots {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 4;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.45);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.3s, transform 0.3s;
    }
    .dot.active {
      background: #fff;
      transform: scale(1.3);
    }

    /* Prev / Next arrows */
    .slide-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      font-size: 2rem;
      line-height: 1;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .slide-arrow:hover { background: rgba(255,255,255,0.30); }
    .slide-prev { left: 1.5rem; }
    .slide-next { right: 1.5rem; }

    /* Reuse hero-left selectors mapped to hero-content */
    .hero-left, .hero-content {
      background: transparent;
    }
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(110, 232, 122, 0.20);
      border: 1px solid rgba(110, 232, 122, 0.55);
      color: #a8f5b0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 100px;
      margin-bottom: 2rem;
      width: fit-content;
    }

    /* Text that swaps alongside each slide */
    .hero-copy {
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .hero-copy.fade-out {
      opacity: 0;
      transform: translateY(10px);
    }
    .hero-tag::before {
      content: '';
      width: 7px;
      height: 7px;
      background: var(--green-light);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(1.4); }
    }
    .hero-h1 {
      font-size: clamp(38px, 4.5vw, 64px);
      font-weight: 800;
      line-height: 1.05;
      color: #ffffff;
      margin-bottom: 1.5rem;
      letter-spacing: -0.03em;
      text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    .hero-h1 em {
      font-style: normal;
      color: #6ee87a;
    }
    .hero-sub {
      font-size: 17px;
      line-height: 1.75;
      color: rgba(255,255,255,0.88);
      max-width: 480px;
      margin-bottom: 2.5rem;
      text-shadow: 0 1px 6px rgba(0,0,0,0.3);
    }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 3rem; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 26px;
      border-radius: 10px;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      text-decoration: none;
      transition: all 0.2s;
    }
    .btn-primary {
      background: var(--green);
      color: white;
    }
    .btn-primary:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,94,63,0.25); }
    .btn-outline {
      background: rgba(255,255,255,0.12);
      color: #ffffff;
      border: 2px solid rgba(255,255,255,0.55);
    }
    .btn-outline:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
    .btn-white {
      background: white;
      color: var(--green);
    }
    .btn-white:hover { background: var(--green-pale); transform: translateY(-2px); }

    .hero-stats {
      display: flex;
      gap: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.25);
    }
    .hero-stat-num {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 28px;
      font-weight: 800;
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .hero-stat-label {
      font-size: 12px;
      color: rgba(255,255,255,0.70);
      margin-top: 2px;
    }

    .hero-right {
      position: relative;
      overflow: hidden;
    }
    .hero-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-right::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(255,255,255,0.15) 0%, transparent 40%);
    }

    .hero-scroll-indicator {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: white;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      z-index: 10;
      opacity: 0.8;
      font-family: 'Open Sans', sans-serif;
    }
    .scroll-line {
      width: 1px;
      height: 40px;
      background: white;
      animation: scrollPulse 2s infinite;
    }
    @keyframes scrollPulse {
      0%   { transform: scaleY(0); transform-origin: top; }
      50%  { transform: scaleY(1); transform-origin: top; }
      100% { transform: scaleY(0); transform-origin: bottom; }
    }

    /* ───── SECTION WRAPPER ───── */
    .section-wrap { max-width: 1240px; margin: 0 auto; padding: 5rem 2rem; }
    .section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--green-light);
      margin-bottom: 1rem;
    }
    .section-title {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 1rem;
    }
    .section-sub {
      font-size: 16px;
      color: var(--muted);
      line-height: 1.75;
      max-width: 600px;
    }
    .section-header { margin-bottom: 3.5rem; }

    /* ───── HOME — MISSION STRIP ───── */
    .mission-strip {
      background: var(--green);
      color: white;
      padding: 4rem 2rem;
    }
    .mission-strip-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .mission-strip h2 {
      font-size: clamp(26px, 3vw, 42px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .mission-strip p {
      font-size: 16px;
      line-height: 1.8;
      opacity: 0.88;
    }

    /* ───── HOME — HOW IT WORKS ───── */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }
    .step {
      background: var(--white);
      padding: 2.5rem 2rem;
      position: relative;
    }
    .step-num {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 52px;
      font-weight: 800;
      color: var(--green-pale);
      line-height: 1;
      margin-bottom: 1rem;
    }
    .step h4 {
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 0.75rem;
    }
    .step p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
    }
    .step-icon {
      font-size: 28px;
      margin-bottom: 1rem;
    }

    /* ───── HOME — IMAGE FEATURE ───── */
    .image-feature {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      min-height: 540px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .image-feature-img {
      position: relative;
      overflow: hidden;
    }
    .image-feature-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .image-feature-img:hover img { transform: scale(1.04); }
    .image-feature-text {
      padding: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--sand);
    }
    .image-feature-text h3 {
      font-size: 30px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 1.25rem;
      color: var(--ink);
    }
    .image-feature-text p {
      font-size: 15px;
      line-height: 1.8;
      color: var(--muted);
      margin-bottom: 1.5rem;
    }
    .check-list { list-style: none; margin-bottom: 2rem; }
    .check-list li {
      font-size: 14px;
      color: var(--ink);
      padding: 6px 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .check-list li::before {
      content: '✓';
      color: var(--green-light);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* ───── STATS ROW ───── */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .stat-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 2.5rem 2rem;
      text-align: center;
      transition: box-shadow 0.2s;
    }
    .stat-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.07); }
    .stat-card .big {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 52px;
      font-weight: 800;
      color: var(--green);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .stat-card .label {
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
    }

    /* ───── TESTIMONIALS / QUOTE BLOCK ───── */
    .quote-block {
      background: var(--green-pale);
      border-radius: 20px;
      padding: 4rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .quote-text {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 26px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--green);
      letter-spacing: -0.01em;
    }
    .quote-text::before { content: '\201C'; font-size: 60px; line-height: 0; vertical-align: -0.4em; color: var(--green-light); margin-right: 8px; }
    .quote-author { margin-top: 1.5rem; font-family: 'Open Sans', sans-serif; font-size: 14px; color: var(--muted); }
    .quote-author strong { display: block; color: var(--ink); font-weight: 700; }
    .quote-img { border-radius: 12px; overflow: hidden; height: 280px; }
    .quote-img img { width: 100%; height: 100%; object-fit: cover; }

    /* ───── ABOUT ───── */
    .about-hero {
      position: relative;
      height: 380px;
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 4rem;
    }
    .about-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(13,94,63,0.85) 0%, rgba(13,94,63,0.3) 60%, transparent 100%);
      display: flex;
      align-items: flex-end;
      padding: 3rem;
    }
    .about-hero-overlay h2 {
      color: white;
      font-size: 42px;
      font-weight: 800;
      letter-spacing: -0.03em;
      max-width: 500px;
    }
    .about-grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 4rem;
      align-items: start;
    }
    .about-grid p {
      font-size: 16px;
      line-height: 1.85;
      color: var(--muted);
      margin-bottom: 1.25rem;
    }
    .about-grid p:last-child { margin-bottom: 0; }
    .value-cards { display: flex; flex-direction: column; gap: 1rem; }
    .value-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.5rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .value-card:hover { border-color: var(--green-light); box-shadow: 0 4px 20px rgba(13,94,63,0.08); }
    .value-card h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
    .value-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
    .value-icon { font-size: 22px; margin-bottom: 0.5rem; }

    .team-section { margin-top: 5rem; }
    .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
    .team-card {
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      transition: box-shadow 0.2s;
    }
    .team-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
    .team-img { height: 220px; overflow: hidden; background: var(--green-pale); }
    .team-img img { width: 100%; height: 100%; object-fit: cover; }
    .team-info { padding: 1.5rem; background: white; }
    .team-info h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
    .team-info span { font-size: 13px; color: var(--green-light); font-weight: 600; }
    .team-info p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 0.6rem; }

    /* ───── PROJECTS ───── */
    .projects-banner {
      background: var(--green);
      border-radius: 20px;
      padding: 4rem;
      color: white;
      margin-bottom: 4rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .projects-banner h2 { font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
    .projects-banner p { font-size: 16px; line-height: 1.8; opacity: 0.88; }
    .stat-pills { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
    .stat-pill {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 100px;
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 700;
      color: white;
    }
    .stat-pill em { font-style: normal; font-size: 20px; font-family: 'Bricolage Grotesque'; display: block; }

    .project-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
    .proj-card {
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .proj-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-4px); }
    .proj-card-img { height: 200px; overflow: hidden; }
    .proj-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
    .proj-card:hover .proj-card-img img { transform: scale(1.06); }
    .proj-card-body { padding: 1.75rem; }
    .proj-card-tag {
      display: inline-block;
      background: var(--green-pale);
      color: var(--green);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      margin-bottom: 0.75rem;
    }
    .proj-card-body h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 0.75rem; }
    .proj-card-body p { font-size: 14px; color: var(--muted); line-height: 1.75; }

    .why-matters {
      background: var(--sand);
      border-radius: 16px;
      padding: 3rem;
      border-left: 4px solid var(--green-light);
    }
    .why-matters h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
    .why-matters p { font-size: 15px; color: var(--muted); line-height: 1.8; }

    /* ───── GET INVOLVED ───── */
    .involved-hero {
      background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
      border-radius: 20px;
      padding: 5rem 4rem;
      color: white;
      text-align: center;
      margin-bottom: 4rem;
      position: relative;
      overflow: hidden;
    }
    .involved-hero::before {
      content: '🌱';
      font-size: 200px;
      position: absolute;
      right: -30px;
      bottom: -40px;
      opacity: 0.07;
    }
    .involved-hero h2 { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
    .involved-hero p { font-size: 18px; opacity: 0.88; line-height: 1.7; max-width: 580px; margin: 0 auto; }

    .involved-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
    .inv-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2.5rem;
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .inv-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); border-color: var(--green-light); }
    .inv-card-icon {
      width: 56px;
      height: 56px;
      background: var(--green-pale);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 1.5rem;
    }
    .inv-card h3 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 1rem; }
    .inv-card p { font-size: 14.5px; color: var(--muted); line-height: 1.8; margin-bottom: 1.25rem; }
    .inv-card .highlights {
      list-style: none;
      margin-bottom: 2rem;
    }
    .inv-card .highlights li {
      font-size: 13.5px;
      color: var(--ink);
      padding: 5px 0;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-weight: 600;
    }
    .inv-card .highlights li::before { content: '✓'; color: var(--green-light); flex-shrink: 0; }
    .inv-card .btn { width: 100%; justify-content: center; }

    .donate-banner {
      background: var(--sand);
      border-radius: 20px;
      padding: 3rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: center;
      border: 1px solid var(--border);
      margin-bottom: 2rem;
    }
    .donate-banner h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
    .donate-banner p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }
    .cert-badge {
      background: #FFF8E8;
      border: 1px solid #F0D080;
      border-radius: 14px;
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      color: #7A5500;
    }
    .cert-badge-icon { font-size: 22px; flex-shrink: 0; }

    /* ───── ARTICLES ───── */
    .articles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
    }
    .art-card {
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .art-card:hover { box-shadow: 0 10px 35px rgba(0,0,0,0.1); transform: translateY(-4px); }
    .art-img {
      height: 190px;
      overflow: hidden;
      background: var(--green-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
    }
    .art-img img { width: 100%; height: 100%; object-fit: cover; }
    .art-body { padding: 1.5rem; }
    .art-date { font-size: 12px; color: var(--green-light); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.5rem; text-transform: uppercase; }
    .art-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 0.6rem; line-height: 1.35; }
    .art-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
    .art-read-more { font-size: 13px; color: var(--green); font-weight: 700; margin-top: 1rem; display: inline-flex; align-items: center; gap: 4px; }
    .art-read-more::after { content: '→'; }

    /* ───── FAQ ───── */
    .faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; }
    .faq-sidebar h3 { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 1rem; }
    .faq-sidebar p { font-size: 14.5px; color: var(--muted); line-height: 1.75; margin-bottom: 1.5rem; }
    .faq-list { display: flex; flex-direction: column; gap: 8px; }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: white;
      transition: border-color 0.2s;
    }
    .faq-item:hover { border-color: var(--green-light); }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 1.5rem;
      cursor: pointer;
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
      gap: 1rem;
    }
    .faq-arrow { color: var(--green); font-size: 18px; transition: transform 0.3s; flex-shrink: 0; font-weight: 400; }
    .faq-arrow.open { transform: rotate(180deg); }
    .faq-answer {
      display: none;
      padding: 0 1.5rem 1.25rem;
      font-size: 14.5px;
      color: var(--muted);
      line-height: 1.8;
      border-top: 1px solid var(--border);
      padding-top: 1rem;
      margin: 0 1.5rem;
    }
    .faq-answer.open { display: block; }

    /* ───── CONTACT ───── */
    .contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
    .contact-info-panel {
      background: var(--green);
      border-radius: 20px;
      padding: 2.5rem;
      color: white;
      position: sticky;
      top: 90px;
    }
    .contact-info-panel h3 { font-size: 22px; font-weight: 800; margin-bottom: 0.5rem; }
    .contact-info-panel > p { font-size: 14.5px; opacity: 0.8; margin-bottom: 2rem; line-height: 1.7; }
    .contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1.5rem; }
    .contact-item-icon {
      width: 40px;
      height: 40px;
      background: rgba(255,255,255,0.15);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .contact-item h4 { font-size: 13px; font-weight: 700; opacity: 0.7; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
    .contact-item p, .contact-item a { font-size: 15px; color: white; text-decoration: none; line-height: 1.5; }
    .contact-item a:hover { text-decoration: underline; }
    .contact-hours {
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 1.25rem;
      margin-top: 2rem;
      font-size: 13.5px;
      line-height: 1.7;
      opacity: 0.9;
    }
    .contact-hours strong { display: block; margin-bottom: 0.5rem; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

    .contact-form-panel { background: white; border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; }
    .contact-form-panel h3 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }
    .contact-form-panel > p { font-size: 14.5px; color: var(--muted); margin-bottom: 2rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { margin-bottom: 1.25rem; }
    .form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: 0.02em; }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      color: var(--ink);
      background: var(--white);
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
    }
    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--green-light);
      box-shadow: 0 0 0 3px rgba(43,168,118,0.12);
    }
    .form-group textarea { min-height: 130px; resize: vertical; }
    .form-submit {
      width: 100%;
      padding: 14px;
      background: var(--green);
      color: white;
      border: none;
      border-radius: 10px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      letter-spacing: -0.01em;
    }
    .form-submit:hover { background: var(--green-mid); box-shadow: 0 6px 20px rgba(13,94,63,0.25); transform: translateY(-2px); }

    /* ───── MODAL ───── */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
    }
    .modal.active { display: flex; }
    .modal-box {
      background: white;
      border-radius: 20px;
      width: 95%;
      max-width: 860px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    }
    .modal-head {
      background: var(--green);
      padding: 2rem 2.5rem;
      border-radius: 20px 20px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modal-head h2 { font-size: 22px; font-weight: 700; color: white; }
    .modal-close {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.3); }

    /* ───── FOOTER ───── */
    footer {
      background: var(--ink);
      color: white;
      padding: 4rem 2rem 2rem;
      margin-top: 4rem;
    }
    .footer-inner {
      max-width: 1240px;
      margin: 0 auto;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 2rem;
    }
    .footer-brand p { font-size: 14px; opacity: 0.6; line-height: 1.75; margin-top: 1rem; max-width: 280px; }
    .footer-logo {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: white;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .footer-logo-icon {
      width: 32px;
      height: 32px;
      background: var(--green-light);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .footer-col h5 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 1.25rem;
    }
    .footer-col a {
      display: block;
      font-size: 14px;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      margin-bottom: 0.6rem;
      cursor: pointer;
      transition: color 0.2s;
    }
    .footer-col a:hover { color: var(--green-light); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      opacity: 0.45;
    }

    /* ───── RESPONSIVE ───── */
    @media (max-width: 1024px) {
      .hero { min-height: 100svh; }
      .hero-content { padding: 6rem 1.5rem 4rem; max-width: 100%; }
      .slide-arrow { display: none; }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .articles-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: white;
        border-bottom: 1px solid var(--border);
        padding: 1rem 1.5rem;
        gap: 4px;
      }
      .mission-strip-inner,
      .about-grid,
      .image-feature,
      .quote-block,
      .projects-banner,
      .involved-cards,
      .faq-layout,
      .contact-layout,
      .donate-banner { grid-template-columns: 1fr; }
      .stats-row { grid-template-columns: 1fr; }
      .project-cards { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: 1fr 1fr; }
      .articles-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
      .image-feature-text { padding: 2rem; }
      .involved-hero { padding: 3rem 2rem; }
      .contact-info-panel { position: static; }
    }
  

/* =========================================================
   CALCULATOR — INDIVIDUAL (calculator-individual.html only)
   Vars renamed to avoid collisions with the shared sheet above:
   --border -> --tz-border
   ========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#0D5E3F;--secondary:#2BA876;--light-bg:#F0F9F6;
--text-dark:#1a1a1a;--text-light:#666;--tz-border:#e0e0e0;
--success:#27ae60;--warning:#f39c12;--tz-danger:#e74c3c;--gold:#C9A227;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#dfe9e5;color:var(--text-dark);line-height:1.6}
.container{max-width:820px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.12)}

/* PROGRESS HEADER */
.progress-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid var(--secondary);padding:14px 20px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.progress-row{display:flex;align-items:center;gap:14px}
.progress-bar{flex:1;height:9px;background:var(--tz-border);border-radius:10px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--secondary),var(--success));width:0%;transition:width .4s ease}
.language-toggle{display:flex;gap:4px;background:var(--light-bg);padding:3px;border-radius:6px}
.lang-btn{padding:6px 14px;border:none;background:transparent;color:var(--text-dark);cursor:pointer;font-size:12px;font-weight:700;border-radius:4px;transition:all .3s}
.lang-btn.active{background:#fff;color:var(--primary);box-shadow:0 2px 5px rgba(0,0,0,.1)}

/* HEADER */
.header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:26px 20px;text-align:center}
.header .leaf{font-size:30px;margin-bottom:4px}
.header h1{font-size:22px;margin-bottom:3px;font-weight:700}
.header p{font-size:13px;opacity:.92}

/* CONTENT */
.content{flex:1;padding:32px 24px}
.question-section{display:none}
.question-section.active{display:block;animation:slideUp .4s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.q-number{display:inline-block;background:var(--light-bg);color:var(--primary);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.question-title{font-size:23px;color:var(--primary);margin-bottom:8px;font-weight:700;line-height:1.3}
.question-subtitle{font-size:13.5px;color:var(--text-light);margin-bottom:26px}

.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:11px}
.opt{padding:15px 16px;border:2px solid var(--tz-border);border-radius:10px;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:13px;background:#fff}
.opt:hover{border-color:var(--secondary);background:var(--light-bg);transform:translateX(4px)}
.opt.selected{background:var(--light-bg);border-color:var(--secondary);box-shadow:0 0 0 3px rgba(43,168,118,.12)}
.opt input{width:19px;height:19px;cursor:pointer;accent-color:var(--secondary);flex-shrink:0}
.opt-body{flex:1}
.opt-title{font-weight:600;font-size:14.5px;color:var(--text-dark)}
.opt-desc{font-size:12px;color:var(--text-light);margin-top:2px}

input[type=text],input[type=email],input[type=number],select{width:100%;padding:14px 15px;border:2px solid var(--tz-border);border-radius:10px;font-size:15px;font-family:inherit;transition:all .3s;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(43,168,118,.12)}
.input-suffix{font-size:12px;color:var(--text-light);margin-top:6px}
.num-wrap{position:relative}
.skip-note{font-size:12px;color:var(--text-light);margin-top:14px;font-style:italic}

/* FOOTER */
.footer{padding:18px 24px;display:flex;gap:11px;background:#fff;border-top:1px solid var(--tz-border)}
.btn{flex:1;padding:15px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:.4px}
.btn-primary{background:var(--secondary);color:#fff}
.btn-primary:hover{background:var(--primary);transform:translateY(-2px);box-shadow:0 8px 16px rgba(43,168,118,.3)}
.btn-secondary{background:#eef2f0;color:var(--text-dark)}
.btn-secondary:hover{background:var(--light-bg)}

/* RESULTS */
.results-page{display:none}
.results-page.active{display:block;animation:fadeIn .5s ease}
.results-header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:34px 22px;text-align:center}
.results-header h1{font-size:25px;margin-bottom:6px}
.results-header p{font-size:13.5px;opacity:.92}
.results-content{padding:26px 22px}

.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.kpi{background:var(--light-bg);padding:18px 12px;border-radius:12px;text-align:center;border-bottom:3px solid var(--secondary)}
.kpi-val{font-size:26px;font-weight:800;color:var(--primary);line-height:1.1}
.kpi-unit{font-size:11px;color:var(--text-light);margin-top:4px}
.kpi-lbl{font-size:11px;font-weight:700;color:var(--secondary);text-transform:uppercase;margin-bottom:8px;letter-spacing:.3px}

.card{background:#fff;border:2px solid var(--tz-border);border-radius:14px;padding:22px;margin-bottom:20px}
.card-title{color:var(--primary);font-size:16px;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:.4px}

/* comparison */
.cmp-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cmp-lbl{min-width:110px;font-size:12.5px;font-weight:700}
.cmp-track{flex:1;height:32px;background:#eef2f0;border-radius:6px;overflow:hidden}
.cmp-fill{height:100%;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1);border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:11px;font-weight:700}

/* earths / target */
.earth-box{background:linear-gradient(135deg,rgba(13,94,63,.06),rgba(43,168,118,.06));padding:26px;border-radius:14px;border:2px solid var(--secondary);margin-bottom:20px;text-align:center}
.earth-big{font-size:54px;font-weight:800;color:var(--primary);margin:8px 0;line-height:1}
.earth-cap{font-size:13.5px;color:var(--text-light)}
.target-pill{display:inline-block;margin-top:14px;background:#fff;border:1px solid var(--secondary);color:var(--primary);font-size:12px;font-weight:700;padding:7px 14px;border-radius:20px}

/* quote */
.quote{background:#fffdf5;border-left:5px solid var(--gold);padding:22px;border-radius:12px;margin-bottom:20px;font-style:italic;font-size:15px;color:#3a3a2a;line-height:1.7}
.quote-by{margin-top:10px;font-style:normal;font-weight:700;color:var(--primary)}

/* trees */
.tree-box{background:linear-gradient(135deg,var(--success),var(--secondary));color:#fff;padding:26px;border-radius:14px;text-align:center;margin-bottom:20px}
.tree-num{font-size:50px;font-weight:800;margin:6px 0;line-height:1}
.tree-cap{font-size:13.5px;opacity:.95}

.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.pkg{padding:16px 10px;border:2px solid var(--tz-border);border-radius:11px;text-align:center;cursor:pointer;transition:all .3s;background:#fff}
.pkg:hover{border-color:var(--secondary);transform:translateY(-4px);box-shadow:0 8px 16px rgba(43,168,118,.2)}
.pkg.featured{border-color:var(--gold);background:#fffdf5}
.pkg-trees{font-size:19px;font-weight:800;color:var(--secondary)}
.pkg-price{font-size:12px;color:var(--text-light);margin:6px 0 10px}
.pkg-btn{width:100%;padding:8px;background:var(--secondary);color:#fff;border:none;border-radius:6px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .3s}
.pkg-btn:hover{background:var(--primary)}

/* recommendations */
.rec{padding:15px;margin-bottom:10px;background:var(--light-bg);border-radius:10px;border-left:4px solid var(--secondary)}
.rec-t{font-weight:700;color:var(--primary);margin-bottom:3px;font-size:14px}
.rec-d{font-size:12.5px;color:var(--text-light)}

/* user form */
.uform input{margin-bottom:11px}

/* PLANT TREES big CTA */
.plant-cta{display:block;width:100%;padding:22px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;border-radius:16px;font-size:18px;font-weight:800;cursor:pointer;text-transform:uppercase;letter-spacing:.6px;transition:all .3s;margin:8px 0 26px;text-align:center;box-shadow:0 10px 24px rgba(13,94,63,.3);text-decoration:none}
.plant-cta:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(13,94,63,.4)}
.plant-cta .sub{display:block;font-size:11px;font-weight:600;opacity:.9;letter-spacing:.3px;margin-top:5px;text-transform:none}

.action-row{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.act{padding:14px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:9px}
.act-pdf{background:var(--secondary);color:#fff}
.act-pdf:hover{background:var(--primary)}
.act-wa{background:#25D366;color:#fff}
.act-wa:hover{filter:brightness(.92)}

.importance{background:var(--light-bg);padding:20px;border-radius:12px;border-left:4px solid var(--primary);font-size:13.5px;line-height:1.8;margin-bottom:14px}

/* ENVIRONMENTAL COST VISUAL */
.eco-section{background:#0d1f17;color:#e8f5ef;border-radius:16px;padding:28px 22px;margin:26px 0}
.eco-head{text-align:center;margin-bottom:26px}
.eco-head h2{font-size:21px;color:#fff;margin-bottom:6px}
.eco-head p{font-size:13px;color:#8fc9ad}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.eco-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px 12px;text-align:center}
.eco-stat .ico{font-size:24px;margin-bottom:6px}
.eco-stat .val{font-size:24px;font-weight:800;color:#fff;line-height:1.1}
.eco-stat .lbl{font-size:10.5px;color:#8fc9ad;margin-top:5px;text-transform:uppercase;letter-spacing:.3px}
.eco-block{background:rgba(255,255,255,.04);border-radius:12px;padding:20px;margin-bottom:18px}
.eco-block h3{font-size:14px;color:#fff;margin-bottom:16px;text-align:center}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.bar-yr{min-width:42px;font-size:12px;color:#8fc9ad;font-weight:700}
.bar-track{flex:1;height:22px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:5px;transition:width 1.4s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:10.5px;font-weight:700;color:#fff}
.eco-flex{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.eco-flex{grid-template-columns:1fr}}
.pie-wrap{text-align:center}
.pie-wrap canvas{max-width:180px;margin:0 auto}
.counter-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.counter-big{font-size:38px;font-weight:800;color:#ff7b6b;line-height:1}
.counter-lbl{font-size:12px;color:#8fc9ad;margin-top:8px}
.eco-foot{text-align:center;font-size:12.5px;color:#8fc9ad;margin-top:20px;line-height:1.7;font-style:italic}

@media(max-width:768px){
.container{box-shadow:none}
.content{padding:24px 18px}
.question-title{font-size:20px}
.kpi-grid{grid-template-columns:1fr;gap:10px}
.kpi{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:14px 16px}
.kpi-lbl{margin-bottom:0}
.pkg-grid{grid-template-columns:1fr 1fr}
.eco-grid{grid-template-columns:1fr}
.earth-big{font-size:46px}
.tree-num{font-size:42px}
.btn{padding:14px;font-size:13px}
}

/* =========================================================
   CALCULATOR — CORPORATE / SUSTEV (calculator-corporate.html only)
   Vars renamed to avoid collisions with the shared sheet above:
   --green -> --sv-green, --ink -> --sv-ink, --white -> --sv-white
   ========================================================= */

  :root{
    --sv-green:#0D5E3F; --leaf:#2BA876; --gold:#C9A227; --pale:#EAF4EF;
    --goldlt:#EFE3B8; --navy:#1F4E79; --sv-ink:#16241D; --grey:#5b6b63;
    --line:#d7e3dc; --bg:#f4f8f5; --sv-white:#fff; --danger:#C0392B;
    --shadow:0 1px 3px rgba(13,94,63,.08),0 8px 24px rgba(13,94,63,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);color:var(--sv-ink);line-height:1.5;font-size:15px;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.01em;line-height:1.2}
  .mono{font-family:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,select{font-family:inherit;font-size:15px}

  /* ---------- shell ---------- */
  .app{min-height:100vh;display:flex;flex-direction:column}
  .topbar{background:var(--sv-green);color:#fff;padding:0 18px;height:58px;display:flex;align-items:center;
    justify-content:space-between;position:sticky;top:0;z-index:40;box-shadow:0 2px 12px rgba(13,94,63,.18)}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.02em}
  .brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--leaf),var(--gold));
    display:flex;align-items:center;justify-content:center;font-size:17px}
  .brand small{display:block;font-weight:400;font-size:10.5px;opacity:.78;letter-spacing:.02em;margin-top:-2px}
  .top-right{display:flex;align-items:center;gap:14px;font-size:13px}
  .who{text-align:right;line-height:1.25}
  .who b{font-size:13px}.who span{font-size:11px;opacity:.8;display:block}
  .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.35);padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600}
  .btn-ghost:hover{background:rgba(255,255,255,.12)}

  .wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px;width:100%}

  /* ---------- buttons ---------- */
  .btn{background:var(--sv-green);color:#fff;padding:12px 20px;border-radius:10px;font-weight:650;font-size:14.5px;
    display:inline-flex;align-items:center;gap:8px;transition:.15s;box-shadow:var(--shadow)}
  .btn:hover{background:#0a4d33;transform:translateY(-1px)}
  .btn.gold{background:var(--gold);color:#3a2e05}.btn.gold:hover{background:#b8941f}
  .btn.outline{background:#fff;color:var(--sv-green);border:1.5px solid var(--line)}
  .btn.outline:hover{border-color:var(--leaf);background:var(--pale)}
  .btn.lg{padding:15px 28px;font-size:16px;border-radius:12px}
  .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

  .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
  .pad{padding:24px}
  .eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--leaf)}

  /* ---------- login ---------- */
  .login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
    background:#dfe9e5}
  .login-card{background:#fff;border-radius:22px;max-width:900px;width:100%;padding:34px 34px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
  .login-card .llogo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--leaf),var(--gold));
    display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px}
  .login-card h1{font-size:23px;color:var(--sv-green)}
  .login-card .sub{color:var(--grey);font-size:13.5px;margin:6px 0 24px}
  .field{margin-bottom:15px}
  .field label{display:block;font-size:12.5px;font-weight:650;color:var(--sv-ink);margin-bottom:6px}
  .field input,.field select{width:100%;padding:14px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfc;transition:.15s}
  .field input:focus,.field select:focus{outline:none;border-color:var(--leaf);background:#fff;box-shadow:0 0 0 3px rgba(43,168,118,.12)}
  .demo-pills{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px}
  .demo-pill{border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;
    cursor:pointer;transition:.15s;text-align:left;width:100%;background:#fff}
  .demo-pill:hover{border-color:var(--leaf);background:var(--pale)}
  .demo-pill .ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
  .demo-pill b{font-size:13.5px;display:block}.demo-pill span{font-size:11.5px;color:var(--grey)}
  .divider{display:flex;align-items:center;gap:12px;color:var(--grey);font-size:11.5px;margin:20px 0;font-weight:600}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

  /* ---------- tabs ---------- */
  .tabs{display:flex;gap:4px;background:#e7f0ea;padding:5px;border-radius:13px;margin-bottom:22px;overflow-x:auto}
  .tab{padding:10px 17px;border-radius:9px;font-size:13.5px;font-weight:650;color:var(--grey);white-space:nowrap;transition:.15s}
  .tab.active{background:#fff;color:var(--sv-green);box-shadow:var(--shadow)}

  /* ---------- dashboard ---------- */
  .hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
  .stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;box-shadow:var(--shadow)}
  .stat .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
  .stat .v{font-size:26px;font-weight:750;margin:5px 0 2px;letter-spacing:-.02em}
  .stat .u{font-size:12px;color:var(--grey)}
  .stat.green .v{color:var(--sv-green)} .stat.leaf .v{color:var(--leaf)} .stat.gold .v{color:#a8841a} .stat.navy .v{color:var(--navy)}

  .scope-bar{display:flex;height:30px;border-radius:8px;overflow:hidden;margin:14px 0 8px;border:1px solid var(--line)}
  .scope-seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;min-width:38px}
  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--grey)}
  .legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}

  /* signature: offset vs delay */
  .signature{background:linear-gradient(150% 130% at 100% 0,#10402c 0%,#0D5E3F 55%,#0a4d33 100%);
    color:#fff;border-radius:18px;padding:26px;position:relative;overflow:hidden}
  .signature::after{content:"";position:absolute;right:-50px;bottom:-50px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(201,162,39,.30),transparent 70%);z-index:1}
  .signature .eyebrow{color:var(--goldlt);position:relative;z-index:2}
  .signature h3{position:relative;z-index:2}
  .sig-row{display:flex;gap:14px;margin-top:16px;position:relative;z-index:2}
  .sig-box{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:15px}
  .sig-box.now{background:rgba(201,162,39,.18);border-color:rgba(201,162,39,.5)}
  .sig-box .lab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.82;font-weight:700}
  .sig-box .big{font-size:23px;font-weight:780;margin-top:5px;letter-spacing:-.02em}
  .sig-box .sm{font-size:11.5px;opacity:.8;margin-top:3px}
  .sig-save{margin-top:16px;background:var(--gold);color:#3a2e05;border-radius:12px;padding:14px 16px;font-weight:700;
    display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2;flex-wrap:wrap}
  .sig-save .amt{font-size:21px;letter-spacing:-.02em}

  .branch-table{width:100%;border-collapse:collapse;font-size:13.5px}
  .branch-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);
    padding:9px 12px;border-bottom:2px solid var(--line)}
  .branch-table td{padding:11px 12px;border-bottom:1px solid var(--line)}
  .branch-table tr:last-child td{border-bottom:none}
  .pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
  .pill.done{background:#e3f3ea;color:#1c7a4d}.pill.wait{background:#fdf3df;color:#9a7b1a}

  /* ---------- wizard ---------- */
  .wizard{display:grid;grid-template-columns:230px 1fr;gap:22px}
  .steps{display:flex;flex-direction:column;gap:3px}
  .step{padding:13px 15px;border-radius:11px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.15s;border:1px solid transparent}
  .step:hover{background:#fff}
  .step.active{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
  .step.done .num{background:var(--leaf);color:#fff}
  .step .num{width:27px;height:27px;border-radius:50%;background:#e1ece6;color:var(--grey);display:flex;align-items:center;
    justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
  .step.active .num{background:var(--sv-green);color:#fff}
  .step .lbl{font-size:13.5px;font-weight:600}.step .lbl small{display:block;font-size:11px;color:var(--grey);font-weight:400}

  .q{margin-bottom:20px}
  .q label{display:block;font-weight:650;font-size:14.5px;margin-bottom:7px}
  .q .hint{font-size:12px;color:var(--grey);margin-bottom:9px;font-weight:400}
  .q .inrow{display:flex;gap:10px;align-items:center}
  .q input[type=number],.q select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfc}
  .q input:focus,.q select:focus{outline:none;border-color:var(--leaf);background:#fff;box-shadow:0 0 0 3px rgba(43,168,118,.12)}
  .q .unit{font-size:13px;color:var(--grey);white-space:nowrap;font-weight:600}
  .scope-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:middle}
  .s1{background:#fde8e4;color:#b23a23}.s2{background:#e5eefb;color:#2a5ca8}.s3{background:#ede7f6;color:#6a4ca0}
  .live{background:var(--pale);border:1px solid var(--line);border-radius:13px;padding:16px 18px;position:sticky;top:74px}
  .live .lk{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);font-weight:700}
  .live .lv{font-size:25px;font-weight:760;color:var(--sv-green);margin:3px 0}
  .grp-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf);
    margin:4px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--pale)}

  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--sv-ink);color:#fff;
    padding:13px 20px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:90;
    transition:transform .35s cubic-bezier(.2,.9,.3,1.2);display:flex;align-items:center;gap:9px}
  .toast.show{transform:translateX(-50%) translateY(0)}

  .hide{display:none!important}
  .foot{text-align:center;color:var(--grey);font-size:11.5px;margin-top:30px;line-height:1.6}

  @media(max-width:860px){
    .hero-grid{grid-template-columns:1fr}
    .stat-grid{grid-template-columns:1fr 1fr}
    .wizard{grid-template-columns:1fr}
    .steps{flex-direction:row;overflow-x:auto;padding-bottom:4px}
    .step{flex-shrink:0;min-width:140px}
    .step .lbl small{display:none}
    .live{position:static}
    .sig-row{flex-direction:column}
    .wrap{padding:16px 13px 50px}
  }
  @media(max-width:560px){
    .stat-grid{grid-template-columns:1fr 1fr}
    .topbar{padding:0 13px}.brand small{display:none}
  }