/* ============================================================
   GET STARTUPS — Content pages
   Shared by: about.html · contact.html · faq.html
   Loaded AFTER directory.css, which already provides the page
   shell (.dir-shell), the hero band (.dir-hero) and the green
   closing band (.cta-band). This file adds only what those
   pages need on top: forms, accordion, timeline, feature grids.
   ============================================================ */

/* ---------- centered hero variant ---------- */
.dir-hero.is-center{ text-align:center; }
.dir-hero.is-center .lede{ margin-inline:auto; }
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding-inline:18px;
  margin-bottom:16px;
  border-radius:999px;
  background:rgba(10,164,88,.12);
  color:#0B7C45;
  font-size:13px;
  font-weight:800;
}
.hero-badge svg{ width:15px; height:15px; }
.hero-note{
  max-width:760px;
  margin:clamp(18px,3vw,26px) auto 0;
  padding:19px 24px;
  background:var(--surface-strong);
  border:1px solid var(--line);
  border-radius:18px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  box-shadow:0 20px 44px -30px rgba(20,37,33,.42);
}
.hero-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:clamp(20px,3vw,28px);
}
.hero-cta .gs-btn{
  height:52px;
  padding-inline:32px;
  font-size:15px;
  border-radius:14px;
  text-decoration:none;
}
.hero-stats{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(18px,5vw,58px);
  margin-top:clamp(26px,4vw,40px);
}
.hero-stats .cell{ text-align:center; min-width:96px; }
.hero-stats .num{ font-size:clamp(23px,3.4vw,32px); font-weight:800; color:var(--green-600); line-height:1.2; }
.hero-stats .lbl{ margin-top:4px; font-size:13px; font-weight:700; color:var(--muted); }

.hero-search{
  position:relative;
  max-width:760px;
  margin:clamp(18px,3vw,26px) auto 0;
}
.hero-search input{
  width:100%;
  height:64px;
  padding-inline:26px 58px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-strong);
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  outline:none;
  box-shadow:0 20px 44px -30px rgba(20,37,33,.42);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hero-search input:focus{
  border-color:var(--green-600);
  box-shadow:0 0 0 4px rgba(10,164,88,.10);
}
.hero-search input::placeholder{ color:#9BADA6; }
.hero-search svg{
  position:absolute;
  inset-inline-end:24px; top:50%;
  width:20px; height:20px;
  margin-top:-10px;
  color:var(--green-600);
  pointer-events:none;
}

/* ---------- generic white panel ---------- */
.panel{
  margin-top:clamp(26px,4vw,44px);
  padding:clamp(20px,3vw,34px);
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--dir-ring);
}
.panel-head h2{ margin:0 0 6px; font-size:clamp(20px,2.6vw,26px); font-weight:800; color:var(--ink); }
.panel-head p{ margin:0 0 22px; font-size:13.5px; line-height:1.85; color:var(--muted); }

/* ---------- soft aside column ---------- */
.aside-card{
  background:linear-gradient(180deg,#F6FBF9,#F1F7F4);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px 22px;
  position:sticky;
  top:20px;
}
.aside-card .hero-badge{ margin-bottom:14px; height:30px; font-size:12px; }
.aside-card h3{ margin:0 0 10px; font-size:19px; font-weight:800; color:var(--ink); line-height:1.5; }
.aside-card > p{ margin:0; font-size:13px; line-height:1.9; color:var(--muted); }
.aside-sep{ height:1px; background:var(--line); margin:20px 0; }
.aside-card h4{ margin:0 0 16px; font-size:15.5px; font-weight:800; color:var(--ink); }

.steps{ display:grid; gap:16px; }
.step{ display:flex; align-items:flex-start; gap:12px; }
.step .n{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--green-600);
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 16px -10px rgba(10,164,88,.9);
}
.step .t{ font-size:14px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.step .d{ font-size:12.5px; line-height:1.75; color:var(--muted); }

.dark-note{
  margin-top:22px;
  padding:18px 20px;
  border-radius:18px;
  background:#0E3A32;
  color:#fff;
}
.dark-note h4{ margin:0 0 8px; font-size:15px; font-weight:800; color:#fff; }
.dark-note p{ margin:0; font-size:12.5px; line-height:1.85; color:rgba(255,255,255,.82); }
.dark-note .gs-btn{
  margin-top:14px;
  height:42px;
  padding-inline:22px;
  font-size:13.5px;
  border-radius:12px;
  text-decoration:none;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 322px;
  gap:26px;
  align-items:start;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.fld{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.fld.wide{ grid-column:1 / -1; }
.fld > label{ font-size:13.5px; font-weight:800; color:var(--ink); }
.fld .req{ color:var(--green-600); }
.inp,
.txta,
.fld select{
  width:100%;
  height:52px;
  padding-inline:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#F8FBFA;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fld select{
  appearance:none;
  padding-inline:16px 40px;
  font-weight:600;
  cursor:pointer;
}
.fld .sel{ position:relative; }
.fld .sel::after{
  content:"";
  position:absolute;
  inset-inline-end:18px; top:50%;
  width:8px; height:8px;
  margin-top:-6px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  pointer-events:none;
}
.txta{ height:150px; padding-block:14px; line-height:1.8; resize:vertical; }
.inp::placeholder,
.txta::placeholder{ color:#9BADA6; }
.inp:focus,
.txta:focus,
.fld select:focus{
  border-color:var(--green-600);
  background:#fff;
  box-shadow:0 0 0 3px rgba(10,164,88,.12);
}
.err-msg{
  display:none;
  font-size:12px;
  font-weight:700;
  color:var(--red);
}
.fld.is-err .inp,
.fld.is-err .txta,
.fld.is-err select{ border-color:var(--red); background:rgba(224,72,62,.04); }
.fld.is-err .err-msg{ display:block; }
/* digits + slash read left-to-right even inside the RTL form */
.counter{
  direction:ltr;
  text-align:right;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
}
.counter.over{ color:var(--red); }

.form-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:6px;
}
.form-actions .gs-btn{ height:52px; padding-inline:38px; font-size:15px; border-radius:14px; }
.form-note{ margin:0; font-size:12.5px; color:var(--muted); }
.form-note a{ color:var(--green-600); }

/* success state swaps in place of the form */
.sent{
  display:none;
  text-align:center;
  padding:44px 20px;
}
.sent.is-on{ display:block; animation:fadeUp .5s ease both; }
.sent .tick{
  width:78px; height:78px;
  margin:0 auto 20px;
  border-radius:50%;
  background:rgba(10,164,88,.12);
  color:var(--green-600);
  display:flex; align-items:center; justify-content:center;
}
.sent .tick svg{ width:36px; height:36px; }
.sent h3{ margin:0 0 10px; font-size:22px; font-weight:800; color:var(--ink); }
.sent p{ margin:0 auto 8px; max-width:460px; font-size:14px; line-height:1.9; color:var(--muted); }
.sent .ref{
  display:inline-block;
  margin:10px 0 22px;
  padding:9px 18px;
  border-radius:999px;
  background:var(--green-100);
  color:#0B7C45;
  font-size:13px;
  font-weight:800;
}
.sent .gs-btn{ height:46px; padding-inline:28px; font-size:14px; border-radius:12px; }

/* other ways to reach us */
.ways{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
  margin-top:22px;
}
.way{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px;
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--dir-ring);
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.way:hover{ transform:translateY(-3px); box-shadow:var(--dir-ring-hover); border-color:rgba(10,164,88,.35); }
.way .ic{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:13px;
  background:var(--green-100);
  color:var(--green-600);
  display:flex; align-items:center; justify-content:center;
}
.way .ic svg{ width:20px; height:20px; }
.way h4{ margin:0 0 4px; font-size:15px; font-weight:800; color:var(--ink); }
.way p{ margin:0; font-size:13px; color:var(--muted); line-height:1.7; }
.way .v{ margin-top:5px; font-size:13px; font-weight:800; color:var(--green-600); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{
  display:grid;
  grid-template-columns:322px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.cats{ display:grid; gap:10px; }
.cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  height:50px;
  padding-inline:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  text-align:start;
  transition:all .2s ease;
}
.cat:hover{ border-color:var(--green-600); color:var(--green-600); }
.cat .n{
  flex:0 0 auto;
  min-width:28px; height:24px;
  padding-inline:7px;
  border-radius:8px;
  background:var(--green-100);
  color:#0B7C45;
  font-size:12px;
  font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.cat.is-on{
  background:var(--green-600);
  border-color:var(--green-600);
  color:#fff;
  box-shadow:0 14px 24px -16px rgba(10,164,88,.85);
}
.cat.is-on .n{ background:rgba(255,255,255,.24); color:#fff; }

.faq-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.faq-head h2{ margin:0 0 6px; font-size:clamp(20px,2.6vw,26px); font-weight:800; color:var(--ink); }
.faq-head p{ margin:0; font-size:13.5px; color:var(--muted); }
.faq-tag{
  flex:0 0 auto;
  height:32px;
  padding-inline:14px;
  border-radius:999px;
  background:var(--green-100);
  color:#0B7C45;
  font-size:12.5px;
  font-weight:800;
  display:inline-flex; align-items:center;
}

.acc{ display:grid; gap:12px; }
.acc-item{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.acc-item.is-open{
  border-color:var(--green-600);
  box-shadow:0 18px 34px -26px rgba(10,164,88,.7);
}
.acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:17px 20px;
  border:none;
  background:none;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  line-height:1.6;
  color:var(--ink);
  text-align:start;
  cursor:pointer;
}
.acc-head:hover{ color:var(--green-600); }
.acc-ic{
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-600);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.acc-ic svg{ width:15px; height:15px; }
.acc-item.is-open .acc-ic{ background:var(--green-600); color:#fff; transform:rotate(180deg); }
.acc-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.acc-item.is-open .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc-body p{
  margin:0;
  padding:0 20px 18px;
  font-size:13.5px;
  line-height:1.95;
  color:var(--muted);
}
.acc-body a{ color:var(--green-600); font-weight:700; }
.acc mark{ background:rgba(10,164,88,.18); color:inherit; border-radius:4px; padding:0 2px; }

/* ============================================================
   ABOUT
   ============================================================ */
.sec{ padding-block:clamp(44px,6vw,80px); }
.sec.alt{ background:var(--dir-band); border-block:1px solid var(--line); }
.sec-head{ text-align:center; max-width:720px; margin:0 auto clamp(28px,4vw,46px); }
.sec-head h2{ margin:0 0 12px; font-size:clamp(23px,3.2vw,34px); font-weight:800; line-height:1.4; color:var(--ink); }
.sec-head p{ margin:0; font-size:clamp(14px,1.6vw,15.5px); line-height:1.9; color:var(--muted); }

.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(24px,4vw,52px);
  align-items:center;
}
.split-media img{
  width:100%;
  height:auto;
  border-radius:24px;
  display:block;
  box-shadow:0 30px 60px -34px rgba(20,37,33,.45);
}
.split-copy h2{ margin:0 0 16px; font-size:clamp(22px,3vw,31px); font-weight:800; line-height:1.45; color:var(--ink); }
.split-copy p{ margin:0 0 16px; font-size:15px; line-height:2; color:var(--muted); }
.tick-list{ display:grid; gap:12px; margin-top:22px; padding:0; list-style:none; }
.tick-list li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.7; }
.tick-list .ck{
  flex:0 0 auto;
  width:22px; height:22px;
  margin-top:2px;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-600);
  display:flex; align-items:center; justify-content:center;
}
.tick-list .ck svg{ width:12px; height:12px; }

.cards-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}
.tile{
  padding:26px 24px;
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--dir-ring);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--dir-ring-hover); border-color:rgba(10,164,88,.35); }
.tile .ic{
  width:50px; height:50px;
  margin-bottom:16px;
  border-radius:15px;
  background:var(--green-100);
  color:var(--green-600);
  display:flex; align-items:center; justify-content:center;
}
.tile .ic svg{ width:23px; height:23px; }
.tile h3{ margin:0 0 9px; font-size:17px; font-weight:800; color:var(--ink); }
.tile p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--muted); }
.tile .more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:15px;
  font-size:13px; font-weight:800;
  color:var(--green-600);
  text-decoration:none;
}
.tile .more svg{ width:14px; height:14px; }
.tile .more:hover{ gap:10px; }
a.tile{ text-decoration:none; display:block; }

/* numbered flow */
.flow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  position:relative;
}
.flow-step{
  position:relative;
  padding:26px 22px;
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--dir-ring);
}
.flow-step .n{
  width:44px; height:44px;
  margin-bottom:15px;
  border-radius:14px;
  background:linear-gradient(160deg,var(--green-600),#067A45);
  color:#fff;
  font-size:17px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 24px -14px rgba(10,164,88,.9);
}
.flow-step h3{ margin:0 0 8px; font-size:16px; font-weight:800; color:var(--ink); }
.flow-step p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--muted); }

/* impact numbers */
.impact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:18px;
  padding:clamp(24px,3vw,34px);
  background:var(--dir-card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--dir-ring);
}
.impact .cell{ text-align:center; position:relative; }
.impact .cell + .cell::before{
  content:"";
  position:absolute;
  inset-inline-start:-9px; top:12%;
  width:1px; height:76%;
  background:var(--line);
}
.impact .num{ font-size:clamp(28px,4vw,40px); font-weight:800; color:var(--green-600); line-height:1.2; }
.impact .lbl{ margin-top:6px; font-size:13.5px; font-weight:700; color:var(--muted); }

/* timeline */
.tl{ position:relative; display:grid; gap:22px; padding-inline-start:26px; }
.tl::before{
  content:"";
  position:absolute;
  inset-inline-start:7px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(180deg,var(--green-600),rgba(10,164,88,.15));
  border-radius:2px;
}
.tl-item{ position:relative; }
.tl-item::before{
  content:"";
  position:absolute;
  inset-inline-start:-26px; top:5px;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--green-600);
  box-shadow:0 0 0 4px rgba(10,164,88,.12);
}
.tl-item .yr{ font-size:12.5px; font-weight:800; color:var(--green-600); margin-bottom:5px; }
.tl-item h3{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--ink); }
.tl-item p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--muted); }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .contact-grid,
  .faq-grid{ grid-template-columns:1fr; }
  .aside-card{ position:static; }
  .faq-grid .aside-card{ order:2; }
  .faq-grid .faq-main{ order:1; }
}
@media (max-width:680px){
  .form-grid{ grid-template-columns:1fr; }
  .form-actions{ flex-direction:column; align-items:stretch; }
  .form-actions .gs-btn{ width:100%; }
  .form-note{ text-align:center; }
  .impact .cell + .cell::before{ display:none; }
  .faq-head{ flex-direction:column; }
  .hero-search input{ height:56px; }
}