/* ============================================================
   Ashwanth S overrides on top of the SwiftForm template CSS.
   Loaded after the shared webflow stylesheet.
   ============================================================ */

/* Nav logo: never truncate */
.nav-logo,
.nav-logo._02 {
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center;
  padding: 6px 0;
}
.nav-logo-img {
  height: 34px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* Client logo strip: monochrome white to sit on the dark hero */
.partner-img,
.partner-list-wrap img,
.partner-list img {
  filter: grayscale(1) invert(1) brightness(1.05) !important;
  opacity: 0.82;
  transition: opacity 0.25s ease;
  height: 30px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}
.partner-img:hover { opacity: 1; }

/* Stat numbers: static values must not clip */
.statistics-number-wrap {
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}
.statistics-number-wrap .stat-title,
.stat-title {
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Pricing: three tiers on one row, no toggle */
.pricing-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch;
}
.pricing-list.monthly { display: grid !important; }
.pricing-item,
.pricing-item._02 {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Content feature images: show the whole screenshot, do not crop or overflow */
.content-card-img.global-img,
.content-card-img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  object-position: center !important;
  position: relative !important;
  inset: auto !important;
}
.content-card,
.content-card-wrap {
  overflow: hidden !important;
  border-radius: 16px;
}
/* keep buttons clickable, never covered/clipped */
.content .container-fluid,
.content-content { overflow: visible !important; }

@media (max-width: 991px) {
  .pricing-list { grid-template-columns: 1fr !important; max-width: 460px; margin: 0 auto !important; }
}

@media (max-width: 767px) {
  .partner-img, .partner-list img { max-width: 110px !important; height: 24px !important; }
}

/* Case study horizontal scroll (driven by custom GSAP) */
.horizontal-scroll .track-2 { will-change: transform; }
.horizontal-scroll .frame-2 { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; }

/* ===== Round 2 fixes ===== */

/* Client strip: kill the white shadow line, more gap, bigger logos */
.parner-shadow, .shadow-right, .partner-list-wrap .parner-shadow { display: none !important; }
.partner-list { gap: 72px !important; }
.partner-list-wrap { gap: 72px !important; }
.partner-img, .partner-img._01, .partner-img._02, .partner-img._03, .partner-img._04, .partner-img._05 {
  height: 42px !important;
  width: auto !important;
  max-width: 190px !important;
  object-fit: contain !important;
  filter: grayscale(1) invert(1) brightness(1.1) !important;
  opacity: 0.85;
}

/* Pricing: force three across on desktop */
.pricing-body .pricing-list,
.pricing-list.monthly,
.pricing-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* FAQ working accordion */
.faq-ans-inject {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  font-size: 16px;
  line-height: 1.6;
  color: #4b4b4b;
  padding: 0 2px;
}
.faqs-tab-list.faq-open .faq-ans-inject { padding-top: 4px; padding-bottom: 16px; }
.faqs-tab-list { cursor: pointer; display: block !important; }
.question-icon.minus { display: none !important; }
.faqs-tab-list.faq-open .question-icon.minus { display: inline-block !important; }
.faqs-tab-list.faq-open .question-icon.plus { display: none !important; }
.faqs-tab-menu { width: 100% !important; }

/* Footer: room so it is not truncated */
.footer-wrapper { padding-bottom: 24px !important; }
.footer .container-fluid { padding-bottom: 28px !important; }
.footer-links-row a:hover { color: #fff !important; }

@media (max-width: 991px) {
  .pricing-body .pricing-list, .pricing-list.monthly, .pricing-list { grid-template-columns: 1fr !important; max-width: 460px; margin: 0 auto !important; }
  .partner-list, .partner-list-wrap { gap: 48px !important; }
}

/* Definitive: three pricing cards across on tablet and up */
@media (min-width: 768px) {
  .pricing-list, .pricing-list.monthly, .pricing-body .pricing-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* ===== Footer polish ===== */
.footer-wrapper { padding-top: 56px !important; padding-bottom: 12px !important; }
.footer .container-fluid { padding-bottom: 24px !important; }
.footer-links-row {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  margin-top: 16px !important;
  padding: 22px 0 !important;
  gap: 28px !important;
  display: flex !important; flex-wrap: wrap; align-items: center;
}
.footer-links-row a { color: rgba(255,255,255,.78) !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; transition: color .2s ease; }
.footer-links-row a:hover { color: #fff !important; }
.footer-bottom, .footer-bottom.container-full { border-top: 1px solid rgba(255,255,255,.10) !important; padding: 20px 0 24px !important; }
.footer-bottom-inside { display: flex !important; justify-content: space-between !important; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-copyright, .nav-copyright.tag-regular { color: rgba(255,255,255,.55) !important; font-size: 14px !important; }
.nav-copyright a, .nav-foot-link { color: rgba(255,255,255,.8) !important; text-decoration: none !important; }
.footer-bottom-links { display: flex !important; gap: 20px; }
.footer-bottom-links a { color: rgba(255,255,255,.7) !important; font-size: 14px !important; text-decoration: none !important; }
.footer-bottom-links a:hover { color: #fff !important; }

/* ===== Round 3: hero rebuild, nav wordmark, case grid ===== */
.nav-wordmark { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }

/* Hero visual: one clean photo card + designed feature/stat cards */
.main-hero-galleries { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.hero-gallery.hg-main { position: relative; padding: 0 !important; max-width: none !important; border-radius: 20px; overflow: hidden; background: #151515; }
.hg-photo { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: top left; display: block; }
.hg-pill { position: absolute; left: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 40px; }
.hg-pill-a { bottom: 14px; background: #98ffa1; color: #05221a; }
.hg-pill-b { bottom: 56px; background: rgba(15,15,15,.9); color: #fff; }
.hero-gallery-wrap { display: flex; flex-direction: column; gap: 16px; }
.hg-card { border-radius: 20px; padding: 26px; }
.hg-feature { background: #fff; color: #0a0a0a; flex: 1; display: flex; flex-direction: column; }
.hg-feature-title { font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 16px; }
.hg-feat-row { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; padding: 5px 0; }
.hg-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a; color: #98ffa1; font-size: 12px; flex-shrink: 0; }
.hg-stat { background: #111a17; color: #fff; }
.hg-stat-num { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.hg-stat-label { color: rgba(255,255,255,.6); margin-top: 6px; font-size: 15px; }
.hg-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 18px; }
.hg-bars i { flex: 1; background: linear-gradient(#2b3d36, #98ffa1); border-radius: 4px; display: block; }
@media (max-width: 980px) { .main-hero-galleries { grid-template-columns: 1fr; } .hg-photo { min-height: 240px; } }

/* Case studies: clean 3-up grid (removed the scroll-pin that caused whitespace) */
.horizontal-scroll .frame-2 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: auto !important; }
.horizontal-scroll, .team-service-wrapper, .track-2, .camera-2, .horizontal-scroll-content { height: auto !important; min-height: 0 !important; transform: none !important; }
.case-study-thumb-img, .case-study-thumb-img.global-img { width: 100% !important; height: auto !important; object-fit: cover !important; }
@media (max-width: 980px) { .horizontal-scroll .frame-2 { grid-template-columns: 1fr !important; } }

/* ===== Round 4 ===== */
/* Pricing: equal-height cards, CTA buttons aligned on one baseline */
.pricing-item { display: flex !important; flex-direction: column !important; height: 100%; }
.pricing-feature-wrap { flex: 1 1 auto !important; }
.pricing-item-btns { margin-top: auto !important; }

/* Case cards: no leftover thumbnail gap */
.case-study-thumb, .case-study-thumb-img { display: none !important; }
.case-study-item { padding-top: 8px !important; }

/* Content2 feature image: fill cleanly, no letterbox */
.content-card-img.global-img, .content-card-img {
  object-fit: cover !important;
  max-height: 460px !important;
  border-radius: 16px;
}

/* ===== Round 5: fix case-study overlap (normal flow, no pin remnants) ===== */
.horizontal-scroll .horizontal-scroll-content { display: block !important; position: static !important; height: auto !important; }
.horizontal-scroll .content-head { position: static !important; width: auto !important; margin-bottom: 40px !important; transform: none !important; }
.horizontal-scroll .team-service-wrapper { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; transform: none !important; }
.horizontal-scroll .track-2, .horizontal-scroll .camera-2 { position: static !important; height: auto !important; width: auto !important; transform: none !important; }
.horizontal-scroll .frame-2 { position: static !important; display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; width: auto !important; }
@media (max-width: 980px){ .horizontal-scroll .frame-2 { grid-template-columns: 1fr !important; } }

/* ============================================================
   Separate pages (case study details, listing, about, contact)
   ============================================================ */
.page-main { display: block; }
.pg-eyebrow { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #16a34a; display: inline-flex; align-items: center; gap: 8px; }
.pg-hero { background: #0a0a0a; color: #fff; padding: 150px 0 60px; }
.pg-hero .pg-eyebrow { color: #98ffa1; }
.pg-hero-center { text-align: center; }
.pg-back { display: inline-block; color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 22px; text-decoration: none; }
.pg-back:hover { color: #fff; }
.pg-h1 { font-family: 'Aspekta', sans-serif; font-size: 60px; font-weight: 700; line-height: 1.02; letter-spacing: -.02em; margin: 14px 0 0; }
.pg-h2 { font-family: 'Aspekta', sans-serif; font-size: 38px; font-weight: 600; letter-spacing: -.02em; margin: 14px 0 26px; }
.pg-lead { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.66); margin-top: 16px; max-width: 720px; }
.pg-meta { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 34px; }
.pg-meta .pg-meta-k { display: block; font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.pg-meta strong { font-weight: 600; font-size: 16px; }
.pg-meta-impact { max-width: 420px; }
.pg-section { padding: 64px 0; background: #fff; color: #0a0a0a; }
.pg-soft { background: #f5f5f4; }
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.pg-body { font-size: 16px; line-height: 1.7; color: #444; margin-top: 14px; }
.pg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pg-pill { font-family: 'Geist Mono', monospace; font-size: 12px; padding: 6px 12px; border-radius: 40px; background: #eef0ef; border: 1px solid #e2e5e3; color: #333; }
.pg-results { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pg-results li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e7e7e5; border-radius: 14px; padding: 18px; font-size: 15px; line-height: 1.5; }
.pg-check { color: #16a34a; flex-shrink: 0; font-weight: 700; }
.pg-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pg-shot { margin: 0; border: 1px solid #e7e7e5; border-radius: 14px; overflow: hidden; background: #fff; }
.pg-shot img { width: 100%; display: block; }
/* listing cards */
.pg-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-cs-card { display: flex; flex-direction: column; gap: 10px; background: #f5f5f4; border: 1px solid #e7e7e5; border-radius: 18px; padding: 28px; text-decoration: none; color: #0a0a0a; transition: transform .25s ease, box-shadow .25s ease; }
.pg-cs-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.25); }
.pg-cs-cat { font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; color: #16a34a; }
.pg-cs-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.pg-cs-sub { color: #555; font-size: 15px; line-height: 1.5; }
.pg-cs-impact { margin-top: auto; padding-top: 14px; border-top: 1px solid #e2e5e3; font-size: 14px; color: #333; line-height: 1.5; }
.pg-cs-link { color: #16a34a; font-weight: 600; font-size: 15px; margin-top: 8px; }
/* cta band */
.pg-cta { padding: 64px 0; background: #fff; }
.pg-cta-box { background: #0a0a0a; color: #fff; border-radius: 28px; padding: 72px 32px; text-align: center; }
.pg-cta-title { font-family: 'Aspekta', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0; }
.pg-cta-sub { color: rgba(255,255,255,.66); max-width: 560px; margin: 0 auto 26px; line-height: 1.5; }
.pg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 40px; font-weight: 600; text-decoration: none; }
.pg-btn-green { background: #98ffa1; color: #05221a; }
.pg-arrow { font-weight: 700; }
@media (max-width: 900px) {
  .pg-h1 { font-size: 40px; }
  .pg-two { grid-template-columns: 1fr; gap: 32px; }
  .pg-results, .pg-gallery, .pg-cs-grid { grid-template-columns: 1fr; }
}

/* ===== Restored feature section (after About) ===== */
.ft-section { padding: 80px 0; background: #fff; }
.ft-head { max-width: 720px; margin-bottom: 44px; }
.ft-h2 { font-family: 'Aspekta', sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -.02em; margin-top: 12px; }
.ft-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 32px 0; }
.ft-row-rev .ft-text { order: 2; }
.ft-h3 { font-family: 'Aspekta', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.01em; margin: 12px 0 14px; }
.ft-p { color: #555; line-height: 1.6; font-size: 16px; }
.ft-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ft-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #222; }
.ft-img { border-radius: 18px; overflow: hidden; border: 1px solid #e7e7e5; background: #f5f5f4; }
.ft-img img { width: 100%; display: block; }
@media (max-width: 900px) { .ft-row { grid-template-columns: 1fr; gap: 24px; } .ft-row-rev .ft-text { order: 0; } }

/* ===== Footer (multi-column, matches reference) ===== */
.ft-foot { background: #0a0a0a; color: #fff; padding: 72px 0 28px; }
.ft-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ft-brand { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.ft-foot-tag { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 300px; }
.ft-socials { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.ft-socials a { color: rgba(255,255,255,.75); font-size: 14px; text-decoration: none; }
.ft-socials a:hover { color: #98ffa1; }
.ft-col-h { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.ft-col a { display: block; color: rgba(255,255,255,.75); font-size: 15px; padding: 6px 0; text-decoration: none; }
.ft-col a:hover { color: #fff; }
.ft-news-form { display: flex; gap: 8px; margin-top: 14px; }
.ft-news-form input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 40px; padding: 12px 16px; color: #fff; font-size: 14px; outline: none; }
.ft-news-form button { background: #98ffa1; color: #05221a; border: none; border-radius: 40px; padding: 12px 20px; font-weight: 600; cursor: pointer; }
.ft-news-btn { display: inline-flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; margin-top: 14px; background: #98ffa1; color: #05221a; border-radius: 40px; padding: 12px 26px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.ft-news-btn:hover { filter: brightness(1.05); }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; gap: 16px; flex-wrap: wrap; }
.ft-bottom span { color: rgba(255,255,255,.5); font-size: 14px; }
.ft-bottom-links { display: flex; gap: 22px; }
.ft-bottom-links a { color: rgba(255,255,255,.7); font-size: 14px; text-decoration: none; }
.ft-bottom-links a:hover { color: #fff; }
@media (max-width: 860px) { .ft-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .ft-foot-grid { grid-template-columns: 1fr; } }

/* Container for all custom-built sections/pages (template lacks a plain .container) */
.container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
@media (max-width: 600px) { .container { padding-left: 20px; padding-right: 20px; } }

/* ===== Feature section: uniform slides + CTA ===== */
.ft-rows { display: flex; flex-direction: column; gap: 40px; }
.ft-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ft-row .ft-text { order: 0 !important; }
.ft-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 12px 22px; border-radius: 40px; background: #0a0a0a; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .2s ease; }
.ft-cta:hover { transform: translateY(-2px); }
@media (max-width: 900px) { .ft-row { grid-template-columns: 1fr; gap: 22px; } .ft-img { order: 0; } }

/* ===== Case section header: View case studies button + spacing ===== */
.case-right-btns { display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.cs-head-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 40px; background: #0a0a0a; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.cs-head-btn:hover { background: #000; }
.horizonal-scroll-head { gap: 24px !important; }

/* ===== Scroll reveal (only active once JS adds .reveal-ready) ===== */
.reveal-ready .ft-row, .reveal-ready .pg-cs-card, .reveal-ready .pg-shot, .reveal-ready .pg-results li, .reveal-ready .pg-two > div {
  opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-ready .ft-row.in-view, .reveal-ready .pg-cs-card.in-view, .reveal-ready .pg-shot.in-view, .reveal-ready .pg-results li.in-view, .reveal-ready .pg-two > div.in-view {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) { .reveal-ready .ft-row, .reveal-ready .pg-cs-card, .reveal-ready .pg-shot, .reveal-ready .pg-results li, .reveal-ready .pg-two > div { opacity: 1 !important; transform: none !important; } }

/* ===== Hero compaction: match template so the "Trusted by" logos show above the fold ===== */
.main-hero.container-full { padding-top: 96px !important; padding-bottom: 44px !important; }
.main-hero .heading-01, .about-top-title.heading-01 { font-size: 58px !important; line-height: 1.02 !important; }
.main-hero-content { gap: 20px !important; }
.about-top-text { max-width: 460px !important; }
/* smaller hero visual */
.hg-photo { min-height: 300px !important; }
.hg-card { padding: 20px !important; }
.hg-feature-title { font-size: 21px !important; margin-bottom: 12px !important; }
.hg-feat-row { font-size: 14px !important; padding: 3px 0 !important; }
.hg-stat-num { font-size: 34px !important; }
.hg-bars { height: 44px !important; margin-top: 12px !important; }
.main-hero-galleries { gap: 14px !important; }
/* partners strip closer */
.partner-list-wrap, .partner-strip { margin-top: 10px !important; }

/* ===== Hero compaction v2 (aggressive, high specificity) ===== */
.main-hero .about-top-title.heading-01 { font-size: 48px !important; line-height: 1.03 !important; letter-spacing: -0.02em !important; }
.main-hero.container-full { padding-top: 44px !important; padding-bottom: 28px !important; }
/* keep the CTA right under the copy instead of pushed to the column bottom */
.main-hero .main-hero-head { justify-content: flex-start !important; gap: 22px !important; }
.main-hero .main-hero-content { gap: 16px !important; }
.main-hero .about-top-text { max-width: 460px !important; }
.main-hero .hero-cta, .main-hero .main-hero-btns { margin-top: 10px !important; }
.main-hero .hg-photo { min-height: 268px !important; }
.main-hero .partner-content-inside { margin-top: 8px !important; padding-top: 10px !important; }
.main-hero .partner-list-text.caption { margin-bottom: 12px !important; }

/* ===== Hero v3: remove redundant metrics, tighten spacing, slim banner ===== */
/* move CTAs up, add clear gap before Trusted-by logos */
.main-hero .main-hero-content { gap: 14px !important; }
.main-hero .hero-cta, .main-hero .main-hero-btns { margin-top: 6px !important; }
.main-hero .partner-content-inside, .main-hero .partner-content-inside._02 { margin-top: 48px !important; padding-top: 0 !important; }
.main-hero .partner-list-text.caption { margin-bottom: 18px !important; }
/* hero visual: single clean image + feature card that fills the column */
.main-hero .hero-gallery-wrap { display: flex !important; }
.main-hero .hg-feature { flex: 1 1 auto !important; height: 100% !important; justify-content: center; }
.main-hero .hg-main { min-height: 320px; }
.main-hero .hg-photo { height: 100% !important; min-height: 320px !important; }
/* kill big white gap: reduce first white section top padding */
.about.container-full { padding-top: 28px !important; }

/* ===== Hero fills the viewport; Trusted-by pinned to bottom (no white gap) ===== */
.main-hero.container-full { min-height: calc(100vh - 34px) !important; box-sizing: border-box; display: flex !important; flex-direction: column; }
.main-hero .container-fluid { width: 100%; display: flex; flex-direction: column; flex: 1 1 auto; }
.main-hero .main-hero-content { display: flex !important; flex-direction: column; flex: 1 1 auto; }
.main-hero .partner-content-inside, .main-hero .partner-content-inside._02 { margin-top: auto !important; padding-top: 24px !important; }

/* ===== Fix: restore container padding, fill viewport via inner content only ===== */
.main-hero.container-full { display: block !important; min-height: calc(100vh - 34px) !important; box-sizing: border-box; }
.main-hero .container-fluid { display: block !important; width: auto !important; flex: none !important; }
.main-hero .main-hero-content { display: flex !important; flex-direction: column; min-height: calc(100vh - 150px) !important; flex: none !important; }
.main-hero .main-hero-top { flex: 0 0 auto; }
.main-hero .partner-content-inside, .main-hero .partner-content-inside._02 { margin-top: auto !important; padding-top: 24px !important; }

/* ===== FIX centering (restore template flex-center) + fill viewport, partners bottom ===== */
.main-hero.container-full {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  min-height: calc(100vh - 34px) !important;
}
.main-hero .container-fluid {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: 30px !important;
  margin-right: 30px !important;
}
.main-hero .main-hero-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.main-hero .main-hero-top { flex: 0 0 auto !important; }
.main-hero .partner-content-inside, .main-hero .partner-content-inside._02 { margin-top: auto !important; padding-top: 24px !important; }
@media (max-width: 640px){ .main-hero .container-fluid { margin-left: 20px !important; margin-right: 20px !important; } }

/* ===== FIX v2: bulletproof centering via margin auto + fill viewport ===== */
.main-hero.container-full { display: block !important; justify-content: initial !important; align-items: initial !important; min-height: calc(100vh - 34px) !important; }
.main-hero .container-fluid {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 34px) !important;
}
.main-hero .main-hero-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.main-hero .main-hero-top { flex: 0 0 auto !important; }
.main-hero .partner-content-inside, .main-hero .partner-content-inside._02 { margin-top: auto !important; padding-top: 24px !important; }
@media (max-width: 640px){ .main-hero .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } }

/* ===== FIX v3: centered, normal flow, dark fills viewport (no white gap, no mid gap) ===== */
.main-hero.container-full { display: block !important; min-height: calc(100vh - 34px) !important; }
.main-hero .container-fluid {
  display: block !important; min-height: auto !important;
  max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 30px !important; padding-right: 30px !important; width: 100% !important; box-sizing: border-box !important;
}
.main-hero .main-hero-content { display: block !important; min-height: auto !important; }
.main-hero .main-hero-top { flex: none !important; }
.main-hero .partner-content-inside, .main-hero .partner-content-inside._02 { margin-top: 52px !important; padding-top: 0 !important; }
/* taller hero visual so content fills the viewport naturally */
.main-hero .hg-main { min-height: 400px !important; }
.main-hero .hg-photo { min-height: 400px !important; height: 100% !important; }
.main-hero .main-hero-top { padding-top: 8px !important; }

/* ===== Hero v4: H1 headline, two boxes, white checks, spacing ===== */
/* bigger bold H1 headline */
.main-hero .about-top-title.heading-01 { font-size: 60px !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -0.025em !important; }
/* buttons closer to description */
.main-hero .main-hero-btns, .main-hero .hero-cta { margin-top: 18px !important; }
.main-hero .main-hero-content { gap: 18px !important; }
/* trusted-by label closer to logos */
.main-hero .partner-list-text.caption { margin-bottom: 6px !important; }
/* two-box hero visual */
.main-hero .hero-gallery-wrap { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.main-hero .hg-feature { background: #fff !important; color: #0a0a0a !important; border-radius: 20px !important; padding: 26px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; flex: 1 1 auto !important; min-height: 240px; }
.main-hero .hg-feature-title { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; margin: 0 !important; }
.main-hero .hg-feature-list { display: flex; flex-direction: column; gap: 12px; }
.main-hero .hg-feat-row { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #0a0a0a; }
/* white checkmark on dark circle (match template) */
.main-hero .hg-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a !important; color: #fff !important; font-size: 12px; flex-shrink: 0; }
/* dark stat card with graph */
.main-hero .hg-stat { background: #111a17 !important; color: #fff !important; border-radius: 20px !important; padding: 22px !important; }
.main-hero .hg-stat-num { font-size: 34px !important; font-weight: 700 !important; letter-spacing: -0.03em; line-height: 1; }
.main-hero .hg-stat-label { color: rgba(255,255,255,.6) !important; margin-top: 6px; font-size: 14px; }
.main-hero .hg-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 14px; }
.main-hero .hg-bars i { flex: 1; background: linear-gradient(#2b3d36, #98ffa1); border-radius: 4px; display: block; }

/* ===== Hero v5: 75/25 box ratio, heading top, points grouped bottom ===== */
.main-hero .main-hero-galleries { align-items: stretch !important; }
.main-hero .hero-gallery-wrap { display: flex !important; flex-direction: column !important; gap: 14px !important; height: 100%; }
.main-hero .hg-feature { flex: 3 1 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 0 !important; }
.main-hero .hg-feature-title { font-size: 26px !important; font-weight: 700 !important; line-height: 1.1 !important; }
.main-hero .hg-feature-list { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 0 !important; }
.main-hero .hg-stat { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 0 !important; }
.main-hero .hg-stat .hg-bars { height: 36px !important; margin-top: 10px !important; }

/* ===== Hero v6: heading top / points grouped bottom, dark card horizontal graph ===== */
.main-hero .hg-feature { justify-content: space-between !important; }
.main-hero .hg-feature-list { gap: 14px !important; margin-top: auto !important; }
.main-hero .hg-feat-row { line-height: 1.2 !important; }
/* dark stat card: number+label left, graph right (horizontal, always visible) */
.main-hero .hg-stat { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 22px 24px !important; }
.main-hero .hg-stat-left { display: flex; flex-direction: column; }
.main-hero .hg-stat-num { font-size: 32px !important; font-weight: 700 !important; line-height: 1; }
.main-hero .hg-stat-label { color: rgba(255,255,255,.6) !important; margin-top: 6px; font-size: 14px; }
.main-hero .hg-stat .hg-bars { height: 48px !important; width: 120px !important; margin-top: 0 !important; flex: 0 0 auto; }

/* ===== Hero v7: widen visual, unbold heading, group points, tidy graph ===== */
/* widen the hero visual (template caps at 542px, too narrow) */
.main-hero .main-hero-galleries { max-width: 680px !important; width: 100% !important; }
/* white card heading: unbold like template "Formation & Growth" */
.main-hero .hg-feature-title { font-weight: 500 !important; font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -0.01em !important; }
/* points grouped tightly at the bottom, big space from heading */
.main-hero .hg-feature { justify-content: space-between !important; }
.main-hero .hg-feature-list { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: auto !important; }
.main-hero .hg-feat-row { padding: 0 !important; margin: 0 !important; font-size: 15px !important; }
/* dark card: number left, clean graph right (resemble template 12K+ card) */
.main-hero .hg-stat { padding: 20px 22px !important; }
.main-hero .hg-stat-num { font-size: 28px !important; font-weight: 700 !important; }
.main-hero .hg-stat-label { font-size: 13px !important; max-width: 130px; }
.main-hero .hg-stat .hg-bars { width: 108px !important; height: 42px !important; gap: 5px !important; }

/* ===== Hero v8: wider visual + graph contained in dark card ===== */
.main-hero .main-hero-galleries { max-width: 720px !important; }
.main-hero .hg-stat { overflow: hidden !important; gap: 12px !important; }
.main-hero .hg-stat-left { flex: 1 1 auto !important; min-width: 0 !important; }
.main-hero .hg-stat-num { font-size: 26px !important; white-space: nowrap; }
.main-hero .hg-stat-label { font-size: 13px !important; white-space: nowrap; max-width: none !important; }
.main-hero .hg-stat .hg-bars { flex: 0 0 auto !important; width: 96px !important; height: 40px !important; }

/* ===== Hero v9: +20% width ===== */
.main-hero .main-hero-galleries { max-width: 864px !important; }

/* ===== Nav: keep all items on one line ===== */
.navbar-wrap .navitem-toggle { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 28px; white-space: nowrap; }
.navbar-wrap .nav-items-wrap { white-space: nowrap; }

/* ===== Contact page ===== */
.pg-contact-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pg-btn-dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.pg-btn-dark:hover { background: rgba(255,255,255,.14); }
.pg-contact-socials { margin-top: 20px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.pg-contact-socials a { color: rgba(255,255,255,.7); font-size: 15px; text-decoration: none; }
.pg-contact-socials a:hover { color: #98ffa1; }
.pg-cal-embed { border: 1px solid #e7e7e5; border-radius: 18px; overflow: hidden; max-width: 900px; margin: 24px auto 0; }

/* ===== Hero: use provided stat-card image for the bottom box ===== */
.main-hero .hg-stat-img { flex: 1 1 0 !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden !important; background: #0a0a0a; min-height: 0 !important; }
.main-hero .hg-stat-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* ===== Hero: both boxes as provided images, natural height ===== */
.main-hero .hero-gallery-wrap { display: flex !important; flex-direction: column !important; gap: 14px !important; height: auto !important; }
.main-hero .hg-feature-img, .main-hero .hg-stat-img { flex: 0 0 auto !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden !important; background: transparent !important; min-height: 0 !important; }
.main-hero .hg-feature-img img, .main-hero .hg-stat-img img { width: 100% !important; height: auto !important; display: block !important; object-fit: contain !important; }
.main-hero .hg-main { min-height: 0 !important; }
.main-hero .hg-photo { height: 100% !important; min-height: 0 !important; object-fit: cover !important; }

/* ===== Case cards: room for title+desc, button below (no overlap) ===== */
.horizontal-scroll .case-study-item { min-height: 320px !important; }
.horizontal-scroll .case-study-body { justify-content: flex-start !important; }
.horizontal-scroll .case-item-desc { color: #4b5b57; font-size: 15px; line-height: 1.5; margin: 10px 0 0; max-width: 92%; }
.horizontal-scroll .secondary-btn._02 { margin-top: 28px !important; }

/* ===== Case study detail: tighter hero, category pill top-right, snapshots ===== */
.cs-hero { padding-top: 116px !important; padding-bottom: 48px !important; }
.cs-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cs-hero-top .pg-back { margin-bottom: 0 !important; }
.cs-cat-pill { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #05221a; background: #98ffa1; padding: 7px 15px; border-radius: 40px; white-space: nowrap; }
.pg-shot-cap { padding: 12px 14px; font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b6b6b; }

/* ============================================================
   Case study detail v2: centered header + hero image + single column, black accents
   ============================================================ */
.cs-hero2 { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%); color: #fff; padding: 118px 0 0; text-align: center; }
.cs-hero2-center { max-width: 820px; margin: 0 auto; }
.cs-back { display: inline-block; color: rgba(255,255,255,.55); font-size: 14px; text-decoration: none; margin-bottom: 22px; }
.cs-back:hover { color: #fff; }
.cs-badge { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 6px 14px; border-radius: 40px; }
.cs-title { font-family: 'Aspekta', sans-serif; font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 18px 0 0; }
.cs-sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.62); margin: 16px auto 0; max-width: 640px; }
.cs-hero-img-wrap { margin-top: 44px; }
.cs-hero-img { max-width: 980px; margin: 0 auto; border-radius: 18px 18px 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-bottom: none; background: #111; }
.cs-hero-img img { width: 100%; display: block; }
/* body: single column, left aligned, black accents */
.cs-body { background: #fff; color: #0a0a0a; padding: 60px 0 72px; }
.cs-narrow { max-width: 820px; margin: 0 auto; }
.cs-meta2 { display: flex; gap: 48px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #e7e7e5; }
.cs-meta2 span { display: block; font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999; margin-bottom: 6px; }
.cs-meta2 > div { font-weight: 600; font-size: 16px; }
.cs-h2 { font-family: 'Aspekta', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.015em; margin: 40px 0 14px; color: #0a0a0a; }
.cs-body > .cs-narrow > .cs-reveal:first-of-type .cs-h2, .cs-narrow > .cs-reveal:nth-child(2) .cs-h2 { margin-top: 0; }
.cs-p { font-size: 16px; line-height: 1.75; color: #3f3f3f; }
.cs-results { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.cs-results li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: #1a1a1a; }
.cs-snaps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.cs-snap-item { margin: 0; border: 1px solid #e7e7e5; border-radius: 14px; overflow: hidden; background: #fff; }
.cs-snap-item img { width: 100%; display: block; }
.cs-snap-item .pg-shot-cap { color: #777; }
@media (max-width: 820px) { .cs-title { font-size: 36px; } .cs-snaps { grid-template-columns: 1fr; } .cs-meta2 { gap: 28px; } }

/* ===== Case detail fixes: back left / badge right, contained hero img, stacked snapshots ===== */
.cs-hero2-bar { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.cs-hero2-bar .cs-back { margin-bottom: 0 !important; }
/* hero image: show the top, fixed height, no bleed into text */
.cs-hero-img { max-width: 980px; margin: 0 auto; height: 430px; border-radius: 18px 18px 0 0; overflow: hidden; }
.cs-hero-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; display: block; }
/* snapshots stacked one below the other */
.cs-snaps { grid-template-columns: 1fr !important; gap: 18px !important; }

/* ===== Case detail v3: 50/50 floating hero image + snapshot captions ===== */
.cs-hero2 { padding-bottom: 0 !important; }
.cs-hero-img-wrap { margin-top: 46px !important; }
.cs-hero-img { max-width: 940px !important; margin: 0 auto -250px !important; height: 500px !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.1) !important; position: relative; z-index: 3; }
.cs-hero-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; display: block; }
.cs-body { padding-top: 290px !important; }
/* snapshot caption: title + one-line description */
.cs-snap-item .pg-shot-cap { padding: 16px 18px; display: block; }
.cs-snap-title { display: block; font-family: 'Aspekta', sans-serif; font-size: 17px; font-weight: 600; color: #0a0a0a; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.cs-snap-cap { display: block; font-family: 'Aspekta', sans-serif; font-size: 14px; line-height: 1.5; color: #666; text-transform: none; letter-spacing: 0; }
@media (max-width: 820px) { .cs-hero-img { height: 320px !important; margin-bottom: -160px !important; } .cs-body { padding-top: 200px !important; } }

/* ===== Case detail v4: content matches image width, bigger meta, borderless snaps ===== */
.cs-body .cs-narrow { max-width: 940px !important; }
.cs-meta2 { gap: 64px !important; }
.cs-meta2 span { font-size: 13px !important; letter-spacing: .05em !important; color: #8a8a8a !important; margin-bottom: 8px !important; }
.cs-meta2 > div { font-size: 20px !important; font-weight: 600 !important; }
/* snapshots: clean, no black border */
.cs-snap-item { border: none !important; background: transparent !important; border-radius: 14px !important; overflow: hidden !important; }
.cs-snap-item img { border-radius: 14px !important; }
.cs-snap-item .pg-shot-cap { padding: 14px 2px 4px !important; }

/* ===== Case detail v5: numbered snapshots + light image border ===== */
.cs-snap-item img { border: 1px solid #e5e5e3 !important; border-radius: 14px !important; }
.cs-snap-head { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.cs-snap-num { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; color: #0a0a0a; background: #f0f0ee; border-radius: 7px; padding: 3px 9px; flex: 0 0 auto; }
.cs-snap-item .cs-snap-title { margin-bottom: 0 !important; }

/* ===== Case detail v6: snapshot caption ABOVE the image ===== */
.cs-snap-item { display: flex !important; flex-direction: column !important; }
.cs-snap-item .pg-shot-cap { padding: 0 0 12px !important; order: 0; }
.cs-snap-item img { order: 1; }

/* ===== Case detail v7: snapshot description left-aligned, tight under title ===== */
.cs-snap-item .pg-shot-cap, .cs-snap-item .cs-snap-head, .cs-snap-item .cs-snap-cap { text-align: left !important; }
.cs-snap-item .cs-snap-head { margin-bottom: 6px !important; }
.cs-snap-item .cs-snap-cap { display: block !important; margin: 0 !important; padding: 0 !important; max-width: 760px; }

/* ===== Case detail v8: tighter top gap, unbold title ===== */
.cs-hero2 { padding-top: 30px !important; }
.cs-title { font-weight: 500 !important; }

/* ============================================================
   Case studies LISTING: hero + sliding logos + rich clickable cards
   ============================================================ */
.cs-l-hero { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%); color: #fff; padding: 70px 0 54px; }
.cs-l-hero-grid { display: grid; grid-template-columns: 1.05fr .8fr; gap: 56px; align-items: start; }
.cs-l-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 13px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 7px 15px; border-radius: 40px; }
.cs-l-star { color: #98ffa1; }
/* Match the Home/About display type exactly: Aspekta 400, -.01em tracking
   (webflow display-1 uses the regular weight variable). Weight 500 plus
   -.025em was why this hero read bolder than the other two pages. */
.cs-l-h1 { font-family: 'Aspekta', sans-serif; font-size: 60px; font-weight: 400; line-height: 1.03; letter-spacing: -.01em; margin: 20px 0 0; }
.cs-l-lead { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.62); margin: 18px 0 0; max-width: 520px; }
.cs-l-stats { display: flex; gap: 20px; margin-top: 30px; }
.cs-l-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 22px; }
.cs-l-stat strong { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.cs-l-stat span { display: block; color: rgba(255,255,255,.55); font-size: 13px; margin-top: 4px; }
.cs-l-hero-media { max-width: 420px; margin-left: auto; margin-top: 8px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.cs-l-hero-media img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
/* sliding logos */
.cs-l-marquee-label { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.45); margin: 48px 0 18px; }
.cs-l-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-l-marquee-track { display: flex; align-items: center; gap: 68px; width: max-content; animation: cs-marquee 26s linear infinite; }
.cs-l-marquee-track img { height: 30px; width: auto; object-fit: contain; opacity: .6; filter: grayscale(1) brightness(0) invert(1); }
@keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
/* card list */
.cs-l-list { background: #fff; padding: 64px 0 76px; }
.cs-l-card { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; background: #f6f6f4; border: 1px solid #ececea; border-radius: 22px; padding: 22px; margin-bottom: 26px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.cs-l-card:hover { transform: translateY(-4px); box-shadow: 0 34px 66px -34px rgba(0,0,0,.28); }
.cs-l-cover { position: absolute; inset: 0; z-index: 1; }
.cs-l-media { border-radius: 15px; overflow: hidden; }
.cs-l-flip .cs-l-media { order: 2; }
.cs-l-media img { width: 100%; display: block; aspect-ratio: 16/11; object-fit: cover; object-position: top; }
.cs-l-body { position: relative; z-index: 0; padding: 6px 14px; }
.cs-l-industry { font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #7a7a7a; }
.cs-l-title { font-family: 'Aspekta', sans-serif; font-size: 28px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #0a0a0a; margin: 10px 0 0; }
.cs-l-sub { font-size: 15px; line-height: 1.55; color: #5a5a5a; margin: 10px 0 0; }
.cs-l-kpis { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 9px; }
.cs-l-kpis li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #1a1a1a; }
.cs-l-check { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #0a0a0a; color: #fff; font-size: 11px; flex: 0 0 auto; margin-top: 1px; }
.cs-l-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; background: #98ffa1; color: #05221a; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 40px; text-decoration: none; transition: background .2s ease; }
.cs-l-btn:hover { background: #7df08a; }
@media (max-width: 900px) {
  .cs-l-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .cs-l-h1 { font-size: 40px; }
  .cs-l-card { grid-template-columns: 1fr; gap: 18px; }
  .cs-l-flip .cs-l-media { order: 0; }
}

/* ============================================================
   Case studies listing v2: one CTA, visible logo chips, uniform cards, animations
   ============================================================ */
/* reveal state (ensure cards fade up on scroll) */
.reveal-ready .cs-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.cs-reveal.in-view { opacity: 1 !important; transform: none !important; }

/* hero: one green CTA, no stat cards */
.cs-l-stats { display: none !important; }
.cs-l-hero-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; background: #98ffa1; color: #05221a; font-weight: 600; font-size: 16px; padding: 7px 8px 7px 22px; border-radius: 40px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.cs-l-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(152,255,161,.5); }
.cs-l-hero-btn .cs-l-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #0a0a0a; color: #98ffa1; font-size: 17px; transition: transform .25s ease; }
.cs-l-hero-btn:hover .cs-l-btn-ico { transform: translateX(3px); }

/* logo slider: bounded to half, chips so every logo is visible */
.cs-l-partners { max-width: 470px; margin-top: 44px; }
.cs-l-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cs-l-marquee-track { display: flex; align-items: center; gap: 14px; width: max-content; animation: cs-marquee 20s linear infinite; }
.cs-l-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; background: #fff; border-radius: 11px; }
.cs-l-logo img { height: 22px; width: auto; max-width: 120px; object-fit: contain; display: block; filter: none !important; opacity: 1 !important; }
@keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* "Case Studies" pill above the list */
.cs-l-pill { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 13px; color: #0a0a0a; background: #eef1ee; border: 1px solid #e0e4e0; padding: 7px 16px; border-radius: 40px; margin-bottom: 30px; }

/* cards: image ALWAYS left (no zigzag), soft-green bg */
.cs-l-card { background: #e8f0ea !important; border: 1px solid #dbe6de !important; }
.cs-l-media { order: 0 !important; }
.cs-l-body { order: 1 !important; }
/* card button: dark pill + green arrow, hover animation */
.cs-l-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; background: #0a0a0a; color: #fff; font-weight: 600; font-size: 15px; padding: 6px 7px 6px 20px; border-radius: 40px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.cs-l-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,0,0,.45); }
.cs-l-btn .cs-l-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #98ffa1; color: #05221a; font-size: 16px; transition: transform .25s ease; }
.cs-l-btn:hover .cs-l-btn-ico { transform: translateX(3px); }

/* ===== Listing v3: green badge + monochrome white logos (no white boxes) ===== */
.cs-l-badge { background: #98ffa1 !important; color: #05221a !important; border: none !important; font-weight: 600; }
.cs-l-badge .cs-l-star { color: #05221a !important; }
.cs-l-logo { background: transparent !important; padding: 0 !important; height: auto !important; border-radius: 0 !important; }
.cs-l-logo img { filter: grayscale(1) brightness(0) invert(1) !important; opacity: .62 !important; height: 26px !important; max-width: 140px !important; }
.cs-l-marquee-track { gap: 58px !important; }

/* ===== Branded placeholder for image-less case studies (no random photos) ===== */
.cs-l-media-ph, .cs-hero-ph {
  display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 8px; padding: 26px !important;
  background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%) !important;
  border: 1px solid rgba(152,255,161,.14) !important;
}
.cs-l-media-ph { aspect-ratio: 16/11; border-radius: 15px !important; overflow: hidden; }
.cs-hero-ph { align-items: flex-start; }
.cs-ph-cat { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #98ffa1; }
.cs-ph-title { font-family: 'Aspekta', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #fff; max-width: 90%; }
.cs-hero-ph .cs-ph-title { font-size: 30px; }

/* ===== Homepage partner logos: reuse clean marquee, contain to its column ===== */
.main-hero .partner-list-wrap { display: block !important; width: 100% !important; }
.main-hero .partner-content-inside .cs-l-marquee-track { gap: 44px !important; animation-duration: 24s; }
.main-hero .partner-content-inside .cs-l-logo img { height: 24px !important; }

/* ===== Case studies hero: fill viewport (black until scroll) + badge matches homepage ===== */
.cs-l-hero { min-height: calc(100vh - 34px) !important; display: flex !important; align-items: center !important; padding-top: 40px !important; padding-bottom: 40px !important; }
.cs-l-hero > .container { width: 100%; }
.cs-l-badge { background: #0a0a0a !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 8px 16px 8px 12px !important; display: inline-flex !important; align-items: center; gap: 8px; font-weight: 600; }
.cs-l-star-img { width: 18px; height: 18px; display: inline-block; }

/* ============================================================
   Listing v4: left-gutter "Case Studies" + narrower card column (~60%) + hover-expand button
   ============================================================ */
.cs-l-list-grid { display: grid !important; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: start; }
.cs-l-list-aside { position: sticky; top: 110px; }
.cs-l-list-aside .cs-l-pill { margin-bottom: 0; }
.cs-l-list-main .cs-l-card { margin-bottom: 26px; }
/* card button: collapsed arrow by default, expands to "Book a call" on CARD hover */
.cs-l-btn { display: inline-flex !important; align-items: center; gap: 0 !important; background: #0a0a0a !important; color: #fff !important; border-radius: 40px !important; padding: 7px !important; margin-top: 20px; text-decoration: none; overflow: hidden; position: relative; z-index: 2; transition: box-shadow .25s ease; }
.cs-l-btn:hover { transform: none !important; box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); }
.cs-l-btn .cs-l-btn-txt { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; font-weight: 600; font-size: 15px; margin: 0; transition: max-width .35s ease, opacity .25s ease, margin .35s ease; }
.cs-l-btn .cs-l-btn-ico { width: 38px; height: 38px; border-radius: 50%; background: #98ffa1; color: #05221a; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; transition: transform .25s ease; }
.cs-l-card:hover .cs-l-btn .cs-l-btn-txt { max-width: 140px; opacity: 1; margin: 0 6px 0 16px; }
.cs-l-card:hover .cs-l-btn .cs-l-btn-ico { transform: translateX(2px); }
@media (max-width: 900px) { .cs-l-list-grid { grid-template-columns: 1fr !important; gap: 20px; } .cs-l-list-aside { position: static; } }

/* ============================================================
   Listing v5: exact swiftform case-study layout (aside + 1000px collection, 480x396 image)
   ============================================================ */
.cs-l-content { display: flex !important; justify-content: space-between; gap: 56px; align-items: flex-start; }
.cs-l-aside { flex: 0 0 auto; position: sticky; top: 110px; }
.cs-l-aside .cs-l-pill { margin: 0 !important; }
.cs-l-collection { flex: 0 1 1000px; width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 24px; }
/* card = flex row: big image + content */
.cs-l-card { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; gap: 24px !important; padding: 8px !important; margin: 0 !important; align-items: stretch; background: #e8f0ea !important; border: 1px solid #dbe6de !important; border-radius: 22px !important; position: relative; }
.cs-l-media, .cs-l-media-ph { flex: 0 0 480px !important; width: 480px !important; height: 396px !important; aspect-ratio: auto !important; border-radius: 16px !important; overflow: hidden !important; order: 0 !important; }
.cs-l-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center; display: block; }
.cs-l-body { flex: 1 1 auto !important; max-width: 480px; padding: 24px !important; display: flex !important; flex-direction: column; justify-content: space-between; order: 1 !important; }
.cs-l-top { display: flex; flex-direction: column; }
.cs-l-title { font-size: 30px !important; margin-top: 8px !important; }
.cs-l-sub { margin: 12px 0 0 !important; }
.cs-l-kpis { margin-top: 18px !important; }
/* responsive */
@media (max-width: 1060px) {
  .cs-l-content { flex-direction: column; gap: 24px; }
  .cs-l-aside { position: static; }
  .cs-l-collection { max-width: none; flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .cs-l-card { flex-direction: column !important; }
  .cs-l-media, .cs-l-media-ph { flex: none !important; width: 100% !important; height: 240px !important; }
  .cs-l-body { max-width: none; }
}

/* ============================================================
   Fixes v41: hero top-align, small expand button, tighter card, homepage badge on listing
   ============================================================ */
/* 2. remove big gap between navbar and hero content: align content to TOP */
.cs-l-hero { align-items: flex-start !important; padding-top: 26px !important; padding-bottom: 26px !important; }
.cs-l-hero > .container { width: 100%; }

/* 1. badge already uses homepage .about-head-batch (shared CSS). Just spacing in listing hero */
.cs-l-hero .about-head-batch { margin-bottom: 22px; }

/* 5. tighter card: shorter image, less empty green space */
.cs-l-media, .cs-l-media-ph { height: 340px !important; }
.cs-l-body { padding: 20px !important; }
.cs-l-title { font-size: 27px !important; }
.cs-l-kpis { margin-top: 14px !important; gap: 8px !important; }
.cs-l-kpis li { font-size: 13.5px !important; }

/* 4. small button: dark circle by default, expands to "Book a call" on card hover */
.cs-l-btn { display: inline-flex !important; align-items: center; gap: 0 !important; background: #0a0a0a !important; border-radius: 40px !important; padding: 0 !important; margin-top: 16px !important; overflow: hidden; text-decoration: none; position: relative; z-index: 2; transition: padding .3s ease; }
.cs-l-btn:hover { transform: none !important; box-shadow: none !important; }
.cs-l-btn .cs-l-btn-txt { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; color: #fff !important; font-weight: 600; font-size: 14px; margin: 0; transition: max-width .3s ease, opacity .25s ease, margin .3s ease; }
.cs-l-btn .cs-l-btn-ico { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: #0a0a0a !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; transition: background .25s ease, color .25s ease; }
.cs-l-card:hover .cs-l-btn { padding-left: 20px !important; }
.cs-l-card:hover .cs-l-btn .cs-l-btn-txt { max-width: 120px; opacity: 1; margin-right: 8px; }
.cs-l-card:hover .cs-l-btn .cs-l-btn-ico { background: #98ffa1 !important; color: #05221a !important; }

/* ===== Fix v42: badge + button hug their content (stop full-width stretch) ===== */
.cs-l-hero .about-head-batch { width: -moz-fit-content !important; width: fit-content !important; max-width: 100%; align-self: flex-start !important; }
.cs-l-body .cs-l-btn { align-self: flex-start !important; width: -moz-fit-content !important; width: fit-content !important; }

/* ===== Fix v43: shift hero content ~10% lower (Trusted by + image) ===== */
.cs-l-hero { padding-top: 96px !important; }

/* ===== Fix v44: nav Contact no clip + social icon logos (contact + footer) ===== */
.navbar-wrap .navitem-toggle, .navbar-wrap .navitem-toggle.w-dropdown-toggle { padding: 0 !important; overflow: visible !important; width: auto !important; max-width: none !important; }
.navbar-wrap .navitem-toggle::after, .navbar-wrap .navitem-toggle::before { display: none !important; content: none !important; }
.navbar-wrap .nav-items-wrap, .navbar-wrap .nav-item-inside, .navbar-wrap .nav-item { overflow: visible !important; white-space: nowrap !important; }
/* social icon buttons */
.pg-social-icons { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }
.footer-wrapper .pg-social-icon, .pg-social-icons .pg-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.pg-social-icon:hover { background: #98ffa1; border-color: #98ffa1; color: #05221a; transform: translateY(-2px); }
.pg-social-icon svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.footer-wrapper .pg-social-icon { width: 40px; height: 40px; }
.footer-wrapper .pg-social-icon svg { width: 17px; height: 17px; }

/* ===== Fix v45: restore nav hover-clip (stop duplicated labels) ===== */
.navbar-wrap .nav-item-inside { overflow: hidden !important; }

/* ===== Fix v46: contact hero (kill nav gap, bigger heading) ===== */
.pg-hero-center { padding-top: 60px !important; padding-bottom: 56px !important; }
.pg-hero-center .pg-eyebrow { font-size: 20px !important; letter-spacing: .05em !important; }
.pg-hero-center .pg-h1 { font-size: 68px !important; }

/* ===== Fix v47: uniform logo alignment in both sliders ===== */
.cs-l-marquee-track { align-items: center !important; gap: 50px !important; }
.cs-l-logo { display: inline-flex !important; align-items: center; justify-content: center; height: 30px; }
.cs-l-logo img { height: 26px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; filter: grayscale(1) brightness(0) invert(1) !important; opacity: .62 !important; }

/* ===== Fix v48: slower slider (~22%) + 15% more gap ===== */
.cs-l-marquee-track { animation-duration: 25s !important; gap: 58px !important; }
.main-hero .partner-content-inside .cs-l-marquee-track { animation-duration: 30s !important; gap: 51px !important; }

/* ===== Fix v49: lighter hero headlines (match swiftform medium weight, not bold) ===== */
.main-hero .about-top-title.heading-01 { font-weight: 500 !important; }
.cs-l-h1 { font-weight: 400 !important; } /* 2026-08-13: heading-02 on Home/About is Aspekta 400; 500 here read visibly bolder */
.pg-hero-center .pg-h1 { font-weight: 500 !important; }

/* ===== Hero image: heart badge top-left ===== */
.main-hero .hg-main { position: relative; }
.main-hero .hg-heart { position: absolute; top: 14px; left: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: #98ffa1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.main-hero .hg-heart img { width: 20px; height: 20px; display: block; }

/* ===== Heart badge smaller ===== */
.main-hero .hg-heart { width: 30px !important; height: 30px !important; top: 12px !important; left: 12px !important; }
.main-hero .hg-heart img { width: 15px !important; height: 15px !important; }

/* ============================================================
   About: "Our journey" timeline (swiftform Story style) + scroll reveal
   ============================================================ */
.jrny.container-full { background: #fff; padding: 70px 0 84px; }
.jrny-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: start; }
.jrny-aside { position: sticky; top: 110px; }
.jrny-pill { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 13px; color: #0a0a0a; background: #eef1ee; border: 1px solid #e0e4e0; padding: 7px 16px; border-radius: 40px; }
.jrny-title { font-family: 'Aspekta', sans-serif; font-size: 46px; font-weight: 500; letter-spacing: -.02em; color: #0a0a0a; margin: 18px 0 0; }
.jrny-line { position: relative; padding-left: 36px; }
.jrny-line::before { content: ''; position: absolute; left: 9px; top: 10px; bottom: 12px; width: 2px; background: #e5e5e3; }
.jrny-item { position: relative; padding-bottom: 42px; }
.jrny-item:last-child { padding-bottom: 0; }
.jrny-dot { position: absolute; left: -34px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #98ffa1; border: 3px solid #fff; box-shadow: 0 0 0 2px #e5e5e3; }
.jrny-year { font-family: 'Aspekta', sans-serif; font-size: 24px; font-weight: 600; color: #9aa39d; letter-spacing: -.01em; }
.jrny-h { font-family: 'Aspekta', sans-serif; font-size: 20px; font-weight: 600; color: #0a0a0a; margin: 4px 0 0; }
.jrny-p { font-size: 15px; line-height: 1.6; color: #5a5a5a; margin: 8px 0 0; max-width: 560px; }
@media (max-width: 900px){ .jrny-grid { grid-template-columns: 1fr; gap: 26px; } .jrny-aside { position: static; } }

/* ===== Fix: smaller Story pill ===== */
.jrny-pill { padding: 4px 13px !important; font-size: 12px !important; }

/* ===== "How we ship" HTML/CSS box (replaces the image) ===== */
/* The two columns center against each other; the card sits vertically centered on the text block */
.content-wrap { align-items: center !important; }
/* Left column keeps the pill/H1 at its own top (internal alignment) */
.content-card-item._02 { align-items: flex-start !important; }
/* Blank space keeps testimonials below the fold; equal top/bottom centers the block vertically */
.content.container-full { padding-top: 170px !important; padding-bottom: 170px !important; }
@media (min-width: 992px) {
  /* Card = real content height (no 576px "hanging" box); vertically centered on the text */
  .content-card._02 { height: auto !important; margin-top: 0 !important; display: flex !important; align-items: center !important; }
}
/* Professional card, not a terminal: light surface, no window chrome, no mono font */
.ship-box { width: 100%; background: #f4f9f7; border: 1px solid #dbe8e3; border-radius: 20px; padding: 14px 16px; max-width: 100%; box-shadow: 0 34px 70px -42px rgba(5,12,11,.28); }
.ship-row { display: flex; align-items: center; gap: 16px; padding: 16px 12px; border-radius: 12px; }
.ship-row + .ship-row { border-top: 1px solid rgba(5,12,11,.07); }
.ship-row:hover { background: rgba(5,12,11,.03); }
.ship-step { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #eaf5ee; color: #0a4a2c; font-family: 'Aspekta', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; }
.ship-txt strong { display: block; color: var(--black); font-size: 15.5px; font-weight: 600; }
.ship-txt small { display: block; color: rgba(5,12,11,.55); font-size: 13px; margin-top: 3px; }

/* ===== Journey dots: dark (newest, top) -> light (oldest, bottom) ===== */
.jrny-item:nth-child(1) .jrny-dot { background: #17211c !important; }
.jrny-item:nth-child(2) .jrny-dot { background: #4f7666 !important; }
.jrny-item:nth-child(3) .jrny-dot { background: #7ba192 !important; }
.jrny-item:nth-child(4) .jrny-dot { background: #9cbcae !important; }
.jrny-item:nth-child(5) .jrny-dot { background: #bcd3ca !important; }
.jrny-item:nth-child(6) .jrny-dot { background: #d6e4dd !important; }

/* ===== Heart icon bigger inside its circle ===== */
.main-hero .hg-heart img { width: 20px !important; height: 20px !important; }

/* ===== Heart circle smaller (heart stays) ===== */
.main-hero .hg-heart { width: 24px !important; height: 24px !important; }

/* ===== Avinash testimonial: full-width card uses the space ===== */
.testimonials .testimonial-item.av-wide { grid-column: 1 / -1 !important; }
.testimonials .testimonial-item.av-wide .testimonials-body { justify-content: center; }
.testimonials .testimonial-item.av-wide .testimonial-quote-text { max-width: 900px; }

/* ===== Logo wordmark: bold, no underline accent ===== */
.navbar-wrap .nav-wordmark { position: relative; font-weight: 700 !important; display: inline-block; color: #fff; }
/* align navbar content with the hero container (1280 centered, 30px gutters) */
.navbar-wrap .navbar { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 30px !important; padding-right: 30px !important; box-sizing: border-box !important; }

/* ===== Heart +30% (circle unchanged) ===== */
.main-hero .hg-heart img { width: 26px !important; height: 26px !important; }

/* ============================================================
   "Built to ship": sticky-left text + scrolling image cards (swiftform style)
   ============================================================ */
.bts.container-full { background: #fff; padding: 80px 0 96px; }
.bts-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.bts-left { position: sticky; top: 120px; }
.bts-pill { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px; color: #0a0a0a; background: #eef1ee; border: 1px solid #e0e4e0; padding: 5px 13px; border-radius: 40px; }
.bts-h { font-family: 'Aspekta', sans-serif; font-size: 46px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: #0a0a0a; margin: 18px 0 0; max-width: 440px; }
.bts-desc { font-size: 16px; line-height: 1.6; color: #5a5a5a; margin: 16px 0 0; max-width: 420px; }
.bts-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.bts-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #1a1a1a; }
.bts-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0a0a0a; color: #fff; font-size: 11px; flex: 0 0 auto; margin-top: 1px; }
.bts-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; background: #98ffa1; color: #05221a; font-weight: 600; font-size: 15px; padding: 7px 8px 7px 22px; border-radius: 40px; text-decoration: none; transition: transform .25s ease; }
.bts-btn:hover { transform: translateY(-2px); }
.bts-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #0a0a0a; color: #98ffa1; font-size: 16px; }
.bts-right { display: flex; flex-direction: column; gap: 28px; }
.bts-card { border-radius: 22px; padding: 26px; overflow: hidden; }
.bts-card img { width: 100%; display: block; border-radius: 12px; box-shadow: 0 20px 50px -24px rgba(0,0,0,.35); }
.bts-green { background: #e6f3ea; }
.bts-purple { background: #efe6f7; }
.bts-gray { background: #eef0f1; }
@media (max-width: 900px){ .bts-grid { grid-template-columns: 1fr; gap: 30px; } .bts-left { position: static; } }

/* ============================================================
   "Built for Speed" scroll-linked section: sticky left text swaps with right cards
   ============================================================ */
.fs.container-full { background: #fff; padding: 40px 0 60px; }
.fs-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
/* LEFT: sticky, texts crossfade */
.fs-left { position: relative; }
.fs-sticky { position: sticky; top: 20vh; min-height: 60vh; display: flex; align-items: center; }
.fs-text { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.fs-text.active { opacity: 1; transform: none; pointer-events: auto; }
.fs-pill { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px; color: #0a0a0a; background: #eef1ee; border: 1px solid #e0e4e0; padding: 5px 13px; border-radius: 40px; }
.fs-h { font-family: 'Aspekta', sans-serif; font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: #0a0a0a; margin: 18px 0 0; max-width: 440px; }
.fs-desc { font-size: 16px; line-height: 1.6; color: #5a5a5a; margin: 14px 0 0; max-width: 420px; }
.fs-points { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.fs-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #1a1a1a; }
.fs-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0a0a0a; color: #fff; font-size: 11px; flex: 0 0 auto; margin-top: 1px; }
.fs-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; background: #98ffa1; color: #05221a; font-weight: 600; font-size: 15px; padding: 7px 8px 7px 22px; border-radius: 40px; text-decoration: none; transition: transform .25s ease; }
.fs-btn:hover { transform: translateY(-2px); }
.fs-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #0a0a0a; color: #98ffa1; font-size: 16px; }
/* RIGHT: cards, each roughly one screen tall so scroll swaps the text */
.fs-right { display: flex; flex-direction: column; gap: 40px; }
.fs-card { min-height: 64vh; border-radius: 26px; padding: 40px; display: flex; align-items: center; justify-content: center; }
.fs-c-green { background: #e6f3ea; }
.fs-c-purple { background: #efe6f7; }
.fs-c-dark { background: #dfe6e2; }
.fs-inner { width: 100%; max-width: 420px; border-radius: 20px; padding: 30px; }
.fs-inner-light { background: #fff; box-shadow: 0 30px 70px -30px rgba(0,0,0,.25); }
.fs-inner-dark { background: #0e1a15; color: #fff; }
.fs-inner-solid { background: #0a0a0a; color: #fff; }
.fs-stat-row { display: flex; align-items: baseline; gap: 14px; }
.fs-stat-num { font-family: 'Aspekta', sans-serif; font-size: 56px; font-weight: 600; letter-spacing: -.03em; color: #0a0a0a; line-height: 1; }
.fs-stat-num sup { font-size: 26px; top: -.6em; }
.fs-num-white { color: #fff; }
.fs-stat-tag { font-size: 15px; color: #8a8a8a; }
.fs-stat-sub { font-size: 15px; line-height: 1.5; color: #5a5a5a; margin-top: 14px; }
.fs-sub-white { color: rgba(255,255,255,.6); }
.fs-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 22px; }
.fs-bars i { flex: 1; background: linear-gradient(#cdeed7, #98ffa1); border-radius: 5px; display: block; }
.fs-bars-white i { background: linear-gradient(#22352c, #98ffa1); }
.fs-inner-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.fs-inner-head strong { font-size: 18px; font-weight: 600; }
.fs-inner-head span { font-size: 13px; color: rgba(255,255,255,.5); }
.fs-spark { width: 100%; height: 120px; display: block; }
.fs-spark-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.45); }
@media (max-width: 900px){
  .fs-grid { grid-template-columns: 1fr; gap: 20px; }
  .fs-sticky { position: static; min-height: 0; }
  .fs-text { position: static; opacity: 1; transform: none; margin-bottom: 24px; }
  .fs-card { min-height: 0; }
}

/* ===== Fix: left column stretches full height so sticky text pins across all cards ===== */
.fs-grid { align-items: stretch !important; }
.fs-left { height: 100% !important; position: relative; }
.fs-sticky { position: sticky !important; top: 18vh !important; height: 64vh !important; min-height: 0 !important; display: flex !important; align-items: center !important; }

/* ===== "Built for Speed" pill hugs its text ===== */
.fs .fs-pill { width: -moz-fit-content !important; width: fit-content !important; align-self: flex-start; }

/* ============================================================
   Homepage case studies: pinned horizontal scroll (scroll down -> cards move right)
   ============================================================ */
.hsx-wrap { position: relative; height: calc(100vh + 1300px); background: #fff; }
.hsx-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hsx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 34px; }
.hsx-pill { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 12px; color: #0a0a0a; background: #eef1ee; border: 1px solid #e0e4e0; padding: 5px 13px; border-radius: 40px; }
.hsx-heading { font-family: 'Aspekta', sans-serif; font-size: 44px; font-weight: 500; line-height: 1.06; letter-spacing: -.02em; color: #0a0a0a; margin: 16px 0 0; max-width: 560px; }
.hsx-cta { display: inline-flex; align-items: center; gap: 12px; background: #98ffa1; color: #05221a; font-weight: 600; font-size: 15px; padding: 7px 8px 7px 22px; border-radius: 40px; text-decoration: none; flex: 0 0 auto; transition: transform .25s ease; }
.hsx-cta:hover { transform: translateY(-2px); }
.hsx-cta-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #0a0a0a; color: #98ffa1; font-size: 16px; }
.hsx-viewport { overflow: hidden; }
.hsx-track { display: flex; gap: 28px; width: max-content; padding: 0 30px; will-change: transform; transition: transform .08s linear; }
.hsx-card { display: flex; width: 760px; background: #e8f0ea; border: 1px solid #dbe6de; border-radius: 22px; overflow: hidden; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.hsx-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.hsx-media { flex: 0 0 46%; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px; background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%); }
.hsx-media-cat { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #98ffa1; }
.hsx-media-title { font-family: 'Aspekta', sans-serif; font-size: 20px; font-weight: 600; color: #fff; }
.hsx-body { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; }
.hsx-cat { font-family: 'Geist Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #7a7a7a; }
.hsx-title-c { font-family: 'Aspekta', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.14; color: #0a0a0a; margin: 10px 0 0; }
.hsx-desc { font-size: 14px; line-height: 1.55; color: #5a5a5a; margin: 12px 0 0; }
.hsx-arrow { margin-top: auto; width: 46px; height: 46px; border-radius: 50%; background: #0a0a0a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
@media (max-width: 900px){
  .hsx-wrap { height: auto; }
  .hsx-pin { position: static; height: auto; padding: 60px 0; }
  .hsx-viewport { overflow-x: auto; }
  .hsx-track { transform: none !important; }
  .hsx-card { width: 84vw; }
  .hsx-media { min-height: 240px; }
}

/* ===== hsx fixes: rounded media, padded card, button hover, no fixed height (JS sets it) ===== */
.hsx-wrap { height: auto; }
.hsx-card { padding: 14px !important; align-items: stretch; gap: 0 !important; }
.hsx-media { border-radius: 16px !important; flex: 0 0 44% !important; min-height: 360px; }
.hsx-body { padding: 16px 24px 16px 26px !important; }
/* button hover: lift + green shadow + arrow nudge */
.hsx-cta { transition: transform .25s ease, box-shadow .25s ease !important; }
.hsx-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px -12px rgba(152,255,161,.55) !important; }
.hsx-cta .hsx-cta-ico { transition: transform .25s ease; }
.hsx-cta:hover .hsx-cta-ico { transform: translateX(3px); }
/* card arrow hover */
.hsx-card .hsx-arrow { transition: background .25s ease, transform .25s ease; }
.hsx-card:hover .hsx-arrow { background: #98ffa1; color: #05221a; transform: translateX(2px); }

/* ===== Section pills hug their text (Case Study, Built for Speed) ===== */
.hsx-pill, .fs .fs-pill, .jrny-pill, .cs-l-pill { width: -moz-fit-content !important; width: fit-content !important; align-self: flex-start !important; display: inline-block !important; }

/* ===== hsx v2: bulletproof pills + card cover link + hover-expand Book a call ===== */
.hsx-pill, .fs .fs-pill { display: inline-block !important; width: -moz-max-content !important; width: max-content !important; max-width: 100% !important; align-self: flex-start !important; }
.hsx-head-left { display: flex; flex-direction: column; align-items: flex-start; }
/* card = relative, cover link fills it, book button on top */
.hsx-card { position: relative; }
.hsx-cover { position: absolute; inset: 0; z-index: 1; }
.hsx-body { position: relative; z-index: 0; }
.hsx-arrow { display: none !important; }
/* Always-visible pill (no more collapse/truncate); label rolls on hover, icon slides */
.hsx-book { position: relative; z-index: 2; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #0a0a0a; border-radius: 40px; padding: 5px 5px 5px 18px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.hsx-book:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.45); }
.hsx-book-txt { color: #fff; font-weight: 600; font-size: 13px; }
.hsx-book-ico { width: 32px; height: 32px; border-radius: 50%; background: #98ffa1; color: #05221a; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; transition: transform .25s ease; }

/* ===== DEFINITIVE: compact pills (high specificity) ===== */
section.hsx-wrap span.hsx-pill,
section.fs span.fs-pill,
section.jrny span.jrny-pill,
section.cs-l-list span.cs-l-pill {
  display: inline-block !important;
  width: auto !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  background: #eef1ee !important;
  border: 1px solid #e0e4e0 !important;
  border-radius: 40px !important;
  color: #0a0a0a !important;
}

/* ===== hsx: contain the scroll track to the container (start under heading, end at container right) ===== */
.hsx-viewport { width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding: 0 30px !important; box-sizing: border-box !important; overflow: hidden !important; }
.hsx-track { padding: 0 !important; }

/* ===== Trusted-by band: distinct deep-green surface, TIGHT top, STATIC single row (no marquee) ===== */
.trusted-band { background: transparent !important; width: 100% !important; padding: 26px 0 22px !important; border-top: 1px solid rgba(176,196,184,0.05) !important; border-bottom: 1px solid rgba(176,196,184,0.05) !important; box-sizing: border-box !important; position: relative !important; }
.trusted-band .trusted-inner { position: relative !important; z-index: 1 !important; }
/* Curved line: hero + strip share ONE black wrapper so the hero's single circle arc flows through both with no seam. */
.hs-wrap { position: relative !important; overflow: hidden !important; background: #050c0b !important; }
.main-hero.container-full { overflow: visible !important; }
/* Desktop: strip fills down to the fold so the white About does not peek (dark-green fill below the logos, content stays at top). Nudge the 560px if needed. */
@media (min-width: 992px) { .trusted-band { min-height: calc(100vh - 560px) !important; } }
.trusted-inner { max-width: 1280px !important; margin: 0 auto !important; padding: 0 30px !important; box-sizing: border-box !important; width: 100% !important; }
.trusted-label {
  font-family: 'Geist Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  text-align: center !important;
  margin: 0 0 24px !important;
}
/* static 5-per-row x 2-row grid, all 10 logos, evenly spread corner to corner, NO scroll */
.trusted-band .cs-l-cluster {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  width: 100% !important;
}
.trusted-band .cs-l-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; }
.trusted-band .cs-l-cluster img {
  height: 24px !important;
  width: auto !important;
  max-width: 168px !important;
  object-fit: contain !important;
  filter: grayscale(1) brightness(0) invert(1) !important;
  opacity: 0.6;
  transition: opacity .25s ease;
}
.trusted-band .cs-l-cluster img:hover { opacity: 0.85; }
@media (max-width: 900px) { .trusted-band .cs-l-cluster { grid-template-columns: repeat(3, 1fr) !important; row-gap: 26px !important; } }
@media (max-width: 560px) { .trusted-band .cs-l-cluster { grid-template-columns: repeat(2, 1fr) !important; row-gap: 24px !important; } }

/* About stat cards keep the template's original pastel colors (pink/mint/purple/peach) - do NOT unify to one color */

/* ===== Mobile hero: stack headline above the visual (base template leaves main-hero-top as a squished 2-col row) ===== */
@media (max-width: 767px) {
  .main-hero .main-hero-top { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  .main-hero .main-hero-head, .main-hero .main-hero-galleries { max-width: 100% !important; width: 100% !important; }
  .main-hero .about-top-title.heading-01 { font-size: 40px !important; }
  .main-hero.container-full { padding-top: 24px !important; }
}

/* ===== Hero is content-height with a SMALL FIXED gap (no viewport math, so the gap never grows on zoom) ===== */
.main-hero.container-full { min-height: auto !important; padding-bottom: 52px !important; }

/* Invisible scrollbar (right-edge slider) */
html { scrollbar-width: none !important; -ms-overflow-style: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent !important; }

/* Nav "Get Started" jumps to pricing, offset so the section is not hidden under the top bar */
#pricing { scroll-margin-top: 90px; }

/* Pills 2 & 3 now reuse the "About the studio" pill class; keep them shrink-wrapped in their flex columns */
.fs-text .about-txt-batch.tag-bold,
.hsx-head-left .about-txt-batch.tag-bold {
  align-self: flex-start !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
}

/* ===== case-studies.html: static Trusted-by grid (replaces the old scrolling marquee), matches the index band ===== */
.cs-static-label { margin: 40px 0 24px !important; }
.cs-l-cluster.cs-static-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; align-items: center !important; justify-items: center !important; column-gap: 28px !important; row-gap: 28px !important; width: 100% !important; }
.cs-static-grid img { height: 24px !important; width: auto !important; max-width: 168px !important; object-fit: contain !important; filter: grayscale(1) brightness(0) invert(1) !important; opacity: 0.6 !important; }
@media (max-width: 900px) { .cs-l-cluster.cs-static-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px) { .cs-l-cluster.cs-static-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ===== Agents-in-action video showcase (below hero, above case studies) ===== */
.agents.container-full { background: var(--bg-soft) !important; padding: 88px 0 96px !important; }
.agents .container-fluid { max-width: 1200px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; }
.agents-head { max-width: 720px; margin: 0 0 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.agents-pill { display: inline-block; background: rgba(5,12,11,0.06); color: #0a4a2c; border: 1px solid rgba(5,12,11,0.10); border-radius: 50px; padding: 5px 14px; font-family: 'Aspekta', Arial, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; transform: none !important; }
.agents-title { color: var(--black) !important; margin: 0 !important; }
.agents-sub { color: rgba(5,12,11,0.58); font-size: 16px; line-height: 1.55; margin: 2px 0 0; max-width: 560px; }
/* one card per row, horizontal: video left, text right (webflow case-study style) */
.agents-grid { display: flex; flex-direction: column; gap: 26px; }
.agent-card { background: #f3f8f6; border: 1px solid #d6e4df; border-radius: 22px; overflow: hidden; display: flex; flex-direction: row; align-items: stretch; text-decoration: none; transition: opacity .7s ease, transform .7s ease, border-color .3s ease, box-shadow .3s ease; }
.agent-card:hover { border-color: rgba(5,12,11,0.22); box-shadow: 0 30px 60px -34px rgba(5,12,11,0.28); }
.agent-video { position: relative; flex: 0 0 46%; max-width: 46%; aspect-ratio: 16 / 10; background: #000; }
.agent-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 34px 40px; text-decoration: none; }
.agent-meta { display: flex; align-items: center; gap: 12px; }
.agent-num { color: #0a4a2c; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.agent-cat { color: rgba(5,12,11,0.5); font-family: 'Aspekta', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.agent-name { color: var(--black); font-family: 'Aspekta', Arial, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 16px 0 12px; transition: color .25s ease; }
.agent-card:hover .agent-name { color: #0a4a2c; }
.agent-desc { color: rgba(5,12,11,0.6); font-size: 15px; line-height: 1.62; margin: 0 0 22px; }
.agent-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--black); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 11px 22px; border-radius: 40px; transition: transform .25s ease, box-shadow .25s ease; }
.agent-card:hover .agent-link { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(5,12,11,.45); }
.agent-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #98ffa1; color: #05221a; font-size: 13px; transition: transform .25s ease; }
.agent-card:hover .agent-arrow { transform: translateX(3px); }
/* scroll reveal (only hides once JS confirms support) */
.agents-grid.reveal-on .agent-card { opacity: 0; transform: translateY(30px); }
.agents-grid.reveal-on .agent-card.in-view { opacity: 1 !important; transform: translateY(0) !important; }
/* alternating rhythm: even cards put the video on the right, and each card slides in from its own side */
.agent-card--reverse { flex-direction: row-reverse; }
.agents-grid.reveal-on .agent-card { transform: translate3d(-26px, 30px, 0); }
.agents-grid.reveal-on .agent-card--reverse { transform: translate3d(26px, 30px, 0); }
.agents-grid.reveal-on .agent-card.in-view { transform: translate3d(0, 0, 0) !important; }
@media (max-width: 860px) { .agent-card { flex-direction: column; } .agent-video { flex-basis: auto; max-width: 100%; width: 100%; } .agent-body { padding: 26px 24px 30px; } .agents.container-full { padding: 60px 0 68px !important; } }
@media (prefers-reduced-motion: reduce) { .agents-grid.reveal-on .agent-card { opacity: 1 !important; transform: none !important; } }

/* ===== Book-a-call button must beat the full-card cover link =====
   The reveal animation leaves a transform on the card body, creating a stacking
   context that paints the button BELOW the absolute cover <a>, so the cover ate
   the click. Raise the body above the cover, route pointer events: text falls
   through to the cover (opens case study), the button captures its own click. */
.hsx-body { position: relative; z-index: 2; pointer-events: none; }
.hsx-book { pointer-events: auto; }
.cs-l-body { position: relative; z-index: 2; pointer-events: none; }
.cs-l-btn { pointer-events: auto; }

/* ===== Footer: one color. The wrapper was #191a1a (gray) behind the #0a0a0a footer,
   so its top padding showed a two-tone band above the footer. Unify to black. ===== */
.footer-wrapper { background: #0a0a0a !important; }

/* ===== case-studies.html hero: "Trusted by" label replaced with a thin centered divider (index-band opacity) ===== */
.cs-static-line { width: 100%; height: 1px; background: rgba(255,255,255,0.10); margin: 34px 0 26px; }

/* ===== Case-study card CTA: always show the full "Book a discovery call" label.
   It was a hover-reveal whose text max-width clipped it to "Book a discovery c" and
   stayed fully hidden on touch (no hover). Now a normal always-visible pill. ===== */
.cs-l-body .cs-l-btn { padding: 6px 6px 6px 22px !important; overflow: visible !important; width: -moz-fit-content !important; width: fit-content !important; }
.cs-l-body .cs-l-btn .cs-l-btn-txt { max-width: none !important; opacity: 1 !important; margin: 0 14px 0 0 !important; white-space: nowrap !important; color: #fff !important; font-size: 14.5px !important; }
.cs-l-body .cs-l-btn .cs-l-btn-ico { width: 40px !important; height: 40px !important; background: #98ffa1 !important; color: #05221a !important; }
.cs-l-card:hover .cs-l-btn { padding-left: 22px !important; }
.cs-l-card:hover .cs-l-btn .cs-l-btn-txt { max-width: none !important; opacity: 1 !important; margin: 0 14px 0 0 !important; }

/* Mobile: center the (now smaller) hero portrait instead of right-aligning it */
@media (max-width: 991px) { .cs-l-hero-media { margin: 0 auto !important; max-width: 460px !important; } }

/* ===== case-studies hero: full-width "Trusted by" band stacked below the grid =====
   (.cs-l-hero is display:flex; force column so the band sits under the grid, full width) */
.cs-l-hero { flex-direction: column !important; }
.cs-hero-trust { width: 100%; margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.08); }

/* ===== case-studies ONLY: navbar blends into the dark-green hero (was a flat #050c0b seam).
   Put the gradient on page-wrapper (viewport-fixed) so the transparent navbar AND hero share
   one continuous background. Mobile: flat dark + hero keeps its own gradient (fixed is janky on iOS). */
.page-cs .navbar-wrap { background: transparent !important; }
.page-cs .page-wrapper { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%) fixed !important; }
.page-cs .cs-l-hero { background: transparent !important; }
@media (max-width: 767px) {
  .page-cs .page-wrapper { background: #0a0a0a !important; }
  .page-cs .cs-l-hero { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%) !important; }
}

/* ================= v102: pill parity + compact case-studies hero ================= */

/* "Deployed agents" pill = match the "Built for Speed" gold standard (.about-txt-batch):
   padding 2px 8px, 14px/140% Aspekta medium, radius 50px, fit-content, NO border.
   White bg (not bg-soft) so it stays visible on the gray agents section. */
.agents-pill { display: inline-block; width: -moz-fit-content; width: fit-content; background: #ffffff; color: #050c0b; border: none !important; border-radius: 50px; padding: 2px 8px; font-family: 'Aspekta', Arial, sans-serif; font-size: 14px; line-height: 140%; font-weight: 500; letter-spacing: 0; white-space: nowrap; transform: none !important; }

/* "Case Studies" pill = match the "About the studio" tag (.about-txt-batch.tag-bold):
   bg-soft #e3edeb, NO border, 2px 8px, Aspekta 14px medium, darker text */
.cs-l-pill, section.cs-l-list span.cs-l-pill {
  background: #e3edeb !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 2px 8px !important;
  font-family: 'Aspekta', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 140% !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #050c0b !important;
}

/* case-studies "Trusted by 40+ companies" pill: restore a visible background
   (--bg-inverse #112522 blended into the new dark-green gradient) */
.cs-l-hero .about-head-batch { background: #0a0a0a !important; border: 1px solid rgba(255,255,255,0.10) !important; }

/* case-studies hero: exactly fill the first viewport (navbar ~66px above it).
   The calc() is a fallback; a script in case-studies.html measures the real nav offset and
   pins the exact min-height so the Trusted band ends flush at the fold and the white
   Case Studies section never peeks in at 100% zoom. */
.cs-l-hero { min-height: calc(100vh - 66px) !important; justify-content: flex-start !important; padding-top: 40px !important; padding-bottom: 30px !important; }
/* center the hero grid in the space above the band so the hero stays vertically balanced */
.cs-l-hero > .container:first-child { margin-top: auto; margin-bottom: auto; }
.cs-l-hero-media { max-width: 100% !important; width: 100% !important; margin-top: 4px !important; }
.cs-l-hero-media img { height: 300px !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: center 12% !important; }
.cs-hero-trust { margin-top: 24px !important; padding-top: 22px !important; }

/* ===== Uniform section indentation =====
   .container-full is display:flex; justify-content:center, so it centers its child.
   Reference sections (About / What we build / Case studies / Pricing) center a base
   .container-fluid (max-width container-md, container-xs gutters, NO inner padding).
   The agents section (1200 + 30px padding) and Built-for-Speed (.container 1280 + 30px
   padding) sat further in. Match them to the base geometry so every section's left edge lines up. */
.agents .container-fluid,
.fs .container {
  width: var(--_perimeters---full-width) !important;
  max-width: var(--_perimeters---container-md) !important;
  margin-left: var(--_perimeters---container-xs) !important;
  margin-right: var(--_perimeters---container-xs) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Case-study card KPIs (replace the one-line description with 3 owner metrics) ===== */
.hsx-kpis { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hsx-kpis li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: #16241d; }
.hsx-kpis li::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: #98ffa1; }
.hsx-kpis li::after { content: '\2713'; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; font-size: 10px; color: #05221a; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ===== Reusable button label roll (matches the hero secondary-btn hover): current line
   rolls up and out, a duplicate (via data-label) rolls in from below; icon slides right ===== */
.roll { display: inline-block !important; overflow: hidden !important; height: 1.4em; line-height: 1.4em; white-space: nowrap; vertical-align: bottom; max-width: none !important; opacity: 1 !important; }
.roll-in { display: block; line-height: 1.4em; white-space: nowrap; transition: transform .42s cubic-bezier(.6,.05,.1,1); }
.roll-in::after { content: attr(data-label); display: block; line-height: 1.4em; white-space: nowrap; }
.hsx-book:hover .roll-in,
.cs-l-hero-btn:hover .roll-in,
.cs-l-card:hover .cs-l-btn .roll-in { transform: translateY(-1.4em); }
.hsx-book:hover .hsx-book-ico,
.cs-l-hero-btn:hover .cs-l-btn-ico,
.cs-l-card:hover .cs-l-btn .cs-l-btn-ico { transform: translateX(3px); transition: transform .3s ease; }

/* ============================================================================
   SITE-WIDE HEAD THEME: the exact page-cs mechanism on EVERY page.
   ONE viewport-fixed gradient lives on .page-wrapper; the navbar and every dark
   hero/head surface are transparent so navbar + hero are literally one surface.
   No per-element gradients, no seams. Light sections keep explicit backgrounds.
   ============================================================================ */
.page-wrapper { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%) fixed !important; }
.navbar-wrap { background: transparent !important; }
/* dark head surfaces: let the wrapper gradient show through */
.main-hero.container-full { background: transparent !important; }   /* index hero */
.hs-wrap { background: transparent !important; }                    /* index hero+band wrapper */
.pg-hero { background: transparent !important; }                    /* contact hero */
.cs-hero2 { background: transparent !important; }                   /* case detail heroes */
.pricings.container-full { background: transparent !important; }    /* pricing dark section */
.terms-hero.container-full.first { background: transparent !important; } /* terms/privacy hero */
/* light sections that relied on the white body default now need explicit paint */
.about.container-full, .content.container-full, .faqs.container-full,
.testimonials.container-full, .terms.container-full { background: #fff; }
/* mobile: fixed attachment is janky on iOS; flat dark wrapper + heroes carry the gradient */
@media (max-width: 767px) {
  .page-wrapper { background: #0a0a0a !important; }
  .main-hero.container-full, .pg-hero, .cs-hero2,
  .pricings.container-full, .terms-hero.container-full.first { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%) !important; }
}

/* ===== contact: the whole head (hero + Book a meeting) stays on the black/green theme.
   The gradient ends at #0a0a0a so the flat black booking section continues it seamlessly. ===== */
.contact-book { background: #0a0a0a !important; color: #fff !important; }
.contact-book .pg-h2 { color: #fff !important; }
.contact-book .pg-cal-embed { max-width: 1180px !important; background: #0a0a0a !important; border: 1px solid rgba(255,255,255,0.12) !important; }

/* ===== about page: DARK head, identical to every other page. The wrapper gradient
   runs behind the transparent navbar and the hero as one surface. Everything below
   the hero (journey, FAQs, footer) already paints its own background. ===== */
.page-about .about.container-full { background: transparent !important; padding-top: 64px !important; padding-bottom: 96px !important; }
.page-about .about-cotnent-text,
body.page-about .about-content-head .about-cotnent-text.heading-02 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* pill matches the contact eyebrow: brand green ground, dark text */
.page-about .about-content-head .about-txt-batch {
  color: #05221a !important;
  background: #98ffa1 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 2px 10px !important;
  opacity: 1 !important;
}

/* logo wordmark: the anchor's default text underline was doubling with the ::after
   brand bar (obvious on the white about header). Keep only the brand bar. */
a.nav-logo, a.nav-logo:hover, .nav-logo .nav-wordmark { text-decoration: none !important; }

/* ===== contact hero: fills the first viewport exactly (script pins the height like the
   case-studies hero), content vertically centered, larger type. The booking section
   starts below the fold with real breathing room. ===== */
.pg-hero.pg-hero-center { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: calc(100vh - 100px); padding-top: 40px !important; padding-bottom: 40px !important; }
.pg-hero.pg-hero-center .pg-h1 { font-size: 88px !important; }
.pg-hero.pg-hero-center .pg-lead { font-size: 22px !important; line-height: 1.55 !important; max-width: 820px !important; }
@media (max-width: 767px) { .pg-hero.pg-hero-center .pg-h1 { font-size: 44px !important; } .pg-hero.pg-hero-center .pg-lead { font-size: 18px !important; } }
.contact-book { padding: 40px 0 64px !important; }

/* ============================================================
   MOBILE FIXES (2026-07-10). Every rule below lives inside a
   max-width media query: desktop rendering is untouched.
   ============================================================ */

/* tablet + phone: show the wordmark so the top bar is not an empty black strip */
@media (max-width: 991px) {
  .navbar-middle { display: flex !important; }
  .navbar-wrap .navbar { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 900px) {
  /* 0. hard stop on sideways scroll: no more white gutter / hidden text on the right */
  html, body { overflow-x: clip !important; }

  /* 1. top of page: compact navbar, start hero sooner */
  .navbar-wrap { padding-top: 10px !important; padding-bottom: 10px !important; }
  .main-hero.container-full { min-height: 0 !important; display: block !important; padding-top: 28px !important; padding-bottom: 40px !important; }
  .main-hero .main-hero-content { min-height: 0 !important; display: block !important; }
  .main-hero .container-fluid { display: block !important; }

  /* 2. hero balance: cap the photo height, give the info cards full width */
  .main-hero .main-hero-galleries { grid-template-columns: 1fr !important; gap: 14px !important; max-width: 100% !important; }
  .main-hero .hg-main { height: 340px !important; min-height: 0 !important; }
  .main-hero .hg-photo { width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; object-position: 50% 20% !important; }
  .main-hero .hero-gallery-wrap { display: flex !important; flex-direction: column !important; gap: 14px !important; height: auto !important; }
  .main-hero .hg-card { padding: 0 !important; background: transparent !important; }
  .main-hero .hg-card img { width: 100% !important; height: auto !important; display: block; border-radius: 18px; }

  /* 3. feature-scroll section (We build systems / Why teams / Infrastructure):
        desktop uses sticky + absolutely stacked panels; on mobile that collapsed
        into a sideways flex row overflowing the viewport. Plain stacked flow here. */
  .fs-grid { grid-template-columns: 1fr !important; gap: 26px !important; align-items: start !important; }
  .fs-left { height: auto !important; }
  .fs-sticky { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; top: auto !important; }
  .fs-text { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; margin: 0 0 36px !important; }
  .fs-text:last-child { margin-bottom: 0 !important; }
  .fs-h { font-size: 32px !important; max-width: none !important; }
  .fs-card { min-height: 0 !important; padding: 28px 22px !important; }
  .fs-right { gap: 18px !important; }

  /* 4. case-study strip: same scroll-jack as desktop. The section pins, vertical
        scroll drives the cards sideways, then releases to the next section.
        (JS guard removed in index.html; these rules restore the pin on mobile.) */
  .hsx-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding-bottom: 20px !important; }
  .hsx-heading { font-size: 30px !important; }
  .hsx-pin { position: sticky !important; top: 0 !important; height: 100vh !important; height: 100svh !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
  .hsx-viewport { overflow: hidden !important; }
  .hsx-card { flex-direction: column !important; width: 84vw !important; }
  .hsx-media { flex: 0 0 auto !important; min-height: 195px !important; }
  .hsx-body { padding: 20px !important; }
  .hsx-track { padding: 0 20px !important; }
  /* CTA pill inside the card: comfortable, even padding, no text/icon collision */
  .hsx-book { padding: 9px 9px 9px 22px !important; gap: 14px !important; }
  .hsx-book-txt { font-size: 14px !important; }
  .hsx-book-ico { width: 34px !important; height: 34px !important; }

  /* 5. hamburger menu: hide leftover template junk, stack the newsletter form */
  .menu-wrap-3 a[href*="swiftform.webflow.io"],
  .menu-wrap-3 a[href*="nordhaven.webflow.io"],
  .menu-wrap-3 a[href*="references/"],
  .menu-wrap-3 a[href="blogs.html"],
  .menu-wrap-3 a[href="#"] { display: none !important; }
  .menu-wrap-3._02 .menu-body._01 .menu-body-item-3:nth-of-type(3) { display: none !important; }
  .menu-wrap-3 .newsletter-form-inside { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .menu-wrap-3 .newsletter-text-field, .menu-wrap-3 .newsletter-submit { width: 100% !important; }
  /* MAIN + INNER columns: centered pair with one equal gap, not corner-to-corner */
  .menu-wrap-3._02 .menu-body._01 { justify-content: center !important; gap: 72px !important; width: 100% !important; }
  .menu-wrap-3._02 .menu-body._01 .menu-body-item-3 { width: auto !important; flex: 0 0 auto !important; }
  /* newsletter: native form is swapped for a redirect pill (mobile-fixes.js) */
  .nl-go { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; background: #98ffa1 !important; color: #05221a !important; font-weight: 600 !important; font-size: 15px !important; padding: 11px 16px !important; border-radius: 40px !important; text-decoration: none !important; margin-top: 14px !important; }
  .nl-go-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #05221a; color: #98ffa1; font-size: 13px; flex: 0 0 auto; }
}

/* ===== Case-studies trust badge: the star svg carries an invisible dark circle
   (same shade as the badge background), so its built-in padding read as a gap
   between the star and "Trusted by 40+ companies". Tighten the flex gap. ===== */
.cs-l-hero .about-head-batch { grid-column-gap: 2px !important; grid-row-gap: 2px !important; gap: 2px !important; }

/* ===== Deployed-agents player (branded, silent, controls-free) 2026-07-21 ===== */
.agent-video { position: relative; overflow: hidden; background: #05221a; }
.agent-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-vid::-webkit-media-controls,
.agent-vid::-webkit-media-controls-enclosure { display: none !important; }

/* centered overlay over a soft dark tint (matches the reference composition) */
.agent-vid-cta {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 15px; padding: 20px; margin: 0; border: 0; width: 100%; cursor: pointer;
  background: radial-gradient(120% 120% at 50% 45%, rgba(5,12,11,.30) 0%, rgba(5,12,11,.52) 100%);
  -webkit-appearance: none; appearance: none; text-align: center;
  transition: background .4s ease, opacity .4s ease;
}
.agent-vid-cta > * { pointer-events: none; }
.agent-video:hover .agent-vid-cta { background: radial-gradient(120% 120% at 50% 45%, rgba(5,12,11,.20) 0%, rgba(5,12,11,.42) 100%); }

/* mint play orb, centered, mirrors the site's arrow chip */
.agent-vid-orb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #98ffa1; color: #05221a; flex: 0 0 58px;
  box-shadow: 0 10px 34px -10px rgba(5,12,11,.6), 0 0 0 8px rgba(152,255,161,.14);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.agent-video:hover .agent-vid-orb { transform: scale(1.07); box-shadow: 0 14px 40px -10px rgba(5,12,11,.7), 0 0 0 12px rgba(152,255,161,.18); }
.agent-vid-orb svg { width: 22px; height: 22px; margin-left: 3px; }

.agent-vid-copy {
  color: #fff; font-family: 'Aspekta', Arial, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  text-shadow: 0 2px 14px rgba(5,12,11,.55);
}

.agent-vid-cta:focus-visible { outline: none; }
.agent-vid-cta:focus-visible .agent-vid-orb { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #98ffa1; }

/* the play prompt stays on screen at all times, hover only deepens the tint.
   While a demo is playing the tint eases back so the live agent stays legible. */
.agent-video.is-playing .agent-vid-cta { opacity: 1; background: radial-gradient(120% 120% at 50% 45%, rgba(5,12,11,.12) 0%, rgba(5,12,11,.34) 100%); }
.agent-video.is-playing:hover .agent-vid-cta { opacity: 1; background: radial-gradient(120% 120% at 50% 45%, rgba(5,12,11,.20) 0%, rgba(5,12,11,.42) 100%); }

/* idle halo so the mint orb reads as clickable without a cursor on it */
@keyframes agentOrbPulse {
  0%, 100% { box-shadow: 0 10px 34px -10px rgba(5,12,11,.6), 0 0 0 8px rgba(152,255,161,.14); }
  50%      { box-shadow: 0 12px 38px -10px rgba(5,12,11,.66), 0 0 0 17px rgba(152,255,161,.05); }
}
.agent-vid-orb { animation: agentOrbPulse 2.8s ease-in-out infinite; }
.agent-video:hover .agent-vid-orb { animation: none; }

@media (max-width: 640px) {
  .agent-vid-orb { width: 50px; height: 50px; flex-basis: 50px; }
  .agent-vid-orb svg { width: 19px; height: 19px; }
  .agent-vid-copy { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-vid-cta, .agent-vid-orb { transition: none; }
  .agent-vid-orb { animation: none; }
}

/* ===== Book-a-call buttons scroll to the contact booking section 2026-07-21 ===== */
html { scroll-behavior: smooth; }
#book { scroll-margin-top: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   STICKY NAVBAR (2026-08-12). The bar rides transparent over the
   hero so the one-surface head gradient is untouched, then pins to
   the top of the viewport with a solid dark background the moment
   the page scrolls. nav-sticky.js toggles .is-stuck past 8px.
   position:sticky keeps the bar in normal flow, so no hero offset
   or height math changes anywhere.
   ============================================================ */
.navbar-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
  border-bottom: 1px solid transparent;
}
.navbar-wrap.is-stuck,
.page-cs .navbar-wrap.is-stuck,
.page-about .navbar-wrap.is-stuck {
  background: #0a0a0a !important;
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* ============================================================
   NAV CTA WIDTH (2026-08-12). The button read "Book a discovery"
   with the word "call" cut off: .navbar-right (and its mirror
   .navbar-middle, which keeps the centre links centred) were both
   capped at 230px, while the 18px label plus the 40px icon needs
   about 250px, and .secondary-btn-texts clips with overflow:hidden.
   Both sides move together so the nav links stay optically centred.
   ============================================================ */
@media (min-width: 992px) {
  .navbar-wrap .navbar-middle,
  .navbar-wrap .navbar-right { max-width: 270px !important; }
}
.navbar-right .secondary-btn { flex: 0 0 auto; white-space: nowrap; }
.navbar-right .nav-button-text { white-space: nowrap; }

/* ============================================================
   NAV BAR HEIGHT (2026-08-12). Webflow gives .navbar-wrap NO vertical
   padding on desktop (its 14px rule is inside @media max-width:767px),
   so the desktop bar was exactly its tallest child: the 44px CTA button.
   This is the ONE place that sets desktop bar height. Total height is
   44px + 2x the padding below, so 8px gives a 60px bar.
   Scoped to >=901px so the compact mobile bar (10px) is untouched.
   ============================================================ */
@media (min-width: 901px) {
  .navbar-wrap { padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* ============================================================
   CONTACT LISTICLE (2026-08-12). Replaces the icon-only social row
   on contact.html with a labelled list: Email, LinkedIn, Twitter,
   Instagram, YouTube. Each row carries icon, channel name, and the
   actual handle, so a visitor can read the destination before clicking.
   ============================================================ */
.pg-contact-list { list-style: none; margin: 34px auto 0; padding: 0; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.pg-contact-list li { margin: 0; }
.pg-cl-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  color: #fff; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pg-cl-row:hover { background: rgba(152,255,161,0.10); border-color: #98ffa1; transform: translateX(3px); }
.pg-cl-row:focus-visible { outline: 2px solid #98ffa1; outline-offset: 2px; }
.pg-cl-ico { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; }
.pg-cl-ico svg { width: 20px; height: 20px; fill: #98ffa1; }
.pg-cl-label { font-family: 'Aspekta', Arial, sans-serif; font-size: 15px; font-weight: 600; flex: 0 0 auto; }
.pg-cl-value { font-family: 'Geist Mono', monospace; font-size: 13.5px; color: rgba(255,255,255,0.62); margin-left: auto; text-align: right; }
.pg-cl-arrow { color: rgba(255,255,255,0.45); font-size: 14px; flex: 0 0 auto; }
.pg-cl-row:hover .pg-cl-arrow { color: #98ffa1; }
@media (max-width: 520px) {
  .pg-cl-row { padding: 12px 14px; gap: 10px; }
  .pg-cl-value { font-size: 12px; }
}

/* ============================================================
   ANCHOR OFFSET (2026-08-12). The navbar is sticky, so a jump to
   #pricing (or any in-page anchor) would park the section heading
   underneath the 60px bar. scroll-margin-top stops the target
   short of it with room to breathe.
   ============================================================ */
section[id], [id="pricing"] { scroll-margin-top: 76px; }
@media (max-width: 900px) { section[id], [id="pricing"] { scroll-margin-top: 62px; } }

/* ============================================================
   CONTACT EYEBROW (2026-08-12). Was a large green uppercase mono
   label. Now it wears the exact case-studies pill treatment:
   Aspekta 14px medium, sentence case, brand green ground, dark text,
   50px radius, 2px/8px padding. Block + auto margins so it stays
   centred in the hero without relying on the parent text-align.
   ============================================================ */
.pg-hero .pg-eyebrow,
.pg-hero-center .pg-eyebrow {
  display: block !important;
  width: -moz-fit-content; width: fit-content;
  margin: 0 auto 10px !important;
  font-family: 'Aspekta', Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 140% !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #05221a !important;
  background: #98ffa1 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 2px 10px !important;
}

/* mobile: .page-wrapper goes flat #0a0a0a there, so the about hero carries the gradient
   itself. This lives at the end of the file because the desktop rule above declares
   `background: transparent !important` and would otherwise win at every width. */
@media (max-width: 767px) {
  .page-about .about.container-full { background: radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%) !important; padding-top: 40px !important; padding-bottom: 64px !important; }
}

/* ============================================================
   FOOTER SOCIAL HOVER (2026-08-12). The icons went solid green on
   hover: `.ft-socials a:hover { color:#98ffa1 }` (0,2,1) outranks
   `.pg-social-icon:hover { color:#05221a }` (0,2,0), so the glyph
   turned the same green as the button ground and disappeared.
   This selector is (0,3,1) and puts the dark glyph back.
   ============================================================ */
.ft-socials a.pg-social-icon:hover { color: #05221a !important; background: #98ffa1 !important; border-color: #98ffa1 !important; }
.ft-socials a.pg-social-icon:hover svg { fill: #05221a !important; }

/* ============================================================
   CASE STUDIES BY CATEGORY (2026-08-12). The list was 18 full-width
   cards in one endless scroll. Now grouped under the "What we build"
   pillars, three cards per row on desktop, two on tablet, one on
   phone. Cards flip from the wide side-by-side layout to a vertical
   card so they read at one third of the width.
   ============================================================ */
.cs-l-list .cs-l-content { display: block !important; }
.cs-l-groups { display: flex; flex-direction: column; gap: 58px; }
.cs-l-groups > .cs-l-pill { align-self: flex-start; margin-bottom: 2px !important; }

.cs-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 24px; border-bottom: 1px solid #e0e5e0; }
.cs-group-title { font-family: 'Aspekta', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.015em; color: #0a0a0a; margin: 0; }
.cs-group-count { margin-left: auto; text-align: right; font-family: 'Geist Mono', monospace; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: #7d857e; }

.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
@media (max-width: 1080px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cs-grid { grid-template-columns: minmax(0, 1fr); } }

/* the wide 480px-image card layout cannot survive a one-third column: go vertical */
.cs-grid .cs-l-card { flex-direction: column !important; gap: 0 !important; height: 100%; margin: 0 !important; }
.cs-grid .cs-l-media, .cs-grid .cs-l-media-ph {
  flex: 0 0 auto !important; width: 100% !important; height: auto !important;
  aspect-ratio: 16 / 10 !important; order: 0 !important;
}
.cs-grid .cs-l-body { max-width: none !important; padding: 18px 16px 16px !important; flex: 1 1 auto !important; }
.cs-grid .cs-l-title { font-size: 20px !important; line-height: 1.2 !important; margin-top: 6px !important; }
.cs-grid .cs-l-sub { font-size: 14px !important; margin: 8px 0 0 !important; }
.cs-grid .cs-l-kpis { margin-top: 14px !important; gap: 7px !important; }
.cs-grid .cs-l-kpis li { font-size: 13px !important; line-height: 1.4 !important; }
.cs-grid .cs-ph-title { font-size: 17px !important; }
.cs-grid .cs-l-btn { margin-top: 16px !important; }
.cs-grid .cs-l-btn .cs-l-btn-txt { font-size: 13.5px !important; }
.cs-grid .cs-l-btn .cs-l-btn-ico { width: 34px !important; height: 34px !important; }

/* ============================================================
   ABOUT HERO FILLS THE FOLD (2026-08-12). At 100% and above, the
   white Journey section was peeking in at the bottom of the first
   screen. The hero now claims the full viewport minus the 60px nav
   bar above it, and centres its content in that space, so the head
   is dark edge to edge at every zoom level.
   ============================================================ */
@media (min-width: 901px) {
  .page-about .about.container-full {
    min-height: calc(100vh - 60px) !important;
    align-items: center !important;
  }
}

/* ============================================================
   MOBILE PASS for everything added on 2026-08-12 (2026-08-12).
   Covers the sticky bar, the grouped case-study grid, the contact
   listicle, and the anchor offset. Desktop is untouched: every rule
   below sits inside a max-width query.
   ============================================================ */

/* anchor offset has to match the SHORTER mobile bar (44px + 2x10px = 64px) */
@media (max-width: 900px) {
  section[id], [id="pricing"] { scroll-margin-top: 74px; }
}

/* --- grouped case studies --- */
@media (max-width: 860px) {
  .cs-group-title { font-size: 21px; }
  .cs-group-count { font-size: 11.5px; }
  .cs-l-groups { gap: 42px; }
  .cs-group-head { margin-bottom: 18px; padding-bottom: 11px; }
}
@media (max-width: 700px) {
  /* one column: the card can breathe again, so give the text back its size */
  .cs-grid { gap: 16px; }
  .cs-grid .cs-l-card { padding: 8px !important; }
  .cs-grid .cs-l-media, .cs-grid .cs-l-media-ph { aspect-ratio: 16 / 9 !important; }
  .cs-grid .cs-l-title { font-size: 22px !important; }
  .cs-grid .cs-l-sub { font-size: 15px !important; }
  .cs-grid .cs-l-kpis li { font-size: 14px !important; }
  .cs-grid .cs-l-body { padding: 16px 14px 14px !important; }
}
@media (max-width: 420px) {
  .cs-group-head { gap: 6px; }
  .cs-group-title { font-size: 19px; }
  /* long category names must never force a sideways scroll */
  .cs-group-title, .cs-group-count { min-width: 0; overflow-wrap: anywhere; }
}

/* --- contact listicle --- */
@media (max-width: 520px) {
  .pg-contact-list { margin-top: 26px; }
  .pg-cl-label { font-size: 14px; }
  .pg-cl-row { gap: 10px; }
  /* the handle is the part that gives way, never the row width */
  .pg-cl-label, .pg-cl-ico, .pg-cl-arrow { flex-shrink: 0; }
  .pg-cl-value { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .pg-cl-value { font-size: 11px; }
  .pg-cl-row { padding: 11px 12px; }
}

/* --- sticky bar on phones: keep it slim so it does not eat the viewport --- */
@media (max-width: 900px) {
  .navbar-wrap.is-stuck { box-shadow: 0 4px 16px rgba(0,0,0,.35); }
}

/* ============================================================
   TRUSTED BY PILL (2026-08-12). Same brand-green treatment as the
   "About the studio" pill on about.html: #98ffa1 ground, dark text.
   The star asset is a dark #050C0B disc with a #98FFA1 star inside,
   so it needs no recolouring: it reads as a dark badge on the green.
   ============================================================ */
.cs-l-hero .about-head-batch {
  background: #98ffa1 !important;
  border: none !important;
  color: #05221a !important;
}
.cs-l-hero .about-head-batch .about-batch-text { color: #05221a !important; }

/* ============================================================
   TESTIMONIALS ROW 3 (2026-08-12). Avinash used to span the whole
   3-column row. It now takes 2 columns and a third stat card sits
   beside it, so the grid reads: quote + stat, stat + quote,
   quote + stat. The card wears the yellow accent, the one template
   colour not already used by the 40+ (purple) and $500K+ (red) tiles.
   ============================================================ */
.testimonials .testimonial-item.av-half { grid-column: span 2 !important; }
.testimonials .testimonial-item._05 {
  background-color: #ffedd4;
  padding: var(--_perimeters---spacings--space-lg);
}
.testimonials .testimonial-item._05 .testimonials-body { justify-content: flex-start; }

/* the grid drops to 2 columns at 767 and 1 at 479, where a 2-column span would
   invent an extra implicit column. Reset every spanning item at those widths. */
@media (max-width: 767px) {
  .testimonials .testimonial-item.av-half { grid-column: span 2 !important; }
}
@media (max-width: 479px) {
  .testimonials .testimonial-item.av-half,
  .testimonials .testimonial-item.av-wide,
  .testimonials .testimonial-list > * { grid-column: auto !important; }
}

/* ============================================================
   FOOTER TOP GAP (2026-08-12). Two paddings were stacking above the
   wordmark: .footer-wrapper padding-top 56px plus .ft-foot padding-top
   72px, so 128px of empty black before any content. Collapsed to a
   single 44px gap, which is what the grid actually needs.
   ============================================================ */
.footer-wrapper { padding-top: 0 !important; }
.ft-foot { padding-top: 44px !important; }
@media (max-width: 767px) { .ft-foot { padding-top: 34px !important; } }

/* ============================================================
   PRICING COMPACT (2026-08-12). The section ran taller than the
   viewport, so the heading and the card CTAs were cut off at the
   fold. Everything steps down about 30%: section padding 80 to 52,
   the "Pricing" title 54 to 38, card padding 40 to 26, the price
   figure 68 to 44. The card grid also narrows to 1120px and centres,
   so the three tiers sit as a block rather than running edge to edge.
   Desktop only: the tablet and phone stacks keep their own sizes.
   ============================================================ */
@media (min-width: 992px) {
  .pricings.container-full { padding-top: 52px !important; padding-bottom: 56px !important; }
  .pricing-head .blog-title.heading-02 { font-size: 38px !important; line-height: 1.1 !important; }
  .pricing-body { margin-top: 24px !important; }

  .pricing-list, .pricing-list.monthly, .pricing-body .pricing-list {
    gap: 18px !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pricing-item { padding: 26px !important; gap: 18px !important; border-radius: 14px !important; }
  .pricing-item-pro-text.title-02 { font-size: 20px !important; }
  .pricing-item-pro-txt.para-regular { font-size: 14.5px !important; line-height: 1.5 !important; }
  .pricing-dollar.heading-02 { font-size: 44px !important; line-height: 1.1 !important; }
  .pricing-feature-title.caption { font-size: 11.5px !important; }
  .pricing-feature-text.para-regular { font-size: 14.5px !important; line-height: 1.45 !important; }
  .pricing-features-wrap { gap: 8px !important; }
  .pricing-feature-wrap { gap: 12px !important; }
  .pricing-feature-ico { width: 16px !important; height: 16px !important; }
}

/* ============================================================
   PRICING SECTION EDGES (2026-08-12). The dark pricing block sits
   between two WHITE sections: .hsx-wrap above (#fff) and
   .testimonials below (#fff). Landing on #pricing left a sliver of
   each visible, top and bottom, so the dark block read as a boxed
   panel with white borders instead of a full-bleed section.

   Two causes, both fixed here:
   1. scroll-margin-top was 76px while the sticky bar is exactly 60px,
      so 16px of the white section above showed under the bar.
      The offset must EQUAL the bar height, never exceed it.
   2. The section was shorter than the viewport, so the white section
      below peeked in at the fold. It now claims the full screen.
   ============================================================ */
@media (min-width: 992px) {
  /* land flush under the 60px bar: no white can show between them */
  #pricing, section#pricing, section[id]#pricing { scroll-margin-top: 60px !important; }
  /* own the rest of the viewport so the white section below cannot appear */
  .pricings.container-full {
    min-height: calc(100vh - 60px) !important;
    align-items: center !important;
  }
}
/* mobile bar is 64px (44px + 2x10px), so the offset matches that instead */
@media (max-width: 991px) {
  #pricing, section#pricing { scroll-margin-top: 64px !important; }
}

/* ============================================================
   HERO SECOND CTA (2026-08-12). "See case studies" sits beside
   "Book a discovery call" and jumps to the list on case-studies.html.
   .about-top-btns is justify-content:space-between, which was fine
   with one child but would fling two apart, so it packs left.
   Per BUILD.md rule 1 the anchor offset EQUALS the bar height, so no
   sliver of the dark hero shows above the light list section.
   ============================================================ */
.about-top-btns { justify-content: flex-start !important; gap: 14px !important; flex-wrap: wrap; }
@media (min-width: 992px) { #case-studies { scroll-margin-top: 60px !important; } }
@media (max-width: 991px) { #case-studies { scroll-margin-top: 64px !important; } }

/* ============================================================
   HERO SECONDARY BUTTON (2026-08-12). "See case studies" was cloned
   from the booking CTA and inherited w-variant-cd52b52e, the green
   primary variant, on both the anchor and the icon circle. So both
   hero buttons rendered identical green and neither read as primary.
   The variant class is now stripped in the markup, and the grey is
   set explicitly here rather than left to whatever the base class
   happens to inherit.
   ============================================================ */
.hero-cs-btn {
  background-color: #2b3330 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  transition: background-color .2s ease, border-color .2s ease;
}
.hero-cs-btn .nav-button-text { color: #ffffff !important; }
.hero-cs-btn .secondary-btn-icon-outside {
  background-color: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
}
.hero-cs-btn:hover { background-color: #3a4340 !important; border-color: rgba(255,255,255,0.28) !important; }
.hero-cs-btn:hover .secondary-btn-icon-outside { background-color: rgba(255,255,255,0.26) !important; }

/* ============================================================
   HERO ACCENT (2026-08-12). "Self-Improving AI" in the index hero
   headline carries the brand green, the same #98ffa1 as the CTA
   buttons and the section pills.
   ============================================================ */
.hero-accent { color: #98ffa1; }

/* ============================================================
   LAST TESTIMONIAL PHOTO (2026-08-12). Kanchan's photo sat on the
   left, the same side as Avinash's card directly above it, so the
   two full-width rows read lopsided. The photo moves to the right
   edge with flex order, which needs no markup reshuffle.
   ============================================================ */
.testimonials .testimonial-item.tm-photo-right .testimonial-thumb { order: 2; }
.testimonials .testimonial-item.tm-photo-right .testimonials-body { order: 1; }

/* ============================================================
   PRICING ANCHOR, FULL DARK SCREEN (2026-08-12). calc(100vh - 60px)
   was exactly the space under the bar, which left no slack: any
   rounding, or a landing position a few pixels short, exposed the
   white testimonials section at the bottom. A flat 100vh gives 60px
   of overshoot that is simply more dark, so the fold can never show
   the light neighbour.
   ============================================================ */
@media (min-width: 992px) {
  .pricings.container-full { min-height: 100vh !important; }
}

/* ============================================================
   "WHAT WE BUILD" COMPACT (2026-08-12). Six pillars in a 3x2 grid
   ran past the fold: the second row was sliced in half and its text
   was unreadable. Everything steps down so all six fit one screen at
   100% zoom. Section padding 80 to 46, heading 54 to 34, card padding
   and type tightened, icon 48 to 38.
   Desktop only: below 992px the grid is a single column and scrolling
   through it is correct behaviour.
   ============================================================ */
@media (min-width: 992px) {
  .work.container-full { padding-top: 46px !important; padding-bottom: 50px !important; }
  .work-content { gap: 26px !important; }
  .work-head { max-width: none !important; }
  .work-title.heading-02 { font-size: 34px !important; line-height: 1.12 !important; }
  .work-txt-batch.tag-bold { font-size: 13px !important; }

  .work-list, .work-list._02 { gap: 14px !important; }
  .work-item, .work-item._03 { padding: 20px !important; gap: 14px !important; border-radius: 14px !important; }
  .work-item-ico { width: 38px !important; height: 38px !important; }
  .work-item-body { gap: 8px !important; }
  .work-item-title.title-01 { font-size: 20px !important; line-height: 1.18 !important; }
  .work-item-text.para-regular { font-size: 14px !important; line-height: 1.45 !important; }
}

/* ============================================================
   SECTION PADDING RHYTHM (2026-08-12). Audited every index section
   for the same overflow as "What we build". Three were still on the
   Webflow default of 80px top and bottom, and .agents was heavier
   still at 88/96, which is what pushes content past the fold before
   any of it has been read. Brought onto one rhythm with the tuned
   sections (work 46/50, pricing 52/56). Desktop only.
   Sections deliberately NOT forced to one screen: testimonials (six
   tiles including two full-width quotes) and FAQs (an accordion
   list). Those are meant to scroll; only their padding was excessive.
   ============================================================ */
@media (min-width: 992px) {
  .agents.container-full { padding: 56px 0 60px !important; }
  .testimonials.container-full { padding-top: 56px !important; padding-bottom: 60px !important; }
  .faqs.container-full { padding-top: 56px !important; padding-bottom: 64px !important; }
  .fs.container-full { padding: 36px 0 52px !important; }
}

/* ============================================================
   FULL-SCREEN SECTION BACKGROUNDS (2026-08-12).
   Landing on "What we build" showed a band of the dark hero above it
   and white below, because the grey section was only about 640px tall
   in a ~790px viewport. Each of these sections now stands at least one
   full viewport, with its content vertically centred, so the grey
   extends evenly above and below the cards and the screen shows one
   background instead of three.
   Desktop only. Testimonials and FAQs already run taller than a
   screen, so they are not in this list.
   ============================================================ */
@media (min-width: 992px) {
  .work.container-full,
  .about.container-full,
  .fs.container-full,
  .agents.container-full {
    min-height: 100vh !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }
}

/* ============================================================
   HERO GAP UNDER THE BAR (2026-08-12). index and case-studies only.
   index was 28px section padding + 8px on .main-hero-top = 36px.
   case-studies was worse: 40px padding PLUS
   `.cs-l-hero > .container:first-child { margin-top: auto }`, which
   vertically centred the block inside a full-height hero and pushed
   the pill far below the bar. Auto margin off, both pages on 18px.
   contact.html is deliberately untouched.
   ============================================================ */
@media (min-width: 992px) {
  .main-hero.container-full { padding-top: 14px !important; }
  .main-hero .main-hero-top { padding-top: 4px !important; }

  .cs-l-hero { padding-top: 18px !important; }
  .cs-l-hero > .container:first-child { margin-top: 0 !important; margin-bottom: auto !important; }
}

/* the contact rows keep the address on Email only. LinkedIn, Twitter,
   Instagram and YouTube all resolved to the same handle, so printing it
   four times added nothing. The row, its size and its click target are
   unchanged, the arrow still carries the affordance. */
.pg-cl-arrow { margin-left: auto !important; }

/* ============================================================
   EVERY HERO ON THE INDEX RHYTHM (2026-08-12).
   Reference is index.html: 14px section padding + 4px inner = 18px
   between the bar and the first element.

   The trap I fell into on case-studies: these heroes have a
   min-height that fills the screen, so pulling the content up only
   MOVES the slack to the bottom and leaves a hole. The space has to
   be spent, not relocated. So on every hero:

     text block   -> pinned to the top at 18px
     last element -> margin auto top and bottom, which centres it in
                     whatever space is left over
     media        -> stretches to the full column height

   Net effect: the gap under the bar is small and identical on every
   page, and the leftover is shared evenly instead of pooling under
   the content.
   ============================================================ */
@media (min-width: 992px) {



}

/* ============================================================
   CORRECTION (2026-08-12). The previous block was wrong twice.

   1. The auto margins did nothing. `.pg-contact-list` and
      `.about-stats-wrap` are NOT flex children of the hero, there is
      a plain `.container` / `.container-fluid` between them, so
      `margin: auto 0` had no free space to absorb. The content simply
      jammed to the top and ALL the space pooled at the bottom.

   2. Forcing a full-viewport hero on a page whose content does not
      fill it creates the void in the first place. Contact and About
      do not have a tall image to spend it on, so the honest fix is to
      let those heroes size to their content with even padding, rather
      than inventing space and then trying to redistribute it.

   Case studies keeps its full-height hero because it HAS a portrait
   that stretches to fill the column.
   ============================================================ */
@media (min-width: 992px) {

  /* ---------- contact: size to content, even rhythm ---------- */
  .pg-hero.pg-hero-center {
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding-top: 18px !important;
    padding-bottom: 72px !important;
  }
  .pg-hero.pg-hero-center .pg-lead { margin-top: 14px !important; }
  .pg-hero.pg-hero-center .pg-contact-list {
    margin-top: 36px !important;
    margin-bottom: 0 !important;
  }

  /* ---------- about: full-viewport green, content pinned top ----------
     Ashwanth, 2026-08-13: the first screen of About must be entirely
     green. Content sits at the top, the rest of the section is a
     deliberate empty green band, and Founder Story starts below the
     fold. This intentionally reverses the 2026-08-12 size-to-content
     call for THIS page only. */
  .page-about .about.container-full {
    min-height: calc(100vh - 70px) !important;
    align-items: flex-start !important;
    padding-top: 18px !important;
    padding-bottom: 72px !important;
  }
  .page-about .about-content { display: block !important; height: auto !important; }
  .page-about .about-stats-wrap {
    margin-top: 36px !important;
    margin-bottom: 0 !important;
  }
}

/* case studies gets the same honest treatment as contact and about:
   size to content, small gap under the bar, even padding at the
   bottom. No forced full-viewport height, so there is no invented
   space to redistribute and nothing to stretch. */
@media (min-width: 992px) {
  .cs-l-hero {
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 64px !important;
  }
  .cs-l-hero > .container:first-child { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ============================================================
   CONTACT HERO RHYTHM + ADDRESS ALIGNMENT (2026-08-12).
   The address floated mid-row because BOTH .pg-cl-value and
   .pg-cl-arrow carried margin-left:auto, so the value stopped where
   the label ended and the arrow took the free space. Only the value
   gets the auto now, so it sits hard right beside the arrow.
   Spacing: more air after the H1 and before the channel list.
   ============================================================ */
@media (min-width: 992px) {
  .pg-hero.pg-hero-center .pg-lead { margin-top: 26px !important; }
  .pg-hero.pg-hero-center .pg-contact-list { margin-top: 56px !important; }
}
.pg-cl-value { margin-left: auto !important; }
/* the row already has gap:14px between children. Adding a margin on top of
   that put ~28px between the address and the arrow, which is the gap he
   circled. No extra margin: the row gap alone holds them together. */
.pg-cl-arrow { margin-left: 0 !important; }
.pg-cl-row { gap: 10px !important; }

/* ============================================================
   CASE STUDIES HERO: WIDER PHOTO, BREATHING ROOM FOR THE LOGOS
   (2026-08-12).
   Photo was 503px in a 1164px content row (1.05fr / .8fr). The grid
   moves to 1fr / 1.2fr, which puts it at about 635px, a 26% increase,
   and the image gets 40px more height so it does not read as a
   letterbox at the new width.
   The trust band was jammed 24px under the photo with dead space
   below the logos. It now has 56px above the divider and the hero
   closes with a matching 56px, so the band sits evenly in its space
   instead of hugging the hero and trailing into a void.
   ============================================================ */
@media (min-width: 992px) {
  .cs-l-hero-grid { grid-template-columns: 1fr 1.2fr !important; }
  .cs-l-hero-media img { height: 340px !important; }
  .cs-hero-trust { margin-top: 56px !important; padding-top: 34px !important; }
  .cs-l-hero { padding-bottom: 56px !important; }
}

/* ============================================================
   CASE STUDIES: TRUST BAND PINNED TO THE BOTTOM (2026-08-12).
   The band sat 57px under the photo with a pool of dead space
   beneath the logos. The hero now claims the screen and the band is
   pushed down with margin-top:auto, so the leftover space lands
   BETWEEN the photo and the divider line instead of below the logos.

   The auto margin works here, unlike my earlier attempts, because
   .cs-hero-trust is a DIRECT flex child of .cs-l-hero. That was the
   flaw in the contact and about versions: there was a plain container
   in between, so there was no free space for the margin to absorb.
   ============================================================ */
@media (min-width: 992px) {
  .cs-l-hero {
    min-height: calc(100vh - 88px) !important;
    padding-bottom: 36px !important;
  }
  .cs-hero-trust { margin-top: auto !important; }
}

/* ============================================================
   "WHAT WE BUILD" CARDS 30% TALLER (2026-08-12).
   Vertical, not horizontal. The container width is untouched, so this
   section still shares the same left and right edge as every other
   section. Measured card height was about 187px, driven by content.
   A 245px floor is +31%. Content stays top aligned, so the extra
   height falls as breathing room under the copy rather than
   stretching the type.
   ============================================================ */
@media (min-width: 992px) {
  .work-item, .work-item._03 {
    min-height: 245px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   NO LIGHT SLIVER UNDER THE LOGO STRIP (2026-08-12).
   The band closed 22px after the logos, which left the grey section
   below it peeking through as a thin light line at the bottom of the
   first screen. Bottom padding goes 22 -> 56, so the dark runs past
   where that boundary was landing. The band's bottom border also goes
   transparent: it was drawing a faint line right at the seam.
   ============================================================ */
@media (min-width: 992px) {
  .trusted-band {
    padding-bottom: 56px !important;
    border-bottom-color: transparent !important;
  }
}

/* ============================================================
   FIRST SCREEN IS ONE BOX (2026-08-12).
   Padding could only move the seam, never guarantee it lands below
   the fold, because the hero and the logo band were separate siblings
   whose combined height depended on the copy and the window.

   They are now wrapped in .hero-screen, one box that is taller than
   the viewport by design, with the band pushed to its bottom. The
   grey section below therefore starts past the fold at ANY window
   height, so the light sliver cannot occur.

   100vh - 70px, not - 83px: the bar is about 83px, so subtracting
   less makes the box overshoot the fold by roughly 13px. Overshoot is
   safe (more dark). Undershoot is the bug.
   ============================================================ */
@media (min-width: 992px) {
  .hero-screen {
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
  }
  .hero-screen .main-hero.container-full { flex: 0 0 auto; }
  .hero-screen .trusted-band { margin-top: auto; }
}

/* ============================================================
   CASE STUDY COPY SYSTEM (2026-08-13).
   Impact meta is 3 green pointers on their own lines, never one
   sentence. Challenge and approach carry numbered lists so pain
   points and pipeline steps scan instead of reading as a wall.
   Green = outcome, everywhere, on every page.
   ============================================================ */
.cs-impact-list { list-style: none; counter-reset: csi; padding: 0; margin: 2px 0 0; display: flex; flex-direction: column; gap: 9px; }
.cs-impact-list li { counter-increment: csi; position: relative; padding-left: 32px; font-weight: 600; font-size: 17px; line-height: 1.45; color: #15803d; }
.cs-impact-list li::before { content: counter(csi); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cs-meta2 .cs-impact-cell { flex: 1 1 420px; min-width: 300px; }
/* Color semantics (Ashwanth, 2026-08-13): challenge = red, approach = blue,
   results = green. Numbered chips everywhere, no tick marks on detail pages. */
.cs-num-list { list-style: none; counter-reset: csn; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 11px; }
.cs-num-list li { counter-increment: csn; position: relative; padding-left: 36px; font-size: 16px; line-height: 1.55; color: #1a1a1a; }
.cs-num-list li::before { content: counter(csn); position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cs-num-list.cs-red li::before { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ===== book.html: nav + one centered booking box + footer, nothing else.
   Every book/call CTA on the site lands here (contact.html lost its #book
   section, so the old anchors pointed at nothing). Not in the navbar. ===== */
.book-box { max-width: 1139px; margin: 40px auto 0; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 10px; }
.book-cal { display: block; width: 100%; height: 780px; border: 0; border-radius: 12px; background: #0a0a0a; }
/* Type matches index.html exactly (heading-01 scale: Aspekta 68px, weight 500).
   The generic pg-hero-center override pushes pg-h1 to 88px; book stays on the
   site scale. New pages always inherit the existing scale, never a new one. */
.pg-hero.pg-hero-center.book-hero .pg-h1 { font-size: 68px !important; font-weight: 500 !important; }
.pg-hero.pg-hero-center.book-hero .pg-lead { font-size: 19px !important; max-width: 640px !important; }
.pg-hero.pg-hero-center.book-hero .pg-eyebrow { font-size: 13px !important; }
@media (min-width: 992px) {
  .pg-hero.pg-hero-center.book-hero { padding-bottom: 96px !important; }
}
@media (max-width: 820px) {
  .book-box { margin-top: 28px; padding: 8px; }
  .book-cal { height: 700px; }
  .pg-hero.pg-hero-center.book-hero .pg-h1 { font-size: 40px !important; }
}
.cs-num-list.cs-blue li::before { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.cs-num-list.cs-green li::before { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.cs-l-check { background: #16a34a !important; }
@media (max-width: 820px) {
  .cs-impact-list li { font-size: 15.5px; }
  .cs-num-list li { font-size: 15px; }
}