/* ============================================================
   GrowVitra — design tokens
   Palette: fog #EDEFEA (bg), ink #14181F (text), ledger-green #1F6F54
   (finance/growth), signal-coral #E2574C (dating/attention), gold-ticket
   #C9A227 (premium/education). Display: Fraunces. Body: IBM Plex Sans.
   Data/mono: IBM Plex Mono.
   Signature: horizontal "verticals ticker" — a live-market style strip
   that treats each vertical (Finance / Education / Dating) as a traded
   instrument, since the business itself is performance-marketing —
   paid only when something moves.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --fog:#EDEFEA;
  --fog-dim:#E2E5DD;
  --paper:#F7F8F4;
  --ink:#14181F;
  --ink-soft:#4B5159;
  --line:#D4D8CE;
  --green:#1F6F54;
  --green-deep:#153F30;
  --coral:#E2574C;
  --gold:#C9A227;

  --display:'Fraunces', serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--fog);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); font-weight:700; line-height:1.02;}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08;}
h3{font-size:1.3rem;}
p{margin:0 0 1em;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

:focus-visible{outline:2px solid var(--green); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(237,239,234,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:var(--display);
  font-weight:700; font-size:1.5rem;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.logo .dot{color:var(--coral);}
.logo img{height:120px; width:auto; display:block;}
.footer-logo{
  display:inline-flex; align-items:center;
  background:var(--paper);
  padding:1px 6px;
  border-radius:6px;
  margin-bottom:14px;
}
.footer-logo img{height:120px; width:auto; display:block;}
nav.main-nav{display:flex; gap:2px; align-items:center;}
nav.main-nav a{
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--ink-soft);
  padding:8px 14px;
  border-radius:999px;
  transition:background 0.15s ease, color 0.15s ease;
}
nav.main-nav a:hover{background:var(--fog-dim); color:var(--ink);}
nav.main-nav a.active{color:var(--ink); background:var(--paper); border:1px solid var(--line);}
.nav-cta{
  font-family:var(--mono) !important;
  background:var(--ink) !important;
  color:var(--fog) !important;
  border:1px solid var(--ink) !important;
}
.nav-cta:hover{background:var(--green-deep) !important;}
.nav-toggle{display:none;}

/* ---------------- ticker (signature element) ---------------- */
.ticker{
  background:var(--ink);
  color:var(--fog);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid var(--green-deep);
}
.ticker-track{
  display:inline-flex;
  animation:ticker-scroll 32s linear infinite;
}
.ticker-track span{
  font-family:var(--mono);
  font-size:0.78rem;
  padding:9px 26px;
  border-right:1px solid rgba(255,255,255,0.12);
  display:inline-flex; align-items:center; gap:8px;
}
.tk-up{color:#7FD4AE;}
.tk-down{color:#F0958D;}
@keyframes ticker-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ---------------- hero ---------------- */
.hero{
  padding:88px 0 64px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:56px;
  align-items:end;
}
.hero p.lede{font-size:1.15rem; max-width:46ch;}
.hero-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.hero-stats div{
  background:var(--paper);
  padding:20px 18px;
}
.hero-stats .num{
  font-family:var(--display);
  font-size:2.1rem;
  font-weight:600;
  color:var(--green-deep);
  display:block;
}
.hero-stats .lab{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:0.85rem;
  text-decoration:none;
  padding:13px 22px;
  border-radius:2px;
  border:1px solid var(--ink);
  color:var(--ink);
  transition:all 0.15s ease;
}
.btn:hover{background:var(--ink); color:var(--fog);}
.btn.solid{background:var(--green-deep); color:var(--fog); border-color:var(--green-deep);}
.btn.solid:hover{background:var(--ink);}
.btn-row{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

/* ---------------- sections ---------------- */
section{padding:72px 0;}
section.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:44px;}

/* verticals grid */
.verticals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.vertical-card{
  background:var(--fog);
  padding:32px 28px;
  position:relative;
}
.vertical-card .tag{
  font-family:var(--mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.08em;
  padding:4px 10px; border-radius:999px;
  display:inline-block; margin-bottom:16px;
}
.vertical-card.finance .tag{background:rgba(31,111,84,0.14); color:var(--green-deep);}
.vertical-card.education .tag{background:rgba(201,162,39,0.16); color:#8a6c14;}
.vertical-card.dating .tag{background:rgba(226,87,76,0.14); color:#a83f36;}
.vertical-card h3{margin-bottom:10px;}
.vertical-card .chg{
  font-family:var(--mono); font-size:0.85rem; font-weight:500;
  position:absolute; top:32px; right:28px;
}

/* two column feature rows */
.split{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
.split.rev{grid-template-columns:1.1fr 0.9fr;}
.split.rev .split-visual{order:2;}
.numbered-list{list-style:none; margin:0; padding:0;}
.numbered-list li{
  display:grid; grid-template-columns:40px 1fr;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.numbered-list li:last-child{border-bottom:1px solid var(--line);}
.numbered-list .n{
  font-family:var(--mono); color:var(--green); font-size:0.85rem; padding-top:2px;
}

/* stat panel visual */
.panel{
  background:var(--ink);
  color:var(--fog);
  padding:30px;
  font-family:var(--mono);
  font-size:0.85rem;
}
.panel .row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.12);}
.panel .row:last-child{border-bottom:none;}
.panel .up{color:#7FD4AE;}
.panel .down{color:#F0958D;}

/* cards grid (services / values) */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:28px 26px;
}
.card .eyebrow{margin-bottom:14px; display:block;}

/* testimonials / logos strip */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.stat-strip div{background:var(--fog); padding:26px 22px; text-align:left;}
.stat-strip .num{font-family:var(--display); font-size:2.4rem; font-weight:600; color:var(--green-deep);}
.stat-strip .lab{font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;}

/* pricing / process table */
.process{border-top:1px solid var(--line);}
.process-row{
  display:grid; grid-template-columns:80px 220px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.process-row .stage-n{font-family:var(--mono); color:var(--coral);}
.process-row h4{margin:0;}

/* forms */
form.contact-form{display:grid; gap:18px; max-width:560px;}
.field{display:grid; gap:6px;}
.field label{font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);}
.field input,.field select,.field textarea{
  font-family:var(--body);
  font-size:1rem;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--fog);
  color:var(--ink);
  border-radius:2px;
}
.field textarea{resize:vertical; min-height:120px;}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);}

/* contact info cards */
.contact-info{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.contact-info .row{background:var(--paper); padding:20px 24px; display:flex; justify-content:space-between; align-items:center;}
.contact-info .row a{font-family:var(--mono); color:var(--green-deep); text-decoration:none; font-weight:500;}

/* job listings */
.job-row{
  display:grid; grid-template-columns:1fr 160px 140px 110px;
  gap:20px; align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.job-row:first-child{border-top:1px solid var(--line);}
.job-row .loc,.job-row .type{font-family:var(--mono); font-size:0.82rem; color:var(--ink-soft);}

/* footer */
footer{background:var(--ink); color:var(--fog); padding:56px 0 30px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
footer h4{color:var(--fog); font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px;}
footer a{color:#B7BCC4; text-decoration:none; font-size:0.9rem; display:block; margin-bottom:9px;}
footer a:hover{color:var(--fog);}
footer p{color:#8B919B; font-size:0.9rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); margin-top:36px; padding-top:22px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.75rem; color:#8B919B; flex-wrap:wrap; gap:10px;}

/* responsive */
@media (max-width:900px){
  nav.main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--fog); flex-direction:column; align-items:flex-start;
    padding:90px 24px 24px; gap:6px;
    transform:translateX(100%); transition:transform 0.25s ease;
    box-shadow:-8px 0 24px rgba(0,0,0,0.12);
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{width:100%;}
  .nav-toggle{
    display:block; z-index:60; position:relative;
    background:none; border:1px solid var(--line); border-radius:6px;
    padding:8px 12px; font-family:var(--mono); font-size:0.8rem;
    cursor:pointer;
  }
  .hero-grid,.split,.split.rev{grid-template-columns:1fr;}
  .split.rev .split-visual{order:0;}
  .verticals,.card-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .job-row{grid-template-columns:1fr; gap:6px;}
}