/* ==========================================================================
   Datapointe — Shared Stylesheet
   Design tokens sourced from datapointe_design.md
   ========================================================================== */

:root{
  --color-primary:#056839;
  --color-secondary:#0C9442;
  --color-ink:#0A0F0C;
  --color-white:#FFFFFF;

  --primary-900:#02341C;
  --primary-700:#044928;
  --primary-600:#056839;
  --primary-500:#1E774D;
  --primary-300:#448E6A;
  --primary-100:#C0D9CE;
  --primary-50:#E6F0EB;
  --primary-25:#F2F7F5;

  --secondary-700:#08682E;
  --secondary-600:#0C9442;
  --secondary-500:#249F55;
  --secondary-300:#49AF71;
  --secondary-100:#C2E4D0;
  --secondary-50:#E7F4EC;

  --neutral-900:#111412;
  --neutral-700:#3B443E;
  --neutral-500:#6E7A72;
  --neutral-300:#B7C0BA;
  --neutral-100:#EEF1EF;
  --neutral-0:#FFFFFF;

  --warning:#B98A16;
  --error:#B3402D;
  --info:#1E677A;

  --font-brand:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;

  --shadow-sm:0 1px 2px rgba(5,104,57,0.08);
  --shadow-md:0 4px 12px rgba(5,104,57,0.10);
  --shadow-lg:0 12px 32px rgba(5,104,57,0.14);

  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --max-w:1280px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-brand);
  background:var(--neutral-0);
  color:var(--neutral-700);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px;}
@media (max-width:768px){ .wrap{padding:0 20px;} }

h1,h2,h3,h4{
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--color-ink);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark p,.on-dark span{color:var(--neutral-0);}

h2{font-size:36px;letter-spacing:-0.01em;}
h3{font-size:28px;font-weight:500;letter-spacing:-0.01em;}
@media (max-width:768px){
  h2{font-size:28px;}
  h3{font-size:22px;}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--secondary-600);
  margin-bottom:16px;
}
.on-dark .eyebrow{color:var(--secondary-300);}
.eyebrow::before{content:"";width:16px;height:1.5px;background:currentColor;display:block;}

.lede{font-size:18px;color:var(--neutral-500);max-width:560px;}
.on-dark .lede{color:var(--neutral-300);}

.fused{white-space:nowrap;}
.fused .b{font-weight:800;}
.fused .l{font-weight:300;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:500;letter-spacing:0.01em;
  border:1.5px solid transparent;
  transition:background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.btn-lg{padding:16px 32px;}
.btn-primary{background:var(--primary-600);color:var(--color-white);}
.btn-primary:hover{background:var(--primary-700);transform:translateY(-1px);}
.btn-secondary{background:transparent;border-color:var(--primary-600);color:var(--primary-600);}
.btn-secondary:hover{background:var(--primary-25);}
.on-dark .btn-secondary{border-color:rgba(255,255,255,.5);color:#fff;}
.on-dark .btn-secondary:hover{background:rgba(255,255,255,.08);}
.btn-ghost{background:transparent;color:var(--primary-600);padding:12px 4px;}
.btn-ghost:hover{text-decoration:underline;}
.on-dark .btn-ghost{color:#fff;}
.btn:focus-visible{outline:2px solid var(--secondary-500);outline-offset:2px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* NAV */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,15,12,0.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;}
.nav-logo img{height:26px;width:auto;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--neutral-300);transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:#fff;}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-toggle{display:none;background:none;border:none;color:#fff;}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* SECTIONS shared */
section{position:relative;padding:96px 0;overflow:hidden;}
@media (max-width:768px){ section{padding:64px 0;} }
.section-dark{background:var(--color-ink);}
.section-forest{background:var(--primary-900);}
.section-light{background:var(--neutral-0);}
.section-tint{background:var(--primary-25);}

/* PAGE BANNER (sub-pages) */
.page-banner{
  background:var(--color-ink);
  padding:120px 0 72px;
  position:relative;
}
.page-banner .banner-glow{
  position:absolute;inset:0;
  background:radial-gradient(500px 320px at 12% 30%, rgba(5,104,57,0.35), transparent 60%),
             radial-gradient(420px 420px at 90% 0%, rgba(12,148,66,0.22), transparent 60%);
  pointer-events:none;
}
.page-banner .wrap{position:relative;z-index:2;max-width:720px;}
.page-banner h1{font-size:48px;color:#fff;margin-bottom:14px;}
@media (max-width:768px){ .page-banner h1{font-size:32px;} }
.breadcrumb{font-size:13px;color:var(--neutral-500);margin-bottom:18px;}
.breadcrumb a{color:var(--secondary-300);}
.breadcrumb a:hover{text-decoration:underline;}

/* HERO (home) */
.hero{background:var(--color-ink);padding-top:120px;padding-bottom:0;position:relative;}
.hero-glow{
  position:absolute;inset:0;
  background:radial-gradient(600px 400px at 15% 20%, rgba(5,104,57,0.35), transparent 60%),
             radial-gradient(500px 500px at 85% 10%, rgba(12,148,66,0.25), transparent 60%);
  pointer-events:none;
}
.hero-flow{position:absolute;top:0;right:-5%;height:100%;width:60%;opacity:.5;pointer-events:none;}
.hero-inner{position:relative;z-index:2;padding-bottom:80px;max-width:760px;}
.hero h1{font-size:64px;color:#fff;font-weight:700;margin-bottom:24px;}
.hero h1 .light{font-weight:300;color:var(--secondary-300);}
@media (max-width:768px){ .hero h1{font-size:38px;} }
.hero .lede{font-size:19px;margin-bottom:36px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}

/* ticker */
.ticker-band{background:var(--primary-600);padding:18px 0;overflow:hidden;position:relative;z-index:2;}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 28s linear infinite;width:max-content;}
.ticker-track span{font-size:15px;font-weight:500;letter-spacing:0.02em;color:#fff;padding:0 20px;display:inline-flex;align-items:center;gap:20px;}
.ticker-track span::after{content:"◆";font-size:8px;color:var(--secondary-300);}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} }

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

.section-head{max-width:640px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:960px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .services-grid{grid-template-columns:1fr;} }
.s-card{
  background:var(--neutral-0);border-radius:var(--radius-md);padding:32px;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out);border:1px solid var(--primary-100);
}
.s-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.s-icon{width:48px;height:48px;border-radius:12px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--primary-600);}
.s-card h3{font-size:20px;margin-bottom:10px;}
.s-card p{font-size:15px;color:var(--neutral-500);}
.s-card .included{margin-top:16px;padding-top:16px;border-top:1px solid var(--neutral-100);display:flex;flex-direction:column;gap:8px;}
.s-card .included li{font-size:13px;color:var(--neutral-500);display:flex;gap:8px;align-items:flex-start;}
.s-card .included li::before{content:"—";color:var(--primary-600);flex:none;}
.s-card .discuss{margin-top:16px;display:inline-block;font-size:13px;font-weight:500;color:var(--primary-600);}
.s-card .discuss:hover{text-decoration:underline;}

/* PROMISE */
.promise-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;}
@media (max-width:860px){ .promise-grid{grid-template-columns:1fr;gap:48px;} }
.checklist{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.checklist li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:#fff;}
.checklist svg{flex:none;color:var(--secondary-300);}
.promise-callout{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:36px;}
.promise-callout h3{margin-bottom:12px;}
.promise-callout p{color:var(--neutral-300);margin-bottom:24px;font-size:15px;}

/* PROCESS */
.process-list{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
@media (max-width:860px){ .process-list{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .process-list{grid-template-columns:1fr;} }
.p-step{padding-top:20px;border-top:2px solid var(--primary-100);}
.p-num{font-variant-numeric:tabular-nums;font-size:32px;font-weight:700;color:var(--primary-600);display:block;margin-bottom:12px;}
.p-step h4{font-size:18px;margin-bottom:8px;color:var(--color-ink);}
.p-step p{font-size:14px;color:var(--neutral-500);}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:960px){ .work-grid{grid-template-columns:1fr;} }
.w-card{
  background:var(--neutral-0);border:1px solid var(--neutral-100);border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.w-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.w-cover{height:150px;width:100%;}
.w-body{padding:24px;display:flex;flex-direction:column;gap:14px;}
.tag{align-self:flex-start;background:var(--secondary-50);color:var(--secondary-700);font-size:12px;font-weight:500;letter-spacing:0.02em;padding:6px 12px;border-radius:100px;}
.w-card h4{font-size:19px;color:var(--color-ink);font-weight:500;}
.w-card p{font-size:14px;color:var(--neutral-500);}
.w-card .outcome{font-size:14px;font-weight:500;color:var(--primary-600);padding-top:12px;border-top:1px solid var(--neutral-100);}

/* PARTNERS */
.partners-band{padding:64px 0;background:var(--neutral-0);border-top:1px solid var(--neutral-100);border-bottom:1px solid var(--neutral-100);}
.partners-head{text-align:center;font-size:14px;color:var(--neutral-500);margin-bottom:36px;}
.partners-row{display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap;filter:grayscale(1);opacity:.6;}
.partner-word{font-size:20px;font-weight:700;color:var(--neutral-700);letter-spacing:-0.01em;}
.partner-word .l{font-weight:400;}

/* TESTIMONIALS */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:960px){ .test-grid{grid-template-columns:1fr;} }
.t-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);padding:28px;display:flex;flex-direction:column;gap:20px;}
.t-card p{color:var(--neutral-100);font-size:16px;line-height:1.6;}
.t-attr{font-size:13px;color:var(--secondary-300);font-weight:500;}

/* FAQ */
.faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--neutral-100);}
.faq-item{border-bottom:1px solid var(--neutral-100);}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:24px 0;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:500;color:var(--color-ink);}
.faq-q svg{flex:none;transition:transform .25s var(--ease-out);color:var(--primary-600);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-out);}
.faq-a p{padding-bottom:24px;font-size:15px;color:var(--neutral-500);max-width:640px;}

/* CLOSING CTA */
.cta-panel{background:linear-gradient(135deg, var(--primary-700), var(--primary-900));border-radius:var(--radius-lg);padding:72px 48px;text-align:center;position:relative;overflow:hidden;}
@media (max-width:640px){ .cta-panel{padding:48px 24px;} }
.cta-panel h2{font-size:40px;margin-bottom:16px;}
@media (max-width:640px){ .cta-panel h2{font-size:28px;} }
.cta-panel p{color:var(--neutral-100);max-width:480px;margin:0 auto 32px;font-size:17px;}
.cta-panel .btn-primary{background:#fff;color:var(--primary-700);}
.cta-panel .btn-primary:hover{background:var(--neutral-100);}

/* FOOTER */
footer{background:var(--color-ink);padding:72px 0 32px;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.1);}
@media (max-width:768px){ .footer-top{grid-template-columns:1fr 1fr;} }
.footer-brand img{height:24px;margin-bottom:16px;}
.footer-brand p{color:var(--neutral-500);font-size:14px;max-width:260px;}
.footer-col h5{font-size:13px;text-transform:uppercase;letter-spacing:0.08em;color:var(--neutral-500);margin-bottom:16px;font-weight:500;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--neutral-300);transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:16px;}
.footer-bottom p{font-size:13px;color:var(--neutral-500);}
.footer-social{display:flex;gap:16px;}
.footer-social a{color:var(--neutral-500);transition:color .15s;}
.footer-social a:hover{color:var(--secondary-300);}

/* mobile nav sheet */
.mobile-sheet{position:fixed;inset:0;background:var(--color-ink);z-index:200;display:flex;flex-direction:column;padding:24px;transform:translateY(-100%);transition:transform .3s var(--ease-out);}
.mobile-sheet.open{transform:translateY(0);}
.mobile-sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;}
.mobile-sheet a{font-size:22px;color:#fff;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.mobile-sheet .btn{margin-top:24px;}

/* GENERIC CONTENT BLOCKS (About / Trainings / Careers) */
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
@media (max-width:860px){ .content-grid{grid-template-columns:1fr;gap:40px;} }
.value-list{display:flex;flex-direction:column;gap:20px;margin-top:24px;}
.value-list li{display:flex;gap:14px;font-size:16px;color:var(--neutral-700);}
.value-list li svg{flex:none;color:var(--primary-600);margin-top:2px;}
.step-mini{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--neutral-100);}
.step-mini:first-child{border-top:1px solid var(--neutral-100);}
.step-mini .p-num{font-size:22px;margin-bottom:0;}
.step-mini div h4{margin-bottom:4px;font-size:16px;}
.step-mini div p{font-size:14px;color:var(--neutral-500);}

.program-card{background:var(--neutral-0);border:1px solid var(--neutral-100);border-radius:var(--radius-md);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);}
.program-meta{display:flex;gap:10px;flex-wrap:wrap;}
.pill{font-size:12px;font-weight:500;color:var(--primary-700);background:var(--primary-50);padding:5px 10px;border-radius:100px;}

.role-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--neutral-100);flex-wrap:wrap;}
.role-card:first-child{border-top:1px solid var(--neutral-100);}
.role-card h4{font-size:17px;font-weight:500;color:var(--color-ink);}
.role-card .role-meta{font-size:13px;color:var(--neutral-500);margin-top:4px;}
.empty-state{text-align:center;padding:48px 24px;background:var(--primary-25);border-radius:var(--radius-md);}
.empty-state p{color:var(--neutral-500);margin-bottom:20px;}

/* CONTACT PAGE */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;gap:48px;} }
.contact-info-block{display:flex;gap:14px;margin-bottom:28px;}
.contact-info-block svg{flex:none;color:var(--primary-600);margin-top:2px;}
.contact-info-block h5{font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--neutral-500);margin-bottom:4px;}
.contact-info-block p, .contact-info-block a{font-size:15px;color:var(--color-ink);}
.contact-info-block a:hover{color:var(--primary-600);}
.social-row{display:flex;gap:14px;margin-top:32px;}
.social-row a{width:38px;height:38px;border-radius:100px;border:1px solid var(--neutral-300);display:flex;align-items:center;justify-content:center;color:var(--neutral-500);transition:all .15s;}
.social-row a:hover{border-color:var(--primary-600);color:var(--primary-600);}

.form-card{background:var(--primary-25);border-radius:var(--radius-lg);padding:40px;}
@media (max-width:640px){ .form-card{padding:24px;} }
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-size:13px;font-weight:500;color:var(--neutral-700);margin-bottom:8px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--neutral-300);border-radius:var(--radius-sm);
  font-family:inherit;font-size:15px;background:#fff;color:var(--color-ink);
  transition:border-color .15s, box-shadow .15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50);
}
.form-row textarea{resize:vertical;min-height:120px;}
.form-note{font-size:12px;color:var(--neutral-500);margin-top:14px;}
.form-msg{display:none;padding:14px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:20px;}
.form-msg.success{display:block;background:var(--secondary-50);color:var(--secondary-700);}
.form-msg.error{display:block;background:#F7E9E5;color:var(--error);}

/* Cover illustrations (brand-vocabulary geometric SVG, used in place of stock photography) */
.cover-geo{width:100%;height:100%;display:block;}