/* ============================================================
   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; }
/* 2026-09-29: the answer height is driven by --faq-h (set by the FAQ script), overriding the
   Webflow interaction's inline sizes so the minus actually closes the answer */
.faqs-tab-list .tools-list-bottom-wrap { height: var(--faq-h, 0px) !important; overflow: hidden !important; transition: height .35s ease; }
.faqs-tab-list .question-icon { opacity: 1 !important; transform: none !important; }
.faqs-tab-list:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .faqs-tab-list .tools-list-bottom-wrap { transition: none; } }

/* 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; }
/* every card: text on the left, video on the right, sliding in from the right */
.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 {
  /* colour comes from the section under the bar (nav-sticky.js sets --nav-surface) */
  background-color: var(--nav-surface, #0a0a0a) !important;
  background-image: var(--nav-surface-img, none) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
/* light section under the bar: dark text, soft line instead of a heavy shadow */
.navbar-wrap.is-stuck.nav-light { border-bottom-color: rgba(5,12,11,0.08); box-shadow: 0 4px 18px rgba(5,12,11,0.06); }
.navbar-wrap.nav-light .nav-wordmark,
.navbar-wrap.nav-light .nav-items-wrap,
.navbar-wrap.nav-light .nav-item,
.navbar-wrap.nav-light .nav-toggle-btn-wrap,
.navbar-wrap.nav-light .nav-toogle-btn { color: #050c0b !important; }

/* ============================================================
   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; }
}

/* ===== "Why we need to hop on a call" (above pricing): 2x2 reasons + call card, reference proportions ===== */
.whycall.container-full { background: var(--bg-soft) !important; padding: 96px 0 140px !important; }
/* same heading-02 type as "See the agents in action": no size, weight or font overrides */
.whycall-title { color: var(--black) !important; text-align: center; margin: 0 auto 56px !important; }
.whycall-layout { display: grid; grid-template-columns: repeat(3, 230px); gap: 14px; justify-content: center; margin: 0 auto; }
.whycall-grid { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(2, 230px); gap: 14px; }
.whycall-card { background: #eaf1ee; border: 1px solid #dde8e3; border-radius: 6px; padding: 22px; height: 200px; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; transition: border-color .2s ease; }
.whycall-card:hover { border-color: rgba(5,12,11,0.22); }
.whycall-ico { color: rgba(5,12,11,0.45); display: inline-flex; }
.whycall-name, .whycall-desc, .whycall-you { font-family: 'Aspekta', Arial, sans-serif; }
.whycall-name { color: var(--black); font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 6px; }
.whycall-desc { color: rgba(5,12,11,0.6); font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; }
.whycall-phone { border-radius: 8px; padding: 2px; background: linear-gradient(160deg, #98ffa1 0%, #0a4a2c 55%, #98ffa1 100%); }
.whycall-phone-in { height: 100%; box-sizing: border-box; background: #f3f8f6; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.whycall-tile { border-radius: 4px; overflow: hidden; flex: 1 1 0; min-height: 0; }
.whycall-tile--me img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.whycall-tile--you { background: #0a4a2c; display: flex; align-items: center; justify-content: center; }
.whycall-you-ring { width: 88px; height: 88px; border-radius: 50%; background: rgba(152,255,161,0.12); box-shadow: 0 0 0 12px rgba(152,255,161,0.06); display: flex; align-items: center; justify-content: center; }
.whycall-you { color: #98ffa1; font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.whycall-controls { display: flex; gap: 8px; padding: 5px; border-radius: 6px; background: #fff; border: 1px solid #d6e4df; }
.whycall-btn { flex: 1; height: 34px; border-radius: 4px; background: #e8efec; color: rgba(5,12,11,0.55); display: inline-flex; align-items: center; justify-content: center; }
.whycall-btn--join { background: #98ffa1; color: #05221a; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.whycall-btn--join:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(5,34,26,.5); }
.whycall-btn--join:focus-visible { outline: 2px solid #0a4a2c; outline-offset: 3px; }
@media (max-width: 860px) {
  .whycall.container-full { padding: 64px 0 96px !important; }
  .whycall-title { margin-bottom: 36px !important; }
  .whycall-layout { grid-template-columns: repeat(2, minmax(0, 230px)); }
  .whycall-grid { grid-template-columns: repeat(2, minmax(0, 230px)); }
  .whycall-phone { grid-column: 1 / 3; height: 420px; width: 100%; max-width: 300px; justify-self: center; }
}
@media (max-width: 520px) {
  .whycall-layout, .whycall-grid { grid-template-columns: minmax(0, 1fr); }
  .whycall-grid, .whycall-phone { grid-column: 1; }
  .whycall-card { height: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .whycall-card, .whycall-btn--join { transition: none; } }

/* ===== Testimonials slider: one full card + 75% of the next, hidden scrollbar, arrows loop forever ===== */
.tsl.container-full { background: #fff !important; padding: 96px 0 104px !important; overflow: hidden; }
.tsl-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-bottom: 40px; }
.tsl-title { color: var(--black) !important; margin: 0 !important; font-weight: 500 !important; }
.tsl-nav { display: flex; gap: 10px; }
.tsl-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #eaf1ee; color: var(--black); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.tsl-btn:hover { background: #d6e4df; transform: translateY(-1px); }
.tsl-btn:focus-visible { outline: 2px solid #0a4a2c; outline-offset: 3px; }
.tsl-viewport { --tsl-gap: 16px; container-type: inline-size; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.tsl-viewport::-webkit-scrollbar { display: none; }
.tsl-track { display: flex; gap: var(--tsl-gap); width: max-content; }
.tsl-card { --w: calc((100cqw - var(--tsl-gap)) / 1.75); flex: 0 0 var(--w); width: var(--w); scroll-snap-align: start; background: #eaf1ee; border-radius: 8px; padding: 24px; display: grid; grid-template-columns: 40% 1fr; gap: 36px; height: 380px; box-sizing: border-box; overflow: hidden; }
.tsl-photo { border-radius: 6px; overflow: hidden; background: #d6e4df; height: 100%; min-height: 0; }
.tsl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.tsl-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; min-height: 0; padding: 4px 8px 4px 0; }
.tsl-logo { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; display: block; }
.tsl-logo-text { font-family: 'Aspekta', Arial, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--black); line-height: 40px; }
.tsl-quote { margin: auto 0; font-family: 'Aspekta', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: var(--black); }
.tsl-name { font-family: 'Aspekta', Arial, sans-serif; font-size: 16px; font-weight: 500; color: var(--black); }
.tsl-role { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(5,12,11,0.5); margin-top: 4px; }
@media (max-width: 991px) {
  .tsl-card { --w: calc((100cqw - var(--tsl-gap)) / 1.4); grid-template-columns: 1fr; gap: 20px; height: auto; padding: 20px; }
  .tsl-photo { aspect-ratio: 4 / 3; height: auto; }
  .tsl-quote { font-size: 16px; margin: 0; }
}
@media (max-width: 767px) {
  .tsl.container-full { padding: 64px 0 72px !important; }
  .tsl-head { margin-bottom: 32px; }
  .tsl-card { --w: calc((100cqw - var(--tsl-gap)) / 1.2); padding: 20px; }
  .tsl-btn { width: 42px; height: 42px; }
  .tsl-quote { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .tsl-viewport { scroll-behavior: auto; } .tsl-btn { transition: none; } }

/* ===== Pricing owns the whole screen (2026-09-28). The bar now blends with the section
   under it, so pricing lands at the very top (under the bar) and runs 120px past the
   fold: no strip of the white testimonials below, no strip of the section above. ===== */
#pricing, section#pricing, section[id]#pricing { scroll-margin-top: 0 !important; }
.pricings.container-full { min-height: calc(100vh + 120px) !important; padding-top: 110px !important; padding-bottom: 110px !important; align-items: center !important; box-sizing: border-box; }
@media (max-width: 767px) { .pricings.container-full { min-height: 0 !important; padding-top: 96px !important; padding-bottom: 80px !important; } }
/* the page gradient is viewport-fixed on .page-wrapper, so the bar pins the same gradient to
   the viewport too: identical pixels, no seam between bar and section */
.navbar-wrap.is-stuck.nav-grad { background-attachment: fixed !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; }

/* ===== Navbar CTAs (2026-09-28): "Contact us" + "Book a call" replace "Get Started" ===== */
.nav-cta-pair { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.nav-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 40px; font-family: 'Aspekta', Arial, sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta:focus-visible { outline: 2px solid #98ffa1; outline-offset: 3px; }
.nav-cta--ghost { background: rgba(255,255,255,0.10); color: #fff !important; }
.nav-cta--ghost:hover { background: rgba(255,255,255,0.18); }
.nav-cta--solid { background: #98ffa1; color: #05221a !important; }
.nav-cta--solid:hover { background: #b9f6ca; }
/* light section under the bar */
.navbar-wrap.nav-light .nav-cta--ghost { background: rgba(5,12,11,0.07); color: #050c0b !important; }
.navbar-wrap.nav-light .nav-cta--ghost:hover { background: rgba(5,12,11,0.12); }
.navbar-wrap.nav-light .nav-cta--solid { background: #050c0b; color: #fff !important; }
.navbar-wrap.nav-light .nav-cta--solid:hover { background: #0a4a2c; }
@media (max-width: 991px) { .nav-cta--ghost { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-cta { transition: none; } }

/* ===== Navbar to the corners (2026-09-28): logo hard left, CTAs hard right, links stay centred ===== */
@media (min-width: 992px) {
  .navbar-wrap .navbar { max-width: none !important; width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; }
  .navbar-wrap .navbar-middle { flex: 1 1 0 !important; max-width: none !important; display: flex !important; justify-content: flex-start !important; }
  .navbar-wrap .navbar-right { flex: 1 1 0 !important; max-width: none !important; display: flex !important; justify-content: flex-end !important; }
}

/* ===== Footer v2 (2026-09-28), reverse-engineered from the Graphy reference:
   black CTA card with a white radial glow at the top, then a white panel holding a
   bordered inner card, and a giant near-invisible wordmark cropped at the bottom. ===== */
.footer-wrapper { background: #eceeed !important; padding: 56px 24px 72px !important; }
.fx-shell { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.fx-cta { position: relative; overflow: hidden; border-radius: 36px; background:
  radial-gradient(ellipse 72% 78% at 50% -22%, #ffffff 0%, #d9d9d9 16%, #6e6e6e 34%, #1c1c1c 52%, #000 66%), #000;
  text-align: center; padding: 88px 24px 120px; }
.fx-cta-h { color: #fff !important; font-family: 'Aspekta', Arial, sans-serif; font-size: 40px !important; font-weight: 600 !important; letter-spacing: -.025em; line-height: 1.15 !important; margin: 0 auto 16px !important; max-width: 760px; text-shadow: 0 1px 24px rgba(0,0,0,.25); }
.fx-cta-p { color: rgba(255,255,255,.55); font-size: 18px; line-height: 1.6; max-width: 540px; margin: 0 auto 44px; }
.fx-cta-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; background: #fff; color: #050c0b !important; border-radius: 10px; font-family: 'Aspekta', Arial, sans-serif; font-size: 16px; font-weight: 500; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.fx-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(255,255,255,.35); }
.fx-cta-btn:focus-visible { outline: 2px solid #98ffa1; outline-offset: 3px; }
.fx-panel { position: relative; overflow: hidden; background: #fff; border-radius: 40px; padding: 80px 80px 0; box-shadow: 0 30px 80px -50px rgba(5,12,11,.25); }
.fx-card { position: relative; z-index: 1; background: #fff; border: 1px solid #ebedec; border-radius: 32px; padding: 64px 64px 44px; box-shadow: 0 28px 60px -34px rgba(5,12,11,.22); }
.fx-top { display: flex; justify-content: space-between; gap: 48px; }
.fx-brand { max-width: 440px; }
.fx-logo { display: inline-flex; align-items: center; gap: 10px; color: #050c0b !important; text-decoration: none !important; font-family: 'Aspekta', Arial, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.fx-logo img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.fx-desc { color: rgba(5,12,11,.6); font-size: 15px; line-height: 1.6; margin: 24px 0 26px; }
.fx-socials { display: flex; gap: 14px; }
.fx-soc { width: 22px; height: 22px; color: #050c0b; display: inline-flex; transition: opacity .2s ease; }
.fx-soc svg { width: 100%; height: 100%; }
.fx-soc:hover { opacity: .6; }
.fx-cols { display: grid; grid-template-columns: repeat(3, minmax(130px, auto)); gap: 56px; }
.fx-col { display: flex; flex-direction: column; gap: 14px; }
.fx-col-h { font-family: 'Aspekta', Arial, sans-serif; font-size: 16px; font-weight: 600; color: #050c0b; margin-bottom: 6px; }
.fx-col a { color: rgba(5,12,11,.6) !important; font-size: 15px; text-decoration: none !important; transition: color .2s ease; }
.fx-col a:hover { color: #050c0b !important; }
.fx-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 44px; padding-top: 32px; border-top: 1px solid #ebedec; color: rgba(5,12,11,.6); font-size: 14px; }
.fx-legal { display: flex; gap: 24px; }
.fx-legal a { color: rgba(5,12,11,.6) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.fx-legal a:hover { color: #050c0b !important; }
.fx-mark { font-family: 'Aspekta', Arial, sans-serif; font-weight: 600; font-size: clamp(72px, 15.5vw, 230px); letter-spacing: -.05em; line-height: .78; text-align: center; white-space: nowrap; margin: 28px 0 -0.06em; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,12,11,.075) 0%, rgba(5,12,11,.02) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 991px) {
  .fx-panel { padding: 40px 24px 0; border-radius: 32px; }
  .fx-card { padding: 40px 32px 32px; border-radius: 24px; }
  .fx-top { flex-direction: column; }
  .fx-cta-h { font-size: 32px !important; }
}
@media (max-width: 600px) {
  .footer-wrapper { padding: 32px 12px 40px !important; }
  .fx-cta { border-radius: 24px; padding: 64px 20px 80px; }
  .fx-cta-h { font-size: 26px !important; }
  .fx-cta-p { font-size: 16px; margin-bottom: 32px; }
  .fx-panel { padding: 16px 12px 0; border-radius: 24px; }
  .fx-card { padding: 28px 22px 24px; border-radius: 18px; }
  .fx-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .fx-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .fx-cta-btn, .fx-soc, .fx-col a { transition: none; } }

/* ===== Footer v2 tuning (2026-09-28): brand colours + reference-sized glow + wordmark fit ===== */
.footer-wrapper { background: var(--bg-soft, #e3edeb) !important; }
/* glow sized to the reference: bright across the whole top, fading to black by just past half height;
   white core warms into mint and deep green (brand) instead of neutral grey */
.fx-cta { background:
  radial-gradient(120% 120% at 15% 0%, #17352b 0%, #0a0a0a 62%), /* same gradient as the hero (.page-wrapper) */
  #0a0a0a !important; padding: 84px 24px 116px !important; margin: 0 16px; }
.fx-cta-h { text-shadow: 0 2px 18px rgba(5,20,12,.45); }
.fx-cta-p { color: rgba(255,255,255,.62) !important; }
.fx-cta-btn { background: #98ffa1 !important; color: #05221a !important; }
.fx-cta-btn:hover { background: #b9f6ca !important; box-shadow: 0 14px 30px -12px rgba(152,255,161,.45) !important; }
/* wordmark: sized from the real Aspekta 600 advance width (6.52em, 5.92em after -0.05em tracking)
   so the whole of "ashwanth.dev" fits the panel, then cropped so only the top half shows */
.fx-panel { container-type: inline-size; }
.fx-mark { font-size: 16.2cqw !important; line-height: 1 !important; margin: 24px 0 -0.47em !important; /* crop at half the tallest letter (h, t, d rise 0.72em above the baseline): top 50% shows */
  background: linear-gradient(180deg, rgba(5,12,11,.09) 0%, rgba(5,12,11,.035) 60%) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* ===== Footer v3 (2026-09-28) ===== */
/* heading ~30% wider so the empty side margins shrink to about 75% of what they were */
.fx-cta-h { font-size: 52px !important; max-width: 820px !important; line-height: 1.1 !important; }
.fx-cta-p { font-size: 20px !important; max-width: 660px !important; }
@media (max-width: 991px) { .fx-cta-h { font-size: 40px !important; } .fx-cta-p { font-size: 18px !important; } }
@media (max-width: 600px) { .fx-cta-h { font-size: 28px !important; } .fx-cta-p { font-size: 16px !important; } }
/* colour split through the middle of the CTA box: the section above carries on down to the
   box's centre line (--fx-top, set by nav-sticky.js from whatever sits above the footer),
   then the site grey (--bg-soft) takes over, so the footer reads as starting at the box */
.footer-wrapper { background: linear-gradient(180deg, var(--fx-top, #ffffff) 0, var(--fx-top, #ffffff) var(--fx-split, 290px), var(--bg-soft, #e3edeb) var(--fx-split, 290px), var(--bg-soft, #e3edeb) 100%) !important; }
/* newsletter button: arrow shows it opens a new page */
.fx-cta-btn { gap: 8px; }
.fx-cta-ico { transition: transform .2s ease; }
.fx-cta-btn:hover .fx-cta-ico { transform: translate(2px, -2px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== Footer v5 (2026-09-29): colours swapped. The green-to-black gradient is now the footer
   band itself (from the CTA box's centre line down), and the CTA box wears the site grey. ===== */
.footer-wrapper { background:
  linear-gradient(180deg, var(--fx-top, #ffffff) 0, var(--fx-top, #ffffff) var(--fx-split, 290px), transparent var(--fx-split, 290px)),
  radial-gradient(120% 90% at 15% var(--fx-split, 290px), #17352b 0%, #0a0a0a 62%),
  #0a0a0a !important; }
.fx-cta { background: var(--bg-soft, #e3edeb) !important; }
.fx-cta-h { color: #050c0b !important; text-shadow: none !important; }
.fx-cta-p { color: rgba(5,12,11,.62) !important; }
.fx-cta-btn { background: #0a0a0a !important; color: #fff !important; }
.fx-cta-btn:hover { background: #17352b !important; box-shadow: 0 14px 30px -12px rgba(5,12,11,.45) !important; }
.fx-cta-btn:focus-visible { outline-color: #0a0a0a; }
/* wordmark crop raised: about 15% more of the letters and roughly a quarter of the dot show */
.fx-mark { margin-bottom: -0.25em !important; }

/* ===== Footer v4 (2026-09-28): no box inside a box. The inner card's border, shadow and
   radius are gone; its content fills the white panel directly. ===== */
.fx-panel { padding: 64px 64px 0 !important; }
.fx-card { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
@media (max-width: 991px) { .fx-panel { padding: 44px 32px 0 !important; } }
@media (max-width: 600px) { .fx-panel { padding: 32px 22px 0 !important; } }

/* ===== Hero, centred (2026-09-28): the three images are gone; headline, text and CTA sit centred ===== */
.hero-centered .main-hero-top, .hero-centered .main-hero-head { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; }
.hero-centered .about-top-body { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }
.hero-centered .about-top-title.heading-01 { font-size: 72px !important; line-height: 1.02 !important; text-align: center !important; }
.hero-centered .about-top-text { max-width: 620px !important; margin: 22px auto 0 !important; text-align: center !important; font-size: 18px; }
.hero-centered .about-top-btns { display: flex !important; justify-content: center !important; margin-top: 34px !important; }
.hero-centered.main-hero.container-full { padding-top: 120px !important; padding-bottom: 120px !important; }
@media (max-width: 991px) { .hero-centered .about-top-title.heading-01 { font-size: 52px !important; } .hero-centered.main-hero.container-full { padding-top: 72px !important; padding-bottom: 72px !important; } }
@media (max-width: 600px) { .hero-centered .about-top-title.heading-01 { font-size: 40px !important; } .hero-centered .about-top-text { font-size: 16px; } }
/* headline "Deploy your first / self-improving AI agentic / infrastructure." reads as three lines */
.hero-centered .about-top-body { max-width: 1160px !important; }
.hero-centered .about-top-title.heading-01 { max-width: none !important; white-space: normal; }
.hero-centered .main-hero-head { max-width: 1160px !important; }

/* ===== "What we build" cards: same 1120px column as the pricing cards and the logo band edges (2026-09-28) ===== */
.work .work-list { max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }

/* ===== About the studio: button gone, all four metrics on one row (2026-09-28) ===== */
.about .about-stats-wrap._02 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: auto !important; gap: 16px !important; }
.about .about-stats-wrap._02 > * { grid-column: auto !important; grid-row: 1 !important; width: auto !important; min-height: 0 !important; height: auto !important; }
@media (max-width: 991px) { .about .about-stats-wrap._02 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .about .about-stats-wrap._02 > * { grid-row: auto !important; } }

/* ============================================================
   HERO v3 (2026-09-29), measured off the deployyy.co reference at a 1705 x 783 viewport:
   h1 two lines ~40px, subline ~19px in a 440px column, two pill buttons, then a
   796 x 449 stage whose top sits ~64% down the first screen so only its top half shows.
   Inside the stage: a Safari window flush left (495 wide, 43px below the stage top),
   a pin avatar right of it, and a glass dock (454 x 120) bleeding off the right edge.
   All stage internals use --u = 1/796 of the stage width so it scales as one piece.
   ============================================================ */
.hx.main-hero.container-full { padding: 0 !important; display: block !important; }
.hx .changelog-circle-img { display: none !important; }
.hx-inner { max-width: 1120px; margin: 0 auto; padding: 86px 16px 110px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hx-h1 { font-family: 'Aspekta', Arial, sans-serif; font-weight: 500; font-size: 40px; line-height: 1.22; letter-spacing: -.025em; color: #fff; margin: 0; }
.hx-sub { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 460px; margin: 28px auto 0; }
.hx-btns { display: flex; gap: 9px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.hx-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; font-family: 'Aspekta', Arial, sans-serif; font-size: 16px; font-weight: 500; text-decoration: none !important; transition: background-color .2s ease, transform .2s ease; cursor: pointer; }
.hx-btn:hover { transform: translateY(-1px); }
.hx-btn:focus-visible { outline: 2px solid #98ffa1; outline-offset: 3px; }
.hx-btn--solid { background: #98ffa1; color: #05221a !important; }
.hx-btn--solid:hover { background: #b9f6ca; }
.hx-btn--ghost { background: rgba(255,255,255,.1); color: #fff !important; }
.hx-btn--ghost:hover { background: rgba(255,255,255,.16); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hx-btn { transition: none; } }

/* the stage: low contrast, a shade lighter than the hero, never a bright panel */
.hx-stage { --u: calc(100cqw / 796); container-type: inline-size; position: relative; width: min(796px, 100%); aspect-ratio: 796 / 449; margin-top: 80px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; text-align: left; }
.hx-stage > * { position: absolute; }

/* Safari window */
.hx-browser { left: 0; top: calc(var(--u) * 43); width: calc(var(--u) * 495); bottom: 0; background: #0f1512; border-top-right-radius: calc(var(--u) * 8); overflow: hidden;
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); border-left: 0; border-bottom: 0; }
.hx-chrome { height: calc(var(--u) * 38); display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 10); background: #1a211d; border-bottom: 1px solid rgba(255,255,255,.06); }
.hx-dots { display: flex; gap: calc(var(--u) * 5); }
.hx-dots i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: #ff5f57; display: block; }
.hx-dots i:nth-child(2) { background: #febc2e; } .hx-dots i:nth-child(3) { background: #28c840; }
.hx-ico { color: rgba(255,255,255,.45); font-size: calc(var(--u) * 13); line-height: 1; }
.hx-ico--side { width: calc(var(--u) * 13); height: calc(var(--u) * 10); border: 1px solid rgba(255,255,255,.4); border-radius: calc(var(--u) * 2); }
.hx-ico--r { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border: 1px solid rgba(255,255,255,.35); border-radius: calc(var(--u) * 3); }
.hx-ico--r:first-of-type { margin-left: auto; }
.hx-url { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 26); border-radius: calc(var(--u) * 6); background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7); font-size: calc(var(--u) * 9.5); font-family: 'Aspekta', Arial, sans-serif; margin-left: calc(var(--u) * 6); }
.hx-lock { width: calc(var(--u) * 6); height: calc(var(--u) * 7); border-radius: 1px; background: rgba(255,255,255,.55); }
.hx-ico--r ~ .hx-ico--r { margin-left: 0; }
.hx-page { position: absolute; left: 0; right: 0; top: calc(var(--u) * 38); bottom: 0; text-align: center; overflow: hidden;
  background:
    radial-gradient(calc(var(--u) * 260) calc(var(--u) * 220) at 100% 58%, rgba(152,255,161,.30), transparent 70%),
    radial-gradient(calc(var(--u) * 300) calc(var(--u) * 200) at 0% 100%, rgba(46,154,94,.35), transparent 70%),
    linear-gradient(180deg, #111a15 0%, #0e1511 100%); }
.hx-page::after { content: ""; position: absolute; left: 0; bottom: 0; width: 55%; height: 45%;
  background-image: radial-gradient(rgba(152,255,161,.35) 1px, transparent 1.3px); background-size: calc(var(--u) * 7) calc(var(--u) * 7);
  -webkit-mask-image: linear-gradient(35deg, #000 20%, transparent 70%); mask-image: linear-gradient(35deg, #000 20%, transparent 70%); pointer-events: none; }
.hx-page-h { margin-top: calc(var(--u) * 26); font-family: 'Aspekta', Arial, sans-serif; font-weight: 500; font-size: calc(var(--u) * 30); line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.hx-bar { height: calc(var(--u) * 11); margin: 0 auto; border-radius: 2px; background: linear-gradient(90deg, rgba(152,255,161,.18), rgba(152,255,161,.08)); }
.hx-bar--1 { width: calc(var(--u) * 268); margin-top: calc(var(--u) * 16); }
.hx-bar--2 { width: calc(var(--u) * 156); margin-top: calc(var(--u) * 9); }
.hx-pills { display: flex; justify-content: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 13); }
.hx-pill { width: calc(var(--u) * 52); height: calc(var(--u) * 16); border-radius: 999px; }
.hx-pill--a { background: linear-gradient(90deg, #98ffa1, #2e9a5e); }
.hx-pill--b { border: 1px solid rgba(152,255,161,.7); }
.hx-card { position: absolute; left: calc(var(--u) * 100); top: calc(var(--u) * 180); width: calc(var(--u) * 288); height: calc(var(--u) * 166); z-index: 1;
  background: #0b100d; border: 1.5px solid rgba(152,255,161,.55); border-radius: calc(var(--u) * 7); }
.hx-tasks { position: absolute; left: calc(var(--u) * 50); top: calc(var(--u) * 24); width: calc(var(--u) * 190); padding: calc(var(--u) * 8); text-align: left;
  background: #141b17; border: 1px solid rgba(255,255,255,.08); border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0,0,0,.35); }
.hx-tasks-h { display: flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 9); font-weight: 600; color: #fff; padding-bottom: calc(var(--u) * 6); border-bottom: 1px solid rgba(255,255,255,.07); }
.hx-tasks-ico { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 2); background: #98ffa1; }
.hx-row { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 5) 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.hx-row:last-child { border-bottom: 0; }
.hx-row b { display: block; font-size: calc(var(--u) * 7); font-weight: 500; color: rgba(255,255,255,.85); }
.hx-row em { display: block; font-style: normal; font-size: calc(var(--u) * 4.6); letter-spacing: .08em; color: rgba(255,255,255,.4); margin-top: calc(var(--u) * 1.5); }
.hx-tag { font-size: calc(var(--u) * 4.4); letter-spacing: .06em; padding: calc(var(--u) * 1.5) calc(var(--u) * 3.5); border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.hx-tag--hold { background: #98ffa1; color: #05221a; }
.hx-tag--done { background: rgba(152,255,161,.16); color: #98ffa1; }
.hx-agent { position: absolute; left: calc(var(--u) * 36); top: calc(var(--u) * 122); font-size: calc(var(--u) * 5); letter-spacing: .08em; padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: 999px; background: #98ffa1; color: #05221a; font-weight: 600; }
.hx-brand { position: absolute; right: calc(var(--u) * 12); bottom: calc(var(--u) * 7); display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 9); font-weight: 600; color: #fff; font-family: 'Aspekta', Arial, sans-serif; }
.hx-brand img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 3); }

/* pin avatar: a map-pin pointing left at the browser */
.hx-pin { left: calc(var(--u) * 504); top: calc(var(--u) * 65); width: calc(var(--u) * 78); height: calc(var(--u) * 78); border-radius: 50%; padding: calc(var(--u) * 5);
  background: linear-gradient(135deg, #98ffa1, #2e9a5e); box-sizing: border-box; z-index: 2; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.35); }
.hx-pin::before { content: ""; position: absolute; left: calc(var(--u) * -9); top: 50%; width: calc(var(--u) * 26); height: calc(var(--u) * 26); transform: translateY(-50%) rotate(45deg);
  background: #7fe28c; border-radius: calc(var(--u) * 3); z-index: -1; }
.hx-pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; position: relative; }

/* glass dock bleeding off the right edge */
.hx-dock { right: 0; top: calc(var(--u) * 288); width: calc(var(--u) * 454); height: calc(var(--u) * 120); z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * 17); padding-left: calc(var(--u) * 20);
  box-sizing: border-box; border-radius: calc(var(--u) * 12) 0 0 calc(var(--u) * 12);
  background: linear-gradient(90deg, rgba(152,255,161,.26) 0%, rgba(46,154,94,.16) 32%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.05) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.1); border-right: 0; box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(0,0,0,.3); }
.hx-app { position: relative; flex: 0 0 auto; width: calc(var(--u) * 77); height: calc(var(--u) * 77); border-radius: calc(var(--u) * 17); overflow: visible;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.35); }
.hx-app--white { background: #fff; }
.hx-app--white img { width: 64%; height: 64%; object-fit: contain; }
.hx-app--white svg { width: 86%; height: 86%; }
.hx-app--fill { background: #1669ff; overflow: hidden; }
.hx-app--fill img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hx-app--on::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -13); width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -2.5); border-radius: 50%; background: rgba(255,255,255,.55); }
.hx-sep { width: 1px; height: calc(var(--u) * 60); background: rgba(255,255,255,.18); margin: 0 calc(var(--u) * 14); }

@media (max-width: 991px) { .hx-inner { padding: 64px 16px 80px; } .hx-h1 { font-size: 32px; } .hx-sub { font-size: 17px; } .hx-stage { margin-top: 56px; } }
@media (max-width: 600px) { .hx-h1 { font-size: 26px; } .hx-h1 br { display: none; } .hx-sub { font-size: 16px; } .hx-btn { font-size: 15px; } }
/* hero v3 tuning after measuring against the reference at 1705 x 783 */
.hx-inner { padding-top: 80px; }
.hx-sub { max-width: 580px; margin-top: 22px; }
.hx-btns { margin-top: 33px; }
.hx-btn { height: 42px; }
.hx-sep { margin: 0 calc(var(--u) * 16); }
.hx-ico--first { margin-left: auto !important; }
.hx-dock { gap: calc(var(--u) * 19); }
/* stage text inherits Webflow's tall body line-height; pin it so the tiny UI mock stays tight */
.hx-stage, .hx-stage * { line-height: 1.25; }
.hx-tag, .hx-agent, .hx-url, .hx-brand, .hx-tasks-h { line-height: 1 !important; white-space: nowrap; }
.hx-row { gap: calc(var(--u) * 6); }
.hx-row b, .hx-row em { white-space: nowrap; }
.hx-dock { background: linear-gradient(90deg, rgba(152,255,161,.34) 0%, rgba(62,170,105,.22) 30%, rgba(255,255,255,.07) 62%, rgba(255,255,255,.05) 100%) !important; }
.hx-agent { left: calc(var(--u) * 38) !important; top: calc(var(--u) * 140) !important; }
/* agent cards slide in from the right; clip so the pre-animation offset never adds a horizontal scroll */
.agents.container-full { overflow-x: clip; }
/* Google Calendar ships as its own shaped icon on transparency: no white tile behind it */
.hx-app--bare { background: transparent; box-shadow: none; }
.hx-app--bare img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0,0,0,.35)); }

/* ===== Why-call v2 (2026-09-29): six reason cards in 3 columns + the call card, widened to the 1120px column ===== */
.whycall-layout { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 1120px; width: 100%; justify-content: stretch !important; }
.whycall-grid { grid-column: 1 / 4 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.whycall-card { height: 200px; }
@media (max-width: 991px) {
  .whycall-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .whycall-grid { grid-column: 1 / 3 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .whycall-phone { grid-column: 1 / 3 !important; }
}
@media (max-width: 520px) {
  .whycall-layout, .whycall-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .whycall-grid, .whycall-phone { grid-column: 1 !important; }
}

/* ===== Pricing order (2026-09-29): Done-for-You first, Newsletter last, so the eye lands on the call ===== */
.pricing-item--dfy { order: 1; }
.pricing-item:not(.pricing-item--dfy):not(.pricing-item--nl) { order: 2; }
.pricing-item--nl { order: 3; }

/* ===== Pricing scale (2026-09-29): heading matches the other section heads (54px), cards read bigger,
   content starts near the top of the section instead of floating in the middle ===== */
section.pricings .pricing-head .blog-title.heading-02 { font-size: 54px !important; line-height: 1 !important; margin-bottom: 8px !important; }
.pricings.container-full { align-items: flex-start !important; padding-top: 120px !important; }
.pricings .pricing-content { gap: 48px !important; }
.pricings .pricing-item-pro-text.title-02 { font-size: 24px !important; line-height: 1.2 !important; }
.pricings .pricing-item-pro-txt.para-regular { font-size: 16px !important; }
.pricings .pricing-dollar.heading-02 { font-size: 52px !important; line-height: 1.05 !important; }
.pricings .pricing-feature-text.para-regular { font-size: 16px !important; }
@media (max-width: 991px) { section.pricings .pricing-head .blog-title.heading-02 { font-size: 40px !important; } .pricings.container-full { padding-top: 88px !important; } }
@media (max-width: 600px) { section.pricings .pricing-head .blog-title.heading-02 { font-size: 34px !important; } .pricings .pricing-dollar.heading-02 { font-size: 42px !important; } }
.hx-sub { max-width: 690px !important; }

/* ===== Hero browser v2 (2026-09-29): a real Safari toolbar, every glyph on one centre line,
   laid out from the reference strip (sidebar, back, forward, shield, URL pill with lock and reload,
   download, share, plus, tabs). Light toolbar like macOS Safari. ===== */
.hx-chrome { position: relative; height: calc(var(--u) * 38) !important; padding: 0 !important; gap: 0 !important; display: block !important;
  background: #f4f4f3 !important; border-bottom: 1px solid #e1e1df !important; }
.hx-chrome > * { position: absolute; top: 50%; transform: translateY(-50%); }
.hx-dots { left: calc(var(--u) * 11); display: flex; gap: calc(var(--u) * 6); }
.hx-dots i { width: calc(var(--u) * 10) !important; height: calc(var(--u) * 10) !important; }
.sf { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #6d6d6b; display: block; }
.sf-side { left: calc(var(--u) * 66); }
.sf-back { left: calc(var(--u) * 94); }
.sf-fwd { left: calc(var(--u) * 116); color: #bdbdbb; }
.sf-shield { left: calc(var(--u) * 150); width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.sf-url { left: calc(var(--u) * 174); width: calc(var(--u) * 216); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 7); background: #e7e7e5;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); }
.sf-url .sf { position: static; transform: none; }
.sf-lock { width: calc(var(--u) * 9) !important; height: calc(var(--u) * 9) !important; color: #7a7a78 !important; }
.sf-host { font-family: -apple-system, 'SF Pro Text', 'Aspekta', Arial, sans-serif; font-size: calc(var(--u) * 10); line-height: 1; color: #3b3b39; letter-spacing: 0; }
.sf-reload { position: absolute !important; right: calc(var(--u) * 7); top: 50% !important; transform: translateY(-50%) !important; width: calc(var(--u) * 11) !important; height: calc(var(--u) * 11) !important; }
.sf-dl { left: calc(var(--u) * 404); }
.sf-share { left: calc(var(--u) * 428); }
.sf-plus { left: calc(var(--u) * 451); }
.sf-tabs { left: calc(var(--u) * 472); }
.hx-browser { background: #0f1512; }
/* the task card: logo top-left, AGENT top-right, wordmark bottom-left */
.hx-card-logo { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 10); width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 4); }
.hx-agent { left: auto !important; right: calc(var(--u) * 10) !important; top: calc(var(--u) * 11) !important; }
.hx-brand { right: auto !important; left: calc(var(--u) * 10) !important; bottom: calc(var(--u) * 8) !important; }
.hx-tasks { top: calc(var(--u) * 34) !important; }
/* task card moved left with a clear gap before the dock (dock starts at 342u) */
.hx-card { left: calc(var(--u) * 36) !important; width: calc(var(--u) * 270) !important; }
.hx-tasks { left: calc(var(--u) * 40) !important; }

/* ===== Hero mock v3 (2026-09-29): breathing room under the pills, a cursor with an AGENT tag
   clicking the task list, three collaborator faces on the task card, no wordmark ===== */
.hx-page-h { margin-top: calc(var(--u) * 20) !important; }
.hx-card { top: calc(var(--u) * 190) !important; height: calc(var(--u) * 156) !important; }
.hx-tasks { top: calc(var(--u) * 30) !important; overflow: visible !important; }
.hx-faces { position: absolute; right: calc(var(--u) * -12); top: calc(var(--u) * -16); display: flex; }
.hx-faces img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; object-fit: cover; border: calc(var(--u) * 2) solid #141b17; margin-left: calc(var(--u) * -7); display: block; }
.hx-agent { left: calc(var(--u) * 8) !important; right: auto !important; top: calc(var(--u) * 128) !important; background: #98ffa1 !important; color: #05221a !important; }
.hx-cursor { position: absolute; left: calc(var(--u) * 37); top: calc(var(--u) * 114); width: calc(var(--u) * 11); height: calc(var(--u) * 14); z-index: 2; }
.hx-cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* multiplayer cursor like the reference: the arrow's tip points up-right into the task list,
   and the AGENT tag hangs off the arrow's lower-left, so tag and arrow read as one pointer */
.hx-cursor { left: calc(var(--u) * 37) !important; top: calc(var(--u) * 118) !important; width: calc(var(--u) * 10) !important; height: calc(var(--u) * 10) !important; }
.hx-cursor svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)) !important; }
.hx-agent { left: auto !important; right: calc(var(--u) * 229) !important; top: calc(var(--u) * 126) !important; }
.hx-agent { right: calc(var(--u) * 227.5) !important; top: calc(var(--u) * 124) !important; }

/* headline accent: same mint as the Book a call buttons */
.hx-h1 .hx-accent { color: #98ffa1; }
/* dock tiles that ship as full-bleed squares */
.hx-app--claude { background: #d97757; }
.hx-app--cal { background: #292929; }
.hx-app--fill { overflow: visible !important; }
.hx-app--fill img { border-radius: calc(var(--u) * 17); }
/* Airtable glyph 50% larger inside its white tile (64% -> 96%) */
.hx-app--white img[src*="airtable"] { width: 96% !important; height: 96% !important; }
.hx-app--clip { overflow: hidden !important; }
/* Airtable glyph reduced 20% (96% -> 77%) */
.hx-app--white img[src*="airtable"] { width: 77% !important; height: 77% !important; }

/* hero eyebrow, the reference's small mono label above the headline (clean, no slashes) */
.hx-eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 22px; }
.hx-inner { padding-top: 42px; }
.hx-app--meta { background: #f2f2f2; overflow: hidden !important; }

/* hero stage 10% wider on each side (796 -> 955); everything inside scales with it via --u */
.hx-stage { width: min(955px, 100%) !important; --u: calc(100cqw / 796); }
.hx-inner { max-width: 1140px; }

/* ===== One content column (2026-09-29): every home section uses the same 1120px column as
   "What we build", so left and right edges line up down the whole page ===== */
.work .container-fluid, .about .container-fluid, .agents .container-fluid, .whycall .container-fluid,
.pricings .container-fluid, .tsl .container-fluid, .faqs .container-fluid { max-width: 1120px !important; }

/* footer: reopen the cookie panel (cookie-consent.js) */
.fx-cookie { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: rgba(5,12,11,.6); text-decoration: underline; text-underline-offset: 3px; }
.fx-cookie:hover { color: #050c0b; }
.fx-cookie:focus-visible { outline: 2px solid #0a4a2c; outline-offset: 3px; }

/* ===== Case studies hero, centred (2026-09-29): photo removed, eyebrow in the home hero's format ===== */
.cs-l-hero--center .cs-l-hero-grid { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; grid-template-columns: none !important; }
.cs-l-hero--center .cs-l-hero-left { display: flex; flex-direction: column; align-items: center; max-width: 820px; margin: 0 auto; text-align: center; }
.cs-l-hero--center .hx-eyebrow { margin: 0 0 22px; }
.cs-l-hero--center .cs-l-h1 { text-align: center; }
.cs-l-hero--center .cs-l-lead { text-align: center; margin-left: auto; margin-right: auto; max-width: 620px; }
.cs-l-hero--center .cs-l-hero-btn { align-self: center; }
/* the eyebrow lives in the home hero block; give it its base style here too */
.hx-eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
/* footer legal row: Cookie preferences at exactly the link size */
.fx-legal a, .fx-legal .fx-cookie { font-size: 14px !important; line-height: 1.4 !important; font-family: 'Aspekta', Arial, sans-serif !important; }
/* centred hero: content and logo band sit together in the middle of the screen, no empty band */
.cs-l-hero.cs-l-hero--center { justify-content: center !important; }
.cs-l-hero--center .cs-hero-trust { margin-top: 72px !important; }

/* ===== Mobile menu v2 (2026-09-29): clean single-column menu, replaces template junk ===== */
.menu-wrap-3._02 .mm { display: flex !important; flex-direction: column !important; gap: 0 !important; min-height: 100%; width: 100% !important; max-width: 560px; margin: 0 auto; padding: 0 !important; box-sizing: border-box; }
.mm-top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-bottom: 28px; }
.mm-top .nav-toggle-btn-wrap { position: static !important; margin: 0 !important; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mm-logo { font-family: 'Aspekta', Arial, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: #fff !important; text-decoration: none; }
.mm-links { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.08); }
.mm-link { display: flex; align-items: center; min-height: 56px; font-family: 'Aspekta', Arial, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .2s ease; }
.mm-link:hover, .mm-link:focus-visible, .mm-link[aria-current="page"] { color: #98ffa1 !important; }
.mm-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.mm-btn { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 40px; font-family: 'Aspekta', Arial, sans-serif; font-size: 16px; font-weight: 500; text-decoration: none; transition: background .2s ease, color .2s ease; }
.mm-btn--solid { background: #98ffa1; color: #05221a !important; }
.mm-btn--solid:hover { background: #b9f6ca; }
.mm-btn--ghost { background: rgba(255,255,255,.08); color: #fff !important; }
.mm-btn--ghost:hover { background: rgba(255,255,255,.14); }
.mm-foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.mm-foot .menu-social-insides { display: flex !important; gap: 10px !important; margin: 0 !important; }
.mm-foot .menu-social-icon { width: 44px !important; height: 44px !important; }
.mm-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: rgba(255,255,255,.5); }
.mm-legal a { color: rgba(255,255,255,.7) !important; text-decoration: none; }
.mm-legal a:hover { color: #fff !important; }
.mm a:focus-visible, .mm .nav-toggle-btn-wrap:focus-visible { outline: 2px solid #98ffa1; outline-offset: 3px; }
/* menu open state (driven by mobile-fixes.js) */
.menu-wrap-3._02 { display: none !important; }
.menu-wrap-3._02.mm-open { display: block !important; opacity: 1 !important; transform: none !important; position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: #050c0b !important; overflow-y: auto !important; padding: 12px 20px 24px !important; animation: mmIn .25s ease; }
@keyframes mmIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-wrap-3._02.mm-open { animation: none; } }
html.mm-lock, html.mm-lock body { overflow: hidden !important; }
.menu-wrap-3._02 .mm { min-height: calc(100vh - 36px); min-height: calc(100svh - 36px); }
.mm-top .nav-toogle-btn { position: static !important; width: 26px !important; height: 26px !important; inset: auto !important; color: #fff; }
/* tablet + phone navbar: hamburger visible up to 991px (links are hidden there),
   Book a call pill kept beside it where it fits */
@media (max-width: 991px) {
  .navbar > .nav-toggle-btn-wrap { display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; order: 99; margin-left: 6px !important; cursor: pointer; flex: 0 0 auto; }
  .navbar > .nav-toggle-btn-wrap .nav-toogle-btn { width: 26px !important; height: 26px !important; }
  .navbar-right { margin-left: auto !important; }
  .navbar-right .nav-cta-pair { display: flex !important; }
  .nav-cta--solid { display: inline-flex !important; height: 36px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 339px) { .navbar-right .nav-cta-pair { display: none !important; } }
@media (max-width: 991px) {
  .navbar-wrap:not(.nav-light) .navbar > .nav-toggle-btn-wrap .nav-toogle-btn { color: #fff !important; }
  .navbar-right { display: flex !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
}
/* pricing on tablet + phone: one readable column instead of three squeezed cards */
@media (max-width: 991px) {
  .pricings .pricing-list { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; max-width: 560px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; gap: 16px !important; }
  .pricings .pricing-item { width: 100% !important; max-width: none !important; height: auto !important; }
}
/* about stats: the purple card (._03) centred its content on tablet; align all four left like the rest */
@media (max-width: 991px) {
  .about-stats-02._03, .about-stats-02._03 .about-stat-body._02 { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
}
/* why-call cards: fixed 200px height left big empty boxes on phones */
@media (max-width: 560px) {
  .whycall-card { height: auto !important; min-height: 0 !important; gap: 14px !important; padding: 20px !important; }
}
/* footer bottom row on tablet + phone: copyright on its own line, legal links never break mid-label */
@media (max-width: 991px) {
  .fx-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .fx-legal { flex-wrap: wrap !important; gap: 10px 22px !important; }
  .fx-legal a, .fx-legal .fx-cookie { white-space: nowrap !important; }
  .fx-socials { gap: 6px !important; }
  .fx-soc { width: 40px !important; height: 40px !important; padding: 9px !important; box-sizing: border-box; margin-left: -9px; }
  .fx-soc + .fx-soc { margin-left: 0; }
}
/* booking embed: Cal stacks its panels on narrow screens, so a short frame meant a scroll box
   inside the page. Give it room so the page scrolls, not the frame. */
@media (max-width: 991px) { .book-cal { height: 1560px !important; } }
@media (max-width: 767px) { .book-cal { height: 1500px !important; } }
/* SEO: page titles promoted to h1 keep their original look */
h1.about-cotnent-text, h1.style-guide-title { margin-top: 0; margin-bottom: 0; }