:root{
    /* Brand palette — primary #5832a8, triadic #a83247 / #82a832 / #32a893 */
    --primary:#5832a8;     /* primary purple */
    --teal:#32a893;        /* triadic teal */
    --red:#a83247;         /* triadic red */
    --olive:#82a832;       /* triadic green */
    --primary-lt:#7d54d6;  /* lighter purple for accents */
    --navy:#1c1245;        /* deep ink, from wordmark */

    /* semantic aliases used throughout the page (mapped to brand) */
    --blue:var(--primary-lt); --amber:var(--olive); --mint:var(--teal);
    --coral:var(--red); --indigo:var(--primary); --cyan:var(--teal);

    --ink:#1c1245; --ink-soft:#5e5878; --paper:#fbfaff; --paper-2:#f1edfa;
    --line:#e4def2; --white:#ffffff; --shadow:0 26px 60px -30px rgba(45,28,110,.4); --r:18px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Sora',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.02em}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1200px;margin:0 auto;padding:0 28px}
  .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);display:inline-flex;align-items:center;gap:9px}
  .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--coral)}

  header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(12px);background:rgba(251,250,255,.85);border-bottom:1px solid var(--line)}
  nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo img{height:38px;display:block}
  .navlinks{display:flex;gap:32px;align-items:center}
  .navlinks a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
  .navlinks a:hover{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;padding:13px 24px;border-radius:100px;font-weight:600;font-size:.9rem;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif}
  .btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(45,28,110,.6)}
  .btn.grad{background:linear-gradient(100deg,var(--coral),var(--indigo) 55%,var(--blue));color:#fff}
  .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:#fff}
  
  .nav-item {
    position: relative;
  }

  .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .dropdown-toggle::after {
    content: "▾";
    font-size: 0.7rem;
    line-height: 1;
    transform: translateY(1px);
    transition: transform 0.2s ease;
  }

  .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg) translateY(-1px);
  }

  .dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px -32px rgba(45, 28, 110, 0.45);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0.22s ease;
    z-index: 100;
  }

  .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
  }

  .dropdown-menu a {
    display: block;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      transform 0.2s ease;
  }

  .dropdown-menu a:hover {
    background: var(--paper-2);
    color: var(--ink);
    transform: translateX(2px);
  }

  .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  
  @media(max-width:880px){.navlinks .hide-m{display:none}}
  @media (max-width: 880px) {
    .navlinks {
      gap: 18px;
    }

    .nav-item.dropdown {
      display: none;
    }
  }

  /* HERO */
  .hero{position:relative;padding:80px 0 70px;overflow:hidden}
  .hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 420px at 90% -8%, rgba(125,84,214,.16), transparent 60%),radial-gradient(520px 460px at 100% 45%, rgba(88,50,168,.12), transparent 60%),radial-gradient(420px 380px at -6% 25%, rgba(50,168,147,.12), transparent 60%)}
  .hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:48px;align-items:center}
  .hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;letter-spacing:-.03em}
  .hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--coral),var(--indigo) 55%,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero p.lede{font-size:1.14rem;color:var(--ink-soft);max-width:40ch;margin:24px 0 32px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

  /* INTERACTIVE ZONE SHOWPIECE */
  .sim{background:var(--white);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
  .sim-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper-2)}
  .sim-top .ttl{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:9px}
  .sim-top .ttl::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(50,168,147,.6);animation:pulse 2.2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(50,168,147,.6)}70%{box-shadow:0 0 0 9px rgba(50,168,147,0)}100%{box-shadow:0 0 0 0 rgba(50,168,147,0)}}
  .sim-top .tag-mini{font-size:.68rem;font-weight:600;color:var(--indigo);background:rgba(88,50,168,.1);padding:4px 10px;border-radius:100px}
  .sim-body{display:grid;grid-template-columns:1.25fr 1fr}
  .sim-map{position:relative;background:linear-gradient(160deg,#f6f3ff,#eef6ff);padding:6px}
  .sim-map svg{width:100%;height:100%;display:block;touch-action:none}
  .handle{cursor:grab;transition:r .15s}
  .handle:active{cursor:grabbing}
  .sim-side{padding:20px 22px;display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--line)}
  .sim-side .lab{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
  .metric{display:flex;flex-direction:column;gap:6px}
  .metric .row{display:flex;align-items:baseline;justify-content:space-between}
  .metric .nm{font-size:.84rem;color:var(--ink-soft);font-weight:500}
  .metric .vl{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;transition:color .3s}
  .bar{height:7px;border-radius:100px;background:var(--paper-2);overflow:hidden}
  .bar i{display:block;height:100%;border-radius:100px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
  .delta{font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:100px;margin-left:6px}
  .delta.up{color:#0f8a86;background:rgba(50,168,147,.16)}
  .delta.dn{color:var(--coral);background:rgba(168,50,71,.13)}
  .sim-hint{font-size:.74rem;color:var(--ink-soft);text-align:center;padding:9px;border-top:1px solid var(--line);background:var(--paper-2)}
  .sim-hint b{color:var(--indigo)}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

  section.block{padding:96px 0}
  .section-head{max-width:64ch;margin-bottom:48px}
  .section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:16px 0 14px;letter-spacing:-.03em}
  .section-head p{font-size:1.06rem;color:var(--ink-soft)}

  /* SCENARIO TOGGLE */
  .scenarios{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .toggle{display:inline-flex;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:5px;gap:4px;margin-bottom:14px;box-shadow:0 8px 24px -16px rgba(45,28,110,.5)}
  .toggle button{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;border:none;background:transparent;color:var(--ink-soft);padding:11px 22px;border-radius:100px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px}
  .toggle button.on{color:#fff}
  .toggle button.on.grow{background:linear-gradient(100deg,var(--mint),var(--blue))}
  .toggle button.on.shrink{background:linear-gradient(100deg,var(--coral),var(--indigo))}
  .scenario-panel{display:none;animation:fade .5s ease}
  .scenario-panel.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .scn-intro{max-width:60ch;margin-bottom:36px}
  .scn-intro h3{font-size:1.7rem;margin-bottom:10px}
  .scn-intro p{color:var(--ink-soft);font-size:1.04rem}
  .scn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .scn-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
  .scn-card .pain{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--coral)}
  .scn-card.g .pain{color:#0f8a86}
  .scn-card h4{font-size:1.18rem}
  .scn-card p{font-size:.9rem;color:var(--ink-soft);flex:1}
  .scn-chart{margin-top:4px}
  .scn-result{font-size:.78rem;color:var(--ink-soft);display:flex;align-items:center;gap:7px;border-top:1px dashed var(--line);padding-top:12px}
  .scn-result b{font-family:'Space Grotesk',sans-serif}
  .proj{font-size:.66rem;color:var(--ink-soft);opacity:.8;font-style:italic;margin-top:2px}

  /* BOUNDARY SIM SECTION (charts) */
  .chartgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .chartcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;position:relative;overflow:hidden}
  .chartcard h4{font-size:1.05rem;margin-bottom:4px;display:flex;align-items:center;gap:9px}
  .chartcard .sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:18px}
  .dot{width:9px;height:9px;border-radius:50%;flex:none}
  .legend{display:flex;gap:16px;margin-top:14px;font-size:.76rem;color:var(--ink-soft)}
  .legend span{display:flex;align-items:center;gap:6px}
  .legend i{width:14px;height:3px;border-radius:2px;display:inline-block}

  /* RIPPLE */
  .ripple{background:var(--navy);color:#ece8fb;position:relative;overflow:hidden}
  .ripple .eyebrow{color:var(--amber)} .ripple .eyebrow::before{background:var(--amber)}
  .ripple h2{color:#fff;font-size:clamp(2rem,3.6vw,2.9rem)}
  .ripple-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .ripple p{color:#c5bfe6;font-size:1.05rem;margin-top:16px}
  .ripple .card-dark{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:24px;backdrop-filter:blur(4px)}
  .zrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
  .zrow:last-child{border-bottom:none}
  .zrow .zn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem;width:92px;flex:none}
  .zrow .zbar{flex:1;height:8px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden;position:relative}
  .zrow .zbar i{position:absolute;top:0;bottom:0;border-radius:100px;transition:all .5s}
  .zrow .zd{font-size:.78rem;font-weight:600;width:54px;text-align:right;flex:none}
  .zd.up{color:var(--mint)} .zd.dn{color:var(--coral)} .zd.flat{color:#9b93c4}

  /* PRIVACY */
  .privacy{position:relative;overflow:hidden}
  .privacy .pattern{position:absolute;right:-70px;top:-50px;width:480px;opacity:.06;pointer-events:none}
  .privacy-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .privacy h2{font-size:clamp(2rem,3.6vw,2.8rem)}
  .privacy p{color:var(--ink-soft);font-size:1.04rem;margin-top:16px}
  .privacy em{font-style:normal;font-weight:600;color:var(--indigo)}
  .zone-list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .zone-list span{font-size:.9rem;color:var(--ink);display:flex;align-items:center;gap:9px}
  .zone-list span::before{content:"◆";color:var(--amber);font-size:.66rem}
  .pflow{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
  .flow-step{display:flex;gap:15px;padding:16px 0;border-bottom:1px dashed var(--line)}
  .flow-step:last-child{border-bottom:none}
  .flow-step .n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--amber);color:var(--navy);font-family:'Space Grotesk',sans-serif;font-weight:700;display:grid;place-items:center;font-size:1rem}
  .flow-step b{display:block;font-size:1rem;margin-bottom:2px}
  .flow-step small{color:var(--ink-soft);font-size:.86rem;line-height:1.45}

  /* CTA */
  .cta{background:linear-gradient(120deg,var(--navy),var(--indigo));color:#fff;border-radius:28px;padding:70px 56px;position:relative;overflow:hidden;text-align:center}
  .cta .pattern{position:absolute;left:0px;bottom:0px;width:1500px;opacity:.1;pointer-events:none}
  .cta h2{color:#fff;font-size:clamp(2rem,4vw,3rem);max-width:30ch;margin:0 auto 14px;position:relative;letter-spacing:-.03em}
  .cta p{color:#cfc8f0;max-width:55ch;margin:0 auto 30px;font-size:1.06rem;position:relative}
  .cta .btn{position:relative;background:#fff;color:var(--navy)} .cta .btn:hover{background:var(--amber)}

  footer{padding:62px 0 36px;border-top:1px solid var(--line)}
  .foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
  .foot-logo img{height:34px;margin-bottom:6px}
  footer h5{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;font-weight:600;font-family:'Space Grotesk',sans-serif}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  footer a{font-size:.9rem;color:var(--ink-soft);transition:color .2s} footer a:hover{color:var(--ink)}
  footer .addr{font-size:.88rem;color:var(--ink-soft);line-height:1.7;margin-top:8px}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;font-size:.8rem;color:var(--ink-soft);flex-wrap:wrap;gap:12px}

  .social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }

  .social-links a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    transition:
      transform 0.2s ease,
      background 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .social-links a:hover {
    transform: translateY(-2px);
    background: var(--navy);
    color: #ffffff;
    box-shadow: 0 14px 28px -18px rgba(45, 28, 110, 0.65);
  }

  .social-links svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  @media(max-width:960px){
    .hero-grid,.privacy-grid,.ripple-grid{grid-template-columns:1fr;gap:40px}
    .scn-cards,.chartgrid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .sim-body{grid-template-columns:1fr}
    .sim-side{border-left:none;border-top:1px solid var(--line)}
    .cta{padding:52px 26px}
  }
  @media(max-width:520px){.zone-list,.foot-grid{grid-template-columns:1fr}.toggle{width:100%}.toggle button{flex:1;justify-content:center;padding:11px 10px}}
  
/* NEW HOME PAGE */
.new-home-hero{position:relative;padding:98px 0 86px;overflow:hidden;border-bottom:1px solid var(--line)}
.home-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(660px 420px at 86% 2%, rgba(125,84,214,.18), transparent 62%),radial-gradient(560px 440px at 6% 45%, rgba(50,168,147,.13), transparent 62%),linear-gradient(180deg,var(--paper),var(--paper-2))}
.home-hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.home-hero-copy h1{font-size:clamp(2.75rem,5.4vw,4.55rem);font-weight:700;letter-spacing:-.04em;max-width:13ch;margin-top:16px}
.home-hero-copy .lede{font-size:1.15rem;color:var(--ink-soft);max-width:48ch;margin:24px 0 32px}
.home-dashboard{background:var(--white);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(1deg)}
.dash-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--paper-2);border-bottom:1px solid var(--line);font-family:'Space Grotesk',sans-serif;font-weight:700}
.dash-top span{color:var(--ink)}.dash-top strong{font-size:.72rem;color:#0f8a86;background:rgba(50,168,147,.14);padding:5px 10px;border-radius:100px}
.dash-map{position:relative;height:310px;background:linear-gradient(135deg,#f9f7ff,#edf7f5);overflow:hidden}
.zone{position:absolute;border:2px solid rgba(88,50,168,.32);background:rgba(125,84,214,.12);border-radius:38% 62% 48% 52%;filter:drop-shadow(0 12px 24px rgba(45,28,110,.12))}
.z1{width:230px;height:150px;left:38px;top:42px;transform:rotate(-15deg)}.z2{width:260px;height:176px;right:34px;top:70px;background:rgba(50,168,147,.12);border-color:rgba(50,168,147,.38);transform:rotate(12deg)}.z3{width:220px;height:132px;left:150px;bottom:32px;background:rgba(168,50,71,.1);border-color:rgba(168,50,71,.28);transform:rotate(6deg)}
.zone-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 8px rgba(168,50,71,.12)}.p1{left:125px;top:118px}.p2{right:145px;top:150px;background:var(--teal);box-shadow:0 0 0 8px rgba(50,168,147,.13)}.p3{left:255px;bottom:92px;background:var(--primary);box-shadow:0 0 0 8px rgba(88,50,168,.13)}
.dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.dash-metrics div{padding:18px;text-align:center;border-right:1px solid var(--line)}.dash-metrics div:last-child{border-right:none}.dash-metrics b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.35rem}.dash-metrics span{font-size:.76rem;color:var(--ink-soft)}
.home-product-section{position:relative}.home-forms-section{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}.product-split.reverse{grid-template-columns:.95fr 1.05fr}
.product-copy h2{font-size:clamp(2.1rem,3.8vw,3rem);margin:16px 0 18px;letter-spacing:-.035em}.product-copy p{font-size:1.05rem;color:var(--ink-soft);max-width:58ch;margin-bottom:22px}
.product-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 30px}.product-points span{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 15px;font-size:.9rem;font-weight:600;box-shadow:0 14px 34px -28px rgba(45,28,110,.45)}.product-points span::before{content:'◆';font-size:.66rem;color:var(--teal);margin-right:9px}
.analytics-card,.forms-workflow-card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.mini-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.mini-card-head span{font-family:'Space Grotesk',sans-serif;font-weight:700}.mini-card-head strong{color:#0f8a86;background:rgba(50,168,147,.14);border-radius:100px;padding:6px 12px}
.trend-bars{height:210px;display:flex;gap:14px;align-items:flex-end;padding:16px;background:var(--paper-2);border-radius:18px;margin-bottom:20px}.trend-bars i{flex:1;display:block;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--primary-lt),var(--primary))}
.insight-list{display:grid;gap:10px}.insight-list p{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink-soft);font-size:.9rem}.insight-list b{color:var(--ink)}
.forms-workflow-card{display:grid;gap:14px}.form-row{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}.form-row span{width:18px;height:18px;border-radius:50%;border:2px solid var(--primary-lt);flex:none}.form-row.complete span{background:var(--teal);border-color:var(--teal)}.form-row.active{background:#fff;border-color:rgba(88,50,168,.32);box-shadow:0 18px 35px -30px rgba(45,28,110,.7)}.form-row.active span{background:var(--primary)}.form-row b{display:block;font-family:'Space Grotesk',sans-serif}.form-row small{color:var(--ink-soft)}
.home-final-cta h2{max-width:24ch}.home-final-cta p{max-width:58ch}
@media(max-width:960px){.home-hero-grid,.product-split,.product-split.reverse{grid-template-columns:1fr;gap:40px}.home-dashboard{transform:none}.product-points{grid-template-columns:1fr}.dash-map{height:260px}}
@media(max-width:560px){.new-home-hero{padding:70px 0 60px}.dash-metrics{grid-template-columns:1fr}.dash-metrics div{border-right:none;border-bottom:1px solid var(--line)}.dash-metrics div:last-child{border-bottom:none}}


/* HOME PAGE HERO BACKGROUND IMAGE UPDATE */
.home-hero-image {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: url("images_home_update/home-hero-district-admins.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}

.home-hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(28, 18, 69, 0.9) 0%,
      rgba(28, 18, 69, 0.76) 38%,
      rgba(28, 18, 69, 0.42) 68%,
      rgba(28, 18, 69, 0.2) 100%
    );
  pointer-events: none;
}

.home-hero-image .home-hero-overlay {
  display: none;
}

.home-hero-image .wrap,
.home-hero-image .home-hero-content {
  position: relative;
  z-index: 2;
}

.home-hero-image h1{font-size:clamp(2.75rem,5.4vw,4.55rem);color:var(--white);font-weight:700;letter-spacing:-.04em;max-width:13ch;margin-top:16px}

.home-hero-image .lede,
.home-hero-image p {
  color: rgba(255, 255, 255, 0.86);
}

.home-hero-image .eyebrow {
  color: var(--amber);
}

.home-hero-image .eyebrow::before {
  background: var(--amber);
}

.home-hero-image .btn.ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.72);
}

.home-hero-image .btn.ghost:hover {
  background: #ffffff;
  color: var(--navy);
}

@media (max-width: 760px) {
  .home-hero-image {
    min-height: 560px;
    background-position: 62% center;
  }

  .home-hero-image::before {
    background:
      linear-gradient(
        90deg,
        rgba(28, 18, 69, 0.92) 0%,
        rgba(28, 18, 69, 0.82) 58%,
        rgba(28, 18, 69, 0.58) 100%
      );
  }
}

/* RESPONSIVE NAVBAR UPDATE */
.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.nav-toggle:hover {
  background: var(--paper-2);
  box-shadow: 0 12px 24px -20px rgba(45, 28, 110, 0.55);
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.dropdown-toggle {
  font-family: 'Sora', sans-serif;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 0.2s ease;
}

.dropdown-toggle:hover {
  color: var(--ink);
}

.dropdown-toggle::after {
  content: "▾";
  font-size: 0.7rem;
  line-height: 1;
  transform: translateY(1px);
  transition: transform 0.2s ease;
}

.dropdown:hover .dropdown-toggle::after,
.dropdown.open .dropdown-toggle::after {
  transform: rotate(180deg) translateY(-1px);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 880px) {
  .site-nav {
    height: 78px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .navlinks {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px;
    background: rgba(251, 250, 255, 0.98);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 26px 60px -32px rgba(45, 28, 110, 0.45);
    backdrop-filter: blur(14px);
  }

  .navlinks.open {
    display: flex;
  }

  .navlinks > a,
  .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 13px 14px;
    border-radius: 12px;
    color: var(--ink);
    font-size: 0.95rem;
    text-align: left;
  }

  .navlinks > a:hover,
  .dropdown-toggle:hover {
    background: var(--paper-2);
  }

  .nav-item {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    min-width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 14px;
    padding: 0;
    margin: 0 0 6px;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu {
    transform: none;
  }

  .dropdown.open .dropdown-menu {
    display: block;
  }

  .dropdown-menu::before {
    display: none;
  }

  .dropdown-menu a {
    padding: 11px 18px;
    margin-left: 10px;
    border-left: 2px solid var(--line);
    border-radius: 0 10px 10px 0;
    color: var(--ink-soft);
  }

  .dropdown-menu a:hover {
    background: var(--paper-2);
    color: var(--ink);
    transform: none;
  }

  .nav-cta {
    justify-content: center;
    margin-top: 10px;
  }
}

@media (max-width: 520px) {
  .logo img {
    height: 32px;
  }

  .navlinks {
    left: -14px;
    right: -14px;
  }
}