:root{
  --ink:#0C2E26;
  --ink-deep:#081F1A;
  --ink-raised:#123B31;
  --accent:#5EF1A0;
  --accent-dim:#3FAE79;
  --paper:#EAF3EE;
  --muted:#8CB0A3;
  --muted-dim:#4C645C;
  --line:rgba(234,243,238,0.12);
  --line-strong:rgba(234,243,238,0.22);
  --font-display:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

img{max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}

h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em;}
p{margin:0;}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,46,38,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.nav-left{display:flex; align-items:center; gap:12px;}
.wordmark-img{height:20px; width:auto; display:block;}
.nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:14.5px; font-weight:500; text-decoration:none; color:var(--muted);
  transition:color .15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--paper);}
.nav-right{display:flex; align-items:center; gap:20px;}

.nav-item{position:relative; display:flex; align-items:center; height:72px;}
.nav-toplink{display:flex; align-items:center; gap:5px;}
.nav-caret{width:9px; height:9px; opacity:0.7; transition:transform .15s ease;}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(2px);
  background:var(--ink-raised); border:1px solid var(--line-strong); border-radius:12px;
  padding:8px; min-width:190px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 16px 32px rgba(0,0,0,0.35);
  z-index:60;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(6px);
}
.nav-dropdown a{
  padding:9px 12px; border-radius:8px; font-size:14px; color:var(--paper);
  text-decoration:none; white-space:nowrap; font-weight:400;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{background:var(--ink); color:var(--accent);}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:11px 20px; border-radius:8px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.btn-primary{background:var(--accent); color:var(--ink-deep);}
.btn-primary:hover{background:var(--paper); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-arrow{transition:transform .15s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}
.btn-lg{padding:14px 26px; font-size:15.5px;}

/* ---------- Page header ---------- */
.page-hero{
  padding:88px 0 56px;
  background:
    radial-gradient(ellipse 900px 500px at 78% 8%, rgba(94,241,160,0.14), transparent 60%),
    var(--ink);
}
.page-hero h1{font-size:clamp(2.2rem, 4vw, 3.2rem); margin:16px 0 0;}
.page-hero .hero-lede{color:var(--muted); font-size:16.5px; max-width:640px; margin-top:18px;}
.page-hero .hero-actions{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}

/* ---------- Section headers ---------- */
.section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem); margin:14px 0 16px;}
.section-head p{color:var(--muted); font-size:16.5px;}
.pillar-kicker{
  font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.04em;
  display:block; margin-bottom:16px;
}

/* ---------- Mission / Vision ---------- */
.mv-row{display:flex; align-items:center; gap:6vw; margin-bottom:96px;}
.mv-row:last-child{margin-bottom:0;}
.mv-row.reverse{flex-direction:row-reverse;}
.mv-text{flex:1 1 0;}
.mv-visual{flex:0 0 38%;}
.mv-quote{
  font-family:var(--font-display); font-weight:600; font-size:1.55rem; line-height:1.32;
  color:var(--paper); margin:14px 0 18px; text-wrap:balance;
}
.mv-body{color:var(--muted); font-size:15.5px; line-height:1.75;}
.visual-panel{
  aspect-ratio:1/1; border-radius:24px; background:var(--ink-raised); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.visual-panel .mv-glow{position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 50% 46%, rgba(94,241,160,0.16), rgba(94,241,160,0) 68%);}
.visual-panel .mv-grid{position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image:linear-gradient(rgba(94,241,160,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(94,241,160,0.08) 1px, transparent 1px);
  background-size:14px 14px;
}
.visual-panel .mv-art{position:relative; width:58%; z-index:1;}
.visual-panel .mv-frame{position:absolute; inset:10px; border:1px solid rgba(94,241,160,0.35); border-radius:16px; z-index:2; pointer-events:none;}
.visual-panel .mv-tag{
  position:absolute; left:22px; bottom:20px; z-index:2; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); background:rgba(12,46,38,0.55);
  border:1px solid rgba(94,241,160,0.3); padding:5px 10px; border-radius:999px; backdrop-filter:blur(2px);
}

/* ---------- Brand kit ---------- */
.brandkit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch;}
.brand-card{border-radius:16px; overflow:hidden; border:1px solid var(--line-strong); background:var(--ink-raised); display:flex; flex-direction:column; height:100%;}
.brand-swatch{height:132px; flex:0 0 132px; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box;}
.brand-swatch.on-light{background:var(--paper);}
.brand-swatch.on-dark{background:var(--ink-raised);}
.brand-swatch img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.brand-foot{
  padding:14px 16px 18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px; flex:1 1 auto;
}
.brand-label{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:0.03em; line-height:1.45; min-height:2.9em; display:flex; align-items:flex-start;}
.brand-download{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto;
  padding:6px 14px 6px 6px; border-radius:999px; text-decoration:none;
  background:linear-gradient(100deg, rgba(94,241,160,0.85) -10%, rgba(18,59,49,0.85) 105%);
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  transition:opacity .15s ease;
  border:none; cursor:pointer; font-family:inherit;
}
.brand-download:hover{opacity:0.82;}
.brand-download .dl-icon{
  width:20px; height:20px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-download span.dl-text{font-size:12px; font-weight:600; color:var(--ink-deep);}
.brandkit-note{color:var(--muted-dim); font-size:12.5px; font-family:var(--font-mono); margin-top:20px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 32px; background:var(--ink-deep);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-bottom:40px; flex-wrap:wrap;}
.footer-links{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim); margin:0 0 14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.footer-col a{font-size:14px; color:var(--muted); text-decoration:none;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.footer-bottom p{font-family:var(--font-mono); font-size:12.5px; color:var(--muted-dim);}
.social{display:flex; gap:16px;}
.social a{
  width:32px; height:32px; border:1px solid var(--line-strong); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.social a:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-links{display:none;}
  .mv-row, .mv-row.reverse{flex-direction:column-reverse; gap:28px; margin-bottom:64px;}
  .mv-visual{flex-basis:auto; width:56%; max-width:260px; align-self:center;}
  .brandkit-grid{grid-template-columns:repeat(2,1fr);}
  .footer-links{gap:36px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .brandkit-grid{grid-template-columns:1fr;}
}