:root{
  --blue:#04246a;
  --cyan:#15c7c3;
  --purple:#57187e;
  --lightblue:#c1c9da;
  --gray:#d6d6d6;
  --lightgray:#f2f2f2;
  --white:#ffffff;
  --ink:#0c1526;
  --max:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk',sans-serif;
  color:var(--blue);
  line-height:1.15;
  margin:0 0 .5em;
}
.mono{
  font-family:'JetBrains Mono',monospace;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section-alt{background:var(--lightgray);}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--purple);
  font-weight:600;
  margin-bottom:14px;
  display:inline-block;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--cyan);
  color:var(--blue);
  font-weight:700;
  padding:14px 28px;
  border-radius:6px;
  text-decoration:none;
  font-size:.95rem;
  border:2px solid var(--cyan);
  transition:.2s ease;
}
.btn:hover{background:transparent;color:var(--cyan);}
.btn-outline{
  background:transparent;
  color:var(--white);
  border:2px solid var(--white);
}
.btn-outline:hover{background:var(--white);color:var(--blue);}

/* NAV */
header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--lightgray);
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:var(--max);margin:0 auto;
}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;}
.logo span{color:var(--cyan);}
.logo img{height:100px;width:auto;display:block;}
footer .logo img{height:76px;filter:brightness(0) invert(1);}
.navlinks{display:flex;gap:32px;list-style:none;margin:0;padding:0;align-items:center;}
.navlinks a{text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink);}
.navlinks a:hover{color:var(--purple);}
.nav-cta{background:var(--blue);color:var(--white);padding:10px 20px;border-radius:6px;font-weight:700;text-decoration:none;font-size:.9rem;}
.nav-cta:hover{background:var(--purple);}
/* hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:8px;
  width:44px;height:44px;align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;position:relative;width:24px;height:2px;background:var(--blue);
  transition:.2s ease;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:var(--blue);
  transition:.2s ease;
}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* FLOW DIVIDER - signature element */
.flow{
  position:relative;height:64px;overflow:hidden;
  background:var(--white);
}
.flow svg{width:100%;height:100%;display:block;}
.flow .line{stroke:var(--lightblue);stroke-width:2;fill:none;}
.flow .pulse{stroke:var(--cyan);stroke-width:2;fill:none;stroke-dasharray:12 340;animation:flowmove 5s linear infinite;}
.flow .node{fill:var(--blue);}
@keyframes flowmove{
  from{stroke-dashoffset:0;}
  to{stroke-dashoffset:-352;}
}
@media (prefers-reduced-motion:reduce){
  .flow .pulse{animation:none;}
}

/* HERO */
.hero{
  background:var(--blue);
  color:var(--white);
  padding:100px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.hero h1{color:var(--white);font-size:clamp(2.1rem,4vw,3.1rem);}
.hero p.sub{font-size:1.15rem;color:var(--lightblue);max-width:520px;margin-bottom:32px;}
.hero-visual{border-radius:12px;}
.hero-visual img{border-radius:12px;}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:-56px;position:relative;z-index:2;}
.stat-card{
  background:var(--white);
  border-radius:10px;
  padding:28px 24px;
  box-shadow:0 12px 32px rgba(4,36,106,.12);
  border-top:4px solid var(--cyan);
}
.stat-card .num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.9rem;color:var(--blue);display:block;margin-bottom:6px;}
.stat-card p{margin:0;font-size:.92rem;color:#3a4256;}

/* WHY CARDS */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;}
.why-card h3{font-size:1.15rem;margin-bottom:10px;}
.why-card p{color:#3a4256;font-size:.95rem;line-height:1.55;}
.why-card .icon{
  width:64px;height:64px;border-radius:10px;
  background:var(--lightgray);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.why-card .icon img{width:40px;height:40px;object-fit:contain;}

/* TWO COL TEXT+IMAGE */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split img{border-radius:12px;}
.split.reverse .img-col{order:2;}

/* LOGOS MARQUEE */
.marquee-wrap{overflow:hidden;position:relative;margin-top:40px;}
.marquee-wrap::before,.marquee-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;
}
.marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--white),transparent);}
.marquee-wrap::after{right:0;background:linear-gradient(270deg,var(--white),transparent);}
.marquee-track{
  display:flex;gap:64px;align-items:center;
  animation:scroll 28s linear infinite;
  width:max-content;
}
.marquee-track img{height:81px;width:auto;filter:grayscale(1);opacity:.7;}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* BUILD CARDS */
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;}
.build-card{
  padding:32px;border-radius:12px;
  border:1px solid var(--gray);
}
.build-card.highlight{
  background:var(--blue);color:var(--white);border-color:var(--blue);
}
.build-card.highlight h3{color:var(--white);}
.build-card .tag{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--purple);font-weight:600;
}
.build-card.highlight .tag{color:var(--cyan);}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.service-card{
  background:var(--white);
  border:1px solid var(--gray);
  border-radius:10px;
  padding:26px;
}
.service-card .num{font-family:'JetBrains Mono',monospace;color:var(--lightblue);font-weight:700;font-size:1.4rem;}
.service-card h3{font-size:1.05rem;margin:8px 0 10px;}
.service-card p{font-size:.9rem;color:#3a4256;margin:0;}

/* BENEFITS LIST */
.benefits-list{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;}
.benefits-list.benefits-list-single{grid-template-columns:1fr;gap:16px;margin-top:24px;}
.benefits-list li{
  display:flex;gap:14px;font-size:1rem;color:#1c2740;
  padding-bottom:20px;border-bottom:1px solid var(--gray);
}
.benefits-list strong{color:var(--blue);}
.check{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--cyan);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;margin-top:2px;
}

/* CTA */
.cta{
  background:linear-gradient(120deg,var(--blue),var(--purple));
  color:var(--white);text-align:center;padding:96px 0;
}
.cta h2{color:var(--white);font-size:clamp(1.8rem,3.5vw,2.6rem);}
.cta p{font-size:1.1rem;color:var(--lightblue);max-width:520px;margin:0 auto 32px;}

footer{background:var(--ink);color:var(--lightblue);padding:48px 0 24px;font-size:.85rem;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
footer a{text-decoration:none;color:var(--lightblue);display:inline-block;padding:14px 0;margin:-14px 0;}
footer a:hover{color:var(--cyan);}

/* NEWSLETTER (footer) */
.footer-newsletter{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
  padding-bottom:32px;margin-bottom:32px;
  border-bottom:1px solid rgba(193,201,218,.2);
}
.footer-newsletter h3{
  font-family:'Space Grotesk',sans-serif;color:var(--white);
  font-size:1.15rem;margin:0 0 6px;
}
.footer-newsletter p{margin:0;color:var(--lightblue);font-size:.9rem;max-width:360px;}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter-form input[type="email"],
.newsletter-form input[type="text"]{
  font-family:'Inter',sans-serif;font-size:.92rem;
  padding:12px 16px;border-radius:6px;border:1px solid rgba(193,201,218,.35);
  background:rgba(255,255,255,.06);color:var(--white);min-width:150px;
}
.newsletter-form input[type="email"]{min-width:220px;}
.newsletter-form input::placeholder{color:var(--lightblue);}
.newsletter-form input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.newsletter-form .btn{padding:12px 22px;font-size:.9rem;white-space:nowrap;}

/* ===================================================================
   SHARED PAGE PATTERNS (services, projects, integrations, about)
   =================================================================== */

/* active nav state */
.navlinks a.active{color:var(--purple);}
.navlinks a.active::after{
  content:"";display:block;height:2px;background:var(--cyan);
  margin-top:4px;border-radius:2px;
}

/* page hero (simpler than homepage hero, for interior pages) */
.page-hero{
  background:var(--blue);color:var(--white);
  padding:88px 0 72px;
}
.page-hero h1{color:var(--white);font-size:clamp(2rem,3.6vw,2.9rem);max-width:760px;}
.page-hero p{color:var(--lightblue);font-size:1.12rem;line-height:1.6;max-width:640px;margin:0 0 12px;}
.page-hero .eyebrow{color:var(--cyan);}
.page-hero.has-visual .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;}
.page-hero.has-visual h1,.page-hero.has-visual p{max-width:none;}
.page-hero .hero-img{border-radius:12px;}
.page-hero .hero-img img{border-radius:12px;}
/* enlarge the hero visual ~1.25x by giving its column more of the grid */
.page-hero.hero-lg.has-visual .wrap{grid-template-columns:.9fr 1.1fr;}
/* taller hero image: increase rendered height ~1.5x, crop to fill */
.hero-img.hero-img-tall img{height:390px;object-fit:cover;width:100%;}

/* generic lead paragraph */
.lead{color:#3a4256;font-size:1.05rem;line-height:1.65;max-width:720px;}

/* two-column audience cards (Services: Who We Work With) */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;}
.audience-card{
  border:1px solid var(--gray);border-radius:12px;padding:32px;
  border-top:4px solid var(--purple);
}
.audience-card img.card-icon{width:52px;height:52px;object-fit:contain;margin-bottom:14px;}
.audience-card h3{font-size:1.15rem;margin-bottom:12px;}
.audience-card p{color:#3a4256;font-size:.97rem;line-height:1.6;margin:0;}

/* process steps (Services: How an Engagement Works) */
.process{margin-top:48px;display:grid;gap:20px;}
.process-step{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:28px;border:1px solid var(--gray);border-radius:12px;background:var(--white);
}
.process-step .step-num{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.05rem;
  color:var(--blue);background:var(--lightblue);
  width:52px;height:52px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.process-step.discovery .step-num{background:var(--cyan);}
.process-step h3{font-size:1.08rem;margin:2px 0 8px;}
.process-step p{color:#3a4256;font-size:.96rem;line-height:1.6;margin:0;}

/* callout box (Services: Not Sure Where to Start) */
.callout{
  background:var(--lightgray);border-radius:14px;padding:44px;
  border-left:5px solid var(--cyan);
}
.callout h2{margin-top:0;}
.callout p{color:#3a4256;line-height:1.65;}
.callout.has-visual{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:center;}
.callout .callout-img{border-radius:10px;overflow:hidden;}
.callout .callout-img img{width:100%;height:100%;object-fit:cover;}
.callout .card-icon{width:46px;height:46px;object-fit:contain;margin-bottom:10px;display:block;}

/* testimonials carousel */
.testi-carousel{position:relative;margin-top:44px;max-width:880px;margin-left:auto;margin-right:auto;}
.testi-viewport{overflow:hidden;border-radius:14px;}
.testi-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);}
@media (prefers-reduced-motion:reduce){.testi-track{transition:none;}}
.testi-slide{
  flex:0 0 100%;min-width:100%;margin:0;
  background:var(--white);border:1px solid var(--gray);border-radius:14px;
  padding:44px 52px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.testi-slide blockquote{
  margin:0;color:#1c2740;font-size:1.15rem;line-height:1.6;
  font-family:'Space Grotesk',sans-serif;
}
.testi-logo{height:132px;width:auto;margin-bottom:28px;object-fit:contain;}
.testi-slide figcaption{
  margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.testi-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid var(--gray);
  background:var(--white);color:var(--blue);font-size:1.6rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(4,36,106,.12);transition:.2s ease;
}
.testi-arrow:hover{background:var(--blue);color:var(--white);}
.testi-arrow:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.testi-arrow.prev{left:-18px;}
.testi-arrow.next{right:-18px;}
.testi-dots{display:flex;justify-content:center;gap:2px;margin-top:24px;}
.testi-dot{
  position:relative;width:44px;height:44px;padding:0;cursor:pointer;
  border:none;background:transparent;
}
.testi-dot::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;background:var(--gray);transition:.2s ease;
}
.testi-dot.active::before{background:var(--cyan);transform:translate(-50%,-50%) scale(1.25);}
.testi-dot:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* integration category grid */
.integ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.integ-cat{border:1px solid var(--gray);border-radius:12px;padding:26px;}
.integ-cat h3{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--purple);margin-bottom:16px;
}
.integ-cat ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.integ-cat li{
  font-size:.95rem;color:#1c2740;padding-left:20px;position:relative;
}
.integ-cat li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--cyan);
}

/* deployed projects index */
.proj-category{margin-top:56px;}
.proj-category > h3{
  font-size:1.3rem;padding-bottom:12px;border-bottom:2px solid var(--lightblue);
}
.proj-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.proj-item{
  border:1px solid var(--gray);border-radius:10px;padding:22px;
}
.proj-item h4{
  font-family:'Space Grotesk',sans-serif;color:var(--blue);
  font-size:1rem;margin:0 0 8px;
}
.proj-item p{color:#3a4256;font-size:.9rem;line-height:1.5;margin:0 0 12px;}
.proj-item .meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#6b7280;display:block;}
.proj-item .meta.client{color:var(--purple);margin-bottom:4px;}

/* bio blocks (About) — 2 columns: left = photo/name/title/intro,
   right = subheaded detail sections, divider between */
.bio{
  display:grid;grid-template-columns:1fr 1fr;gap:0 56px;
  margin-top:72px;
}
.bio:first-of-type{margin-top:48px;}
.bio-left img{
  width:260px;height:260px;border-radius:14px;object-fit:cover;
  border:3px solid var(--lightblue);margin-bottom:24px;
}
.bio-left h3{font-size:1.9rem;margin-bottom:6px;}
.bio-left .bio-role{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:1.05rem;color:var(--blue);margin-bottom:20px;
}
.bio-right{
  padding-left:56px;border-left:1px solid var(--gray);
}
.bio h4{
  font-family:'Space Grotesk',sans-serif;color:var(--blue);
  font-size:1.15rem;margin:0 0 8px;
}
.bio-right h4:not(:first-child){margin-top:28px;}
.bio p{color:#3a4256;font-size:.98rem;line-height:1.68;margin:0 0 14px;}
.bio p:last-child{margin-bottom:0;}

/* dual CTA buttons */
.cta .btn + .btn{margin-left:14px;}

/* ===================================================================
   MOBILE — kept last so these overrides win the cascade against every
   base/shared-pattern rule above, regardless of selector order.
   =================================================================== */

/* ======================= TABLET (<=860px) ======================= */
@media (max-width:860px){
  /* --- navigation: hamburger --- */
  nav{padding:12px 16px;}
  header .logo img{height:52px;}
  .nav-toggle{display:flex;}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--lightgray);
    box-shadow:0 12px 24px rgba(4,36,106,.1);padding:8px 0;
  }
  header.nav-open .navlinks{display:flex;}
  .navlinks li{width:100%;}
  .navlinks a{display:block;padding:14px 20px;font-size:1rem;}
  .navlinks a.active::after{display:none;}
  .navlinks a.active{color:var(--purple);}
  .nav-cta{display:none;}

  /* --- spacing --- */
  .wrap{padding:0 16px;}
  .section{padding:56px 0;}

  /* --- homepage hero --- */
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .stats{grid-template-columns:1fr;margin-top:32px;}

  /* --- 3-up grids ease to 2-up at tablet width; 2-up grids stay 2-up here --- */
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .integ-grid{grid-template-columns:repeat(2,1fr);}

  /* --- interior page hero: collapse to one column, text first --- */
  .page-hero{padding:56px 0 48px;}
  .page-hero.has-visual .wrap,
  .page-hero.hero-lg.has-visual .wrap{grid-template-columns:1fr;gap:28px;}
  .page-hero .hero-img{order:2;}
  .hero-img.hero-img-tall img{aspect-ratio:16/10;height:auto;}

  /* --- interior patterns --- */
  .process-step{grid-template-columns:1fr;gap:12px;}
  .callout{padding:28px;}
  .callout.has-visual{grid-template-columns:1fr;}
  .cta .btn + .btn{margin-left:0;margin-top:14px;}

  /* --- testimonials carousel --- */
  .testi-slide{padding:32px 24px;}
  .testi-slide blockquote{font-size:1rem;}
  .testi-logo{height:90px;}
  .testi-arrow{width:40px;height:40px;}
  .testi-arrow.prev{left:2px;}
  .testi-arrow.next{right:2px;}

  /* --- about bios --- */
  .bio{grid-template-columns:1fr;gap:0;}
  .bio-left img{width:200px;height:200px;}
  .bio-right{padding-left:0;border-left:none;margin-top:24px;}

  /* --- footer newsletter --- */
  .footer-newsletter{flex-direction:column;align-items:flex-start;gap:16px;}
  .newsletter-form{width:100%;}
  .newsletter-form input[type="email"],
  .newsletter-form input[type="text"]{flex:1 1 100%;min-width:0;}
}

/* ======================= PHONE (<=600px) ========================
   Finer tuning for small phones: the remaining 2-up grids collapse
   to 1-up, and a couple of tablet values get one more notch down. */
@media (max-width:600px){
  .split{grid-template-columns:1fr;}
  .split.reverse .img-col{order:0;}
  .build-grid{grid-template-columns:1fr;}
  .benefits-list{grid-template-columns:1fr;}
  .audience-grid{grid-template-columns:1fr;}
  .proj-list{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .integ-grid{grid-template-columns:1fr;}

  .hero h1{font-size:clamp(1.7rem,7vw,2.1rem);}
  .page-hero h1{font-size:clamp(1.6rem,7vw,2rem);}

  .testi-logo{height:72px;}
  .testi-arrow{width:36px;height:36px;font-size:1.3rem;}
}